/* ============================================================================
   Scout by Gentoo Logic — design system  (confluence-18 + SCOUT-BRAND-SPEC)
   ----------------------------------------------------------------------------
   Owned identity: navy war-room + blue trust + RATIONED volt energy + the
   reticle motif. Inter only (Teko for big stat numerals). Anti-slop enforced:
   no gradients on buttons/panels, radius capped at 12px, no glow/blur/neumorph,
   volt rationed to momentum cues only.
   Brand spec wins over confluence-18 on any color/type conflict.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Brand palette (EXACT spec values) ───────────────────────────────── */
  --navy-900:#0A1324;  --navy-700:#15233B;  --navy-500:#1E3354;  --navy-300:#4E6A84;
  --blue-500:#2D6BFF;  --blue-600:#1F54D6;  --blue-300:#7FB2FF;
  --volt:#CFFF00;      --volt-ink:#0C0D10;          /* graphite text on volt */
  --white:#FFFFFF;     --graphite:#0C0D10;
  --gray-900:#1E2430;  --gray-700:#4A5565;  --gray-500:#8A94A3;
  --gray-300:#D4DAE2;  --gray-200:#E9EEF4;  --gray-100:#F6F9FC;

  /* Semantic */
  --vetted:#22C55E;    --verifying:#F59E0B;
  --win-contact:#CFFF00; --win-eval:#2D6BFF; --win-quiet:#8B5CF6; --win-dead:#EF4444;

  /* ── App aliases (consumed by app.js inline styles — DO NOT rename) ───── */
  --ink:var(--graphite);
  --navy:var(--navy-900);
  --brand:var(--blue-500);
  --brand-2:var(--blue-300);
  --brand-deep:var(--blue-600);
  --volt-2:var(--volt);
  --coral:var(--win-dead);
  --gold:var(--verifying);
  --grape:var(--win-quiet);

  /* Surfaces — Light "Directory" theme */
  --bg:var(--white);
  --surface:var(--white);
  --surface-2:var(--gray-100);
  --surface-3:var(--gray-200);
  --line:var(--gray-200);
  --line-strong:var(--gray-300);

  /* Text */
  --text:var(--graphite);
  --text-2:var(--gray-700);
  --text-3:var(--gray-500);
  --on-dark:#EAF1FF;
  --on-dark-2:var(--blue-300);

  /* Status (map to semantic) */
  --ready:#15803D;     --ready-bg:#DCFCE7;
  --action:#B45309;    --action-bg:#FEF3C7;
  --pending:var(--blue-600); --pending-bg:#E5ECFF;

  /* ── Geometry — radius capped at 12px (4 chips / 6 ctrls / 8 panels / 12 major) */
  --r:12px;            /* major */
  --r-panel:8px;
  --r-ctrl:6px;
  --r-chip:4px;
  --r-sm:6px;
  --r-lg:12px;
  --pad:clamp(16px, 4vw, 28px);

  /* Flat-only elevation (no glow). Raises are tiny + neutral. */
  --shadow-sm:0 1px 0 rgba(10,19,36,.04);
  --shadow:0 2px 6px rgba(10,19,36,.07);
  --shadow-lg:0 16px 40px rgba(10,19,36,.18);

  /* Kept for per-SCHOOL crest identity only (never Scout UI chrome) */
  --grad-brand:linear-gradient(135deg, var(--blue-300), var(--blue-500));
  --grad-night:var(--navy-900);

  /* Type */
  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-stat:"Teko", "Inter", system-ui, sans-serif;   /* big stat numerals only */

  /* Motion */
  --ease:cubic-bezier(0.2,0.8,0.2,1);
  --t-fast:120ms; --t-med:200ms; --t-slow:320ms;

  /* Reticle motif tokens */
  --hair-light:var(--gray-200);
  --hair-dark:var(--navy-500);

  --tab-h:64px;
  --sidebar-w:248px;
  --topbar-h:60px;
  --maxw:1120px;
}

/* ── Dark "War Room / Vault" theme (sectional opt-in via .theme-dark) ─────── */
.theme-dark {
  color-scheme: dark;
  --bg:var(--navy-900);
  --surface:var(--navy-700);
  --surface-2:#1A2B47;
  --surface-3:var(--navy-500);
  --line:var(--navy-500);
  --line-strong:#26426B;
  --text:#EAF1FF;
  --text-2:#B9C9DE;
  --text-3:var(--navy-300);
  --navy:#EAF1FF;        /* "navy" headings invert to light on dark */
  --ready-bg:rgba(34,197,94,.14);
  --action-bg:rgba(245,158,11,.16);
  --pending-bg:rgba(45,107,255,.18);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  touch-action:manipulation;
  overscroll-behavior-y:none;
}
/* tabular numerals everywhere data lives */
table, .stat, .cal, .meter, .tnum, [class*="num"] { font-feature-settings:"tnum" 1, "cv01" 1; }

