/* MODATA design package -- shared styling.
   Light/dark by system preference, with an explicit toggle stored per browser. */

:root {
  color-scheme: light dark;

  /* MODATA brand: ink black, signal orange, silver.
     Orange is the only saturated colour in the system, so it has to stay rare
     to keep its meaning. It marks interaction and heat, nothing else.
     Light-mode orange is darkened to #B8501C because #E1642E on an off-white
     ground is about 3.3:1 and fails text contrast; the darker tone clears 5:1. */
  --ink:        #16181A;
  --orange:     #E1642E;
  --orange-ink: #B8501C;
  --silver:     #C9D1D9;

  --bg: #F4F4F2;
  --bg-raise: #FFFFFF;
  --bg-sink: #E9E9E6;
  --ink-mid: #4A4F57;
  --ink-dim: #767C86;
  --line: #DBDBD6;
  --line-strong: #B9BEC4;

  --accent: var(--orange-ink);
  --accent-solid: var(--orange);
  --accent-ink: #FFFFFF;

  /* Semantics track the thermal ramp below: red is failure, orange is heat,
     amber is tight, silver and steel are comfortable. Green is deliberately
     absent so orange never has to compete with it for meaning. */
  --warn: #B8501C;
  --bad:  #A3271B;
  --good: #3E6A80;
  --tight: #8A6A16;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;

  --maxw: 1180px;
  --radius: 6px;

  /* Review rail. Its own surface set rather than the page tokens, because the
     page's steps between --bg and --bg-raise are ~1.1:1 -- fine for a callout
     that sits inside a wide column of text, invisible for a small card floating
     in a narrow rail. Measured in dark mode: card fill vs page 1.07:1, border
     1.29:1, textarea vs card 1.07:1. The notes read as loose text with no
     container at all. These tokens fix that by leaning on the BORDER rather
     than the fill, since two dark greys cannot reach 3:1 without the card
     turning light grey. --rail-muted is a step up from --ink-dim because the
     lifted card surface drops --ink-dim to 3.96:1, under the 4.5:1 floor. */
  --rail-surface: #FFFFFF;
  --rail-edge: #848D97;
  --rail-divider: #DBDBD6;
  --rail-muted: #5F656E;
  --rail-field: #F4F4F2;
  --rail-warn: #A3271B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1012;
    --bg-raise: #16181A;
    --bg-sink: #0A0B0D;
    --ink: #E6EAEE;
    --ink-mid: #A8B1BA;
    --ink-dim: #79828C;
    --line: #24282D;
    --line-strong: #3A4048;
    --accent: var(--orange);
    --accent-ink: #14090400;
    --accent-ink: #180C05;
    --warn: #E1642E;
    --bad: #D9584A;
    --good: #7FA8BC;
    --tight: #D4A03F;
    --rail-surface: #20252B;
    --rail-edge: #5D6672;
    --rail-divider: #3A4048;
    --rail-muted: #A8B1BA;
    --rail-field: #0E1012;
    --rail-warn: #EE8478;
  }
}

:root[data-theme="dark"] {
  --bg: #0E1012;
  --bg-raise: #16181A;
  --bg-sink: #0A0B0D;
  --ink: #E6EAEE;
  --ink-mid: #A8B1BA;
  --ink-dim: #79828C;
  --line: #24282D;
  --line-strong: #3A4048;
  --accent: var(--orange);
  --accent-ink: #180C05;
  --warn: #E1642E;
  --bad: #D9584A;
  --good: #7FA8BC;
  --tight: #D4A03F;
  --rail-surface: #20252B;
  --rail-edge: #5D6672;
  --rail-divider: #3A4048;
  --rail-muted: #A8B1BA;
  --rail-field: #0E1012;
  --rail-warn: #EE8478;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ chrome */
/* Three columns: fixed left nav, content, review rail. The rail is in normal
   flow inside the grid, so it scrolls with the body by construction rather than
   by a scroll handler -- each note is positioned against its own section. */
:root { --side: 208px; --rail: 320px; }

aside.side {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px;
  background: var(--bg-sink);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand svg { width: 26px; height: 26px; display: block; flex: none; }
.brand .word { font: 700 15px/1 var(--mono); letter-spacing: 0.16em; }
.brand .tag {
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  margin-top: 3px;
  display: block;
}
.brand .tag b { color: var(--accent-solid); font-weight: 700; }

nav.main { display: flex; flex-direction: column; gap: 1px; }
nav.main a {
  color: var(--ink-mid);
  text-decoration: none;
  font-size: 13.5px;
  padding: 6px 9px;
  border-radius: var(--radius);
  white-space: nowrap;
  border-left: 2px solid transparent;
}
nav.main a:hover { background: var(--bg-raise); color: var(--ink); }
nav.main a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  background: var(--bg-raise);
  border-left-color: var(--accent-solid);
}

.side-foot { margin-top: auto; padding-top: 10px; }
.side-toggle { display: none; }

.theme-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-mid);
  border-radius: var(--radius);
  padding: 5px 9px;
  cursor: pointer;
  font: 500 12px var(--mono);
}
.theme-btn:hover { border-color: var(--line-strong); color: var(--ink); }

/* Tracks are capped and centred rather than left-aligned: with a fixed nav on
   the left, a 1fr content track pins everything to the nav and leaves a void on
   the right of a wide screen. justify-content centres the track group in the
   space the nav leaves. */
.shell {
  margin-left: var(--side);
  display: grid;
  grid-template-columns: minmax(0, var(--maxw)) var(--rail);
  justify-content: center;
  column-gap: 26px;
  align-items: start;
  padding: 0 20px;
}
main { min-width: 0; padding: 34px 0 90px; }
.shell > footer.site { grid-column: 1 / -1; }

/* Rail hidden until review mode is on, so the default reading width is intact. */
.shell:not(.reviewing) { grid-template-columns: minmax(0, var(--maxw)); }
.shell:not(.reviewing) > .rail { display: none; }

@media (max-width: 1100px) {
  .shell, .shell.reviewing { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  aside.side {
    position: sticky;
    inset: 0 auto auto 0;
    width: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    overflow: visible;
  }
  .brand .tag { display: none; }
  .side-toggle {
    display: inline-block;
    margin-left: auto;
    background: none;
    border: 1px solid var(--line);
    color: var(--ink-mid);
    border-radius: var(--radius);
    padding: 5px 10px;
    cursor: pointer;
    font: 500 12px var(--mono);
  }
  aside.side nav.main { display: none; width: 100%; }
  aside.side.open nav.main { display: flex; }
  .side-foot { margin: 0; padding: 0; }
  .shell { margin-left: 0; }
}

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  margin: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-sink);
}
.hero img {
  display: block;
  width: 100%;
  height: auto;
  /* The render is a wide site shot; on a phone a 3:2 crop keeps the containers
     readable instead of shrinking the whole scene to a stripe. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 40%;
}
@media (min-width: 720px) {
  /* 2:1 trims gravel from the bottom of a 3:2 source. Anchoring high keeps the
     satellite terminals in frame: they are the single most distinctive thing in
     the render and the whole no-fibre argument in one object. */
  .hero img { aspect-ratio: 2 / 1; object-position: 50% 18%; }
}
.hero .overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 22px 16px;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--bg) 92%, transparent),
    color-mix(in srgb, var(--bg) 70%, transparent) 55%,
    transparent);
  display: flex;
  gap: 10px 26px;
  flex-wrap: wrap;
  align-items: baseline;
}
.hero .overlay b {
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink);
}
.hero .overlay span { font-size: 12.5px; color: var(--ink-mid); }
.hero .overlay em { color: var(--accent); font-style: normal; font-weight: 600; }
.hero figcaption {
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
  background: var(--bg-raise);
}
/* Video sits on top of the still and is revealed on play. The still is already
   downloaded, so this costs nothing until someone asks for motion. */
.hero video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 40%;
  background: var(--bg-sink);
}
@media (min-width: 720px) {
  .hero video { aspect-ratio: 2 / 1; object-position: 50% 18%; }
}
.hero[data-playing="false"] video { display: none; }
.hero[data-playing="true"] picture { display: none; }

.hero .vidbtn {
  position: absolute;
  left: 18px; top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font: 600 12.5px var(--mono);
  letter-spacing: 0.06em;
  cursor: pointer;
}
.hero .vidbtn:hover { border-color: var(--accent-solid); color: var(--accent); }
.hero .vidbtn .tri { color: var(--accent-solid); font-size: 14px; line-height: 1; }
.hero .vidbtn small { color: var(--ink-dim); font-weight: 500; letter-spacing: 0; }

/* Shown only if the render is missing, so the page is never broken. */
.hero .placeholder {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 64px 24px;
  text-align: center;
  color: var(--ink-dim);
}
.hero .placeholder svg { width: 84px; height: 84px; color: var(--ink-dim); }

/* ------------------------------------------------------------------- type */
h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 10px; }
h2 {
  font-size: 22px; letter-spacing: -0.01em; margin: 46px 0 14px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
h3 { font-size: 16.5px; margin: 28px 0 10px; }
h4 { font-size: 14px; margin: 20px 0 8px; color: var(--ink-mid); text-transform: uppercase; letter-spacing: 0.07em; }
p { margin: 0 0 14px; max-width: 74ch; }
a { color: var(--accent); }
code { font: 500 13.5px var(--mono); background: var(--bg-sink); padding: 1px 5px; border-radius: 4px; }
pre {
  font: 500 12.5px/1.55 var(--mono);
  background: var(--bg-sink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
}
.lede { font-size: 18px; color: var(--ink-mid); max-width: 68ch; }
.dim { color: var(--ink-dim); }
.mono { font-family: var(--mono); }
small { font-size: 12.5px; color: var(--ink-dim); }

/* ------------------------------------------------------------------ blocks */
.note, .caution {
  border-left: 3px solid var(--accent);
  background: var(--bg-raise);
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 18px 0;
  font-size: 14.5px;
}
.caution { border-left-color: var(--warn); }
.note p:last-child, .caution p:last-child { margin-bottom: 0; }

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin: 22px 0; }
.card {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
}
.card .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); }
.card .v { font: 600 25px/1.15 var(--mono); margin: 7px 0 3px; letter-spacing: -0.02em; }
.card .s { font-size: 12.5px; color: var(--ink-mid); }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font: 600 11.5px var(--mono); letter-spacing: 0.04em;
  border: 1px solid currentColor;
}
.pill.good { color: var(--good); }
.pill.tight { color: var(--tight); }
.pill.bad { color: var(--bad); }
.pill.warn { color: var(--warn); }

/* ------------------------------------------------------------------ tables */
.tablewrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); }
thead th {
  background: var(--bg-sink); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-dim); font-weight: 600;
  position: sticky; top: 0; z-index: 1;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-raise); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 700; background: var(--bg-sink); }
tr.group td { font-weight: 700; background: var(--bg-sink); font-size: 13px; }
td.indent { padding-left: 28px; }

/* --------------------------------------------------------------- controls */
.controls {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 18px 0;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--ink-mid); font-weight: 600; }
.field .hint { font-size: 11.5px; color: var(--ink-dim); }
input[type="number"], input[type="text"], select, input[type="password"] {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 7px 9px; font: 500 14px var(--mono); width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent-solid); outline-offset: -1px; }
input[type="range"] { width: 100%; accent-color: var(--accent-solid); }
.rowline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rowline .val { font: 600 14px var(--mono); }
button.action {
  background: var(--accent-solid); color: #FFFFFF; border: none;
  border-radius: var(--radius); padding: 9px 16px;
  font: 600 14px var(--sans); cursor: pointer;
}
button.action:hover { filter: brightness(1.08); }
button.ghost {
  background: none; color: var(--ink-mid); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 7px 13px; font: 500 13px var(--sans); cursor: pointer;
}
button.ghost:hover { color: var(--ink); border-color: var(--accent); }
label.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-mid); }
label.check input { accent-color: var(--accent-solid); width: auto; }

/* -------------------------------------------------------------- tile map */
.tilemap { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; max-width: 720px; margin: 18px 0; }
.tile {
  aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 700 11px var(--mono); cursor: pointer; color: #10130f; background: var(--bg-sink);
  transition: transform .08s;
}
.tile:hover { transform: scale(1.09); border-color: var(--ink); }
.tile .sub { font-size: 8.5px; font-weight: 500; opacity: .8; }
.tile.empty { border: none; background: none; cursor: default; }
.tile.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-mid); align-items: center; }
.legend .sw { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }

/* --------------------------------------------------------------- drawings */
figure { margin: 22px 0; }
figure svg { width: 100%; height: auto; display: block; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius); }
figcaption { font-size: 13px; color: var(--ink-dim); margin-top: 8px; max-width: 74ch; }
svg text { font-family: var(--mono); fill: var(--ink); }
svg .lbl { font-size: 11px; fill: var(--ink-mid); }
svg .tiny { font-size: 9px; fill: var(--ink-dim); }
svg .ttl { font-size: 13px; font-weight: 700; fill: var(--ink); }
svg .box { fill: var(--bg-sink); stroke: var(--line-strong); stroke-width: 1.2; }
svg .box-a { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); stroke-width: 1.4; }
svg .ln { stroke: var(--line-strong); stroke-width: 1.2; fill: none; }
svg .ln-hot { stroke: #d2603a; stroke-width: 2; fill: none; }
svg .ln-cold { stroke: #3a7fd2; stroke-width: 2; fill: none; }
svg .ln-dc { stroke: var(--accent); stroke-width: 2; fill: none; }
svg .ln-dash { stroke: var(--ink-dim); stroke-width: 1; stroke-dasharray: 4 3; fill: none; }

/* ------------------------------------------------------------------ chart */
.chart { width: 100%; height: auto; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .series { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .series2 { fill: none; stroke: var(--warn); stroke-width: 2; stroke-dasharray: 5 3; }
.chart .dot { fill: var(--accent); }
.chart text { font: 500 10px var(--mono); fill: var(--ink-dim); }

/* ------------------------------------------------------------------ misc */
.stack { font: 500 12.5px/1.7 var(--mono); }
.stack .row { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; }
.stack .row.level { border-top: 1px solid var(--line); font-weight: 700; }
.stack .row.final { border-top: 2px solid var(--accent); font-weight: 700; color: var(--accent); }
.stack .row span:last-child { font-variant-numeric: tabular-nums; }

ul.flags { list-style: none; padding: 0; }
ul.flags li {
  border-left: 3px solid var(--warn); background: var(--bg-raise);
  padding: 9px 14px; margin-bottom: 8px; font-size: 13.5px; border-radius: 0 4px 4px 0;
}
ul.flags li.critical { border-left-color: var(--bad); }

footer.site {
  border-top: 1px solid var(--line); margin-top: 60px;
  padding: 22px 20px 50px; font-size: 12.5px; color: var(--ink-dim);
}
footer.site .inner { max-width: var(--maxw); margin: 0 auto; }

.two-col { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.toc { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 20px 0; }
.toc ol { margin: 0; padding-left: 20px; font-size: 14px; }
.toc li { margin: 3px 0; }

/* ------------------------------------------------------------------- gate */
.gate-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.gate {
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: 10px;
  padding: 34px 32px; width: min(400px, 100%);
}
.gate .lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gate .lockup img { width: 42px; height: 42px; }
.gate h1 { font: 700 19px/1 var(--mono); letter-spacing: 0.16em; margin: 0; }
.gate .err { color: var(--bad); font-size: 13px; margin: 10px 0 0; }

@media print {
  aside.side, nav.main, .theme-btn, .controls, .rail, .review-btn, .hb, .hb-pop { display: none !important; }
  body { background: #fff; color: #000; }
  .shell { margin-left: 0; display: block; }
  main { max-width: none; padding: 0; }
  h2 { break-after: avoid; }
  .tablewrap, figure { break-inside: avoid; }
  /* Classification travels with the paper. */
  .ribbon { position: fixed; top: 0; left: 0; right: 0; border-radius: 0; margin: 0; }
  footer.site { display: block; position: fixed; bottom: 0; left: 0; right: 0; font-size: 9px; border-top: 1px solid #000; background: #fff; }
  footer.site p:not(.doc-control) { display: none; }
  @page { margin: 22mm 16mm 20mm; }
}

/* ------------------------------------------------------------- review rail */
.review-btn {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  background: none;
  border: 1px solid var(--rail-edge);
  color: var(--ink-mid);
  border-radius: var(--radius);
  padding: 6px 9px;
  cursor: pointer;
  font: 500 12px var(--mono);
  text-align: left;
}
.review-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.review-btn[aria-pressed="true"] {
  border-color: var(--accent-solid);
  color: var(--accent);
}

.rail { position: relative; min-width: 0; }
.rail-who {
  position: sticky;
  top: 10px;
  z-index: 2;
  background: var(--rail-surface);
  border: 1px solid var(--rail-edge);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 6px;
}
.rail-who label { font: 500 11px var(--mono); color: var(--rail-muted); display: block; }
.rail-who input {
  width: 100%;
  margin-top: 4px;
  background: var(--rail-field);
  border: 1px solid var(--rail-edge);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 5px 7px;
  font: 400 13px var(--sans);
}
.rail-warn { color: var(--rail-warn); font-size: 12px; margin: 6px 0 0; }

/* NOTE the class name: `.note` is already the site's callout box, used on every
   page. Naming the rail's cards `.note` absolutely positioned every callout on
   the site -- they escaped their column and stacked under the fixed nav. The
   rail's cards are `.rail-note` for that reason. Do not rename them back. */
.rail-note {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid var(--rail-edge);
  border-left: 2px solid var(--rail-edge);
  border-radius: var(--radius);
  background: var(--rail-surface);
  padding: 9px 11px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.rail-note.hot { border-left-color: var(--accent-solid); box-shadow: 0 0 0 3px var(--bg-sink); }
.note-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.note-sec {
  font: 600 11px/1.35 var(--mono);
  letter-spacing: 0.04em;
  color: var(--rail-muted);
  text-transform: uppercase;
  flex: 1;
}
.note-n {
  font: 700 10px var(--mono);
  background: var(--accent-solid);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 1px 6px;
  flex: none;
}

.cmt { border-top: 1px solid var(--rail-divider); padding: 7px 0 5px; }
.cmt:first-child { border-top: 0; }
.cmt header { display: flex; gap: 8px; align-items: baseline; }
.cmt header b { font-size: 12.5px; }
.cmt header time { font: 400 11px var(--mono); color: var(--rail-muted); margin-left: auto; }
.cmt p { margin: 3px 0 4px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.cmt footer button {
  background: none;
  border: 0;
  color: var(--rail-muted);
  font: 500 11px var(--mono);
  cursor: pointer;
  padding: 0;
}
.cmt footer button:hover { color: var(--accent); }
.cmt.done p, .cmt.done header b, .cmt.done header time { color: var(--rail-muted); }
.cmt.done p { text-decoration: line-through; text-decoration-color: var(--rail-edge); }

.cmt-add { margin-top: 6px; }
.cmt-add textarea {
  width: 100%;
  resize: vertical;
  background: var(--rail-field);
  border: 1px solid var(--rail-edge);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 6px 8px;
  font: 400 13px/1.45 var(--sans);
}
.cmt-add textarea::placeholder { color: var(--rail-muted); opacity: 1; }
.cmt-actions { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.cmt-actions button {
  background: var(--accent-solid);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius);
  padding: 4px 11px;
  font: 600 12px var(--mono);
  cursor: pointer;
}
.cmt-msg { font: 400 11px var(--mono); color: var(--rail-muted); }

/* Count badge beside a heading. Inline so it never disturbs the heading box. */
.head-note {
  display: inline-block;
  vertical-align: super;
  margin-left: 7px;
  background: var(--accent-solid);
  color: var(--accent-ink);
  border: 0;
  border-radius: 999px;
  padding: 1px 7px;
  font: 700 10px var(--mono);
  cursor: pointer;
}

@media (max-width: 1100px) {
  /* No room for a column: notes fall inline under the page, in section order. */
  .shell.reviewing > .rail { display: block; margin: 0 0 60px; }
  .rail .rail-note { position: static; transform: none !important; margin-bottom: 10px; }
  .rail { height: auto !important; }
}

/* Collapsed note: one slim button until someone opens it. */
.rail-note.collapsed {
  border: 1px dashed var(--rail-edge);
  border-left: 1px dashed var(--rail-edge);
  background: none;
  padding: 0;
}
.rail-note.collapsed:hover { border-color: var(--line-strong); }
.note-open {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--rail-muted);
  font: 500 11.5px/1.4 var(--mono);
  padding: 6px 9px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-open:hover { color: var(--accent); }


/* ------------------------------------------------------------ help bubbles */
/* The (i) sits after the first occurrence of a glossary term. Small, muted,
   never bold: it must be findable without turning the prose into a rash.
   Popover uses the rail tokens because those are the ones measured to hold
   contrast in both themes. */
.nav-sep {
  display: block;
  margin: 12px 9px 3px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hb, .hb-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin: 0 1px 0 4px;
  vertical-align: 0.15em;
  border-radius: 50%;
  border: 1px solid var(--rail-edge);
  background: transparent;
  color: var(--rail-muted);
  font: 700 9.5px/1 var(--mono);
  cursor: help;
  padding: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hb:hover, .hb:focus-visible, .hb[aria-expanded="true"] {
  border-color: var(--accent-solid);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-solid) 12%, transparent);
  outline: none;
}
.hb-demo { cursor: default; }
h2 .hb, h3 .hb { vertical-align: 0.35em; }
td .hb, th .hb { margin-left: 3px; }

.hb-pop {
  position: fixed;
  z-index: 70;
  width: min(340px, calc(100vw - 16px));
  background: var(--rail-surface);
  border: 1px solid var(--rail-edge);
  border-left: 2px solid var(--accent-solid);
  border-radius: var(--radius);
  padding: 10px 12px 11px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.hb-pop[hidden] { display: none; }
.hb-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.hb-head b { font-size: 14px; flex: 1; }
.hb-x {
  background: none;
  border: 0;
  color: var(--rail-muted);
  font: 400 16px/1 var(--sans);
  cursor: pointer;
  padding: 0 2px;
}
.hb-x:hover { color: var(--ink); }
.hb-pop p { margin: 0 0 6px; }
.hb-ref { font: 500 12px/1.45 var(--mono); color: var(--rail-muted); }
.hb-ref span { color: var(--ink); }
.hb-more { font-size: 12.5px; }

/* --------------------------------------------------------------- glossary */
.gl-tools, .faq-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin: 18px 0 24px;
}
#glSearch {
  flex: 0 1 300px;
  background: var(--rail-field);
  border: 1px solid var(--rail-edge);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 7px 10px;
  font: 400 14px var(--sans);
}
.gl-groups { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.gl-groups a {
  font: 500 12px var(--mono);
  color: var(--ink-mid);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
}
.gl-groups a:hover { border-color: var(--rail-edge); color: var(--ink); }
.gl-groups small { color: var(--ink-dim); }
.gl-group h2 { margin-top: 34px; }
.gl-list { margin: 0; }
.gl-list dt {
  margin: 22px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  scroll-margin-top: 20px;
}
.gl-list dt.hot .gl-term { color: var(--accent); }
.gl-anchor {
  color: var(--ink-dim);
  text-decoration: none;
  font: 500 13px var(--mono);
  opacity: 0.55;
}
.gl-anchor:hover { color: var(--accent); opacity: 1; }
.gl-term { font: 600 17px/1.3 var(--sans); }
.gl-alias { font: 400 12px var(--mono); color: var(--ink-dim); }
.gl-list dd { margin: 0; max-width: 78ch; }
.gl-short { font-weight: 500; color: var(--ink); }
.gl-ref { font: 500 12.5px/1.5 var(--mono); color: var(--rail-muted); }
.gl-ref b { color: var(--ink-dim); font-weight: 600; }
.gl-foot { font-size: 13px; color: var(--ink-mid); }
.gl-where { margin-left: 6px; }

/* -------------------------------------------------------------------- FAQ */
.faq-group h2 { margin-top: 34px; }
details.faq {
  border: 1px solid var(--line);
  border-left: 2px solid var(--rail-edge);
  border-radius: var(--radius);
  background: var(--bg-raise);
  margin: 8px 0;
}
details.faq[open] { border-left-color: var(--accent-solid); }
details.faq summary {
  cursor: pointer;
  padding: 11px 14px;
  font-weight: 600;
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before {
  content: "+";
  font: 700 15px/1 var(--mono);
  color: var(--accent);
  flex: none;
  width: 12px;
}
details.faq[open] summary::before { content: "–"; }
.faq-a { padding: 0 14px 12px 36px; max-width: 78ch; }
.faq-a p { margin: 0; }

/* ------------------------------------------- front page: five things */
.pt .explain {
  color: var(--ink-mid);
  margin: 0 0 8px;
}
.pt .explain b { color: var(--ink); }


/* ----------------------------------------------------- assumptions register */
.kpi-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.kpi-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-left: 2px solid var(--rail-edge);
  border-radius: var(--radius);
  padding: 8px 12px;
  cursor: pointer;
  color: var(--ink);
  min-width: 150px;
}
.kpi-btn:hover { border-color: var(--rail-edge); }
.kpi-btn[aria-selected="true"] { border-left-color: var(--accent-solid); background: var(--rail-surface); }
.kpi-btn .kpi-l { font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
.kpi-btn .kpi-v { font: 600 16px var(--mono); }
.kpi-btn[aria-selected="true"] .kpi-v { color: var(--accent); }

svg.tornado { width: 100%; height: auto; display: block; margin: 8px 0 4px; }
svg.tornado .axis { stroke: var(--line-strong); stroke-width: 1; }
svg.tornado .lab { font: 500 12.5px var(--sans); fill: var(--ink); }
svg.tornado .tiny { font: 400 10.5px var(--mono); fill: var(--ink-dim); }
svg.tornado .bar.lo { fill: var(--accent-solid); opacity: 0.85; }
svg.tornado .bar.hi { fill: var(--good); opacity: 0.85; }
svg.tornado .bar:hover { opacity: 1; }

.st {
  display: inline-block;
  font: 600 10.5px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid var(--rail-edge);
  color: var(--ink-mid);
  white-space: nowrap;
}
.st-vendor { border-color: var(--accent-solid); color: var(--accent); }
.st-place  { border-color: var(--tight); color: var(--tight); }
.st-phys   { border-color: var(--good); color: var(--good); }
.st-policy, .st-market { color: var(--ink-mid); }

.imp {
  display: inline-block;
  font: 500 11px var(--mono);
  color: var(--ink-mid);
  background: var(--bg-sink);
  border-radius: 3px;
  padding: 1px 6px;
  margin: 1px 2px 1px 0;
  white-space: nowrap;
}
.imp.mid { color: var(--ink); }
.imp.big { color: var(--accent); font-weight: 700; }

svg.tornado .bar.flip { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; }
svg.tornado .flag { font: 700 10px var(--mono); fill: var(--accent); }


/* ------------------------------------------------------------- ribbon */
.ribbon {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 12px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--rail-edge);
  border-left: 3px solid var(--accent-solid);
  border-radius: var(--radius);
  background: var(--rail-surface);
  font: 500 11.5px/1.4 var(--mono);
  color: var(--rail-muted);
  letter-spacing: 0.02em;
}
.ribbon .rb-class { font-weight: 700; color: var(--accent); letter-spacing: 0.14em; }
.ribbon .rb-ver, .ribbon .rb-arch { color: var(--ink); }
.ribbon .rb-dist { flex: 1; min-width: 200px; }
.ribbon .rb-legal { white-space: nowrap; }
@media (max-width: 860px) { .ribbon .rb-dist { display: none; } }

.brand .word .tm { font-size: 7px; vertical-align: 0.9em; margin-left: 1px; letter-spacing: 0; }
footer.site .doc-control { font: 500 12px/1.6 var(--mono); color: var(--ink-mid); }
footer.site .doc-control .cls { color: var(--accent); letter-spacing: 0.12em; }
footer.site .tm-line { font-size: 11.5px; color: var(--ink-dim); }
.fill { color: var(--accent); font-weight: 600; }


/* ------------------------------------------------------ programme gantt */
#gantt { width: 100%; height: auto; display: block; }
#gantt .ttl { font: 700 11px var(--mono); letter-spacing: 0.12em; fill: var(--ink-dim); }
#gantt .tiny { font: 400 10.5px var(--mono); fill: var(--ink-mid); }
#gantt .ln-dash { stroke: var(--line); stroke-dasharray: 2 3; }
#gantt .box-a { fill: var(--good); opacity: 0.8; }
#gantt .box-pod { fill: var(--accent-solid); opacity: 0.85; }
#gantt .ship { stroke: var(--ink); stroke-width: 1.5; }
#gantt .gate { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 3; }
#gantt .gate-t { fill: var(--accent); font-weight: 700; }
.chart-wrap { margin: 14px 0 6px; }
.chart-wrap figcaption { font-size: 12.5px; color: var(--ink-dim); margin-top: 6px; }


/* ------------------------------------------------------ FP4 basis switch */
.rb-switch { display: inline-flex; align-items: center; gap: 0; margin-left: auto; }
.rb-switch .rb-sw-l { font: 600 10px var(--mono); letter-spacing: 0.12em; color: var(--ink-dim); margin-right: 6px; }
.rb-switch button {
  background: transparent;
  border: 1px solid var(--rail-edge);
  color: var(--rail-muted);
  font: 600 10.5px var(--mono);
  letter-spacing: 0.06em;
  padding: 2px 9px;
  cursor: pointer;
}
.rb-switch button:first-of-type { border-radius: 999px 0 0 999px; }
.rb-switch button:last-of-type { border-radius: 0 999px 999px 0; border-left: 0; }
.rb-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rb-switch.off-ref button[aria-pressed="true"] { background: var(--accent-solid); color: var(--accent-ink); border-color: var(--accent-solid); }
.rb-view { font: 700 10.5px var(--mono); color: var(--accent); letter-spacing: 0.04em; }
@media (max-width: 860px) { .rb-switch { margin-left: 0; } }

.rb-switch .rb-sw-i {
  margin-left: 6px;
  width: 16px; height: 16px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rail-edge);
  color: var(--rail-muted);
  font: 700 9.5px/1 var(--mono);
}
.rb-switch .rb-sw-i[aria-expanded="true"], .rb-switch .rb-sw-i:hover { border-color: var(--accent-solid); color: var(--accent); }
.rb-explain {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--rail-edge);
  border-left: 3px solid var(--accent-solid);
  border-radius: var(--radius);
  background: var(--rail-surface);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 88ch;
}
.rb-explain p { margin: 0 0 8px; }
.rb-explain p:last-child { margin: 0; }
.rb-explain .acc { color: var(--accent); }

svg .wall { fill: none; stroke: var(--accent-solid); stroke-width: 1.6; }