/* about-fig-pedestal.css — styles for about-fig-pedestal.js (about rework, 2026-10-05).

   THE INSTRUMENT, PLAYED: a read-only recreation of two of the rating
   instrument's cards in one DOM — the podium (junk-drawer.css .jd-pod,
   .jd-pod-how, the tray) and the margins card (.jd-ped, .jd-ped-pill,
   .jd-ped-qo) — as restyled on main (B4, merged 2026-10-05), under this
   module's own prefix. The instrument's tokens are scoped to its scrim, so
   the ones used here are restated at the same values. A later restyle has
   to be brought along by hand.

   The script sets the state on the root: data-t (the title), data-a (band
   A: the podium's instruction or the pills), data-c (band C: the tray, the
   question, or the six scores), .is-ped (the podium or the pedestals), and
   every height inline. Both bands keep one fixed height whatever they
   hold, so the card's height never changes (the engine fits to it).
   .is-measure is the scores step (the readings filling, pedestals lit).
   Designed at the figure card's 640px; a phone (.jdf-ped--phone) shows the
   finished margins card with the ballot and the readings, reflowed to ~358px. */

.jdf-ped {
  /* the instrument's roles (junk-drawer.css, the scrim's tokens) */
  --paper: #ece0bf;
  --paper-hi: #f4ead0;
  --ink: #33240f;
  --ink-2: rgba(51, 36, 15, 0.82);
  --rule: rgba(74, 53, 18, 0.40);
  --rule-2: rgba(74, 53, 18, 0.19);
  --mark: #4b4030;                    /* graphite: the rater's marks */
  --here: var(--jd-here, #b3402f);    /* where you are, and nothing else */
  --brass-edge: #a5852f;
  --band-0: rgba(196, 146, 58, 0.34);
  --band-1: rgba(108, 140, 96, 0.34);
  --band-2: rgba(84, 112, 150, 0.30);
  --band-0-on: rgba(196, 146, 58, 0.62);
  --band-1-on: rgba(108, 140, 96, 0.60);
  --band-2-on: rgba(84, 112, 150, 0.55);
  --font-text: "Spectral", Georgia, "Times New Roman", serif;
  --font-label: var(--jd-font-mono, "Courier Prime", "Courier New", monospace);
  --font-hand: var(--jd-font-hand, "Bradley Hand", "Segoe Print", cursive);
  --tease: cubic-bezier(.25, .8, .25, 1);
  /* the measure at 640px */
  --pw: 116px;      /* one print: wide … */
  --ph: 148px;      /* … and tall: a portrait plate (owner, 2026-10-05) */
  --lab: 24px;      /* the print's top band: its "Drawing C" */
  --gau: 20px;      /* the print's foot band: its grade bar */
  --pbase: 40px;    /* the podium: the 4th's block */
  --pstep: 16px;    /* the podium: one place over the next */
  --w1: 139px;      /* the podium: one block, four across the 592px body */
  --gap1: 12px;     /* the podium: between blocks */
  --gut: 36px;      /* the pedestals: between them */
  --b: 40px;        /* the pedestals: the bare base */
  --notch: 18px;    /* one notch of margin */
  --shim: 5px;      /* the brass shim */
  --dur: 700ms;     /* a height's move (a drag sets its own) */
  --band-a: 48px;
  --band-c: 226px;

  position: relative;
  box-sizing: border-box;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px; line-height: 1.45;
  background: var(--paper) var(--jd-grain-url, none);
  border: 1px solid rgba(48, 38, 20, 0.55);
  box-shadow: 4px 8px 16px -6px rgba(6, 3, 0, 0.45);
}
/* the printed double border */
.jdf-ped::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid var(--rule);
}
/* the site's element rules stop at the card */
.jdf-ped :where(p, ul, ol, li) {
  margin: 0; padding: 0; list-style: none;
  font: inherit; color: inherit; letter-spacing: inherit;
}

