/*
  Floodplain design code. The full set of laws is in DESIGN.md at the repository root.

  Convention avoided: CI and ecosystem-CI dashboards. Dark slate, a table of package names with
  red and green status dots, a sidebar, hairline cards, KPI columns.

  Metaphor: a hydrogeological dye trace. The release is poured in upstream as rust uranine
  powder; a receptor packet hangs at every package downstream; a background sample taken before
  injection rules out natural fluorescence; a packet that comes back green is a positive.

  1. Only a positive is saturated, because in every photograph of a dye trace the dye is the
     only saturated thing in the frame. It appears on the reach's pools, in the test grid and
     on the patch line, never on a headline number.
  2. The green is a flat poured fill with a hard water-dark edge, because fluorescein fills the
     channel bank to bank and stops dead at the bank. Never a glow, gradient or text colour.
  3. The default light is overcast winter daylight, because every field photograph is taken in
     it and fluorescein is fluorescent in daylight. Dusk is the dark theme, where only the dye
     keeps its strength, as under a UV lamp.
  4. The release is drawn small in the powder's rust, once, at the source of the reach.
*/

:root {
  --paper: #ECEDE8;
  --ink: #1E1F1C;
  --muted: #545850;
  --faint: #7B7E75;
  --silt: #A9AA9F;
  --straw: #B09B6B;
  --water: #3E433F;
  --dye: #94D44A;
  --dye-ink: #1E1F1C;
  --powder: #8A2A12;
  --sheet: #F5F4F0;
  --rule: color-mix(in oklab, var(--water) 22%, var(--paper));
  --blend: multiply;

  /* headlines: the roman of a survey bulletin's title block. body and map: Geologica */
  --f-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --f-sans: "Geologica", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Red Hat Mono", ui-monospace, "Cascadia Mono", monospace;

  /* major third, base 17px */
  --s-1: 0.85rem;
  --s0: 1.0625rem;
  --s1: 1.328rem;
  --s2: 1.66rem;
  --s3: 2.075rem;
  --s4: clamp(2.1rem, 1.2rem + 2.6vw, 2.594rem);
  --s5: clamp(2.2rem, 1rem + 3.8vw, 3.242rem);

  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --measure: 62ch;
  --radius: 3px;
  --ease-pour: cubic-bezier(.3, .02, .2, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161714;
    --ink: #DCDDD6;
    --muted: #A2A59B;
    --faint: #686B62;
    --silt: #44473F;
    --straw: #8C7B55;
    --water: #2A2E2A;
    --dye: #A6E35A;
    --powder: #C24A1D;
    --sheet: #ECEBE5;
    --rule: color-mix(in oklab, var(--ink) 16%, var(--paper));
    --blend: normal;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-sans); font-size: var(--s0); line-height: 1.5;
  font-variation-settings: "SHRP" 0, "CRSV" 0;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
code { font-family: var(--f-mono); font-size: 0.9em; }
.num { font-variant-numeric: tabular-nums lining-nums; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.012em; }
p { margin: 0; text-wrap: pretty; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--ink); color: var(--paper);
        padding: 0.5rem 0.8rem; z-index: 10; border-radius: var(--radius); }
.skip:focus { left: 0.5rem; }

main { display: block; }
/* main is focused after navigation for screen readers; it is not a control, so no ring */
#main:focus, #main:focus-visible { outline: none; }
.loading { padding: 4rem var(--gutter); color: var(--muted); }

