/* ══════════════════════════════════════════════════════════════════════════ PRISMUX — dashboard Loaded after prismux.css and adding nothing to it. Every colour here is a token from that file, so a theme change reaches this page for free and the three semantic colours keep meaning what they mean everywhere else: seal = verified, brass = degraded or unknown, oxide = refused or broken. Two rules the whole file obeys, because they are the two ways a dashboard breaks at a width nobody tested: 1. NOTHING HAS AN INTRINSIC WIDTH. Charts are flex rows of percentage heights, not fixed-viewBox SVG; tables live inside .tw and scroll themselves. The body may never scroll sideways. 2. EVERY DIRECTIONAL PROPERTY IS LOGICAL. margin-inline, border-inline, text-align:start. The Arabic build mirrors without a single [dir] override below, except where a value must stay LTR — hashes, ids and money — which prismux.css already pins. ══════════════════════════════════════════════════════════════════════════ */ /* ─── the provenance bar ────────────────────────────────────────────────── The most important element on the page, so it is the largest and it is first. Its stamp has four states and they must be visually unmistakable from across a room: a chain nobody has checked must not read as checked. */ .prov{margin-top:8px} .prov .r-head{flex-wrap:wrap} .prov-grid{display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--rule)} @media(min-width:680px){.prov-grid{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.prov-grid{grid-template-columns:repeat(4,1fr)}} .pchk{background:var(--draft-2);padding:14px 16px;min-width:0} .pchk .pk{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px} .pchk .pvv{display:flex;align-items:baseline;gap:7px;font-family:var(--f-mono);font-size:15px;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums} .pchk .pw{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.5} .pchk.idle .pvv{color:var(--ink-3)} .pchk.ok .pvv{color:var(--seal)} .pchk.warn .pvv{color:var(--brass)} .pchk.bad .pvv{color:var(--oxide)} .pchk .tick{flex:none;font-size:13px} /* The copyable command. A verification you cannot run is a picture of one, so the command is selectable text with a copy button rather than a code block screenshot — and it carries the real chain total, so pasting it reconciles this page against the CLI rather than merely running. */ .cmd{background:var(--draft-3);border-top:1px solid var(--rule);padding:14px 16px} .cmd .cl{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px} .cmd .cw{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap} .cmd pre{flex:1 1 320px;min-width:0;padding:11px 13px;font-size:12px;background:var(--draft-2);white-space:pre-wrap;word-break:break-all} .cmd button{flex:none;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--rule-2);background:var(--draft-2);color:var(--ink-2);border-radius:2px;cursor:pointer} .cmd button:hover{border-color:var(--ink);color:var(--ink)} .cmd .cn{font-size:12px;color:var(--ink-3);margin:10px 0 0;line-height:1.55;max-width:78ch} /* ─── numbers ───────────────────────────────────────────────────────────── Every tile carries the receipt field it was summed from. A figure whose provenance is a footnote is a figure nobody can dispute, which sounds like a strength and is the opposite. */ .pi .src{font-family:var(--f-mono);font-size:10px;color:var(--ink-4);margin-top:8px;line-height:1.4;word-break:break-word} /* ─── the volume chart ─────────────────────────────────────────────────── Flex columns, percentage heights. No SVG, no viewBox, no canvas: this has to be correct at 320px and at 2560px in four locales, and the layout engine is better at that than arithmetic in a resize handler. */ .chart{border:1px solid var(--rule);border-radius:3px;background:var(--draft-2);padding:18px 16px 12px} .chart .ct{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin-bottom:16px} .chart .ctl{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)} .chart .cmax{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);margin-inline-start:auto} .bars{display:flex;align-items:flex-end;gap:2px;height:132px} .bars .b{flex:1 1 0;min-width:3px;display:flex;flex-direction:column;justify-content:flex-end;height:100%} .bars .b i{display:block;border-radius:1px 1px 0 0} .bars .b i + i{border-radius:0} .bars .b .sg-ok{background:var(--seal)} .bars .b .sg-retry{background:var(--brass)} .bars .b .sg-ref{background:var(--oxide)} .bars .b:hover i{opacity:.75} .axis{display:flex;justify-content:space-between;gap:10px;margin-top:9px;padding-top:8px;border-top:1px solid var(--rule)} .axis span{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap} .legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px} .legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)} .legend i{width:9px;height:9px;border-radius:1px;flex:none} /* ─── horizontal bar lists (model mix, failure reasons) ─────────────────── */ .hbars{display:flex;flex-direction:column;gap:11px;margin:0} .hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline} .hrow .hn{font-size:13.5px;color:var(--ink);min-width:0;overflow-wrap:anywhere} .hrow .hv{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap} .hrow .ht{grid-column:1 / -1;height:6px;background:var(--draft-4);border-radius:1px;overflow:hidden} .hrow .ht i{display:block;height:100%;background:var(--seal)} .hrow.warn .ht i{background:var(--brass)} .hrow.bad .ht i{background:var(--oxide)} .hrow .hm{grid-column:1 / -1;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4);overflow-wrap:anywhere} /* ─── two-column section layout ─────────────────────────────────────────── */ .dcols{display:grid;gap:26px} @media(min-width:900px){.dcols{grid-template-columns:1fr 1fr}} .dcard{border:1px solid var(--rule);border-radius:3px;background:var(--draft-2);padding:20px;min-width:0} .dcard h4{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;font-weight:500} .dcard .dn{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:16px 0 0} .dcard .dn:first-of-type{margin-top:14px} /* ─── key/value list ────────────────────────────────────────────────────── */ .dkv{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:8px 16px;margin:0;font-size:13px} .dkv dt{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);letter-spacing:.03em} .dkv dd{margin:0;color:var(--ink);font-family:var(--f-mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere} /* ─── the receipt drawer ───────────────────────────────────────────────── Any figure on this page can be walked back to one signed record, and this is where the walk ends: the record, its canonical form, and the hash recomputed from that form in front of you. */ .drawer{margin-top:18px} .drawer .r-body{max-height:none} .canon{font-family:var(--f-mono);font-size:11px;line-height:1.7;color:var(--ink-3);word-break:break-all;background:var(--draft-3);border:1px solid var(--rule);border-radius:3px;padding:12px 13px;margin-top:12px;max-height:200px;overflow:auto} .canon b{color:var(--ink-2);font-weight:500} .picker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px} .picker button{font-family:var(--f-mono);font-size:11px;padding:6px 10px;border:1px solid var(--rule);background:transparent;color:var(--ink-3);border-radius:2px;cursor:pointer} .picker button:hover{border-color:var(--rule-2);color:var(--ink-2)} .picker button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--draft)} /* ─── the limits list ───────────────────────────────────────────────────── */ .limits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0} .limits li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:15px 0;border-bottom:1px solid var(--rule)} @media(min-width:760px){.limits li{grid-template-columns:190px minmax(0,1fr);gap:20px;align-items:baseline}} .limits li:last-child{border-bottom:none} .limits .lk{font-family:var(--f-mono);font-size:11px;color:var(--oxide);letter-spacing:.03em;overflow-wrap:anywhere} .limits .lv{font-size:13.5px;color:var(--ink-2);line-height:1.6} .limits .lv strong{color:var(--ink)} /* ─── table cells that carry a state ────────────────────────────────────── */ td .chip{margin:0} td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:end;color:var(--ink)} th.num{text-align:end} tr.unpriced td{background:var(--brass-soft)} /* A row the reader can open. Not a link: it changes what is displayed below, and dressing that as navigation lies about where the button goes. */ tr.pick{cursor:pointer} tr.pick:hover td{background:var(--draft-3)} tr.pick[aria-selected="true"] td{background:var(--seal-soft)} /* ─── skeleton, before the chain is parsed ─────────────────────────────── Shown as text rather than a shimmer. A grey rectangle where a number will be implies a number is coming; "not computed yet" says what is true. */ .pending{color:var(--ink-4);font-style:italic} :root[lang^="ar"] .pending{font-style:normal;opacity:.72} /* ─── the one measured overflow, and its fix ────────────────────────────── Measured at 320px: document scrollWidth 498 against clientWidth 320. The whole overflow was ``, a 71-character SHA-256 sitting in a paragraph. A hash has no break opportunity in it, so the default `word-break: normal` makes one element wider than the phone the page is read on and the entire document scrolls sideways. Scoped to the hash rather than applied to every : prose in a code span should still break on words, and a blanket `break-all` would hyphenate `--signing-key` mid-flag in the middle of a sentence. */ #chain-head{overflow-wrap:anywhere;word-break:break-all} /* The completeness tile is a statement ABOUT the four checks beside it, not a fifth peer of them, and as the fifth cell of a four-column grid it left three empty cells at desktop widths. Spanning the row says the right thing and fixes the hole in one declaration. */ .pchk.span{grid-column:1 / -1} /* ─── the journal reconciliation table ──────────────────────────────────── Measured at 1440px: two 71-character hashes side by side pushed the VERDICT column past the right edge of the scroller. The row still scrolled, so no document overflow was reported and the defect was invisible to the measurement — but the one column that says whether the check passed was the one you had to go looking for. The hashes wrap rather than truncate. An ellipsis on a page whose argument is that you can check the hash yourself is the wrong economy; four lines of monospace is the right one. */ #journal-body .hash{white-space:normal;word-break:break-all;display:inline-block;max-width:26ch;text-align:start} #journal-body td:first-child{white-space:normal;min-width:9ch} /* ─── the ledger: chain → run → turn → leg ──────────────────────────────── A DISCLOSURE TREE, not a master–detail pane. The difference is the whole reason this reads the way it does: opening a turn in a side panel means the list scrolls under you and the row you clicked is somewhere else when you come back. Native
puts the detail directly beneath the summary that opened it, so nothing above the reader's eye ever moves and the place they were standing is still there when they close it again. Native, also, because the alternative is re-implementing focus, keyboard toggling, aria-expanded and find-in-page against a
, and getting three of the four right. Everything below is presentation over a control that already works with no script at all. */ .led-chain{margin-top:22px} .led-chain .r-head{flex-wrap:wrap} .led-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin:30px 0 14px} .led-bar .led-count{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);margin-inline-end:auto} .led-runs{display:flex;flex-direction:column;gap:10px} /* ─── the run ─────────────────────────────────────────────────────────── */ details.run{border:1px solid var(--rule);border-radius:3px;background:var(--draft-2);overflow:hidden} details.run[open]{border-color:var(--rule-2);box-shadow:var(--lift)} /* One caret rule for both depths. It points down when open and toward the inline start when closed — which is a ROTATION, not a different glyph, so the Arabic build turns it the other way rather than pointing it at the margin. */ /* prismux.css styles for the FAQ accordions: 19px Newsreader, a 34px right gutter, and an absolutely-positioned "+" in it. Inherited here that is a serif data row with a stray plus sign floating over the charge column — so the four properties that carry the accordion's look are reset explicitly rather than left to be overridden by accident. The marker is killed outright; this control has its own. */ summary.rn,summary.tn{ list-style:none;cursor:pointer;align-items:baseline; display:grid;gap:3px 14px;grid-template-columns:16px minmax(0,1fr); font-family:var(--f-body);font-size:12.5px;line-height:1.45;color:var(--ink-2); } /* `details[open] summary::after` in prismux.css scores (0,1,3) and would win against a bare `summary.rn::after` at (0,1,2) — so the "−" came back the moment a row was opened, which is the only state anyone would see it in. Scoped through the parent to outrank it. */ details.run > summary.rn::after, details.turn > summary.tn::after{content:none} summary.rn::-webkit-details-marker,summary.tn::-webkit-details-marker{display:none} summary.rn::before,summary.tn::before{ content:"▾";grid-column:1;grid-row:1 / -1;align-self:start; font-size:10px;line-height:1.9;color:var(--ink-3);transition:transform .16s ease; } details:not([open]) > summary.rn::before, details:not([open]) > summary.tn::before{transform:rotate(-90deg)} :root[dir="rtl"] details:not([open]) > summary.rn::before, :root[dir="rtl"] details:not([open]) > summary.tn::before{transform:rotate(90deg)} summary.rn > span,summary.tn > span{grid-column:2;min-width:0;overflow-wrap:anywhere} summary.rn{padding:12px 15px;background:var(--draft-3)} summary.rn:hover{background:var(--draft-4)} details.run[open] > summary.rn{border-bottom:1px solid var(--rule)} .rn-n{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)} .rn-when,.rn-turns,.rn-fail,.rn-tok{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums} .rn-cost{font-family:var(--f-mono);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} .rn-body{padding:16px 15px 18px} .rn-kv{margin-bottom:22px} .rn-kv dd.hiv{color:var(--seal)} .rn-kv dd.dimv{color:var(--ink-3)} .tn-h,.lt-h{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px} .lt-h{margin-top:22px} .lt-h:first-child{margin-top:0} /* ─── the turn ────────────────────────────────────────────────────────── */ details.turn{border:1px solid var(--rule);border-radius:2px;background:var(--draft);margin-bottom:6px} details.turn:last-child{margin-bottom:0} details.turn[open]{background:var(--draft-2);border-color:var(--rule-2)} summary.tn{padding:9px 12px;font-size:12px} summary.tn:hover{background:var(--draft-3)} details.turn[open] > summary.tn{border-bottom:1px solid var(--rule)} .tn-id,.tn-model,.tn-ep{font-size:11.5px;color:var(--ink-2)} .tn-legs,.tn-tok{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums} .tn-cost{font-family:var(--f-mono);font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} .tn-body{padding:14px 12px 16px} /* ─── the legs ──────────────────────────────────────────────────────────── The row the product's whole claim rests on is the one that delivered NOTHING, so it is the row that is coloured. Brass, not oxide: a failover leg is not a fault the customer suffered, it is work the router did and did not charge for — and `provider_cost_usd` sits at the end of the row reading 0.000000 rather than being left for the reader to infer. */ table.legs{font-size:12.5px;min-width:840px} table.legs td{padding:9px 12px} table.legs th{padding:9px 12px} table.legs tr.dead td{background:var(--brass-soft)} .lt-none{font-size:12.5px;color:var(--ink-3);margin:0} .lt-n{font-size:11.5px;color:var(--ink-3);line-height:1.55;margin:10px 2px 0;max-width:78ch} .lt-kv dd.hiv{color:var(--seal)} .lt-kv dd.dimv{color:var(--ink-3)} /* Recomputed in the browser and rendered as it came out. A tick here is a check that ran, which is why the failing branch has its own colour and its own sentence rather than a missing tick. */ .lt-checks{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:7px} .lt-checks li{font-size:12.5px;line-height:1.5;padding-inline-start:20px;position:relative;color:var(--ink-2)} .lt-checks li::before{position:absolute;inset-inline-start:0;font-family:var(--f-mono);font-size:12px} .lt-checks li.ok::before{content:"✓";color:var(--seal)} .lt-checks li.bad::before{content:"✗";color:var(--oxide)} .lt-checks li.bad{color:var(--oxide)} .lt-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)} .lt-id{font-size:11px;color:var(--ink-3);margin-inline-end:auto;overflow-wrap:anywhere} /* Columns align across rows only where there is room for them. Below this the grid collapses to one column per line, which is the readable shape on a phone and the one that keeps the caret beside the first line rather than floating against six stacked values. */ @media(min-width:920px){ summary.rn{grid-template-columns:16px 7em 13.5em 6.5em 10.5em minmax(0,1fr) auto} summary.tn{grid-template-columns:14px 8em 10.5em minmax(0,1fr) 6.5em 8em 7.5em auto} summary.rn > span,summary.tn > span{grid-column:auto} .rn-cost,.tn-cost{text-align:end} } /* ─── RTL, for the values that are data rather than language ────────────── prismux.css pins code, hashes and .mono to LTR inside an RTL document. The composite values this section prints are neither: "4 / 57" and "09:32:11 → 09:32:12" read backwards under direction:rtl, and a token count that says 57 / 4 in Arabic and 4 / 57 in English is a different figure, not a different layout. Pinned by class, so only what this section adds moves. */ [dir="rtl"] table.legs td.num, [dir="rtl"] .rn-kv dd, [dir="rtl"] .lt-kv dd, [dir="rtl"] .rn-when, [dir="rtl"] .rn-tok, [dir="rtl"] .rn-cost, [dir="rtl"] .tn-legs, [dir="rtl"] .tn-tok, [dir="rtl"] .tn-cost{ direction:ltr; text-align:start; } /* The state chip is a grid item, not a column of its own worth sizing. */ .tn-state{display:flex;align-items:baseline} /* ══════════════════════════════════════════════════════════════════════════ THE ENTRY, AND THE BREAKDOWN BEHIND IT (assets/console.js) ══════════════════════════════════════════════════════════════════════════ */ /* ─── the lock ──────────────────────────────────────────────────────────── Applied by console.js at boot, never present in the served HTML. A reader with JavaScript off never gets the class and reads the whole page, which is the correct fallback for a page whose data is a static file that already downloaded. `display:none` rather than `visibility` or opacity: a section that is only visually hidden is still in the tab order and still read out, which would make the button a lie to a keyboard and a screen reader while looking right to everyone else. */ body.locked .gated{display:none} /* ─── the sign-in shaped panel ──────────────────────────────────────────── Shaped like a sign-in card and carrying no input of any kind. Nothing in here is a field, so there is no field styling to write — which is the point worth preserving the next time this panel is edited. */ .signin{ background:var(--draft-2);border:1px solid var(--rule-2);border-radius:3px; box-shadow:var(--lift-2);overflow:hidden;max-width:640px; } .si-body{display:grid;gap:20px;padding:20px 22px} @media(min-width:560px){.si-body{grid-template-columns:minmax(0,1fr) auto;align-items:center}} .si-org{min-width:0} .si-l{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px} .si-n{font-size:19px;line-height:1.2;color:var(--ink)} .si-id{font-size:12.5px;color:var(--ink-3);margin-top:5px;overflow-wrap:anywhere} .si-c{font-size:12px;color:var(--ink-4);margin-top:7px;line-height:1.5} .si-act{display:flex;flex-direction:column;gap:10px;align-items:flex-start} @media(min-width:560px){.si-act{align-items:flex-end;text-align:end}} .si-state{display:flex;flex-direction:column;gap:5px;align-items:inherit} .si-state .acc-sd{font-size:11.5px;color:var(--ink-4);line-height:1.5;max-width:26ch} .si-foot{border-top:1px solid var(--rule);background:var(--draft-3);padding:16px 22px} .si-foot p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.6} .si-foot p + p{margin-top:10px;color:var(--ink-3)} /* ─── the four-way breakdown ────────────────────────────────────────────── Two lines per key cell: the value off the record, and the caveat that belongs to that particular value. The share bar is the only decoration and it is drawn from the same integer micro-USD the column beside it prints, so a bar and its number cannot disagree. */ .bd-k{display:block;overflow-wrap:anywhere} .bd-sub{display:block;font-size:11px;color:var(--ink-4);margin-top:4px;line-height:1.45} .bd-dead{font-family:var(--f-mono);font-size:10.5px;color:var(--brass);white-space:nowrap} .bd-share{min-width:110px} .bd-bar{display:block;height:6px;background:var(--draft-4);border-radius:1px;overflow:hidden;margin-bottom:5px} .bd-bar i{display:block;height:100%;background:var(--seal)} .bd-pct{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums} #bd-foot td{border-top:1px solid var(--rule-2);font-weight:600;background:var(--draft-3)} /* The composite token cell reads backwards under direction:rtl for the same reason the ledger's does — "8,000 / 2,000" is a figure, not a sentence. */ [dir="rtl"] #bd-body td.num,[dir="rtl"] #bd-foot td.num,[dir="rtl"] .bd-pct{ direction:ltr; text-align:start; }