/* about-fig-plates.css — the taxonomy scene's specimen plates
   (about-fig-plates.js; about rework, 2026-10-05).

   One family of plates, one layout grammar: the prompt (the specimen's
   label) over the drawing on graph paper, and under each drawing its
   model's name and one rating row — label | gauge | value. The paper is the
   report card's stock (the analysis cards wear the same: cream card, grain,
   mottle, double hairline, cast shadow); the drawing's ground is the report
   card's photograph swatch, graph paper that shows through anything
   transparent. The gauge and the grading pencils are the report card's
   (junk-drawer.css .rc-bar / .rc-mark, JD_axisCls), restated here under this
   module's prefix because those rules live with the report card and its
   crew. Every class is scoped under .jdf-plates. */

.jdf-plates {
  --pl-card: #efe4c6;
  --pl-ink: #37414f;
  --pl-ink-2: #4d5563;
  --pl-typed: #3a3428;
  --pl-rule: rgba(55, 65, 79, 0.42);
  --pl-rule-2: rgba(55, 65, 79, 0.22);
  --pl-paper: var(--jd-plate-paper, #f8f3e2);
  --pl-graph: var(--jd-graph-rule, rgba(74, 98, 138, 0.17));
  --pl-graph-fine: rgba(74, 98, 138, 0.07);
  --pl-cell: 45px;          /* the major ruling, the report card's */
  --pl-fine: 9px;           /* the minor ruling */
  --pl-form: var(--jd-font-form, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif);
  --pl-mono: var(--jd-font-mono, "Courier Prime", "Courier New", Courier, monospace);
  --pl-hand: var(--jd-font-hand, "Bradley Hand", "Segoe Print", "Chalkboard SE", cursive);
  --pl-gauge-w: 64px;
  --pl-gauge-h: 11px;
  --pl-mark: 1.22rem;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 26px 30px 24px;
  color: var(--pl-ink);
  background: var(--pl-card) var(--jd-grain-url);
  border: 1px solid rgba(48, 38, 20, 0.55);
  box-shadow: 14px 22px 34px -10px rgba(6, 3, 0, 0.5),
              3px 6px 12px -4px rgba(6, 3, 0, 0.4);
  text-align: left;
}
/* the inner hairline of the double border, and the paper's mottle */
.jdf-plates::before {
  content: ""; position: absolute; inset: 5px; z-index: 1; pointer-events: none;
  border: 1px solid rgba(55, 65, 79, 0.42);
}
.jdf-plates::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--jd-mottle-url);
  background-size: 420px 420px;
}
.jdf-plates-body { position: relative; z-index: 2; }

/* ---- the specimen's label: the prompt, verbatim --------------------------- */
.jdf-plates-head {
  display: flex; align-items: center; gap: 0.7em;
  font-family: var(--pl-form); font-size: 0.6rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--pl-ink-2);
}
.jdf-plates-head::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--pl-rule-2); }
.jdf-plates-prompt { margin: 0 0 14px; }
.jdf-plates-prompt-t {
  margin: 5px 0 0;
  font-family: var(--pl-mono); font-size: 0.84rem; line-height: 1.42;
  color: var(--pl-typed);
  overflow-wrap: anywhere;
}

/* ---- the drawing on its graph paper ---------------------------------------- */
.jdf-plates-spec { margin: 0; min-width: 0; }
.jdf-plates-paper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 2.3 / 1;
  background:
    repeating-linear-gradient(0deg,  var(--pl-graph) 0 1px, transparent 1px var(--pl-cell)),
    repeating-linear-gradient(90deg, var(--pl-graph) 0 1px, transparent 1px var(--pl-cell)),
    repeating-linear-gradient(0deg,  var(--pl-graph-fine) 0 1px, transparent 1px var(--pl-fine)),
    repeating-linear-gradient(90deg, var(--pl-graph-fine) 0 1px, transparent 1px var(--pl-fine)),
    var(--pl-paper);
  border: 1px solid rgba(55, 65, 79, 0.30);
  box-shadow: 0 4px 10px -3px rgba(46, 34, 12, 0.5),
              0 1px 3px rgba(46, 34, 12, 0.35);
}
.jdf-plates-art { position: absolute; inset: 7% 5%; }
.jdf-plates-art > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.jdf-plates-missing {
  display: flex; height: 100%; align-items: center; justify-content: center;
  font-family: var(--pl-mono); font-size: 0.75rem; color: var(--pl-ink-2);
}

