/* ==========================================================================
   FESC workbench: a contract-desk drafting table
   --------------------------------------------------------------------------
   World: drafting paper, ink, hairline specification rules, one accent.
   Colour is reserved for meaning: green = verified, brick = refused, amber =
   out of scope. There is no card grid, no gradient, no glass, no shadow.
   Depth is carried by rule weight and paper tint, the way a printed term sheet
   carries it.
   ========================================================================== */

:root {
  /* Cool drafting paper, not the warm cream reflex: the ground is a technical
     document surface, ink is near-black, and the only structural colour is a
     deep indigo. Green, brick and amber stay reserved for meaning. */
  --paper: #edeff1;
  --paper-2: #f6f7f9;
  --paper-3: #e0e4e9;
  --ink: #14161a;
  --ink-2: #444a54;
  --ink-3: #565c66;
  --rule: #d2d7dd;
  --rule-2: #b6bec7;
  --accent: #1d3a72;
  --accent-strong: #162956;
  --accent-tint: #e2e7f1;
  --verified: #12513c;
  --verified-tint: #e2ede5;
  --refused: #95271c;
  --refused-tint: #f4e3de;
  --warn: #7a5312;
  --warn-tint: #f2e9d6;
  --grid: rgba(30, 58, 115, 0.12);

  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 68ch;
  --gutter: clamp(1rem, 3vw, 2.75rem);
  --step-1: 0.8125rem;
  --step0: 1rem;
  --step1: 1.125rem;
  --step2: 1.375rem;
  --step3: 1.75rem;
  --step4: clamp(2.1rem, 1.3rem + 3.1vw, 3.5rem);
  --radius: 4px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  caret-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

::selection {
  background: var(--accent-tint);
  color: var(--accent-strong);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

p { margin: 0 0 0.85rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-color: var(--accent); }

code, .num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
}

code {
  background: var(--paper-3);
  padding: 0.05em 0.3em;
  border-radius: 2px;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 20;
  background: var(--ink);
  color: var(--paper-2);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius);
  transition: top 140ms ease-out;
}
.skip-link:focus { top: 0.75rem; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--rule-2);
  background: var(--paper-2);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 62px;
  padding-block: 0.65rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.wordmark__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1;
  padding-bottom: 2px;
}

/* The display serif carries a much larger ascender than descender, so its
   cap-height renders above the optical centre of the mark. The 2px is a measured
   optical correction (see the alignment note in DESIGN.md), not a font-size tweak:
   the caps then share the square's vertical axis and the suffix keeps the FESC
   baseline it is set against. */
.wordmark__text {
  display: inline-block;
  transform: translateY(2px);
}

.masthead__nav {
  margin-left: auto;
  display: flex;
  gap: 1.4rem;
  font-size: 0.93rem;
}

.masthead__flag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  background: var(--warn-tint);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
}

@media (max-width: 820px) {
  .masthead__inner { flex-wrap: wrap; gap: 0.6rem 1rem; }
  .masthead__nav { margin-left: 0; order: 3; width: 100%; gap: 1rem; font-size: 0.88rem; }
  .masthead__flag { margin-left: auto; font-size: 0.62rem; letter-spacing: 0.06em; }
}

/* ------------------------------------------------------------------ hero */

.hero {
  border-bottom: 1px solid var(--rule-2);
  background: var(--paper);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3rem);
}

.hero__headline {
  font-size: var(--step4);
  max-width: 22ch;
  margin-bottom: 1rem;
}

.hero__sub {
  font-size: var(--step1);
  color: var(--ink-2);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 1.75rem;
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.5rem;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.fact { display: flex; flex-direction: column; gap: 0.15rem; }
.fact dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.fact dd { margin: 0; font-size: 0.95rem; }

.hero__demo {
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.4vw, 1.6rem);
  align-self: start;
}

.hero__demo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
}

.hero__demo-kicker {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-3);
}

.hero__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  margin: 1rem 0 0.25rem;
  font-family: var(--font-mono);
  font-size: 1.02rem;
}
.hero__identity-eq { color: var(--verified); }
.hero__identity-b { color: var(--accent-strong); }

