/* ==========================================================================
   The Pandemonium Cabinet — instrument styles
   ==========================================================================
   Namespaced beneath .archive-instrument--pandemonium-cabinet. Consumes only
   the shared foundation tokens (--instrument-*, including the machine-ink trio
   --instrument-machine-ink / -bright / -rule); two block-local tuning custom
   properties alias the amber wash and ink edge the siblings already use. No
   resets, no body/html/bare-element rules, no imports, no external assets.

   Visual language: a black-glass drawer bank — a forty-five-cell bestiary
   concordance engraved on instrument glass. Each cell is a coordinate that
   points back to the text that names it; documented slots add a small serif
   name, undocumented slots stay dashed and nameless. The detail column reads
   like an engraving plate with a concordance of citations, not a card.

   Green is absent. The sibling instruments spend green on traversal and live
   receipts; the Cabinet has no traversal and no such state, so green appears
   nowhere here — emphasis is amber, structure is graphite, machine speech is
   cold phosphor.

   Machine register: every machine reading wraps in spec 02's foundation
   .ai-machine (cold phosphor ink, hair-line rule, the leading "⟡ machine"
   marker). This file only consumes the phosphor tokens and adds layout around
   them — it never redefines the register or its colour. The amber
   exhibit-fiction chip stays on the foundation .ai-chip axis, separate from the
   authorship marker.

   Cell markers are shape, never colour alone — two visually distinct glyphs
   that match the JS legend: ◇ = Door (top-right, plus a heavier left border),
   ⧖ = syzygy (bottom-right). Uttunul (M36) is both, and carries both.

   No animation and no transition are declared here; hover, selection, and the
   opened plate resolve instantly, the way an engraving does. The only motion
   token in play is the foundation's own .ai-btn hover, inherited untouched.
   ========================================================================== */

.archive-instrument--pandemonium-cabinet {
  /* Block-local tuning aliases (host may retune). Both mirror values the
     foundation already derives; colour is never the sole cue — every state is
     also carried as text or marker shape. */
  --pc-amber-wash: rgba(197, 138, 42, 0.07);   /* selected-cell tint */
  --pc-ink-edge: rgba(232, 227, 216, 0.45);    /* related-cell / attested edge */
}

/* --- Header (server-rendered) -------------------------------------------- */

.archive-instrument--pandemonium-cabinet .pc-kicker {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--instrument-amber);
  margin: 0 0 10px;
}

.archive-instrument--pandemonium-cabinet .pc-title {
  font-family: var(--instrument-font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4.5cqw, 52px);
  line-height: 1.06;
  margin: 0 0 14px;
  color: var(--instrument-ink);
}

.archive-instrument--pandemonium-cabinet .pc-lede {
  font-size: clamp(16px, 1.6cqw, 19px);
  max-width: 62ch;
  color: var(--instrument-ink);
  margin: 0 0 8px;
}

.archive-instrument--pandemonium-cabinet .pc-standfirst {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--instrument-muted);
  margin: 0 0 18px;
}

.archive-instrument--pandemonium-cabinet .pc-noscript-note {
  font-family: var(--instrument-font-mono);
  font-size: 13px;
  color: var(--instrument-muted);
  border: 1px dashed var(--instrument-rule);
  padding: 10px 14px;
  max-width: 68ch;
}

/* --- App shell ----------------------------------------------------------- */
/* Toolbar is a full-width bar above the app. The app grid holds the matrix
   (left, flexible) and the detail column (right, sticky). */

.archive-instrument--pandemonium-cabinet .pc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
}

.archive-instrument--pandemonium-cabinet .pc-toolbar-spacer {
  flex: 1 1 auto;
}

/* Local-only "ENCOUNTERED 12/45" readout — a mono chip, never a metric that
   leaves the browser. Muted graphite so it never reads as a score. */
.archive-instrument--pandemonium-cabinet .pc-progress {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  color: var(--instrument-muted);
  border: 1px solid var(--instrument-rule);
  padding: 7px 10px;
  white-space: nowrap;
}

.archive-instrument--pandemonium-cabinet .pc-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  gap: 18px;
  align-items: start;
}

/* Foundation .ai-btn drives every toolbar / jump / remove control (its own
   120ms hover is the only inherited transition; the Cabinet declares none). */

/* --- The matrix (centerpiece) -------------------------------------------- */
/* A ragged triangle: a 28px phase gutter + 9 cell columns, 9 cell rows + a
   24px digit gutter. JS places every cell at grid-row:i / grid-column:j+2, the
   gutter labels on the fixed tracks, and the empty-region overlay across the
   upper-right. aspect-ratio reserves a square before data arrives (CLS ≈ 0). */

.archive-instrument--pandemonium-cabinet .pc-matrix-wrap {
  position: relative;
  min-width: 0;
}

.archive-instrument--pandemonium-cabinet .pc-matrix {
  display: grid;
  grid-template-columns: 28px repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr)) 24px;
  gap: 4px;
  aspect-ratio: 1 / 1;
}

/* Gutter labels: aria-hidden decoration, so 11px is allowed. JS sets the
   variable axis (phase → its row, digit → its column); CSS pins the fixed axis
   and self-centres. */
.archive-instrument--pandemonium-cabinet .pc-gutter-phase {
  grid-column: 1;
  align-self: center;
  justify-self: center;
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--instrument-ink-faint);
}

.archive-instrument--pandemonium-cabinet .pc-gutter-digit {
  grid-row: 10;
  align-self: center;
  justify-self: center;
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--instrument-ink-faint);
}

/* Faint diagonal zone-rules in the empty upper-right. aria-hidden, no content,
   never intercepts a click; JS places it across the vacant cells, beneath the
   real cells in source order. */
.archive-instrument--pandemonium-cabinet .pc-empty-region {
  pointer-events: none;
  opacity: 0.4;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 9px,
    var(--instrument-rule) 9px,
    var(--instrument-rule) 10px
  );
}

/* --- Cells --------------------------------------------------------------- */

.archive-instrument--pandemonium-cabinet .pc-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 6px;
  text-align: left;
  font-family: var(--instrument-font-mono);
  color: var(--instrument-ink);
  background: var(--instrument-glass);
  border: 1px solid var(--instrument-rule);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}

.archive-instrument--pandemonium-cabinet .pc-cell-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.archive-instrument--pandemonium-cabinet .pc-cell-portrait {
  z-index: -1;
  object-fit: cover;
  opacity: 0.58;
  filter: saturate(0.66) contrast(1.08) brightness(0.82);
}

.archive-instrument--pandemonium-cabinet .pc-cell:hover .pc-cell-portrait,
.archive-instrument--pandemonium-cabinet .pc-cell--selected .pc-cell-portrait,
.archive-instrument--pandemonium-cabinet .pc-cell--related .pc-cell-portrait {
  opacity: 0.82;
  filter: saturate(0.82) contrast(1.12) brightness(1);
}

.archive-instrument--pandemonium-cabinet .pc-cell-mesh {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--instrument-amber);
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
}

/* aria-hidden coordinate echo ("8::1") — 11px allowed. */
.archive-instrument--pandemonium-cabinet .pc-cell-span {
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  color: var(--instrument-muted);
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
}

/* Names read coordinates-first: dim by rest, un-dimming when the cell is
   selected, related, or hovered (the "neighbouring positions become legible"
   cue). Ink is near-white, so even dimmed it clears AA on the glass ground. */
.archive-instrument--pandemonium-cabinet .pc-cell-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--instrument-font-serif);
  font-size: 12.5px;
  line-height: 1.15;
  color: var(--instrument-ink);
  opacity: 0.72;
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
}

