/* Quorum, "The Board" (proposals/r3-board.html). Written by ai/gen3.py.
   An evidence board: raised panels of unequal size, each with a tracked 12px label and a lens mark
   whose intersection follows the Memory switch. Elevation is a background delta plus one pixel-offset
   shadow with zero blur: ink in light, green-alpha in dark. Radius 0 and 2px only. Hover is transform
   or shadow, only where hover exists. A theme change is never animated. */

:root {
  color-scheme: light;
  --ground: #f3eee4;
  --surface: #f9f6ee;
  --raised: #fffdf7;
  --ink: #121212;
  --muted: #6f6a5e;
  --hair: rgba(18,18,18,.22);
  --tint: rgba(18,18,18,.06);
  --green: #3fb950;
  --green-text: #24772f;
  --green-32: rgba(63,185,80,.32);
  --on-green: #111111;
  --bad: #a11b1b;
  --term-bg: #111111; --term-fg: #f3eee4; --term-dim: rgba(243,238,228,.62); --term-rule: rgba(243,238,228,.22);
  --shadow-1: 3px 3px 0 var(--ink);
  --shadow-2: 6px 6px 0 var(--ink);
  --shadow-lift: 5px 5px 0 var(--ink);
  --ring: 0 0 0 3px var(--green);
  --grain: .04;
  --radius-0: 0; --radius-sm: 2px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px;
  --tap: 44px;
  --pad: 20px;
  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --t-label: 12px;
  --t-mono: clamp(13px, 0.95vw, 14px);
  --t-body: 16px;
  --t-md: clamp(24px, 3vw, 36px);
  --t-brand: 22px;
  --t-display: clamp(32px, 7vw, 80px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 150ms;
  --z-bar: 20; --z-grain: 40; --z-skip: 50;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0d100d; --surface: #141814; --raised: #1b201b;
    --ink: #e9ede9; --muted: #9aa39a; --hair: rgba(233,237,233,.2); --tint: rgba(233,237,233,.07);
    --green-text: #6fd47e; --bad: #ff8b8b;
    --term-bg: #050705; --term-fg: #e9ede9; --term-dim: rgba(233,237,233,.62); --term-rule: rgba(233,237,233,.2);
    --shadow-1: 3px 3px 0 var(--green-32);
    --shadow-2: 6px 6px 0 var(--green-32);
    --shadow-lift: 5px 5px 0 var(--green);
    --grain: .06;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0d100d; --surface: #141814; --raised: #1b201b;
  --ink: #e9ede9; --muted: #9aa39a; --hair: rgba(233,237,233,.2); --tint: rgba(233,237,233,.07);
  --green-text: #6fd47e; --bad: #ff8b8b;
  --term-bg: #050705; --term-fg: #e9ede9; --term-dim: rgba(233,237,233,.62); --term-rule: rgba(233,237,233,.2);
  --shadow-1: 3px 3px 0 var(--green-32);
  --shadow-2: 6px 6px 0 var(--green-32);
  --shadow-lift: 5px 5px 0 var(--green);
  --grain: .06;
}

/* ---------- ground ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { background: var(--ground); color: var(--ink); font-family: var(--sans); font-weight: 500; font-size: var(--t-body);
  line-height: 1.55; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
.grain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-grain); pointer-events: none; opacity: var(--grain); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: var(--green); color: var(--on-green); }
.wrap { width: min(100% - 2 * var(--sp-7), 1280px); margin-inline: auto; }
[hidden] { display: none; }

/* ---------- five type roles: display, label, body, mono, number ---------- */
.label, .plabel h2, .plabel .aside, .rows dt, .ledger thead th, .lbl, .ledger td[data-label]::before {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; font-weight: 500; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: -.03em;
  text-wrap: balance; overflow-wrap: anywhere; }
pre, .hash { font-family: var(--mono); font-size: var(--t-mono); }
.number { font-size: var(--t-md); line-height: 1.1; letter-spacing: -.02em; }
.number:empty { display: none; }
code { font-family: inherit; font-size: inherit; background: var(--tint); padding: 0 .3em; border-radius: var(--radius-sm); }
pre code { background: none; padding: 0; }
b { font-weight: inherit; color: var(--green-text); }
p { max-width: 60ch; text-wrap: pretty; }
.fine { color: var(--muted); }
.fine code { color: var(--ink); }
.g { color: var(--green-text); }

/* ---------- links, controls, focus ---------- */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* a link inside a sentence keeps a 44px hit area without moving the line: padding grows the box, the negative margin cancels it */
p a, .rows dd a, td a { display: inline-block; padding-block: var(--sp-3); margin-block: calc(-1 * var(--sp-3)); }
:focus-visible { outline: 0; box-shadow: var(--ring); position: relative; z-index: 1; }
pre.terminal:focus-visible { box-shadow: inset 0 0 0 3px var(--green); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-5);
  border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--raised); color: var(--ink);
  font: inherit; font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; cursor: pointer; box-shadow: var(--shadow-1); appearance: none; }
.btn.primary { background: var(--ink); color: var(--ground); font-size: var(--t-body); letter-spacing: 0; text-transform: none; }
.btn:disabled { cursor: progress; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible { box-shadow: var(--shadow-1), var(--ring); }

.more { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: var(--t-label);
  letter-spacing: .2em; text-transform: uppercase; border-bottom: 3px solid var(--green); }

/* the switch: the one control the whole board answers */
.switch { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--raised); box-shadow: var(--shadow-1); align-self: flex-start; }
.switch button { appearance: none; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--t-label);
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.2; min-height: var(--tap); padding: 0 var(--sp-3);
  display: inline-flex; align-items: center; cursor: pointer; border-radius: var(--radius-0); }
.switch button + button { border-left: 2px solid var(--ink); }
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.switch button:active { transform: translate(1px, 1px); }

/* ---------- the lens mark: one instrument, two states ---------- */
.mark { width: 30px; height: auto; flex: none; display: block; }
.mark circle { fill: none; stroke: currentColor; stroke-width: 2.6; }
.brand .mark circle { stroke-width: 3.4; }  /* matches the weight of Archivo Black beside it */
.mark .vesica { fill: var(--green); stroke: none; opacity: 1; transition: opacity var(--dur) var(--ease); }
[data-mark="void"] .vesica, .mark.void .vesica { opacity: 0; }

/* ---------- skip, bar ---------- */
.skip { position: absolute; left: -9999px; top: 0; z-index: var(--z-skip); background: var(--ink); color: var(--ground);
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-4); text-decoration: none; }
.skip:focus { left: var(--sp-4); top: var(--sp-2); }
.bar { position: sticky; top: 0; z-index: var(--z-bar); background: var(--ground); border-bottom: 2px solid var(--ink); }
.bar .wrap { display: flex; align-items: center; gap: var(--sp-4); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); text-decoration: none;
  font-family: var(--display); font-weight: 400; font-size: var(--t-brand); letter-spacing: -.02em; text-transform: uppercase; line-height: 1; }
.bar nav { margin-left: auto; }
.bar nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); }
.bar nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-3); white-space: nowrap;
  text-decoration: none; position: relative; border-radius: var(--radius-sm); }
.bar nav a[aria-current="page"]::after { content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 6px; height: 3px; background: var(--green); }
.theme { min-width: 96px; box-shadow: none; border-color: var(--hair); background: transparent; }

/* ---------- the statement, before the board ---------- */
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6);
  padding-block: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 32px); }
.statement h1 { grid-column: 1 / -1; font-size: var(--t-display); }
.statement .lede { grid-column: 1 / 7; max-width: 52ch; }
/* the statement carries the test: the words on the left, the switch and its answer on the right */
.statement .test { grid-column: 8 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); align-self: start; }
.answer { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; }
.answer .number { min-width: 1ch; font-variant-numeric: tabular-nums; }
.answer-word { color: var(--muted); }

/* ---------- the board: bands of unequal splits, panels aligned to their own height ---------- */
.board { display: flex; flex-direction: column; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-9); }
.band { display: grid; gap: var(--sp-6); align-items: start; }
.c-1 { grid-template-columns: minmax(0, 1fr); }
.c-1-300 { grid-template-columns: minmax(0, 1fr) 300px; }
.c-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.c-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.c-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.c-4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.c-5-4-3 { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
.c-3-5-4 { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); }
.c-4-3-5 { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); }
.stack { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }

.panel { background: var(--surface); box-shadow: var(--shadow-1); border-radius: var(--radius-0); padding: var(--pad);
  display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.panel.raised { background: var(--raised); box-shadow: var(--shadow-2); }
.plabel { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--hair); }
.plabel h2 { min-width: 0; }
.plabel .aside { margin-left: auto; color: var(--muted); text-align: right; }
.panel p + p { margin-top: calc(-1 * var(--sp-4) + var(--sp-2)); }
.panel .more { align-self: flex-start; margin-top: auto; }
.panel .sign { font-size: var(--t-md); max-width: 16ch; }

/* terminal: the black bleeds to the panel's side edges, a window in the sheet */
pre.terminal { background: var(--term-bg); color: var(--term-fg); padding: var(--sp-5) var(--sp-4); margin-inline: calc(-1 * var(--pad));
  line-height: 1.6; overflow-x: auto; white-space: pre-wrap; overflow-wrap: normal; tab-size: 4; display: block; border-radius: var(--radius-0); }
pre.terminal[hidden] { display: none; }
pre.terminal .prompt, pre.terminal .cmt { color: var(--term-dim); }
pre.terminal .hi { color: var(--green); }
pre.terminal .nb { white-space: nowrap; }
pre.terminal .url { overflow-wrap: anywhere; }
/* the front terminal crossfades between its two runs; the black keeps the height of the taller one so nothing jumps */
.panes { display: grid; background: var(--term-bg); margin-inline: calc(-1 * var(--pad)); }
.panes pre.terminal { grid-area: 1 / 1; margin-inline: 0; transition: opacity var(--dur) var(--ease); }
.panes pre.terminal[hidden] { display: block; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s var(--dur); }
.copyable { position: relative; margin-inline: calc(-1 * var(--pad)); }
.copyable pre.terminal { margin-inline: 0; padding-top: calc(var(--tap) + var(--sp-5)); }
.copy { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2; appearance: none; background: var(--term-bg); color: var(--term-fg);
  border: 1px solid var(--term-rule); border-radius: var(--radius-sm); font: inherit; font-size: var(--t-label); letter-spacing: .2em;
  text-transform: uppercase; min-height: var(--tap); padding: 0 var(--sp-3); cursor: pointer; display: inline-flex; align-items: center; }
.copy:active { transform: translate(1px, 1px); }

/* the memory page keeps both panes in view: the switch chooses which one is raised */
body[data-memory="on"] .panel.term-off, body[data-memory="off"] .panel.term-on { background: var(--surface); box-shadow: var(--shadow-1); }
.term-on .aside .off, .term-off .aside .on { display: none; }
body[data-memory="off"] .term-on .aside .on, body[data-memory="off"] .term-off .aside .off { display: none; }
body[data-memory="off"] .term-on .aside .off, body[data-memory="off"] .term-off .aside .on { display: inline; }

/* ruled rows inside panels */
.rows { border-top: 2px solid var(--ink); }
.rows > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); column-gap: var(--sp-4); padding-block: var(--sp-2);
  border-bottom: 1px solid var(--hair); align-items: baseline; }
.rows dt { color: var(--muted); padding-top: 2px; overflow-wrap: anywhere; }
.rows dd { min-width: 0; overflow-wrap: anywhere; }
.rows dd.ok { color: var(--green-text); }
.rows dd.bad { color: var(--bad); }
.rows.narrow > div, .rows.pairs > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-1); }
.rows.pairs dt { color: var(--ink); }
.rows.pairs dd { color: var(--muted); }
.rows.code > div { grid-template-columns: minmax(0, 17em) minmax(0, 1fr); }
.lens .rows > div { grid-template-columns: minmax(0, 6em) minmax(0, 1fr); }
.rows.code dt { font-size: var(--t-body); letter-spacing: 0; text-transform: none; color: var(--ink); padding-top: 0; line-height: 1.55; }
.vstatus { color: var(--muted); }
.vstatus:empty { display: none; }

/* the ruled ledger: every row starts with a mark, and a refused row carries an empty one */
.tablewrap { overflow-x: auto; min-width: 0; }
.ledger { width: 100%; border-collapse: collapse; }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-top: 1px solid var(--hair); }
.ledger thead th { border-top: 0; border-bottom: 2px solid var(--ink); padding-top: 0; color: var(--muted); white-space: nowrap; }
.ledger tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.ledger td.markcell { width: 42px; padding-right: var(--sp-2); }
.ledger td:last-child, .ledger th:last-child { padding-right: 0; }
.ledger .fn { overflow-wrap: anywhere; }
.ledger tr[data-state="refused"] td { color: var(--muted); }
.ledger td.tier { white-space: nowrap; }

/* supply */
.supply .number { color: var(--ink); }

/* ---------- prev / next ---------- */
.prevnext { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4) var(--sp-6); padding-block: 0 var(--sp-9); }
.prevnext a { display: flex; flex-direction: column; justify-content: center; min-height: var(--tap); text-decoration: none;
  border-bottom: 3px solid var(--green); padding-bottom: var(--sp-1); }
.prevnext a + a, .prevnext span + a { text-align: right; margin-left: auto; }
.prevnext .lbl { display: block; color: var(--muted); }

/* ---------- footer: the black corner block carries the sign-off ---------- */
.foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6); padding-bottom: var(--sp-9); align-items: stretch; }
.slab { background: var(--ink); color: var(--ground); padding: var(--sp-6); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: var(--sp-6); }
.slab .sign { font-size: var(--t-md); max-width: 14ch; margin-top: auto; }
.slab .mark circle { stroke: var(--ground); }
.foottext { display: flex; flex-direction: column; gap: var(--sp-3); justify-content: flex-end; }
.foottext .links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); max-width: none; }
.foottext .links a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: var(--t-label);
  letter-spacing: .2em; text-transform: uppercase; border-bottom: 3px solid var(--green); padding: 0; margin: 0; }

/* ---------- hover: transform or shadow, never colour alone, only where hover exists and motion is welcome ---------- */
/* Every :hover rule on the page lives in this block; audit.js reports them because its regex cannot see the enclosing @media. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn, .switch button, .bar nav a, .more, .copy, .foottext .links a, .brand, .prevnext a, p a, .rows dd a, td a {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-lift); }
  .btn.primary:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-2); }
  .switch button:not([aria-pressed="true"]):hover { transform: translateY(-1px); }
  .bar nav a:hover { transform: translateY(-1px); box-shadow: inset 0 -3px 0 var(--hair); }
  .more:hover, .foottext .links a:hover, .prevnext a:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--green); }
  .copy:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--term-rule); }
  .brand:hover { transform: translateY(-1px); }
  p a:hover, .rows dd a:hover, td a:hover { transform: translateY(-1px); text-decoration-thickness: 2px; }
}

/* ---------- widths ---------- */
@media (max-width: 1100px) {
  .statement .lede, .statement .test { grid-column: 1 / -1; }
  .band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band.c-1, .band.c-1-300 { grid-template-columns: minmax(0, 1fr); }
  .band.three > :last-child { grid-column: 1 / -1; }
  .stack { display: contents; }
}
@media (max-width: 760px) {
  :root { --pad: 16px; }
  .wrap { width: min(100% - 2 * var(--sp-4), 1280px); }
  html { scroll-padding-top: 0; }
  .display br { display: none; }
  /* the bar is static on a phone and wraps: brand and theme on the first row, then the pages on two rows */
  .bar { position: static; }
  .bar .wrap { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-2); }
  .brand { order: 1; flex: 1 1 auto; }
  .bar .theme { order: 2; }
  .bar nav { order: 3; margin-left: 0; flex: 0 0 100%; min-width: 0; }
  .bar nav ul { margin-inline: calc(-1 * var(--sp-2)); display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; }
  .bar nav a { padding-inline: var(--sp-2); }
  .statement { padding-block: var(--sp-7) var(--sp-4); }
  .board { gap: var(--sp-5); padding-block: var(--sp-5) var(--sp-8); }
  .band, .stack { display: contents; }
  pre.terminal { padding: var(--sp-4); overflow-wrap: anywhere; }
  .copyable pre.terminal { padding-top: calc(var(--tap) + var(--sp-4)); }
  .copy { top: var(--sp-2); right: var(--sp-2); }
  .rows > div, .rows.code > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-1); }
  /* each ledger row becomes a stacked block, its headers as labels */
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: auto; }
  .ledger tr { border-top: 1px solid var(--hair); padding-block: var(--sp-3); display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: var(--sp-2); }
  .ledger tr > td.markcell { grid-row: 1 / span 6; }
  .ledger tr.nomark { grid-template-columns: minmax(0, 1fr); }
  .ledger td, .ledger tbody tr:last-child td { border: 0; padding: var(--sp-1) 0; width: auto; }
  .ledger td.markcell { padding-top: var(--sp-1); }
  .ledger td.tier { white-space: normal; }
  .ledger td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); }
  .ledger tbody tr:last-child { border-bottom: 2px solid var(--ink); }
  .prevnext { padding-bottom: var(--sp-8); }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .slab { padding: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) {
  .mark .vesica, .panes pre.terminal, .panes pre.terminal[hidden] { transition: none; }
}
@media print {
  .grain, .bar, .skip, .copy, .theme, .prevnext { display: none; }
  .panel, .btn, .slab, .switch { box-shadow: none; }
  pre.terminal { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
}