/* ==========================================================================
   COMPATIBILITY MAP (QS-1, temporary)
   The explorer's own CSS in index.html still uses the variable names of the deleted Pioneer
   :root block. Until later phases rebuild those views on the components, each old name is mapped
   onto a Quiet Shelf token here, so the views follow the light, dark, high contrast, kiosk and
   library (ThemeConfig) sets. No literal colors: every value is a token.
   Names the tokens already define keep working as they are: --primary, --bg, --line, --success,
   --warning, --danger, --focus.
   Delete a line when the last rule that reads it is gone; delete the file with the last one.
   ========================================================================== */
:root {
  --primary-strong: var(--chrome);
  --primary-tint: var(--primary-soft);
  --accent: var(--acc-catalog);
  --accent-deep: var(--primary);
  --accent-tint: var(--acc-catalog-wash);
  --accent-wash: var(--acc-catalog-wash);
  --ink: var(--fg);
  --ink-2: var(--fg);
  --ink-3: var(--muted);
  --ink-muted: var(--muted);
  --surface: var(--card);
  --success-wash: var(--acc-events-wash);
  --warn-wash: var(--acc-way-wash);
  --danger-wash: var(--acc-now-wash);
  --radius: var(--r-bar);
  --shadow: var(--shadow-card);
  --font: var(--font-body);
}

/* ==========================================================================
   COMPATIBILITY RULES (QS-1, temporary)
   A few explorer rules hard-code white text or a white panel, which the dark set turns into
   contrast failures, and some controls sit below the 48 px floor. These overrides keep the old
   views at WCAG AA in every set until their phase rebuilds them. :root raises specificity so
   they win over the explorer's own rules, which load after this file. Tokens only.
   ========================================================================== */
:root .btn {
  color: var(--on-primary);
  min-height: var(--target-std);
}

:root .btn:hover {
  background: var(--primary);
  box-shadow: inset 0 0 0 var(--focus-w) var(--on-primary);
}

:root .btn.ghost,
:root .btn.quiet {
  box-shadow: none;
}

:root .btn.ghost:hover {
  background: var(--primary-soft);
}

:root .btn.sm,
:root .slot,
:root .chip,
:root .linkish {
  min-height: var(--target-min);
}

:root .b-ok {
  color: var(--acc-events-text);
}

:root .b-warn {
  color: var(--acc-way-text);
}

:root .b-danger {
  background: var(--card);
  color: var(--danger);
}

/* The QR code draws its own white quiet zone, so the panel can follow the set. */
:root .qrPanel {
  background: var(--card);
}

/* White text on --primary or --success (light in dark mode) follows the on-primary token. */
:root .bubble,
:root .medModes .chip[aria-pressed="true"],
:root .chip.dscChip[aria-pressed="true"],
:root .cardStepper .node.active,
:root .cardStepper .node.done,
:root .bleFab,
:root .settingsFab {
  color: var(--on-primary);
}

/* Gradients to --primary under white text become the solid chrome. */
:root .kioskHero,
:root .wayfindCta {
  background: var(--chrome);
  color: var(--on-chrome);
}

/* Fixed dark greens and white panels: the set's own success text and card. */
:root .wfArrived,
:root .confirmNote,
:root .slot.mine {
  color: var(--acc-events-text);
}

:root .waitPill,
:root .beneath {
  background: var(--card);
  color: var(--fg);
}

/* Map labels sit on the white floor plan in every set: the chrome ink is dark in all three. */
:root .locMap .lbText {
  fill: var(--chrome);
}

/* The quiet button keeps its own ground on hover (its muted text never sits on --primary). */
:root .btn.quiet:hover {
  background: none;
}

/* The settings button's hover ground follows the set. */
:root .settingsFab:hover {
  background: var(--chrome);
  color: var(--on-chrome);
}

@media (forced-colors: active) {
  :root .locMap .lbText {
    fill: CanvasText;
    stroke: Canvas;
  }
}

/* QS-10a: the kiosk tab labels keep the 20 px kiosk tab size (the explorer's kiosk rule sets
   14 px), and the round staff buttons keep an edge in forced colors (Q10.3) until QS-10b moves
   them behind staff mode. */
:root body.kiosk .tabbar button {
  font-size: var(--fs-tab);
}

@media (forced-colors: active) {
  :root .bleFab,
  :root .settingsFab {
    border: var(--line-w) solid ButtonText;
  }
}

/* QS-10a (REQ-SET-4): at 200% text the library name and the Capstone line wrap instead of being
   cut off with an ellipsis. */
:root .brandnames strong,
:root .brandnames small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
}

/* QS-10a (REQ-THM-2): a library logo from the ThemeConfig stays inside the header tile. */
:root .logoTile {
  overflow: hidden;
}

:root .logoTile__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 75%;
  max-height: 75%;
  object-fit: contain;
}