/* Machine satellite count ("⟡2") — the ⟡ glyph reinforces the phosphor colour,
   so colour is never the sole cue. 10px per spec; the count also appears in the
   orbit list and live-region announcement. */
.archive-instrument--pandemonium-cabinet .pc-cell--orbited .pc-cell-orbit {
  font-family: var(--instrument-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--instrument-machine-ink-bright);
}

/* Encounter stamp: a 2px rule-coloured corner dot, aria-hidden reinforcement of
   the localStorage-only "encountered" state. */
.archive-instrument--pandemonium-cabinet .pc-cell-visited-dot {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 2px;
  height: 2px;
  background: var(--instrument-rule);
  pointer-events: none;
}

/* Unattested slot: dashed frame, and the mesh drops from amber to muted so a
   dark cell never carries documentary emphasis. */
.archive-instrument--pandemonium-cabinet .pc-cell--dark {
  border-style: dashed;
}

.archive-instrument--pandemonium-cabinet .pc-cell--dark .pc-cell-mesh {
  color: var(--instrument-muted);
}

/* Door: ◇ marker (top-right) plus a heavier left border. Marker shape, not
   colour. Static per-cell, so no interaction reflow. */
.archive-instrument--pandemonium-cabinet .pc-cell--door {
  border-left: 2px solid var(--instrument-rule);
}

.archive-instrument--pandemonium-cabinet .pc-cell--door::after {
  content: "◇";
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 10px;
  line-height: 1;
  color: var(--instrument-muted);
  pointer-events: none;
}

/* Syzygy: ⧖ marker (bottom-right) — distinct corner and glyph from the Door, so
   Uttunul (both) shows ◇ top-right and ⧖ bottom-right without collision. */
.archive-instrument--pandemonium-cabinet .pc-cell--syzygy::before {
  content: "⧖";
  position: absolute;
  bottom: 4px;
  right: 5px;
  font-size: 10px;
  line-height: 1;
  color: var(--instrument-muted);
  pointer-events: none;
}

/* The ARIA row wrappers must be transparent to the grid: role=row groups the
   cells for assistive tech, display:contents hands the cells themselves to
   .pc-matrix as grid items so their inline grid-row/grid-column placement
   builds the triangle. Without this the matrix collapses into a column. */
.archive-instrument--pandemonium-cabinet .pc-row-group {
  display: contents;
}

/* Interaction states recolour borders only (widths stay fixed → no reflow).
   Foundation :focus-visible draws the amber focus ring on these buttons; no
   rule here suppresses it. */
.archive-instrument--pandemonium-cabinet .pc-cell--selected {
  border-color: var(--instrument-amber);
  background: var(--pc-amber-wash);
}

/* A saved encounter's trail: inset amber seam so dark cells keep their dashed
   border cue; the encounter panel carries the trail textually as well. */
.archive-instrument--pandemonium-cabinet .pc-cell--trail {
  box-shadow: inset 0 0 0 2px rgba(197, 138, 42, 0.55);
}

/* Inline text-button (saved-encounter toggles): the Cabinet's own rule — the
   sibling instruments' inline-button classes are namespaced away from here. */
.archive-instrument--pandemonium-cabinet .pc-inline-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--instrument-ink);
  text-decoration: underline;
  text-decoration-color: rgba(232, 227, 216, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}

.archive-instrument--pandemonium-cabinet .pc-inline-btn:hover {
  color: var(--instrument-amber-bright);
}

@media (max-width: 768px) {
  .archive-instrument--pandemonium-cabinet .pc-inline-btn {
    min-height: 44px;
  }
}

.archive-instrument--pandemonium-cabinet .pc-cell--related,
.archive-instrument--pandemonium-cabinet .pc-cell:hover {
  border-color: var(--pc-ink-edge);
}

