/* ============================================================================
   GAWAI — Institutional Workspace (Editorial redesign 2026-05-14)
   Ported from Claude Design handoff (h/AJN9Xeg3HdHa6V4kLKdhqg).
   Editorial typography (Newsreader italic + Public Sans + Space Grotesk + JetBrains Mono)
   with Gambia tricolor as 1px decoration only. Gold + teal accents.

   This file replaces the prior Institutional Dark layer. Existing templates use
   `gw-*` prefixed classes — those are preserved here (alias section throughout).
   New templates can use either set; non-prefixed names mirror the design handoff.
   ============================================================================ */

/* ---------- Self-hosted variable fonts (offline-first) -------------------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/vendor/fonts/space-grotesk-var.woff2') format('woff2-variations'),
       url('/static/vendor/fonts/space-grotesk-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/static/vendor/fonts/public-sans-var.woff2') format('woff2-variations'),
       url('/static/vendor/fonts/public-sans-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/vendor/fonts/jetbrains-mono-var.woff2') format('woff2-variations'),
       url('/static/vendor/fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
}

/* ---------- Design tokens -------------------------------------------------- */
:root {
  /* Type */
  --f-display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
  --f-body: "Public Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-serif: "Newsreader", "Source Serif Pro", Georgia, serif;

  /* Gambia tricolor — 1px decoration only */
  --gm-red: #d33a2a;
  --gm-blue: #224d8f;
  --gm-green: #2a8959;

  /* Dark surfaces — institutional, never pure black */
  --bg: #0a0e11;
  --bg-1: #0f1418;
  --bg-2: #141a1f;
  --bg-3: #192026;
  --bg-4: #1f272d;
  --bg-5: #262f36;

  /* Foreground */
  --fg: #e3eaf2;
  --fg-1: #c5cdd6;
  --fg-2: #97a0aa;
  --fg-3: #6e767e;
  --fg-4: #4a525a;

  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.1);
  --hairline-soft: rgba(255, 255, 255, 0.04);

  /* Accents */
  --accent: #fbbb54;
  --accent-deep: #c98a1c;
  --accent-soft: rgba(251, 187, 84, 0.12);
  --accent-edge: rgba(251, 187, 84, 0.35);

  --teal: #74d3ee;
  --teal-deep: #1f8fa8;
  --teal-soft: rgba(116, 211, 238, 0.1);
  --teal-edge: rgba(116, 211, 238, 0.32);

  --green: #79e6a8;
  --green-soft: rgba(121, 230, 168, 0.1);
  --green-edge: rgba(121, 230, 168, 0.32);

  --red: #fa746f;
  --red-soft: rgba(250, 116, 111, 0.1);
  --red-edge: rgba(250, 116, 111, 0.3);

  /* Density */
  --row: 56px;
  --row-sm: 44px;
  --r: 10px;
  --r-lg: 16px;
  --r-sm: 6px;
  --pad: 20px;
  --pad-sm: 12px;
  --gap: 16px;

  --shadow-modal: 0 22px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* Layout */
  --sidenav-w: 232px;
  --sidenav-collapsed: 64px;
  --topbar-h: 56px;
  --tabbar-h: 64px;

  /* Legacy gw- aliases */
  --gw-bg: var(--bg);
  --gw-surface-low: var(--bg-1);
  --gw-surface: var(--bg-2);
  --gw-surface-high: var(--bg-3);
  --gw-surface-highest: var(--bg-4);
  --gw-surface-bright: var(--bg-5);
  --gw-text: var(--fg);
  --gw-text-muted: var(--fg-2);
  --gw-text-faint: var(--fg-3);
  --gw-hairline: var(--hairline);
  --gw-hairline-strong: var(--hairline-strong);
  --gw-gold: var(--accent);
  --gw-gold-dim: var(--accent-deep);
  --gw-gold-soft-bg: var(--accent-soft);
  --gw-gold-soft-border: var(--accent-edge);
  --gw-teal: var(--teal);
  --gw-teal-soft-bg: var(--teal-soft);
  --gw-teal-soft-border: var(--teal-edge);
  --gw-green: var(--green);
  --gw-green-soft-bg: var(--green-soft);
  --gw-green-soft-border: var(--green-edge);
  --gw-red: var(--red);
  --gw-red-soft-bg: var(--red-soft);
  --gw-red-soft-border: var(--red-edge);
  --gw-r: var(--r);
  --gw-r-lg: var(--r-lg);
  --gw-r-sm: var(--r-sm);
  --gw-1: 4px; --gw-2: 8px; --gw-3: 12px; --gw-4: 16px;
  --gw-5: 20px; --gw-6: 24px; --gw-8: 32px; --gw-10: 40px;
  --gw-12: 48px; --gw-16: 64px;
  --gw-font-body: var(--f-body);
  --gw-font-head: var(--f-display);
  --gw-font-mono: var(--f-mono);
  --gw-font-serif: var(--f-serif);
  --gw-dur: 0.18s;
  --gw-ease: cubic-bezier(.2,.7,.3,1);
  --gw-shadow-pop: var(--shadow-pop);
}

/* Light — institutional cream */
[data-theme="light"] {
  --bg: #f5f1e9;
  --bg-1: #ece7da;
  --bg-2: #fbf8f1;
  --bg-3: #ffffff;
  --bg-4: #f0ebde;
  --bg-5: #e6e0cf;

  --fg: #1a1d20;
  --fg-1: #2e3338;
  --fg-2: #585f66;
  --fg-3: #7a818a;
  --fg-4: #a9aeb4;

  --hairline: rgba(20, 25, 30, 0.1);
  --hairline-strong: rgba(20, 25, 30, 0.18);
  --hairline-soft: rgba(20, 25, 30, 0.05);

  --accent: #c98a1c;
  --accent-deep: #8c5d09;
  --accent-soft: rgba(201, 138, 28, 0.12);
  --accent-edge: rgba(201, 138, 28, 0.4);

  --teal: #1f7e94;
  --teal-deep: #0e5b6c;
  --teal-soft: rgba(31, 126, 148, 0.1);
  --teal-edge: rgba(31, 126, 148, 0.32);

  --green: #1a8551;
  --green-soft: rgba(26, 133, 81, 0.1);
  --green-edge: rgba(26, 133, 81, 0.32);

  --red: #c4302c;
  --red-soft: rgba(196, 48, 44, 0.1);
  --red-edge: rgba(196, 48, 44, 0.3);

  --shadow-modal: 0 22px 60px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.14);
}

[data-density="compact"] {
  --row: 44px; --row-sm: 38px; --pad: 14px; --pad-sm: 10px; --gap: 12px;
}
[data-density="comfortable"] {
  --row: 68px; --row-sm: 52px; --pad: 26px; --pad-sm: 16px; --gap: 22px;
}
[data-accent="teal"] {
  --accent: var(--teal); --accent-deep: var(--teal-deep);
  --accent-soft: var(--teal-soft); --accent-edge: var(--teal-edge);
}
[data-accent="green"] {
  --accent: var(--green); --accent-deep: #086b3f;
  --accent-soft: var(--green-soft); --accent-edge: var(--green-edge);
}

/* ---------- Base ---------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  background-image:
    radial-gradient(900px 600px at 100% -10%, rgba(244, 195, 97, 0.05), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(106, 207, 217, 0.04), transparent 55%);
  background-attachment: fixed;
}
[data-theme="light"] body {
  background-image:
    radial-gradient(900px 600px at 100% -10%, rgba(184, 124, 28, 0.07), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(26, 125, 138, 0.04), transparent 55%);
}
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); color: var(--fg); }

.gw-skip {
  position: absolute; top: -100px; left: 12px; z-index: 1000;
  background: var(--bg-3); color: var(--fg);
  padding: 10px 14px; border-radius: 6px;
  border: 1px solid var(--hairline-strong);
}
.gw-skip:focus { top: 12px; }

.ic, .gw-navicon { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }

/* ---------- Typography helpers ------------------------------------------- */
.eyebrow, .gw-eyebrow {
  font-family: var(--f-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3); margin: 0;
}
.h1, .gw-h1 {
  font-family: var(--f-display);
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 6px 0 0;
  color: var(--fg);
}
.h1 em, .gw-h1 em, .editorial em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.serif { font-family: var(--f-serif); font-weight: 400; font-style: italic; color: var(--fg-1); letter-spacing: -0.005em; }
.display-num {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
}
.h2, .gw-h2 {
  font-family: var(--f-display);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.012em; line-height: 1.2;
  margin: 0;
}
.h3, .gw-h3 {
  font-family: var(--f-display);
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.008em; margin: 0;
}
.sub, .gw-sub { color: var(--fg-2); font-size: 14.5px; }
.tiny, .gw-tiny, .gw-small { font-size: 12px; color: var(--fg-3); }
.muted, .gw-muted, .gw-faint { color: var(--fg-2); }
.mono, .gw-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.num { font-feature-settings: "tnum" 1, "ss01" 1; font-variant-numeric: tabular-nums; }
.gw-h-display { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.022em; }
.gw-font-head { font-family: var(--f-display); }
.gw-font-body { font-family: var(--f-body); }
.gw-font-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.gw-gold { color: var(--accent); }
.gw-teal { color: var(--teal); }
.gw-green { color: var(--green); }
.gw-red { color: var(--red); }
.gw-gold-fig { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.022em; color: var(--accent); font-variant-numeric: tabular-nums; }
.gw-gold-dim { color: var(--accent-deep); }
.gw-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Gambia tricolor */
.tricolor, .gw-tricolor {
  display: inline-flex; gap: 0; height: 12px;
  vertical-align: middle;
}
.tricolor i, .gw-tricolor i { display: block; width: 2px; height: 100%; }
.tricolor i:nth-child(1), .gw-tricolor i:nth-child(1) { background: var(--gm-red); }
.tricolor i:nth-child(2), .gw-tricolor i:nth-child(2) { background: #fff; opacity: 0.6; }
.tricolor i:nth-child(3), .gw-tricolor i:nth-child(3) { background: var(--gm-blue); }
.tricolor i:nth-child(4), .gw-tricolor i:nth-child(4) { background: #fff; opacity: 0.6; }
.tricolor i:nth-child(5), .gw-tricolor i:nth-child(5) { background: var(--gm-green); }
.tricolor.long, .gw-tricolor.long { height: 1px; width: 64px; }
.tricolor.long i, .gw-tricolor.long i { width: 100%; height: 1px; flex: 1; }
.tricolor.long i:nth-child(2), .tricolor.long i:nth-child(4),
.gw-tricolor.long i:nth-child(2), .gw-tricolor.long i:nth-child(4) { flex: 0 0 1px; }

.rule-cap {
  position: relative;
  border-top: 1px solid var(--hairline-strong);
  padding-top: 14px; margin-top: 14px;
}
.rule-cap::before {
  content: "";
  position: absolute; top: -1px; left: 0; width: 64px; height: 1px;
  background: linear-gradient(to right,
    var(--gm-red) 0 12px, transparent 12px 16px,
    var(--gm-blue) 16px 28px, transparent 28px 32px,
    var(--gm-green) 32px 44px);
}

.editorial-rule {
  display: flex; align-items: center; gap: 14px;
  margin: 6px 0 18px;
}
.editorial-rule::before, .editorial-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline-strong);
}
.editorial-rule__label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.eyebrow-rule {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 14px;
}
.eyebrow-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline);
}

.folio {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.margin-note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.4;
}

.pull-quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--fg);
  padding-left: 14px;
  border-left: 2px solid var(--accent);
}

.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  transform: rotate(-2deg);
  opacity: 0.85;
}

.spec-list { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 10px 18px; align-items: baseline; }
.spec-list dt {
  font-family: var(--f-body);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); padding-top: 2px;
}
.spec-list dd { margin: 0; color: var(--fg); font-size: 14px; }
.spec-list dd.mono { font-family: var(--f-mono); }

/* ---------- App shell ---------------------------------------------------- */
.app, .gw-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidenav-w) 1fr;
  grid-template-rows: var(--topbar-h) 22px 1fr;
  grid-template-areas:
    "side top"
    "side strip"
    "side main";
  background: var(--bg);
}
.app.is-collapsed, .gw-app.is-collapsed { grid-template-columns: var(--sidenav-collapsed) 1fr; }

.control-strip, .gw-control-strip {
  grid-area: strip;
  display: flex; align-items: center; gap: 22px;
  padding: 0 22px;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-1);
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  overflow: hidden;
  position: sticky; top: var(--topbar-h); z-index: 29;
}
.control-strip__item, .gw-control-strip__item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.control-strip__item b, .gw-control-strip__item b { color: var(--fg-1); font-weight: 600; }
.control-strip__sep, .gw-control-strip__sep { width: 1px; height: 10px; background: var(--hairline-strong); }
.control-strip .dot-pulse, .gw-control-strip .dot-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 var(--green);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(121, 230, 168, 0.5); }
  100% { box-shadow: 0 0 0 6px rgba(121, 230, 168, 0); }
}

/* Top bar */
.topbar, .gw-topbar {
  grid-area: top;
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: rgba(10, 14, 17, 0.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
[data-theme="light"] .topbar, [data-theme="light"] .gw-topbar { background: rgba(245, 241, 233, 0.86); }
.topbar__search, .gw-topbar__search {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  color: var(--fg-2);
  max-width: 520px;
  margin: 0 auto;
  font-size: 13.5px;
  cursor: text;
  transition: border-color 0.15s, background 0.15s;
}
.topbar__search:hover, .gw-topbar__search:hover { border-color: var(--hairline-strong); }
.topbar__right, .gw-topbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.gw-search-field {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; color: inherit;
  text-align: left; padding: 0; height: 100%; width: 100%;
}
.gw-search-field .kbd, .gw-search-field .gw-kbd { margin-left: auto; }

.gw-topbar__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  margin-right: 10px;
}
.gw-topbar__brand:hover { text-decoration: none; }

/* Mark (logomark) */
.mark, .gw-mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: linear-gradient(155deg, #1a2530 0%, #0c1216 100%);
  border: 1px solid var(--hairline-strong);
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.mark::before, .gw-mark::before {
  content: "G";
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.04em;
  position: relative;
  z-index: 2;
  margin-top: -2px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.mark::after, .gw-mark::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(to right,
    var(--gm-red) 0 33.33%,
    var(--gm-blue) 33.33% 66.66%,
    var(--gm-green) 66.66% 100%);
  opacity: 0.9;
  z-index: 1;
}
.mark.lg, .gw-mark.lg { width: 56px; height: 56px; border-radius: 10px; }
.mark.lg::before, .gw-mark.lg::before { font-size: 42px; margin-top: -3px; }
.mark.lg::after, .gw-mark.lg::after { height: 5px; }
.mark.xl, .gw-mark.xl { width: 96px; height: 96px; border-radius: 16px; border-width: 1.5px; }
.mark.xl::before, .gw-mark.xl::before { font-size: 72px; margin-top: -5px; }
.mark.xl::after, .gw-mark.xl::after { height: 8px; }

.wordmark, .gw-wordmark {
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em;
}
.wordmark b, .gw-wordmark b { font-size: 17px; font-weight: 500; font-style: italic; }
.wordmark span, .gw-wordmark span {
  font-size: 9.5px; letter-spacing: 0.18em; color: var(--fg-3);
  margin-top: 4px; text-transform: uppercase; font-weight: 600;
  font-style: normal; font-family: var(--f-mono);
}

/* Side nav */
.sidenav, .gw-sidenav {
  grid-area: side;
  position: sticky; top: 0;
  height: 100vh;
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  z-index: 20;
}
.sidenav__brand, .gw-sidenav__brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: inherit;
}

.sidenav__list, .gw-sidenav__list { flex: 1; padding: 14px 10px; overflow-y: auto; }
.sidenav__group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-4); padding: 14px 10px 8px; }
.navitem, .gw-navitem {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  margin: 1px 0;
  border-radius: 8px;
  color: var(--fg-1);
  cursor: pointer;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.navitem:hover, .gw-navitem:hover { background: var(--bg-1); color: var(--fg); text-decoration: none; }
.navitem .ic, .gw-navitem .gw-navicon, .navitem .gw-navicon { width: 18px; height: 18px; flex-shrink: 0; color: var(--fg-2); }
.gw-navitem i.ti { color: var(--fg-2); font-size: 18px; }
.navitem.active, .gw-navitem.is-active, .navitem.is-active {
  background: var(--bg-2);
  color: var(--fg);
}
.navitem.active::before, .gw-navitem.is-active::before, .navitem.is-active::before {
  content: "";
  position: absolute; left: -10px; top: 8px; bottom: 8px; width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.navitem.active .ic, .navitem.active .gw-navicon,
.gw-navitem.is-active .gw-navicon, .gw-navitem.is-active .ic,
.gw-navitem.is-active i.ti { color: var(--accent); }

.navtext, .gw-navtext { color: inherit; }
.sidenav__foot, .gw-sidenav__foot {
  padding: 14px 16px;
  border-top: 1px solid var(--hairline);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
  display: flex; align-items: center; gap: 8px;
}

/* Collapsed */
.app.is-collapsed .sidenav__brand .wordmark,
.app.is-collapsed .gw-sidenav__brand .gw-wordmark,
.app.is-collapsed .navtext,
.app.is-collapsed .gw-navtext,
.app.is-collapsed .sidenav__foot span,
.app.is-collapsed .gw-sidenav__foot span,
.gw-app.is-collapsed .gw-sidenav__brand .gw-wordmark,
.gw-app.is-collapsed .gw-navtext,
.gw-app.is-collapsed .gw-sidenav__foot span { display: none; }
.app.is-collapsed .navitem,
.app.is-collapsed .gw-navitem,
.gw-app.is-collapsed .gw-navitem { justify-content: center; }

/* Main */
.main, .gw-main {
  grid-area: main;
  min-width: 0;
  padding: 32px 36px 80px;
}
.container, .gw-container { max-width: 1320px; margin: 0 auto; }
.gw-content-max { max-width: 1320px; margin: 0 auto; }
.page-head, .gw-page-head { margin-bottom: 28px; }
.page-head__row, .gw-page-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head__actions, .gw-page-head__actions { display: flex; gap: 8px; align-items: center; }
.page-sub, .gw-page-sub { color: var(--fg-2); margin: 10px 0 0; font-size: 14.5px; max-width: 60ch; }

/* ---------- Buttons ------------------------------------------------------- */
.btn, .gw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.05s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover, .gw-btn:hover { background: var(--bg-3); border-color: var(--hairline-strong); text-decoration: none; }
.btn:active, .gw-btn:active { transform: translateY(1px); }
.btn .ic, .gw-btn .ic, .gw-btn i.ti { width: 16px; height: 16px; font-size: 16px; }
.btn.primary, .gw-btn--primary, .gw-btn--brand {
  background: var(--accent);
  color: #2d1d00;
  border-color: var(--accent-deep);
}
[data-theme="light"] .btn.primary, [data-theme="light"] .gw-btn--primary { color: #fff; }
.btn.primary:hover, .gw-btn--primary:hover, .gw-btn--brand:hover { background: #fcc26b; }
.btn.ghost, .gw-btn--ghost { background: transparent; border-color: transparent; color: var(--fg-1); }
.btn.ghost:hover, .gw-btn--ghost:hover { background: var(--bg-2); }
.btn.danger, .gw-btn--danger { color: var(--red); }
.btn.danger:hover, .gw-btn--danger:hover { background: var(--red-soft); border-color: var(--red-edge); }
.gw-btn--secondary { background: var(--bg-3); border-color: var(--hairline-strong); }
.btn.sm, .gw-btn--sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn.lg, .gw-btn--lg { height: 44px; padding: 0 22px; font-size: 14.5px; }
.btn.icon, .gw-btn--icon { width: 36px; padding: 0; }
.gw-btn--block { width: 100%; }
.btn:disabled, .gw-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.iconbtn, .gw-icon-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--fg-1);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.iconbtn:hover, .gw-icon-btn:hover { background: var(--bg-2); color: var(--fg); }
.iconbtn .ic, .gw-icon-btn .ic, .gw-icon-btn i.ti { width: 18px; height: 18px; font-size: 18px; }
.iconbtn .dot, .gw-icon-btn .gw-dot, .gw-dot {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-sizing: content-box;
}

/* User chip */
.userchip, .gw-userchip {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 4px 4px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.userchip:hover, .gw-userchip:hover { background: var(--bg-2); }
.userchip .avatar, .gw-userchip .gw-avatar, .gw-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--teal-deep), var(--bg-3));
  color: var(--teal);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  border: 1px solid var(--teal-edge);
}
.userchip__meta, .gw-userchip__meta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; white-space: nowrap; }
.userchip__meta b, .gw-userchip__meta b { font-size: 13px; font-weight: 600; }
.userchip__meta span, .gw-userchip__meta span { font-size: 10.5px; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }

/* ---------- Pills / status ----------------------------------------------- */
.pill, .gw-badge, .gw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--bg-3);
  color: var(--fg-1);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.pill .dot, .gw-badge .gw-dot-sm, .gw-dot-sm { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.gold, .gw-badge--gold { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-edge); }
.pill.teal, .gw-badge--teal { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-edge); }
.pill.green, .gw-badge--green { background: var(--green-soft); color: var(--green); border-color: var(--green-edge); }
.pill.red, .gw-badge--red, .gw-badge--danger { background: var(--red-soft); color: var(--red); border-color: var(--red-edge); }
.pill.neutral, .gw-badge--neutral { background: var(--bg-2); color: var(--fg-2); }
.pill.lg { height: 26px; padding: 0 12px; font-size: 11.5px; }

.kbd, .gw-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--bg-3);
  border: 1px solid var(--hairline);
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--fg-2);
}

/* ---------- Card --------------------------------------------------------- */
.card, .gw-card {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.card.flat, .gw-card.flat { background: transparent; }
.card__head, .gw-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.card__head::before, .gw-card__head::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.card__head.plain::before, .gw-card__head--plain::before { display: none; }
.card__head .h2, .gw-card__head .gw-h2, .gw-card__head h3 { font-size: 15px; }
.card__head .actions, .gw-card__head .actions, .gw-card__actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card__body, .gw-card__body { padding: 20px; }
.card__body.flush, .gw-card__body--flush { padding: 0; }
.gw-card__foot { padding: 14px 20px; border-top: 1px solid var(--hairline); }

/* ---------- Grid helpers -------------------------------------------------- */
.stack, .gw-stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack.tight, .gw-stack.tight { gap: 8px; }
.stack.loose, .gw-stack.loose { gap: 28px; }
.row, .gw-row, .gw-flex { display: flex; align-items: center; gap: var(--gap); }
.row.wrap, .gw-row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow, .gw-grow { flex: 1; min-width: 0; }
.cols-2, .gw-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.cols-3, .gw-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.cols-8-4, .gw-cols-8-4 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); }
.gw-gap-2 { gap: 8px; }
.gw-gap-3 { gap: 12px; }
.gw-mt-1 { margin-top: 4px; }
.gw-mt-2 { margin-top: 8px; }
.gw-mt-3 { margin-top: 12px; }
.gw-mt-4 { margin-top: 16px; }
.gw-mt-5 { margin-top: 20px; }
.gw-mt-6 { margin-top: 24px; }

/* ---------- KPI ---------------------------------------------------------- */
.kpi, .gw-kpi {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.kpi::before, .gw-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--hairline-strong);
}
.kpi.is-gold::before, .gw-kpi.is-gold::before { background: var(--accent); }
.kpi.is-teal::before, .gw-kpi.is-teal::before { background: var(--teal); }
.kpi.is-green::before, .gw-kpi.is-green::before { background: var(--green); }
.kpi__ref, .gw-kpi__ref {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--f-mono); font-size: 9.5px; color: var(--fg-4);
  letter-spacing: 0.12em;
}
.kpi__label, .gw-kpi__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3);
  display: flex; align-items: center; gap: 8px;
}
.kpi__label .tricolor { height: 9px; }
.kpi__value, .gw-kpi__value {
  font-family: var(--f-display);
  font-size: 44px; line-height: 0.95; font-weight: 400;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  margin: 10px 0 4px;
  display: flex; align-items: baseline; gap: 6px;
}
.kpi__value .sub-num { font-size: 19px; color: var(--fg-3); font-weight: 400; letter-spacing: 0; }
.kpi__value.gold, .gw-kpi__value.gold { color: var(--accent); }
.kpi__value.teal, .gw-kpi__value.teal { color: var(--teal); }
.kpi__trend, .gw-kpi__trend {
  font-size: 11.5px; color: var(--fg-2);
  display: flex; align-items: center; gap: 5px;
  margin-top: 4px;
}
.kpi__trend .ic, .gw-kpi__trend .ic { width: 13px; height: 13px; }
.kpi__trend.up { color: var(--green); }
.kpi__trend.down { color: var(--red); }
.kpi__spark, .gw-kpi__spark { position: absolute; right: 0; bottom: 0; opacity: 0.7; }

/* ---------- Queue row ---------------------------------------------------- */
.qrow, .gw-actionrow {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.qrow:last-child, .gw-actionrow:last-child { border-bottom: 0; }
.qrow:hover, .gw-actionrow:hover { background: var(--bg-3); text-decoration: none; }
.qrow__icon, .gw-actionrow__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--bg-3);
  border: 1px solid var(--hairline);
  color: var(--fg-1);
  flex-shrink: 0;
}
.qrow__icon .ic, .gw-actionrow__icon .ic, .gw-actionrow__icon i.ti { width: 19px; height: 19px; font-size: 19px; }
.qrow__main, .gw-actionrow__main { flex: 1; min-width: 0; }
.qrow__main b, .gw-actionrow__main b { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.qrow__meta, .gw-actionrow__meta { font-size: 12.5px; color: var(--fg-3); margin-top: 3px; }
.qrow__count { font-family: var(--f-display); font-size: 22px; font-weight: 600; color: var(--fg); margin-right: 6px; font-variant-numeric: tabular-nums; line-height: 1; }

/* ---------- Table -------------------------------------------------------- */
.tbl-wrap, .gw-tbl-wrap { overflow-x: auto; }
.tbl, .gw-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tbl thead th, .gw-tbl thead th {
  text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-1);
  position: sticky; top: 0;
  white-space: nowrap;
}
.tbl tbody td, .gw-tbl tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle;
}
.tbl tbody tr, .gw-tbl tbody tr { transition: background 0.1s; }
.tbl tbody tr:hover, .gw-tbl tbody tr:hover { background: var(--bg-3); }
.tbl tbody tr:hover .row-actions { opacity: 1; }
.tbl tbody td.right, .gw-tbl tbody td.right { text-align: right; }
.tbl tbody td .id, .gw-tbl tbody td .id { font-family: var(--f-mono); font-size: 11px; color: var(--fg-3); display: block; margin-top: 3px; }
.row-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }

/* ---------- Forms -------------------------------------------------------- */
.field, .gw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.label, .gw-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3);
}
.input, .gw-input,
.select, .gw-select,
.textarea, .gw-textarea {
  height: 40px;
  padding: 0 12px;
  background: var(--bg-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  color: var(--fg);
  font-size: 14px;
  font-family: var(--f-body);
  width: 100%;
  transition: border-color 0.12s, background 0.12s;
}
.input::placeholder, .gw-input::placeholder { color: var(--fg-4); }
.input:hover, .gw-input:hover,
.select:hover, .gw-select:hover,
.textarea:hover, .gw-textarea:hover { border-color: var(--hairline-strong); }
.input:focus, .gw-input:focus,
.select:focus, .gw-select:focus,
.textarea:focus, .gw-textarea:focus {
  outline: none; border-color: var(--teal-edge);
  background: var(--bg-2); box-shadow: 0 0 0 3px var(--teal-soft);
}
.textarea, .gw-textarea { height: auto; padding: 12px; min-height: 80px; resize: vertical; line-height: 1.5; }
.select, .gw-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2397a0aa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.hint, .gw-hint { font-size: 12px; color: var(--fg-3); }

/* ---------- Alerts ------------------------------------------------------- */
.gw-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--hairline-strong);
  background: var(--bg-2);
  color: var(--fg);
  font-size: 13.5px;
  position: relative;
}
.gw-alert i.ti { color: var(--fg-2); flex-shrink: 0; }
.gw-alert--success { background: var(--green-soft); border-color: var(--green-edge); }
.gw-alert--success i.ti { color: var(--green); }
.gw-alert--info { background: var(--teal-soft); border-color: var(--teal-edge); }
.gw-alert--info i.ti { color: var(--teal); }
.gw-alert--warning { background: var(--accent-soft); border-color: var(--accent-edge); }
.gw-alert--warning i.ti { color: var(--accent); }
.gw-alert--danger { background: var(--red-soft); border-color: var(--red-edge); }
.gw-alert--danger i.ti { color: var(--red); }
.gw-alert__close { background: none; border: 0; color: var(--fg-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }

/* ---------- Misc --------------------------------------------------------- */
.divider, .gw-divider { height: 1px; background: var(--hairline); margin: 16px 0; }
.divider.thick { background: var(--hairline-strong); }
.crossrule {
  height: 1px; background: var(--hairline-strong);
  position: relative; margin: 16px 0;
}
.crossrule::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--hairline); }
.dotgrid {
  background-image: radial-gradient(circle at 1px 1px, var(--hairline-strong) 1px, transparent 1px);
  background-size: 24px 24px;
}

.paper {
  background: #fbf8f0;
  color: #1d1d1b;
  position: relative;
}
.paper::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 30% 20%, rgba(0,0,0,0.025), transparent 50%);
  pointer-events: none;
}

/* Footer */
.gw-footer { margin-top: 56px; border-top: 1px solid var(--hairline); padding: 22px 0 0; color: var(--fg-3); font-size: 12.5px; }
.gw-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1320px; margin: 0 auto; }
.gw-footer-links { display: flex; gap: 18px; align-items: center; }
.gw-footer-links a { color: var(--fg-2); }
.gw-version { font-family: var(--f-mono); font-size: 11px; color: var(--fg-4); letter-spacing: 0.08em; }

/* ---------- Mobile ------------------------------------------------------- */
.show-mobile, .gw-show-mobile { display: none !important; }
.show-desktop, .gw-hide-mobile { display: initial; }

/* ============================================================================
   Mobile responsiveness — written mobile-first from 375px (iPhone SE) upward.
   Three breakpoints:
     ≤ 600px   small phones (iPhone SE, Pixel 4a)
     ≤ 1024px  tablets + larger phones
     ≥ 1025px  desktop
   ============================================================================ */

@media (max-width: 1024px) {
  /* ─── Shell collapses to single column ─── */
  .app, .gw-app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 22px 1fr;
    grid-template-areas: "top" "strip" "main";
  }
  .sidenav, .gw-sidenav { display: none; }
  .main, .gw-main { padding: 18px 14px 96px; }

  /* ─── Top bar reflows ─── */
  .topbar, .gw-topbar { padding: 0 10px; gap: 8px; }
  .topbar__search, .gw-topbar__search {
    max-width: none;
    height: 38px;
    margin: 0;
  }
  /* Force search content onto one line, with mono kbd hint at right */
  .gw-search-field {
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
  }
  .gw-search-field > span:not(.gw-kbd):not(.kbd) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
  }
  .topbar__search .placeholder-long { display: none; }
  .userchip__meta, .gw-userchip__meta { display: none; }
  .gw-userchip { padding: 0; border: 0; height: auto; }
  .gw-userchip .gw-avatar, .userchip .avatar { margin: 0; }

  /* ─── Page head ─── */
  .h1, .gw-h1 { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.12; }
  .page-head, .gw-page-head { margin-bottom: 20px; }
  .page-head__row, .gw-page-head__row { flex-direction: column; align-items: stretch; gap: 14px; }
  .page-head__actions, .gw-page-head__actions { flex-wrap: wrap; gap: 8px; }
  .page-head__actions .gw-btn, .gw-page-head__actions .gw-btn { flex: 1 1 0; min-width: 130px; }
  .page-sub, .gw-page-sub { font-size: 14px; }

  /* ─── Show/hide helpers ─── */
  .show-mobile, .gw-show-mobile { display: initial !important; }
  .show-desktop, .gw-hide-mobile { display: none !important; }

  /* ─── Grid collapsing ─── */
  .cols-2, .cols-3, .cols-4, .cols-8-4,
  .gw-cols-2, .gw-cols-3, .gw-cols-8-4 { grid-template-columns: 1fr; }

  /* ─── Control strip becomes a tight info bar ─── */
  .control-strip, .gw-control-strip {
    padding: 0 12px;
    gap: 14px;
    font-size: 10px;
  }
  .control-strip__item:nth-child(n+6),
  .gw-control-strip__item:nth-child(n+6) { display: none; }

  /* ─── Dashboard hero stacks ─── */
  .dash-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 18px 0 20px;
    margin-bottom: 22px;
  }
  .dash-hero__numbers {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .dash-hero__numbers .kpi { padding: 14px 16px 16px; }
  .dash-hero__numbers .kpi__value, .kpi__value, .gw-kpi__value {
    font-size: 32px;
    margin: 6px 0 2px;
  }
  .dash-hero__numbers .kpi__label { font-size: 9.5px; letter-spacing: 0.12em; }
  .dash-hero__numbers .kpi__ref { font-size: 9px; top: 8px; right: 10px; }

  /* ─── Cards tighter ─── */
  .card__head, .gw-card__head { padding: 14px 16px; }
  .card__head h2, .card__head h3, .gw-card__head h2, .gw-card__head h3 { font-size: 14.5px; }
  .card__body, .gw-card__body { padding: 16px; }

  /* ─── Queue rows tighter, allow wrap ─── */
  .qrow, .gw-actionrow {
    padding: 14px 16px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .qrow__main, .gw-actionrow__main { flex: 1 1 60%; min-width: 0; }
  .qrow__main b, .gw-actionrow__main b { font-size: 13.5px; }
  .qrow__meta, .gw-actionrow__meta { font-size: 12px; }
  .qrow > i.ti, .gw-actionrow > i.ti { display: none; }

  /* ─── Tables: keep dense, wrap in scroll ─── */
  .tbl-wrap, .gw-tbl-wrap, .gw-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-lg);
    /* visual hint that content scrolls */
    background:
      linear-gradient(to right, var(--bg-2), var(--bg-2)) left center / 18px 100% no-repeat,
      linear-gradient(to right, rgba(0,0,0,0.4), transparent) left center / 12px 100% no-repeat,
      linear-gradient(to left, rgba(0,0,0,0.4), transparent) right center / 12px 100% no-repeat,
      var(--bg-2);
  }
  .tbl, .gw-tbl, .gw-table { min-width: 640px; }
  .tbl tbody td, .gw-tbl tbody td, .gw-table tbody td { padding: 13px 14px; }
  .tbl thead th, .gw-tbl thead th, .gw-table thead th { padding: 12px 14px; }

  /* ─── Workspace splits (assistant, finance) stack ─── */
  .assistant-wrap, .gw-chat-shell { grid-template-columns: 1fr; height: auto !important; gap: 14px; }
  .finance-wrap, .gw-fin { grid-template-columns: 1fr; height: auto !important; gap: 14px; }
  .finance-wrap > :first-child, .gw-fin > :first-child { max-height: 220px; overflow: auto; }
  .gw-fin-editor__body { grid-template-columns: 32px 1fr; }
  .gw-fin-pads { display: none; }

  /* ─── Inputs / buttons keep iOS-safe sizing ─── */
  .input, .gw-input, .select, .gw-select, .textarea, .gw-textarea { font-size: 16px; }
  .btn, .gw-btn { min-height: 40px; }
  .btn.sm, .gw-btn--sm { min-height: 32px; }

  /* ─── Editorial helpers gracefully shrink ─── */
  .display-num { font-size: clamp(28px, 9vw, 44px) !important; }
  .pull-quote { font-size: 16px; line-height: 1.45; padding-left: 12px; }
  .spec-list { grid-template-columns: 1fr; gap: 4px 0; }
  .spec-list dt { padding-top: 8px; }
}

