/* =====================================================================
   NUYU OS design system v3 — STITCH-inspired premium look.
   Reference: Linear / Stripe / Notion / Apple + STITCH mocks (Oct 2026).
   Token philosophy:
     · cooler near-white surface, generous rounding (16–24px)
     · ink scale optimized for high-contrast body + soft labels
     · ONE accent (brand blue) — gold is reserved for AI sparkle moments
     · multi-layer ultra-soft shadows; never sharp drop shadows
     · type: editorial weight contrast (uppercase tiny labels, big numerics)
   ===================================================================== */

:root {
  /* ---- Surface ramp (porcelain, faint celadon-green bias — chosen, not default grey) ---- */
  --bg:           #F4F6F4;
  --bg-soft:      #FAFBFA;
  --bg-card:      #FFFFFF;
  --bg-tint:      #EAEEEB;
  --bg-tint-2:    #DEE4E0;
  --bg-emboss:    linear-gradient(180deg, #FFFFFF 0%, #FAFBFA 100%);

  --border-fine: #E9EEEA;
  --border:      #DBE2DD;
  --border-dk:   #C3CBC5;

  /* ---- Ink ramp ---- */
  --ink-1000: #07070A;
  --ink-900:  #0F0F12;
  --ink-800:  #1A1A1F;
  --ink-700:  #353541;
  --ink-600:  #54545F;
  --ink-500:  #7A7A85;
  --ink-400:  #A8A8B0;
  --ink-300:  #CFCFD4;
  --ink-200:  #E4E4E8;

  /* ---- Brand — 青瓷 celadon-jade (新中式 identity; replaces commodity SaaS blue) ---- */
  --brand:       #2E7D6F;
  --brand-600:   #256B5E;
  --brand-700:   #1D564B;
  --brand-tint:  #CDE6DE;
  --brand-tint2: #EDF5F2;
  --brand-glow:  rgba(46, 125, 111, .15);

  /* Gold = AI sparkle moments only */
  --gold:        #F59E0B;
  --gold-bright: #FBBF24;
  --gold-600:    #D97706;
  --gold-tint:   #FEF3C7;

  --purple:      #7C3AED;
  --purple-tint: #EDE9FE;

  --teal:        #0D9488;
  --teal-tint:   #CCFBF1;

  /* ---- Semantic ---- */
  --ok:           #15803D;
  --ok-bright:    #16A34A;
  --ok-tint:      #DCFCE7;
  --warn:         #B45309;
  --warn-bright:  #D97706;
  --warn-tint:    #FEF3C7;
  --danger:       #B91C1C;
  --danger-bright:#DC2626;
  --danger-tint:  #FEE2E2;
  --info:         #256B5E;
  --info-tint:    #DCEBE6;

  /* ---- Geometry (bumped per STITCH spec) ---- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;

  /* ---- Shadow scale (softer, multi-layer for depth) ---- */
  --sh-1: 0 1px 0 rgba(15,16,20,.03), 0 1px 2px rgba(15,16,20,.04);
  --sh-2: 0 1px 0 rgba(15,16,20,.03), 0 6px 18px rgba(15,16,20,.05), 0 2px 4px rgba(15,16,20,.04);
  --sh-3: 0 2px 0 rgba(15,16,20,.03), 0 14px 32px rgba(15,16,20,.08), 0 4px 8px rgba(15,16,20,.05);
  --sh-ring: 0 0 0 2px var(--brand), 0 0 0 6px var(--brand-glow);
  --sh-glow: 0 0 0 4px var(--brand-glow);

  /* ---- Motion ---- */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

/* ---- Reset + base ---- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--bg);
  color: var(--ink-800);
  font-feature-settings: "ss01", "cv11";
}
::selection { background: var(--brand-tint); color: var(--brand-700); }

/* ---- Topbar select chips (tenant / lang) — custom chevron, no native arrow ---- */
.topbar-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bg-card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 26px 5px 12px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.topbar-select:hover { border-color: var(--border-dk); background-color: var(--bg-soft); }
.topbar-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.topbar-select.is-compact { font-size: 11.5px; padding: 4px 22px 4px 10px; min-width: 48px; }

/* ---- Topbar wordmark refinement ---- */
.brand-wordmark {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.025em;
  color: var(--ink-900);
  line-height: 1;
}
.brand-wordmark .os-suffix {
  font-weight: 700;
  color: var(--ink-500);
  margin-left: 3px;
  letter-spacing: -.015em;
}

/* ---- Sidebar nav ---- */
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px;
  color: var(--ink-600);
  font-size: 13px; font-weight: 500; letter-spacing: -.005em;
  border-radius: 12px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  position: relative;
}
.nav-item:hover { background: var(--bg-tint); color: var(--ink-900); }
.nav-item.active {
  background: var(--brand-tint2);
  color: var(--brand-700);
  font-weight: 700;
}
.nav-item.active .material-symbols-outlined { color: var(--brand); }
.nav-item .material-symbols-outlined { opacity: .9; transition: color var(--t-fast) var(--ease); }

/* ---- Sidebar nav groups (scannable sections) ---- */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: 14px; }
.nav-label {
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-400);
  padding: 0 13px; margin: 0 0 5px;
  user-select: none;
}

