/* ============================================================
   B3BOP Type Lab (prototype; lab/ is never deployed). Base tokens come from ../../../splash.css.
   Final design (Task 10, Brett's mix):
   - colour, controls, preview bench: "Warm workshop" = brand Night / "2AM Ramen" mode.
     Warm black, ochre = active, moss dots, one rust ember (Download). Soft trays, pill chips,
     sentence-case headings, +/− toggles, lamp-lit bench under the preview.
   - phone layout: "Signal Dusk console" = preview pinned at the top while you drag sliders,
     presets as a horizontal swipe strip.
   ============================================================ */
:root {
  --bench: #1B1916; --tray: #26221D; --tray-2: #2E2923; --well: #151310; --seam: #3A342C;
  --paper: #D9D1C4; --paper-dim: #A39A8C; --paper-hi: #F1EADF;
  --ochre: #C98A3C; --ochre-lt: #E0B070; --moss: #6E7A4F;
  --rust: #C4541A; --rust-btn: #A8440F; --rust-btn-hi: #B04915;   /* button fills darkened so paper-hi text passes 4.5:1 */
  /* re-point the shared splash.css tokens */
  --clr-bg: var(--bench); --clr-bg-alt: var(--tray-2); --clr-bg-card: var(--tray); --clr-border: var(--seam);
  --clr-text: var(--paper); --clr-text-dim: var(--paper-dim); --clr-text-bright: var(--paper-hi);
  --clr-cyan: var(--ochre); --clr-cyan-dim: rgba(201, 138, 60, .16);
  --clr-orange: var(--rust); --clr-orange-dim: rgba(196, 84, 26, .16);
  --scanline-opacity: 0.02;
}
body {
  min-height: 100vh;
  background:
    radial-gradient(70% 45% at 22% -5%, rgba(201, 138, 60, .13), transparent 62%),
    radial-gradient(50% 40% at 100% 100%, rgba(110, 122, 79, .10), transparent 70%),
    var(--bench);
  background-attachment: fixed;
}
/* one visible focus ring for every control (buttons, summaries, sliders, swatches, text input) */
:focus-visible { outline: 2px solid var(--ochre-lt); outline-offset: 3px; border-radius: 6px; }

/* ---------- header ---------- */
.lab { max-width: 1180px; margin: 0 auto; padding: 32px 16px 48px; position: relative; z-index: 1; }
.head { margin-bottom: 28px; }
.eyebrow { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ochre); }
h1 { margin-top: 4px; display: inline-block; padding-bottom: 8px;
     font-family: var(--font-display); font-size: clamp(1.3rem, 3.4vw, 2.1rem); letter-spacing: .06em;
     text-transform: uppercase; color: var(--paper-hi);
     background: linear-gradient(90deg, var(--ochre), var(--moss) 70%, transparent) left bottom / 100% 2px no-repeat; }
.lede { margin: 12px 0 0; max-width: 70ch; font-size: .84rem; line-height: 1.65; color: var(--paper-dim); }
.back { display: inline-block; margin-top: 10px; padding: 8px 0; font-size: .78rem; color: var(--paper-dim); }
.back:hover { color: var(--paper); }

/* ---------- layout ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); gap: 28px; align-items: start; }
.grid > section {                                /* the bench: preview + transport in one lamp-lit tray */
  position: sticky; top: 20px; z-index: 2; padding: 12px; border-radius: 22px; background: var(--tray);
  border: 1px solid rgba(255, 240, 220, .06);
  box-shadow: 0 30px 60px -30px rgba(201, 138, 60, .35), 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.stage { border-radius: 14px; overflow: hidden; background: var(--well); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4) inset; }
.stage canvas { display: block; margin: 0 auto; width: 100%; height: auto; max-height: calc(100vh - 170px); object-fit: contain; }
.scrub { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 0 4px; font-size: .75rem; color: var(--paper-dim); }
.scrub input { flex: 1; }
#play { min-width: 5.5rem; }
#clock { min-width: 4.6em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ochre-lt); font-size: .8rem; }

/* ---------- trays (collapsible sections, native <details>) ---------- */
.panel {
  padding: 0 18px; border-radius: 20px; border: 1px solid rgba(255, 240, 220, .06);
  background: linear-gradient(180deg, #2A251F, var(--tray));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 14px 30px -20px rgba(0, 0, 0, .7);
}
.panel[open] { padding-bottom: 18px; }
.panel + .panel { margin-top: 14px; }
details.panel > summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: .86rem; letter-spacing: .06em; color: var(--paper-hi);
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel[open] > summary { margin-bottom: 6px; }
details.panel > summary::before {                /* moss dot = closed, ochre dot = open */
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 3px rgba(110, 122, 79, .2);
}
details.panel[open] > summary::before { background: var(--ochre); box-shadow: 0 0 0 3px rgba(201, 138, 60, .2); }
details.panel > summary::after {
  content: '+'; flex: none; margin-left: auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tray-2); color: var(--ochre-lt); font-family: var(--font-body); font-size: 1rem;
}
details.panel[open] > summary::after { content: '\2212'; }
details.panel > summary:hover::after { background: var(--seam); }
#motion-label { color: var(--ochre-lt); }

