/* ============================================================
   OBO SIMULATOR — playable prototype styles.
   Base design system copied verbatim from the approved mockups (obo.css),
   extended with interactive states, modals, screens and animations.

   ============================================================
   DESIGN SYSTEM (Wave C — full design/spacing/mobile pass)
   ============================================================

   FONT: Satoshi (Fontshare). Weights 400/500/700/900.

   COLOR: gold #C0A062 accent · warm cream neutrals · ink rail #1A1A1A. (U2 repalette)
   Semantic pairs (bg-soft + ink) for good / bad / warn / accent.

   SPACING SCALE (--sp-*): 4 / 8 / 12 / 16 / 24 / 32.
   Use these tokens for card paddings, section gaps, and chip internals.
   Card padding = --sp-4 (16) or --sp-5 (24). Section gap = --sp-4 (16).
   Chip/badge internal = --sp-1 vertical (4) + --sp-2/3 horizontal (8-12).

   TYPE SCALE (--fs-*): 12 / 13.5 / 15 / 18 / 21 / 26.
   xs 12 (labels, meta) · sm 13.5 (body, table) · md 15 (card titles, values)
   lg 18 (section heads) · xl 21 (page h1) · xxl 26 (KPI values, hero stats).
   Display sizes (28-34) reserved for full-screen report / start hero only.

   TABULAR NUMS: every numeric display uses `.num`
   (font-variant-numeric: tabular-nums lining-nums) so figures align and
   do not jump when they change.

   ------------------------------------------------------------
   CHIP / BADGE TAXONOMY — ONE system. Pick by ROLE, not by look.
   ------------------------------------------------------------
   1. .badge            — STATUS pill (with leading dot). Tone via
                          .b-good / .b-bad / .b-warn / .b-mut / .b-acc
                          / .b-prem. Use for: severity, active/paused state,
                          tier, lane label, unlock state. Add .no-dot to drop
                          the dot. This is the DEFAULT chip.
   2. .eff-chip         — EFFECT forecast/outcome (event options, reviews):
                          predicted or actual delta to one flow. Tone via
                          .chip-cash / .chip-cond / .chip-pool / .chip-trust
                          / .chip-cpm / .chip-none.
   3. .fx-chip          — ACTIVE-EFFECT tray chip (Desk): a live modifier with
                          a duration count. Tone via .fx-* mirroring eff tones.
   4. .rep-pct-chip /   — PERCENTILE rank chip ("Top 22%"). accent-soft only.
      .rv-pct
   5. .week-chip        — CONTEXT chip (week #, era). Neutral surface; use the
                          .y2 modifier for Year-2+ eras. (Sole context chip;
                          the old .era-chip was folded into this in Wave C.)
   6. .fg-replay-chip   — ACTION chip (Field Guide replay). Bordered pill button.
   7. .ib-chip          — INNER-BOARD stat chip (Stats sheet). Small help chip;
                          a specialized status chip kept for its cursor:help role.

   RULE: a value's meaning picks its chip. Do not restyle a chip inline;
   add a tone modifier or a new modifier class here instead.

   FOCUS: every interactive element shows a visible focus ring
   (:focus-visible → 2px accent outline / accent-soft glow). See
   "Accessibility" block near the end.

   MOTION: all transitions/animations are wrapped by
   @media (prefers-reduced-motion: reduce) and disabled for those users.

   RESPONSIVE: >=1200 full rail · 768-1200 icon rail + narrower content ·
   <768 true mobile (bottom tab bar, sticky HUD strip, card lists,
   full-screen modals, >=44px tap targets, funnel step wizard).
   ============================================================ */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');

:root {
  /* U2 (2026-08-01): repalette to the OnlineBusinessScalingAgents.com brand --
     warm cream surfaces, ink #1A1A1A, gold #C0A062 accent. Semantic good/bad/warn
     kept (green/red/amber) so the game still reads at a glance. Gold is dark enough
     that button/pip text must be ink, never white (contrast). */
  --bg: #FAF7F0;
  --surface: #FFFFFF;
  --surface-alt: #FBF9F3;
  --border: #E8E1D2;
  --border-soft: #F0EBDF;
  --ink: #1A1A1A;
  --muted: #706B63; /* was #77726A (4.46:1). Retuned against tinted card/chip surfaces, not just cream. */
  --faint: #ABA596;
  --accent: #C0A062;
  --accent-ink: #6B5626;
  /* Contrast pass (2026-08-01 audit): text-only variants. The brand tokens above
     stay exactly as they are for fills, borders, glyphs and the logo; these are
     used ONLY where the token was being set as `color:` on body-size text, which
     was failing WCAG AA against the cream/white surfaces (gold read 2.32:1,
     --faint 2.29:1, --warn 3.05:1, --good 4.09:1). Same hues, darkened until they
     clear 4.5:1 on both #FAF7F0 and #FFFFFF. */
  --faint-ink: #757167;
  --good-ink: #1C7D44;
  --bad-ink: #A62C2C;
  --warn-ink: #9A6116;
  --accent-soft: #F5EFE1;
  --on-accent: #1A1A1A;
  --good: #1F8A4C;
  --good-soft: #E8F4EC;
  --bad: #C43D3D;
  --bad-soft: #F9ECEC;
  --warn: #C77E1D;
  --warn-soft: #FAF1E2;
  --rail: #1A1A1A;

  /* Spacing scale — 4 / 8 / 12 / 16 / 24 / 32 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Type scale — 12 / 13.5 / 15 / 18 / 21 / 26 */
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 21px;
  --fs-xxl: 26px;

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* Mobile HUD strip height (used to offset content + tab bar) */
  --mhud-h: 52px;
  --mtab-h: 60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, /* Controls never inherit font-family by default. Without this reset, every
   button/input that forgets to set font-family renders in Arial (caught by
   the 2026-08-02 UI contract sweep on hud-bell, notif-x, tr-go, m1-nba...). */
button, input, select, textarea { font-family: inherit; color: inherit; }

/* Scroll regression fix (2026-08-04, reported: 'can't scroll in Chrome mid-game').
   The 2026-08-02 UI contract sweep grafted the html selector onto the font-family
   reset and silently DROPPED html's sizing rule. Without html{height:100%}, html
   grows with content, body's 100% grows with it, and .content never overflows its
   flex box -- so the game's internal scroller has nothing to scroll while body
   overflow:hidden blocks the window from scrolling. Any game page taller than the
   viewport was simply clipped, in every desktop browser, since Aug 2.
   Live mode (html:has(body.live-active)) and <768 mobile override this on purpose. */
html { width: 100%; height: 100%; overflow: hidden; }
body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: 'Inter', 'Satoshi', -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
/* Scott (2026-08-02): mobile screens read a touch small. Base type steps up
   to 15px under 640px, which cascades through every em/inherit-sized element.
   Fixed-px UI text gets targeted bumps below where it matters most. */
@media (max-width: 640px) {
  /* Scott (2026-08-03): still too small. Base to 16px, metas up ~1px, more air. */
  body { font-size: 16px; }
  .lede { font-size: 16px; }
  .btn { padding: 12px 18px; font-size: 14.5px; }
  .btn.small { padding: 9px 13px; font-size: 13px; }
  .stat .val { font-size: 18px; }
  .md-body, .hint { font-size: 14.5px; line-height: 1.55; }
  .sheet h1 { font-size: 24px; }
  input, select, textarea { font-size: 16px; } /* also stops iOS zoom-on-focus */
  .card { padding: 15px 14px; }
  .card-head { font-size: 14.5px; }
  .kpi .lbl { font-size: 12px; }
  .act-tile .d, .sc-blurb, .msheet-app-sub { font-size: 13px; line-height: 1.5; }
  .sc-meta, .delta, .advisor-note .who { font-size: 12.5px; }
  /* Feedback lives in the More tab on phones; the floating pill sat on top of
     real buttons (Scott screenshots 2026-08-03). */
  .fb-fab { display: none; }
  /* Recent sends: five columns cannot fit 390px, the To column was overlapping
     the email title. Stack each send as a block. */
  .sends-tbl, .sends-tbl tbody { display: block; }
  .sends-tbl tr { display: grid; grid-template-columns: 1fr auto auto auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .sends-tbl tr:first-child { display: none; }
  .sends-tbl td { display: block; border: none; padding: 0; }
  .sends-tbl td:first-child { grid-column: 1 / -1; }
  .sends-tbl td:nth-child(2) { font-size: 12px; color: var(--muted); align-self: center; }
}
#app { display: flex; width: 100%; height: 100%; }
.num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; }

/* ============================================================
   WAVE C — TABULAR NUMS SWEEP
   Every numeric display gets aligned figures so values don't jump
   as they change. Applied structurally at the value containers so
   new call sites inherit it without needing a .num class each time.
   (Canvas share-card text draws its own font and is excluded.) */
.hud .stat .val, .hud .biz, .hud .cash-val, .hud .runway-val,
.kpi .val, .kpi .delta, .mover .val, .mover .d,
.summary-stats .s .v, .runway-row .big,
table td, table th,
.rpc-rank, .rep-val, .rep-num, .health-row .num-val,
.stat .val, .era-card .mod .n, .fat-lbl,
.fa-preview .fp-n, .fw-rev-row b, .fw-step-n,
.plan-item .cost, .act-tile .cost, .tc-cost, .tk-cost,
.ib-val, .oc-stat .n, .tier-chip .v {
  font-variant-numeric: tabular-nums lining-nums;
}
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }

/* ---------- Left rail ---------- */
/* ---------- Left rail (UX overhaul §4: labeled, grouped, ~200px; collapses to icons <1200px) ---------- */
.rail {
  width: 208px; height: 100%; background: var(--rail);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 14px 12px; gap: 2px; flex-shrink: 0; overflow-y: auto;
}
.rail .logo {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, #C0A062, #D8C08A);
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; letter-spacing: 0.02em; flex-shrink: 0;
}
.rail-group {
  font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.34); padding: 12px 10px 5px;
}
.rail-group:first-of-type { padding-top: 2px; }
.rail-group-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 8px 8px; }
.app {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 7px 10px; border-radius: 10px;
  color: rgba(255,255,255,0.7); font-weight: 600; font-size: 13.5px;
  position: relative; transition: background .12s; cursor: pointer; text-align: left;
}
.app:hover { background: rgba(255,255,255,0.07); }
.app.active { background: rgba(255,255,255,0.14); color: #fff; }
.app.locked { opacity: 0.42; cursor: help; }
.app.locked:hover { opacity: 0.6; background: rgba(255,255,255,0.05); }
.app .app-labels { min-width: 0; line-height: 1.15; }
.app .app-name { font-weight: 700; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app.locked .app-name { color: rgba(255,255,255,0.8); }
.app .app-sub { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .dot {
  position: absolute; top: 8px; left: 30px; width: 8px; height: 8px;
  border-radius: 50%; background: #E5704C; border: 2px solid var(--rail);
}
.app .glyph {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.app.locked .glyph { filter: grayscale(0.7); }
/* Collapsed rail (icon-only) below 1200px */
.rail.collapsed { width: 68px; align-items: center; padding: 14px 0; }
.rail.collapsed .app { width: 44px; height: 44px; justify-content: center; padding: 0; gap: 0; }
.rail.collapsed .app-labels { display: none; }
.rail.collapsed .app .dot { top: 6px; left: auto; right: 6px; }
.rail.collapsed .rail-group-sep { width: 40px; margin: 6px auto; }
/* Rail icon tiles (2026-08-01 redesign, generated with GPT Image 2): ink tiles
   with gold line glyphs replace the old multi-color letter tiles, matching the
   cream/ink/gold identity. Images live in icons/, shipped at 96px for retina. */
.g-desk, .g-reach, .g-postbox, .g-huddle, .g-ledger, .g-signal, .g-pipeline,
.g-store, .g-team, .g-funnels, .g-stack, .g-reports, .g-recharge {
  background-color: #1A1A1A;
  background-size: cover;
  background-position: center;
}
.g-desk { background-image: url('icons/desk.png'); }
.g-reach { background-image: url('icons/reach.png'); }
.g-postbox { background-image: url('icons/postbox.png'); }
.g-huddle { background-image: url('icons/huddle.png'); }
.g-ledger { background-image: url('icons/ledger.png'); }
.g-signal { background-image: url('icons/signal.png'); }
.g-pipeline { background-image: url('icons/pipeline.png'); }
.g-store { background-image: url('icons/store.png'); }
.g-team { background-image: url('icons/team.png'); }
.g-funnels { background-image: url('icons/funnels.png'); }
.g-stack { background-image: url('icons/stack.png'); }
.g-reports { background-image: url('icons/ledger.png'); }
.g-recharge { background-image: url('icons/recharge.png'); }
/* Locked tiles keep the lock glyph legible over the artwork. */
.app.locked .glyph { position: relative; }
.app.locked .glyph svg { position: relative; z-index: 1; }
.app.locked .glyph::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(26,26,26,0.55);
}

/* ---------- Main column ---------- */
.main { flex: 1; height: 100%; display: flex; flex-direction: column; min-width: 0; }

/* ---------- Top bar (HUD) ---------- */
.hud {
  height: 60px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; gap: 28px; flex-shrink: 0;
}
.hud .biz { font-weight: 700; font-size: 15px; margin-right: 4px; }
.hud .biz span { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 500; }
.stat .val { font-size: 15px; font-weight: 700; }
.stat .val small { font-size: 11px; font-weight: 500; color: var(--muted); }
.hud .spacer { flex: 1; }
.focus-pips { display: flex; gap: 3px; align-items: center; }
.pip { width: 9px; height: 16px; border-radius: 3px; background: var(--accent); transition: background .2s; }
.pip.used { background: var(--border); }
.cond-track { width: 90px; height: 6px; border-radius: 3px; background: var(--border-soft); overflow: hidden; }
.cond-fill { height: 100%; border-radius: 3px; background: var(--warn); transition: width .4s; }
.endweek {
  background: var(--btn-ink, #26221a); color: #F6F1E7; font-weight: 700; font-size: 14px;
  padding: 10px 22px; border-radius: 10px; font-family: inherit; border: none;
  transition: transform .08s, background .12s;
}
.endweek:hover:not(:disabled) { background: #3a3324; }
.endweek:active:not(:disabled) { transform: scale(0.97); }
.week-chip {
  background: var(--surface-alt); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.save-chip { font-size: 11px; color: var(--faint-ink); font-weight: 600; margin-left: 2px; }
button.save-chip { appearance: none; min-height: 44px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface, #fff); color: var(--ink); font: 600 12px/1.35 Inter, sans-serif; cursor: pointer; }
button.save-chip:hover { border-color: var(--accent); }
button.save-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.save-chip-warn { color: var(--warn-ink, #8a6d1f); border-color: color-mix(in srgb, var(--warn-ink, #8a6d1f) 35%, transparent); }

/* ---------- Content ---------- */
.content { flex: 1; padding: 22px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.page-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.page-head .ph-text { display: flex; align-items: baseline; gap: 12px; margin-right: auto; flex-wrap: wrap; }
.page-head h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.page-head .sub { color: var(--muted); font-size: 13px; }
.page-head .right { display: flex; gap: 8px; align-items: center; }
.page-head .ph-help { align-self: center; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.card .card-head {
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; font-weight: 700;
}
.card .card-head .right { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 500; }

/* KPI */
.kpi { padding: var(--sp-4) var(--sp-5) var(--sp-4); }
.kpi .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.kpi .val { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.kpi .delta { font-size: 12px; font-weight: 700; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.delta.up { color: var(--good-ink); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--muted); }
.delta .ctx { color: var(--muted); font-weight: 500; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
}
td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
th.r, td.r { text-align: right; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.no-dot::before { display: none; }
.b-good { background: var(--good-soft); color: var(--good-ink); }
.b-bad { background: var(--bad-soft); color: var(--bad-ink); }
.b-warn { background: var(--warn-soft); color: var(--warn-ink); }
.b-mut { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border-soft); }
.b-acc { background: var(--accent-soft); color: var(--accent-ink); }

.btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-family: inherit; font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 9px;
  transition: background .12s, border-color .12s, transform .08s;
}
.btn:hover:not(:disabled) { background: var(--surface-alt); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn.primary { background: var(--btn-ink, #26221a); border-color: var(--btn-ink, #26221a); color: #F6F1E7; }
.btn.primary:hover:not(:disabled) { background: #3a3324; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover:not(:disabled) { background: #8E332C; border-color: #8E332C; color: #fff; }
.btn.small { padding: 5px 10px; font-size: 11.5px; }

.meter { height: 5px; border-radius: 3px; background: var(--border-soft); overflow: hidden; width: 100%; }
.meter > div { height: 100%; border-radius: 3px; transition: width .4s; }

.avatar {
  width: 32px; height: 32px; border-radius: 9px; color: #fff; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---------- Desk-specific ---------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Early weeks show one, two or three KPI cards. Match the columns to the count
   so a half-full row does not leave a hole where the other cards will go. */
.grid.grid-1 { grid-template-columns: minmax(0, 280px); }
.grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
/* align-items:start (2026-08-02): cards size to their content instead of
   stretching to the tallest column and leaving half-empty boxes. */
/* 2026-08-04 layout truth fix: these grids previously used flex:1 (basis 0) +
   min-height:0, which CAPPED them at the visible .content height. Any app taller
   than the window overflowed its own grid box invisibly: rows painted over each
   other (Email report), and the action bar's 'end of content' landed mid-page so
   it scrolled instead of sticking (bottom-bar report). flex: 1 0 auto keeps short
   pages filling the viewport but lets tall pages actually BE tall. */
.cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; flex: 1 0 auto; min-height: 0; align-items: start; }
/* Opening weeks: only two panels are on the Desk, so let them be their own
   height rather than stretching to fill a screen that has nothing else in it. */
.cols.cols-sparse { flex: 0 0 auto; align-items: start; }
.cols.cols-sparse > * { min-height: 0; }
.notif { display: flex; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border-soft); align-items: flex-start; }
.notif:last-child { border-bottom: none; }
.notif .ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0; }
.notif b { font-weight: 700; }
.notif .t { font-size: 13.5px; line-height: 1.45; }
.notif .when { font-size: 11px; color: var(--faint-ink); margin-top: 3px; }
.runway-row { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 6px; }
.runway-row .big { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.chart-wrap { padding: 10px 18px 16px; }
.advisor-note { padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; }
.advisor-note .ava { width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; }
.advisor-note .txt { font-size: 13.5px; line-height: 1.5; font-style: italic; color: var(--ink); }
.advisor-note .who { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 2px; }

/* Plan list on Desk */
.plan-list { padding: 6px 18px 14px; }
.plan-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.plan-item:last-child { border-bottom: none; }
.plan-item > .cost:last-child { margin-left: auto; }
.plan-item .x { color: var(--faint-ink); font-weight: 700; cursor: pointer; padding: 0 4px; }
.plan-item .x:hover { color: var(--bad); }
.plan-empty { padding: 14px 0; color: var(--faint-ink); font-size: 13px; }
/* Standing orders / this-week split (UX overhaul §1) */
.plan-section-head { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 0 4px; display: flex; align-items: center; gap: 6px; }
.plan-section-head:first-child { padding-top: 2px; }
.plan-item.paused { opacity: .62; }
.plan-item .cost { font-size: 11.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.plan-item.paused .badge.b-acc { filter: grayscale(1); }

/* Desk action tiles */
.deck-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px 16px 16px; }
.act-tile {
  border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; background: var(--surface-alt);
  text-align: left; font-family: inherit; display: flex; flex-direction: column; gap: 3px;
}
.act-tile:hover:not(:disabled) { border-color: var(--accent); }
.act-tile .h { font-weight: 700; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.act-tile .d { font-size: 11px; color: var(--muted); line-height: 1.35; }
.act-tile .cost { font-size: 10.5px; font-weight: 700; color: var(--accent-ink); }
.act-tile.on { border-color: var(--accent); background: var(--accent-soft); }

/* stepper for call blocks */
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 15px; line-height: 1; }
.stepper .v { font-weight: 700; min-width: 16px; text-align: center; }

/* ---------- Reach ---------- */
.layout2 { display: grid; grid-template-columns: 1fr 340px; gap: 16px; flex: 1 0 auto; min-height: 0; }
.temp { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; }
.temp .bar { width: 44px; height: 5px; border-radius: 3px; background: var(--border-soft); overflow: hidden; }
.temp .bar > div { height: 100%; }
.creative { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-alt); }
.creative .name { font-weight: 700; font-size: 13px; }
.creative .meta { font-size: 11.5px; color: var(--muted); }
.fat-lbl { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.crea-wrap { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
tr.paused td { color: var(--faint-ink); }
.dashed-add { border:1.5px dashed var(--border); border-radius:12px; padding:14px; text-align:center; color:var(--muted); font-size:12.5px; font-weight:600; background:transparent; width:100%; font-family:inherit; }
.dashed-add:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }

/* budget presets */
.presets { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.preset { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 11px; font-weight: 700; font-size: 12px; font-family: inherit; }
.preset.on { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ---------- Postbox ---------- */
.seg { display:flex; gap: 14px; }
.seg .card { flex:1; }
.health-row { display:flex; align-items:center; gap:10px; padding: 10px 18px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.health-row:last-child { border-bottom:none; }
.health-row .lbl { width: 130px; color: var(--muted); font-weight: 600; font-size: 12px; }
.health-row .num-val { width: 62px; font-weight: 700; text-align: right; }

/* ---------- Ledger ---------- */
.layout3 { display: grid; grid-template-columns: 1fr 360px; gap: 16px; flex: 1 0 auto; min-height: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pay { display:flex; align-items:center; gap:12px; padding: 11px 18px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.pay:last-child { border-bottom: none; }
.pay .amt { margin-left:auto; font-weight:700; }
.pay .amt.in { color: var(--good-ink); }
.pay .amt.out { color: var(--bad); }
.pay .desc b { font-weight: 700; }
.pay .desc span { display:block; color: var(--faint-ink); font-size: 11px; margin-top:1px; }
.bill { display:flex; align-items:center; padding: 9px 18px; border-bottom:1px solid var(--border-soft); font-size:12.5px; color:var(--muted); }
.bill:last-child { border-bottom:none; }
.bill .amt { margin-left:auto; font-weight:700; color:var(--ink); }

/* ---------- Modals ---------- */
.modal-scrim {
  position: fixed; inset: 0; background: rgba(35,33,28,0.55); z-index: 9400;
  /* 2026-08-12 audit: scrim is the scroller, not the modal itself. */
  display: flex; align-items: flex-start; justify-content: center; animation: fade .15s ease;
  overflow-y: auto; overscroll-behavior: contain; padding: 40px 20px;
}
.modal {
  width: 560px; max-width: 92vw; background: var(--surface);
  border-radius: 18px; padding: 26px 28px; box-shadow: 0 30px 70px rgba(0,0,0,0.35);
  animation: pop .18s ease; height: fit-content;
}
.modal h2 { font-size: var(--fs-lg); margin-bottom: 4px; }
.modal .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.field { margin-bottom: 16px; }
.field > .flabel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; margin-bottom: 7px; }
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choice {
  border: 1px solid var(--border); background: var(--surface-alt); border-radius: 10px;
  padding: 9px 13px; font-weight: 700; font-size: 12.5px; font-family: inherit; flex: 1; min-width: 90px; text-align: left;
}
.choice .cd { font-weight: 500; font-size: 11px; color: var(--muted); margin-top: 2px; }
.choice.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.choice.on .cd { color: var(--accent-ink); }
.preview-box { background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.55; color: var(--ink); margin-bottom: 18px; }
.preview-box .pv-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.modal-foot { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 6px; }
.modal-foot .note { margin-right: auto; color: var(--muted); font-size: 12px; }

/* ---------- Event modal ---------- */
.event-modal { width: 620px; }
.event-modal .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 8px; }
.event-modal .ebody { font-size: 14px; line-height: 1.6; color: var(--ink); margin-bottom: 20px; }
.opt {
  border: 1px solid var(--border); background: var(--surface-alt); border-radius: 12px; padding: 14px 16px;
  text-align: left; font-family: inherit; width: 100%; margin-bottom: 10px; display: block;
}
.opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.opt .oh { font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.opt .od { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ---------- Weekly Review overlay ---------- */
.review-scrim {
  position: fixed; inset: 0; background: #23211C; z-index: 9400;
  /* 2026-08-12 audit: wheel scroll on desktop was failing because the sheet was
     the scroller and its max-height + overflow:auto combo intercepted the wheel
     inconsistently. Now the SCRIM is the scroller: mouse wheel anywhere in the
     modal region scrolls, and the sheet grows to its natural height inside a
     centered flex column. Padding gives it breathing room top and bottom.
     overscroll-behavior:contain still prevents iOS momentum leaks to body. */
  display: flex; align-items: flex-start; justify-content: center; animation: fade .2s ease;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 40px 20px;
}
.sheet {
  width: 980px; max-width: 94vw; background: var(--surface); border-radius: 20px;
  padding: 36px 44px; display:flex; flex-direction:column; gap: 22px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4); animation: pop .25s ease;
  height: fit-content;
}
.sheet .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-ink); font-weight: 700; }
.sheet h1 { font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; }
.sheet .lede { color: var(--muted); font-size: 15px; margin-top: 6px; }
.movers { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mover { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.mover .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; }
.mover .val { font-size: var(--fs-xl); font-weight: 700; margin-top: 4px; }
.mover .d { font-size: 12px; font-weight: 700; margin-top: 2px; }
.why { display: flex; flex-direction: column; gap: 12px; }
.why-item { display:flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--surface-alt); border: 1px solid var(--border-soft); }
.why-item .tag { flex-shrink: 0; margin-top: 1px; }
.why-item .txt { font-size: 14px; line-height: 1.55; }
.why-item .txt b { font-weight: 700; }
.foot { display:flex; align-items:center; gap: 12px; margin-top: 4px; }
.foot .note { color: var(--muted); font-size: 13px; }

/* toasts during resolve */
.toast-layer { position: fixed; top: 76px; right: 24px; z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px;
  animation: slidein .25s ease;
}
.toast.in { border-left: 4px solid var(--good); }
.toast.out { border-left: 4px solid var(--bad); }
.toast.info { border-left: 4px solid var(--accent); }
.toast .amt { font-variant-numeric: tabular-nums; }

/* resolve dim */
.resolving { position: fixed; inset: 0; background: rgba(35,33,28,0.15); z-index: 40; pointer-events: none; }

/* ---------- Full screens (start / end) ---------- */
.screen {
  position: fixed; inset: 0; z-index: 80; background: var(--bg);
  /* P0 fix (2026-08-15): align-items:center + overflow-y:auto pushed overflow ABOVE
     the scroll origin -- on a 360px phone the top 203px of the first screen was
     clipped and unreachable (logo, h1, and Sign in gone; page opened mid-sentence).
     flex-start + margin:auto on the child is overflow-safe centering: centered when
     it fits, scrollable from the top when it does not. */
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
  padding: 16px 0;
}
.screen > * { margin: auto; }
.screen.dark { background: linear-gradient(160deg, #23211C, #1a1814); color: #fff; }
.start-card { width: 1040px; max-width: 92vw; text-align: center; padding: 20px; }
.start-card .mark { margin: 0 auto 24px; }
.start-card h1 { font-size: 34px; letter-spacing: -0.03em; margin-bottom: 8px; }
.start-card .tag { color: var(--muted); font-size: 15px; margin-bottom: 6px; }
.start-card .premise { font-size: var(--fs-xl); font-weight: 700; margin: 24px 0 24px; letter-spacing: -0.01em; }
.start-card input[type=text] {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border);
  font-family: inherit; font-size: 16px; font-weight: 700; background: var(--surface); color: var(--ink); text-align: center; margin-bottom: 16px;
}
.start-card input[type=text]:focus { outline: none; border-color: var(--accent); }
.start-card .go { width: 100%; padding: 15px; font-size: 16px; }
.start-card .resume { margin-top: 14px; background: transparent; border: none; color: var(--muted); font-weight: 700; font-size: 13px; }
.start-card .resume:hover { color: var(--accent-ink); }

.summary-sheet {
  width: 760px; max-width: 94vw; background: var(--surface); color: var(--ink); border-radius: 22px;
  padding: 40px 46px; box-shadow: 0 40px 90px rgba(0,0,0,0.5); height: fit-content;
  /* 2026-08-12 audit: sheet no longer traps scroll -- the parent scrim/screen scrolls. */
}
.summary-sheet .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.summary-sheet h1 { font-size: 32px; letter-spacing: -0.02em; margin: 6px 0 4px; line-height: 1.12; }
.summary-sheet .verdict { font-size: var(--fs-lg); color: var(--muted); margin-bottom: 24px; line-height: 1.5; }
.summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.summary-stats .s { border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.summary-stats .s .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; }
.summary-stats .s .v { font-size: 24px; font-weight: 700; margin-top: 6px; }
.autopsy { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.autopsy .a { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 14px; }
.autopsy .a .n { width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
.autopsy .a .txt { font-size: 13.5px; line-height: 1.5; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes countpulse { 0% { transform: scale(1); } 40% { transform: scale(1.12); color: var(--good-ink); } 100% { transform: scale(1); } }
.pulse { animation: countpulse .5s ease; }

/* scrollbar */
.content::-webkit-scrollbar, .modal::-webkit-scrollbar, .sheet::-webkit-scrollbar { width: 8px; }
.content::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .sheet::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ============================================================
   PHASE 2 — new apps + systems
   ============================================================ */

/* week chip year variant */
.week-chip.y2 { background: #2a2622; color: #F4C77A; border-color: #4a4238; }
/* .era-chip removed in Wave C chip consolidation — zero call sites; era context
   now uses .week-chip (with .y2 modifier) as the single context-chip role. */

/* ---------- Storefront ---------- */
.offer-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.offer-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
.offer-card .oc-head { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; }
.offer-card .oc-tier { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
.offer-card.tier-low .oc-tier { color: #687C4D; }
.offer-card.tier-core .oc-tier { color: var(--accent-ink); }
.offer-card.tier-premium .oc-tier { color: #96426F; }
.offer-card .oc-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.offer-card .oc-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.offer-card .oc-price { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.offer-card .oc-price small { font-size: 13px; font-weight: 600; color: var(--muted); }
.offer-card .oc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.offer-card .oc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.offer-card .oc-stat { text-align: center; }
.offer-card .oc-stat .n { font-size: var(--fs-lg); font-weight: 800; }
.offer-card .oc-stat .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin-top: 2px; }
.offer-card .oc-foot { padding: 12px 16px; border-top: 1px solid var(--border-soft); }
.offer-empty { border: 1.5px dashed var(--border); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px 16px; text-align: center; background: var(--surface-alt); min-height: 220px; }
.offer-empty .oe-tier { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: var(--muted); }
.offer-empty .oe-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 220px; }

/* funnel strip */
.funnel { display: flex; align-items: stretch; gap: 0; }
.funnel .stage { flex: 1; padding: 14px 16px; background: var(--surface-alt); border: 1px solid var(--border-soft); position: relative; }
.funnel .stage:first-child { border-radius: 12px 0 0 12px; }
.funnel .stage:last-child { border-radius: 0 12px 12px 0; }
.funnel .stage .sname { font-weight: 800; font-size: 13px; }
.funnel .stage .ssub { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* 2026-08-02: label and value ran together ("ascendtrust"). Stack and centre. */
.funnel .arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 8px; color: var(--muted); font-weight: 800; font-size: 11px; line-height: 1.25; text-align: center; }
.funnel .arrow small { display: block; font-size: 9.5px; font-weight: 600; opacity: 0.85; }

/* ---------- Pipeline ---------- */
.pipe-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; }
.pipe-col { background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 12px; min-height: 140px; display: flex; flex-direction: column; }
.pipe-col .pc-head { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.pipe-col .pc-head .cnt { background: var(--border); color: var(--ink); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.pipe-col .pc-body { padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.deal { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; font-size: 12px; }
.deal.premium { border-color: #E0C3D3; background: #FBF4F8; }
.deal .dt { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.deal .dmeta { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.deal .stale { color: var(--warn-ink); font-weight: 700; font-size: 10px; margin-top: 3px; }
.deal.lost { opacity: 0.75; }
.deal.lost .dt { color: var(--muted); }
.deal .reason { font-size: 10.5px; color: var(--bad); margin-top: 3px; font-style: italic; }
.pipe-empty { color: var(--faint-ink); font-size: 11.5px; padding: 12px 4px; text-align: center; }
.badge.b-prem { background: #F6E9F0; color: #96426F; }

/* ---------- Signal ---------- */
.dm-center { display: flex; flex-direction: column; gap: 0; }
.dm-approach { display: flex; gap: 10px; padding: 14px 16px; }
.dm-approach .app-opt { flex: 1; border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; text-align: left; font-family: inherit; background: var(--surface-alt); }
.dm-approach .app-opt.on { border-color: #D1721F; background: #FBF1E6; }
.dm-approach .app-opt .h { font-weight: 800; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.dm-approach .app-opt .d { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 4px; }
.dm-feed { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 16px; }
.dm-convo { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface-alt); }
.dm-convo .bubble { font-size: 12.5px; line-height: 1.4; }
.dm-convo .bubble b { font-weight: 700; }
.dm-convo .outcome { font-size: 11px; font-weight: 700; margin-top: 4px; }
.dm-convo .outcome.good { color: var(--good-ink); }
.dm-convo .outcome.bad { color: var(--bad); }
.dm-convo .outcome.flat { color: var(--muted); }
.trust-panel .tp-row { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.trust-panel .tp-row:last-child { border-bottom: none; }
.trust-panel .tp-row .lbl { width: 120px; color: var(--muted); font-weight: 600; font-size: 12px; }

/* ---------- Era intro / season / report cards ---------- */
.era-scrim { position: fixed; inset: 0; background: linear-gradient(160deg,#23211C,#171410); z-index: 65; display: flex; align-items: flex-start; justify-content: center; animation: fade .3s ease; overflow-y: auto; overscroll-behavior: contain; padding: 40px 20px; }
.era-card { width: 640px; max-width: 92vw; background: var(--surface); border-radius: 20px; padding: 40px 46px; box-shadow: 0 40px 90px rgba(0,0,0,0.5); text-align: center; animation: pop .3s ease; height: fit-content; }
.era-card .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: #C77E1D; font-weight: 800; }
.era-card h1 { font-size: 32px; letter-spacing: -0.02em; margin: 10px 0 6px; }
.era-card .thesis { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.era-card .body { font-size: var(--fs-md); color: var(--muted); line-height: 1.6; margin-bottom: 24px; }
.era-card .mods { display: flex; gap: 10px; justify-content: center; margin-bottom: 26px; flex-wrap: wrap; }
.era-card .mod { border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; }
.era-card .mod .n { font-size: 18px; font-weight: 800; }
.era-card .mod .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin-top: 2px; }

.season-toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 66; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); width: 460px; max-width: 90vw; animation: pop .25s ease; }
.season-toast .st-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.season-toast .st-icon { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; }
.season-toast .st-body { font-size: 13px; color: var(--muted); line-height: 1.5; }
.season-toast .st-close { margin-top: 12px; }

/* Annual report — reuses summary-sheet, adds tier chart */
.tier-bars { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.tier-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.tier-bar-row .tlbl { width: 78px; font-weight: 700; }
.tier-bar-row .track { flex: 1; height: 22px; border-radius: 6px; background: var(--surface-alt); overflow: hidden; border: 1px solid var(--border-soft); }
.tier-bar-row .track > div { height: 100%; }
.tier-bar-row .tval { width: 90px; text-align: right; font-weight: 700; }
.tier-low-fill { background: #6E8352; }
.tier-core-fill { background: var(--accent); }
.tier-premium-fill { background: #96426F; }
.report-section { margin-bottom: 22px; }
.report-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 800; margin-bottom: 10px; }

/* tier revenue chips (ledger) */
.tier-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tier-chip { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; }
.tier-chip .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
.tier-chip.low .l { color: #687C4D; }
.tier-chip.core .l { color: var(--accent-ink); }
.tier-chip.premium .l { color: #96426F; }
.tier-chip .v { font-size: var(--fs-xl); font-weight: 800; margin-top: 4px; letter-spacing: -0.01em; }

/* slider for offer price */
input[type=range].oslider { width: 100%; accent-color: var(--accent); margin: 6px 0; }

/* small hint text */
.hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.hint.warn { color: var(--warn-ink); font-weight: 600; }

/* toggle group */
.toggle-row { display: flex; gap: 8px; }
.toggle-row .tg { flex: 1; border: 1px solid var(--border); background: var(--surface-alt); border-radius: 9px; padding: 8px 10px; font-weight: 700; font-size: 12px; font-family: inherit; text-align: left; }
.toggle-row .tg.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.toggle-row .tg .sub { display: block; font-weight: 500; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.toggle-row .tg.on .sub { color: var(--accent-ink); }

/* queued emails list in postbox */
.email-queue { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px; }
.email-queue .eq { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-alt); font-size: 12.5px; }
.email-queue .eq .x { margin-left: auto; color: var(--faint-ink); font-weight: 700; cursor: pointer; padding: 0 4px; }
.email-queue .eq .x:hover { color: var(--bad); }

/* ============================================================
   TEACHING LAYER — tooltips, help affordances, coach marks,
   how-it-works panels, contextual tips
   ============================================================ */

/* --- info affordance (the small ? / dotted underline) --- */
.tip-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--faint); color: var(--muted);
  font-size: 10px; font-weight: 700; line-height: 1; cursor: help;
  margin-left: 5px; vertical-align: middle; user-select: none;
  background: var(--surface); flex: none;
}
.tip-mark:hover, .tip-mark:focus { border-color: var(--accent); color: var(--accent-ink); outline: none; }
.tip-underline { border-bottom: 1px dotted var(--faint); cursor: help; }

/* header help button (per-app "How this works") */
.help-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-family: inherit; font-weight: 600; font-size: 12px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
}
.help-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.help-btn .qc { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid currentColor; font-size: 10px; font-weight: 700; }

/* --- floating tooltip bubble --- */
.tip-bubble {
  position: fixed; z-index: 9000; max-width: 300px;
  background: var(--rail); color: #F4F3EF;
  font-size: 12.5px; line-height: 1.5; font-weight: 500;
  padding: 9px 12px; border-radius: 9px;
  box-shadow: 0 10px 30px rgba(20,18,14,.28);
  pointer-events: none; opacity: 0; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
  white-space: pre-line;
}
/* dual-teaching tips (§13): the "In real life:" line reads a touch dimmer than the mechanic line. */
.tip-bubble { --dual-gap: 3px; }
.tip-bubble.show { opacity: 1; transform: translateY(0); }
.tip-bubble::after {
  content: ''; position: absolute; width: 8px; height: 8px;
  background: var(--rail); transform: rotate(45deg);
}
.tip-bubble[data-pos="top"]::after { bottom: -4px; left: var(--arrow, 50%); margin-left: -4px; }
.tip-bubble[data-pos="bottom"]::after { top: -4px; left: var(--arrow, 50%); margin-left: -4px; }

/* disabled choice buttons (segment guards etc.) */
.choice.disabled, .choice:disabled {
  opacity: .5; cursor: not-allowed; position: relative;
}
.btn.small:disabled { opacity: .5; cursor: not-allowed; }

/* --- coach marks (first-session tutorial) --- */
.coach-scrim {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(20,18,14,.55);
  animation: coachFade .2s ease;
}
@keyframes coachFade { from { opacity: 0; } to { opacity: 1; } }
.coach-hole {
  position: fixed; z-index: 8001; border-radius: 12px;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(20,18,14,.55);
  pointer-events: none; transition: all .25s ease;
}
.coach-card {
  position: fixed; z-index: 8002; width: 320px; max-width: calc(100vw - 32px);
  background: var(--surface); border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 18px 50px rgba(20,18,14,.3); transition: all .25s ease;
}
.coach-card .step { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; margin-bottom: 7px; }
.coach-card h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 8px; line-height: 1.25; }
.coach-card p { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin-bottom: 15px; }
.coach-card .foot { display: flex; align-items: center; gap: 10px; }
.coach-card .foot .dots { display: flex; gap: 5px; margin-right: auto; }
.coach-card .foot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.coach-card .foot .dot.on { background: var(--accent); }
.coach-card .skip { background: none; border: none; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.coach-card .skip:hover { color: var(--ink); }
.coach-card .next { background: var(--accent); border: none; color: var(--ink); font-family: inherit; font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 9px; cursor: pointer; }
.coach-card .next:hover { filter: brightness(1.05); }

/* --- how-it-works panel (slide-over) --- */
.hiw-scrim { position: fixed; inset: 0; z-index: 8500; background: rgba(20,18,14,.4); animation: coachFade .18s ease; display: flex; justify-content: flex-end; }
.hiw-panel {
  width: 400px; max-width: 92vw; height: 100%; background: var(--surface);
  box-shadow: -14px 0 40px rgba(20,18,14,.2); padding: 26px 28px; overflow-y: auto;
  animation: hiwIn .24s cubic-bezier(.2,.7,.3,1);
}
@keyframes hiwIn { from { transform: translateX(30px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
.hiw-panel .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); font-weight: 700; margin-bottom: 6px; }
.hiw-panel h2 { font-size: 21px; font-weight: 700; margin-bottom: 14px; }
.hiw-panel p { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin-bottom: 12px; }
.hiw-panel ul { list-style: none; margin: 0 0 14px; padding: 0; }
.hiw-panel li { font-size: 13px; line-height: 1.55; color: var(--ink); padding-left: 18px; position: relative; margin-bottom: 8px; }
.hiw-panel li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hiw-panel .good-line { background: var(--good-soft); color: var(--good-ink); border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 600; line-height: 1.5; margin-top: 4px; }
.hiw-panel .close-x { position: absolute; top: 20px; right: 22px; background: none; border: none; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; }
.hiw-panel .close-x:hover { color: var(--ink); }

/* --- contextual one-time tip (toast) --- */
.ctx-tip {
  /* 2026-08-12 audit: bottom-left was overlapping the first row of cards on Ads/Social/Offers/Funnels/Sales.
     Move to bottom-right ABOVE the mentor fab (bottom:15 right:178) and feedback pill (bottom:14 right:14).
     Tucked into the corner, right of the sidebar rail, below the KPI zone. Auto-dismisses in a few
     seconds via the existing timer so it clears itself between apps. */
  position: fixed; right: 20px; bottom: 68px; z-index: 7500; width: 300px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 14px 16px; box-shadow: 0 14px 40px rgba(20,18,14,.18);
  animation: ctxIn .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes ctxIn { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ctx-tip .ct-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ctx-tip .ct-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.ctx-tip .ct-title { font-size: 13px; font-weight: 700; }
.ctx-tip .ct-x { margin-left: auto; background: none; border: none; color: var(--faint-ink); font-size: 17px; cursor: pointer; line-height: 1; }
.ctx-tip .ct-x:hover { color: var(--ink); }
.ctx-tip p { font-size: 12.5px; line-height: 1.55; color: var(--ink); }

@media (max-width: 640px) {
  .ctx-tip { right: 12px; left: 12px; bottom: 12px; width: auto; }
  /* BM-15: a floating tip stops where the Mentor pill starts (pill band is
     bottom:168px, about 40px tall). Inline tips sit in the flow and are exempt. */
  body:has(#mentor-fab-host .mentor-fab) .ctx-tip:not(.ctx-inline) { bottom: 220px; }
  .coach-card { width: calc(100vw - 24px); }
}

/* start-screen loop copy */
.loop-copy {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--surface-2, #F4F1EA); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 14px; margin-bottom: 18px; text-align: left;
}
.loop-copy b { font-size: 12px; font-weight: 700; color: var(--ink, #23211C); }
.loop-copy span { font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* ============================================================
   PHASE 3 — WAVE 1 COMPONENTS
   Start origins, monthly planning, month review, momentum HUD,
   launch banner + controls, funnels tab, stats flyout, omni.
   ============================================================ */

/* ----- shared eyebrow ----- */
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-ink); font-weight: 700; margin-bottom: 6px; }

/* ----- Start screen: origin cards ----- */
.origin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 18px 0 20px; text-align: left; }
.origin-card { border: 1px solid var(--border, #E6E3DB); background: #FFFFFF; border-radius: 12px; padding: 13px; cursor: pointer; font-family: inherit; color: var(--ink, #1E1C17); transition: border-color .15s, background .15s, transform .1s; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.origin-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.origin-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.origin-card .oc-top { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.origin-card .oc-name { font-weight: 800; font-size: 14px; letter-spacing: -0.01em; }
.origin-card .oc-tag { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: #96631B; font-weight: 700; }
.origin-card .oc-stats { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.origin-card .oc-stat { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; }
.origin-card .oc-stat .k { color: #7A7974; font-weight: 700; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
.origin-card .oc-stat .v { font-weight: 800; color: #1E1C17; line-height: 1.35; }
.origin-card .oc-line { font-size: 11px; line-height: 1.4; color: #55524A; }
.origin-card .oc-twist { font-size: 10.5px; line-height: 1.4; color: #55524A; margin-top: auto; }
.origin-card .oc-twist .tw-label { display: block; text-transform: uppercase; font-size: 8.5px; letter-spacing: 0.08em; color: var(--accent-ink); font-weight: 800; margin-bottom: 1px; }
.origin-card .oc-statnote { font-size: 10px; color: #6E6A60; font-weight: 700; }

/* ----- Monthly planning screen ----- */
.plan-screen { position: fixed; inset: 0; background: var(--bg); z-index: 60; overflow-y: auto; display: flex; justify-content: center; padding: 40px 20px; }
.plan-sheet { width: 900px; max-width: 96vw; }
/* QA fix P2 (2026-08-01): month-boundary screens (Month Review, Plays picker) rendered as bare
   text on the page background with no card frame -- players read it as a broken page. Give the
   sheet the app's card treatment so the takeover looks deliberate. */
.plan-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 32px 32px;
  box-shadow: 0 10px 40px rgba(30, 28, 23, 0.08);
  height: fit-content;
}
.plan-sheet .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-ink); font-weight: 700; margin-bottom: 6px; }
.plan-sheet h1 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 4px; }
.plan-lede { color: var(--muted); font-size: 14px; margin-bottom: 22px; line-height: 1.5; }
.plan-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 8px; }
.play-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.play-card { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 13px; text-align: left; cursor: pointer; font-family: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, transform .1s; display: flex; flex-direction: column; gap: 5px; }
.play-card:hover:not(.locked) { border-color: var(--accent); transform: translateY(-2px); }
.play-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft) inset; background: var(--accent-soft); }
.play-card.locked { opacity: 0.55; cursor: not-allowed; }
.play-card .pc-top { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: 6px; }
.play-card .pc-name { font-weight: 800; font-size: 14px; }
.play-card .pc-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); font-weight: 700; }
.play-card .pc-desc { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.play-card .pc-bonus { font-size: 10.5px; color: var(--good-ink); font-weight: 600; margin-top: auto; }
.play-card .pc-lock { font-size: 10.5px; color: var(--muted); margin-top: auto; }

.launch-select { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
.ls-head { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.launch-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.launch-card { border: 1px solid var(--border); background: var(--surface); border-radius: 11px; padding: 12px; text-align: left; cursor: pointer; font-family: inherit; color: inherit; transition: border-color .15s, transform .1s; display: flex; flex-direction: column; gap: 5px; }
.launch-card:hover:not(.locked) { border-color: var(--accent); transform: translateY(-2px); }
.launch-card.on { border-color: var(--accent); background: var(--accent-soft); }
.launch-card.locked { opacity: 0.55; cursor: not-allowed; }
.launch-card .lc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.launch-card .lc-name { font-weight: 800; font-size: 13px; }
.launch-card .lc-weeks { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.launch-card .lc-desc { font-size: 11px; line-height: 1.4; color: var(--muted); }
.launch-card .lc-lock { font-size: 10px; color: var(--warn-ink); font-weight: 600; }

.momentum-explain { margin-top: 20px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.momentum-explain b { color: var(--ink); }
.plan-foot { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.plan-skip { background: transparent; border: none; color: var(--muted); font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; }
.plan-skip:hover { color: var(--accent-ink); }

/* ----- Month-end review ----- */
.plan-actual { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.pa-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-alt); }
.pa-row .pa-k { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pa-row .pa-v { font-size: 14px; font-weight: 800; }

/* ----- HUD momentum indicator ----- */
.stat-momentum .mom-pips { display: flex; gap: 3px; margin-top: 4px; }
.mom-pips .mpip { width: 14px; height: 6px; border-radius: 3px; background: var(--border); }
.mom-pips .mpip.on { background: var(--accent); }

/* ----- Launch phase banner ----- */
.launch-banner { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin: 0 0 14px; padding: 12px 16px; }
.lb-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.lb-title { font-weight: 800; font-size: 14px; }
.lb-week { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-left: auto; }
.lb-track { display: flex; gap: 6px; margin-bottom: 8px; }
.lb-seg { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lb-dot { width: 100%; height: 6px; border-radius: 3px; background: var(--border); }
.lb-seg.done .lb-dot { background: var(--good); }
.lb-seg.on .lb-dot { background: var(--accent); }
.lb-lbl { font-size: 10px; color: var(--muted); font-weight: 600; text-align: center; }
.lb-seg.on .lb-lbl { color: var(--accent-ink); }
.lb-copy { font-size: 12px; line-height: 1.5; color: var(--muted); }
.lb-state { font-size: 12px; line-height: 1.5; margin-top: 6px; padding: 8px 12px; border-radius: 9px; background: var(--surface-alt); font-weight: 600; }
.lb-state.good { color: var(--good-ink); background: var(--good-soft); }
.lb-state.warn { color: var(--warn-ink); background: var(--warn-soft); }

/* ----- Launch controls on the Desk ----- */
.prep-tile, .deadzone-tile { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; background: var(--surface-alt); margin-top: 10px; }
.prep-steps { display: flex; gap: 8px; margin-top: 8px; }
.prep-dot { flex: 1; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-weight: 700; font-size: 12px; cursor: pointer; color: var(--muted); }
.prep-dot.on { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ----- Storefront tabs + Funnels tab ----- */
.store-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.store-tab { padding: 9px 18px; background: transparent; border: none; border-bottom: 2px solid transparent; font-family: inherit; font-weight: 700; font-size: 13.5px; color: var(--muted); cursor: pointer; margin-bottom: -1px; }
.store-tab.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.store-tab:hover:not(.on) { color: var(--ink); }
.funnels-lede { font-size: 13px; line-height: 1.6; color: var(--muted); margin-bottom: 16px; max-width: 760px; }
.funnels-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.funnel-card { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 15px; display: flex; flex-direction: column; gap: 7px; }
.funnel-card.locked { opacity: 0.62; }
.funnel-card.live { border-color: var(--good); }
.funnel-card .fc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.funnel-card .fc-name { font-weight: 800; font-size: var(--fs-md); }
.funnel-card .fc-desc { font-size: 12px; line-height: 1.45; color: var(--muted); }
.funnel-card .fc-cost { font-size: 11px; color: var(--faint-ink); font-weight: 600; }
.funnel-card .fc-output { font-size: 12px; color: var(--good-ink); font-weight: 600; }
.funnel-card .fc-output .k { text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; margin-right: 6px; color: var(--muted); }
.funnel-card .fc-lock { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.funnel-card .btn { align-self: flex-start; margin-top: 2px; }

/* ----- Omnipresence composer (Reach) ----- */
.omni-lede { font-size: 12px; line-height: 1.5; color: var(--muted); margin-bottom: 8px; }
.omni-req { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); font-weight: 600; margin: 4px 0; }
.omni-req .orq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.omni-req.ok { color: var(--good-ink); }
.omni-req.ok .orq-dot { background: var(--good); }

/* ----- Stats flyout (Desk profile) ----- */
.stats-flyout { max-width: 560px; }
.stat-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.stat-row { border: 1px solid var(--border-soft); border-radius: 12px; padding: 13px 15px; background: var(--surface-alt); }
.stat-row .sr-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.stat-row .sr-name { font-weight: 800; font-size: 14px; }
.stat-row .sr-lvl { font-size: 11.5px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.slv-pips { display: inline-flex; gap: 3px; }
.slv-pips .slv { width: 8px; height: 8px; border-radius: 2px; background: var(--border); }
.slv-pips .slv.on { background: var(--accent); }
.stat-row .sr-effect { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin-bottom: 8px; }
.stat-row .sr-meter { margin-bottom: 6px; }
.stat-row .sr-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; color: var(--faint-ink); }
.stat-row .sr-earn { font-weight: 600; }
.stat-row .sr-xp { font-weight: 700; white-space: nowrap; }
.stat-row .sr-fore { margin-top: 8px; font-size: 11.5px; color: var(--accent-ink); font-weight: 600; font-style: italic; }
.stat-row .sr-eff-now { margin-top: 6px; font-size: 11px; color: var(--good-ink); font-weight: 700; }

/* locked help-btn variant (Stats when gated) */
.help-btn.locked { opacity: 0.6; cursor: not-allowed; }

/* =========================================================================
   WAVE 2 UI — Team & Stack, Huddle, Ledger P&L / Credit & Cash, Signal PR
   ========================================================================= */

/* ---- HUD: tool bloat drag stat ---- */
.stat-drag .val { color: var(--warn-ink); }

/* ---- Ledger: status row + tabs ---- */
.ledger-status { margin: 2px 0 12px; }
.ledger-status .badge { font-size: 11.5px; }

/* ---- Ledger P&L tab ---- */
.pl-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pl-nav .pl-month { font-weight: 800; font-size: 14px; }
.pl-nav .btn.small:disabled { opacity: 0.4; }
.pl-card { margin-bottom: 14px; }
.pl-body { padding: 10px 18px 4px; }
.pl-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; margin: 12px 0 4px; }
.pl-sec:first-child { margin-top: 2px; }
.pl-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.pl-line.indent .pl-k { padding-left: 14px; color: var(--muted); }
.pl-line .pl-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-line .pl-v.muted { color: var(--faint-ink); font-weight: 600; font-size: 12.5px; }
.pl-line.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 9px; font-weight: 800; }
.pl-line.total .pl-k { font-weight: 800; color: var(--ink); }
.pl-line.total .pl-v { font-size: 15px; }
.pl-line.good .pl-v { color: var(--good-ink); }
.pl-line.bad .pl-v { color: var(--bad); }
.pl-callout { margin: 4px 18px 16px; padding: 12px 14px; border-radius: 11px; background: var(--surface-alt); border: 1px solid var(--border-soft); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pl-callout b { color: var(--ink); }
.pl-callout.warn { background: var(--warn-soft); border-color: #EEDDBE; }

/* ---- Ledger Credit & Cash tab ---- */
.credit-card, .advance-card, .bk-note { margin-bottom: 14px; }
.cc-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.cc-stats { display: flex; gap: 10px; }
.cc-stats > div { flex: 1; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 11px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.cc-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.cc-v { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.cc-v.bad { color: var(--bad); }
.cc-v.good { color: var(--good-ink); }
.cc-meter { height: 8px; border-radius: 5px; background: var(--surface-alt); border: 1px solid var(--border-soft); overflow: hidden; }
.cc-meter > div { height: 100%; background: var(--accent); border-radius: 5px; transition: width .3s; }
.cc-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cc-ctl-lbl { font-weight: 700; font-size: 13px; min-width: 46px; }
.cc-control .hint { margin: 0; }

/* forecast */
.fc-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.fc-lede { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.fc-weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fc-week { background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 11px; padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; }
.fc-week.neg { background: var(--bad-soft); border-color: #ECCFCF; }
.fw-k { font-size: 11px; color: var(--muted); font-weight: 600; }
.fw-v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fc-week.neg .fw-v { color: var(--bad); }
.fc-warn { font-size: 12.5px; color: var(--bad); font-weight: 600; line-height: 1.5; }
.bk-note .bk-body { padding: 14px 18px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* ---- Team & Stack app ---- */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }
.team-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.team-card.locked { opacity: 0.62; }
.team-card.live { border-color: #CDE3D5; background: #FCFEFC; }
.tc-top { display: flex; align-items: center; gap: 11px; }
.tc-avatar { width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: var(--ink); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tc-avatar.agent { background: linear-gradient(135deg, #6E4FD8, #96426F); border-radius: 50%; }
.tc-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tc-name { font-weight: 800; font-size: var(--fs-md); }
.tc-id .badge { align-self: flex-start; font-size: 10.5px; }
.tc-tag { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.tc-effect { font-size: 12.5px; line-height: 1.5; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 10px; padding: 9px 11px; }
.tc-cost { font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tc-morale { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.tc-morale-lbl { font-weight: 700; }
.tc-morale-lbl.good { color: var(--good-ink); }
.tc-morale-lbl.warn { color: var(--warn-ink); }
.tc-morale-lbl.bad { color: var(--bad); }
.tc-lock { font-size: 12px; color: var(--muted); line-height: 1.5; }
.team-card .btn { margin-top: 2px; }

/* agent trained/untrained diff */
.agent-diff { display: flex; flex-direction: column; gap: 6px; }
.ad-row { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.45; padding: 7px 10px; border-radius: 9px; background: var(--surface-alt); border: 1px solid var(--border-soft); color: var(--muted); }
.ad-row.on { background: var(--good-soft); border-color: #CDE3D5; color: var(--ink); }
.ad-k { font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; flex-shrink: 0; padding-top: 1px; }
.ad-k.good { color: var(--good-ink); }
.ad-k.warn { color: var(--warn-ink); }

/* ---- Stack (tools) tab ---- */
.stack-summary { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.stack-summary > div { flex: 1; min-width: 130px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 11px; padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.ss-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.ss-v { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.ss-v.bad { color: var(--bad); }
.ss-v.good { color: var(--good-ink); }
.stack-warn { background: var(--warn-soft); border: 1px solid #EEDDBE; border-radius: 11px; padding: 11px 14px; font-size: 12.5px; color: var(--warn-ink); font-weight: 600; line-height: 1.5; margin-bottom: 14px; }
.stack-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.stack-note.good { color: var(--good-ink); font-weight: 600; }
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.tool-card.owned { border-color: #CDD8F2; background: #FCFDFF; }
.tk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tk-name { font-weight: 800; font-size: 13.5px; }
.tk-cap { font-size: 12px; color: var(--muted); line-height: 1.45; }
.tk-cost { font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stack-foot { font-size: 12px; color: var(--faint-ink); line-height: 1.5; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }

/* locked panel (reused across Team tabs) */
.locked-panel { border: 1px dashed var(--border); border-radius: 14px; padding: 30px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; background: var(--surface-alt); }
.lp-lock { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--muted); }
.lp-title { font-weight: 800; font-size: 15px; }
.lp-body { font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 420px; }

/* ---- Huddle (Slack-sim) ---- */
.huddle { display: flex; gap: 0; height: 100%; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); min-height: 480px; }
.huddle-side { width: 218px; flex-shrink: 0; background: var(--surface-alt); border-right: 1px solid var(--border); padding: 14px 10px; overflow-y: auto; }
.hs-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; margin: 14px 8px 6px; }
.hs-section:first-child { margin-top: 2px; }
.hs-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--ink); position: relative; }
.hs-item:hover { background: rgba(0,0,0,0.04); }
.hs-item.on { background: var(--accent); color: var(--ink); font-weight: 600; }
.hs-hash { color: var(--muted); font-weight: 700; }
.hs-item.on .hs-hash { color: rgba(255,255,255,0.75); }
.hs-av { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; background: var(--muted); }
.hs-av.advisor { background: #C0A062; }
.hs-av.dana { background: #96426F; }
.hs-av.human { background: #B06A2E; }
.hs-av.agent { background: linear-gradient(135deg,#6E4FD8,#96426F); border-radius: 50%; }
.hs-dot { position: absolute; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #E5704C; }
.hs-item.on .hs-dot { background: #fff; }
.huddle-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.huddle-head { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid var(--border-soft); font-weight: 800; font-size: 14px; }
.hh-hash { color: var(--muted); }
.hh-av { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; background: var(--muted); }
.hh-av.advisor { background: #C0A062; }
.hh-av.dana { background: #96426F; }
.hh-av.human { background: #B06A2E; }
.hh-av.agent { background: linear-gradient(135deg,#6E4FD8,#96426F); border-radius: 50%; }
.chat-feed { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.chat-empty { color: var(--faint-ink); font-size: 13px; text-align: center; margin: auto; line-height: 1.6; max-width: 340px; }
.chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.cm-av { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; background: var(--muted); }
.cm-av.advisor { background: #C0A062; }
.cm-av.dana { background: #96426F; }
.cm-av.human { background: #B06A2E; }
.cm-av.agent { background: linear-gradient(135deg,#6E4FD8,#96426F); border-radius: 50%; }
.cm-av.you { background: var(--ink); }
.cm-body { min-width: 0; }
.cm-who { font-weight: 800; font-size: 13px; }
.cm-meta { font-size: 11px; color: var(--faint-ink); font-weight: 500; margin-left: 6px; }
.cm-text { font-size: 13px; line-height: 1.55; color: var(--ink); margin-top: 2px; }
.chat-bubble { background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 4px 12px 12px 12px; padding: 9px 12px; }
.thread-actions { border-top: 1px solid var(--border-soft); padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.ta-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.ta-warn { font-size: 12px; color: var(--warn-ink); font-weight: 600; line-height: 1.5; }

/* ---- Signal: content format + PR panel ---- */
.fmt-wrap { display: flex; gap: 10px; margin: 4px 0 6px; flex-wrap: wrap; }
.fmt-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; width: 100%; }
.pr-panel { display: flex; flex-direction: column; gap: 10px; }
.pr-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pr-row.on { border-color: var(--accent); background: var(--accent-soft); }
.pr-row.dim { opacity: 0.55; }
.pr-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-name { font-weight: 800; font-size: 13.5px; }
.pr-desc { font-size: 12px; color: var(--muted); line-height: 1.45; }
.pr-row .btn { flex-shrink: 0; }

/* responsive at 1440 — grids already fit; tighten below 1100 just in case */
@media (max-width: 1100px) {
  .team-grid, .tool-grid { grid-template-columns: 1fr; }
  .fc-weeks { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Events transparency (UX overhaul §3)
   ============================================================ */
/* Effect chips (predicted + actual) */
.opt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.eff-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-alt); color: var(--muted); white-space: nowrap; }
.eff-chip .chip-dur { font-weight: 600; opacity: .7; }
.eff-chip.chip-cash { background: var(--good-soft); color: var(--good-ink); border-color: transparent; }
.eff-chip.chip-cond { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.eff-chip.chip-pool { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.eff-chip.chip-trust { background: #E9F1EE; color: #0D7A64; border-color: transparent; }
.eff-chip.chip-cpm { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.eff-chip.chip-none { background: var(--surface-alt); color: var(--faint-ink); }

/* "Why now" line in the event modal */
.event-why { margin: 12px 0 6px; padding: 10px 12px; background: var(--surface-alt); border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.event-why-label { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin-right: 6px; }

/* Active-effects tray on Desk */
.fx-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 14px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 12px; }
.fx-tray-label { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint-ink); margin-right: 2px; }
.fx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-soft); cursor: help; }
.fx-chip .fx-count { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--surface-alt); color: var(--muted); }
.fx-chip.fx-cpm { border-color: var(--bad); color: var(--bad); }
.fx-chip.fx-condition { border-color: var(--warn); color: var(--warn-ink); }
.fx-chip.fx-trust { border-color: #0D7A64; color: #0D7A64; }
.fx-chip.fx-cash { border-color: var(--good); color: var(--good-ink); }

/* Events timeline card */
.timeline-row { display: flex; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--border-soft); }
.timeline-row:last-child { border-bottom: none; }
.timeline-wk { font-size: 12px; font-weight: 800; min-width: 34px; padding-top: 1px; }
.timeline-body { flex: 1; min-width: 0; }
.timeline-title { font-size: 13px; font-weight: 700; }
.timeline-why { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.timeline-choice { font-size: 12px; color: var(--faint-ink); margin-top: 3px; }

/* Event recap inside weekly review */
.review-event { margin: 4px 0 14px; padding: 14px 16px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 12px; }
.review-event-head { font-size: 13.5px; font-weight: 800; }
.review-event-choice { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.review-event-note { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* ============================================================
   Navigation & discoverability (UX overhaul §4)
   ============================================================ */
/* "Unlocks next" roadmap card on the Desk */
.unlock-row { padding: 8px 0; }
.unlock-row + .unlock-row { border-top: 1px solid var(--border-soft); }
.unlock-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.unlock-name { font-size: 13px; font-weight: 700; }
.unlock-prog { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.meter-fill { background: var(--accent); }
.unlock-row .meter { margin: 6px 0 3px; }
.unlock-note { font-size: 11px; color: var(--faint-ink); }

/* Help hub choice cards */
.help-hub-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.help-hub-card {
  text-align: left; background: var(--surface-alt); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 14px 16px; font-family: inherit; transition: border-color .12s, background .12s;
}
.help-hub-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.help-hub-card .hh-title { font-weight: 800; font-size: 14px; }
.help-hub-card .hh-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
/* Settings live at the bottom of Help: how much the game explains, and whether
   the board arrives in stages or all at once. */
.help-settings { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.help-settings .hs-head {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.hs-row {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-alt); margin-bottom: 8px;
}
.hs-row:hover { border-color: var(--accent); }
.hs-box { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.hs-txt { flex: 1 1 auto; min-width: 0; }
.hs-lbl { font-weight: 800; font-size: 13.5px; }
.hs-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

/* "Your machine" map */
.machine-panel { max-width: 940px; }
.machine-flow {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; margin: 20px 0 4px;
}
.machine-node {
  flex: 1 1 108px; min-width: 108px; text-align: left; font-family: inherit;
  background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 12px 12px 13px; position: relative; transition: border-color .12s, transform .1s, background .12s;
}
.machine-node:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.machine-node.locked { opacity: 0.55; cursor: help; }
.machine-node.locked:hover { transform: none; border-color: var(--warn); background: var(--warn-soft); }
.machine-node .mn-title { font-weight: 800; font-size: 14px; }
.machine-node .mn-sub { font-size: 11px; font-weight: 600; color: var(--accent-ink); margin-top: 1px; }
.machine-node .mn-note { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.machine-node .mn-lock { position: absolute; top: 10px; right: 12px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--warn-ink); }
.machine-arrow { display: flex; align-items: center; color: var(--faint-ink); font-size: 18px; font-weight: 700; flex: 0 0 auto; }
.machine-loop { margin-top: 16px; padding: 11px 14px; background: var(--accent-soft); color: var(--accent-ink); border-radius: 10px; font-size: 12.5px; font-weight: 600; }
@media (max-width: 720px) {
  .machine-arrow { transform: rotate(90deg); width: 100%; justify-content: center; }
  .machine-node { flex-basis: 100%; }
}

/* ============================================================
   WAVE B (Phase 4) — Lane Mix panel (feature 1)
   ============================================================ */
.lane-mix .lane-bar {
  display: flex; height: 18px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border-soft); background: var(--surface-alt); margin-bottom: 14px;
}
.lane-mix .lane-seg { height: 100%; transition: width .3s ease; }
.lane-mix .lane-seg:not(:last-child) { border-right: 1px solid rgba(255,255,255,.35); }
.lane-mix .lane-row { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; }
.lane-mix .lane-row + .lane-row { border-top: 1px solid var(--border-soft); }
.lane-mix .ld-dot { width: 10px; height: 10px; border-radius: 3px; margin-top: 3px; flex: 0 0 auto; }
.lane-mix .ld-body { flex: 1; min-width: 0; }
.lane-mix .ld-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.lane-mix .ld-pct { font-weight: 800; color: var(--muted); font-size: 12px; margin-left: 4px; }
.lane-mix .ld-desc { font-size: 12px; color: var(--muted); margin-top: 1px; line-height: 1.4; }
.lane-mix .lane-warn {
  margin-top: 10px; padding: 9px 11px; background: var(--warn-soft); border-radius: 9px;
  font-size: 12px; color: var(--ink); line-height: 1.45;
}
.lane-mix .lane-warn .badge { margin-right: 6px; }
.lane-mix .lane-arts { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.lane-mix .la-lbl { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--faint-ink); margin-bottom: 8px; }
.lane-mix .la-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; flex-wrap: wrap; }
.lane-mix .la-name { font-size: 12.5px; font-weight: 600; color: var(--ink); flex: 1; min-width: 100px; }
.badge.b-mut { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border); }

/* ============================================================
   WAVE B (Phase 4) — Funnel Builder v2 (feature 2)
   ============================================================ */
.fa-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.fa-tpl {
  text-align: left; font-family: inherit; cursor: pointer; padding: 11px 13px;
  background: var(--surface-alt); border: 1.5px solid var(--border-soft); border-radius: 11px;
  transition: border-color .12s, background .12s, transform .1s;
}
.fa-tpl:hover:not(.locked) { border-color: var(--accent); transform: translateY(-1px); }
.fa-tpl.on { border-color: var(--accent); background: var(--accent-soft); }
.fa-tpl.locked { opacity: .55; cursor: not-allowed; }
.fa-tpl .fat-name { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.fa-tpl .fat-blurb { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.fa-slots { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.fa-arrow { display: flex; align-items: center; color: var(--faint-ink); font-size: 18px; font-weight: 700; }
.fa-slot {
  flex: 1 1 130px; min-width: 130px; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 11px; padding: 11px 12px;
}
.fa-slot-entry { border-top: 3px solid #8A867C; }
.fa-slot-middle { border-top: 3px solid #4A7DA3; }
.fa-slot-conversion { border-top: 3px solid #1F8A4C; }
.fa-slot .fs-kind { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint-ink); }
.fa-slot .fs-name { font-weight: 700; font-size: 13px; color: var(--ink); margin: 3px 0 6px; }
.fa-slot .fs-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fa-slot .fs-ask { font-size: 11px; font-weight: 700; color: var(--muted); }
.fa-preview {
  display: flex; gap: 18px; flex-wrap: wrap; padding: 11px 14px; background: var(--surface-alt);
  border-radius: 10px; margin-bottom: 10px;
}
.fa-preview .fp-item { font-size: 12px; color: var(--muted); font-weight: 600; }
.fa-preview .fp-n { font-size: 15px; font-weight: 800; color: var(--ink); margin-right: 3px; }
.fa-defects { font-size: 12.5px; color: var(--ink); line-height: 1.5; margin-bottom: 14px; }
.fa-defects .badge { margin-right: 6px; }
.fa-sources { margin-top: 4px; }
.fa-lbl { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--faint-ink); margin-bottom: 8px; }
.fa-src-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fa-src {
  font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 8px 11px; background: var(--surface-alt); border: 1.5px solid var(--border-soft);
  border-radius: 9px; transition: border-color .12s, background .12s;
}
.fa-src:hover { border-color: var(--accent); }
.fa-src.on { border-color: var(--accent); background: var(--accent-soft); }
.fa-src .fsrc-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
/* Funnel Doctor */
.fd-tier { font-size: 12.5px; color: var(--ink); line-height: 1.5; margin-bottom: 12px; }
.fd-tier .badge { margin-right: 6px; }
.fd-row { padding: 11px 0; border-top: 1px solid var(--border-soft); }
.fd-row:first-of-type { border-top: none; }
.fd-name { font-weight: 800; font-size: 13.5px; color: var(--ink); margin-bottom: 5px; }
.fd-sym, .fd-clean { font-size: 12.5px; color: var(--ink); line-height: 1.5; }
.fd-fix { font-size: 12.5px; color: var(--ink); line-height: 1.5; margin-top: 6px; background: var(--good-soft); border-radius: 8px; padding: 8px 10px; }
.fd-fix .badge { margin-right: 6px; }
.fd-copy { font-size: 11.5px; color: var(--muted); margin-top: 5px; font-style: italic; }
/* Live funnels list */
.fl-row { padding: 12px 0; border-top: 1px solid var(--border-soft); }
.fl-row:first-of-type { border-top: none; }
.fl-head { display: flex; align-items: center; gap: 9px; }
.fl-name { font-weight: 800; font-size: 14px; color: var(--ink); }
.fl-srctbl { margin: 9px 0; border: 1px solid var(--border-soft); border-radius: 9px; overflow: hidden; }
.fl-th, .fl-tr { display: grid; grid-template-columns: 1.4fr 1fr .9fr; gap: 8px; padding: 7px 11px; font-size: 12px; align-items: center; }
.fl-th { background: var(--surface-alt); font-weight: 800; color: var(--faint-ink); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.fl-tr { border-top: 1px solid var(--border-soft); color: var(--ink); }
.fl-ctl { display: flex; gap: 8px; margin-top: 8px; }
/* W5a (2026-08-01): removed a stray global `.btn.danger { color: var(--bad) }` that lived here.
   It overrode the base rule's white text while inheriting its red background, so every danger
   button in the app rendered as an unreadable red-on-red pill. The base rule at ~line 304 is the
   single source of truth now, and its hover lives next to it. */

/* ============================================================
   WAVE B (Phase 4) — Inner Board (feature 3) + stance meter
   ============================================================ */
.inner-board { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.ib-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ib-title { font-weight: 800; font-size: 15px; color: var(--ink); }
.ib-state { font-size: 11.5px; }
.ib-sub { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 5px 0 14px; }
.ib-row { margin-bottom: 12px; cursor: help; }
.ib-r-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.ib-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.ib-val { font-weight: 800; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ib-meter { height: 8px; border-radius: 6px; background: var(--border-soft); overflow: hidden; }
.ib-meter > div { height: 100%; border-radius: 6px; transition: width .3s; }
.ib-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ib-chip { cursor: help; font-size: 11px; }
/* stance meter (monthly planning) */
.stance-wrap { background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 13px; padding: 15px 18px; margin: 4px 0 22px; }
.stance-banner { background: var(--bad-soft); border: 1px solid var(--bad); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5; color: var(--ink); margin-bottom: 14px; }
.stance-banner .tag { margin-right: 7px; }
.stance-lbl { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--faint-ink); margin-bottom: 12px; }
.stance-track { position: relative; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #C77E1D 0%, #E6E3DB 50%, #1F8A4C 100%); margin: 26px 8px 30px; }
.stance-marker { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transform: translate(-50%, -50%); transition: left .3s; }
.stance-end { position: absolute; top: -20px; font-size: 11px; font-weight: 700; color: var(--muted); }
.stance-end.left { left: -4px; } .stance-end.right { right: -4px; }
.stance-note { font-size: 12.5px; color: var(--ink); line-height: 1.5; cursor: help; }

/* ============================================================
   WAVE B (Phase 4) — Reports v2 (feature 4)
   ============================================================ */
.rep-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--border);
  /* 2026-08-02 sweep: four tabs overflow a 390px viewport by 7px. Scroll, don't clip. */
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rep-tabs::-webkit-scrollbar { display: none; }
.rep-tab { white-space: nowrap; flex: none; }
.rep-tab { font-family: inherit; cursor: pointer; background: none; border: none; padding: 9px 15px; font-size: 13px; font-weight: 700; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.rep-tab:hover:not(.locked) { color: var(--ink); }
.rep-tab.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.rep-tab.locked { opacity: .5; cursor: not-allowed; }
.rep-card { padding: 18px 20px; margin-bottom: 16px; }
.rep-card-title { font-weight: 800; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.rep-card-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.rep-pcts { display: flex; flex-wrap: wrap; gap: 10px; }
.rep-pct-chip { background: var(--accent-soft); border-radius: 11px; padding: 11px 15px; cursor: help; min-width: 100px; }
.rpc-metric { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.rpc-rank { font-size: var(--fs-xl); font-weight: 800; color: var(--accent-ink); margin-top: 4px; }
.spark { margin: 6px 0; }
.spark-empty { font-size: 12.5px; color: var(--muted); padding: 18px 0; }
.spark-legend { display: flex; gap: 18px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.sl-you::before { content: ''; display: inline-block; width: 14px; height: 2.5px; background: var(--accent); margin-right: 6px; vertical-align: middle; }
.sl-band::before { content: ''; display: inline-block; width: 14px; height: 10px; background: var(--accent-soft); margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.rep-pnl { margin-bottom: 12px; }
.rp-line { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-soft); font-size: 13px; }
.rp-line:first-child { border-top: none; }
.rp-line > span:first-child { flex: 0 0 130px; color: var(--muted); }
.rp-line > b { font-size: 15px; color: var(--ink); }
.rp-line .up { color: var(--good-ink); font-size: 12px; } .rp-line .down { color: var(--bad); font-size: 12px; }
.rep-stance { font-size: 12.5px; color: var(--ink); line-height: 1.5; margin: 10px 0; }
.rep-moves-head, .bridge-section-h { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--faint-ink); margin: 16px 0 8px; }
.rep-move, .rv-ins-item { padding: 10px 0; border-top: 1px solid var(--border-soft); }
.rep-move:first-of-type { border-top: none; }
.rm-move, .rv-ins-text { font-size: 13px; color: var(--ink); line-height: 1.5; }
.rm-real, .rv-ins-real { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 4px; font-style: italic; }
.rv-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.rv-pct, .rv-fatigue { cursor: help; }
.rv-insights { margin: 6px 0 4px; }
.rv-ins-head { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--faint-ink); margin-bottom: 6px; }
.bridge-card { border-left: 3px solid var(--accent); }
.bridge-moves { margin-top: 6px; }
.bridge-move { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.bm-n { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--ink); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.bm-txt { font-size: 13px; color: var(--ink); line-height: 1.5; }
/* share card modal */
.share-modal { max-width: 520px; }
.share-canvas-wrap { background: var(--surface-alt); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.share-canvas { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.share-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); margin-bottom: 14px; cursor: pointer; }
.btn.ghost { background: none; border: 1px solid var(--border); color: var(--muted); }
.btn.ghost:hover { color: var(--ink); border-color: var(--accent); }

/* Reports app header */
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.app-title { font-size: var(--fs-xl); font-weight: 800; color: var(--ink); margin: 0; }
.app-desc { font-size: 13px; color: var(--muted); margin-top: 3px; max-width: 560px; line-height: 1.5; }

/* ---- AI Mentor (Huddle DM) ---- */
.hh-av.mentor, .cm-av.mentor, .hs-av.mentor { background: linear-gradient(135deg,#3A4FD8,#6E4FD8); }
.mentor-typing { color: var(--muted); font-style: italic; }
.mentor-input { border-top: 1px solid var(--border-soft); padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.mentor-ta { width: 100%; box-sizing: border-box; resize: none; min-height: 56px; font: inherit; font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; }
.mentor-ta:focus { outline: none; border-color: var(--accent); background: #fff; }
.mentor-ta:disabled { color: var(--faint-ink); background: var(--surface-alt); }
.mentor-row { display: flex; align-items: center; justify-content: space-between; }
.mentor-quota { font-size: 11px; color: var(--muted); font-weight: 600; }

/* ---- LLM report prose slot ---- */
.rv-prose { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.rv-prose-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.rv-prose-p { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin-bottom: 10px; }

/* ---- Stack: power modules (Feature 6) ---- */
.stack-modules { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.sm-head { margin-bottom: 12px; }
.sm-title { font-weight: 800; font-size: 15px; }
.sm-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 3px; max-width: 620px; }
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.module-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.module-card.owned { border-color: #CDD8F2; background: #FCFDFF; }
.mc-top { display: flex; align-items: center; justify-content: space-between; }
.mc-name { font-weight: 800; font-size: 14px; }
.mc-here { font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.mc-effect { margin: 1px 0; }
.mc-real { font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.mc-cost { font-size: 13px; font-weight: 700; color: var(--ink); }
.mc-actions { margin-top: auto; padding-top: 4px; }
@media (max-width: 1100px) { .module-grid { grid-template-columns: 1fr; } }

/* ---- Field Guide (Feature 7) ---- */
.fg-panel { max-width: 560px; }
.fg-replay { margin: 6px 0 14px; padding: 12px 14px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 11px; }
.fg-replay-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.fg-replay-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-replay-chip { font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; cursor: pointer; color: var(--ink); }
.fg-replay-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.fg-search { width: 100%; box-sizing: border-box; font-size: 14px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; background: var(--surface); color: var(--ink); }
.fg-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fg-list { display: flex; flex-direction: column; gap: 4px; }
.fg-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-ink); font-weight: 700; margin: 14px 0 6px; }
.fg-cat:first-child { margin-top: 0; }
.fg-item { padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.fg-item:last-child { border-bottom: none; }
.fg-term { font-weight: 800; font-size: 14px; margin-bottom: 3px; }
.fg-here { font-size: 13px; line-height: 1.55; color: var(--ink); }
.fg-real { font-size: 12px; line-height: 1.55; color: var(--muted); margin-top: 3px; }
.fg-empty { font-size: 13px; color: var(--muted); padding: 20px 0; text-align: center; }

/* ---- How-it-works: real-life section (Feature 7) ---- */
.hiw-real { margin-top: 14px; padding: 13px 15px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: 10px; }
.hiw-real-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-ink); font-weight: 700; margin-bottom: 6px; }
.hiw-real-body { font-size: 13px; line-height: 1.6; color: var(--ink); }

/* ============================================================
   WAVE C — ACCESSIBILITY: visible focus + reduced motion
   ============================================================ */
/* Visible focus ring on every keyboard-focused interactive element.
   Uses :focus-visible so mouse clicks don't show the ring, keyboard does. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.app:focus-visible,
.mtab:focus-visible,
.choice:focus-visible,
.opt:focus-visible,
.act-tile:focus-visible,
.fa-tpl:focus-visible,
.fa-src:focus-visible,
.rep-tab:focus-visible,
.help-btn:focus-visible,
.tip-mark:focus-visible,
.preset:focus-visible,
.toggle-row .tg:focus-visible,
.dm-approach .app-opt:focus-visible,
.machine-node:focus-visible,
.help-hub-card:focus-visible,
.fg-replay-chip:focus-visible,
.msheet-app:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
/* Rail + tab-bar items sit on dark/near-edge surfaces — give them a soft glow too. */
.app:focus-visible { outline-offset: -2px; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.mtab:focus-visible { outline-offset: -3px; }
/* Inputs already have a colored border on focus; add a soft ring for clarity. */
input:focus-visible, textarea:focus-visible, .fg-search:focus-visible, .mentor-ta:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
/* Make focus reachable on clickable DIVs that act as buttons (rail apps, nodes). */
.app, .machine-node, .msheet-app { }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .pulse, .coach-hole { animation: none !important; }
}

/* ============================================================
   WAVE C — RESPONSIVE
   >=1200 full rail · 768-1200 icon rail + tighter content · <768 mobile
   ============================================================ */

/* Hide the mobile-only chrome by default (desktop + tablet). */
.mtabbar { display: none; }

/* ---------- 768–1200: icon rail + 2-col content ---------- */
@media (max-width: 1199px) and (min-width: 768px) {
  /* rail already collapses to icons via JS .collapsed class; ensure width. */
  .content { padding: 20px 20px; gap: 14px; }
  /* Two-column desk grids collapse to a single readable column. */
  .cols { grid-template-columns: 1fr; }
  .layout2, .layout3 { grid-template-columns: 1fr; }
  /* 2026-08-04 responsive fix (reported in the Email app): once these grids
     stack to one column they must also stop claiming flex:1 of the bounded
     .content height. Otherwise the grid keeps a viewport-capped height, its
     stacked rows compress below their content (min-height:0), and the rows
     paint over each other -- sequences bleeding through List health. Sized
     naturally, .content scrolls them like any tall page. */
  .cols, .layout2, .layout3 { flex: 0 0 auto; min-height: auto; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid3 { grid-template-columns: repeat(3, 1fr); }
  .offer-stack { grid-template-columns: repeat(3, 1fr); }
  .pipe-board { grid-template-columns: repeat(3, 1fr); }
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .movers, .summary-stats { grid-template-columns: repeat(2, 1fr); }

  /* Tablet HUD: the desktop stat row is too wide once the rail is only 68px.
     Drop the two optional indicators and tighten spacing so End Week fits. */
  .hud { gap: 12px; padding: 0 14px; overflow: hidden; }
  .hud .biz span { display: none; }
  .hud .biz { margin-right: 4px; }
  .hud .stat-momentum, .hud .stat-drag { display: none; }
  .hud .focus-pips { max-width: 132px; overflow: hidden; }
  .hud .help-btn { padding: 7px 10px; }
  .hud .endweek { flex: 0 0 auto; white-space: nowrap; }
  .hud .spacer { min-width: 0; }
}

/* Narrow tablet (768-919): even after dropping momentum/drag the full stat row
   is too wide once the rail is 68px. Also drop runway + condition here (both
   remain readable on the Desk and Ledger) so cash, focus and End Week fit. */
@media (max-width: 919px) and (min-width: 768px) {
  .hud .stat-runway, .hud .stat-cond { display: none; }
  .hud .biz { max-width: 26vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud .focus-pips { max-width: 100px; }
}

/* ============================================================
   <768 TRUE MOBILE
   ============================================================ */
@media (max-width: 767px) {
  html, body { overflow: auto; -webkit-text-size-adjust: 100%; }
  #app { display: block; height: auto; min-height: 100%; }

  /* Hide the desktop rail entirely; nav moves to the bottom tab bar. */
  .rail { display: none !important; }

  .main { height: auto; min-height: 100vh; display: block; }

  /* ---- Sticky condensed HUD strip: week · cash · focus · End Week ---- */
  .hud {
    position: sticky; top: 0; z-index: 45;
    height: auto; min-height: var(--mhud-h);
    padding: 8px 10px; gap: 8px;
    flex-wrap: nowrap; overflow: hidden;
    box-shadow: 0 1px 0 var(--border);
  }
  /* Business name is dropped on mobile — the week chip carries context. */
  .hud .biz { display: none; }
  .hud .save-chip { display: none; }
  /* Strip carries only: week · cash · focus · End Week. Hide the rest. */
  .hud .stat-momentum, .hud .stat-drag,
  .hud .stat-runway, .hud .stat-cond { display: none; }
  .hud .week-chip { display: inline-flex; font-size: 10.5px; padding: 4px 8px; flex: 0 0 auto; }
  .hud .stat { flex: 0 0 auto; }
  .hud .stat .lbl { font-size: 9px; }
  .hud .stat .val { font-size: 13px; }
  /* Compress focus pips into a tighter run; cap the visible run so the strip fits. */
  .hud .focus-pips { gap: 2px; max-width: 84px; overflow: hidden; }
  .hud .pip { width: 5px; height: 11px; flex: 0 0 auto; }
  /* Spec strip = week · cash · focus · End Week. Help drops out (every page
     already has its own "How this works"); Stats stays as a compact icon so the
     founder profile is still reachable on mobile. */
  /* QA fix P2 (2026-08-01): hiding Help stranded the Field Guide and the "New to this?" /
     "Show everything" toggles on mobile (no other entry point exists). Keep it as a compact
     icon, same treatment as Stats. */
  .hud .hud-help { padding: 0; width: 44px; height: 44px; min-height: 44px; justify-content: center; font-size: 0; gap: 0; flex: 0 0 auto; }
  .hud .hud-help .qc { font-size: 15px; }
  .hud .hud-stats { padding: 0; width: 44px; height: 44px; min-height: 44px; justify-content: center; font-size: 0; gap: 0; flex: 0 0 auto; }
  .hud .hud-stats .qc { font-size: 15px; }
  /* P0 fix (2026-08-01 mobile audit): .hud-prof shipped in the profiles wave with
     NO mobile rule, so it stayed at its full 86px desktop width. The strip is
     flex-nowrap + overflow:hidden, so that 86px pushed the total to 451px against
     a 390px viewport and clipped the right edge off the End Week button — the
     single most important control in the game. Same 44px icon treatment as Stats. */
  .hud .hud-prof { padding: 0; width: 44px; height: 44px; min-height: 44px; justify-content: center; font-size: 0; gap: 0; flex: 0 0 auto; }
  .hud .hud-prof .qc { font-size: 15px; }
  /* Week chip and cash stat also open tips on tap: give them a 44px hit box. */
  .hud .week-chip { min-height: 44px; align-items: center; }
  .hud .stat { min-height: 44px; justify-content: center; }
  /* min-width keeps a short stat ("RUNWAY ∞") from falling under 44px wide. */
  .hud .stat, .hud .week-chip { min-width: 44px; }
  /* End Week is the priority action — never let it clip. */
  .hud .endweek { padding: 10px 12px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; min-height: 44px; }
  .hud .spacer { flex: 1 1 auto; min-width: 0; }

  /* ---- Content: single column, room for the tab bar ---- */
  .content {
    /* Bottom pad clears the tab bar plus a full tap target, so the last row of
       any page is never sitting under the bar. */
    padding: 14px 12px calc(var(--mtab-h) + 48px + env(safe-area-inset-bottom));
    gap: 12px; overflow: visible; height: auto;
  }
  .page-head { gap: 8px; }
  .page-head h1, .app-title { font-size: var(--fs-xl); }
  .page-head .sub, .app-desc { font-size: var(--fs-xs); }

  /* Every multi-column grid collapses to one column. */
  .cols, .layout2, .layout3,
  .grid3, .offer-stack, .tier-chips, .seg,
  .summary-stats, .module-grid, .team-grid, .tool-grid,
  .fa-templates { grid-template-columns: 1fr !important; }
  .seg { flex-direction: column; }
  /* Grid/flex children default to min-width:auto, which lets a wide table or
     long word blow out the single-column track. Force them to shrink to fit. */
  .cols > *, .layout2 > *, .layout3 > *,
  .grid > *, .grid3 > *, .seg > *, .content > * { min-width: 0; }

  /* Pipeline board becomes a vertical stack of stages. */
  .pipe-board { grid-template-columns: 1fr; }
  .pipe-col { min-height: 0; }

  /* Cards: consistent mobile padding, no horizontal overflow. */
  .card { border-radius: 12px; max-width: 100%; }
  /* KPI strip: two compact cards per row so the fold shows real week content
     instead of four full-width blocks. */
  .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .kpi { padding: 10px 12px 10px; border-radius: 10px; }
  .kpi .lbl { font-size: 9.5px; letter-spacing: 0.05em; margin-bottom: 3px; line-height: 1.25; }
  .kpi .val { font-size: 20px; line-height: 1.15; }
  .kpi .delta { font-size: 10.5px; margin-top: 2px; gap: 2px; flex-wrap: wrap; }
  .kpi .delta .ctx { font-size: 10px; }
  /* The 44px "?" target moves to the card corner so it never wraps the label
     onto a second line or stretches the card. */
  /* Weekly-review movers use the same compact two-up treatment as KPI cards. */
  .movers { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .mover { padding: 10px 12px; }
  .mover .lbl { font-size: 9.5px; }
  .mover .val { font-size: 20px; }
  .mover .d { font-size: 10.5px; }
  .kpi { position: relative; }
  .kpi .lbl { padding-right: 30px; }
  .kpi .lbl .tip-mark { position: absolute; top: 0; right: 0; margin: 0; }
  .kpi .lbl .tip-mark::before { left: auto; right: 10px; top: 10px; }
  /* Guard: nothing should push the page wider than the viewport. */
  .content, .content * { max-width: 100%; }
  .card-head { flex-wrap: wrap; gap: 4px 10px; }
  .card-head .right { margin-left: auto; }
  /* Long inline notes wrap instead of clipping. */
  .content p, .content li, .card .note, .lede, .sub { overflow-wrap: anywhere; }
  /* Any inner grid/table row that scrolls horizontally gets touch scroll. */
  .omni-budgets, .budget-row, .creative-table, .fl-th, .fl-tr { max-width: 100%; }
  /* Tables that can't compress become horizontally scrollable rather than clipped. */
  .scroll-x, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Wide data tables (Reach performance, etc.) scroll inside their card instead
     of pushing the whole page wide. Keep columns readable with a sensible min. */
  .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .card table tr { display: table; width: 100%; min-width: 520px; table-layout: fixed; }

  /* Funnel strip and machine flow wrap vertically. */
  .funnel { flex-direction: column; }
  .funnel .stage { border-radius: 10px !important; }
  .machine-node { flex-basis: 100%; }
  .machine-arrow { transform: rotate(90deg); width: 100%; justify-content: center; }

  /* Reports tabs scroll horizontally instead of wrapping oddly. */
  .rep-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-right: 12px; scroll-padding-inline: 12px; }
  .rep-tab { flex: 0 0 auto; padding: 9px 12px; }

  /* ---- Tap targets >= 44px (WCAG 2.5.8 AAA / Apple 44pt) ---- */
  .btn, .preset, .choice, .rep-tab, .help-btn,
  .stepper button, .toggle-row .tg, .fa-src, .dashed-add,
  .store-tab, .fw-tpl, .fa-tpl, .hs-item, .seg-tab, .tab, .pill-tab {
    min-height: 44px;
  }
  .btn.small, .btn.ghost.small { min-height: 44px; min-width: 44px; }
  .preset { min-width: 44px; }
  .stepper button { width: 44px; height: 44px; font-size: 18px; }
  .plan-item .x, .email-queue .eq .x { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* The "?" marker keeps its 20px look but carries a 44x44 hit box. The box is
     absorbed by negative margins so it costs no layout, and the visible circle
     is drawn by ::before. */
  .tip-mark {
    width: 44px; height: 44px; min-width: 44px; font-size: 0; line-height: 0;
    border: none; background: none; padding: 0;
    margin: -12px -12px -12px -7px; position: relative; vertical-align: middle;
  }
  .tip-mark::before {
    content: '?'; position: absolute; left: 12px; top: 12px; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--faint); border-radius: 50%; background: var(--surface);
    color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1;
  }
  .tip-mark:hover, .tip-mark:focus { border: none; }
  .tip-mark:hover::before, .tip-mark:focus::before { border-color: var(--accent); color: var(--accent-ink); }
  /* Wide data tables pan horizontally; headers must not collide into each
     other when the column is narrower than its label. */
  table th { white-space: nowrap; }
  /* Full-screen modals have no scrim to tap on a phone, so the footer action
     stays pinned instead of sitting below a long scroll. */
  .modal-foot {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--surface); border-top: 1px solid var(--border-soft);
    padding: 10px 0 calc(4px + env(safe-area-inset-bottom));
  }
  /* Panel dismiss buttons (Field Guide, How-it-works, Stats). */
  .close-x { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
  /* Text blocks and data rows that carry a tip still need a tappable band. */
  .stance-note, .tc-morale, .tp-row, .la-row,
  .ladder-row, .plat-row, .post-row, .queue-row, .m2-stat, .m2-why, .m2-runway-warn, .m2-spread { min-height: 44px; display: flex; align-items: center; }
  .m2-obj-cards .choice { flex: 1 1 100%; }
  /* Lane bar: the segments are width-proportional data, so only the height can
     grow. Tapping a thin segment is covered by the row tip underneath it. */
  .lane-mix .lane-bar { height: 30px; }
  /* Tutorial coach card controls. */
  .coach-card .skip { min-height: 44px; padding: 0 12px; font-size: 13px; }
  .coach-card .next { min-height: 44px; padding: 10px 20px; font-size: 14px; }
  /* Dotted-underline tips: pad the hit box vertically without moving the text. */
  .tip-underline { padding-block: 16px; display: inline-block; }
  /* Inline chips and badges that carry a tip are tap targets too. */
  .fx-chip[data-tip], .badge[data-tip], .ib-state[data-tip] {
    min-height: 44px; display: inline-flex; align-items: center;
    margin-block: -10px; /* keep the visual rhythm; only the hit box grows */
  }

  /* ---- Modals: full-screen ---- */
  .modal-scrim { align-items: stretch; justify-content: stretch; }
  .modal, .event-modal, .share-modal {
    width: 100% !important; max-width: 100% !important;
    max-height: 100vh !important; height: 100vh; border-radius: 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; }

  /* Weekly review / report sheets full-screen. */
  .review-scrim, .era-scrim { align-items: stretch; }
  .sheet, .summary-sheet, .era-card {
    width: 100% !important; max-width: 100% !important;
    max-height: 100vh; height: 100vh; border-radius: 0;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  }
  .sheet h1, .summary-sheet h1 { font-size: 24px; }
  .movers { grid-template-columns: 1fr 1fr; }

  /* ---- Monthly plan screen: single-column, no side clipping ----
     The 5-across play/launch grids overflow a phone; stack them and let the
     fixed overlay scroll. */
  .plan-screen { padding: 20px 14px calc(20px + env(safe-area-inset-bottom)); align-items: flex-start; }
  .plan-sheet { width: 100%; max-width: 100%; }
  .plan-sheet h1 { font-size: var(--fs-xxl); }
  .play-grid, .launch-row { grid-template-columns: 1fr; gap: 8px; }
  /* Name and tag run together on one line in a single-column card. */
  .play-card .pc-top { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
  .play-card, .launch-card { min-height: 44px; }
  .plan-foot { flex-wrap: wrap; gap: 10px; position: sticky; bottom: 0; background: var(--bg); padding: 12px 0 4px; }
  .plan-foot .btn { flex: 1 1 auto; min-height: 44px; }

  /* How-it-works slide-over becomes near full-width. */
  .hiw-panel, .fg-panel { width: 100%; max-width: 100%; padding: 22px 18px; }

  /* ---- Huddle: stack the channel rail above a full-width message pane ---- */
  .huddle { flex-direction: column; height: auto; min-height: 0; }
  .huddle-side {
    width: 100%; flex-shrink: 0; border-right: none; border-bottom: 1px solid var(--border);
    display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 10px; white-space: nowrap;
  }
  /* Section labels in the rail are noise on a horizontal strip — hide them. */
  .huddle-side .hs-section { display: none; }
  .huddle-side .hs-item {
    flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border-soft); border-radius: 999px; padding: 6px 12px; margin: 0;
  }
  .huddle-main { flex: 1; min-height: 60vh; }
  .chat-feed { min-height: 44vh; }

  /* Start screen: origin cards stack. */
  .origin-grid, .origins { grid-template-columns: 1fr !important; }
  .start-card { width: 100%; padding: 16px; }
  .start-card h1 { font-size: 28px; }

  /* Choices go full width for easy tapping. */
  .choices { flex-direction: column; }
  .choice { min-width: 0; width: 100%; }
  .toggle-row { flex-wrap: wrap; }
  .toggle-row .tg { flex: 1 1 45%; }

  /* ---- Contextual tips: inline banner under the HUD, never floating ---- */
  .ctx-tip { bottom: calc(var(--mtab-h) + 12px); }
  /* BM-15: keep a floating tip above the Mentor pill band (bottom:168px + pill). */
  body:has(#mentor-fab-host .mentor-fab) .ctx-tip:not(.ctx-inline) { bottom: 220px; }
  .ctx-tip.ctx-inline {
    position: static; width: auto; max-width: none; margin: 10px 12px 0;
    box-shadow: none; animation: none; padding: 12px 12px 12px 14px;
  }
  .ctx-tip.ctx-inline .ct-head { margin-bottom: 4px; }
  .ctx-tip .ct-x {
    width: 44px; height: 44px; min-width: 44px; font-size: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    margin: -12px -12px -12px auto;
  }

  /* ---- Tooltips become a bottom sheet on touch ---- */
  .tip-sheet-scrim {
    position: fixed; inset: 0; z-index: 9000; background: rgba(20,18,14,.45);
    display: flex; align-items: flex-end; animation: fade .15s ease;
  }
  .tip-sheet {
    width: 100%; background: var(--surface); border-radius: 18px 18px 0 0;
    padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
    max-height: 70vh; overflow-y: auto;
    animation: sheetUp .2s cubic-bezier(.2,.7,.3,1);
    box-shadow: 0 -12px 32px rgba(20,18,14,.22);
  }
  .tip-sheet-title { font-size: 13px; font-weight: 800; margin-bottom: 6px; }
  .tip-sheet-body { font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-line; }
  .tip-sheet-ok { width: 100%; min-height: 48px; margin-top: 14px; }

  /* A full-screen overlay owns the screen: the page behind it is not reachable,
     so it is hidden rather than left visible-but-dead under the sheet. */
  body:has(.review-scrim, .modal-scrim, .era-scrim, .hiw-scrim) .main,
  body:has(.review-scrim, .modal-scrim, .era-scrim, .hiw-scrim) .rail { visibility: hidden; }
  .toast-layer { top: calc(var(--mhud-h) + 8px); right: 12px; }

  /* ---- Bottom tab bar ----
     Sits above the app-sheet scrim so switching groups (or closing the sheet by
     re-tapping the live tab) never needs a scrim tap first. Safe-area insets on
     all three edges keep the tabs off the rounded corners / home indicator. */
  .mtabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    height: calc(var(--mtab-h) + env(safe-area-inset-bottom));
    padding: 0 calc(8px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(8px + env(safe-area-inset-left));
    background: var(--rail);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  /* A full-screen overlay (review, event, plan, era card) owns the screen: the
     tab bar is not reachable underneath it, so it is hidden rather than left
     visible-but-dead behind the sheet. */
  body:has(.review-scrim, .modal-scrim, .era-scrim, .plan-screen, .summary-scrim, .hiw-scrim) .mtabbar { display: none; }
  .mtab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; background: none; border: none; color: rgba(255,255,255,0.55);
    font-family: inherit; font-weight: 700; cursor: pointer; padding: 8px 4px;
    min-height: 48px; position: relative; border-radius: 12px;
  }
  .mtab .mtab-ic { position: relative; display: flex; line-height: 0; }
  .mtab .mtab-lbl { font-size: 11px; letter-spacing: .01em; }
  /* Active affordance is a pill + top marker, not colour alone. */
  .mtab.active { color: #fff; background: rgba(255,255,255,0.09); }
  .mtab.active::before {
    content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 999px; background: var(--accent);  /* was #8ea0ff */
  }
  .mtab.active .mtab-ic { color: var(--accent); }
  .mtab.active .mtab-ic svg { stroke: var(--accent); }  /* was #8ea0ff, off-brand blue */
  .mtab-dot {
    position: absolute; top: -2px; right: -5px; width: 8px; height: 8px;
    border-radius: 50%; background: #E5704C; border: 2px solid var(--rail);
  }

  /* ---- Mobile app-picker bottom sheet ---- */
  .msheet-scrim {
    position: fixed; left: 0; right: 0; top: 0;
    bottom: calc(var(--mtab-h) + env(safe-area-inset-bottom));
    z-index: 9300; background: rgba(20,18,14,.5);
    display: flex; align-items: flex-end; animation: fade .15s ease;
  }
  .msheet {
    width: 100%; background: var(--surface); border-radius: 18px 18px 0 0;
    padding: 4px 16px 12px;
    max-height: 65vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: sheetUp .22s cubic-bezier(.2,.7,.3,1);
    box-shadow: 0 -12px 32px rgba(20,18,14,.18);
  }
  /* Grab handle carries a 44px-tall swipe/tap zone around the 4px pill. */
  .msheet-grab {
    position: relative; width: 100%; height: 26px; background: none; margin: 0 0 2px;
    touch-action: none;
  }
  .msheet-grab::after {
    content: ''; position: absolute; left: 50%; top: 11px; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 999px; background: var(--border);
  }
  .msheet-title {
    position: sticky; top: 0; z-index: 1; background: var(--surface);
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); font-weight: 800; padding: 2px 0 8px; touch-action: none;
  }
  .msheet-list { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
  .msheet-app {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 12px;
    padding: 10px 14px; font-family: inherit; cursor: pointer; min-height: 56px;
  }
  .msheet-app.active { border-color: var(--accent); background: var(--accent-soft); }
  .msheet-app.locked { opacity: .6; }
  /* Centre the letter/lock glyph in its tile (the base .app .glyph rule doesn't
     reach the sheet rows, which left every letter pinned top-left). */
  .msheet-app .glyph {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #fff; line-height: 1;
  }
  .msheet-app-name { font-weight: 800; font-size: 14px; color: var(--ink); }
  .msheet-app-sub { font-size: 12px; color: var(--muted); margin-top: 1px; line-height: 1.3; }

  /* ---- Funnel Builder v2 mobile step-wizard (spec 12-B6) ---- */
  /* Progress dots under the header. */
  .fw-progress { display: flex; gap: 8px; padding: 4px 16px 0; }
  .fw-dot { flex: 1; height: 4px; border-radius: 999px; background: var(--border); transition: background .2s; }
  .fw-dot.done { background: var(--accent-soft); }
  .fw-dot.on { background: var(--accent); }
  .fw-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
  .fw-q { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.25; }
  .fw-help { font-size: 13.5px; color: var(--muted); line-height: 1.4; margin-top: -4px; }
  /* Starter cards stack full width, tappable. */
  .fw-tpl { display: block; width: 100%; text-align: left; min-height: 44px; }
  /* Steps read top-to-bottom as numbered rungs. */
  .fw-steps { display: flex; flex-direction: column; gap: 8px; }
  .fw-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); }
  .fw-step-n { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
  .fw-step-main { flex: 1; min-width: 0; }
  .fw-preview { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 4px; }
  .fw-defects { margin-top: 4px; }
  /* Review list: label -> value rows. */
  .fw-review { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface-alt); }
  .fw-rev-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
  .fw-rev-row span { color: var(--muted); }
  .fw-rev-row b { color: var(--ink); text-align: right; }
  .fw-build { width: 100%; padding: 14px 20px; min-height: 48px; font-size: 15px; }
  /* Sticky Back/Next footer inside the wizard card. */
  .fw-nav { display: flex; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
  .fw-nav .fw-back { flex: 0 0 auto; min-height: 44px; }
  .fw-nav .fw-next { flex: 1; min-height: 44px; }
}
@keyframes sheetUp { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

/* ----- Start screen: mode doors (Learn vs Plan) ----- */
.mode-select { width: 860px; }
/* 2026-08-12 (Scott): landing hierarchy fix -- Door 1 is THE product, Door 2 is a
   preview of what unlocks later. Stack them vertically. Door 1 gets hero treatment:
   bigger padding, bigger type, gold accent border. Door 2 becomes a slim secondary
   card underneath. Grid layout stays for the rare 3-door state (unlocked / test). */
.mode-doors { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 4px; text-align: left; }
.mode-door {
  border: 1px solid var(--border, #E6E3DB); background: #FFFFFF; border-radius: 14px;
  padding: 20px 18px 18px; cursor: pointer; font-family: inherit; color: var(--ink, #1E1C17);
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.mode-door:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(30,28,23,0.07); }
.mode-door:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.md-badge { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: #96631B; }
.md-badge-plan { color: var(--accent-ink); }
.md-title { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.md-body { font-size: 12.5px; line-height: 1.55; color: #55524A; }
.md-cta { margin-top: auto; padding-top: 8px; font-weight: 800; font-size: 13px; color: var(--accent-ink); }
.mode-door-plan { border-color: #C9CFF4; background: linear-gradient(180deg, #FFFFFF, #F7F8FE); }
/* Hero treatment for Door 1 -- the main path. */
.mode-door-learn {
  padding: 32px 30px 28px; border-width: 2px; border-color: var(--accent, #9a8145);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF0 100%);
  box-shadow: 0 8px 24px rgba(154, 129, 69, 0.10);
  gap: 12px;
}
.mode-door-learn .md-badge { font-size: 11px; color: var(--accent-ink, #6B5626); }
.mode-door-learn .md-title { font-size: 28px; line-height: 1.15; font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 700; letter-spacing: -0.02em; }
.mode-door-learn .md-body { font-size: 15px; line-height: 1.65; color: var(--ink, #1E1C17); }
.mode-door-learn .md-cta { font-size: 16px; padding-top: 12px; color: var(--accent-ink, #6B5626); }
.mode-door-learn:hover { border-color: var(--accent, #9a8145); box-shadow: 0 12px 32px rgba(154, 129, 69, 0.16); }
/* Secondary treatment for Door 2 -- the preview / horizon door. */
.mode-door-plan { padding: 14px 16px 14px; opacity: 0.95; }
.mode-door-plan .md-title { font-size: 15px; }
.mode-door-plan .md-body { font-size: 12px; line-height: 1.5; color: var(--muted); }
.mode-door-plan .md-cta { font-size: 12px; padding-top: 6px; }
@media (min-width: 720px) {
  .mode-door-learn { padding: 40px 40px 32px; }
  .mode-door-learn .md-title { font-size: 34px; }
  .mode-door-learn .md-body { font-size: 16px; }
}
/* 2026-08-01: locked 'Coming soon' door -- dimmed, no hover lift, clearly not clickable */
.mode-door-locked { opacity: 0.6; cursor: not-allowed; filter: grayscale(0.35); }
.mode-door-locked:hover { border-color: var(--border); transform: none; box-shadow: none; }
.mode-door-locked .md-badge-plan { background: var(--muted); color: #fff; border-radius: 5px; padding: 2px 7px; display: inline-block; align-self: flex-start; width: auto; font-size: 10px; letter-spacing: 0.08em; }
.mode-door-locked .md-cta { color: var(--muted); }
/* Week-4 gate (2026-08-01): the locked third door spans the full row beneath
   the two live doors, so the pair above reads centered. */
.mode-door-gate { grid-column: 1 / -1; }
/* When gated, the top row holds exactly the two live doors, so they center. */
.mode-doors-gated { /* stacked layout inherited from .mode-doors */ }
.md-lock { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--muted); border-radius: 5px; padding: 2px 7px; margin-left: 8px; vertical-align: 2px; }
@media (max-width: 720px) { .mode-select { width: 100%; } }

/* ============================================================
   NARROW PHONES (<= 400px, e.g. 360x780 Android)
   The sticky HUD carries five things; below 400px it needs tighter
   rhythm so End Week never runs off the right edge.
   ============================================================ */
@media (max-width: 400px) {
  .hud { gap: 5px; padding: 8px; }
  .hud .stat .lbl { font-size: 9px; letter-spacing: 0.04em; }
  .hud .stat .val { font-size: 13.5px; }
  .hud .week-chip { padding: 0 6px; font-size: 11px; min-width: 44px; }
  .hud .endweek { padding: 10px 7px; font-size: 12.5px; }
  .hud .focus-pips { max-width: 64px; gap: 1.5px; }
  .hud .hud-stats { width: 44px; }
  .kpi .val { font-size: 18px; }
  .mtab { font-size: 10.5px; }
}

/* ---------- Recharge app (rest + paid recovery catalog) ---------- */
.rch-rest { display: flex; flex-direction: column; gap: var(--sp-3); }
.rch-rest.rch-on { border-color: var(--good); }
.rch-rest.rch-warn { border-color: var(--warn); }
.rch-rule { font-size: var(--fs-md); font-weight: 700; line-height: 1.45; }
.rch-note { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.rch-chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rch-warn-line {
  font-size: var(--fs-sm); line-height: 1.5; color: var(--warn-ink);
  background: var(--warn-soft); border-radius: 10px; padding: var(--sp-3);
}
.rch-good-line {
  font-size: var(--fs-sm); line-height: 1.5; color: var(--good-ink);
  background: var(--good-soft); border-radius: 10px; padding: var(--sp-3);
}
.rch-rest .btn { align-self: flex-start; }
@media (max-width: 767px) {
  .rch-rest .btn { align-self: stretch; width: 100%; }
}

.rch-sec { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.rch-sec-head h2 { font-size: var(--fs-lg); margin: 0 0 2px; }
.rch-sec-head .sub { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.rch-sec-sum {
  font-size: var(--fs-sm); color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 10px; padding: var(--sp-3); line-height: 1.5;
}
.rch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.rch-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.rch-card.rch-booked { border-color: var(--accent); }
.rch-card.rch-owned { border-color: var(--good); }
.rch-c-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.rch-c-name { font-size: var(--fs-md); font-weight: 700; }
.rch-c-line { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.rch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rch-state { font-size: var(--fs-xs); line-height: 1.5; border-radius: 8px; padding: 6px 8px; }
.rch-state.warn { color: var(--warn-ink); background: var(--warn-soft); }
.rch-state.good { color: var(--good-ink); background: var(--good-soft); }
.rch-state.note { color: var(--muted); background: var(--surface-alt); }
.rch-advisory {
  font-size: var(--fs-xs); line-height: 1.55; color: var(--bad);
  background: var(--bad-soft); border-radius: 8px; padding: 8px;
}
.rch-reason { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.rch-card .btn { margin-top: auto; width: 100%; }
.rch-foot { font-size: var(--fs-xs); color: var(--faint-ink); line-height: 1.55; }

.rch-card .badge { align-self: center; }
.rch-card .btn.disabled, .rch-card .btn:disabled { opacity: .55; cursor: default; }

.rv-recovery {
  margin: var(--sp-3) 0; padding: var(--sp-4); border: 1px solid var(--border-soft);
  border-radius: 12px; background: var(--surface-alt); display: flex; flex-direction: column; gap: var(--sp-2);
}
.rv-rec-head { font-size: var(--fs-sm); font-weight: 700; }
.rv-rec-why { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.rv-rec-why.good { color: var(--good-ink); }
.rv-rec-why.bad { color: var(--bad); }
.rv-rec-why.warn { color: var(--warn-ink); }
.notif-go { margin-top: 8px; }
.stats-recharge {
  margin-top: var(--sp-4); padding: var(--sp-4); border-radius: 12px;
  background: var(--good-soft); display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start;
}
.stats-recharge .sr-line { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink); }
.hud-cap-note { display: block; font-size: 10.5px; font-weight: 700; color: var(--warn-ink); letter-spacing: .02em; }
@media (max-width: 767px) {
  .stats-recharge .btn, .notif-go { width: 100%; }
}

/* ============================================================
   WAVE M1 -- marketing visibility
   Journey Strip, fit previews, next-best-action chips, weekly
   marketing P&L, best-of cards, anchor chips, winner moments.
   ============================================================ */
.m1-journey { flex: 0 0 auto; margin-bottom: var(--sp-4); }
.m1-j-empty { padding: var(--sp-4) var(--sp-4) var(--sp-5); font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.m1-strip {
  display: flex; align-items: stretch; gap: 0; padding: var(--sp-4);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--sp-4);
}
.m1-node {
  flex: 0 0 auto; min-width: 92px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.m1-n-lbl { font-size: var(--fs-xs); font-weight: 700; color: var(--ink); }
.m1-n-val { font-size: var(--fs-md); font-weight: 800; }
.m1-n-sub { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.m1-arrow {
  flex: 0 0 auto; min-width: 92px; padding: 0 var(--sp-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.m1-a-num { font-size: var(--fs-sm); font-weight: 800; color: var(--muted); }
.m1-a-line { width: 100%; height: 2px; border-radius: 2px; background: var(--border); position: relative; }
.m1-a-line::after {
  content: ''; position: absolute; right: -1px; top: -3px;
  border-left: 6px solid var(--border); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.m1-a-lbl { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.3; }
.m1-arrow.mine .m1-a-num { color: var(--accent-ink); }
.m1-arrow.mine .m1-a-line { background: var(--accent); }
.m1-arrow.mine .m1-a-line::after { border-left-color: var(--accent); }
.m1-arrow.mine .m1-a-lbl { color: var(--accent-ink); font-weight: 700; }
.m1-attr {
  border-top: 1px solid var(--border-soft); padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: 6px;
}
.m1-attr-line { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.m1-attr-line .m1-attr-app { font-weight: 700; color: var(--ink); }
.m1-attr-line.mine { color: var(--ink); }
.m1-attr-line.mine .m1-attr-app { color: var(--accent-ink); }
.m1-fit {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.m1-fit-txt { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.m1-fit-txt b { color: var(--ink); font-weight: 700; }
.m1-fit-seg { font-size: var(--fs-xs); color: var(--faint-ink); flex: 1 1 100%; }
.m1-nba { flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3); padding: 10px 14px;
  border: 1px solid var(--accent); border-left-width: 3px; border-radius: 10px;
  background: var(--accent-soft);
}
.m1-nba-tag { font-size: var(--fs-xs); font-weight: 800; color: var(--accent-ink); white-space: nowrap; }
.m1-nba-txt { flex: 1 1 240px; font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; }
.m1-nba-x {
  flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface);
  border-radius: 6px; padding: 6px 10px; font-size: var(--fs-xs); font-weight: 700;
  color: var(--muted); cursor: pointer;
}
.m1-nba-x:hover { color: var(--ink); border-color: var(--muted); }
/* The Desk suggestion. On a week-1 Desk this is the only thing asking for a
   decision, so it gets the weight of a headline rather than a footnote. */
.m1-nba-primary { padding: 14px 16px; border-left-width: 4px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.m1-nba-primary .m1-nba-tag { font-size: var(--fs-sm); letter-spacing: .02em; text-transform: uppercase; }
.m1-nba-primary .m1-nba-txt { font-size: var(--fs-md); font-weight: 600; }
.m1-nba-go {
  flex: 0 0 auto; border: 1px solid var(--accent); background: var(--accent);
  /* Contrast pass (2026-08-01): was #fff on gold at 2.49:1. Ink on gold is 8.0:1
     and matches how every other gold button in the game is already styled. */
  color: var(--ink); border-radius: 8px; padding: 8px 14px;
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.m1-nba-go:hover { filter: brightness(1.06); }
/* Thumb-sized hit boxes on phones for the three controls this wave adds. */
@media (max-width: 768px) {
  .m1-nba-go, .tut-resume .tr-go, .tut-resume .tr-x { min-height: 44px; min-width: 44px; }
}
/* A walkthrough parked partway through, waiting on the Desk. */
.tut-resume {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3); padding: 9px 14px;
  border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-alt);
}
.tut-resume .tr-txt { flex: 1 1 200px; font-size: var(--fs-sm); color: var(--muted); }
.tut-resume .tr-go, .tut-resume .tr-x {
  flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface);
  border-radius: 6px; padding: 6px 12px; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}
.tut-resume .tr-go { border-color: var(--accent); color: var(--accent-ink); }
.tut-resume .tr-x { color: var(--muted); }
.m1-pl { flex: 0 0 auto; margin: var(--sp-3) 0 var(--sp-2); border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); overflow: hidden; }
.m1-pl-head { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); font-weight: 800; color: var(--ink); }
.m1-pl-row {
  display: grid; grid-template-columns: 86px 72px 1fr auto; gap: var(--sp-2);
  align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-xs); color: var(--muted);
}
.m1-pl-row:last-of-type { border-bottom: 0; }
.m1-pl-name { font-weight: 800; color: var(--ink); }
.m1-pl-cost { color: var(--bad); }
.m1-pl-got { color: var(--ink); }
.m1-pl-unit { text-align: right; white-space: nowrap; }
.m1-pl-win, .m1-pl-cheer {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 10px 14px; border-top: 1px solid var(--border-soft); background: var(--surface);
}
.m1-pl-win-txt { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.m1-pl-win-txt b { color: var(--ink); }
.m1-best { flex: 0 0 auto;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4); padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.m1-best-lbl { font-size: var(--fs-xs); font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.m1-best-val { font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.m1-best-note { font-size: var(--fs-xs); color: var(--muted); }
.m1-anchor-row { padding: 10px 18px 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.m1-anchor { cursor: help; }
.m1-win { flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3); padding: 10px 14px;
  border: 1px solid var(--good); border-left-width: 3px; border-radius: 10px;
  background: var(--good-soft);
}
.m1-win-tag { font-size: var(--fs-xs); font-weight: 800; color: var(--good-ink); white-space: nowrap; }
.m1-win-txt { flex: 1 1 240px; font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; }
.m1-win-x {
  flex: 0 0 auto; border: 1px solid var(--good); background: var(--surface);
  border-radius: 6px; padding: 6px 10px; font-size: var(--fs-xs); font-weight: 700;
  color: var(--good-ink); cursor: pointer;
}

/* Mobile audit (2026-08-01): four controls were still under the 44px touch floor
   on a phone. The two dismiss buttons were the worst (22px and 24px), which is a
   miss-and-hit-the-thing-behind-it size on a real thumb. */
@media (max-width: 767px) {
  .notif-x, .se-x {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .mh-btn { min-height: 44px; }
}


/* Touch-target floor for TOUCH DEVICES rather than narrow windows (2026-08-01 audit).
   The phone rules above are width-gated, which left tablets (768px+, still a thumb)
   with 15-31px controls. Keying off pointer:coarse catches every touch device and
   deliberately does NOT fire for a resized desktop window with a mouse, where the
   denser sizing is correct. */
@media (pointer: coarse) {
  .notif-x, .se-x, .m1-nba-x, .mh-btn, .help-btn, .btn.small, .btn.ghost {
    min-height: 44px;
  }
  .notif-x, .se-x, .m1-nba-x {
    min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .tip-mark { min-width: 24px; min-height: 24px; }
}

/* Wave M1 touch targets: every new chip that carries a tooltip or a control has
   to clear 44px on a phone, per the mobile audit rails. */
@media (max-width: 767px) {
  .m1-nba-x, .m1-win-x { min-height: 44px; min-width: 44px; }
  .m1-best, .m1-pl-head, .m1-fit { min-height: 44px; }
  .m1-best { align-items: center; }
  .m1-pl-head { display: flex; align-items: center; }
  .m1-strip { padding-inline: var(--sp-3); }
}

/* ============================================================
   WAVE M2 - Reach objective flow, depth ladder, Signal platforms
   ============================================================ */
.m2-obj-body, .m2-ladder-body, .m2-plat-body, .m2-comp-body, .m2-engine-body, .m2-unlock-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.m2-obj-cards .choice { flex: 1 1 46%; }
.m2-why { font-size: 12.5px; line-height: 1.5; color: var(--ink); background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; }
.m2-budget-step { display: flex; align-items: center; gap: 10px; }
.m2-budget-val { font-weight: 800; font-size: 17px; min-width: 96px; text-align: center; }
.m2-runway-warn { font-size: 12.5px; line-height: 1.5; color: var(--warn-ink, var(--warn)); background: var(--warn-soft, #FBF0DE); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; font-weight: 600; }
.m2-obj-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.m2-obj-queued { font-size: 13px; line-height: 1.55; }
.m2-draft { margin: 0; }
.ladder-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.ladder-row:last-child { border-bottom: 0; }
.ladder-row .lr-main { flex: 1; min-width: 0; }
.ladder-row .lr-name { font-weight: 600; font-size: 13px; }
.ladder-row .lr-sub { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.ladder-row.on .lr-name { color: var(--accent-ink); }
.m2-unlock-row { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.m2-pace { color: var(--muted); }
/* ---- Signal platforms ---- */
.m2-plat-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.plat-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.plat-row:last-child { border-bottom: 0; }
.plat-row .pr-main { flex: 1; min-width: 0; }
.plat-row .pr-name { font-weight: 600; font-size: 13px; }
.plat-row .pr-sub { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.m2-stat-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.m2-stat { background: var(--surface-2, var(--surface)); border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 10px; min-width: 84px; }
.m2-stat .lbl { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); display: block; }
.m2-stat .val { font-size: 16px; font-weight: 700; }
.post-row, .queue-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.post-row:last-child, .queue-row:last-child { border-bottom: 0; }
.post-row .po-main, .queue-row .qr-main { flex: 1; min-width: 0; font-size: 12.5px; }
.post-row .po-sub, .queue-row .qr-sub { color: var(--muted); font-size: 11.5px; }
.m2-spread { font-size: 12.5px; line-height: 1.5; background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; }
.m2-milestone { font-size: 12.5px; line-height: 1.5; font-weight: 600; color: var(--good-ink); }

.m2-post { border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.m2-post .toggle-row { margin: 0; }

/* ============================================================
   WAVE M3: Angle Library, Plays picker, alignment chip, proven-fit
   celebration. Reuses .card, .choice, .badge, .hint, .btn, .ctx-tip
   from the existing system; only new class names get rules here.
   ============================================================ */
.m3-angles-body { display: flex; flex-direction: column; gap: 10px; }
.m3-angle-row {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft);
}
.m3-angle-row:last-child { border-bottom: 0; }
.m3-angle-row .ar-main { flex: 1; min-width: 140px; font-size: 13px; }
.m3-angle-row .ar-sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ar-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ar-chip {
  background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 4px 8px; font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.ar-chip.on { background: var(--good-soft); border-color: var(--good); color: var(--good-ink); }

.angle-fit-field { margin-top: 4px; }

.m3-alignment-chip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 8px 12px; font-size: 12px; color: var(--muted); margin-bottom: 12px;
}
.m3-alignment-chip.on { border-color: var(--good); background: var(--accent-soft); color: var(--ink); }

.m3-plays-picker { margin-bottom: 14px; }
.m3-plays-picker .choices .choice { min-width: 150px; }
.m3-plays-picker .choice .cd { white-space: normal; }

.m3-angle-celebration .btn.primary.small { margin-top: 8px; width: 100%; }

@media (max-width: 640px) {
  .m3-angle-row { flex-direction: column; align-items: stretch; }
  .m3-alignment-chip { font-size: 11.5px; }
}


.m1-strip-hint { display: none; }
/* QA fix P2 (2026-08-01): at phone widths the Journey Strip (970px of content in a ~364px box)
   scrolled with zero affordance -- two-thirds of the machine picture was undiscoverable. Show a
   thin scrollbar, add a right-edge fade, and a one-line swipe hint. */
@media (max-width: 640px) {
  .m1-journey { position: relative; }
  .m1-strip { scrollbar-width: thin; scrollbar-color: var(--faint) transparent; padding-bottom: 6px; }
  .m1-strip::-webkit-scrollbar { height: 4px; display: block; }
  .m1-strip::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 2px; }
  .m1-journey::after {
    content: '';
    position: absolute;
    top: 44px; right: 0; bottom: 26px;
    width: 36px;
    background: linear-gradient(to right, rgba(255,255,255,0), var(--surface));
    pointer-events: none;
    border-radius: 0 0 12px 0;
  }
  .m1-strip-hint { display: block; font-size: 11px; color: var(--muted); padding: 2px 2px 6px; }
}

/* U1 (2026-08-01): Angle Library spacing + intro explainer */
.m3-angles-body { padding: 12px 18px 16px; }
.m3-angles-intro {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  padding: 10px 12px;
  background: var(--bg-soft, rgba(0,0,0,0.03));
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}

/* U1 (2026-08-01): intro tour + celebration moments */
.tour-dots { display: flex; gap: 6px; justify-content: center; margin: 18px 0 4px; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.tour-dot.on { background: var(--accent); }
.celebrate-sheet { text-align: center; }
.celebrate-sheet .eyebrow { justify-content: center; }
.celebrate-burst { font-size: 40px; line-height: 1; margin-bottom: 6px; animation: celebratePop .45s cubic-bezier(.2,1.6,.4,1) both; }
.celebrate-big { font-size: 30px; font-weight: 800; margin: 10px 0 8px; color: var(--good-ink); }
.celebrate-sheet .foot { justify-content: center; }
@keyframes celebratePop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* U1 (2026-08-01): weekly review trend strip */
.rv-sparks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 18px; }
.rv-spark { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 10px; background: var(--surface); }
.rv-spark .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; }
.rv-spark .val { font-size: 17px; font-weight: 800; margin: 3px 0 6px; }
.rv-spark svg { width: 100%; height: 28px; display: block; }
.rv-spark .trend { font-size: 10.5px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.rv-spark .trend.up { color: var(--good-ink); }
@media (max-width: 640px) { .rv-sparks { grid-template-columns: repeat(2, 1fr); } }

/* U1 (2026-08-01): Recharge refresh -- battery band + card polish */
.rch-status { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 18px; background: linear-gradient(135deg, rgba(31,138,76,0.06), rgba(31,138,76,0.015)); border-color: rgba(31,138,76,0.25); }
.rch-batt .lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.rch-batt .lbl .v { font-size: 20px; font-weight: 800; color: var(--ink, inherit); letter-spacing: 0; }
.rch-meter { height: 8px; border-radius: 4px; background: var(--border-soft); overflow: hidden; margin: 7px 0 7px; }
.rch-meter .fill { height: 100%; border-radius: 4px; transition: width .3s ease; }
.rch-batt .hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.rch-batt.clickable { cursor: pointer; }
.rch-batt.clickable:hover .lbl { color: var(--accent-ink); }
@media (max-width: 640px) { .rch-status { grid-template-columns: 1fr; gap: 14px; } }
.rch-card { transition: transform .12s ease, box-shadow .12s ease; }
.rch-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30,28,23,0.07); }
.rch-sec-head h2 { display: flex; align-items: center; gap: 8px; }
.rch-sec-head h2::before { content: ''; width: 4px; height: 16px; border-radius: 2px; background: #1F8A4C; display: inline-block; }

/* U2 (2026-08-01): Ads builder pros/cons + multi-ad queue list */
.choice .pc { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 11px; line-height: 1.4; }
.choice .pc .pro { color: var(--good-ink); font-weight: 600; }
.choice .pc .con { color: var(--bad); font-weight: 600; }
.choice.on .pc .pro, .choice.on .pc .con { opacity: 0.95; }
.m2-queue-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.m2-queue-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); }
.m2-queue-item .qi-main { flex: 1; min-width: 0; }
.m2-queue-item .qi-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-queue-item .qi-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.m2-queue-item .qi-acts { display: flex; gap: 6px; flex-shrink: 0; }

/* U2 (2026-08-01): niche picker on the entry screen */
.niche-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 18px; }
.niche-card { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s, transform .08s; }
.niche-card:hover { border-color: var(--accent); }
.niche-card.on { border-color: var(--accent); background: var(--accent-soft); }
.niche-card .nc-name { font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.niche-card .nc-blurb { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* U2 (2026-08-01): clickable contextual tip (navigates to a screen) */
.ctx-tip.ctx-clickable { transition: transform .1s ease, box-shadow .1s ease; }
.ctx-tip.ctx-clickable:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(26,26,26,0.16); }
.ctx-tip .ct-go { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--accent-ink); }

/* U2 (2026-08-01): queued-offer pending state */
.offer-empty.oe-queued { border-color: var(--accent); background: var(--accent-soft); }
.oe-queued-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-ink); margin-bottom: 6px; }
.oe-launch { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 6px 0 10px; }

/* U2 (2026-08-01): weekly review compact financial strip */
.rv-fin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); }
.rv-fin-cell { text-align: center; }
.rv-fin-cell .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.rv-fin-cell .v { font-size: 17px; font-weight: 800; margin-top: 3px; }
@media (max-width: 640px) { .rv-fin { grid-template-columns: repeat(2, 1fr); } }

/* W1 (2026-08-01): sticky bottom action bar (End Week reachable on long pages) */
/* Mobile Focus Wave (2026-08-04): quiet cards collapse to their head row on
   phones. The chevron flips when open. Desktop never collapses. */
.card.quiet .mchev { display: none; }
@media (max-width: 767px) {
  .card.quiet > .card-head { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .card.quiet .mchev { display: inline-block; float: right; color: var(--muted); transition: transform .15s ease; transform: rotate(-90deg); margin-left: 8px; }
  .card.quiet:not(.mcollapsed) .mchev { transform: rotate(0deg); }
  .card.quiet.mcollapsed > *:not(.card-head) { display: none; }
  .card.quiet.mcollapsed { padding-bottom: 0; }
}

/* IP scores rows (R.O.I. + Six Pillars, 2026-08-04) */
.inner-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.inner-row .ir-k { flex: 0 0 130px; font-size: 12px; font-weight: 700; color: var(--ink); }
.inner-row .ir-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.inner-row .ir-bar > div { height: 100%; background: var(--accent); }
.inner-row .badge { flex: 0 0 auto; min-width: 34px; text-align: center; }

/* ============================================================
   2026-08-04 HIERARCHY WAVE -- three attention tiers.
   Tier 1 (default .card): the decision that spends Focus. Full weight.
   Tier 2: state that informs it (KPI grids, composer). Unchanged.
   Tier 3 (.card.quiet): reference material. Smaller head, softer border,
   blended background. Present, but it no longer competes.
   ============================================================ */
.card.quiet { border-color: var(--border-soft); background: color-mix(in srgb, var(--surface) 88%, var(--bg)); }
.card.quiet > .card-head { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--border-soft); }
.card.quiet > .card-head .right { font-size: 10.5px; }
/* During a play month, off-path rail apps recede. Locked stays dimmer still. */
.rail .app.offpath:not(.active) { opacity: .45; filter: saturate(.55); }
.rail .app.offpath:not(.active):hover { opacity: .85; filter: none; }
/* One coaching voice per screen: when the path banner is speaking, the
   real-world anchor chips stay quiet on that same screen. */
.content:has(.path-banner) .m1-anchor-row { display: none; }

.action-bar {
  /* 2026-08-01 fix: margin-top:auto pushes the bar to the true bottom of the flex column so on
     short pages (e.g. Social) it sits flush at content end instead of floating mid-page; sticky
     bottom keeps it reachable when content overflows on long pages. */
  position: sticky; bottom: 0; margin: auto -26px -22px; margin-top: auto; padding: 12px 26px;
  display: flex; align-items: center; gap: 16px;
  /* 2026-08-02: was a fade to transparent, which let cards bleed through the
     bar and read as clipped. Solid surface, and content gets scroll room below. */
  background: var(--surface);
  border-top: 1px solid var(--border); z-index: 30;
}
.action-bar .ab-focus { font-size: 13px; font-weight: 600; color: var(--muted); }
.action-bar .ab-focus .num { font-size: 17px; font-weight: 800; color: var(--ink); }
.action-bar .ab-focus .ab-slash { color: var(--faint-ink); margin-left: 4px; font-size: 12px; }
.action-bar .ab-over { color: var(--bad); font-weight: 700; margin-left: 6px; }
.action-bar .ab-plan { font-size: 12px; color: var(--muted); }
.action-bar .ab-end { margin-left: auto; }
@media (max-width: 768px) { .action-bar { margin: 8px -20px -20px; padding: 10px 20px 14px; } }

/* W2 (2026-08-01): plan branch chooser + mid-month fork */
.branch-select { margin: 4px 0 8px; }
.branch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.branch-card { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 14px 16px; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s; }
.branch-card:hover { border-color: var(--accent); }
.branch-card.on { border-color: var(--accent); background: var(--accent-soft); }
.branch-card .bc-name { font-weight: 700; font-size: 14px; }
.branch-card .bc-body { font-size: 12.5px; color: var(--muted); margin: 4px 0 8px; line-height: 1.45; }
.branch-card .bc-pc { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; line-height: 1.4; }
.branch-card .bc-pc .pro { color: var(--good-ink); font-weight: 600; }
.branch-card .bc-pc .con { color: var(--bad); font-weight: 600; }
@media (max-width: 640px) { .branch-row { grid-template-columns: 1fr; } }
.plan-fork { border-color: var(--warn); background: var(--warn-soft); }
.plan-fork .pf-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--warn-ink); font-weight: 700; padding: 14px 18px 0; }
.plan-fork .pf-title { font-size: 16px; font-weight: 800; padding: 4px 18px 0; }
.plan-fork .pf-body { font-size: 13px; color: var(--ink); line-height: 1.5; padding: 6px 18px 12px; }
.plan-fork .pf-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 18px 8px; }
.plan-fork .pf-opt { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-family: inherit; transition: border-color .12s; }
.plan-fork .pf-opt:hover { border-color: var(--accent); }
.plan-fork .pf-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.plan-fork .pf-opt-name { font-weight: 700; font-size: 13px; }
.plan-fork .pf-opt-body { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.plan-fork .hint { padding: 0 18px 14px; }
@media (max-width: 640px) { .plan-fork .pf-opts { grid-template-columns: 1fr; } }

/* W3 (2026-08-01): Email software (ESP) section in the Stack */
.stack-esp { margin: 4px 0 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.esp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.esp-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.esp-card.owned { border-color: var(--accent); background: var(--accent-soft); }
.esp-card .mc-top { display: flex; align-items: center; justify-content: space-between; }
.esp-card .mc-name { font-weight: 800; font-size: 14px; }
.esp-card .mc-here { font-size: 12px; color: var(--muted); line-height: 1.45; }
.esp-card .mc-cost { font-size: 12.5px; font-weight: 700; }
.esp-card .btn { align-self: flex-start; margin-top: 4px; }
.esp-off { margin-top: 4px; }
@media (max-width: 640px) { .esp-grid { grid-template-columns: 1fr; } }

/* W4 (2026-08-01): payment processor card */
.processor-card .proc-lede { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.proc-tier { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 11px 13px; cursor: pointer; font-family: inherit; color: inherit; transition: border-color .12s, background .12s; }
.proc-tier:hover:not(:disabled) { border-color: var(--accent); }
.proc-tier.on { border-color: var(--accent); background: var(--accent-soft); cursor: default; }
.proc-tier .pt-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.proc-tier .pt-name { font-weight: 800; font-size: 13.5px; }
.proc-tier .pt-fee { font-size: 11.5px; font-weight: 700; color: var(--accent-ink); }
.proc-tier .pt-desc { font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: 5px; }
.proc-tier .pt-active { font-size: 10.5px; font-weight: 700; color: var(--good-ink); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.proc-foot { font-size: 11.5px; color: var(--ink); margin-top: 8px; font-weight: 600; }
@media (max-width: 640px) { .proc-grid { grid-template-columns: 1fr; } }

/* W5 (2026-08-01): VA delegation panel */
.delegation-panel { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 10px; background: var(--accent-soft); }
.delegation-panel .dp-head { font-weight: 800; font-size: 12.5px; }
.delegation-panel .dp-sub { font-size: 11px; color: var(--muted); line-height: 1.4; margin: 3px 0 8px; }
.dp-toggle { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font-family: inherit; color: inherit; }
.dp-toggle:hover { border-color: var(--accent); }
.dp-toggle.on { border-color: var(--accent); background: var(--surface); }
.dp-toggle .dp-check { flex: 0 0 18px; width: 18px; height: 18px; border: 1.5px solid var(--accent); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--accent-ink); margin-top: 1px; }
.dp-toggle.on .dp-check { background: var(--accent); color: var(--on-accent); }
.dp-toggle .dp-txt { font-size: 12px; line-height: 1.35; }
.dp-toggle .dp-body { color: var(--muted); font-size: 11px; }

/* W6 (2026-08-01): Money hub top-level switch (Money | Reports) */
.money-hub-switch { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
.money-hub-switch .mh-btn { border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--muted); padding: 7px 18px; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; }
.money-hub-switch .mh-btn:hover { color: var(--ink); }
.money-hub-switch .mh-btn.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.rep-hiw-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* W7 (2026-08-01): Team Chat programs + rooms */
.hs-item.hs-program .hs-hash { color: var(--accent-ink); }
.hs-item.hs-rooms { color: var(--accent-ink); font-weight: 600; }
.programs-feed { display: block; }
.programs-lede { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; padding: 10px 12px; background: var(--accent-soft); border-radius: 8px; }
.program-card { border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; margin-bottom: 12px; background: var(--surface); }
.program-card.owned { border-color: var(--accent); background: var(--accent-soft); }
.program-card.locked { opacity: 0.6; }
.program-card .pg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.program-card .pg-name { font-weight: 800; font-size: 14px; }
.program-card .pg-cost { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
.program-card .pg-desc { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 5px 0 8px; }
.program-card .pg-lock { font-size: 11.5px; color: var(--warn-ink); font-weight: 600; }

/* W8 (2026-08-01): mentor next-moves strip + briefing */
.mentor-strip { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); padding: 12px 14px; margin-bottom: 16px; }
.mentor-strip.paid { border-left-color: var(--accent); background: var(--accent-soft); }
.mentor-strip .ms-head { margin-bottom: 8px; }
.mentor-strip .ms-badge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); }
.mentor-strip .ms-move { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.mentor-strip .ms-title { font-size: 13px; font-weight: 700; flex: 1; }
.mentor-strip .ms-why { font-size: 11.5px; color: var(--muted); flex-basis: 100%; line-height: 1.4; margin-top: 2px; }
.mentor-strip .ms-go { border: 1px solid var(--accent); background: transparent; color: var(--accent-ink); font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 7px; cursor: pointer; }
.mentor-strip .ms-headsup { font-size: 11.5px; color: var(--ink); line-height: 1.45; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.mentor-strip .ms-upsell { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--muted); }
.mentor-strip .ms-sub-btn { border: none; background: var(--accent); color: var(--on-accent); font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.mentor-briefing .mb-lede { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.mentor-briefing .mb-move { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.mentor-briefing .mb-move.preview { opacity: 1; }
.mentor-briefing .mb-rank { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.mentor-briefing .mb-body { flex: 1; }
.mentor-briefing .mb-title { font-weight: 700; font-size: 13.5px; }
.mentor-briefing .mb-why { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.mentor-briefing .mb-headsup { font-size: 12.5px; line-height: 1.5; margin: 12px 0; padding: 10px 12px; background: var(--surface); border-radius: 8px; }
.mentor-briefing .mb-locked { font-size: 12px; color: var(--muted); font-style: italic; margin: 8px 0 12px; }
.hs-item.hs-mentor .hs-hash { color: var(--accent-ink); }

/* 2026-08-01 OBSA reskin: editorial serif headings (Playfair Display) + warm palette cleanup */
:root { --font-serif: 'Playfair Display', ui-serif, Georgia, serif; }
.app-title,
.page-head h1,
.start-card h1,
.sheet h1,
.summary-sheet h1,
.era-card h1,
.plan-sheet h1,
.mode-door h2,
.ph-title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* (2026-08-01 icon redesign) The old recolor overrides for g-reach/g-pipeline/
   g-stack are gone: `background:` shorthand was wiping the new tile artwork.
   All rail tiles now come from the icon set defined near the top of this file. */
.fa-slot-middle { border-top: 3px solid #C0A062; }  /* was #4A7DA3 */
.tc-avatar.agent,
.hs-av.agent,
.hh-av.agent,
.cm-av.agent { background: linear-gradient(135deg, #C0A062, #8A5A3C); }  /* was purple/blue */
.hh-av.mentor, .cm-av.mentor, .hs-av.mentor { background: linear-gradient(135deg, #C0A062, #6B4E2A); }  /* was blue/purple */

/* 2026-08-01: live "Feed this funnel" routing control (split from build-stage source picker) */
.fl-feed { margin: 10px 0 6px; }
.fl-feed .fa-lbl { margin-bottom: 6px; }

/* 2026-08-01 (W1a): event outcome view -- what your choice actually did, shown immediately */
.event-outcome .outcome-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.event-outcome .event-why { margin-top: 10px; }
.event-outcome .modal-foot { margin-top: 16px; }

/* W1b (2026-08-01): live Focus-gate warning -- recovery you are paying for that will not count */
.rch-gate-warn { border-color: var(--warn, #C99A2E); background: linear-gradient(180deg, #FFFBF0, #FFF7E6); padding: 14px 18px; }
.rch-gate-warn .rgw-head { font-weight: 800; font-size: 14px; color: #8A6A12; margin-bottom: 8px; }
.rch-gate-warn .rgw-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.rch-gate-warn .rgw-row { font-size: 13px; color: var(--ink); }
.rch-gate-warn .rgw-lost { color: var(--bad); font-weight: 700; }
.action-bar .ab-recwarn { background: #FFF4D6; border: 1px solid var(--warn, #C99A2E); color: #8A6A12; font-weight: 700; font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.action-bar .ab-recwarn:hover { background: #FFEDBF; }

/* W1c (2026-08-01): always-available Mentor popup (replaces the per-app mentor strip) */
/* 2026-08-02: docked into the action bar band so it stops covering card copy. */
/* BM-15 fix (2026-09-05): a floating teaching toast (.ctx-tip, z-index 7500) sat
   on top of the Mentor pill on phones and left about 11x36px of it tappable. The
   host is pointer-events:none, so lifting it above the toast only makes the pill
   itself clickable, never the empty space around it. The toast is also moved clear
   of the pill on phones (below), so nothing is hidden either way. */
#mentor-fab-host { position: fixed; right: 178px; bottom: 15px; z-index: 60; pointer-events: none; }
/* Only while a teaching toast is on screen: the pill outranks the toast, so the
   pill itself always takes the tap. Every heavier layer (sheets, scrims, reviews
   at 8000+) still covers it, and the fab drops back to z-index 60 when the toast
   clears. */
body:has(.ctx-tip) #mentor-fab-host { z-index: 7600; }
#mentor-fab-host .mentor-fab {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  border-radius: 999px; padding: 10px 16px; font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 6px 20px rgba(30,28,23,0.22); transition: transform .15s ease, box-shadow .15s ease;
}
#mentor-fab-host .mentor-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(30,28,23,0.28); }
/* Stays on the BRIGHT accent: this pill's background is var(--ink), so the darker
   text token (correct on cream) would be near-invisible here. */
#mentor-fab-host .mentor-fab .mf-star { color: var(--accent); font-size: 14px; }
#mentor-fab-host .mentor-fab .mf-count {
  background: var(--accent); color: var(--ink); border-radius: 999px;
  min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; padding: 0 6px;
}
#mentor-fab-host .mentor-fab.urgent { background: #8A2F2F; border-color: #8A2F2F; }
#mentor-fab-host .mentor-fab.urgent .mf-count { background: #FFD9D9; color: #8A2F2F; }
.mentor-pop .mp-move { border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px; margin-top: 10px; background: var(--surface); }
.mentor-pop .mp-title { font-weight: 800; font-size: 14.5px; margin-bottom: 4px; }
.mentor-pop .mp-why { font-size: 13px; line-height: 1.55; color: var(--muted); margin-bottom: 9px; }
.mentor-pop .mp-headsup { margin-top: 12px; padding: 11px 14px; border-radius: 10px; background: var(--surface-alt); font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.mentor-pop .mp-upsell { margin-top: 12px; padding: 11px 14px; border-radius: 10px; background: var(--surface-alt); font-size: 12.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1100px) { #mentor-fab-host { right: 14px; bottom: 168px; } }
/* BM-15 (2026-09-05): between phone and desktop the pill sits at bottom:168px and
   outranks a teaching toast, so the toast must clear the pill band here too. */
@media (min-width: 768px) and (max-width: 1100px) { body:has(#mentor-fab-host .mentor-fab) .ctx-tip { bottom: 214px; } }
@media (max-width: 768px) { #mentor-fab-host { right: 14px; bottom: 168px; } #mentor-fab-host .mentor-fab { padding: 9px 13px; font-size: 12px; } }


/* Contrast pass (2026-08-01 audit): the app glyph tiles all carried white letters
   regardless of how light the tile was. On the pale tiles that read 2.49:1 (Desk),
   3.30:1 (Sales) and 3.42:1 (Social). Ink is 7.00 / 5.27 / 5.09 on those same
   tiles. The genuinely dark tiles keep white, which is already their best option. */
.glyph.g-desk, .glyph.g-reach, .glyph.g-signal, .glyph.g-pipeline, .hs-av.advisor { color: var(--ink); }

/* W2 (2026-08-01): notification system -- inline actions, dismiss, and the notification centre */
.notif { position: relative; }
.notif .nbody { min-width: 0; flex: 1; }
.notif .notif-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.notif .notif-x {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; line-height: 1;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 6px; cursor: pointer; font-size: 14px; padding: 0; opacity: 0; transition: opacity .12s ease;
}
.notif:hover .notif-x, .notif:focus-within .notif-x { opacity: 1; }
.notif .notif-x:hover { color: var(--ink); border-color: var(--muted); }
.hud-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); cursor: pointer; font-size: 13px; padding: 0;
}
.hud-bell:hover { border-color: var(--accent); color: var(--ink); }
.hud-bell .hb-count {
  position: absolute; top: -5px; right: -5px; background: var(--accent); color: var(--ink);
  border-radius: 999px; min-width: 17px; height: 17px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 800; padding: 0 4px;
}
.hud-bell.urgent { border-color: #C43D3D; color: #C43D3D; }
.hud-bell.urgent .hb-count { background: #C43D3D; color: #fff; }
.notif-center { max-width: 560px; }
.notif-center .notif { border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; margin-top: 9px; display: flex; gap: 11px; }
@media (max-width: 768px) { .notif .notif-x { opacity: 1; } }

/* ============================================================
   W3a (2026-08-01): HUD REDESIGN
   Three zones instead of a flat accreted strip:
   [ IDENTITY ] [ VITALS -- one instrument cluster ] [ ACTIONS -- pinned right ]
   ============================================================ */
.hud { gap: 0; padding: 0 18px; height: 62px; }
.hud .hud-id { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-right: 18px; }
.hud .hud-id .biz { margin-right: 0; line-height: 1.15; }

/* Vitals read as one grouped instrument, not four loose stats */
.hud .hud-vitals {
  display: flex; align-items: stretch; gap: 0; flex: 1; min-width: 0;
  border-left: 1px solid var(--border);
  overflow: hidden;
}
.hud .hud-vitals .stat {
  padding: 0 16px; justify-content: center; border-right: 1px solid var(--border-soft, var(--border));
  min-width: 0; flex-shrink: 0;
}
.hud .hud-vitals .stat:last-child { border-right: none; }
.hud .hud-vitals .stat .lbl { font-size: 9.5px; letter-spacing: 0.09em; opacity: .85; white-space: nowrap; }
.hud .hud-vitals .stat .val { font-size: 16px; letter-spacing: -0.01em; line-height: 1.1; }
/* cash is the hero number */
.hud .hud-vitals .stat:first-child .val { font-size: 18px; font-weight: 800; }
.hud .hud-vitals .stat[style*="cursor: pointer"]:hover,
.hud .hud-vitals .stat.clickable:hover { background: var(--surface-alt); }

/* Actions pinned right, visually separated from the readouts */
.hud .hud-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding-left: 16px; border-left: 1px solid var(--border);
}
.hud .hud-actions .endweek { margin-left: 2px; }

@media (max-width: 1100px) {
  .hud .hud-vitals { overflow-x: auto; scrollbar-width: none; }
  .hud .hud-vitals::-webkit-scrollbar { display: none; }
  .hud .hud-vitals .stat { padding: 0 12px; }
}
@media (max-width: 768px) {
  .hud { padding: 0 12px; }
  .hud .hud-id { padding-right: 10px; }
  .hud .hud-actions { padding-left: 10px; gap: 6px; }
}

/* ============================================================
   MOBILE HUD REPAIR (2026-08-01 mobile audit) — P0.

   The W3 HUD redesign introduced the three zone wrappers (.hud-id /
   .hud-vitals / .hud-actions) further down this file than the <=767px mobile
   block, so its bare `.hud { }` rule silently overrode the mobile height,
   padding and gap. Combined with five controls in .hud-actions, the strip
   measured 451px against a 375px viewport. Because the strip is nowrap +
   overflow:hidden, the result was that End Week was clipped off the right
   edge and Cash rendered underneath the Profiles button.

   Resolution: the mobile strip carries readouts only (week, cash, focus,
   bell), which is what the original mobile spec called for. End Week already
   exists in the bottom action bar, where it is easier to reach with a thumb.
   Profiles / Stats / Help move to the "More" tab in the bottom tab bar.
   This block sits after the zone definitions so the cascade lands correctly.
   ============================================================ */
@media (max-width: 767px) {
  .hud { height: auto; min-height: var(--mhud-h); padding: 6px 10px; gap: 6px; }
  /* Readouts win the horizontal budget. */
  .hud .hud-vitals { flex: 1 1 auto; min-width: 0; overflow: hidden; border-left: none; }
  .hud .hud-vitals .stat { padding: 0 10px; flex: 0 1 auto; min-width: 0; }
  .hud .hud-vitals .stat .val,
  .hud .hud-vitals .stat .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud .hud-vitals .stat:first-child .val { font-size: 16px; }
  .hud .hud-id { padding-right: 0; }
  .hud .hud-actions { padding-left: 6px; gap: 4px; border-left: none; }
  /* Moved to the More tab. */
  .hud .hud-prof, .hud .hud-stats, .hud .hud-help { display: none !important; }
  /* Redundant on mobile: the bottom action bar carries the real one. */
  .hud .hud-actions .endweek { display: none !important; }
}

/* ============================================================
   LAPTOP HUD FIT (2026-08-01 design audit) — P1.
   The vitals cluster needs 448px for Cash / Runway / Focus / Condition, but the
   actions cluster (Profiles + Stats + Help + bell + End Week, all with text
   labels) leaves it only 424px at 1440, 350px at 1366 and 264px at 1280. Since
   .hud-vitals is overflow:hidden, CONDITION — a core vital the whole inner-game
   layer runs on — was simply cut off on the three most common laptop widths.
   Verified clipped at 1280/1366/1440 and fine at 1600/1920.

   Reclaim the space from the actions cluster instead of from the readouts: the
   three secondary buttons lose their text labels and become icons (they keep
   their tooltips and aria-labels), and the stat padding tightens. Below 1300 the
   Runway readout also drops, since it is derived from cash and burn and is shown
   in full on the Money page. */
@media (max-width: 1500px) {
  .hud .hud-prof, .hud .hud-stats, .hud .hud-help {
    padding: 0; width: 38px; min-width: 38px; justify-content: center;
    font-size: 0; gap: 0; flex: 0 0 auto;
  }
  .hud .hud-prof .qc, .hud .hud-stats .qc, .hud .hud-help .qc { font-size: 14px; }
  .hud .hud-vitals .stat { padding: 0 10px; }
}
@media (max-width: 1300px) {
  .hud .hud-vitals .stat-runway { display: none; }
  .hud .hud-vitals .stat { padding: 0 8px; }
}

/* Bottom action bar vs the fixed mobile tab bar (2026-08-01 mobile audit) — P0.
   .action-bar is sticky bottom:0, and .mtabbar is fixed across the bottom 60px,
   so the bar's contents (the Focus counter and the real End Week button) sat
   underneath the tab bar and could not be read or tapped. Lift the sticky stop
   above the tab bar. */
@media (max-width: 767px) {
  .action-bar {
    /* Scott 2026-08-04: sticky-bottom inside an overflow container drops out on
       iOS momentum scroll. Fixed above the tab bar is bulletproof and always in
       thumb reach. */
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--mtab-h) + env(safe-area-inset-bottom));
    margin: 0; padding: 10px 16px; z-index: 64;
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(0,0,0,0.07);
  }
  .content { padding-bottom: 150px; }
  /* the HUD copy of End Week is redundant on phones and cramps the top bar */
  .hud .endweek { display: none; }
  body:has(.review-scrim, .modal-scrim, .era-scrim, .plan-screen, .summary-scrim, .hiw-scrim) .action-bar { display: none; }
  /* Creatives table: same 390px column collision the sends table had. Stack. */
  .creatives-tbl, .creatives-tbl tbody { display: block; }
  .creatives-tbl tr { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: center; }
  .creatives-tbl tr:first-child { display: none; }
  .creatives-tbl td { display: block; border: none; padding: 0; }
  .creatives-tbl td:first-child { flex: 1 1 100%; }
}

/* "More" tab + its sheet rows. */
@media (max-width: 767px) {
  .mtab-more .mtab-ic { font-size: 19px; line-height: 1; }
  .msheet-app .glyph.gl-more {
    background: var(--surface-alt); color: var(--ink);
    border: 1px solid var(--border); font-size: 15px;
  }
}

/* ============================================================
   W3b (2026-08-01): END WEEK restyle.
   Was a flat gold rectangle that washed out against the cream surface and read
   the same weight in the HUD as in the sticky bar. It is the single most
   consequential button in the game (it commits the week and cannot be undone),
   so it now reads as the deliberate commit action: depth, a crisp edge, a
   nudging arrow, and an unmistakable disabled state.
   ============================================================ */
.endweek {
  position: relative;
  /* Scott 2026-08-03: ink, not gold, for action buttons. Gold stays as accent. */
  background: linear-gradient(180deg, #332e22 0%, #26221a 60%, #1f1c15 100%);
  color: #F6F1E7;
  font-weight: 800; font-size: 13.5px; letter-spacing: 0.01em;
  padding: 11px 20px; border-radius: 10px; font-family: inherit;
  border: 1px solid #17140e;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 2px 6px rgba(30,28,23,0.14);
  transition: transform .1s ease, box-shadow .14s ease, filter .14s ease;
  cursor: pointer;
}
.endweek:hover:not(:disabled) {
  filter: brightness(1.04);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 4px 12px rgba(30,28,23,0.2);
  transform: translateY(-1px);
}
.endweek:active:not(:disabled) { transform: translateY(0) scale(0.985); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 3px rgba(30,28,23,0.16); }
.endweek:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.endweek:disabled {
  background: var(--surface-alt); color: var(--muted);
  border-color: var(--border); box-shadow: none; cursor: not-allowed; filter: none;
  text-decoration: none;
}
/* the sticky bar copy is the primary, full-weight commit; the HUD copy is the compact shortcut */
.action-bar .endweek.ab-end { padding: 12px 26px; font-size: 14px; border-radius: 11px; }
.hud .hud-actions .endweek { padding: 9px 16px; font-size: 13px; }

/* ============================================================
   W3c (2026-08-01): RECHARGE design + padding pass.
   Problems found on review: (1) the last row of recovery cards was clipped
   under the sticky action bar because .content had no bottom clearance;
   (2) 4-up at minmax(260px) crammed the copy so every card wrapped to a
   different height, breaking the grid rhythm; (3) the per-card Focus-gate
   hint appears on some cards and not others, so rows jumped in height.
   ============================================================ */
/* the sticky action bar sits inside .content -- reserve room so it never covers the last row */
.content > *:last-child:not(.action-bar) { margin-bottom: 8px; }
.content .action-bar { margin-top: auto; }
.rch-grid + *, .content > .rch-grid:last-of-type { padding-bottom: 4px; }

/* wider cards = better line lengths and far less ragged wrapping */
.rch-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: stretch; }
.rch-card { padding: 15px 16px 16px; gap: 9px; }
.rch-card .rch-c-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* keep the body copy from collapsing rows to wildly different heights */
.rch-card .rch-c-line { min-height: 34px; }
/* the gate hint only shows on gated items; reserve its space so rows stay level */
.rch-card .rch-good-line, .rch-card .rch-warn-line { margin-top: 2px; }
.rch-card .btn { margin-top: auto; }

@media (max-width: 900px) { .rch-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
@media (max-width: 560px) { .rch-grid { grid-template-columns: 1fr; } }

/* ============================================================
   W3d (2026-08-01): SOCIAL rework -- explainer + two-job tabs
   ============================================================ */
.social-explain { position: relative; }
.social-explain.open {
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 42px 15px 16px;
}
.social-explain .se-title { font-weight: 800; font-size: 13px; letter-spacing: .01em; margin-bottom: 9px; }
.social-explain .se-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.social-explain .se-col { font-size: 12.5px; line-height: 1.55; }
.social-explain .se-col b { display: block; color: var(--ink); margin-bottom: 2px; }
.social-explain .se-col span { color: var(--muted); }
.social-explain .se-x {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; line-height: 1;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 7px; cursor: pointer; font-size: 15px; padding: 0;
}
.social-explain .se-x:hover { color: var(--ink); }
.social-explain .se-show {
  background: none; border: 1px dashed var(--border); color: var(--muted);
  font-family: inherit; font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.social-explain .se-show:hover { border-color: var(--accent); color: var(--ink); }

.social-tabs { display: flex; gap: 8px; }
.social-tabs .st-tab {
  flex: 1; text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 11px 15px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 1px; transition: border-color .12s, background .12s;
}
.social-tabs .st-tab:hover { border-color: var(--accent); }
.social-tabs .st-tab .st-l { font-weight: 800; font-size: 14px; color: var(--ink); }
.social-tabs .st-tab .st-s { font-size: 11.5px; color: var(--muted); }
.social-tabs .st-tab.on { border-color: var(--accent); background: var(--surface-alt); box-shadow: inset 0 -2px 0 var(--accent); }

/* W5a (2026-08-01): funnel retire / cancel-build two-step confirmation row. */
.fl-ctl { flex-wrap: wrap; align-items: center; }
.fl-confirm-q {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 11px; margin-right: 2px;
}

/* W5d (2026-08-01): funnel traffic -> conversion -> output flow + test bench. */
.fx-wrap { margin-top: 10px; padding: 12px 13px 11px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 10px; }
.fx-lbl { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.fx-flow { display: flex; align-items: stretch; gap: 9px; flex-wrap: wrap; }
.fx-node {
  flex: 1 1 150px; min-width: 130px; display: flex; flex-direction: column; gap: 2px; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
}
.fx-node .fx-n { font-size: 19px; font-weight: 800; line-height: 1.1; color: var(--ink); letter-spacing: -0.01em; }
.fx-node .fx-c { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.fx-node.fx-rate { flex: 1 1 190px; background: transparent; border-style: dashed; justify-content: center; }
.fx-node.fx-out { border-color: var(--accent); }
.fx-node.fx-out .fx-n { color: var(--good-ink); }
.fx-arrow { display: flex; align-items: center; color: var(--faint-ink); font-size: 15px; flex: 0 0 auto; }
.fx-bench { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fx-bench-lbl { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-right: 2px; }
@media (max-width: 640px) { .fx-arrow { display: none; } .fx-node { flex: 1 1 100%; } }

/* W5c/W5e (2026-08-01): funnel build-level picker (scrappy / standard / premium). */
.bl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.bl-opt {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 13px; font-family: inherit; transition: border-color .12s, background .12s;
}
.bl-opt:hover { border-color: var(--accent); }
.bl-opt.on { border-color: var(--accent); background: var(--surface-alt); box-shadow: inset 0 -2px 0 var(--accent); }
.bl-opt .bl-name { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.bl-opt .bl-meta { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.bl-opt .bl-res { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.bl-opt .bl-res.up { color: var(--good-ink); }
.bl-opt .bl-res.down { color: var(--bad); }
.bl-opt .bl-desc { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
@media (max-width: 560px) { .bl-row { grid-template-columns: 1fr; } }

/* W4c (2026-08-01): email sequences panel. */
.seq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; margin-top: 12px; }
.seq-card.locked { opacity: 1; border-style: dashed; }
.seq-card.locked .sc-name::after { content: ' \1F512'; font-size: 12px; }
.seq-card {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
  transition: border-color .12s, background .12s;
}
.seq-card:hover { border-color: var(--accent); }
.seq-card.on { border-color: var(--accent); background: var(--surface-alt); box-shadow: inset 0 -2px 0 var(--accent); }
.seq-card .sc-name { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.seq-card .sc-meta { font-size: 11px; font-weight: 700; color: var(--accent-ink); }
.seq-card .sc-blurb { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }

.seq-active { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.seq-a-head { font-size: 13.5px; color: var(--ink); }
.seq-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; width: 100%; }
.seq-step {
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
  background: var(--surface); display: flex; flex-direction: column; gap: 3px;
}
.seq-step .ss-w { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.seq-step .ss-d { font-size: 11.5px; color: var(--ink); line-height: 1.5; }
.seq-step.done { opacity: .55; }
.seq-step.done .ss-w { color: var(--good-ink); }
.seq-step.now { border-color: var(--accent); background: var(--surface-alt); box-shadow: inset 0 -2px 0 var(--accent); }
@media (max-width: 560px) { .seq-grid { grid-template-columns: 1fr; } }

/* Item 7 (2026-08-01): offer count readout + add-another slot. */
.oc-count-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.oc-count-row { display: grid; grid-template-columns: 1.3fr .7fr 1fr; gap: 10px; align-items: center; font-size: 12.5px; padding: 7px 11px; background: var(--surface-alt); border-radius: 8px; }
.oc-count-row .ocr-t { font-weight: 800; color: var(--ink); }
.oc-count-row .ocr-n { color: var(--muted); font-weight: 700; }
.oc-count-row .ocr-m { font-weight: 800; text-align: right; color: var(--muted); }
.oc-count-row .ocr-m.up { color: var(--good-ink); }
.oc-count-row .ocr-m.down { color: var(--bad); }
.offer-empty.oe-add { border-style: dashed; opacity: .92; }

/* Identity (2026-08-01): Online Business Owner: Simulator wordmark + chip. */
.start-card .brand-h1, .brand-h1 { font-family: 'Playfair Display', serif; font-weight: 600; letter-spacing: -0.01em; }
.brand-chip {
  display: inline-block; align-self: center;
  font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  background: var(--accent); color: #1A1A1A; border-radius: 6px; padding: 4px 11px 3px;
  margin: 2px 0 4px;
}

/* ============================================================
   PROFILES (2026-08-01): manager screen + landing pill.
   ============================================================ */
.landing-profiles { margin-top: 18px; display: flex; justify-content: center; }
.profiles-card { max-width: 720px; }
.profile-list { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 6px 0 14px; }
.profile-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 16px; text-align: left;
}
.profile-row.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.pr-info { display: flex; flex-direction: column; gap: 3px; min-width: 200px; flex: 1; }
.pr-name { font-weight: 800; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.pr-sub { font-size: 12px; color: var(--muted); }
.pr-acts { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.pr-rename-row { display: flex; gap: 8px; align-items: center; }
.pr-rename {
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink);
  border: 1px solid var(--accent); border-radius: 8px; padding: 7px 10px; background: var(--surface-alt);
  min-width: 200px;
}
@media (max-width: 560px) { .profile-row { flex-direction: column; align-items: stretch; } .pr-acts { justify-content: flex-start; } }

/* Design pass (2026-08-01): .live-back-top had no styling anywhere, so it rendered as a raw
   browser-default button on the game entry and Profiles screens. */
.live-back-top {
  align-self: flex-start; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 4px 2px; margin-bottom: 6px;
}
.live-back-top:hover { color: var(--ink); }

/* Offers page: tripwire-is-inert warning (2026-08-01 economics audit). */
.oc-count-warn {
  margin: 0 0 12px; padding: 11px 14px; border-radius: 10px;
  background: var(--warn-soft, #FFF4D6); border: 1px solid var(--warn);
  border-left-width: 3px; color: var(--ink); font-size: 13px; line-height: 1.55;
}
.oc-count-note { margin: 8px 0 10px; padding: 9px 12px; border: 1px solid var(--border-soft); border-left: 3px solid var(--gold, #b8963e); border-radius: 6px; font-size: 12.5px; color: var(--ink); background: color-mix(in srgb, var(--gold, #b8963e) 6%, transparent); }
.oc-count-warn b { color: var(--warn-ink); }

/* SIM BRIDGE (2026-08-01): permanent chip on runs seeded from the player's scan. */
.sim-chip {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  padding: 3px 8px; border-radius: 999px; cursor: help;
  background: var(--accent-soft, #F2E8D5); color: var(--accent-ink);
  border: 1px solid var(--accent);
}
@media (max-width: 767px) { .sim-chip { font-size: 9px; padding: 2px 6px; } }

/* Third door (2026-08-01): Test Your Next Move -- the stress-test product. */
.mode-door-test { border-color: var(--border); }
.mode-door-test:hover { border-color: var(--accent); }
.md-badge-test { color: var(--goldink, #6B5626); }


/* ---- Year-end review (2026-08-02) ---- */
.ye-sheet { max-width: 560px; }
.ye-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0 4px; }
.ye-stat { border: 1px solid var(--border-soft); border-radius: 8px; padding: 12px 14px; background: var(--surface-2, rgba(0,0,0,.02)); }
.ye-stat-v { font-family: var(--font-display, Georgia, serif); font-size: 22px; line-height: 1.15; color: var(--ink); }
.ye-stat-l { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.ye-stat-s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ye-diag { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--border-soft); border-left: 3px solid var(--gold, #C0A062); border-radius: 8px; }
.ye-diag-h { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ye-diag p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.ye-detail { margin: 12px 2px 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.ye-next { margin: 18px 0 0; padding: 15px 16px; border-radius: 8px; background: var(--surface-2, rgba(0,0,0,.03)); border: 1px solid var(--border-soft); }
.ye-next-h { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ye-next p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.ye-cta { display: inline-block; text-decoration: none; }
@media (max-width: 560px) { .ye-grid { grid-template-columns: 1fr 1fr; } .ye-stat-v { font-size: 19px; } }


/* ---- Feedback (2026-08-02) ---- */
/* z-index 8600: full-screen surfaces (.screen, .plan-screen) sit at 60-80 and cover
   the whole viewport, so a low z-index made this button visible but unclickable.
   It sits below the tip layer (9000) and above every game surface. */
.fb-fab, .fb-sheet { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.fb-fab { position: fixed; right: 14px; bottom: 14px; z-index: 8600; padding: 7px 13px; font-size: 12px; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface, #fff); color: var(--muted);
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.06); opacity: .75; }
.fb-fab:hover { opacity: 1; color: var(--ink); }
@media (max-width: 900px) { .fb-fab { bottom: 62px; right: 10px; padding: 6px 11px; font-size: 11px; } }
.fb-sheet { max-width: 480px; }
.fb-kinds { display: grid; gap: 7px; margin: 14px 0 12px; }
.fb-kind { text-align: left; padding: 10px 13px; border: 1px solid var(--border-soft); border-radius: 8px;
  background: transparent; cursor: pointer; }
.fb-kind:hover { border-color: var(--gold, #C0A062); }
.fb-kind.sel { border-color: var(--gold, #C0A062); background: color-mix(in srgb, var(--gold, #C0A062) 8%, transparent); }
.fb-kind-l { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fb-kind-h { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.fb-text { width: 100%; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px;
  font: inherit; font-size: 13.5px; background: var(--surface, #fff); color: var(--ink); resize: vertical; }
.fb-email-row { margin-top: 9px; }
.fb-email { width: 100%; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: 8px;
  font: inherit; font-size: 13px; background: var(--surface, #fff); color: var(--ink); }
.fb-msg { min-height: 18px; margin-top: 8px; font-size: 12.5px; color: var(--warn-ink, #8a6d1f); }

/* ---- Year-end share (2026-08-02) ---- */
.ye-share { margin: 16px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.ye-share-out { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.ye-share-link { flex: 1; min-width: 200px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--surface, #fff); }
/* ---- Referral boost stamp (2026-08-02) ---- */
.boost-chip { display: inline-block; margin-left: 7px; padding: 2px 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #7a6423; background: rgba(192,160,98,.16);
  border: 1px solid rgba(192,160,98,.45); border-radius: 999px; vertical-align: middle; }
.ye-ref { font-size: 12px; color: var(--muted); cursor: pointer; line-height: 1.5; }
.ye-ref-link { color: var(--ink); font-weight: 600; word-break: break-all; }
.ye-ref.copied::after { content: ' copied'; color: #2c7a3f; font-weight: 700; }
.ye-ref-n { color: #7a6423; font-weight: 700; }
/* ---- dead magic-link notice (2026-08-02) ---- */
.linkfail-note { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 8700;
  max-width: min(480px, calc(100vw - 24px)); background: #FFF7E6; border: 1px solid #C99A2E; color: #6b5310;
  border-radius: 10px; padding: 11px 38px 11px 16px; font-size: 13.5px; line-height: 1.5;
  box-shadow: 0 8px 26px rgba(26,22,14,.14); }
.linkfail-note b { color: #55420c; }
.linkfail-x { position: absolute; right: 8px; top: 7px; background: none; border: none; cursor: pointer;
  font-size: 17px; color: #8a6d1f; padding: 2px 6px; }
/* ---- account controls in profiles (2026-08-02) ---- */
.acct-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.acct-line { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.acct-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-warn { margin-top: 8px; font-size: 12.5px; color: #8a2c2c; line-height: 1.5; }


/* ---- Mobile polish wave (2026-08-02, Scott's screenshots) ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 100%; }
@media (max-width: 640px) {
  /* Creatives table: impressions is the most droppable column on a phone */
  table.creatives-tbl th:nth-child(3), table.creatives-tbl td:nth-child(3) { display: none; }
  table.creatives-tbl th, table.creatives-tbl td { padding-left: 6px; padding-right: 6px; }
  /* Mentor pill: icon-only so it stops covering buttons and budget chips */
  #mentor-fab-host .mentor-fab .mf-txt { display: none; }
  #mentor-fab-host .mentor-fab { padding: 10px 12px; }
  /* Feedback chip clears the End Week bar instead of crowding it */
  .fb-fab { bottom: 132px; }
}


/* iOS tap zoom (2026-08-03, Scott): double-tapping buttons zoomed the page.
   `manipulation` keeps pan and pinch but kills double-tap-to-zoom on every
   interactive surface. Applied broadly on purpose: the game has no legit
   double-tap gesture anywhere. */
html, body, button, a, input, select, textarea, label,
.choice, .card, .sheet, .modal, .opt, .mtab, .endweek, .btn { touch-action: manipulation; }


/* Queued-action confirmations (2026-08-03) */
.toast.queued-toast { display:flex; align-items:flex-start; gap:9px; border-left: 3px solid var(--good, #3E7C4F); }
.toast.queued-toast .qt-check { color: var(--good, #3E7C4F); font-weight: 800; }


/* ----- Custom start redesign (2026-08-04, Scott: "needs a better design") ----- */
.start-sec-head { margin: 26px 0 14px; text-align: left; }
.start-sec-head .ss-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-ink); font-weight: 800; margin-bottom: 4px; }
.start-sec-head .ss-title { font-family: "Playfair Display", Georgia, serif; font-size: 21px; letter-spacing: -0.01em; font-weight: 600; color: var(--ink); }
.start-sec-head .ss-sub { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin-top: 5px; max-width: 560px; }

.niche-grid { gap: 12px; }
.niche-card { border-radius: 14px; padding: 15px 16px; position: relative; background: var(--surface); }
.niche-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(30, 28, 23, 0.07); }
.niche-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px rgba(30, 28, 23, 0.06); }
.niche-card .nc-name { font-family: "Playfair Display", Georgia, serif; font-size: 15.5px; font-weight: 600; }
.niche-card.on::after { content: "\2713"; position: absolute; top: 10px; right: 12px; font-size: 12px; font-weight: 800; color: var(--accent-ink); }

.origin-grid { gap: 12px; }
.origin-card { border-radius: 14px; padding: 16px 15px 14px; position: relative; overflow: hidden; }
.origin-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; transition: background .15s; }
.origin-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(30, 28, 23, 0.08); }
.origin-card.on { box-shadow: 0 0 0 1px var(--accent), 0 8px 22px rgba(30, 28, 23, 0.07); }
.origin-card.on::before { background: var(--accent); }
.origin-card.on::after { content: "Your pick"; position: absolute; top: 10px; right: 12px; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-ink); }
.origin-card .oc-name { font-family: "Playfair Display", Georgia, serif; font-size: 16.5px; font-weight: 600; letter-spacing: 0; }
.origin-card .oc-stat .v.num, .origin-card .oc-stats .v { font-size: 15px; }
.origin-card .oc-twist { background: var(--panel, #F6F1E7); border-radius: 8px; padding: 8px 10px; margin-top: auto; }

.biz-name-input { width: 100%; max-width: 480px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px; font-family: "Playfair Display", Georgia, serif; font-size: 17px; background: var(--surface); color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.biz-name-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }


/* ============================================================
   MOMENTUM MONTH (2026-08-04). One screen, three numbers, one card,
   one big button. Game juice per Scott's ruling: motion, count-ups,
   a gold burst on win reveals.
   ============================================================ */
.mom-screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px 22px 40px; max-width: 480px; margin: 0 auto; position: relative; text-align: center; }
.mom-brand { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mom-week { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; color: var(--ink); }
.mom-week span { color: var(--muted); font-size: 18px; }
.mom-streak { font-size: 15px; font-weight: 700; color: var(--accent-ink); }
.mom-nums { display: flex; gap: 12px; width: 100%; justify-content: center; }
.mom-num { flex: 1; max-width: 140px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 10px; position: relative; }
.mom-num .mn-v { font-size: 22px; font-weight: 800; color: var(--ink); }
.mom-num .mn-k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.mom-num .mn-delta { position: absolute; top: -10px; right: 8px; background: var(--good, #1F8A4C); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; animation: momPop .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: .9s; }
.mom-prog { display: flex; gap: 7px; }
.mom-prog .mp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); transition: background .3s; }
.mom-prog .mp-dot.on { background: var(--accent); }
.mom-card { width: 100%; background: var(--surface); border: 1px solid var(--accent); border-radius: 16px; padding: 22px 20px; box-shadow: 0 10px 34px rgba(20,18,14,.10); animation: momIn .4s cubic-bezier(.2,.9,.3,1) both; }
.mom-card .mc-title { font-family: 'Playfair Display', Georgia, serif; font-size: 21px; color: var(--ink); margin-bottom: 6px; }
.mom-card .mc-why { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.mom-card .mom-do { width: 100%; font-size: 15px; padding: 13px 0; }
.mom-new { display: inline-block; background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; animation: momPop .5s cubic-bezier(.2,1.4,.4,1) both; }
.mom-ready { border-style: dashed; box-shadow: none; }
.mom-end { font-size: 16px; padding: 14px 34px; border-radius: 13px; }
.mom-end.pulse { animation: recoveryPulse 1.6s ease-in-out infinite; }
@keyframes recoveryPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,150,62,.08); }
  50% { box-shadow: 0 0 0 5px rgba(184,150,62,.18); }
}
.hand-queue { text-align: left; border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.hand-queue summary, .recovery-device summary { cursor: pointer; font-size: 13px; font-weight: 700; padding: 6px 0; }
.hand-queue > .btn { margin: 8px 0; }
.hand-queue .plan-list { padding: 4px 0; }
.hand-queue .plan-item { flex-wrap: wrap; overflow-wrap: anywhere; }
.hand-end { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 45; }
.recovery-sheet { max-width: 560px; margin: auto; padding: 24px; }
.recovery-sheet .foot, .recovery-summary .foot { flex-wrap: wrap; gap: 10px; }
.recovery-summary .save-chip { margin: 12px 0; }
.recovery-device { margin-top: 18px; text-align: left; }
.recovery-device .profile-row { flex-wrap: wrap; gap: 8px; }
.mom-screen > .save-chip { align-self: flex-end; white-space: normal; text-align: left; }
.mom-skip { background: none; border: none; color: var(--faint-ink); font-size: 12px; text-decoration: underline; cursor: pointer; margin-top: 6px; }
.mom-story { font-size: 13.5px; color: var(--ink); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 12px; padding: 12px 16px; line-height: 1.55; animation: momIn .5s .4s cubic-bezier(.2,.9,.3,1) both; }
.mom-burst { position: absolute; top: 12%; left: 50%; width: 340px; height: 340px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(circle, rgba(184,150,62,.32) 0%, rgba(184,150,62,0) 62%); animation: momBurst .9s cubic-bezier(.2,.8,.3,1) both; }
.mom-flavors { display: flex; flex-direction: column; gap: 10px; }
.mom-flavor { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; text-align: left; cursor: pointer; transition: border-color .15s, transform .12s; }
.mom-flavor:hover { border-color: var(--accent); }
.mom-flavor:active { transform: scale(.98); }
.mom-flavor .mf-label { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.mom-flavor .mf-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mom-card.reacted { border-color: var(--good, #1F8A4C); animation: momReact .3s cubic-bezier(.2,1.2,.4,1); }
.mom-react { font-size: 14px; color: var(--ink); line-height: 1.6; padding: 6px 2px; }
.mom-feed { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.mom-feed-line { font-size: 11.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--border-soft); border-radius: 999px; padding: 6px 14px; animation: momIn .35s both; text-align: left; }
@keyframes momReact { from { transform: scale(.96); } to { transform: scale(1); } }
.mom-plays { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.mom-play { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 14px; cursor: pointer; text-align: center; transition: border-color .15s, transform .15s; }
.mom-play:hover { border-color: var(--accent); transform: translateY(-2px); }
.mom-play .mpl-name { font-family: 'Playfair Display', Georgia, serif; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.mom-play .mpl-tag { font-size: 11.5px; color: var(--muted); }
@keyframes momIn { from { transform: translateY(18px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes momPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes momPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(184,150,62,.35); } 50% { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(184,150,62,0); } }
@keyframes momBurst { from { transform: translateX(-50%) scale(.2); opacity: 0; } 40% { opacity: 1; } to { transform: translateX(-50%) scale(1); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .mom-end.pulse, .mom-burst, .mom-card, .mom-story, .mom-new, .mom-num .mn-delta { animation: none !important; } }

/* Wave 1: unlock track + map */
.mom-track { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 999px; padding: 8px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.mom-track .mt-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mom-track .mt-label b { color: var(--accent-ink); }
.mom-track .mt-bar { display: block; width: 100%; height: 4px; border-radius: 3px; background: var(--border); overflow: hidden; }
.mom-track .mt-bar > span { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.mom-map-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border-soft); font-size: 13px; text-align: left; }
.mom-map-row b { color: var(--ink); }
.mom-map-row span { color: var(--muted); font-size: 12px; text-align: right; }
.mom-map-row.on b::before { content: '\2713  '; color: var(--good, #1F8A4C); }
.mom-map-row.next { background: var(--accent-soft); border-radius: 8px; border-bottom: none; padding: 9px 10px; }
.mom-map-more { font-size: 11.5px; color: var(--faint-ink); padding: 10px 4px 0; text-align: center; }

/* Wave 2: the weekly hand */
.mom-hand { justify-content: flex-start; padding-top: 26px; gap: 14px; }
.mom-handwrap { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.mom-pips { display: flex; align-items: center; gap: 4px; }
.mom-pips .pip { width: 10px; height: 14px; border-radius: 3px; background: var(--accent); opacity: .9; }
.mom-pips .pip.used { background: var(--border); opacity: 1; }
.mom-pips .pip-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-left: 8px; }
.mom-beat { text-align: left; padding: 16px 16px 14px; }
.mom-beat .mc-line { display: flex; justify-content: space-between; align-items: baseline; }
.mom-beat .mc-title-s { font-family: 'Playfair Display', Georgia, serif; font-size: 17px; color: var(--ink); }
.mom-beat .mc-cost { font-size: 12px; color: var(--accent-ink); font-weight: 700; }
.mom-beat .mc-why { margin-bottom: 10px; }
.mom-beat.queued { border-color: var(--good, #1F8A4C); opacity: .92; }
.mom-beat .mom-flavors { gap: 7px; }
.mom-beat .mom-flavor { padding: 10px 13px; }
.mom-event { border-color: var(--bad, #B23B2E); }
.mom-event .mom-new { background: var(--bad, #B23B2E); color: #fff; }
.mom-course .mom-new { background: var(--ink); color: #fff; }
.mom-dock { display: flex; gap: 8px; width: 100%; justify-content: center; }
.mom-dockbtn { flex: 1; max-width: 110px; min-height: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 6px; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.mom-dockbtn:hover { border-color: var(--accent); }
.mom-dockdesk { border-style: dashed; }
.mom-return { position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%); z-index: 8000; background: var(--ink); color: var(--surface); border: none; border-radius: 999px; padding: 10px 22px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 28px rgba(20,18,14,.3); }

/* Sections + Help me */
.mom-sect { width: 100%; text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 -4px; }
.mom-sect.hot { color: var(--accent-ink); }
.mom-help { position: fixed; bottom: 16px; right: 16px; z-index: 8200; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; box-shadow: 0 6px 20px rgba(20,18,14,.12); }
.mom-help:hover { color: var(--ink); border-color: var(--accent); }
.mom-help-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.mom-help-row b { color: var(--ink); }
.mom-help-row span { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* The Briefing */
.brief-rows { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.brief-row { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-align: left; }
.brief-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 15px; background: none; border: 0; cursor: pointer; font: inherit; }
.brief-head .bh-t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.brief-head .bh-sub { margin-left: auto; font-size: 12px; color: var(--muted); }
.brief-head .bh-chev { color: var(--muted); font-size: 15px; transform: rotate(90deg); transition: transform .18s; }
.brief-row.open .bh-chev { transform: rotate(-90deg); }
.brief-body { display: none; padding: 2px 15px 13px; }
.brief-row.open .brief-body { display: block; }
.brief-num { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; color: var(--muted); }
.brief-num b { color: var(--ink); font-weight: 700; text-align: right; }
.brief-num:last-child { border-bottom: 0; }
.brief-full { width: 100%; margin-top: 4px; padding: 12px; background: none; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.brief-full:hover { color: var(--ink); border-color: var(--accent); }
.brief-body .notif { padding: 8px 0; }
.mom-more { right: auto; left: 16px; }

/* Guided tours (wk9-12) + card room chips + dock hints + recap tease */
body.tour-mode .content { opacity: .96; }
/* Tour curation (2026-08-05): locked and not-yet-relevant options stay out of
   sight while the room is being introduced. */
body.tour-mode .locked, body.tour-mode .mn-lock, body.tour-mode .offpath { display: none !important; }
body.tour-mode .content { padding-bottom: 250px !important; }
body.tour-mode .main { padding-bottom: 0; }
.tour-chrome { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8900; pointer-events: none; display: flex; flex-direction: column; gap: 8px; padding: 0 14px 74px; }
.tour-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 8901; background: #14120e; color: #f4efe4; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-align: center; padding: 9px 12px; }
.tour-notes { display: flex; flex-direction: column; gap: 6px; max-width: 480px; margin: 0 auto; width: 100%; }
.tour-note { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink); box-shadow: 0 6px 18px rgba(20,18,14,.12); }
.mom-return.tour-back { z-index: 9000; bottom: 18px; }
.mc-room { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft, rgba(154,129,69,.12)); border-radius: 6px; padding: 2px 7px; margin-left: auto; margin-right: 8px; }
.mc-line .mc-cost { margin-left: 0; }
.mom-dock-hint { width: 100%; text-align: center; font-size: 11.5px; color: var(--muted); margin-top: -2px; }
.mom-tease { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; animation: fadeIn .5s; }

/* Design-review wave (2026-08-07) */
.mom-bat { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.mom-bat .bat-shell { display: inline-block; width: 26px; height: 11px; border: 1.5px solid var(--muted); border-radius: 3px; padding: 1px; position: relative; }
.mom-bat .bat-shell::after { content: ''; position: absolute; right: -4px; top: 2.5px; width: 2.5px; height: 4px; background: var(--muted); border-radius: 0 1px 1px 0; }
.mom-bat .bat-fill { display: block; height: 100%; background: #2E7D32; border-radius: 1.5px; }
.mom-bat.mid .bat-fill { background: #C77E1D; }
.mom-bat.low .bat-fill { background: #B3261E; }
.mom-bat.low { color: #B3261E; }
.mom-cause { margin: 2px 0 6px; font-size: 13px; color: var(--accent-ink); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; max-width: 340px; }
/* Shell-native event drama: cream world, not a white void */
.modal-scrim.shell-event { background: rgba(250,247,240,.97); }
.modal-scrim.shell-event .modal.event-modal { background: var(--bg, #faf7f0); border: none; box-shadow: none; max-width: 440px; width: 100%; max-height: 100dvh; padding: 18px 18px 28px; }
.modal-scrim.shell-event .modal.event-modal h2 { font-family: 'Cormorant Garamond', serif; font-size: 28px; }
.modal-scrim.shell-event .opt, .modal-scrim.shell-event .btn { border-radius: 14px; }
.sev-ctx { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.sev-week { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 700; color: var(--ink); }
.sev-counters { display: flex; gap: 10px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.sev-help { position: fixed; bottom: 14px; right: 14px; }

/* Isolated rooms (wk7-12) + first-visit tutorial */
body.room-iso .mtabbar, body.room-iso #rail { display: none !important; }
body.room-iso .content { padding-bottom: 90px !important; }
body.room-intro .tour-chrome { pointer-events: auto; }
.tour-ok { max-width: 440px; margin: 0 auto; width: 100%; pointer-events: auto; }
body:not(.room-intro) .tour-chrome { display: none; }

/* Fix-all wave (2026-08-08) */
.brief-intro { font-size: 12.5px; color: var(--accent-ink); background: var(--accent-soft, rgba(154,129,69,.1)); border-radius: 8px; padding: 8px 11px; margin: 4px 0 8px; line-height: 1.5; }

/* Sim door horizon (wk13 gate, 2026-08-08) */
.mode-door-horizon { opacity: .92; }
.mode-door-horizon .md-cta { color: var(--muted); }
.md-meter { height: 5px; background: var(--border-soft, #e8e2d4); border-radius: 999px; overflow: hidden; margin: 10px 0 4px; }
.md-meter span { display: block; height: 100%; background: var(--accent, #9a8145); border-radius: 999px; transition: width .4s; }
.md-meter-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* Week-12 graduation + celebration (2026-08-11) */
.grad-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 6px; }
.grad-chip { background: var(--surface, #faf7f0); border: 1px solid var(--border, #e8e2d4); border-radius: 12px; padding: 12px 8px; text-align: center; }
.grad-chip .gc-n { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 700; color: var(--ink, #141210); }
.grad-chip .gc-l { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted, #7d7669); margin-top: 4px; }
.grad-money { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 20px; font-size: 12px; color: var(--muted, #7d7669); }
.grad-money span { padding: 8px 14px; background: var(--accent-soft, #e8dfc5); border-radius: 999px; font-weight: 700; color: var(--ink, #141210); }
.mom-celebrate { text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 22px; letter-spacing: .04em; color: var(--accent-ink, #9a8145); background: linear-gradient(180deg, transparent, rgba(154,129,69,.1)); padding: 14px 0 8px; margin-top: 8px; border-radius: 12px; }
.welcome-row .brief-body { padding-top: 8px; }

/* Recharge catalog collapse (audit 2026-08-12) */
.rch-more-chip { display: block; width: 100%; max-width: 520px; margin: 12px auto 0; padding: 14px 16px; background: var(--surface, #faf7f0); border: 1px dashed var(--border, #e8e2d4); border-radius: 12px; text-align: left; cursor: pointer; font: inherit; color: var(--ink, #141210); }
.rch-more-chip span { display: block; font-size: 13.5px; font-weight: 700; }
.rch-more-chip .chip-sub { font-size: 11.5px; font-weight: 500; color: var(--muted, #7d7669); margin-top: 4px; }
.rch-more-chip:hover { border-color: var(--accent, #9a8145); }

/* Simple/Advanced toggle (audit 2026-08-12) */
.adv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; background: #fff; border: 1px solid var(--border, #e8e2d4); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.adv-chip .ac-tab { padding: 5px 12px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; color: var(--muted, #7d7669); font: inherit; }
.adv-chip .ac-tab.active { background: var(--ink, #141210); color: #fff; }
.adv-chip .ac-buff { font-size: 10px; font-weight: 600; color: #2E7D32; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.adv-chip .ac-buff:empty { display: none; }
.adv-chip .ac-label { color: var(--muted, #7d7669); padding: 5px 10px; }
.adv-chip .ac-hint { color: var(--muted, #7d7669); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 10.5px; padding: 0 8px 0 4px; }

/* Desk see-more chip (audit 2026-08-12) */
.desk-more-chip { display: block; margin: 8px auto 12px; padding: 8px 16px; background: transparent; border: 1px dashed var(--border, #e8e2d4); border-radius: 999px; font: inherit; font-size: 12.5px; color: var(--muted, #7d7669); cursor: pointer; }
.desk-more-chip:hover { color: var(--ink, #141210); border-color: var(--accent, #9a8145); }

/* HUD Sign in pill (audit 2026-08-12) */
.hud-signin { padding: 6px 12px; background: transparent; border: 1px solid var(--border, #e8e2d4); border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink, #141210); cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; margin-left: 6px; }
.hud-signin:hover { border-color: var(--accent, #9a8145); background: rgba(154, 129, 69, 0.06); }
@media (max-width: 500px) { .hud-signin { padding: 5px 10px; font-size: 11px; } }

/* Welcome-back banner (audit 2026-08-12) */
.welcome-back-banner { display: flex; align-items: flex-start; gap: 10px; margin: 10px auto 14px; padding: 12px 16px; max-width: 560px; background: rgba(46, 125, 50, 0.06); border: 1px solid rgba(46, 125, 50, 0.35); border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink, #141210); position: relative; }
.welcome-back-banner .wbb-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #2E7D32; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.welcome-back-banner .wbb-text { flex: 1 1 auto; }
.welcome-back-banner .wbb-text b { color: #2E7D32; }
.welcome-back-banner .wbb-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 18px; color: var(--muted, #7d7669); cursor: pointer; padding: 0 4px; line-height: 1; }
.welcome-back-banner .wbb-x:hover { color: var(--ink, #141210); }
/* RB-08. Scoped to the existing Mentor surfaces. No global UI restyle. */
.recommendation-contract { min-width: 0; overflow-wrap: anywhere; }
.recommendation-contract .rc-mode { font-size: 12px; font-weight: 700; color: var(--ink, #141210); margin-bottom: 10px; }
.recommendation-contract .rc-observation { font-size: 13px; line-height: 1.5; }
.recommendation-contract .rc-constraint { font-size: 15px; line-height: 1.45; font-weight: 700; margin: 8px 0; }
.recommendation-contract .rc-resources { font-size: 12px; line-height: 1.5; padding: 8px 0; }
.recommendation-contract .rc-action { border-top: 1px solid var(--border, #d5cec2); padding: 14px 0; min-width: 0; }
.recommendation-contract .rc-title { font-size: 14px; line-height: 1.45; margin: 0 0 6px; }
.recommendation-contract .rc-reason, .recommendation-contract .rc-direction { font-size: 13px; line-height: 1.55; margin: 5px 0 8px; }
.recommendation-contract .rc-cost { font-size: 12px; line-height: 1.5; font-weight: 600; margin: 8px 0; }
.recommendation-contract .rc-note, .recommendation-contract .rc-provider { font-size: 12px; line-height: 1.55; color: var(--ink, #141210); margin: 10px 0; }
.recommendation-contract .rc-provider { border-top: 1px solid var(--border, #d5cec2); padding-top: 10px; }
.recommendation-contract .rc-details { margin: 10px 0; border: 1px solid var(--border, #d5cec2); border-radius: 8px; padding: 0 10px; }
.recommendation-contract summary, .mentor-briefing > .rc-details summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-size: 13px; font-weight: 600; }
.recommendation-contract .rc-go { min-height: 44px; white-space: normal; text-align: left; max-width: 100%; }
.recommendation-contract button:focus-visible, .recommendation-contract summary:focus-visible,
.mentor-pop > .modal-foot button:focus-visible { outline: 3px solid var(--ink, #141210); outline-offset: 3px; }
.mentor-pop { max-height: min(86vh, 900px); overflow-y: auto; overscroll-behavior: contain; }
.mentor-pop .modal-foot { display: flex; justify-content: flex-end; }
.mentor-pop .modal-foot button { min-height: 44px; }
.mentor-briefing .rc-history { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; }
.mentor-input[data-mentor-provider="disabled"] { display: grid; gap: 8px; }
.mentor-input[data-mentor-provider="disabled"] textarea { min-height: 60px; }
@media (max-width: 420px) {
  .mentor-pop { padding: 16px; width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
  .recommendation-contract .rc-go { width: 100%; }
}

/* Acceptance audit: readable text stays opaque; locks retain labels/borders.
   Brand fill colors are unchanged. Sheets own the layer above fixed controls. */
@media (max-width: 767px) {
  body:has(.msheet-scrim) .mtabbar { z-index: 9301; }
}
.rail .rail-group { color: #b3b3b3; }
.rail .app .app-sub { color: #b3b3b3; }
.rail .app.locked,
.rail .app.offpath:not(.active) { opacity: 1; filter: none; }
.rail .app.offpath:not(.active) .glyph { opacity: .6; }
.rail .app.offpath:not(.active) .app-name { font-weight: 500; }
.rail .app:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.hs-item:focus-visible, .hud-vitals:focus-visible, .m1-strip:focus-visible {
  outline: 3px solid var(--accent-ink); outline-offset: 2px;
}
.hud .hud-vitals .stat .lbl { opacity: 1; color: var(--muted); }
.hs-item.hs-rooms.on, .hs-item.hs-mentor.on, .hs-item.on .hs-hash { color: var(--ink); }
.program-card.locked, .team-card.locked, .fa-tpl.locked, .msheet-app.locked { opacity: 1; }
.program-card.locked .pg-lock { color: var(--warn-ink); }
.funnel .arrow small { opacity: 1; color: var(--muted); }
.offer-empty.oe-add { opacity: 1; }
.fb-fab { opacity: 1; color: var(--muted); }
body:has(.msheet-scrim, .review-scrim, .modal-scrim) .fb-fab { visibility: hidden; pointer-events: none; }
.email-queue .eq .x {
  width: 32px; min-width: 32px; height: 32px; border: 1px solid var(--border);
  border-radius: 6px; background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.email-queue .eq .x:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.avatar[style*="#6e8352" i] { background: #53673f !important; }
.avatar[style*="#b07a2e" i] { background: #8a5d1c !important; }
.avatar[style*="#4a7da3" i] { background: #356589 !important; }
@media (max-width: 767px) {
  .email-queue .eq .x { width: 44px; min-width: 44px; height: 44px; }
  .content > .mom-return {
    position: sticky; top: 64px; bottom: auto; left: auto; transform: none;
    align-self: flex-start; z-index: 25; margin: 0 0 12px; min-height: 44px;
    box-shadow: 0 2px 8px rgba(20,18,14,.12);
  }
  .content { scroll-padding-top: 120px; }
}