/* ============================================================================
   PROSPERO'S JUKEBOX v2 — pj2.css · the reading desk and the conjurer's cabinet
   ----------------------------------------------------------------------------
   PLAN-GRAPHICS §5: ONE shared frame (dark wood-and-brass, grid-snapped pixel
   art, 1U borders and stepped corners) with track-skinned inserts. OWNER
   RULING overriding §5's shelf: the tracks are v1-style horizontal TABS above
   the folio, each in its own track palette; the active tab reads raised/open.
   §4: the event log is
   scribal annotation — VT323 body, rubricated tags, illuminated capitals in
   Jacquard 12, three steps of ink aging. §8 Q1: NO CRT/scanline effects —
   the retro carrier is paper and pixels, not phosphor.

   THE SKINNING CONTRACT: every per-track custom property below is set by a
   [data-track="…"] block on .pj2-app, and every hex in those blocks is
   VERBATIM from pj2-skin.js's palette registry (PALETTES / INK_AGE — §2's
   locked ramps). Cabinet chrome (wood, brass, captions) is the CONSTANT
   frame and keeps its own small inventory, inherited from the mockups'
   proven chrome strips. The art-pixel unit U = 2 CSS px: all chrome borders,
   bevels and dither stripes are multiples of 2px.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   THE DESK — the site's near-black void; the folio floats on it
   ------------------------------------------------------------------------- */
.pj2-desk {
  background: #0b0a08;
  padding: 26px 12px 48px;
  font-family: "VT323", monospace;
}

.pj2-app {
  max-width: 1392px;
  margin: 0 auto;

  /* chrome constants — the cabinet's own wood-and-brass inventory */
  --pj2c-wood-hi: #201613;
  --pj2c-wood: #17120b;
  --pj2c-wood-lo: #120c09;
  --pj2c-wood-edge: #0b0705;
  --pj2c-wood-bevel: #2e211a;
  --pj2c-brass: #3a2d18;
  --pj2c-brass-hi: #6e5626;
  --pj2c-brass-lo: #1d1509;
  --pj2c-caption: #6b6252;
  --pj2c-bone: #c7b795;
  --pj2c-slot: #0f0c07;
  --pj2c-wax-rim: #5e2018;
}

/* ---------------------------------------------------------------------------
   PER-TRACK SKINS — hexes verbatim from pj2-skin.js PALETTES / INK_AGE
   ------------------------------------------------------------------------- */
/* NIGHT FOLIO (PLAN-NIGHT-FOLIO §C): the folio interior is the track's
   night ground; parchment survives only in the thin frame + the tabs.
   Library's apparatus ink is the amber phosphor ramp. */
.pj2-app[data-track="library"] {
  --pj2-void: #0b0a08;
  --pj2-paper: #0a0805;        /* the night ground — one surface everywhere */
  --pj2-paper-lite: #120d07;   /* the grain lift                            */
  --pj2-paper-deep: #060402;
  --pj2-paper-edge: #b49a68;   /* the thin parchment FRAME tone             */
  --pj2-ink0: #ffdc82;
  --pj2-ink1: #ffc878;
  --pj2-ink2: #b4823c;
  --pj2-ink3: #785f32;
  --pj2-accent: #c9a227;       /* gilt carries rubric's body-size duty on night */
  --pj2-accent2: #b0553c;      /* rubric-1: display-size accents only       */
  --pj2-gilt: #c9a227;
  --pj2-gilt2: #e8c95a;
  --pj2-age0: #ffdc82;         /* INK_AGE.library, all three steps          */
  --pj2-age1: #ffc878;
  --pj2-age2: #b4823c;
  --pj2-fill-a: #c9a227;       /* legend slider dither stripe pair          */
  --pj2-fill-b: #4d3c10;
  --pj2-mute-on: #c7b795;      /* the pixel mute square, filled = audible   */
  --pj2-head-font: "Jacquard 12", "VT323", monospace; /* §2: blackletter    */
  --pj2-head-transform: none;
  --pj2-head-spacing: 0.02em;
}

