/* =====================================================================
   SIBOS 2026 Booking - stylesheet
   Palette aligned to the China Systems corporate brand (chinasystems.com):
     - corporate BLUE  #0070e0  (the "China Systems" wordmark)   -> --brand-blue
     - corporate ORANGE #f57600 (the "CS" badge / highlights)    -> --accent
     - charcoal text   #2b2d30, muted grey #6c757d, white / #f8f9fa base
     - type: Oswald (headings) + Montserrat (body), corporate fonts
   Token system: three skins chosen from the header picker and saved to
   localStorage('sibosbook.theme'):
     - CS    html[data-theme="cs"]    the corporate brand skin + DEFAULT
     - Light html[data-theme="light"] clean light (phones / sunlight)
     - Dark  html[data-theme="dark"]  = :root (no override block needed)
   Never write a colour literal in a rule - add a token here. Motto stays:
   "Intelligence with Governance".
   ===================================================================== */
:root {
    color-scheme: dark;
    --bg: #1e2124;
    --panel: #282b30;
    --panel-2: #232629;
    --border: #3a3f45;
    --border-2: #464c53;
    --hair: #33383e;
    --text: #e6e8eb;
    --heading: #ffffff;
    --muted: #a4abb3;
    --muted-2: #9aa1a9;
    --field-bg: #1a1d21;
    --accent: #f57600;          /* corporate orange (CTAs, selected slots) */
    --accent-ink: #5aa9ff;      /* blue as text/links (lightened for dark) */
    --on-accent: #241300;       /* dark text on the orange accent (AA) */
    --brand-blue: #0070e0;      /* corporate blue (wordmark, focus, badges) */
    --ok: #1d9e75;
    --ok-fg: #7fe3c4;
    --bad: #e24b4a;
    --bad-fg: #f2a3a3;
    --warn: #e0a03d;
    --warn-bg: #241d12;
    --warn-border: #4a3a24;
    --teal: #3ec8c0;
    --plate: #ffffff;
    --card-shadow: none;
    --accent-rgb: 245,118,0;
    --brand-blue-rgb: 0,112,224;
    --ok-rgb: 29,158,117;
    --bad-rgb: 226,75,74;
}
html[data-theme="light"] {
    color-scheme: light;
    --bg: #eceff3;
    --panel: #ffffff;
    --panel-2: #f8f9fa;         /* corporate light-grey section */
    --border: #dee2e6;
    --border-2: #ced4da;
    --hair: #e6e9ee;
    --text: #2b2d30;            /* corporate body text */
    --heading: #212529;
    --muted: #6c757d;           /* corporate muted grey */
    --muted-2: #6c757d;
    --field-bg: #ffffff;
    --accent: #f57600;
    --accent-ink: #0062c4;      /* blue as text/links (deepened for AA on white) */
    --on-accent: #241300;
    --brand-blue: #0070e0;
    --ok: #0f7a56;
    --ok-fg: #0f7a56;
    --bad: #b52d28;
    --bad-fg: #b52d28;
    --warn: #8a5a00;
    --warn-bg: #fdf3dd;
    --warn-border: #e6cf94;
    --teal: #0f7a70;
    --card-shadow: 0 1px 3px rgba(16,24,48,.10), 0 1px 2px rgba(16,24,48,.06);
    --accent-rgb: 245,118,0;
    --brand-blue-rgb: 0,112,224;
    --ok-rgb: 15,122,86;
    --bad-rgb: 181,45,40;
}
/* CS — the corporate brand skin and the app default (China Systems design system):
   blue-forward and clean. Cool blue-tinted neutrals, deep-navy Oswald headings, corporate
   blue for links/focus, orange reserved for CTAs/highlights. Light-based (white cards) to
   match the CS product screens; semantic colours reuse the AA-safe light-theme values. */
html[data-theme="cs"] {
    color-scheme: light;
    --bg: #eef2f8;              /* soft, cool blue-grey field */
    --panel: #ffffff;
    --panel-2: #f3f7fc;         /* subtle blue-tinted section */
    --border: #d6dfec;
    --border-2: #c1cddd;
    --hair: #e5ecf5;
    --text: #1f2b39;            /* deep blue-charcoal body text */
    --heading: #0a2e57;         /* corporate deep navy for headings (trust / authority) */
    --muted: #5a6a7d;
    --muted-2: #6a7889;
    --field-bg: #ffffff;
    --accent: #f57600;          /* corporate orange — CTAs / highlights, used sparingly */
    --accent-ink: #0062c4;      /* corporate blue as links (AA on white) */
    --on-accent: #241300;
    --brand-blue: #0070e0;
    --ok: #0f7a56;
    --ok-fg: #0f7a56;
    --bad: #b52d28;
    --bad-fg: #b52d28;
    --warn: #8a5a00;
    --warn-bg: #fdf3dd;
    --warn-border: #e6cf94;
    --teal: #0f7a70;
    --card-shadow: 0 1px 3px rgba(10,46,87,.12), 0 1px 2px rgba(10,46,87,.07);
    --accent-rgb: 245,118,0;
    --brand-blue-rgb: 0,112,224;
    --ok-rgb: 15,122,86;
    --bad-rgb: 181,45,40;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: "Oswald", "Montserrat", "Segoe UI", system-ui, sans-serif; color: var(--heading); line-height: 1.2; font-weight: 600; letter-spacing: .01em; }
h1 { font-size: 1.7rem; margin: .2rem 0 .6rem; }
h2 { font-size: 1.25rem; margin: 1.4rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---- top bar ---- */
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1.1rem; background: var(--panel); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.mark {
    display: inline-block; width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto;
}
.wordmark { font-family: "Oswald", "Montserrat", "Segoe UI", system-ui, sans-serif;
    font-weight: 600; font-size: 1.12rem; color: var(--brand-blue); letter-spacing: .01em; }
.motto { color: var(--brand-blue); font-size: .82rem; font-style: italic; margin-left: .3rem;
    padding-left: .6rem; border-left: 1px solid var(--hair); }
.topbar-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.adminnav { display: flex; gap: .2rem; flex-wrap: wrap; }
.adminnav a { color: var(--text); padding: .35rem .6rem; border-radius: 7px; }
.adminnav a:hover { background: rgba(var(--brand-blue-rgb), .12); text-decoration: none; }
/* hamburger toggle — hidden on desktop, shown on narrow screens by the mobile block below */
.navtoggle { display: none; align-items: center; justify-content: center; flex: 0 0 auto;
    background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 9px;
    padding: .4rem .5rem; cursor: pointer; color: var(--heading); }
.navtoggle:hover { border-color: var(--accent); }

/* ====================================================================
   Pass 1 — admin console on phones/tablets. Collapses the top nav into a
   hamburger dropdown, lets dense tables/calendar scroll sideways instead of
   breaking the page, and tidies modals. Desktop layout is unaffected.
   ==================================================================== */
@media (max-width: 720px) {
    .topbar { flex-wrap: wrap; row-gap: .5rem; padding: .6rem .8rem; }
    .brand { flex: 1 1 auto; }
    .wordmark { font-size: 1rem; }
    .navtoggle { display: inline-flex; }
    .topbar-right { width: 100%; order: 5; gap: .5rem .6rem; }
    .adminnav { display: none; width: 100%; flex-direction: column; gap: .12rem;
        background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .35rem; }
    .adminnav.open { display: flex; }
    .adminnav a { padding: .6rem .7rem; border-radius: 8px; font-size: 1rem; }

    /* wide data tables scroll sideways within their own box (Pass 2 makes them cards) */
    table.list { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.list thead, table.list tbody { display: table; width: 100%; min-width: max-content; }
    table.list th, table.list td { white-space: nowrap; }

    /* modals: use more of the small screen, let the key column wrap */
    .modal-back { padding: .6rem; }
    .modal-card { padding: 1.1rem 1.1rem; max-height: 92vh; }
    .kvtab th { width: auto; white-space: normal; padding-right: .6rem; }
}
.who {
  color: var(--heading);
  font-size: .8rem;
  font-weight: 600;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: .32rem .7rem;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
/* small accent dot before the signed-in name */
.who::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
/* slim "Intelligence with Governance" indicator strip (dashboard) */
.govstrip { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    font-size: .8rem; padding: .3rem .7rem; margin: .1rem 0 .7rem;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; }
.govstrip-t { font-weight: 700; color: var(--heading); }
.govstrip .badge { font-size: .66rem; }
.govdet summary { cursor: pointer; color: var(--muted); font-size: .78rem; list-style: none; }
.govdet summary::-webkit-details-marker { display: none; }
.govdet summary::before { content: '\24D8'; margin-right: .25rem; }   /* ⓘ */
.list tr.clickrow { cursor: pointer; }
.list tr.clickrow:hover { background: rgba(var(--brand-blue-rgb), .06); }
.topbar-date { color: var(--muted); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.topbar-date.simdate .td-val { color: var(--accent); font-weight: 700; }
.topbar-date .simbadge { background: var(--accent); color: #241300; font-size: .66rem; font-weight: 800;
    padding: 2px 7px; border-radius: 20px; letter-spacing: .03em; margin-right: .2rem; }
@media (max-width: 900px) { .topbar-date { display: none; } }
/* theme picker (CS / Light / Dark) */
/* one-time, non-reflowing status toast (e.g. "Running in local security mode") — fixed so it
   never affects page layout; fades in/out via the .show class */
.sb-toast { position: fixed; top: 74px; left: 50%; transform: translateX(-50%) translateY(-8px);
    z-index: 1200; background: var(--panel-2); color: var(--heading);
    border: 1px solid var(--border-2); border-radius: 999px; padding: .5rem 1.05rem;
    font-size: .82rem; font-weight: 600; line-height: 1; white-space: nowrap;
    box-shadow: 0 8px 24px rgba(10,28,50,.16); opacity: 0; pointer-events: none;
    transition: opacity .35s ease, transform .35s ease; }
.sb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* segmented Light/Dark theme toggle — brand pill, active segment in CS orange */
.themepick { flex: 0 0 auto; display: inline-flex; align-items: stretch;
    background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 2px; gap: 2px; }
.themeopt { font: inherit; font-size: .78rem; font-weight: 600; color: var(--muted);
    background: transparent; border: 0; border-radius: 999px; padding: .34rem .8rem; cursor: pointer;
    line-height: 1; transition: background .15s ease, color .15s ease; }
.themeopt:hover { color: var(--heading); }
.themeopt.on { background: var(--accent); color: #fff; }
.themeopt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- layout ---- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 1.2rem 1.1rem 3rem; }
/* the admin console has wide data tables (the dashboard "Next up", queue, etc.) - give it more room */
body.admin .wrap { max-width: 1280px; }
.card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 1.1rem 1.2rem; margin: 0 0 1rem; box-shadow: var(--card-shadow);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } .motto { display: none; } }

/* ---- full-page skyline background (public pages) ----
   The Miami skyline (images/hero-sibos.jpg) sits fixed behind the whole public site, so the
   floating white cards read against it and the page margins are filled. Painted on a fixed
   ::before (robust on iOS, unlike background-attachment:fixed) with a soft navy wash for
   legibility. Admin pages keep their plain themed background. */
body.public { background: #0c1830; display: flex; flex-direction: column; min-height: 100vh; }
body.public::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(6,12,30,.34), rgba(6,12,30,.5)),
        url("../images/hero-sibos.jpg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
/* sticky footer: the main content grows to fill the viewport so the footer always sits
   at the bottom of the screen on short pages, and after the content on long ones.
   (No z-index on .wrap: a stacking context there would trap the team modal behind the topbar.) */
body.public > .topbar { flex: 0 0 auto; }
body.public .wrap { flex: 1 0 auto; width: 100%; }
body.public .foot { flex: 0 0 auto;
    color: #dbe6f5; border-top: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(115deg, rgba(8,16,34,.82) 0%, rgba(4,26,58,.7) 55%, rgba(6,12,32,.78) 100%);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.public .foot .foot-motto { color: #ffd7a8; }

/* ---- public content cards: same dark glass branding as the hero band ----
   White inputs stay for legibility; text/headings/labels flip to light so they read on glass. */
body.public .card {
    background: linear-gradient(115deg, rgba(8,16,34,.72) 0%, rgba(4,26,58,.6) 55%, rgba(6,12,32,.66) 100%);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    border: 1px solid rgba(255,255,255,.16); color: #e7eefb;
    box-shadow: 0 10px 30px rgba(8,16,34,.28);
}
body.public .card h1, body.public .card h2, body.public .card h3 { color: #ffffff; }
body.public .card .muted { color: rgba(219,230,245,.82); }
body.public .card label { color: rgba(219,230,245,.88); }
body.public .card a { color: #8fbcff; }
body.public .card .cal thead th { color: #ffffff; }
body.public .card .cal .time { color: rgba(219,230,245,.82); }

/* ---- refined glass form controls (public cards) ----
   Frosted translucent fields with light text instead of stark white boxes: softer on the eye,
   with clear hover/focus feedback and a highlighted selected state on the meeting-length pills. */
body.public .card input:not([type=radio]):not([type=checkbox]),
body.public .card select,
body.public .card textarea {
    background-color: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.24);
    color: #eef4ff; border-radius: 10px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.public .card input:not([type=radio]):not([type=checkbox])::placeholder,
body.public .card textarea::placeholder { color: rgba(226,235,250,.52); }
body.public .card input:not([type=radio]):not([type=checkbox]):hover,
body.public .card select:hover,
body.public .card textarea:hover {
    background-color: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42);
}
body.public .card input:not([type=radio]):not([type=checkbox]):focus,
body.public .card select:focus,
body.public .card textarea:focus {
    outline: none; border-color: var(--brand-blue);
    background-color: rgba(255,255,255,.16);
    box-shadow: 0 0 0 3px rgba(var(--brand-blue-rgb), .38);
}
/* the native select arrow is invisible on the dark field, so draw a light chevron */
body.public .card select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cfe0f5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.3rem;
}
body.public .card select option { color: #16202e; background: #ffffff; }
/* meeting-length pills: glass chips with a clear selected state */
body.public .card .pill {
    background-color: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.24); color: #e7eefb;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: border-color .15s ease, background-color .15s ease;
}
body.public .card .pill:hover { background-color: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); }
body.public .card .pill:has(input:checked) {
    border-color: var(--accent); background-color: rgba(var(--accent-rgb), .24); color: #fff; font-weight: 600;
}
/* white, more legible label on the solid (orange) buttons; ghost/Theme button unchanged */
body.public .btn:not(.ghost) { color: #ffffff; text-shadow: 0 1px 1px rgba(0,0,0,.22); }
/* ghost buttons sitting ON the glass (cards/hero) need light text + a visible edge; the
   Theme ghost button lives in the white topbar and must stay dark, so scope to card/hero. */
body.public .card .btn.ghost, body.public .hero .btn.ghost {
    color: #ffffff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06);
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
body.public .card .btn.ghost:hover, body.public .hero .btn.ghost:hover {
    background: rgba(255,255,255,.16); border-color: #ffffff;
}

/* ---- calendar slot cells on glass: clearly visible states ---- */
body.public .card .cal td { border-bottom-color: rgba(255,255,255,.10); border-right-color: rgba(255,255,255,.10); }
body.public .card .cal thead th { border-bottom-color: rgba(255,255,255,.3); }
body.public .card .cal .time { border-right-color: rgba(255,255,255,.3); }
body.public .card .cal tbody tr:nth-child(even) td { background: rgba(255,255,255,.045); }
body.public .card .slot {
    background-color: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.55); color: #ffffff;
    font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.18);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
body.public .card .slot .cnt { color: rgba(255,255,255,.95); font-weight: 600; }
body.public .card .slot:hover {
    background-color: rgba(var(--accent-rgb), .28); border-color: var(--accent); color: #fff;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .4);
}
body.public .card .slot.some { border-color: #ffb066; background-color: rgba(var(--accent-rgb), .16); }
body.public .card .slot.some .cnt { color: #ffd7a8; }
body.public .card .slot.full {
    background-color: rgba(var(--bad-rgb), .42); border-color: #ff6b6b; color: #ffe2e2;
    box-shadow: none;
}
body.public .card .slot.full .cnt { color: #ffd0d0; }
body.public .card .slot.picked {
    background-color: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700;
}
body.public .card .slot.pick2 {
    border-color: var(--accent); border-width: 2px; color: #ffd7a8; font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--accent);
}
body.public .card .slot.picked .cnt, body.public .card .slot.pick2 .cnt { color: inherit; }
/* the guest's own slots on the invite page */
body.public .card .slot.mine-conf {
    background-color: rgba(15,122,86,.55); border-color: #2fbf87; color: #eafff5;
    box-shadow: 0 0 0 2px rgba(47,191,135,.45); font-weight: 700; cursor: default;
}
body.public .card .slot.mine-conf .cnt { color: #d7ffe9; }
body.public .card .slot.mine-pend { border-color: #ffb066; border-style: dashed; }
body.public .card .slot.mine-pend .cnt { color: #ffd7a8; }
/* "Team / You'll meet" info block on the invite page */
body.public .card .meetinfo {
    display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin: .1rem 0 .7rem;
    padding: .55rem .8rem; border-radius: 10px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28);
}
body.public .card .meetinfo .mi-row { display: flex; align-items: baseline; gap: .45rem; }
body.public .card .meetinfo .mi-k {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    color: rgba(255,255,255,.72); font-weight: 700; white-space: nowrap;
}
body.public .card .meetinfo .mi-v { color: #ffffff; font-weight: 600; }

/* ---- hero (public landing / booking) ----
   A translucent glass title band that lets the page's skyline show through (darkened + blurred
   for legibility), rather than repeating the photo. On-brand China Systems blue wash. */
.hero {
    position: relative; overflow: hidden;
    border-radius: 14px; padding: 2.4rem 1.8rem 2.2rem; margin-bottom: 1.2rem; color: #f4f8ff;
    background: linear-gradient(115deg, rgba(8,16,34,.72) 0%, rgba(4,26,58,.6) 55%, rgba(6,12,32,.66) 100%);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 30px rgba(8,16,34,.28);
}
.hero h1 { color: #fff; font-size: clamp(1.35rem, 4.6vw, 2.2rem); margin: 0 0 .2rem; white-space: nowrap; }
.hero .sub { color: #dbe6f5; }
.hero .hero-tag { display: inline-block; padding: .28rem .8rem; margin: 0 0 1rem;
    border: 1px solid rgba(255,255,255,.4); border-radius: 999px; font-size: .74rem;
    font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.hero .hero-date { font-family: "Oswald", "Montserrat", system-ui, sans-serif; color: #ffb066;
    font-size: 1.2rem; font-weight: 600; letter-spacing: .02em; margin: .1rem 0 .6rem; }
.hero .hero-lead { color: #e7eefb; max-width: 60ch; margin: .5rem 0 0; }
.hero .motto-big { color: #ffd7a8; font-weight: 600; font-style: italic; margin-top: .8rem; }
@media (max-width: 640px) {
    .hero { padding: 1.8rem 1.2rem; }
}

/* ---- buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .95rem; border-radius: 9px; border: 1px solid var(--accent);
    background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer;
    font-family: inherit; font-size: .92rem; line-height: 1.2; text-decoration: none;
    box-sizing: border-box; vertical-align: middle;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border-2); font-weight: 600; }
.btn.ghost:hover { background: rgba(var(--brand-blue-rgb), .1); }
.btn.primary { background: var(--brand-blue); border-color: var(--brand-blue); color: #ffffff; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.amber { background: #e0a63a; border-color: #cf9226; color: #3a2600; }
.btn.amber:hover { filter: brightness(1.03); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { padding: .3rem .6rem; font-size: .82rem; }

/* native file-picker button, branded to match .btn (orange) */
input[type="file"] { font: inherit; color: var(--muted); max-width: 100%; }
input[type="file"]::file-selector-button {
    font: inherit; font-weight: 700; font-size: .92rem; line-height: 1.2;
    padding: .5rem .95rem; margin-right: .7rem; border-radius: 9px;
    border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { filter: brightness(1.05); }
input[type="file"]::-webkit-file-upload-button {
    font: inherit; font-weight: 700; font-size: .92rem; line-height: 1.2;
    padding: .5rem .95rem; margin-right: .7rem; border-radius: 9px;
    border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer;
}

/* ---- row action buttons (queue / dashboard): one row, equal width ---- */
.rowacts { display: flex; gap: .4rem; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.rowacts form { display: inline-flex; margin: 0; }
.rowacts .btn { min-width: 5.4rem; text-align: center; justify-content: center; white-space: nowrap; }
/* vertical stack: one button per row (keeps the Actions column narrow) */
.rowacts.vstack { flex-direction: column; align-items: stretch; gap: .35rem; }
.rowacts.vstack form { display: block; }
.rowacts.vstack .btn { width: 100%; }

/* ---- forms ---- */
label { display: block; font-size: .85rem; color: var(--muted); margin: .7rem 0 .25rem; }
input, select, textarea {
    width: 100%; padding: .55rem .65rem; background: var(--field-bg); color: var(--text);
    border: 1px solid var(--border-2); border-radius: 8px; font: inherit;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(var(--brand-blue-rgb), .5); border-color: var(--brand-blue); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */

/* ---- calendar grid ---- */
.calwrap { overflow-x: auto; }
.cal { border-collapse: collapse; width: 100%; min-width: 680px; }
.cal thead th { color: var(--heading); font-size: .95rem; padding: .5rem .5rem .55rem; text-align: center;
    border-bottom: 2px solid var(--border); }
.cal thead th:first-child { border-bottom: none; }
.cal th .dow { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; }
.cal td { vertical-align: top; padding: .3rem .45rem; border-bottom: 1px solid var(--hair);
    border-right: 1px solid var(--hair); font-size: .82rem; }
.cal td:last-child { border-right: none; }
.cal tbody tr:nth-child(even) td { background: rgba(128,128,128,.055); }
.cal .time { color: var(--muted); font-size: .82rem; white-space: nowrap; text-align: right;
    padding-right: .7rem; border-right: 2px solid var(--border); vertical-align: middle; }
/* Public slot picker cells: compact single-line boxes so the whole grid matches the
   admin calendar's size and aspect (no big padded boxes, no per-cell time). */
.slot {
    display: block; width: 100%; padding: .22rem .3rem; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text);
    font-size: .72rem; line-height: 1.2; text-align: center; white-space: nowrap;
}
.slot:hover { border-color: var(--accent); }
.slot.free { }
.slot.some { border-color: var(--warn-border); }
.slot.full { background: rgba(var(--bad-rgb), .10); color: var(--bad-fg); border-color: var(--bad);
    border-style: solid; cursor: not-allowed; pointer-events: none; opacity: .9; }
.slot.full .cnt { color: var(--bad-fg); }
.slot.picked { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
.slot.pick2 { border-color: var(--accent); border-width: 2px; color: var(--accent); font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--accent); }
.slot .cnt { display: block; font-size: .68rem; color: var(--muted); }
.slot.picked .cnt, .slot.pick2 .cnt { color: inherit; }
.slot .pk { display: block; font-size: .58rem; font-weight: 700; margin-top: .05rem;
    text-transform: uppercase; letter-spacing: .03em; }
.slot.picked .pk { color: var(--on-accent); }
.slot.pick2 .pk { color: var(--accent); }

/* ---- day-tab calendar (admin single-day agenda) ---- */
.daytabs { display: flex; gap: .3rem; flex-wrap: wrap; margin: .2rem 0 1rem; border-bottom: 1px solid var(--border); }
.daytab { padding: .5rem .9rem; border-radius: 8px 8px 0 0; color: var(--muted); font-weight: 600;
    font-size: .92rem; border: 1px solid transparent; border-bottom: none; background: transparent; cursor: pointer;
    font-family: "Oswald", "Montserrat", system-ui, sans-serif; letter-spacing: .01em; }
.daytab:hover { color: var(--text); background: rgba(var(--brand-blue-rgb), .08); }
.daytab.on { color: var(--brand-blue); background: var(--panel); border-color: var(--border); margin-bottom: -1px; }
/* ---- absolute-positioned day timeline (08:00–17:00) ---- */
.dayview { position: relative; width: 100%; border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden; background: var(--panel); }
/* background half-hour rows: time gutter on the left, a clickable book area filling the rest */
.dvrow { position: absolute; left: 0; right: 0; box-sizing: border-box; border-top: 1px solid var(--hair); }
.dvrow:first-child { border-top: 0; }
.dvrow.odd { background: rgba(128,128,128,.045); }
/* the time gutter is ALWAYS a clickable "add here" target — it never sits under the events overlay,
   so you can add a meeting/event even where a full-width block covers the slot area */
.dvtime { position: absolute; left: 0; top: 0; width: 58px; height: 100%; display: flex;
    align-items: flex-start; justify-content: flex-end; padding: .25rem .4rem 0 0; box-sizing: border-box;
    color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; font-weight: 600;
    cursor: pointer; z-index: 6; }
.dvtime:hover { color: var(--accent-ink); }
.dvadd { margin-left: .2rem; font-weight: 700; opacity: 0; transition: opacity .12s; }
.dvtime:hover .dvadd { opacity: .9; }
.dvslot { position: absolute; left: 60px; right: 4px; top: 2px; bottom: 2px; border-radius: 6px;
    cursor: pointer; display: flex; align-items: center; justify-content: flex-start; padding-left: .3rem; }
.dvslot:hover { background: rgba(var(--brand-blue-rgb), .07); }
.dvslot .cbook { opacity: .18; }
.dvslot:hover .cbook { opacity: 1; color: var(--accent-ink); background: rgba(var(--brand-blue-rgb), .14); }
/* event overlay: sits above the rows, but lets empty gaps click through to .dvslot */
.dvevents { position: absolute; left: 60px; right: 4px; top: 0; bottom: 0; pointer-events: none; }
.ev { position: absolute; box-sizing: border-box; pointer-events: auto; cursor: pointer;
    border-radius: 8px; padding: .28rem .45rem; overflow: hidden; border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(8,16,34,.10); transition: box-shadow .12s, transform .12s;
    display: flex; flex-direction: column; gap: .15rem; }
.ev:hover { box-shadow: 0 4px 14px rgba(8,16,34,.22); z-index: 5; }
/* calendar categories: colour-coded block + a strong left marker per type */
.ev.ev-confirmed { background: rgba(15,122,86,.12);  border-color: rgba(15,122,86,.42);  border-left: 5px solid #0f7a56; }
.ev.ev-pending   { background: rgba(224,160,61,.16); border-color: rgba(176,120,20,.45); border-left: 5px solid #d98b00; }
.ev.ev-requested { background: rgba(90,106,125,.12); border-color: rgba(90,106,125,.42); border-left: 5px solid #5a6a7d; }
.ev.ev-event     { background: rgba(0,112,224,.10);  border-color: rgba(0,112,224,.38);  border-left: 5px solid #0070e0; }
.ev-h { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; font-size: .7rem; }
.ev-co { font-family: "Oswald", "Montserrat", system-ui, sans-serif; font-weight: 600;
    font-size: .82rem; line-height: 1.15; color: var(--text); overflow: hidden;
    text-overflow: ellipsis; }
/* single-slot (30-min) blocks are only ~43px tall: lay badges + title on ONE line so the
   title is readable instead of clipped below the fold. The hover tooltip still has full detail. */
.ev.evShort { flex-direction: row; align-items: center; gap: .4rem; padding: .1rem .45rem; }
.ev.evShort .ev-h { flex: 0 0 auto; flex-wrap: nowrap; }
.ev.evShort .ev-co { flex: 1 1 auto; min-width: 0; white-space: nowrap; font-size: .8rem; }

/* ---- calendar hover tooltip ---- */
.sbtip { display: none; position: fixed; z-index: 60; max-width: 340px; pointer-events: none;
    background: var(--panel); color: var(--text); border: 1px solid var(--border-2); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(8,16,34,.28); padding: .6rem .75rem; font-size: .82rem; line-height: 1.4; }
.sbtip .sbtip-h { font-family: "Oswald", "Montserrat", system-ui, sans-serif; margin-bottom: .35rem; }
.sbtip-t { width: 100%; border-collapse: collapse; }
.sbtip-t th { text-align: left; color: var(--muted); font-weight: 600; white-space: nowrap;
    vertical-align: top; padding: .12rem .6rem .12rem 0; width: 6.5rem; }
.sbtip-t td { vertical-align: top; padding: .12rem 0; }

/* ---- temporary admin login screen ---- */
.loginwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.logincard { width: 100%; max-width: 380px; text-align: center; }
.logincard .mark { display: block; margin: 0 auto .5rem; width: 52px; height: 52px; object-fit: contain; }
.logincard h1 { margin: .1rem 0; }
.logincard form { text-align: left; margin-top: 1.1rem; }
.logincard label { display: block; margin: .7rem 0 .2rem; font-size: .9rem; }
.logincard .notice { margin-top: .8rem; }

/* ---- click-to-edit meeting header (debrief page) ---- */
.mhead { margin: .1rem 0 .5rem; max-width: 680px; }
.ed-line { border: 1px solid transparent; background: transparent; color: var(--text);
    font: inherit; border-radius: 7px; padding: .2rem .4rem; transition: border-color .12s, background .12s; }
.ed-line:hover { border-color: var(--border); }
.ed-line:focus { border-color: var(--brand-blue); background: var(--field-bg); outline: none; }
.ed-title { display: block; width: 100%; font-family: "Oswald", "Montserrat", system-ui, sans-serif;
    font-weight: 700; font-size: 1.2rem; color: var(--heading); margin-bottom: .1rem; }
.ed-lab { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    text-transform: uppercase; color: var(--muted); margin: .2rem 0 .05rem .1rem; }
.mhead-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .3rem .7rem; margin: .3rem 0 .1rem; }
.mhead-grid .ed-line { width: 100%; box-sizing: border-box; color: var(--text); font-size: .92rem; }
.mh-f { min-width: 0; }
select.ed-line { cursor: pointer; }
.mh-hostrow { margin: .35rem 0 .1rem; }
.mh-hostrow .ed-line { width: 100%; box-sizing: border-box; color: var(--text); font-size: .92rem;
    border-color: var(--border); background: var(--field-bg); }
.mhead-actions { margin-top: .5rem; display: flex; align-items: center; gap: .6rem; }

/* ---- calendar detail modal ---- */
.cbook { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem;
    border-radius: 50%; color: var(--muted); font-size: 1rem; line-height: 1; opacity: .28; }
.modal-back { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(8,12,20,.55);
    align-items: center; justify-content: center; padding: 1rem; }
.modal-card { position: relative; background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 14px; padding: 1.3rem 1.4rem; width: 100%;
    max-width: 460px; max-height: 86vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.modal-card h2 { margin-top: 0; padding-right: 1.6rem; }   /* leave room for the ✕ */
.modal-x { position: absolute; top: .5rem; right: .6rem; background: transparent; border: 0;
    color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .1rem .35rem; }
.modal-x:hover { color: var(--text); }
.kvtab { width: 100%; border-collapse: collapse; margin-top: .4rem; }
.kvtab th { text-align: left; color: var(--muted); font-weight: 600; padding: .4rem .8rem .4rem 0;
    vertical-align: top; white-space: nowrap; width: 8.5rem; font-size: .85rem; line-height: 1.35; }
.kvtab td { padding: .4rem 0; vertical-align: top; line-height: 1.35;
    overflow-wrap: anywhere; word-break: break-word; }
.kvtab tr + tr th, .kvtab tr + tr td { border-top: 1px solid var(--hair); }
.copybtn { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem;
    margin-right: .45rem; padding: 0; border: 1px solid var(--border-2); border-radius: 5px;
    background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: .78rem; line-height: 1;
    vertical-align: text-top; flex: 0 0 auto; }
.copybtn:hover { color: var(--accent-ink); border-color: var(--accent); }
.copybtn.ok { color: var(--ok-fg); border-color: transparent; }

/* ---- meet-the-team overlay ---- */
.modal-card.wide { max-width: 1080px; }
/* at most 3 columns; drops to 2 then 1 as the card narrows. The modal-card itself caps at
   86vh with overflow-y:auto, so a long roster scrolls inside the overlay, never off-screen. */
.teamgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.1rem; }
@media (max-width: 820px) { .teamgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .teamgrid { grid-template-columns: 1fr; } }
.teamcard { display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px;
    padding: 1.2rem 1.1rem 1rem; box-shadow: var(--card-shadow); height: 500px; }
/* only the bio flexes/scrolls; everything else keeps its natural size (no squished photos) */
.teamcard > *:not(.teambio) { flex: 0 0 auto; }
.teamphoto { display: block; width: 118px; height: 118px; border-radius: 50%; object-fit: cover;
    margin: 0 auto .7rem; border: 3px solid var(--brand-blue); background: var(--panel-2); }
.teaminitials { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    font-family: "Oswald", "Montserrat", system-ui, sans-serif; font-weight: 600; color: var(--brand-blue);
    background: rgba(var(--brand-blue-rgb), .12); }
.teamphoto.teaminitials { font-size: 2.1rem; letter-spacing: .02em; }
.teammeet { display: inline-block; margin: 0 0 .5rem; padding: .2rem .9rem; border-radius: 999px;
    border: 1px solid var(--accent); background: var(--accent); color: #fff; font-weight: 700;
    font-size: .76rem; letter-spacing: .04em; text-transform: lowercase; cursor: pointer;
    text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.teammeet:hover { filter: brightness(1.06); }
.teamname { font-family: "Oswald", "Montserrat", system-ui, sans-serif; font-weight: 600;
    color: var(--heading); font-size: 1.02rem; letter-spacing: .02em; text-transform: uppercase; }
.teamrole { color: var(--brand-blue); font-weight: 600; font-size: .84rem; margin: .1rem 0 .1rem; }
.teamrole:last-of-type { margin-bottom: .5rem; }
.teamregion { color: var(--muted); font-weight: 500; }

/* ---- settings sub-tabs (admin) ---- */
.subnav { display: flex; gap: .3rem; flex-wrap: wrap; margin: .2rem 0 1rem; border-bottom: 1px solid var(--border); }
.subtab { padding: .45rem .8rem; border-radius: 8px 8px 0 0; color: var(--muted); font-weight: 600;
    font-size: .9rem; border: 1px solid transparent; border-bottom: none; }
.subtab:hover { color: var(--text); background: rgba(var(--brand-blue-rgb), .08); text-decoration: none; }
.subtab.on { color: var(--brand-blue); background: var(--panel); border-color: var(--border);
    margin-bottom: -1px; }

/* ---- team photo editor (admin) ---- */
.photoedit { display: flex; align-items: center; gap: .6rem; margin: .1rem 0 .4rem; }
.photothumb { width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.teaminitials.photothumb { font-size: 1rem; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
    border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted);
    cursor: pointer; font-size: 1.05rem; line-height: 1; }
.iconbtn:hover { color: var(--bad); border-color: var(--bad); }

/* ---- repeatable role rows (admin team form) ---- */
.rolerow { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.rolerow input[name=role_title] { flex: 2 1 0; }
.rolerow select[name=role_region] { flex: 1 1 0; }
.rolerow .btn.sm { flex: 0 0 auto; }
.teambio { color: var(--text); font-size: .84rem; line-height: 1.5; text-align: left; width: 100%;
    flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: .7rem; padding: .7rem .5rem 0 0;
    border-top: 1px solid var(--hair); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.teambio p { margin: .4rem 0; }
.teambio p:first-child { margin-top: 0; }
.teambio::-webkit-scrollbar { width: 8px; }
.teambio::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }
.teambio::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 560px) { .teambio { text-align: center; } }

/* ---- tables ---- */
table.list { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.list th { text-align: left; color: var(--muted); font-weight: 600; padding: .5rem .5rem;
    border-bottom: 1px solid var(--border); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
table.list td { padding: .5rem .5rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
table.list tr:hover td { background: rgba(var(--brand-blue-rgb), .05); }

/* ---- badges ---- */
.badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem;
    font-weight: 700; border: 1px solid var(--border-2); }
.badge.PENDING { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.badge.CONFIRMED { background: rgba(var(--ok-rgb), .14); color: var(--ok-fg); border-color: transparent; }
.badge.DECLINED, .badge.CANCELLED, .badge.NO_SHOW, .badge.EXPIRED {
    background: rgba(var(--bad-rgb), .12); color: var(--bad-fg); border-color: transparent; }
.badge.HELD { background: var(--panel-2); color: var(--muted); }
.chip { display: inline-block; padding: .1rem .45rem; border-radius: 6px; font-size: .72rem;
    background: var(--accent); color: #ffffff; font-weight: 700; }

/* on/off toggle pill (e.g. "Show confirmed" on the invites list) */
.togglepill { font: inherit; font-size: .78rem; font-weight: 600; color: var(--muted);
    background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 999px;
    padding: .34rem .8rem; cursor: pointer; white-space: nowrap; display: inline-flex;
    align-items: center; gap: .4rem; }
.togglepill::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%;
    background: var(--muted); opacity: .5; flex: 0 0 auto; }
.togglepill:hover { border-color: var(--accent); }
.togglepill.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.togglepill.on::before { background: #fff; opacity: 1; }

/* sortable table headers (click to sort; arrow shows direction, number shows priority) */
th.sorth { cursor: pointer; user-select: none; white-space: nowrap; }
th.sorth:hover { color: var(--heading); }
th.sorth .sarr { font-size: .78em; margin-left: .15rem; color: var(--muted); }
th.sorth.act { color: var(--heading); }
th.sorth.act .sarr { color: var(--accent-ink); }

/* ---- notices ---- */
.notice { padding: .7rem .9rem; border-radius: 9px; margin: .6rem 0; border: 1px solid var(--border-2); }
.notice.ok { background: rgba(var(--ok-rgb), .12); border-color: transparent; color: var(--ok-fg); }
/* high-contrast success banner (solid green, dark text) — readable over the public dark hero */
.notice.confirmbanner, body.public .card .notice.confirmbanner {
    background: #d6f0e4; border: 1px solid #2fbf87; color: #0a3b29; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.notice.confirmbanner strong, body.public .card .notice.confirmbanner strong { color: #063a26; }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.notice.bad { background: rgba(var(--bad-rgb), .12); border-color: transparent; color: var(--bad-fg); }
/* high-contrast login error: solid red background, black text — readable over the dark hero */
.notice.loginerr, body.public .card .notice.loginerr {
    background: #f04438; border: 1px solid #b42318; color: #000000; font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* shake the login card once when credentials are wrong */
.logincard.shake { animation: cs-shake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes cs-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) { .logincard.shake { animation: none; } }

/* ---- misc ---- */
.kpis { display: flex; gap: .8rem; flex-wrap: wrap; }
.kpi { flex: 1 1 140px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; }
.kpi .n { font-family: "Oswald", "Montserrat", system-ui, sans-serif; font-size: 1.8rem; font-weight: 600; color: var(--heading); }
.kpi .l { color: var(--muted); font-size: .8rem; }
.foot { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem;
    border-top: 1px solid var(--border); color: var(--muted); font-size: .82rem; }
.foot-motto { color: var(--brand-blue); font-style: italic; }
.qr { background: var(--plate); padding: 10px; border-radius: 10px; display: inline-block; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
.devbanner { background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--warn-border);
    text-align: center; padding: .3rem; font-size: .82rem; }

/* ---- debrief pills, chips, card thumbnails (mobile-first) ---- */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border-radius: 999px;
    border: 1px solid var(--border-2); background: var(--panel-2); cursor: pointer; font-size: .85rem;
    margin: 0; color: var(--text); }
.pill:hover { border-color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; margin: .4rem 0; }
.cardthumb { display: block; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    background: var(--plate); min-height: 80px; }
.cardthumb img { display: block; width: 100%; height: 110px; object-fit: cover; }
.matlist { list-style:none; padding:0; margin:.3rem 0; }
.matlist li { padding:.35rem .1rem; border-bottom:1px solid var(--hair); }
.cardthumb .file { display: block; padding: .8rem .6rem; color: #333; font-size: .8rem; word-break: break-all; }
/* on a phone, give inputs room and stack the two-up grids */
@media (max-width: 640px) {
    .grid2 { grid-template-columns: 1fr; }
    input, select, textarea { font-size: 16px; } /* stops iOS zoom-on-focus */
    .btn { padding: .6rem 1rem; }
}

/* ---- public confirmation card (centred over the skyline; visible, with countdown) ---- */
.confirmwrap { display: flex; align-items: center; justify-content: center; min-height: 62vh; padding: 1rem 0; }
.confirmcard { max-width: 560px; width: 100%; text-align: center; }
.confirmcard .confirm-ic {
    width: 64px; height: 64px; margin: .2rem auto .7rem; border-radius: 50%;
    background: var(--ok); color: #fff; font-size: 34px; line-height: 64px; font-weight: 700;
}
.confirmcard h2 { margin: .1rem 0 .7rem; }
.confirmcard .confirm-lead { font-size: 1.05rem; margin: 0 0 .4rem; }
.confirmcard .confirm-sub { font-weight: 600; margin: .8rem 0 .2rem; }
.confirmcard .confirm-body p { margin: .35rem 0; }
.confirmcard .confirm-count { margin-top: 1.1rem; font-size: .9rem; opacity: .85; }

/* stronger, more visible row separators on the bookings tables (dashboard "Next up", queue) */
table.list.bookings td { border-bottom: 1px solid var(--border-2); }
table.list.bookings thead th { border-bottom: 2px solid var(--border-2); }

/* ---- calendar category pills (inside a block) + the filter row above the calendar ---- */
.cpill { display: inline-block; padding: .06rem .45rem; border-radius: 999px; font-size: .68rem;
    font-weight: 700; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; }
.cpill.cat-confirmed { background: rgba(15,122,86,.16);  color: #0f7a56; }
.cpill.cat-pending   { background: rgba(176,120,20,.18); color: #8a5a00; }
.cpill.cat-requested { background: rgba(90,106,125,.16); color: #46586b; }
.cpill.cat-event     { background: rgba(0,112,224,.14);  color: #0062c4; }

.calfilter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; align-items: center; }
.fpill { cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; line-height: 1;
    padding: .4rem .8rem .4rem .7rem; border-radius: 999px; border: 1.5px solid transparent;
    display: inline-flex; align-items: center; gap: .4rem; user-select: none; transition: opacity .12s, filter .12s; }
/* a colour dot before the label */
.fpill::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.fpill.cat-confirmed { color: #0f7a56; background: rgba(15,122,86,.12);  border-color: rgba(15,122,86,.45); }
.fpill.cat-pending   { color: #8a5a00; background: rgba(224,160,61,.16); border-color: rgba(176,120,20,.5); }
.fpill.cat-requested { color: #46586b; background: rgba(90,106,125,.12); border-color: rgba(90,106,125,.45); }
.fpill.cat-event     { color: #0062c4; background: rgba(0,112,224,.10);  border-color: rgba(0,112,224,.45); }
/* deselected: muted, hollow, struck-through label to read as "hidden" */
.fpill.off { background: transparent; border-color: var(--border-2); color: var(--muted); }
.fpill.off::before { background: var(--muted); opacity: .5; }
.fpill.off .lbl, .fpill.off { text-decoration: line-through; text-decoration-thickness: 1px; }

/* a status pill that links somewhere (e.g. "Pending ›" -> its calendar day) */
a.badge.linky, a.cpill.linky { cursor: pointer; text-decoration: none; }
a.badge.linky:hover, a.cpill.linky:hover { filter: brightness(.96); box-shadow: 0 0 0 2px rgba(var(--brand-blue-rgb), .25); }

/* ---- landing countdown to the event ---- */
.countdown h2 { text-align: center; margin: .2rem 0 .2rem; }
.cd-tiles { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: .6rem 0 .5rem; }
.cd-tile { flex: 1 1 130px; max-width: 190px; background: #ffffff; border-radius: 16px;
    padding: 1.1rem .6rem .8rem; text-align: center; box-shadow: 0 6px 22px rgba(8,16,34,.18); }
.cd-n { font-family: "Oswald", "Montserrat", system-ui, sans-serif; font-weight: 600; font-size: 3.2rem;
    line-height: 1; color: #0a2e57; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cd-l { margin-top: .45rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #5a6a7d; }
.cd-when { text-align: center; margin: .2rem 0 0; }
@media (max-width: 480px) { .cd-n { font-size: 2.4rem; } .cd-tile { padding: .8rem .4rem .6rem; } }

/* ---- request page: "Book your spot" reveal gate ---- */
.sb-revealrow { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 1rem 0 .2rem; }
.btn.sb-reveal { font-size: 1rem; padding: .7rem 1.5rem; }
.btn.sb-reveal:disabled { opacity: .5; cursor: not-allowed; }
#calWrap.revealing { animation: sbReveal .35s ease; }
@keyframes sbReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- button loading state: a spinner shown while a request is being sent ---- */
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading > * { visibility: hidden; }
.btn.loading::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 1.15em; height: 1.15em; margin: -.575em 0 0 -.575em;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
    border-radius: 50%; animation: btnspin .6s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.loading::after { animation-duration: 1.4s; } }

/* ---- review queue: a request (1st choice + backup) shown as one grouped row ---- */
tr.reqgroup td { background: rgba(var(--brand-blue-rgb), .045); }
tr.reqgroup td:first-child { border-left: 4px solid var(--brand-blue); }
.reqline { display: flex; align-items: center; gap: .45rem; margin: .18rem 0; }
.reqtag { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
.reqtag.rq1 { background: rgba(15,122,86,.16); color: #0f7a56; }
.reqtag.rqb { background: rgba(90,106,125,.16); color: #46586b; }

/* ============================================================
   Mobile polish + embedded-frame full-width mode
   (added for phone/tablet visitors and the chinasystems.com embed)
   ============================================================ */
html, body { max-width: 100%; }
body.public { overflow-x: hidden; }

/* Hero title: wrap instead of clipping off-screen on narrow devices */
@media (max-width: 720px) {
    .hero h1 { white-space: normal; overflow-wrap: anywhere; }
}

/* Two-up field grids: stack to a single column on phones. The contact grid's
   textarea carries an inline grid-column:1/3 that otherwise re-creates a 2nd
   column even after the template collapses, so force every child to one column. */
@media (max-width: 720px) {
    .grid2 { grid-template-columns: 1fr; }
    .grid2 > * { grid-column: 1 / -1 !important; }
}

/* Comfier spacing on small phones */
@media (max-width: 560px) {
    .wrap { padding: 1rem .8rem 2.4rem; }
    .hero { padding: 1.5rem 1.1rem; border-radius: 12px; }
    .hero h1 { font-size: clamp(1.3rem, 6.2vw, 1.9rem); }
    .card { padding: 1rem 1rem; }
    .cd-tiles { gap: .6rem; }
}

/* ---- Embedded mode: the app running inside an iframe (e.g. on chinasystems.com).
   Fill the frame width and hide the app's own header/footer so it doesn't repeat
   the host site's chrome. Toggled by the tiny iframe detector in Pages.head(). */
html.embedded body.public > .topbar { display: none; }
html.embedded .foot { display: none; }
/* keep the normal centered content width in embedded mode (same proportions as standalone,
   just without the app's own header/footer) - do NOT force full-width. */

/* =====================================================================
   SIBOS landing re-skin — the public /request page in the marketing look
   (chinasystems.com/sibos-invitation): light ground, "Making Waves" hero,
   intro copy, and a "Request a Meeting" button that rolls the form down.
   Scoped to body.public.reskin, so every OTHER public page is unchanged.
   The extra .reskin class raises specificity above the dark-glass rules,
   flipping them back to the light CS-skin (token) values.
   ===================================================================== */
body.public.reskin { background: var(--bg); }
/* Landing page only (it alone carries .sblp-hero): nudge the page background a touch toward the
   grey frame baked into the hero image so the hero settles into the page without the field going
   heavy-grey. Other public pages keep the standard field; browsers without :has() fall back to it. */
body.public.reskin:has(.sblp-hero) { background: #d8e0e7; }
body.public.reskin::before { display: none; }
body.public.reskin .foot {
    color: var(--muted); background: var(--panel); border-top: 1px solid var(--border);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.public.reskin .foot .foot-motto { color: var(--accent-ink); }
/* cards: white, dark text (undo the dark glass) */
body.public.reskin .card {
    background: var(--panel); border: 1px solid var(--border); color: var(--text);
    box-shadow: var(--card-shadow); -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.public.reskin .card h1, body.public.reskin .card h2, body.public.reskin .card h3 { color: var(--heading); }
body.public.reskin .card .muted { color: var(--muted); }
body.public.reskin .card label { color: #33415a; }
body.public.reskin .card a { color: var(--accent-ink); }
body.public.reskin .card .cal thead th { color: var(--heading); }
body.public.reskin .card .cal .time { color: var(--muted); }
/* form controls back to light */
body.public.reskin .card input:not([type=radio]):not([type=checkbox]),
body.public.reskin .card select,
body.public.reskin .card textarea {
    background-color: var(--field-bg); border: 1px solid var(--border-2); color: var(--text);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.public.reskin .card input:not([type=radio]):not([type=checkbox])::placeholder,
body.public.reskin .card textarea::placeholder { color: #9aa7b6; }
body.public.reskin .card input:not([type=radio]):not([type=checkbox]):hover,
body.public.reskin .card select:hover,
body.public.reskin .card textarea:hover { background-color: var(--field-bg); border-color: var(--brand-blue); }
body.public.reskin .card input:not([type=radio]):not([type=checkbox]):focus,
body.public.reskin .card select:focus,
body.public.reskin .card textarea:focus {
    outline: none; border-color: var(--brand-blue); background-color: var(--field-bg);
    box-shadow: 0 0 0 3px rgba(var(--brand-blue-rgb), .15);
}
/* dark chevron for the light select */
body.public.reskin .card select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6a7d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* meeting-length pills: light chips, orange when selected */
body.public.reskin .card .pill {
    background-color: var(--panel-2); border: 1px solid var(--border-2); color: var(--text);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.public.reskin .card .pill:hover { background-color: var(--panel-2); border-color: var(--accent); }
body.public.reskin .card .pill:has(input:checked) {
    border-color: var(--accent); background-color: rgba(var(--accent-rgb), .12); color: var(--heading); font-weight: 600;
}
/* buttons: primary CTAs -> corporate blue (pic 1); ghost -> light */
body.public.reskin .btn:not(.ghost):not(.danger):not(.ok):not(.amber) {
    background: var(--brand-blue); border-color: var(--brand-blue); color: #ffffff; text-shadow: none;
}
body.public.reskin .card .btn.ghost, body.public.reskin .hero .btn.ghost {
    color: var(--accent-ink); border-color: var(--border-2); background: #ffffff; text-shadow: none;
}
body.public.reskin .card .btn.ghost:hover, body.public.reskin .hero .btn.ghost:hover {
    background: rgba(var(--brand-blue-rgb), .06); border-color: var(--brand-blue);
}
/* calendar slot cells back to light base values */
body.public.reskin .card .cal td { border-bottom-color: var(--hair); border-right-color: var(--hair); }
body.public.reskin .card .cal thead th { border-bottom-color: var(--border); }
body.public.reskin .card .cal .time { border-right-color: var(--border); }
body.public.reskin .card .cal tbody tr:nth-child(even) td { background: rgba(128,128,128,.055); }
body.public.reskin .card .slot {
    background-color: var(--panel); border: 1px solid var(--border-2); color: var(--text);
    font-weight: 500; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.public.reskin .card .slot .cnt { color: var(--muted); font-weight: 500; }
body.public.reskin .card .slot:hover {
    background-color: rgba(var(--accent-rgb), .10); border-color: var(--accent); color: var(--heading); box-shadow: none;
}
body.public.reskin .card .slot.some { border-color: var(--warn-border); background-color: transparent; }
body.public.reskin .card .slot.some .cnt { color: var(--warn); }
body.public.reskin .card .slot.full {
    background-color: rgba(var(--bad-rgb), .10); border-color: var(--bad); color: var(--bad-fg); box-shadow: none;
}
body.public.reskin .card .slot.full .cnt { color: var(--bad-fg); }
body.public.reskin .card .slot.picked {
    background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700;
}
body.public.reskin .card .slot.pick2 {
    border-color: var(--accent); color: var(--accent); font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--accent); background-color: transparent;
}
body.public.reskin .card .slot.picked .cnt, body.public.reskin .card .slot.pick2 .cnt { color: inherit; }

/* ---- landing elements: hero image, intro copy, roll-down panel ---- */
.sblp-hero { display: block; margin: .2rem auto 1.4rem; max-width: 560px; width: 100%; height: auto;
    border-radius: 16px; box-shadow: 0 6px 24px rgba(10,46,87,.14); }
.sblp-intro { max-width: 640px; margin: 0 auto; color: var(--text); }
.sblp-intro h2 { font-size: 1.35rem; margin: .2rem 0 .8rem; }
.sblp-intro p { margin: 0 0 1rem; }
.sblp-intro .sec { color: var(--accent); font-size: 1.12rem; font-weight: 600; margin: 1.3rem 0 .5rem;
    font-family: "Oswald", "Montserrat", sans-serif; }
.sblp-intro .item { margin: 0 0 .55rem; color: #46586c; }
.sblp-intro .item b { color: var(--heading); }
.sblp-intro .strong { font-weight: 700; color: var(--heading); margin-top: 1.2rem; }
.sblp-eyebrow { display: inline-block; font-family: "Oswald", "Montserrat", sans-serif; font-weight: 600;
    font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
    background: rgba(var(--accent-rgb), .10); border: 1px solid rgba(var(--accent-rgb), .30);
    border-radius: 999px; padding: .2rem .7rem; margin-bottom: .5rem; }
.sblp-cta { text-align: center; margin: 1.6rem 0 .2rem; }
.sblp-cta .btn { font-size: 1.05rem; padding: .8rem 1.9rem; }
.sblp-cta .chev { transition: transform .4s ease; }
.sblp-cta .btn.open .chev { transform: rotate(180deg); }
#sblpPanel { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px);
    transition: max-height .6s ease, opacity .45s ease, transform .45s ease; margin-top: 1.2rem; }
#sblpPanel.open { max-height: 4000px; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { #sblpPanel { transition: none; } }

/* ---- landing page (/home) in the light re-skin ---- */
/* hero band: drop the dark glass, become a clean centred title block (invitation style) */
body.public.reskin .hero {
    background: transparent; border: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    color: var(--text); text-align: center; padding: .2rem .4rem 1rem; margin-bottom: .8rem;
}
body.public.reskin .hero h1 { color: var(--heading); white-space: normal; }
body.public.reskin .hero .sub { color: var(--muted); }
body.public.reskin .hero .hero-date { color: var(--accent); }
body.public.reskin .hero .motto-big { color: var(--accent-ink); }
/* the "SIBOS 2026 · MIAMI" chip: match the light-theme eyebrow so it reads on the light background */
body.public.reskin .hero .hero-tag { color: var(--accent);
    background: rgba(var(--accent-rgb), .10); border: 1px solid rgba(var(--accent-rgb), .30); }
/* countdown tiles: light-grey chips on the white card so they read against it */
body.public.reskin .cd-tile {
    background: var(--panel-2); border: 1px solid var(--border); box-shadow: var(--card-shadow);
}
body.public.reskin .countdown h2 { text-align: center; }

/* compact live countdown on the single public page (sits under the hero, sized to the column) */
body.public.reskin .sblp-count { max-width: 640px; margin: 0 auto 1.4rem; padding: 1rem 1.1rem .8rem; }
body.public.reskin .sblp-count h2 { font-size: 1.05rem; margin: .1rem 0 .3rem; }
body.public.reskin .sblp-count .cd-tiles { gap: .6rem; margin: .5rem 0 .4rem; }
body.public.reskin .sblp-count .cd-tile { flex: 1 1 0; max-width: none; padding: .7rem .4rem .55rem; border-radius: 12px; }
body.public.reskin .sblp-count .cd-n { font-size: 2.1rem; }
body.public.reskin .sblp-count .cd-l { font-size: .68rem; margin-top: .28rem; }
body.public.reskin .sblp-count .cd-when { font-size: .8rem; }

/* ---- single-column layout on the single public page: wide copy, compact centered hero ---- */
body.public.reskin .wrap { max-width: 1000px; }
.sblp-top { display: block; margin: .4rem 0 .2rem; }
/* hero is a centered graphic, deliberately narrower than the copy so it stays compact (shorter) */
body.public.reskin .sblp-hero { max-width: 820px; width: 100%; margin: .2rem auto 1.6rem; }
body.public.reskin .sblp-count { max-width: 100%; margin: 0 0 1.6rem; }
body.public.reskin .sblp-cta { margin: 1.6rem auto .4rem; text-align: center; }
body.public.reskin .sblp-intro { max-width: 100%; margin: 0 auto; }
#sblpPanel { max-width: 100%; margin-left: auto; margin-right: auto; }
.sblp-below { max-width: 100%; margin-left: auto; margin-right: auto; }
/* --- tablets: keep the compact hero from dominating the narrower column --- */
@media (max-width: 820px) {
    body.public.reskin .sblp-hero { max-width: 640px; }
}
/* --- phones: full-bleed hero, countdown as a tidy 2x2 grid, larger tap targets --- */
@media (max-width: 560px) {
    body.public.reskin .sblp-hero { max-width: 100%; margin-bottom: 1.2rem; }
    body.public.reskin .sblp-count { padding: 1rem .9rem .9rem; margin-bottom: 1.3rem; }
    body.public.reskin .sblp-count .cd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
    body.public.reskin .sblp-count .cd-tile { max-width: none; padding: .9rem .4rem .7rem; }
    body.public.reskin .sblp-count .cd-n { font-size: 2.6rem; }
    body.public.reskin .sblp-count .cd-l { font-size: .72rem; }
    body.public.reskin .sblp-intro h2 { font-size: 1.5rem; }
    body.public.reskin .sblp-cta .btn { width: 100%; justify-content: center; }
}