/* ------------------------------------------------------------------ top */
.top { padding: 1.1rem var(--gutter) 0.4rem; }
.mark { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.mark__glyph { width: 28px; height: 28px; }
.mark__cord { stroke: var(--water); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.mark__packet { fill: none; stroke: var(--water); stroke-width: 1.6; stroke-linejoin: round; }
.mark__dye { fill: var(--dye); stroke: var(--water); stroke-width: 1.6; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { .mark__cord, .mark__packet { stroke: var(--ink); } }
.mark__word { font-size: var(--s1); font-weight: 700; letter-spacing: -0.02em; font-variation-settings: "SHRP" 100, "CRSV" 0; }

/* ------------------------------------------------------------------ the trace */
.trace { padding: clamp(0.8rem, 2.4vw, 1.8rem) var(--gutter) 0; }
.trace__head { max-width: 48rem; }
.trace__title, .scene__title, .rcp-page h1, .block__head h2, .theirs h3 {
  font-family: var(--f-serif); font-variation-settings: normal; font-optical-sizing: auto;
}
.trace__title { font-size: var(--s5); line-height: 1.06; font-weight: 560; letter-spacing: -0.018em; max-width: 21ch; }
.trace__lede { margin-top: 0.85rem; font-size: var(--s1); line-height: 1.4; color: var(--muted); max-width: 44rem; }
.trace__after { padding: 1.6rem var(--gutter) 0; max-width: 58rem; font-size: var(--s1); line-height: 1.42; }
.trace__after a { font-weight: 600; }

.reach { position: relative; margin: 0.6rem calc(var(--gutter) * -1) 0; }
/* on a wide screen the river rises into the empty half beside the headline */
@media (min-width: 1000px) { .trace__head { position: relative; z-index: 1; } .reach { margin-top: clamp(-15rem, -18vw, -9rem); } }
.reach svg { display: block; width: 100%; height: auto; overflow: visible; }
.reach--v { margin: 1rem auto 0; max-width: 26rem; }
.reach .river { fill: var(--water); opacity: 0.2; }
@media (prefers-color-scheme: dark) { .reach .river { fill: var(--ink); opacity: 0.12; } }
.reach .inject { fill: var(--powder); }
.reach .inject-label { font: 600 15px var(--f-sans); fill: var(--ink); }
.reach .inject-sub { font: 400 13px var(--f-sans); fill: var(--muted); }
.reach .silt { fill: var(--silt); }
.reach__note { margin-top: 1.4rem; color: var(--muted); font-size: var(--s0); max-width: 52rem; }

.rcp { cursor: default; }
.rcp .cord { stroke: var(--faint); stroke-width: 1.2; }
.rcp .bag { fill: var(--paper); stroke: var(--faint); stroke-width: 1.3; }
.rcp--no-baseline .bag { fill: color-mix(in oklab, var(--straw) 50%, var(--paper)); stroke: var(--straw); }
.rcp--no-tests .bag { display: none; }
.rcp--no-tests .cord { stroke: var(--straw); stroke-width: 2.4; stroke-linecap: round; } /* a stake, nothing hung */
.rcp--lost .bag { fill: none; stroke-dasharray: 2.2 2; }
/* held back: a weir across the cord; the release never reached this packet */
.rcp--held-back .bag { fill: none; stroke: var(--straw); }
.rcp--held-back .weir { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.rcp--positive { cursor: pointer; }
.rcp--positive .cord, .rcp--positive .bag { stroke: var(--water); stroke-width: 1.7; }
@media (prefers-color-scheme: dark) { .rcp--positive .cord, .rcp--positive .bag { stroke: var(--ink); } }
.rcp--positive .pool { fill: var(--dye); stroke: var(--water); stroke-width: 1.7; transform-box: fill-box; transform-origin: 50% 100%; }
.rcp--positive .bag-dye { fill: var(--dye); stroke: var(--water); stroke-width: 1.7; transform-box: fill-box; transform-origin: 50% 100%; }
.rcp--positive .leader { fill: none; stroke: var(--water); stroke-width: 1; opacity: 0.7; }
@media (prefers-color-scheme: dark) { .rcp--positive .leader { stroke: var(--ink); opacity: 0.5; } }
/* survey-map halo: a paper-coloured stroke behind each label keeps it legible over packets
   without hiding any of them */
.rcp--positive .label, .rcp--positive .label-sub, .reach .inject-label, .reach .inject-sub {
  paint-order: stroke; stroke: var(--paper); stroke-width: 7px; stroke-linejoin: round;
}
.rcp--positive .label { font: 600 21px var(--f-sans); fill: var(--ink); letter-spacing: -0.01em; }
.rcp--positive .label-n { font: 600 34px var(--f-serif); letter-spacing: -0.02em; }
.rcp--positive .label-sub { font: 400 16px var(--f-sans); fill: var(--muted); }
.reach .dye-run { fill: var(--dye); stroke: var(--water); stroke-width: 1.4; }
@media (prefers-color-scheme: dark) { .reach .dye-run { stroke: none; } }
.rcp:focus-visible { outline: none; }
.rcp:focus-visible .bag, .rcp:focus-visible .cord { stroke: var(--ink); stroke-width: 2.6; }

@media (prefers-reduced-motion: no-preference) {
  /* the dye arrives: the river's green stretch fills in, then the packet takes it up */
  .reach .dye-run { opacity: 0; }
  .poured .dye-run { animation: arrive 900ms var(--ease-pour) 150ms both; }
  .poured .bag-dye { animation: pour 600ms var(--ease-pour) 700ms both; }
  @keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pour { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

.reach__tip {
  position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: var(--paper);
  border-radius: var(--radius); padding: 0.55rem 0.7rem; font-size: var(--s-1); max-width: 18rem; line-height: 1.35;
  transform: translate(-50%, calc(-100% - 12px));
}
.reach__tip b { font-weight: 600; }
.reach__tip[hidden] { display: none; }

/* ------------------------------------------------------------------ sections */
.scene { padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) 0; }
.scene__title { font-size: var(--s4); line-height: 1.08; font-weight: 620; max-width: 24ch; font-variation-settings: "SHRP" 100, "CRSV" 0; }
.scene__lede { margin-top: 0.8rem; color: var(--muted); font-size: var(--s1); max-width: var(--measure); line-height: 1.4; }

/* method: one passage of text beside a schematic drawn in the river's own glyphs */
.method { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: calc(var(--gutter) * 1.6); align-items: center; }
.method__text p { margin-top: 1rem; font-size: var(--s1); line-height: 1.45; color: var(--muted); max-width: 40rem; }
.method__text p b { color: var(--ink); font-weight: 600; }
.diagram { width: 100%; height: auto; overflow: visible; }
.diagram .fork { fill: none; stroke: var(--water); stroke-width: 1.6; }
.diagram .d-box { fill: var(--paper); stroke: var(--water); stroke-width: 1.6; }
.diagram .d-inject { fill: var(--powder); }
.diagram .d-label { font: 600 15px var(--f-sans); fill: var(--ink); }
.diagram .d-sub { font: 400 13px var(--f-sans); fill: var(--muted); }
@media (prefers-color-scheme: dark) { .diagram .fork, .diagram .d-box { stroke: var(--ink); } }

/* the accounting: every receptor as a packet, grouped by what it read */
.strip { display: flex; flex-wrap: wrap; gap: 2.2rem calc(var(--gutter) * 1.4); margin-top: 2.2rem; align-items: start; }
.strip__group { flex: 0 1 auto; max-width: 25rem; }
.strip__group--positive { max-width: 12rem; }
.strip__n { font: 560 var(--s4)/1 var(--f-serif); letter-spacing: -0.02em; }
.strip__label { margin-top: 0.25rem; font-weight: 600; }
.strip__packets { display: flex; flex-wrap: wrap; gap: 3px 4px; margin-top: 0.8rem; }
.strip__packets .pk { width: 14px; height: 22px; overflow: visible; }
.strip__why { margin-top: 0.7rem; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.strip__names { margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
.strip__names a { color: var(--ink); font-weight: 600; }
.strip__names summary { cursor: pointer; color: var(--ink); }

/* accounting: the five states as a field log */
.ledger { margin-top: 2.2rem; border-top: 1.5px solid var(--water); }
@media (prefers-color-scheme: dark) { .ledger { border-top-color: var(--ink); } }
.ledger__row {
  display: grid; grid-template-columns: 5.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: 0 var(--gutter); padding: 1.15rem 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.ledger__n { font-size: var(--s4); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.ledger__state { font-weight: 600; font-size: var(--s1); }
.ledger__state small { display: block; font-weight: 400; font-size: var(--s0); color: var(--muted); margin-top: 0.25rem; }
.ledger__names { font-size: 0.92rem; color: var(--muted); line-height: 1.7; }
.ledger__names a { color: var(--ink); font-weight: 600; }
.ledger__names details summary { cursor: pointer; color: var(--ink); }

/* ------------------------------------------------------------------ receptor page */
.rcp-page { padding: clamp(0.8rem, 2.4vw, 1.6rem) var(--gutter) 0; }
.back { font-size: var(--s0); color: var(--muted); }
.rcp-page__head { margin-top: 0.6rem; }
.rcp-page h1 { font-size: var(--s5); line-height: 1; font-weight: 640; letter-spacing: -0.03em; font-variation-settings: "SHRP" 100, "CRSV" 0; }
.rcp-page h1 .ver { font-weight: 400; font-size: 0.42em; color: var(--muted); letter-spacing: 0; margin-left: 0.45em; }
.rcp-page__lede { margin-top: 0.8rem; font-size: var(--s1); color: var(--muted); max-width: 48rem; line-height: 1.4; }
.rcp-page__art { width: 8.5rem; margin-top: -0.6rem; mix-blend-mode: var(--blend); }

.sample-sheet { margin-top: 1.6rem; }
.forks { font-size: var(--s0); color: var(--muted); max-width: 64rem; }
.forks b { color: var(--ink); font-weight: 600; }
/* the receptor under the lamp: one row per test file that broke, one square per test */
.cells__lead { margin-top: 1.2rem; font-size: var(--s1); }
.cells { margin-top: 0.9rem; display: grid; gap: 0.45rem; max-width: 80rem; }
.file { display: grid; grid-template-columns: minmax(0, 17rem) 4.6rem minmax(0, 1fr); gap: 0 1rem; align-items: center; }
.file__name { font-family: var(--f-mono); font-size: 0.8rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file--quiet .file__name { color: var(--muted); font-family: var(--f-sans); font-size: 0.9rem; }
.file__n { font-size: 0.84rem; color: var(--muted); text-align: right; }
.file__cells { display: flex; flex-wrap: wrap; gap: 2px; }
.file__rest { margin-top: 0.7rem; color: var(--muted); font-size: var(--s0); }
.cells i { display: block; width: 9px; height: 9px; border-radius: 1px; }
.cells .c--p { background: color-mix(in oklab, var(--water) 30%, var(--paper)); }
.cells .c--b { background: var(--dye); box-shadow: inset 0 0 0 1px var(--water); }
.cells .c--f { background: none; box-shadow: inset 0 0 0 1px var(--silt); }
.cells .gap { width: 9px; }
@media (prefers-color-scheme: dark) {
  .cells .c--p { background: color-mix(in oklab, var(--ink) 26%, var(--paper)); }
  .cells .c--b { box-shadow: none; }
}
.cells__key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.2rem; margin-top: 0.7rem; color: var(--muted); font-size: var(--s-1); }
.cells__key .k { display: inline-block; width: 11px; height: 11px; border-radius: 1px; margin-right: -0.6rem; }
.cells__key .k--p { background: color-mix(in oklab, var(--water) 30%, var(--paper)); }
.cells__key .k--b { background: var(--dye); box-shadow: inset 0 0 0 1px var(--water); }
.cells__key .k--f { box-shadow: inset 0 0 0 1px var(--silt); }
.cells__files { margin-left: auto; }
.pins { display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem; margin-top: 0.9rem; font-family: var(--f-mono); font-size: 0.86rem; color: var(--muted); }

.block { margin-top: clamp(2.2rem, 5vw, 3.6rem); }
.block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.block__head h2 { font-size: var(--s3); font-weight: 620; font-variation-settings: "SHRP" 100, "CRSV" 0; }
.block__by { font-size: var(--s-1); color: var(--muted); }

.cause { margin-top: 0.8rem; font-size: var(--s1); max-width: 52rem; line-height: 1.4; }
.log {
  margin-top: 1.1rem; background: var(--water); color: #E3E4DD; border-radius: var(--radius);
  padding: 1.1rem 1.2rem; font-family: var(--f-mono); font-size: 0.8rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; max-height: 19rem; overflow: auto;
}
@media (prefers-color-scheme: dark) { .log { background: #0E0F0D; } }
.log mark { background: var(--dye); color: var(--dye-ink); padding: 0.05em 0.15em; border-radius: 1px; }
.quotes-note { margin-top: 0.6rem; font-size: var(--s-1); color: var(--muted); }

.trials { margin-top: 0.9rem; font-size: var(--s1); max-width: 52rem; line-height: 1.4; }
.trials p { margin: 0.4rem 0; }
.trials ul { margin: 0.4rem 0; padding-left: 1.1rem; }
.trials li { margin: 0.3rem 0; }
.attempts { margin-top: 1.2rem; }
.attempt { display: grid; grid-template-columns: 2rem 10rem minmax(0, 1fr); gap: 0 1rem; padding: 0.7rem 0;
           border-bottom: 1px solid var(--rule); align-items: baseline; }
.attempt__i { color: var(--muted); }
.attempt__tier { font-weight: 600; }
.attempt__tier small { display: block; font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.attempt__out { color: var(--muted); }
.attempt--won .attempt__out { color: var(--ink); font-weight: 600; }

.patch { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gutter); margin-top: 1.4rem; align-items: start; }
.patch--none { margin-top: 1.4rem; max-width: 46rem; display: grid; gap: 1.6rem; }
.diff { background: var(--sheet); color: #1E1F1C; border-radius: var(--radius); padding: 1rem 0;
        font-family: var(--f-mono); font-size: 0.84rem; line-height: 1.7; overflow-x: auto; }
.diff div { padding: 0 1.1rem; white-space: pre; }
.diff .hunk { color: #545850; }
.diff .add { background: var(--dye); color: #1E1F1C; box-shadow: inset 3px 0 0 #3E433F; }
.diff .del { color: #545850; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.diff .meta { color: #7B7E75; }
.diff-cap { margin-top: 0.55rem; font-size: var(--s-1); color: var(--muted); }
.theirs { border-top: 1.5px solid var(--water); padding-top: 0.9rem; }
@media (prefers-color-scheme: dark) { .theirs { border-top-color: var(--ink); } }
.theirs h3 { font-size: var(--s1); font-weight: 620; }
.theirs__line { margin-top: 0.7rem; font-family: var(--f-mono); font-size: 0.9rem; background: color-mix(in oklab, var(--water) 9%, var(--paper));
                padding: 0.55rem 0.7rem; border-radius: var(--radius); overflow-x: auto; }
.theirs__when { margin-top: 0.7rem; font-size: var(--s0); color: var(--muted); }
.theirs__then { margin-top: 0.9rem; font-size: var(--s0); color: var(--muted); line-height: 1.45; }
.noverify { max-width: 40rem; color: var(--muted); font-size: var(--s1); line-height: 1.4; }

/* ------------------------------------------------------------------ footer */
.foot { padding: clamp(4rem, 8vw, 6rem) var(--gutter) 2.4rem; color: var(--muted); font-size: var(--s0);
        display: grid; gap: 0.5rem; max-width: 62rem; }
.foot a { text-decoration-color: color-mix(in oklab, var(--muted) 40%, transparent); }
.foot a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 860px) {
  .method { grid-template-columns: 1fr; }
  .method__art { max-width: 30rem; }
  /* on a phone the river comes straight after the headline; the lede follows it */
  .trace { display: flex; flex-direction: column; }
  .trace__head { display: contents; }
  .trace__title { order: 1; }
  .reach { order: 2; }
  .trace__lede { order: 3; margin-top: 1rem; }
  .reach__note { order: 4; }
  .patch { grid-template-columns: 1fr; }
  .attempt { grid-template-columns: 1.6rem 1fr; }
  .attempt__out { grid-column: 2; margin-top: 0.3rem; }
  .rcp-page__art { width: 5rem; }
  .file { grid-template-columns: 1fr auto; }
  .file__cells { grid-column: 1 / -1; margin-top: 0.3rem; }
  .rcp--positive .label { font-size: 17px; }
  .rcp--positive .label-sub { font-size: 13px; }
}

/* The agent's steps: a verbatim log of its own decisions, so mono and unadorned. */
.agent-steps { margin: 1rem 0 0.4rem; max-width: 64rem; }
.agent-steps summary { cursor: pointer; font-size: var(--s1); }
.agent-steps ol { margin: 0.5rem 0 0; padding-left: 2.2rem; font: 400 0.82rem/1.5 var(--f-mono); }
.agent-steps li { margin: 0.15rem 0; }
.agent-steps code { font: inherit; }
.agent-steps__tool { font-weight: 500; }
.agent-steps__out { display: block; color: var(--muted); overflow-wrap: anywhere; }

.watch__list { list-style: none; padding: 0; margin: 0.8rem 0 0; max-width: 52rem; }
.watch__list li { padding: 0.35rem 0; border-top: 1px solid var(--rule, rgba(0,0,0,.12)); font-size: var(--s1); }
.watch__list .num { display: inline-block; min-width: 4.5rem; font-variant-numeric: tabular-nums lining-nums; }