/* ============================================================================================
   THE DESK LANGUAGE — one stylesheet, extracted from the eight design plates (d1-d9; d8 is a
   byte-identical duplicate of d2, so there are eight, not nine).

   WHY IT EXISTS. Measured 2026-08-27: 54,245 bytes of CSS lived in nine inline <style> blocks,
   shared by none of them, and index.html alone was 46.7% CSS. The palette was already
   consistent in INTENT and copy-pasted in fact — #6d6450 appeared fifteen times, #9e3417
   thirteen, #191509 and #1c3c86 eleven each. Those repeats are the tokens; nobody had named
   them. So this file does not invent a design, it names one the pages had already agreed on
   and the plates had already drawn.

   THE PRINCIPLE THE PLATES ENCODE, and it is not decoration: EPISTEMICS LIVE IN THE TYPOGRAPHY.
   A serif face carries prose a human wrote. A monospace face carries a machine fact. A number
   with no basis does not get to look like a number with one, and the plates make that visible
   before a word is read — the falsifier is in a box, the confidence is a marginal tag, the
   provenance is a footer, the synthetic data wears a badge.

   Load it first, then the page's own <style> for anything genuinely local.
   ============================================================================================ */

:root {
  /* PAPER AND INK. The two-tone ground: --paper is the page, --paper-2 the raised panel. */
  --paper:      #ece5d3;
  --paper-2:    #e7e1cf;
  --ink:        #191509;
  --muted:      #6d6450;
  --rule:       #d8d0bc;

  /* THE THREE SIGNAL COLOURS, and each means ONE thing everywhere. Blue is the desk's own
     voice: links, active state, the computed. Rust is opposition — a short, a negative, a
     rivalry edge, a refutation. Green is money: flows, prepay, the financing loop. Nothing
     else may use them, because a colour that means two things means neither. */
  --blue:       #1c3c86;
  --rust:       #9e3417;
  --money:      #2e6a46;

  /* Theme tints, used only in exposure bars and the regime fan. */
  --mem:        #8a7a2a;
  --ai:         #1c3c86;
  --chn:        #c08d7d;

  /* TYPE. The split is the point: serif = written, mono = measured. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gap:   14px;
  --pad:   18px;
}

/* ---------------------------------------------------------------------------- page furniture */

body.desk {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.6 var(--serif);
}
.desk .wrap { max-width: 1180px; margin: 0 auto; padding: 26px 22px 64px; }

/* THE PLATE FRAME. Every design sits inside one rounded, ruled rectangle on the paper. It is
   the only ornament in the system and it earns its place by grouping. */
.plate {
  border: 1px solid var(--ink); border-radius: 4px;
  background: var(--paper-2); padding: var(--pad);
}
/* The caption BELOW a plate, as in "plate i — the map". Italic serif, muted, never bold. */
.plate-cap { font: italic 13px/1.4 var(--serif); color: var(--muted); margin: 6px 0 0 2px; }

/* PAGE HEADER — letterspaced small-caps serif on the left, badges hard right. */
.ph { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.ph h1 {
  font: 15px/1.2 var(--serif); font-variant: small-caps; letter-spacing: .14em;
  text-transform: lowercase; margin: 0; font-weight: 600;
}
.ph .sub { font: italic 14px var(--serif); color: var(--muted); }
.ph .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* The formula a ranked view states about itself, e.g. "score = materiality x exposure x
   falsifier proximity". Monospace, muted, right-aligned — it is machinery, not prose. */
.ph .formula { font: 12.5px var(--mono); color: var(--muted); }

/* ------------------------------------------------------------------------------ honest badges
   THE MOST LOAD-BEARING COMPONENT IN THE SYSTEM. Every plate that shows data the desk did not
   measure says so in the top-right corner, in a colour that cannot be missed. `synthetic` and
   `projection` and `hypothetical` are not decorations; they are the difference between a
   demonstration and a lie. A page rendering demo data without one of these must not ship. */
.badge {
  font: 12px/1 var(--mono); padding: 5px 9px; border-radius: 3px; letter-spacing: .02em;
  display: inline-block; white-space: nowrap;
}
.badge.synthetic   { background: var(--blue);  color: #fff; }
.badge.hypothetical{ background: var(--rust);  color: #fff; }
.badge.projection  { background: transparent;  color: var(--ink); border: 1px solid var(--ink); }
.badge.live        { background: var(--money); color: #fff; }

/* --------------------------------------------------------------------------- the falsifier box
   A conclusion states what would overturn it, INSIDE A BOX, with a date and a count of prints.
   Boxed because it is the load-bearing sentence on the page and the eye must find it without
   reading: "FALSIFIED IF kr_customs_exports < -5% y/y - 2 prints - 2026-09..12". */
.falsifier {
  border: 1px solid var(--ink); border-radius: 3px; padding: 9px 12px; margin: 10px 0;
  font: 13px/1.45 var(--mono); background: transparent;
}
.falsifier .lead {
  font-variant: small-caps; letter-spacing: .08em; font-family: var(--serif); font-size: 13px;
}
.falsifier.armed { border-left: 3px solid var(--blue); }

/* ---------------------------------------------------------------------------- marginal tags
   Each paragraph carries its epistemic role in the left gutter: [D1] = xbrl, [L1] 0.55, or a
   revision stamp. The prose reads as prose; the provenance sits beside it and never inside it. */
.noted { display: grid; grid-template-columns: 72px 1fr; gap: 0 16px; margin: 0 0 14px; }
.noted .tag {
  font: 11.5px/1.5 var(--mono); color: var(--muted); text-align: right; padding-top: 4px;
}
.noted .tag b { display: block; font-weight: 400; color: var(--ink); }
/* A confidence riding on a tag gets the pill so it reads as a number, not a label. */
.noted .tag .p {
  display: inline-block; border: 1px solid var(--blue); color: var(--blue);
  border-radius: 9px; padding: 1px 7px; font-size: 11px;
}
/* A revision keeps a rule down its left edge — it is a correction to what stands above it. */
.noted.revision .body { border-left: 3px solid var(--blue); padding-left: 12px; }

/* --------------------------------------------------------------------------- composition bar
   "belief 61 - stat 24 - physics 9 - measured 6" over a stacked bar. What a number is MADE of,
   which is a different question from whether it is right. */
.comp { margin: 8px 0; }
.comp .legend { font: 12.5px var(--mono); color: var(--muted); margin-bottom: 5px; }
.comp .bar { display: flex; height: 11px; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; }
.comp .bar i { display: block; height: 100%; }
.comp .bar .belief   { background: var(--blue); }
.comp .bar .stat     { background: #b9b09a; }
.comp .bar .physics  { background: #8a8570; }
.comp .bar .measured { background: var(--paper); }

/* -------------------------------------------------------------------------- provenance footer
   "worldview v0 - graph 8f2c1a - registered 68947286". The build that produced the page, so a
   reader can ask for exactly this one again. */
.prov {
  border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 8px;
  font: 12px var(--mono); color: var(--muted);
}

/* ------------------------------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  font: 12.5px var(--mono); border: 1px solid var(--rule); border-radius: 12px;
  padding: 4px 11px; color: var(--ink); background: transparent; white-space: nowrap;
}
.chip.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.chip.dashed { border-style: dashed; }

/* --------------------------------------------------------------------------- the ranked list
   d3's inbox. Glyph, headline, the REASON it scored, the score. Every row states its own basis
   and nothing appears without a destination. */
.ranked { border-collapse: collapse; width: 100%; }
.ranked td { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.ranked tr.top td { background: #efe9da; }
.ranked tr.top td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.ranked .glyph { width: 26px; color: var(--muted); font: 13px var(--mono); }
.ranked .head  { font: 15px var(--serif); }
.ranked .why   { text-align: right; font: 12.5px var(--mono); color: var(--rust); white-space: nowrap; }
.ranked .why.cool { color: var(--muted); }
.ranked .score {
  width: 46px; text-align: center; font: 13px var(--mono);
  border: 1px solid var(--rule); border-radius: 11px; padding: 2px 0;
}

/* ------------------------------------------------------------------------------- the book table
   d7. THE COLUMN ORDER IS THE ARGUMENT: size as a fraction of half-Kelly and EDGE LEFT come
   before p&l, and every row carries a pre-committed dated exit. P&l is the fifth column on
   purpose — it is the past, and the other four are the decision. */
.book { width: 100%; border-collapse: collapse; font: 13.5px var(--mono); }
.book th {
  text-align: left; font: 13px var(--serif); font-variant: small-caps; letter-spacing: .06em;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding: 0 10px 6px 0; font-weight: 600;
}
.book td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule); }
.book .long  { color: var(--blue); }
.book .short { color: var(--rust); }
.book .pos   { color: var(--blue); }
.book .neg   { color: var(--rust); }
.book .exit  { color: var(--ink); }

/* ------------------------------------------------------------------------------ scenario grid
   "the book marked to every world - stressed rho". A point P&L is a claim that one world
   happened; this is the honest shape. Diverging scale, and the sign is in the colour. */
.scen { border-collapse: separate; border-spacing: 3px; font: 13px var(--mono); }
.scen th { font: 13px var(--serif); font-weight: 600; color: var(--ink); padding: 0 4px; }
.scen td { padding: 7px 12px; text-align: center; border-radius: 2px; min-width: 74px; }
.scen .p3 { background: #9fb4dd; } .scen .p2 { background: #c3d0e8; } .scen .p1 { background: #e0e7f3; }
.scen .n1 { background: #f0ded6; } .scen .n2 { background: #e2b8a8; } .scen .n3 { background: #cf9075; }

/* ------------------------------------------------------------------------- correlation matrix
   d7's best idea: a correlation the graph EXPLAINS is a different object from one it does not,
   and the unexplained cells are a research queue rather than a result. */
.corr { border-collapse: separate; border-spacing: 2px; font: 12px var(--mono); }
.corr td { width: 46px; height: 30px; text-align: center; border-radius: 2px; background: #e3e9f4; }
.corr td.hi { background: #c3d0e8; }
.corr .explained::after   { content: "\25A8"; color: var(--blue); }   /* mechanism in the graph */
.corr .unexplained::after { content: "\25CF"; color: var(--muted); }  /* -> discovery */

/* --------------------------------------------------------------------------- exposure bars */
.expo { font: 13px var(--mono); }
.expo .row { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; margin: 5px 0; }
.expo .lab { color: var(--muted); }
.expo .track { height: 13px; }
.expo .track i { display: block; height: 100%; background: var(--blue); }
.expo .track i.mem { background: var(--mem); } .expo .track i.chn { background: var(--chn); }
.expo .track i.negative { background: var(--rust); }

/* ------------------------------------------------------------------------------ gate checklist
   d5's pre-trade gates. THE BUTTON IS DISABLED UNTIL EVERY GATE PASSES, and that is the whole
   component — a checklist that cannot be overridden by wanting to. */
.gates { list-style: none; padding: 0; margin: 0; font: 15px var(--serif); }
.gates li { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: baseline; padding: 5px 0; }
.gates .dot { color: var(--money); }
.gates .dot.open { color: var(--rust); }
.gates .ev { font: 12.5px var(--mono); color: var(--muted); text-align: right; }
.gates + .log {
  margin-top: 10px; font: 13px var(--serif); font-variant: small-caps; letter-spacing: .08em;
  padding: 7px 14px; border: 1px solid var(--rule); border-radius: 3px;
  background: transparent; color: var(--muted); cursor: not-allowed;
}
.gates + .log.ready { border-color: var(--ink); color: var(--ink); cursor: pointer; }

/* ------------------------------------------------------------------------------- timeline rail
   Quarters with `now` marked. Used under the regime fan and the relationship layers. */
.rail { display: flex; justify-content: space-between; font: 12.5px var(--mono); color: var(--muted); margin-top: 8px; }
.rail .now { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------------- utilities */
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 16px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ============================================================================================
   THE THREE THAT NEEDED THEIR OWN GEOMETRY. Everything above is type and rule; these three are
   drawings, and each encodes an argument the desk makes nowhere else.
   ============================================================================================ */

/* ---------------------------------------------------------------------------- the regime fan
   d6. THE SINGLE MOST IMPORTANT COMPONENT IN THE SYSTEM, because it is the worldview itself.
   Realized history is SOLID and sits left of `now`; the predicted mixture fans right, each band
   a regime and its opacity the probability. Every other quantity on the desk — exposure,
   justified multiple, thesis probability — is a mixture over THIS, which is what "wired to the
   worldview as a whole rather than to a thesis" means in practice.

   Implemented as stacked areas so the bands always sum to one; Sigma-p = 1 is a property of the
   drawing rather than something a caption asserts. */
.fan { position: relative; }
.fan svg { display: block; width: 100%; height: auto; }
.fan .band-tight { fill: #b9c2de; }
.fan .band-mid   { fill: #d6d0bd; }
.fan .band-glut  { fill: #d8ab99; }
.fan .realized   { opacity: 1; }
.fan .predicted  { opacity: .72; }
/* `now` is a hard rule, not a gradient: the desk knows which side of it a number came from. */
.fan .now { stroke: var(--ink); stroke-width: 2; }
/* A dated event that will re-read the fan — a print, a contract reset, a qual window. */
.fan .event { stroke: var(--rust); stroke-dasharray: 3 3; stroke-width: 1; }
.fan .event-label { font: 12px var(--mono); fill: var(--rust); }
.fan .basis { font: 12px var(--mono); fill: var(--muted); }

/* ------------------------------------------------------------------------------- peer strip
   d4. A multiple is only a number against a distribution, so the distribution is drawn and the
   name is marked ON it. The justified BAND is a shaded region, never a point — a point estimate
   here would claim a precision the model does not have. */
.strip { position: relative; height: 46px; font: 12px var(--mono); }
.strip .axis { position: absolute; left: 0; right: 0; top: 22px; border-top: 1px solid var(--rule); }
.strip .peer { position: absolute; top: 14px; width: 1px; height: 17px; background: var(--muted); }
.strip .band { position: absolute; top: 14px; height: 17px; background: #c8d0e4; opacity: .55; }
.strip .self { position: absolute; top: 8px; width: 2px; height: 29px; background: var(--ink); }
.strip .self-label { position: absolute; top: 33px; transform: translateX(-50%); color: var(--ink); }
.strip .peer-label { position: absolute; top: -2px; transform: translateX(-50%); color: var(--muted); }

/* --------------------------------------------------------------------------------- ego graph
   d4 and d9. A node with its neighbourhood, and THE DIRECTIONS ARE LABELLED — depends left,
   feeds right, partners up, competes down. An unlabelled graph makes the reader guess which way
   causation runs, and on this desk that is the whole question.

   d9's harder lesson is encoded in the edge classes: EACH LAYER HAS ITS OWN ONTOLOGY OF EDGE.
   Money is a dashed flow with a loop marker for financing that feeds its own revenue. A deal
   carries an expiry clock. RIVALRY IS NOT AN EDGE AT ALL — rivals share a territory and the
   split migrating between them is the competition, so `.rivalry` styles a REGION, not a line. */
.ego { position: relative; }
.ego svg { display: block; width: 100%; height: auto; }
.ego .node { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.ego .node.focus { fill: var(--blue); stroke: var(--blue); }
.ego .node-label { font: 13px var(--mono); fill: var(--ink); text-anchor: middle; }
.ego .node-sub   { font: 11.5px var(--mono); fill: var(--muted); text-anchor: middle; }
.ego .dir { font: italic 13px var(--serif); fill: var(--muted); }

.ego .edge          { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.ego .edge.money    { stroke: var(--money); stroke-dasharray: 5 4; }
.ego .edge.deal     { stroke: var(--blue); stroke-width: 2; }
.ego .edge.supply   { stroke: var(--ink); }
/* Rivalry: a shared territory, drawn as a region behind the nodes with the split as a bar. */
.ego .rivalry       { fill: var(--rust); opacity: .16; }
.ego .rivalry-split { height: 10px; display: flex; }
.ego .rivalry-split i { display: block; height: 100%; }
/* The financing loop that feeds its own revenue — a revenue-quality flag, audited by the
   conservation check rather than asserted by a label. */
.ego .loop { fill: var(--money); }
.ego .loop-label { font: 12px var(--mono); fill: var(--money); }
/* A deal chip pinned to its edge, carrying the date it goes hollow. */
.ego .deal-chip {
  font: 12px var(--mono); fill: #fff;
}
.ego .deal-chip-bg { fill: var(--blue); rx: 10; }

/* ----------------------------------------------------------------------------- alert grammar
   d5. An alert is a SENTENCE with a fixed shape — condition, destination, expiry — and the
   schema is printed beside it so the grammar is learnable rather than remembered. Nothing
   surfaces without a destination and everything dies on its date. */
.alert-line {
  font: 17px/1.5 var(--mono); border: 1px solid var(--ink); border-radius: 22px;
  padding: 9px 18px; display: inline-block; background: transparent;
}
.alert-schema { font: 13px var(--mono); color: var(--muted); margin-left: 14px; }
.alert-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px;
             align-items: baseline; font: 15px var(--mono); padding: 4px 0; }
.alert-row .dest { color: var(--blue); }
.alert-row .until { color: var(--muted); }
.alert-row .armed {
  font: 12.5px var(--mono); border: 1px solid var(--ink); border-radius: 3px; padding: 2px 9px;
}

/* ============================================================================== the readings
   THE FRONT DOOR'S FIRST SCREEN, generated by tools/export_front_readings.py.

   WHY IT IS A GRID OF PLATES AND NOT A TABLE. A table implies the rows are commensurable, and
   these are not: one is a percentile, one is a vol-point difference, one is a technology name.
   What they share is the SHAPE of a defensible figure — question, value, basis, falsifier — so
   the plate repeats and the contents do not have to line up.

   The value is the only thing set large, and it is monospace. The question above it is serif.
   That is the whole epistemic contract of this stylesheet in two lines of one component: a
   human asked, a machine answered. */
.readings {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--gap); margin: 0 0 26px;
}
.reading { display: flex; flex-direction: column; }
/* The question, in the desk's serif, because a person wrote it. Capped so a long one cannot
   set the row height for the whole grid. */
.reading .r-q {
  font: 15.5px/1.42 var(--serif); margin: 0 0 12px; color: var(--ink); text-wrap: pretty;
}
/* THE READING ITSELF. Tabular figures so a column of them aligns on the decimal, and a size
   large enough that it is the first thing seen after the question. */
.reading .r-v { margin: 0 0 10px; line-height: 1.1; }
.reading .r-v b {
  font: 600 30px/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; color: var(--ink);
}
.reading .r-v span { font: 12.5px var(--mono); color: var(--muted); margin-left: 7px; }
/* The basis, small and monospace — it is machinery. It is also long by design, because a
   basis that fits in a caption is usually not a basis. */
.reading .r-b {
  font: 12px/1.5 var(--mono); color: var(--muted); margin: 0 0 4px;
  overflow-wrap: break-word;
}
.reading .falsifier { margin-top: auto; }
.reading .r-age { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
.reading .r-also { font: 11.5px var(--mono); color: var(--muted); margin: 8px 0 0; }
.reading .r-also a { color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------------------- the unanswered, classified
   NOT A DISCLAIMER. "38 unanswered" tells a reader nothing; "twelve are missing a premise and
   nine are wired but unread" tells them what the desk is and where it is in its build. The
   count is set in the blue that means the desk's own voice, and the reason beside it is serif
   prose, because the classification is a judgement and it should not dress as a measurement. */
.ledger { border: 1px solid var(--rule); border-radius: 4px; padding: var(--pad); }
.l-tab { border-collapse: collapse; width: 100%; margin: 4px 0 2px; }
.l-tab td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.l-tab tr:last-child td { border-bottom: 0; }
.l-n {
  font: 600 19px/1 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--blue); text-align: right; width: 44px; white-space: nowrap;
}
.l-k {
  font: 12.5px var(--mono); color: var(--ink); white-space: nowrap;
  width: 1%; padding-right: 18px;
}
.l-w { font: 14px/1.45 var(--serif); color: var(--muted); }

@media (max-width: 560px) {
  .readings { grid-template-columns: 1fr; }
  .reading .r-v b { font-size: 25px; }
  .l-k { white-space: normal; }
}

/* The metabar chips are links on the front door — a reading in the strip scrolls to its plate.
   Element+class beats the bare .chip a page defines locally, so this holds without touching
   any page's own stylesheet. */
a.chip { text-decoration: none; }
a.chip:hover { background: var(--paper-2); }
/* The strip is DATA, not prose, so it is not bound by the page's 64ch reading measure — three
   readings at their own units do not fit one, and wrapping the last chip onto a row of its own
   made the freshest number look like a footnote. Element-qualified so it beats a page's local
   .metabar without that page's stylesheet being touched. */
body .metabar { max-width: 900px; }

/* The corpus page's verdict jump-nav. */
.corpus-nav { margin: 18px 0 26px; }
.vgroup { margin: 0 0 34px; }
.vgroup > .ph { border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
/* An unanswered question is dimmer than an answered one and still fully legible — it is
   evidence about the desk, not an apology. */
.reading.open { background: transparent; border-style: dashed; }
.reading .r-why { font: 13px/1.5 var(--serif); color: var(--muted); margin: 0 0 10px; }
/* A basis that every plate in a group shares is stated once on the group, not in each plate. */
.vgroup-basis { margin: 10px 0 14px; max-width: 90ch; }

/* ------------------------------------------------------------------------------- the chain
   A composed bottom-up model: each rung's band, its width multiplier, and the rung where the
   composition STOPS. The break row is set in rust because it is the load-bearing statement —
   a chain that reports a number for every rung has hidden which ones it invented. */
.chain { margin: 0 0 26px; }
.ctab { border-collapse: collapse; width: 100%; font: 13px var(--mono); }
.ctab td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.ctab tr:last-child td { border-bottom: 0; }
.ctab .c-l { color: var(--muted); white-space: nowrap; width: 1%; padding-right: 22px; }
.ctab .c-b { font-variant-numeric: tabular-nums; color: var(--ink); }
.ctab .c-b span { color: var(--muted); margin-left: 6px; }
.ctab .c-w { text-align: right; color: var(--muted); white-space: nowrap; }
.ctab tr.brk .c-l { color: var(--rust); font-weight: 600; }
.ctab tr.brk .c-b { color: var(--muted); font: 12px/1.5 var(--mono); }