/* ==========================================================================
   LEARN — VERSION B. THE STUDY ROOM.
   Loaded on learn-b.html only. Brief: docs/SURFACES-VERSION-B-ART-DIRECTION.md

   No new colour, no new family, no new scale step. Everything here is built
   from the house tokens, because the objects on this page are apparatus and
   apparatus does not get a palette of its own.
   ========================================================================== */

.vb {
  font: var(--t-xs)/var(--lh-meta) var(--mono);
  color: var(--ink-3);
  margin: 0 0 var(--s5);
  padding-block-end: var(--s3);
  border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------------- the annotated plate */

.plateb { margin: var(--s7) 0; }

.plateb__filter {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-block-end: var(--s4);
}
.plateb__in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plateb__btn {
  font: var(--t-xs)/1 var(--mono);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-firm);
  color: var(--ink-2);
  cursor: pointer;
}
.plateb__btn--ours { border-style: dashed; }
.plateb__in:checked + .plateb__btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plateb__in:focus-visible + .plateb__btn { outline: 2px solid var(--accent); outline-offset: 2px; }

.plateb__stage { position: relative; }

/* The composition. `.spec` supplies ground, ink, radius, elevation and type
   class from the record; this rule supplies only the geometry of the plate. */
.plateb__work {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: var(--s5) var(--s6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: var(--s6);
  align-content: start;
  border: 1px solid var(--rule-firm);
  overflow: hidden;
}
.plateb__grid {
  position: absolute; inset: var(--s5) var(--s6);
  display: grid; grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
}
.plateb__grid i { border-left: 1px solid color-mix(in srgb, var(--s-ink, #0E0F10) 12%, transparent); }
.plateb__kicker {
  grid-column: 1 / -1;
  margin: 0 0 var(--s4);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.02em; text-transform: none;
  color: color-mix(in srgb, var(--s-ink, #0E0F10) 62%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--s-ink, #0E0F10) 22%, transparent);
  padding-block-end: var(--s2);
}
.plateb__head {
  grid-column: 1; margin: 0;
  font-size: clamp(1.5rem, 4.4vw, 3rem); font-weight: 700;
  line-height: 0.95; letter-spacing: -0.02em;
  color: var(--s-ink, #0E0F10);
}
/* The right gutter is reserved for callout 3, which marks the measure of this
   column. Without it the mark lands on top of the lines it is measuring. */
.plateb__col { grid-column: 2; grid-row: 2 / span 2; display: grid; gap: var(--s4); align-content: start; padding-inline-end: 2.2rem; }
.plateb__body {
  margin: 0;
  font-size: var(--t-sm); line-height: 1.45;
  color: color-mix(in srgb, var(--s-ink, #0E0F10) 84%, transparent);
}
/* MEASURE COMES FROM THE RECORD. `.spec__line` is the hook specimen.css uses
   for the record's own `measure` decision, so callout 3 points at a line whose
   width Swiss licensed rather than at a number this stylesheet invented. */
.plateb__body.spec__line { max-width: 58ch; }
.plateb__flat {
  grid-column: 1; grid-row: 3;
  align-self: end; width: 46%; height: 34%;
  background: var(--s-ink, #0E0F10);
  opacity: 0.88;
}

/* CALLOUTS. Placed on features the rules actually govern: the column rules,
   the two-size setting, the measure of the body column, the square corner. */
.plateb__m {
  position: absolute;
  width: 1.55rem; height: 1.55rem;
  display: grid; place-items: center;
  font: var(--t-xs)/1 var(--mono);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink);
  transition: opacity .18s linear;
}
/* Each mark sits ON the feature its rule governs: a column rule, the two-size
   step between kicker and head, the right edge of the measured column, the
   square corner of the plate. */
.plateb__m--grid    { left: 33.1%; top: 64%; }
.plateb__m--sizes   { left: 0.2rem; top: 14%; }
.plateb__m--measure { right: 0.2rem; top: 30%; }
.plateb__m--corner  { right: 0; bottom: 0; }

.plateb__notes { margin-block-start: var(--s5); }
.plateb__note {
  display: grid; grid-template-columns: 1.55rem 1fr; gap: var(--s4);
  padding-block: var(--s3);
  border-top: 1px solid var(--rule);
  transition: opacity .18s linear;
}
.plateb__n {
  margin: 0; font: var(--t-xs)/1.55rem var(--mono); text-align: center;
  border: 1px solid var(--ink);
}
.plateb__rule { margin: 0; font-size: var(--t-sm); }
.plateb__basis { margin: var(--s1) 0 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-2); }
.plateb__src { margin: var(--s4) 0 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }

/* THE FILTER, WITHOUT SCRIPT. Each radio dims everything that is not its own
   basis. Dimmed, never removed: the reader should see how much of the object
   one kind of claim accounts for. */
#bs-canonical_constraint:checked ~ .plateb__stage .plateb__m:not([data-basis="canonical_constraint"]),
#bs-canonical_constraint:checked ~ .plateb__notes .plateb__note:not([data-basis="canonical_constraint"]),
#bs-historical_practice:checked ~ .plateb__stage .plateb__m:not([data-basis="historical_practice"]),
#bs-historical_practice:checked ~ .plateb__notes .plateb__note:not([data-basis="historical_practice"]),
#bs-contemporary_recommendation:checked ~ .plateb__stage .plateb__m:not([data-basis="contemporary_recommendation"]),
#bs-contemporary_recommendation:checked ~ .plateb__notes .plateb__note:not([data-basis="contemporary_recommendation"]),
#bs-editorial_operationalization:checked ~ .plateb__stage .plateb__m:not([data-basis="editorial_operationalization"]),
#bs-editorial_operationalization:checked ~ .plateb__notes .plateb__note:not([data-basis="editorial_operationalization"]) {
  opacity: 0.16;
}

/* ------------------------------------------------------------- the field --- */

/* THE FIELD TAKES THE APPARATUS COLUMN. The leaf grid always reserves 15rem
   for the margin, and this leaf has no apparatus to put there. Reclaiming it
   is the difference between 6px and 9px a column across 95 records. */
.leaf:has(> .leaf__body > .cov) { grid-template-columns: minmax(0, 1fr); }
.leaf:has(> .leaf__body > .cov) > .margin { display: none; }

.cov { margin: var(--s6) 0 var(--s7); }
.cov__stat {
  margin: 0 0 var(--s4);
  font: var(--t-sm)/var(--lh-meta) var(--mono); color: var(--ink-2);
}
.cov__stat b { font-family: var(--ui); font-size: var(--t-md); font-weight: 700; color: var(--ink); }

.cov__scroll { overflow-x: auto; padding-block-end: var(--s3); }
.cov__grid {
  display: grid;
  grid-template-columns: 7.5rem minmax(min-content, 1fr);
  gap: var(--s3);
  min-width: 34rem;
}
.cov__rows { display: grid; grid-template-rows: repeat(10, 1fr); }
.cov__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  margin: 0; font: var(--t-xs)/1 var(--mono); color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.cov__row b { font-weight: 400; color: var(--ink-3); }

.cov__plot {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.cov__col { display: grid; grid-template-rows: repeat(10, 1fr); position: relative; }
.cov__c {
  display: block; min-height: 1.15rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* A blank cell is the grid and nothing else. It is not a light grey answer. */
.cov__c--blank { background: transparent; }

.cov__c[data-tone="specified"] { background: var(--ink); }
.cov__c[data-tone="free"]      { background: var(--brand-edge); }
.cov__c[data-tone="open"]      { background: repeating-linear-gradient(45deg, var(--rule-firm) 0 1px, transparent 1px 4px); }
.cov__c[data-tone="excluded"]  { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.cov__c[data-tone="outside"]   { background: var(--paper-3); }

/* The name rides vertically under its own column, and only for the columns
   that carry something — 92 rotated labels reading "nothing" is noise. */
.cov__name {
  position: absolute; top: 100%; left: 0;
  transform-origin: 0 0; transform: rotate(90deg) translateY(-100%);
  font: var(--t-xs)/1 var(--mono); font-style: normal;
  white-space: nowrap; color: var(--ink-3);
  padding-inline-start: var(--s2);
  opacity: 0;
}
/* THE NAMES DO NOT RIDE THE COLUMNS. At 9px a column three rotated labels sit
   9px apart and overlap into an unreadable stack, and 95 of them would be
   worse. The rotated name is a hover affordance for one column at a time; the
   three that carry anything are named in plain text beneath the plot. */
.cov__col:hover .cov__name, .cov__col:focus-within .cov__name { opacity: 1; }
.cov__scroll { padding-block-end: var(--s6); }

.cov__named {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4);
  margin: var(--s3) 0 0;
  font: var(--t-xs)/var(--lh-meta) var(--mono);
}
.cov__named a { color: var(--ink); }
.cov__named span { color: var(--ink-3); }
.cov__named em { font-style: normal; color: var(--ink-3); flex: 1 1 18rem; }

.cov__bands { margin-block-start: var(--s5); }
.cov__strip {
  display: grid; grid-template-columns: repeat(95, 1fr);
  height: var(--s5); border: 1px solid var(--rule);
}
.cov__seg { grid-column: span var(--n); border-right: 1px solid var(--paper); }
.cov__seg:last-child { border-right: 0; }
.cov__seg[data-depth="researched"] { background: var(--ink); }
.cov__seg[data-depth="partial"]    { background: var(--ink-3); }
.cov__seg[data-depth="limited"]    { background: var(--rule-firm); }
.cov__seg[data-depth="catalogued"] { background: var(--paper-deep); }

.cov__legs {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5);
}
.cov__legs li { display: grid; grid-template-columns: 0.55rem 1fr; gap: var(--s2) var(--s3); align-content: start; }
.cov__legs i { grid-row: 1 / span 3; width: 0.55rem; align-self: stretch; border: 1px solid var(--rule); }
.cov__legs li[data-depth="researched"] i { background: var(--ink); }
.cov__legs li[data-depth="partial"] i    { background: var(--ink-3); }
.cov__legs li[data-depth="limited"] i    { background: var(--rule-firm); }
.cov__legs li[data-depth="catalogued"] i { background: var(--paper-deep); }
.cov__legs b { font-size: var(--t-lg); font-weight: 700; line-height: 1; }
.cov__legs span { font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink); }
.cov__legs em { font-style: normal; font-size: var(--t-sm); line-height: 1.4; color: var(--ink-3); }

.cov__note { margin: var(--s4) 0 0; font-size: var(--t-sm); color: var(--ink-2); max-width: var(--measure); }

.cov__key { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s6); }
/* THE SENTENCE IS WRAPPED, NOT LOOSE. A bare text node after </b> becomes an
   anonymous grid item and lands in the 1.15rem swatch track, where it wraps to
   one character per line. */
.cov__key li {
  display: grid; grid-template-columns: 1.15rem 1fr; gap: var(--s3); align-items: start;
  font-size: var(--t-sm); color: var(--ink-2);
}
.cov__key li p { margin: 0; }
.cov__key i { width: 1.15rem; height: 1.15rem; border: 1px solid var(--rule); }
.cov__key i[data-tone="specified"] { background: var(--ink); }
.cov__key i[data-tone="free"]      { background: var(--brand-edge); }
.cov__key i[data-tone="open"]      { background: repeating-linear-gradient(45deg, var(--rule-firm) 0 1px, transparent 1px 4px); }
.cov__key i[data-tone="excluded"]  { box-shadow: inset 0 0 0 1px var(--ink); }
.cov__key i[data-tone="outside"]   { background: var(--paper-3); }
.cov__key b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------- script, refusal - */

.scriptb, .refb { margin: var(--s6) 0; }
.scriptb__pair, .refb__pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5);
}
.scriptb__tag, .refb__tag {
  margin: 0 0 var(--s3); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3);
}
.scriptb__set {
  border: 1px solid var(--rule-firm); padding: var(--s4);
  min-height: 11rem; display: grid; align-content: start;
}
.scriptb__set p { margin: 0; font-size: var(--t-sm); max-width: 24ch; }
/* The rule, executed literally on a script it was never about. */
.scriptb__set--vert { direction: rtl; }
.scriptb__set--vert p {
  writing-mode: vertical-rl; text-orientation: mixed;
  max-width: none; max-height: 9rem;
}
.scriptb__half--bad .scriptb__set { border-color: var(--ink); }
.scriptb__say, .refb__say { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.scriptb figcaption, .refb figcaption, .pipeb figcaption {
  margin-block-start: var(--s4); padding-block-start: var(--s3);
  border-top: 1px solid var(--rule);
  font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3);
}

.refb__work {
  border: 1px solid var(--rule-firm); padding: var(--s4);
  background: #F2F2EF; color: #0E0F10;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: grid; gap: var(--s2);
  border-radius: 0;
}
.refb__work > * { margin: 0; }
.refb__k { font-size: var(--t-xs); border-bottom: 1px solid #0E0F10; padding-block-end: var(--s1); }
.refb__work h4 { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.01em; }
.refb__work p:not(.refb__k) { font-size: var(--t-sm); }
/* The second signalling device: rank restated in colour and size on top of a
   grid that was already carrying it. */
.refb__work--plus h4 { color: #B3261E; font-size: var(--t-lg); }
.refb__work--plus .refb__k { color: #B3261E; border-color: #B3261E; }

/* -------------------------------------------------------------- pipeline --- */

.pipeb { margin: var(--s5) 0 var(--s6); }
.pipeb__line {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--rule-firm);
}
.pipeb__stage {
  flex: 1 1 8rem; min-width: 7rem;
  padding: var(--s3);
  border-right: 1px solid var(--rule);
  display: grid; gap: var(--s1);
}
.pipeb__stage:last-child { border-right: 0; background: var(--ink); color: var(--paper); }
.pipeb__n { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
/* The last stage inverts (ink ground, paper text), so its number has to come
   from the stage's own pair — --plate-ink-2 is a fixed light grey and sat at
   1.97:1 once --ink became near-white at night. */
.pipeb__stage:last-child .pipeb__n { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.pipeb__lbl { font-size: var(--t-sm); line-height: 1.25; }

.pipeb__branch { display: grid; justify-items: center; }
.pipeb__bracket {
  width: 100%; height: var(--s5); position: relative;
  border-inline: 1px solid var(--rule-firm);
  border-bottom: 1px solid var(--rule-firm);
}
.pipeb__bracket::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  height: var(--s4); border-left: 1px solid var(--rule-firm);
}
.pipeb__dead {
  margin: var(--s6) 0 0; padding: var(--s3) var(--s4);
  border: 1px dashed var(--rule-firm);
  font-size: var(--t-sm); color: var(--ink-2); max-width: var(--measure);
}
.pipeb__dead b { display: block; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink); text-transform: none; }

/* ------------------------------------------------------------ the ledger --- */

.ledgerb { margin-block-start: var(--s6); }
/* WHITE GROUND, WEIGHTED EDGE.
   The first version put this box on --paper-deep, which drops the house's
   --ink-3 apparatus grey from 5.0:1 to 4.42:1 — the section that exists to be
   read carefully was the only one failing AA. The distinction comes from the
   edge instead, which costs nothing. */
.ledgerb--held {
  padding: var(--s5); padding-inline-start: calc(var(--s5) - 2px);
  border: 1px solid var(--rule-firm); border-inline-start: 3px solid var(--ink);
}
.ledgerb__say { margin: 0 0 var(--s4); max-width: var(--measure); color: var(--ink-2); font-size: var(--t-sm); }
/* 63 entries in one column is a scroll; in two it is a list you can scan.
   The withheld set is four and stays single-column, where it reads as a
   finding rather than as the short leg of a table. */
.ledgerb__cols { columns: 2; column-gap: var(--s6); }
.ledgerb__cols > li { break-inside: avoid; }
.ledgerb__h {
  margin: 0 0 var(--s3); padding-block-end: var(--s2);
  border-bottom: 1px solid var(--ink);
  font-size: var(--t-base); font-weight: 600;
  display: flex; justify-content: space-between; align-items: baseline;
}
.ledgerb__h span { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }


/* ------------------------------------------------------------- responsive -- */

@media (max-width: 52rem) {
  .scriptb__pair, .refb__pair { grid-template-columns: 1fr; gap: var(--s5); }
  .ledgerb__cols { columns: 1; }
  .plateb__work { aspect-ratio: auto; grid-template-columns: 1fr; }
  .plateb__body { grid-column: 1; grid-row: auto; }
  .plateb__flat { grid-column: 1; grid-row: auto; width: 60%; height: 3rem; }
  .plateb__m--sizes { top: 12%; }
  .plateb__m--measure { top: 52%; }
  .cov__grid { grid-template-columns: 5.5rem minmax(min-content, 1fr); }
  .cov__legs { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  .plateb__m, .plateb__note { transition: none; }
}

/* Vocabulary, the last section of Foundations (2026-09-26). */
.lv { margin-block: var(--s8) var(--s7); max-width: 52rem; }
.lv h2 { font: 600 var(--t-xl)/1.1 var(--display); letter-spacing: -0.02em; margin: 0 0 var(--s3); }
.lv h3 { font: 600 var(--t-md)/1.2 var(--display); margin: var(--s6) 0 var(--s3); }
.lv-gloss { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; margin: 0; border-top: 1px solid var(--rule-firm); }
.lv-gloss dt, .lv-gloss dd { margin: 0; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.lv-gloss dt { font-weight: 600; color: var(--ink); padding-inline-end: var(--s4); }
.lv-gloss dd { color: var(--ink-2); }
@media (max-width: 40rem) { .lv-gloss { grid-template-columns: 1fr; } .lv-gloss dt { border-bottom: 0; padding-bottom: 0; } }