/* ═══════════════════════════════════════════════════════════════════════════
   MoatBrain · THE PROGRESS PAGE
   Three directions on one question: how do you show a person their own
   accumulating substrate without ever rating them?

   The token block below is COPIED VERBATIM from the shipped desk.css so the
   room is identical. Progress is a projection of the product, not a new
   surface with its own look — a page that arrives in a different palette
   reads as a separate app making a separate claim.

   ONE RULE CARRIED THROUGHOUT, and it is a colour rule because colour is
   where a rating leaks in first:
     --pos / --neg / --warn are SEMANTIC and they are licensed in exactly two
     places. (1) A verdict about a COMPANY — a management team delivered or
     missed what it promised, a filing added or removed a disclosure.
     (2) A warning about the RECORD ITSELF — memory is paused, this workspace
     is fictional. They are never applied to anything the USER DID.
     Nothing you recorded is ever green and nothing you recorded is ever red.
     Your own work gets --accent for "you completed this" and neutral cream
     for everything else. Emphasis, not approval.
     The second licence was added after the test caught the fixture chip, and
     it is written down rather than quietly excluded — a rule with an
     unrecorded exception is not a rule.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --ground:#141210; --surface:#1B1815; --raised:#221E1A; --sunk:#100E0C;
  --line:#2C2622; --line-2:#3A322C;
  --cream:#F2EBDD; --cream-2:#B5A894; --cream-3:#7E7365;
  --accent:#7FBFA8;            /* one restrained interactive hue */
  --pos:#6FBF9B; --neg:#D2764F; --warn:#E0B15E;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,sans-serif;
  --num:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--cream);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"cv01" 1;line-height:1.5}
a{color:inherit;text-decoration:none}
.n{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── shared chrome ─────────────────────────────────────────────────────────
   Identical on all three directions. The comparison is only honest if the
   ONLY variable is the organising structure, so every other affordance —
   wordmark, rule bar, claim line, exclusion panel, footer — is held fixed. */
.pshell{max-width:1180px;margin:0 auto;padding:0 26px 70px}
.phead{display:flex;align-items:center;gap:12px;padding:20px 0 16px;flex-wrap:wrap}
.pwm{font-size:16px;letter-spacing:-.02em;font-weight:600}
.pwm b{font-weight:600}
.psep{color:var(--cream-3);font-size:15px}
.ptitle{font-size:15px;color:var(--cream-2);letter-spacing:-.01em}
.psp{flex:1}
.pchip{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2);
  border:1px solid var(--line-2);border-radius:5px;padding:4px 8px;background:var(--surface)}
