/* Ground Control design system (design-studio canvas, 2026-10-06).
   Tokens mirror the Tropiq dark palette — mobile/lib/core/theme/palette_tropiq.dart and
   account/src/index.css — names in comments. Inter, tabular numerals, 14px base for an all-day tool.
   Taste: dark-cockpit (dark primary, light derives), extend-the-precedent (account portal tokens),
   glance-first (chips + biggest number = most important), no-silent-green (unavailable LOOKS
   unavailable), zulu-primary (Zulu first, local second), workload-aware (nothing re-lays-out). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/inter-latin.3100e775e8616cd2.woff2) format('woff2'); }

:root {
  --bg: #13161B;            /* kBackground / --color-bg */
  --surface: #1E2229;       /* kSurface / --color-surface */
  --card: #252930;          /* kCard / --color-card */
  --surface-muted: #343840; /* kSurfaceMuted / --color-surface-light */
  --divider: #3A3E46;       /* kDivider */
  --divider-strong: #4A4E57;/* kDividerStrong */
  --sidebar: #161920;       /* kTabBarBackground */
  --text: #FFFFFF;          /* kTextPrimary */
  --text-2: #B0B4BC;        /* kTextSecondary */
  --text-3: #9EA2AA;        /* kTextMuted (#1741 AA floor) */
  --teal: #00BFA5;          /* kPrimary */
  --teal-2: #26D9B8;        /* kAccent */
  --teal-wash: rgba(0,191,165,.12);
  --success: #4CAF50;       /* kSuccess */
  --warning: #FFC107;       /* kWarning */
  --error: #FF5252;         /* kError */
  --info: #29B6F6;          /* kInfo */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;  /* AppRadius sm/md/lg */
  /* semantic tints — derived, so both themes share one set of names */
  --on-teal: #06231F;       /* text on a teal fill */
  --teal-line: rgba(38,217,184,.45);
  --brand: #00BFA5;         /* compass mark — same teal in both themes */
  --ok-bg: rgba(76,175,80,.14);   --ok-fg: #7BD07F;
  --warn-bg: rgba(255,193,7,.13); --warn-fg: #FFD54F;
  --err-bg: rgba(255,82,82,.13);  --err-fg: #FF8A80;
  --info-bg: rgba(41,182,246,.13); --info-fg: #81D4FA;
  --row-hover: rgba(255,255,255,.025);
  --glow: rgba(0,191,165,.10);
  --heat: 0,191,165;        /* rgb triplet for the cohort heat grid */
  color-scheme: dark;
}

/* Light theme — mobile/lib/core/theme/palette_tropiq_light.dart (kLight*). Applied when the teammate picks Light,
   or when they picked Auto and the OS is light. dark-cockpit: dark is primary; light derives from the same names. */
:root[data-theme="light"] {
  --bg: #F2F4F7; --surface: #FFFFFF; --card: #F7F8FA; --surface-muted: #ECEEF1;
  --divider: #E5E7EB; --divider-strong: #D0D3D8; --sidebar: #FFFFFF;
  --text: #0F172A; --text-2: #475569; --text-3: #64748B;
  --teal: #00796B; --teal-2: #00695C; --teal-wash: rgba(0,121,107,.10);
  --success: #2E7D32; --warning: #B26500; --error: #B71C1C; --info: #0277BD;
  --on-teal: #FFFFFF; --teal-line: rgba(0,121,107,.40);
  --ok-bg: rgba(46,125,50,.10);  --ok-fg: #2E7D32;
  --warn-bg: rgba(178,101,0,.11); --warn-fg: #8A4E00;
  --err-bg: rgba(183,28,28,.09);  --err-fg: #B71C1C;
  --info-bg: rgba(2,119,189,.10); --info-fg: #0277BD;
  --row-hover: rgba(15,23,42,.035); --glow: rgba(0,121,107,.08); --heat: 0,121,107;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F2F4F7; --surface: #FFFFFF; --card: #F7F8FA; --surface-muted: #ECEEF1;
    --divider: #E5E7EB; --divider-strong: #D0D3D8; --sidebar: #FFFFFF;
    --text: #0F172A; --text-2: #475569; --text-3: #64748B;
    --teal: #00796B; --teal-2: #00695C; --teal-wash: rgba(0,121,107,.10);
    --success: #2E7D32; --warning: #B26500; --error: #B71C1C; --info: #0277BD;
    --on-teal: #FFFFFF; --teal-line: rgba(0,121,107,.40);
    --ok-bg: rgba(46,125,50,.10);  --ok-fg: #2E7D32;
    --warn-bg: rgba(178,101,0,.11); --warn-fg: #8A4E00;
    --err-bg: rgba(183,28,28,.09);  --err-fg: #B71C1C;
    --info-bg: rgba(2,119,189,.10); --info-fg: #0277BD;
    --row-hover: rgba(15,23,42,.035); --glow: rgba(0,121,107,.08); --heat: 0,121,107;
    color-scheme: light;
  }
}