.evidence-strip {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.evidence-strip__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.evidence-strip__label { color: var(--ink-2); font-size: 0.9rem; }
.evidence-strip__value { text-align: right; }

.hero__demo-foot {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.delta { font-family: var(--font-mono); white-space: nowrap; }
.delta--down { color: var(--verified); }
.delta--up { color: var(--refused); }

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

/* ----------------------------------------------------------------- chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  font-size: 0.83rem;
  line-height: 1.35;
  white-space: nowrap;
}
.chip__label { font-family: var(--font-mono); letter-spacing: 0.03em; }
.chip__meta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.82;
  padding-left: 0.45rem;
  border-left: 1px solid currentColor;
}
.chip--md { padding: 0.45rem 0.75rem; font-size: 0.95rem; }
.chip--sm { padding: 0.12rem 0.45rem; font-size: 0.74rem; }
.chip--verified { color: var(--verified); background: var(--verified-tint); }
.chip--refused { color: var(--refused); background: var(--refused-tint); }
.chip--unsupported { color: var(--warn); background: var(--warn-tint); }
.chip--neutral { color: var(--accent-strong); background: var(--accent-tint); }

.side {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.side--buy { color: var(--accent-strong); }
.side--sell { color: var(--refused); }
.side--residual { color: var(--ink-3); }

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-3);
  border-radius: 2px;
  padding: 0.15rem 0.4rem;
}
.tag--ok { color: var(--verified); background: var(--verified-tint); }
.tag--unavailable { color: var(--refused); background: var(--refused-tint); }
.tag--cheap { color: var(--verified); background: var(--verified-tint); }

/* --------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.72rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), background-color 160ms ease-out,
    color 160ms ease-out, border-color 160ms ease-out;
}
.button:hover { background: var(--paper-3); }
.button:active { transform: translateY(1px); }
.button--primary {
  background: var(--accent);
  border-color: var(--accent-strong);
  color: #fdfcf9;
}
.button--primary:hover { background: var(--accent-strong); }
.button--quiet {
  background: transparent;
  border-color: var(--rule-2);
  color: var(--accent-strong);
}
.button--quiet:hover { background: var(--paper-3); border-color: var(--ink-2); }
.button--small { font-size: 0.85rem; padding: 0.48rem 0.7rem; }
.button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------- surface */

.section {
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--rule);
}
.section:last-of-type { border-bottom: 0; }

.section__title {
  font-size: var(--step3);
  margin-bottom: 0.6rem;
}
.section__lede {
  color: var(--ink-2);
  max-width: 62ch;
}
.section__head { margin-bottom: 1.5rem; }

.surface-head {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem) 1.5rem;
  border-bottom: 1px solid var(--rule-2);
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 0.85rem;
}
.breadcrumb a { color: var(--ink-2); }
.breadcrumb span { padding-inline: 0.3rem; color: var(--rule-2); }

.surface-title { font-size: var(--step4); max-width: 30ch; }
.surface-lede { font-size: var(--step1); color: var(--ink-2); }

.surface-head__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-start;
  justify-content: space-between;
}
.surface-head__copy { flex: 1 1 32ch; min-width: 0; }
.surface-head__verdict {
  flex: 0 1 26rem;
  padding-left: 1rem;
  border-left: 1px solid var(--rule-2);
}
.surface-head__reason {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.runmeta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem 1.5rem;
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.runmeta dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.runmeta dd { margin: 0.15rem 0 0; font-size: 0.92rem; font-family: var(--font-mono); }

/* ---------------------------------------------------------------- tables */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table caption { text-align: left; }
.table th,
.table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.table thead th {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-2);
  background: var(--paper-2);
}
.table td.num,
.table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.table--pieces td:first-child { white-space: nowrap; }
.table .is-zero { color: var(--verified); }
.table .is-nonzero { color: var(--refused); }
.row--mismatch { background: var(--refused-tint); }
.row--unavailable { color: var(--ink-3); }
.row--cheapest td { background: var(--verified-tint); }

