/* ON-FORMAT — the .theon bundle viewer prototype.
 *
 * Every selector here is prefixed `onf-`, which exists in no other file on the site. The page
 * borrows the brand from styles.css — the field, the grain, the nav, the footer, the tokens — and
 * adds nothing to it: one stray unprefixed rule in a 3,000-line shared stylesheet restyles
 * descendants nobody was looking at, and this page is not worth that risk.
 *
 * Product tokens, matching the components already on the homepage:
 *   text #e9eefb · soft #a9b4ca · muted #788398 · surface #11141d · raised #1b2130
 *   border rgba(132,153,190,.13)
 */

.onf-wrap{max-width:var(--shell-max);margin:0 auto;padding:172px 44px 96px}

/* THE <code> TRAP, closed once for the whole page.
   `code{font-family:monospace}` in the user-agent stylesheet is an ELEMENT rule, so it beats
   anything a parent passes down by inheritance. Every bare <code> on this page was therefore
   rendering in whatever mono the operating system picked, next to ids in the site's own — and it
   was found by measuring computed styles, not by looking, because a fallback mono looks like a
   mono. It had happened in three separate places: the Raw panel (63 nodes), the note above the
   graph, and the why-cards at the foot. This rule means the next one does not happen.
   Same specificity as the rules below, declared first, so each of them still wins on size. */
.onf-wrap code{font-family:var(--mono-ws)}
.onf-head{max-width:1000px;margin:0 0 26px}
/* The headline is a SENTENCE, not two short lines, so it takes a smaller ramp than the homepage
   display type — at 78px it wrapped to five lines and stopped reading as one claim.
   The 15ch cap that came with that change was the other half of the same problem: it held the
   line to about 450px inside a 760px column, so the sentence broke five times anyway and read
   as a stack of fragments rather than a claim. It fills its column now. */
.onf-head h1{font-size:clamp(32px,4.2vw,60px);line-height:1.06;letter-spacing:-.035em;
  margin:0 0 24px;max-width:none;text-align:left;text-wrap:balance}
.onf-head .lede{margin-top:0}

/* ── the format model under the claim ──────────────────────────────────────────────────── */
.onf-model{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:stretch;
  margin:0 0 30px}
.onf-modelstep{border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  background:linear-gradient(180deg,#ffffff0b,#ffffff04)}
.onf-modelkey{display:inline-block;margin-bottom:10px;color:#c4b5ff;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase}
.onf-modelkey code{font-family:var(--mono-ws);font-size:14px;letter-spacing:0;text-transform:none;
  color:#e9eefb}
.onf-modelstep p{margin:0;color:#a9b4ca;font-size:13.5px;line-height:1.6}
.onf-modelstep b{color:#e9eefb;font-weight:500}
.onf-modelarrow{align-self:center;color:#5d6679;font-size:18px}

/* It closes the page now instead of interrupting it, so the top margin does the separating the
   bottom one used to. */
.onf-boundary{margin:34px 0 0;padding:16px 20px;border:1px solid rgba(132,153,190,.16);
  border-left:2px solid var(--purple);border-radius:14px;background:#ffffff06;color:#a9b4ca;
  font-size:13.5px;line-height:1.6;max-width:104ch}
.onf-boundary b{color:#e9eefb;font-weight:500}

/* ── the composition, drawn from the open bundle ────────────────────────────────────────── */
.onf-composition{margin:0 0 18px}
.onf-compbox{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;
  border:1px solid rgba(132,153,190,.16);border-radius:20px;padding:20px 24px;background:#0d1017}
.onf-complabel{color:#788398;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:12px}
.onf-complabel code{font-family:var(--mono-ws);font-size:11px;letter-spacing:0;text-transform:none;
  color:#a9b4ca}
.onf-units{display:flex;flex-wrap:wrap;gap:7px}
.onf-unit{display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;border-radius:9px;
  border:1px solid rgba(132,153,190,.2);background:#ffffff08;cursor:pointer;color:inherit;font:inherit}
.onf-unit:hover{background:#1b2130;border-color:#7b4dff66}
.onf-unit code{font-family:var(--mono-ws);font-size:12px;color:#dfe6f7}
.onf-unitn{color:#788398;font-size:11px}
/* A canonical record carried for context reads differently from an admitted unit, deliberately:
   same row, different weight, no `.on` monospace. The reader should be able to tell them apart
   without reading the label twice. */
.onf-unit--record{border-style:dashed;border-color:rgba(132,153,190,.28);background:transparent;
  color:#a9b4ca;font-size:12.5px}
.onf-unit--record:hover{background:#ffffff08;border-color:#7b4dff66}
.onf-unit--static{cursor:default;font-family:var(--mono-ws);font-size:11.5px}
.onf-unit--static:hover{background:transparent;border-color:rgba(132,153,190,.28)}
.onf-complabel--second{margin-top:16px}
.onf-chainrecord{color:#a9b4ca;font-size:11.5px;padding:1px 7px;border-radius:6px;
  border:1px dashed rgba(132,153,190,.3)}
.onf-chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.onf-chain code{font-family:var(--mono-ws);font-size:11.5px;color:#c4b5ff}
.onf-chainarrow{color:#5d6679;font-size:12px}
.onf-chainplus{color:#788398;font-size:11.5px}
.onf-compcol{min-width:0}
.onf-compcol--out{text-align:left}
.onf-compout{display:flex;align-items:center;gap:9px}
.onf-compout code{font-family:var(--mono-ws);font-size:14px;color:#e9eefb}
.onf-compwhy{margin:10px 0 0;color:#a9b4ca;font-size:13px;line-height:1.55}

/* ── the bundle bar ─────────────────────────────────────────────────────────────────────────
   The first thing on screen, because the first question is WHAT FILE IS THIS — its name, its
   declared root, how much it carries, and that the same Runtime has others. */
.onf-bundlebar{margin:0 0 18px}
.onf-bundle{display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:start;
  border:1px solid rgba(132,153,190,.16);border-radius:20px;padding:22px 26px;
  background:linear-gradient(180deg,#ffffff0b,#ffffff04)}
.onf-bundleid{grid-column:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:12px}
.onf-bundleicon{color:var(--purple);font-size:15px}
.onf-bundlename{color:#e9eefb;font-family:var(--mono-ws);font-size:17px;letter-spacing:-.01em}
.onf-bundlekind{padding:4px 11px;border-radius:999px;border:1px solid #7b4dff55;background:#7b4dff12;
  color:#c4b5ff;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.onf-bundlefacts{grid-column:1;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;
  align-items:baseline}
.onf-bundlefacts dt{color:#788398;font-family:var(--mono-ws);font-size:11.5px;letter-spacing:.02em}
.onf-bundlefacts dd{margin:0;color:#dfe6f7;font-size:13.5px}
.onf-bundleswitch{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:8px;
  min-width:290px}
.onf-switchlabel{color:#788398;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.onf-switch{display:flex;flex-direction:column;gap:3px;text-align:left;padding:11px 14px;
  border-radius:13px;border:1px solid rgba(132,153,190,.18);background:#ffffff06;cursor:pointer;
  color:inherit;font:inherit}
.onf-switch:hover{background:#1b2130;border-color:#7b4dff66}
.onf-switchname{color:#dfe6f7;font-family:var(--mono-ws);font-size:12.5px}
.onf-switchkind{color:#788398;font-size:11.5px}

/* ── the viewer shell ───────────────────────────────────────────────────────────────────── */
.onf-app{display:grid;grid-template-columns:302px 1fr;gap:0;border:1px solid rgba(132,153,190,.13);
  border-radius:22px;overflow:hidden;background:#11141d;box-shadow:0 30px 120px #00000066,0 16px 46px #654cff12}
.onf-rail{border-right:1px solid rgba(132,153,190,.13);background:#0d1017;padding:16px 14px 18px;
  display:flex;flex-direction:column;gap:2px}

/* ── the manifest ───────────────────────────────────────────────────────────────────────── */
.onf-manhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:6px 8px 12px;color:#e9eefb;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.onf-mancount{color:#788398;font-size:11px;letter-spacing:.02em;text-transform:none}
.onf-mangroup{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.onf-mantype{color:#5d6679;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 8px 4px}
.onf-mantype code{font-family:var(--mono-ws);font-size:10.5px;letter-spacing:.02em;
  text-transform:none;color:#8e97ab}
.onf-rec,.onf-support{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:11px;border:1px solid transparent;background:none;color:inherit;font:inherit}
.onf-rec{cursor:pointer}
.onf-rec:hover{background:#ffffff08}
.onf-rec.is-open{background:#1b2130;border-color:rgba(132,153,190,.22)}
.onf-recmark{color:var(--purple);font-size:11px;line-height:18px}
.onf-rec.is-open .onf-recmark{color:var(--cyan)}
.onf-support .onf-recmark{color:#788398}
.onf-recbody{display:flex;flex-direction:column;gap:2px;min-width:0}
.onf-recname{color:#e9eefb;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onf-recid{color:#5d6679;font-family:var(--mono-ws);font-size:10.5px}
/* The closure sentence sits at the bottom of the manifest because that is where the question
   "is that everything?" is actually asked. */
.onf-closure{margin:auto 0 0;padding:14px 10px 2px;color:#788398;font-size:11.5px;line-height:1.55;
  border-top:1px solid rgba(132,153,190,.1)}

.onf-main{display:flex;flex-direction:column;min-width:0}
.onf-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;
  border-bottom:1px solid rgba(132,153,190,.13);background:#0d1017;flex-wrap:wrap}
.onf-crumb{display:flex;align-items:baseline;gap:9px;min-width:0;flex-wrap:wrap}
.onf-crumbfile{color:#a9b4ca;font-family:var(--mono-ws);font-size:12.5px}
.onf-crumbsep{color:#4c5468;font-size:11px}
.onf-crumbrec{color:#e9eefb;font-size:13px}
.onf-crumbid{color:#5d6679;font-family:var(--mono-ws);font-size:11px}
.onf-tabs{display:flex;gap:2px;padding:3px;border:1px solid rgba(132,153,190,.16);border-radius:999px;
  background:#ffffff06}
.onf-tab{padding:7px 15px;border-radius:999px;border:0;background:none;cursor:pointer;color:#a9b4ca;
  font:inherit;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.onf-tab:hover{color:#e9eefb}
.onf-tab.is-on{background:linear-gradient(135deg,var(--purple),#4d9fff);color:#fff;
  box-shadow:0 0 26px #654cff55}
.onf-panel{padding:26px 34px 36px;min-height:560px;max-height:780px;overflow:auto}
/* One line above a projection, saying what it is a projection OF. */
.onf-projnote{color:#788398;font-size:12px;line-height:1.55;margin:0 0 20px;max-width:78ch}
.onf-projnote b{color:#a9b4ca;font-weight:500;font-family:var(--mono-ws);font-size:11.5px}
.onf-projnote code{font-size:11.5px;color:#a9b4ca}

/* ── READ ───────────────────────────────────────────────────────────────────────────────── */
.onf-readhead{margin:0 0 26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.onf-readhead h2{flex:1 0 100%;font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-.035em;
  color:#e9eefb;margin:12px 0 0;font-weight:500}
.onf-readsub{flex:1 0 100%;color:#788398;font-size:12.5px;margin:6px 0 0}
.onf-chip{display:inline-block;padding:5px 11px;border-radius:999px;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;border:1px solid rgba(132,153,190,.22);color:#a9b4ca}
.onf-chip--operation{color:#c4b5ff;border-color:#7b4dff55;background:#7b4dff12}
.onf-chip--artifact{color:#7ee7ff;border-color:#21b8ff44;background:#21b8ff10}
.onf-chip--decision{color:#8ef0cd;border-color:#2fd4b844;background:#2fd4b810}
.onf-chip--evidence,.onf-chip--execution{color:#a9b4ca}
.onf-chip--source,.onf-chip--project{color:#d7d8e5}
.onf-rootflag{padding:5px 11px;border-radius:999px;border:1px dashed #7b4dff66;color:#c4b5ff;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}

.onf-fields{margin:0;display:grid;gap:1px;background:rgba(132,153,190,.13);
  border:1px solid rgba(132,153,190,.13);border-radius:16px;overflow:hidden}
.onf-f{display:grid;grid-template-columns:190px 1fr;gap:20px;background:#11141d;padding:15px 20px}
.onf-f dt{color:#788398;font-size:12px;letter-spacing:.02em}
.onf-f dd{margin:0;color:#e9eefb;font-size:14px;line-height:1.5}
.onf-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.onf-mono{font-family:var(--mono-ws);font-size:12.5px;color:#c6d0e4;word-break:break-all}
.onf-tag{display:inline-block;padding:2px 8px;border-radius:6px;background:#ffffff0d;color:#a9b4ca;
  font-size:11px;letter-spacing:.02em}
.onf-tag code{font-family:var(--mono-ws);font-size:10.5px}
.onf-state{display:inline-block;padding:4px 11px;border-radius:999px;background:#ffffff0d;
  color:#e9eefb;font-size:12px}
.onf-state--ok{background:#2fd4b81f;color:#8ef0cd}
.onf-state--warn{background:#ffca6a1f;color:#ffca6a}
.onf-h3{color:#e9eefb;font-size:15px;font-weight:500;letter-spacing:-.01em;margin:30px 0 14px}
.onf-note{color:#788398;font-size:12.5px;line-height:1.6;margin:18px 0 0;max-width:70ch}

/* A reference is a real affordance: it opens that record. It is styled as a link because that is
   what it does, and it is a <button> because it navigates nothing. */
.onf-ref{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;margin:0 4px 4px 0;
  border-radius:9px;border:1px solid rgba(132,153,190,.2);background:#ffffff08;color:#dfe6f7;
  font:inherit;font-size:12.5px;cursor:pointer}
.onf-ref::before{content:"◈";color:var(--purple);font-size:10px}
.onf-ref:hover{background:#1b2130;border-color:#7b4dff66;color:#fff}

.onf-feedback{border:1px solid rgba(132,153,190,.13);border-radius:16px;padding:18px 20px;background:#11141d}
.onf-stars{color:#ffca6a;font-size:15px;letter-spacing:.14em}
.onf-feedback p{color:#e9eefb;font-size:14px;line-height:1.55;margin:10px 0 0}
.onf-feedmeta{color:#788398;font-size:11.5px;margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;
  align-items:center}

/* ── GRAPH ──────────────────────────────────────────────────────────────────────────────── */
.onf-graph{width:100%;height:auto;display:block}
.onf-edge line{stroke:#8499be40;stroke-width:1.2}
.onf-edge text{fill:#5d6679;font-family:var(--mono-ws);font-size:10.5px;text-anchor:middle;
  paint-order:stroke;stroke:#11141d;stroke-width:5px;stroke-linejoin:round}
.onf-edge.is-live line{stroke:#7b4dffcc;stroke-width:1.8}
.onf-edge.is-live text{fill:#c4b5ff}
.onf-node{cursor:pointer}
.onf-node rect{fill:#1b2130;stroke:rgba(132,153,190,.26);stroke-width:1}
.onf-node:hover rect{stroke:#7b4dff88}
.onf-node.is-root rect{stroke-dasharray:5 4;stroke:#7b4dff99}
.onf-node.is-open rect{fill:#241c4d;stroke:var(--purple);stroke-width:1.6;stroke-dasharray:none}
.onf-node:focus-visible rect{stroke:var(--cyan);stroke-width:2}
.onf-node text{text-anchor:middle;pointer-events:none}
.onf-node-type{fill:#788398;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.onf-node-label{fill:#e9eefb;font-size:12.5px}
.onf-node--artifact rect{fill:#141d28}
.onf-node--decision rect{fill:#122019}
.onf-node--source rect{fill:#141620}

/* ── CONTEXT ────────────────────────────────────────────────────────────────────────────── */
.onf-ctxhead{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  padding:0 0 22px;border-bottom:1px solid rgba(132,153,190,.13)}
.onf-scope{display:block;color:#e9eefb;font-size:17px;letter-spacing:-.02em}
.onf-scopewhy{display:block;color:#788398;font-size:12px;margin-top:4px}
.onf-budget{text-align:right;min-width:210px}
.onf-budgetfig{color:#e9eefb;font-family:var(--mono-ws);font-size:13px}
.onf-budgetunit{color:#788398;font-size:11.5px;margin-left:6px}
.onf-budgetbar{display:block;height:5px;border-radius:999px;background:#ffffff0f;margin-top:9px;overflow:hidden}
.onf-budgetbar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--purple),#4d9fff 60%,var(--cyan))}
.onf-admitted{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:rgba(132,153,190,.13);
  border:1px solid rgba(132,153,190,.13);border-radius:14px;overflow:hidden}
.onf-admitted li{display:grid;grid-template-columns:210px 1fr auto;gap:18px;align-items:baseline;
  background:#11141d;padding:13px 18px}
.onf-origin{color:#c4b5ff;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.onf-what{color:#e9eefb;font-size:13.5px}
.onf-detail{color:#788398;font-size:12px;text-align:right}
.onf-excluded{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.onf-excluded li{padding:7px 13px;border-radius:999px;border:1px solid rgba(132,153,190,.16);
  background:#ffffff06;color:#a9b4ca;font-size:12.5px}
.onf-excluded b{color:#e9eefb;font-weight:500}
.onf-account{color:#788398;font-size:12px;margin:16px 0 0}
/* An absent Trail is a state, not an error: it gets the same care as a present one. */
.onf-absent{border:1px solid rgba(132,153,190,.13);border-radius:16px;padding:22px 24px;background:#11141d}
.onf-absent h3{margin:0 0 10px;color:#e9eefb;font-size:16px;font-weight:500;letter-spacing:-.01em}
.onf-absent p{margin:0;color:#a9b4ca;font-size:13.5px;line-height:1.6;max-width:74ch}
.onf-absentrefs{margin-top:16px}

/* ── RAW ────────────────────────────────────────────────────────────────────────────────── */
/* The <code> trap again (see the top of this file), and the worst of it: 63 nodes of JSON on the
   one screen whose whole job is to look like a real file. `font:inherit` rather than just the
   family, because this <code> must take the <pre>'s 12.5px too. */
.onf-raw code{font:inherit;color:inherit}
.onf-raw{margin:0;font-family:var(--mono-ws);font-size:12.5px;line-height:1.7;color:#a9b4ca;
  white-space:pre-wrap;word-break:break-word}
.onf-k{color:#c4b5ff}
.onf-s{color:#8ef0cd}
.onf-n{color:#7ee7ff}
.onf-b{color:#ffca6a}

/* ── the argument under the viewer ──────────────────────────────────────────────────────── */
.onf-why{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:60px 0 0}
.onf-why article{border:1px solid var(--line);border-radius:22px;padding:26px 26px 28px;
  background:linear-gradient(180deg,#ffffff0b,#ffffff04)}
.onf-why h3{margin:0 0 10px;font-size:19px;font-weight:500;letter-spacing:-.02em;color:#eef0f7}
.onf-why p{margin:0;color:#a9b4ca;font-size:14px;line-height:1.6}

@media (max-width:1040px){
  .onf-model{grid-template-columns:1fr;gap:12px}
  .onf-modelarrow{transform:rotate(90deg);justify-self:center}
  .onf-compbox{grid-template-columns:1fr;gap:16px}
  .onf-comparrow{transform:rotate(90deg);justify-self:center}
  .onf-app{grid-template-columns:1fr}
  .onf-rail{border-right:0;border-bottom:1px solid rgba(132,153,190,.13)}
  .onf-closure{margin-top:10px}
  .onf-bundle{grid-template-columns:1fr}
  .onf-bundleswitch{grid-column:1;grid-row:auto;min-width:0}
  .onf-why{grid-template-columns:1fr}
}
@media (max-width:760px){
  .onf-wrap{padding:124px 16px 72px}
  .onf-bundle{padding:18px 18px 20px;gap:16px}
  .onf-bundlename{font-size:14.5px;word-break:break-all}
  .onf-bundlefacts{grid-template-columns:1fr;gap:2px}
  .onf-bundlefacts dt{margin-top:8px}
  .onf-panel{padding:20px 16px 26px;max-height:none}
  .onf-bar{padding:12px 16px;gap:12px}
  .onf-tabs{width:100%;justify-content:space-between}
  .onf-tab{flex:1;padding:8px 6px;text-align:center;letter-spacing:.08em}
  .onf-f{grid-template-columns:1fr;gap:6px}
  .onf-admitted li{grid-template-columns:1fr;gap:5px}
  .onf-detail{text-align:left}
  .onf-budget{text-align:left;min-width:0}
  /* The graph keeps its geometry and scrolls sideways inside the panel: squeezing a ten-node
     picture into 390px would make every label unreadable, which is worse than a scroll. */
  .onf-graph{min-width:720px}
  .onf-readhead h2{font-size:24px}
  .onf-compbox{padding:18px}
  .onf-boundary{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){
  .onf-tab,.onf-rec,.onf-ref,.onf-switch{transition:none}
}

/* --- a real file in the hero --------------------------------------------
   Not an illustration of the argument — the argument itself, placed where a
   reader who never scrolls will still meet it. The third row is the one that
   matters and it is the one that is lit: a record that opens with nothing
   installed is the whole claim, and it was two thousand pixels down.
   ------------------------------------------------------------------------ */
.onf-herofile{margin:26px 0 30px;max-width:560px;padding:18px 20px 16px;
  border:1px solid rgba(150,175,255,.18);border-radius:14px;
  background:linear-gradient(180deg,rgba(150,175,255,.055),rgba(150,175,255,.015))}
.onf-herofile-name{display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono-ws,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:14.5px;color:#f5f4f1;margin-bottom:13px}
.onf-herofile-name span{color:#a78bfa}
.onf-herofile-name b{margin-left:auto;font-weight:400;font-size:11.5px;color:#8c93a8}
.onf-herofile-rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;margin:0}
.onf-herofile-rows dt{font-family:var(--mono-ws,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:12px;color:#8c93a8}
.onf-herofile-rows dd{margin:0;font-size:12.5px;color:#a9b4ca;line-height:1.5}
.onf-herofile-rows dd.is-lit{color:#7ee7ff}
/* The manifest, in the hero. Nine rows and a supporting record: enough to fill the column the
   headline leaves empty, and short enough that it never needs to scroll. Each row carries its
   type, which is where the distinction between a `.on` unit and a canonical record now lives —
   a paragraph used to explain in prose that a Project is not an `.on`, and the rows say it by
   being shaped differently. Showing beats telling, and the telling was scaffold. */
.onf-herolisthead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:15px 0 8px;padding-top:13px;border-top:1px solid rgba(150,175,255,.14);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#788398}
.onf-herolist{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.onf-herorec{display:flex;align-items:baseline;gap:9px;padding:4px 0;min-width:0}
.onf-heromark{color:#a78bfa;font-size:10px;line-height:1.6;flex:none}
.onf-herorec.is-support .onf-heromark{color:#5d6679}
.onf-heroname{color:#dfe6f7;font-size:12.5px;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.onf-herorec.is-support .onf-heroname{color:#9aa3b8}
/* Right-aligned so the types form a column the eye can read down: six `.on` units and one that
   deliberately is not. */
.onf-herotype{margin-left:auto;flex:none;font-family:var(--mono-ws,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:10.5px;color:#8b7fd4;letter-spacing:.01em}
.onf-herotype.is-record{font-family:inherit;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#6b7488}
/* The supporting row's right-hand side is a sentence fragment naming a file — "on model.xlsx" —
   not a type. Uppercasing it turned a filename into ON MODEL.XLSX, which reads as shouting. */
.onf-herorec.is-support .onf-herotype{text-transform:none;letter-spacing:.01em;
  font-family:var(--mono-ws,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:10px}
.onf-herofile-foot{margin-top:14px;padding-top:12px;border-top:1px solid rgba(150,175,255,.14)}

/* The selling line, under the card and about the card. What used to sit here said what the PAGE
   is — prototype, synthetic data, runs in your browser — which is disclosure, not a reason to
   keep reading, and it closed the hero: the last thing read before the fold, spent on a
   disclaimer. A strip of pills earns a place in a hero only by selling what is next to it. */
.onf-sell{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px}
.onf-sell span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  border:1px solid rgba(150,175,255,.16);background:#ffffff06;
  color:#a9b4ca;font-size:12px;line-height:1.35}
.onf-sell span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--purple);
  box-shadow:0 0 8px var(--purple);flex:none}


@media (max-width:620px){
  .onf-herofile{margin:20px 0 24px;padding:14px}
  .onf-herofile-rows{grid-template-columns:minmax(0,1fr);gap:0}
  .onf-herofile-rows dt{margin-top:8px}
  /* The type column is the first thing to go: at this width the record's own name needs every
     pixel, and the manifest below repeats the types anyway. */
  .onf-herotype{display:none}
  .onf-heroname{white-space:normal}
}

/* --- the three columns stop being three equal boxes ---------------------
   The third step carries a fifth of the text of the other two and the row
   stretched all three to the tallest, so the argument closed into a tall
   empty rectangle. They align to the top now and each takes its own height.
   ------------------------------------------------------------------------ */
.onf-model{align-items:start}
.onf-modelarrow{align-self:center}

/* The hero was one column inside a 1440px page: the text ran to 55% and the
   right half was empty, which is both a waste and the reason the file card was
   pushed under the fold. Text left, file right — the fold problem and the empty
   half are the same problem. */
.onf-head{display:flex;gap:56px;align-items:flex-start;max-width:1240px}
.onf-headtext{flex:1 1 auto;min-width:0;max-width:760px}
.onf-head .onf-herocol{flex:0 0 400px;max-width:400px;margin:6px 0 0}
.onf-head .onf-herofile{margin:0;max-width:none}
@media (max-width:1080px){
  /* Stacked, and the file comes straight after the paragraph: on a phone the hero
     text alone fills the screen, and the file is the one thing here that has to be
     met rather than read. */
  .onf-head{display:flex;flex-direction:column;gap:0}
  .onf-headtext{display:contents}
  /* flex-basis is the MAIN axis, and the main axis here is vertical — the 400px
     that sets the card's width in the row layout was setting its HEIGHT once the
     hero stacked, giving a 400px-tall card with 180px of content in it. */
  .onf-herocol{display:contents}
  .onf-head .onf-herofile{order:5;flex:0 0 auto;margin:22px 0 0;max-width:560px}
}

/* ── execution provenance ─────────────────────────────────────────────────────────────────
   Who ran this, under what mandate, with which executor and model. Three cards and not one
   "agent" chip, because the three are different objects with different lifetimes: the Role is
   governed and reusable, the executor is an adapter, the model is lineage. Compact material,
   mono only for ids and contracts — the reader should meet a human-readable name first. */
.onf-prov{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;
  margin:10px 0 0}
.onf-provcard{border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.onf-provk{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#8b90a6}
.onf-provv{margin-top:5px;font-size:16.5px;line-height:1.2;color:#f0f2f8;letter-spacing:-.01em}
.onf-provv a{color:#c4b5fd}
.onf-provsub{margin-top:6px;font-size:11.5px;line-height:1.5;color:#8b90a6}
.onf-frozen{margin:9px 0 0;font-size:11.5px;color:#9aa0b8}
.onf-frozen::before{content:"\2744";margin-right:7px;color:#7ee7ff}

/* facts in two columns: a run has more measurements than a definition list reads well as */
.onf-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 22px;
  margin:10px 0 0}
.onf-fact{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.onf-fact dt{font-size:12.5px;color:#8b90a6}
.onf-fact dd{margin:0;font-size:12.5px;color:#e4e7f0;text-align:right}
.onf-facts--usage .onf-fact dd{font-variant-numeric:tabular-nums}
/* an absent measurement reads as absent. Zero is a reading, and this never prints one. */
.onf-absent{color:#6d7186;font-style:italic}
.onf-note--tight{margin-top:9px;font-size:11.5px}

/* the manifest reference is drawn as a different kind of thing from an .on relationship */
.onf-edge--manifest line{stroke-dasharray:4 5;stroke:rgba(196,181,253,.55)}
.onf-legend{display:inline-flex;align-items:center;gap:7px;color:#8b90a6;
  padding-left:12px;margin-left:10px;border-left:1px solid rgba(255,255,255,.14)}
.onf-legend-dash{display:inline-block;width:20px;height:0;border-top:1px dashed rgba(196,181,253,.8)}