/* ═══════════════════════════════════════════════════════════════════════════
   THE MORNING DESK — stylesheet

   Lifted verbatim from the design artifact (claude.ai/code/artifact/9e99b00a)
   so the desk in the browser is the desk that was designed, not an approximation
   of it. Kept as its own file rather than inlined precisely so it can stay
   verbatim: desk.html carries the data wiring, this carries the design.

   The one thing the artifact could not have: every number here comes from the
   real tables. Where a section has no source yet it renders in this sheet's own
   dashed 'not instrumented' language rather than the artifact's demo figures.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   THE MORNING DESK — Foundera, internal

   A committed single-theme design: the desk before dawn. It does not follow the
   viewer's light mode, because the whole conceit is a lit page in a dark room —
   so every colour is painted explicitly and the page holds on any host ground.

   Palette keeps Foundera's colours (cream, forest, rust, gold) but inverts their
   roles: the cream that was paper becomes ink, the forest that was ink becomes
   light. Neutrals are biased green, never grey.

   Typography is serif and mono only — no sans anywhere. Instrument Serif for
   display, Newsreader for the prose that is actually read, Spline Sans Mono for
   everything instrumental. Three faces, three jobs.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ground:  #0E1311;
  --raised:  #161E1A;
  --raised-2:#1B2420;
  --sunken:  #0A0F0D;
  --rule:    #23302A;
  --rule-2:  #2E3D35;

  --ink:     #EDE8DA;
  --ink-2:   #97A197;
  --ink-3:   #66706A;

  --sage:    #9FC4AD;
  --sage-dim:#5E7D69;
  --gold:    #DBB068;
  --rust:    #D97B52;
  --gain:    #86B795;

  --s1: #4f93cf;
  --s2: #b8892a;
  --s3: #a67ac2;
  --s4: #6a9e40;

  --display: 'Instrument Serif', Georgia, serif;
  --prose:   'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: 74px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--prose);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* the desk lamp — a single warm source falling on the top of the page.
   not a gradient hero; a light, which is why it is off-centre and very faint. */
body::before {
  content: "";
  position: fixed;
  top: -340px; left: 50%;
  transform: translateX(-42%);
  width: min(1500px, 145vw);
  height: 760px;
  background: radial-gradient(ellipse 52% 50% at 50% 50%,
              rgba(219,176,104,.10), rgba(159,196,173,.045) 42%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.sheet {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px 120px;
}

/* ── reveal ─────────────────────────────────────────────────────────────
   Scroll-triggered rather than load-triggered, so moving down the page keeps
   paying you back instead of firing everything at once into an empty viewport. */
.rv { opacity: 0; transform: translateY(16px); }
.rv.seen {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 70ms),
              transform .8s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 70ms);
}

/* ═══ EMISSION ══════════════════════════════════════════════════════════
   Glow is light coming off a live instrument, not decoration sprayed on a
   surface — so it is rationed to things that carry meaning. Sage emits for
   what is yours; gold emits for what is hot or unclaimed. Nothing else glows,
   which is exactly why the glow reads as information. */

/* ambient plotting grid, masked to the lamp's falloff */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(159,196,173,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,196,173,.030) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: radial-gradient(ellipse 85% 58% at 50% 0%, #000 8%, transparent 74%);
          mask-image: radial-gradient(ellipse 85% 58% at 50% 0%, #000 8%, transparent 74%);
}

.masthead h1 { text-shadow: 0 0 48px rgba(159,196,173,.14); }
.masthead h1 em { text-shadow: 0 0 38px rgba(159,196,173,.5), 0 0 90px rgba(159,196,173,.2); }

/* a scan travelling the rule under the masthead — the desk is awake */
.stamp { position: relative; }
.stamp::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(159,196,173,.95) 50%, transparent 100%);
  background-size: 42% 100%; background-repeat: no-repeat;
  animation: scan 9s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes scan { 0% { background-position: -55% 0; } 100% { background-position: 155% 0; } }

