/* Theme Studio — control-driven, animation-centric panel.
   The UI is the source of truth; YAML is a generated view. */

#studio-toggle {
  position: fixed; top: calc(var(--debug-bar-h, 0px) + 8px); left: 8px; z-index: 40;
  font: 16px/1 monospace; padding: 6px 9px; cursor: pointer;
  background: #1a1f2b; color: #cfe; border: 1px solid #3a4a66; border-radius: 6px;
}
#studio-toggle:hover { background: #243a5e; }

#studio {
  /* Sit BELOW the wasm debug bar (its height is published as --debug-bar-h by
     wasm_debug_overlay.rs) so it doesn't cover the bar's buttons (incl. egui). */
  position: fixed; top: var(--debug-bar-h, 0px); left: 0; z-index: 41;
  width: 460px; max-width: 96vw; box-sizing: border-box;
  /* dvh tracks the *visible* viewport, so the bottom status bar isn't hidden
     under mobile browser chrome (the vh line is the older-browser fallback). */
  height: calc(100vh - var(--debug-bar-h, 0px));
  height: calc(100dvh - var(--debug-bar-h, 0px));
  display: flex; flex-direction: column;
  background: rgba(12,15,22,0.97); color: #d8e2f0;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  border-right: 1px solid #2a3550;
}
#studio[hidden] { display: none; }

#studio .s-head {
  /* wrap so the controls never overflow the panel (which pushed the × button
     off-panel, behind the game). The title takes row 1; controls flow below. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid #2a3550; background: #11151f;
}
#studio .s-head b { font-size: 13px; margin-right: auto; }
#studio .s-head select.s-start { max-width: 110px; }
#studio .s-head input.s-name {
  width: 96px; flex: 0 1 auto; background: #0c1018; color: #dfe; border: 1px solid #2a3550;
  border-radius: 4px; padding: 3px 5px; font: inherit;
}
#studio .s-body { flex: 1; display: flex; min-height: 0; }
#studio .s-nav {
  width: 92px; flex: 0 0 auto; border-right: 1px solid #223; padding: 6px 0;
  display: flex; flex-direction: column; gap: 2px; background: #0e131c;
  /* Short (phone) viewports can't show all the tabs at once — scroll the rail
     (desktop always fits, so no scrollbar there). */
  overflow-y: auto; min-height: 0; touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
#studio .s-nav button {
  background: none; border: none; color: #9ab; text-align: left;
  padding: 6px 10px; cursor: pointer; font: inherit; border-left: 2px solid transparent;
}
#studio .s-nav button:hover { color: #dfe; }
#studio .s-nav button.active { color: #cfe; border-left-color: #6af; background: #141c2b; }
/* `pan-y` re-allows touch scrolling (the gameplay canvas carries its own
   `touch-action: none`; the root deliberately does not — see index.html). */
#studio .s-main { flex: 1; overflow-y: auto; padding: 10px 12px; min-width: 0;
  touch-action: pan-y; -webkit-overflow-scrolling: touch; }

#studio h3 { margin: 0 0 8px; font-size: 11px; color: #9bf; text-transform: uppercase; letter-spacing: .06em; }
/* Collapsible section header (click to fold/unfold a pane) — a clear button bar. */
#studio .s-sec-head { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  padding: 7px 9px; margin-top: 7px; background: #131c30; border: 1px solid #243150; border-radius: 5px;
  color: #bcd; font-size: 12px; font-weight: 600; }
#studio .s-sec-head:hover { background: #1a2640; color: #eff; border-color: #34507e; }
#studio .s-sec-head .s-caret { font-size: 13px; width: 14px; text-align: center; color: #6af; }
#studio .s-sec-body { padding: 6px 4px 4px; }
/* Top-level effect BAND header (a collapsible group OF section cards) — visually
   stronger than a section head (left accent bar, brighter, uppercase) so the
   two-level hierarchy reads; the body is left-bordered to show the nesting. */
#studio .s-group-head { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  padding: 9px 11px; margin: 18px 0 0; background: #1d3057; border: 1px solid #3d5891;
  border-left: 4px solid #6af; border-radius: 6px; color: #dceaff; font-size: 13px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
#studio .s-group-head:hover { background: #244272; border-color: #5a7cc0; }
#studio .s-group-head .s-caret { font-size: 14px; width: 14px; text-align: center; color: #9cf; }
#studio .s-group-body { margin-left: 8px; padding-left: 8px; border-left: 1px solid #243150; }
/* Cue Timeline: one track row per cue; a bar positioned by `at` + sized by duration.
   Display cues accented, game-owned (locked) cues grey. */
