/* ============================================================================
   dagpane — the wake
   ----------------------------------------------------------------------------
   One stylesheet, no framework, no build step, no runtime network request.

   The page is a night sea. There is ONE light on it, the electric wake, and it
   means exactly one thing: THIS PASS REACHED THIS CELL. Everything a pass does
   not reach stays in the dark, because that is the product claim. A second
   colour, port red, appears only where a condition is scored "not met" or a
   bug is named, and never as decoration.

   Dark is not a category default here: the world the user chose is a sea at
   night, and a sea at night is not available in light mode. The palette is
   therefore single, and `color-scheme: dark` tells form controls so.
   ============================================================================ */

@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --sea: #03060b;        /* abyss */
  --sea-2: #061019;      /* fade to dark */
  --sea-3: #0a1422;      /* deep current */
  --trace: #1a2b3f;      /* ghost trace: an edge nobody lit */
  --trace-2: #27405c;    /* a rule's live end */

  --wake: #00e5ff;       /* the one light */
  --wake-2: #66f6ff;     /* radiant, at the centre of a lit cell */
  --wake-dim: #0f8ea3;   /* a lit cell an hour later: memory */
  --wake-wash: rgba(0, 229, 255, 0.12);
  --wake-glow: rgba(0, 229, 255, 0.45);

  --mist: #d8e1e7;       /* body text: 15.5:1 on --sea */
  --mist-2: #a7b6c2;     /* secondary: 9.4:1 */
  --mist-3: #7f909d;     /* muted, labels: 5.6:1 */

  --port: #ff6b5e;       /* not met, not built, the bug: 6.6:1 */
  --port-wash: rgba(255, 107, 94, 0.14);

  /* The comparison chart's two series. */
  --chart-rerun: #4f6379;  /* everything, unlit */
  --chart-dag: #22c6dd;    /* the derived set: the light, one step into memory. The pair
                              passes CVD, normal-vision and contrast checks; the rerun
                              reads gray on purpose (it is everything, unlit). */

  /* A rule is a hairline that brightens at its live end. */
  --live-rule: linear-gradient(90deg, var(--wake-dim), var(--trace) 38%, var(--trace));

  --display: "Jost", "Avenir Next", "Futura", "Century Gothic", ui-sans-serif, sans-serif;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --t-xs: 0.6875rem;
  --t-sm: 0.8125rem;
  --t-md: 1.0625rem;
  --t-lg: 1.1875rem;
  --t-h3: 1.2rem;
  --t-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  --t-hero: clamp(2.1rem, 1.1rem + 3.3vw, 4.25rem);

  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --max: 1180px;

  --s1: 0.5rem;
  --s2: 0.875rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6.5rem;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `.top` is sticky and `.top__in` is 3.9rem tall, so without this every
     in-page jump — the nine nav anchors and the `#main` skip link — parks its
     target underneath the header. The extra 0.7rem is breathing room, not
     padding for its own sake. */
  scroll-padding-top: 4.6rem;
  background: var(--sea);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--sea);
  color: var(--mist);
  font: 400 var(--t-md) / 1.65 var(--sans);
  overflow-x: hidden;
}

/* The sea. A fixed canvas of drifting motes behind everything; JavaScript
   fills it, and without JavaScript the ground is simply dark. */
.sea {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.top,
main,
.foot {
  position: relative;
  z-index: 1;
}

a {
  color: var(--wake);
  text-decoration: none;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration: underline;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--wake);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--wake);
  color: var(--sea);
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--mist);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.08em 0.36em;
  border-radius: 3px;
}

b,
strong {
  font-weight: 700;
  color: #fff;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 0.9rem;
  background: var(--wake);
  color: var(--sea);
  font-weight: 700;
}
.skip:focus {
  top: 1rem;
}

.dim {
  color: var(--mist-3);
}

