/* ============================================================================
   PROBE CATALOGUE (§5.11) · MIRA TAXONOMY (§5.12) · LIGHT CURVE · FIGURES (§5.10)
   ----------------------------------------------------------------------------
   All four follow the MEASURED shape rather than the specified one — see the
   header of build-catalog.js. Container queries use `plate` (ledger C16).
   ========================================================================= */

/* ── §5.11 THE DOT MATRIX ────────────────────────────────────────────────
   A catalogue reads at a glance in a way three bullet lists cannot: the eye
   picks up where coverage starts and stops across the grades without reading a
   single label. Domain on one axis, grade on the other, filled where it exists. */
.cat-intro { color: var(--star-dim); max-width: 84ch; margin: 0 0 1.5rem; }
table.cat-grid { border-collapse: collapse; width: 100%; min-width: 44rem; }
.cat-rowh {
  text-align: left; font-weight: 400; padding: .3rem .9rem .3rem 0;
  font-size: var(--t-small); color: color-mix(in srgb, var(--star) 78%, transparent);
  white-space: nowrap;
}
th.cat-g { width: 1.9rem; padding-bottom: .5rem; }
th.cat-g .tick, .cat-n .tick { color: var(--star-dim); }
.cat-n { text-align: right; padding-left: .8rem; color: var(--star-dim); font-size: var(--m-small); }

.cat-dom th {
  padding: 1.1rem 0 .45rem; text-align: left; font-weight: 400;
  border-bottom: var(--hair) solid color-mix(in srgb, var(--star) 22%, transparent);
}
.cat-dom-l { font-family: var(--f-display); font-size: var(--d5); color: var(--star); font-variation-settings: 'opsz' 18; }
.cat-dom-n { margin-left: .8rem; color: var(--star-dim); }

.cat-cell { text-align: center; padding: .22rem 0; }
.cat-dot {
  display: inline-block; width: .45rem; height: .45rem; border-radius: 50%;
  background: color-mix(in srgb, var(--star) 12%, transparent);
}
/* Filled means "measures are defined here". --current, because what fills the
   cell is student data being recordable at that grade. */
.cat-cell.is-on .cat-dot {
  background: var(--current);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--current) 16%, transparent);
}
.cat-prov { color: var(--star-dim); margin: 1.25rem 0 0; max-width: 84ch; }

/* ── §5.12 THE TAXONOMY — the skew is the picture ───────────────────────── */
.tax-intro { color: var(--star-dim); max-width: 84ch; margin: 0 0 1.5rem; }
.tax-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.tax-row {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr) 7rem;
  align-items: center; gap: .9rem;
}
@container plate (max-width: 560px) { .tax-row { grid-template-columns: 8rem minmax(0,1fr) 5rem; gap: .5rem; } }
.tax-l { font-size: var(--m-small); color: color-mix(in srgb, var(--star) 80%, transparent); }
.tax-bar {
  height: .85rem; background: color-mix(in srgb, var(--phosphor) 42%, transparent);
  border-left: var(--hair-strong) solid var(--phosphor);
  transform-origin: left center;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tax-bar { animation: draw-x linear both; animation-timeline: view(); animation-range: entry 10% entry 55%; }
  }
}
.tax-n { color: var(--star-dim); text-align: right; }
.tax-prov { color: var(--star-dim); margin: 1.5rem 0 0; max-width: 84ch; }

/* ── THE LIGHT CURVE ────────────────────────────────────────────────────
   Magnitude is plotted INVERTED, as astronomers plot it: bright at the top. */
