/* =========================================================
   vofti.com — Lab (per-subject /play/<key>/) shared chrome.
   Every subject lab is its own interactive world, but they
   share this frame so the site reads as one product.
   Style ONLY through --ink-* tokens (site.css) so the light /
   dark theme system works; a lab may set --lab-accent locally.
   ========================================================= */

/* The 30 subject accents are pastels chosen against the dark ground. On paper
   they fall below AA both as text and as a fill behind --ink-black, so derive
   a ground-aware --lab-ink from whatever hue the page set and style through
   that. Each subject keeps its hue; only the value darkens. */
:root { --lab-ink: var(--lab-accent, var(--ink-gold)); }
:root[data-theme="light"] { --lab-ink: color-mix(in srgb, var(--lab-accent, var(--ink-gold)) 50%, #0e0a06); }
@media (prefers-color-scheme: light) {
  :root.theme-os:not([data-theme="dark"]) { --lab-ink: color-mix(in srgb, var(--lab-accent, var(--ink-gold)) 50%, #0e0a06); }
}

/* Semantic tone for negative/incorrect readouts. --ink-rust (#7a3a1a) is a
   dark rust: it reads on paper but only manages 2.19:1 on the dark graphite
   panels the labs use, so it needs a per-ground value like everything else. */
:root { --lab-bad: #d98a5e; }
:root[data-theme="light"] { --lab-bad: #9a4a22; }
@media (prefers-color-scheme: light) {
  :root.theme-os:not([data-theme="dark"]) { --lab-bad: #9a4a22; }
}

.play-hero { max-width: 1400px; margin: 0 auto; padding: 140px 32px 24px; }
.play-hero .eyebrow { color: var(--lab-ink); }
.play-hero h1 { font-size: clamp(56px, 8vw, 120px); color: var(--ink-paper); margin: 8px 0 0; }
.play-hero .sub {
  font-family: 'Source Serif 4', Georgia, serif; font-style: italic;
  font-size: 19px; line-height: 1.45; color: var(--ink-stone);
  margin-top: 22px; max-width: 620px;
}

.sandbox { max-width: 1400px; margin: 64px auto 0; padding: 0 32px; }
.sandbox-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--hairline-warm);
  padding-bottom: 14px; margin-bottom: 28px; gap: 16px; flex-wrap: wrap;
}
.sandbox-head h2 {
  margin: 0; font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -0.025em; color: var(--ink-paper);
}
.sandbox-head .fig {
  color: var(--ink-mute); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}

/* Board = the interactive surface; panel = its controls/readouts. */
.lab-board {
  display: grid; grid-template-columns: 1fr 340px; gap: 0;
  border: 1px solid var(--hairline-warm); background: var(--ink-graphite);
}
@media (max-width: 900px) { .lab-board { grid-template-columns: 1fr; } }
.lab-stage { padding: 24px; min-width: 0; }
.lab-stage svg, .lab-stage canvas { width: 100%; height: auto; display: block; }
/* A 10% black tint recesses the panel nicely on the dark ground, but on
   paper it drags the panel to a mid-tone that muted text cannot sit on
   (--ink-mute fell to 3.72:1). Lighter tint for the light theme. */
:root { --lab-panel-tint: rgba(0,0,0,0.10); }
/* On paper the panel reads as RAISED, not recessed: a black tint stacks with
   the panel base and each nesting level drags muted text further under AA
   (down to 3.54:1). A white veil stacks the other way, so nesting can only
   improve legibility. */
:root[data-theme="light"] { --lab-panel-tint: rgba(255,255,255,0.55); }
@media (prefers-color-scheme: light) {
  :root.theme-os:not([data-theme="dark"]) { --lab-panel-tint: rgba(255,255,255,0.55); }
}
.lab-panel { border-left: 1px solid var(--hairline-warm); padding: 22px; background: var(--lab-panel-tint); }
@media (max-width: 900px) { .lab-panel { border-left: 0; border-top: 1px solid var(--hairline-warm); } }

.lab-ctrl { margin-bottom: 20px; }
.lab-ctrl .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lab-ctrl label, .lab-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-fawn);
}
.lab-ctrl .val {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--lab-ink); font-variant-numeric: tabular-nums;
}
.lab-ctrl input[type=range] {
  width: 100%; margin-top: 8px; accent-color: var(--lab-ink);
  background: transparent; padding: 0; height: 22px; border: 0;
}
.lab-ctrl .hint {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 13.5px;
  line-height: 1.45; color: var(--ink-stone); margin-top: 6px;
}
.lab-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline-warm); }
.lab-readout .k { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.lab-readout .v {
  font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 30px;
  color: var(--lab-ink); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.lab-note {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 14px; line-height: 1.55;
  color: var(--ink-fawn); margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline-warm);
}
.lab-note strong { color: var(--ink-paper); }

/* Buttons / toggles inside a lab */
.lab-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lab-btns button {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 8px 12px; background: transparent;
  border: 1px solid var(--hairline-warm); color: var(--ink-fawn); cursor: pointer;
  transition: border-color .12s, color .12s;
}
.lab-btns button:hover { border-color: var(--lab-ink); color: var(--ink-paper); }
.lab-btns button[aria-pressed="true"] { background: var(--lab-ink); color: var(--ink-black); border-color: var(--lab-ink); }

/* Grid of small cells (heatmaps, tables, matrices) */
.lab-grid { display: grid; gap: 3px; }
.lab-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-paper);
  border: 1px solid var(--hairline-cool);
}