/* ── Header ────────────────────────────────────────────────────────────── */

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(to bottom, rgba(3, 6, 11, 0.92), rgba(3, 6, 11, 0.7));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  height: 3.9rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: 400 1.15rem var(--display);
  letter-spacing: 0.12em;
  color: var(--mist);
}
.logo svg {
  width: 1.6rem;
  height: 1.6rem;
}
.logo:hover {
  text-decoration: none;
  color: var(--wake-2);
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
}
.nav a {
  color: var(--mist-2);
  white-space: nowrap;
}
.nav a:hover {
  color: var(--wake-2);
  text-decoration: none;
}
.nav__cta {
  color: var(--wake) !important;
  border: 1px solid var(--trace-2);
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
}
.nav__cta:hover {
  border-color: var(--wake);
}
@media (max-width: 720px) {
  .nav__opt {
    display: none;
  }
}
@media (max-width: 560px) {
  .nav a[href="#pass"] {
    display: none;
  }
  .nav {
    gap: 0.7rem;
  }
  .logo {
    letter-spacing: 0.08em;
  }
}

/* ── Hero: the pass ────────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(1.5rem, 3.5vw, 2.5rem);
}
.hero__head {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hero__head h1 {
  max-width: 24ch;
}
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.hero__in > *,
.hero__proof > *,
.split > * {
  min-width: 0;
}
@media (max-width: 960px) {
  .hero__in {
    grid-template-columns: minmax(0, 1fr);
  }
  .field {
    order: -1;
  }
}

h1 {
  margin: 0;
  font: 300 var(--t-hero) / 1.04 var(--display);
  letter-spacing: -0.012em;
  color: #eef4f8;
  text-wrap: balance;
  text-shadow: 0 0 28px rgba(102, 246, 255, 0.14);
}
h1 .lit {
  color: var(--wake-2);
  text-shadow: 0 0 22px var(--wake-glow), 0 0 60px var(--wake-wash);
}
.hero__lead {
  margin: 0 0 var(--s3);
  max-width: 52ch;
  font-size: var(--t-lg);
  color: var(--mist-2);
}

/* The two real controls. They are the app's own controls, drawn in the
   world: a rule of light the thumb travels along, and a select whose open
   state glows at the live end. */
.controls {
  display: grid;
  gap: var(--s2);
  margin: var(--s3) 0 0;
  padding: var(--s2) 0 0;
  border-top: 1px solid;
  border-image: var(--live-rule) 1;
}
.control {
  display: block;
}
.control__name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist-3);
  margin-bottom: 0.55rem;
}
.control__readout {
  font: 700 1rem var(--mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--wake-2);
}
.control__readout::before {
  content: "$";
  color: var(--mist-3);
  font-weight: 400;
  margin-right: 0.15em;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, var(--wake) 0, var(--wake) var(--fill, 50%), var(--trace) var(--fill, 50%), var(--trace) 100%);
  border-radius: 2px;
}
input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--trace);
  border-radius: 2px;
}
input[type="range"]::-moz-range-progress {
  height: 2px;
  background: var(--wake);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--wake-2);
  border: 0;
  box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.14), 0 0 20px var(--wake-glow);
  transition: box-shadow 200ms ease-out;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wake-2);
  border: 0;
  box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.14), 0 0 20px var(--wake-glow);
}
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 7px rgba(0, 229, 255, 0.2), 0 0 32px var(--wake);
}
select {
  width: 100%;
  padding: 0.6rem 2.4rem 0.6rem 0.8rem;
  font: 400 1rem var(--mono);
  color: var(--mist);
  background: var(--sea-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2300e5ff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.7rem center / 1rem;
  border: 1px solid var(--trace-2);
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
select:hover,
select:focus {
  border-color: var(--wake-dim);
}
.control__hint {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--mist-3);
  max-width: 48ch;
}

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.35rem;
  border-radius: 999px;
  font: 500 0.95rem var(--sans);
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  transition: box-shadow 220ms ease-out, background-color 220ms ease-out, border-color 220ms ease-out, transform 220ms ease-out;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.btn--wake {
  background: var(--wake);
  color: var(--sea);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(102, 246, 255, 0.5), 0 6px 30px var(--wake-glow);
}
.btn--wake:hover {
  background: var(--wake-2);
  box-shadow: 0 0 0 1px var(--wake-2), 0 10px 40px var(--wake-glow);
}
.btn--ghost {
  color: var(--mist);
  border-color: var(--trace-2);
}
.btn--ghost:hover {
  border-color: var(--wake-dim);
  color: #fff;
}

/* The field: the graph and the light on it. */
.field {
  margin: 0;
  min-width: 0;
}
.field__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.field__stage {
  position: relative;
  aspect-ratio: 1000 / 600;
  width: 100%;
}
.field__cue {
  display: none;
}
@media (max-width: 700px) {
  /* A graph narrower than 600px cannot label eleven cells legibly, so it
     keeps its width and scrolls inside its own frame, with the frame's right
     edge fading into the sea and a cue saying what is past it. */
  .field__scroll {
    position: relative;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .field__stage {
    min-width: 600px;
  }
  .field__cue {
    display: block;
    position: sticky;
    left: 0;
    margin: 0;
    font: 400 var(--t-xs) var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wake-dim);
  }
}
.field__sparks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.graph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: var(--mono);
}
.graph .heights text {
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--mist-3);
  text-anchor: middle;
}
.graph .edges path,
.diamond .edges path {
  fill: none;
  stroke: var(--trace);
  stroke-width: 1.5;
  transition: stroke 600ms ease-out, opacity 600ms ease-out;
}
.graph .edges path.lit,
.diamond .edges.lit path {
  stroke: var(--wake-dim);
}
.node .halo {
  fill: var(--wake);
  opacity: 0;
  transition: opacity 700ms ease-out, r 700ms ease-out;
}
.node .dot {
  fill: var(--trace-2);
  transition: fill 500ms ease-out, r 500ms ease-out;
}
.node .lbl {
  font-size: 19px;
  fill: var(--mist-2);
  transition: fill 500ms ease-out;
}
.node .kind {
  font-size: 17px;
  fill: var(--mist-3);
  letter-spacing: 0.04em;
}
.node .pane {
  fill: none;
  stroke: var(--trace-2);
  stroke-width: 1.2;
  stroke-dasharray: 2 3;
  transition: stroke 500ms ease-out;
}

/* Outcomes. The transitions run only when the state changes, so the
   README's epoch 2 renders lit at load without a flash. */
.node.is-dark .dot {
  fill: var(--trace-2);
}
.node.is-dark .lbl {
  fill: var(--mist-3);
}
.node.is-set .dot {
  fill: #fff;
}
.node.is-set .halo {
  opacity: 0.22;
}
.node.is-set .lbl {
  fill: #fff;
}
.node.is-changed .dot {
  fill: var(--wake-2);
  filter: drop-shadow(0 0 6px var(--wake));
}
.node.is-changed .halo {
  opacity: 0.28;
}
.node.is-changed .lbl {
  fill: var(--wake-2);
}
.node.is-changed .pane {
  stroke: var(--wake);
  stroke-dasharray: none;
}
.node.is-same .dot {
  fill: var(--wake-dim);
}
.node.is-same .halo {
  opacity: 0.08;
}
.node.is-same .lbl {
  fill: var(--mist);
}
.node.is-reused .dot {
  fill: var(--trace-2);
  stroke: var(--wake-dim);
  stroke-width: 2;
}
.node.is-reused .lbl {
  fill: var(--mist-2);
}
/* A cell an interaction is reaching right now: the moment of ignition. */
.node.is-igniting .dot {
  fill: #fff;
  filter: drop-shadow(0 0 10px var(--wake-2));
}
.node.is-igniting .halo {
  opacity: 0.5;
}