/* theme switch (sidebar) - a POST form, so it works without a script; Auto follows the OS, the choice is remembered per teammate */
.side .theme { margin-top: auto; } .side .theme + .me { margin-top: 8px; }
.theme { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--divider); border-radius: 9px; padding: 2px; margin: 8px 8px 0; }
.theme button { flex: 1; text-align: center; font: 600 12px 'Inter', sans-serif; color: var(--text-3); padding: 5px 0; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.theme button.on { background: var(--surface-muted); color: var(--text); }
:root[data-theme="light"] .theme .light, :root[data-theme="dark"] .theme .dark, :root:not([data-theme]) .theme .auto { background: var(--surface-muted); color: var(--text); }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 400 14px/1.5 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1, 'cv11' 1; }
a { color: var(--teal-2); text-decoration: none; }
a:hover { text-decoration: underline; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 12.5px; }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; width: 100%; min-width: 1100px; }
.side { background: var(--sidebar); border-right: 1px solid var(--divider); padding: 18px 12px;
  display: flex; flex-direction: column; gap: 4px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.brand svg { width: 28px; height: 28px; }
.brand b { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.brand small { display: block; color: var(--text-3); font-size: 11px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md);
  color: var(--text-2); font-weight: 500; text-decoration: none; }
.nav a:hover { background: var(--surface); color: var(--text); }
.nav a.on { background: var(--teal-wash); color: var(--teal-2); }
.nav a .ico { width: 18px; text-align: center; opacity: .9; }
.nav a .count { margin-left: auto; background: var(--surface-muted); color: var(--text); font-size: 11.5px;
  font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.nav a.on .count { background: var(--teal); color: var(--on-teal); }
.nav .group { color: var(--text-3); font-size: 11px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; padding: 14px 10px 6px; }
.side .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px;
  border-top: 1px solid var(--divider); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-muted); display: grid;
  place-items: center; font-weight: 600; font-size: 12px; color: var(--text); flex: none; }
.avatar.teal { background: var(--teal); color: var(--on-teal); }
.me .who { font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; min-width: 0; } .me .who small { color: var(--text-3); display: block; }
.side .signout { padding: 0 8px 4px; margin: 0; }
.side .signout .btn { width: 100%; justify-content: center; border-color: var(--divider); }
.side .signout .btn:hover { background: var(--row-hover); color: var(--text); }

.main { display: flex; flex-direction: column; min-width: 0; }
.top { height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 28px;
  border-bottom: 1px solid var(--divider); background: var(--bg); }
.search { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 10px; height: 38px;
  padding: 0 12px; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-md);
  color: var(--text-3); }
.search kbd, kbd { font: 600 11px 'Inter'; color: var(--text-2); background: var(--surface-muted);
  border: 1px solid var(--divider-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.search kbd { margin-left: auto; }
.clock { margin-left: auto; text-align: right; line-height: 1.2; }
.clock b { font-size: 14px; } .clock small { display: block; color: var(--text-3); font-size: 11.5px; }
.env { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--teal-2);
  border: 1px solid var(--teal-line); border-radius: 999px; padding: 3px 9px; }

.page { padding: 26px 28px 40px; display: flex; flex-direction: column; gap: 20px; }
.head { display: flex; align-items: flex-end; gap: 16px; }
.head h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.2px; }
.head .sub { color: var(--text-2); margin-top: 4px; }
.head .actions { margin-left: auto; display: flex; gap: 8px; }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-lg); }
.card > .hd { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.card > .hd h2 { margin: 0; font-size: 14px; font-weight: 600; }
.card > .hd .meta { margin-left: auto; color: var(--text-3); font-size: 12px; }
.card > .bd { padding: 4px 16px 16px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); } .g32 { grid-template-columns: 2fr 1fr; }
.muted { color: var(--text-3); } .dim { color: var(--text-2); }