.pj2-app[data-track="sycorax"] {
  --pj2-void: #070605;
  --pj2-paper: #08070f;        /* the night ground                           */
  --pj2-paper-lite: #0e0c17;
  --pj2-paper-deep: #060509;
  --pj2-paper-edge: #453729;   /* the thin soot-rag FRAME tone               */
  --pj2-ink0: #d8cfc0;         /* bone carries ALL the data on soot          */
  --pj2-ink1: #b3a68e;
  --pj2-ink2: #7d715c;
  --pj2-ink3: #7d715c;
  --pj2-accent: #c4b5fd;       /* bright witch-light: the data-legal accent  */
  --pj2-accent2: #9b87b8;
  --pj2-gilt: #93392b;         /* blood: rubrication BESIDE bone only        */
  --pj2-gilt2: #6e2a22;
  --pj2-age0: #d8cfc0;         /* INK_AGE.sycorax                            */
  --pj2-age1: #b3a68e;
  --pj2-age2: #7d715c;
  --pj2-fill-a: #9b87b8;
  --pj2-fill-b: #2a2433;
  --pj2-mute-on: #b3a68e;
  --pj2-head-font: "Jacquard 12", "VT323", monospace; /* bone-on-soot caps  */
  --pj2-head-transform: none;
  --pj2-head-spacing: 0.02em;
}

.pj2-app[data-track="ariel"] {
  --pj2-void: #05070c;
  --pj2-paper: #06090e;        /* the night ground                           */
  --pj2-paper-lite: #0b1119;
  --pj2-paper-deep: #04060a;
  --pj2-paper-edge: #22345a;   /* the thin engraved-plate FRAME tone         */
  --pj2-ink0: #d8e4ec;         /* silver ink                                 */
  --pj2-ink1: #a8c0d4;
  --pj2-ink2: #6e8aa4;
  --pj2-ink3: #6e8aa4;
  --pj2-accent: #ecd28a;       /* gilt-1: data-legal on plate                */
  --pj2-accent2: #d4af5f;
  --pj2-gilt: #d4af5f;
  --pj2-gilt2: #ecd28a;
  --pj2-age0: #d8e4ec;         /* INK_AGE.ariel                              */
  --pj2-age1: #a8c0d4;
  --pj2-age2: #6e8aa4;
  --pj2-fill-a: #d4af5f;
  --pj2-fill-b: #4a3d22;
  --pj2-mute-on: #a04838;      /* registry rule: "rose: chrome accent (mute square) only" */
  --pj2-head-font: "VT323", monospace; /* §2: engraved small caps, not blackletter */
  --pj2-head-transform: uppercase;
  --pj2-head-spacing: 0.18em;
}

/* ---------------------------------------------------------------------------
   THE BINDING SWITCH — data-binding="parchment" on .pj2-app restores the
   windowed codex page (PR #24's dress): parchment vars + the old slim
   folio chrome. The default (night) lives in the base blocks above.
   ------------------------------------------------------------------------- */
.pj2-app[data-binding="parchment"][data-track="library"] {
  --pj2-paper: #e3d3a8;
  --pj2-paper-lite: #efe3c0;
  --pj2-paper-deep: #d0bc8c;
  --pj2-paper-edge: #8a704a;
  --pj2-ink0: #2e2114;
  --pj2-ink1: #4a3620;
  --pj2-ink2: #6e5638;
  --pj2-ink3: #93794f;
  --pj2-accent: #8e3b2c;
  --pj2-accent2: #b0553c;
  --pj2-age0: #2e2114;
  --pj2-age1: #4a3620;
  --pj2-age2: #6e5638;
}
.pj2-app[data-binding="parchment"][data-track="sycorax"] {
  --pj2-paper: #241d17;
  --pj2-paper-lite: #322820;
  --pj2-paper-deep: #1a1512;
  --pj2-paper-edge: #0d0b09;
}
.pj2-app[data-binding="parchment"][data-track="ariel"] {
  --pj2-paper: #16233f;
  --pj2-paper-lite: #22345a;
  --pj2-paper-deep: #101a30;
  --pj2-paper-edge: #05070c;
}
.pj2-app[data-binding="parchment"] .pj2-folio {
  border: 2px solid var(--pj2-paper-edge);
  border-radius: 6px;
  padding: 18px 20px 12px;
}
.pj2-app[data-binding="parchment"] .pj2-folio-grid { gap: 20px; }