.lc-svg { display: block; width: 100%; height: auto; }
.lc-line { fill: none; stroke: var(--mira); stroke-width: 2.5; stroke-linejoin: round; }
.lc-axis { stroke: color-mix(in srgb, var(--star) 22%, transparent); stroke-width: 1; }
.lc-tick { stroke: color-mix(in srgb, var(--star) 12%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.lc-note { color: var(--star-dim); margin: 1rem 0 0; max-width: 84ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The curve draws itself once on scroll-in — the one place a line drawing
       in is the argument, because the shape IS the point. */
    .lc-line { stroke-dasharray: 4000; stroke-dashoffset: 4000;
               animation: lc-draw linear both; animation-timeline: view();
               animation-range: entry 15% entry 80%; }
  }
}
@keyframes lc-draw { to { stroke-dashoffset: 0; } }

/* ── §5.10 STATUS FIGURES — deliberate scale hierarchy ──────────────────
   Base audit §5.10: the current grid gives a design guarantee the same visual
   weight as a prompt-chip count. One large numeral, three at half scale, and
   EVERY one carries a provenance marker. */
.figs { display: grid; gap: 2rem; }
.fig { display: grid; gap: .35rem; align-content: start; }
.fig-n {
  font-family: var(--f-display); font-weight: 400; line-height: .9;
  letter-spacing: -0.04em; color: var(--star);
  font-size: clamp(2.4rem, 4vw, 3.6rem); font-variation-settings: 'opsz' 64;
}
.fig-hero .fig-n {
  font-size: clamp(5rem, 13vw, 11rem); font-variation-settings: 'opsz' 96;
  color: var(--waterline);
}
.fig-l { font-family: var(--f-display); font-size: var(--d5); color: var(--star); font-variation-settings: 'opsz' 18; }
.fig-hero .fig-l { font-size: var(--d3); }
.fig-d { color: color-mix(in srgb, var(--star) 64%, transparent); max-width: 42ch; }
.fig .prov { margin-top: .2rem; }
.fig-row { display: grid; gap: 1.75rem; padding-top: 1.75rem;
           border-top: var(--hair) solid color-mix(in srgb, var(--star) 18%, transparent); }
@media (min-width: 860px) { .fig-row { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

@media print {
  .cat-plate, .tax-plate, .lc-plate { background: #fff; color: #000; }
  .cat-dot { border: 1px solid #666; }
  .fig-n, .fig-l { color: #000; }
}

/* ⛔ THESE LIVED IN panel.css AND THE PAGE NEVER LOADED IT. paper-assessment
   declares extraCss: ['catalog.css'], so every rule below arrived as dead
   bytes on a different page: the plate rendered as a default <ul>, bullets
   and all, with the grid columns collapsed so "screening progress
   eligibility" ran together as one word. Nothing errored — unapplied CSS is
   silent, which is why the screenshot caught it and the build did not. */
/* ══ THE ASSESSMENT SURFACE, BY PROVENANCE (replaces the dot matrix) ═════
   Three groups, and the group is the point: a reader should be able to see at
   a glance how much of this the platform ADMINISTERS versus how much it
   RECEIVES. The old grid made those indistinguishable by drawing them with
   the same mark. */
.prov-group { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
.prov-group:first-of-type { margin-top: 1rem; }
.prov-h {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin: 0 0 .3rem; font-size: 1.02rem; font-weight: 500; color: var(--star);
  padding-bottom: .4rem;
  border-bottom: var(--hair) solid color-mix(in srgb, var(--star) 22%, transparent);
}
.prov-n { margin-left: auto; color: var(--star-dim); font-variant-numeric: tabular-nums; }
.prov-what { margin: .45rem 0 .8rem; color: var(--star-dim); max-width: 68ch; }

.prov-list { list-style: none; margin: 0; padding: 0; }
.prov-row {
  display: grid; align-items: baseline; gap: .2rem .9rem;
  grid-template-columns: minmax(7rem, 9rem) minmax(10rem, 1fr) 4.2rem minmax(8rem, 15rem);
  padding: .34rem 0;
  border-bottom: var(--hair) solid color-mix(in srgb, var(--star) 8%, transparent);
}
.prov-dom { color: var(--star-dim); }
.prov-sub { color: var(--star); }
.prov-grades { color: var(--star-dim); font-variant-numeric: tabular-nums; text-align: right; }
.prov-uses { display: flex; flex-wrap: wrap; gap: .3rem; }
.prov-use {
  font-size: var(--m-tick); letter-spacing: .04em;
  padding: .06rem .38rem; border-radius: 2px;
  color: var(--star-dim);
  border: var(--hair) solid color-mix(in srgb, var(--star) 24%, transparent);
}
/* ⚠ the note spans the whole row: it is the caveat that stops the row
   over-claiming, so it must not be squeezed into a 15rem column */
.prov-note { grid-column: 1 / -1; color: var(--star-dim); opacity: .85; max-width: 72ch; margin-top: .15rem; }

/* The imported group carries the sharpest claim on the page — that the
   platform does NOT administer these — so it is marked, quietly. */
.prov-imported .prov-h { color: var(--star); }
.prov-imported .prov-use { border-style: dashed; }

@media (max-width: 760px) {
  .prov-row { grid-template-columns: 1fr 4rem; gap: .1rem .6rem; }
  .prov-dom { grid-column: 1 / -1; font-size: var(--m-tick); }
  .prov-uses { grid-column: 1 / -1; margin-top: .18rem; }
}

/* the 62 batteries: a dense name list, because the names ARE the information
   an examiner scans for. Not a table — there is one field. */
.bat-list {
  list-style: none; margin: .7rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .45rem;
}
.bat-item {
  font-size: var(--m-tick); color: var(--star-dim);
  padding: .12rem .42rem; border-radius: 2px;
  border: var(--hair) solid color-mix(in srgb, var(--star) 20%, transparent);
  white-space: nowrap;
}
.prov-uses-line { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; color: var(--star-dim); margin: .1rem 0 0; }
.prov-batteries .prov-note { margin-top: .8rem; }