/* =====================================================================
   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);
}
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 */
.stat-card.is-hero { padding: 22px 22px; }
.stat-card.is-hero .stat-value { font-size: 48px; }

/* =====================================================================
   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; }
  .stat-value { font-size: 26px; }
  .stat-card.is-hero .stat-value { font-size: 34px; }
  .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 $34px numeral is right on a wide card
   but clips inside a 4-across grid (e.g. government T4/T4A boxes). Let the
   value scale to its OWN card width via container queries, so wide cards
   keep the drama and tight cards never truncate. (Placed last so it wins
   ties against the mobile font-size rule above.)
   ===================================================================== */
.stat-card { container-type: inline-size; }
@container (max-width: 205px) { .stat-value { font-size: 24px; letter-spacing: -.02em; } }
@container (max-width: 150px) { .stat-value { font-size: 19px; } }
@container (max-width: 104px) { .stat-value { font-size: 15px; letter-spacing: -.01em; } }

/* 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%; }