h1,h2,h3,h4 { font-family:var(--font-display); color:var(--navy); margin:0 0 .4em; line-height:1.12; letter-spacing:-.02em; }
h1 { font-size:clamp(26px, 6vw, 38px); font-weight:700; }
h2 { font-size:clamp(20px, 4.5vw, 26px); font-weight:700; }
h3 { font-size:17px; font-weight:600; }
p { margin:0 0 1em; color:var(--text-2); }
a { color:var(--blue-500); text-decoration:none; }
a:hover { color:var(--blue-600); }
img, svg { max-width:100%; }
.hide { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ─────────────────────────── App layout ─────────────────────────── */
#app { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }

/* Desktop sidebar (War Room dark, always) */
.sidebar {
  display:none;
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
  background:var(--navy-900); color:var(--on-dark);
  padding:22px 16px; flex-direction:column; gap:6px; z-index:40;
  border-right:1px solid var(--navy-500);
  /* faint 2% noise on dark only */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
}
.sidebar .brand-lockup { margin:4px 8px 20px; }
.sidebar nav { display:flex; flex-direction:column; gap:2px; }
.side-link {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--r-ctrl);
  color:var(--blue-300); font-weight:500; font-size:15px;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.side-link .ic { width:22px; display:grid; place-items:center; }
.side-link:hover { background:rgba(127,178,255,.10); color:#fff; }
.side-link.active { background:rgba(45,107,255,.18); color:#fff; box-shadow:inset 2px 0 0 var(--volt); }
.sidebar .side-foot { margin-top:auto; padding:10px 8px; }
.side-user { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--blue-300); }

/* Top bar */
.topbar {
  position:sticky; top:0; z-index:30;
  height:var(--topbar-h);
  display:flex; align-items:center; gap:12px;
  padding:0 var(--pad);
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.theme-dark .topbar, .topbar.theme-dark { background:var(--navy-900); border-color:var(--navy-500); }
.topbar .brand-lockup { display:flex; }
.topbar .spacer { flex:1; }
.topbar .role-chip {
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--r-chip); background:var(--gray-100); color:var(--gray-700);
  border:1px solid var(--line);
}

/* ── Brand lockup (mark + wordmark) ───────────────────────────────────────
   Per scout_brand_packet: "Scout" = Inter 800, tight tracking; "BY GENTOO
   LOGIC" = Inter 800, wide tracking, blue. Mark = white-tile reticle. */
.brand-lockup { display:flex; align-items:center; gap:10px; }
.brand-lockup .logo { width:34px; height:34px; border-radius:9px; }
.brand-lockup .wordmark { display:flex; flex-direction:column; line-height:1; }
.brand-lockup .wm-main { font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.045em; color:var(--navy-900); }
.sidebar .brand-lockup .wm-main { color:#fff; }
.theme-dark .brand-lockup .wm-main { color:#fff; }
.brand-lockup .wm-sub { font-size:8.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--blue-500); margin-top:5px; }
.sidebar .brand-lockup .wm-sub { color:var(--blue-300); }

/* Event result / placement line — brand-values icon feel; volt momentum in the
   dark Vault, blue on light surfaces (volt is illegible on white). */
.evt-result { color:var(--blue-500); }
.theme-dark .evt-result { color:var(--volt); }

/* Main content */
.main { flex:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:var(--pad); padding-bottom:calc(var(--tab-h) + 28px); }
/* Vault "War Room": dark canvas + matching chrome */
.main.theme-dark { background:var(--navy-900); color:var(--text); max-width:none; }
.main.theme-dark > * { max-width:var(--maxw); margin-left:auto; margin-right:auto; }
body.room-dark .topbar { background:var(--navy-900); border-bottom-color:var(--navy-500); }
body.room-dark .topbar .wm-main { color:#fff; }
body.room-dark .tabbar { background:var(--navy-900); border-top-color:var(--navy-500); }
body.room-dark .tab { color:var(--navy-300); }
body.room-dark .tab.active { color:#fff; }

/* Bottom tab bar (mobile) */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:var(--tab-h);
  display:flex; align-items:stretch;
  background:var(--white);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--gray-500); font-size:10.5px; font-weight:600; letter-spacing:.01em;
  background:none; border:none; cursor:pointer; position:relative;
}
.tab .ic { display:grid; place-items:center; }
.tab.active { color:var(--blue-500); }
.tab.active::before {
  content:""; position:absolute; top:6px; width:22px; height:3px; border-radius:999px; background:var(--volt);
}

/* ─────────── Reticle motif: notched hairlines + concentric rings ─────────── */
/* 1px rule, 8px notch gap every 64px */
.hr-notched, .notched {
  height:1px; border:0;
  background-image:repeating-linear-gradient(90deg, var(--hair-light) 0 56px, transparent 56px 64px);
}
.theme-dark .hr-notched, .theme-dark .notched { background-image:repeating-linear-gradient(90deg, var(--hair-dark) 0 56px, transparent 56px 64px); }

/* concentric-ring hint behind hero headers + empty states */
.reticle-rings { position:relative; isolation:isolate; }
.reticle-rings::before {
  content:""; position:absolute; z-index:-1; right:-40px; top:-40px; width:240px; height:240px; border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 38%, currentColor 38% 38.6%, transparent 38.6%) ,
    radial-gradient(circle, transparent 0 62%, currentColor 62% 62.5%, transparent 62.5%);
  color:var(--navy-900); opacity:.06; pointer-events:none;
}
.theme-dark .reticle-rings::before, .hero .reticle-rings::before, .reticle-rings.on-dark::before { color:#fff; opacity:.10; }

/* ─────────────────────────── Panels (not card-soup) ─────────────────────────── */
/* .card = flat info panel by default. Modifiers add hierarchy. */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel);
  box-shadow:none; padding:18px;
}
.card.raise, .panel-actionable { box-shadow:var(--shadow); border-color:var(--line-strong); }
.card.data, .panel-data { background:var(--gray-100); border-color:var(--line); }
.theme-dark .card.data, .theme-dark .panel-data { background:#1A2B47; }
.card + .card { margin-top:14px; }
.stack { display:flex; flex-direction:column; gap:14px; }
.row { display:flex; align-items:center; gap:12px; }
.between { justify-content:space-between; }
.wrap { flex-wrap:wrap; }
.muted { color:var(--text-3); }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-500); margin:0 0 6px; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:26px 2px 12px; }
.section-title:first-child { margin-top:6px; }
.section-title h2 { margin:0; }
.grid { display:grid; gap:14px; }
@media (min-width:560px){ .grid.cols-2{ grid-template-columns:1fr 1fr; } .grid.cols-3{ grid-template-columns:repeat(3,1fr); } }