.field__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: var(--s2) 0 0;
  padding: 0.7rem 0;
  border-top: 1px solid;
  border-image: var(--live-rule) 1;
  font: 400 var(--t-sm) var(--mono);
  color: var(--mist-2);
}
.field__stats b {
  color: var(--wake-2);
}
.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mist-3);
}
.legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.sw {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.sw--changed {
  background: var(--wake-2);
  box-shadow: 0 0 8px var(--wake);
}
.sw--same {
  background: var(--wake-dim);
}
.sw--reused {
  background: var(--trace-2);
  box-shadow: 0 0 0 1.5px var(--wake-dim);
}
.sw--dark {
  background: var(--trace-2);
}
.sw--pane {
  background: transparent;
  border: 1.2px dashed var(--trace-2);
  width: 11px;
  height: 11px;
}
.sw--port {
  background: var(--port);
  box-shadow: 0 0 10px var(--port);
}

/* Under the field: the transcript and the seven panes. */
.hero__proof {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 960px) {
  .hero__proof {
    grid-template-columns: minmax(0, 1fr);
  }
}
.transcript__k,
.panes__k {
  margin: 0 0 var(--s2);
  font-size: var(--t-sm);
  color: var(--mist-2);
}
.term {
  margin: 0;
  padding: 1rem 0 0.4rem;
  overflow-x: auto;
  border-top: 1px solid;
  border-image: var(--live-rule) 1;
  background: transparent;
  font: 400 0.82rem / 1.62 var(--mono);
  color: var(--mist);
  tab-size: 4;
}
.term .p {
  color: var(--wake-dim);
}
.term .c {
  color: var(--mist-3);
}
.term .k {
  color: var(--wake-2);
  font-weight: 700;
}
.term .s {
  color: var(--mist-3);
}
.term--toml {
  color: var(--mist-2);
}
.note--port {
  padding-left: 1rem;
  border-left: 1px solid var(--port);
}
.note {
  margin: var(--s2) 0 0;
  font-size: var(--t-sm);
  color: var(--mist-3);
  max-width: 68ch;
}

.panes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px;
}
.pn {
  background: transparent;
  box-shadow: 0 0 0 0.5px var(--trace);
  padding: 0.9rem 1rem;
  min-width: 0;
  transition: box-shadow 420ms ease-out, background-color 420ms ease-out;
}
.pn__v {
  display: block;
  font: 700 1.15rem var(--mono);
  color: var(--mist-2);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pn__l {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist-3);
}
.pn--sent .pn__v {
  color: var(--wake-2);
}
.pn--sent {
  box-shadow: inset 0 0 0 1px var(--wake-dim);
}
.pn--flash {
  background: var(--wake-wash);
  box-shadow: inset 0 0 0 1.5px var(--wake), 0 0 24px var(--wake-wash);
}

/* ── Bands ─────────────────────────────────────────────────────────────── */

.band {
  border-top: 1px solid;
  border-image: var(--live-rule) 1;
}
.band--deep {
  background: linear-gradient(to bottom, rgba(6, 16, 25, 0.55), rgba(3, 6, 11, 0));
}
.band__in {
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}
h2 {
  margin: 0 0 var(--s3);
  font: 300 var(--t-h2) / 1.1 var(--display);
  letter-spacing: -0.01em;
  color: #eef4f8;
  text-wrap: balance;
  max-width: 24ch;
}
h3 {
  margin: 0 0 0.4rem;
  font: 600 var(--t-h3) / 1.3 var(--sans);
  color: #fff;
  text-wrap: balance;
}
.lead {
  margin: 0 0 var(--s4);
  max-width: 68ch;
  font-size: var(--t-lg);
  color: var(--mist-2);
}
.lead b {
  color: #fff;
  font-weight: 600;
}
.prose {
  max-width: 68ch;
  margin-top: var(--s4);
}
.prose p {
  margin: 0 0 1.1rem;
}
.sub {
  margin-top: var(--s5);
  margin-bottom: var(--s3);
  font: 300 1.6rem / 1.2 var(--display);
  color: #eef4f8;
}

/* Why: manifest beside mechanisms. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mech {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mech;
}
.mech li {
  position: relative;
  padding: 0 0 var(--s3) 5.2rem;
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--trace);
}
.mech li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}
.mech li::before {
  counter-increment: mech;
  content: "ADR-000" counter(mech);
  position: absolute;
  left: 0;
  top: 0.35rem;
  color: var(--mist-3);
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.06em;
}
.mech p {
  margin: 0;
  color: var(--mist-2);
}

/* ── The DAG, explained rather than asserted ───────────────────────────────
   The diamond figure above states that the join runs once and never on a
   mixture. This is where that is shown: the same graph under the obvious
   scheduler and under height order, with the arithmetic that makes the wrong
   answer checkable rather than a matter of trust.

   --port is the page's one warm colour and it already means "not met, not
   built, the bug". A glitched evaluation is the bug, so it borrows that and
   nothing new is invented. The teal still means only "this pass reached this
   cell". */

.dag {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--trace);
}

