/* components/scaling.css — scoped under .ve-scaling */
.ve-scaling { display: grid; gap: var(--s6); min-width: 0; }
.ve-scaling .ve-figure { margin: 0; }

.ve-scaling .scl-lead {
  margin: var(--s1) 0 0;
  max-width: var(--measure);
  font-size: var(--fs-m);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Guess-first card */
.ve-scaling .scl-guess {
  margin-top: var(--s2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2) var(--s4);
  align-items: center;
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r2);
  background: var(--surface-2);
}
.ve-scaling .scl-guess__q { margin: 0; font-size: var(--fs-s); line-height: 1.5; color: var(--ink); }
.ve-scaling .scl-guess__q .ve-label { margin-right: var(--s2); }
.ve-scaling .scl-guess__btns { display: flex; gap: var(--s2); }
.ve-scaling .scl-guess__btns .ve-btn { min-width: 56px; font-size: var(--fs-s); letter-spacing: 0; }
.ve-scaling .scl-guess__btns .ve-btn[data-state="right"] { background: var(--surface-2); border-color: var(--ink); color: var(--ink); font-weight: 600; }
.ve-scaling .scl-guess__btns .ve-btn[data-state="wrong"] { text-decoration: line-through; color: var(--ink-3); }
.ve-scaling .scl-guess__a { grid-column: 1 / -1; margin: 0; font-size: var(--fs-s); line-height: 1.5; color: var(--ink-2); }
.ve-scaling .scl-guess__a:empty { display: none; }
.ve-scaling .scl-guess__a b { color: var(--ink); }

/* Two-panel stage */
.ve-scaling .scl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  gap: var(--s4) var(--s5);
  min-width: 0;
}
.ve-scaling .scl-col { min-width: 0; display: grid; gap: var(--s2); align-content: start; }
.ve-scaling .scl-col--ladder { border-right: 1px solid var(--rule); padding-right: var(--s4); }
/* plate 5b keeps the ladder-style column on the right */
.ve-scaling .scl-col--plot + .scl-col--ladder, .ve-scaling .scl-grid--b .scl-col--ladder { border-right: 0; padding-right: 0; border-left: 1px solid var(--rule); padding-left: var(--s4); }
.ve-scaling .scl-col--plot > .scl-sub { font-size: var(--fs-s); color: var(--ink-2); max-width: 60ch; }
.ve-scaling .scl-panelhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.ve-scaling .scl-plotbox, .ve-scaling .scl-ladbox { position: relative; min-width: 0; }
.ve-scaling .scl-plotbox canvas { cursor: crosshair; }

/* Hover / tap tip on a plot */
.ve-scaling .scl-tip {
  position: absolute; z-index: 5; pointer-events: none;
  max-width: min(380px, calc(100% - 8px));
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  padding: var(--s2) var(--s3);
  font: 400 var(--fs-xs)/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.ve-scaling .scl-tip[hidden] { display: none; }
.ve-scaling .scl-tip__h { color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.ve-scaling .scl-tip table { border-collapse: collapse; }
.ve-scaling .scl-tip td { padding: 0 var(--s2) 0 0; white-space: nowrap; }
.ve-scaling .scl-tip__f { margin-top: 2px; color: var(--ink-3); }

/* Readouts and the plain-words line */
.ve-scaling .scl-readouts { flex: 1 1 100%; gap: var(--s3) var(--s6); }
.ve-scaling .scl-readouts .ve-readout { min-width: 9.5em; }
.ve-scaling .scl-words {
  flex: 1 1 100%;
  margin: 0;
  max-width: var(--measure);
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--ink-2);
}
.ve-scaling .scl-words b { color: var(--ink); font-weight: 650; }

/* The why-strip: sampler log-odds ÷ model log-odds = c */
.ve-scaling .scl-why {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s2) var(--s3);
  align-items: stretch;
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
}
.ve-scaling .scl-why__cell { display: grid; gap: 2px; align-content: start; min-width: 0; padding: var(--s2) var(--s3); border-radius: var(--r2); background: var(--surface-2); }
.ve-scaling .scl-why__cell--res { background: var(--highlight-wash); border-left: 3px solid var(--highlight); align-self: start; }
.ve-scaling .scl-why__cell--res .scl-why__eq { color: var(--highlight-ink); }
.ve-scaling .scl-why__eq { font-family: var(--font-text); font-size: var(--fs-l); line-height: 1.3; color: var(--ink); white-space: nowrap; }
.ve-scaling .scl-why__eq sup { font-size: 0.62em; }
.ve-scaling .scl-why__note { font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-3); }
.ve-scaling .scl-why__op { align-self: center; font-family: var(--font-text); font-size: var(--fs-xl); color: var(--ink-3); }

