/* Polymux brand system v2, "The Foundry & The Instrument" (ADR 0130).
   Source of truth: docs/design/branding/BRAND_TECH_GUIDE.md.

   Shared by every page on polymux.io. Pages keep only their own layout CSS.
   Dark is the brand default; light is a reader's choice (theme.js sets
   data-theme on <html> after a click). The operating-system preference is
   deliberately not followed.

   Colour: ADR 0130 Amendment 3. Orange identity accent (rust in light), charcoal
   dark ground, Set B maturity rungs, and no verdict or state hue: a stream that
   is stopped is Chalk with a ring-and-slash and the words, never red; one that is
   forwarded is the orange path, never green. Every text token reaches 4.5:1 and
   every non-text boundary 3:1 on the surface it sits on; the measured ratios are
   in ADR 0130 (decisions 1, 3, 7 and 10) and in the guide's token comments. */

/* ---------- tokens: dark (brand default) ---------- */
:root{
  color-scheme: dark;

  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-wordmark: clamp(2.25rem, 5vw, 2.75rem);
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 3.5vw, 2.75rem);

  --bg-canvas: #222220;
  --bg-surface: #2A2A27;
  --bg-surface-elevated: #343431;
  /* Inset ground for short code blocks. Nothing in the dark theme is darker (decision 10). */
  --bg-code: #1D1D1B;

  /* Decorative hairline: 1.51:1 on canvas, by design. Meaning never rides on it. */
  --border-subtle: #3F3F3B;
  /* 3.93 / 3.55 / 3.08 on canvas / surface / elevated. The earlier, darker border fell
     to 2.61 / 2.27 once the ground lifted (decision 10). */
  --border-strong: #807E78;

  --text-primary: #EDEDEB;
  --text-secondary: #B5B4AE;
  --text-muted: #A3A19A;

  /* identity accent: sunset orange (Amendment 3 decision 1). 7.54 / 6.81 / 5.91. */
  --accent: #FF9A3C;
  --accent-solid: #FF9A3C;
  --accent-dim: rgba(255, 154, 60, 0.10);
  --accent-border: rgba(255, 154, 60, 0.50);

  /* maturity rungs, Set B (decision 3): Coded, Tested, Ready
     (nothing below Coded is shown, decision 12).
     Tested is the accent on purpose (decision 2). Ready is graphics only, never text. */
  --stage-coded: #2EC4B6;
  --stage-tested: #FF9A3C;
  --stage-ready: #A06BFF;

  /* derived: text on a solid accent fill, fill hover, focus ring (Chalk, not the accent) */
  --on-accent: #0C0C0B;
  --accent-hover: #FFB36B;
  --focus: #EDEDEB;

  --radius-sm: 2px;
  --radius-md: 4px;
}

/* ---------- tokens: light (derived, not from the guide) ----------
   Neutrals are the Synergy Geeks paper set from the guide; the accent is the
   Synergy Geeks rust. The block is repeated under @media print so paper output
   always uses it. Keep the two blocks identical. */
:root[data-theme="light"]{
  color-scheme: light;

  --bg-canvas: #F4F3EF;
  --bg-surface: #EAE8E1;
  --bg-surface-elevated: #FFFFFF;
  --bg-code: #EDEBE5;

  --border-subtle: #C8C5BC;
  --border-strong: #787670;

  --text-primary: #111110;
  --text-secondary: #3D3C38;
  --text-muted: #5C5A54;

  /* Synergy Geeks rust: 5.13 / 4.65 / 5.70 on paper / surface / white (decision 1). */
  --accent: #B83B20;
  --accent-solid: #B83B20;
  --accent-dim: rgba(184, 59, 32, 0.08);
  --accent-border: rgba(184, 59, 32, 0.55);

  --stage-coded: #1D7A71;
  --stage-tested: #B83B20;
  --stage-ready: #833DFF;

  --on-accent: #F4F3EF;
  --accent-hover: #8F2B15;
  --focus: #111110;
}
/* ---------- increased contrast (prefers-contrast: more) ----------
   An operating-system accessibility setting, not a colour-scheme taste, so it
   is followed even though the light/dark preference is not. It keeps the theme
   the reader is on and tightens it: text and accent text reach 7:1 and borders
   4.5:1 on every surface they sit on (measured on bg-canvas, bg-surface,
   bg-surface-elevated and bg-code of the same theme); in light the solid accent
   fill deepens too, so on-accent text keeps 7:1; the two-step border
   ladder collapses to its strong step; the focus ring thickens. The maturity
   rungs are graphics already past 3:1 and are unchanged. Placed before the
   print block so paper output keeps the print tokens. */