.dag__h {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--mist);
  margin: 0 0 var(--s2);
}

.dag__h4 {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--wake-2);
  margin: var(--s4) 0 var(--s2);
}

.dag__lead,
.dag__after {
  max-width: 68ch;
  color: var(--mist-2);
  margin: 0 0 var(--s3);
}

.dag__after b {
  color: var(--mist);
  font-weight: 600;
}

/* Two schedulers, same graph. Side by side so the contrast is the content;
   stacked below 46rem, where side-by-side would shrink both to unreadable. */
.dag__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin: var(--s3) 0 var(--s4);
  /* Each column takes its own height. Stretched to match, the shorter one reads
     as an empty box; at its natural height it reads as what it is — the same
     graph reaching the same answer in half the steps. */
  align-items: start;
}

@media (max-width: 46rem) {
  .dag__grid { grid-template-columns: 1fr; }
}

.ord {
  padding: var(--s3);
  border: 1px solid var(--trace);
  background: var(--sea-2);
}

/* The good column carries the page's light; the bad one stays unlit, because
   an unlit thing here means exactly what it means everywhere else. */
.ord--good { border-color: var(--trace-2); }

.ord__h {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 0.35rem;
  color: var(--mist);
}

.ord--good .ord__h { color: var(--wake-2); }

.ord__sub {
  margin: 0 0 var(--s2);
  font-size: var(--t-sm);
  color: var(--mist-3);
}

.ord__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ord;
}

.ord__steps li {
  position: relative;
  counter-increment: ord;
  padding: 0.5rem 0 0.5rem 2.1rem;
  border-top: 1px solid var(--trace);
  font-size: var(--t-sm);
  color: var(--mist-2);
}

.ord__steps li::before {
  content: counter(ord);
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 1.4rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--mist-3);
  text-align: right;
}

/* The one step that produced a value the app was never in. */
.ord__steps li.is-wrong {
  color: var(--mist);
  background: var(--port-wash);
  margin: 0 calc(var(--s3) * -1);
  padding-left: calc(2.1rem + var(--s3));
  padding-right: var(--s3);
}

.ord__steps li.is-wrong::before {
  left: var(--s3);
  color: var(--port);
}

.ord__steps li.is-wrong code { color: var(--port); }

.ord__val {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--mist-3);
}

.ord__steps li.is-wrong .ord__val { color: var(--port); }

.ord__tally {
  margin: var(--s2) 0 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--trace);
  font-size: var(--t-sm);
  color: var(--mist-2);
}

.ord--bad .ord__tally { color: var(--port); }
.ord--good .ord__tally { color: var(--wake-2); }

.dag .term { margin-top: var(--s2); }
.diamond {
  margin: var(--s5) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--trace);
}
.diamond svg {
  width: min(100%, 640px);
  height: auto;
  display: block;
  font-family: var(--mono);
}
.diamond .lbl {
  font-size: 13px;
  fill: var(--mist-2);
}
.diamond .kind {
  font-size: 12px;
  fill: var(--mist-3);
  letter-spacing: 0.06em;
}
.diamond figcaption {
  margin-top: var(--s2);
  font-size: var(--t-sm);
  color: var(--mist-3);
  max-width: 60ch;
}

/* Where it comes in: the stack, the comparison, the headroom. */
.stack {
  display: grid;
  gap: 0;
  border-top: 1px solid;
  border-image: var(--live-rule) 1;
  font-size: var(--t-sm);
}
.stack__row {
  display: grid;
  grid-template-columns: 9rem 1fr 1.1fr 2.2fr 1.2fr;
  gap: var(--s3);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--trace);
  color: var(--mist-2);
}
.stack__row--head {
  padding: 0.6rem 0;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-3);
}
.stack__row--head .stack__lit {
  color: var(--wake-2);
}
.stack__k {
  color: #fff;
  font-weight: 600;
}
.stack__k small {
  display: block;
  font-weight: 400;
  font-size: var(--t-xs);
  color: var(--mist-3);
}
.stack__row--after .stack__lit {
  color: var(--mist);
}
.stack__row--after .stack__lit b {
  color: var(--wake-2);
}
@media (max-width: 860px) {
  .stack__row {
    grid-template-columns: 1fr 1fr;
  }
  .stack__row--head {
    display: none;
  }
  .stack__k {
    grid-column: 1 / -1;
  }
  .stack__row span[role="cell"] {
    position: relative;
    padding-top: 1rem;
  }
  .stack__row span[role="cell"]::before {
    content: attr(data-h);
    position: absolute;
    top: 0;
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mist-3);
  }
}