#studio .s-timeline { margin: 5px 0 8px; }
#studio .s-cuetrack { position: relative; height: 18px; margin-bottom: 2px; background: #0e1626;
  border: 1px solid #1d2840; border-radius: 3px; }
#studio .s-cuebar { position: absolute; top: 0; bottom: 0; min-width: 3px; background: #2a6da0;
  border: 1px solid #3d88c8; border-radius: 3px; display: flex; align-items: center; overflow: hidden; }
#studio .s-cuebar span { font-size: 10px; color: #dff; padding: 0 4px; white-space: nowrap; }
#studio .s-cuebar-locked { background: #2a2f38; border-color: #444b56; }
#studio .s-cuebar-locked span { color: #9aa; }
#studio button {
  background: #1a2740; color: #cfe; border: 1px solid #3a4a66; border-radius: 4px;
  padding: 4px 9px; cursor: pointer; font: inherit;
}
#studio button:hover { background: #243a5e; }
#studio button.s-ghost { background: none; border-color: #2a3550; color: #9ab; }
#studio button.s-danger { color: #f99; border-color: #633; }
#studio button.s-danger:hover { background: #4a2222; color: #fcc; }
#studio select, #studio textarea, #studio input[type=text], #studio input[type=number] {
  background: #0c1018; color: #dfe; border: 1px solid #2a3550; border-radius: 4px;
  padding: 3px 5px; font: inherit; box-sizing: border-box;
}
#studio .s-row { display: flex; gap: 6px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
#studio .s-row > label { color: #9ab; flex: 0 0 auto; }
#studio .s-field { display: grid; grid-template-columns: 100px 1fr; gap: 6px; align-items: center; margin: 6px 0; }
#studio .s-field > span { color: #9ab; }
#studio hr { border: none; border-top: 1px solid #223; margin: 10px 0; }
#studio .s-fx { border: 1px solid #243150; border-radius: 5px; padding: 5px 7px; margin: 5px 0; background: #0f1623; }
/* Shape params (overlay/warp): stack vertically, indented under the shape selector,
   instead of cramming into one flex row. */
#studio .s-shapeparams { margin: 2px 0 4px 10px; border-left: 1px solid #243150; padding-left: 8px; }
#studio .s-muted { color: #8295ab; font-size: 11px; }

/* Animation chips list */
#studio .s-anims { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
#studio .s-chip {
  padding: 3px 8px; border-radius: 12px; background: #14202f; border: 1px solid #2a3550;
  color: #bcd; cursor: pointer; font-size: 11px;
}
#studio .s-chip.active { background: #1d4b6e; border-color: #6af; color: #eff; }
/* Pre-wired to a name not in the current build's roster — dashed amber so it
   reads as "pending / not bound yet" rather than a normal mapping. */
#studio .s-chip.s-pending { border-style: dashed; border-color: #b9842f; color: #e8c089; background: #2a210f; }
#studio .s-chip.s-pending.active { background: #3a2c12; border-color: #e6b04a; color: #fdd8a0; }

/* Palette swatches */
#studio .s-pal { display: flex; align-items: center; gap: 3px; margin: 3px 0; flex-wrap: wrap; }
#studio .s-pal-lbl { width: 90px; flex: 0 0 auto; color: #9ab; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Active variant row: strong highlight so it's obvious what the preview shows. */
#studio .s-pal { padding: 3px 4px; border-left: 3px solid transparent; }
#studio .s-pal.active { background: rgba(106,170,255,0.20); border-left: 3px solid #6af; border-radius: 0 4px 4px 0; }
/* The variant label doubles as a radio-style selector — clearly a button. */
#studio .s-pal-lbl.s-variant { width: auto; cursor: pointer; font-size: 12px; color: #bcd;
  border: 1px solid #34507e; border-radius: 12px; padding: 2px 10px; background: #14202f; }
#studio .s-pal-lbl.s-variant:hover { color: #eff; border-color: #6af; }
#studio .s-pal-lbl.s-variant.active { background: #2a6da0; color: #fff; border-color: #8cf; font-weight: 600; }
#studio input[type=color] { width: 20px; height: 20px; padding: 0; border: 1px solid #333; background: none; cursor: pointer; border-radius: 3px; }
/* Swatches animated by a color cycle effect. */
#studio input[type=color].s-cyc { outline: 2px solid #fc6; outline-offset: 1px; }
#studio input[type=range] { flex: 1; }

