/* =====================================================================
   simultano.ai / simultano.ai — SHARED THEME
   Single source of truth for colors, type, spacing, depth, shape.
   Created Session 5 (redesign), 2026-06-11. See REDESIGN_PLAN.md.

   ARCHITECTURE
   - The 7 authed pages link this file BEFORE their inline <style> and
     carry no local tokens (admin_security keeps one --success override).
   - The 5 public pages (audience, profile /c/, login, login_2fa,
     access_denied) keep their full local :root as an OFFLINE FALLBACK
     and link this file AFTER their <style>, so these values win when
     the file loads and the page still renders if the fetch fails
     mid-service (flaky church Wi-Fi). audience.html + profile.html pin
     their pre-migration --shadow-soft variant in a tiny <style> AFTER
     this link — remove those pins only as a deliberate design choice.

   VALUES (v=3, brand-board palette — Boris-spec 2026-07-27)
   - White background, near-black ink, neutral zinc greys.
   - BRAND GREEN #025E47 (--cta) is THE accent, used ONLY on the single
     most important button per screen (Sign in / Save changes /
     Save & recompute / Generate / Enable 2FA / Listen live). White text
     on it. It replaced the inherited blue #0183FD everywhere.
   - BRAND YELLOW #EEEE18 (--accent-2) is the secondary highlight, and
     the ONLY accent that works on the dark listener screen. It replaced
     the inherited orange highlights there.
   - #025E47 is deliberately DARK (9:1 on white). On dark surfaces it
     goes invisible, so dark pages use --cta-on-dark #04C89A (the same
     hue, lifted) or the yellow. Never paint #025E47 on a dark panel.
   - Everything else is black-on-white; --burgundy resolves to ink
     #18181B so all legacy "brand red" usages turn into calm black.
   - Semantic colors keep meaning: --green = Start Mic / live,
     --danger red = End session / destructive.
   - Soft-rectangle buttons (10px radius — Boris pick over pill).
   - The old cream/burgundy values live on only as the public pages'
     offline fallbacks (their local :root blocks).

   CACHE RULE (load-bearing — see the 2026-05-26 incident):
   /assets/ responses are cacheable and carry NO Cache-Control header,
   so browsers cache heuristically (iOS Safari: potentially days).
   After ANY edit to this file, bump ?v=N on the <link> in EVERY page.
   `node scripts/check_frontend.mjs` enforces one consistent version —
   run it before every push.

   NAMESPACE NOTE: shared component classes are prefixed .gts- because
   the legacy pages already use .card (11 pages!), .input, .btn-primary
   with their own meanings. Never add un-prefixed component classes here.
   ===================================================================== */