/* KPI */
.kpi { padding: 16px; }
.kpi .label { color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.kpi .value { font-size: 30px; font-weight: 700; letter-spacing: -.5px; margin-top: 2px; }
.kpi .delta { font-size: 12px; font-weight: 600; } .up { color: var(--success); } .down { color: var(--error); }
.spark { height: 34px; margin-top: 8px; }

/* chips + badges */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; background: var(--surface-muted); color: var(--text-2); white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.teal { background: var(--teal-wash); color: var(--teal-2); }
.chip.ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip.warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip.err { background: var(--err-bg); color: var(--err-fg); }
.chip.info { background: var(--info-bg); color: var(--info-fg); }
.chip.ghost { background: transparent; border: 1px solid var(--divider-strong); color: var(--text-2); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-md);
  font: 600 13px 'Inter'; border: 1px solid var(--divider-strong); background: var(--surface); color: var(--text); cursor: pointer;
  white-space: nowrap; flex: none; }
.btn.primary { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* tables */
table.t { width: 100%; border-collapse: collapse; }
.t th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-3); letter-spacing: .4px;
  text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--divider); white-space: nowrap; }
.t td { padding: 11px 12px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.t tr:hover td { background: var(--row-hover); }
.t tr.sel td { background: var(--teal-wash); }
.t td.r, .t th.r { text-align: right; }
.person { display: flex; align-items: center; gap: 10px; }
.person .n { font-weight: 600; } .person .e { color: var(--text-3); font-size: 12.5px; }

/* segments / tabs */
.segs { display: flex; gap: 6px; flex-wrap: wrap; }
.seg { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--divider); color: var(--text-2); font-weight: 500; font-size: 13px; }
.seg b { color: var(--text); font-weight: 600; }
.seg.on { background: var(--teal-wash); border-color: var(--teal-line); color: var(--teal-2); }
.seg.on b { color: var(--teal-2); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--divider); }
.tabs a { padding: 10px 14px; color: var(--text-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--text); border-bottom-color: var(--teal); }
.tabs a .c { color: var(--text-3); font-size: 12px; margin-left: 4px; }

/* stage progress (Signed up → Habitual) */
.stage { display: flex; align-items: center; gap: 8px; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 14px; height: 6px; border-radius: 3px; background: var(--surface-muted); }
.pips i.f { background: var(--teal); }
.stage span { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }

/* queue rows (Today) */
.q { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--divider); }
.q:last-child { border-bottom: 0; }
.q .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex: none; }
.q .ic.warn { background: var(--warn-bg); color: var(--warn-fg); } .q .ic.err { background: var(--err-bg); color: var(--err-fg); }
.q .ic.teal { background: var(--teal-wash); color: var(--teal-2); } .q .ic.info { background: var(--info-bg); color: var(--info-fg); }
.q .tx { flex: 1; min-width: 0; } .q .tx b { font-weight: 600; } .q .tx small { display: block; color: var(--text-3); font-size: 12.5px; }
.q .big { font-size: 20px; font-weight: 700; min-width: 30px; text-align: right; }

/* unavailable (no-silent-green) */
.unavail { border: 1px dashed var(--divider-strong); border-radius: var(--r-md); padding: 12px 14px; color: var(--text-2);
  background: repeating-linear-gradient(135deg, transparent 0 8px, var(--warn-bg) 8px 16px); }
.unavail b { color: var(--warn-fg); }

/* timeline */
.tl { position: relative; padding-left: 22px; }
.tl:before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--divider); }
.tl .ev { position: relative; padding: 0 0 14px; }
.tl .ev:before { content: ''; position: absolute; left: -19px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--divider-strong); }
.tl .ev.teal:before { border-color: var(--teal); background: var(--teal); }
.tl .ev.err:before { border-color: var(--error); } .tl .ev.warn:before { border-color: var(--warning); }
.tl .ev .when { color: var(--text-3); font-size: 12px; } .tl .ev .what { font-weight: 500; }
.tl .ev .det { color: var(--text-2); font-size: 12.5px; }