/* Level strip under the staircase */
.ve-scaling .scl-strip { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.ve-scaling .scl-strip__cell {
  appearance: none; cursor: pointer; min-width: 0;
  border: 1px solid var(--rule); border-radius: var(--r1);
  background: var(--surface); color: var(--ink-2);
  padding: 4px 2px; display: grid; gap: 1px; justify-items: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
.ve-scaling .scl-strip__cell:hover { border-color: var(--ink-3); }
.ve-scaling .scl-strip__cell[data-on="true"] { background: var(--surface-2); border-color: var(--ink); color: var(--ink); }
.ve-scaling .scl-strip__b { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.ve-scaling .scl-strip__k { font-size: var(--fs-s); font-weight: 500; white-space: nowrap; }

@media (max-width: 760px) {
  .ve-scaling .scl-grid { grid-template-columns: minmax(0, 1fr); }
  .ve-scaling .scl-col--ladder, .ve-scaling .scl-col--plot + .scl-col--ladder { border-left: 0; border-right: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: var(--s3); }
  .ve-scaling .scl-col--plot + .scl-col--ladder { border-bottom: 0; padding-bottom: 0; border-top: 1px solid var(--rule); padding-top: var(--s3); }
  .ve-scaling .scl-why { grid-template-columns: minmax(0, 1fr); }
  .ve-scaling .scl-why__op { justify-self: center; line-height: 1; }
}
@media (max-width: 560px) {
  .ve-scaling .scl-guess { grid-template-columns: minmax(0, 1fr); }
  .ve-scaling .scl-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ve-scaling .scl-readouts { gap: var(--s3) var(--s4); }
  .ve-scaling .scl-readouts .ve-readout { min-width: 0; flex: 1 1 40%; }
  .ve-scaling .scl-lead { font-size: var(--fs-s); }
}
.ve-scaling .scl-nc { text-transform: none; letter-spacing: 0; font-family: var(--font-text); font-style: italic; font-size: 1.15em; }
.ve-scaling .scl-ctl { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: var(--s2); }
.ve-scaling .scl-sel { margin: 0; font: 500 var(--fs-xs)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); min-height: 1.4em; }
.ve-scaling .scl-sub { margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-3); }
.ve-scaling .scl-sub[hidden] { display: none; }
.ve-scaling .scl-sub--dim { color: var(--ink-2); font-weight: 600; }
.ve-scaling .scl-col[data-dim="true"] .scl-ladbox { opacity: 0.4; transition: opacity .2s; }
.ve-scaling .scl-guess__now[hidden] { display: none; }
.ve-scaling .scl-col .ve-legend { font-size: var(--fs-xs); }
.ve-scaling .scl-why__lines { display: grid; grid-template-columns: auto 1fr; gap: 1px var(--s3); margin-top: 2px; font-size: var(--fs-s); line-height: 1.45; color: var(--ink-2); }
.ve-scaling .scl-why__lines > span:nth-child(odd) { font-size: var(--fs-xs); color: var(--ink-3); align-self: center; }
.ve-scaling .scl-why__lines > span:nth-last-child(-n+2) { border-top: 1px solid var(--rule); padding-top: 2px; color: var(--ink); }
.ve-scaling .scl-why__lines sup { font-size: 0.7em; }
.ve-scaling .scl-cmp { color: var(--ink-3); }
.ve-scaling .scl-cmp:empty { display: none; }
.ve-scaling .scl-how { margin-top: var(--s2); }
.ve-scaling .scl-how summary { min-height: 32px; box-sizing: border-box; padding-block: 7px; line-height: 18px; cursor: pointer; color: var(--ink-2); font-size: var(--fs-xs); font-family: var(--font-mono); }
.ve-scaling .scl-how[open] summary { margin-bottom: var(--s1); }
.ve-scaling .ve-key__mark[data-mark="wash"]::before { background: color-mix(in srgb, var(--ink-3) 22%, transparent); }
.ve-scaling .ve-key__mark[data-mark="ghost"]::before { left: 5px; right: 5px; height: 11px; border-radius: 50%; background: transparent; border: 1.75px dashed currentColor; }
.ve-scaling .scl-grid--b { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
@media (max-width: 760px) { .ve-scaling .scl-grid--b { grid-template-columns: minmax(0, 1fr); } }

/* ======================================================================
   v2: the figure dominates; sentences move to the
   chapter's "Reading the figure" card (mirrored from these hidden nodes),
   the derivation to the chapter's math drawer. Nothing here is deleted.
   ====================================================================== */
.ve-scaling--v2 { gap: 0; }
.ve-scaling--v2 .scl-sub--a,
.ve-scaling--v2 .scl-sub--s,
.ve-scaling--v2 .scl-panelhead--lad,
.ve-scaling--v2 .scl-why,
.ve-scaling--v2 .scl-strip,
.ve-scaling--v2 .scl-words,
.ve-scaling--v2 .scl-ro--lob,
.ve-scaling--v2 .scl-ro--aux .ve-readout__sub,
.ve-scaling--v2 .scl-ro--lo { display: none; }

/* sub-plate labels: small caps, like the plate bar */
.ve-scaling--v2 .ve-figure__head { margin: 0 0 4px; }
.ve-scaling--v2 .ve-figure__plate { font: 560 0.875rem/1.2 var(--font-text); font-variant-caps: all-small-caps; letter-spacing: .09em; text-transform: none; color: var(--ink-3); }

/* guess first: one ruled line, the question in italic serif, hairline pills */
.ve-scaling--v2 .scl-guess {
  margin: 6px 0 4px; padding: 12px 0; border: 0; border-radius: 0; background: none;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px;
}
.ve-scaling--v2 .scl-guess__q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.ve-scaling--v2 .scl-guess__k { font: 560 0.875rem/1.2 var(--font-text); font-variant-caps: all-small-caps; letter-spacing: .09em; color: var(--ink-3); }
.ve-scaling--v2 .scl-guess__s { font: italic 400 1.0625rem/1.4 var(--font-text); color: var(--ink); }
.ve-scaling--v2 .scl-guess__btns { gap: 8px; }
.ve-scaling--v2 .scl-guess__btns .ve-btn {
  min-width: 52px; min-height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: none; color: var(--ink-2);
  font: 450 0.8125rem/1 var(--font-ui); font-variant-numeric: tabular-nums;
}
.ve-scaling--v2 .scl-guess__btns .ve-btn:hover { border-color: var(--ink); color: var(--ink); }
.ve-scaling--v2 .scl-guess__btns .ve-btn[data-state="right"] { background: none; border-color: var(--highlight); color: var(--highlight-ink); font-weight: 600; }
.ve-scaling--v2 .scl-guess__btns .ve-btn[data-state="wrong"] { color: var(--ink-3); border-color: var(--rule); }
.ve-scaling--v2 .scl-guess__a { font: 400 0.9375rem/1.55 var(--font-text); color: var(--ink-2); max-width: 46rem; }
.ve-scaling--v2 .scl-guess__a b { font-weight: 600; }
@media (pointer: coarse) { .ve-scaling--v2 .scl-guess__btns .ve-btn { min-height: 40px; } }

/* stage */
.ve-scaling--v2 .scl-grid { gap: 12px 32px; margin-top: 12px; }
.ve-scaling--v2 .scl-col { gap: 6px; }
.ve-scaling--v2 .scl-col--ladder { padding-right: 24px; }
.ve-scaling--v2 .scl-grid--b .scl-col--ladder { padding-left: 24px; padding-right: 0; }
.ve-scaling--v2 .scl-panelhead .ve-label { font: 450 0.8125rem/1.3 var(--font-ui); color: var(--ink-3); }
.ve-scaling--v2 .scl-nc { font-size: 1.1em; color: var(--ink-2); }
.ve-scaling--v2 .scl-col .ve-legend { font: 450 0.8125rem/1.3 var(--font-ui); gap: 4px 18px; color: var(--ink-3); }
.ve-scaling--v2 .scl-ctl { gap: 12px 28px; margin-top: 6px; }
.ve-scaling--v2 .scl-sel { font: 450 0.75rem/1.4 var(--font-num); color: var(--ink-2); letter-spacing: 0; }
.ve-scaling--v2 .scl-tip { background: var(--card); border-color: var(--rule); border-radius: 6px; font: 450 0.75rem/1.5 var(--font-num); }
.ve-scaling--v2 .scl-plotbox canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* readouts: three instruments on one hairline; c in gilt with the reticle */
.ve-scaling--v2 .ve-figure__controls { margin-top: 12px; }
.ve-scaling--v2 .scl-readouts { gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ve-scaling--v2 .scl-readouts .ve-readout { min-width: 0; flex: 0 1 auto; padding: 12px 24px 14px 0; position: relative; gap: 6px; }
.ve-scaling--v2 .scl-readouts .ve-readout + .ve-readout:not([hidden]) { padding-left: 24px; border-left: 1px solid var(--rule); }
.ve-scaling--v2 .scl-ro--c .ve-readout__value { color: var(--highlight-ink); }
.ve-scaling--v2 .scl-ro--c::after {
  content: ""; position: absolute; inset: 4px -2px 4px 10px; pointer-events: none;
  background:
    linear-gradient(var(--highlight), var(--highlight)) left top / 8px 1px no-repeat, linear-gradient(var(--highlight), var(--highlight)) left top / 1px 8px no-repeat,
    linear-gradient(var(--highlight), var(--highlight)) right top / 8px 1px no-repeat, linear-gradient(var(--highlight), var(--highlight)) right top / 1px 8px no-repeat,
    linear-gradient(var(--highlight), var(--highlight)) left bottom / 8px 1px no-repeat, linear-gradient(var(--highlight), var(--highlight)) left bottom / 1px 8px no-repeat,
    linear-gradient(var(--highlight), var(--highlight)) right bottom / 8px 1px no-repeat, linear-gradient(var(--highlight), var(--highlight)) right bottom / 1px 8px no-repeat;
}
.ve-scaling--v2 .scl-readouts .scl-ro--c:first-child::after { left: -8px; }
.ve-scaling--v2 .scl-readouts .ve-readout { align-content: start; }
.ve-scaling--v2 .scl-readouts .scl-ro--c:first-child { padding-left: 0; }
/* plate 5b: c first, then the sweeps */
.ve-scaling--v2 .scl-readouts .scl-ro--c + .scl-ro--aux { padding-left: 24px; border-left: 1px solid var(--rule); }

@media (max-width: 760px) {
  .ve-scaling--v2 .scl-col--ladder, .ve-scaling--v2 .scl-grid--b .scl-col--ladder { padding: 0 0 12px; }
  .ve-scaling--v2 .scl-grid--b .scl-col--ladder { padding: 12px 0 0; }
}
@media (max-width: 560px) {
  .ve-scaling--v2 .scl-guess { grid-template-columns: minmax(0, 1fr); }
  .ve-scaling--v2 .scl-readouts .ve-readout { flex: 1 1 0; padding-right: 12px; }
  .ve-scaling--v2 .scl-readouts .ve-readout + .ve-readout:not([hidden]) { padding-left: 12px; }
  .ve-scaling--v2 .scl-readouts .ve-readout__label { font-size: 0.75rem; }
}

/* both plates: c first (its sub-line names the sampler's and the model's log-odds), then the sweeps */
.ve-scaling--v2 .scl-readouts .scl-ro--c .ve-readout__sub { font: 450 0.75rem/1.3 var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-3); }
/* the sub-line wraps only at its two break points (after 'law ·' and before '÷ model'); the other spaces are no-break */
.ve-scaling--v2 .scl-readouts { align-items: flex-start; }
/* the dimmed size panel's note reads as figure lettering, not as a bold sentence */
.ve-scaling--v2 .scl-sub--dim { font: 450 0.8125rem/1.3 var(--font-ui); color: var(--ink-3); }
.ve-scaling--v2 .scl-guess__s { text-wrap: balance; }

/* ======================================================================
   Chapter-scoped shell rules (index.html #ch-scaling and its cards)
   ====================================================================== */
#ch-scaling .v2-lede { hyphens: manual; -webkit-hyphens: manual; }
#ch-scaling .nw { white-space: nowrap; }
/* an inline formula never breaks after its '=' */
#ch-scaling [data-tex] .katex { white-space: nowrap; }
/* one numeral style in the drawers: the serif's lining figures match KaTeX's */
#ch-scaling .v2-drawer__body { font-variant-numeric: lining-nums; }
/* deep links (#scaling-math, #scaling-data) land below the phone's sticky bar */
#ch-scaling .v2-drawer { scroll-margin-top: 24px; }
@media (max-width: 899px) { #ch-scaling .v2-drawer { scroll-margin-top: calc(52px + 16px); } }
#ch-scaling .v2-drawer__body .v2-sub { margin: 18px 0 4px; font: 560 0.875rem/1.2 var(--font-text); font-variant-caps: all-small-caps; letter-spacing: .09em; color: var(--ink-3); }
#ch-scaling .v2-drawer__body .v2-sub:first-child { margin-top: 0; }

/* the reading card: sub-heads on their own line; a fade shows when the text runs past the edge */
#scaling-read .v2-spec__h { display: block; }
#scaling-read .scl-live p { color: var(--ink-2); font: 450 0.8125rem/1.5 var(--font-ui); font-variant-numeric: tabular-nums; }
#scaling-read .scl-live { margin: 0 0 8px; }
/* scroll shadow (no script): a soft ink shadow sits at the card's bottom edge while more text
   follows; a card-coloured cover that scrolls with the text hides it at the end */
#scaling-read {
  background:
    linear-gradient(transparent, var(--card) 70%) center bottom / 100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) center bottom / 100% 14px no-repeat scroll,
    var(--card);
}
/* the spec card: long file paths wrap inside the card */
#scaling-spec dd, #scaling-spec dt { overflow-wrap: anywhere; }

/* 5b: one-line purpose under the sub-plate label */
.ve-scaling--v2 .scl-platesub { margin: 2px 0 0; font: italic 400 0.9375rem/1.35 var(--font-text); color: var(--ink-3); }
.ve-scaling--v2 .scl-platesub i { font-style: normal; }