/* Zenyth OS — design system (§22). Gold is rationed. Coral, never red.
   Readability over density: generous spacing, obvious hierarchy, nothing squashed. */

:root {
  --bg: #070B18;
  --surface: #0D1326;
  --surface-2: #111931;
  --border: rgba(255,255,255,.07);
  --divider: rgba(255,255,255,.05);
  --gold: #D9B65F;
  --gold-tint: rgba(217,182,95,.12);
  --teal: #6FA89B;
  --teal-tint: rgba(111,168,155,.12);
  --text: #EDEFF5;
  --text-body: #C3C9D8;
  --text-mute: #8891A8;
  --text-dim: #5C6479;
  /* Coral = act on this now. If it's information, it's mute. If it's
     management, it's teal. One coral flare on a quiet board is a signal;
     coral everywhere is wallpaper. Keeps: flagged borders, burning chips,
     overdue chips, catastrophe lines, money moving down. Never: waiting
     states, chase counters, the comms strip, phase labels. */
  --alert: #E07A5F;
  --alert-tint: rgba(224,122,95,.14);
  --radius: 14px;
  --radius-ctl: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-body);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .grotesk { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 500; color: var(--text); }

/* Static starfield — noticed once, then invisible. No animation on the dashboard. */
#stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#stars i { position: absolute; border-radius: 50%; background: #fff; opacity: .12; }
#stars i.g { background: var(--gold); opacity: .28; }

/* R2 — readability beats density. The one-screen target is rescinded:
   scrolling is fine, cramped is not. Nothing that matters under 13px. */
#app { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 28px 40px 110px; }

/* ---------- header ----------
   Named .topbar, never bare .top — "top" is also the gold health state
   (.seg.top, .hbadge.top, .hmetric.top) and a bare .top rule here leaks
   flex + margin into every gold element and snaps health bars in two. */
.topbar {
  display: flex; align-items: baseline; gap: 18px; margin-bottom: 26px; flex-wrap: wrap;
}
.topbar .wordmark { font-size: 23px; letter-spacing: .02em; color: var(--text); text-decoration: none; }
.topbar .wordmark b { color: var(--gold); font-weight: 500; }
.topbar .meta { font-size: 13px; color: var(--text-dim); }
.topbar .spacer { flex: 1; }