.pchip.ro{color:var(--accent);border-color:#3a5f54}
.pchip.fx{color:var(--warn);border-color:#6b5a2f;background:#2a2314}

/* the shipped rule bar — verbatim from packages/sana-ui/src/index.tsx */
.prule{border:1px solid var(--line-2);border-left:2px solid var(--accent);
  border-radius:var(--r);background:var(--surface);padding:11px 15px;
  font-size:12.5px;color:var(--cream-2);margin-bottom:22px}

/* concept switcher — this is round furniture, not product furniture */
.pnav{display:flex;gap:0;border:1px solid var(--line-2);border-radius:9px;
  overflow:hidden;background:var(--surface);margin-bottom:22px;flex-wrap:wrap}
.pnav a{padding:9px 15px;font-size:12.5px;color:var(--cream-2);
  border-right:1px solid var(--line);flex:1;min-width:150px}
.pnav a:last-child{border-right:0}
.pnav a b{display:block;font-size:12.5px;font-weight:600;color:var(--cream)}
.pnav a span{display:block;font-size:10.5px;color:var(--cream-3);margin-top:2px}
.pnav a:hover{background:var(--raised)}
.pnav a.on{background:var(--raised)}
.pnav a.on b{color:var(--accent)}

/* ── the claim line — what stands where a score would stand ────────────────
   The temptation on this page is one big number. Every big number here is a
   COUNT OF ROWS, and each says which rows it counted. A figure that cannot
   name its table is an index, and an index is a rating with the arithmetic
   hidden. .pfig carries data-count-of for exactly that reason, and the test
   suite reads the attribute rather than trusting the copy. */
.pclaim{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);
  padding:20px 22px;margin-bottom:22px}
.pclaim .cl{font-size:19px;line-height:1.65;letter-spacing:-.01em;color:var(--cream);
  max-width:74ch;margin:0}
.pclaim .cl2{font-size:12.5px;color:var(--cream-3);margin:12px 0 0;max-width:74ch;line-height:1.6}
.pfig{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:var(--accent);border-bottom:1px dotted #3a5f54;cursor:help}

/* ── section furniture ── */
.psec{margin-bottom:26px}
.psech{display:flex;align-items:baseline;gap:10px;margin-bottom:5px;flex-wrap:wrap}
.psech h2{font-size:15px;margin:0;letter-spacing:-.02em;font-weight:600}
.psech .why{font-size:11.5px;color:var(--cream-3)}
.psub{font-size:12.5px;color:var(--cream-2);line-height:1.6;max-width:82ch;margin:0 0 14px}
.pnote{font-size:11.5px;color:var(--cream-3);line-height:1.6;max-width:82ch;
  border-left:1px solid var(--line-2);padding-left:11px;margin-top:12px}
.panel2{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);overflow:hidden}
.p2h{padding:11px 15px;background:var(--raised);border-bottom:1px solid var(--line);
  font-size:12px;color:var(--cream-2);display:flex;align-items:center;gap:9px}
.p2h b{color:var(--cream);font-weight:600;font-size:12.5px}
.p2h .sp{flex:1}
.p2b{padding:15px}

/* ── the exclusion panel — the page says what it refuses to show ───────────
   Found while grounding: om_flywheel_aggregates is a SHIPPED VIEW returning
   consensus_value, dispersion and n across users. It is one join away from
   this page and it is the single most tempting widget anyone could add here.
   Naming the refusal on the surface does something an internal rule cannot:
   the next person to design here reads it. */
.pexcl{border:1px solid var(--line-2);border-radius:var(--r);background:var(--sunk);padding:16px 18px}
.pexcl h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-3);
  margin:0 0 10px;font-weight:600}
.pexcl ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.pexcl li{font-size:12.5px;color:var(--cream-2);line-height:1.55;
  display:grid;grid-template-columns:14px minmax(0,1fr);gap:9px;align-items:start}
.pexcl li .x{color:var(--cream-3);font-family:var(--num);font-size:12px;line-height:1.55}
.pexcl li b{color:var(--cream);font-weight:600}
.pexcl .src{font-size:11px;color:var(--cream-3);margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line);line-height:1.6}

.pfoot{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--cream-3);line-height:1.6;display:flex;gap:16px;flex-wrap:wrap}
.pfoot .sp{flex:1}

/* ═══ DIRECTION 1 · THE COVERAGE MAP ═══════════════════════════════════════
   Companies down, layers of work across. A cell is a row that exists or a
   row that does not. */
.cmap{width:100%;border-collapse:collapse;font-size:12px}
.cmap th{text-align:left;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-3);font-weight:500;padding:0 6px 9px;vertical-align:bottom;line-height:1.35}
.cmap th.co{width:190px;padding-left:0}
.cmap td{border-top:1px solid var(--line);padding:9px 6px}
.cmap td.co{padding-left:0}
.cmco{display:block;font-size:12.5px;color:var(--cream);letter-spacing:-.01em}
.cmco .tk{font-family:var(--num);font-size:11px;color:var(--cream-3);margin-left:6px}
.cmst{display:block;font-size:10.5px;color:var(--cream-3);margin-top:2px}
/* cell states. Filled uses --accent because the user did the work; absence is
   simply absent. No red for a gap — a gap is not a failing. */