/* wire cards: a spotlight that follows the pointer */
.item { transition: border-color .35s, box-shadow .35s, transform .35s; }
.item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .4s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(159,196,173,.13), transparent 62%);
}
.item:hover::after { opacity: 1; }
.item:hover { transform: translateY(-2px); border-color: var(--rule-2);
  box-shadow: 0 0 0 1px rgba(159,196,173,.09), 0 20px 54px -22px rgba(0,0,0,.8); }
.item.p1::after { background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
              rgba(219,176,104,.14), transparent 62%); }
.item.p1:hover { box-shadow: 0 0 0 1px rgba(219,176,104,.2),
  0 0 46px -14px rgba(219,176,104,.28), 0 20px 54px -22px rgba(0,0,0,.8); }
.item.p1 .pri { box-shadow: 0 0 18px rgba(219,176,104,.45); }
.verdict.go b { text-shadow: 0 0 22px rgba(219,176,104,.5); }

/* the next unclaimed milestone breathes; the claimed ones just sit lit */
.first.done .mk { box-shadow: 0 0 11px rgba(159,196,173,.5); }
.first.next .mk { animation: breathe 3.2s ease-in-out infinite; }
.first.next .lb { text-shadow: 0 0 20px rgba(219,176,104,.45); }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(219,176,104,.45), 0 0 13px 1px rgba(219,176,104,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(219,176,104,0),  0 0 24px 4px rgba(219,176,104,.25); }
}

.sig { text-shadow: 0 0 22px rgba(159,196,173,.38); }
.topic .ht { text-shadow: 0 0 17px rgba(219,176,104,.45); }
.fr:not(.dormant) .fr-track i { box-shadow: 0 0 12px rgba(159,196,173,.42); }
.tier-head b { text-shadow: 0 0 14px rgba(159,196,173,.4); }
.dcap { text-shadow: 0 0 40px rgba(159,196,173,.4); }
.dot { box-shadow: 0 0 12px rgba(159,196,173,.8); }

/* uncovered topics on the radar pulse — they are the page's open question */
.radar-gap { animation: ringPulse 3.1s ease-in-out infinite; transform-origin: center; }
@keyframes ringPulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* ── responsive ─────────────────────────────────────────────────────────── */

/* ── masthead ───────────────────────────────────────────────────────────── */
.masthead { padding: 58px 0 30px; }
.kicker {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.kicker .live { display: inline-flex; align-items: center; gap: 7px; color: var(--sage); }
.dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
  box-shadow: 0 0 0 0 rgba(159,196,173,.6); animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(159,196,173,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(159,196,173,0); }
  100% { box-shadow: 0 0 0 0 rgba(159,196,173,0); }
}
.demo-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--gold); border: 1px solid rgba(219,176,104,.34);
  border-radius: 3px; padding: 2px 7px;
}
.masthead h1 {
  font-family: var(--display);
  font-size: clamp(52px, 9.5vw, 118px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.028em;
  margin: 20px 0 0;
}
.masthead h1 em { font-style: italic; color: var(--sage); }
.stamp {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 15px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.stamp b { color: var(--ink-2); font-weight: 500; }

/* ── section scaffolding ────────────────────────────────────────────────── */
section { padding: 46px 0 8px; border-top: 1px solid var(--rule); margin-top: 44px; }
section:first-of-type { border-top: 0; margin-top: 0; }
.sec-head {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr) auto auto;
  gap: 16px; align-items: baseline;
  margin-bottom: 30px;
}
.sec-num {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; color: var(--sage-dim);
}
.sec-head h2 {
  font-family: var(--display); font-size: clamp(27px, 3.4vw, 38px);
  font-weight: 400; letter-spacing: -.015em; line-height: 1.05; margin: 0;
}
.sec-head .sec-note {
  grid-column: 2; grid-row: 2;
  font-family: var(--prose); font-size: 14.5px; font-weight: 300;
  color: var(--ink-2); margin: 9px 0 0; max-width: 66ch; line-height: 1.55;
}
.sec-head .sec-note em { color: var(--ink); font-style: italic; }
.sec-meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); text-align: right;
  white-space: nowrap;
}
.body { padding-left: var(--gutter); }