/* key-value */
.kv { display: grid; grid-template-columns: 112px 1fr; row-gap: 9px; column-gap: 12px; font-size: 13.5px; }
.kv dt { color: var(--text-3); } .kv dd { margin: 0; }

.foot { color: var(--text-3); font-size: 12px; display: flex; gap: 8px; align-items: center; }
.bar { height: 8px; border-radius: 4px; background: var(--surface-muted); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.check { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.check .b { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.check .b.y { background: var(--teal); color: var(--on-teal); } .check .b.n { border: 1.5px solid var(--divider-strong); color: var(--text-3); }
.check small { margin-left: auto; color: var(--text-3); font-size: 12px; }
.note { background: var(--card); border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; }
.note .by { color: var(--text-3); font-size: 11.5px; margin-top: 4px; }

/* ---------- console shell additions (WI-11) ---------- */
.nav a .ico::before { content: '\2022'; }
.nav a .ico[data-i="today"]::before { content: '\25CE'; }
.nav a .ico[data-i="pilots"]::before { content: '\2708\FE0E'; }
.nav a .ico[data-i="beta"]::before { content: '\2691'; }
.nav a .ico[data-i="insights"]::before { content: '\25D4'; }
.nav a .ico[data-i="identity-review"]::before { content: '\21C4'; }
.nav a .ico[data-i="audit"]::before { content: '\2261'; }
.search { margin: 0; }
.search input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: var(--text); font: 400 14px 'Inter', sans-serif; }
.search input::placeholder { color: var(--text-3); }
.search:focus-within { border-color: var(--teal-line); }
.search label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 100%; }
[data-gc-row].sel td, [data-gc-row].sel { background: var(--teal-wash); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 2px; }
.page .unavail { margin: 0; }

/* ---------- sign-in card (SignIn artboard; fluid, not the artboard canvas) ---------- */
.signin { min-height: 100vh; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px;
  background: radial-gradient(900px 500px at 50% 30%, var(--glow), transparent 70%), var(--bg); }
.signin .box { width: 400px; max-width: 100%; text-align: center; background: var(--surface); border: 1px solid var(--divider);
  border-radius: 20px; padding: 36px 34px; }
.signin .box svg { width: 56px; height: 56px; }
.signin .box h1 { margin: 16px 0 6px; font-size: 22px; }
.signin .box p { color: var(--text-2); margin: 0 0 24px; }
.signin .g { width: 100%; height: 44px; justify-content: center; font-size: 14px; text-decoration: none; }
.signin .g:hover { text-decoration: none; }
.signin .signin-account-choice { white-space: normal; height: auto; min-height: 44px; padding: 10px 14px; }
.signin .small { color: var(--text-3); font-size: 12px; margin-top: 18px; }
.page-narrow { max-width: 640px; }

/* ---------- team data fragments (WI-15): notes, follow-ups, tag chips, segment pills ---------- */
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.team-notes, .team-followups { display: flex; flex-direction: column; gap: 8px; }
.team-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin: 6px 0 0; }
.team-form textarea, .team-form input[type="text"], .team-form input[type="date"], .team-form select {
  flex: 1; min-width: 160px; background: var(--surface); color: var(--text); border: 1px solid var(--divider-strong);
  border-radius: var(--r-sm); padding: 6px 8px; font: 400 13px 'Inter', sans-serif; }