/* Taster block (six real questions, shared by every lab) */
.taster { margin-top: 22px; border: 1px solid var(--hairline-warm); background: var(--ink-graphite); padding: 22px 24px; }
.taster .tq-prog { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:12px; }
.taster .tq-q { font-family:'Source Serif 4',Georgia,serif; font-size:17.5px; line-height:1.55; color:var(--ink-paper); margin:0 0 16px; }
.taster .tq-opts { display:grid; gap:8px; }
.taster .tq-opts button { text-align:left; font-family:'Inter',sans-serif; font-size:14.5px; line-height:1.4; color:var(--ink-fawn); background:transparent; border:1px solid var(--hairline-warm); padding:12px 16px; cursor:pointer; }
.taster .tq-opts button:hover:not([disabled]) { border-color: var(--lab-ink); }
.taster .tq-opts button[data-state="right"] { border-color:#3f9b63; color:var(--ink-paper); background:rgba(63,155,99,0.08); }
.taster .tq-opts button[data-state="wrong"] { border-color:var(--ink-rust); background:rgba(160,80,60,0.07); }
.taster .tq-fb { margin-top:14px; border-left:3px solid var(--lab-ink); padding:12px 16px; background:rgba(202,164,114,0.05); }
.taster .tq-fb .v { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; }
.taster .tq-fb .v.ok { color:#5cb87f; } .taster .tq-fb .v.no { color:var(--ink-rust); }
.taster .tq-fb p { font-family:'Source Serif 4',Georgia,serif; font-size:14.5px; line-height:1.55; color:var(--ink-fawn); margin:8px 0 0; }
.taster .tq-next, .taster .tq-cta {
  margin-top:14px; display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase; padding:11px 18px; cursor:pointer; text-decoration:none;
  background: var(--lab-ink); color: var(--ink-black); border:0;
}
.taster .tq-score { font-family:'Inter Tight',sans-serif; font-weight:800; font-size:34px; color:var(--ink-paper); }

/* Lab index (hub) cards */
.lab-index { max-width:1400px; margin:40px auto 0; padding:0 32px; }
.lab-lvl { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); margin:26px 0 10px; }
.lab-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.lab-cards a { display:block; border:1px solid var(--hairline-warm); border-left:3px solid var(--ink-gold); background:var(--ink-graphite); padding:16px 18px; text-decoration:none; transition:border-color .15s, transform .15s; }
.lab-cards a:hover { border-color:var(--ink-gold); transform:translateY(-2px); }
.lab-cards .k { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-mute); }
.lab-cards .n { font-family:'Inter Tight',sans-serif; font-weight:700; font-size:17px; color:var(--ink-paper); margin-top:5px; letter-spacing:-0.01em; }
.lab-cards .d { font-family:'Source Serif 4',Georgia,serif; font-size:13.5px; color:var(--ink-stone); margin-top:7px; line-height:1.4; }

@media (max-width: 640px) {
  .play-hero { padding: 110px 18px 18px; }
  .sandbox, .lab-index { padding: 0 18px; }
  .lab-stage, .lab-panel { padding: 18px; }
  .lab-readouts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-cards a:hover { transform: none; }
}