:root {

  /* ---- THE accent (use sparingly — one primary action per screen) -
     Brand green from the Simultano brand board (2026-07-27). */
  --cta:             #025E47;
  --cta-hover:       #01402F;
  --cta-soft:        rgba(2, 94, 71, 0.12);
  --on-accent:       #FFFFFF;   /* text on --cta and on ink buttons */

  /* Same hue, lifted for DARK surfaces (the listener screen). The base
     green is 19% lightness and disappears on near-black. */
  --cta-on-dark:     #04C89A;
  --cta-on-dark-soft: rgba(4, 200, 154, 0.18);

  /* ---- Brand SECONDARY accent: the board's yellow --------------------
     Highlights, selected rows, "live" emphasis on dark. Near-black text
     on it — white on yellow is unreadable. */
  --accent-2:        #EEEE18;
  --accent-2-hover:  #D8D80F;
  --accent-2-soft:   rgba(238, 238, 24, 0.16);
  --on-accent-2:     #0A0A0A;

  /* Raw brand tokens (for pages that need the literal board values) */
  --brand-green:     #025E47;
  --brand-yellow:    #EEEE18;

  /* ---- INK (legacy "brand red" names now resolve to near-black) --- */
  --burgundy:        #18181B;
  --burgundy-hover:  #000000;
  --burgundy-soft:   rgba(0, 0, 0, 0.06);

  /* Naming-family aliases: 6 pages use --accent/--panel/--muted names,
     6 use --burgundy/--surface/--text-muted. Both resolve identically. */
  --accent:          var(--burgundy);
  --accent-hover:    var(--burgundy-hover);

  /* Former gold secondary accent → muted neutral */
  --gold:            #71717A;
  --gold-soft:       rgba(0, 0, 0, 0.04);

  /* "Live / GO" green family (semantic — Start Mic / live) */
  --green:           #2E7D4F;
  --green-hover:     #1F5F3A;
  --green-soft:      rgba(46, 125, 79, 0.08);
  --success:         var(--green);

  /* States (semantic — red stays red: End session / destructive) */
  --danger:          #B83232;
  --danger-hover:    #9E2B2B;
  --danger-bg:       #F8E5E5;
  --warning:         #B8860B;
  --warning-bg:      rgba(184, 134, 11, 0.08);
  --warning-text:    #7A5A06;

  /* ---- NEUTRALS / SURFACES (white + zinc) -------------------------- */
  --bg:              #FFFFFF;   /* white page background */
  --surface:         #FFFFFF;   /* white cards (borders do the work) */
  --surface-alt:     #F4F4F5;   /* light neutral tint */
  --panel:           var(--surface);      /* alias (simple-family pages) */
  --panel-2:         var(--surface-alt);  /* alias (simple-family pages) */

  --text:            #18181B;   /* near-black ink */
  --text-muted:      #71717A;   /* neutral grey */
  --muted:           var(--text-muted);   /* alias */

  --border:          #E4E4E7;
  --border-strong:   #D4D4D8;
  --hairline:        rgba(0, 0, 0, 0.08);

  /* ---- TYPOGRAPHY (additive — adopted page-by-page in S2/S3) ------ */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial,
               sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo,
               Consolas, monospace;

  --text-xs:   0.75rem;   /* 12px — tiny labels, captions  */
  --text-sm:   0.875rem;  /* 14px — secondary text         */
  --text-base: 1rem;      /* 16px — body                   */
  --text-lg:   1.25rem;   /* 20px — card titles            */
  --text-xl:   1.75rem;   /* 28px — section headers        */
  --text-2xl:  2.25rem;   /* 36px — page titles            */

  /* ---- SPACING (4px rhythm; additive) ------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;

  /* ---- SHAPE -------------------------------------------------------- */
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---- DEPTH (neutral, very subtle — borders carry separation) -----
     --shadow-* are the legacy names pages consume today.
     --elev-* is the new scale for S2+ work. */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04),
                 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.06),
                 0 12px 32px rgba(0, 0, 0, 0.08);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --elev-2: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);
  --elev-3: 0 12px 32px rgba(0, 0, 0, 0.10);

  /* ---- MOTION (additive) -------------------------------------------- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.12s;
  --dur:      0.2s;
}

/* =====================================================================
   SHARED COMPONENT CLASSES (gts- namespaced — see NAMESPACE NOTE)
   New class names: adding them changes nothing until an element opts in.
   Pages adopt them during the Session 2/3 polish.
   ===================================================================== */

/* THE brand-green button — exactly one per screen (Boris-spec) */
.gts-btn-cta {
  background: var(--cta);
  color: var(--on-accent);
  font: 600 var(--text-base)/1 var(--font-sans);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.gts-btn-cta:hover  { background: var(--cta-hover); box-shadow: var(--elev-2); }
.gts-btn-cta:active { transform: translateY(1px); }

/* Default solid button — calm ink */
.gts-btn-primary {
  background: var(--burgundy);
  color: var(--on-accent);
  font: 600 var(--text-base)/1 var(--font-sans);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.gts-btn-primary:hover  { background: var(--burgundy-hover); box-shadow: var(--elev-2); }
.gts-btn-primary:active { transform: translateY(1px); }

.gts-btn-secondary {
  background: var(--surface);
  color: var(--text);
  font: 600 var(--text-base)/1 var(--font-sans);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.gts-btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-alt); }

.gts-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  padding: var(--space-6);
}

.gts-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font: var(--text-base) var(--font-sans);
  color: var(--text);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.gts-input:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--burgundy-soft);
}

.gts-label {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* =====================================================================
   APP SHELL — sidebar + top bar + profile dropdown (Session 4).
   Structure/behavior live in /assets/shell.js; this is styling only.
   Everything is gts- namespaced and uses neutral <div>/<aside> elements
   because legacy pages style bare `header`/`nav`/.card globally.
   RULES baked in: frosted blur ONLY on the fixed bars (a filter on the
   content wrapper would re-anchor speaker's position:fixed .copy-toast);
   ≤900px the sidebar collapses behind the hamburger.
   ===================================================================== */

:root {
  --gts-sidebar-w: 248px;
  --gts-topbar-h: 56px;
}

.gts-main {
  margin-left: var(--gts-sidebar-w);
  padding-top: var(--gts-topbar-h);
  min-height: 100vh;
  box-sizing: border-box;
}

.gts-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--gts-sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  gap: 2px;
  overflow-y: auto;
  z-index: 40;
}
.gts-brand {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3) var(--space-3) var(--space-4);
}
.gts-brand-name {
  display: flex; align-items: center; gap: 8px;
  color: var(--text);
  font-size: var(--text-base); letter-spacing: -0.01em;
}
/* The brand mark is a bare monochrome glyph (currentColor), not a plated
   icon, so it gets no background and no corner radius. Its SVG box is
   square, so square sizing cannot distort it. */
