/*
 * SparkLab scaffold styles — age-6 / pre-reader friendly.
 *  - BIG targets (≥ ~96px ≈ 2cm), high contrast, generous spacing
 *  - locked controls are visibly dimmed + padlocked (never a harsh X)
 *  - color-blind-safe: never rely on colour alone (shape + emoji + text carry meaning)
 *  - reduce-motion honoured
 *  All self-hosted, no external fonts.
 */
:root {
  /* The page IS dark by design — declare it so Chrome (esp. Android "Auto Dark Theme") does NOT
   * algorithmically re-darken/invert our colours into low-contrast mush. This is the real fix for
   * the owner-flagged Chrome-Android light-on-light; the button appearance reset + bright colours
   * below are belt-and-braces. */
  color-scheme: dark;
  --bg: #0f1c33;
  --panel: #1b2b4a;
  --ink: #f8fafc;
  --muted: #b9c9e2;   /* brighter secondary text — clearly readable on the dark theme (owner-sensitive to faint text) */
  --go: #22c55e;
  --warn: #f59e0b;
  --lock: #475569;
  --accent: #ffd23f;
  font-size: 18px;
}

* { box-sizing: border-box; }

/* Reset the NATIVE button appearance so our dark backgrounds always apply — on iOS Safari an
 * un-reset <button> renders with a system-LIGHT background, which made our light text look like
 * "light text on a pale chip" (owner-flagged on a phone). This makes the dark theme hold everywhere. */
button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#app { max-width: 900px; margin: 0 auto; padding: 16px; }

