/* PRAXIS Quorum — direction D.
 *
 * ⛔⛔ EVERY COLOUR IS A PRAXIS TOKEN AT ITS PRODUCTION VALUE, copied from
 * praxis-terminal/packages/ui/src/generated/theme.css. Quorum has its own
 * visual grammar and NOT its own palette — that is what "its own but still
 * PRAXIS" resolved to.
 *
 * ⛔ `var(--bg)` HAS NEVER EXISTED IN THIS ECOSYSTEM. An earlier design mock
 * used it and judged every panel against no background at all. The real names
 * are --surface-0…4, --text-primary/secondary/muted, --brand*.
 *
 * ⚠ 11px IS A HARD FLOOR. praxis-terminal/scripts/check-text-size.mjs fails the
 * build below it, and `tests/render.test.ts` enforces the same rule here.
 */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0:#090c11; --surface-1:#131721; --surface-2:#19212b;
  --border-subtle:#212736; --border-default:#24303a; --border-strong:#323e4c;
  --text-primary:#eef2f6; --text-secondary:#aeb7c2; --text-muted:#9aa4b0;
  --brand:#5566ff; --brand-text:#8b97ff; --brand-soft:#12162b; --brand-line:#2a2f55;
  --warning:#e0a53e;
  --edge-highlight:rgba(255,255,255,.045);
  --elevation-1:0 1px 0 0 var(--edge-highlight) inset, 0 1px 2px rgba(0,0,0,.35);
  --canvas-gradient:linear-gradient(180deg,#0b0f16 0%,#090c11 40%,#070a10 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --surface-0:#f5f3ee; --surface-1:#f8f6f1; --surface-2:#fbf9f4;
    --border-subtle:#efece4; --border-default:#e7e2d7; --border-strong:#d9d3c6;
    --text-primary:#1a1712; --text-secondary:#46413a; --text-muted:#6e655a;
    --brand:#0c8599; --brand-text:#085566; --brand-soft:#dfeeed; --brand-line:#aadde2;
    --warning:#845708;
    --edge-highlight:rgba(255,255,255,.6);
    --elevation-1:0 1px 0 0 var(--edge-highlight) inset, 0 1px 2px 0 rgba(20,18,15,.10), 0 10px 26px -20px rgba(20,18,15,.16);
    --canvas-gradient:none;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --surface-0:#f5f3ee; --surface-1:#f8f6f1; --surface-2:#fbf9f4;
  --border-subtle:#efece4; --border-default:#e7e2d7; --border-strong:#d9d3c6;
  --text-primary:#1a1712; --text-secondary:#46413a; --text-muted:#6e655a;
  --brand:#0c8599; --brand-text:#085566; --brand-soft:#dfeeed; --brand-line:#aadde2;
  --warning:#845708;
  --edge-highlight:rgba(255,255,255,.6);
  --elevation-1:0 1px 0 0 var(--edge-highlight) inset, 0 1px 2px 0 rgba(20,18,15,.10), 0 10px 26px -20px rgba(20,18,15,.16);
  --canvas-gradient:none;
}

/* PRAXIS type scale, verbatim. */
:root {
  --t-display:40px; --t-display-lh:42px;
  --t-heading:20px; --t-heading-lh:26px;
  --t-body:15px;    --t-body-lh:24px;
  --t-reading:15px; --t-reading-lh:26px;
  --t-caption:12px; --t-caption-lh:17px;
  --t-label:11px;   --t-label-lh:15px;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --display:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,sans-serif;
}

/* ⚠ SELF-HOSTED, NEVER A CDN. A font CDN is a third party watching every
 * member load every page, on a product whose entire proposition is that it does
 * not watch you. The files are the same @fontsource 5.3.0 builds Terminal
 * ships, byte for byte — provenance, digests and the OFL notice are in
 * public/fonts/LICENSE.md.
 *
 * ⛔⛔ THE EIGHT HEX DIGITS ARE THE CONTENT HASH, AND THEY ARE LOAD-BEARING.
 * public/_headers caches these `immutable` for a year; that is only honest
 * because different bytes cannot arrive under the same name. Editing a URL here
 * without replacing the file (or the reverse) turns the page's type into a
 * silent fallback — so `tests/render.test.ts` reads each name back against the
 * SHA-256 of the bytes on disk and goes red on the mismatch. */