.gts-brand-logo {
  width: 26px; height: 26px; flex: none; display: block; color: var(--text);
}
.gts-brand-word { font-weight: 800; letter-spacing: -0.015em; }
.gts-brand-word strong { font-weight: 700; }
/* 2026-07-03: the official GRACE [transla.te] wordmark image replaces the
   icon + text lockup in the sidebar brand. Wide artwork: cap the height,
   let the width follow, never overflow the rail. */
.gts-brand-wordmark {
  display: block; height: 30px; width: auto; max-width: 100%; flex: none;
}
.gts-brand-sub {
  font-size: var(--text-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gts-nav-label {
  font-size: var(--text-xs); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-4) var(--space-3) var(--space-2);
}
.gts-nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none;
  font-size: var(--text-sm); font-weight: 500;
  background: transparent; border: none; width: 100%;
  text-align: left; cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--dur) var(--ease);
}
.gts-nav-item:hover { background: var(--surface-alt); text-decoration: none; color: var(--text); }
.gts-nav-item.active { background: var(--burgundy-soft); font-weight: 600; }
.gts-nav-item svg { width: 17px; height: 17px; flex: none; stroke: currentColor; opacity: 0.75; }
.gts-soon {
  margin-left: auto;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-muted); background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 1px 6px; border-radius: var(--radius-pill);
}

.gts-topbar {
  position: fixed;
  top: 0; left: var(--gts-sidebar-w); right: 0;
  height: var(--gts-topbar-h);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  z-index: 30;
}
.gts-tb-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted);
  font: 500 var(--text-sm) var(--font-sans);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gts-tb-btn:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
.gts-tb-btn svg { width: 17px; height: 17px; stroke: currentColor; }
.gts-avatar {
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-alt);
  cursor: pointer; overflow: hidden; padding: 0; margin-left: var(--space-2);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 var(--text-sm) var(--font-sans); color: var(--text);
  flex: none;
}
.gts-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gts-burger { display: none; margin-right: auto; }

.gts-menu {
  position: fixed;
  top: calc(var(--gts-topbar-h) + 6px); right: var(--space-4);
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--elev-3);
  padding: var(--space-2);
  z-index: 50;
  display: none;
}
.gts-menu.open { display: block; }
.gts-menu-head { padding: var(--space-3); }
.gts-menu-email { font-weight: 600; color: var(--text); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; }
.gts-menu-sub { color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; }
.gts-menu-usage {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs); color: var(--text-muted);
}
.gts-menu-usage strong { color: var(--text); font-size: var(--text-sm); font-weight: 600; }
.gts-menu-divider { height: 1px; background: var(--border); margin: var(--space-2) 0; }
.gts-menu a, .gts-menu button.gts-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none;
  font: 400 var(--text-sm) var(--font-sans);
  background: transparent; border: none; cursor: pointer;
}
.gts-menu a:hover, .gts-menu button.gts-menu-item:hover {
  background: var(--surface-alt); text-decoration: none; color: var(--text);
}
.gts-signout-form { margin: 0; }

.gts-pop {
  position: fixed;
  top: calc(var(--gts-topbar-h) + 6px); right: var(--space-4);
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--elev-3);
  padding: var(--space-6);
  z-index: 50;
  display: none;
  text-align: center;
  color: var(--text-muted); font-size: var(--text-sm);
}
.gts-pop.open { display: block; }

.gts-toast {
  position: fixed;
  bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--surface);
  font: 500 var(--text-sm) var(--font-sans);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-3);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.gts-toast.show { opacity: 1; }

.gts-scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 35;
  display: none;
}

/* The live console uses the whole stage; navigation opens as an overlay. */
body.gts-console-focus .gts-main { margin-left: 0; }
body.gts-console-focus .gts-topbar { left: 0; }
body.gts-console-focus .gts-burger { display: inline-flex; }
body.gts-console-focus .gts-sidebar { transform: translateX(-100%); transition: transform var(--dur) var(--ease); }
body.gts-console-focus .gts-sidebar.open { transform: translateX(0); box-shadow: var(--elev-3); }
body.gts-console-focus .gts-scrim.open { display: block; }
@media (prefers-reduced-motion: reduce) {
  body.gts-console-focus .gts-sidebar { transition: none; }
}

@media (max-width: 900px) {
  .gts-sidebar { transform: translateX(-100%); transition: transform var(--dur) var(--ease); }
  .gts-sidebar.open { transform: translateX(0); box-shadow: var(--elev-3); }
  .gts-main { margin-left: 0; }
  .gts-topbar { left: 0; }
  .gts-burger { display: inline-flex; }
  .gts-scrim.open { display: block; }
  /* Icon-only top bar on phones — the labeled buttons overflow 390px and
     push the hamburger off-screen (caught by scripts/shell_smoke.py). */
  .gts-topbar .gts-tb-btn span { display: none; }
}