/* ============================================================
   Creative lab — three LIGHT themes on top of the shared tokens.
   load order: /assets/site.css -> /tools/assets/tools.css -> this file
   ============================================================ */
:root[data-lab-page] {
  color-scheme: light;

  --lab-paper:        #f6f6f3;
  --lab-surface:      #fffefb;
  --lab-surface-2:    #f0f0ec;
  --lab-ink:          #16181d;
  --lab-ink-2:        #4c515b;
  --lab-ink-3:        #8a909b;
  --lab-line:         rgba(22, 24, 29, .12);
  --lab-line-strong:  rgba(22, 24, 29, .24);
  --lab-accent:       #0066cc;
  --lab-accent-2:     #d94f4f;
  --lab-accent-soft:  rgba(0, 102, 204, .09);
  --lab-canvas:       #fffefb;
  --lab-grid:         rgba(22, 24, 29, .075);
  --lab-obstacle:     #2f3640;
  --lab-visited:      rgba(0, 102, 204, .16);

  /* map shared tokens so site.css / tools.css primitives follow the lab theme */
  --paper:        var(--lab-paper);
  --surface:      var(--lab-surface);
  --surface-2:    var(--lab-surface-2);
  --ink:          var(--lab-ink);
  --ink-2:        var(--lab-ink-2);
  --ink-3:        var(--lab-ink-3);
  --line:         var(--lab-line);
  --line-strong:  var(--lab-line-strong);
  --blue:         var(--lab-accent);
  --blue-ink:     #ffffff;
  --blue-soft:    var(--lab-accent-soft);
  --coral:        var(--lab-accent-2);
  --coral-soft:   rgba(217, 79, 79, .10);
  --radius:       12px;
  --radius-sm:    9px;
}

:root[data-lab-page][data-lab-theme="blueprint"] {
  --lab-paper:        #eaf0f5;
  --lab-surface:      #f7fafc;
  --lab-surface-2:    #e1eaf1;
  --lab-ink:          #152433;
  --lab-ink-2:        #40566b;
  --lab-ink-3:        #758a9c;
  --lab-line:         rgba(21, 36, 51, .14);
  --lab-line-strong:  rgba(21, 36, 51, .28);
  --lab-accent:       #12607f;
  --lab-accent-2:     #c25a3a;
  --lab-accent-soft:  rgba(18, 96, 127, .10);
  --lab-canvas:       #f4f8fb;
  --lab-grid:         rgba(18, 96, 127, .13);
  --lab-obstacle:     #35506a;
  --lab-visited:      rgba(18, 96, 127, .18);
  --coral-soft:       rgba(194, 90, 58, .10);
}

:root[data-lab-page][data-lab-theme="sand"] {
  --lab-paper:        #f5efe4;
  --lab-surface:      #fffaf1;
  --lab-surface-2:    #efe6d7;
  --lab-ink:          #2b241b;
  --lab-ink-2:        #5c5041;
  --lab-ink-3:        #94836e;
  --lab-line:         rgba(43, 36, 27, .14);
  --lab-line-strong:  rgba(43, 36, 27, .28);
  --lab-accent:       #a4552b;
  --lab-accent-2:     #3f6b63;
  --lab-accent-soft:  rgba(164, 85, 43, .10);
  --lab-canvas:       #fffaf1;
  --lab-grid:         rgba(164, 85, 43, .11);
  --lab-obstacle:     #5b4a38;
  --lab-visited:      rgba(164, 85, 43, .16);
  --coral-soft:       rgba(63, 107, 99, .10);
}

/* blueprint: faint drafting grid on the page itself */
:root[data-lab-theme="blueprint"] body {
  background-image:
    linear-gradient(to right, var(--lab-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lab-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}
:root[data-lab-theme="sand"] body {
  background-image: radial-gradient(circle at 18% 0%, rgba(164, 85, 43, .055), transparent 58%);
}

/* ---------- top bar ---------- */
.lab-topbar .topbar-inner { min-height: 60px; }
.lab-link {
  font-size: 13px; color: var(--ink-2); padding: 8px 12px;
  border-radius: 8px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lab-link:hover { background: var(--blue-soft); color: var(--blue); }
.lab-theme-switch {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); padding: 3px;
}
.theme-caption {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--ink-3); padding: 0 8px 0 6px; white-space: nowrap;
}
.theme-btn {
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-2);
  padding: 5px 10px; font-size: 11.5px; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-btn:hover { color: var(--blue); }
.theme-btn.is-active { background: var(--blue); color: var(--blue-ink); font-weight: 600; }
.theme-btn .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px; border: 1px solid rgba(0, 0, 0, .12);
}
.theme-btn[data-theme-btn="paper"] .dot { background: #0066cc; }
.theme-btn[data-theme-btn="blueprint"] .dot { background: #12607f; }
.theme-btn[data-theme-btn="sand"] .dot { background: #a4552b; }

/* ---------- intro ---------- */
.lab-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px;
  gap: 32px; align-items: end;
  padding: clamp(38px, 6vw, 72px) 0 clamp(26px, 3.6vw, 44px);
}
.lab-intro h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(36px, 5.4vw, 64px); line-height: 1.14;
  letter-spacing: -.02em; margin: 14px 0 0; text-wrap: pretty;
}
.lab-intro h1 em { font-style: normal; color: var(--blue); }
.lab-intro p {
  margin: 18px 0 0; max-width: 64ch; font-size: 14.5px;
  color: var(--ink-2); line-height: 1.75; text-wrap: pretty;
}
.lab-intro-meta {
  border-left: 1px solid var(--line-strong); padding-left: 20px;
  display: grid; gap: 14px;
}
.lab-intro-meta div { display: grid; gap: 1px; }
.lab-intro-meta strong {
  font-family: var(--font-mono); font-size: 26px; font-weight: 500;
  letter-spacing: -.04em; line-height: 1.1;
}
.lab-intro-meta small { font-size: 11.5px; color: var(--ink-3); letter-spacing: .06em; }

/* ---------- experiment tabs ---------- */
.lab-tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.lab-tab {
  position: relative; display: grid; gap: 5px;
  padding: 18px 20px 20px; border-right: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.lab-tab:first-child { padding-left: 0; }
.lab-tab:last-child { border-right: 0; }
.lab-tab:hover { background: var(--blue-soft); }
.lab-tab.is-active { background: var(--blue-soft); }
.lab-tab.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--blue);
}
.lab-tab .tab-kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--ink-3); text-transform: uppercase;
}
.lab-tab.is-active .tab-kicker { color: var(--blue); }
.lab-tab .tab-name {
  font-family: var(--font-serif); font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 600; letter-spacing: -.01em;
}
.lab-tab .tab-desc { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; }