/* The comparison chart. Two series: the rerun is everything, unlit; the
   dagpane bar is the light, because the light means "reached". Marks are
   thin, values ride the tips in text ink, a legend is always present. */
.chart {
  margin: 0;
  padding-top: var(--s2);
  border-top: 1px solid;
  border-image: var(--live-rule) 1;
}
.chart__t {
  margin: 0 0 var(--s2);
  color: #fff;
  font-weight: 600;
}
.chart__legend {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: var(--t-sm);
  color: var(--mist-2);
}
.chart__legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.sw--rerun {
  background: var(--chart-rerun);
  border-radius: 2px;
  width: 12px;
  height: 12px;
}
.sw--dag {
  background: var(--chart-dag);
  border-radius: 2px;
  width: 12px;
  height: 12px;
}
.chart__group {
  margin-bottom: var(--s3);
}
.chart__k {
  margin: 0 0 0.5rem;
  font-size: var(--t-sm);
  color: var(--mist-2);
}
.bars {
  display: grid;
  gap: 0.55rem;
  max-width: 720px;
  /* The value rides the tip of the bar, outside it; the padding is where a
     full-width bar's value lands, so nothing leaves the column. */
  padding-right: 3.5rem;
}
.bar {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s2);
  row-gap: 2px;
  align-items: center;
}
/* After the base rule, not before it: a media query adds no specificity, so
   while this sat above `.bar` the 8.5rem always won and the narrow-screen
   column never applied — DESIGN.md's `560px` line described a narrowing that
   did not happen. */
@media (max-width: 560px) {
  .bar {
    grid-template-columns: 6.5rem 1fr;
  }
}
.bar__l {
  grid-row: 1 / span 2;
  font-size: var(--t-sm);
  color: var(--mist-2);
}
.bar__t {
  --v: 100%;
  position: relative;
  display: block;
  height: 14px;
  width: var(--v);
  border-radius: 0 4px 4px 0;
  box-shadow: inset 2px 0 0 var(--sea);
}
.bar__t--rerun {
  background: var(--chart-rerun);
}
.bar__t--dag {
  background: var(--chart-dag);
}
.bar__t b {
  position: absolute;
  left: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  font: 700 var(--t-sm) var(--mono);
  color: var(--mist);
  white-space: nowrap;
}
.chart__table {
  margin-top: var(--s2);
  font-size: var(--t-sm);
  color: var(--mist-2);
}
.chart__table summary {
  cursor: pointer;
  color: var(--mist-2);
}
.chart__table summary:hover {
  color: #fff;
}
.cmp--num {
  min-width: 0;
  margin-top: var(--s2);
}
.cmp--num td.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--mist);
}
.cmp--num thead th:nth-child(n+3) {
  text-align: right;
}
@media (max-width: 720px) {
  .cmp--num tr,
  .cmp--num th,
  .cmp--num td {
    display: table-row;
  }
  .cmp--num th,
  .cmp--num td {
    display: table-cell;
    padding: 0.5rem 0.6rem 0.5rem 0;
    border-bottom: 1px solid var(--trace);
  }
  .cmp--num thead {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }
  .cmp--num tr {
    padding: 0;
    border-bottom: 0;
  }
}

/* Workflow: before, and after. */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.flow > * {
  min-width: 0;
}
@media (max-width: 900px) {
  .flow {
    grid-template-columns: minmax(0, 1fr);
  }
}
.flow h3 {
  margin-bottom: var(--s2);
  font: 300 1.5rem / 1.2 var(--display);
  color: #eef4f8;
}
.flow__before p {
  margin: 0 0 0.9rem;
  color: var(--mist-2);
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  padding: 0.9rem 0 0.9rem 0;
  border-top: 1px solid var(--trace);
}
.steps li:first-child {
  border-top: 1px solid;
  border-image: var(--live-rule) 1;
}
.steps__cmd {
  font: 700 0.9rem var(--mono);
  color: #fff;
}
.steps__cmd .p {
  color: var(--wake-dim);
  font-weight: 400;
}
.steps p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--mist-2);
  max-width: 62ch;
}
.steps p b {
  color: var(--mist);
  font-weight: 600;
}
.flow__still {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--trace);
  max-width: 68ch;
  font-size: var(--t-sm);
  color: var(--mist-3);
}