/* ---------- the score (G1) — two numbers, loud, both sums ---------- */
.scores { display: flex; gap: 44px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 28px; }
.scores .score b {
  display: block; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 500;
  font-size: 34px; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.scores .score.yours b { font-size: 24px; }
.scores .score > span { font-size: 14px; color: var(--text-mute); }
.scores .score .pending { color: var(--gold); }
.scores .winslink { font-size: 13px; color: var(--text-mute); text-decoration: none; padding-bottom: 4px; }
.scores .winslink:hover { color: var(--gold); }

/* ---------- the money voice (V4) — money never sounds like a percentage ---------- */
/* Revenue, retainer, generated: artifacts of the work, engraved. Rates and
   costs (CAC, cost per booked call) are diagnostics and stay Inter at body
   size. Gold on money only at real moments (best month, wins) — rationed. */
.money {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* the month-as-event line (V10) — above the Money table, same voice up or down */
.money-event { font-size: 15px; color: var(--text-body); padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 0.5px solid var(--divider); line-height: 1.7; }

/* session marks (V7) — a number written this sitting. Static, there or not. */
.fresh { border-bottom: 2px solid var(--gold); padding-bottom: 1px; }

/* phase labels (V8) — the portfolio in motion. Information, never coral. */

/* the needs-you index (V1) — points into the fixed map; mute by design,
   the lane's own coral border is the flare. */
.needsyou { font-size: 13px; color: var(--text-mute); margin: -14px 0 20px; }
.needsyou a { color: var(--text); text-decoration: none; border-bottom: 0.5px solid var(--text-dim); }
.needsyou a:hover { border-bottom-color: var(--gold); }

/* revenue sparkline (G2) — six static bars, gold only on the best month ever */
.spark { display: inline-flex; gap: 3px; align-items: flex-end; height: 16px; }
.spark i { display: inline-block; width: 5px; border-radius: 1px; background: var(--text-body); opacity: .75; }
.spark i.best { background: var(--gold); opacity: 1; }

/* levers & the in-play state (G3/G4) */
.lever { margin-left: 6px; vertical-align: baseline; }
.inplay {
  display: inline-block; font-size: 13px; color: var(--text-mute);
  border: 0.5px solid var(--border); border-radius: 999px; padding: 2px 10px; margin-left: 6px;
  white-space: nowrap;
}

/* the status line (R8) — readable from across the room, 13px minimum, mute.
   Waiting states take gold; they are never coral. */
.lstatus { font-size: 13px; color: var(--text-mute); line-height: 1.5; }
.lstatus.wait { color: var(--gold); }

/* ---------- section headings ---------- */
.section { margin-bottom: 36px; }
.section > header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.section > header h2 { font-size: 19px; letter-spacing: .01em; }
.section > header h2::before { content: '✦ '; color: var(--gold); font-size: 15px; }
.section > header .sub { font-size: 13px; color: var(--text-mute); }
.metaline { font-size: 13px; color: var(--text-mute); margin: -6px 0 12px 0; }

/* ---------- cards & rows ---------- */
.card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
}
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px;
  min-height: 50px;               /* no checkbox row under 40px — used every day */
  border-bottom: 0.5px solid var(--divider);
}
.row.sub { padding: 12px 20px 12px 54px; min-height: 46px; }
.row:last-child { border-bottom: none; }
.row .title { font-size: 16px; color: var(--text); flex: 1; min-width: 0; line-height: 1.45; }
.row .subline { font-size: 14px; color: var(--text-mute); margin-top: 3px; }
.row.done .title { color: var(--text-dim); text-decoration: line-through; }
.row.skipped { opacity: .45; }
.row.skipped .title::after { content: '  · skipped'; font-size: 13px; color: var(--text-dim); }

/* tick circle */
.tick {
  width: 25px; height: 25px; min-width: 25px; border-radius: 50%;
  border: 1.5px solid var(--text-dim); background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 14px; transition: border-color .12s;
}
.tick:hover { border-color: var(--gold); color: var(--gold); }
.tick.on { background: var(--gold); border-color: var(--gold); color: #070B18; }
.tick.disabled { opacity: .35; cursor: not-allowed; }

/* chips — plain-English consequences (§14) */
.chip {
  font-size: 13px; padding: 3px 11px; border-radius: 999px; white-space: nowrap;
  border: 0.5px solid var(--border); color: var(--text-mute);
}
.chip.burn { background: var(--alert-tint); border-color: transparent; color: var(--alert); }
.chip.clock { background: var(--gold-tint); border-color: transparent; color: var(--gold); }
.chip.pin { color: var(--gold); border-color: var(--gold); }

/* phase pill — the border is attention, the pill is phase (§14) */
.pill {
  font-size: 13px; text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 11px; border-radius: 999px; white-space: nowrap;
}
.pill.setup { background: var(--gold-tint); color: var(--gold); }
.pill.management { background: var(--teal-tint); color: var(--teal); }
.pill.paused, .pill.ended { background: rgba(255,255,255,.06); color: var(--text-mute); }

.label { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }

/* ---------- communications strip ---------- */
.comms-toggle {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius);
  padding: 10px 16px; font-size: 14px; color: var(--text-mute); font-family: inherit;
}
.comms-toggle b { color: var(--text); font-weight: 500; }
.comms-body .row .who { min-width: 160px; font-size: 15.5px; color: var(--text); font-family: 'Space Grotesk', sans-serif; }