.archive-instrument--pandemonium-cabinet .pc-cell--selected .pc-cell-name,
.archive-instrument--pandemonium-cabinet .pc-cell--related .pc-cell-name,
.archive-instrument--pandemonium-cabinet .pc-cell:hover .pc-cell-name {
  opacity: 1;
}

/* --- Detail column (sticky bench) ---------------------------------------- */
/* Mirrors .frt-reading exactly: sticky while the matrix holds its square, each
   panel keeping its own scroll so several fit one viewport. */

.archive-instrument--pandemonium-cabinet .pc-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--instrument-rule) transparent;
}

.archive-instrument--pandemonium-cabinet .pc-panel {
  background: var(--instrument-panel);
  border: 1px solid var(--instrument-rule);
  padding: 14px 16px;
}

.archive-instrument--pandemonium-cabinet .pc-detail .pc-panel {
  flex: 0 0 auto;
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--instrument-rule) transparent;
}

.archive-instrument--pandemonium-cabinet .pc-panel-h {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.archive-instrument--pandemonium-cabinet .pc-section-h {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--instrument-amber);
  margin: 14px 0 6px;
}

.archive-instrument--pandemonium-cabinet .pc-note {
  font-family: var(--instrument-font-serif);
  font-size: 13.5px;
  color: var(--instrument-muted);
  border-left: 2px solid var(--instrument-amber);
  padding-left: 10px;
  margin: 10px 0 0;
}

.archive-instrument--pandemonium-cabinet .pc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

/* Coordinate / lore key-value grid, like .frt-prov (mono, uppercase dt). */
.archive-instrument--pandemonium-cabinet .pc-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-family: var(--instrument-font-mono);
  font-size: 12.5px;
}

.archive-instrument--pandemonium-cabinet .pc-meta dt {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  align-self: center;
}

.archive-instrument--pandemonium-cabinet .pc-meta dd {
  margin: 0;
  color: var(--instrument-ink);
  overflow-wrap: anywhere;
}

/* Interpretation list, like .frt-assessment (serif, no rules). */
.archive-instrument--pandemonium-cabinet .pc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--instrument-font-serif);
  font-size: 13.5px;
  line-height: 1.45;
}

/* --- The plate (opened slot) --------------------------------------------- */
/* An engraving header inside the first detail panel: name + coordinate line
   over a perforation rule. No transition on open — it resolves at once. */