.table--form select,
.table--form input { width: 100%; }

.leg-row__index { color: var(--ink-3); }

/* Narrow screens: data tables stop being grids and become labelled rows, so no
   column is ever clipped and nothing needs horizontal scrolling inside a panel. */
@media (max-width: 760px) {
  .table--stack,
  .table--stack tbody,
  .table--stack tr,
  .table--stack td { display: block; width: 100%; }
  .table--stack thead { display: none; }
  .table--stack tr {
    border-bottom: 1px solid var(--rule);
    padding: 0.55rem 0;
  }
  .table--stack td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 40%) minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    border: 0;
    padding: 0.16rem 0;
    text-align: left;
    white-space: normal;
  }
  .table--stack td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-3);
  }
  .table--stack td.num { text-align: left; }
  .table--stack td:empty { display: none; }
}

/* -------------------------------------------------------------- structure */

.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.95fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding-bottom: 2rem;
}
.result-grid__main > .section:first-child { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.result-grid__aside {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 1040px) {
  .result-grid__aside {
    position: sticky;
    top: 1rem;
    align-self: start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-right: 0.35rem;
  }
}
@media (max-width: 1040px) {
  /* Single column, and the reading order changes: a reader on a phone meets the
     verdict, the payoff and the estimated cost before the long evidence tables. */
  .result-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  .result-grid__main,
  .result-grid__aside { display: contents; }
  .result-grid__main > * { order: 10; }
  .result-grid__aside > * { order: 0; }
  .result-grid__aside > .panel--exclusions,
  .result-grid__aside > .panel--cta { order: 20; }
  .result-grid__aside > .panel--chart,
  .result-grid__aside > .panel--cost { order: -1; }
}

.structure + .structure { margin-top: 1.25rem; }
.structure__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-2);
}
.structure__title { font-size: var(--step2); margin: 0; }
.structure__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}

/* ----------------------------------------------------------------- panels */

.panel {
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  padding: 1.05rem 1.1rem 1.15rem;
}
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
}
.panel__title { font-size: var(--step2); margin: 0; }
.panel__meta { margin: 0; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.panel__foot {
  margin: 0.85rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--ink-2);
}
.panel--cta { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.panel--cta .panel__title { font-size: var(--step2); margin-bottom: 0.5rem; }
.panel__actions { margin: 0.85rem 0 0; }

.cost-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
}
.cost-total__value { font-family: var(--font-mono); font-size: 1.6rem; letter-spacing: -0.01em; }
.cost-total__note { font-size: 0.8rem; color: var(--ink-3); }
.cost-total.is-unavailable .cost-total__value { color: var(--refused); font-size: 1.15rem; }
.cost-leg { font-family: var(--font-mono); font-size: 0.82rem; }

/* ---------------------------------------------------------------- proof */

.proof-explanation {
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
.proof-explanation__title { font-size: var(--step1); font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; }
.proof-explanation__lines {
  margin: 0;
  padding-left: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--ink);
}
.proof-explanation__lines li { max-width: 88ch; }

.gate { margin-top: 1.5rem; }
.gate__title {
  font-size: var(--step1);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}
.gate__hint { font-weight: 400; font-size: 0.8rem; color: var(--ink-3); }
.gate__note { margin-top: 0.6rem; font-size: 0.82rem; color: var(--ink-3); }

.match {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.checks__code {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--refused);
  letter-spacing: 0.02em;
}
.match { white-space: nowrap; }
.table--checks td:last-child, .table--checks th:last-child { white-space: nowrap; }
.match--ok { color: var(--verified); }
.match--bad { color: var(--refused); }