.lang-toggle button.active { background: var(--ink-900); color: #fff; }
.lang-toggle button:not(.active) { color: var(--ink-500); }

/* ---- Typography ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--brand-600);
  letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 10px;
}
.eyebrow.muted { color: var(--ink-500); }
.section-card-dark .eyebrow { color: #7FCBBB; }
.section-card-gold .eyebrow { color: var(--ink-900); }

.section-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  margin: 0 0 8px;
  color: var(--ink-900);
}
.section-lede {
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.55;
  max-width: 720px;
  letter-spacing: -.002em;
}
@media (min-width: 1024px) {
  .section-title { font-size: 40px; letter-spacing: -.032em; }
}

/* ---- Section card (default) ---- */
.section-card {
  background: var(--bg-card);
  border: 1px solid var(--border-fine);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.section-card:hover { box-shadow: var(--sh-2); border-color: var(--border); }

/* Hero card variants */
.section-card-dark {
  background: linear-gradient(135deg, #0A0A0E 0%, #1A1A22 50%, #25252F 100%);
  color: #FAFAFA;
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.section-card-dark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}
.section-card-dark .stat-label, .section-card-dark .stat-hint { color: #A1A1AA; }
.section-card-dark .stat-value { color: #FFFFFF; }

.section-card-gold {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: var(--ink-900);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-3);
  position: relative;
  overflow: hidden;
}
.section-card-gold::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}

.section-card.is-accent {
  border-color: var(--brand-tint);
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--brand-tint2) 100%);
  box-shadow: var(--sh-2);
}

/* =====================================================================
   STAT CARD — larger numerics, check-badge selected state (STITCH)
   ===================================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.stat-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-fine);
  border-radius: var(--r-md);
  padding: 18px 20px;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background var(--t-fast) var(--ease);
}
.stat-label {
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: .04em;
  font-weight: 600;
  display: flex; align-items: center; gap: 5px;
  text-transform: none;
}
.stat-label .material-symbols-outlined { font-size: 16px; opacity: .7; }
.stat-value {
  display: block;
  margin-top: 8px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.stat-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: -.005em;
  display: inline-flex; align-items: center; gap: 4px;
}

/* Clickable stat-card */
button.stat-card,
.stat-card[role="button"] {
  cursor: pointer; text-align: left; width: 100%;
  border-color: var(--border-fine);
  /* A <button> vertically CENTRES its content, so a clickable card's label sat
     lower than a plain <div> card's in the same row — and cards with more
     content (hint + explain pill) sat higher still. Lay the content out as a
     top-aligned column so every card in a row starts on the same line. */
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
}
button.stat-card:hover,
.stat-card[role="button"]:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--sh-2);
}
button.stat-card:active,
.stat-card[role="button"]:active { transform: translateY(0); }

/* SELECTED — STITCH-style blue ring + check badge top-right */
.stat-card.is-selected {
  border-color: var(--brand);
  background: linear-gradient(180deg, var(--brand-tint2) 0%, var(--bg-card) 60%);
  box-shadow: var(--sh-ring);
}
.stat-card.is-selected::after {
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(46,125,111,.32);
}
.stat-card.is-selected .stat-label { color: var(--brand-600); }
.stat-card.is-selected .stat-value { color: var(--brand-700); }
.stat-card-hint-arrow {
  display: none; font-size: 10px; color: var(--brand-700);
  font-weight: 700; margin-top: 4px;
  letter-spacing: .04em;
}
.stat-card.is-selected .stat-card-hint-arrow { display: block; }

/* Hero stat-card — BIG (size capped by the card's own width, see below).
   Top padding matches a plain card so every label in the row sits on one line;
   the extra room goes to the sides and bottom. */
.stat-card.is-hero { padding: 18px 22px 22px; }

/* =====================================================================
   DELTA PILL — rounded badge with arrow (STITCH stat headers)
   ===================================================================== */