/* ---------- buttons ---------- */
button, .btn {
  font-family: 'Inter', sans-serif; font-size: 14px;
  background: var(--surface-2); color: var(--text-body);
  border: 0.5px solid var(--border); border-radius: var(--radius-ctl);
  padding: 8px 15px; cursor: pointer;
}
button:hover, .btn:hover { border-color: rgba(255,255,255,.18); color: var(--text); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #070B18; font-weight: 500; }
.btn-gold:hover { background: #e3c476; color: #070B18; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-mute); padding: 5px 10px; }
.btn-ghost:hover { color: var(--text); border-color: transparent; }
.btn-sm { font-size: 13px; padding: 6px 12px; }
.btn-alert { color: var(--alert); }

/* ---------- client lanes (R2) ----------
   Exactly four things: name · health bar · revenue with direction · status.
   Everything else lives inside the client. Fixed positions, always. */
.lane { margin-bottom: 12px; border-left: 2px solid transparent; }
.lane.attn-flagged { border-left-color: var(--alert); }          /* act now */
.lane.attn-blocked, .lane.attn-due { border-left-color: var(--gold); }  /* waiting / due — not coral */
.lane .lane-row {
  display: grid; gap: 12px 22px; align-items: center;
  grid-template-columns: minmax(180px, 1.1fr) auto minmax(180px, 1fr) minmax(170px, 1fr) auto;
  padding: 17px 22px; cursor: pointer;
}
.lane .name { font-size: 17px; color: var(--text); font-family: 'Space Grotesk', sans-serif; }
.lane .lrev { font-size: 14px; color: var(--text-body); }
.lane .lrev .money { font-size: 20px; }
.lane .caret { color: var(--text-dim); text-align: right; }
.lane .funnel-rows { border-top: 0.5px solid var(--divider); padding: 14px 24px 18px; }
.frow { display: flex; align-items: center; gap: 18px; padding: 14px 0; flex-wrap: wrap; }
.frow + .frow { border-top: 0.5px solid var(--divider); }
.frow .fname { font-size: 15.5px; color: var(--text); min-width: 200px; }
.frow .fnext { font-size: 14px; color: var(--text-mute); flex: 1; min-width: 220px; line-height: 1.55; }
.frow .fnums { font-size: 15px; color: var(--text-body); font-variant-numeric: tabular-nums; }
.frow .fnums .money { font-size: 17px; }
.wait { color: var(--text-mute); }
.wait b { color: var(--text); font-weight: 500; }   /* waiting is information, not coral */
.then { color: var(--text-dim); }

.progress { height: 3px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; width: 120px; display: inline-block; vertical-align: middle; }
.progress i { display: block; height: 100%; background: var(--gold); }

/* stage / funnel status */
.stage-card { padding: 18px 20px; border: 0.5px solid var(--border); border-radius: 12px; background: var(--surface-2); min-width: 220px; flex: 1; }
.stage-card.attention { border-color: rgba(224,122,95,.5); background: var(--alert-tint); }
.stage-card.no_data { opacity: .6; }
.stage-card h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); font-weight: 500; margin-bottom: 12px; display: flex; justify-content: space-between; gap: 10px; }
.stage-card h4 .src { text-transform: none; letter-spacing: 0; color: var(--text-dim); font-size: 12.5px; }
.stage-card .m { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; padding: 5px 0; line-height: 1.45; }
.stage-card .m .v { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.stage-card .m.flag .v, .stage-card .m.flag { color: var(--alert); }
.stage-note { font-size: 14px; color: var(--alert); margin-top: 12px; line-height: 1.5; }
.stage-note.grey { color: var(--text-dim); }

/* ---------- forms ---------- */
input, select, textarea {
  font-family: 'Inter', sans-serif; font-size: 15px;
  background: var(--surface-2); color: var(--text);
  border: 0.5px solid var(--border); border-radius: var(--radius-ctl);
  padding: 11px 14px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(217,182,95,.45); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--gold); }
.field { margin-bottom: 20px; }
.field > label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); margin-bottom: 8px; }
.field .hint { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.choices { display: flex; gap: 10px; flex-wrap: wrap; }
.choices label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 0.5px solid var(--border); border-radius: var(--radius-ctl);
  padding: 10px 16px; font-size: 14.5px; color: var(--text-body); background: var(--surface-2);
}
.choices label:has(input:checked) { border-color: var(--gold); color: var(--text); background: var(--gold-tint); }
.choices input { display: none; }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(4,6,14,.7); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 18px; overflow: auto; }
.modal { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 30px; width: 100%; max-width: 540px; }
.modal h3 { font-size: 18px; margin-bottom: 22px; }
.modal .actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }

/* number-typing inside a check task (§12) */
.reading-fields { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0 6px; }
.reading-fields .rf { width: 170px; }
.reading-fields .rf label { display: block; font-size: 13px; color: var(--text-mute); margin-bottom: 6px; }
.lasttime { display: block; font-size: 13px; color: var(--text-dim); margin-top: 4px; }

/* "Update the numbers" (R7) — big inputs, plain labels, last value beneath */
.bigfields { display: grid; grid-template-columns: 1fr; gap: 16px; }
.bigfields .bf label { display: block; font-size: 13.5px; color: var(--text-mute); margin-bottom: 6px; }
.bigfields .bf input { font-size: 18px; padding: 13px 16px; }

/* ---------- client detail ---------- */
.back { font-size: 14px; color: var(--text-mute); text-decoration: none; }
.back:hover { color: var(--text); }
.detail-head { display: flex; align-items: baseline; gap: 16px; margin: 20px 0 14px; flex-wrap: wrap; }
.detail-head h1 { font-size: 30px; }
.detail-head .what { color: var(--text-mute); font-size: 15px; }
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 26px; align-items: start; }
.detail-grid > div { min-width: 0; }   /* wide chain content must not widen the page */
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 0.5px solid var(--divider); font-size: 14.5px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-mute); }
.kv .v { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.pad { padding: 20px 22px; }
.stages-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

.upnext { padding: 22px; display: flex; align-items: center; gap: 16px; }
.upnext .t { font-size: 19px; color: var(--text); font-family: 'Space Grotesk', sans-serif; }
.upnext .why { font-size: 14px; color: var(--text-mute); margin-top: 5px; }

.rowmenu { position: relative; }
.rowmenu > button { visibility: hidden; }
.row:hover .rowmenu > button, .rowmenu.open > button { visibility: visible; }
.menu {
  position: absolute; right: 0; top: 32px; z-index: 20; min-width: 190px;
  background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 9px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 12px; border-radius: 6px; font-size: 14px; }
.menu button:hover { background: rgba(255,255,255,.06); }

.note-thread { border-left: 2px solid var(--divider); margin-left: 12px; padding-left: 14px; }
.note-state { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; }
.note-state.done { color: var(--teal); }
.note-state.declined { color: var(--text-dim); }
.note-state.discuss { color: var(--gold); }

.history .row { padding: 11px 20px; min-height: 0; }
.history .when { font-size: 13px; color: var(--text-dim); min-width: 92px; }

.empty { padding: 34px 22px; color: var(--text-dim); font-size: 14.5px; text-align: center; }

.fold { width: 100%; text-align: center; background: none; border: none; color: var(--text-mute); font-size: 13px; padding: 8px; cursor: pointer; }
.fold:hover { color: var(--text); }

.day-group { margin-bottom: 6px; }
.day-group .label { padding: 12px 20px 4px; display: block; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--surface-2); border: 0.5px solid var(--border); color: var(--text);
  padding: 12px 22px; border-radius: 9px; font-size: 14.5px; z-index: 99;
}
.toast.err { border-color: rgba(224,122,95,.6); color: var(--alert); }