.reasons {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  background: var(--paper-2);
}
.reasons--refused { color: var(--refused); background: var(--refused-tint); }
.reasons--unsupported { color: var(--warn); background: var(--warn-tint); }
.reasons__item { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.3rem 0; }
.reasons__item + .reasons__item { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.reasons__code { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.reasons__text { color: color-mix(in srgb, currentColor 78%, var(--ink)); flex: 1 1 24ch; }

/* ----------------------------------------------------------- candidates */

.candidate-list { list-style: none; margin: 0; padding: 0; }
.candidate {
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: 0.9rem 1rem 1rem;
}
.candidate + .candidate { margin-top: 1rem; }
.candidate--refused { border-color: color-mix(in srgb, var(--refused) 40%, var(--rule-2)); }
.candidate--unsupported { border-color: color-mix(in srgb, var(--warn) 40%, var(--rule-2)); }
.candidate--verified { border-color: color-mix(in srgb, var(--verified) 35%, var(--rule-2)); }

.candidate__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.candidate__key {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  background: var(--paper-3);
  font-size: 0.85rem;
}
.candidate__rule { font-size: 0.86rem; color: var(--ink-2); flex: 1 1 20ch; }
.candidate__body { padding-top: 0.7rem; }
.candidate__legs { font-size: 0.84rem; margin-bottom: 0.7rem; word-break: break-word; }
.candidate__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem 1rem;
  margin: 0;
}
.candidate__facts dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
}
.candidate__facts dd { margin: 0.1rem 0 0; font-size: 0.9rem; }
.candidate__chart { margin: 0.85rem 0 0; }

/* -------------------------------------------------------------- chart */

.chart {
  margin: 0;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem 0.4rem;
}
.chart__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: hidden;
}
.chart__grid-line { stroke: var(--grid); stroke-width: 1; }
.chart__axis { stroke: var(--rule-2); stroke-width: 1; }
.chart__axis-zero { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1; }
.chart__tick-label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--ink-3);
}
.chart__breakpoint { stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 2 3; }
.chart__breakpoint-label { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); }
.chart__line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chart__line--target { stroke: var(--ink); stroke-width: 1.9; }
/* Leg curves of the structures shown: the visible difference between two
   representations that share one net payoff. Two tones keep the target's
   decomposition apart from the selected alternative's. */
.chart__line--leg { stroke-width: 1.1; opacity: 0.85; }
.chart__line--leg-target { stroke: var(--ink-3); stroke-dasharray: 1 4; }
.chart__line--leg-selected { stroke: var(--accent); stroke-dasharray: 5 3; opacity: 0.7; }
.chart__line--candidate { stroke: var(--accent); stroke-width: 1.7; stroke-dasharray: 6 4; }
.chart__line--selected { stroke: var(--accent); stroke-width: 2.4; }
.chart__line--explicit { stroke: var(--verified); stroke-width: 1.7; }
.chart__line--refused { stroke: var(--refused); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: 0.75; }
.chart__line--ghost { stroke: var(--rule-2); stroke-width: 1.2; }
.chart__line--zero { stroke: var(--verified); stroke-width: 1.8; }
.chart__line--delta { stroke: var(--refused); stroke-width: 1.7; }
.chart--difference { margin-top: 0.6rem; }
.chart--difference[hidden] { display: none; }
.chart__caption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}
.chart--bars { margin-top: 0.9rem; }
.chart__tick-label--row { font-size: 10.5px; }
.bar { stroke: none; }
.bar--target { fill: var(--ink-2); }
.bar--cheaper { fill: var(--verified); }
.bar--costlier { fill: var(--accent); }
.bar__value { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2); }
.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--ink-2);
}
.chart__legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.chart__swatch { width: 22px; height: 0; border-top-width: 2px; border-top-style: solid; }
.chart__swatch--target { border-top-color: var(--ink); }
.chart__swatch--candidate { border-top-color: var(--accent); border-top-style: dashed; }
.chart__swatch--selected { border-top-color: var(--accent); }
.chart__swatch--explicit { border-top-color: var(--verified); }
.chart__swatch--refused { border-top-color: var(--refused); border-top-style: dashed; }
.chart__swatch--leg-target { border-top-color: var(--ink-3); border-top-style: dotted; }
.chart__swatch--leg-selected { border-top-color: var(--accent); border-top-style: dashed; opacity: 0.7; }
.chart__legend-item--leg { color: var(--ink-3); font-family: var(--font-mono); font-size: 0.74rem; }
.chart__note {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.chart__note strong { color: var(--ink); font-weight: 600; }
.chart__axis-label { font-family: var(--font-ui); font-size: 10px; fill: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }

.chart__line--animate {
  animation: chart-draw 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes chart-draw {
  from { stroke-dashoffset: var(--dash); opacity: 0.15; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chart__line--animate { animation: none; }
}

.residual {
  margin-top: 0.9rem;
  padding: 0.75rem 0.85rem;
  background: var(--paper-3);
  border-radius: var(--radius);
}
.residual__label {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
}
.residual__value { margin: 0.25rem 0 0.35rem; font-size: 1rem; }
.residual__note { margin: 0; font-size: 0.78rem; color: var(--ink-2); }

/* --------------------------------------------------------------- lists */

.steps, .ticks, .example-list, .audience, .why__list { list-style: none; margin: 0; padding: 0; }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 2.5vw, 2.25rem);
  counter-reset: step;
}
.step { border-top: 1px solid var(--rule-2); padding-top: 0.9rem; }
.step__index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-strong);
  margin-bottom: 0.4rem;
}
.step__title { font-size: var(--step2); }
.step__body { color: var(--ink-2); font-size: 0.95rem; }

