/* Shared laboratory chrome. Specimen renderers stay local to each Bases lab. */
:root {
  --lab-bg: #12100c;
  --lab-bg-mid: #1e1914;
  --lab-bg-edge: #090806;
  --lab-panel: rgba(18, 16, 12, 0.96);
  --lab-ink: #eee7dc;
  --lab-muted: rgba(238, 231, 220, 0.58);
  --lab-faint: rgba(238, 231, 220, 0.38);
  --lab-brass: #d4a06a;
  --lab-cyan: #74d8e8;
  --lab-line: rgba(212, 160, 106, 0.2);
  --lab-line-strong: rgba(212, 160, 106, 0.54);
  --lab-ui: "Source Sans 3", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --lab-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  --lab-control-h: 2.15rem;
}

[data-bases-lab], .lab-shell {
  color: var(--lab-ink);
  font-family: var(--lab-ui);
  -webkit-font-smoothing: antialiased;
}

[data-bases-lab] :is(button, a, summary):focus-visible,
.lab-shell :is(button, a, summary):focus-visible {
  outline: 2px solid var(--lab-cyan);
  outline-offset: 2px;
}

[data-bases-lab] .lab-kicker {
  color: var(--lab-faint);
  font: 500 0.62rem/1.2 var(--lab-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

[data-bases-lab] .lab-rule {
  border-color: var(--lab-line);
}

.lab-shell :is(.mast, header) {
  border-color: var(--lab-line);
}

.lab-shell :is(.panel, aside) {
  border-color: var(--lab-line);
}

.lab-shell :is(.mast-nav, .back) a,
.lab-shell a.back {
  color: var(--lab-muted);
}

.lab-shell :is(.chip-row, .choices) button {
  min-height: var(--lab-control-h);
  border-color: var(--lab-line);
  border-radius: 2px;
}

[data-bases-lab] .lab-pill {
  min-height: var(--lab-control-h);
  border: 1px solid var(--lab-line);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--lab-muted);
}

[data-bases-lab] .lab-pill:is([aria-pressed="true"], .active) {
  border-color: var(--lab-line-strong);
  background: color-mix(in srgb, var(--lab-brass) 13%, transparent);
  color: var(--lab-ink);
}

@media (prefers-reduced-motion: reduce) {
  [data-bases-lab] *, [data-bases-lab] *::before, [data-bases-lab] *::after {
    scroll-behavior: auto !important;
  }
}