/* ── I · the brief ──────────────────────────────────────────────────────── */
.brief {
  font-family: var(--prose); font-weight: 300;
  font-size: clamp(19px, 2.2vw, 25px); line-height: 1.5;
  letter-spacing: -.005em; color: var(--ink);
  max-width: 34ch; margin: 0;
}
.brief-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 52px; }
.brief b { font-weight: 400; color: var(--gold); }
.brief em { font-style: italic; color: var(--sage); }
.dcap {
  font-family: var(--display); font-size: 3.05em; line-height: .8;
  float: left; padding: .06em .09em 0 0; color: var(--sage);
  font-style: normal;
}

.leads { display: flex; flex-direction: column; gap: 0; }
.lead {
  display: grid; grid-template-columns: 34px minmax(0,1fr);
  gap: 16px; align-items: start;
  padding: 17px 0; border-bottom: 1px solid var(--rule);
}
.lead:first-child { padding-top: 0; }
.lead:last-child { border-bottom: 0; }
.lead-n {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--sage-dim); letter-spacing: .06em; padding-top: 4px;
}
.lead h3 {
  font-family: var(--prose); font-size: 17px; font-weight: 400;
  margin: 0 0 3px; line-height: 1.35; letter-spacing: -.005em;
}
.lead p {
  margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  color: var(--ink-3); letter-spacing: .01em;
}
.lead p .hot  { color: var(--gold); }
.lead p .warn { color: var(--rust); }
.lead p .good { color: var(--gain); }