/* ---- the caption: model name, then the rating row -------------------------- */
.jdf-plates-cap { margin-top: 10px; }
.jdf-plates-model {
  display: block;
  font-family: var(--pl-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pl-ink-2);
}
.jdf-plates-rate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  column-gap: 14px; row-gap: 2px;
  margin-top: 6px; padding-top: 7px;
  border-top: 1px solid var(--pl-rule);
}
.jdf-plates-rate-l {
  font-family: var(--pl-form); font-weight: 600; font-size: 1.04rem; line-height: 1.25;
  color: #1f2530;
}
.jdf-plates-rate-v { display: inline-flex; align-items: center; gap: 0.6rem; }

/* the gauge (the report card's segmented bar, larger on a plate) */
.jdf-plates-gauge {
  position: relative; display: inline-block; flex: 0 0 auto;
  width: var(--pl-gauge-w); height: var(--pl-gauge-h);
  border: 1.5px solid currentColor; border-radius: 2px;
  overflow: hidden; box-sizing: border-box;
  color: var(--pl-ink-2);
}
.jdf-plates-gauge-fill { position: absolute; top: 0; bottom: 0; left: 0; background: currentColor; }
.jdf-plates-gauge-tick {
  position: absolute; top: 0; bottom: 0; width: 1.5px;
  background: var(--pl-card);
}
/* the grading pencil: the value's label, inked in the colour it earned */
.jdf-plates-mark {
  display: inline-block;
  font-family: var(--pl-hand); font-size: var(--pl-mark); line-height: 1.12;
  color: #b02a24;
  transform: rotate(-1.2deg); transform-origin: 12% 70%;
  white-space: nowrap;
}
/* the report card's pencils (junk-drawer.css, "the graded pencils"):
   r* = 3-point axes, q* = 4-point axes (JD_axisCls), g* = the five grades */