.delta-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.delta-pill::before {
  font-family: 'Material Symbols Outlined';
  font-size: 12px;
  font-variation-settings: 'FILL' 1;
  line-height: 1;
}
.delta-pill.up   { background: var(--ok-tint);     color: var(--ok); }
.delta-pill.up::before   { content: "trending_up"; }
.delta-pill.down { background: var(--danger-tint); color: var(--danger); }
.delta-pill.down::before { content: "trending_down"; }
.delta-pill.flat { background: var(--bg-tint);     color: var(--ink-600); }
.delta-pill.flat::before { content: "trending_flat"; }

/* =====================================================================
   AI SUGGEST CARD — STITCH "SUGGESTED MOVE" black card with gold sparkle
   ===================================================================== */
.ai-suggest-card {
  background: linear-gradient(135deg, #0A0A0E 0%, #18181F 100%);
  color: #FAFAFA;
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.ai-suggest-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(251,191,36,.16) 0%, transparent 65%);
  pointer-events: none;
}
.ai-suggest-card .ai-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 10px;
}
.ai-suggest-card .ai-eyebrow .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 1;
}
.ai-suggest-card h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.018em;
  color: #FFFFFF;
  margin: 0 0 8px;
  line-height: 1.25;
}
.ai-suggest-card p {
  font-size: 12.5px;
  line-height: 1.55;
  color: #B8B8C0;
  margin: 0 0 14px;
}
.ai-suggest-card .btn-ai {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.ai-suggest-card .btn-ai:hover { transform: translateY(-1px); }

/* =====================================================================
   ATTENTION CARD — STITCH "NEEDS YOUR NOD" amber gradient
   ===================================================================== */
.attention-card {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #FFFFFF;
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--sh-2);
  position: relative;
  overflow: hidden;
}
.attention-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.attention-card .attn-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}
.attention-card h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.018em;
  color: #FFFFFF;
  margin: 0 0 12px;
}
.attention-card .attn-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  background: rgba(255,255,255,.14);
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.attention-card .attn-item:last-child { margin-bottom: 0; }
.attention-card .attn-item .attn-review {
  background: #FFFFFF;
  color: var(--gold-600);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}

/* =====================================================================
   SYSTEM ALERT ITEM — right-rail style (STITCH counsel page)
   ===================================================================== */
.system-alert-item {
  display: flex; gap: 10px;
  padding: 11px 13px;
  border-left: 4px solid;
  border-radius: 0 12px 12px 0;
  background: var(--bg-card);
  box-shadow: var(--sh-1);
  margin-bottom: 8px;
}
.system-alert-item .material-symbols-outlined {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.system-alert-item .sa-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.35;
}
.system-alert-item .sa-body {
  font-size: 11.5px;
  color: var(--ink-600);
  line-height: 1.45;
  margin-top: 2px;
}
.system-alert-item.sev-critical { border-color: var(--danger-bright); background: linear-gradient(90deg, var(--danger-tint) 0%, #FFF5F5 100%); }
.system-alert-item.sev-critical .material-symbols-outlined { color: var(--danger); }
.system-alert-item.sev-high     { border-color: var(--warn-bright);   background: linear-gradient(90deg, var(--warn-tint) 0%, #FFFBEB 100%); }
.system-alert-item.sev-high .material-symbols-outlined { color: var(--warn); }
.system-alert-item.sev-medium   { border-color: var(--gold-600);      background: linear-gradient(90deg, var(--gold-tint) 0%, #FFFDF5 100%); }
.system-alert-item.sev-medium .material-symbols-outlined { color: var(--gold-600); }
.system-alert-item.sev-info     { border-color: var(--brand);         background: linear-gradient(90deg, var(--info-tint) 0%, var(--bg-card) 100%); }
.system-alert-item.sev-info .material-symbols-outlined { color: var(--brand); }

/* =====================================================================
   LIST STATUS ROW — STITCH inventory rows w/ left status bar
   ===================================================================== */
.list-status-row {
  display: flex; align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--border-fine);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.list-status-row:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.list-status-row .status-bar {
  width: 4px;
  flex-shrink: 0;
}
.list-status-row.is-critical .status-bar { background: var(--danger-bright); }
.list-status-row.is-warning  .status-bar { background: var(--warn-bright); }
.list-status-row.is-ok       .status-bar { background: var(--ok-bright); }
.list-status-row.is-neutral  .status-bar { background: var(--ink-300); }

.list-status-row .status-badge {
  font-size: 11px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: -.005em;
}
.list-status-row.is-critical .status-badge { background: var(--danger-tint); color: var(--danger); }
.list-status-row.is-warning  .status-badge { background: var(--warn-tint);   color: var(--warn); }
.list-status-row.is-ok       .status-badge { background: var(--ok-tint);     color: var(--ok); }

/* =====================================================================
   READINESS CARD — STITCH government page (green check, green left bar)
   ===================================================================== */
.readiness-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-fine);
  border-left: 4px solid;
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--sh-1);
}
.readiness-card .r-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -.012em;
}
.readiness-card .r-sub {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 3px;
  line-height: 1.45;
}
.readiness-card .r-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.readiness-card.is-ready    { border-left-color: var(--ok-bright); }
.readiness-card.is-ready .r-icon { color: var(--ok-bright); }
.readiness-card.is-pending  { border-left-color: var(--warn-bright); }
.readiness-card.is-pending .r-icon { color: var(--warn-bright); }
.readiness-card.is-blocked  { border-left-color: var(--danger-bright); }
.readiness-card.is-blocked .r-icon { color: var(--danger-bright); }

/* =====================================================================
   AI INSIGHT CARD — STITCH customer detail "AI Insight" green tinted
   ===================================================================== */
.ai-insight-card {
  background: linear-gradient(90deg, var(--ok-tint) 0%, #F4FCF7 100%);
  border-left: 4px solid var(--ok-bright);
  border-radius: 0 12px 12px 0;
  padding: 13px 16px;
}
.ai-insight-card .ai-insight-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700;
  color: var(--ok);
  margin-bottom: 4px;
}
.ai-insight-card .ai-insight-eyebrow .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 1;
}
.ai-insight-card .ai-insight-body {
  font-size: 13px;
  color: var(--ink-800);
  line-height: 1.55;
}
.ai-insight-card code {
  background: #FFFFFF;
  border: 1px solid var(--ok-tint);
  color: var(--ok);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
}

/* =====================================================================
   DRILL MODAL — slide-up drawer for "how is this number computed"
   Used by clickable stats that want to show their underlying journal lines.
   ===================================================================== */
.drill-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 16, 20, 0.5);
  backdrop-filter: blur(6px);
  z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeBackdrop 200ms var(--ease) both;
}
@media (min-width: 768px) {
  .drill-modal-backdrop { align-items: center; }
}
@keyframes fadeBackdrop { from { background: rgba(0,0,0,0); } to { background: rgba(15, 16, 20, 0.5); } }