/* ─────────────────────────── Buttons ─────────────────────────── */
/* PRIMARY = blue (trust). Volt is rationed to a single hero CTA via .btn-volt. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:600; font-size:15px;
  padding:11px 18px; border-radius:var(--r-ctrl); border:1px solid transparent; cursor:pointer;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space:nowrap;
}
.btn:active { transform:scale(0.98); }
.btn-primary { background:var(--blue-500); color:#fff; }
.btn-primary:hover { background:var(--blue-600); color:#fff; }
.btn-brand { background:var(--blue-500); color:#fff; }
.btn-brand:hover { background:var(--blue-600); color:#fff; }
.btn-volt { background:var(--volt); color:var(--volt-ink); }     /* single hero CTA only */
.btn-volt:hover { background:#d8ff33; color:var(--volt-ink); }
.btn-ghost { background:var(--surface); color:var(--navy-900); border-color:var(--line-strong); }
.btn-ghost:hover { background:var(--gray-100); border-color:var(--blue-300); color:var(--navy-900); }
.theme-dark .btn-ghost { color:#fff; }
.theme-dark .btn-ghost:hover { background:rgba(127,178,255,.10); }
.btn-dark { background:var(--navy-900); color:#fff; }
.btn-block { width:100%; }
.btn-sm { padding:7px 12px; font-size:13px; border-radius:var(--r-ctrl); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ─────────────────────────── Inputs ─────────────────────────── */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:13px; font-weight:600; color:var(--text-2); }
.input, select.input, textarea.input {
  width:100%; height:40px; font-family:var(--font); font-size:16px; color:var(--text);
  padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--r-ctrl);
  background:var(--surface); transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
select.input { height:40px; }
textarea.input { height:auto; padding:11px 14px; resize:vertical; min-height:84px; }
.input:focus, textarea.input:focus, select.input:focus {
  outline:none; border-color:var(--blue-500); box-shadow:0 0 0 2px rgba(45,107,255,.35);
}

/* ─────────────────────────── Badges / pills ─────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--r-chip); letter-spacing:.01em; }
.badge.ready, .badge.vetted { background:var(--vetted); color:#fff; }          /* vetted = solid green */
.badge.action, .badge.verifying { background:transparent; color:var(--verifying); border:1px solid var(--verifying); }  /* verifying = amber outline */
.badge.pending { background:var(--pending-bg); color:var(--pending); }
.badge.div { background:var(--surface-3); color:var(--navy-900); }
.theme-dark .badge.div { color:#fff; }
.badge.verified { background:rgba(245,158,11,.14); color:#9a6700; }
.tag { font-size:12px; font-weight:500; color:var(--text-2); background:var(--gray-100); border:1px solid var(--line); padding:4px 9px; border-radius:var(--r-chip); }
.theme-dark .tag { background:#1A2B47; }

/* NCAA window chips */
.win { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--r-chip); }
.win.contact { background:rgba(207,255,0,.18); color:#5b6b00; border:1px solid rgba(207,255,0,.6); }
.win.eval    { background:rgba(45,107,255,.12); color:var(--blue-600); border:1px solid rgba(45,107,255,.4); }
.win.quiet   { background:rgba(139,92,246,.12); color:#6d28d9; border:1px solid rgba(139,92,246,.4); }
.win.dead    { background:rgba(239,68,68,.10); color:#dc2626; border:1px solid rgba(239,68,68,.4); }

/* ─────────────────── Hero-stat tiles (reticle underline) ─────────────────── */
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel); padding:16px; box-shadow:none; }
.stat .n {
  font-family:var(--font-stat); font-size:40px; font-weight:600; color:var(--navy-900); line-height:.9;
  display:inline-block; position:relative; padding-bottom:8px;
}
.stat .n::after {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--line-strong);
}
.stat .n::before {
  content:""; position:absolute; left:0; bottom:-1px; width:12px; height:3px; background:var(--volt);
}
.theme-dark .stat .n { color:#fff; }
.stat .l { font-size:12.5px; font-weight:500; color:var(--text-3); margin-top:8px; }
.stat .n.volt { color:#7a9b00; }
.stat .n.coral { color:var(--win-dead); }

/* ─────────────────────────── Hero ─────────────────────────── */
.hero {
  background:var(--navy-900); color:#fff; border-radius:var(--r);
  padding:clamp(22px,5vw,34px); position:relative; overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
}
.hero::after {
  content:""; position:absolute; right:-50px; top:-50px; width:220px; height:220px; border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 47%, rgba(255,255,255,.10) 47% 47.6%, transparent 47.6%),
    radial-gradient(circle, transparent 0 30%, rgba(207,255,0,.16) 30% 30.8%, transparent 30.8%);
  pointer-events:none;
}
.hero h1, .hero h2 { color:#fff; }
.hero p { color:var(--blue-300); }
.hero .kicker { color:var(--volt); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:12px; margin-bottom:8px; }

/* ─────────────────────────── Directory: zebra tables ─────────────────────────── */
.list { display:flex; flex-direction:column; }
.lrow {
  display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 12px;
  border-bottom:1px solid var(--line); border-left:2px solid transparent;
  transition:background var(--t-fast) var(--ease);
}
.list .lrow:nth-child(even) { background:var(--gray-100); }
.theme-dark .list .lrow:nth-child(even) { background:#1A2B47; }
.lrow:last-child { border-bottom:none; }
.lrow:hover { background:rgba(45,107,255,.05); }
.lrow.sel, .lrow[aria-selected="true"] { border-left-color:var(--blue-500); background:rgba(45,107,255,.07); }
.avatar { width:40px; height:40px; border-radius:var(--r-panel); flex:none; display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px; background:var(--navy-700); }
.avatar.grape { background:var(--win-quiet); }
.avatar.gold { background:var(--verifying); }
.lrow .meta { flex:1; min-width:0; }
.lrow .meta .nm { font-weight:600; color:var(--text); }
.lrow .meta .sub { font-size:13px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─────────────────── Deep-link contact buttons ─────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:480px){ .contact-grid { grid-template-columns:1fr 1fr; } }
.contact-btn {
  display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:var(--r-ctrl);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--navy-900); font-weight:600; font-size:14px;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.contact-btn:hover { border-color:var(--blue-500); background:var(--gray-100); color:var(--navy-900); }
.theme-dark .contact-btn { color:#fff; }
.contact-btn .ic { width:30px; height:30px; border-radius:var(--r-ctrl); display:grid; place-items:center; color:#fff; flex:none; }
.contact-btn .ic.mail { background:var(--blue-500); }
.contact-btn .ic.x { background:var(--graphite); }
.contact-btn .ic.tel { background:var(--vetted); }
.contact-btn .txt { min-width:0; }
.contact-btn .txt .t1 { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:600; }
.contact-btn .txt .t2 { font-size:13.5px; color:var(--navy-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.theme-dark .contact-btn .txt .t2 { color:#fff; }

/* ─────────────────────────── Slider scale ─────────────────────────── */
.scale { margin-bottom:18px; }
.scale > .scale-label { font-weight:600; color:var(--navy-900); margin-bottom:8px; }
.theme-dark .scale > .scale-label { color:#fff; }
.scale-opts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.scale-opt {
  border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--r-ctrl);
  padding:12px 8px; text-align:center; cursor:pointer; font-weight:600; font-size:13.5px; color:var(--text-2);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.scale-opt small { display:block; font-weight:400; font-size:11px; color:var(--text-3); margin-top:3px; }
.scale-opt.sel { border-color:var(--blue-500); background:rgba(45,107,255,.08); color:var(--navy-900); box-shadow:inset 0 0 0 1px var(--blue-500); }
.theme-dark .scale-opt.sel { color:#fff; }

/* ─────────────────────────── Locked upsell ("glassy wall", no blur-glow) ───── */
.locked { position:relative; border-radius:var(--r-panel); overflow:hidden; border:1px solid var(--line); }
.locked .blurred { filter:blur(4px); user-select:none; pointer-events:none; padding:18px; color:var(--text-3); }
.locked .veil {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:22px; background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.94));
}
.theme-dark .locked .veil { background:linear-gradient(180deg, rgba(10,19,36,.35), rgba(10,19,36,.94)); }
.locked .veil .lock-ic { display:flex; justify-content:center; color:var(--blue-500); }

/* ─────────────────────────── FAB ─────────────────────────── */
.fab {
  position:fixed; right:18px; bottom:calc(var(--tab-h) + 16px); z-index:45;
  display:flex; align-items:center; gap:9px; padding:13px 18px; border:none; border-radius:999px;
  background:var(--blue-500); color:#fff; font-weight:600; font-size:14px; cursor:pointer;
  box-shadow:var(--shadow);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.fab:active { transform:scale(0.98); }
.fab:hover { background:var(--blue-600); }
.fab .ic { display:grid; place-items:center; }

/* ─────────────────────────── Modal / sheet ─────────────────────────── */
.scrim { position:fixed; inset:0; z-index:60; background:rgba(10,19,36,.55); display:flex; align-items:flex-end; justify-content:center; }
.sheet {
  width:100%; max-width:520px; background:var(--surface); border-radius:var(--r) var(--r) 0 0;
  padding:22px var(--pad) calc(22px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-lg);
  max-height:90vh; overflow-y:auto; animation:sheetUp var(--t-slow) var(--ease);
}
@keyframes sheetUp { from { transform:translateY(28px); opacity:.4; } to { transform:none; opacity:1; } }
.sheet .grip { width:40px; height:4px; border-radius:999px; background:var(--line-strong); margin:0 auto 16px; }

/* ─────────────────────────── Toast ─────────────────────────── */
#toast-wrap { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--tab-h) + 78px); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { background:var(--navy-900); color:#fff; font-weight:500; font-size:14px; padding:11px 16px; border-radius:var(--r-ctrl); box-shadow:var(--shadow-lg); animation:toastIn var(--t-med) var(--ease); max-width:90vw; }
.toast.good { background:#14532d; }
.toast.warn { background:#7c2d12; }
@keyframes toastIn { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }

/* ─────────────────────────── Checklist ─────────────────────────── */
.check { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.check:last-child { border-bottom:none; }
.check .box { width:24px; height:24px; border-radius:var(--r-ctrl); border:2px solid var(--line-strong); display:grid; place-items:center; flex:none; color:#fff; }
.check.done .box { background:var(--vetted); border-color:var(--vetted); }
.check .ctext { flex:1; }
.check .ctext .t { font-weight:600; color:var(--text); }
.check.done .ctext .t { color:var(--text-3); text-decoration:line-through; }
.check .ctext .s { font-size:13px; color:var(--text-3); }

/* ─────────────────────────── Progress meter ─────────────────────────── */
.meter { height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.meter > i { display:block; height:100%; border-radius:999px; background:var(--blue-500); transition:width var(--t-slow) var(--ease); }

/* ─────────────────────────── Empty state (reticle) ─────────────────────────── */
.empty { text-align:center; padding:34px 18px; color:var(--text-3); position:relative; }
.empty .em { display:flex; justify-content:center; color:var(--blue-500); opacity:.9; margin-bottom:10px; }

/* ─────────────────────────── Search + chips ─────────────────────────── */
.searchbar { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-ctrl); padding:0 6px 0 14px; height:44px; }
.searchbar:focus-within { border-color:var(--blue-500); box-shadow:0 0 0 2px rgba(45,107,255,.35); }
.searchbar input { flex:1; border:none; outline:none; font-size:16px; background:none; padding:10px 0; color:var(--text); }
.chips { display:flex; gap:8px; overflow-x:auto; padding:12px 2px 4px; -webkit-overflow-scrolling:touch; }
.chip { flex:none; font-size:13px; font-weight:500; padding:6px 13px; border-radius:var(--r-chip); border:1px solid var(--line-strong); background:var(--surface); color:var(--text-2); cursor:pointer; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.chip:hover { border-color:var(--blue-300); }
.chip.on { background:var(--blue-500); color:#fff; border-color:var(--blue-500); }

/* ─────────────────── Scout AI nudge ("Your next move") ─────────────────── */
.scout-nudge {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--gray-100); border:1px solid var(--line); border-radius:var(--r-panel); padding:14px 16px;
}
.theme-dark .scout-nudge { background:#1A2B47; }
.scout-nudge .reticle-dot {
  width:20px; height:20px; flex:none; margin-top:1px; border-radius:50%;
  border:2px solid var(--blue-500); display:grid; place-items:center;
}
.scout-nudge .reticle-dot::after { content:""; width:6px; height:6px; border-radius:50%; background:var(--volt); }
.scout-nudge .sn-title { font-weight:600; color:var(--navy-900); font-size:14px; }
.theme-dark .scout-nudge .sn-title { color:#fff; }
.scout-nudge .sn-body { font-size:13px; color:var(--text-2); margin-top:2px; }

/* ─────────────────── Calendar "now" marker (volt) ─────────────────── */
.cal-now { position:relative; }
.cal-now .now-dot {
  width:10px; height:10px; border-radius:50%; background:var(--volt); position:relative; flex:none;
}
.cal-now .now-dot::before {
  content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--volt);
  animation:nowPulse 2s var(--ease) infinite;
}
@keyframes nowPulse { 0%,100% { opacity:.1; } 50% { opacity:.3; } }
.cal-band { height:8px; border-radius:var(--r-chip); }
.cal-band.contact { background:var(--win-contact); }
.cal-band.eval { background:var(--win-eval); }
.cal-band.quiet { background:var(--win-quiet); }
.cal-band.dead  { background:var(--win-dead); }

/* ───────────────────────── Responsive: desktop ───────────────────────── */
@media (min-width:900px) {
  .sidebar { display:flex; }
  .tabbar { display:none; }
  .fab { bottom:24px; }
  #app { padding-left:var(--sidebar-w); }
  .topbar { left:var(--sidebar-w); }
  .topbar .brand-lockup { display:none; }
  .main { padding-bottom:40px; }
}

/* ───────────────────────── Icon system (SVG, 2px stroke, square cap) ───────── */
.ic-svg { display:block; flex:none; }
.btn .ic-svg { margin:-1px 0; }
.side-link .ic, .tab .ic, .fab .ic { display:grid; place-items:center; }
.contact-btn .ic { display:grid; place-items:center; }
.badge .ic-svg { margin-right:-1px; }
.search-ic { display:grid; place-items:center; color:var(--text-3); }
.compliance-ic { display:grid; place-items:center; width:36px; height:36px; border-radius:var(--r-panel); background:var(--gray-100); color:var(--blue-500); flex:none; }
.theme-dark .compliance-ic { background:#1A2B47; }

/* Onboarding role cards */
.role-card { text-align:left; cursor:pointer; border:1px solid var(--line); transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.role-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--blue-500); }
.role-ic { display:inline-grid; place-items:center; width:46px; height:46px; border-radius:var(--r-panel); background:var(--navy-900); color:var(--blue-300); margin-bottom:12px; }
.role-card:hover .role-ic { background:var(--blue-500); color:#fff; }

/* ─────────────────────────── Reduce motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }