:root{
  --bg:#0E0D0C;        /* surround — deepest warm black */
  --stage:#161514;     /* the stage */
  --panel:#171513;     /* surfaces */
  --card:#1C1A18;      /* raised surfaces */
  --border:#2A2826;    /* hairlines */
  --text:#EDEAE5;      /* paper — available */
  --muted:#8F8A84;     /* resting text */
  --rest:#5A5751;      /* resting glyphs */
  --red:#C03A2B;       /* Kandinsky red — now / selected / active only */
  --red-dim:#8E2A20;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{
  background:var(--bg);color:var(--text);
  font:14px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:400;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
#stage,#waveform,#waveOverview{-webkit-touch-callout:none}

.ic{width:18px;height:18px;display:block}

.brand{font-weight:500;letter-spacing:.01em;font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Fixed app header: app title (left) + global Open/Save (right). The only fixed
   block besides the quick strip; everything else scrolls in #panel. */
#appHeader{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* Installed iPad web app: #rightCol hugs the screen's right edge, so this header
   (Open/Save) sits under the top-right status indicators. Add the top/right
   safe-area insets so it clears them. env() is 0 on desktop and the header is
   JS-relocated out of #rightCol on phone, so this affects the iPad layout only. */
#rightCol>#appHeader{padding:calc(14px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) 14px 14px;border-bottom:1px solid var(--border)}
body.phone #appHeader{padding:0 0 12px;border-bottom:1px solid var(--border)}
.projGlobal{display:flex;gap:6px;flex:0 0 auto}
.tag{font-size:10px;color:var(--muted);font-weight:400;border:1px solid var(--border);border-radius:10px;padding:1px 6px;margin-left:5px}
#projectName{width:100%;background:var(--card);border:1px solid var(--border);border-radius:6px;color:var(--text);font:inherit;font-size:13px;padding:6px 8px;margin-bottom:8px}
#projectName::placeholder{color:var(--rest)}
#projectName:focus{border-color:var(--red);outline:none}

/* phone-only controls — hidden on desktop / iPad */
#btnTools,#btnImmersive,#scrim,#barReveal,#rotateHint{display:none}

button{background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:6px 12px;cursor:pointer;font:inherit;font-weight:400}
button:hover:not(:disabled){color:var(--text);border-color:#3A3733}
button:disabled{opacity:.35;cursor:default}
button.primary{background:var(--text);color:#141312;border-color:transparent;font-weight:500}
button.primary:hover:not(:disabled){background:#fff;color:#141312}
.iconBtn{width:36px;height:32px;padding:0;display:flex;align-items:center;justify-content:center}
.ghost{background:transparent}
.danger{color:var(--red)}
.wide{width:100%;margin-top:8px}
/* New Project — a deliberate document action: brighter text than the muted tool
   buttons + extra separation so it never reads as a lightweight link/transport
   control. Kept off Kandinsky red (reserved for active state); the confirm is
   the safety guard, not the colour. */
#btnNewProject{color:var(--text);margin-top:12px}
#btnNewProject:hover:not(:disabled){border-color:var(--text)}

#centerRow{flex:1;display:flex;min-height:0}
#canvasWrap{flex:1;position:relative;min-width:0;background:var(--bg)}
#stage{position:absolute;inset:0;display:block}
#hint{position:absolute;left:12px;bottom:8px;color:rgba(237,234,229,.22);font-size:11px;pointer-events:none;z-index:2}

#emptyState{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(14,13,12,.85);z-index:5;text-align:center;padding:20px}
#emptyState.hidden{display:none}
.hidden{display:none}
#emptyState h2{margin:0;font-weight:500;letter-spacing:.02em}
#emptyState p{color:var(--muted);max-width:440px;margin:0 0 6px}
#emptyState .alphaNote{font-size:12px;color:var(--rest);letter-spacing:.02em;margin:0 0 12px}
/* Start-screen creative choices */
.startChoices{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.startChoices button{min-width:150px}
.startSecondary{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:10px}
.linklike{background:none;border:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:6px 4px}
.linklike:hover:not(:disabled){color:var(--text)}
button.soon{position:relative;opacity:.6}
.soonTag{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--rest);margin-top:2px}
.startSecondary .soon .soonTag{display:inline;margin-left:6px;text-decoration:none}
.clkPresets{flex-wrap:wrap;gap:6px;margin-bottom:6px}
.clkPresets button{flex:0 0 auto;padding:5px 10px;font-size:12px}
#clkDuration{width:100%;background:var(--card);border:1px solid var(--border);border-radius:6px;color:var(--text);font:inherit;font-size:15px;padding:8px 10px;margin-top:4px}
#clkDuration:focus{border-color:var(--red);outline:none}
#clickModal .modalBox{max-width:320px}
/* About / intro modal: a touch wider for comfortable reading; the emphasised
   line uses paper (--text) to lift out of the muted body copy. */
/* Capped height so the longer document never runs off a short screen (iPad in
   landscape, phone). Content scrolls; the Got it row stays pinned and reachable,
   which keeps the first-run presentation unchanged. */
.aboutBox{max-width:440px;max-height:80vh;display:flex;flex-direction:column}
.aboutScroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.aboutBox>.row{flex:0 0 auto;margin-top:14px}
.aboutBox strong{color:var(--text);font-weight:500}
/* Quiet section label — same treatment as the side-panel section headings. */
.aboutBox h4{margin:20px 0 10px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--rest);font-weight:500}
.aboutList{list-style:none;margin:0;padding:0}
.aboutList li{color:var(--muted);font-size:13px;line-height:1.45;margin:0 0 12px}
/* Feedback. `body` sets user-select:none, so selection is re-enabled here: the
   address doubles as the copy fallback wherever mailto: does nothing (an iPad
   with no Mail account). Selectors carry a class extra so they beat `.modalBox p`. */
.aboutBox p.feedbackAddress{
  margin:0 0 10px;font-size:14px;overflow-wrap:anywhere;
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;
}
.aboutBox p.feedbackAddress a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.aboutBox p.feedbackNote{margin:0 0 4px;font-size:12px;line-height:1.45;color:var(--rest)}
/* Technical-information disclosure. Reads as output, not a form. */
.techDetails{margin:14px 0 4px}
.techDetails summary{font-size:12px;color:var(--muted);cursor:pointer;padding:4px 0;user-select:none;-webkit-user-select:none}
.techDetails summary:hover{color:var(--text)}
.techCaption{margin:8px 0 6px;font-size:11px;color:var(--rest)}
/* Optional note — editable (card bg), distinct from the read-only preview. */
.techNoteLabel{display:block;margin:8px 0 4px;font-size:11px;color:var(--rest)}
.techNote{
  width:100%;box-sizing:border-box;resize:vertical;min-height:42px;
  border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);
  font:inherit;font-size:13px;padding:6px 8px;
  -webkit-user-select:text;user-select:text;
}
.techActions{display:flex;align-items:center;gap:12px;margin-top:10px}
.techStatus{font-size:11px;color:var(--rest)}
/* Read-only preview. Monospace + inset so it reads as output; selectable because
   body sets user-select:none, and manual selection is the copy fallback on http. */
.techReport{
  width:100%;box-sizing:border-box;resize:none;border:1px solid var(--border);border-radius:6px;
  background:var(--bg);color:var(--muted);
  font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:8px 10px;white-space:pre;overflow:auto;
  -webkit-user-select:text;user-select:text;
}
/* "This build" — deliberately quiet; informational, not a headline. Scoped with
   an extra class so it beats `.modalBox p` (0,1,1), which would otherwise
   override the font-size and margins. */
.aboutBox p.buildLine{font-size:11px;color:var(--muted);opacity:.7;margin:18px 0 4px}
#clickModal label{display:block;margin:10px 0 0;color:var(--muted);font-size:12px}
#clickModal select,#clickModal input[type=range]{width:100%;margin-top:4px;display:block}

#rightCol{width:236px;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;flex:0 0 auto;min-height:0}
/* Project as a direct column child (desktop/iPad). On phone it moves into
   #panel and inherits the #panel section styling instead. */
#quickStrip{padding:14px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:12px;flex:0 0 auto}
#quickScroll{display:flex;flex-direction:column;gap:12px}
#quickStrip #btnUndo,#quickStrip #durRow{width:100%}
#panel{flex:1;min-height:0;padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
#panel section{border-bottom:1px solid var(--border);padding-bottom:14px}
#panel section:last-child{border-bottom:none}
#panel h3{margin:0 0 8px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--rest);font-weight:500}
#panel label{display:block;margin:8px 0 0;color:var(--muted);font-size:12px}
#panel select,#panel input[type=range]{width:100%;margin-top:4px;display:block}
.val{color:var(--text);float:right;font-variant-numeric:tabular-nums}
select{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px;font:inherit;font-size:12px}
input[type=range]{accent-color:#6B6660}
input[type=checkbox]{accent-color:var(--red)}

.row{display:flex;gap:8px}
.row>button{flex:1}
/* Project action buttons: two stacked rows on desktop/phone (Import/Demo text +
   Open/Save icons). iPad collapses them to one icon row — see pointer:coarse. */
#projActions{display:flex;flex-direction:column}
#btnImport .ic,#btnDemo .ic{display:none}

.seg3{display:flex;gap:6px}
.seg3 button{flex:1;height:46px;padding:4px 0 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.seg3 .ic{width:22px;height:22px}
.segLbl{font-size:10px;letter-spacing:.04em}
.seg3 button.active{color:var(--red);border-color:var(--red)}
.seg3.inert{opacity:.4}

#layerList{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.layerRow{display:flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:6px;padding:2px;cursor:pointer}
.layerRow.active{background:rgba(192,58,43,0.08);border-color:var(--red-dim)}
.layerVis{width:34px;height:34px;padding:0;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:15px;border-radius:6px}
.layerRow.hiddenLayer .layerVis{color:var(--rest)}
.layerName{flex:1;min-width:0;color:var(--text);font-size:12px;padding:5px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layerRow.hiddenLayer .layerName{color:var(--muted)}
.layerEdit{flex:0 0 auto;width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.layerEdit:hover{color:var(--text)}
#renameInput,#labelInput{width:100%;background:var(--card);border:1px solid var(--border);border-radius:6px;color:var(--text);font:inherit;font-size:15px;padding:10px;margin-bottom:14px}
#renameInput:focus,#labelInput:focus{border-color:var(--red);outline:none}

/* Draggable new-label composer pill (floats over the stage). */
#labelComposer{position:fixed;transform:translate(-50%,-50%);z-index:90;display:flex;align-items:center;gap:6px;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.55)}
#labelComposer.hidden{display:none}
#lcGrip{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--muted);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
#lcGrip:active{cursor:grabbing;color:var(--text)}
#lcInput{width:180px;background:var(--panel);border:1px solid var(--border);border-radius:6px;color:var(--text);font:inherit;font-size:15px;padding:8px 10px}
#lcInput:focus{border-color:var(--red);outline:none}
#labelComposer .lcBtn{flex:0 0 auto;width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;font-size:15px}
#labelComposer .lcConfirm{color:var(--red);border-color:var(--red)}
/* Stem + crosshair hang below the pill; the crosshair centre is the exact anchor. */
#labelComposer .lcStem{position:absolute;left:50%;top:100%;transform:translateX(-50%);width:2px;height:24px;background:var(--red);pointer-events:none}
#lcCross{position:absolute;left:50%;top:100%;transform:translate(-50%,24px);box-sizing:border-box;width:18px;height:18px;border:2px solid var(--red);border-radius:50%;background:rgba(192,58,43,0.15);pointer-events:none}
#lcCross::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;background:var(--red);border-radius:50%;transform:translate(-50%,-50%)}
@media (pointer:coarse){
  .layerVis{width:44px;height:42px;font-size:18px}
  .layerName{font-size:13px;padding:9px 6px}
  .layerEdit{width:42px;height:42px}
}

/* Click-track visual pulse: a full-stage edge glow, readable from across a
   room. The accented downbeat is markedly stronger than other beats. */
#beatFlash{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;box-shadow:inset 0 0 70px 10px rgba(192,58,43,0.34)}
#beatFlash.accent{box-shadow:inset 0 0 140px 26px rgba(192,58,43,0.62)}
#beatFlash.pulse{animation:beatFlashAnim .22s ease-out}
#beatFlash.accent.pulse{animation-duration:.4s}
@keyframes beatFlashAnim{from{opacity:1}to{opacity:0}}
/* Experimental Sound Drawing block */
.expHead{margin:12px 0 4px;font-size:11px;color:var(--muted);font-weight:500}
.expTag{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);border:1px solid var(--red-dim);border-radius:8px;padding:0 5px;margin-left:4px}
/* Time Source status (the chooser lives in the start flow, not here) */
.srcStatus{display:flex;align-items:center;justify-content:space-between;gap:8px}
#srcLabel{font-size:12px;color:var(--muted)}
#clickToggles{margin-top:6px}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.swatch{height:24px;border-radius:6px;border:2px solid transparent;cursor:pointer}
.swatch.active{border-color:var(--red)}
input[type=color]{width:100%;height:28px;border:1px solid var(--border);border-radius:6px;background:none;padding:2px;cursor:pointer}

#panel label.check{display:flex;align-items:center;gap:8px;margin-top:10px;cursor:pointer}
#panel label.check input{margin:0}
#panel details summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--rest);font-weight:500;
}
#panel details summary::-webkit-details-marker{display:none}
#panel details summary::before{content:'\25B8';font-size:10px;transition:transform .15s}
#panel details[open] summary::before{transform:rotate(90deg)}
#panel details[open] summary{margin-bottom:4px}
#panel .note{color:rgba(237,234,229,.28);font-size:11px;margin:8px 0 0;line-height:1.35}

#debugHud{
  position:absolute;top:12px;left:12px;z-index:3;pointer-events:none;
  background:rgba(14,13,12,.85);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;width:230px;
  font:11px/1.5 ui-monospace,Consolas,monospace;color:var(--muted);
}
#debugHud.hidden{display:none}
#debugHud.idle .dbgRow b{opacity:.45}
.dbgTitle{text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--rest);margin-bottom:6px;display:flex;justify-content:space-between;gap:8px}
#dbgMode{color:var(--red)}
#dbgMode.composition{color:var(--text)}
#dbgMode.idle{color:var(--rest)}
.dbgRow{display:flex;justify-content:space-between;gap:10px}
.dbgRow b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.dbgBar{position:relative;height:8px;margin-top:8px;border-radius:4px;background:var(--card);border:1px solid var(--border);overflow:hidden}
.dbgBarFill{position:absolute;left:0;top:0;bottom:0;width:0;background:#6B6660;border-radius:4px}
.dbgBarMark{position:absolute;top:-1px;bottom:-1px;width:2px;left:0;background:var(--red)}
.dbgLegend{display:flex;justify-content:space-between;font-size:9px;color:var(--rest);margin-top:3px}

#timelineArea{height:calc(160px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--panel);border-top:1px solid var(--border);display:flex;flex:0 0 auto}
#transportDock{width:118px;border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;flex:0 0 auto}
#transportRow{display:flex;align-items:center;gap:6px}
#btnBack{width:34px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0}
#btnBack .ic{width:18px;height:18px}
#btnPlay{width:54px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0}
#btnPlay .ic{width:22px;height:22px}
#btnPlay .icPause{display:none}
#btnPlay.playing .icPlay{display:none}
#btnPlay.playing .icPause{display:block;color:var(--red)}
#btnPlay.playing{border-color:var(--red-dim)}
#timeDisplay{text-align:center;font-variant-numeric:tabular-nums;line-height:1.3}
#timeNow{font-size:16px;color:var(--text);display:block;font-weight:500}
#timeTotal{font-size:11px;color:var(--muted);display:block}

#waveWrap{flex:1;min-width:0;display:flex;flex-direction:column}
#waveform{flex:1;min-height:0;width:100%;display:block;cursor:crosshair}
#waveOverview{height:30px;width:100%;display:block;border-top:1px solid var(--border);cursor:grab}
#tlControls{display:flex;flex-direction:column;gap:6px;padding:8px;border-left:1px solid var(--border)}
#tlControls button{width:44px;padding:4px 0}
#btnLoop.active{color:var(--red);border-color:var(--red)}

/* Comfortable touch targets on coarse pointers (iPad) */
@media (pointer:coarse){
  button{padding:9px 14px}
  .iconBtn{width:46px;height:42px}
  .ic{width:20px;height:20px}
  #rightCol{width:284px}
  #panel{gap:18px}
  #panel label{font-size:13px}
  .swatch{height:34px}
  input[type=color]{height:36px}
  .seg3 button{height:56px}
  .seg3 .ic{width:24px;height:24px}
  .segLbl{font-size:11px}
  #btnPlay{width:66px;height:54px}
  #btnPlay .ic{width:26px;height:26px}
  #btnBack{width:44px;height:54px}
  #btnBack .ic{width:22px;height:22px}
  #transportDock{width:144px}
  #timeNow{font-size:18px}
  #timelineArea{height:calc(192px + env(safe-area-inset-bottom,0px))}
  #waveOverview{height:36px}
  #tlControls button{width:54px;padding:9px 0;font-size:16px}
  input[type=range]{height:30px}
  #hint{display:none}
}

/* iPad-only compactness (coarse pointer, not phone) — reclaim vertical space in
   the right column. Swatches scroll horizontally in a single row (~4 visible +
   a peek of the next as the scroll hint); the colour-picker bar is slimmed.
   Desktop (fine pointer) and phone (body.phone) are untouched. All colours stay
   in the system and the custom picker stays fully functional. */
@media (pointer:coarse){
  body:not(.phone) #swatches{
    display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  body:not(.phone) #swatches::-webkit-scrollbar{display:none}
  body:not(.phone) #swatches .swatch{flex:0 0 56px}
  /* Hide the custom-colour picker section on iPad — the selected swatch's red
     outline is enough. Kept on desktop so custom colours stay available there. */
  body:not(.phone) #colorSection{display:none}
  /* Project: collapse the two button rows into one icon row (Import · Demo ·
     Open · Save). Icons replace the Import/Demo text labels on iPad only. */
  body:not(.phone) #projActions{flex-direction:row;gap:8px}
  body:not(.phone) #projActions .row{display:contents}
  body:not(.phone) #projActions button{flex:1 1 0;min-width:0;height:42px;padding:0;display:flex;align-items:center;justify-content:center}
  body:not(.phone) #btnImport .ic,body:not(.phone) #btnDemo .ic{display:block}
  body:not(.phone) #btnImport .btnTxt,body:not(.phone) #btnDemo .btnTxt{display:none}
}

.modal{position:fixed;inset:0;background:rgba(8,7,6,.6);display:flex;align-items:center;justify-content:center;z-index:100}
.modal.hidden{display:none}
.modalBox{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;max-width:380px}
.modalBox h3{margin:0 0 8px;font-weight:500}
.modalBox p{color:var(--muted);font-size:13px;margin:0 0 14px}

/* ===================== PHONE MODE ===================== */
/* Canvas is king: brand bar hidden, panel becomes a right drawer, the
   timeline collapses to a slim bottom bar, immersive hides it entirely.
   Same DOM, restyled — no second interface. */
body.phone #hint{display:none}
body.phone #debugHud{display:none}

/* rightCol dissolves: quickStrip becomes a thin working strip in the canvas's
   side letterbox (free space — the 16:9 canvas is height-limited), and the
   panel becomes the Tools drawer. */
body.phone #rightCol{display:contents}
/* Widened by the right safe-area inset so the Dynamic Island (when the phone is
   rotated island-right) never covers the swatches. iOS reports landscape insets
   SYMMETRICALLY (both edges, either rotation), so JS adds body.safe-right when
   the island is detectably on the LEFT — dropping the reservation and giving the
   width back (fail-safe: no detection → keep the padding). */
body.phone #quickStrip{
  width:calc(84px + env(safe-area-inset-right,0px));flex:0 0 auto;
  background:var(--panel);border-left:1px solid var(--border);
  padding:6px calc(6px + env(safe-area-inset-right,0px)) 6px 6px;gap:6px;overflow:hidden;
  display:flex;flex-direction:row;align-items:stretch;
}
body.phone.safe-right #quickStrip{width:84px;padding:6px}
/* duration: vertical, full-height, fixed narrow column on the LEFT. The
   #quickStrip prefix is REQUIRED so this beats the desktop "#quickStrip
   #durRow{width:100%}" rule (which otherwise crushes the swatches to 0px). */
body.phone #quickStrip #durRow{
  order:-1;flex:0 0 22px;width:22px;height:100%;margin:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
body.phone #quickStrip #durRow .durLbl{display:none}
body.phone #quickStrip #durRow .val{float:none;font-size:9px;color:var(--text)}
body.phone #quickStrip #durSlider{
  -webkit-appearance:slider-vertical;appearance:slider-vertical;
  writing-mode:vertical-lr;direction:rtl;
  width:20px;flex:1 1 auto;min-height:0;margin:0;
}
/* right side: ALL swatches + undo, always visible, no scroll */
body.phone #quickScroll{order:0;flex:1 1 auto;min-width:0;overflow:visible;display:flex;flex-direction:column;gap:6px;align-items:stretch}
body.phone #quickScroll .swatches{display:flex;flex-wrap:wrap;gap:3px;margin:0;justify-content:center}
/* 20px swatches: two columns exactly fill the 44px content width — denser, no
   wasted side margins, and a slightly larger touch target. */
body.phone .swatch{width:20px;height:20px;flex:0 0 20px;border-width:2px}
body.phone #quickScroll #btnUndo{width:100%;height:30px;flex:0 0 auto}
/* Quick Open/Save at the top of the strip — phone only. Stacked full-width so
   each keeps a tappable size in the narrow column. */
#stripIO{display:none}
body.phone #stripIO{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
body.phone #stripIO button{width:100%;min-width:0;height:28px}

body.phone #panel{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);
  transform:translateX(102%);transition:transform .22s ease;
  z-index:60;box-shadow:-14px 0 36px rgba(0,0,0,.55);
  padding-top:max(14px,env(safe-area-inset-top,0px));
  /* Solid background: on phone #rightCol is display:contents, so the drawer
     doesn't inherit the column bg — without this it floats transparent over
     the canvas, which hurt readability. */
  background:var(--panel);
  /* keep drawer content clear of the Dynamic Island when it's on the right */
  padding-right:calc(14px + env(safe-area-inset-right,0px));
}
body.phone.safe-right #panel{padding-right:14px}
body.phone.tools-open #panel{transform:translateX(0)}
/* While the label composer is open on phone, hide the bar and strip so the
   stage keeps room above the keyboard (temporary, restored on close). */
body.phone.composing #timelineArea{display:none}
body.phone.composing #quickStrip{display:none}
body.phone #scrim{position:fixed;inset:0;background:rgba(8,7,6,.5);z-index:55}
body.phone.tools-open #scrim{display:block}

/* slim bottom bar — kept thin so the canvas claims more height */
body.phone #timelineArea{height:calc(48px + env(safe-area-inset-bottom,0px));align-items:stretch}
body.phone #transportDock{width:auto;flex-direction:row;align-items:center;gap:8px;padding:4px 8px}
body.phone #btnPlay{width:38px;height:38px}
body.phone #btnBack{width:32px;height:38px}
body.phone #timeNow{font-size:13px}
body.phone #timeTotal{font-size:9px}
body.phone #waveOverview{height:12px}
body.phone #tlControls{flex-direction:row;align-items:center;gap:6px;padding:6px 10px}
body.phone #tlFit{display:none}
body.phone #btnTools,body.phone #btnImmersive{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;flex:0 0 auto}
body.phone #tlControls button{width:auto}
body.phone #btnLoop{height:44px;padding:0 14px}

/* immersive: drop the bar AND the side strip for a clean full-canvas pass */
body.phone.immersive #timelineArea{display:none}
body.phone.immersive #quickStrip{display:none}
body.phone.immersive #barReveal{
  display:flex;align-items:center;justify-content:center;
  position:fixed;left:0;right:0;bottom:0;
  height:calc(18px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(28,26,24,.72);color:var(--muted);z-index:50;cursor:pointer;
}
body.phone.immersive #barReveal .ic{width:18px;height:12px}

/* portrait is not a real working mode: a full overlay prompts rotation
   (dismissible so portrait stays technically accessible). Installed PWA is
   landscape-locked via the manifest, so this only appears in a browser tab. */
body.phone #rotateHint{
  position:fixed;inset:0;z-index:90;background:rgba(14,13,12,.96);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:24px;
}
body.phone #rotateHint .rotateMsg{font-size:20px;font-weight:500;color:var(--text)}
body.phone #rotateHint .rotateSub{font-size:13px;color:var(--muted);max-width:360px;line-height:1.4}
body.phone #rotateHint #rotateDismiss{margin-top:10px}
@media (orientation:portrait){body.phone:not(.portrait-ok) #rotateHint{display:flex}}
@media (orientation:landscape){body.phone #rotateHint{display:none}}