/* The root — the assay. Page-specific only; the material system is /tokens.css.

   The page is ACHROMATIC until the visitor commits a grade. The first colour to
   appear is their own claim; the second is the ledger's reveal. That is not a
   flourish — it is the identity's rule (the only saturated colour anywhere is
   measurement output) applied to a page whose entire subject is a measurement.

   Two animated moments and no others: the ledger ticking down, and the streaks
   drawing. Both under 1.6s, both surrendered entirely to reduced motion. */

.wrap { max-width:1080px; margin:0 auto; padding:40px 24px 96px; }
.page-head { margin-bottom:3.2rem; }

/* ------------------------------------------------------------------- hero */
.hero h1 { margin:0 0 2rem; max-width:26ch; }
.h-indict, .h-turn { display:block; font-weight:600; letter-spacing:-.01em; line-height:1.1; }
.h-indict { font-size:var(--type-5); }
.h-turn { font-size:var(--type-5); color:var(--muted); margin-top:.3rem; }

.micro {
  font-family:var(--mono); font-size:var(--type-00); text-transform:uppercase;
  letter-spacing:.14em; color:var(--muted); margin:0 0 .7rem;
}
.note { color:var(--muted); font-size:var(--type-0); }
.lead { font-size:var(--type-2); line-height:1.5; max-width:60ch; margin:0; }

/* ------------------------------------------------------- the specimen ---- */
.assay { display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:36px; align-items:start; }
@media (max-width:720px) { .assay { grid-template-columns:1fr; gap:24px; } }

.specimen { margin:0; }
/* Stone, in both themes: the card under assay is machine territory. A hairline
   engineering drawing — no artwork, no photograph, no texture. The stone is a
   value, not a picture of a stone. */
.card-drawing {
  width:100%; height:auto; display:block; background:var(--basanite);
  border:1px solid var(--stone-line); border-radius:2px; padding:10px;
}
.card-edge, .center-frame { fill:none; stroke:var(--chalk); }
.card-edge { stroke-width:1.2; }
.center-frame { stroke-width:1; stroke-dasharray:4 5; opacity:.55; }
.tick line { stroke:var(--chalk); stroke-width:1; opacity:.5; }
.fig { fill:var(--ash); font-family:var(--mono); font-size:11px; letter-spacing:.06em; }
/* Markers stay Chalk always — colour belongs to grades, never to defects. */
.marker { fill:none; stroke:var(--chalk); stroke-width:1.2; }
.marker-n { fill:var(--chalk); font-family:var(--mono); font-size:9px; }
.specimen figcaption { color:var(--muted); font-size:var(--type-0); margin-top:.7rem; }

.findings ul { list-style:none; margin:0 0 1rem; padding:0; }
.findings li {
  display:flex; gap:12px; align-items:baseline;
  padding:.55rem 0; border-bottom:1px solid var(--line); font-size:var(--type-0);
}
.f-face {
  font-family:var(--mono); font-size:var(--type-00); text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted); min-width:5.5em;
}

/* --------------------------------------------------------- the commit ---- */
.commit { margin-top:3rem; }
.commit-ask { font-size:var(--type-2); margin:0 0 1.2rem; max-width:44ch; }

/* A hairline rail with counted cells. Hit areas stay >=44px. */
.scale {
  display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line);
  border-left:1px solid var(--line); max-width:100%;
}
.stop {
  flex:1 1 auto; min-width:52px; min-height:52px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--type-0);
  color:var(--fg); background:none; cursor:pointer;
  border:none; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:0; padding:.4em 0; text-decoration:none;
}
.stop:hover:not(:disabled) { background:var(--bg-up); }
.scale.locked .stop { color:var(--muted); opacity:.4; cursor:default; }
/* On commit the numeral becomes a keylined band chip — the first colour on the
   page, and it is the visitor's own claim rather than ours. */
.scale.locked .stop.called {
  opacity:1; color:var(--fg); background:var(--bg-up);
  outline:1px solid var(--fg); outline-offset:-1px; font-weight:600;
}
.stop:disabled { cursor:default; }

/* The absent 9.5 is a COUNTED, CAPTIONED cell. Broken looks like a missing
   cell; deliberate looks like this — and it is a link, because the sharpest
   opinion in the scale should be the first thing a finger can follow. */
.stop-gap { gap:2px; }
.gap-dash { color:var(--muted); }
.gap-cap { font-size:9px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.stop-gap:hover { background:var(--bg-up); }

/* --------------------------------------------------------- the reveal ---- */
.reveal { margin-top:3.2rem; }
.ledger-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.toggle { display:flex; gap:14px; }
.toggle-btn {
  background:none; border:none; padding:0 0 2px; cursor:pointer;
  font-family:var(--mono); font-size:var(--type-00); text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted); border-bottom:1px solid transparent;
}
.toggle-btn.is-on { color:var(--fg); border-bottom-color:var(--fg); }

