/* Layout: a bright, single-theme coaching app. Left rail on desktop, bottom tab bar on phones,
   content column capped at 1100px, white cards on a cool blue-tinted ground. Brand blue carries
   emphasis, gold is reserved for the high-performer bar and wins. Status colors mean status only.
   Stage 3 (2026-10-09): three levels only (hero, section card, detail rows), an 8px spacing grid,
   a Details expander on every card, status pills with fixed words, big-number tiles, 44px buttons
   on phones. The stage 3 pieces are at the end of this file; the rules above them are the original
   components, kept for the screens that pass B restyles. */
:root {
  color-scheme: light;
  --bg: #F2F5FB;
  --surface: #FFFFFF;
  --surface-2: #EEF3FC;
  --ink: #0F1E3D;
  --ink-2: #44546F;
  --ink-3: #5F6D86;     /* 5.2:1 on white, 4.7:1 on --surface-2 (S6 asks 4.5:1 or better) */
  --line: #DBE3F0;
  --line-2: #EAF0F8;
  --blue: #2B63D9;
  --blue-700: #1F4AA8;
  --blue-100: #DCE7FB;
  --blue-50: #EEF3FF;
  --gold: #F4B62E;
  --gold-700: #C98500;
  --gold-100: #FFF1CF;
  --gold-ink: #7a5200;
  --good: #0CA30C;
  --good-ink: #0A7D0A;
  --good-bg: #E8F7E8;
  --warn: #FAB219;
  --warn-ink: #7a5200;
  --warn-bg: #FFF5DB;
  --serious: #EC835A;
  --serious-bg: #FDEBE3;
  --critical: #D03B3B;
  --critical-ink: #9b2727;
  --critical-bg: #FBE4E4;
  --series-1: #2B63D9;
  --series-2: #C98500;
  --series-3: #1BAF7A;
  --mark-muted: #C3CCDC;
  --grid: #E6ECF5;
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15, 30, 61, .05), 0 10px 28px -14px rgba(15, 30, 61, .22);
  --rail: 232px;
  --gap-sec: 24px;      /* between sections */
  --gap-in: 8px;        /* inside a section */
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 19px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }
p { margin: 0; }
a { color: var(--blue-700); }
button { font: inherit; color: inherit; }
.num { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.sub { color: var(--ink-2); font-size: 13.5px; }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hidden-util { display: none !important; }
:focus-visible { outline: 3px solid rgba(43, 99, 217, .45); outline-offset: 2px; border-radius: 6px; }

/* ---------- Login ---------- */
#login { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(100%, 440px); background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); padding: 32px 28px; display: grid; gap: 18px; }
.login-card img.logo { width: 220px; max-width: 100%; justify-self: center; }
.login-card h1 { font-size: 22px; text-align: center; }
.login-card .sub { text-align: center; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; background: #fff; color: var(--ink); }
.input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 4px var(--blue-50); }
.btn { border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 700; cursor: pointer; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .08s ease, background .15s ease; }
.btn:hover { background: var(--blue-700); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--blue-50); color: var(--blue-700); }
.btn.secondary:hover { background: var(--blue-100); }
.btn.ghost { background: transparent; color: var(--ink-2); border: 1.5px solid var(--line); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.gold { background: var(--gold); color: var(--ink); }
.btn.gold:hover { background: #e9a91c; }
.btn.sm { padding: 8px 12px; border-radius: 10px; font-size: 13px; }
.btn.xs { padding: 5px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.sm svg { width: 16px; height: 16px; }
.btn.xs svg { width: 14px; height: 14px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; flex: none; }
.avatar.lg { width: 56px; height: 56px; font-size: 19px; }
.avatar.sm { width: 30px; height: 30px; font-size: 11.5px; }
.note { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--ink-2); }

/* ---------- App shell ---------- */
#app { display: none; min-height: 100%; }
#app.on { display: grid; grid-template-columns: var(--rail) 1fr; }
.rail { position: sticky; top: 0; height: 100vh; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; }
.rail .brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 16px; }
.rail .brand img { height: 42px; width: auto; }
.rail .brand .hq { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.nav { display: grid; gap: 4px; }
.nav button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; border-radius: 12px; padding: 11px 12px; font-weight: 600; font-size: 15px; color: var(--ink-2); cursor: pointer; text-align: left; min-height: 44px; }
.nav button svg { width: 20px; height: 20px; flex: none; }
.nav button:hover { background: var(--surface-2); color: var(--ink); }
.nav button.active { background: var(--blue-50); color: var(--blue-700); }
.nav button .badge { margin-left: auto; background: var(--gold-100); color: var(--gold-ink); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.nav .nav-divider { height: 1px; background: var(--line-2); margin: 8px 6px; }
.rail .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.rail .me .who { min-width: 0; }
.rail .me .who .n { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail .me .who .r { font-size: 12px; color: var(--ink-3); }
.rail .me button { margin-left: auto; }

.main { min-width: 0; padding: 24px 32px 64px; max-width: 1164px; width: 100%; margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.topbar .title h1 { font-size: 26px; }
.topbar .title .sub { margin-top: 2px; max-width: 640px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.chip.on { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }
.chip.gold { background: var(--gold-100); border-color: #f3dca0; color: var(--gold-ink); }
.chip.good { background: var(--good-bg); border-color: #cdebcd; color: var(--good-ink); }
.chip.warn { background: var(--warn-bg); border-color: #f5e3b1; color: var(--warn-ink); }
.chip.crit { background: var(--critical-bg); border-color: #f1c6c6; color: var(--critical-ink); }
/* The window chip and the sync chip stay, smaller (S5). */
.topbar .chips .chip { font-size: 11.5px; padding: 4px 9px; }
.view { display: none; }
.view.on { display: block; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.span2 { grid-column: span 2; }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; min-width: 0; }
.card.flat { box-shadow: none; border: 1px solid var(--line); }
.card.tint { background: var(--blue-50); box-shadow: none; }
.card.goldtint { background: linear-gradient(135deg, #FFF8E6, #FFF1CF); box-shadow: none; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-h .sub { margin-top: 2px; }
.card-h .right { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.stack { display: grid; gap: 8px; align-content: start; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.divider { height: 1px; background: var(--line-2); margin: 8px 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pill.good { background: var(--good-bg); color: var(--good-ink); }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill.crit { background: var(--critical-bg); color: var(--critical-ink); }
.pill.blue { background: var(--blue-50); color: var(--blue-700); }
.pill.gold { background: var(--gold-100); color: var(--gold-ink); }
.pill.grey { background: var(--surface-2); color: var(--ink-2); }
.pill.none { background: var(--surface-2); color: var(--ink-2); }
.pill.since { background: var(--blue-50); color: var(--blue-700); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: #fff; color: var(--blue-700); box-shadow: 0 1px 2px rgba(15,30,61,.12); }
select.input { padding: 8px 10px; border-radius: 10px; font-size: 13px; width: auto; }

/* Hero / score */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.ring { position: relative; width: 150px; height: 150px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .val .n { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
.ring .val .l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.hero h2 { font-size: 22px; }
.tier-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.tier-track div { height: 8px; border-radius: 4px; background: var(--blue-100); position: relative; }
.tier-track div.filled { background: var(--blue); }
.tier-track div.gold { background: var(--gold); }
.tier-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 4px; }
.tier-labels .on { color: var(--blue-700); }
.standards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.std { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; background: #fff; }
.std .l { font-size: 13px; color: var(--ink); font-weight: 600; }
.std .l small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.std .v { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; }
.std .v small { font-size: 12px; color: var(--ink-3); font-weight: 600; font-family: var(--font-body); }
.std .g { font-size: 12.5px; }
.std.pass { border-color: #cdebcd; }
.std.fail { border-color: #f1c6c6; }

/* Stat tiles: the number big and alone, the label small and muted under it (S4). */
.tile { display: grid; gap: 2px; align-content: start; }
.tile .v { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; order: 0; }
.tile .v small { font-size: 13px; color: var(--ink-3); font-weight: 600; font-family: var(--font-body); letter-spacing: 0; }
.tile .l { font-size: 12.5px; color: var(--ink-3); font-weight: 600; order: 1; }
.tile .d { font-size: 12px; color: var(--ink-3); order: 2; }
.tile .d.up { color: var(--good-ink); }
.tile .d.down { color: var(--critical-ink); }
.tile svg.spark { width: 100%; height: 36px; display: block; margin-top: 6px; order: 3; }
.tile > .caveat, .tile > .stack { order: 4; }

/* Meters */
.meter { height: 10px; border-radius: 5px; background: var(--blue-100); overflow: hidden; position: relative; }
.meter > i { display: block; height: 100%; border-radius: 5px; background: var(--blue); }
.meter > i.warn { background: var(--warn); }
.meter > i.crit { background: var(--critical); }
.meter > i.gold { background: var(--gold); }
.meter .mark { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--gold-700); border-radius: 1px; }
.meter-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.meter-row .l { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 4px; gap: 8px; }
.meter-row .l b { font-family: var(--font-display); white-space: nowrap; }

/* Lead cards */
.lead { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 10px; background: #fff; }
.lead.hot { border-color: var(--blue-100); background: linear-gradient(180deg, #FAFCFF, #fff); }
.lead .top { display: flex; align-items: flex-start; gap: 12px; }
.lead .score { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 17px; background: var(--blue-50); color: var(--blue-700); flex: none; }
.lead .score.gold { background: var(--gold-100); color: var(--gold-ink); }
.lead .who { min-width: 0; flex: 1; }
.lead .who .n { font-weight: 700; font-size: 16px; }
.lead .who .m { font-size: 12.5px; color: var(--ink-2); }
.lead .why { font-size: 14px; color: var(--ink); background: var(--surface-2); border-radius: 10px; padding: 9px 11px; }
.lead .why b { font-weight: 700; }
.sigs { display: flex; flex-wrap: wrap; gap: 6px; }
.sig { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 9px; background: var(--surface-2); color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
.sig.zillow { background: var(--blue-50); color: var(--blue-700); }
.sig.reply { background: var(--good-bg); color: var(--good-ink); }
.sig.zhl { background: var(--gold-100); color: var(--gold-ink); }
.sig.tag { background: #fff; border: 1px solid var(--line); }
.lead .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lead .opener { font-size: 13.5px; border-left: 3px solid var(--gold); padding: 6px 10px; background: #FFFBF0; border-radius: 0 10px 10px 0; white-space: pre-wrap; }
.lead.done { opacity: .5; }

/* Leaderboard */
.board-row { display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) minmax(90px, 2fr) 70px; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 12px; }
.board-row.me { background: var(--blue-50); }
.board-row .rank { font-family: var(--font-display); font-weight: 700; color: var(--ink-3); text-align: center; }
.board-row.me .rank { color: var(--blue-700); }
.board-row .name { min-width: 0; }
.board-row .name .n { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-row .name .t { font-size: 11.5px; color: var(--ink-3); }
.board-row .bar { height: 14px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.board-row .bar i { display: block; height: 100%; background: var(--mark-muted); border-radius: 0 4px 4px 0; }
.board-row.me .bar i { background: var(--blue); }
.board-row .val { font-family: var(--font-display); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tv .board-row { padding: 14px 10px; font-size: 20px; }
.tv .board-row .name .n { font-size: 20px; }
.tv .board-row .bar { height: 22px; }

/* Charts */
.chart-wrap { position: relative; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.legend i.rect { height: 10px; width: 10px; border-radius: 3px; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px; border-radius: 8px; padding: 6px 9px; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; display: none; z-index: 2; }
.tip b { font-family: var(--font-display); }
.tip .k { display: flex; align-items: center; gap: 6px; }
.tip .k i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--line-2); }
table.data th { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
table.data td.n, table.data th.n { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }
.funnel-row { display: grid; grid-template-columns: 150px 1fr 60px; gap: 10px; align-items: center; font-size: 13px; }
.funnel-row .bar { height: 18px; background: var(--surface-2); border-radius: 4px; position: relative; }
.funnel-row .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); border-radius: 0 4px 4px 0; }
.funnel-row .bar .med { position: absolute; top: -3px; width: 2px; height: 24px; background: var(--ink-3); }
.funnel-row .bar .hp { position: absolute; top: -3px; width: 2px; height: 24px; background: var(--gold-700); }
.funnel-row .v { font-family: var(--font-display); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* Escrows */
.deal { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 10px; background: #fff; }
.deal .addr { font-weight: 700; font-size: 15px; }
.deal .money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.deal .money div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.deal .money .l { font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.deal .money .v { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.steps { display: flex; gap: 4px; }
.steps i { flex: 1; height: 6px; border-radius: 3px; background: var(--blue-100); }
.steps i.on { background: var(--blue); }
.check { display: flex; gap: 8px; flex-wrap: wrap; }
.check label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; background: var(--surface-2); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.check input { accent-color: var(--blue); }

/* Coach */
.module { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 8px; background: #fff; }
.module.focus { border-color: var(--gold); background: #FFFCF3; }
.module ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }
.chat { display: grid; gap: 10px; }
.chat .log { display: grid; gap: 8px; max-height: 360px; overflow: auto; padding-right: 4px; }
.bubble { max-width: 92%; border-radius: 14px; padding: 10px 13px; font-size: 14px; white-space: pre-wrap; }
.bubble.me { background: var(--blue); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.bubble.ai { background: var(--surface-2); border-bottom-left-radius: 4px; }
.bubble.ai.thinking { color: var(--ink-3); font-style: italic; }
.chat form { display: flex; gap: 8px; }
.chat form .input { flex: 1; }
.commit label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 14px; cursor: pointer; min-height: 44px; }
.commit label input { accent-color: var(--blue); width: 20px; height: 20px; flex: none; }
.commit label.done span { text-decoration: line-through; color: var(--ink-3); }
.kudos { display: grid; gap: 8px; }
.kudos .k { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.kudos .k .t { font-size: 11.5px; color: var(--ink-3); }

/* Team (the roster itself is table.data.roster, in the stage 3 pass B block) */
.flag { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 8px; display: inline-block; }
.flag.coach { background: var(--warn-bg); color: var(--warn-ink); }
.flag.slip { background: var(--critical-bg); color: var(--critical-ink); }
.flag.star { background: var(--gold-100); color: var(--gold-ink); }
.flag.ok { background: var(--good-bg); color: var(--good-ink); }
.promo { border-radius: 14px; padding: 16px; display: grid; gap: 8px; border: 1px solid var(--line); background: #fff; }
.promo.promo-kind { border-color: #f3dca0; background: linear-gradient(135deg, #FFFBEF, #FFF5DB); }
.promo .t { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.promo .t .e { font-size: 20px; }
.promo .b { font-size: 13.5px; color: var(--ink-2); }
.promo .f { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); align-items: center; }
/* The toast slides up as it appears (S4). */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; font-size: 14px; box-shadow: var(--shadow); z-index: 50; opacity: 0; transition: opacity .22s var(--ease), transform .22s var(--ease); pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.tabbar { display: none; }
.sr { position: absolute; left: -9999px; }

@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main { grid-template-columns: 1fr; }
  .standards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #app.on { grid-template-columns: 1fr; }
  .rail { display: none; }
  .main { padding: 16px 16px 96px; }
  .topbar { margin-bottom: 16px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .card { padding: 16px; }
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .tier-track, .tier-labels { width: 100%; }
  .board-row { grid-template-columns: 28px 34px minmax(0, 1.7fr) minmax(36px, 1fr) 56px; gap: 6px; }
  .funnel-row { grid-template-columns: 110px 1fr 48px; }
  .deal .money { grid-template-columns: 1fr 1fr; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 40; justify-content: space-around; }
  .tabbar button { border: 0; background: transparent; display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 6px 8px; border-radius: 12px; cursor: pointer; min-width: 56px; min-height: 48px; }
  .tabbar button svg { width: 22px; height: 22px; }
  .tabbar button.active { color: var(--blue-700); background: var(--blue-50); }
  .topbar .title h1 { font-size: 22px; }
  /* Every button is at least 44px tall on a phone (S4). The smallest ones keep their type size. */
  .btn { min-height: 44px; }
  .btn.sm { min-height: 44px; padding: 10px 14px; }
  .btn.xs { min-height: 44px; padding: 8px 12px; }
  .seg button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ================= Live site additions (not in the prototype) ================= */
[hidden] { display: none !important; }
a.btn { text-decoration: none; }
#login { padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.login-card form { display: grid; gap: 14px; }
.login-card .err { color: var(--critical-ink); background: var(--critical-bg); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.main { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
.banner { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-700); border-radius: 12px; padding: 9px 12px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.banner.warn { background: var(--warn-bg); border-color: #f5e3b1; color: var(--warn-ink); }
.sheet-back { position: fixed; inset: 0; background: rgba(15, 30, 61, .38); z-index: 60; display: grid; place-items: end center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); animation: fade .18s var(--ease) both; }
.sheet { width: min(100%, 440px); background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); padding: 20px; display: grid; gap: 8px; max-height: 86vh; overflow: auto; animation: rise .22s var(--ease) both; }
.sheet h2 { font-size: 17px; }
.sheet .btn { justify-content: flex-start; min-height: 44px; }
.team-row.clickable { cursor: pointer; border-radius: 10px; }
.team-row.clickable:hover { background: var(--surface-2); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.input.sm { padding: 7px 9px; font-size: 13px; border-radius: 9px; }
table.data .input.sm { min-width: 76px; }
.invite { white-space: pre-wrap; font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; user-select: all; word-break: break-word; }
/* Admin > Team logins: the invite cards (one per login just made or reset). A rule between cards keeps a bulk create's
   26 cards apart; the list grows with the page, which scrolls as usual on a phone. */
.invite-note { margin-bottom: 10px; }
.invite-list { display: grid; gap: 12px; }
.invite-list > .invite-card + .invite-card { border-top: 1px solid var(--line); padding-top: 12px; }
.na { color: var(--ink-3); font-size: 13px; }
.caveat { color: var(--ink-3); font-size: 11.5px; line-height: 1.35; }
.chip-btn { cursor: pointer; font-family: inherit; }
.chip-btn:hover { border-color: var(--blue-100); color: var(--blue-700); }
.sync-warn { color: var(--warn-ink); font-weight: 600; }
.sync-err { color: var(--critical-ink); font-weight: 600; }
.toast { width: max-content; max-width: min(92vw, 520px); text-align: center; }
textarea.input { resize: vertical; min-height: 72px; line-height: 1.4; }
/* A drop-down is as wide as its longest option. Without these a long option (a promo's "Counted from")
   pushes its form, and on a phone the whole page, wider than the screen. */
select.input { max-width: 100%; min-width: 0; }
.field { min-width: 0; }
/* Stage 2: the lead's phone number beside Call and Text (tap and hold selects the whole number). */
.phone-copy { font-family: var(--font-display); font-weight: 600; font-size: 13px; user-select: all; -webkit-user-select: all; align-self: center; white-space: nowrap; }
/* Stage 2: "Flag a record as wrong" inside "Explain my number". */
.flag-box { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line); }
@media (min-width: 761px) { .sheet-back { place-items: center; } }
@media (max-width: 760px) {
  .main { padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* iPhone zooms the page when a field under 16px gets focus and does not zoom back. !important beats the sizes set in script. */
  .input, select.input, .input.sm, table.data .input.sm { font-size: 16px !important; }
  /* Stage 3 pass B: every field is at least as tall as a button on a phone (S4). */
  input.input, select.input { min-height: 44px; }
}

/* ================= Stage 3: three levels, Details expanders, status words, motion ================= */
/* Motion: sections rise in as a screen opens (.view.anim is set for one paint by show()); nothing blocks. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.view.anim > .vstack > *, .view.anim > .grid > * { animation: rise .26s var(--ease) both; }
.view.anim > .vstack > :nth-child(2), .view.anim > .grid > :nth-child(2) { animation-delay: 30ms; }
.view.anim > .vstack > :nth-child(3), .view.anim > .grid > :nth-child(3) { animation-delay: 60ms; }
.view.anim > .vstack > :nth-child(n + 4), .view.anim > .grid > :nth-child(n + 4) { animation-delay: 90ms; }
/* Level spacing: more air between sections than inside them. */
.vstack { display: grid; gap: var(--gap-sec); align-content: start; }
.vstack > .grid { gap: var(--gap-sec); }
.sub-stack { display: grid; gap: 16px; align-content: start; }

/* Level 1: the hero. One per screen, generous padding, one large name or number. */
.hero-card { padding: 24px; display: grid; gap: 16px; position: relative; overflow: hidden; }
.hero-card .hero-top { display: flex; align-items: flex-start; gap: 16px; }
.hero-card .hero-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-700); }
.hero-card .hero-eyebrow svg { width: 16px; height: 16px; }
.hero-card.urgent .hero-eyebrow { color: var(--critical-ink); }
.hero-card.urgent { box-shadow: var(--shadow), inset 0 4px 0 var(--critical); }
.hero-card .hero-name { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; margin-top: 6px; overflow-wrap: anywhere; }
.hero-card .hero-phone { margin-top: 4px; font-size: 14px; color: var(--ink-2); font-weight: 600; user-select: all; -webkit-user-select: all; }
.hero-card .hero-why { font-size: 15px; color: var(--ink); background: var(--surface-2); border-radius: 12px; padding: 10px 14px; }
.hero-card .hero-score { margin-left: auto; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 20px; background: var(--blue-50); color: var(--blue-700); flex: none; }
.hero-card .hero-score small { font-size: 10px; font-weight: 700; letter-spacing: .06em; font-family: var(--font-body); line-height: 1; margin-top: 1px; }
.hero-card .hero-score.gold { background: var(--gold-100); color: var(--gold-ink); }
.hero-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hero-actions .btn { min-height: 52px; font-size: 15px; border-radius: 14px; padding: 12px 10px; }
.hero-actions .btn svg { width: 20px; height: 20px; }
.hero-card.empty-hero { text-align: center; justify-items: center; }
.hero-card .hero-big { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -0.03em; }

/* Level 2: the section card. Icon, title and a one-line summary in the header; the body behind a Details expander. */
.card.sec { padding: 0; }
.sec-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px 14px 18px; cursor: default; }
.sec-h.tappable { cursor: pointer; }
.card.sec:not(.goldtint):not(.tint):not(.alarm) > .sec-h.tappable:hover { background: #FAFBFE; border-radius: var(--radius) var(--radius) 0 0; }
.vstack > .grid { align-items: start; }
.sec-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.sec-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--blue-50); color: var(--blue-700); display: grid; place-items: center; flex: none; }
.sec-ico svg { width: 20px; height: 20px; }
.sec-ico.gold { background: var(--gold-100); color: var(--gold-ink); }
.sec-ico.crit { background: var(--critical-bg); color: var(--critical-ink); }
.sec-ico.good { background: var(--good-bg); color: var(--good-ink); }
.sec-text { min-width: 0; flex: 1; display: grid; gap: 1px; }
.sec-hd { font-size: 17px; font-weight: 700; line-height: 1.25; }
.sec-hd .sec-toggle { all: unset; display: inline; cursor: pointer; font: inherit; color: inherit; }
.sec-hd .sec-toggle:focus-visible { outline: 3px solid rgba(43, 99, 217, .45); outline-offset: 2px; border-radius: 6px; }
.sec-sum { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.sec-sum b { color: var(--ink); font-weight: 700; }
.sec-act { display: flex; gap: 8px; align-items: center; flex: none; margin-left: 4px; }
.chev { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); flex: none; transition: transform .25s var(--ease), background .15s ease; }
.chev svg { width: 20px; height: 20px; }
.sec-h.tappable:hover .chev { background: var(--surface-2); color: var(--ink); }
.sec-h.open .chev { transform: rotate(180deg); }
.sec-face { padding: 0 20px 16px; }
.sec-face:last-child { padding-bottom: 16px; }
.sec-h + .xp-body > .xp-in { padding: 0 20px 20px; }
.sec-face + .xp-body > .xp-in { padding: 0 20px 20px; }
.card.sec > .sec-h:last-child { padding-bottom: 14px; }

/* The Details expander: a row with a chevron; the body animates open (grid-template-rows 0fr -> 1fr). */
.xp-toggle { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--blue-700); font-weight: 700; font-size: 13.5px; padding: 8px 6px 8px 0; cursor: pointer; border-radius: 8px; min-height: 36px; }
.xp-toggle .chev { width: 22px; height: 22px; border-radius: 6px; color: inherit; }
.xp-toggle .chev svg { width: 18px; height: 18px; }
.xp-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.xp-toggle:hover { color: var(--blue); }
.xp-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); min-width: 0; }
.xp-body > .xp-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .28s; }
.xp-body.open { grid-template-rows: 1fr; }
.xp-body.open > .xp-in { visibility: visible; transition: none; }
.xp-body > .xp-in > .xp-pad { padding-top: 4px; display: grid; gap: 12px; }
/* Detail rows (level 3): plain text, muted label, value aligned right. */
.drow { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.drow:first-child { border-top: 0; }
.drow .k { color: var(--ink-3); flex: none; }
.drow .v { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.dtext { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.dtext b { color: var(--ink); }

/* Status pills with fixed words (S3): one colour each. */
.pill.status { padding: 4px 10px; font-size: 12px; }

/* Big-number tiles for the three Zillow numbers (S1): the number alone, the plain label under it, the status word. */
.znums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.znum { display: grid; gap: 6px; align-content: start; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #fff; min-width: 0; }
.znum .v { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
.znum .v.none { font-size: 22px; color: var(--ink-3); font-weight: 700; letter-spacing: -0.01em; padding: 6px 0; }
.znum .l { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.znum .s { font-size: 12px; color: var(--ink-3); margin-top: -4px; }
.znum .g { font-size: 12.5px; color: var(--ink-2); }
.znum .meter { height: 6px; border-radius: 3px; margin-top: 2px; }
.znum .meter > i { border-radius: 3px; }
.znum .meter > i.good { background: var(--good); }
.znum .meter .mark { height: 12px; top: -3px; width: 2px; background: var(--ink-3); }

/* Compact lead cards (face: score, name, phone, one why line, Call / Text / Done). */
.lead .who .p { font-size: 12.5px; color: var(--ink-2); font-weight: 600; user-select: all; -webkit-user-select: all; }
.lead .why.one { background: transparent; padding: 0; color: var(--ink-2); font-size: 13.5px; }
.lead .actions .btn { flex: 1 1 auto; }
.lead .actions .xp-toggle { flex: none; margin-left: auto; }
.lead .lead-details { display: grid; gap: 10px; padding-top: 6px; }
.lead .lead-details .actions .btn { flex: none; }
.lead .lead-details .m { font-size: 12.5px; color: var(--ink-2); }
/* "Respond to these" cards (K17): a text or phone tile in place of the score, red once past the team rule; the one
   line and the rule pill share a row and wrap on a phone. */
.lead .score.ico { background: var(--surface-2); color: var(--ink-2); }
.lead .score.ico svg { width: 20px; height: 20px; }
.lead.over .score.ico { background: var(--critical-bg); color: var(--critical-ink); }
.lead .why.one.wait { display: flex; justify-content: space-between; align-items: center; gap: 6px 10px; flex-wrap: wrap; color: var(--ink); }
.lead .why.one.wait .pill { flex: none; }

/* Opportunities tabs as big chips that scroll sideways on phones. */
.tabs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 6px; margin: -2px -2px 0; scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tab-chip { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 999px; padding: 10px 14px; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; flex: none; min-height: 44px; scroll-snap-align: start; transition: background .15s ease, border-color .15s ease; }
.tab-chip b { font-family: var(--font-display); font-weight: 800; font-size: 13px; background: var(--surface-2); color: var(--ink-2); border-radius: 999px; padding: 2px 8px; min-width: 26px; text-align: center; }
.tab-chip:hover { border-color: var(--blue-100); color: var(--blue-700); }
.tab-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.tab-chip.on b { background: rgba(15, 30, 61, .28); color: #fff; }   /* a darker count bubble: white text stays above 4.5:1 */
.tab-chip.gold.on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.tab-chip.gold.on b { background: rgba(255, 255, 255, .55); color: var(--ink); }
.intro { font-size: 14px; color: var(--ink-2); }

/* Empty state: an icon, one sentence, where the data comes from. Never a bare dash. */
.empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 20px 12px; color: var(--ink-2); }
.empty .empty-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; }
.empty .empty-ico svg { width: 22px; height: 22px; }
.empty .empty-t { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.empty .empty-w { font-size: 13px; color: var(--ink-3); max-width: 420px; }
.empty.left { justify-items: start; text-align: left; padding: 8px 0; }

/* Menu: the "Show all details" switch and the tour. */
.switch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); min-height: 44px; cursor: pointer; font-weight: 700; color: var(--ink-2); }
.switch input { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line); position: relative; margin: 0; margin-left: auto; cursor: pointer; transition: background .2s ease; flex: none; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 30, 61, .3); transition: transform .2s var(--ease); }
.switch input:checked { background: var(--blue); }
.switch input:checked::after { transform: translateX(18px); }
.switch .sw-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.tour-step { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 8px 4px 4px; }
.tour-step .tour-ico { width: 64px; height: 64px; border-radius: 20px; background: var(--blue-50); color: var(--blue-700); display: grid; place-items: center; }
.tour-step .tour-ico svg { width: 30px; height: 30px; }
.tour-step h3 { font-size: 20px; }
.tour-step p { font-size: 15px; color: var(--ink-2); max-width: 340px; }
.tour-dots { display: flex; gap: 6px; justify-content: center; }
.tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tour-dots i.on { background: var(--blue); }
.sheet .tour-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.sheet .tour-nav .btn { justify-content: center; }
.sheet .menu-views { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet .menu-views .btn { padding: 10px 12px; }

@media (max-width: 760px) {
  .vstack { gap: 16px; }
  .vstack > .grid { gap: 16px; }
  .hero-card { padding: 20px 16px; }
  .hero-card .hero-name { font-size: 24px; }
  .hero-actions .btn { font-size: 14px; padding: 12px 6px; }
  .znums { grid-template-columns: 1fr; }
  .znum { grid-template-columns: auto 1fr; grid-template-areas: 'v l' 'v s' 'v pill' 'bar bar' 'g g'; column-gap: 14px; align-items: center; }
  .znum .v { grid-area: v; font-size: 30px; }
  .znum .l { grid-area: l; }
  .znum .s { grid-area: s; margin-top: 0; }
  .znum .pill { grid-area: pill; justify-self: start; }
  .znum .meter { grid-area: bar; }
  .znum .g { grid-area: g; }
  .sec-h { padding: 12px 10px 12px 14px; flex-wrap: wrap; }
  .sec-hd { font-size: 16px; }
  /* A header's action button drops under the title on a phone, so the title and summary keep the full width. */
  .sec-act { flex-basis: 100%; padding-left: 48px; margin: 2px 0 0; }
  .sec-act:empty { display: none; }
  .xp-toggle { min-height: 44px; padding-right: 8px; }
  .znum .v.none { font-size: 18px; }
  .sec-face { padding: 0 16px 16px; }
  .sec-h + .xp-body > .xp-in, .sec-face + .xp-body > .xp-in { padding: 0 16px 16px; }
  .sec-act .btn.xs { min-height: 44px; }
  .chev { width: 40px; height: 40px; }
  .lead .actions .xp-toggle { flex: 1 1 100%; margin-left: 0; justify-content: center; min-height: 44px; }
  .sheet .menu-views { grid-template-columns: 1fr; }
}

/* ================= Stage 3, pass B: Scorecard, Board, Escrows, Coach, Team, Admin ================= */
/* Scorecard: the eight metrics as tiles (S1). The number big and alone, the plain label with its sub line, the
   status word, one line to the bar, and the full card behind Details. */
.mtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mtile { display: grid; gap: 6px; align-content: start; padding: 18px 18px 10px; }
/* Direct children only: the detail rows inside Details use the same class names (.v, .l) at their own size. */
.mtile > .v { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
.mtile > .v.none { font-size: 20px; color: var(--ink-3); font-weight: 700; letter-spacing: -0.01em; padding: 7px 0; }
.mtile > .l { font-size: 14px; font-weight: 700; line-height: 1.25; }
.mtile > .s { font-size: 12px; color: var(--ink-3); margin-top: -4px; }
.mtile > .pill { justify-self: start; }
.mtile > .g { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.mtile > .xp-toggle { justify-self: start; }
.mtile .xp-pad h3 { margin-top: 4px; }
.score-hero .hero { align-items: center; }
.hero-card > .xp-toggle { justify-self: start; }

/* No number yet (S4): short words in the number's place, in a tile or in a table cell. Never a bare dash. */
.tile .v .none, .tile .v.none { font-size: 18px; color: var(--ink-3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.na-cell { color: var(--ink-3); font-size: 12.5px; font-weight: 500; font-family: var(--font-body); letter-spacing: 0; }

/* Hero number grids (Escrows, Team, the Admin sync status): bordered tiles with the number at 34px. */
.hnums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hnums.auto { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.hnums .tile { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #fff; gap: 4px; }
.hnums .tile .v { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.hnums .tile .v small { display: block; font-size: 12.5px; margin-top: 4px; letter-spacing: 0; }
.hnums .tile .l { font-size: 13.5px; color: var(--ink); font-weight: 700; line-height: 1.25; }
.hnums .tile .v .pill { font-size: 13px; padding: 6px 12px; }

/* Board (S1): big metric chips, the ranked list as the hero, "You" pinned, winners as medals. */
/* The hero card clips its overflow, which would make the pinned row's position: sticky inert (it would stick to the
   card, which never scrolls). The board hero lets it through so "You" sticks to the top of the window while the
   list scrolls past; nothing in the board pokes outside the card. */
.board-hero { overflow: visible; }
.board-hero .hero-top { align-items: flex-start; }
.board-hero .board-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; margin: 4px 0 4px; }
.board-list { display: grid; gap: 4px; }
.board-row { grid-template-columns: 34px 40px minmax(0, 1fr) minmax(90px, 2fr) 84px; padding: 10px 8px; }
.board-row .rank { font-size: 15px; }
.board-row .name .n { font-size: 15.5px; }
.board-row .bar { height: 16px; border-radius: 6px; }
.board-row .bar i { border-radius: 0 6px 6px 0; }
.board-row .val { font-size: 15.5px; }
.board-list.compact .board-row { padding: 6px; }
.board-list.compact .board-row .name .n { font-size: 14px; }
.board-list.compact .board-row .bar { height: 12px; }
.board-row.pinned { position: sticky; top: 8px; z-index: 2; box-shadow: 0 8px 20px -10px rgba(15, 30, 61, .35); outline: 1px solid var(--blue-100); }
.tv .board-row { grid-template-columns: 44px 44px minmax(0, 1fr) minmax(120px, 2fr) 110px; }
.medals { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 8px; scroll-snap-type: x proximity; }
.medals::-webkit-scrollbar { display: none; }
.medal { flex: none; width: 172px; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 16px 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; scroll-snap-align: start; }
.medal .ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-100); box-shadow: inset 0 0 0 3px var(--gold); }
.medal .ring .avatar { width: 40px; height: 40px; font-size: 14px; }
.medal .cat { font-size: 12px; color: var(--ink-3); font-weight: 600; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; }
.medal .n { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.medal .val { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }

/* Escrows (S1): a short deal face, the rest behind Details; the alarm as a collapsed red section. */
.deal .money.two { grid-template-columns: 1fr 1fr; }
.deal .money .v { font-size: 18px; }
.deal > .xp-toggle { justify-self: start; }
.deal .drow .v { font-weight: 600; }
.card.sec.alarm { background: linear-gradient(135deg, #FFF6F6, #FFECEC); box-shadow: none; border: 1px solid #f1c6c6; }
.ulist > .row { padding: 8px 0; border-top: 1px solid #f1c6c6; }
.ulist > .row:first-child { border-top: 0; }

/* Coach (S1): the chat as the hero, modules as faces. */
.chat-hero .chat .log { max-height: 320px; }
.chat-hero .chat form .btn { flex: none; }
.module { padding: 14px 16px; }
.module .mod-face { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.module .mod-face .mod-text { flex: 1 1 200px; min-width: 0; }
.module .mod-face .mod-text h3 { font-size: 15.5px; }
.module .mod-face .xp-toggle { margin-left: auto; }
.module .xp-body > .xp-in > .xp-pad { padding-top: 8px; }

/* Team (S1): the roster as a table that scrolls sideways inside its card; the first column stays put. */
.team-hero .hero-top { flex-wrap: wrap; }
table.data.roster th, table.data.roster td { white-space: nowrap; padding: 9px 10px; }
table.data.roster th { white-space: normal; min-width: 72px; vertical-align: bottom; }
table.data.roster td.c { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
table.data.roster td.c.bad { color: var(--critical-ink); }
table.data.roster td.c.ok { color: var(--good-ink); }
table.data.roster tr.clickable { cursor: pointer; }
table.data.roster tr.clickable:hover td, table.data.roster tr.clickable:focus-visible td { background: var(--surface-2); }
table.data.roster .agent { display: flex; align-items: center; gap: 8px; font-weight: 700; }
table.data.roster td:first-child, table.data.roster th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }

/* Admin (S4): grouped fields with helper text under them; every table scrolls inside its own wrapper. */
.field .help, p.help { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.sec-face .form-grid { align-items: start; }
.sec-face, .xp-pad { min-width: 0; }

/* ================= Stage 4: "Start here" (onboarding.js) ================= */
/* The home: a hero with the percent ring, then one section card per chapter with its step list. */
.onb-hero .hero-top { align-items: center; }
.onb-hero .onb-hero-hd { font-size: 24px; margin-top: 6px; }
.onb-hero.complete { background: linear-gradient(135deg, #FFF8E6, #FFF1CF); }
.onb-ring { position: relative; width: 110px; height: 110px; flex: none; }
.onb-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.onb-ring .val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.onb-ring .val .n { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.03em; }
.onb-ring .val .l { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.onb-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.onb-badges .pill { padding: 6px 12px; font-size: 12.5px; }
.onb-badges .pill svg { width: 14px; height: 14px; }
.card.sec.onb-chapter.locked { opacity: .72; }
.card.sec.onb-chapter.done .sec-ico { background: var(--good-bg); color: var(--good-ink); }
.onb-steps { display: grid; gap: 4px; }
.onb-step-row { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; border-radius: 12px; padding: 10px 10px; text-align: left; cursor: pointer; min-height: 44px; color: var(--ink); }
.onb-step-row:hover { background: var(--surface-2); }
.onb-step-row[disabled] { cursor: default; color: var(--ink-3); }
.onb-step-row[disabled]:hover { background: transparent; }
.onb-step-row .mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); flex: none; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; }
.onb-step-row .mark svg { width: 16px; height: 16px; }
.onb-step-row.done .mark { background: var(--good-bg); color: var(--good-ink); }
.onb-step-row.skipped .mark { background: var(--warn-bg); color: var(--warn-ink); }
.onb-step-row.next .mark { background: var(--gold-100); color: var(--gold-ink); box-shadow: inset 0 0 0 2px var(--gold); }
.onb-step-row .t { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; }
.onb-step-row.done .t { color: var(--ink-2); }
.onb-step-row .k { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); flex: none; }

/* The step player: one step, full width, Back / Skip / Next under it. */
.onb-step { padding: 20px 24px 24px; display: grid; gap: 16px; }
.onb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.onb-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-700); }
.onb-eyebrow svg { width: 14px; height: 14px; }
.onb-progress { display: flex; gap: 4px; }
.onb-progress i { flex: 1; height: 6px; border-radius: 3px; background: var(--blue-100); }
.onb-progress i.done { background: var(--good); }
.onb-progress i.now { background: var(--blue); }
.onb-body { display: grid; gap: 14px; outline: none; max-width: 720px; }
.onb-body:focus-visible { outline: none; }
.onb-hd { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.onb-p { font-size: 16px; line-height: 1.55; color: var(--ink); }
.onb-img { width: 180px; max-width: 60%; height: auto; border-radius: 12px; }
.onb-callout { background: linear-gradient(135deg, #FFF8E6, #FFF1CF); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; }
.onb-callout-k { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.onb-callout-k svg { width: 16px; height: 16px; }
.onb-callout p { font-size: 15px; color: var(--ink); line-height: 1.5; }
.onb-note { font-size: 13.5px; color: var(--ink-3); }
.onb-todo { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; padding: 8px 10px; }
.onb-todo svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.onb-hint { font-size: 13px; color: var(--ink-3); min-height: 1.2em; }
/* Back on the left, Next on the right (and "Skip for now" before it when offered); the row wraps on a narrow phone. */
.onb-nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.onb-nav .btn { min-height: 48px; font-size: 15px; border-radius: 14px; }
.onb-nav .btn:last-child { margin-left: auto; min-width: 160px; }
.onb-nav .btn:first-child svg { transform: rotate(90deg); }
.onb-nav .btn:last-child svg { transform: rotate(-90deg); }

/* Cards: one big tappable card, dots, previous / next card. */
.onb-deck { display: grid; gap: 12px; }
.onb-card { display: grid; gap: 8px; width: 100%; text-align: left; border: 1.5px solid var(--blue-100); background: linear-gradient(180deg, #FAFCFF, #fff); border-radius: 18px; padding: 22px 22px 24px; cursor: pointer; min-height: 200px; align-content: start; color: var(--ink); box-shadow: var(--shadow); }
.onb-card:hover { border-color: var(--blue); }
.onb-card-n { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); }
.onb-card-t { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; }
.onb-card-l { font-size: 15.5px; line-height: 1.5; }
.onb-card-l.two { color: var(--ink-2); }
.onb-dots { display: flex; gap: 6px; justify-content: center; }
.onb-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.onb-dots i.seen { background: var(--blue-100); }
.onb-dots i.on { background: var(--blue); }
.onb-deck-nav { display: flex; justify-content: space-between; gap: 8px; }

/* Video: a 16:9 player; a plain link or "on its way" when there is no embed. */
.onb-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--ink); }
.onb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.onb-video.portrait { aspect-ratio: 9 / 16; max-width: 320px; }   /* a YouTube Short (run 4): portrait, fits 375px */

/* Document + sign-off. */
.onb-bullets { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.5; }
.onb-sign { background: var(--surface-2); border-radius: 14px; padding: 14px 16px; }
.onb-sign label { font-size: 14px; color: var(--ink); }
.onb-signed { display: flex; align-items: center; gap: 12px; background: var(--good-bg); color: var(--good-ink); border-radius: 14px; padding: 14px 16px; font-size: 14.5px; }
.onb-signed svg { width: 22px; height: 22px; flex: none; }
.onb-signed .sub { color: var(--good-ink); opacity: .85; }

/* Quiz: one fieldset per question, big tappable options, the explanation under a wrong pick. */
.onb-quiz { display: grid; gap: 14px; }
.onb-q { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.onb-q legend { font-weight: 700; font-size: 15px; padding: 0 6px; }
.onb-q.right { border-color: #cdebcd; }
.onb-q.wrong { border-color: #f1c6c6; }
.onb-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); min-height: 44px; cursor: pointer; font-size: 14.5px; }
.onb-opt input { accent-color: var(--blue); width: 20px; height: 20px; flex: none; margin: 0; }
.onb-opt.picked { background: var(--blue-50); }
.onb-opt.right { background: var(--good-bg); color: var(--good-ink); }
.onb-opt.wrong { background: var(--critical-bg); color: var(--critical-ink); }
.onb-explain { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; color: var(--critical-ink); padding: 2px 4px 0; }
.onb-explain.ok { color: var(--good-ink); }
.onb-explain svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.onb-result { font-weight: 700; font-size: 14px; color: var(--ink-2); }

/* Checklist: a tick, the task, the how-to and a button that does it. */
.onb-tasks { display: grid; gap: 8px; }
.onb-task { border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px 12px; display: grid; gap: 6px; }
.onb-task.done { border-color: #cdebcd; background: #FAFEFA; }
.onb-task label { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 15px; }
.onb-task label input { accent-color: var(--good); width: 22px; height: 22px; flex: none; margin: 0; }
.onb-task.done label .t { text-decoration: line-through; color: var(--ink-3); }
.onb-task-how { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-left: 34px; }

/* Celebrate: the badge. A gentle pop, nothing that blocks. */
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.onb-badge { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 16px 8px 8px; }
.onb-badge-ring { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-ink); box-shadow: inset 0 0 0 4px var(--gold), 0 12px 30px -14px rgba(201, 133, 0, .6); animation: pop .4s var(--ease) both; }
.onb-badge-ring svg { width: 40px; height: 40px; }
.onb-badge.final .onb-badge-ring { width: 120px; height: 120px; background: var(--gold); color: var(--ink); }
.onb-badge-name { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.onb-badge .onb-p { max-width: 420px; }
.onb-badge-art { width: 200px; max-width: 80%; }
.onb-badge.final .onb-badge-art { width: 250px; }

/* Run 3 (2026-10-16): the pictures (onboarding-art.js). viewBox SVGs that fill their column; any motion is a gentle
   CSS animation on a class the art file sets, and prefers-reduced-motion switches all of it off. */
@keyframes onbFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes onbPulse { 0%, 100% { opacity: .18; } 50% { opacity: .45; } }
@keyframes onbRing { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes onbDraw { from { stroke-dasharray: 0 400; } to { stroke-dasharray: 400 0; } }
.onb-art-wrap { width: 100%; max-width: 560px; animation: onbFade .4s var(--ease) both; }
.onb-art-wrap svg { width: 100%; height: auto; display: block; }
.onb-art text { font-family: var(--font-body); }
.onb-scene-art.small { max-width: 420px; }
.onb-art-pulse { animation: onbPulse 2.4s ease-in-out infinite; }
.onb-art-ring { animation: onbRing 1.8s ease-out infinite; }
.onb-art-ring-1 { animation-delay: .3s; }
.onb-art-ring-2 { animation-delay: .6s; }
.onb-art-pop { transform-box: fill-box; transform-origin: center; animation: pop .5s var(--ease) both; }
.onb-art-draw { animation: onbDraw 1.4s .2s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .onb-art-wrap, .onb-art-pulse, .onb-art-ring, .onb-art-pop, .onb-art-draw, .onb-badge-ring, .onb-bubble, .onb-flow-l { animation: none !important; }
  .onb-tile-front, .onb-tile-back { transition: none !important; }
}

/* Cards (run 3): an icon or a small scene at the top, a colour accent on the left edge, swipe or tap to turn. */
.onb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.onb-card-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); flex: none; }
.onb-card-ico svg { width: 24px; height: 24px; }
.onb-card-art { max-width: 170px; animation: none; }
.onb-card.acc-blue { border-left: 6px solid var(--blue); }
.onb-card.acc-gold { border-left: 6px solid var(--gold); }
.onb-card.acc-gold .onb-card-ico { background: var(--gold-100); color: var(--gold-ink); }
.onb-card.acc-good { border-left: 6px solid var(--good); }
.onb-card.acc-good .onb-card-ico { background: var(--good-bg); color: var(--good-ink); }
.onb-card.acc-ink { border-left: 6px solid var(--ink-2); }
.onb-card.acc-ink .onb-card-ico { background: var(--surface-2); color: var(--ink-2); }
.onb-deck-nav { align-items: center; }
.onb-deck-hint { flex: 1; text-align: center; font-size: 12px; color: var(--ink-3); }

/* Stats: two to four big-number tiles (value in ink, label and meaning muted). */
.onb-stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.onb-stat { border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; background: #fff; display: grid; gap: 4px; min-width: 0; align-content: start; }
.onb-stat .v { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.onb-stat .l { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.onb-stat .m { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }

/* Flow: three to five steps side by side on a desktop, stacked on a phone; each one opens when tapped. */
.onb-flow { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.onb-flow-step { border: 1.5px solid var(--line); border-radius: 14px; background: #fff; min-width: 0; display: grid; align-content: start; }
.onb-flow-step.seen { border-color: var(--blue-100); background: linear-gradient(180deg, #FAFCFF, #fff); }
.onb-flow-btn { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'ico n' 'ico t' 'ico tap'; column-gap: 12px; row-gap: 2px; align-items: center; width: 100%; border: 0; background: transparent; padding: 12px 14px; text-align: left; cursor: pointer; min-height: 56px; color: var(--ink); border-radius: 14px; }
.onb-flow-ico { grid-area: ico; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); }
.onb-flow-step.seen .onb-flow-ico { background: var(--blue); color: #fff; }
.onb-flow-ico svg { width: 20px; height: 20px; }
.onb-flow-n { grid-area: n; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.onb-flow-t { grid-area: t; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.2; }
.onb-flow-tap { grid-area: tap; font-size: 12px; color: var(--blue-700); font-weight: 600; }
.onb-flow-l { padding: 0 14px 14px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; animation: onbFade .25s var(--ease) both; }
.onb-flow-l .two { color: var(--ink-2); }

/* Tap-to-reveal tiles: the front (icon, title) turns into the back (the line) on tap; both share one grid cell so the
   tile is as tall as the taller side and nothing is clipped. */
.onb-tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onb-tile { display: grid; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; padding: 0; cursor: pointer; text-align: left; color: var(--ink); min-height: 120px; }
.onb-tile-front, .onb-tile-back { grid-area: 1 / 1; display: grid; gap: 6px; padding: 14px; align-content: start; border-radius: 12px; transition: opacity .25s var(--ease), transform .3s var(--ease); }
.onb-tile-back { opacity: 0; transform: rotateY(90deg); background: var(--blue-700); color: #fff; }
.onb-tile.on .onb-tile-front { opacity: 0; transform: rotateY(-90deg); }
.onb-tile.on .onb-tile-back { opacity: 1; transform: none; }
.onb-tile.on { border-color: var(--blue-700); }
.onb-tile-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-ink); }
.onb-tile-ico svg { width: 20px; height: 20px; }
.onb-tile-t { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.2; }
.onb-tile-tap { font-size: 12px; color: var(--blue-700); font-weight: 600; }
.onb-tile-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.onb-tile-l { font-size: 14px; line-height: 1.45; }

/* Chat: a phone-style conversation; the lead on the left, the agent's pick on the right, three replies to choose from. */
.onb-chat { border: 1.5px solid var(--line); border-radius: 22px; background: #F7F9FD; overflow: hidden; max-width: 480px; }
.onb-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--line-2); }
.onb-chat-head b { font-size: 15px; }
.onb-chat-log { display: grid; gap: 8px; padding: 14px; }
.onb-bubble { max-width: 86%; padding: 10px 14px; border-radius: 18px; border-bottom-left-radius: 6px; font-size: 14.5px; line-height: 1.45; background: #fff; border: 1px solid var(--line); justify-self: start; color: var(--ink); animation: onbFade .25s var(--ease) both; }
.onb-bubble.me { justify-self: end; background: var(--blue); color: #fff; border: 0; border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.onb-bubble.me.wrong { background: #fff; color: var(--ink-3); border: 1.5px dashed var(--line); }
.onb-bubble.happy { background: var(--good-bg); border-color: #cdebcd; }
.onb-chat-why { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--critical-ink); justify-self: end; max-width: 86%; padding: 0 4px; }
.onb-chat-why svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.onb-chat-choices { display: grid; gap: 8px; padding: 12px 14px 14px; background: #fff; border-top: 1px solid var(--line-2); }
.onb-chat-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.onb-choice { width: 100%; text-align: left; border: 1.5px solid var(--blue-100); background: var(--blue-50); color: var(--ink); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; cursor: pointer; min-height: 44px; }
.onb-choice:hover { border-color: var(--blue); }
.onb-choice[disabled] { opacity: .5; cursor: default; text-decoration: line-through; }
.onb-chat-ok { display: flex; gap: 6px; align-items: center; color: var(--good-ink); font-weight: 700; font-size: 14px; }
.onb-chat-ok svg { width: 16px; height: 16px; }

/* The split calculator: preset chips, a slider, four money rows with "to you" in gold. */
.onb-calc { display: grid; gap: 14px; border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; background: #fff; max-width: 520px; }
.onb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.onb-chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; min-height: 44px; color: var(--ink); }
.onb-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.onb-range-l { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.onb-range { width: 100%; accent-color: var(--blue); height: 44px; margin: 0; }
.onb-calc-out { display: grid; gap: 8px; }
.onb-calc-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14.5px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.onb-calc-row .k { color: var(--ink-2); }
.onb-calc-row .v { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.onb-calc-row.big { border: 0; padding: 10px 12px; background: var(--gold-100); border-radius: 12px; }
.onb-calc-row.big .k { color: var(--gold-ink); font-weight: 700; }
.onb-calc-row.big .v { font-size: 26px; color: var(--ink); }

/* The onboarding gate (run 5): a slim banner on every screen, red when due; the lock card that replaces a screen. */
.banner.onb-gate { padding: 7px 12px; margin-bottom: 12px; }
.banner.onb-gate > span { display: inline-flex; align-items: center; gap: 6px; }
.banner.onb-gate svg { width: 14px; height: 14px; flex: none; }
.banner.onb-gate .btn { min-height: 32px; }
.banner.onb-gate.due { background: var(--critical-bg); border-color: #f1c6c6; color: var(--critical-ink); }
.onb-lock { text-align: center; justify-items: center; gap: 12px; padding-top: 28px; }
.onb-lock-art { max-width: 300px; }
.onb-lock-hd { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.onb-lock .onb-p { max-width: 420px; }
.onb-lock .btn { min-height: 48px; min-width: 180px; }

/* "I understand" box (run 4): a 44px checkbox row above Next on the steps that carry ack. */
.onb-ack { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--gold); background: var(--gold-100); border-radius: 14px; padding: 12px 14px; min-height: 44px; cursor: pointer; font-size: 14.5px; line-height: 1.45; color: var(--ink); max-width: 720px; }
.onb-ack input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--blue); }
.onb-ack.on { border-color: #cdebcd; background: var(--good-bg); }

/* Quiz (run 3): the explanation and the "Go back and read" button under a wrong pick. */
.onb-explain-box { display: grid; gap: 8px; padding: 2px 4px 0; justify-items: start; }
.onb-goback { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-100); min-height: 36px; }

@media (max-width: 760px) {
  .onb-flow { grid-template-columns: 1fr; }
  .onb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onb-stats.n3 .onb-stat:last-child { grid-column: 1 / -1; }
  .onb-stat .v { font-size: 26px; }
  .onb-chat, .onb-calc { max-width: none; }
  .onb-calc-row.big .v { font-size: 22px; }
  .onb-hero .hero-top { flex-wrap: wrap; }
  .onb-hero .onb-hero-hd { font-size: 21px; }
  .onb-ring { width: 92px; height: 92px; }
  .onb-ring .val .n { font-size: 22px; }
  .onb-step { padding: 16px 16px 20px; }
  .onb-hd { font-size: 22px; }
  .onb-card { padding: 18px 16px 20px; min-height: 180px; }
  .onb-card-t { font-size: 20px; }
  .onb-nav .btn:last-child { min-width: 0; }
  .onb-task-how { padding-left: 0; }
}

@media (min-width: 761px) {
  .tabs.wrapwide { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
}
@media (max-width: 1080px) {
  .mtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hnums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mtiles { grid-template-columns: 1fr; gap: 12px; }
  .mtile { grid-template-columns: auto 1fr; grid-template-areas: 'v l' 'v s' 'v pill' 'g g' 'x x' 'b b'; column-gap: 14px; align-items: center; padding: 14px 16px 8px; }
  .mtile > .v { grid-area: v; font-size: 30px; min-width: 64px; }
  .mtile > .v.none { font-size: 16px; }
  .mtile > .l { grid-area: l; }
  .mtile > .s { grid-area: s; margin-top: 0; }
  .mtile > .pill { grid-area: pill; }
  .mtile > .g { grid-area: g; }
  .mtile > .xp-toggle { grid-area: x; }
  .mtile > .xp-body { grid-area: b; }
  .hnums .tile .v { font-size: 28px; }
  .hnums.auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-row { grid-template-columns: 26px 32px minmax(0, 1.6fr) minmax(40px, 1fr) 64px; gap: 6px; padding: 8px 6px; }
  .board-row .name .n { font-size: 14.5px; }
  .board-row .val { font-size: 14px; }
  .board-hero .board-title { font-size: 22px; }
  .medal { width: 150px; }
  .module .mod-face .xp-toggle { margin-left: 0; flex: 1 1 100%; justify-content: center; }
  .team-hero .hero-top .seg { flex-basis: 100%; }
}

/* ================= Stage 5: Team listings (listings.js, listings-art.js, Admin > Listings) =================
   Every class here starts with lst- (no other component uses that prefix), so no container can pick up a component's
   look by accident. Cards are the existing .card; chip rows are the existing .tabs / .tab-chip; pills are .pill. */
.lst-hero { background: linear-gradient(135deg, #FFFFFF 0%, #F4F8FF 58%, #FFF8E6 100%); }
.lst-hero-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.lst-big { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; margin: 6px 0 2px; }
.lst-note { display: flex; gap: 6px; align-items: center; }
.lst-note svg { width: 14px; height: 14px; flex: none; }
.lst-fitline { display: inline-flex; align-items: center; gap: 8px; justify-self: start; background: var(--gold-100); color: var(--gold-ink); border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: 14px; }
.lst-fitline svg { width: 16px; height: 16px; color: var(--gold-700); flex: none; }
.lst-regions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lst-region { position: relative; overflow: hidden; display: grid; align-content: start; gap: 2px; text-align: left; border: 1.5px solid var(--line); background: #fff; color: var(--ink); border-radius: 14px; padding: 14px 14px 12px; min-height: 92px; cursor: pointer; font: inherit; transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.lst-region:hover:not([disabled]) { border-color: var(--blue-100); background: var(--blue-50); }
.lst-region:active:not([disabled]) { transform: translateY(1px); }
.lst-region.on, .lst-region.on:hover:not([disabled]) { background: var(--blue); border-color: var(--blue); color: #fff; }
.lst-region.on .lst-region-s { color: rgba(255, 255, 255, .9); }
.lst-region-n { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.02em; min-height: 26px; }
.lst-region-l { font-weight: 700; font-size: 14px; line-height: 1.25; }
.lst-region-s { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.lst-region.coming { border-style: dashed; border-color: var(--gold-700); background: repeating-linear-gradient(135deg, #FFFCF3, #FFFCF3 10px, #FFF6DD 10px, #FFF6DD 20px); }
.lst-region[disabled] { cursor: default; color: var(--ink-2); }
.lst-ribbon { position: absolute; top: 12px; right: -34px; transform: rotate(35deg); background: var(--gold); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 36px; box-shadow: 0 1px 2px rgba(15, 30, 61, .18); }

.lst-filters { display: grid; gap: 6px; padding: 14px 16px; }
.lst-frow { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.lst-frow-l { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lst-frow .tabs { padding-bottom: 2px; }
.lst-frow .tab-chip { padding: 7px 12px; font-size: 13.5px; min-height: 38px; }

.lst-results { display: grid; gap: 16px; min-width: 0; }
.lst-buyer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--gold-100); border: 1.5px solid var(--gold); border-radius: 14px; padding: 10px 14px; color: var(--ink); font-size: 14.5px; }
.lst-buyer > .ico svg { width: 16px; height: 16px; color: var(--gold-700); }
.lst-buyer-t { flex: 1; min-width: 180px; }
.lst-count-line { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.lst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; align-items: start; }
.card.lst-card { padding: 0; overflow: hidden; display: grid; align-content: start; transition: transform .18s var(--ease), box-shadow .18s var(--ease); animation: rise .26s var(--ease) both; }
.card.lst-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15, 30, 61, .05), 0 18px 34px -18px rgba(15, 30, 61, .34); }
.lst-open { display: block; width: 100%; border: 0; background: transparent; padding: 0; margin: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.lst-open:focus-visible { outline: 3px solid rgba(43, 99, 217, .45); outline-offset: -3px; border-radius: var(--radius); }
.lst-media { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--blue-50); overflow: hidden; }
.lst-media > .lst-img, .lst-media > svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.lst-media.small { aspect-ratio: 4 / 3; border-radius: 10px; }
.lst-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.lst-badges .pill { box-shadow: 0 1px 3px rgba(15, 30, 61, .22); }
.lst-badges .pill.grey { background: #fff; }
.lst-photo-note, .lst-photo-count { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgba(15, 30, 61, .74); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.lst-photo-note svg, .lst-photo-count svg { width: 12px; height: 12px; }
.lst-body { display: grid; gap: 4px; padding: 14px 16px 4px; }
.lst-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.lst-was { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--good-ink); letter-spacing: 0; }
.lst-addr { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.lst-city { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); }
.lst-city svg { width: 13px; height: 13px; color: var(--ink-3); }
.lst-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lst-fact { background: var(--surface-2); border-radius: 8px; padding: 3px 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.lst-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px 12px; font-size: 12.5px; color: var(--ink-3); }
.lst-agent { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.lst-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 9.5px; font-weight: 700; flex: none; }
.lst-dot.big { width: 40px; height: 40px; font-size: 13px; }
.lst-fit { margin: 0 12px 12px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: var(--gold-100); color: var(--gold-ink); font: inherit; font-weight: 800; font-size: 13.5px; border-radius: 12px; padding: 10px 12px; min-height: 44px; cursor: pointer; }
.lst-fit:hover { background: #FFE7AE; }
.lst-fit svg, .lst-fitwhy svg { width: 14px; height: 14px; color: var(--gold-700); flex: none; }
.lst-fitwhy { margin: 0 12px 12px; display: flex; gap: 6px; align-items: flex-start; background: var(--gold-100); color: var(--gold-ink); border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.lst-fitwhy .ico { margin-top: 2px; }
.lst-sold-row { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 2px 2px 6px; scrollbar-width: thin; }
.lst-sold-card { flex: 0 0 210px; display: grid; gap: 8px; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 8px; cursor: pointer; scroll-snap-align: start; font: inherit; color: var(--ink); }
.lst-sold-card:hover { border-color: var(--gold); }
.lst-sold-t { display: grid; gap: 2px; font-size: 13.5px; padding: 0 4px 4px; }
.lst-sold-t b { font-family: var(--font-display); font-size: 17px; }

/* The details sheet (a wider .sheet) and its photo carousel. */
.sheet.lst-sheet { width: min(100%, 640px); gap: 12px; }
.lst-carousel { position: relative; border-radius: 14px; overflow: hidden; background: var(--blue-50); flex: none; }
.lst-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lst-track::-webkit-scrollbar { display: none; }
.lst-slide { flex: 0 0 100%; aspect-ratio: 16 / 10; scroll-snap-align: start; background: var(--blue-50); }
.lst-slide > img, .lst-slide > svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.lst-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(15, 30, 61, .25); cursor: pointer; }
.lst-nav.prev { left: 8px; }
.lst-nav.next { right: 8px; }
.lst-nav svg { width: 22px; height: 22px; }
.lst-counter { position: absolute; right: 10px; top: 10px; background: rgba(15, 30, 61, .74); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.lst-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; gap: 6px; justify-content: center; pointer-events: none; }
.lst-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(15, 30, 61, .25); }
.lst-dots i.on { background: #fff; }
.lst-photo-help { display: flex; gap: 6px; align-items: center; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); background: #fff; }
.lst-photo-help svg { width: 14px; height: 14px; flex: none; }
.lst-dprice { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lst-dprice-v { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; margin-right: 4px; }
.lst-daddr { font-family: var(--font-display); font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.lst-dhist { display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-2); }
.lst-dfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.lst-dfact { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.lst-dfact b { font-family: var(--font-display); font-weight: 800; font-size: 17px; overflow-wrap: anywhere; }
.lst-dfact span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.lst-dsec { display: grid; gap: 8px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.lst-dsec h3 { display: flex; gap: 6px; align-items: center; font-size: 16px; }
.lst-dsec h3 svg { width: 16px; height: 16px; color: var(--gold-700); }
.lst-hl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lst-hl li { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; }
.lst-hl .ico { margin-top: 3px; color: var(--good-ink); flex: none; }
.lst-hl svg { width: 14px; height: 14px; }
.lst-desc { font-size: 14.5px; line-height: 1.55; white-space: pre-line; color: var(--ink); }
.lst-box { display: flex; gap: 10px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.lst-box > .ico { color: var(--blue-700); flex: none; margin-top: 2px; }
.lst-box svg { width: 16px; height: 16px; }
.lst-dagent { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.lst-dagent > div { min-width: 150px; }
.lst-match { border: 1.5px solid #F3DCA0; border-radius: 14px; padding: 12px; display: grid; gap: 8px; background: #FFFCF3; }
.lst-match-act .btn { flex: 1 1 auto; justify-content: center; }
.lst-picks { display: grid; gap: 8px; }
.lst-pick { display: grid; gap: 2px; width: 100%; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; min-height: 44px; color: var(--ink); font: inherit; }
.lst-pick:hover { border-color: var(--blue); background: var(--blue-50); }
.lst-pick-n { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-weight: 700; }
.lst-pick-s { font-size: 13px; color: var(--ink-2); line-height: 1.4; }

/* Admin > Listings: the completeness meter, the photo strip of the edit sheet. */
.lst-adm-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 96px; }
.lst-adm-meter i { height: 8px; border-radius: 4px; background: var(--line); }
.lst-adm-meter i.on { background: var(--good); }
.lst-adm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lst-adm-photo { border: 1.5px solid var(--line); border-radius: 12px; padding: 6px; display: grid; gap: 6px; background: #fff; min-width: 0; }
.lst-adm-photo.cover { border-color: var(--gold); }
.lst-adm-photo .row .btn { flex: 1 1 auto; justify-content: center; padding-left: 6px; padding-right: 6px; }
.lst-adm-form { display: grid; gap: 12px; }
.lst-adm-form textarea.input { min-height: 96px; }
.lst-adm-hl { display: grid; gap: 6px; }

/* The drawings (listings-art.js): gentle motion only where the eye rests on one (a hovered card, the details). */
@keyframes lstCloud { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
@keyframes lstSun { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.lst-card:hover .lst-art-cloud, .lst-sheet .lst-art-cloud { animation: lstCloud 9s ease-in-out infinite; }
.lst-card:hover .lst-art-sun, .lst-sheet .lst-art-sun { animation: lstSun 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .lst-art-cloud, .lst-art-sun, .card.lst-card { animation: none !important; }
  .card.lst-card:hover { transform: none; }
}
@media (max-width: 1080px) {
  .lst-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lst-big { font-size: 26px; }
  .lst-hero-top > .btn { flex: 1 1 100%; }
  .lst-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lst-regions > .lst-region:first-child { grid-column: 1 / -1; min-height: 64px; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .lst-regions > .lst-region:first-child .lst-region-n { grid-row: 1 / 3; font-size: 30px; }
  .lst-region { min-height: 84px; padding: 12px; }
  .lst-filters { padding: 12px; }
  .lst-frow { grid-template-columns: 44px minmax(0, 1fr); gap: 6px; }
  .lst-frow-l { font-size: 10.5px; letter-spacing: .04em; }
  .lst-frow .tab-chip { min-height: 44px; }
  .lst-grid { grid-template-columns: 1fr; }
  .sheet.lst-sheet { max-height: 92vh; padding: 16px; }
  .lst-dprice-v { font-size: 26px; }
  .lst-dfact { padding: 8px 10px; }
  .lst-dfact b { font-size: 15px; }
  .lst-dagent > .btn { flex: 1 1 100%; justify-content: center; }
  .lst-match-act .btn { flex: 1 1 40%; }
  .lst-adm-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- Team rules (rules.js, 2026-10-28) ----------------
   The 11 non-negotiable rules: a hero with the count, one card per theme with big numbered rules, the owner's
   consequences in red, the four request forms as tiles, and the signature card. Red is used only for "what happens if
   not" and for "not agreed yet"; everything else stays in the app's blue and gold. */
.rl-hero .rl-big { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; }
.rl-hero .rl-lead { font-size: 15.5px; color: var(--ink); max-width: 62ch; line-height: 1.45; margin: 0; }
.rl-group { padding: 20px; display: grid; gap: 14px; }
.rl-group-hd { display: flex; align-items: center; gap: 10px; }
.rl-group-hd h2 { font-size: 18px; }
.rl-group-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); flex: none; }
.rl-group-ico svg { width: 18px; height: 18px; }
.rl-list { display: grid; gap: 10px; }
.rl-rule { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.rl-rule.warn { background: var(--critical-bg); }
.rl-n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.rl-rule.warn .rl-n { background: var(--critical); }
.rl-body { min-width: 0; display: grid; gap: 6px; flex: 1; }
.rl-text { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.rl-detail { font-size: 14px; color: var(--ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.rl-warn { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; color: var(--critical-ink); line-height: 1.4; }
.rl-warn svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.rl-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.rl-form { display: grid; gap: 3px; padding: 12px; border-radius: 12px; background: #fff; border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); min-width: 0; }
.rl-form:hover, .rl-form:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-50); outline: none; }
.rl-form-t { font-weight: 700; font-size: 14px; }
.rl-form-s { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.rl-form-go { font-size: 12.5px; font-weight: 700; color: var(--blue-700); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.rl-form-go svg { width: 12px; height: 12px; }
.rl-agree { padding: 20px; display: grid; gap: 14px; box-shadow: var(--shadow), inset 0 4px 0 var(--gold); }
.rl-agree h2 { font-size: 18px; }
.rl-agree.done { display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow), inset 0 4px 0 var(--good); }
.rl-agree-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--good-bg); color: var(--good-ink); flex: none; }
.rl-agree-ico svg { width: 26px; height: 26px; }
.rl-tick { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.4; cursor: pointer; }
.rl-tick input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--blue); }
.rl-today { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--critical-bg); border: 1px solid #f1c6c6; box-shadow: none; }
.rl-today b { color: var(--critical-ink); font-size: 15px; }
.rl-today-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--critical); color: #fff; flex: none; }
.rl-today-ico svg { width: 22px; height: 22px; }
.banner.rl-banner { background: var(--critical-bg); border-color: #f1c6c6; color: var(--critical-ink); padding: 7px 12px; margin-bottom: 12px; }
.banner.rl-banner > span { display: inline-flex; align-items: center; gap: 6px; }
.banner.rl-banner svg { width: 14px; height: 14px; flex: none; }
.banner.rl-banner .btn { min-height: 32px; }
.nav button .badge.rl-badge { background: var(--critical); color: #fff; }
@media (max-width: 640px) {
  .rl-hero .rl-big { font-size: 28px; }
  .rl-forms { grid-template-columns: minmax(0, 1fr); }
  .rl-rule { padding: 12px; gap: 12px; }
  .rl-n { width: 34px; height: 34px; font-size: 15px; }
  .rl-today { flex-wrap: wrap; }
  .rl-today > .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------------- The Vault (vault.js, 2026-11-01) ----------------
   A gallery, not a file list: the flyers' own art carries the screen. Cards show the flyer preview, the perk in one
   line and the two actions (Send / Download); internal sheets get an "Agents only" tag and never a Send button. */
.vt-hero .vt-big { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.08; letter-spacing: -0.02em; }
.vt-hero .vt-lead { font-size: 15.5px; color: var(--ink); max-width: 64ch; line-height: 1.45; margin: 0; }
.vt-filters { padding: 14px 16px; display: grid; gap: 10px; }
.vt-uw { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.vt-uw-l { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.tab-chip.sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.vt-count { margin: -4px 4px 0; }
.vt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.vt-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.vt-pic { position: relative; display: block; padding: 0; border: 0; background: var(--ink); cursor: pointer; aspect-ratio: 4 / 5; overflow: hidden; }
.vt-thumb { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .35s var(--ease); }
.vt-pic:hover .vt-thumb, .vt-pic:focus-visible .vt-thumb { transform: scale(1.04); }
.vt-thumb-forms { display: grid; place-items: center; align-content: center; gap: 8px; color: #fff; background: linear-gradient(160deg, var(--blue-700), var(--ink)); font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.vt-thumb-forms svg { width: 34px; height: 34px; }
.vt-new, .vt-int { position: absolute; top: 10px; left: 10px; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.vt-new { background: var(--gold); color: var(--ink); }
.vt-int { background: rgba(15, 30, 61, .82); color: #fff; }
.vt-new + .vt-int { left: auto; right: 10px; }
.vt-body { padding: 14px 14px 16px; display: grid; gap: 6px; flex: 1; align-content: start; }
.vt-title { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--blue-700); }
.vt-card.internal .vt-title { color: var(--ink-3); }
.vt-head { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.25; color: var(--ink); }
.vt-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.vt-actions .btn { flex: 1 1 auto; justify-content: center; }
.vt-big-img { display: block; border-radius: 14px; overflow: hidden; background: var(--ink); max-height: 62vh; }
.vt-big-img img { width: 100%; height: auto; display: block; }
.vt-d-head { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.25; margin: 4px 0 0; }
.vt-tip { display: flex; gap: 8px; align-items: flex-start; background: var(--blue-50); color: var(--blue-700); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.vt-tip.internal { background: var(--warn-bg); color: var(--warn-ink); }
.vt-tip svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.vt-msg-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vt-lang { padding: 0; margin: 0; }
.vt-lang .tab-chip { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.vt-msg { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; color: var(--ink); max-height: 32vh; overflow: auto; }
.vt-forms { display: grid; gap: 8px; }
.vt-form { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; }
.vt-form:hover, .vt-form:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-50); outline: none; }
.vt-form span { font-size: 13px; color: var(--ink-3); }
.vt-form .vt-form-go { color: var(--blue-700); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.vt-form-go svg { width: 12px; height: 12px; }
.vt-pack-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.vt-ptile { position: relative; display: grid; gap: 6px; padding: 6px 6px 10px; border-radius: 14px; border: 2px solid var(--line); background: #fff; cursor: pointer; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.vt-ptile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 9px; display: block; opacity: .55; transition: opacity .15s ease; }
.vt-ptile.on { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-50); }
.vt-ptile.on img { opacity: 1; }
.vt-ptick { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; }
.vt-ptick svg { width: 14px; height: 14px; }
.vt-pack-prev { display: grid; gap: 10px; }
.vt-pack-prev img { width: 100%; max-width: 420px; border-radius: 14px; box-shadow: var(--shadow); }
.vt-today { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--gold-100); border: 1px solid #f3dc9e; box-shadow: none; }
.vt-today b { color: var(--gold-ink); font-size: 15px; }
.vt-today-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--gold); color: var(--ink); flex: none; }
.vt-today-ico svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .vt-hero .vt-big { font-size: 26px; }
  .vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vt-body { padding: 10px 10px 12px; }
  .vt-head { font-size: 14.5px; }
  .vt-actions { flex-direction: column; gap: 6px; }
  .vt-actions .btn { min-height: 38px; }
  .vt-uw { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vt-today { flex-wrap: wrap; }
  .vt-today > .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .vt-hero { padding: 18px; gap: 10px; }
  .vt-hero .vt-big { font-size: 23px; }
  .vt-hero .vt-lead { font-size: 14px; }
  .vt-hero .row .sub { display: none; }
}