/* Small phones (iPhone SE class — 375-413px) */
@media (max-width: 600px) {
  /* Brand shrinks to icon + tight wordmark; subtitle hides */
  .gw-topbar__brand .gw-wordmark span,
  .topbar .wordmark span { display: none; }
  .gw-topbar__brand .gw-wordmark b,
  .topbar .wordmark b { font-size: 14px; }

  /* Search becomes icon-pill with hidden text label */
  .gw-topbar__search, .topbar__search {
    height: 36px;
    padding: 0 10px;
  }
  .gw-search-field > span:not(.gw-kbd):not(.kbd) { display: none; }
  .gw-search-field .gw-kbd, .gw-search-field .kbd { display: none; }
  .gw-topbar__search { max-width: 44px; padding: 0; justify-content: center; background: transparent; border: 0; }
  .gw-topbar__search:hover { background: var(--bg-2); }
  .gw-search-field { justify-content: center; gap: 0; }
  .gw-search-field i.ti { font-size: 18px; color: var(--fg-1); }

  /* Userchip just an avatar; bell icon stays */
  .gw-userchip { border: 0; }

  /* Control strip — show just status + clock, hide envelope */
  .control-strip, .gw-control-strip {
    font-size: 9.5px;
    padding: 0 10px;
    gap: 10px;
  }
  .control-strip__item:nth-child(n+3),
  .gw-control-strip__item:nth-child(n+3) { display: none; }
  /* Keep clock visible (last item) */
  .gw-control-strip__item:last-child { display: flex !important; margin-left: auto; }

  /* Page head: smaller, no flex-row */
  .h1, .gw-h1 { font-size: 24px; line-height: 1.15; }
  .editorial-rule__label, .eyebrow-rule { font-size: 10.5px; letter-spacing: 0.12em; }
  .page-head, .gw-page-head { margin-bottom: 18px; }

  /* Dashboard hero — KPI 1×4 single column */
  .dash-hero__numbers { grid-template-columns: 1fr; gap: 10px; }
  .dash-hero__numbers .kpi { padding: 14px 16px; }
  .dash-hero__numbers .kpi__value { font-size: 28px; }
  .dash-hero { padding: 14px 0 16px; }

  /* Tighter main padding */
  .main, .gw-main { padding: 14px 12px 96px; }

  /* Container fills viewport */
  .gw-container, .container { padding: 0; }

  /* Card heads + body */
  .card__head, .gw-card__head { padding: 12px 14px; gap: 8px; }
  .card__body, .gw-card__body { padding: 14px; }
  .gw-card__head .gw-btn--sm { padding: 0 10px; font-size: 11.5px; }

  /* Activity rows */
  .qrow, .gw-actionrow { padding: 12px 14px; gap: 10px; }
  .qrow__icon, .gw-actionrow__icon { width: 36px; height: 36px; border-radius: 8px; }
  .gw-actionrow .gw-badge, .qrow .pill { font-size: 10px; padding: 0 7px; height: 20px; }

  /* Modals fill viewport */
  .gw-modal { max-width: 100%; }
  .gw-modal-scrim { padding: 6vh 8px 0; }

  /* Login hero hides earlier */
  .auth-shell { grid-template-columns: 1fr; }
  .auth-shell__hero { display: none; }
  .auth-shell__form { padding: 36px 20px; }
  .auth-card { max-width: 100%; }
}

/* Extra-small (≤375px specifically — older iPhone SE) */
@media (max-width: 380px) {
  .gw-topbar__brand .gw-wordmark,
  .topbar .wordmark { display: none; }
  .gw-mark, .mark { width: 28px; height: 28px; }
  .gw-mark::before, .mark::before { font-size: 20px; }
}

@media (min-width: 1025px) {
  .mobile-tabbar, .gw-tabbar { display: none !important; }
}

/* Mobile tab bar */
.mobile-tabbar, .gw-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 40;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(10, 14, 17, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  display: flex;
}
[data-theme="light"] .mobile-tabbar, [data-theme="light"] .gw-tabbar { background: rgba(245, 241, 233, 0.94); }
.mobile-tabbar a, .gw-tabbar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--fg-3);
  font-size: 10.5px;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  font-weight: 500;
}
.mobile-tabbar a .ic, .gw-tabbar a .gw-navicon, .gw-tabbar a i.ti { width: 22px; height: 22px; font-size: 22px; }
.mobile-tabbar a.active, .gw-tabbar a.is-active { color: var(--fg); }
.mobile-tabbar a.active .ic, .gw-tabbar a.is-active .gw-navicon, .gw-tabbar a.is-active i.ti { color: var(--accent); }
.mobile-tabbar a.active::after, .gw-tabbar a.is-active::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}

/* Drawer */
.scrim, .gw-drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 50;
}
.drawer, .gw-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 88vw; max-width: 320px;
  background: var(--bg);
  z-index: 51;
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  padding: 24px 20px;
  animation: slideIn 0.22s ease-out;
}
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* Modal scrim */
.gw-modal-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.62);
  display: grid; place-items: start center;
  padding: 12vh 16px 0;
  backdrop-filter: blur(2px);
}
.gw-modal {
  background: var(--bg-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  width: 100%; max-width: 600px;
}
.gw-modal--lg { max-width: 720px; }
.gw-modal__body { padding: 20px; }

/* Menus */
.gw-menu {
  position: absolute; z-index: 40;
  background: var(--bg-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  min-width: 240px;
  padding: 6px;
  overflow: hidden;
}
.gw-menu--right { right: 0; }
.gw-menu__head { padding: 8px 12px; color: var(--fg-3); font-size: 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; }
.gw-menu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--fg);
  text-decoration: none;
  font-size: 13.5px;
  cursor: pointer;
}
.gw-menu__item:hover { background: var(--bg-3); text-decoration: none; }
.gw-menu__item i.ti { color: var(--fg-2); }
.gw-menu__sep { height: 1px; background: var(--hairline); margin: 6px 0; }