/* ---------- shell ---------- */
.lab-shell { padding: 30px 0 72px; }
.lab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.lab-head .eyebrow { color: var(--blue); }
.lab-head h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 650; letter-spacing: -.02em; margin: 9px 0 8px; }
.lab-head p { margin: 0; color: var(--ink-2); font-size: 13.5px; max-width: 78ch; text-wrap: pretty; }
.lab-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-work {
  display: grid; grid-template-columns: minmax(258px, 306px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px); align-items: start;
}
.lab-controls { position: sticky; top: 84px; min-width: 0; }
.ctrl-block { border-bottom: 1px solid var(--line); padding: 0 0 18px; margin-bottom: 18px; }
.ctrl-block:last-child { border-bottom: 0; }
.ctrl-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 13px;
}
.ctrl-block .segmented { width: 100%; }
.ctrl-block .segmented .seg-btn { flex: 1 1 auto; padding: 7px 9px; }
.lab-slider { margin: 0 0 14px; }
.lab-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.lab-slider-head label { font-size: 12px; color: var(--ink-2); }
.lab-slider-head output { font-family: var(--font-mono); font-size: 11.5px; color: var(--blue); }
.lab-range, .lab-slider input[type="range"] {
  width: 100%; height: 22px; margin: 0; accent-color: var(--blue); cursor: pointer;
}
.lab-controls .textarea { min-height: 74px; font-size: 12px; }
.lab-controls .actions { margin: 0; }
.lab-controls .field-grid { gap: 12px; margin-bottom: 14px; }
.lab-controls .input { min-height: 36px; padding: 7px 10px; font-size: 13px; }
.lab-file {
  width: 100%; font-size: 11.5px; color: var(--ink-2);
  border: 1px dashed var(--line-strong); border-radius: 9px;
  padding: 11px 12px; background: var(--surface); cursor: pointer;
}
.lab-file::file-selector-button {
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2);
  color: var(--ink-2); padding: 5px 10px; margin-right: 10px; font-size: 11.5px; cursor: pointer;
}
.check { font-size: 12px; }

/* ---------- stage ---------- */
.lab-stage { min-width: 0; }
.stage-bar {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.stage-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stage-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.stage-frame {
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--lab-canvas); overflow: hidden; box-shadow: var(--shadow-sm);
}
.stage-frame canvas {
  display: block; width: 100%; height: auto; touch-action: none;
}
.stage-frame canvas.is-drawing { cursor: crosshair; }
.stage-hint { margin: 11px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.65; }
.lab-status {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px; margin-top: 18px; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; background: var(--line);
}
.lab-stat { background: var(--surface); padding: 11px 13px; display: grid; gap: 3px; }
.lab-stat span { font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; }
.lab-stat strong { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ink); }
.lab-stat strong.accent { color: var(--blue); }
.lab-note {
  margin-top: 14px; padding: 10px 13px; border: 1px solid var(--line);
  border-left: 2px solid var(--blue); border-radius: 8px;
  background: var(--surface); font-size: 12px; color: var(--ink-2);
}
.lab-note.is-error { border-left-color: var(--coral); color: var(--coral); background: var(--coral-soft); }
.lab-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-3);
}
.lab-foot a:hover { color: var(--blue); }

/* mode groups inside controls */
[data-mode-group] { display: none; }
[data-mode-group].is-shown { display: block; }

@media (max-width: 1100px) {
  .lab-work { grid-template-columns: 1fr; }
  .lab-controls { position: static; }
  .lab-controls .ctrl-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 20px; }
  .lab-controls .ctrl-title { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .lab-intro { grid-template-columns: 1fr; gap: 22px; }
  .lab-intro-meta { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; grid-template-columns: repeat(2, 1fr); }
  .lab-tabs { grid-template-columns: 1fr; }
  .lab-tab { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 0; }
  .lab-tab:last-child { border-bottom: 0; }
  .lab-tab.is-active::after { display: none; }
  .theme-caption, .lab-link { display: none; }
  .lab-shell { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}