/* ---- header / persistent buttons ---- */
.sl-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px 18px;
}
.sl-mascot { font-size: 44px; line-height: 1; }
.sl-title { font-size: 28px; font-weight: 800; letter-spacing: 0.5px; }
.sl-persist { margin-left: auto; display: flex; gap: 10px; }
.sl-btn {
  min-width: 72px; min-height: 72px; font-size: 32px;
  border: none; border-radius: 20px; background: var(--panel); color: var(--ink);
  cursor: pointer; box-shadow: 0 3px 0 #0b1426;
}
.sl-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b1426; }
.sl-ask { background: #2b3f66; }

/* ---- speech bubble (visual channel for ALL narration — dual-channel a11y) ---- */
.sl-speech {
  min-height: 22px; margin: 0 4px 12px; padding: 10px 14px;
  background: #16233f; border-radius: 16px; font-size: 18px; line-height: 1.35;
  border-left: 6px solid var(--accent);
}
.sl-speech:empty { display: none; }

/* ---- home shelf ---- */
.sl-hello { font-size: 20px; color: var(--muted); }
.sl-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.sl-card {
  min-height: 180px; border: none; border-radius: 28px; cursor: pointer;
  background: linear-gradient(160deg, #24365c, #16233f);
  color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 6px 0 #0b1426, 0 0 0 3px rgba(255,210,63,0.25);
}
.sl-card-glow { font-size: 64px; filter: drop-shadow(0 0 16px rgba(255,210,63,0.6)); }
.sl-card-label { font-size: 20px; font-weight: 700; text-align: center; padding: 0 10px; }
.sl-card { position: relative; }
.sl-card-badge { position: absolute; top: 8px; right: 12px; font-size: 30px; filter: drop-shadow(0 0 8px rgba(255,210,63,0.7)); }

/* ---- lab ---- */
.sl-lab-title { font-size: 24px; margin: 6px 0 14px; }
.sl-step { font-size: 22px; font-weight: 700; }
.sl-slots { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.sl-slot {
  min-height: 92px; min-width: 150px; font-size: 20px; font-weight: 700;
  border-radius: 22px; border: 4px dashed #3a517f; background: #16233f; color: var(--ink); cursor: pointer;
}
.sl-slot.chosen { border-style: solid; border-color: var(--accent); background: #21345a; }
.sl-commit {
  min-height: 84px; font-size: 22px; font-weight: 800; padding: 0 22px;
  border: none; border-radius: 22px; background: #2b3f66; color: var(--ink); cursor: pointer; margin-top: 6px;
}

.sl-runrow { display: flex; gap: 14px; margin: 18px 0; flex-wrap: wrap; }
.sl-run, .sl-hint {
  min-height: 96px; min-width: 200px; font-size: 26px; font-weight: 800;
  border: none; border-radius: 24px; cursor: pointer; color: #06210f;
}
.sl-run { background: var(--go); }
.sl-hint { background: var(--accent); }
/* locked = visibly dimmed + padlock, never a harsh X */
.sl-run.locked, .sl-hint.locked { background: var(--lock); color: #cbd5e1; cursor: not-allowed; }
.sl-run.locked::after, .sl-hint.locked::after { content: " 🔒"; }

.sl-region { min-height: 28px; font-size: 18px; color: var(--accent); margin: 4px 0; }
.sl-feedback { min-height: 56px; font-size: 21px; line-height: 1.4; background: #16233f; border-radius: 18px; padding: 14px; }

/* ---- inert / coming-soon ---- */
.sl-inert { text-align: center; padding: 64px 20px; }
.sl-inert-emoji { font-size: 72px; }
.sl-inert p { font-size: 24px; font-weight: 700; }
.sl-inert-small { font-size: 16px; color: var(--muted); font-weight: 400; }

/* ---- verify readout (dev/RULE-0 evidence; harmless if shown) ---- */
.sl-verify {
  margin-top: 22px; padding: 10px 12px; border-radius: 12px;
  background: #0b1426; color: #7fd1a6; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; word-break: break-word;
}

/* ---- v1 lab: tray + loop builder ---- */
.sl-tray { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.sl-traypart {
  min-height: 84px; min-width: 130px; font-size: 19px; font-weight: 700;
  border-radius: 20px; border: 4px solid #3a517f; background: #16233f; color: var(--ink); cursor: pointer;
}
.sl-traypart.sel { border-color: var(--accent); background: #21345a; }
.sl-pg { font-size: 28px; }

.sl-loop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.sl-batt { font-size: 40px; }
.sl-track { display: flex; gap: 10px; flex-wrap: wrap; }
.sl-loopslot {
  min-height: 92px; min-width: 110px; border-radius: 18px; border: 4px dashed #3a517f;
  background: #101d33; color: var(--ink); cursor: pointer; font-size: 18px; font-weight: 700;
}
.sl-loopslot.filled { border-style: solid; border-color: #5b7bb5; background: #1b2b4a; display: flex; flex-direction: column; gap: 5px; padding: 5px; cursor: default; }
.sl-partbtn { flex: 1; min-height: 58px; font-size: 18px; font-weight: 700; border: none; border-radius: 12px; background: #16233f; color: var(--ink); cursor: pointer; }
.sl-takeout { min-height: 42px; font-size: 15px; font-weight: 800; border: none; border-radius: 12px; background: #c0392b; color: #ffffff; cursor: pointer; }
.sl-takeout:active { transform: translateY(1px); }
.sl-slotgap { font-size: 30px; color: #cdddf2; }
.sl-orient { font-size: 16px; font-weight: 700; color: #ffe27a; }
.sl-wire, .sl-press {
  min-height: 84px; min-width: 180px; font-size: 19px; font-weight: 800; padding: 0 18px;
  border: none; border-radius: 20px; background: #2b3f66; color: var(--ink); cursor: pointer;
}
.sl-wire.on { background: #2f7d52; }
.sl-press.on { background: #2f7d52; }

.sl-dots { display: flex; gap: 6px; min-height: 26px; font-size: 22px; margin: 4px 0; }
.sl-dot.flow { color: var(--accent); animation: sl-pulse 0.8s ease-in-out infinite; }
.sl-dot.stop { color: #ef4444; }
@keyframes sl-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.sl-hwcard { margin-top: 14px; padding: 16px; border-radius: 18px; background: #102a1c; border-left: 8px solid var(--go); }
.sl-hwtitle { font-size: 22px; font-weight: 800; color: #7df0aa; }
.sl-hwparts { margin: 8px 0; font-size: 18px; }
.sl-hwsafety { font-size: 16px; color: #ffd9a3; margin-top: 6px; }
.sl-hwobs { font-size: 18px; margin-top: 8px; font-weight: 700; }
.sl-obs-q { font-size: 18px; font-weight: 700; margin: 8px 0 6px; }
.sl-obs-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.sl-obs-card { min-height: 56px; min-width: 120px; font-size: 18px; font-weight: 700; border: none; border-radius: 14px; background: #243a55; color: var(--ink); cursor: pointer; }

/* ---- grown-up gate + settings modal ---- */
.sl-grownups { margin-top: 22px; min-height: 48px; font-size: 15px; background: transparent; color: var(--muted); border: 2px solid #2b3f66; border-radius: 14px; cursor: pointer; padding: 8px 16px; }
.sl-modal { position: fixed; inset: 0; background: rgba(8,14,26,0.82); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.sl-modal-card { background: var(--panel); border-radius: 22px; padding: 22px; max-width: 420px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.sl-modal-title { margin: 0 0 12px; font-size: 22px; }
.sl-gate-msg { font-size: 16px; color: var(--muted); }
.sl-gate-q { font-size: 30px; font-weight: 800; margin: 10px 0; text-align: center; }
.sl-gate-display { font-size: 28px; font-weight: 800; text-align: center; min-height: 38px; background: #0b1426; border-radius: 12px; padding: 6px; letter-spacing: 4px; }
.sl-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.sl-key { min-height: 60px; font-size: 24px; font-weight: 800; border: none; border-radius: 14px; background: #2b3f66; color: var(--ink); cursor: pointer; }
.sl-key-ok { background: var(--go); color: #06210f; }
.sl-key-clear { background: var(--warn); color: #2a1800; }
.sl-set-note { font-size: 15px; color: var(--muted); line-height: 1.45; }
.sl-set-reset { min-height: 64px; width: 100%; font-size: 19px; font-weight: 800; border: none; border-radius: 16px; background: #7a2230; color: #ffe1e6; cursor: pointer; margin: 10px 0; }
.sl-modal-cancel { min-height: 56px; width: 100%; font-size: 18px; border: none; border-radius: 16px; background: #2b3f66; color: var(--ink); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .sl-btn:active { transform: none; }
}