.why {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
}
.why__lede { color: var(--ink-2); }
.why__item { padding: 0.85rem 0; border-top: 1px solid var(--rule); }
.why__item dt { font-family: var(--font-display); font-size: var(--step2); }
.why__item dd { margin: 0.35rem 0 0; color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 900px) { .why { grid-template-columns: minmax(0, 1fr); } }

.example-list { border-top: 1px solid var(--rule-2); }
.example-list__row { border-bottom: 1px solid var(--rule); }
.example-list__link {
  display: grid;
  grid-template-columns: 9.5rem minmax(10rem, 0.9fr) minmax(12rem, 2fr) 9rem 1.5rem;
  gap: 1rem;
  align-items: baseline;
  padding: 0.8rem 0.75rem;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 150ms ease-out;
}
.example-list__link:hover { background: var(--paper-2); }
.example-list__title { font-family: var(--font-display); font-size: var(--step1); }
.example-list__summary { color: var(--ink-2); font-size: 0.9rem; }
.example-list__expected { font-size: 0.8rem; color: var(--ink-2); text-align: right; }
.example-list__go { color: var(--accent); justify-self: end; transition: transform 150ms ease-out; }
.example-list__link:hover .example-list__go { transform: translateX(3px); }
@media (max-width: 900px) {
  .example-list__link { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .example-list__expected { text-align: left; }
  .example-list__go { display: none; }
}

.audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 2rem;
}
.audience__item { border-top: 1px solid var(--rule-2); padding-top: 0.75rem; }
.audience__item h3 { font-size: var(--step1); }
.audience__item p { font-size: 0.92rem; color: var(--ink-2); margin: 0; }

.ticks { font-size: 0.92rem; color: var(--ink-2); }
.ticks li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.15rem;
  border-bottom: 1px solid var(--rule);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 6px;
  height: 1px;
  background: var(--rule-2);
}
.ticks--wide { max-width: 90ch; }
.ticks--wide li { font-size: 0.95rem; }

/* ------------------------------------------------- spotlight comparison */