/* ---- the title row: the card's title, the prompt at the right ------------ */
.jdf-ped-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 5px; height: 44px; padding: 0 18px; box-sizing: border-box;
  border-bottom: 1px solid var(--rule);
}
.jdf-ped-titles { position: relative; flex: 0 0 auto; height: 20px; min-width: 205px; }   /* the widest title ("Six comparisons") stacked in place: a long prompt beside it must never run under it */
.jdf-ped-title {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-family: var(--font-text); font-weight: 700; font-size: 16px; line-height: 20px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  transition: opacity 300ms ease;
}
.jdf-ped:not([data-t="rank"]) .jdf-ped-title.is-rank,
.jdf-ped:not([data-t="gaps"]) .jdf-ped-title.is-gaps,
.jdf-ped:not([data-t="scores"]) .jdf-ped-title.is-scores { opacity: 0; visibility: hidden; }
.jdf-ped-prompt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.jdf-ped-prompt-k {
  font-family: var(--font-label); font-size: 12px; line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-2);
}
.jdf-ped-prompt-v {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-style: italic; font-size: 16px; line-height: 1.2;
}

.jdf-ped-body { position: relative; padding: 14px 24px 18px; }

/* ---- band A: the podium's one instruction, then the sentence pills ------- */
.jdf-ped-band-a { position: relative; height: var(--band-a); margin-bottom: 12px; }
/* one leaves, then the other arrives: never both at once. The arriving
   side fades its OPACITY only: a delayed visibility here would blank it
   for a beat whenever an ancestor turns visible (the engine's ghost
   handoff hides the real card until it lands, about.css). Only the
   leaving side delays its visibility, until its fade is done. */
.jdf-ped-how, .jdf-ped-pills {
  position: absolute; left: 0; right: 0; top: 0;
  transition: opacity 360ms ease 280ms;
}
/* the podium's question and its line of how, set like the margins card's
   question block (.jd-pod-how in the instrument, owner 2026-10-06) */
