/* ──────────────────────────────────────────────────────────────────────
   GA Playground — shared engine shell (Stage 2: layout + accessibility
   skeleton only; the graphic region holds a placeholder until Stage 3's
   2D renderer lands). Loaded only on pages that actually embed a
   .ga-playground block (see tools/site/build.py's head_extras()).

   Visual language matches the existing ga-guide "demo" boxes
   (.demo-wrap / .demo-head / .demo-canvas / .demo-ctrl in teaching.css)
   deliberately, so a reader doesn't experience this as a fourth,
   differently-styled interactive widget — it's the replacement for
   those, not a fifth sibling.
   ────────────────────────────────────────────────────────────────────── */

.ga-playground {
  --ga-pg-border: #e8e4dc;
  --ga-pg-accent: #185fa5;
  --ga-pg-accent-ink: #ffffff;
  --ga-pg-label: #5E5A53;
  --ga-pg-ink: #3d3a34;
  border: 1px solid var(--ga-pg-border);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5rem 0;
  background: var(--tint, #faf8f4);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ga-pg-ink);
}

/* ── Static fallback (no-JS, or before the engine hydrates) ────────── */
.ga-playground .ga-pg-fallback {
  padding: 1.1rem 1.25rem;
}
.ga-playground .ga-pg-fallback p:first-child { margin-top: 0; }
.ga-playground.ga-pg-hydrated .ga-pg-fallback { display: none; }
.ga-playground .ga-pg-live { display: none; }
.ga-playground.ga-pg-hydrated .ga-pg-live { display: block; }

/* ── Head: heading + example dropdown ──────────────────────────────── */
.ga-pg-head {
  padding: 0.65rem 1.1rem;
  background: var(--tint, #f2efe8);
  border-bottom: 1px solid var(--ga-pg-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}
.ga-pg-head-label {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ga-pg-label);
  white-space: nowrap;
}
.ga-pg-select {
  flex: 1 1 auto;
  min-width: 12rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
  border: 1px solid var(--ga-pg-border);
  border-radius: 7px;
  background: #fff;
  color: var(--ga-pg-ink);
}

/* ── Conceptual question ────────────────────────────────────────────── */
.ga-pg-question {
  margin: 0;
  padding: 0.85rem 1.1rem 0.25rem;
  font-style: italic;
  font-size: 0.98rem;
}

/* ── Main area: graphic + controls, side by side on wide screens ──── */
.ga-pg-main {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 1.1rem;
}
@media (max-width: 42rem) {
  .ga-pg-main { grid-template-columns: 1fr; }
}

.ga-pg-graphic {
  min-height: 220px;
  border: 1px dashed var(--ga-pg-border);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ga-pg-label);
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 0.75rem;
  text-align: center;
  padding: 1rem;
}
.ga-pg-graphic svg, .ga-pg-graphic canvas { display: block; max-width: 100%; }

.ga-pg-controls {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ga-pg-control-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ga-pg-control-row label {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ga-pg-label);
  min-width: 5.5rem;
}
.ga-pg-control-row input[type="range"] {
  flex: 1;
  min-width: 6rem;
  accent-color: var(--ga-pg-accent);
  min-height: 1.5rem; /* generous touch target */
}
.ga-pg-control-row input[type="number"],
.ga-pg-control-row select {
  width: 5.5rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--ga-pg-border);
  border-radius: 6px;
}
.ga-pg-control-row .ga-pg-val {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 0.75rem;
  min-width: 3rem;
  text-align: right;
}
.ga-pg-controls-empty {
  font-size: 0.8rem;
  color: var(--ga-pg-label);
  font-style: italic;
}

/* ── Formula region ─────────────────────────────────────────────────── */
.ga-pg-formula {
  margin: 0 1.1rem 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #1a1814;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8e4dc;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 0.85rem;
  overflow-x: auto;
  white-space: pre;
}

/* ── Explanation + exploration prompt ───────────────────────────────── */
.ga-pg-explanation {
  margin: 0 1.1rem 0.75rem;
  font-size: 0.92rem;
}
.ga-pg-prompt {
  margin: 0 1.1rem 0.9rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid #ba7517;
  background: rgba(186, 117, 23, 0.08);
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
}
.ga-pg-prompt strong { color: #633806; }

/* ── Actions (reset etc.) ───────────────────────────────────────────── */
.ga-pg-actions {
  padding: 0.65rem 1.1rem 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ga-pg-btn {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.95rem;
  min-height: 2.25rem;
  border: 1px solid var(--ga-pg-border);
  border-radius: 20px;
  background: #fff;
  color: var(--ga-pg-ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ga-pg-btn:hover { background: var(--tint, #e9e5dc); }
.ga-pg-btn.primary {
  background: var(--ga-pg-accent);
  color: var(--ga-pg-accent-ink);
  border-color: var(--ga-pg-accent);
}
.ga-pg-btn.primary:hover { filter: brightness(0.9); }

/* ── Accessible state summary (visually present, not screen-reader-only:
   the brief asks for a textual state summary as a first-class region,
   not a hidden aria-only echo) ──────────────────────────────────────── */
.ga-pg-summary {
  margin: 0 1.1rem 0.9rem;
  font-size: 0.82rem;
  color: var(--ga-pg-label);
}

/* ── Focus visibility (never rely on colour/hover alone) ────────────── */
.ga-playground :focus-visible {
  outline: 2px solid var(--ga-pg-accent);
  outline-offset: 2px;
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ga-playground * { transition: none !important; animation: none !important; }
}

/* ── Dark / high-contrast: fall back on the site's own --tint token,
   already theme-aware (see themes.css); only the few literal colours
   above that aren't tokens yet get explicit overrides here. ─────────── */
html[data-theme="dark"] .ga-playground,
html[data-theme="contrast"] .ga-playground {
  --ga-pg-border: var(--panel-border, #5f5e5a);
  --ga-pg-label: var(--panel-fg, #c9c5ba);
  --ga-pg-ink: var(--panel-fg, #e8e4dc);
}
html[data-theme="dark"] .ga-pg-graphic,
html[data-theme="contrast"] .ga-pg-graphic,
html[data-theme="dark"] .ga-pg-select,
html[data-theme="contrast"] .ga-pg-select,
html[data-theme="dark"] .ga-pg-btn,
html[data-theme="contrast"] .ga-pg-btn {
  background: var(--panel-bg-a, #231f1a);
  color: var(--ga-pg-ink);
}
html[data-theme="contrast"] .ga-pg-prompt {
  background: rgba(255, 200, 87, 0.18);
}