.jdf-plates .rc-r3, .jdf-plates .rc-q4, .jdf-plates .rc-g5 { color: #0b6a1f; }
.jdf-plates .rc-q3, .jdf-plates .rc-g4 { color: #46761a; }
.jdf-plates .rc-r2, .jdf-plates .rc-q2, .jdf-plates .rc-g3 { color: #a06200; }
.jdf-plates .rc-g2 { color: #b0490f; }
.jdf-plates .rc-r1, .jdf-plates .rc-q1, .jdf-plates .rc-g1 { color: #8f1d12; }

/* ---- the plates, view by view --------------------------------------------- */
/* the specimens' grid: one, or a pair side by side, or a pair and a footnote */
.jdf-plates-specs { display: grid; gap: 18px 18px; }

/* UA: the flag, large enough for its stars to be counted */
.jdf-plates--ua .jdf-plates-paper { aspect-ratio: 1.5 / 1; }
.jdf-plates--ua .jdf-plates-art { inset: 5% 6%; }

/* PW: the magnet, its frame large */
.jdf-plates--pw .jdf-plates-paper { aspect-ratio: 1.42 / 1; }
.jdf-plates--pw .jdf-plates-art { inset: 5% 8%; }

/* SC: the broken trout full width; the contrast below it, smaller, its
   caption beside it */
.jdf-plates--sc .jdf-plates-paper { aspect-ratio: 1.5 / 1; }
.jdf-plates--sc .jdf-plates-art { inset: 6% 4%; }
.jdf-plates--sc .jdf-plates-spec--aside {
  display: grid; grid-template-columns: 52% 1fr; column-gap: 18px; align-items: end;
}
.jdf-plates--sc .jdf-plates-spec--aside .jdf-plates-cap { margin-top: 0; }

/* LY: one drawing (Kimi K3's succulent), on the same paper as every plate,
   with the replay scrubber under it */
.jdf-plates--ly .jdf-plates-paper { aspect-ratio: 1.5 / 1; }
.jdf-plates--ly .jdf-plates-art { inset: 7% 10%; }

/* INTRO: the gold standard, its five ratings and its grade as rows */
.jdf-plates--intro .jdf-plates-paper { aspect-ratio: 1.6 / 1; }   /* the succulent stands tall (was 2.25 for the sushi) */
.jdf-plates--intro .jdf-plates-art { inset: 5% 10%; }
/* the last plate, the fadograph (owner, 2026-10-06: "the same … almost
   square grid paper" as the other plates — it read too flat at the 2.3:1
   default) */
.jdf-plates--outro .jdf-plates-paper { aspect-ratio: 1.5 / 1; }
.jdf-plates--outro .jdf-plates-art { inset: 6% 10%; }
.jdf-plates--intro { --pl-gauge-w: 47px; --pl-gauge-h: 9px; --pl-mark: 1.02rem; }
.jdf-plates-rates { margin-top: 6px; border-top: 1px solid var(--pl-rule); }
.jdf-plates-rates .jdf-plates-rate {
  display: grid; grid-template-columns: minmax(0, 1fr) 14rem; column-gap: 14px;
  margin-top: 0; padding: 4px 0 3px;
  border-top: 0; border-bottom: 1px solid var(--pl-rule-2);
}
.jdf-plates-rates .jdf-plates-rate-l { font-size: 0.95rem; font-weight: 500; }
.jdf-plates-rates .jdf-plates-rate--grade {
  margin-top: 5px; padding-top: 6px;
  border-top: 1px solid var(--pl-rule); border-bottom: 0;
}
.jdf-plates-rates .jdf-plates-rate--grade .jdf-plates-rate-l { font-weight: 600; }
.jdf-plates-rates .jdf-plates-rate--grade { --pl-mark: 1.2rem; }

/* ---- the phone: the column's width, reflowed --------------------------------- */
.jd-about--phone .jdf-plates { padding: 20px 16px 18px; }
.jd-about--phone .jdf-plates-prompt-t { font-size: 0.8rem; }
.jd-about--phone .jdf-plates-rate-l { font-size: 0.98rem; }
.jd-about--phone .jdf-plates--sc .jdf-plates-spec--aside { grid-template-columns: 1fr; }
.jd-about--phone .jdf-plates--sc .jdf-plates-spec--aside .jdf-plates-cap { margin-top: 10px; }
.jd-about--phone .jdf-plates--sc .jdf-plates-spec--aside .jdf-plates-paper { width: 72%; }
/* a half-width column has no room for gauge and word side by side: the word
   goes under its gauge */
/* the intro's rows: the gauges line up down the right edge, each word just
   before its gauge (the narrow column has no room for a fixed value column) */
.jd-about--phone .jdf-plates-rates .jdf-plates-rate { grid-template-columns: minmax(0, 1fr) auto; }
.jd-about--phone .jdf-plates-rates .jdf-plates-rate-v { flex-direction: row-reverse; justify-self: end; }

/* EVERY CATEGORY, ONE LIT (owner, 2026-10-05): on a category's plate the
   specimen shows its whole report; the rows the step isn't about recede */
.jd-about .jdf-plates-rates--lit .jdf-plates-rate--dim { opacity: 0.3; }
.jd-about .jdf-plates-rates--lit .jdf-plates-rate--on .jdf-plates-rate-l { font-weight: 600; }

/* the lit report takes the intro's compact sizes, so a long value fits */
.jdf-plates-rates--lit { --pl-gauge-w: 47px; --pl-gauge-h: 9px; --pl-mark: 1.02rem; }
/* …and the intro's fixed value column, so every gauge starts on one line */
.jdf-plates-rates--lit .jdf-plates-rate { grid-template-columns: minmax(0, 1fr) 14rem; }

/* THE REPLAY CONTROL under a plate's drawing (the Layering plate): the
   drawer's own filmstrip at its full size here — on this plate it is a
   feature being shown, not a label (owner, 2026-10-05) */
.jd-about .jdf-plates .jd-filmstrip { --fs-h: 26px; margin: 10px 0 2px; }
.jd-about .jdf-plates .fs-play { width: 28px; height: 28px; padding: 5px; }
.jd-about .jdf-plates .fs-play svg { width: 16px; height: 16px; }

/* THE PROMPT, SET OFF (owner, 2026-10-05: "make the prompt a little more
   prominent and kind of set off in its own container… too easy to ignore"):
   a slip of the plate paper, as the pipeline diagram sets its prompt, with
   the request itself in the form's italic, a size up */
.jdf-plates-prompt {
  margin: 0 0 16px; padding: 10px 16px 13px;
  background: var(--jd-plate-paper, #f8f3e2);
  border: 1px solid rgba(55, 65, 79, 0.42);
  box-shadow: 0 3px 8px -4px rgba(46, 34, 12, 0.45);
}
.jdf-plates-prompt-t {
  margin: 6px 0 0;
  font-family: var(--pl-form); font-style: italic;
  font-size: 1.16rem; line-height: 1.35;
  color: #1f2530;
}
.jd-about--phone .jdf-plates-prompt { padding: 9px 12px 11px; }
.jd-about--phone .jdf-plates-prompt-t { font-size: 1.02rem; }

/* ===== REPORT TABLES (owner, 2026-10-05) ====================================
   one table under the drawing(s): a header row — "Category", then each
   model's name over its own column — a row per category, then the overall
   grade. Rows are display:contents so every cell sits on the one grid and
   the gauges in a column start on one line. */
.jdf-plates-report {
  --vcol: 14rem;
  --pl-gauge-w: 47px; --pl-gauge-h: 9px; --pl-mark: 1.02rem;
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 1), var(--vcol));
  column-gap: 14px;
  margin-top: 12px;
}
.jdf-plates-report--2 { --vcol: 12.5rem; }
.jdf-plates-rrow { display: contents; }
.jdf-plates-rl, .jdf-plates-rv {
  padding: 4px 0 3px; border-bottom: 1px solid var(--pl-rule-2);
  display: flex; align-items: center; min-width: 0;
}
.jdf-plates-rl { font-family: var(--pl-form); font-size: 0.95rem; font-weight: 500; line-height: 1.25; color: #1f2530; }
.jdf-plates-rv { gap: 0.6rem; }
.jdf-plates-rh {
  padding: 0 0 5px; border-bottom: 1px solid var(--pl-rule);
  font-family: var(--pl-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pl-ink-2);
}
.jdf-plates-rrow--grade > * { border-bottom: 0; border-top: 1px solid var(--pl-rule); margin-top: 5px; padding-top: 6px; }
.jdf-plates-rrow--grade .jdf-plates-rl { font-weight: 600; }
.jdf-plates-rrow--grade { --pl-mark: 1.2rem; }
/* the lit row and the dimmed rest */
.jd-about .jdf-plates-report--lit .jdf-plates-rrow--dim > * { opacity: 0.3; }
.jd-about .jdf-plates-report--lit .jdf-plates-rrow--on .jdf-plates-rl { font-weight: 600; }
/* the drawing(s): one wide, or a pair of squares side by side */
.jdf-plates-draw--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.jdf-plates-draw--pair .jdf-plates-paper { aspect-ratio: 1 / 1; }
.jdf-plates-draw--pair .jdf-plates-art { inset: 9%; }
.jdf-plates-draw--pair .jdf-plates-model { display: block; margin-top: 7px; }
/* the phone: one column right-aligned as before; two columns stack each
   cell's gauge over its word */
.jd-about--phone .jdf-plates-report { grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 1), auto); column-gap: 10px; }
.jd-about--phone .jdf-plates-report--1 .jdf-plates-rv { flex-direction: row-reverse; justify-content: flex-start; }
.jd-about--phone .jdf-plates-report--1 .jdf-plates-rh + .jdf-plates-rh { text-align: right; }
.jd-about--phone .jdf-plates-report--2 .jdf-plates-rv { flex-direction: column; align-items: flex-start; gap: 3px; }
.jd-about--phone .jdf-plates-report--2 { --pl-mark: 0.92rem; }
.jd-about--phone .jdf-plates-rl { font-size: 0.88rem; }
.jd-about--phone .jdf-plates-draw--pair { gap: 10px; }

/* ===== THE TAXONOMY CARD (`list`): THE GLOSSARY PAGE (owner 2026-10-06) =====
   The taxonomy set as a page of a dictionary (about-fig-plates.js
   buildList), on the plates' own paper with its double hairline: a running
   head ("Categories") over a rule, then an entry per category — the
   headword in bold, the definition (the category's question) run in after
   it at reading size, every line after the first indented under the
   headword, as a dictionary hangs its entries. The spark's headword is
   italic (a loanword) with its pronunciation. The overall grade is the last entry,
   under a rule, its five grades in a row beneath its question. */
.jdf-plates--list {
  --gl-hang: 1.25em;        /* the entry's hanging indent */
  --gl-q: 1.08rem;          /* the question: the reading size */
  padding: 22px 26px 30px;   /* a little more room under the grade's sheet (owner, 2026-10-06) */
}
/* the page: the plates' lighter paper, set off as a plate sets its prompt */
.jdf-plates-sheet {
  padding: 16px 24px 8px;
  background: var(--jd-plate-paper, #f8f3e2);
  border: 1px solid rgba(55, 65, 79, 0.42);
  box-shadow: 0 3px 8px -4px rgba(46, 34, 12, 0.45);
}
/* the running head: the page's title, over a rule */
.jdf-plates-guide {
  display: block; text-align: center;
  margin: 0 0 16px; padding-bottom: 7px;
  border-bottom: 3px double var(--pl-rule-2);
  font-family: var(--pl-form); font-size: 0.6rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--pl-ink-2);
}
.jdf-plates-gloss { margin: 0; }
/* an entry: headword, then its definition run in; the turnover lines hang */
.jdf-plates-ent {
  margin: 0 0 17px; padding-left: var(--gl-hang);
  font-family: var(--pl-form); font-size: var(--gl-q); line-height: 1.5;
}
.jdf-plates-hw {
  display: inline; margin: 0 0.4em 0 calc(-1 * var(--gl-hang));
  font-weight: 700; font-size: 1.08rem; color: #1f2530;
}
.jdf-plates-hw--loan { font-style: italic; }
.jdf-plates-def { display: inline; margin: 0; }
.jdf-plates-q { color: #262d38; }
/* the loanword's pronunciation, between backslashes, as a glossary sets it */
.jdf-plates-say {
  margin-right: 0.5em;
  font-size: 0.9em; color: var(--pl-ink-2); white-space: nowrap;
}
.jdf-plates-sep { margin: 0 0.45em; color: var(--pl-rule); }
/* the overall grade: an entry of its own on the card, under the page */
/* the overall grade's own sheet, under the categories' (owner, 2026-10-06) */
.jdf-plates-sheet--grade { margin-top: 18px; padding: 16px 24px 18px; }
.jdf-plates-gloss--grade { margin: 0; padding: 0 0 0 1px; }
.jdf-plates-ent--grade { margin: 0; }
.jdf-plates-ranks { display: block; margin: 9px 0 0; }
/* the graded row: five grades, best to worst */
.jdf-plates-scale {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  --pl-gauge-w: 100%; --pl-gauge-h: 10px; --pl-mark: 1.12rem;
}
.jdf-plates-grade {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0;
  padding: 2px 10px 0;
  border-left: 1px solid var(--pl-rule-2);
}
.jdf-plates-grade:first-child { border-left: 0; padding-left: 0; }
.jdf-plates-grade:last-child { padding-right: 0; }

/* ---- the phone: the same page, narrower; the grades become a ladder ------ */
.jd-about--phone .jdf-plates--list { --gl-q: 1rem; --gl-hang: 1em; padding: 16px 14px 22px; }
.jd-about--phone .jdf-plates-sheet { padding: 10px 13px 2px; }
.jd-about--phone .jdf-plates-guide { letter-spacing: 0.14em; }
.jd-about--phone .jdf-plates-gloss--grade { padding: 0; }
.jd-about--phone .jdf-plates-sheet--grade { margin-top: 14px; padding: 12px 13px 14px; }
.jd-about--phone .jdf-plates-hw { font-size: 1.02rem; }
.jd-about--phone .jdf-plates-ent { margin-bottom: 14px; }
.jd-about--phone .jdf-plates-scale { grid-template-columns: minmax(0, 1fr); --pl-gauge-w: 92px; --pl-gauge-h: 9px; --pl-mark: 1.02rem; }
.jd-about--phone .jdf-plates-grade {
  flex-direction: row; align-items: center; gap: 12px;
  padding: 4px 0 3px; border-left: 0; border-top: 1px solid var(--pl-rule-2);
}
.jd-about--phone .jdf-plates-grade:first-child { border-top: 0; }