/* ==========================================================================
   ChemicallyFired — Precision museum chrome (/lab/)
   --------------------------------------------------------------------------
   Loaded only when the owner picks "Precision museum" in admin -> Appearance
   (functions/_middleware.js adds this file, swaps /lab-explorer.js for
   museum.js and sets <html data-museum="precision">). Every rule is scoped to
   html[data-museum="precision"], so the Legacy museum is never affected.
   Self-contained: it looks the same under the Legacy or Precision site theme,
   and follows the Precision light mode when that is live.
   ========================================================================== */

@font-face {
  font-family: "CF Museum Sans";
  src: url("/themes/precision-lab/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CF Museum Mono";
  src: url("/themes/precision-lab/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html[data-museum="precision"] {
  color-scheme: dark;
  --pm-bg: #0a0c0d;
  --pm-surface: rgba(16, 19, 21, 0.9);
  --pm-surface-solid: #111416;
  --pm-tint: rgba(255, 255, 255, 0.05);
  --pm-border: rgba(255, 255, 255, 0.1);
  --pm-border-strong: rgba(255, 255, 255, 0.18);
  --pm-text: #eef0f0;
  --pm-muted: rgba(226, 230, 231, 0.66);
  --pm-dim: rgba(226, 230, 231, 0.5);
  --pm-key: #eef0f0;
  --pm-key-text: #0b0d0e;
  --pm-orange: #ff5a1f;
  --pm-orange-soft: rgba(255, 90, 31, 0.14);
  --pm-orange-line: rgba(255, 90, 31, 0.55);
  --pm-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --pm-grid: rgba(255, 255, 255, 0.085);
  --pm-font: "CF Museum Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pm-mono: "CF Museum Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--pm-bg);
}

html[data-museum="precision"][data-pl-mode="light"] {
  color-scheme: light;
  --pm-bg: #e9eae8;
  --pm-surface: rgba(248, 249, 248, 0.94);
  --pm-surface-solid: #f8f9f8;
  --pm-tint: rgba(0, 0, 0, 0.04);
  --pm-border: rgba(0, 0, 0, 0.1);
  --pm-border-strong: rgba(0, 0, 0, 0.18);
  --pm-text: #15181a;
  --pm-muted: rgba(21, 24, 26, 0.68);
  --pm-dim: rgba(21, 24, 26, 0.52);
  --pm-key: #15181a;
  --pm-key-text: #ffffff;
  --pm-shadow: 0 24px 60px rgba(20, 24, 26, 0.16);
  --pm-grid: rgba(0, 0, 0, 0.06);
}

html[data-museum="precision"] body.lab3d-body {
  background: var(--pm-bg);
  color: var(--pm-text);
  font-family: var(--pm-font);
}

/* Header ------------------------------------------------------------------- */
html[data-museum="precision"] .lab3d-top {
  border-bottom: 1px solid var(--pm-border);
  background: var(--pm-surface);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html[data-museum="precision"] .lab3d-brand span {
  color: var(--pm-text);
  font-weight: 520;
  letter-spacing: -0.01em;
}

html[data-museum="precision"] .lab3d-brand em {
  color: var(--pm-orange);
  font-weight: 500;
}

html[data-museum="precision"] .lab3d-chip,
html[data-museum="precision"] .lab3d-music {
  border: 1px solid var(--pm-border-strong);
  border-radius: 10px;
  background: var(--pm-surface-solid);
  color: var(--pm-text);
  font-family: var(--pm-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-museum="precision"] .lab3d-chip:hover {
  background: var(--pm-surface-solid);
  border-color: var(--pm-orange-line);
  transform: none;
}

html[data-museum="precision"] .lab3d-chip:focus-visible,
html[data-museum="precision"] .lab3d-exit:focus-visible,
html[data-museum="precision"] .lab3d-scan-link:focus-visible {
  outline: 2px solid var(--pm-orange);
  outline-offset: 2px;
}

html[data-museum="precision"] .lab3d-music .music-tab-icon,
html[data-museum="precision"] .lab3d-music.is-playing .music-tab-icon {
  color: var(--pm-muted);
}

html[data-museum="precision"] .lab3d-volume {
  accent-color: var(--pm-orange);
}

html[data-museum="precision"] .lab3d-exit {
  border-radius: 10px;
  background: var(--pm-key);
  color: var(--pm-key-text);
  font-weight: 540;
}

html[data-museum="precision"] .lab3d-exit:hover {
  background: var(--pm-key);
  transform: none;
  opacity: 0.9;
}

/* Stage + loading ------------------------------------------------------------ */
html[data-museum="precision"] .lab3d-stage {
  background: var(--pm-bg);
}

html[data-museum="precision"] .lab3d-loading,
html[data-museum="precision"] .lab3d-hint {
  border: 1px solid var(--pm-border-strong);
  border-radius: 10px;
  background: var(--pm-surface);
  color: var(--pm-text);
  font-family: var(--pm-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--pm-shadow);
}

html[data-museum="precision"] .lab3d-spinner {
  border-color: var(--pm-border-strong);
  border-top-color: var(--pm-orange);
}

/* Intro card ------------------------------------------------------------------ */
html[data-museum="precision"] .lab3d-intro {
  background:
    linear-gradient(var(--pm-grid) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--pm-grid) 1px, transparent 1px) 0 0 / 56px 56px,
    color-mix(in srgb, var(--pm-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html[data-museum="precision"] .lab3d-intro-card {
  position: relative;
  border: 1px solid var(--pm-border-strong);
  border-radius: 18px;
  background: var(--pm-surface-solid);
  color: var(--pm-text);
  box-shadow: var(--pm-shadow);
}

html[data-museum="precision"] .lab3d-intro-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 10px;
  pointer-events: none;
  background:
    linear-gradient(var(--pm-orange), var(--pm-orange)) left top / 16px 1.5px no-repeat,
    linear-gradient(var(--pm-orange), var(--pm-orange)) left top / 1.5px 16px no-repeat,
    linear-gradient(var(--pm-orange), var(--pm-orange)) right bottom / 16px 1.5px no-repeat,
    linear-gradient(var(--pm-orange), var(--pm-orange)) right bottom / 1.5px 16px no-repeat;
}

html[data-museum="precision"] .lab3d-intro-card .eyebrow {
  color: var(--pm-orange);
  font-family: var(--pm-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[data-museum="precision"] .lab3d-intro-card h1 {
  color: var(--pm-text);
  font-family: var(--pm-font);
  font-weight: 460;
  letter-spacing: -0.045em;
}

html[data-museum="precision"] .lab3d-intro-lead,
html[data-museum="precision"] .lab3d-intro-alt,
html[data-museum="precision"] .lab3d-music-opt {
  color: var(--pm-muted);
}

html[data-museum="precision"] .lab3d-music-opt input {
  accent-color: var(--pm-orange);
}

html[data-museum="precision"] .lab3d-controls-list li {
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  background: var(--pm-tint);
  color: var(--pm-muted);
}

html[data-museum="precision"] .lab3d-controls-list strong {
  color: var(--pm-text);
  font-family: var(--pm-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-museum="precision"] .lab3d-intro-actions .button {
  border: 0;
  border-radius: 10px;
  background: var(--pm-key);
  color: var(--pm-key-text);
  box-shadow: none;
}

/* Scan card --------------------------------------------------------------------- */
html[data-museum="precision"] .lab3d-scan {
  border: 1px solid var(--pm-border-strong);
  border-radius: 14px;
  background: var(--pm-surface);
  color: var(--pm-text);
  box-shadow: var(--pm-shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html[data-museum="precision"] .lab3d-scan::before {
  background: linear-gradient(90deg, transparent, var(--pm-orange) 50%, transparent);
  background-size: 220% 100%;
}

html[data-museum="precision"] .lab3d-scan-status {
  color: var(--pm-orange);
  font-family: var(--pm-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html[data-museum="precision"] .lab3d-scan-status::before {
  background: var(--pm-orange);
  box-shadow: none;
}

html[data-museum="precision"] .lab3d-scan h2 {
  color: var(--pm-text);
  font-family: var(--pm-font);
  font-weight: 480;
  letter-spacing: -0.02em;
}

html[data-museum="precision"] .lab3d-scan h3 {
  color: var(--pm-dim);
  font-family: var(--pm-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[data-museum="precision"] .lab3d-scan p,
html[data-museum="precision"] .lab3d-scan-summary {
  color: var(--pm-muted);
}

html[data-museum="precision"] .lab3d-scan-summary {
  font-family: var(--pm-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

html[data-museum="precision"] .lab3d-scan-badges span,
html[data-museum="precision"] .lab3d-scan-close {
  border: 1px solid var(--pm-border-strong);
  border-radius: 8px;
  background: var(--pm-tint);
  color: var(--pm-text);
  font-family: var(--pm-mono);
  font-weight: 500;
}

html[data-museum="precision"] .lab3d-scan-safety {
  border: 1px solid var(--pm-orange-line);
  border-radius: 10px;
  background: var(--pm-orange-soft);
}

html[data-museum="precision"] .lab3d-scan-safety h3,
html[data-museum="precision"] .lab3d-scan-safety p {
  color: var(--pm-text);
}

html[data-museum="precision"] .lab3d-scan-link {
  border: 0;
  border-radius: 10px;
  background: var(--pm-key);
  color: var(--pm-key-text);
  box-shadow: none;
}

html[data-museum="precision"] .lab3d-scan-link:hover {
  background: var(--pm-key);
  opacity: 0.9;
}

html[data-museum="precision"] .lab3d-scan-actions .lab3d-chip {
  padding: 8px 12px;
}

/* The opened card: docked bottom-right, compact, scrolls if long. */
html[data-museum="precision"] .lab3d-scan:not(.is-peek) {
  width: min(320px, calc(100% - 32px));
  max-height: min(64%, 540px);
  padding: 16px 18px;
}

html[data-museum="precision"] .lab3d-scan:not(.is-peek) h2 {
  font-size: 1.2rem;
}

html[data-museum="precision"] .lab3d-scan:not(.is-peek) p {
  font-size: 0.84rem;
  line-height: 1.5;
}

html[data-museum="precision"] .lab3d-scan:not(.is-peek) .lab3d-scan-summary {
  font-size: 0.7rem;
}

html[data-museum="precision"] .lab3d-scan:not(.is-peek) .lab3d-scan-badges span {
  font-size: 0.66rem;
}

/* Hover label: small, beside the pointer, never catches the mouse. */
html[data-museum="precision"] .lab3d-scan.is-peek,
html[data-museum="precision"] .lab3d-scan.is-peek.is-open {
  width: auto;
  max-width: 260px;
  padding: 9px 12px 10px;
  border-radius: 10px;
  pointer-events: none;
}

html[data-museum="precision"] .lab3d-scan.is-peek::before {
  display: none;
}

html[data-museum="precision"] .lab3d-scan.is-peek .lab3d-scan-status {
  margin: 0;
  font-size: 0.6rem;
}

html[data-museum="precision"] .lab3d-scan.is-peek h2 {
  margin: 3px 0 0;
  font-size: 0.98rem;
  line-height: 1.2;
}

html[data-museum="precision"] .lab3d-scan.is-peek .lab3d-scan-summary {
  margin: 3px 0 0;
  font-size: 0.66rem;
  line-height: 1.35;
}

/* Joystick ------------------------------------------------------------------------ */
html[data-museum="precision"] .lab3d-joystick {
  border: 1px solid var(--pm-border-strong);
  background: var(--pm-surface);
  box-shadow: var(--pm-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-museum="precision"] .lab3d-stick {
  border: 1px solid var(--pm-orange);
  background: var(--pm-orange-soft);
  box-shadow: none;
}

/* HUD: zone + coordinates (top-left), floor plan (top-right), reticle ------------- */
html[data-museum="precision"] .pm-hud {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 6;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--pm-border-strong);
  border-radius: 10px;
  background: var(--pm-surface);
  color: var(--pm-text);
  font-family: var(--pm-mono);
  pointer-events: none;
}

html[data-museum="precision"] .pm-hud p {
  margin: 0;
}

html[data-museum="precision"] .pm-hud-zone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html[data-museum="precision"] .pm-hud-zone b {
  color: var(--pm-orange);
  font-weight: 500;
}

html[data-museum="precision"] .pm-hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pm-orange);
}

html[data-museum="precision"] .pm-hud-coords {
  color: var(--pm-dim);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

html[data-museum="precision"] .pm-plan {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  width: 66px;
  height: 106px;
  padding: 6px;
  border: 1px solid var(--pm-border-strong);
  border-radius: 10px;
  background: var(--pm-surface);
  pointer-events: none;
  box-sizing: content-box;
}

html[data-museum="precision"] .pm-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  pointer-events: none;
  background:
    linear-gradient(var(--pm-text), var(--pm-text)) center / 1px 100% no-repeat,
    linear-gradient(var(--pm-text), var(--pm-text)) center / 100% 1px no-repeat;
  opacity: 0.35;
}

html[data-museum="precision"] .lab3d-intro:not([hidden]) ~ .pm-reticle {
  display: none;
}

/* Fallback directory ------------------------------------------------------------ */
html[data-museum="precision"] .lab3d-fallback {
  color: var(--pm-text);
}

html[data-museum="precision"] .lab3d-fallback-head .eyebrow {
  color: var(--pm-orange);
  font-family: var(--pm-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[data-museum="precision"] .lab3d-fallback-head h2 {
  color: var(--pm-text);
  font-weight: 460;
  letter-spacing: -0.03em;
}

html[data-museum="precision"] .lab3d-fallback-head p,
html[data-museum="precision"] .lab3d-fallback-card p {
  color: var(--pm-muted);
}

html[data-museum="precision"] .lab3d-fallback-card {
  border: 1px solid var(--pm-border-strong);
  border-radius: 14px;
  background: var(--pm-surface-solid);
  color: var(--pm-text);
  box-shadow: none;
}

html[data-museum="precision"] .lab3d-fallback-card a,
html[data-museum="precision"] .lab3d-fallback-foot .button {
  color: var(--pm-text);
}

html[data-museum="precision"] .lab3d-fallback-foot .button {
  border: 0;
  border-radius: 10px;
  background: var(--pm-key);
  color: var(--pm-key-text);
}

@media (max-width: 700px) {
  html[data-museum="precision"] .pm-plan {
    display: none;
  }
  html[data-museum="precision"] .pm-hud {
    top: 10px;
    left: 10px;
    padding: 8px 10px;
  }
  html[data-museum="precision"] .lab3d-scan {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-museum="precision"] .lab3d-scan::before {
    animation: none;
  }
}

/* Precision Motion's flip button sits under the HUD here, clear of the joystick. */
html[data-museum="precision"][data-theme-variant="motion"] body.lab3d-body .pl-motion-ui {
  top: 146px;
  bottom: auto;
  left: 14px;
}

@media (max-width: 700px) {
  html[data-museum="precision"][data-theme-variant="motion"] body.lab3d-body .pl-motion-ui {
    top: 136px;
    left: 10px;
  }
}

@media (max-width: 700px) {
  html[data-museum="precision"] .lab3d-hint {
    top: auto;
    bottom: 150px;
  }
}

@media (max-width: 560px) {
  html[data-museum="precision"] .lab3d-brand span {
    display: none;
  }
  html[data-museum="precision"] .lab3d-top {
    padding-left: 12px;
    padding-right: 12px;
  }
  html[data-museum="precision"] .lab3d-top-actions {
    gap: 6px;
  }
  html[data-museum="precision"] .lab3d-chip,
  html[data-museum="precision"] .lab3d-music {
    padding: 8px 10px;
  }
  html[data-museum="precision"] .lab3d-exit {
    padding: 9px 12px;
    font-size: 0.84rem;
  }
}

html[data-museum="precision"] .lab3d-music .music-switch {
  background: var(--pm-border-strong);
}

html[data-museum="precision"] .lab3d-music .music-switch[aria-checked="true"] {
  background: var(--pm-orange);
}

/* Phones: the opened card is a short sheet at the bottom, not half the screen.
   Details that repeat the summary (badges, "Worth knowing") are dropped; the
   text scrolls if an exhibit has more to say. */
@media (max-width: 700px) {
  html[data-museum="precision"] .lab3d-scan:not(.is-peek) {
    max-height: 38vh;
    padding: 12px 14px 12px;
    border-radius: 14px;
  }
  html[data-museum="precision"] .lab3d-scan:not(.is-peek) h2 {
    margin-top: 2px;
    font-size: 1.02rem;
  }
  html[data-museum="precision"] .lab3d-scan:not(.is-peek) p {
    margin-top: 6px;
    font-size: 0.8rem;
    line-height: 1.42;
  }
  html[data-museum="precision"] .lab3d-scan:not(.is-peek) .lab3d-scan-summary {
    font-size: 0.66rem;
  }
  html[data-museum="precision"] .lab3d-scan:not(.is-peek) .lab3d-scan-badges,
  html[data-museum="precision"] .lab3d-scan:not(.is-peek) > h3,
  html[data-museum="precision"] .lab3d-scan:not(.is-peek) > h3 + p {
    display: none;
  }
  html[data-museum="precision"] .lab3d-scan:not(.is-peek) .lab3d-scan-actions {
    margin-top: 10px;
    gap: 6px;
  }
  html[data-museum="precision"] .lab3d-scan:not(.is-peek) .lab3d-scan-link,
  html[data-museum="precision"] .lab3d-scan:not(.is-peek) .lab3d-scan-actions .lab3d-chip {
    padding: 7px 11px;
    font-size: 0.78rem;
  }
}

/* Room 12 story caption as an on-screen bar (phones / narrow screens), so the
   words stay visible while you stand close to the molecule. */
html[data-museum="precision"] .pm-story {
  position: absolute;
  top: 132px;
  left: 10px;
  right: 10px;
  z-index: 7;
  max-width: 520px;
  margin-inline: auto;
  padding: 10px 12px 12px;
  border: 1px solid var(--pm-border-strong);
  border-radius: 12px;
  background: var(--pm-surface);
  color: var(--pm-text);
  box-shadow: var(--pm-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

html[data-museum="precision"] .pm-story[hidden] {
  display: none;
}

html[data-museum="precision"] .pm-story p {
  margin: 0;
}

html[data-museum="precision"] .pm-story-tag {
  color: var(--pm-orange);
  font-family: var(--pm-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html[data-museum="precision"] .pm-story-title {
  margin-top: 2px;
  font-size: 0.98rem;
  font-weight: 500;
}

html[data-museum="precision"] .pm-story-text {
  margin: 4px 0 8px;
  color: var(--pm-orange);
  font-size: 0.82rem;
  line-height: 1.35;
}

html[data-museum="precision"] .pm-story-btns {
  display: flex;
  gap: 6px;
}

html[data-museum="precision"] .pm-story-btns button {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--pm-border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--pm-text);
  font: 500 0.8rem var(--pm-font);
  cursor: pointer;
}