@media (prefers-contrast: more){
  :root{
    --border-subtle: #A3A19A;
    --border-strong: #A3A19A;
    --text-secondary: #EDEDEB;
    --text-muted: #EDEDEB;
    --accent: #FFB36B;
    --accent-hover: #FFC58E;
    --accent-border: #FFB36B;
  }
  :root[data-theme="light"]{
    --border-subtle: #5C5A54;
    --border-strong: #5C5A54;
    --text-secondary: #111110;
    --text-muted: #111110;
    --accent: #812916;
    --accent-hover: #652012;
    --accent-solid: #812916;
    --accent-border: #812916;
  }
  :root :focus-visible{ outline-width:3px; }
}

@media print{
  :root{
    color-scheme: light;
    --bg-canvas: #F4F3EF;
    --bg-surface: #EAE8E1;
    --bg-surface-elevated: #FFFFFF;
    --bg-code: #EDEBE5;
    --border-subtle: #C8C5BC;
    --border-strong: #787670;
    --text-primary: #111110;
    --text-secondary: #3D3C38;
    --text-muted: #5C5A54;
    --accent: #B83B20;
    --accent-solid: #B83B20;
    --accent-dim: rgba(184, 59, 32, 0.08);
    --accent-border: rgba(184, 59, 32, 0.55);
    --stage-coded: #1D7A71;
    --stage-tested: #B83B20;
    --stage-ready: #833DFF;
    --on-accent: #F4F3EF;
    --accent-hover: #8F2B15;
    --focus: #111110;
  }
}

/* ---------- fonts (self-hosted, OFL-1.1; licence texts sit beside the files) ---------- */
@font-face{ font-family:'Space Grotesk'; font-weight:600; font-style:normal; font-display:swap; src:url("/assets/fonts/space-grotesk-600.685bbbf6.woff2") format("woff2"); }
@font-face{ font-family:'Space Grotesk'; font-weight:700; font-style:normal; font-display:swap; src:url("/assets/fonts/space-grotesk-700.35f8aec5.woff2") format("woff2"); }
@font-face{ font-family:'IBM Plex Sans'; font-weight:400; font-style:normal; font-display:swap; src:url("/assets/fonts/ibm-plex-sans-400.3b646991.woff2") format("woff2"); }
@font-face{ font-family:'IBM Plex Sans'; font-weight:500; font-style:normal; font-display:swap; src:url("/assets/fonts/ibm-plex-sans-500.0717336f.woff2") format("woff2"); }
@font-face{ font-family:'IBM Plex Sans'; font-weight:600; font-style:normal; font-display:swap; src:url("/assets/fonts/ibm-plex-sans-600.8960851d.woff2") format("woff2"); }
@font-face{ font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap; src:url("/assets/fonts/jetbrains-mono-400.14425ba9.woff2") format("woff2"); }
@font-face{ font-family:'JetBrains Mono'; font-weight:500; font-style:normal; font-display:swap; src:url("/assets/fonts/jetbrains-mono-500.cb182fee.woff2") format("woff2"); }
@font-face{ font-family:'JetBrains Mono'; font-weight:600; font-style:normal; font-display:swap; src:url("/assets/fonts/jetbrains-mono-600.400c6bfd.woff2") format("woff2"); }

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg-canvas); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--text-base); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
section{ padding:clamp(56px,8vw,104px) 0; border-top:1px solid var(--border-subtle); }
section:first-of-type{ border-top:0; }

h1,h2,h3{
  margin:0; font-family:var(--font-display); font-weight:700;
  letter-spacing:-0.025em; line-height:1.15; text-wrap:balance;
}
h3{ font-weight:600; }
h1{ font-size:var(--text-3xl); }
h2{ font-size:var(--text-2xl); }
h3{ font-size:var(--text-xl); }
p{ margin:0; }
.lede{ font-size:var(--text-lg); color:var(--text-secondary); line-height:1.55; max-width:62ch; }
.body{ color:var(--text-secondary); max-width:68ch; }
.body b, b, strong{ font-weight:600; }
.body b{ color:var(--text-primary); }

/* Telemetry, schematics, badges and code share one mono setting. */
code, pre, .eyebrow, .badge, .btn, .theme-toggle, .stage-number,
.top nav, .footbrand, .footlinks, .lbl, .seal, .meta-line, .contact{
  font-family:var(--font-mono); font-feature-settings:"zero" 1, "ss01" 1;
}
.stage-number, .lbl, .badge, .meta-line{ font-size:var(--text-xs); letter-spacing:0.03em; font-weight:500; }
.stage-number, .demo, .badge{ font-variant-numeric:tabular-nums; }

.eyebrow{
  font-size:var(--text-sm); font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:.6em; margin:0 0 20px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); }

a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--text-primary); }

/* ---------- focus (guide section 5.1; never outline:none without a replacement) ---------- */
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* ---------- skip link (first focusable element on every page) ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:10;
  background:var(--accent-solid); color:var(--on-accent); font-family:var(--font-mono);
  font-size:var(--text-sm); font-weight:600; padding:10px 16px; border-radius:var(--radius-sm);
}
.skip:focus{ left:16px; top:12px; }

/* ---------- header ---------- */
header.top{ padding:22px 0; border-bottom:1px solid var(--border-subtle); }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.brand{ display:inline-flex; align-items:center; color:var(--text-primary); }
a.brand{ text-decoration:none; }
/* The wordmark is a graphic (ADR 0130 Amendment 4): stem and letters in the primary
   text colour, chevron in the accent, so it follows the theme. --text-wordmark is its
   em size; the viewBox is 1.15 em tall (flag 30% above cap height, ADR 0130 Amendment 5),
   4.6 em wide. */
/* The ™ in the diagram's junction frame, which spells the name in text. Same as the
   wordmark graphic: 0.8 of the letter size, its top on the capital line. Space Grotesk's
   cap height is 0.7 em and its ™ is 0.222 em tall at 1.0, so at 0.8 it must rise 0.14 em of
   the parent, 0.175 em of its own size. Offset, not vertical-align, so line height is unmoved. */
.tm{ font-size:.8em; position:relative; top:-.175em; letter-spacing:0; font-weight:700; color:var(--text-primary); }
.wordmark{ display:block; height:calc(var(--text-wordmark) * 1.15); width:auto; }
.top .controls{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 20px; }
.top nav{ display:flex; flex-wrap:wrap; gap:6px 20px; font-size:var(--text-sm); letter-spacing:0.04em; }
.top nav a{
  display:inline-flex; align-items:center; min-height:24px;
  color:var(--text-secondary); text-decoration:none;
}
.top nav a:hover{ color:var(--text-primary); }

/* Theme toggle. Shown by theme.js only; without script the page stays on the
   brand default and the control does not exist. */
.theme-toggle{
  min-height:44px; padding:8px 14px; background:transparent; color:var(--text-secondary);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  font-size:var(--text-sm); font-weight:500; letter-spacing:0.03em; cursor:pointer;
}
.theme-toggle:hover{ color:var(--text-primary); border-color:var(--text-secondary); }
.theme-toggle[hidden]{ display:none; }
@media (pointer:fine){ .theme-toggle{ min-height:32px; padding:4px 12px; } }
@media (pointer:coarse){ .top nav a{ min-height:44px; } }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; min-height:44px; padding:10px 20px;
  font-size:var(--text-sm); font-weight:600; letter-spacing:0.03em; text-decoration:none;
  color:var(--text-primary); background:transparent;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
}
.btn:hover{ color:var(--text-primary); border-color:var(--accent); background:var(--accent-dim); }
.btn.primary{ background:var(--accent-solid); color:var(--on-accent); border-color:var(--accent-solid); }
.btn.primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent); }
@media (pointer:fine){ .btn{ min-height:36px; padding:6px 16px; } }

/* ---------- readiness badges: colour + border + chevrons + word (guide 2.3) ----------
   Three outlined chevrons carry the rung (Coded 1 lit, Tested 2, Ready 3); the
   stage colour is the border and the chevron fill; the badge tint deepens with the
   rung. Lit chevrons are filled and keep a text-colour outline, unlit ones are
   hollow, so the count reads without the tint and without colour. Meaning never
   rests on colour alone: chevron count and the word both say it. The glyph is an
   aria-hidden <svg><use href="#meter"> so the badge's accessible name is its
   text; --b1..--b3 (fill) and --l1..--l3 (outline) reach the symbol's paths through the use shadow tree. Unlit
   chevrons use --border-strong (ADR 0130 decision 7); in forced colours the stage
   colours give way to system colours. */
.badge{
  --c:var(--border-strong); --t:0%; --unlit:var(--border-strong);
  --b1:none; --b2:none; --b3:none;
  --l1:var(--unlit); --l2:var(--unlit); --l3:var(--unlit);
  display:inline-flex; align-items:center; gap:.7em; align-self:flex-start; line-height:1.5;
  padding:2px 8px; border:1px solid var(--c); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--c) var(--t), transparent);
  color:var(--text-primary);
}
.badge .meter{ flex:0 0 auto; width:19px; height:12px; overflow:visible; }
.badge.coded{   --c:var(--stage-coded);   --t:10%; --b1:var(--c); --l1:var(--text-primary); }
.badge.tested{  --c:var(--stage-tested);  --t:16%; --b1:var(--c); --b2:var(--c); --l1:var(--text-primary); --l2:var(--text-primary); }
.badge.ready{   --c:var(--stage-ready);   --t:24%; --b1:var(--c); --b2:var(--c); --b3:var(--c); --l1:var(--text-primary); --l2:var(--text-primary); --l3:var(--text-primary); }
/* A card tag that rates several features: one badge per feature, so each keeps its own bars. */
.badges{ display:flex; flex-wrap:wrap; gap:6px 8px; align-self:flex-start; }

/* ---------- maturity ladder: how many listed capabilities sit on each rung ----------
   Segment widths are the counts in the lists below (3 / 8 / 0); change both together.
   Hue is categorical, so order is also carried by position (low to high, left to right),
   and the key's words and counts. Ready is an empty outlined slot:
   nothing is Ready yet. The bar is decorative; the key is the text. */
.ladder{ margin-top:16px; padding-bottom:4px; }
.ladder-bar{ display:flex; gap:3px; height:10px; }
.ladder-bar i{ display:block; min-width:0; }
.ladder-bar .coded{ flex:14; background:var(--stage-coded); }
.ladder-bar .tested{ flex:8; background:var(--stage-tested); }
.ladder-bar .ready{ flex:0 0 28px; border:1px solid var(--stage-ready); }
.ladder-key{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; }
.ladder-key li{ display:inline-flex; align-items:center; gap:8px; }
.ladder-key b{ font-family:var(--font-mono); font-size:var(--text-sm); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- terminal block: "Two requests, two outcomes" (guide 2.1) ---------- */
.demo{
  background:var(--bg-code); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:22px 26px; margin-top:34px; font-size:var(--text-sm); line-height:1.8;
  overflow-x:auto; white-space:pre; color:var(--text-primary);
}
.demo .dim{ color:var(--text-muted); }
/* No verdict hue (Amendment 3 decision 4). The leaked secret is underlined; the 403 line is a
   bordered bar with a ring-and-slash and the words; a 200 is stated by its words and the
   audit chain. Meaning is carried by line, glyph and word, so it survives greyscale. */
.demo .leak{ color:var(--text-primary); text-decoration:underline wavy var(--text-primary); text-underline-offset:4px; }
.demo .blocked{
  color:var(--text-primary); background:var(--bg-surface-elevated);
  border-left:3px solid var(--text-primary); padding:2px 8px;
}
.demo .blocked b{ color:inherit; }
.demo .ok{ font-weight:600; }
.demo .no{ font-weight:600; }
/* Ring-and-slash drawn in CSS from borders (they survive forced colours; a gradient would not),
   so it needs no glyph from the font and follows currentColor. */
.demo .no{ position:relative; padding-left:1.5em; }
.demo .no::before, .demo .no::after{ content:""; position:absolute; left:0; top:50%; width:.9em; }
.demo .no::before{ height:.9em; margin-top:-.45em; border:1.5px solid currentColor; border-radius:50%; }
.demo .no::after{ height:0; border-top:1.5px solid currentColor; transform:rotate(-45deg); }
/* The token text takes --accent-hover, not --accent: on --bg-code under its own tint the light
   rust is 4.28:1 and the hover rust 6.24:1; dark hover is 8.01:1. The chip border is decoration. */
.demo .tok{
  color:var(--accent-hover); background:var(--accent-dim);
  border:1px solid var(--accent-border); border-radius:var(--radius-sm); padding:0 4px;
}
/* Forwarded line: the 200 and its audit chain share one solid accent rule (a graphic, 3:1) and
   neutral words. */
.demo .audit{ display:inline-block; border-left:3px solid var(--accent); padding-left:8px; color:var(--text-secondary); }
.demo .arrow{ color:var(--text-muted); }
.demo-cap{ font-size:var(--text-sm); color:var(--text-secondary); margin-top:14px; max-width:68ch; }

/* ---------- "POLYMUX in-path" 01 to 08 (guide 2.2) ---------- */
.core{
  border:1px solid var(--accent); border-radius:var(--radius-md);
  background:var(--bg-surface); padding:20px;
}
.core .core-hd{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.core .core-hd b{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; letter-spacing:0; }
.core .core-hd > span{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:0.03em; font-weight:500; color:var(--text-secondary); margin-left:auto; }
.stages{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border-subtle); border-left:1px solid var(--border-subtle);
}
.stages li{ padding:12px 12px 13px; border-right:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); background:var(--bg-surface); }
.stage-number{ display:block; color:var(--accent); font-weight:600; }
.stage-title{ display:block; font-size:var(--text-sm); font-weight:600; margin-top:3px; line-height:1.3; }

/* ---------- footer ---------- */
footer{ padding:34px 0 60px; border-top:1px solid var(--border-subtle); }
footer .wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.disclaimer{ font-size:var(--text-sm); color:var(--text-secondary); max-width:60ch; line-height:1.5; }
.footbrand, .footlinks{ font-size:var(--text-sm); letter-spacing:0.04em; color:var(--text-secondary); }
.footleft{ display:flex; flex-direction:column; gap:10px; }

/* ---------- motion: CSS-only load-in (no script needed under script-src 'self') ---------- */
@media (prefers-reduced-motion: no-preference){
  .rise{ opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .rise.d1{ animation-delay:.1s; }
  .rise.d2{ animation-delay:.2s; }
  .rise.d3{ animation-delay:.3s; }
  .rise.d4{ animation-delay:.4s; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}

@media (max-width:820px){
  .stages{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- print: light tokens come from the @media print block above ---------- */
@media print{
  .skip, .theme-toggle{ display:none; }
  a{ color:var(--text-primary); }
  section{ break-inside:avoid-page; }
}

/* ---------- forced colours (Windows High Contrast) ---------- */
@media (forced-colors: active){
  :focus-visible{ outline-color:Highlight; }
  .theme-toggle, .btn{ border-color:ButtonText; }
  .badge .meter{ forced-color-adjust:none; }
  .badge, .badge.coded, .badge.tested, .badge.ready{ --c:CanvasText; --t:0%; --unlit:GrayText; border-color:ButtonText; color:CanvasText; --l1:GrayText; --l2:GrayText; --l3:GrayText; }
  .badge.coded{ --l1:CanvasText; }
  .badge.tested{ --l1:CanvasText; --l2:CanvasText; }
  .badge.ready{ --l1:CanvasText; --l2:CanvasText; --l3:CanvasText; }
  .demo .blocked{ border-left-color:CanvasText; }
  .ladder-bar .coded, .ladder-bar .tested{ background:CanvasText; }
  .ladder-bar .ready{ border-color:ButtonText; }
}