/* Notification panel */
.gw-notif-panel { max-height: 380px; overflow-y: auto; padding: 6px; }
.gw-notif-empty { padding: 28px 14px; text-align: center; color: var(--fg-3); font-size: 13px; }
.gw-notif-item { display: flex; gap: 10px; padding: 10px 12px; border-radius: 6px; cursor: pointer; }
.gw-notif-item:hover { background: var(--bg-3); }
.gw-notif-item.is-unread { background: var(--accent-soft); }

/* Toasts */
.gw-toast-container { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.gw-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  max-width: 380px;
  font-size: 13.5px;
  color: var(--fg);
  transform: translateY(8px); opacity: 0;
  transition: transform 0.22s var(--gw-ease), opacity 0.22s;
}
.gw-toast.is-shown { transform: translateY(0); opacity: 1; }
.gw-toast--success { border-color: var(--green-edge); }
.gw-toast--success i.ti { color: var(--green); }
.gw-toast--error, .gw-toast--danger { border-color: var(--red-edge); }
.gw-toast--error i.ti, .gw-toast--danger i.ti { color: var(--red); }
.gw-toast--info { border-color: var(--teal-edge); }
.gw-toast--info i.ti { color: var(--teal); }
.gw-toast--warning { border-color: var(--accent-edge); }
.gw-toast--warning i.ti { color: var(--accent); }
.gw-toast__close { background: none; border: 0; color: var(--fg-3); font-size: 18px; line-height: 1; cursor: pointer; }

/* Reveal */
.reveal { animation: rev 0.4s ease-out both; }
@keyframes rev { 0% { opacity: 0.4; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

/* Workspace layouts */
.assistant-wrap, .gw-chat { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
.finance-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; gap: 16px; }
@media (max-width: 1200px) {
  .finance-wrap { grid-template-columns: 240px minmax(0, 1fr); }
  .finance-wrap > :last-child { display: none; }
}
@media (max-width: 1024px) {
  .assistant-wrap, .gw-chat { grid-template-columns: 1fr; height: auto !important; }
  .finance-wrap { grid-template-columns: 1fr; height: auto !important; }
  .finance-wrap > :first-child { max-height: 200px; }
}

/* ---------- Login (editorial split) -------------------------------------- */
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: var(--bg);
}
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } .auth-shell__hero { display: none; } }
.auth-shell__hero {
  background: linear-gradient(155deg, var(--bg-1) 0%, var(--bg) 100%);
  padding: clamp(40px, 6vw, 80px);
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.auth-shell__hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(800px 500px at 100% 0%, var(--accent-soft), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, var(--teal-soft), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.auth-shell__hero > * { position: relative; z-index: 1; }
.auth-shell__form {
  padding: clamp(32px, 5vw, 64px);
  display: flex; align-items: center;
  background: var(--bg);
}
.auth-card { width: 100%; max-width: 420px; margin: 0 auto; }

/* ---------- Editorial dash hero ------------------------------------------ */
.dash-hero {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px;
  padding: 32px 0 28px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 28px;
}
.dash-hero__lead .eyebrow-rule { margin-bottom: 18px; }
.dash-hero__numbers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.dash-hero__numbers .kpi { padding: 16px 18px; }

/* Spark line container */
.spark { display: inline-flex; height: 18px; width: 70px; vertical-align: middle; }

/* Helper visibility */
[hidden] { display: none !important; }

/* ============================================================================
   Compatibility aliases — classes still referenced by older templates.
   Map to the editorial design tokens above; minimal new visual rules.
   ============================================================================ */

/* Layout utilities */
.gw-items-center { align-items: center; }
.gw-justify-between { justify-content: space-between; }
.gw-row--wrap { flex-wrap: wrap; }
.gw-stack-6 { display: flex; flex-direction: column; gap: 24px; }
.gw-text-center { text-align: center; }
.gw-text-right { text-align: right; }
.gw-page-actions { display: flex; gap: 8px; align-items: center; }
.gw-page-lead, .gw-lead { color: var(--fg-2); font-size: 15px; max-width: 60ch; }
.gw-num, .gw-num-r { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; font-family: var(--f-mono); }
.gw-num-r { text-align: right; }
.gw-reveal { animation: rev 0.4s ease-out both; }
.gw-row-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.gw-table tr:hover .gw-row-actions, .gw-tbl tr:hover .gw-row-actions { opacity: 1; }

/* Body wrapper */
.gw-body { background: var(--bg); color: var(--fg); font-family: var(--f-body); }

/* Tables (legacy gw-table → editorial tbl styling) */
.gw-table-wrap { overflow-x: auto; }
.gw-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13.5px;
}
.gw-table thead th {
  text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-1);
  white-space: nowrap;
}
.gw-table tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle;
}
.gw-table tbody tr { transition: background 0.1s; }
.gw-table tbody tr:hover { background: var(--bg-3); }

/* Pills (legacy gw-pill — alias to editorial pill) */
.gw-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--bg-3); color: var(--fg-1);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.gw-pill .gw-dot-sm { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gw-pill--action { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-edge); }
.gw-pill--overdue { background: var(--red-soft); color: var(--red); border-color: var(--red-edge); }
.gw-pill--progress { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-edge); }
.gw-pill--ok { background: var(--green-soft); color: var(--green); border-color: var(--green-edge); }
.gw-pill--neutral { background: var(--bg-2); color: var(--fg-2); }

/* KPI grid (legacy) */
.gw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}

/* Progress bar */
.gw-progress {
  height: 4px;
  background: var(--bg-3);
  border-radius: 2px;
  overflow: hidden;
}
.gw-progress__bar {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s var(--gw-ease);
}
.gw-progress__bar.is-done { background: var(--green); }

/* Modal head + foot */
.gw-modal__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.gw-modal__head::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background: var(--accent); border-radius: 2px;
}
.gw-modal__head h2, .gw-modal__head h3 { font-family: var(--f-display); font-size: 17px; margin: 0; }
.gw-modal__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* Switch (toggle) */
.gw-switch {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.gw-switch input { position: absolute; opacity: 0; }
.gw-switch__track {
  width: 38px; height: 22px;
  background: var(--bg-4);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.gw-switch__track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--fg-1);
  border-radius: 50%;
  transition: transform 0.18s var(--gw-ease), background 0.18s;
}
.gw-switch input:checked + .gw-switch__track {
  background: var(--accent-soft);
  border-color: var(--accent-edge);
}
.gw-switch input:checked + .gw-switch__track::after {
  transform: translateX(16px);
  background: var(--accent);
}

/* Spinner */
.gw-spin {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--hairline-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: gw-spin 0.7s linear infinite;
}
@keyframes gw-spin { to { transform: rotate(360deg); } }

/* Input invalid state */
.gw-input--invalid, .gw-input.is-invalid {
  border-color: var(--red-edge);
  box-shadow: 0 0 0 3px var(--red-soft);
}

/* Auth (legacy — login already redesigned) */
.gw-auth { width: 100%; max-width: 420px; margin: 0 auto; }
.gw-auth__brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 24px; }
.gw-auth__card { background: var(--bg-2); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.gw-auth__card-top { border-top: 2px solid var(--accent); }
.gw-auth__body { padding: 24px; }
.gw-auth__foot { text-align: center; color: var(--fg-2); font-size: 13px; margin-top: 16px; }

/* Chat (assistant) */
.gw-chat-shell {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px;
  min-height: 60vh;
}
@media (max-width: 1024px) {
  .gw-chat-shell { grid-template-columns: 1fr; }
}
.gw-chat {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  min-height: 60vh;
}
.gw-chat__log {
  flex: 1; overflow-y: auto;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.gw-chat-input {
  padding: 16px;
  border-top: 1px solid var(--hairline);
  display: flex; gap: 8px;
  align-items: flex-end;
}
.gw-turn { display: flex; gap: 12px; align-items: flex-start; }
.gw-turn > div { flex: 1; min-width: 0; }
/* __who is a sender LABEL, not an avatar — the .gw-mark is the avatar */
.gw-turn__who {
  font-family: var(--f-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 2px 0 6px;
}
.gw-turn__bubble {
  background: var(--bg-3);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
  max-width: 78ch;
  overflow-wrap: anywhere;
}
.gw-turn__bubble pre { white-space: pre-wrap; overflow-x: auto; }
/* User turns: no mark, bubble + label align right */
.gw-turn--user { flex-direction: row-reverse; }
.gw-turn--user > div { text-align: right; }
.gw-turn--user .gw-turn__bubble {
  background: var(--accent-soft);
  border-color: var(--accent-edge);
  display: inline-block;
  text-align: left;
}
.gw-turn--user .gw-turn__who { color: var(--accent); }
.gw-turn--assistant .gw-turn__who { color: var(--teal); }

/* Finance workspace (Soulver-style) */
.gw-fin {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  min-height: 70vh;
}
@media (max-width: 900px) {
  .gw-fin { grid-template-columns: 1fr; }
}
.gw-fin__side {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.gw-fin-editor, .gw-soulver {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.gw-fin-editor__body {
  display: grid;
  grid-template-columns: 38px 1fr 140px;
  flex: 1;
  font-family: var(--f-mono);
  font-size: 13.5px;
  line-height: 1.7;
}
.gw-fin-gutter, .gw-soulver__gutter {
  background: var(--bg-1);
  color: var(--fg-4);
  text-align: right;
  padding: 14px 8px 14px 0;
  font-size: 11px;
  border-right: 1px solid var(--hairline);
  user-select: none;
}
.gw-fin-lines, .gw-soulver__editor {
  padding: 14px 16px;
  outline: none;
  background: var(--bg-2);
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
  border: 0;
  font-family: var(--f-mono);
  font-size: 13.5px;
  line-height: 1.7;
  resize: none;
}
.gw-fin-pads {
  padding: 14px 16px;
  background: var(--bg-1);
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 13.5px;
  text-align: right;
  border-left: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}
.gw-fin-title {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14.5px;
  background: var(--bg-1);
}

/* Timeline */
.gw-timeline { position: relative; padding-left: 22px; }
.gw-timeline::before {
  content: "";
  position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--hairline-strong);
}
.gw-timeline__item { position: relative; padding: 4px 0 16px; }
.gw-timeline__dot {
  position: absolute; left: -22px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}
.gw-timeline__time {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gw-timeline__body { font-size: 13.5px; color: var(--fg-1); margin-top: 3px; }

/* Collaboration tabs (used in collaboration.html, contract_view.html) */
.gw-collab-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 20px;
}
.gw-collab-tabs > button, .gw-collab-tabs > a {
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; text-decoration: none;
}
.gw-collab-tabs > button:hover, .gw-collab-tabs > a:hover { color: var(--fg); text-decoration: none; }
.gw-collab-tabs > .is-active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.gw-collab-log {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px;
  font-family: var(--f-mono);
  font-size: 12.5px;
}

/* Charts */
.gw-chart-wrap { background: var(--bg-2); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 20px; }

/* Archive PDF/text viewers */
.gw-arch-pdf, .gw-arch-text {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.gw-arch-pdf { padding: 0; overflow: hidden; }
.gw-arch-pdf iframe { width: 100%; height: 72vh; border: 0; display: block; background: #fff; }

/* Empty alert— variant '' was used as a fallback */
.gw-alert-- { background: var(--bg-2); border-color: var(--hairline-strong); }

/* ============================================================================
   MOBILE OVERRIDES — END OF FILE (must win source-order over base rules that
   are defined later than the main @media block, e.g. .dash-hero, .auth-shell,
   .gw-chat-shell, .gw-fin). CSS media queries add no specificity, so the last
   matching equal-specificity rule wins — these have to live here.
   ============================================================================ */

@media (max-width: 1024px) {
  /* Dashboard hero — stack the queue + KPI rail */
  .dash-hero {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 18px 0 20px !important;
    margin-bottom: 22px !important;
  }
  .dash-hero__numbers {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .dash-hero__numbers .kpi__value { font-size: 30px !important; }

  /* Workspace splits */
  .assistant-wrap, .gw-chat-shell { grid-template-columns: 1fr !important; height: auto !important; }
  .finance-wrap, .gw-fin { grid-template-columns: 1fr !important; height: auto !important; }
  .finance-wrap > :last-child { display: none; }

  /* Login split → single column, hide editorial hero */
  .auth-shell { grid-template-columns: 1fr !important; }
  .auth-shell__hero { display: none !important; }
  .auth-shell__form { padding: 40px 20px !important; }
  .auth-card { max-width: 100% !important; }
}

@media (max-width: 600px) {
  .dash-hero__numbers { grid-template-columns: 1fr !important; gap: 10px !important; }
  .dash-hero__numbers .kpi__value { font-size: 28px !important; }
  .dash-hero { padding: 14px 0 16px !important; }
  /* Finance editor: drop the results gutter, keep line numbers + editor */
  .gw-fin-editor__body { grid-template-columns: 30px 1fr !important; }
  .gw-fin-pads { display: none !important; }
  .auth-shell__form { padding: 32px 18px !important; }

  /* Chat: bubble must never exceed the column; tighten log padding */
  .gw-chat__log { padding: 16px 14px !important; gap: 14px !important; }
  .gw-turn { gap: 10px !important; }
  .gw-turn__bubble {
    max-width: 100% !important;
    font-size: 14px;
    padding: 10px 13px;
  }
  .gw-turn .gw-mark { width: 28px !important; height: 28px !important; }
  .gw-turn .gw-mark::before { font-size: 20px !important; }
  .gw-chat-input { padding: 12px !important; }
}