.fab {
  position: fixed; right: 30px; bottom: 30px; z-index: 40;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--gold); color: #070B18; font-size: 29px; line-height: 1;
  border: none; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.fab:hover { background: #e3c476; color: #070B18; }

.devstrip { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 52px; opacity: .65; }

/* ---------- health (§2) — three segments, worst link wins, nothing averaged ---------- */
.healthbar { display: inline-flex; gap: 6px; vertical-align: middle; }
.healthbar .hseg { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.healthbar .hseg em { font-style: normal; font-size: 12px; letter-spacing: .06em; color: var(--text-dim); }
.period-on { color: var(--gold); border-color: var(--gold); }
.healthbar .seg { display: inline-block; width: 42px; height: 9px; border-radius: 4px; background: rgba(255,255,255,.10); }
.healthbar .seg.under { background: var(--alert); }
.healthbar .seg.performing { background: var(--teal); }
.healthbar .seg.top { background: var(--gold); }
.healthbar .seg.testing { background: rgba(255,255,255,.16); }
.healthbar .seg.na { background: rgba(255,255,255,.05); }
/* A layer whose numbers are past the staleness rule (weekly >10d) goes grey —
   it keeps no colour it can no longer vouch for. */
.healthbar .seg.stale { background: rgba(255,255,255,.16); }

/* On the client tab the health bar is a headline element, not a lane glyph —
   the operator asked for it bigger there. Scoped to .funnel-health so the
   compact dashboard lanes keep their small bar. */
.fh-label { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.funnel-health .healthbar { gap: 12px; }
.funnel-health .healthbar .seg { width: 66px; height: 15px; border-radius: 6px; }
.funnel-health .healthbar .hseg { gap: 5px; }
.funnel-health .healthbar .hseg em { font-size: 13px; }
.funnel-health .hbadge { font-size: 13px; padding: 4px 13px; }
@media (max-width: 640px) {
  .funnel-health .healthbar .seg { width: 52px; height: 14px; }
}
.hbadge { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
/* Testing badges carry a sentence — they wrap rather than widen the page. */
.hbadge.testing { white-space: normal; line-height: 1.5; }
.hbadge.under { background: var(--alert-tint); color: var(--alert); }
.hbadge.performing { background: var(--teal-tint); color: var(--teal); }
.hbadge.top { background: var(--gold-tint); color: var(--gold); }
.hbadge.testing { background: rgba(255,255,255,.07); color: var(--text-mute); text-transform: none; letter-spacing: 0; }
.hbadge.sm { font-size: 12px; padding: 2px 9px; }
.hbadge.band-red { background: var(--alert-tint); color: var(--alert); }
.hbadge.band-amber { background: rgba(224,166,95,.14); color: #E0A65F; }
.hbadge.band-green { background: var(--teal-tint); color: var(--teal); }
.hbadge.band-gold { background: var(--gold-tint); color: var(--gold); }

.hpanel { margin-top: 18px; }
.hlayers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.hlayer { border: 0.5px solid var(--border); border-radius: 12px; padding: 16px 18px; background: var(--surface-2); }
.hlayer-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 12px; }

/* Each metric gets room: label, then the number large, then the band beneath. */
.hmetrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 22px; }
.hmetric .hmx { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.hmetric .hlab { font-size: 13.5px; color: var(--text-mute); }
.hmetric .hval { font-size: 22px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; margin: 3px 0 2px; }
.hmetric.under .hval { color: var(--alert); }
.hmetric.top .hval { color: var(--gold); }
.hmetric.grey .hval { color: var(--text-dim); }
.hnote { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }

/* legacy two-column metric line (missing-data lists etc.) */
.hm { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; color: var(--text-body); }
.hm .hv { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.hm.grey, .hm.grey .hv { color: var(--text-dim); }

/* provenance tags (§3.1) — earned vs borrowed, always visible */
.tag { font-size: 13px; padding: 1px 7px; border-radius: 4px; letter-spacing: .02em; }
.tag.zenyth { background: var(--gold-tint); color: var(--gold); }
.tag.provisional { background: rgba(255,255,255,.07); color: var(--text-mute); }
.tag.yours { background: var(--teal-tint); color: var(--teal); }
.tag.edited { background: transparent; color: var(--text-dim); border: 0.5px dashed var(--border); }

.killnote { color: var(--text-body); line-height: 1.5; }
.killnote::before { content: '· '; color: var(--gold); }

/* ---------- the chain (metric hierarchy) — what happened | why ---------- */
.headline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 18px; font-size: 15px; color: var(--text-mute); }
.headline .big { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 36px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.headline .big.under { color: var(--alert); }
.headline .big.top { color: var(--gold); }
.dirn { font-size: 13px; color: var(--text-dim); white-space: nowrap; }

/* The period break between the live money rows and the monthly-call sales
   rows — two months can share the column, and the eye should see the seam. */
.spine-break {
  margin: 18px 0 6px; padding-top: 12px; border-top: 0.5px solid var(--divider);
  font-size: 13px; letter-spacing: .04em; color: var(--text-dim);
}

/* ---------- the spine (R3) — six universal counts, big, calm ----------
   Rates are connective tissue between stages, small and muted. A broken
   stage gets the coral border; a healthy spine is silence. */
.spine { margin-top: 20px; max-width: 620px; }
.stage {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  background: var(--surface-2); border: 0.5px solid var(--border);
  border-left: 3px solid transparent; border-radius: 12px; padding: 14px 20px;
}
.stage.under { border-left-color: var(--alert); }
.stage .big { font-size: 23px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; min-width: 90px; }
.stage .slabel { font-size: 14.5px; color: var(--text-mute); }
.stage .ssub { font-size: 13px; color: var(--text-dim); flex-basis: 100%; }
.conn { padding: 5px 22px; font-size: 13px; color: var(--text-dim); min-height: 14px; }

/* "What could be wrong" (R4) — possibilities, never verdicts. */
.causes {
  margin: 8px 0 8px 14px; padding: 12px 18px;
  border-left: 3px solid var(--alert); border-radius: 0 12px 12px 0;
  background: var(--alert-tint);
}
.causes-head { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--alert); margin-bottom: 8px; }
.cause { font-size: 14.5px; color: var(--text-body); line-height: 1.6; padding: 4px 0; }
.cause-note { font-size: 13px; color: var(--text-mute); margin-top: 6px; }

.dg.under { color: var(--alert); }
.dg.muted { color: var(--text-dim); }

/* ---------- provenance & freshness (D8) — where from, how old ----------
   Always mute, always 13px: information, never coral. Staleness rides on the
   same line ("· not updated in 12d"). */
.prov { display: block; font-size: 13px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }

/* the verdict sentence (D9) — plain English under the headline */
.verdict { font-size: 15px; color: var(--text-body); line-height: 1.6; margin-top: 10px; max-width: 620px; }

/* the ask list (D10) — what to collect, above the fields */
.asklist { font-size: 14px; color: var(--text-body); line-height: 1.7; background: var(--surface-2);
  border: 0.5px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; }

/* collection checklist inside a task (D10) + weekly-check glance rows (D2) */
.checklist { margin-top: 10px; }
.clitem { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; font-size: 14px;
  color: var(--text-body); cursor: pointer; line-height: 1.5; }
.clitem input { width: auto; accent-color: var(--gold); }
.clitem.on span { color: var(--text-dim); text-decoration: line-through; }

/* the weekly check (D2) — one form, sectioned per funnel */
.wc-form { margin-top: 12px; }
.wc-section { border-top: 0.5px solid var(--divider); padding-top: 6px; margin-top: 6px; }
.wc-section:first-child { border-top: none; margin-top: 0; }
.wc-glances { display: flex; gap: 4px 22px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- mobile — lanes stack (§22) ---------- */
@media (max-width: 900px) {
  #app { padding: 22px 16px 110px; }
  .lane .lane-row { grid-template-columns: 1fr auto; }
  .detail-grid { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .comms-body .row { flex-wrap: wrap; }
  .inplay { white-space: normal; }
}
@media (max-width: 640px) {
  /* The title owns the line; chips and buttons wrap underneath it. */
  .row { flex-wrap: wrap; }
  .row .title { min-width: calc(100% - 116px); }
  .frow .fnums { white-space: normal; }
  .stage .big { min-width: 70px; }
  /* When the state chip wraps under the health bar, keep clear air between
     the two so the chip never collides with the segment labels. */
  .lane .hbadge { margin-top: 6px; }
}
@media (max-width: 560px) {
  .lane .lane-row { grid-template-columns: 1fr auto; gap: 10px 14px; }
  /* The two scores stack and stay the first thing seen (G1). */
  .scores { flex-direction: column; align-items: flex-start; gap: 14px; }
  .scores .score b { font-size: 30px; }
}