.drill-modal {
  background: var(--bg-card);
  border-radius: 24px 24px 0 0;
  width: min(940px, 100vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -20px 48px rgba(15,16,20,0.22), 0 -4px 12px rgba(15,16,20,0.10);
  animation: slideUp 280ms var(--ease-spring) both;
  overflow: hidden;
}
@media (min-width: 768px) {
  .drill-modal { border-radius: 24px; max-height: 82vh; }
}
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.drill-modal-header {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--border-fine);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  background: linear-gradient(180deg, var(--brand-tint2) 0%, var(--bg-card) 100%);
}
.drill-modal-header h2 {
  font-size: 20px; font-weight: 800; letter-spacing: -.022em;
  color: var(--ink-900); margin: 0;
}
.drill-modal-header .drill-meta {
  font-size: 12px; color: var(--ink-600); margin-top: 4px; line-height: 1.5;
}
.drill-modal-header .drill-value {
  font-size: 32px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.028em;
  color: var(--brand-700);
  line-height: 1; margin-top: 6px;
}
.drill-modal-close {
  border: 0; background: var(--bg-card);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-600);
  border: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease);
}
.drill-modal-close:hover { background: var(--bg-tint); color: var(--ink-900); }
.drill-modal-body {
  flex: 1; overflow: auto;
  padding: 0 26px 22px;
}
.drill-modal-body .drill-summary {
  padding: 16px 0 14px;
  font-size: 13px; line-height: 1.65;
  color: var(--ink-700);
  border-bottom: 1px solid var(--border-fine);
  margin-bottom: 8px;
}
.drill-modal-body .drill-account-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--border-fine);
  margin-bottom: 4px;
}
.drill-account-chip {
  padding: 8px 12px;
  background: var(--bg-tint);
  border-radius: 10px;
  font-size: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.drill-account-chip .ac-code { font-size: 10px; letter-spacing: .12em; color: var(--ink-500); font-weight: 700; text-transform: uppercase; }
.drill-account-chip .ac-name { font-weight: 600; color: var(--ink-800); }
.drill-account-chip .ac-balance { font-weight: 800; color: var(--brand-700); font-variant-numeric: tabular-nums; }

.drill-explain-hint {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand-700);
  background: var(--brand-tint2);
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--brand-tint);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  text-decoration: none;
}
.drill-explain-hint:hover { background: var(--brand-tint); transform: translateY(-1px); }
.drill-explain-hint .material-symbols-outlined { font-size: 13px; }