.archive-instrument--pandemonium-cabinet .pc-plate {
  border-bottom: 1px dashed var(--instrument-rule);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.archive-instrument--pandemonium-cabinet .pc-plate-title {
  font-family: var(--instrument-font-serif);
  font-weight: 400;
  font-size: clamp(20px, 2cqw, 26px);
  line-height: 1.12;
  margin: 0 0 6px;
  color: var(--instrument-ink);
}

.archive-instrument--pandemonium-cabinet .pc-portrait {
  width: min(100%, 360px);
  margin: 12px auto 14px;
  border: 1px solid var(--instrument-rule);
  background: #080a0b;
}

.archive-instrument--pandemonium-cabinet .pc-portrait-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.archive-instrument--pandemonium-cabinet .pc-portrait-caption {
  display: grid;
  gap: 4px;
  padding: 9px 10px 10px;
  border-top: 1px solid var(--instrument-rule);
  font-family: var(--instrument-font-mono);
  line-height: 1.35;
}

.archive-instrument--pandemonium-cabinet .pc-portrait-caption-main {
  font-size: 12px;
  color: var(--instrument-ink);
}

.archive-instrument--pandemonium-cabinet .pc-portrait-caption-meta {
  font-size: 11px;
  color: var(--instrument-muted);
}

.archive-instrument--pandemonium-cabinet .pc-coord-line {
  font-family: var(--instrument-font-mono);
  font-size: 12.5px;
  color: var(--instrument-muted);
  word-spacing: 0.2em;
  margin: 0;
}

.archive-instrument--pandemonium-cabinet .pc-door-block {
  border: 1px solid var(--instrument-rule);
  padding: 10px 12px;
  font-family: var(--instrument-font-mono);
  font-size: 12.5px;
  color: var(--instrument-ink);
}

/* Concordance: one list entry per corpus text; each carries its own chip-row,
   note, optional quoted extract, and rights tag. */
.archive-instrument--pandemonium-cabinet .pc-concordance {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}

.archive-instrument--pandemonium-cabinet .pc-concordance li {
  border-top: 1px solid var(--instrument-rule);
  padding-top: 10px;
}

.archive-instrument--pandemonium-cabinet .pc-concordance li:first-child {
  border-top: 0;
  padding-top: 0;
}

.archive-instrument--pandemonium-cabinet .pc-extract {
  font-family: var(--instrument-font-serif);
  font-style: italic;
  font-size: 14px;
  border-left: 2px solid var(--instrument-amber);
  padding-left: 10px;
  margin: 6px 0;
}

/* Rights code tag (quoted_review / minimal_chunks) — a mono micro-label like
   .frt-prov dt. */
.archive-instrument--pandemonium-cabinet .pc-rights {
  font-family: var(--instrument-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--instrument-muted);
}

/* Relation-jump row: foundation .ai-btn controls, wrapping. */
.archive-instrument--pandemonium-cabinet .pc-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* --- Machine orbit ------------------------------------------------------- */
/* "Orbit" is a static radial arrangement, never motion. The candidate body is
   a foundation .ai-machine block (phosphor ink / rule / ⟡ marker owned there);
   this file only frames it. The amber exhibit-fiction chip stays a foundation
   .ai-chip — authorship and attestation on separate axes. */

.archive-instrument--pandemonium-cabinet .pc-orbit {
  border-top: 1px solid var(--instrument-machine-ink-rule);
  padding-top: 12px;
  margin-top: 12px;
}

.archive-instrument--pandemonium-cabinet .pc-satellites {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.archive-instrument--pandemonium-cabinet .pc-satellite {
  appearance: none;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--instrument-machine-ink);
  background: transparent;
  border: 1px dashed var(--instrument-machine-ink-rule);
  padding: 8px 10px;
  cursor: pointer;
}

.archive-instrument--pandemonium-cabinet .pc-satellite[aria-pressed="true"] {
  color: var(--instrument-machine-ink-bright);
  border-style: solid;
  border-color: var(--instrument-machine-ink-bright);
}

/* Candidate: consumes .ai-machine, adds a full dashed enclosure (left kept at
   1px so the foundation's hair-rule reads through). */
.archive-instrument--pandemonium-cabinet .pc-candidate {
  padding: 12px 14px;
  border: 1px dashed var(--instrument-machine-ink-rule);
  border-left-width: 1px;
  margin-top: 10px;
}

/* Provenance grid; dd inherits colour so it stays phosphor inside .ai-machine. */
.archive-instrument--pandemonium-cabinet .pc-prov {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 8px 0 0;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
}

.archive-instrument--pandemonium-cabinet .pc-prov dt {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  align-self: center;
}

.archive-instrument--pandemonium-cabinet .pc-prov dd {
  margin: 0;
  color: inherit;
  word-break: break-all;
}

/* Each logged in-the-wild label-stripping, dashed-underlined. */
.archive-instrument--pandemonium-cabinet .pc-label-loss {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.archive-instrument--pandemonium-cabinet .pc-label-loss li {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

.archive-instrument--pandemonium-cabinet .pc-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* The editor's lesson between two readings: human serif, amber rule — not
   machine ink. */
.archive-instrument--pandemonium-cabinet .pc-editors-note {
  font-family: var(--instrument-font-serif);
  font-size: 14px;
  color: var(--instrument-ink);
  border-left: 2px solid var(--instrument-amber);
  padding-left: 10px;
  margin-top: 10px;
}

/* --- Compose / exports / legend ------------------------------------------ */
/* .pc-compose, .pc-exports and .pc-legend are .pc-panel instances (compose is
   toggled via [hidden]); only their inner controls need rules here. The legend
   reuses .pc-legend-list / .pc-legend-note below. */

.archive-instrument--pandemonium-cabinet .pc-field-label {
  display: block;
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  margin: 0 0 4px;
}

.archive-instrument--pandemonium-cabinet .pc-input,
.archive-instrument--pandemonium-cabinet .pc-textarea {
  width: 100%;
  font-family: var(--instrument-font-mono);
  font-size: 13px;
  color: var(--instrument-ink);
  background: var(--instrument-glass);
  border: 1px solid var(--instrument-rule);
  padding: 8px 10px;
  margin: 0 0 10px;
}

.archive-instrument--pandemonium-cabinet .pc-textarea {
  min-height: 64px;
  resize: vertical;
  font-family: var(--instrument-font-serif);
  font-size: 14px;
}

.archive-instrument--pandemonium-cabinet .pc-compose-hint {
  font-family: var(--instrument-font-serif);
  font-size: 13px;
  color: var(--instrument-muted);
  margin: 0 0 10px;
}

.archive-instrument--pandemonium-cabinet .pc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.archive-instrument--pandemonium-cabinet .pc-legend-note {
  font-family: var(--instrument-font-serif);
  font-size: 12.5px;
  color: var(--instrument-muted);
  margin: 8px 0 0;
}

/* Reading trail: ordered opened slots, each row a mono line with a small
   Remove .ai-btn to the right. */
.archive-instrument--pandemonium-cabinet .pc-trail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--instrument-font-mono);
  font-size: 12.5px;
}

.archive-instrument--pandemonium-cabinet .pc-trail li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--instrument-rule);
  padding-top: 6px;
}