/* ── II · the wire ──────────────────────────────────────────────────────── */
.wire { display: grid; grid-template-columns: repeat(auto-fit, minmax(318px, 1fr)); gap: 16px; }
.item {
  position: relative;
  background: linear-gradient(180deg, var(--raised) 0%, var(--sunken) 210%);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 11px;
  overflow: hidden;
}
.item::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--ink-3);
}
.item.p1::before { background: linear-gradient(180deg, var(--gold), var(--sage)); }
.item.p1 { border-color: var(--rule-2); }
.item-top {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.pri {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  padding: 2.5px 7px; border-radius: 2px;
  background: var(--rule); color: var(--ink-2);
}
.item.p1 .pri { background: var(--gold); color: var(--sunken); }
.item-top .age { color: var(--ink-2); margin-left: auto; }
.item h3 {
  font-family: var(--display); font-size: 24px; font-weight: 400;
  line-height: 1.12; letter-spacing: -.01em; margin: 0; text-wrap: balance;
}
.touches {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.65;
  color: var(--ink-2); background: var(--sunken);
  border: 1px solid var(--rule); border-radius: 2px; padding: 8px 10px;
}
.touches b { color: var(--sage); font-weight: 500; }
.touches .none { color: var(--ink-3); font-style: italic; }
.wave { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.wave svg { flex: none; display: block; }
.verdict { font-family: var(--mono); font-size: 10.5px; line-height: 1.55; color: var(--ink-3); }
.verdict b { display: block; font-family: var(--display); font-size: 17px;
  font-weight: 400; letter-spacing: 0; line-height: 1.15; margin-bottom: 2px; }
.verdict.go   b { color: var(--gold); }
.verdict.rise b { color: var(--sage); }
.verdict.late b { color: var(--ink-3); }

/* ── III · the diary ────────────────────────────────────────────────────── */
.diary { display: flex; flex-direction: column; }
.dr {
  display: grid; grid-template-columns: 96px minmax(0,1fr) 128px 88px;
  gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.dr:last-child { border-bottom: 0; }
.dr-when {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.dr-what { font-family: var(--prose); font-size: 16px; font-weight: 400; line-height: 1.35; }
.dr-what span {
  display: block; font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); margin-top: 3px; letter-spacing: .02em;
}
.dr-draft {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--ink-2); text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.dr-draft.soon { color: var(--rust); }
.dr-bar { height: 3px; background: var(--rule); border-radius: 2px; position: relative; }
.dr-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--sage-dim); }
.dr-bar.soon i { background: var(--rust); }

/* ── IV · the queue ──────────────────────────────────────────────────────
   Reuses .item wholesale (same card, same hover spotlight, same P1 language
   for "draft-by soon") rather than a parallel card system — this is the wire's
   sibling, not a new instrument. Format gets its own hue from the categorical
   set already defined for platforms (--s1..--s4), so "video" reads the same
   visual language as "LinkedIn" does elsewhere on the page. */
.queue { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.pri.fmt-video        { background: var(--s1); color: var(--ground); }
.pri.fmt-infographic  { background: var(--s2); color: var(--ground); }
.pri.fmt-template     { background: var(--s3); color: var(--ground); }
.item-top .age.soon { color: var(--rust); }
.qc-body { display: flex; gap: 16px; align-items: flex-start; }
.qc-thumb {
  flex: none; width: 104px; height: 130px; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--sunken);
  display: flex; align-items: center; justify-content: center;
}
.qc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qc-thumb.empty { border-style: dashed; border-color: var(--rule-2); }
.qc-thumb .none {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); text-align: center; padding: 6px; line-height: 1.5;
}
.qc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.qc-tie { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); font-style: italic; line-height: 1.5; }
.qc-actions { margin-top: 12px; padding-top: 2px; display: flex; gap: 10px; align-items: flex-start; }
.qc-feedback {
  flex: 1; min-height: 38px; resize: vertical;
  font-family: var(--prose); font-size: 12.5px; color: var(--ink);
  background: var(--sunken); border: 1px solid var(--rule); border-radius: 2px; padding: 8px 10px;
}
.qc-feedback::placeholder { color: var(--ink-3); }
.qc-feedback:focus-visible { outline: 1px solid var(--sage); outline-offset: 1px; }
.qc-btns { display: flex; flex-direction: column; gap: 6px; flex: none; }
.qc-btns button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 2px; padding: 7px 13px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--rule); background: none; color: var(--ink-2); transition: color .2s, border-color .2s;
}
.qc-btns button:focus-visible { outline: 1px solid var(--sage); outline-offset: 2px; }
.qc-approve:hover { border-color: var(--sage); color: var(--sage); }
.qc-reject:hover  { border-color: var(--rust); color: var(--rust); }
.item.qc[data-status="approved"] { border-color: rgba(159,196,173,.35); }
.item.qc[data-status="approved"] .qc-approve { background: var(--sage); color: var(--sunken); border-color: var(--sage); }
.item.qc[data-status="rejected"] { opacity: .5; }
.item.qc[data-status="rejected"] .qc-reject { background: var(--rust); color: var(--sunken); border-color: var(--rust); }

/* ── V · the schedule ───────────────────────────────────────────────────
   Same idiom as the diary (III) — when, what, how soon — with one more
   column for format, since a schedule row has to say what KIND of post is
   landing that day. Populated from The queue's approved pile, not hardcoded:
   see the script section for the cadence logic. */
