/* Super demos by Polymorphic AI: one layout, two themes and three palettes, set on <html>.
   data-theme:   paper (beige light) | night (nemradar-style dark). Each page names its own default; the lab opens in night.
   data-palette: signal (the lab's default: the look of polymorphic.codes. Black ground, bone type, neutral furniture;
                   colour only inside the figures, and it always means something: cool for what is being read, heat for
                   what is flagged, stopped or held and for the one thing to act on, mint for what was answered or
                   confirmed from the pack)
                 | sun (aubergine ink, yellow-to-orange sun: the pitch edition) | house (ink, copper, teal)
   Type, HUD tags, bracket corners and glowing data follow nemradar's notes kit. */
@font-face { font-family: "Space Grotesk"; src: url("/shared/fonts/SpaceGrotesk-Variable.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/shared/fonts/JetBrainsMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/shared/fonts/JetBrainsMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("/shared/fonts/ShareTechMono.woff2") format("woff2"); font-weight: 400; font-display: swap; }   /* signal's HUD face */

:root {
  --sans: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --hud: "JetBrains Mono", ui-monospace, monospace;
  --measure: 64ch;
  --radius: 2px;

  /* Roles. sun and house say every one of these with their single accent (or with ink); signal, further down, gives
     each its own colour. A rule that means one of these things names the role; anything else keeps --accent. */
  --hi: var(--ink);                                        /* headlines */
  --tick: var(--accent);                                   /* bracket corners */
  --kick: var(--accent-ink);                               /* the kicker over a headline */
  --label: var(--muted); --label-on: var(--accent-ink);    /* a label that names a part of a figure; the same, brought forward */
  --act: var(--accent); --act-ink: var(--accent-ink);      /* the thing to act on: the primary button, a field in focus */
  --ok: var(--accent); --ok-ink: var(--accent-ink);        /* answered or confirmed from the pack: the guarded branch, the mound, a figure put right */
  --cool: var(--accent); --cool-ink: var(--accent-ink);    /* what is being read: scores, lines on their way to the model, work in progress */
  --stop: var(--accent); --stop-ink: var(--accent-ink);    /* the check that stopped or held a message */
  --held: var(--ink); --held-ink: var(--ink);              /* a stopped message, and the words that say where it went */
  --row: var(--ink-2); --row-2: var(--muted);              /* the hero funnel's rows of stopped messages: the two it names, the rest */
  --mover: var(--ink);                                     /* a message on its way through the checks */
  --mark: var(--accent-3);                                 /* the highlight under a receipted figure */
  --hover-ink: var(--accent-ink); --hover-rule: var(--accent);                           /* links and quiet controls under the pointer */
  --sel-plain: var(--accent); --sel-raw: var(--accent); --sel-guarded: var(--accent);   /* the branch being read, by which one it is */
  --hud-min: 0px;                                          /* the smallest type a drawing may set (kit/k2d.js reads it) */

  /* paper (default) */
  --bg: #f3ede2;          /* parchment */
  --plate: #faf6ee;       /* panels sit slightly lighter than the page */
  --plate-2: #efe7d9;
  --ink: #1f1828;
  --ink-2: #4b4252;
  --muted: #7b7168;
  --faint: #a89e92;
  --rule: #d8cebf;
  --rule-2: #e6ddcf;
  --shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px -18px rgba(60, 40, 20, .35);

  /* sun palette (default) */
  --accent: #dc6417;      /* ember orange: the one emphasis colour (our shade, not any fund's) */
  --accent-ink: #a94a0d;  /* orange as text on paper (contrast) */
  --accent-2: #33164f;    /* plum-ink: secondary emphasis, wire and engraving */
  --accent-3: #ffc93c;    /* sun yellow: highlights and glows, never text */
  --glow: rgba(255, 170, 30, .55);
  --sun: linear-gradient(90deg, #ffc93c 0%, #f7a531 32%, #ec7f24 64%, #dc6417 100%);   /* our own stops */
  --good: #2f7d4f; --warn: #b8430a; --bad: #b3261e; --hold: #6b4fa0;
}
:root[data-palette="house"] {
  --accent: #b5651d; --accent-ink: #8f4c12; --accent-2: #1e5a73; --accent-3: #e2b566;
  --glow: rgba(226, 181, 102, .55);
  --sun: linear-gradient(90deg, #e2b566 0%, #c98a3d 50%, #b5651d 100%);
  --hold: #7a4f8f;          /* care: plum, distinct from the teal accent-2 */
}
:root[data-theme="night"] {
  --bg: #0b0910; --plate: #110e17; --plate-2: #16121e;
  --ink: #f1ebe2; --ink-2: #c4bbb0; --muted: #91877c; --faint: #625a52;
  --rule: #2c2633; --rule-2: #1b1721;
  --shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 20px 40px -24px rgba(0,0,0,.8);
  --accent: #ff8a2e; --accent-ink: #ffab6b; --accent-2: #b48cff; --accent-3: #ffc93c;
  --glow: rgba(255, 150, 30, .65);
  --good: #58b881; --warn: #ffa25c; --bad: #ff6b5e; --hold: #6fc2b0;
}
:root[data-theme="night"][data-palette="house"] { --accent: #e2b566; --accent-ink: #f0cf8e; --accent-2: #9ad6ff; --accent-3: #cdbb9e; --glow: rgba(226,181,102,.6); }

/* signal: the grounds, inks and three meanings of polymorphic.codes (its assets/site.css and assets/signal.css). Paper
   first, then night; both sit after the blocks above so they win over them. On paper the hues are inks, deepened for
   contrast. What signal takes away or adds beyond colour (grain, glow, corners, type sizes) is at the foot of each file. */
:root[data-palette="signal"] {
  color-scheme: light;
  --hud: "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace;
  --radius: 0px; --shadow: none; --glow: transparent; --hud-min: 11px;
  --bg: #f1ebdf; --plate: #ebe4d6; --plate-2: #e4dccd;
  --ink: #15130f; --ink-2: #36322b; --muted: #6a6458; --faint: #a39b8c; --hi: #000;
  --rule: #cdc4b2; --rule-2: #dcd4c4; --tick: #4c473e;
  --heat: #d9480f; --heat-ink: #b53d0d;      /* flagged, stopped, held; and the one thing to act on */
  --mint: #0b8a5c; --mint-ink: #0a6e4a;      /* answered or confirmed from the pack */
  --deep: #4a43d6; --deep-ink: #3a34a8; --ice: #2f66c4;   /* what is being read */
  --amber: #b46a00; --amber-ink: #8f5400;    /* a caveat, and nothing else */
  /* the older names, for rules not given a role */
  --accent: var(--heat); --accent-ink: var(--heat-ink); --accent-2: var(--deep); --accent-3: var(--mint); --sun: var(--mint);
  --good: var(--mint-ink); --warn: var(--amber-ink); --bad: var(--heat-ink); --hold: var(--deep);
  /* the roles */
  --kick: var(--ink-2); --label: var(--deep-ink); --label-on: var(--deep-ink);
  --act: var(--heat); --act-ink: var(--heat-ink);
  --ok: var(--mint); --ok-ink: var(--mint-ink);
  --cool: var(--deep); --cool-ink: var(--deep-ink);
  --stop: var(--heat); --stop-ink: var(--heat-ink);
  --held: var(--heat); --held-ink: var(--heat-ink);
  --row: var(--heat); --row-2: var(--heat);
  --mover: var(--ice);
  --mark: var(--mint);
  --hover-ink: var(--hi); --hover-rule: var(--tick);
  --sel-plain: var(--ink); --sel-raw: var(--heat); --sel-guarded: var(--mint);
}
:root[data-theme="night"][data-palette="signal"] {
  color-scheme: dark;
  --bg: #000; --plate: #080807; --plate-2: #0e0d0c;
  --ink: #ece8e0; --ink-2: #c3beb4; --muted: #8f8a80; --faint: #5c5851; --hi: #fff;
  --rule: #2c2a26; --rule-2: #1c1b18; --tick: #a39d92;
  --heat: #ff6a2b; --heat-ink: #ff9a6b;
  --mint: #3fd49a; --mint-ink: #84e9c2;
  --deep: #8f89ff; --deep-ink: #b9b4ff; --ice: #a8dcff;
  --amber: #ffb14a; --amber-ink: #ffb14a;
  --good: var(--mint); --bad: var(--heat);
  --tone-alpha: .66;                         /* on black a halftone field needs laying in harder to read as a tone */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* the hidden attribute always wins over component display rules */
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 var(--sans); background: var(--bg); color: var(--ink); min-height: 100svh;
  /* a faint paper grain: two offset dot fields, too fine to read as a pattern */
  background-image: radial-gradient(rgba(80, 60, 30, .045) .6px, transparent .9px), radial-gradient(rgba(80, 60, 30, .03) .6px, transparent .9px);
  background-size: 5px 5px, 7px 7px; background-position: 0 0, 2px 3px; }
:root[data-theme="night"] body { background-image: radial-gradient(rgba(255,255,255,.035) .6px, transparent .9px); background-size: 6px 6px; }
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: color .15s, border-color .15s; }
a:hover { color: var(--hover-ink); border-bottom-color: var(--hover-rule); }
::selection { background: var(--accent-3); color: #1f1828; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.wrap { width: min(1240px, 100% - 32px); margin: 0 auto; }

/* top bar */
.bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule); }
.bar .wrap { display: flex; align-items: center; gap: 18px; height: 56px; }
.bar .brand { display: flex; align-items: center; gap: 10px; border: 0; font: 600 15px/1 var(--sans); letter-spacing: -.01em; }
.bar .brand .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-3) 25%, transparent); }
.bar nav { display: flex; gap: 4px; margin-left: 8px; flex-wrap: wrap; }
.bar nav a { border: 0; padding: 8px 10px; font: 11px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.bar nav a[aria-current="page"] { color: var(--act-ink); }
.bar nav a[aria-current="page"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--act); margin-right: 7px; vertical-align: 1px; }
.bar .spacer { flex: 1; }
.bar .poly { display: flex; align-items: center; gap: 8px; border: 0; padding-left: 16px; border-left: 1px solid var(--rule);
  font: 10.5px/1 var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.bar .poly img { width: 22px; height: 22px; }
:root[data-theme="paper"] .bar .poly img, :root:not([data-theme]) .bar .poly img { filter: invert(1) brightness(.35); }
.looks { display: flex; gap: 6px; align-items: center; }
.looks button { width: 26px; height: 26px; border: 1px solid var(--rule); background: var(--plate); border-radius: 50%; cursor: pointer; padding: 0;
  display: grid; place-items: center; font: 11px/1 var(--hud); color: var(--ink-2); }
.looks button:hover, .looks button[aria-pressed="true"] { border-color: var(--hover-rule); color: var(--hover-ink); }
@media (max-width: 760px) {
  .bar .wrap { height: auto; flex-wrap: wrap; gap: 4px 10px; padding: 8px 0; }
  .bar .brand { order: 1; } .bar .spacer { order: 2; } .bar .looks { order: 3; } .bar .poly { order: 4; padding-left: 10px; }
  .bar .poly span { display: none; }
  .bar nav { order: 5; width: 100%; margin: 0 -10px; flex-wrap: nowrap; overflow-x: auto; }
  .bar nav a { padding: 8px 10px; white-space: nowrap; }
}
html, body { overflow-x: clip; }

/* type */
h1, h2, h3 { font-family: var(--sans); letter-spacing: -.03em; line-height: 1.05; margin: 0; }
h1 { font-weight: 600; font-size: clamp(34px, 5vw, 64px); }
h2 { font-weight: 600; font-size: clamp(24px, 3vw, 36px); }
h3 { font-weight: 600; font-size: 19px; letter-spacing: -.015em; }
.lede { font-size: 18.5px; line-height: 1.6; color: var(--ink-2); max-width: var(--measure); }
.lede b, .prose b { color: var(--ink); font-weight: 600; }
.hud { font: 11px/1.4 var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.hud.on { color: var(--accent-ink); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.prose { max-width: var(--measure); color: var(--ink-2); }
.prose p { margin: 0 0 1em; }
.small { font-size: 13.5px; color: var(--muted); }

/* panels: plates with nemradar's bracket corners */
.plate { position: relative; background: var(--plate); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.plate.bracket::before, .plate.bracket::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--tick); pointer-events: none; }
.plate.bracket::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.plate.bracket::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.plate > .head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule-2); }
.plate > .head > * { min-width: 0; }

/* bracketed HUD tag with a leader, for annotating figures */
.tag { display: inline-flex; align-items: center; gap: 8px; font: 10.5px/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
  padding: 5px 7px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--plate) 85%, transparent); }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tag.lit { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); }

/* a figure that came from the engine: glows, and opens its receipt */
.fig { font-family: var(--mono); font-weight: 500; color: var(--ink); white-space: nowrap; cursor: help; padding: 0 2px;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent-3) 55%, transparent) 62%); border-radius: 1px; }
.fig:hover, .fig:focus-visible { outline: none; background: color-mix(in srgb, var(--accent-3) 45%, transparent); }
:root[data-theme="night"] .fig { background: none; color: #fff; text-shadow: 0 0 10px var(--glow), 0 0 2px var(--glow); }
.fig.struck { text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: 2px; background: none; color: var(--muted); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 11.5px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase;
  padding: 12px 15px; border: 1px solid var(--rule); background: var(--plate); color: var(--ink-2); cursor: pointer; border-radius: var(--radius); }
.btn:hover { border-color: var(--ink-2); color: var(--ink); }
.btn.primary { border-color: var(--act); color: var(--act-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--act) 10%, var(--plate)); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--rule); background: var(--plate);
  font: 13px/1.3 var(--sans); color: var(--ink-2); cursor: pointer; border-radius: 999px; text-align: left; overflow-wrap: anywhere; max-width: 100%; }
.chip:hover { border-color: var(--hover-rule); color: var(--ink); }
.chip .k { flex: none; white-space: nowrap; font: 9.5px/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* receipt popover */
.receipt-pop { position: fixed; z-index: 50; max-width: 360px; padding: 12px 14px; background: var(--plate); border: 1px solid var(--tick);
  box-shadow: var(--shadow); font: 12px/1.5 var(--mono); color: var(--ink-2); pointer-events: none; }
.receipt-pop b { color: var(--ink); font-weight: 500; }
.receipt-pop .q { display: block; margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--mark); color: var(--ink); font-family: var(--sans); font-size: 12.5px; }

/* footer */
footer.foot { margin-top: 80px; border-top: 1px solid var(--rule); padding: 22px 0 40px; }
footer.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: baseline; }
footer.foot .hud a { border: 0; color: var(--ink-2); }
footer.foot .built { display: flex; align-items: center; gap: 8px; border: 0; }
footer.foot .built img { width: 18px; height: 18px; }
:root:not([data-theme="night"]) footer.foot .built img { filter: invert(1) brightness(.35); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* the fictional fund's mark and name (site/shared/fund.js) */
.fund-mark { width: 22px; height: 22px; display: inline-block; vertical-align: -5px; fill: var(--accent-2); }
.fund-mark .seed { fill: var(--accent); }
.fundhead { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); text-transform: none; }
.fundhead small { font: 10.5px/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 400; }

/* ?thumb (dev only): hides page text so a hero can be captured as a card thumbnail — illustration only, no titles */
:root[data-thumb] .bar, :root[data-thumb] footer.foot, :root[data-thumb] .hero-title, :root[data-thumb] .hero-text,
:root[data-thumb] .ridge-head, :root[data-thumb] .runcard, :root[data-thumb] .tower-legend, :root[data-thumb] .ridge-pause,
:root[data-thumb] .tower-caption { visibility: hidden !important; }

/* 2D kit labels (kit/k2d.js): DOM over canvas so figures keep their receipts */
.k2d-labels { position: absolute; inset: 0; pointer-events: none; }
.k2d-label { position: absolute; left: 0; top: 0; pointer-events: auto; font: 11px/1.35 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.k2d-label b { display: block; font: 600 22px/1.1 var(--sans); letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.k2d-label.lit b { color: var(--accent-ink); }
.k2d-label .fig { font-weight: 500; }

/* ------------------------------------------------------------------ signal only
   What the site's look takes away (paper grain, glow, shadow, round corners, filled controls) and the few marks it adds
   (corner ticks on every plate, a rule under a receipted figure). Colour is all in the token blocks at the top. */
:root[data-palette="signal"] body { background-image: none; }
:root[data-palette="signal"] ::selection { background: color-mix(in srgb, var(--heat) 42%, transparent); color: var(--hi); }
:root[data-palette="signal"] :where(h1, h2, h3) { color: var(--hi); }
:root[data-palette="signal"] .bar .brand .dot { width: 8px; height: 8px; margin: 0 2px; background: var(--mint); box-shadow: none; }   /* checked */
:root[data-palette="signal"] .looks button { background: transparent; }
:root[data-palette="signal"] .plate::before, :root[data-palette="signal"] .plate::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--tick); pointer-events: none; }
:root[data-palette="signal"] .plate::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
:root[data-palette="signal"] .plate::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* a receipted figure: a mint rule under it; no highlighter, no glow */
:root[data-palette="signal"] .fig { background: none; color: var(--hi); text-shadow: none; border-radius: 0; box-shadow: inset 0 -1px 0 var(--mint); }
:root[data-palette="signal"] .fig:hover, :root[data-palette="signal"] .fig:focus-visible { background: color-mix(in srgb, var(--mint) 16%, transparent); }
:root[data-palette="signal"] .fig.struck { color: var(--muted); box-shadow: none; }
/* controls: outlines on the page's own ground; the primary one in heat, filled only under the pointer */
:root[data-palette="signal"] .btn { background: transparent; color: var(--ink); }
:root[data-palette="signal"] .btn.primary { color: var(--hi); }
:root[data-palette="signal"] .btn.primary:hover { background: var(--heat); border-color: var(--heat); color: var(--bg); }
:root[data-palette="signal"] .chip { border-radius: 0; background: transparent; }
:root[data-palette="signal"] .fund-mark { fill: var(--ink-2); }
:root[data-palette="signal"] .fund-mark .seed { fill: var(--ink); }
:root[data-palette="signal"] :is(.bar .poly, .tag, .chip .k, .fundhead small) { font-size: 11px; }   /* nothing under 11px */