/* ---------------------------------------------------------------------------
   Fallback / unsupported lines
   ------------------------------------------------------------------------- */
.pj2-nojs {
  display: block;
  max-width: 1392px;
  margin: 0 auto 14px;
  padding: 10px 14px;
  border: 2px solid #3a2d18;
  color: #c7b795;
  font-size: 18px;
  letter-spacing: 0.06em;
}
.pj2-unsupported { display: none; }
.pj2-unsupported.is-shown { display: block; }

/* ---------------------------------------------------------------------------
   THE TABS — v1's horizontal track row, restored above the folio (owner
   ruling). Three side-by-side buttons; each tab tints itself by its OWN
   data-track regardless of which book is open (v1's multi-colored tab rule —
   hexes verbatim from pj2-skin.js's registry, same values the skin blocks
   carry). The active tab is raised (taller against a flex-end baseline) and
   wears its book's paper. Pixel discipline kept: 1U (2px) borders, stepped
   1U top corners via clip-path, no glow anywhere.
   ------------------------------------------------------------------------- */
.pj2-tabs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.pj2-tab {
  flex: 1 1 0;
  min-width: 0;
  font-family: "VT323", monospace;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 8px 8px 7px;
  background: var(--tb-bg, #241d17);
  color: var(--tb-ink, #b3a68e);
  border: 2px solid var(--pj2c-wood-edge);
  box-shadow: inset 0 2px 0 var(--tb-edge, #453729);
  cursor: pointer;
  clip-path: polygon(
    0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
    calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
    100% 100%, 0 100%
  );
}
.pj2-tab:hover { color: var(--pj2c-bone); }
/* clip-path would swallow an outer outline — focus draws inside the border */
.pj2-tab:focus-visible { outline: 2px solid var(--pj2c-bone); outline-offset: -6px; }

/* each tab keeps its own palette even while idle (v1's multi-colored tab rule) */
.pj2-tab[data-track="library"] {
  --tb-bg: linear-gradient(180deg, #4a3620, #2e2114 70%);
  --tb-ink: #c9a227;
  --tb-edge: #6e5638;
  --tb-open-bg: linear-gradient(180deg, #efe3c0, #e3d3a8 75%);
  --tb-open-ink: #2e2114;
}
.pj2-tab[data-track="sycorax"] {
  --tb-bg: linear-gradient(180deg, #322820, #0d0b09 70%);
  --tb-ink: #b3a68e;
  --tb-edge: #453729;
  --tb-open-bg: linear-gradient(180deg, #322820, #241d17 75%);
  --tb-open-ink: #d8cfc0;
}
.pj2-tab[data-track="ariel"] {
  --tb-bg: linear-gradient(180deg, #22345a, #101a30 70%);
  --tb-ink: #a8c0d4;
  --tb-edge: #2e4a7a;
  --tb-open-bg: linear-gradient(180deg, #22345a, #16233f 75%);
  --tb-open-ink: #d8e4ec;
}

/* the active tab: raised/open — taller, in its book's paper, no hover shift */
.pj2-tab.is-active {
  padding: 14px 8px 9px;
  font-size: 23px;
  background: var(--tb-open-bg);
  color: var(--tb-open-ink);
  box-shadow: inset 0 2px 0 var(--tb-edge);
  cursor: default;
}
.pj2-tab.is-active:hover { color: var(--tb-open-ink); }

/* ---------------------------------------------------------------------------
   THE FOLIO — the open book: plate + margin + annotation column + footer rule.
   Stepped pixel corners (2-step, 1U each) via clip-path; the floating shadow
   rides a wrapper so drop-shadow follows the stepped outline.
   ------------------------------------------------------------------------- */
.pj2-folio-wrap {
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.8)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}
/* NIGHT FOLIO: one continuous night interior inside a single thin
   rounded-square frame (owner rulings O5/O6 + G1/G2 defaults). The
   stepped-pixel clip-path yielded to the rounded corners. */
.pj2-folio {
  background: var(--pj2-paper);
  border: 10px solid var(--pj2-paper-edge);
  border-radius: 16px;
  padding: 10px 12px 8px;
}

/* running head — title, folio number, and the transport (owner 2026-07-27:
   play/stop/reset sit above the plate so they need no scrolling) */
.pj2-folio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--pj2-ink2);
  padding: 0 4px 6px;
  margin-bottom: 10px;
}
/* the head's transport rides the right edge, a size down from the cabinet's */
.pj2-transport-head { margin-left: auto; }
.pj2-transport-head .pj2-pushplate {
  font-size: 16px;
  padding: 7px 12px;
}
.pj2-title {
  font-family: var(--pj2-head-font);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--pj2-ink0);
  text-transform: var(--pj2-head-transform);
  letter-spacing: var(--pj2-head-spacing);
}
.pj2-title .pj2-init { color: var(--pj2-accent); }
/* the running-head kicker: "Prospero's Jukebox ·" small and quiet, so the
   original song title (the owner's ruling) stays dominant */
.pj2-title .pj2-title-pre {
  font-family: "VT323", monospace;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pj2-ink2);
  margin-right: 4px;
}
/* the folio number — rehomed from the running head into the margin column
   (owner 2026-07-27), so it reads as one of the apparatus captions */
.pj2-folio-no {
  font-family: "VT323", monospace;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pj2-ink2);
  border-bottom: 1px solid var(--pj2-ink3);
  padding: 0 2px 2px;
  margin: 0;
}

/* the reading-desk grid: plate column + margin column (gaps are night-on-
   night now — invisible; kept small for layout breathing) */
.pj2-folio-grid {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.pj2-plate-col {
  flex: 1 1 auto;
  min-width: 0;
}
#pj2-plate {
  display: block;
  width: 100%;
  height: 660px;
}
.pj2-margin-col {
  flex: 0 0 402px;
  width: 402px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
#pj2-margin {
  display: block;
  width: 100%;
  height: 330px;
}

/* ---------------------------------------------------------------------------
   THE SCRIBAL LOG (§4) — DOM, precision backstop. VT323 body, rubricated
   tags, illuminated capitals (Jacquard 12), 3-step ink aging from the
   registry's INK_AGE ramps. Newest entries on top.
   ------------------------------------------------------------------------- */
.pj2-log-block {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pj2-log-head {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pj2-ink2);
  border-bottom: 1px solid var(--pj2-ink3);
  padding: 0 2px 2px;
  margin: 0 0 4px;
}
.pj2-log {
  flex: 1 1 auto;
  min-height: 240px;
  max-height: 330px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--pj2-ink3) transparent;
}
.pj2-log-empty {
  font-size: 16.5px;
  color: var(--pj2-ink2);
  letter-spacing: 0.08em;
  padding: 4px 0;
}
.pj2-log-row {
  display: flex;
  gap: 7px;
  font-size: 16.5px;
  line-height: 1.25;
  align-items: baseline;
}
.pj2-log-t { flex: 0 0 44px; color: var(--pj2-ink3); }
.pj2-log-tag {
  flex: 0 0 86px;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  color: var(--pj2-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pj2-log-tag.pj2-tag-plain { color: var(--pj2-ink2); }
.pj2-log-body { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }

/* the three steps of ink aging — palette steps, never alpha */
.pj2-age-0 .pj2-log-body { color: var(--pj2-age0); }
.pj2-age-1 .pj2-log-body { color: var(--pj2-age1); }
.pj2-age-2 .pj2-log-body { color: var(--pj2-age2); }
.pj2-age-1 .pj2-log-tag:not(.pj2-tag-plain) { color: var(--pj2-accent2); }
.pj2-age-2 .pj2-log-tag:not(.pj2-tag-plain) { color: var(--pj2-accent2); }
.pj2-age-1 .pj2-log-t, .pj2-age-2 .pj2-log-t { color: var(--pj2-ink3); }

/* the illuminated capital on scene headings */
.pj2-log-body .pj2-cap {
  font-family: "Jacquard 12", "VT323", monospace;
  font-weight: 400;
  font-size: 24px;
  line-height: 0.8;
  color: var(--pj2-accent);
}
.pj2-age-1 .pj2-log-body .pj2-cap,
.pj2-age-2 .pj2-log-body .pj2-cap { color: var(--pj2-accent2); }
.pj2-log-body .pj2-gd { color: var(--pj2-gilt); }

/* ---------------------------------------------------------------------------
   TELEMETRY STRIP (§6 degradation): the margin apparatus collapsed into one
   horizontal line of readouts below the plate — sigil-less VT323 numbers.
   Hidden on desktop where the margin canvas carries the same data as dials.
   ------------------------------------------------------------------------- */
.pj2-telemetry {
  display: none;
  font-size: 16px;
  color: var(--pj2-ink1);
  letter-spacing: 0.05em;
  padding: 6px 4px 0;
  overflow-x: auto;
  white-space: nowrap;
}
.pj2-telemetry .pj2-v { color: var(--pj2-ink0); }
.pj2-telemetry .pj2-rb { color: var(--pj2-accent); }

/* ---------------------------------------------------------------------------
   THE CABINET (§5) — dark wood-and-brass, constant across tracks. 1U borders,
   stepped corners, inset bevels. No glow anywhere; a lit state is gilt fill.
   ------------------------------------------------------------------------- */
.pj2-cabinet {
  margin-top: 14px;
  background: linear-gradient(180deg, var(--pj2c-wood-hi) 0%, var(--pj2c-wood) 55%, var(--pj2c-wood-lo) 100%);
  border: 2px solid var(--pj2c-wood-edge);
  box-shadow: inset 0 2px 0 var(--pj2c-wood-bevel), inset 0 -2px 0 var(--pj2c-wood-edge);
  clip-path: polygon(
    0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
    calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
  );
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 10px 16px 12px;
  flex-wrap: wrap;
}
.pj2-cab-cap {
  font-size: 13px;
  color: var(--pj2c-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pj2-cab-spacer { flex: 1 1 auto; }

/* (the shelf/book-spine tab rules lived here; owner ruling moved the tracks
   to the .pj2-tabs row above the folio) */

/* --- transport: brass pushplates, 1U bevels, pressed = 1U inset ------------ */
.pj2-transport { display: flex; align-items: center; gap: 8px; }
.pj2-pushplate {
  font-family: "VT323", monospace;
  font-size: 18px;
  letter-spacing: 0.08em;
  background: var(--pj2c-brass);
  color: #e8c95a;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: inset -2px -2px 0 var(--pj2c-brass-lo), inset 2px 2px 0 var(--pj2c-brass-hi);
}
.pj2-pushplate:active,
.pj2-pushplate.is-pressed { box-shadow: inset 2px 2px 0 var(--pj2c-brass-lo); }
.pj2-pushplate.is-lit {
  background: #c9a227;
  color: #2e2114;
  box-shadow: inset -2px -2px 0 #8a6a14, inset 2px 2px 0 #f0daa0;
}
.pj2-pushplate:focus-visible { outline: 2px solid var(--pj2c-bone); outline-offset: 2px; }

/* --- the wax seal: typed seed + re-stamp ----------------------------------- */
.pj2-seal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-content: center;
}
.pj2-seal-stack { position: relative; width: 84px; height: 84px; }
#pj2-seal { display: block; width: 84px; height: 84px; }
.pj2-seal-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  text-align: center;
  font-family: "VT323", monospace;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #f0d9c8;
  text-shadow: 1px 1px 0 var(--pj2c-wax-rim);
  background: transparent;
  border: 0;
  padding: 0;
}
.pj2-seal-num:focus { outline: 1px dotted #f0d9c8; outline-offset: 2px; }
.pj2-seal-stack.is-stamping { animation: pj2-stamp 280ms steps(4, end); }
@keyframes pj2-stamp {
  0%   { transform: translateY(-6px) scale(1.12); }
  55%  { transform: translateY(2px) scale(0.94); }
  100% { transform: translateY(0) scale(1); }
}

/* --- the lamp: master volume as the wick gauge ----------------------------- */
.pj2-lamp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 136px;
}
.pj2-lamp-track {
  position: relative;
  height: 14px;
  border: 2px solid var(--pj2c-brass);
  background: var(--pj2c-slot);
}
.pj2-lamp-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 60%;
  background: repeating-linear-gradient(90deg, #c9a227 0 2px, #7a6216 2px 4px);
  pointer-events: none;
}
.pj2-lamp-thumb {
  position: absolute;
  top: -4px;
  left: calc(60% - 3px);
  width: 6px;
  height: 18px;
  background: #e8c95a;
  pointer-events: none;
}
.pj2-lamp-track input[type="range"] {
  position: absolute;
  inset: -6px 0;
  width: 100%;
  height: calc(100% + 12px);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* --- the plate's legend: per-layer mixer ----------------------------------- */
.pj2-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  width: 318px;
}
.pj2-legend-row { display: flex; align-items: center; gap: 8px; }
.pj2-legend-sigil {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pj2-legend-sigil canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}
.pj2-legend-name {
  flex: 0 0 104px;
  font-size: 16px;
  color: var(--pj2c-bone);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pj2-legend-slider {
  position: relative;
  flex: 1 1 auto;
  height: 12px;
  border: 2px solid var(--pj2c-brass);
  background: var(--pj2c-slot);
}
.pj2-legend-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(90deg, var(--pj2-fill-a) 0 2px, var(--pj2-fill-b) 2px 4px);
  pointer-events: none;
}
.pj2-legend-thumb {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 14px;
  background: var(--pj2c-bone);
  pointer-events: none; /* thumb position is unquantized — left set in % by JS */
}
.pj2-legend-slider input[type="range"] {
  position: absolute;
  inset: -5px 0;
  width: 100%;
  height: calc(100% + 10px);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* v1's pixel mute square, kept verbatim: filled = audible */
.pj2-legend-mute {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--pj2c-caption);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.pj2-legend-mute.is-on { background: var(--pj2-mute-on); }
.pj2-legend-mute:focus-visible { outline: 2px solid var(--pj2c-bone); outline-offset: 2px; }

/* --- build stamp ------------------------------------------------------------ */
.pj2-build {
  max-width: 1392px;
  margin: 10px auto 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #3f3628;
}
.pj2-build-sep { margin: 0 0.5em; }

/* ---------------------------------------------------------------------------
   DEGRADATION (§6): small screens — the margin canvas yields, the telemetry
   strip carries the data, the log keeps its precision below the plate.
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .pj2-folio-grid { flex-direction: column; }
  .pj2-margin-col { flex: 1 1 auto; width: auto; }
  #pj2-plate { height: 480px; }
  #pj2-margin { display: none; }
  .pj2-telemetry { display: block; }
  .pj2-log { max-height: 240px; }
}

@media (max-width: 700px) {
  .pj2-desk { padding: 14px 6px 32px; }
  .pj2-folio { padding: 12px 10px 8px; }
  #pj2-plate { height: 360px; }
  .pj2-tabs { gap: 4px; }
  .pj2-tab { font-size: 16px; letter-spacing: 0.04em; padding: 7px 4px 6px; }
  .pj2-tab.is-active { font-size: 17px; padding: 11px 4px 7px; }
  .pj2-title { font-size: 24px; }
  .pj2-title .pj2-title-pre { font-size: 13px; }
  .pj2-cabinet { gap: 10px; padding: 8px 10px 10px; }
  .pj2-legend { width: 100%; }
  .pj2-cab-spacer { display: none; }
  /* the head transport drops to its own full-width row, three equal thumb
     targets — still above the plate, so play is reachable on open */
  .pj2-transport-head {
    width: 100%;
    margin-left: 0;
    gap: 6px;
  }
  .pj2-transport-head .pj2-pushplate {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 10px 4px;
  }
}