.sched { display: flex; flex-direction: column; }
.sr {
  display: grid; grid-template-columns: 96px 128px minmax(0,1fr) 96px;
  gap: 18px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
}
.sr:last-child { border-bottom: 0; }
.sr-when {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.sr-when span { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.sr-what { font-family: var(--prose); font-size: 16px; font-weight: 400; line-height: 1.35; }
.sr-in {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--ink-2); text-transform: uppercase; text-align: right;
}
.sr-in.miss { color: var(--rust); }
.sched-empty {
  font-family: var(--prose); font-weight: 300; font-size: 14.5px; color: var(--ink-2);
  padding: 4px 0 8px; max-width: 52ch;
}

/* ── VI · the board ────────────────────────────────────────────────────── */
.board { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 46px; align-items: start; }
.funnel { display: flex; flex-direction: column; }
.fr {
  display: grid; grid-template-columns: 128px minmax(0,1fr) 74px;
  gap: 14px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.fr:last-child { border-bottom: 0; }
.fr-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.fr-val {
  font-family: var(--display); font-size: 34px; font-weight: 400;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.fr:last-child .fr-val, .fr:nth-last-child(2) .fr-val { color: var(--sage); }
.fr-track { height: 4px; background: var(--sunken); border-radius: 2px; overflow: hidden; }
.fr-track i { display: block; height: 100%; background: var(--sage-dim); border-radius: 2px; }
.fr:last-child .fr-track i, .fr:nth-last-child(2) .fr-track i { background: var(--sage); }
.fr-rate {
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  text-align: right; font-variant-numeric: tabular-nums;
}
.fr-rate s { text-decoration: none; color: var(--ink-3); }
.fr-delta { font-family: var(--mono); font-size: 10.5px; color: var(--gain); }

.plot { position: relative; }
.plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.plot-cap {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px;
}
.tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--raised-2); border: 1px solid var(--rule-2); border-radius: 3px;
  padding: 9px 11px; font-family: var(--mono); font-size: 11.5px;
  box-shadow: 0 10px 34px rgba(0,0,0,.6); opacity: 0; transition: opacity .12s;
  min-width: 136px;
}
.tip .th {
  display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.tr { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.tr span { display: flex; align-items: center; gap: 6px; }
.tr b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.sw { width: 8px; height: 8px; border-radius: 1px; flex: none; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink); background: var(--raised);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 5px 11px 5px 9px; cursor: pointer;
}
.chip[aria-pressed="false"] { color: var(--ink-3); background: transparent; }
.chip[aria-pressed="false"] .sw { opacity: .28; }
.chip:focus-visible, th button:focus-visible { outline: 1px solid var(--sage); outline-offset: 2px; }

/* ── lens strips ────────────────────────────────────────────────────────
   A LENS is exclusive — one way of looking at the same numbers. A CHIP (on the
   platform chart) is additive — a filter you combine. Different jobs, so they
   are deliberately different shapes; conflating the two is the usual dashboard
   mistake. Nothing is ever hidden behind a lens except a re-sort or a re-scale. */
.lens {
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); margin-bottom: 17px;
}
.lens button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
  background: none; border: 0; padding: 8px 14px 10px; cursor: pointer;
  position: relative; white-space: nowrap; transition: color .2s;
}
.lens button:first-child { padding-left: 0; }
.lens button:hover { color: var(--ink-2); }
.lens button[aria-selected="true"] { color: var(--sage); text-shadow: 0 0 16px rgba(159,196,173,.45); }
.lens button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--sage); box-shadow: 0 0 11px rgba(159,196,173,.85);
}
.lens button:focus-visible { outline: 1px solid var(--sage); outline-offset: -2px; }
/* a P1 surfaced despite the filter says so, rather than pretending it matched */
.item.pinned::before { background: var(--gold); }
.item.pinned .item-top::after {
  content: "PINNED · WINDOW OPEN"; margin-left: auto;
  font-size: 8.5px; letter-spacing: .1em; color: var(--gold);
}
.item.pinned .item-top .age { margin-left: 0; }
.lens .note {
  margin-left: auto; align-self: center; padding-left: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); opacity: .8;
}

/* ── VII · the ledger ───────────────────────────────────────────────────── */
.scroller { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 800px; }
th, td {
  text-align: right; padding: 13px 12px;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2) { text-align: left; }
th:first-child, td:first-child { padding-left: 0; }
thead th {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-2);
}
th button { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 0; cursor: pointer; }
th[aria-sort="descending"] button { color: var(--sage); }
th[aria-sort="descending"] button::after { content: " ↓"; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .16s; }
tbody tr:hover td { background: var(--raised); }
td.num { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.pcell { max-width: 400px; white-space: normal; }
.pcell .plat {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.pcell .ttl { font-family: var(--prose); font-size: 16px; line-height: 1.32; margin-top: 2px; }
.date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }
.sig { font-family: var(--display); font-size: 25px; color: var(--sage); line-height: 1; }
.sig.zero { color: var(--ink-3); }
tr.flagged td { background: rgba(217,123,82,.055); }
tr.flagged:hover td { background: rgba(217,123,82,.1); }
.flag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rust); border: 1px solid rgba(217,123,82,.4);
  border-radius: 2px; padding: 1.5px 6px; margin-left: 9px; vertical-align: 2px;
  white-space: nowrap;
}

/* ── VIII · the radar ───────────────────────────────────────────────────── */
.radar { display: grid; grid-template-columns: minmax(0,1.62fr) minmax(238px,1fr); gap: 40px; align-items: start; }
.rising { display: flex; flex-direction: column; }
.rising h3 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 4px;
}
.topic { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.topic:last-child { border-bottom: 0; }
.topic .t1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.topic .nm { font-family: var(--prose); font-size: 16px; line-height: 1.3; }
.topic .ht {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--gold);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.topic .t2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.bdg {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  color: var(--ink-3); border: 1px solid var(--rule-2); border-radius: 2px; padding: 2px 5px;
}
.cov { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.cov.gap { color: var(--rust); }

/* ── IX · the standing ─────────────────────────────────────────────────── */
.standing { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px; }
.panel h3 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px;
}
.acct { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.acct:last-child { border-bottom: 0; }
.acct .nm { font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.acct .ct { font-family: var(--display); font-size: 23px; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.acct .dl { font-family: var(--mono); font-size: 10.5px; color: var(--gain); }
#cadence svg { display: block; width: 100%; height: auto; }
.cadence-read, .calib-read {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  line-height: 1.6; margin: 12px 0 0;
}
.cadence-read b, .calib-read b { color: var(--ink); font-weight: 500; }
.calib-dots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.cd { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--sage-dim); }
.cd.hit { background: var(--sage-dim); }

/* ── X · colophon ───────────────────────────────────────────────────────── */
.colo { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 34px 46px; }
.colo h3 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px;
}
.colo p { font-family: var(--prose); font-weight: 300; font-size: 15px;
  line-height: 1.62; color: var(--ink-2); margin: 0 0 12px; max-width: 60ch; }
.colo p em { color: var(--ink); font-style: italic; }
.colo code, code.inl {
  font-family: var(--mono); font-size: 12px; color: var(--sage);
  background: var(--sunken); border-radius: 2px; padding: 1px 4px;
}
.srow { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--rule); }
.srow:last-child { border-bottom: 0; }
.srow .w { font-family: var(--mono); font-size: 11px; color: var(--ink); letter-spacing: .04em; }
.srow .d { font-family: var(--prose); font-weight: 300; font-size: 14px;
  line-height: 1.5; color: var(--ink-2); }
.srow .d i { font-family: var(--mono); font-style: normal; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: block; margin-top: 3px; }
pre.utm {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.85; color: var(--ink-2);
  background: var(--sunken); border: 1px solid var(--rule); border-radius: 3px;
  padding: 14px 15px; overflow-x: auto; margin: 0 0 12px;
}
pre.utm b { color: var(--gold); font-weight: 500; }

.endmark { margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── firsts ladder ──────────────────────────────────────────────────────
   A pre-revenue business has one honest motivational instrument, and it is not
   a daily zero. It is the next unclaimed milestone. */
.firsts { display: flex; flex-wrap: wrap; gap: 0 0; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--rule); }
.first { display: flex; align-items: center; gap: 8px; padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--rule); }
.first:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.first .mk {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 1px solid var(--sage-dim); display: grid; place-items: center;
  font-family: var(--mono); font-size: 7.5px; color: var(--ground);
}
.first.done .mk { background: var(--sage); border-color: var(--sage); }
.first.next .mk { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(219,176,104,.13); }
.first .lb { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); }
.first.done .lb { color: var(--ink-2); }
.first.next .lb { color: var(--gold); }
.first .dt { font-family: var(--mono); font-size: 10px; color: var(--ink-3); opacity: .75; }

/* ── funnel tiers ───────────────────────────────────────────────────────
   Hollow / dashed means NOT INSTRUMENTED — deliberately the same language the
   radar uses for an uncovered topic, because "we don't measure it" and
   "it performs at zero" are different facts and must not look alike. */
.tier { margin-bottom: 24px; }
.tier:last-child { margin-bottom: 0; }
.tier-head {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 8px; border-bottom: 1px solid var(--rule-2);
}
.tier-head b { color: var(--sage); font-weight: 600; }
.tier-head i { margin-left: auto; font-style: normal; opacity: .75; }
.fr.dormant .fr-val { color: var(--ink-3); }
.fr.dormant .fr-track { background: transparent; border: 1px dashed var(--rule-2); height: 6px; }
.fr.dormant .fr-track i { display: none; }
.fr .tag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(219,176,104,.4); border-radius: 2px;
  padding: 1px 5px; margin-left: 7px; vertical-align: 3px; white-space: nowrap;
}
.fr .why { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3);
  display: block; margin-top: 4px; letter-spacing: .02em; }
/* one headline number plus its decomposition — the single best idea in most
   marketing dashboards: density without spending another chart on it */
.decomp { display: flex; flex-wrap: wrap; gap: 0 11px; margin-top: 5px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em; color: var(--ink-3); }
.decomp b { color: var(--ink-2); font-weight: 500; }
.ltype { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; border-radius: 2px; padding: 2px 6px; display: inline-block;
  margin-bottom: 6px; }
.ltype.win { background: var(--gold); color: var(--sunken); box-shadow: 0 0 16px rgba(219,176,104,.4); }
.ltype.unb { background: rgba(159,196,173,.16); color: var(--sage); border: 1px solid rgba(159,196,173,.32); }
.ltype.gap { background: rgba(217,123,82,.13); color: var(--rust); border: 1px solid rgba(217,123,82,.34); }
th.active { color: var(--sage); text-shadow: 0 0 14px rgba(159,196,173,.4); }

/* ── rearrange ──────────────────────────────────────────────────────────
   The numeral column doubles as the grab handle. Grabbing collapses every
   section to its header, because dragging a 700px-tall block blind is not
   direct manipulation — it is guesswork. */
.grip {
  background: none; border: 0; padding: 0; cursor: grab;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; color: var(--sage-dim);
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.grip:hover, .grip:focus-visible { color: var(--sage); }
.grip:focus-visible { outline: 1px solid var(--sage); outline-offset: 4px; }
.grip .dots { opacity: 0; transition: opacity .18s; font-size: 11px; letter-spacing: 0; }
.grip:hover .dots, .grip:focus-visible .dots { opacity: 1; }
body.reordering { cursor: grabbing; }
body.reordering section > .body { display: none; }
body.reordering section .sec-note { display: none; }
body.reordering section {
  padding: 15px 0 5px; margin-top: 8px;
  border-top: 1px solid var(--rule); opacity: .6;
  transition: opacity .18s, background .18s;
}
body.reordering .sec-head { margin-bottom: 0; }
body.reordering section.dragging {
  opacity: 1; background: var(--raised); outline: 1px solid var(--rule-2);
  border-radius: 3px; border-top-color: transparent;
}
.arrange {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); background: none; border: 1px solid var(--rule);
  border-radius: 2px; padding: 4px 9px; cursor: pointer;
}
.arrange:hover { color: var(--sage); border-color: var(--rule-2); }
.arrange:focus-visible { outline: 1px solid var(--sage); outline-offset: 2px; }
.arrange[hidden] { display: none; }

/* ── expand to focus ────────────────────────────────────────────────────
   One card, full width, everything else out of the way. Every chart is
   viewBox-scaled so they simply grow into the space — the radar in particular
   is a different instrument at 1500px than at 700. */
.expand {
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-3); font-family: var(--mono); font-size: 12px; line-height: 1;
  padding: 6px 8px; cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.expand:hover { color: var(--sage); border-color: var(--rule-2);
  box-shadow: 0 0 15px rgba(159,196,173,.22); }
.expand:focus-visible { outline: 1px solid var(--sage); outline-offset: 2px; }
body.focused .masthead,
body.focused .sheet > section:not(.focus) { display: none; }
body.focused .sheet { max-width: 1520px; }
body.focused .grip { pointer-events: none; }
body.focused .grip .dots { display: none; }
body.focused section.focus { --gutter: 0px; border-top: 0; margin-top: 0; padding-top: 8px; }
body.focused section.focus .sec-head h2 { font-size: clamp(34px, 4.6vw, 52px); }
.focusbar {
  display: none; align-items: center; gap: 14px;
  padding: 22px 0 18px; margin-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
body.focused .focusbar { display: flex; }
.focusbar button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--sage); text-shadow: 0 0 16px rgba(159,196,173,.4);
}
.focusbar button:hover { color: var(--ink); }
.focusbar button:focus-visible { outline: 1px solid var(--sage); outline-offset: 3px; }
.focusbar .esc { margin-left: auto; opacity: .7; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .brief-grid, .board, .radar { grid-template-columns: minmax(0,1fr); gap: 34px; }
}
@media (max-width: 760px) {
  :root { --gutter: 0px; }
  .expand { display: none; }
  .sheet { padding: 0 18px 80px; }
  .sec-head { grid-template-columns: minmax(0,1fr) auto; }
  .sec-num { display: none; }
  .sec-head .sec-note { grid-column: 1 / -1; grid-row: auto; }
  .dr { grid-template-columns: minmax(0,1fr) auto; gap: 3px 14px; }
  .dr-when { grid-column: 1; font-size: 11px; color: var(--ink-3); }
  .dr-draft { grid-column: 2; grid-row: 1; }
  .dr-what { grid-column: 1 / -1; }
  .dr-bar { grid-column: 1 / -1; margin-top: 6px; }
  .fr { grid-template-columns: 96px minmax(0,1fr) 64px; gap: 10px; }
  .fr-val { font-size: 27px; }
  /* a chart scaled to phone width would shrink its labels to nothing.
     Scroll the plot instead — legible and pannable beats fitted and unreadable. */
  .plot { overflow-x: auto; overflow-y: hidden; }
  #radar-plot svg { min-width: 660px; }
  #trend-plot svg, #compound-plot svg { min-width: 460px; }
  .tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── the shelf ── */
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-bottom: 30px; }
.shelf-card .qc-text h3 { font-size: 17px; }
.shelf-card details.cap { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.shelf-card details.cap summary { cursor: pointer; color: var(--sage); }
.shelf-card details.cap pre { white-space: pre-wrap; margin: 8px 0 0; font: inherit; line-height: 1.6; max-height: 220px; overflow: auto; }
.chips2 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sc { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  padding: 3px 8px; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-2); text-decoration: none; }
.sc-posted { color: var(--gain); border-color: var(--sage-dim); }
.sc-draft { color: var(--gold); border-color: var(--gold); }
.sc-failed { color: var(--rust); border-color: var(--rust); }
.shelf-notes { margin: 18px 0 26px; padding-left: 18px; font-family: var(--prose); font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.done-row { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.done-row .dh { flex: 1 1 260px; min-width: 0; font-family: var(--prose); color: var(--ink); }
.done-row .chips2 { margin: 0; }

/* ── churn ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 26px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--rule); background: var(--raised); border-radius: 3px; }
.kpi .kv { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--ink); }
.kpi .kl { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); }
.kpi .kn { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }