/* ------------------ base ------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0e0e10; color: #ddd;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; }
/* Desktop / iPad-landscape default: page itself does NOT scroll —
   canvas scales to fit the viewport, sidebar panel scrolls its own
   content. The mobile @media block below (≤900 px) flips this back
   to page-scrolling for narrow screens. */
@media (min-width: 901px) {
  html, body { height: 100vh; overflow: hidden; }
}

#app { display: grid; grid-template-columns: 220px 1fr;
  gap: 12px; padding: 12px; min-height: 100vh; }
@media (min-width: 901px) {
  #app { height: 100vh; overflow: hidden; }
}

/* ------------------ sidebar ------------------ */
/* Sidebar is its own independent scroll container — never grows the
   page. Panel scrolls VERTICALLY only; horizontal content must fit
   within the 220 px column or wrap. */
#sidebar { background: #15161a; border: 1px solid #2a2c33; border-radius: 8px;
  display: flex; flex-direction: column; overflow: hidden;
  min-height: 0; }

#tabs { display: flex; background: #1c1d22; border-bottom: 1px solid #2a2c33; }
.tab { flex: 1; background: transparent; color: #aaa; border: none;
  padding: 8px 4px; font-family: inherit; font-size: 11px; cursor: pointer;
  border-bottom: 2px solid transparent; }