/* The field: a comparison table, honest column last. */
.tw {
  overflow-x: auto;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
}
.cmp {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.cmp th,
.cmp td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.2rem 1rem 0;
  border-bottom: 1px solid var(--trace);
  color: var(--mist-2);
}
.cmp thead th {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-3);
  font-weight: 500;
  border-bottom-color: var(--trace-2);
}
.cmp tbody th {
  font-family: var(--mono);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  font-size: 0.9rem;
}
.cmp tbody th .dim {
  font-weight: 400;
  font-size: var(--t-xs);
}
@media (max-width: 720px) {
  .cmp {
    min-width: 0;
  }
  .cmp thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .cmp tr,
  .cmp th,
  .cmp td {
    display: block;
  }
  .cmp tr {
    padding: 1rem 0;
    border-bottom: 1px solid var(--trace);
  }
  .cmp th,
  .cmp td {
    padding: 0.25rem 0;
    border-bottom: 0;
  }
  .cmp tbody th {
    white-space: normal;
  }
  .cmp td:last-child {
    margin-top: 0.4rem;
  }
}
.cmp .vs {
  color: var(--wake-2);
}
.cmp .not {
  color: var(--mist);
}
.cmp i {
  color: var(--mist);
}

/* Checked: the oracle field. */
.oracle {
  margin: 0;
}
.oracle__svg {
  display: block;
  width: 100%;
  height: clamp(72px, 10vw, 110px);
}
.oracle figcaption {
  display: grid;
  grid-template-columns: 1fr auto 2fr;
  gap: var(--s3);
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--trace);
  font-size: var(--t-sm);
  color: var(--mist-2);
}
@media (max-width: 760px) {
  .oracle figcaption {
    grid-template-columns: 1fr;
  }
}
.oracle figcaption b {
  font-family: var(--mono);
  color: #fff;
}
.found {
  margin: var(--s4) 0 0;
  max-width: 68ch;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--trace);
}
.found__k {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  color: #fff;
  font-weight: 600;
}
.found p:last-child {
  margin: 0;
  color: var(--mist-2);
}
/* Honestly: the four conditions. */
.cond {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: cond;
}
.cond > li {
  padding: var(--s3) 0;
  border-top: 1px solid var(--trace);
  max-width: 76ch;
}
.cond > li:last-child {
  border-bottom: 1px solid var(--trace);
}
.cond__head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.cond__head h3 {
  margin: 0;
}
.grade {
  flex: none;
  font: 700 var(--t-xs) var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
}
.grade--no {
  color: var(--port);
  background: var(--port-wash);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 94, 0.35);
}
.grade--part {
  color: var(--mist);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--trace-2);
}
.cond p {
  margin: 0 0 0.6rem;
  color: var(--mist-2);
}
.cond__turn {
  color: var(--mist) !important;
  padding-left: 1rem;
  border-left: 1px solid var(--wake-dim);
}
.nots {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 76ch;
  display: grid;
  gap: 0.9rem;
}
.nots li {
  padding-left: 1.2rem;
  position: relative;
  color: var(--mist-2);
}
.nots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--port);
  box-shadow: 0 0 8px var(--port);
}

/* Run. */
.layout {
  margin-top: var(--s4);
}
.layout dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s3);
}
.layout dt {
  margin-bottom: 0.3rem;
}
.layout dt code {
  color: #fff;
  background: none;
  padding: 0;
  font-size: 0.95rem;
}
.layout dd {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--mist-2);
}
#run .acts {
  margin-top: var(--s4);
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--trace);
}
.foot__in {
  padding: var(--s4) var(--gutter) var(--s5);
  font-size: var(--t-sm);
  color: var(--mist-2);
}
.foot p {
  margin: 0 0 0.4rem;
}