.team-manage > summary { cursor: pointer; color: var(--text-3); font-size: 12px; }
.team-tags, .team-segments { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.team-chip { display: inline-flex; align-items: center; gap: 2px; margin: 0; }
.team-segment { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.followup.done .pre-wrap { color: var(--text-3); }

/* ---------- data pages (WI-17..19): Pilots directory, profile, flights ---------- */
a.seg { text-decoration: none; }
a.seg:hover { text-decoration: none; background: var(--row-hover); }
.seg.saved { border-style: dashed; }
.seg.saved::before { content: '\2605'; color: var(--teal-2); }
.person a.n { font-weight: 600; color: var(--text); text-decoration: none; }
.person a.n:hover { text-decoration: underline; }
.t th a { color: inherit; text-decoration: none; }
.t th a:hover { color: var(--text); text-decoration: underline; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; flex: 1; }
.filters .filter { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--text-3); }
.filters input, .filters select { height: 30px; background: var(--surface); color: var(--text); border: 1px solid var(--divider-strong);
  border-radius: var(--r-sm); padding: 0 8px; font: 400 13px 'Inter', sans-serif; }
.filters input[type="text"] { width: 120px; }
.pager { display: inline-flex; gap: 8px; align-items: center; margin-left: 12px; }
.gc-id { width: 280px; font: 12.5px 'SF Mono', ui-monospace, Menlo, monospace; }
ul.plain { margin: 6px 0 0; padding-left: 16px; color: var(--text-2); font-size: 12.5px; }
.page .card > table.t:last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }

/* profile header, journey, banner (design Pilot.dc.html) */
.ph { display: flex; gap: 16px; align-items: center; }
.ph .avatar { width: 56px; height: 56px; font-size: 19px; }
.ph h1 { margin: 0; font-size: 24px; font-weight: 700; }
.ph .line { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; color: var(--text-2); }
.journey { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 4px; }
.journey div { padding: 10px 10px 8px; border-radius: 10px; background: var(--card); border: 1px solid var(--divider); }
.journey div.done { border-color: var(--teal-line); background: linear-gradient(180deg, var(--teal-wash), transparent); }
.journey div.now { border-color: var(--teal-2); box-shadow: 0 0 0 1px var(--teal-2) inset; }
.journey b { display: block; font-size: 12.5px; }
.journey small { display: block; color: var(--text-3); font-size: 11.5px; overflow-wrap: anywhere; }
.banner { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--err-bg); border: 1px solid var(--error); }
.banner b { color: var(--err-fg); }