@font-face { font-family:"IBM Plex Sans";   font-weight:400; font-display:swap; src:url(/fonts/ibm-plex-sans-400-3b646991.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans";   font-weight:600; font-display:swap; src:url(/fonts/ibm-plex-sans-600-8960851d.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono";   font-weight:400; font-display:swap; src:url(/fonts/ibm-plex-mono-400-08949f72.woff2) format("woff2"); }
@font-face { font-family:"Space Grotesk";   font-weight:500; font-display:swap; src:url(/fonts/space-grotesk-500-1b1a8131.woff2) format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }

/* ⛔⛔ THE TWO PROPERTIES BELOW THE GRADIENT ARE A FIX, NOT HOUSEKEEPING.
 *
 * A background on `body` PROPAGATES to the canvas: it PAINTS the whole viewport
 * while it is still POSITIONED against the body's own box. On every state
 * Quorum ships today the body is short — 418px measured on Shut — so the
 * gradient was sized to 418px and then TILED down the rest of the screen, its
 * closing #070a10 butting straight into its opening #0b0f16. A hard horizontal
 * line, on every below-threshold page, which is all of them.
 *
 * ⚠ IT READ AS A DESIGN ELEMENT. In the screenshot the seam looked like a
 * deliberate section divider, and only the computed values named it: `body`
 * 418px tall, `background-repeat: repeat`, `background-size: auto`.
 *
 * `no-repeat` stops the tiling; `min-height` is what stops that from merely
 * trading the seam for a flat band of --surface-0 below it. Both are needed,
 * and neither is sufficient.
 *
 * ⚠ 100vh RATHER THAN 100dvh, DELIBERATELY. `dvh` shrinks while a mobile
 * toolbar is on screen, so the body could be shorter than the viewport the
 * moment that toolbar retracts — reopening the gap this exists to close. `vh`
 * is the large viewport, which is the one that has to be covered.
 *
 * ⚠ In the light theme --canvas-gradient is `none`, so this whole concern is
 * dark-theme only; the declarations are inert there rather than wrong. */
body {
  margin:0; min-height:100vh;
  background:var(--surface-0); background-image:var(--canvas-gradient);
  background-repeat:no-repeat;
  color:var(--text-primary); font-family:var(--sans);
  font-size:var(--t-body); line-height:var(--t-body-lh);
  -webkit-font-smoothing:antialiased;
}
.q-main { max-width:760px; margin:0 auto; padding:0 24px 96px; }

.q-head {
  display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;
  padding:40px 0 14px; border-bottom:1px solid var(--border-strong); margin-bottom:8px;
}
.q-head-phase {
  font-family:var(--mono); font-size:var(--t-label); line-height:var(--t-label-lh);
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-text);
}
.q-head-date {
  font-family:var(--mono); font-size:var(--t-label); line-height:var(--t-label-lh);
  color:var(--text-muted); font-variant-numeric:tabular-nums; margin-left:auto;
}

/* ── SCALE — a number or a phrase is the whole message ───────────────────── */
.q-scale { padding:44px 0; }
.q-scale-head {
  margin:0; font-family:var(--display); font-size:var(--t-display); line-height:var(--t-display-lh);
  font-weight:500; letter-spacing:-.015em; font-variant-numeric:tabular-nums; text-wrap:balance;
}
.q-scale-sub {
  margin:16px 0 0; font-size:var(--t-reading); line-height:var(--t-reading-lh);
  color:var(--text-secondary); max-width:46ch;
}
.q-scale-note {
  margin:9px 0 0; font-size:var(--t-caption); line-height:var(--t-caption-lh);
  color:var(--text-muted); max-width:54ch;
}

/* ── ROWS — a list of facts, no privileged line ──────────────────────────── */
.q-rows { padding:24px 0; border-top:1px solid var(--border-strong); }
.q-row {
  display:grid; grid-template-columns:18px 1fr; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--border-subtle);
}
.q-row-mark {
  font-family:var(--mono); font-size:var(--t-label); line-height:19px;
  color:var(--text-muted); text-align:right;
}
.q-row-text { font-size:var(--t-caption); line-height:var(--t-caption-lh); color:var(--text-secondary); }

/* ── GAUGE — a quantity carrying uncertainty ─────────────────────────────── */
.q-gauge {
  margin:24px 0; padding:18px; background:var(--surface-1);
  border:1px solid var(--border-default); border-radius:3px; box-shadow:var(--elevation-1);
}
.q-gauge-label {
  font-family:var(--mono); font-size:var(--t-label); line-height:var(--t-label-lh);
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
}
.q-gauge-track { position:relative; height:58px; margin:20px 0 6px; }
.q-gauge-axis { position:absolute; left:0; right:0; top:28px; height:1px; background:var(--border-strong); }
/* ⚠ NOT --brand-soft. On --surface-1 that is a one-step difference and the band
 * is invisible — found by rendering, not by reading. */
.q-gauge-band {
  position:absolute; top:20px; height:17px; border-radius:2px;
  background:color-mix(in srgb, var(--brand) 14%, transparent);
  border:1px solid var(--brand-line);
}
.q-gauge-interval { position:absolute; top:25px; height:7px; background:var(--brand); border-radius:1px; }
.q-gauge-mark { position:absolute; top:16px; width:2px; height:25px; background:var(--text-primary); }
.q-gauge-mark-label {
  position:absolute; top:-16px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:var(--t-label); line-height:var(--t-label-lh); color:var(--text-primary);
}
/* ⛔ A REFERENCE mark is not a claim about the member — it is what the interval
 * is read against. It is drawn quieter so it cannot be mistaken for a result. */
.q-mark-reference { background:var(--text-muted); opacity:.7; }
.q-mark-reference .q-gauge-mark-label { color:var(--text-muted); }
.q-mark-observed { background:var(--brand-text); }
.q-mark-observed .q-gauge-mark-label { color:var(--brand-text); }
.q-gauge-lede { margin:14px 0 0; font-size:var(--t-body); line-height:var(--t-body-lh); color:var(--text-primary); }
.q-gauge-note { margin:9px 0 0; font-size:var(--t-caption); line-height:var(--t-caption-lh); color:var(--text-secondary); }

/* ── the Meter's two bars ────────────────────────────────────────────────────
 *
 * ⛔⛔ THE DISCLOSURE BAR IS SUBORDINATE, AND THESE FOUR NUMBERS ARE WHERE THAT
 * IS TRUE. §2.10: one bar, or two bars at equal weight, makes "quorum reached"
 * read as "the play works" — and the eToro finding it cites (ρ between
 * performance and popularity = 0.11) is that when an honest statistic sits
 * beside a more legible one, people act on the more legible one.
 *
 * The disclosure bar completes in days. The evidence bar mostly never
 * completes. Drawn at equal weight, the one that fills is the one that gets
 * believed.
 *
 * ⚠ SO A TEST READS THESE AS NUMBERS AND ASSERTS SUBORDINATE < PRIMARY on both
 * height and opacity. "Make it quieter" in a comment survives until the next
 * restyle; an inequality over two tokens does not. */
:root {
  --bar-h-primary: 9px;
  --bar-h-subordinate: 3px;
  --bar-o-primary: 1;
  --bar-o-subordinate: 0.55;
}
.q-bars { display:flex; flex-direction:column; gap:14px; margin:22px 0 0; }
.q-bar { display:flex; flex-direction:column; gap:6px; }
.q-bar-label {
  font-family:var(--mono); font-size:var(--t-label); line-height:var(--t-label-lh);
  letter-spacing:.14em; color:var(--text-muted);
}
.q-bar-track {
  position:relative; width:100%; border-radius:1px;
  background:var(--surface-2); overflow:hidden;
}
.q-bar-fill { position:absolute; left:0; top:0; bottom:0; background:var(--brand); }
.q-bar-caption {
  font-family:var(--mono); font-size:var(--t-caption); line-height:var(--t-caption-lh);
  color:var(--text-secondary); font-variant-numeric:tabular-nums;
}
.q-bar[data-weight="primary"] .q-bar-track { height:var(--bar-h-primary); opacity:var(--bar-o-primary); }
.q-bar[data-weight="subordinate"] .q-bar-track { height:var(--bar-h-subordinate); opacity:var(--bar-o-subordinate); }
.q-bar[data-weight="subordinate"] .q-bar-label,
.q-bar[data-weight="subordinate"] .q-bar-caption { color:var(--text-muted); }
.q-bar-note {
  margin:14px 0 0; font-size:var(--t-caption); line-height:var(--t-caption-lh);
  color:var(--text-secondary);
}

/* ── the two closed phases ───────────────────────────────────────────────── */
.q-shut {
  margin:0; padding:96px 0; font-family:var(--display);
  font-size:var(--t-heading); line-height:var(--t-heading-lh);
  color:var(--text-secondary); max-width:34ch; text-wrap:balance;
}

@media (max-width: 620px) {
  .q-scale-head { font-size:30px; line-height:34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}