.section--spotlight { border-top: 1px solid var(--rule); }
.spotlight {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
}
.spotlight__title { font-family: var(--font-display); font-size: var(--step2); margin-bottom: 0.4rem; }
.spotlight__body { color: var(--ink-2); max-width: 62ch; margin-bottom: 0.75rem; }
.spotlight__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-bottom: 0.85rem; }
.spotlight__count { font-size: 0.85rem; color: var(--ink-2); }
.spotlight__rule { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.spotlight__foot { margin-top: 0.75rem; font-size: 0.9rem; color: var(--ink-2); }
.spotlight__plot { display: grid; gap: 0.5rem; }
.table--reps td.num { font-family: var(--font-mono); font-size: 0.82rem; }

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

.disclosure { margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: 0.75rem; }
.disclosure > summary {
  cursor: pointer;
  font-size: 0.87rem;
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease-out;
}
.disclosure[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
.disclosure__note { font-size: 0.82rem; color: var(--ink-3); margin-top: 0.7rem; }
.disclosure--quotes { margin-top: 1.75rem; }

.notice {
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  margin: 1rem 0;
}
.notice--error { background: var(--refused-tint); border: 1px solid color-mix(in srgb, var(--refused) 40%, transparent); color: var(--refused); }
.notice--warn { background: var(--warn-tint); border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent); color: var(--warn); }
.notice__title { font-size: var(--step1); margin-bottom: 0.35rem; }
.notice__hint { font-size: 0.85rem; }

/* ---------------------------------------------------------------- forms */

.builder { border-top: 1px solid var(--rule-2); }
.builder__block {
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 1.25rem 0 1.5rem;
  margin: 0;
}
.builder__title {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-3);
  margin-bottom: 0.9rem;
  padding: 0;
}
.builder__leg-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.builder__note { font-size: 0.85rem; color: var(--ink-2); margin: 0 0 1rem; max-width: 72ch; }
.builder__note code { font-size: 0.85em; }
.builder__submit { padding-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 1.5rem; }
.builder__submit-note { margin: 0; font-size: 0.82rem; color: var(--ink-3); max-width: 46ch; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem 1.25rem;
}
.field-grid--wide { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.field { margin: 0 0 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; }
.field > label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.field__hint { text-transform: none; letter-spacing: 0; font-size: 0.78rem; color: var(--ink-3); }
.field--choice { border: 0; padding: 0; margin: 0 0 1rem; }
.field--choice legend {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding: 0 0 0.4rem;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  padding: 0.5rem 0.6rem;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); background: #fff; }
textarea { font-family: var(--font-ui); resize: vertical; }
select { cursor: pointer; }
input[disabled] { background: var(--paper-3); color: var(--ink-3); }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0.45rem 1rem; }
.choice { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.choice input { accent-color: var(--accent); }

.interest { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.interest-form { margin-top: 1.25rem; }
.interest-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin: 1rem 0 0; }
.interest-form__note { font-size: 0.8rem; color: var(--ink-3); }
.aside__title { font-size: var(--step2); }
.aside__note { margin-top: 0.85rem; font-size: 0.85rem; color: var(--ink-3); }
@media (max-width: 900px) { .interest { grid-template-columns: minmax(0, 1fr); } }

.receipt {
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: 1.25rem 1.4rem 1.4rem;
  max-width: 60ch;
}
.receipt__list { margin: 0 0 1rem; display: grid; gap: 0.55rem; }
.receipt__list div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0.75rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.5rem; }
.receipt__list dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); }
.receipt__list dd { margin: 0; }
.receipt__note { font-size: 0.82rem; color: var(--ink-3); }
.receipt__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
@media (max-width: 620px) {
  .receipt__list div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

/* ---------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--rule-2);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 0.88rem;
  padding-block: 2rem 1.25rem;
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.5rem 3rem;
}
.footer__statement p { max-width: 66ch; }
.footer__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.footer__list { list-style: none; margin: 0 0 0.85rem; padding: 0; }
.footer__list li { padding: 0.2rem 0; border-bottom: 1px solid var(--rule); }
.footer__link { margin: 0; }
.footer__link a { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer__baseline {
  margin-top: 1.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-3);
}
.footer__baseline p { margin: 0; max-width: none; }
@media (max-width: 820px) { .footer__inner { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- scrollbar */

* {
  scrollbar-color: var(--rule-2) transparent;
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rule-2);
  border-radius: 6px;
  border: 3px solid var(--paper-2);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* Wide data tables scroll inside their panel rather than pushing the page wide. */
.table--pieces,
.table--checks,
.table--cost,
.table--ranking {
  display: block;
  overflow-x: auto;
}
@media (min-width: 761px) {
  .table--pieces,
  .table--checks,
  .table--cost,
  .table--ranking { display: table; overflow: visible; }
}