/* flights list + flight panel (design PilotFlights.dc.html) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px; align-items: start; }
.g32 > *, .g2 > * { min-width: 0; }
.page .card { overflow-x: auto; }
.drawer .route { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 13px; background: var(--card);
  border-radius: 10px; padding: 10px 12px; color: var(--text); line-height: 1.6; overflow-wrap: anywhere; }
.legs { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: .5px; flex-wrap: wrap; }
.legs .arrow { color: var(--teal); font-size: 18px; }
.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini div { background: var(--card); border-radius: 10px; padding: 10px; }
.mini small { color: var(--text-3); font-size: 11.5px; display: block; }
.mini b { font-size: 15px; overflow-wrap: anywhere; }

/* the GPS track: drawn at its exact pixel size, never scaled; a narrow window scrolls the container */
.track { overflow-x: auto; border: 1px solid var(--divider); border-radius: var(--r-md); background: var(--card); }
.track svg { display: block; max-width: none; }
.track svg .bg { fill: var(--card); }
.track svg .seg { stroke: var(--teal-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.track svg .gap { stroke: var(--text-3); stroke-width: 2; }
.track svg .pt { fill: var(--teal-2); }

/* ---------- PKG-G pages: shared bits ---------- */
a.btn, a.btn:hover { text-decoration: none; }
a.seg, a.seg:hover { text-decoration: none; }
.asof { color: var(--text-3); font-size: 12px; }
.stale { color: var(--warn-fg); font-weight: 500; }
.unavail .retry { margin-left: 8px; font-weight: 600; }
.card.flush { overflow: hidden; }
.card.flush > .bd { padding: 0; }
.card.flush > .hd { padding-bottom: 8px; }
.card.flush .t th:first-child, .card.flush .t td:first-child { padding-left: 16px; }
.paging { padding: 12px 16px; border-top: 1px solid var(--divider); }
.page .grid.g4 .kpi .unavail { margin-top: 8px; font-size: 12.5px; }
.kpi .value:empty { display: none; }

/* ---------- Today ---------- */
.q .ic[data-i]::before { content: '\2022'; }
.q .ic[data-i="pending"]::before { content: '\25F7'; }
.q .ic[data-i="filing"]::before { content: '\2715'; }
.q .ic[data-i="import"]::before { content: '\21E3'; }
.q .ic[data-i="dormant"]::before { content: '\25CC'; }
.q .ic[data-i="silent"]::before { content: '\263E'; }
.q .ic[data-i="apple"]::before { content: '\2709\FE0E'; }
.q .ic[data-i="payment"]::before { content: '$'; }
.q .ic[data-i="chat"]::before { content: '\275D'; }
.q .ic[data-i="identity"]::before { content: '\21C4'; }
.q .tx small + small { margin-top: 2px; }
.q .big.muted { color: var(--text-3); }
a.q.row-link, a.q.row-link:hover { color: inherit; text-decoration: none; }
a.q.row-link:hover { background: var(--row-hover); }
.q .tx .unavail { margin-top: 6px; font-size: 12.5px; }
.check .fu-text { overflow-wrap: anywhere; }
.check.done .fu-text { text-decoration: line-through; }
.head .sub b { color: var(--text); }
.kpi-defs { font-size: 12.5px; color: var(--text-3); }
.kpi-defs summary { cursor: pointer; width: fit-content; }
.kpi-defs dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 0; }
.kpi-defs dt { color: var(--text-2); font-weight: 600; } .kpi-defs dd { margin: 0; color: var(--text-2); }
/* FR-SUPPORT-045: the out-of-date sentence stands in the slot of the value it replaces */
.q .big.stale-slot { font-size: 12px; font-weight: 500; min-width: 0; max-width: 240px; line-height: 1.3; }
.chip.stale-slot { height: auto; white-space: normal; padding: 3px 8px; line-height: 1.3; max-width: 260px; }
.kpi .value .stale { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.3; margin-top: 8px; }

/* ---------- Beta ---------- */
.funnel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.fstep { background: var(--card); border: 1px solid var(--divider); border-radius: 12px; padding: 14px; position: relative; }
.fstep small { color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.fstep b { display: block; font-size: 28px; font-weight: 700; margin-top: 2px; }
.fstep .conv { display: block; color: var(--text-3); font-size: 12px; }
.fstep .barw { height: 6px; border-radius: 3px; background: var(--surface-muted); margin-top: 10px; overflow: hidden; }
.fstep .barw i { display: block; height: 100%; background: var(--teal); }
.fstep.on { border-color: var(--teal-line); box-shadow: 0 0 0 1px var(--teal-line) inset; }
a.seg { cursor: pointer; }

/* ---------- Insights ---------- */
table.coh { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12.5px; }
.coh th { color: var(--text-3); font-weight: 600; text-align: left; padding: 4px 6px; font-size: 11.5px; }
.coh td { padding: 7px 6px; border-radius: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.coh td.lbl { text-align: left; color: var(--text-2); background: none; white-space: nowrap; }
.coh td.h { color: var(--text); }
.coh td.h.hi { color: var(--on-teal); font-weight: 600; }
.coh td.h0 { background: var(--card); color: var(--text-3); }
.coh td.nt { background: none; border: 1px dashed var(--divider-strong); color: var(--text-3); font-size: 11px; }
.coh .partial { display: block; font-size: 10px; font-weight: 500; opacity: .85; }
.chart-data { margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.chart-data summary { cursor: pointer; width: fit-content; }
.chart-data ul { columns: 3; margin: 10px 0 0; padding-left: 18px; color: var(--text-2); }
.stalls { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.stall .line { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 140px; padding-top: 8px; }
.bars .sb { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; background: transparent; }
.bars .sb i { display: block; width: 100%; flex: none; }
.bars i.i, .legend i.i { background: var(--teal); }
.bars i.a, .legend i.a { background: var(--info); }
.bars i.u, .legend i.u { background: var(--divider-strong); }
.axis { display: flex; justify-content: space-between; color: var(--text-3); font-size: 11.5px; margin-top: 6px; }
.legend { display: flex; gap: 16px; color: var(--text-2); font-size: 12px; margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ---------- Audit log ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filters label { display: flex; flex-direction: column; gap: 4px; color: var(--text-3); font-size: 11.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.filters select, .filters input { height: 34px; min-width: 150px; background: var(--surface); color: var(--text); border: 1px solid var(--divider-strong); border-radius: var(--r-md); padding: 0 10px; font: 400 13px 'Inter', sans-serif; text-transform: none; letter-spacing: 0; }
.filters .btn { align-self: flex-end; }
.t td small { margin-left: 6px; }