/* dvh + vh fallback pair, same reason as the panel height above. */
#studio textarea.s-yaml { width: 100%; height: calc(100vh - 180px); height: calc(100dvh - 180px); white-space: pre; resize: none; }

#studio .s-status {
  padding: 6px 10px; border-top: 1px solid #2a3550; min-height: 1.3em;
  color: #9f9; font-size: 11px; word-break: break-word; background: #11151f;
}
#studio .s-status.err { color: #f99; }
/* Busy indicator while a generate/apply is in flight (the worker is opaque, so
   this is the main "it's working" cue). */
@keyframes s-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
#studio .s-status.working { color: #fe9; animation: s-pulse 1.1s ease-in-out infinite; }

/* Completeness check (Check tab) */
#studio .s-nav button.s-has-err { color: #f99; }
#studio .s-ok { color: #9f9; padding: 9px 10px; background: rgba(80,200,120,0.10); border: 1px solid #2c5; border-radius: 5px; }
#studio .s-issue { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; margin: 4px 0; border-radius: 4px; border-left: 3px solid #555; }
#studio .s-issue-tag { font-weight: 700; width: 14px; text-align: center; flex: 0 0 auto; }
#studio .s-issue.s-err { background: rgba(240,80,80,0.12); border-left-color: #f66; color: #fcc; }
#studio .s-issue.s-warn { background: rgba(240,200,80,0.10); border-left-color: #fc6; color: #fe9; }
#studio .s-issue.s-info { background: rgba(120,150,200,0.08); border-left-color: #69a; color: #9ab; }

/* Help & walkthroughs overlay (the ? button) */
#studio .s-help { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 50; }
#studio .s-help-panel { width: min(840px, 92vw); height: min(80vh, 720px); background: #0e1622; border: 1px solid #2a3550; border-radius: 8px; display: flex; flex-direction: column; box-shadow: 0 12px 48px rgba(0,0,0,0.55); overflow: hidden; }
#studio .s-help-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #1e2a3d; }
#studio .s-help-title { font-weight: 700; font-size: 14px; color: #dfeaff; }
#studio .s-help-body { display: flex; flex: 1; min-height: 0; }
#studio .s-help-list { flex: 0 0 230px; overflow-y: auto; border-right: 1px solid #1e2a3d; padding: 8px 0; background: #0b121c;
  touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#studio .s-help-group { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7da0; padding: 12px 14px 4px; }
#studio .s-help-item { display: block; width: 100%; text-align: left; background: none; border: none; color: #bcd; padding: 6px 14px; cursor: pointer; font-size: 12px; line-height: 1.35; }
#studio .s-help-item:hover { background: #14202f; }
#studio .s-help-item.active { background: #1d3550; color: #eff; box-shadow: inset 2px 0 0 #6af; }
#studio .s-help-pane { flex: 1; overflow-y: auto; padding: 18px 24px; color: #cdd; line-height: 1.55; font-size: 13px;
  touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#studio .s-help-pane h2 { font-size: 16px; color: #eff; margin: 0 0 12px; }
#studio .s-help-pane b { color: #cfe6ff; }
#studio .s-help-pane code { background: #1a2636; padding: 1px 5px; border-radius: 3px; font-size: 11px; color: #bfe; }
#studio .s-help-intro { color: #b7c6dc; background: #121d2c; border-left: 3px solid #4a8; padding: 9px 12px; border-radius: 4px; margin: 0 0 14px; }
#studio .s-help-concept { margin: 0 0 13px; }
#studio .s-help-concept > b { display: block; color: #cfe6ff; margin-bottom: 2px; }
#studio .s-help-steps { margin: 0; padding-left: 22px; }
#studio .s-help-steps li { margin: 0 0 9px; }
#studio .s-help-note { color: #9ab; background: rgba(120,170,90,0.08); border-left: 3px solid #6a4; padding: 8px 12px; border-radius: 4px; margin: 14px 0 0; font-style: italic; }
#studio .s-help-go { margin-top: 18px; background: #1d4b6e; border: 1px solid #6af; color: #eff; padding: 7px 14px; border-radius: 5px; cursor: pointer; font-size: 12px; }
#studio .s-help-go:hover { background: #265c84; }

/* Field labels that carry a mouseover description (title attr). */
.s-tip { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }