:root {
  color-scheme:light;
  --bg:#f6f4ef;--panel:#fffdf8;--soft:#ece8de;--ink:#14171a;--muted:#55595f;
  --line:#dcd7cc;--accent:#1f5f4a;--accent-ink:#f6f4ef;--accent-soft:#e3eee8;
  --green:#176443;--green-soft:#e5f4eb;--amber:#765009;--amber-soft:#fff2d5;
  --shown:#1f7a4d;--contra:#b3412e;--notshown:#7a7f86;
  --paper:var(--bg);--card:var(--panel);--rule:var(--line);
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
html[data-theme=dark] {
  color-scheme:dark;
  --bg:#111416;--panel:#171b1e;--soft:#20262a;--ink:#ecebe6;--muted:#a9adb1;
  --line:#2b3236;--accent:#7cc4a6;--accent-ink:#111416;--accent-soft:#1b2a24;
  --green:#8ee1b3;--green-soft:#203d32;--amber:#f2cc7c;--amber-soft:#403524;
  --shown:#6fd19b;--contra:#ef8a76;--notshown:#9aa0a6;
}
@media(prefers-color-scheme:dark) {
  html:not([data-theme=light]) {
    color-scheme:dark;
    --bg:#111416;--panel:#171b1e;--soft:#20262a;--ink:#ecebe6;--muted:#a9adb1;
    --line:#2b3236;--accent:#7cc4a6;--accent-ink:#111416;--accent-soft:#1b2a24;
    --green:#8ee1b3;--green-soft:#203d32;--amber:#f2cc7c;--amber-soft:#403524;
    --shown:#6fd19b;--contra:#ef8a76;--notshown:#9aa0a6;
  }
}
/* The look of iswt.ca: the same tokens and styles as jdbauer.ca (there in amber, here in green), from the reviewed preview
   (prototypes/new-site/build_preview.py, 4 Oct 2026). Light by default or by the device, dark on request (the theme button,
   /assets/site.js). System fonts only: no font files and no third-party requests.
   The token names --bg --panel --soft --ink --muted --line --accent --accent-ink --accent-soft --green --green-soft --amber
   --amber-soft hold plain hex values, because scripts/check-ledger.mjs reads them in :root and html[data-theme=dark] and
   checks their contrast; the preview's names (--paper, --card, --rule) point at them. That script also needs :root to be the
   first rule in this file, with no comment before it. Every nav, footer and card link and every button is 44 px high or more.
   The Ledger, Runs and run pages keep their own components below and pick up the look from the tokens. */
* {box-sizing:border-box}
[hidden] {display:none!important}
body {margin:0;background:var(--paper);color:var(--ink);font:19px/1.62 var(--sans)}
a {color:var(--accent);text-underline-offset:3px}
button,input,select {font:inherit}
button,.button {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font-weight:650;font-size:.95rem;line-height:1.3;text-decoration:none;cursor:pointer}
button:hover,.button:hover {background:var(--soft)}
button:disabled {cursor:default;color:var(--muted)}
.primary {background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.primary:hover {background:var(--accent);filter:brightness(.95)}
:focus-visible {outline:3px solid var(--accent);outline-offset:2px}
input,select {width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--muted);border-radius:9px;background:var(--panel);color:var(--ink)}
input[type=checkbox] {width:22px;height:22px;min-height:22px;accent-color:var(--accent)}
label {display:block;font-weight:650;margin-bottom:7px}
label input,label select {margin-top:6px}
fieldset {min-width:0;border:1px solid var(--line);border-radius:10px;padding:16px}
legend {font-weight:700;padding:0 6px}
code {font:.86em var(--mono);background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:0 4px;overflow-wrap:anywhere}
h1 {font:600 clamp(1.95rem,6vw,3rem)/1.12 var(--serif);margin:0 0 18px;text-wrap:balance;letter-spacing:-.01em}
h2 {font:600 1.35rem/1.3 var(--serif);margin:0 0 12px;text-wrap:balance}
h3 {font:600 1.08rem/1.35 var(--serif);margin:0 0 8px}
main>h2 {margin-top:42px}
main>h3 {margin-top:26px}
p {margin:14px 0 0}
ul,ol {padding-left:24px}
li+li {margin-top:8px}
ul.list,ol.list {margin:12px 0 0;padding-left:1.25rem;display:grid;gap:8px}
.list>li+li,.legend>li+li,.card li+li,.claims>li+li,.log>li+li {margin-top:0}
blockquote {margin:16px 0 0;padding:10px 18px;border-left:3px solid var(--accent);background:var(--card);border-radius:0 8px 8px 0}
blockquote p {margin:0;font-family:var(--serif);font-size:1.06rem}
.muted {color:var(--muted)}
.small {font-size:.9rem;color:var(--muted)}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link {position:fixed;top:-100px;left:12px;z-index:5;padding:12px;background:var(--panel);border:2px solid var(--accent);border-radius:8px}
.skip-link:focus {top:12px}

/* The shell: the name, the six pages and the theme button; and one footer line. */
.wrap {max-width:46rem;margin:0 auto;padding-inline:20px;padding-block:26px 64px}
nav.site {display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:14px}
.brand {font:700 1.08rem/1.2 var(--serif);letter-spacing:.04em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.links {display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.92rem}
.links a {color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.links a:hover,.links a:focus-visible,.links a[aria-current] {color:var(--ink);text-decoration:underline}
.links a.key {color:var(--accent);font-weight:600}
.theme {font:inherit;font-size:.86rem;color:var(--muted);background:none;border:1px solid var(--rule);border-radius:99px;min-height:44px;padding:0 14px;cursor:pointer}
footer.site {margin-top:56px;padding-top:8px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;font-size:.9rem;color:var(--muted)}
footer.site a {color:var(--muted);display:inline-flex;align-items:center;min-height:44px}
.actions,.between {display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between {justify-content:space-between}
main {outline:none}

/* The pages: a small heading, the title, a lede; then claims, doors, cards and the log. */
header.page {padding-block:46px 18px}
.page-header {padding:46px 0 18px}
.page-header>p:not(.eyebrow) {color:var(--muted);max-width:70ch;font-size:1.05rem}
.eyebrow {font-size:.84rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.eyebrow a {color:inherit}
.lede {font-size:1.16rem;margin:0;max-width:40rem}
.legend {display:flex;flex-wrap:wrap;gap:8px 20px;margin:22px 0 0;padding:0;list-style:none;font-size:.9rem;color:var(--muted)}
.legend li {display:flex;align-items:center;gap:8px}
.dot {width:.7rem;height:.7rem;border-radius:50%;display:inline-block;flex:none;vertical-align:middle}
.dot.s {background:var(--shown)}.dot.c {background:var(--contra)}.dot.n {border:2px solid var(--notshown)}
.doors {display:grid;gap:14px;margin:28px 0 0}
.door {display:block;background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:18px 22px;color:inherit;text-decoration:none}
.door:hover,.door:focus-visible {border-color:var(--accent)}
.door strong {display:flex;justify-content:space-between;gap:12px;font:600 1.22rem/1.3 var(--serif)}
.door strong span {color:var(--accent);font-family:var(--sans);font-size:1rem}
.door p {margin:6px 0 0;color:var(--muted);font-size:1rem}
.door.primary {border-color:var(--accent);background:var(--accent-soft)}
.grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:12px;margin-top:16px}
.grid.single {grid-template-columns:1fr}
.card {background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:16px 18px;min-width:0}
.card h2,.card h3 {margin:0 0 4px;font-size:1.06rem}
.card p {margin:0 0 8px;color:var(--muted);font-size:.94rem}
.card .meta {font-size:.82rem;color:var(--muted);margin:0 0 8px}
.card ul {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 16px;font-size:.88rem}
.card ul a {display:inline-flex;align-items:center;min-height:44px}
.card a {overflow-wrap:anywhere}
.claims {list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.claim {background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:16px 18px;min-width:0}
.claim .st {display:flex;align-items:center;gap:8px;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.claim p {margin:0}
.claim .how {margin-top:8px;font-size:.92rem;color:var(--muted)}
.log {list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--rule)}
.log li {display:grid;grid-template-columns:7.5rem 1fr;gap:4px 18px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:1rem}
.log li>div {min-width:0}
.log time {color:var(--muted);font-variant-numeric:tabular-nums;font-size:.92rem;padding-top:2px}
@media(max-width:520px) {.log li {grid-template-columns:1fr}.log time {padding:0}}

/* Real records: panels, badges, run cards, tables. */
.panel {min-width:0;margin-bottom:16px;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--panel);box-shadow:0 8px 28px rgb(21 33 55 / 5%)}
.panel> :first-child {margin-top:0}
.panel> :last-child {margin-bottom:0}
.badge {display:inline-flex;align-items:center;padding:4px 9px;border-radius:6px;background:var(--soft);color:var(--muted);font-size:.75rem;font-weight:800;white-space:normal}
.sealed {background:var(--accent-soft);color:var(--accent)}
.good {background:var(--green-soft);color:var(--green)}
.waiting,.notice {background:var(--amber-soft);color:var(--amber)}
.notice {margin-bottom:16px;padding:12px 16px;border-radius:10px}
.cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px}
.run-card {display:flex;flex-direction:column;gap:10px}
.run-card h2,.run-card h3,.run-card p {margin:0}
.run-card .button {margin-top:auto;align-self:start}
.watch-grid,.stage-column,.two-columns {display:grid;gap:16px;align-items:start}
.stage-column .panel {margin:0}
.watch-grid {margin-bottom:16px}
.metrics {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.metrics>div {min-width:0;padding:12px;border:1px solid var(--line);border-radius:10px}
dt {font-size:.8rem;color:var(--muted)}
dd {margin:3px 0 0;font-weight:750;overflow-wrap:anywhere}
.fingerprint {display:block;padding:12px;background:var(--bg);border-radius:8px;margin-bottom:12px;overflow-wrap:anywhere}
.transcript,.action-log {list-style:none;padding:0;margin:0}
.transcript li,.action-log li {padding:12px 0;border-top:1px solid var(--line)}
.transcript p,.action-log p {margin:5px 0 0}
.turn-meta {display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.85rem}
.transcript [id] {scroll-margin-top:20px}
.filters {display:grid;gap:12px;margin-bottom:16px}
.filters label {margin:0}
.hero-actions {margin-top:20px}
.hero-panel {background:var(--accent-soft);border-color:var(--accent-soft)}
.hero-panel p {max-width:65ch}
.policy-list {display:grid;gap:8px;margin:0}
.policy-list div {display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:8px 0}
.policy-list dt {font-size:1rem}
.control-label {display:flex;align-items:center;gap:10px}
.replay-screen {max-height:360px;overflow-y:auto;background:var(--bg);border:1px solid var(--line);border-radius:9px;margin-bottom:14px;padding:0 12px;scrollbar-gutter:stable}
.replay-screen ol {min-height:80px}
.chapters {margin:12px 0}
.clip-controls {margin-top:16px}
.clip-controls button {margin-bottom:12px}
.verification-tools {border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.corrections {padding-left:24px}
input[type=range] {padding:0;border:0;accent-color:var(--accent)}
@media(min-width:640px) {.filters {grid-template-columns:2fr 1fr 1fr}.two-columns {grid-template-columns:1fr 1fr}}
@media(min-width:1000px) {.watch-grid {grid-template-columns:minmax(0,1fr) 350px}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Protected local simulator desk. Public pages contain no operator controls. */
.operator-status-bar {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.operator-status-bar p {margin:0}
.operator-form-grid {display:grid;gap:12px;margin-bottom:12px}
[data-operator-network] textarea {display:block;width:100%;min-height:100px;margin-top:6px;margin-bottom:12px;padding:10px 12px;border:1px solid var(--muted);border-radius:9px;background:var(--panel);color:var(--ink);font:inherit;resize:vertical}
[data-operator-network] fieldset {margin-bottom:12px}
[data-operator-network] button {max-width:100%}
[data-operator-network] button:disabled {background:var(--soft);color:var(--muted);border-color:var(--line)}
.operator-participant {margin:16px 0;background:var(--bg)}
.operator-participant .operator-form-grid {margin-bottom:0}
.operator-participant label {min-width:0}
.operator-participant button {margin-top:8px}
.operator-controls {margin-bottom:14px}
.operator-preflight {padding-left:24px;margin-bottom:0}
.operator-preflight li {overflow-wrap:anywhere}
[data-operator-run-summary] code {font-weight:400}
@media(min-width:640px) {.operator-form-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Optional synthetic live panel; the full static record stays outside it. */
.live-sample-controls {margin-bottom:16px}
.live-sample-metadata {margin-bottom:16px}
.live-sample-screen {max-height:360px;overflow-y:auto;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);scrollbar-gutter:stable}
.live-sample-screen small {display:block;color:var(--muted);overflow-wrap:anywhere}
.live-sample-screen strong,.live-sample-screen p {overflow-wrap:anywhere}
.live-sample-panel [data-live-status] {overflow-wrap:anywhere}
.live-sample-panel button:disabled {background:var(--soft);color:var(--muted);border-color:var(--line)}

/* Real records: Ledger list, result tables, receipts. */
.ledger-list,.receipt-list {list-style:none;padding:0;margin:0}
.ledger-list>li+li,.receipt-list>li+li {margin-top:16px}
.receipt-list .fingerprint {margin:6px 0 0}
.table-wrap {overflow-x:auto;margin-bottom:16px}
table {border-collapse:collapse;width:100%;min-width:480px;font-variant-numeric:tabular-nums}
caption {text-align:left;font-weight:750;margin-bottom:8px}
th,td {padding:8px 10px;border-bottom:1px solid var(--line);text-align:right}
th:first-child,td:first-child,thead th:first-child {text-align:left}
thead th {font-size:.85rem;color:var(--muted)}