.ledger { width:100%; border-collapse:collapse; margin:.8rem 0 1.6rem; font-size:var(--type-0); }
.ledger th {
  text-align:left; font-family:var(--mono); font-weight:400; font-size:var(--type-00);
  text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  padding:6px 12px 6px 0; border-bottom:1px solid var(--line);
}
.ledger td { padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.ledger .num { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ledger th.num { text-align:right; }
.ledger .run { color:var(--fg); }
.ledger .pen { color:var(--muted); }
.ledger tr.binding .pen, .ledger tr.binding .run { font-weight:600; color:var(--fg); }
.ledger tr.binding td { background:var(--bg-up); }
.row-anchor {
  font-family:var(--mono); font-size:var(--type-00); color:var(--muted);
  border-bottom:1px solid var(--line);
}
.row-anchor:hover { color:var(--fg); border-bottom-color:var(--fg); }

/* Row height is fixed across both modes: the row must not move when it becomes
   data, because that is what proves it is the same fact twice. */
.f-cell { min-height:2.6em; }
.as-wire { display:none; font-family:var(--mono); font-size:.9em; word-break:break-word; }
body.wire .as-sentence { display:none; }
body.wire .as-wire { display:inline; }

.tick-in { animation:tick-in .28s ease both; }
@keyframes tick-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* The run-out: two minimums, shown rather than implied. A flawless back cannot
   rescue a damaged front, and that is the rule people argue about most. */
.runout { margin:0 0 1.6rem; font-family:var(--mono); font-size:var(--type-00); }
.runout-row {
  display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;
  padding:.5rem 0; border-bottom:1px solid var(--line);
}
.runout-face { text-transform:uppercase; letter-spacing:.12em; color:var(--muted); min-width:5.5em; }
.runout-regions { display:flex; gap:14px; flex-wrap:wrap; flex:1; }
.runout-region { color:var(--muted); font-variant-numeric:tabular-nums; }
.runout-region.worst { color:var(--fg); font-weight:600; }
.runout-side { font-variant-numeric:tabular-nums; color:var(--fg); }
.runout-row.binding .runout-side { font-weight:600; }
.runout-card {
  margin:.9rem 0 0; font-family:var(--serif); font-size:var(--type-0);
  color:var(--muted); max-width:62ch;
}

.ladder { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 1.2rem; }
.ladder .micro { margin:0; }
.ladder code {
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--type-1);
  background:var(--bg-up); border:1px solid var(--line); border-radius:2px; padding:.15em .5em;
}

.grade-line { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* The coexistence law, applied: a keylined FILL, never text; the numeral
   computed per band; >=19px bold because bronze lands at 3.98; and the number
   repeated in body ink beside it. Colour may speak first, never alone. */
.grade-chip {
  font-family:var(--mono); font-size:2.6rem; font-weight:600; line-height:1;
  display:inline-block; padding:.06em .26em; border-radius:2px;
  border:1px solid var(--fg); font-variant-numeric:tabular-nums;
}
.grade-chip[data-band="gold"]   { background:var(--band-gold);   color:var(--ink); }
.grade-chip[data-band="blue"]   { background:var(--band-blue);   color:var(--chalk); }
.grade-chip[data-band="green"]  { background:var(--band-green);  color:var(--ink); }
.grade-chip[data-band="violet"] { background:var(--band-violet); color:var(--chalk); }
.grade-chip[data-band="bronze"] { background:var(--band-bronze); color:var(--chalk); }
.grade-chip[data-band="wine"]   { background:var(--band-wine);   color:var(--chalk); }
.grade-say { font-family:var(--mono); font-size:var(--type-0); color:var(--fg); }

/* ----------------------------------------------------- the divergence ---- */
/* Two streaks side by side is literally the assayer's method: the sample
   streaked beside the reference needle, read against each other. */
.divergence { margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.streak-row { display:flex; align-items:center; gap:14px; margin:.6rem 0; }
.streak-label {
  font-family:var(--mono); font-size:var(--type-00); letter-spacing:.12em;
  color:var(--muted); min-width:8.5em;
}
.streak-rail { flex:1; height:18px; border-bottom:1px solid var(--line); position:relative; }
.streak {
  display:block; height:18px; width:0; border-radius:2px; border:1px solid var(--fg);
  transition:width .6s ease;
}
.streak[data-band="gold"]   { background:var(--band-gold); }
.streak[data-band="blue"]   { background:var(--band-blue); }
.streak[data-band="green"]  { background:var(--band-green); }
.streak[data-band="violet"] { background:var(--band-violet); }
.streak[data-band="bronze"] { background:var(--band-bronze); }
.streak[data-band="wine"]   { background:var(--band-wine); }
.streak-chip {
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--type-1);
  min-width:2.5em; color:var(--fg);
}
.divergence-say { margin:1.2rem 0 0; font-size:var(--type-1); max-width:60ch; }

/* ---------------------------------------------------------- the bands ---- */
.band { margin-top:5rem; max-width:68ch; }
.band h2 {
  font-size:var(--type-3); font-weight:600; margin:0 0 1rem;
  padding-top:1.6rem; border-top:1px solid var(--line);
}
.band p { margin:0 0 1.1rem; }
.pull {
  font-size:var(--type-2); line-height:1.45; border-left:2px solid var(--line);
  padding-left:1.2rem; margin-top:1.6rem;
}

.receipts { list-style:none; margin:1.6rem 0 0; padding:0; }
.receipts li {
  padding:.8rem 0; border-top:1px solid var(--line); font-size:var(--type-0);
}
.receipts a { font-family:var(--mono); font-size:var(--type-00); color:var(--muted); margin-left:.4em; }

#run-it pre {
  background:var(--basanite); color:var(--stone-fg); border:1px solid var(--stone-line);
  border-radius:2px; padding:14px 16px; overflow-x:auto; margin:0 0 1rem;
}
#run-it code { font-family:var(--mono); font-size:var(--type-0); }

/* -------------------------------------------------------------- print ---- */
@media print {
  :root { --bg:#fff; --bg-up:#fff; --fg:#000; --muted:#444; --line:#00000033; }
  body { background:#fff; color:#000; }
  .site-nav, .scale, .toggle { display:none !important; }
  .card-drawing, #run-it pre { background:#fff !important; border:1px solid #00000033 !important; }
  .card-edge, .center-frame, .marker { stroke:#000 !important; }
  .marker-n, .fig { fill:#000 !important; }
  #run-it code { color:#000 !important; }
  .grade-chip { border-color:#000 !important; }
}