.sublabel { display: block; margin: 16px 0 8px; font-size: .72rem; letter-spacing: .08em; color: var(--paper-dim); }
details.panel[open] > summary + .sublabel { margin-top: 4px; }

/* ---------- controls ---------- */
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tool {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--seam); border-radius: 999px;
  background: var(--tray-2); color: var(--paper); font-family: var(--font-body); font-size: .8rem; cursor: pointer;
}
.tool:hover { border-color: var(--ochre); color: var(--paper-hi); }
.tool[aria-pressed="true"] { border-color: var(--ochre); background: var(--ochre); color: var(--bench); }
.tool--go { border-color: var(--rust); background: var(--rust-btn); color: var(--paper-hi); font-weight: bold; }
.tool--go:hover { border-color: var(--rust); background: var(--rust-btn-hi); color: var(--paper-hi); }

#presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 0; }   /* 5 + 5 */
#presets .tool { padding: 0 4px; font-size: .76rem; text-align: center; }
#aspects { margin-top: 0; }

.tools--export { display: grid; grid-template-columns: 1fr 1fr; }
.tools--export #dl-json { grid-column: 1 / -1; min-height: 46px; }

input[type=text] {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--seam);
  background: var(--well); color: var(--paper-hi); font-family: var(--font-display); letter-spacing: .08em;
}
input[type=text]:focus { border-color: var(--ochre); box-shadow: 0 0 0 3px rgba(201, 138, 60, .2); }

.row { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr) 4.2rem; align-items: center; gap: 12px;
       margin: 0; min-height: 40px; font-size: .8rem; }
.row > span { color: var(--paper); }
.row output {
  justify-self: end; padding: 2px 10px; border-radius: 999px; background: rgba(201, 138, 60, .13);
  color: var(--ochre-lt); font-size: .76rem; font-variant-numeric: tabular-nums;
}
input[type=range] { width: 100%; height: 32px; margin: 0; accent-color: var(--ochre); cursor: pointer; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--tray); box-shadow: 0 0 0 1px var(--seam); cursor: pointer; }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ochre-lt); }
.sw:focus-visible { border-radius: 50%; }

.hint { margin-top: 12px; font-size: .75rem; line-height: 1.5; color: var(--paper-dim); }
.hint b { color: var(--paper-hi); }
#mode-note { padding: 10px 12px; border-radius: 12px; background: rgba(110, 122, 79, .12); color: var(--paper); }
#mode-note:empty { display: none; }
pre { margin-top: 10px; max-height: 190px; overflow: auto; padding: 10px; border-radius: 12px; background: var(--well);
      font-size: .68rem; color: var(--paper-dim); white-space: pre-wrap; word-break: break-all; }
details > summary.sublabel { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 8px 0 0;
                             cursor: pointer; list-style: none; color: var(--ochre-lt); }
details > summary.sublabel::-webkit-details-marker { display: none; }
details > summary.sublabel::before { content: '+'; width: 20px; text-align: center; }
details[open] > summary.sublabel::before { content: '\2212'; }

/* ---------- tablet: stack, bench scrolls with the page ---------- */
@media (max-width: 860px) {
  .grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .grid > section { position: static; }
  .stage canvas { max-height: 58vh; }
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
  .lab { padding-top: 20px; }
  .head { margin-bottom: 20px; }
  .lede { font-size: .8rem; }
  /* the bench pins to the top of the screen so every slider has live feedback */
  .grid > section {
    position: sticky; top: 0; margin: 0 -16px; padding: 8px 16px 10px;
    border-width: 0 0 1px; border-radius: 0 0 18px 18px;
    box-shadow: 0 16px 28px -18px rgba(0, 0, 0, .8), 0 18px 40px -30px rgba(201, 138, 60, .45);
  }
  .stage { border-radius: 12px; }
  .stage canvas { max-height: 30vh; }
  .scrub { margin-top: 6px; }
  .panel, .panel[open] { padding-left: 14px; padding-right: 14px; }
  /* one row per slider: label + readout, then a full-width slider */
  .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l o" "s s"; gap: 0 12px; margin: 8px 0; }
  .row > span { grid-area: l; } .row > input { grid-area: s; height: 40px; } .row > output { grid-area: o; }
  #time { height: 40px; }
  .tool { min-height: 44px; }
  /* presets become a swipe strip that scrolls inside itself (fade on the right edge hints at more) */
  #presets {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -14px; padding: 6px 14px;
    scroll-snap-type: x proximity; scroll-padding: 0 14px; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  #presets::-webkit-scrollbar { display: none; }
  #presets .tool { flex: 0 0 auto; min-width: 5.4rem; padding: 0 16px; font-size: .8rem; scroll-snap-align: start; }
  #presets .tool:focus-visible { outline-offset: 1px; }
  .tools--export .tool { padding: 0 8px; white-space: nowrap; }
  .sw { width: 42px; height: 42px; }
}

/* ---------- reduced motion: no UI transitions; app.js also starts the preview paused ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}