.tab:hover { background: #25272d; color: #ddd; }
.tab.active { color: #fff; border-bottom-color: #58e0a0; background: #1a1c20; }

/* Panel = the active tab's scroll surface. Vertical scroll only;
   horizontal MUST never appear — anything wider than the sidebar
   column has to wrap (word-break, overflow-wrap, max-width:100% on
   children, etc). */
.panel { display: none; padding: 8px; overflow-x: hidden; overflow-y: auto;
  flex: 1; min-height: 0; min-width: 0; overscroll-behavior: contain; }
.panel.active { display: flex; flex-direction: column; gap: 4px; }
/* Force long unbroken text (channel names, adapter ids, file paths)
   to wrap rather than push the panel wider. */
.panel * { max-width: 100%; }
.panel pre { white-space: pre-wrap; word-break: break-word; overflow-x: hidden; }

/* Diagnostics tab: every readout block (Live, GPU profile, last GPU op,
   adapter, error history) is FULLY EXPANDED — no per-section inner
   scrollers in any layout mode. The diagnostics panel scrolls as one. */
#panel-diagnostics pre {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  white-space: pre-wrap !important;
  flex: 0 0 auto;
}

/* Experiment list */
.exp-btn { background: #1f2126; color: #ddd; border: 1px solid #2a2c33;
  border-radius: 4px; padding: 6px 8px; text-align: left;
  font-family: inherit; font-size: 11px; cursor: pointer; }
.exp-btn:hover { background: #262830; }
.exp-btn.selected { background: #1f4a2f; border-color: #58e0a0; color: #fff; }

/* Paint panel */
.paint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.paint-btn { background: #1f2126; color: #ddd; border: 1px solid #2a2c33;
  border-radius: 4px; padding: 4px 6px; font-family: inherit; font-size: 11px;
  cursor: pointer; display: flex; align-items: center; gap: 5px; }
.paint-btn:hover { background: #262830; }
.paint-btn.selected { background: #1f4a2f; border-color: #58e0a0; color: #fff; }
.paint-swatch { width: 10px; height: 10px; border-radius: 2px;
  border: 1px solid #444; flex-shrink: 0; }
.paint-row { display: flex; flex-direction: column; gap: 4px; }
.paint-row label { font-size: 11px; opacity: 0.7; display: flex; gap: 6px;
  align-items: center; }
.paint-row input[type=range] { flex: 1; }
.brush-mode { display: flex; gap: 4px; }
.brush-mode button { flex: 1; background: #1f2126; color: #ddd;
  border: 1px solid #2a2c33; border-radius: 4px; padding: 4px 6px;
  font-family: inherit; font-size: 11px; cursor: pointer; }
.brush-mode button.selected { background: #1f4a2f; border-color: #58e0a0; color: #fff; }

.paint-section-title { font-size: 10px; opacity: 0.55; margin: 6px 0 2px 0;
  text-transform: uppercase; letter-spacing: 0.5px; }
.paint-select { background: #1f2126; color: #ddd; border: 1px solid #2a2c33;
  border-radius: 4px; padding: 4px 6px; font-family: inherit; font-size: 11px;
  width: 100%; cursor: pointer; }
.paint-select:hover { background: #262830; }
.paint-help { font-size: 10px; opacity: 0.55; margin-top: 6px;
  line-height: 1.4; }
.preset-btn { background: #1f2126; color: #ddd; border: 1px solid #2a2c33;
  border-radius: 4px; padding: 3px 4px; font-family: inherit; font-size: 10px;
  cursor: pointer; }
.preset-btn:hover { background: #262830; }
.preset-btn.selected { background: #4a361f; border-color: #e09058; color: #fff; }
.heater-btn { margin-top: 2px; }
.heater-btn.selected { background: #4a361f; border-color: #e09058; color: #fff; }

/* Tools-tab tool-instance list (Wave 2). */
.tool-row { padding: 3px 4px; font-size: 11px; cursor: pointer;
  border-radius: 3px; line-height: 1.35; }
.tool-row:hover { background: #1f2126; }
.tool-row.selected { background: #2a3a4a; }
.tool-row + .tool-row { border-top: 1px solid #2a2c33; margin-top: 1px; padding-top: 4px; }
.tool-glyph { display: inline-block; width: 18px; }
.tool-name { font-weight: 600; color: #ddd; }
.tool-pos { font-size: 10px; }

/* ------------------ stage ------------------ */
/* Stage fills the available viewport height; canvas inside scales to
   fit. Never scrolls — the canvas is sized by JS (sizeCanvasToStage). */
#stage { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  min-height: 0; overflow: hidden; }
/* Centre the sim canvas in the remaining vertical space below the
   controls bar so it sits in the middle of the stage area whenever
   its aspect ratio leaves spare room on either axis. */
/* JS (view_zoom.js) applies a transform here for pinch-zoom/pan; the
   parent #stage clips the overflow. touch-action:none so two-finger
   gestures over the whole canvas area reach our handler. */
#canvasWrap { margin: auto; touch-action: none; transform-origin: 0 0; }

#controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  background: #15161a; border: 1px solid #2a2c33; border-radius: 8px;
  padding: 6px 8px; }
#controls button { background: #1f2126; color: #ddd; border: 1px solid #2a2c33;
  border-radius: 4px; padding: 4px 10px; font-family: inherit; font-size: 11px;
  cursor: pointer; }
#controls button:hover { background: #262830; }
#controls button.selected { background: #1f4a2f; border-color: #58e0a0; color: #fff; }
.group { display: flex; gap: 0; border: 1px solid #2a2c33; border-radius: 4px;
  overflow: hidden; margin-left: 8px; }
.group button { border: none !important; border-radius: 0 !important; }
.group button + button { border-left: 1px solid #2a2c33 !important; }
.meter { margin-left: auto; opacity: 0.7; font-size: 11px; }

/* ---- Transport (playback) controls ----------------------------------- */
/* Icon buttons read better a little larger; keep a consistent square-ish
   footprint so the bar doesn't jiggle as glyphs change (▶ ↔ ⏸). */
#transport button, #speedCtl button { min-width: 32px; text-align: center; }
#transport button { font-size: 14px; line-height: 1; padding: 4px 8px; }
/* Primary Play/Pause: the one control everyone reaches for. */
#btnPlay.primary { background: #1f4a2f; border-color: #58e0a0; color: #fff;
  min-width: 40px; font-size: 15px; }
#btnPlay.primary:hover { background: #246138; }
/* Rewind highlights amber while held. */
#btnRewind.active { background: #4a361f; color: #fff;
  box-shadow: inset 0 0 0 1px #e09058; }
/* Sim clock sits right after the transport; tabular figures so the width
   doesn't shimmer as the time ticks. */
#simClock { font-size: 12px; opacity: 0.85; min-width: 52px; text-align: center;
  padding: 2px 4px; font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum"; }

/* ---- Danger overlay: translucent hazard icons floating on the
   canvas. JS toggles per-icon visibility + level class. Levels:
     lv-1 yellow, lv-2 orange, lv-3 red, lv-4 flashing-red bold.
   pointer-events:none so the canvas underneath still captures
   paint / brush input. ------------------------------------- */
#dangerOverlay { position: absolute; top: 8px; left: 8px; z-index: 10;
  display: flex; gap: 6px; pointer-events: none;
  font-size: 22px; line-height: 1; user-select: none; }
.danger-icon { display: none; padding: 3px 6px; border-radius: 6px;
  background: rgba(15,15,18,0.55); border: 1px solid currentColor;
  color: #ccc; backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-shadow: 0 0 4px currentColor;
  /* Parent #dangerOverlay has pointer-events:none so brush input
     passes through to the canvas; re-enable on each icon so hover
     triggers the native browser tooltip with the current measurement. */
  pointer-events: auto;
  cursor: help; }
.danger-icon.lv-1 { display: inline-block; color: #f1c40f; }
.danger-icon.lv-2 { display: inline-block; color: #e67e22; }
.danger-icon.lv-3 { display: inline-block; color: #e74c3c; }
.danger-icon.lv-4 { display: inline-block; color: #ff2030; font-weight: bold;
  animation: dangerFlash 0.45s linear infinite;
  text-shadow: 0 0 8px #ff2030, 0 0 14px #ff2030; }
@keyframes dangerFlash {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.08); }
}

/* JS sizes width/height directly via sizeCanvasToStage(); these
   only set the look and prevent browser-default constraints. The
   old `width:100%; max-width:1120px; aspect-ratio:3/2` clashed
   with the JS sizer and could leave gaps on wide screens. */
#sim { image-rendering: pixelated; border: 1px solid #2a2c33; border-radius: 8px;
  display: block; cursor: crosshair; background: #000;
  /* The app owns ALL touch on the canvas: single-finger drag paints,
     two-finger pinch/pan is a custom view zoom (src/ui/view_zoom.js).
     `none` stops the browser from claiming any of it for scroll/zoom. */
  touch-action: none;
  /* Suppress the iOS tap highlight + selection on long-press so the
     canvas behaves like a drawing surface, not a paragraph. */
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; }

#status { font-size: 12px; opacity: 0.85; min-height: 1.2em;
  padding: 4px 8px; }

/* ------------------ mobile / touch ------------------ */
/* iPad / phone / tablet layout. ONE scroll container — the page body.
   Stage is on top (canvas takes the screen width), then controls,
   then the sidebar (tabs + active panel) flows below as normal content.
   No nested scrollers: a long profile readout pushes the page taller
   and the whole page scrolls. ≤900 px covers phones in landscape AND
   tablets in portrait. iPad Pro landscape (1366 px) keeps the desktop
   two-column layout. */
@media (max-width: 900px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "stage" "sidebar";
    padding: 6px; gap: 6px;
    min-height: 0;          /* don't force 100 vh; page can be longer */
  }
  #stage   { grid-area: stage;   min-height: 0; }
  /* Sidebar flows as normal content — no max-height, no inner scroll.
     The panel inside it ALSO drops its own scroll on mobile so we don't
     have a page-scroller + panel-scroller fighting each other on iPad. */
  #sidebar { grid-area: sidebar; max-height: none; overflow: visible; }
  .panel   { padding: 6px; overflow: visible; flex: 0 0 auto; }
  /* Profile readout: same — flow with the page, not its own scroller. */
  #profileReadout { max-height: none !important; overflow: visible !important; }
  /* Make text + buttons finger-friendly. Apple HIG min hit target is
     44 px; we land at 38–44 px. */
  .tab { padding: 12px 4px; font-size: 13px; }
  .exp-btn, .paint-btn, .brush-mode button, .paint-select,
  .preset-btn, #controls button {
    padding: 10px 8px; font-size: 13px; min-height: 38px; }
  .paint-grid { grid-template-columns: 1fr; }
  #controls { gap: 4px; padding: 6px; }
  .paint-row input[type=range] { height: 32px; }
  /* Selects / number inputs default to tiny in iOS — bump them up. */
  select, input[type=number], input[type=text] {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
    min-height: 38px; }
  /* No hover effects on touch — use :active for tap feedback. */
  .tab:hover, .exp-btn:hover, .paint-btn:hover, .preset-btn:hover,
  #controls button:hover, .brush-mode button:hover, .paint-select:hover {
    background: inherit; }
}

/* Very narrow phones (<480 px wide). Tighten everything one more notch. */
@media (max-width: 480px) {
  .tab { font-size: 12px; padding: 10px 2px; }
  #controls button { padding: 8px 6px; font-size: 12px; }
  .group { margin-left: 0; }
  .meter { margin-left: 4px; }
}

/* Allow vertical scrolling of the page while the canvas is the
   only interactive element below the fold. Without this, the
   touch-action:pinch-zoom on the canvas means the canvas claims
   single-finger drags — which is right ON the canvas, but the page
   itself should still scroll if controls or readouts extend below
   the screen. The body is the scroll container. */
html, body { overflow-x: hidden; overscroll-behavior-y: contain; }

/* ── Auth widget (top-right). Unobtrusive; floats above the app. ───────── */
#authWidget {
  position: fixed;
  top: 8px;
  right: 10px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: rgba(20, 22, 26, 0.78);
  border: 1px solid #2a2c33;
  border-radius: 8px;
  font-size: 12px;
  color: #d8d8dc;
  backdrop-filter: blur(4px);
}
#authWidget .auth-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
}
#authWidget .auth-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#authWidget .auth-btn {
  background: #23262d;
  color: #d8d8dc;
  border: 1px solid #34373f;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}
#authWidget .auth-btn:hover { background: #2c3038; }