.archive-instrument--pandemonium-cabinet .pc-trail li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* --- Fallback text index (generated, no-JS) ------------------------------ */
/* Mirrors the sibling .frt-index / .cc-index family exactly. */

.archive-instrument--pandemonium-cabinet .pc-index {
  margin-top: 22px;
  border: 1px solid var(--instrument-rule);
  padding: 0;
}

.archive-instrument--pandemonium-cabinet .pc-index-summary {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  padding: 12px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.archive-instrument--pandemonium-cabinet .pc-index-summary:hover {
  color: var(--instrument-amber-bright);
}

.archive-instrument--pandemonium-cabinet .pc-index[open] .pc-index-summary {
  border-bottom: 1px solid var(--instrument-rule);
}

.archive-instrument--pandemonium-cabinet .pc-index-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--instrument-rule);
}

.archive-instrument--pandemonium-cabinet .pc-index-section:last-child {
  border-bottom: 0;
}

.archive-instrument--pandemonium-cabinet .pc-index-h {
  font-family: var(--instrument-font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--instrument-amber);
  margin: 0 0 8px;
}

.archive-instrument--pandemonium-cabinet .pc-index-h3 {
  font-family: var(--instrument-font-serif);
  font-size: 17px;
  font-weight: 400;
  margin: 14px 0 4px;
  color: var(--instrument-ink);
}

.archive-instrument--pandemonium-cabinet .pc-index-p {
  font-family: var(--instrument-font-serif);
  font-size: 14px;
  color: var(--instrument-muted);
  max-width: 70ch;
  margin: 0 0 8px;
}

/* Currents & gates tables. Mono, collapsed 1px rules; th is a mono micro-label
   (11px, matching the sibling label scale). Wrapper scrolls on narrow screens. */
.archive-instrument--pandemonium-cabinet .pc-table-wrap {
  overflow-x: auto;
}

.archive-instrument--pandemonium-cabinet .pc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--instrument-font-mono);
  font-size: 12.5px;
}

.archive-instrument--pandemonium-cabinet .pc-table th,
.archive-instrument--pandemonium-cabinet .pc-table td {
  border: 1px solid var(--instrument-rule);
  padding: 6px 10px;
  text-align: left;
}

.archive-instrument--pandemonium-cabinet .pc-table th {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--instrument-muted);
}

.archive-instrument--pandemonium-cabinet .pc-table td {
  color: var(--instrument-ink);
}

.archive-instrument--pandemonium-cabinet .pc-legend-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 13.5px;
}

.archive-instrument--pandemonium-cabinet .pc-legend-list dt {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  color: var(--instrument-ink);
}

.archive-instrument--pandemonium-cabinet .pc-legend-list dd {
  margin: 0;
  color: var(--instrument-muted);
}

.archive-instrument--pandemonium-cabinet .pc-fallback-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.archive-instrument--pandemonium-cabinet .pc-fallback-title {
  display: block;
  color: var(--instrument-ink);
}

.archive-instrument--pandemonium-cabinet .pc-fallback-title a,
.archive-instrument--pandemonium-cabinet .pc-index a {
  color: var(--instrument-ink);
  text-decoration: underline;
  text-decoration-color: rgba(197, 138, 42, 0.5);
  text-underline-offset: 3px;
}

.archive-instrument--pandemonium-cabinet .pc-index a:hover {
  color: var(--instrument-amber-bright);
}

.archive-instrument--pandemonium-cabinet .pc-fallback-meta {
  display: block;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--instrument-muted);
}

.archive-instrument--pandemonium-cabinet .pc-fallback-summary {
  display: block;
  font-size: 13.5px;
  color: var(--instrument-muted);
}

.archive-instrument--pandemonium-cabinet .pc-fallback-note {
  display: block;
  font-size: 13px;
  color: var(--instrument-amber);
}

.archive-instrument--pandemonium-cabinet .pc-fallback-portrait {
  width: min(100%, 220px);
  margin: 8px 0 10px;
  border: 1px solid var(--instrument-rule);
  background: #080a0b;
}

.archive-instrument--pandemonium-cabinet .pc-fallback-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.archive-instrument--pandemonium-cabinet .pc-fallback-portrait figcaption {
  padding: 7px 8px;
  border-top: 1px solid var(--instrument-rule);
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--instrument-muted);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1280px) {
  .archive-instrument--pandemonium-cabinet .pc-app {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  }
}

@media (max-width: 1000px) {
  /* Single column: detail flows in full beneath the matrix. minmax(0, 1fr)
     (not bare 1fr) so the matrix's 30rem scroll-mode min-width overflows
     inside .pc-matrix-wrap, never the page. */
  .archive-instrument--pandemonium-cabinet .pc-app {
    grid-template-columns: minmax(0, 1fr);
  }
  .archive-instrument--pandemonium-cabinet .pc-matrix-column {
    min-width: 0;
  }
  .archive-instrument--pandemonium-cabinet .pc-detail {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .archive-instrument--pandemonium-cabinet .pc-detail .pc-panel {
    max-height: none;
  }
}

@media (max-width: 900px) {
  .archive-instrument--pandemonium-cabinet .pc-compare-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Touch targets. Cells already clear 44px via min-height; satellites join. */
  .archive-instrument--pandemonium-cabinet .pc-satellite {
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  /* Keep the triangle a real shape and scroll it sideways rather than crush the
     cells below a touch target. */
  .archive-instrument--pandemonium-cabinet .pc-matrix-wrap {
    overflow-x: auto;
  }
  .archive-instrument--pandemonium-cabinet .pc-matrix {
    aspect-ratio: auto;
    min-width: 30rem;
  }
}

@media (max-width: 480px) {
  .archive-instrument--pandemonium-cabinet .pc-panel {
    padding: 12px;
  }
  .archive-instrument--pandemonium-cabinet .pc-meta,
  .archive-instrument--pandemonium-cabinet .pc-prov {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}