.cmc{display:block;width:100%;height:20px;border-radius:4px;border:1px solid var(--line-2);
  background:var(--sunk);position:relative}
.cmc.full{background:#1d3a33;border-color:#3a5f54}
.cmc.full::after{content:"";position:absolute;inset:5px;border-radius:2px;background:var(--accent)}
.cmc.part{background:var(--raised);border-color:var(--line-2)}
.cmc.part::after{content:"";position:absolute;left:5px;right:50%;top:5px;bottom:5px;
  border-radius:2px;background:var(--cream-3)}
/* A DELIBERATE STOP IS NOT A HOLE. Rejected and watchlist are terminal
   statuses in om_decision_status. Drawing them as empty cells would tell a
   user to go finish work on a company they correctly walked away from —
   the one thing a progress page must never do. */
.cmc.stop{background:transparent;border-style:dashed;border-color:var(--line-2)}
.cmc.stop::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:1px;
  background:var(--line-2)}
.cmleg{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--line)}
.cmleg span{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--cream-2)}
.cmleg .cmc{width:22px;height:14px;flex:none}

/* risk-category coverage — 10 shipped categories, a vocabulary not a target */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px}
.cat{border:1px solid var(--line-2);border-radius:9px;background:var(--sunk);padding:11px 12px}
.cat.has{background:var(--surface);border-color:#3a5f54}
.cat .cn{font-size:12.5px;color:var(--cream);letter-spacing:-.01em}
.cat.has .cn{color:var(--accent)}
.cat .cc{font-size:11px;color:var(--cream-3);margin-top:4px;font-family:var(--num)}
.cat .ck{font-size:10px;color:var(--cream-3);margin-top:5px;letter-spacing:.07em;
  text-transform:uppercase;font-family:var(--num)}

/* ═══ DIRECTION 2 · THE CALIBRATION FLOOR ══════════════════════════════════
   The 2x2 that om_calibration_quadrant already models, drawn so it cannot be
   collapsed. Its whole point is that a favourable outcome from an unsound
   process is not a win — average the four cells into one number and you have
   destroyed the only information the matrix carries.

   PROCESS IS THE EMPHASISED AXIS. That is the thesis rendered as hierarchy:
   the user controls process, not outcome, so process gets the accent rail and
   outcome gets neutral column headings and no colour at all. */
.calwrap{display:grid;grid-template-columns:118px minmax(0,1fr);gap:0}
.calax{grid-column:1/-1;display:grid;grid-template-columns:118px minmax(0,1fr)}
.caltop{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
  padding-bottom:9px}
.caloc{font-size:11px;color:var(--cream-2);letter-spacing:.02em;line-height:1.45}
.caloc b{display:block;font-size:12px;color:var(--cream);font-weight:600}
.calrail{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:9px}
.calpr{display:flex;flex-direction:column;justify-content:center;text-align:right;
  border-right:2px solid var(--line-2);padding-right:13px;min-height:132px}
.calpr.sound{border-right-color:var(--accent)}
.calpr b{font-size:12.5px;color:var(--cream);font-weight:600;letter-spacing:-.01em}
.calpr.sound b{color:var(--accent)}
.calpr span{font-size:10.5px;color:var(--cream-3);margin-top:3px;line-height:1.45}
.calgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:9px}
.calcell{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);
  padding:13px 14px;min-height:132px;display:flex;flex-direction:column;text-align:left;
  font:inherit;color:inherit;cursor:pointer}
.calcell:hover{background:var(--raised)}
.calcell.sel{border-color:var(--accent)}
.calcell .cq{font-family:var(--num);font-size:27px;letter-spacing:-.03em;color:var(--cream)}
.calcell.sound .cq{color:var(--accent)}
.calcell .cl3{font-size:11px;color:var(--cream-2);margin-top:3px}
.calcell .cd{font-size:11.5px;color:var(--cream-3);line-height:1.5;margin-top:auto;padding-top:11px}
/* The cell everyone wants to hide. Sound process, unfavourable outcome is the
   cell the product exists to protect, so it says so in its own body. */
.calcell .keep{color:var(--cream-2);border-top:1px solid var(--line);margin-top:auto;
  padding-top:10px;font-size:11.5px;line-height:1.5}
/* insufficient_data is the FIFTH shipped value and it is NOT a cell. Putting
   it in the grid would make it look like a result; leaving it out entirely
   would quietly launder unresolved records into resolved ones. It sits
   outside, named, counted. */
.calins{border:1px dashed var(--line-2);border-radius:var(--r);background:transparent;
  padding:13px 15px;margin-top:9px;display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.calins .ci{font-family:var(--num);font-size:19px;color:var(--cream-2);letter-spacing:-.02em}
.calins .cit{font-size:12px;color:var(--cream-2);line-height:1.5;flex:1;min-width:230px}
.calins .cit b{color:var(--cream);font-weight:600}

/* calibration curve — their stated confidence against their own recorded
   outcomes. Two decisions here, both of them refusals:

   (1) observedRatePct is NULL when a bucket is empty in the shipped service.
       That null is drawn as an explicit "no records" marker, never as 0% and
       never as a line passing smoothly through it. Interpolating an empty
       bucket invents a data point about a person.

   (2) THERE IS NO 45-DEGREE REFERENCE LINE, which every calibration chart in
       the world has. Confidence here is an ordinal 1-5 from the user's own
       expected_snapshot; nothing in the product maps those five steps onto
       probabilities. Drawing the diagonal would invent that mapping and then
       measure the reader against it — a rating, with the arithmetic hidden in
       a dotted line. Their own points, and no standard laid over them. */
.curve{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0}
.curveY{display:flex;flex-direction:column;justify-content:space-between;
  font-size:9.5px;color:var(--cream-3);font-family:var(--num);text-align:right;
  padding-right:8px;height:196px}
.curveP{position:relative;height:196px;border-left:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2)}
.curveP svg{position:absolute;inset:0;width:100%;height:100%}
.cvline{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.cvpt{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);
  transform:translate(-50%,50%);border:1.5px solid var(--accent)}
/* n below 3 is drawn hollow. A rate computed from one record reads as a
   finding at full weight, and it is not one. */
.cvpt.thin{background:var(--ground)}
/* bottom:X% already anchors the label's lower edge at the point and lets it
   grow upward, so a -100% translate pushes it up by a SECOND full height and
   off the top of the plot. Caught by the geometry assertion, not by reading. */
.cvlbl{position:absolute;transform:translateX(-50%);font-family:var(--num);
  font-size:11px;color:var(--cream);white-space:nowrap;padding-bottom:12px}
/* a point near the ceiling has no room above it, and a clipped label is worse
   than a relocated one — it looks like the point has no value at all */
.cvlbl.below{transform:translate(-50%,100%);padding-bottom:0;padding-top:12px}
.cvlbl i{font-style:normal;color:var(--cream-3);font-size:10px;display:block;text-align:center}
/* an empty bucket is a column that says so, not a gap you read past */
.cvnone{position:absolute;bottom:0;top:0;width:1px;border-left:1px dashed var(--line-2);
  transform:translateX(-50%)}
.cvnone span{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  font-size:10px;color:var(--cream-3);white-space:nowrap;background:var(--surface);
  border:1px solid var(--line-2);border-radius:4px;padding:3px 7px;line-height:1.3}
.curveX{grid-column:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  padding-top:9px}
.curveX span{font-size:10.5px;color:var(--cream-2);text-align:center;line-height:1.4}
.curveX span b{display:block;font-family:var(--num);font-size:11.5px;color:var(--cream)}
.curveX span i{display:block;font-style:normal;font-size:10px;color:var(--cream-3);margin-top:2px}
.curvekey{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--cream-2)}
.curvekey span{display:flex;align-items:center;gap:7px}
.curvekey b{color:var(--cream);font-weight:600}
.curvekey .sw{width:11px;height:11px;border-radius:50%;background:var(--accent);
  border:1.5px solid var(--accent);flex:none}
.curvekey .sw.thin{background:var(--ground)}

/* ═══ DIRECTION 3 · THE SPINE ══════════════════════════════════════════════
   One decision at a time, literally. No denominator anywhere, so there is
   nothing for a reader to convert into a rating. */
.spine{display:grid;grid-template-columns:112px minmax(0,1fr);gap:0}
.spdate{font-family:var(--num);font-size:11px;color:var(--cream-3);padding:16px 15px 0 0;
  text-align:right;line-height:1.4}
.sptrack{border-left:1px solid var(--line-2);padding:0 0 4px 21px;position:relative}
.spitem{padding:16px 0 20px;position:relative}
.spitem::before{content:"";position:absolute;left:-26px;top:21px;width:9px;height:9px;
  border-radius:50%;background:var(--ground);border:1px solid var(--line-2)}
.spitem.mark::before{background:var(--accent);border-color:var(--accent)}
.sphead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.sphead b{font-size:13.5px;letter-spacing:-.01em;font-weight:600}
.sphead .tk{font-family:var(--num);font-size:11px;color:var(--cream-3)}
.spst{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;border-radius:4px;
  padding:3px 7px;border:1px solid var(--line-2);color:var(--cream-2);background:var(--raised)}
/* Terminal statuses are stated in the product's own vocabulary. The furthest
   om_decision_status goes is user_marked_ready_for_personal_decision — the
   system never says buy, and the badge must not imply it did. */
.spst.ready{color:var(--accent);border-color:#3a5f54;background:#16241f}
.spbody{font-size:12.5px;color:var(--cream-2);line-height:1.65;margin:8px 0 0;max-width:80ch}
.spbody b{color:var(--cream);font-weight:600}
.spatt{margin-top:11px;max-width:600px}
.spmeta{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--cream-3)}
.spmeta span{display:flex;align-items:center;gap:5px}
.spmeta .n{color:var(--cream-2)}
.spmore{border:1px solid var(--line-2);border-radius:9px;background:var(--surface);
  padding:11px 15px;font-size:12px;color:var(--cream-2);text-align:center;margin-top:6px}

/* paused state — om_prevent_memory_learning_when_paused is a real trigger.
   If memory is paused nothing accumulates, and a page about accumulation
   that stays silent about it is lying by omission. */
.ppause{border:1px solid #6b5a2f;background:#2a2314;border-radius:var(--r);
  padding:13px 16px;margin-bottom:20px;font-size:12.5px;color:var(--warn);line-height:1.6}
.ppause b{color:var(--warn);font-weight:600}
.ppause span{display:block;color:var(--cream-2);margin-top:4px}

/* ── citation-grade cards, carried over from the shipped coach language ────
   Copied rather than re-typed so the progress page quotes evidence in exactly
   the voice the coach panel already uses. */
.ecard{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  background:var(--surface)}
.eh{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--raised);
  border-bottom:1px solid var(--line)}
.srckind{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;border-radius:4px;
  padding:3px 7px;border:1px solid var(--line-2);color:var(--cream-2)}
.k-sec-filing{color:#8FB8D6;border-color:#3d5568;background:#16222b}
.k-court-document{color:#D6A38F;border-color:#6b4a3a;background:#2b1c16}
.k-transcript{color:#9FD6B8;border-color:#3a6b52;background:#152b21}
.edoc{font-size:11.5px;color:var(--cream-2)}
.edate{font-size:11px;color:var(--cream-3);margin-left:auto;font-family:var(--num)}
.eclaim{padding:11px 12px 0;font-size:12.5px;line-height:1.6;color:var(--cream)}
.equote{margin:10px 12px;padding:9px 12px 9px 14px;border-left:2px solid var(--accent);
  background:var(--sunk);font-size:12px;line-height:1.6;color:var(--cream-2);
  font-style:italic;position:relative;border-radius:0 6px 6px 0}
.equote .qm{position:absolute;left:5px;top:4px;color:var(--accent);font-size:15px;font-style:normal}
.esrc{display:block;padding:9px 12px;border-top:1px solid var(--line);font-size:11.5px;
  color:var(--accent)}
.esrc:hover{background:var(--raised)}
.ehint{display:block;font-size:10.5px;color:var(--cream-3);margin-top:2px}
/* WHO IS BEING JUDGED. om_saydo_grade is delivered/partial/missed — a verdict
   on an executive team's own commitment, not on the reader. A page that shows
   the word "Missed" without naming its subject invites the worst possible
   misreading on a page called Progress. */
.esubj{padding:0 12px 11px;font-size:11px;color:var(--cream-3);line-height:1.55}
.esubj b{color:var(--cream-2);font-weight:600}
.sdg{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;border-radius:4px;
  padding:3px 7px;border:1px solid var(--line-2)}
.sdg.delivered{color:var(--pos);border-color:#2f5f4b;background:#12241d}
.sdg.partial{color:var(--warn);border-color:#6b5a2f;background:#2a2314}
.sdg.missed{color:var(--neg);border-color:#6b4033;background:#2a1a14}
.sdg.pending{color:var(--cream-3);border-color:var(--line-2);background:var(--sunk)}
.sdg.unverifiable{color:var(--cream-3);border-color:var(--line-2);background:var(--sunk)}
/* the five shipped om_saydo_grade values, with what the record holds under
   each. Pending and unverifiable are deliberately the same neutral as one
   another and distinct from the three that carry a citation — the schema
   draws that line and so does the chip. */
.sdrow{display:flex;gap:9px;flex-wrap:wrap}
.sdcell{border:1px solid var(--line-2);border-radius:9px;background:var(--sunk);
  padding:11px 13px;min-width:118px}
.sdcell .sdn{font-family:var(--num);font-size:21px;letter-spacing:-.02em;color:var(--cream);
  display:block;margin-bottom:7px}
.sdcell .sdw{display:block;font-size:10.5px;color:var(--cream-3);margin-top:7px;line-height:1.45}

.diffcard{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);
  overflow:hidden}
.dfh{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--raised);
  border-bottom:1px solid var(--line)}
.dfh .sp{flex:1}
.chg{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;border-radius:4px;
  padding:3px 7px;border:1px solid var(--line-2)}
.c-added{color:var(--pos);border-color:#2f5f4b;background:#12241d}
.c-removed{color:var(--neg);border-color:#6b4033;background:#2a1a14}
.c-modified{color:var(--warn);border-color:#6b5a2f;background:#2a2314}
.dffield{font-size:12px;color:var(--cream)}
.dfkind{font-size:11px;color:var(--cream-3)}
.dfrow{display:flex;gap:9px;align-items:baseline;padding:9px 12px 0}
.dfl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-3);
  flex:none;width:34px;padding-top:2px}
.dfspan{font-size:12px;line-height:1.6;font-style:italic}
.dfspan.was{color:var(--cream-3);text-decoration:line-through;text-decoration-color:var(--neg)}
.dfspan.now{color:var(--cream);text-decoration:underline;text-decoration-color:var(--pos);
  text-underline-offset:3px}
.dfnote{padding:10px 12px 11px;font-size:11px;line-height:1.55;color:var(--cream-3)}

.patcard{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);
  overflow:hidden}
.ph2{padding:10px 12px 0;font-size:12.5px;line-height:1.55;color:var(--cream)}
.prate{display:flex;align-items:baseline;gap:8px;padding:8px 12px 10px;flex-wrap:wrap}
.prate b{font-family:var(--num);font-size:22px;color:var(--cream);letter-spacing:-.02em}
.pof{font-size:11.5px;color:var(--cream-2)}
.pwin{font-size:11px;color:var(--cream-3);margin-left:auto;font-family:var(--num)}
.pcaveat{padding:10px 12px;background:var(--sunk);border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.55;color:var(--cream-2)}
.pcl{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-3);margin-bottom:4px}

/* ── source detail opened from a calibration cell ── */
.rec{border-top:1px solid var(--line);padding:14px 15px;display:grid;gap:12px}
.rech{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:12.5px}
.rech b{font-weight:600;letter-spacing:-.01em}
.rech .tk{font-family:var(--num);font-size:11px;color:var(--cream-3)}
.rech .sp{flex:1}
.rech .rd{font-family:var(--num);font-size:11px;color:var(--cream-3)}
.refs{display:flex;gap:8px;flex-wrap:wrap}
.ref{font-size:11px;color:var(--cream-2);border:1px solid var(--line-2);border-radius:5px;
  padding:4px 8px;background:var(--sunk)}
.ref b{color:var(--accent);font-weight:600}
.recnote{font-size:11.5px;color:var(--cream-3);line-height:1.6}

/* ── index page ── */
.ix{max-width:900px;margin:0 auto;padding:34px 26px 80px}
.ixh{font-size:29px;letter-spacing:-.035em;margin:0 0 8px;font-weight:600;text-wrap:balance}
.ixlede{font-size:14.5px;color:var(--cream-2);line-height:1.7;max-width:74ch;margin:0 0 26px}
/* A DIV, not an anchor. It was an anchor, and the "Also here" cell inside it
   is itself a link — an <a> inside an <a> is invalid, so the parser closed the
   outer one early and the entire trade-off row rendered OUTSIDE the card.
   The only symptom was a stray box below the card, which reads as a layout
   choice rather than a bug. Second time this class of thing has bitten: an
   invalid nesting does not error, it silently restructures the DOM. */
.ixcard{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);
  padding:20px 22px;margin-bottom:13px;display:block}
.ixcard:hover{background:var(--raised);border-color:#3a5f54}
.ixcard .k2{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-3);
  font-family:var(--num)}
.ixcard h3{font-size:18px;margin:6px 0 8px;letter-spacing:-.02em;font-weight:600}
.ixcard h3 a{color:var(--accent)}
.ixcard h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.ixtr a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ixcard p{font-size:13px;color:var(--cream-2);line-height:1.65;margin:0 0 12px;max-width:70ch}
.ixq{display:inline-block;font-size:12.5px;color:var(--accent);border-left:2px solid var(--accent);
  padding-left:11px;line-height:1.5;margin-bottom:12px}
.ixtr{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:13px;
  border-top:1px solid var(--line);padding-top:13px}
.ixtr div{font-size:11.5px;line-height:1.6;color:var(--cream-3)}
.ixtr div b{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--cream-2);margin-bottom:4px;font-weight:600}
.ixsec{margin:34px 0 13px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cream-3);font-weight:600}
.ixp{font-size:13px;color:var(--cream-2);line-height:1.7;max-width:74ch;margin:0 0 13px}
.ixp b{color:var(--cream);font-weight:600}
.ixp code{font-family:var(--num);font-size:11.5px;color:var(--accent);
  background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.ixlist{margin:0 0 13px;padding-left:20px;font-size:13px;color:var(--cream-2);line-height:1.7;max-width:74ch}
.ixlist b{color:var(--cream);font-weight:600}
.ixlist code{font-family:var(--num);font-size:11.5px;color:var(--accent);
  background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

@media (max-width:820px){
  .calwrap,.calax{grid-template-columns:1fr}
  .calpr{border-right:0;border-left:2px solid var(--line-2);text-align:left;
    padding:0 0 0 13px;min-height:0;margin-bottom:9px}
  .calpr.sound{border-left-color:var(--accent);border-right-color:var(--line-2)}
  .caltop{grid-column:1}
  .spine{grid-template-columns:1fr}
  .spdate{text-align:left;padding:14px 0 0}
  .sptrack{padding-left:17px}
}