/* Notes pages. Colour tokens, header and footer mirror index.html (brand.md D6);
   keep the two in step when either changes.

   Layout: a margin column carries the note's date, status, data files and section
   headings; the text column holds the argument at about 69 characters a line, and
   figures keep to the same width. Tables start at the text width and may grow into the
   bleed column when their columns need it, as the title does.

   Light is the default palette whatever the system setting; the dark field applies only
   when the reader picks it with the toggle ([data-theme="dark"]). */
:root {
  --bg: #FFFFFF;
  --fg: #17171A;
  --lede: #30313A;
  --muted: #5F606B;
  --rule: #E4E6EC;
  --rule-strong: #D8DBE2;
  --card: #F4F5F8;
  --link: #2F67D8;
  --link-hover: #173B84;
  --accent: #2F67D8;
  --proposed: #9A6100; /* task state `proposed` (#F2B35E), darkened to read as text on white */
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --maxw: 1180px;
}
:root[data-theme="dark"] {
  --bg: #0A0A0A;
  --fg: #EDEDF0;
  --lede: #C7C7CC;
  --muted: #9B9BA3;
  --rule: #1F1F25;
  --rule-strong: #26262B;
  --card: #17171A;
  --link: #8AB3FF;
  --link-hover: #C9DDFF;
  --accent: #6E9FFF;
  --proposed: #F2B35E;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* ---------- header (as index.html) ---------- */
header {
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
}
.bar { display: flex; align-items: center; gap: 16px; height: 76px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; color: var(--fg); }
.brand:hover { color: var(--fg); }
.brand svg { width: 30px; height: 30px; display: block; }
.brand b { font-weight: 500; letter-spacing: -.02em; font-size: 17px; white-space: nowrap; }
.brand b span { color: var(--muted); }
nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, nav a[aria-current] { color: var(--fg); }
.theme {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 8px; border: 1px solid var(--rule-strong); background: transparent; color: var(--muted);
  cursor: pointer; padding: 0; margin-left: 6px;
}
.theme[hidden] { display: none; }
.theme:hover { color: var(--fg); border-color: var(--muted); }
.theme svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme .sun { display: none; } .theme .moon { display: block; }
:root[data-theme="dark"] .theme .sun { display: block; } :root[data-theme="dark"] .theme .moon { display: none; }

/* ---------- the page grid ---------- */
main.wrap { padding-top: 88px; padding-bottom: 112px; }
.note, .index {
  display: grid;
  grid-template-columns: [rail] 10.5rem [text] minmax(0, 36em) [bleed] minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
}
.note > *, .index > * { grid-column: text; min-width: 0; }
.note > h1 { grid-column: text / -1; max-width: 50em; }
/* A table is as wide as its columns need: never narrower than the text column, never
   wider than text plus bleed. It scrolls only past that. */
.note > .table { grid-column: text / -1; justify-self: start; width: fit-content; min-width: min(100%, 36em); max-width: 100%; }

/* The margin column: date, status, files. Sentence case, one size, muted.
   It spans the title, details, summary and the first paragraphs, so a long file list
   runs down beside the text instead of stretching the rows under the title. A section
   heading that would land beside it moves below it, still level with its paragraph. */
.note > .rail { grid-column: rail; grid-row: 1 / span 8; }
.rail { font-size: 14px; line-height: 1.5; color: var(--muted); padding-top: 12px; }
.rail p { margin: 0 0 4px; }
.rail .files { list-style: none; padding: 0; margin: 24px 0 0; }
.rail .files li { margin: 0 0 4px; }
.rail .files li:first-child { color: var(--fg); margin-bottom: 6px; }
.rail .files a { color: var(--muted); }
.rail .files a:hover { color: var(--fg); }
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--proposed); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Under the title: author, dates, tags, as aligned label and value rows. */
.meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 20px; margin: -4px 0 32px; font-size: 14px; line-height: 1.55; }
.meta div { display: contents; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; color: var(--fg); }
.meta .tag + .tag::before { content: ", "; }

/* ---------- type ---------- */
h1 {
  font-size: clamp(36px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.038em;
  font-weight: 600; margin: 0 0 26px; text-wrap: balance;
}
.summary { font-size: 21px; line-height: 1.5; color: var(--lede); margin: 0 0 56px; text-wrap: pretty; }
.note p { margin: 0 0 1.1em; text-wrap: pretty; }
/* Section headings sit in the margin, level with their first paragraph. */
.note > h2 {
  grid-column: rail;
  font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em;
  margin: 40px 0 0; padding-top: 2px;
}
.note > h2 + * { margin-top: 40px; }
.note h3 { font-size: 17px; font-weight: 600; margin: 28px 0 8px; }
.note ul, .note ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.note li { margin: 0 0 .45em; padding-left: .2em; }
.note li::marker { color: var(--muted); }
.note blockquote {
  margin: 0 0 1.4em; padding: 0 0 0 20px; border-left: 2px solid var(--rule-strong);
  color: var(--lede);
}
.note blockquote p { margin: 0 0 6px; }
.note blockquote p.by { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.note blockquote p.by:last-child { margin: 0; }
code { font-family: var(--mono); font-size: .86em; }
p code, li code { background: var(--card); border-radius: 4px; padding: 1px 5px; }
pre { background: var(--card); border-radius: 8px; padding: 14px 16px; overflow-x: auto; }
strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- tables: rules between rows, no box ---------- */
.table { overflow-x: auto; margin: 8px 0 2em; }
table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 16px 9px 0; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
thead th { font-weight: 400; color: var(--muted); font-size: 14px; border-bottom-color: var(--rule-strong); vertical-align: bottom; white-space: normal; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child > * { border-bottom: 0; }

/* ---------- figures ---------- */
figure { margin: 12px 0 2.4em; }
figure .table { margin-bottom: 0; }
figcaption { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0 0 18px; max-width: 36em; }
figcaption strong { color: var(--fg); }

/* Strip: a reference share (tick) against the orchestrator's own share (dot), on one shared scale. */
.strip { --label: 11.5rem; --num: 4.5rem; }
.strip .head, .strip .row {
  display: grid; grid-template-columns: var(--label) minmax(0, 1fr) var(--num) var(--num) 3.5rem;
  column-gap: 16px; align-items: center;
}
.strip .head { font-size: 14px; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--rule-strong); }
.strip .head > :nth-child(n+3), .strip .row > :nth-child(n+3) { text-align: right; }
.strip .axis { position: relative; height: 1.4em; }
.strip .axis span { position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%); }
.strip .axis span:first-child { transform: none; }
.strip .axis span:last-child { transform: translateX(-100%); }
.strip .row { border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.strip .row:last-child { border-bottom: 0; }
.strip .who { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.strip .who small { color: var(--muted); font-size: 14px; }
.strip .track {
  position: relative; height: 52px;
  /* Hairline gridlines at the start, middle and end of the scale. */
  background:
    linear-gradient(var(--rule), var(--rule)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--rule), var(--rule)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--rule), var(--rule)) 100% 0 / 1px 100% no-repeat;
}
.strip .track i { position: absolute; top: 50%; }
.strip .tick { left: calc(var(--exp) * 1%); width: 2px; height: 22px; margin: -11px 0 0 -1px; background: var(--muted); border-radius: 1px; }
.strip .gap {
  left: calc(min(var(--exp), var(--obs)) * 1%);
  width: calc((max(var(--exp), var(--obs)) - min(var(--exp), var(--obs))) * 1%);
  height: 2px; margin-top: -1px; background: var(--accent); opacity: .45;
}
.strip .dot {
  left: calc(var(--obs) * 1%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg);
}
.strip .key { display: flex; gap: 22px; font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.strip .key span { display: inline-flex; align-items: center; gap: 8px; }
.strip .key .k-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.strip .key .k-tick::before { content: ""; width: 2px; height: 14px; border-radius: 1px; background: var(--muted); }

/* Heat table: tasks per crew, one hue, more is darker. Bold marks own provider. */
.heat table { width: auto; }
.heat th[scope="row"] { font-weight: 400; padding-right: 24px; }
.heat thead tr:first-child th { border-bottom: 0; padding-bottom: 2px; }
.heat thead th[colspan] { color: var(--fg); text-align: center; padding-right: 0; }
.heat thead tr + tr th { text-align: center; padding-right: 0; }
.heat td {
  text-align: center; min-width: 3.6rem; padding: 0; height: 40px;
  border-bottom: 2px solid var(--bg); border-right: 2px solid var(--bg);
}
.heat td.l1 { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.heat td.l2 { background: color-mix(in srgb, var(--accent) 28%, var(--bg)); }
.heat td.l3 { background: color-mix(in srgb, var(--accent) 42%, var(--bg)); }
.heat td.l4 { background: color-mix(in srgb, var(--accent) 56%, var(--bg)); }
.heat td strong { font-weight: 700; }

/* ---------- index ---------- */
.index > h1 { grid-column: text / -1; }
.index > .notes { grid-column: rail / -1; }
.notes { list-style: none; padding: 0; margin: 0; }
.notes li {
  display: grid; grid-template-columns: 10.5rem minmax(0, 36em); column-gap: 56px;
  border-top: 1px solid var(--rule-strong); padding: 26px 0 34px;
}
.notes .when { font-size: 14px; color: var(--muted); margin: 5px 0 0; }
.notes h2 { font-size: 24px; letter-spacing: -.02em; font-weight: 600; line-height: 1.25; margin: 0 0 10px; }
.notes h2 a { color: var(--fg); text-decoration: none; }
.notes h2 a:hover { color: var(--link); }
.notes li p { margin: 0; color: var(--muted); }
.notes li .status { color: var(--proposed); margin-top: 4px; }

/* ---------- footer (as index.html) ---------- */
footer { border-top: 1px solid var(--rule); }
footer .wrap {
  padding-top: 34px; padding-bottom: 56px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  color: var(--muted); font-size: 14.5px;
}
footer a { color: var(--muted); }
footer .sp { margin-left: auto; display: flex; gap: 20px; }

/* ---------- narrower screens: one column, margin content moves inline ---------- */
@media (max-width: 1000px) {
  .index { display: block; max-width: 36em; }
  /* One column: text keeps its measure, tables may use the full width. */
  .note { display: block; }
  .note > :not(.table) { max-width: 36em; }
  .rail { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 24px 0 0; margin: 48px 0 0; border-top: 1px solid var(--rule); }
  .rail p { margin: 0; }
  .rail .files { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; flex-basis: 100%; }
  .rail .files li { margin: 0; }
  .rail .files li:first-child { margin: 0; }
  .note > h2 { font-size: 22px; letter-spacing: -.02em; margin: 52px 0 12px; padding: 0; }
  .note > h2 + * { margin-top: 0; }
  .notes li { display: block; }
  .notes .when { margin: 0 0 6px; }
}
@media (max-width: 560px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .brand b { font-size: 15px; }
  .brand b span { display: none; }
  .brand svg { width: 26px; height: 26px; }
  .bar { height: 60px; }
  nav { gap: 14px; font-size: 14px; }
  nav .nav-orbit { display: none; }
  .theme { width: 44px; height: 44px; margin-left: 0; }
  main.wrap { padding-top: 44px; padding-bottom: 64px; }
  .summary { font-size: 18px; margin-bottom: 36px; }
  th, td { font-size: 14px; }
  /* Strip rows: name and numbers on one line, the track full width below. */
  .strip { --num: 4.6rem; }
  .strip .head, .strip .row { grid-template-columns: 1fr var(--num) var(--num) 2.8rem; column-gap: 8px; }
  .strip .head .axis { display: none; }
  .strip .row { padding-top: 12px; }
  .strip .row .track { grid-column: 1 / -1; grid-row: 2; height: 36px; }
  .strip .who small { display: none; }
  footer .sp { margin-left: 0; flex-wrap: wrap; }
}
@media (forced-colors: active) {
  .strip .tick, .strip .gap, .strip .dot, .strip .key span::before { forced-color-adjust: none; background: CanvasText; }
  .strip .dot, .strip .key .k-dot::before { background: Highlight; }
}