.jdf-ped-how { top: 50%; transform: translateY(-50%); }
.jdf-ped-how-ask { margin: 0 0 4px; font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--ink); }
.jdf-ped-how-hint { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.jdf-ped[data-a="pills"] .jdf-ped-how,
.jdf-ped[data-a="how"] .jdf-ped-pills { opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 0s linear 260ms; }

/* THE PILL (B4): one per adjacent pair in ONE row of equal columns — the
   places in the label role over the answer's word in the meta role; open
   (an outline), done (graphite), the pair on screen ringed red */
.jdf-ped-pills {
  display: grid; grid-template-columns: repeat(var(--pairs, 3), minmax(0, 1fr)); gap: 6px;
}
.jdf-ped-pill {
  position: relative; min-width: 0; height: 44px; padding: 0 8px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center; overflow: hidden;
  font-family: var(--font-label); font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 500ms ease;
}
.jdf-ped-pl1, .jdf-ped-pl2 { display: block; white-space: nowrap; }
.jdf-ped-pl2 { font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.jdf-ped-gt { font-style: normal; margin: 0 3px; }
.jdf-ped-sw {
  display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; box-sizing: border-box;
  border: 1px solid rgba(75, 64, 48, 0.45);
}
.jdf-ped-sw[data-m="0"] { background: var(--band-0-on); }
.jdf-ped-sw[data-m="1"] { background: var(--band-1-on); }
.jdf-ped-sw[data-m="2"] { background: var(--band-2-on); }
.jdf-ped-blank {
  display: inline-block; width: 2.4em; height: 0.9em; vertical-align: -0.1em;
  border-bottom: 1.5px solid currentColor; opacity: 0.75;
}
.jdf-ped-pill.is-done { background: var(--mark); border-color: var(--mark); color: var(--paper-hi); }
.jdf-ped-pill.is-done .jdf-ped-sw { border-color: rgba(244, 234, 208, 0.6); }
.jdf-ped-pill.is-current { border: 2px solid var(--here); background: var(--paper-hi); color: var(--here); }
.jdf-ped-pill.is-bump { box-shadow: 0 0 0 3px rgba(75, 64, 48, 0.4); transition: none; }

/* ---- the podium ------------------------------------------------------------ */
.jdf-ped-pod { position: relative; }
.jdf-ped-row {
  display: flex; align-items: flex-end; justify-content: center;
  gap: var(--gap1);
  height: calc(var(--ph) + 6px + var(--pbase) + var(--rise, 0px));
  transition: gap 700ms var(--tease);
}
.jdf-ped.is-ped .jdf-ped-row { gap: var(--gut); }
.jdf-ped-tier {
  position: relative; flex: 0 0 var(--w1);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: flex-basis 700ms var(--tease), opacity 260ms ease;
}
.jdf-ped.is-ped .jdf-ped-tier { flex-basis: var(--pw); }
/* every pedestal outside the pair being asked steps back whole */
/* (owner, 2026-10-07: dimmed further, as on the real card — 0.62 → 0.3 —
   and the pair's own prints lift a little off the paper) */
.jdf-ped-tier.is-dim { opacity: 0.3; }
.jdf-ped:has(.jdf-ped-tier.is-dim) .jdf-ped-tier:not(.is-dim) .jdf-ped-print {
  filter: drop-shadow(0 4px 6px rgba(46, 34, 12, 0.32));
}
.jdf-ped-stand {
  position: relative; height: calc(var(--ph) + 6px);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 3px; box-sizing: border-box;
}
/* the empty place: a dashed square where its print will stand */
.jdf-ped-hole {
  position: absolute; left: 50%; bottom: 3px; width: var(--pw); height: var(--ph);
  transform: translateX(-50%); box-sizing: border-box;
  border: 1px dashed rgba(74, 53, 18, 0.34); background: rgba(255, 250, 232, 0.22);
}
.jdf-ped.is-ped .jdf-ped-hole { display: none; }

/* THE PRINT: graph paper, brass corners, "Drawing A" pencilled, the grade
   as the working podium's neutral bar */
.jdf-ped-print { position: relative; z-index: 2; width: var(--pw); }
.jdf-ped-print.is-flying { z-index: 30; }
/* under the hand: the print lifts a hair, as a pointer over it would */
.jdf-ped-art { transition: transform 180ms ease, box-shadow 180ms ease; }
.jdf-ped-print.is-hover .jdf-ped-art {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px -4px rgba(46, 34, 12, 0.55), 0 1px 3px rgba(46, 34, 12, 0.35);
}
.jdf-ped-art {
  position: relative; width: 100%; height: var(--ph);
  background:
    repeating-linear-gradient(0deg,  var(--jd-graph-rule, rgba(74, 98, 138, 0.17)) 0 1px, transparent 1px calc(var(--jd-cell, 13px) * 5)),
    repeating-linear-gradient(90deg, var(--jd-graph-rule, rgba(74, 98, 138, 0.17)) 0 1px, transparent 1px calc(var(--jd-cell, 13px) * 5)),
    repeating-linear-gradient(0deg,  rgba(74, 98, 138, 0.07) 0 1px, transparent 1px var(--jd-cell, 13px)),
    repeating-linear-gradient(90deg, rgba(74, 98, 138, 0.07) 0 1px, transparent 1px var(--jd-cell, 13px)),
    var(--jd-plate-paper, #f8f3e2);
  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);
}
/* THREE BANDS: the label, the drawing, the gauge; the drawing's box stops
   short of both bands and letterboxes inside it (preserveAspectRatio's
   default meet), so no aspect ratio reaches the words or the bar */
.jdf-ped-art-in { position: absolute; top: calc(var(--lab) + 2px); bottom: calc(var(--gau) + 2px); left: 7px; right: 7px; overflow: hidden; }
.jdf-ped-art-in svg { display: block; width: 100%; height: 100%; }
.jdf-ped-corner {
  position: absolute; z-index: 2; width: 14px; height: 14px;
  background: linear-gradient(135deg, #dfcd9a, #c3aa6e);
  filter: drop-shadow(0 1px 1.5px rgba(46, 34, 12, 0.45));
}
.jdf-ped-corner.tl { top: -4px; left: -4px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.jdf-ped-corner.tr { top: -4px; right: -4px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.jdf-ped-corner.bl { bottom: -4px; left: -4px; clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(45deg, #c3aa6e, #dfcd9a); }
.jdf-ped-corner.br { bottom: -4px; right: -4px; clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(-45deg, #c3aa6e, #dfcd9a); }
.jdf-ped-tag {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: var(--lab);
  display: flex; align-items: center; justify-content: center;
  text-align: center; white-space: nowrap;
  font-family: var(--font-hand); font-size: 15px; line-height: 1.1; letter-spacing: -0.04em;
  color: var(--mark);
}
.jdf-ped-seg {
  position: absolute; z-index: 2; bottom: calc((var(--gau) - 7px) / 2); left: 10px; right: 10px;
  display: flex; gap: 1px; height: 7px; box-sizing: border-box;
  border: 1px solid currentColor; color: var(--mark);
  background: rgba(255, 252, 240, 0.85);
}
/* the report card's grade ramp (junk-drawer.css .rc-bar.rc-g1 … rc-g5,
   Utility → Prime), restated here: those rules key on rc-* classes this
   card does not wear */
.jdf-ped-seg.jdf-ped-g5 { color: #0b6a1f; }   /* prime: dark green */
.jdf-ped-seg.jdf-ped-g4 { color: #46761a; }   /* choice: leaf green */
.jdf-ped-seg.jdf-ped-g3 { color: #a06200; }   /* select: ochre */
.jdf-ped-seg.jdf-ped-g2 { color: #b0490f; }   /* standard: burnt orange */
.jdf-ped-seg.jdf-ped-g1 { color: #8f1d12; }   /* utility: deep red */
.jdf-ped-seg i { flex: 1 1 0; display: block; }
.jdf-ped-seg i.on { background: currentColor; }

/* THE BLOCK: the podium's step (the ordinal at its top) or the pedestal
   (the base plus a course per margin, the ordinal in the base) */
.jdf-ped-block {
  position: relative; overflow: hidden;
  border: 1px solid var(--rule); border-bottom: 0;
  background: var(--paper-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 240, 0.8);
  font-family: var(--font-label); font-weight: 700; font-size: 13px; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
  color: var(--ink);
  transition: height var(--dur) ease-in-out, box-shadow 300ms ease;
}
.jdf-ped-base {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 8px;
  transition: height var(--dur) ease-in-out, padding-top var(--dur) ease-in-out;
}
.jdf-ped.is-ped .jdf-ped-base { padding-top: calc(var(--b) / 2 - 6.5px); }
/* a COURSE: one margin's height, in that pair's band, a hairline at every
   notch, level under every pedestal it runs beneath */
.jdf-ped-course {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid var(--rule);
  background:
    repeating-linear-gradient(to top, transparent 0 calc(var(--notch) - 1px),
      rgba(74, 53, 18, 0.22) calc(var(--notch) - 1px) var(--notch)),
    var(--wash);
  transition: height var(--dur) ease-in-out, bottom var(--dur) ease-in-out, box-shadow 200ms ease;
}
.jdf-ped-course.is-zero { border-top: 0; }
.jdf-ped-course[data-m="0"] { --wash: var(--band-0); }
.jdf-ped-course[data-m="1"] { --wash: var(--band-1); }
.jdf-ped-course[data-m="2"] { --wash: var(--band-2); }
.jdf-ped-course.is-active[data-m="0"] { --wash: var(--band-0-on); }
.jdf-ped-course.is-active[data-m="1"] { --wash: var(--band-1-on); }
.jdf-ped-course.is-active[data-m="2"] { --wash: var(--band-2-on); }
.jdf-ped-course.is-active:not(.is-zero) { border-top: 2px solid var(--mark); }
.jdf-ped-course.is-shim {
  background: linear-gradient(180deg, #f3dc9c 0%, #c99a46 55%, #8d6528 100%);
  border-top: 1px solid var(--brass-edge);
}
/* at rest, the strata a step stronger, so the tan and the green read apart */
.jdf-ped[data-c="scores"] .jdf-ped-course[data-m="0"],
.jdf-ped[data-c="both"] .jdf-ped-course[data-m="0"] { --wash: rgba(196, 146, 58, 0.62); }
.jdf-ped[data-c="scores"] .jdf-ped-course[data-m="1"],
.jdf-ped[data-c="both"] .jdf-ped-course[data-m="1"] { --wash: rgba(108, 140, 96, 0.62); }
.jdf-ped[data-c="scores"] .jdf-ped-course[data-m="2"],
.jdf-ped[data-c="both"] .jdf-ped-course[data-m="2"] { --wash: rgba(84, 112, 150, 0.55); }
/* in the hand, the height follows the cursor at an even pace */
.jdf-ped.is-drag .jdf-ped-block, .jdf-ped.is-drag .jdf-ped-base, .jdf-ped.is-drag .jdf-ped-course {
  transition-timing-function: linear;
}
/* riding along: lifted by a margin further down the line */
.jdf-ped-tier.is-carried .jdf-ped-block {
  box-shadow: inset 0 1px 0 rgba(255, 255, 240, 0.8), 0 0 0 2px rgba(75, 64, 48, 0.35);
}
.jdf-ped-floor { height: 3px; background: var(--rule); margin: 0 2px; }

/* ---- band C: the tray, the question, the six scores ----------------------- */
.jdf-ped-band-c { position: relative; height: var(--band-c); margin-top: 16px; }
.jdf-ped-tray, .jdf-ped-q, .jdf-ped-scores {
  position: absolute; left: 0; right: 0; top: 0;
  transition: opacity 360ms ease 280ms;
}
.jdf-ped:not([data-c="tray"]) .jdf-ped-tray,
.jdf-ped:not([data-c="q"]):not([data-c="both"]) .jdf-ped-q,
.jdf-ped:not([data-c="scores"]):not([data-c="both"]) .jdf-ped-scores {
  opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 0s linear 260ms;
}
/* THE TRAY: one fixed slot per drawing between two dashed rules; a slot
   left behind is pencilled with where its drawing went */
.jdf-ped-tray {
  top: calc((var(--band-c) - var(--ph) - 40px) / 2);   /* centred in the band */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center;
  padding: 14px 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule);
}
.jdf-ped-cell {
  position: relative; width: calc(var(--pw) + 10px); height: calc(var(--ph) + 10px); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed transparent;
}
.jdf-ped-cell.is-gone { border-color: var(--rule); }
.jdf-ped-seat { position: relative; z-index: 2; }
.jdf-ped-seat:empty { display: none; }
.jdf-ped-pen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; transition: opacity 250ms ease 0s;
}
.jdf-ped-cell.is-gone .jdf-ped-pen { opacity: 1; transition-delay: 600ms; }
.jdf-ped-pen-l { font-family: var(--font-hand); font-size: 15px; line-height: 1; color: var(--mark); }
.jdf-ped-pen-w { font-family: var(--font-label); font-size: 12px; line-height: 1.2; color: var(--ink-2); }

/* THE QUESTION: the lede, the question, the four answers as a row of cells
   (THE CHOICE LINE's circle and pencil tick, the stacked-blocks icon) */
.jdf-ped-q-said { font-size: 17px; line-height: 1.4; color: var(--ink-2); min-height: 1.4em; }
.jdf-ped-q-ask { margin: 4px 0 12px; font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--ink); }
.jdf-ped-q-opts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1.5px solid var(--ink-2); border-bottom: 1px solid var(--rule);
}
.jdf-ped-qo {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 4px; text-align: center;
  border-left: 1px solid var(--rule-2);
  font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--ink);
  transition: background-color 250ms ease;
}
.jdf-ped-qo:first-child { border-left: 0; }
.jdf-ped-qo.is-on { background: var(--paper-hi); }
.jdf-ped-pico {
  display: flex; align-items: flex-end; gap: 2px; height: 22px;
  border-bottom: 1.5px solid var(--mark);
}
.jdf-ped-p { display: flex; flex-direction: column-reverse; width: 12px; }
.jdf-ped-bs { display: block; height: 5px; background: var(--paper-hi); border: 1px solid var(--mark); border-bottom: 0; }
.jdf-ped-sg { display: block; height: 5px; background: rgba(75, 64, 48, 0.22); border: 1px solid var(--mark); border-bottom: 0; }
.jdf-ped-sg.is-shim { height: 3px; background: var(--jd-bench-gold, #c9a84c); border-color: var(--brass-edge); }
.jdf-ped-box {
  position: relative; display: block; width: 22px; height: 22px; box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--ink-2); background: var(--paper-hi);
}
.jdf-ped-qo.is-on .jdf-ped-box { border-color: var(--ink); }
.jdf-ped-tick {
  display: none; position: absolute; left: -1px; top: -10px;
  width: 30px; height: 30px; max-width: none; overflow: visible; color: var(--mark);
}
.jdf-ped-qo.is-on .jdf-ped-tick { display: block; }

/* THE NEXT BUTTON (junk-drawer.css .jd-turn-go): the brass primary, the
   label role; a dashed brass rule while the pair waits for its answer */
.jdf-ped-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.jdf-ped-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 248px; height: 40px; box-sizing: border-box; border-radius: 2px;
  font-family: var(--font-label); font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(51, 36, 15, 0.6); background: var(--paper-hi);
  border: 1.5px dashed var(--brass-edge);
  transition: background 200ms ease, color 200ms ease, transform 90ms ease, box-shadow 90ms ease;
}
.jdf-ped-go.is-armed {
  color: #221809;
  background: linear-gradient(180deg, var(--jd-bench-gold-hi, #e5c06b), var(--jd-bench-gold, #c9a84c));
  border: 1px solid var(--brass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 244, 205, 0.65), 0 1px 2px rgba(45, 30, 8, 0.35);
}
/* the press, as the real one gives: down a pixel, its shadow gone */
.jdf-ped-go.is-pressed { transform: translateY(1px); box-shadow: none; filter: brightness(0.94); }

/* ---- THE SCORES: one row per pair on the seven-point scale ----------------
   The pedestals stay as they stood; under them, each pair and the scale's
   seven circles, a printed survey's bubbles, the reading filled in solid
   ink (owner, 2026-10-06: smaller, more professional, no tick, no coloured
   tags). A derived row adds one quiet note of how. While the rows fill,
   the pair being read stands forward and its pills light. */
.jdf-ped-pill.is-lit { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); transition: box-shadow 160ms ease; }
.jdf-ped.is-measure .jdf-ped-tier.is-dim { opacity: 0.3; }
/* reading, no course is the pair on screen any more */
.jdf-ped.is-measure .jdf-ped-course.is-active:not(.is-zero) { border-top: 1px solid var(--rule); }

.jdf-ped-scores {
  --c-l: 64px;      /* the pair; the scale takes every pixel after it */
  --lc: 15px;       /* a circle */
  padding-right: 14px;   /* room for the last end word to stand centred */
}
.jdf-ped-shead, .jdf-ped-srow {
  display: grid; grid-template-columns: var(--c-l) minmax(0, 1fr);
  column-gap: 12px; align-items: center;
}
.jdf-ped-shead { height: 44px; align-items: end; }
.jdf-ped-sh-scale { grid-column: 2; position: relative; height: 44px; }
/* THE LETTERED ROWS' HEAD (2026-10-09): a bracket over each side's circles
   ("◂ Left better" / "Right better ▸"), and under them each circle's
   degree, centred over its column ("same" in the middle, set firmer) */
.jdf-ped-sh-br {
  position: absolute; top: 0; height: 18px; box-sizing: border-box;
  left: calc(var(--a) * 100% / var(--pts, 7) + 6px);
  width: calc((var(--b) - var(--a)) * 100% / var(--pts, 7) - 12px);
  border-bottom: 1px solid var(--ink-2);
}
.jdf-ped-sh-br::before, .jdf-ped-sh-br::after {
  content: ""; position: absolute; bottom: -1px; width: 1px; height: 5px; background: var(--ink-2);
}
.jdf-ped-sh-br::before { left: 0; }
.jdf-ped-sh-br::after { right: 0; }
.jdf-ped-sh-brw {
  position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; white-space: nowrap;
  font-size: 13px; font-weight: 700; line-height: 1; color: var(--ink);
}
.jdf-ped-sh-deg {
  position: absolute; bottom: 4px; left: calc((var(--at) + 0.5) * 100% / var(--pts, 7));
  transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; font-style: italic; line-height: 1; color: var(--ink-2);
}
.jdf-ped-sh-deg.is-mid { font-style: normal; font-weight: 700; color: var(--ink); }
.jdf-ped-sgroup { margin-top: 3px; }
.jdf-ped-scap {
  display: flex; align-items: center; gap: 8px; height: 17px;
  font-family: var(--font-label); font-size: 11px; line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-2);
}
.jdf-ped-scap::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--rule-2); }
.jdf-ped-sgroup.is-derived .jdf-ped-scap::after { border-top-style: dashed; }
.jdf-ped-srow {
  height: 24px;
  opacity: 0; transform: translateY(3px); transition: opacity 450ms ease, transform 450ms ease;
}
.jdf-ped-srow.is-in { opacity: 1; transform: none; }
.jdf-ped-sl {
  grid-column: 1; display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-label); font-size: 13px; font-weight: 700; line-height: 1;
  white-space: nowrap; color: var(--ink);
}
/* the pair: two letters and a quiet "vs" between them */
.jdf-ped-sl-l { font-weight: 700; font-size: 14px; min-width: 0.8em; text-align: center; }
.jdf-ped-srow:not(.is-asked) .jdf-ped-sl-l { font-weight: 600; }
.jdf-ped-sl-vs {
  font-family: var(--font-text); font-style: italic; font-weight: 400; font-size: 12px; color: var(--ink-2);
}
/* THE SEVEN CIRCLES: a printed survey's row of bubbles — a fine rule on
   the paper, the middle one a shade firmer, the reading filled in ink */
.jdf-ped-lik {
  grid-column: 2; display: grid; grid-template-columns: repeat(var(--pts, 7), minmax(0, 1fr));
  justify-items: center; align-items: center;
}
.jdf-ped-lc {
  position: relative; display: block; width: var(--lc); height: var(--lc); box-sizing: border-box;
  border-radius: 50%; border: 1px solid rgba(51, 36, 15, 0.5); background: transparent;
}
.jdf-ped-lc.is-mid { border-color: var(--ink-2); border-width: 1.25px; }
.jdf-ped-lc.is-on::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--ink);
  transform: scale(0); transition: transform 220ms cubic-bezier(.3, 1.4, .5, 1) 150ms;
}
.jdf-ped-srow.is-in .jdf-ped-lc.is-on::after { transform: scale(1); }
.jdf-ped-lc.is-on { border-color: var(--ink); }

/* ---- the cursor ------------------------------------------------------------- */
.jdf-ped-cursor {
  position: absolute; z-index: 40; left: 0; top: 0; width: 24px; height: 24px;
  pointer-events: none; opacity: 0; transition: opacity 220ms ease;
  filter: drop-shadow(1px 2px 1.5px rgba(30, 20, 5, 0.35));
}
.jdf-ped-cursor.is-on { opacity: 1; }
.jdf-ped-cursor svg { display: block; }
/* the pointer, then the closed hand while it holds something */
.jdf-ped-cur-grab { position: absolute; left: -9px; top: -8px; display: none; }
.jdf-ped-cursor.is-down .jdf-ped-cur-pt { display: none; }
.jdf-ped-cursor.is-down .jdf-ped-cur-grab { display: block; }
.jdf-ped-cur-pt { display: block; }
/* a click: the pointer dips */
.jdf-ped-cursor .jdf-ped-cur-pt { transition: transform 90ms ease; transform-origin: 3px 2px; }
.jdf-ped-cursor.is-click .jdf-ped-cur-pt { transform: scale(0.88); }

@media (prefers-reduced-motion: reduce) {
  .jdf-ped *, .jdf-ped *::before { transition: none !important; animation: none !important; }
  .jdf-ped-cursor { display: none; }
}

/* ---- THE PHONE: the finished margins card, the ballot and the scores ------- */
.jdf-ped--phone {
  --pw: 72px; --ph: 94px; --lab: 16px; --gau: 13px;
  --gut: 12px; --b: 32px; --notch: 12px; --shim: 4px;
  --w1: 72px; --gap1: 12px;
}
.jdf-ped--phone .jdf-ped-head { padding: 0 12px; }
/* the phone keeps the desktop's rule: room for the widest title
   ("Six comparisons") so a long prompt never runs under it; the title a
   size down and the prompt without its "Prompt" label, so the words fit */
.jdf-ped--phone .jdf-ped-titles { min-width: 160px; }
.jdf-ped--phone .jdf-ped-title { font-size: 14px; }
.jdf-ped--phone .jdf-ped-prompt-k { display: none; }
.jdf-ped--phone .jdf-ped-prompt-v { font-size: 15px; }
.jdf-ped--phone .jdf-ped-body { padding: 12px 12px 14px; }
.jdf-ped--phone .jdf-ped-pill { padding: 0 4px; font-size: 12px; letter-spacing: 0.04em; }
.jdf-ped--phone .jdf-ped-sw { margin-right: 3px; }
.jdf-ped--phone .jdf-ped-corner { width: 11px; height: 11px; }
.jdf-ped--phone .jdf-ped-tag { font-size: 12px; }
.jdf-ped--phone .jdf-ped-art-in { left: 4px; right: 4px; top: calc(var(--lab) + 1px); bottom: calc(var(--gau) + 1px); }
.jdf-ped--phone .jdf-ped-seg { bottom: calc((var(--gau) - 6px) / 2); left: 6px; right: 6px; height: 6px; }
.jdf-ped--phone .jdf-ped-block { font-size: 12px; }
.jdf-ped--phone .jdf-ped-band-c { height: auto; margin-top: 12px; }
.jdf-ped--phone .jdf-ped-tray { display: none; }
.jdf-ped--phone .jdf-ped-q, .jdf-ped--phone .jdf-ped-scores { position: static; }
.jdf-ped--phone .jdf-ped-actions { display: none; }
.jdf-ped--phone .jdf-ped-scores { margin-top: 16px; }
.jdf-ped--phone .jdf-ped-q-said { font-size: 15px; }
.jdf-ped--phone .jdf-ped-q-ask { font-size: 18px; margin-bottom: 8px; }
.jdf-ped--phone .jdf-ped-qo { gap: 6px; padding: 8px 2px; font-size: 13px; line-height: 1.2; }

/* the phone: each row one line — the pair, then the seven circles across
   the rest under the scale's head */
.jdf-ped--phone .jdf-ped-scores { position: relative; margin-top: 18px; padding-right: 0; --lc: 15px; }
.jdf-ped--phone .jdf-ped-shead, .jdf-ped--phone .jdf-ped-srow { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
.jdf-ped--phone .jdf-ped-scores { --c-l: 52px; }
.jdf-ped--phone .jdf-ped-sh-brw { font-size: 11.5px; }
.jdf-ped--phone .jdf-ped-sh-deg { font-size: 10px; }
.jdf-ped--phone .jdf-ped-scap { font-size: 10px; letter-spacing: 0.04em; height: 16px; margin-top: 4px; }
.jdf-ped--phone .jdf-ped-srow { height: 26px; }
.jdf-ped--phone .jdf-ped-sl-l { font-size: 13px; }
.jdf-ped--phone .jdf-ped-lik { grid-column: 2; }