/* =====================================================================
   COMPLETENESS BANNER — date-anchored "you owe these uploads" hero strip
   ===================================================================== */
.completeness-banner {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--brand-tint2) 100%);
  border: 1px solid var(--brand-tint);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--sh-2);
  position: relative;
  overflow: hidden;
}
.completeness-banner::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--gold), var(--ok-bright));
}
.cb-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.cb-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-600);
  margin-bottom: 4px;
}
.cb-pct {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink-900);
}
.cb-pct .cb-pct-suffix {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-500);
  margin-left: 2px;
}
.cb-date-line {
  font-size: 13px;
  color: var(--ink-700);
  margin-top: 8px;
  line-height: 1.5;
}
.cb-date-line .cb-today { font-weight: 700; color: var(--ink-900); }
.cb-date-line .cb-note { color: var(--brand-700); font-weight: 600; }
.cb-bar {
  height: 8px;
  background: var(--bg-tint);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
}
.cb-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--ok-bright) 100%);
  border-radius: 999px;
  transition: width var(--t-slow) var(--ease);
}
.cb-buckets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}
.cb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-card);
  font-size: 12.5px;
  border: 1px solid var(--border-fine);
}
.cb-item .cb-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cb-item .cb-icon .material-symbols-outlined { font-size: 14px; color: #fff; }
.cb-item.is-ok       .cb-icon { background: var(--ok-bright); }
.cb-item.is-stale    .cb-icon { background: var(--warn-bright); }
.cb-item.is-missing  .cb-icon,
.cb-item.is-overdue  .cb-icon { background: var(--danger-bright); }
.cb-item .cb-label { flex: 1; font-weight: 600; color: var(--ink-800); }
.cb-item .cb-meta  { font-size: 11px; color: var(--ink-500); }
.cb-item.is-missing { border-color: var(--danger-tint); }
.cb-item.is-overdue { border-color: var(--danger-tint); }
.cb-item.is-stale   { border-color: var(--warn-tint); }

/* =====================================================================
   TRACE TIMELINE — STITCH money page "Traceability: Revenue vs Bank"
   3-step vertical timeline with dots + connecting line
   ===================================================================== */
.trace-timeline { position: relative; padding-left: 24px; margin-top: 4px; }
.trace-timeline::before {
  content: ""; position: absolute;
  left: 7px; top: 16px; bottom: 16px;
  width: 2px;
  background: var(--border);
}
.trace-step { position: relative; padding: 4px 0 16px 14px; }
.trace-step:last-child { padding-bottom: 4px; }
.trace-dot {
  position: absolute;
  left: -24px; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-dk);
  z-index: 1;
}
.trace-step.is-done .trace-dot {
  background: var(--ok-bright);
  border-color: var(--ok-bright);
  box-shadow: 0 0 0 4px var(--ok-tint);
}
.trace-step.is-pending .trace-dot {
  background: var(--bg-card);
  border-color: var(--warn-bright);
  border-style: dashed;
}
.trace-step.is-bank .trace-dot {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-glow);
}
.trace-step .trace-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.trace-step .trace-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-800);
  letter-spacing: -.01em;
}
.trace-step .trace-amt {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums;
}
.trace-step.is-pending .trace-amt { color: var(--danger); }
.trace-step.is-bank    .trace-amt { color: var(--ok); }
.trace-step .trace-desc {
  font-size: 11.5px;
  color: var(--ink-500);
  margin-top: 3px;
  line-height: 1.45;
}

/* =====================================================================
   VIP BADGE — STITCH gold "VIP GOLD" customer badge
   ===================================================================== */
.vip-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px 3px 8px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1px solid #F59E0B;
  color: #92400E;
  font-size: 11px; font-weight: 800;
  letter-spacing: .04em;
  border-radius: 999px;
}
.vip-badge::before {
  content: "star";
  font-family: 'Material Symbols Outlined';
  font-size: 12px;
  font-variation-settings: 'FILL' 1;
  color: var(--gold-600);
}

/* =====================================================================
   PREVIEW PILL — STITCH "PREVIEW" small chip on report cards
   ===================================================================== */
.preview-pill {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em;
  background: var(--bg-tint);
  color: var(--ink-600);
  border-radius: 999px;
  text-transform: uppercase;
}

/* ---- Rows ---- */
.row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-fine);
  transition: background var(--t-fast) var(--ease);
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--bg-soft); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.row-name { font-weight: 500; font-size: 14px; color: var(--ink-800); }
.row-amt  { font-weight: 700; font-size: 14px; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink-800);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--bg-tint); border-color: var(--border-dk); box-shadow: var(--sh-1); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn-primary {
  background: var(--ink-900); color: #FAFAFA;
  border-color: var(--ink-900);
}
.btn-primary:hover {
  background: var(--ink-1000);
  border-color: var(--ink-1000);
  box-shadow: var(--sh-2);
}
.btn-brand {
  background: var(--brand); color: #fff; border-color: var(--brand);
  font-weight: 600;
}
.btn-brand:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  box-shadow: 0 6px 18px rgba(46,125,111,.28);
}

/* ---- Tags / chips ---- */
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.tag-red    { background: var(--danger-tint); color: var(--danger); }
.tag-yellow { background: var(--warn-tint);   color: var(--warn); }
.tag-green  { background: var(--ok-tint);     color: var(--ok); }
.tag-blue   { background: var(--brand-tint);  color: var(--brand-700); }
.tag-purple { background: var(--purple-tint); color: var(--purple); }
.tag-mute   { background: var(--bg-tint);     color: var(--ink-600); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--ink-700);
  background: var(--bg-tint);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
  font-weight: 500;
}

/* ---- Empty state ---- */
.empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--ink-500);
  font-size: 13px;
  background: var(--bg-tint);
  border-radius: var(--r-md);
  border: 1px dashed var(--border-dk);
}

/* ---- Loading skeleton ---- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-tint) 0%,
    var(--bg-tint-2) 50%,
    var(--bg-tint) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Fade-in for new renders ---- */
.fade-in { animation: fadeUp 320ms var(--ease) both; }
.fade-in-stagger > * { animation: fadeUp 320ms var(--ease) both; }
.fade-in-stagger > *:nth-child(1) { animation-delay: 0ms; }
.fade-in-stagger > *:nth-child(2) { animation-delay: 40ms; }
.fade-in-stagger > *:nth-child(3) { animation-delay: 80ms; }
.fade-in-stagger > *:nth-child(4) { animation-delay: 120ms; }
.fade-in-stagger > *:nth-child(5) { animation-delay: 160ms; }
.fade-in-stagger > *:nth-child(6) { animation-delay: 200ms; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Scroll anchors ---- */
[data-anchor], .detail-pane { scroll-margin-top: 80px; }
@media (min-width: 1024px) {
  .detail-pane.is-sticky { position: sticky; top: 72px; align-self: start; }
}

/* ---- Alert banner (existing, kept) ---- */
.alert-banner {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 18px;
  border-left: 4px solid;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--bg-card);
  margin-bottom: 10px;
  box-shadow: var(--sh-1);
  transition: filter var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.alert-banner:hover {
  filter: brightness(.985);
  transform: translateX(3px);
  box-shadow: var(--sh-2);
}
.alert-banner.sev-critical {
  border-color: var(--danger-bright);
  background: linear-gradient(90deg, var(--danger-tint) 0%, #FFF5F5 100%);
  color: #7F1D1D;
}
.alert-banner.sev-high {
  border-color: var(--warn-bright);
  background: linear-gradient(90deg, var(--warn-tint) 0%, #FFFBEB 100%);
  color: #78350F;
}
.alert-banner.sev-medium {
  border-color: var(--gold-600);
  background: linear-gradient(90deg, var(--gold-tint) 0%, #FFFDF5 100%);
  color: #713F12;
}
.alert-banner.sev-info {
  border-color: var(--brand);
  background: linear-gradient(90deg, var(--info-tint) 0%, var(--bg-card) 100%);
  color: #1E3A8A;
}

/* ---- Brief sections (Counsel page) ---- */
.brief-section {
  border: 1px solid var(--border-fine);
  border-radius: var(--r-md);
  background: var(--bg-card);
  padding: 20px 22px;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
.brief-section::before {
  content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 2px;
  background: var(--brand);
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.brief-section:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
  border-color: var(--border);
}
.brief-section:hover::before { opacity: 1; }
.brief-section h3 {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin: 0;
}
.brief-section h3 .material-symbols-outlined { font-size: 18px; color: var(--brand); }

/* ---- Tables ---- */
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  background: var(--bg-tint);
}
table.data-table tbody td {
  padding: 11px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-fine);
  vertical-align: middle;
}
table.data-table tbody tr {
  transition: background var(--t-fast) var(--ease);
}
table.data-table tbody tr:hover { background: var(--bg-tint); }
table.data-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---- Form inputs ---- */
input[type=text], input[type=date], input[type=number], select, textarea {
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink-900);
  font-size: 13px;
  padding: 8px 12px;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-glow);
}

/* ---- Hero (Counsel headline) ---- */
.counsel-hero {
  position: relative;
  padding: 32px 34px 30px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(1200px 360px at 80% -40%, rgba(46,125,111,.10), transparent 60%),
    radial-gradient(800px 280px at 10% 110%, rgba(124,58,237,.06), transparent 60%),
    var(--bg-card);
  border: 1px solid var(--border-fine);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.counsel-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--purple), var(--brand));
}
.counsel-hero h1 {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -.032em;
  line-height: 1.08;
  color: var(--ink-900);
  margin: 6px 0 8px;
}
@media (min-width: 1024px) {
  .counsel-hero h1 { font-size: 46px; }
}
.counsel-hero p.subhead {
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.6;
  margin: 0;
  max-width: 720px;
}

/* ---- Floating Counsel button polish ---- */
#ai-launcher {
  background: linear-gradient(135deg, var(--ink-1000) 0%, var(--ink-800) 100%);
  box-shadow: 0 8px 24px rgba(15,16,20,.20), 0 2px 4px rgba(15,16,20,.10);
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-base) var(--ease);
}
#ai-launcher:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 36px rgba(15,16,20,.24), 0 4px 8px rgba(15,16,20,.12);
}

/* ---- Header refinements ---- */
header.fixed { backdrop-filter: blur(10px); }

/* ---- Subtle divider ---- */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  border: 0;
  margin: 20px 0;
}

/* ---- Helpful utility tweaks ---- */
.text-num { font-variant-numeric: tabular-nums; }
.text-display { letter-spacing: -.025em; }

/* =====================================================================
   RESPONSIVE — Mobile-first reflow for owners reading on phone
   ===================================================================== */
@media (max-width: 1023px) {
  /* Long unbroken tokens (e.g. service_family slugs) must wrap, not push the
     page sideways. Guards today/services/customers rows on narrow screens. */
  #stage { overflow-wrap: anywhere; }

  .section-card { padding: 18px; border-radius: var(--r-md); }
  .stat-card { padding: 15px 16px; }
  /* keep the hero's top padding equal to a plain card's so labels stay on one line */
  .stat-card.is-hero { padding: 15px 18px 18px; }
  /* stat-value / hero sizes are capped further down, with the width-aware rules */
  .section-title { font-size: 26px; }
  .counsel-hero { padding: 22px 22px 20px; border-radius: var(--r-lg); }
  .counsel-hero h1 { font-size: 26px; }
  .counsel-hero p.subhead { font-size: 12.5px; }

  /* Completeness banner reflow */
  .cb-header { flex-direction: column; gap: 12px; }
  .cb-pct { font-size: 36px; }
  .cb-buckets { grid-template-columns: 1fr; gap: 4px; }
  .cb-item { padding: 7px 11px; font-size: 12px; }

  /* AI suggest / attention cards — tighter on phone */
  .ai-suggest-card { padding: 18px; }
  .ai-suggest-card h3 { font-size: 16px; }
  .attention-card { padding: 16px 18px; }
  .attention-card h3 { font-size: 17px; }

  /* Brief sections tighter */
  .brief-section { padding: 16px 18px; }
  .brief-section ul { font-size: 12.5px !important; }

  /* Counsel launcher clears the bottom tab bar */
  #ai-launcher { bottom: calc(74px + env(safe-area-inset-bottom)); }

  /* Drill modal: bottom-sheet full-width on phone */
  .drill-modal { border-radius: 24px 24px 0 0; max-height: 92vh; }
  .drill-modal-header { padding: 18px 20px 14px; }
  .drill-modal-header h2 { font-size: 17px; }
  .drill-modal-header .drill-value { font-size: 26px; }
  .drill-modal-body { padding: 0 18px 18px; }

  /* List-status-row stacks: items go vertical instead of crammed cols */
  .list-status-row .grid { gap: 4px !important; }
}

@media (max-width: 639px) {
  /* On phone the right rail should land RIGHT AFTER the hero — not at the
     bottom. We invert order so the user sees alerts immediately. */
  .counsel-stage .grid > .col-span-12.lg\:col-span-8 { order: 2; }
  .counsel-stage .grid > .col-span-12.lg\:col-span-4 { order: 1; }

  /* AI chat panel → fullscreen on phone (otherwise it covers half the page) */
  #ai-panel {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    z-index: 90;
  }
  #ai-panel > header { padding: 14px 16px !important; }
  #ai-launcher { bottom: calc(74px + env(safe-area-inset-bottom)) !important; right: 16px !important; }

  /* Stat grids: 1-col on phone */
  .stat-grid { grid-template-columns: 1fr; }

  /* Hero text further compressed */
  .counsel-hero { padding: 18px 18px 16px; }
  .counsel-hero h1 { font-size: 22px; line-height: 1.18; }

  /* Section titles wrap tighter */
  .section-title { font-size: 22px; }

  /* Data tables: convert to card-list pattern via overflow-auto */
  table.data-table { font-size: 12px; }
  table.data-table thead th, table.data-table tbody td { padding: 8px 8px; }

  /* Floating Counsel launcher: smaller on phone */
  #ai-launcher { padding: 10px 14px; font-size: 13px; }

  /* Top bar: hide tenant slug chip on phone (it sits in topbar already) */
  #version-line { display: none; }

  /* Declutter the crowded phone header so the user/logout pill stays on-screen:
     drop the dev runtime dot and the redundant section label, cap the tenant
     chip so a long workspace name truncates instead of pushing content off. */
  #runtime { display: none; }
  #topbar-context { display: none; }
  #tenant-select { max-width: 104px; }
  header .h-3.w-px { display: none; } /* the divider before the (now hidden) label */
  header > div:last-child { gap: 0.5rem; } /* tighten the right cluster (was gap-5) */
  /* Keep the logout pill on-screen: drop the owner name, keep just 登出. */
  #user-pill span:first-child { display: none; }

  /* Non-responsive dense grids (e.g. government T4/T4A boxes = grid-cols-4)
     are unreadable at 4-across on a phone; reflow to 2 so big $ values fit.
     Responsive grids (grid-cols-2 md:grid-cols-4) are untouched — they are
     already 2-col here. */
  #stage .grid-cols-4,
  #stage .grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet sweet-spot */
@media (min-width: 640px) and (max-width: 1023px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   MOBILE BOTTOM TAB BAR — thumb-reachable nav (phone/tablet only)
   ===================================================================== */
#mobile-tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(20,24,26,.05);
}
@media (min-width: 1024px) { #mobile-tabs { display: none; } }
.mtab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 2px 0;
  font-size: 10px; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink-500);
  transition: color var(--t-fast) var(--ease);
  position: relative;
}
.mtab .material-symbols-outlined { font-size: 23px; }
.mtab.active { color: var(--brand); }
.mtab.active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.mtab .mtab-badge {
  position: absolute; top: -2px; right: 50%; margin-right: -18px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 800; line-height: 15px; text-align: center;
}

/* =====================================================================
   WIDTH-AWARE STAT VALUES — a big numeral is right on a wide card but clips
   inside a 4-across grid (government T4/T4A boxes, 钱's cash cards). The card
   clips (overflow:hidden), so an oversized value loses its last digits — a
   money figure that silently drops a digit is worse than a small one.

   Size the value off its OWN card width in container units instead of fixed
   steps: wide cards keep the drama, tight cards shrink smoothly, and the
   clamp floor keeps it readable. 16cqi fits ~8 glyphs ($1,234,567) of this
   800-weight face inside the card with room to spare.
   ===================================================================== */
.stat-card { container-type: inline-size; }
.stat-value { font-size: clamp(15px, 16cqi, 34px); }
.stat-card.is-hero .stat-value { font-size: clamp(20px, 16cqi, 48px); }
/* Squeezed cards (the 税务 T4/T4A box grid packs many into one row) can get
   narrower than the 15px floor can serve. A small number beats a truncated
   one, so below that width the floor gives way rather than the digits. */
@container (max-width: 150px) { .stat-value { font-size: max(10px, 16cqi); letter-spacing: -.01em; } }
/* On a phone a card is full-width, so the cap — not the card — is what keeps
   the number a sensible size. Lower it there. */
@media (max-width: 1023px) {
  .stat-value { font-size: clamp(15px, 16cqi, 26px); }
  .stat-card.is-hero .stat-value { font-size: clamp(18px, 16cqi, 34px); }
}

/* Tax-slip box grids (T4/T4A/balance-sheet totals) sit inside a half-width
   panel. A fixed 3- or 4-across grid squeezed them to ~65px on a laptop and
   clipped the amounts, so let the row rewrap instead of the number shrink. */
.box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }

/* Form controls styled as .btn (payroll/booking forms) must shrink to their
   grid cell instead of forcing the cell wider than the viewport. */
input.btn, select.btn, textarea.btn { min-width: 0; max-width: 100%; }