/*
 * SoundLabs app: layout + components. Tokens live in tokens.css; shared chrome parity in chrome.css.
 *
 * Breakpoints (05 §2.3):
 *   desktop  >= 1280   rail 232 | composer 400 | results (fluid) ; persistent player bar 72 under composer+results
 *   laptop   1024-1279 icon rail 64 | composer 360 | results ; player bar the same
 *   tablet   768-1023  sticky tool tab bar 56 ; composer (max 640, centred) ; results ; fixed dock (mini-player + Make)
 *   phone    < 768     sticky switcher bar 56 + tool sheet ; composer ; results ; fixed dock
 * Selector convention: .sl-<block>[-<element>][--<modifier>], scoped under body.soundlabs-page where a site rule
 * (site-compat.css reboot, chrome.css) could otherwise win.
 */

/* =========================================================================
   0. Page
   ========================================================================= */
body.soundlabs-page .sl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

body.soundlabs-page .sl-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}

body.soundlabs-page .sl-skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 3000;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font: 700 var(--fs-label)/var(--lh-label) var(--font-ui);
  text-decoration: none;
}
body.soundlabs-page .sl-skip:focus { top: 12px; }

body.soundlabs-page .sl-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--r-sm);
}
body.soundlabs-page .sl-link:hover { text-decoration: underline; text-underline-offset: 3px; }

body.soundlabs-page .sl-kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

/* =========================================================================
   1. Workspace shell
   ========================================================================= */
body.soundlabs-page .sl-app {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--player-h);
  height: calc(100dvh - var(--sl-nav-h));
  min-height: 560px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  overflow: hidden;
}
body.soundlabs-page .sl-app[data-player="off"] { grid-template-rows: minmax(0, 1fr) 0; }

body.soundlabs-page .sl-rail { grid-column: 1; grid-row: 1 / 3; }

body.soundlabs-page .sl-main {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: var(--composer-w) minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  outline: none;
}
body.soundlabs-page .sl-app[data-view="library"] .sl-main { grid-template-columns: minmax(0, 1fr); }

body.soundlabs-page .sl-player { grid-column: 2; grid-row: 2; }
body.soundlabs-page .sl-switcherbar,
body.soundlabs-page .sl-dock { display: none; }

@media (min-width: 1024px) and (max-width: 1279px) {
  body.soundlabs-page { --rail-w: 64px; --composer-w: 360px; }
}

/* =========================================================================
   2. Tool rail (and the shared tool list used by the tab bar and phone sheet)
   ========================================================================= */
body.soundlabs-page .sl-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--sp-4) var(--sp-2) 0;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
}

body.soundlabs-page .sl-brand { padding: var(--sp-1) 10px var(--sp-4); }

body.soundlabs-page .sl-h1 {
  margin: 0;
  font: 600 var(--fs-brand)/var(--lh-brand) var(--font-display);
  letter-spacing: -.01em;
  color: var(--text);
}
body.soundlabs-page .sl-h1-sub {
  display: block;
  margin-top: 2px;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  letter-spacing: 0;
  color: var(--text-3);
}

.sl-rail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

body.soundlabs-page .sl-toolgroup-label {
  margin: 0;
  padding: var(--sp-3) 10px 6px;
  font: 700 var(--fs-micro)/var(--lh-micro) var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
body.soundlabs-page .sl-toolgroup--work {
  margin: var(--sp-3) 10px 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
body.soundlabs-page .sl-rail .sl-toolgroup--work { margin-left: 2px; margin-right: 2px; }

body.soundlabs-page .sl-toollist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
body.soundlabs-page .sl-toollist--keeper { margin-top: 2px; }

body.soundlabs-page .sl-toollink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-toollink:hover { background: var(--surface-2); color: var(--text); }
body.soundlabs-page .sl-toollink[aria-current="page"] { background: var(--surface-3); color: var(--text); }
body.soundlabs-page .sl-toollink[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
body.soundlabs-page .sl-toollink-icon { width: 16px; height: 16px; }
body.soundlabs-page .sl-toollink[aria-current="page"] .sl-toollink-icon { color: var(--tint, var(--accent)); }
body.soundlabs-page .sl-toollink[data-tint="song"] { --tint: var(--tool-song); }
body.soundlabs-page .sl-toollink[data-tint="inst"] { --tint: var(--tool-inst); }
body.soundlabs-page .sl-toollink[data-tint="sfx"] { --tint: var(--tool-sfx); }
body.soundlabs-page .sl-toollink[data-tint="voice"] { --tint: var(--tool-voice); }
body.soundlabs-page .sl-toollink[data-tool="library"] { --tint: var(--accent); }

.sl-toollink-label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

body.soundlabs-page .sl-toollink-meta {
  margin-left: auto;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
  white-space: nowrap;
}
body.soundlabs-page .sl-toollink-meta:empty { display: none; }
body.soundlabs-page .sl-toollink-meta.is-out { color: var(--warning); }

body.soundlabs-page .sl-rail-foot {
  margin: var(--sp-3) 2px 0;
  padding: var(--sp-3) 10px var(--sp-4);
  border-top: 1px solid var(--border);
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
}
body.soundlabs-page .sl-rail-foot-title { margin: 0 0 2px; font: 700 var(--fs-label)/var(--lh-label) var(--font-ui); color: var(--text); }
body.soundlabs-page .sl-rail-foot-copy { margin: 0; text-wrap: pretty; }
body.soundlabs-page .sl-rail-foot-link {
  min-height: 24px;      /* WCAG 2.2 SC 2.5.8: a standalone link on its own line (critic r3 F7) */
  padding-block: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: var(--sp-2);
  font: 700 var(--fs-label)/var(--lh-label) var(--font-ui);
  color: var(--accent);
  text-decoration: none;
  border-radius: var(--r-sm);
}
body.soundlabs-page .sl-rail-foot-link .sl-icon { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease-out); }
body.soundlabs-page .sl-rail-foot-link:hover .sl-icon { transform: translateX(2px); }
body.soundlabs-page .sl-rail-plan { display: none; }

/* Icon rail 1024-1279 */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.soundlabs-page .sl-rail { padding: var(--sp-3) var(--sp-2) var(--sp-3); align-items: stretch; }
  body.soundlabs-page .sl-brand { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  body.soundlabs-page .sl-rail .sl-toolgroup-label { height: 1px; padding: 0; margin: var(--sp-2) 12px; overflow: hidden; color: transparent; background: var(--border); }
  body.soundlabs-page .sl-rail .sl-toolgroup:first-child .sl-toolgroup-label { background: transparent; margin-top: 0; }
  body.soundlabs-page .sl-rail .sl-toolgroup--work { margin: var(--sp-2) 0 0; padding-top: var(--sp-2); }
  body.soundlabs-page .sl-rail .sl-toollink { justify-content: center; width: 48px; height: 44px; padding: 0; margin: 0 auto; }
  body.soundlabs-page .sl-rail .sl-toollink-icon { width: 18px; height: 18px; }
  body.soundlabs-page .sl-rail .sl-toollink-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  body.soundlabs-page .sl-rail .sl-toollink-meta { display: none; }
  body.soundlabs-page .sl-rail .sl-toollink[aria-current="page"]::before { left: -8px; top: 12px; bottom: 12px; }
  body.soundlabs-page .sl-rail-foot { display: none; }
  body.soundlabs-page .sl-rail-plan { display: block; padding-top: var(--sp-2); border-top: 1px solid var(--border); }
}

/* Plan popover (icon rail) */
body.soundlabs-page .sl-popover {
  position: fixed;
  z-index: var(--z-popover);
  width: 264px;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--e-2);
}
body.soundlabs-page .sl-popover .sl-rail-foot { display: block; margin: 0; padding: 0; border: 0; }

/* Tooltips (icon rail) */
body.soundlabs-page .sl-tooltip {
  position: fixed;
  z-index: var(--z-toast);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  box-shadow: var(--e-2);
  color: var(--text);
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  white-space: nowrap;
  pointer-events: none;
}

/* =========================================================================
   3. Composer column
   ========================================================================= */
body.soundlabs-page .sl-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
}

body.soundlabs-page .sl-composer-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.sl-composer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
  scroll-padding-block: var(--sp-6);
  /* The composer's content changes under the user constantly (a disclosure opening, a mode swapping its fields).
     Browser scroll anchoring reacts to that by nudging scrollTop mid-scroll, which threw a freshly revealed
     disclosure row back under the port's top edge. The column decides where it scrolls, not the anchor heuristic. */
  overflow-anchor: none;
}

body.soundlabs-page .sl-composer-head { margin-bottom: var(--sp-5); }
body.soundlabs-page .sl-composer-title {
  margin: 0;
  font: 600 var(--fs-display)/var(--lh-display) var(--font-display);
  letter-spacing: -.01em;
  color: var(--text);
}
body.soundlabs-page .sl-composer-desc {
  margin: var(--sp-1) 0 0;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
@media (min-width: 1024px) and (max-height: 799px) {
  body.soundlabs-page .sl-composer-desc { display: none; }
  body.soundlabs-page .sl-composer-head { margin-bottom: var(--sp-4); }
}

body.soundlabs-page .sl-composer-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin: 0;
}
/* The disclosure row: outside the scroller, above the run bar, always on screen, never over anything. */
body.soundlabs-page .sl-composer-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 var(--sp-5);
  background: var(--surface-1);
  border-top: 1px solid var(--border);
}
body.soundlabs-page .sl-composer-foot:empty,
body.soundlabs-page .sl-composer-foot[hidden] { display: none; }
body.soundlabs-page .sl-composer-foot .sl-more { margin: 0; border-top: 0; }
/* The footer holds the disclosure ROW and nothing else: one fixed-height affordance in its own space, above the run
   bar, never over the fields. Its panel is content and stays in the fields' single scroll region, so the column has
   exactly one clipping boundary and no live control is ever sliced between two (song critic r3 B2).
   `clip` rather than `hidden`: a hidden box can still be scrolled programmatically, which once scrolled the row out
   of sight when it took focus. No `overflow-clip-margin` — the 4 px one tried earlier put a scrollbar on phones. */
body.soundlabs-page .sl-composer-foot { flex: 0 0 auto; overflow: clip; }
body.soundlabs-page .sl-composer-foot .sl-more-toggle { flex: 0 0 auto; width: 100%; min-height: 48px; }
body.soundlabs-page .sl-composer-foot .sl-more-toggle:focus-visible { outline-offset: -2px; }
/* The swap itself is synchronous (one frame): hidden only for that. While the tool's module is still arriving the
   column is visible but inert — never blank for the length of a fetch (inst/speech critic r1 blocker 1). */
body.soundlabs-page .sl-composer-body[data-swapping] { visibility: hidden; }
body.soundlabs-page .sl-composer-body[data-binding] { opacity: .72; transition: opacity var(--t-fast) var(--ease-out); }

/* Draft restored chip */
body.soundlabs-page .sl-draftchip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
  padding: 0 var(--sp-1) 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  color: var(--text);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
}
body.soundlabs-page .sl-draftchip > .sl-icon { width: 14px; height: 14px; color: var(--accent); }

/* ---- Fields ---- */
body.soundlabs-page .sl-field { display: flex; flex-direction: column; min-width: 0; margin: 0; }
body.soundlabs-page .sl-fieldset { display: flex; flex-direction: column; gap: var(--sp-3); }

body.soundlabs-page .sl-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 18px;
  margin-bottom: var(--sp-2);
}

body.soundlabs-page .sl-label {
  margin: 0;
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  color: var(--text);
}
body.soundlabs-page .sl-field--chips > .sl-label { margin-bottom: var(--sp-2); }

body.soundlabs-page .sl-field-meta,
body.soundlabs-page .sl-counter,
body.soundlabs-page .sl-readout {
  margin: 0;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
  white-space: nowrap;
}
body.soundlabs-page .sl-counter { visibility: hidden; }
body.soundlabs-page .sl-counter.is-visible { visibility: visible; }
body.soundlabs-page .sl-counter.is-warn { color: var(--warning); }
body.soundlabs-page .sl-counter.is-over { color: var(--danger); font-weight: 700; }
body.soundlabs-page .sl-readout { color: var(--text-2); font-weight: 600; }

body.soundlabs-page .sl-help {
  margin: 6px 0 0;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
  text-wrap: pretty;
}
body.soundlabs-page .sl-field-error {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--danger);
}

body.soundlabs-page .sl-hint {
  margin: 0;
  font: 500 var(--fs-label)/var(--lh-label) var(--font-ui);
  color: var(--text-3);
}

/* A hint hugs its field, but the pull that does it is only ever applied inside stacks whose gap I own and know is
   wider than the pull. A blanket negative margin used to overlap whatever sat above the hint in a tighter stack
   (Song's 4px chip group), and the hint - text, and the links inside it - then won the hit test over live chips. */
body.soundlabs-page :where(.sl-composer-fields, .sl-more-panel, .sl-fieldset) > .sl-hint {
  margin-top: calc(-1 * var(--sp-2));
}

/* An ungapped stack gets the hug as real space instead, so the hint still reads as part of the field above it. */
body.soundlabs-page .sl-field > .sl-hint { margin-top: var(--sp-1); }

/* Text inputs */
body.soundlabs-page .sl-textarea,
body.soundlabs-page .sl-input,
body.soundlabs-page .sl-select-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-control);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font: 500 var(--fs-body)/var(--lh-body) var(--font-ui);
  box-shadow: none;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-textarea {
  min-height: 88px;
  resize: none;
  overflow-y: hidden;
  scrollbar-width: thin;
}
body.soundlabs-page .sl-textarea::placeholder,
body.soundlabs-page .sl-input::placeholder { color: var(--text-3); opacity: 1; }
body.soundlabs-page .sl-textarea:hover,
body.soundlabs-page .sl-input:hover,
body.soundlabs-page .sl-select-input:hover { border-color: #6C8599; }
body.soundlabs-page .sl-textarea:focus-visible,
body.soundlabs-page .sl-input:focus-visible,
body.soundlabs-page .sl-select-input:focus-visible,
body.soundlabs-page .sl-textarea:focus,
body.soundlabs-page .sl-input:focus,
body.soundlabs-page .sl-select-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--surface-2);
}
body.soundlabs-page .sl-field[data-invalid] .sl-textarea,
body.soundlabs-page .sl-field[data-invalid] .sl-input { border-color: var(--danger); }
body.soundlabs-page .sl-input { height: 44px; }

body.soundlabs-page .sl-select { position: relative; }
body.soundlabs-page .sl-select-input { height: 44px; padding-right: 36px; appearance: none; -webkit-appearance: none; cursor: pointer; }
body.soundlabs-page .sl-select-chevron { position: absolute; right: 12px; top: 13px; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }

/* Chips */
body.soundlabs-page .sl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
body.soundlabs-page .sl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 var(--fs-label)/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-chip:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
body.soundlabs-page .sl-chip:active { transform: scale(.98); }
body.soundlabs-page .sl-chip[aria-pressed="true"] { background: var(--surface-3); border-color: var(--accent); color: var(--text); }
body.soundlabs-page .sl-chip[aria-pressed="true"]::before {
  content: "";
  width: 9px;
  height: 5px;
  margin: -3px 1px 0 -2px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
body.soundlabs-page .sl-chip .sl-icon { width: 14px; height: 14px; }
body.soundlabs-page .sl-chip--sm { height: 28px; padding: 0 10px; font-size: var(--fs-meta); }

/* Segmented control (native radios) */
body.soundlabs-page .sl-seg {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  isolation: isolate;
}
body.soundlabs-page .sl-seg-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
body.soundlabs-page .sl-seg-opt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin: 0;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font: 700 var(--fs-label)/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color var(--t-med) var(--ease-out);
}
body.soundlabs-page .sl-seg-opt:hover { color: var(--text); }
body.soundlabs-page .sl-seg-input:checked + .sl-seg-opt { color: var(--text); }
body.soundlabs-page .sl-seg-input:focus-visible + .sl-seg-opt { outline: 2px solid var(--accent); outline-offset: 1px; }
body.soundlabs-page .sl-seg-thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--n, 2));
  border-radius: var(--r-sm);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform var(--t-med) var(--ease-out);
}
body.soundlabs-page .sl-seg[data-count="2"] { --n: 2; }
body.soundlabs-page .sl-seg[data-count="3"] { --n: 3; }
body.soundlabs-page .sl-seg[data-count="4"] { --n: 4; }
body.soundlabs-page .sl-seg[data-count="5"] { --n: 5; }
body.soundlabs-page .sl-seg[data-count="6"] { --n: 6; }
body.soundlabs-page .sl-seg[data-index="1"] { --i: 1; }
body.soundlabs-page .sl-seg[data-index="2"] { --i: 2; }
body.soundlabs-page .sl-seg[data-index="3"] { --i: 3; }
body.soundlabs-page .sl-seg[data-index="4"] { --i: 4; }
body.soundlabs-page .sl-seg[data-index="5"] { --i: 5; }

/* Slider */
body.soundlabs-page .sl-range {
  --fill: 0%;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
body.soundlabs-page .sl-range:focus { outline: none; }
body.soundlabs-page .sl-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent) 0 var(--fill), var(--surface-3) var(--fill) 100%);
}
body.soundlabs-page .sl-range::-moz-range-track { height: 4px; border-radius: var(--r-pill); background: var(--surface-3); }
body.soundlabs-page .sl-range::-moz-range-progress { height: 4px; border-radius: var(--r-pill); background: var(--accent); }
body.soundlabs-page .sl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 2px solid var(--bg);
  border-radius: var(--r-pill);
  background: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: transform var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--bg);
  border-radius: var(--r-pill);
  background: var(--text);
}
body.soundlabs-page .sl-range:hover::-webkit-slider-thumb { transform: scale(1.08); }
body.soundlabs-page .sl-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
body.soundlabs-page .sl-range:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }
body.soundlabs-page .sl-range-stops {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
}
body.soundlabs-page .sl-field--slider .sl-field-head { margin-bottom: var(--sp-1); }

/* Switch */
body.soundlabs-page .sl-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 0;
  cursor: pointer;
}
body.soundlabs-page .sl-switch-text { display: flex; flex-direction: column; min-width: 0; }
body.soundlabs-page .sl-switch-text .sl-help { margin-top: 2px; }
body.soundlabs-page .sl-switch-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
body.soundlabs-page .sl-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border-control);
  transition: background-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
body.soundlabs-page .sl-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--text-2);
  transition: transform var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out);
}
body.soundlabs-page .sl-switch-input:checked + .sl-switch-track { background: var(--accent); box-shadow: none; }
body.soundlabs-page .sl-switch-input:checked + .sl-switch-track .sl-switch-thumb { transform: translateX(16px); background: var(--on-accent); }
body.soundlabs-page .sl-switch-input:focus-visible + .sl-switch-track { box-shadow: var(--focus-ring); }

/* More options disclosure */
body.soundlabs-page .sl-more { position: relative; border-top: 1px solid var(--border); margin-top: calc(-1 * var(--sp-1)); }
body.soundlabs-page .sl-more-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: 700 var(--fs-label)/var(--lh-label) var(--font-ui);
  cursor: pointer;
  border-radius: var(--r-sm);
}
body.soundlabs-page .sl-more-toggle:hover { color: var(--text); }
body.soundlabs-page .sl-more-icon { width: 16px; height: 16px; color: var(--text-3); }
body.soundlabs-page .sl-more-chevron { width: 16px; height: 16px; margin-left: auto; color: var(--text-3); transition: transform var(--t-med) var(--ease-out); }
body.soundlabs-page .sl-more-toggle[aria-expanded="true"] .sl-more-chevron { transform: rotate(180deg); }
/* In the footer the panel opens above the row, so the chevron points that way when it is closed. */
/* One state indicator, one meaning, everywhere: closed points down, open points up. The footer used to invert both
   rules, and since the row only sits there while closed the two cancelled out into one frozen chevron (r4 N3a). */
body.soundlabs-page .sl-more-panel { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-2) 0 var(--sp-1); }

/* =========================================================================
   4. Run bar and Make button
   ========================================================================= */
body.soundlabs-page .sl-runbar {
  position: relative;
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}


body.soundlabs-page .sl-run-helper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 16px;
  margin: 0 0 var(--sp-2);
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
}
body.soundlabs-page .sl-run-helper-text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; text-wrap: pretty; }
body.soundlabs-page .sl-run-helper-text .sl-icon { width: 16px; height: 16px; }
body.soundlabs-page .sl-run-helper[data-tone="reason"] .sl-run-helper-text { color: var(--text-2); }
body.soundlabs-page .sl-run-helper[data-tone="warn"] .sl-run-helper-text { color: var(--warning); }
body.soundlabs-page .sl-run-helper-text .sl-link { font-weight: 700; }

body.soundlabs-page .sl-run {
  position: relative;
  display: flex;
  align-items: center;
  /* The label is centred, because for all but the seconds of an actual run the button holds nothing else: the
     allowance tag left the run bar with the owner's n18 ruling, and `space-between` then pinned the most important
     label on the page to one end (r4 N1). Only a visible tag brings the two-ended layout back. */
  justify-content: center;
  text-align: center;
  gap: var(--sp-3);
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 var(--sp-4);
  overflow: hidden;
  border: 0;
  border-radius: var(--r-md);
  background: var(--brand-gradient);
  color: var(--on-accent);
  font: 800 var(--fs-body)/1 var(--font-ui);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 20px rgba(107, 199, 255, .14);
  transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-run:hover { filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 26px rgba(107, 199, 255, .22); }
body.soundlabs-page .sl-run:active { transform: scale(.98); }
body.soundlabs-page .sl-run:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.soundlabs-page .sl-run:has(.sl-run-tag:not([hidden])) {
  justify-content: space-between;
  text-align: left;
  padding: 0 var(--sp-2) 0 var(--sp-4);
}
.sl-run-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: var(--lh-body); padding-block: 1px; }
body.soundlabs-page .sl-run-tag {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--on-accent-tag);
  font: 700 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  white-space: nowrap;
}
body.soundlabs-page .sl-run-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; opacity: 0; }

/* The muted state is not a dead state: the button still validates, explains and focuses the field that needs you, so
   it keeps a pointer cursor and AA-legible text (--text-disabled is 2.85:1; --text-3 is 4.7:1) — critic r3 F9. */
body.soundlabs-page .sl-run[data-state="disabled"],
body.soundlabs-page .sl-run[data-state="offline"] {
  background: var(--surface-3);
  color: var(--text-3);
  box-shadow: none;
  cursor: pointer;
  filter: none;
}
body.soundlabs-page .sl-run[data-state="offline"] { cursor: not-allowed; }
body.soundlabs-page .sl-run[data-state="disabled"] .sl-run-tag,
body.soundlabs-page .sl-run[data-state="offline"] .sl-run-tag { background: rgba(255, 255, 255, .04); color: var(--text-3); }
body.soundlabs-page .sl-run[data-state="disabled"]:active,
body.soundlabs-page .sl-run[data-state="offline"]:active,
body.soundlabs-page .sl-run[data-state="running"]:active { transform: none; }

body.soundlabs-page .sl-run[data-state="running"] {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  cursor: progress;
  filter: none;
}
body.soundlabs-page .sl-run[data-state="running"] .sl-run-tag { background: var(--accent-tint); color: var(--accent); }
body.soundlabs-page .sl-run[data-state="running"] .sl-run-line {
  opacity: 1;
  background: linear-gradient(90deg, transparent 0%, var(--wave-played-a) 35%, var(--wave-played-b) 65%, transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: sl-shimmer var(--t-shimmer) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.soundlabs-page .sl-run[data-state="running"] .sl-run-line { background: var(--accent); opacity: .6; animation: none; }
}

body.soundlabs-page .sl-run[data-state="out"] {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-control);
}
body.soundlabs-page .sl-run[data-state="out"]:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--pro); }

@keyframes sl-shimmer {
  from { background-position: -100% 0; }
  to { background-position: 200% 0; }
}

/* =========================================================================
   5. Results column
   ========================================================================= */
body.soundlabs-page .sl-results {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
  container-type: inline-size;   /* the header reflows on ITS width, not the window's (critic r3 F3) */
  container-name: sl-results;
}

body.soundlabs-page .sl-results-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 64px;
  padding: var(--sp-3) var(--sp-6) var(--sp-3) 28px; /* title aligns with day labels and covers (16 list + 12 card) */
  border-bottom: 1px solid var(--border);
}
body.soundlabs-page .sl-results-titles { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; margin-right: auto; }
body.soundlabs-page .sl-results-title {
  margin: 0;
  font: 700 var(--fs-title)/var(--lh-title) var(--font-ui);
  color: var(--text);
  white-space: nowrap;
}
body.soundlabs-page .sl-results-count { font: 500 var(--fs-label)/var(--lh-label) var(--font-ui); color: var(--text-3); white-space: nowrap; }
body.soundlabs-page .sl-results-tools { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
body.soundlabs-page .sl-filters { display: flex; align-items: center; gap: 6px; }
body.soundlabs-page .sl-filters .sl-chip { height: 30px; font-size: var(--fs-meta); padding: 0 10px; }

body.soundlabs-page .sl-sortbtn { height: 30px; }

body.soundlabs-page .sl-search { position: relative; flex: 0 1 220px; width: 220px; min-width: 150px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  body.soundlabs-page .sl-results-head { padding-right: var(--sp-5); }
  body.soundlabs-page .sl-app[data-view="tool"] .sl-results-count { display: none; }
  body.soundlabs-page .sl-search { flex-basis: 180px; }
}
body.soundlabs-page .sl-search-icon { position: absolute; left: 10px; top: 8px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
body.soundlabs-page .sl-search-input {
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0 10px 0 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font: 500 var(--fs-label)/1 var(--font-ui);
  -webkit-appearance: none;
  appearance: none;
}
body.soundlabs-page .sl-search-input::placeholder { color: var(--text-3); opacity: 1; }
body.soundlabs-page .sl-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
body.soundlabs-page .sl-search-input::-webkit-search-cancel-button { filter: invert(.7); }

body.soundlabs-page .sl-offline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 10px var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--warning);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
}
body.soundlabs-page .sl-offline .sl-icon { width: 16px; height: 16px; }
body.soundlabs-page .sl-offline[hidden] { display: none !important; }

.sl-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2) var(--sp-4) var(--sp-6);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

body.soundlabs-page .sl-list,
body.soundlabs-page .sl-skeleton-list,
body.soundlabs-page .sl-daylist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}
body.soundlabs-page .sl-day {
  margin: 0;
  padding: var(--sp-4) var(--sp-3) 6px;
  font: 700 var(--fs-micro)/var(--lh-micro) var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
body.soundlabs-page .sl-daylist--flat { padding-top: var(--sp-2); }
body.soundlabs-page .sl-jobs { list-style: none; margin: 0; padding: var(--sp-2) 0 0; display: grid; gap: var(--sp-2); }
body.soundlabs-page .sl-jobs:empty { display: none; }

body.soundlabs-page .sl-more-row { display: flex; justify-content: center; padding: var(--sp-4) 0 0; }
body.soundlabs-page .sl-list-end { margin: 0; padding: var(--sp-6) var(--sp-3) 0; font: 500 var(--fs-label)/var(--lh-label) var(--font-ui); color: var(--text-3); }
body.soundlabs-page .sl-list-end .sl-link--button { min-height: 24px; padding-block: 2px; }
body.soundlabs-page .sl-link--button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; }

/* ---- Track card ---- */
body.soundlabs-page .sl-card {
  position: relative;
  display: grid;
  /* One action column for the whole list, so every waveform ends on the same edge (critic r2 N9). */
  grid-template-columns: 56px minmax(0, 1fr) var(--sl-actions-w, auto);
  align-items: center;
  column-gap: 14px;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  transition: background-color var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-card:hover,
body.soundlabs-page .sl-card:focus-within,
body.soundlabs-page .sl-card.is-current { background: var(--surface-1); }
/* The loaded card is marked, not just filled (hover keeps the plain fill). */
body.soundlabs-page .sl-card.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
body.soundlabs-page .sl-card.is-current .sl-card-titlebtn { color: var(--text); }
body.soundlabs-page .sl-card.is-new { animation: sl-reveal var(--t-slow) var(--ease-out); }

@keyframes sl-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes sl-reveal { from { opacity: 0; } to { opacity: 1; } }
}

/* Cover: deterministic generative art (tool tint + a second tint, one of 8 layouts, fine rings), never an image.
   No stop mixes two tints into grey-brown: each tint is its own radial glow over a slate base. */
body.soundlabs-page .sl-cover {
  --c1: var(--tool-song-rgb);
  --c2: var(--tool-inst-rgb);
  --x1: 18%; --y1: 20%; --x2: 88%; --y2: 86%;
  --corner: 12px;
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-md);
  background:
    repeating-radial-gradient(circle at var(--x1) var(--y1), rgba(255, 255, 255, .05) 0 1px, transparent 1.5px 5px),
    radial-gradient(80% 80% at var(--x1) var(--y1), rgba(var(--c1), .78), rgba(var(--c1), .18) 55%, rgba(var(--c1), 0) 80%),
    radial-gradient(65% 65% at var(--x2) var(--y2), rgba(var(--c2), .55), rgba(var(--c2), 0) 75%),
    linear-gradient(160deg, #1B2C39, #0D1720);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  color: var(--text);
  cursor: pointer;
}
body.soundlabs-page .sl-cover[data-tint="song"] { --c1: var(--tool-song-rgb); }
body.soundlabs-page .sl-cover[data-tint="inst"] { --c1: var(--tool-inst-rgb); }
body.soundlabs-page .sl-cover[data-tint="sfx"] { --c1: var(--tool-sfx-rgb); }
body.soundlabs-page .sl-cover[data-tint="voice"] { --c1: var(--tool-voice-rgb); }
body.soundlabs-page .sl-cover[data-tint2="song"] { --c2: var(--tool-song-rgb); }
body.soundlabs-page .sl-cover[data-tint2="inst"] { --c2: var(--tool-inst-rgb); }
body.soundlabs-page .sl-cover[data-tint2="sfx"] { --c2: var(--tool-sfx-rgb); }
body.soundlabs-page .sl-cover[data-tint2="voice"] { --c2: var(--tool-voice-rgb); }
body.soundlabs-page .sl-cover[data-art="1"] { --x1: 82%; --y1: 16%; --x2: 14%; --y2: 90%; }
body.soundlabs-page .sl-cover[data-art="2"] { --x1: 50%; --y1: 0%; --x2: 50%; --y2: 100%; }
body.soundlabs-page .sl-cover[data-art="3"] { --x1: 12%; --y1: 88%; --x2: 90%; --y2: 12%; }
body.soundlabs-page .sl-cover[data-art="4"] { --x1: 0%; --y1: 50%; --x2: 100%; --y2: 50%; }
body.soundlabs-page .sl-cover[data-art="5"] { --x1: 70%; --y1: 72%; --x2: 10%; --y2: 8%; }
body.soundlabs-page .sl-cover[data-art="6"] { --x1: 30%; --y1: 40%; --x2: 96%; --y2: 70%; }
body.soundlabs-page .sl-cover[data-art="7"] { --x1: 92%; --y1: 92%; --x2: 20%; --y2: 30%; }
/* A soft scrim under the centre: whatever the generated art does, the glyph always sits on something dark enough
   (measured ≥ 3:1 for every layout — critic r2 N14). */
body.soundlabs-page .sl-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(44% 44% at 50% 50%, rgba(7, 14, 20, .78), rgba(7, 14, 20, .35) 55%, rgba(7, 14, 20, 0) 78%);
  pointer-events: none;
}
body.soundlabs-page .sl-cover-glyph {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  /* The art can be bright under the glyph: a dark halo keeps the glyph above 3:1 wherever it lands (r2 N14). */
  filter: drop-shadow(0 0 4px rgba(7, 14, 20, .95)) drop-shadow(0 0 2px rgba(7, 14, 20, .9)) drop-shadow(0 1px 2px rgba(7, 14, 20, .6));
  transition: opacity var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The play chip: one clean optically centred glyph in a round --text chip. Centre on hover/focus (the art glyph
   fades out); a small corner badge on touch screens and on the loaded card, so play is always visible. */
body.soundlabs-page .sl-cover-chip {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 2px 8px rgba(4, 10, 14, .45);
  opacity: 0;
  /* Never scale the chip: a scaled icon lands on fractional pixels and thins its stroke (critic r2 N5/N15). */
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out);
  pointer-events: none;
}
body.soundlabs-page .sl-cover-chip .sl-icon { width: 16px; height: 16px; }
body.soundlabs-page .sl-cover-chip use[href="#sl-i-play"] { transform: translateX(1px); }
body.soundlabs-page .sl-cover:not(:disabled):hover .sl-cover-chip,
body.soundlabs-page .sl-cover:not(:disabled):focus-visible .sl-cover-chip { opacity: 1; transform: none; }
body.soundlabs-page .sl-cover:not(:disabled):hover .sl-cover-glyph,
body.soundlabs-page .sl-cover:not(:disabled):focus-visible .sl-cover-glyph { opacity: 0; }
/* Corner badge: loaded card on desktop (when not hovered), every card on touch. */
/* Corner badge: a real 24 px circle with a 16 px glyph — never a scaled 32 px one, which lands icons on half pixels
   and thins their stroke (critic r2 N5). Where the badge shows, the art glyph steps aside as it does on hover. */
body.soundlabs-page .sl-cover-chip.is-badge,
body.soundlabs-page .sl-card.is-current .sl-cover:not(:hover):not(:focus-visible) .sl-cover-chip {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  opacity: 1;
  transform: translate(var(--corner), var(--corner));
}
body.soundlabs-page .sl-card.is-current .sl-cover:not(:hover):not(:focus-visible) .sl-cover-glyph { opacity: 0; }
@media (hover: none) {
  body.soundlabs-page .sl-card:not(.is-expired) .sl-cover .sl-cover-chip {
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    opacity: 1;
    transform: translate(var(--corner), var(--corner));
  }
  body.soundlabs-page .sl-card:not(.is-expired) .sl-cover .sl-cover-glyph { opacity: 0; }
}

/* Equaliser: replaces the art glyph on the playing card. 16x14, three 3px bars, 2px gaps, bottom-anchored. */
body.soundlabs-page .sl-eq {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: none;
  align-items: flex-end;
  gap: 2px;
  width: 13px;
  height: 14px;
  margin: -7px 0 0 -6.5px;
  pointer-events: none;
}
body.soundlabs-page .sl-eq i { display: block; width: 3px; height: 100%; border-radius: var(--r-pill); background: var(--text); transform-origin: bottom; animation: sl-eq 900ms var(--ease-in-out) infinite alternate; }
body.soundlabs-page .sl-eq i:nth-child(2) { animation-delay: -300ms; }
body.soundlabs-page .sl-eq i:nth-child(3) { animation-delay: -600ms; }
@keyframes sl-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
body.soundlabs-page .sl-card.is-playing .sl-cover .sl-cover-glyph { opacity: 0; }
body.soundlabs-page .sl-card.is-playing .sl-cover:not(:hover):not(:focus-visible) .sl-eq { display: flex; }
body.soundlabs-page .sl-card.is-playing .sl-cover:hover .sl-eq,
body.soundlabs-page .sl-card.is-playing .sl-cover:focus-visible .sl-eq { display: none; }
@media (hover: none) {
  body.soundlabs-page .sl-card.is-playing .sl-cover .sl-eq { display: flex; }
  body.soundlabs-page .sl-card.is-playing .sl-cover .sl-cover-glyph { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.soundlabs-page .sl-eq i:nth-child(1) { transform: scaleY(.6); }
  body.soundlabs-page .sl-eq i:nth-child(3) { transform: scaleY(.45); }
}

body.soundlabs-page .sl-card-body { min-width: 0; }
body.soundlabs-page .sl-card-top { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
body.soundlabs-page .sl-card-title {
  margin: 0;
  min-width: 0;
  font: 700 var(--fs-body)/var(--lh-body) var(--font-ui);
  color: var(--text);
}
body.soundlabs-page .sl-card-titlebtn {
  display: block;
  max-width: 100%;
  min-height: 24px;   /* WCAG 2.2 SC 2.5.8 (critic r2 N20) */
  margin: 0;
  padding: 1px 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  border-radius: var(--r-sm);
}
body.soundlabs-page .sl-card-titlebtn:hover { text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
body.soundlabs-page .sl-card-meta {
  flex: 0 0 auto;
  margin: 0;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
  white-space: nowrap;
}
body.soundlabs-page .sl-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  margin-left: 2px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font: 700 var(--fs-micro)/1 var(--font-ui);
  vertical-align: baseline;
  padding-top: 1px;
  box-sizing: border-box;
}
body.soundlabs-page .sl-card-tag .sl-icon { width: 16px; height: 16px; }
body.soundlabs-page .sl-card-excerpt {
  margin: 2px 0 var(--sp-2);
  overflow: hidden;
  font: 500 var(--fs-label)/var(--lh-label) var(--font-ui);
  color: var(--text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.soundlabs-page .sl-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-1); }

body.soundlabs-page .sl-card.is-expired .sl-cover { filter: saturate(.3) brightness(.7); cursor: default; }
body.soundlabs-page .sl-card-expired {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0;
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  color: var(--text-2);
}
body.soundlabs-page .sl-card-expired .sl-icon { width: 16px; height: 16px; color: var(--warning); }

/* Waveform */
body.soundlabs-page .sl-wave {
  position: relative;
  display: block;
  height: 32px;
  touch-action: none;
  cursor: pointer;
  border-radius: var(--r-sm);
}
body.soundlabs-page .sl-wave canvas { display: block; width: 100%; height: 100%; }
body.soundlabs-page .sl-wave:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.soundlabs-page .sl-wave-tip {
  position: absolute;
  top: 50%;
  transform: translate(6px, -50%);
  padding: 4px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font: 700 var(--fs-micro)/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-wave.is-hover .sl-wave-tip,
body.soundlabs-page .sl-wave.is-scrubbing .sl-wave-tip { opacity: 1; }
body.soundlabs-page .sl-wave-tip.is-flipped { transform: translate(calc(-100% - 6px), -50%); }
body.soundlabs-page .sl-wave[aria-disabled="true"] { cursor: default; }

/* ---- Progress card ---- */
body.soundlabs-page .sl-job {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  padding: 14px var(--sp-4) 14px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
body.soundlabs-page .sl-job.is-new { animation: sl-reveal var(--t-slow) var(--ease-out); }
body.soundlabs-page .sl-job-well {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--text-3);
}
body.soundlabs-page .sl-job-well .sl-icon { width: 22px; height: 22px; animation: sl-pulse var(--t-shimmer) var(--ease-in-out) infinite; }
@keyframes sl-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
body.soundlabs-page .sl-job-body { min-width: 0; }
body.soundlabs-page .sl-job-top { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); }
body.soundlabs-page .sl-job-title { margin: 0; font: 700 var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--text); }
body.soundlabs-page .sl-job-meta { font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--text-3); white-space: nowrap; }
body.soundlabs-page .sl-job-stage {
  margin: 2px 0 0;
  font: 500 var(--fs-label)/var(--lh-label) var(--font-ui);
  color: var(--text-2);
  text-wrap: pretty;
}
body.soundlabs-page .sl-job-bar {
  position: relative;
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
body.soundlabs-page .sl-job-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: var(--r-pill);
  background: var(--wave-played);
  animation: sl-indeterminate var(--t-shimmer) var(--ease-in-out) infinite;
}
@keyframes sl-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  body.soundlabs-page .sl-job-well .sl-icon { animation: none; opacity: 1; }
  body.soundlabs-page .sl-job-bar::after { animation: none; width: 100%; opacity: .35; }
}
body.soundlabs-page .sl-job-actions { display: flex; align-items: center; gap: var(--sp-2); }
/* The Cancel slot is reserved for the whole run: hidden when the job can no longer be cancelled, never removed. */
body.soundlabs-page .sl-job-cancel.is-unavailable,
body.soundlabs-page .sl-job-cancel-inline.is-unavailable { visibility: hidden; }
body.soundlabs-page .sl-job-cancel-inline { display: none; margin-left: auto; font-size: var(--fs-meta); }

/* ---- Error card ---- */
body.soundlabs-page .sl-job.is-error { align-items: start; border-color: var(--danger-line); padding-right: var(--sp-10); }
body.soundlabs-page .sl-job.is-error .sl-job-well { width: 40px; height: 40px; background: var(--danger-tint); color: var(--danger); }
body.soundlabs-page .sl-job.is-error .sl-job-well .sl-icon { width: 20px; height: 20px; animation: none; opacity: 1; }
body.soundlabs-page .sl-job.is-error { grid-template-columns: 40px minmax(0, 1fr); }
/* Kind variant (moderation): calm, accent info tile, no danger line. */
body.soundlabs-page .sl-job.is-kind { border-color: var(--border); }
body.soundlabs-page .sl-job.is-kind .sl-job-well { background: var(--accent-tint); color: var(--accent); }
body.soundlabs-page .sl-job-dismiss { position: absolute; top: 10px; right: 10px; }
body.soundlabs-page .sl-job-counted { margin: 2px 0 0; font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--text-3); }
body.soundlabs-page .sl-job-err-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
body.soundlabs-page .sl-details-toggle { color: var(--text-3); }
body.soundlabs-page .sl-details-toggle .sl-icon { width: 14px; height: 14px; transition: transform var(--t-med) var(--ease-out); }
body.soundlabs-page .sl-details-toggle[aria-expanded="true"] .sl-icon { transform: rotate(180deg); }
body.soundlabs-page .sl-details-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--sp-2);
  flex-basis: 100%;
  margin: 0;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
  word-break: break-word;
}
body.soundlabs-page .sl-details-panel[hidden] { display: none !important; }
body.soundlabs-page .sl-details-detail { flex-basis: 100%; }
body.soundlabs-page .sl-details-panel .sl-link { font-size: var(--fs-meta); }

/* ---- Skeleton ---- */
body.soundlabs-page .sl-card--skeleton { cursor: default; }
body.soundlabs-page .sl-card--skeleton:hover { background: transparent; }
body.soundlabs-page .sl-sk {
  display: block;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
body.soundlabs-page .sl-sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .035), transparent);
  transform: translateX(-100%);
  animation: sl-sk 1.6s var(--ease-in-out) infinite;
}
@keyframes sl-sk { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { body.soundlabs-page .sl-sk::after { display: none; } }
body.soundlabs-page .sl-sk-cover { width: 56px; height: 56px; border-radius: var(--r-md); }
body.soundlabs-page .sl-sk-lines { display: grid; gap: 8px; grid-column: 2 / 4; min-width: 0; }
body.soundlabs-page .sl-sk-title { width: 42%; height: 14px; }
body.soundlabs-page .sl-sk-line { width: 64%; height: 10px; }
body.soundlabs-page .sl-sk-wave { width: 100%; height: 18px; opacity: .6; }

/* ---- Empty / error / guest states ---- */
body.soundlabs-page .sl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 420px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-4) var(--sp-8);
  text-align: center;
}
body.soundlabs-page .sl-empty-tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
body.soundlabs-page .sl-empty-tile .sl-icon { width: 22px; height: 22px; }
body.soundlabs-page .sl-empty-tile[data-tint="song"] { color: var(--tool-song); }
body.soundlabs-page .sl-empty-tile[data-tint="inst"] { color: var(--tool-inst); }
body.soundlabs-page .sl-empty-tile[data-tint="sfx"] { color: var(--tool-sfx); }
body.soundlabs-page .sl-empty-tile[data-tint="voice"] { color: var(--tool-voice); }
body.soundlabs-page .sl-empty-title {
  margin: 0;
  font: 600 1.25rem/1.75rem var(--font-display);
  letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}
body.soundlabs-page .sl-empty-sub { margin: var(--sp-1) 0 0; color: var(--text-2); text-wrap: pretty; overflow-wrap: anywhere; }
body.soundlabs-page .sl-empty .sl-chips { justify-content: center; margin-top: var(--sp-5); }
body.soundlabs-page .sl-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }

/* Guest value prop */
body.soundlabs-page .sl-guest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 500px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-4) var(--sp-8);
}
body.soundlabs-page .sl-guest .sl-empty-tile { margin-bottom: var(--sp-5); }
body.soundlabs-page .sl-guest-title {
  margin: 0;
  font: 600 1.5rem/1.875rem var(--font-display);
  letter-spacing: -.015em;
  color: var(--text);
  text-wrap: balance;
}
body.soundlabs-page .sl-guest-sub { margin: var(--sp-2) 0 0; color: var(--text-2); text-wrap: pretty; }
body.soundlabs-page .sl-guest-list { list-style: none; display: grid; gap: 10px; margin: var(--sp-5) 0 0; padding: 0; }
body.soundlabs-page .sl-guest-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font: 600 var(--fs-body)/var(--lh-body) var(--font-ui); }
body.soundlabs-page .sl-guest-list .sl-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
body.soundlabs-page .sl-guest-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
body.soundlabs-page .sl-guest-fine { margin: var(--sp-3) 0 0; font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--text-3); }
body.soundlabs-page .sl-guest-rule { width: 100%; height: 1px; margin: var(--sp-8) 0 var(--sp-5); background: var(--border); border: 0; }
body.soundlabs-page .sl-guest-others { margin: 0 0 var(--sp-3); font: 600 var(--fs-label)/var(--lh-label) var(--font-ui); color: var(--text-2); }
body.soundlabs-page .sl-guest-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: var(--sp-2); width: 100%; list-style: none; margin: 0; padding: 0; }
body.soundlabs-page .sl-guest-tool {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  width: 100%;
  height: 100%;
  min-height: 52px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-guest-tool:hover { background: var(--surface-2); }
body.soundlabs-page .sl-guest-tool small { display: block; font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--text-3); }
body.soundlabs-page .sl-guest-tool .sl-icon { width: 18px; height: 18px; }
body.soundlabs-page .sl-guest-tool[data-tint="song"] .sl-icon { color: var(--tool-song); }
body.soundlabs-page .sl-guest-tool[data-tint="inst"] .sl-icon { color: var(--tool-inst); }
body.soundlabs-page .sl-guest-tool[data-tint="sfx"] .sl-icon { color: var(--tool-sfx); }
body.soundlabs-page .sl-guest-tool[data-tint="voice"] .sl-icon { color: var(--tool-voice); }

/* =========================================================================
   6. Buttons
   ========================================================================= */
body.soundlabs-page .sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  margin: 0;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: 700 var(--fs-label)/1 var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-btn:active { transform: scale(.98); }
body.soundlabs-page .sl-btn .sl-icon { width: 16px; height: 16px; }
body.soundlabs-page .sl-btn--primary { background: var(--brand-gradient); color: var(--on-accent); font-weight: 800; }
body.soundlabs-page .sl-btn--primary:hover { filter: brightness(1.05); color: var(--on-accent); }
body.soundlabs-page .sl-btn--secondary { box-shadow: inset 0 0 0 1px var(--border-control); }
body.soundlabs-page .sl-btn--secondary:hover { background: var(--surface-2); color: var(--text); }
body.soundlabs-page .sl-btn--ghost { color: var(--text-2); }
body.soundlabs-page .sl-btn--ghost:hover { background: var(--surface-2); color: var(--text); }
body.soundlabs-page .sl-btn--danger { background: #B91C1C; color: #FFF; }
body.soundlabs-page .sl-btn--danger:hover { background: #991B1B; color: #FFF; }
body.soundlabs-page .sl-btn--lg { height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-body); }
body.soundlabs-page .sl-btn--block { width: 100%; }
body.soundlabs-page .sl-btn--sm { height: 32px; padding: 0 10px; }

body.soundlabs-page .sl-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-iconbtn:hover { background: var(--surface-2); color: var(--text); }
body.soundlabs-page .sl-iconbtn[aria-pressed="true"] { color: var(--accent); background: var(--accent-tint); }
body.soundlabs-page .sl-iconbtn[aria-expanded="true"] { background: var(--surface-3); color: var(--text); }
body.soundlabs-page .sl-iconbtn--sm { width: 24px; height: 24px; border-radius: var(--r-pill); }
body.soundlabs-page .sl-iconbtn--sm .sl-icon { width: 14px; height: 14px; }

/* =========================================================================
   7. Player bar (>= 1024)
   ========================================================================= */
body.soundlabs-page .sl-player {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
  padding: 0 var(--sp-5);
  background: var(--player-bg);
  border-top: 1px solid var(--border);
}
body.soundlabs-page .sl-player-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-3);
  font: 500 var(--fs-label)/var(--lh-label) var(--font-ui);
}
body.soundlabs-page .sl-player-info { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
body.soundlabs-page .sl-player-info .sl-cover { width: 44px; height: 44px; cursor: default; }
body.soundlabs-page .sl-player-info .sl-cover-glyph { width: 18px; height: 18px; }
body.soundlabs-page .sl-player-text { min-width: 0; }
body.soundlabs-page .sl-player-title {
  margin: 0;
  overflow: hidden;
  font: 700 .875rem/1.25rem var(--font-ui);
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.soundlabs-page .sl-player-meta { margin: 0; overflow: hidden; font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
body.soundlabs-page .sl-player-transport { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
body.soundlabs-page .sl-play {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
body.soundlabs-page .sl-play:hover { background: #FFF; transform: scale(1.04); }
body.soundlabs-page .sl-play:active { transform: scale(.96); }
body.soundlabs-page .sl-play .sl-icon { width: 18px; height: 18px; }
body.soundlabs-page .sl-play[data-playing="false"] .sl-icon { transform: translateX(1px); }
body.soundlabs-page .sl-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.soundlabs-page .sl-play[aria-disabled="true"] { background: var(--surface-3); color: var(--text-disabled); cursor: default; transform: none; }
body.soundlabs-page .sl-time {
  flex: 0 0 auto;
  min-width: 36px;
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
body.soundlabs-page .sl-player .sl-wave { flex: 1 1 auto; min-width: 0; height: 36px; }
body.soundlabs-page .sl-player-right { display: flex; align-items: center; gap: var(--sp-1); }
body.soundlabs-page .sl-player-msg { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; margin: 0; font: 600 var(--fs-label)/var(--lh-label) var(--font-ui); color: var(--text-2); }
body.soundlabs-page .sl-player-msg .sl-icon { width: 14px; height: 14px; color: var(--warning); }

body.soundlabs-page .sl-volume-pop {
  position: fixed;
  z-index: var(--z-popover);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 200px;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--e-2);
}
body.soundlabs-page .sl-volume-pop .sl-range { flex: 1 1 auto; }

/* =========================================================================
   8. Menus, dialogs, sheets, toasts
   ========================================================================= */
body.soundlabs-page .sl-menu {
  position: fixed;
  z-index: var(--z-popover);
  min-width: 232px;
  max-width: 320px;
  padding: var(--sp-1);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--e-2);
}
body.soundlabs-page .sl-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  text-align: left;
  cursor: pointer;
}
body.soundlabs-page .sl-menu-item .sl-icon { width: 16px; height: 16px; color: var(--text-3); }
body.soundlabs-page .sl-menu-item:hover,
body.soundlabs-page .sl-menu-item:focus-visible { background: var(--surface-3); outline: none; }
body.soundlabs-page .sl-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
body.soundlabs-page .sl-menu-item--danger { color: var(--danger); }
body.soundlabs-page .sl-menu-item--danger .sl-icon { color: var(--danger); }
body.soundlabs-page .sl-menu-item-meta { margin-left: auto; padding-left: var(--sp-3); font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--text-3); white-space: nowrap; }
body.soundlabs-page .sl-menu-sep { height: 1px; margin: var(--sp-1) 6px; background: var(--border); }

body.soundlabs-page .sl-dialog {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--text);
  overflow: visible;
}
body.soundlabs-page .sl-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.soundlabs-page .sl-dialog[open] { animation: sl-dialog-in var(--t-slow) var(--ease-out); }
@keyframes sl-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
body.soundlabs-page .sl-dialog-panel {
  position: relative;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--e-3);
}
body.soundlabs-page .sl-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
body.soundlabs-page .sl-dialog-title { margin: 0; font: 700 var(--fs-title)/var(--lh-title) var(--font-ui); color: var(--text); text-wrap: balance; }
body.soundlabs-page .sl-dialog-close { position: absolute; top: 12px; right: 12px; }
body.soundlabs-page .sl-dialog-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--accent-tint);
  color: var(--accent);
}
body.soundlabs-page .sl-dialog-icon .sl-icon { width: 22px; height: 22px; }
body.soundlabs-page .sl-dialog-icon[data-tone="danger"] { background: var(--danger-tint); color: var(--danger); }
body.soundlabs-page .sl-dialog-body { margin: var(--sp-2) 0 0; color: var(--text-2); text-wrap: pretty; }
body.soundlabs-page .sl-dialog-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-6); }
body.soundlabs-page .sl-dialog-actions--row { flex-direction: row; justify-content: flex-end; }
body.soundlabs-page .sl-dialog-fine { margin: var(--sp-4) 0 0; font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--text-3); text-align: center; }
body.soundlabs-page .sl-sheet-handle { display: none; }

/* Details drawer */
body.soundlabs-page .sl-dialog--drawer { width: min(480px, calc(100vw - 32px)); }
body.soundlabs-page .sl-drawer-cover { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); padding-right: 40px; }
body.soundlabs-page .sl-drawer-cover > div:not(.sl-playrow) { flex: 1 1 0; min-width: 0; }
body.soundlabs-page .sl-drawer-cover > .sl-playrow { flex: 1 1 100%; }
body.soundlabs-page .sl-playrow { display: flex; align-items: center; gap: var(--sp-3); flex-basis: 100%; min-width: 0; margin-right: -40px; }
body.soundlabs-page .sl-playrow .sl-play { flex: 0 0 auto; width: 40px; height: 40px; }
body.soundlabs-page .sl-playrow .sl-wave { flex: 1 1 auto; min-width: 0; }
body.soundlabs-page .sl-playrow .sl-time { flex: 0 0 auto; }
body.soundlabs-page .sl-drawer-expired { flex-basis: 100%; }
body.soundlabs-page .sl-drawer-cover .sl-dialog-title { font-size: var(--fs-title); }
body.soundlabs-page .sl-drawer-section { padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
body.soundlabs-page .sl-drawer-h { margin: 0 0 6px; font: 600 var(--fs-label)/var(--lh-label) var(--font-ui); color: var(--text-2); }
body.soundlabs-page .sl-drawer-text { margin: 0; color: var(--text); white-space: pre-wrap; word-break: break-word; }
body.soundlabs-page .sl-drawer-settings { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-4); margin: 0; }
body.soundlabs-page .sl-drawer-settings dt { color: var(--text-3); font: 500 var(--fs-label)/var(--lh-label) var(--font-ui); }
body.soundlabs-page .sl-shortcuts { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px var(--sp-4); margin: var(--sp-4) 0 0; }
body.soundlabs-page .sl-shortcuts dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
body.soundlabs-page .sl-shortcuts dd { margin: 0; color: var(--text-2); font: 500 var(--fs-label)/var(--lh-label) var(--font-ui); }
body.soundlabs-page kbd.sl-keycap {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  color: var(--text);
  font: 700 var(--fs-micro)/1 var(--font-ui);
}
body.soundlabs-page .sl-keysep { margin: 0 4px; color: var(--text-3); font: 500 var(--fs-micro)/1 var(--font-ui); }
body.soundlabs-page .sl-drawer-settings dd { margin: 0; color: var(--text); font: 600 var(--fs-label)/var(--lh-label) var(--font-ui); }

/* Guest sign-up */
body.soundlabs-page .sl-plangrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}
body.soundlabs-page .sl-plangrid-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-2);
  font: 500 var(--fs-label)/var(--lh-label) var(--font-ui);
}
body.soundlabs-page .sl-plangrid-item > span { display: flex; flex-direction: column; min-width: 0; }
body.soundlabs-page .sl-plangrid-item strong { color: var(--text); font: 800 1.125rem/1.375rem var(--font-ui); }
body.soundlabs-page .sl-plangrid-item small { font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--text-2); }
body.soundlabs-page .sl-plangrid-item .sl-icon { width: 18px; height: 18px; flex: 0 0 auto; align-self: flex-start; margin-top: 3px; }
body.soundlabs-page .sl-plangrid-item[data-tint="song"] .sl-icon { color: var(--tool-song); }
body.soundlabs-page .sl-plangrid-item[data-tint="inst"] .sl-icon { color: var(--tool-inst); }
body.soundlabs-page .sl-plangrid-item[data-tint="sfx"] .sl-icon { color: var(--tool-sfx); }
body.soundlabs-page .sl-plangrid-item[data-tint="voice"] .sl-icon { color: var(--tool-voice); }
body.soundlabs-page .sl-google { margin-top: var(--sp-3); }
body.soundlabs-page .sl-google .sl-dialog-fine { margin: 0 0 var(--sp-3); }
body.soundlabs-page .sl-google-slot { position: relative; min-height: 44px; }
body.soundlabs-page .sl-gsi-host { display: flex; justify-content: center; min-height: 44px; }

/* Tool sheet */
body.soundlabs-page .sl-sheet-tools .sl-toollink { height: 48px; font-size: var(--fs-body); }
body.soundlabs-page .sl-sheet-tools .sl-toollink-icon { width: 18px; height: 18px; }
body.soundlabs-page .sl-sheet-tools .sl-toolgroup-label { padding-left: 10px; }
body.soundlabs-page .sl-sheet-tools .sl-toolgroup--work { margin: var(--sp-3) 0 0; }

/* Toasts */
body.soundlabs-page .sl-switcher-lib { display: none; }   /* phones only */
body.soundlabs-page .sl-toasts {
  position: fixed;
  right: var(--sp-5);
  bottom: calc(var(--player-h) + var(--sp-4));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  pointer-events: none;
}
/* Composer feedback ("Settings restored", "Seamless loop turned on") belongs over the composer it changed, not in the
   far corner of the page (song critic r1, nit 20). */
@media (min-width: 1024px) {
  body.soundlabs-page .sl-toasts[data-near="composer"] {
    right: auto;
    left: calc(var(--rail-w) + var(--sp-4));
    bottom: calc(var(--player-h) + var(--sl-runbar-h, 0px) + var(--sp-4));
    align-items: flex-start;
  }
  /* Keeper sits there while it is open, so the toast goes back to the corner rather than landing on the panel. */
  body.soundlabs-page .sl-app.is-keeper-open ~ .sl-toasts[data-near="composer"] {
    left: auto;
    right: var(--sp-5);
    align-items: flex-end;
  }
}
body.soundlabs-page .sl-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 6px 6px 6px 14px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  box-shadow: var(--e-2);
  color: var(--text);
  font: 600 .875rem/1.25rem var(--font-ui);
  pointer-events: auto;
  animation: sl-toast-in var(--t-slow) var(--ease-out);
}
body.soundlabs-page .sl-toast:not(:has(.sl-btn)) { padding-right: 14px; }
body.soundlabs-page .sl-toast > .sl-icon { width: 16px; height: 16px; color: var(--success); }
body.soundlabs-page .sl-toast--info > .sl-icon { color: var(--info); }
body.soundlabs-page .sl-toast .sl-btn { height: 32px; color: var(--accent); }
body.soundlabs-page .sl-toast.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
@keyframes sl-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   9. Dock, mini-player, player sheet (< 1024)
   ========================================================================= */
body.soundlabs-page .sl-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--mini-h);
  margin: 0 0 var(--sp-2);
  padding: 0;
  border-bottom: 1px solid var(--border);
}
body.soundlabs-page .sl-mini[hidden] { display: none; }
body.soundlabs-page .sl-mini-open {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-md);
}
body.soundlabs-page .sl-mini .sl-cover { width: 36px; height: 36px; border-radius: var(--r-sm); pointer-events: none; }
body.soundlabs-page .sl-mini .sl-cover-glyph { width: 16px; height: 16px; }
body.soundlabs-page .sl-mini-text { flex: 1 1 auto; min-width: 0; }
body.soundlabs-page .sl-mini-title { display: block; overflow: hidden; font: 700 var(--fs-label)/var(--lh-label) var(--font-ui); white-space: nowrap; text-overflow: ellipsis; }
body.soundlabs-page .sl-mini-bar { display: block; height: 3px; margin-top: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-3); }
body.soundlabs-page .sl-mini-bar i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--wave-played); }
body.soundlabs-page .sl-mini .sl-play { width: 44px; height: 44px; }

body.soundlabs-page .sl-dialog--player .sl-dialog-panel { padding: var(--sp-6) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); }
body.soundlabs-page .sl-psheet { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.soundlabs-page .sl-psheet .sl-cover { width: min(240px, 60vw); height: min(240px, 60vw); border-radius: var(--r-xl); cursor: default; margin: var(--sp-4) 0 var(--sp-6); }
body.soundlabs-page .sl-psheet .sl-cover-glyph { width: 64px; height: 64px; }
body.soundlabs-page .sl-psheet-title { margin: 0; font: 600 var(--fs-display)/var(--lh-display) var(--font-display); color: var(--text); text-wrap: balance; }
body.soundlabs-page .sl-psheet-meta { margin: var(--sp-1) 0 var(--sp-6); color: var(--text-3); font: 500 var(--fs-label)/var(--lh-label) var(--font-ui); }
body.soundlabs-page .sl-psheet .sl-wave { width: 100%; height: 48px; }
body.soundlabs-page .sl-psheet-times { display: flex; justify-content: space-between; width: 100%; margin-top: var(--sp-2); }
body.soundlabs-page .sl-psheet-controls { display: flex; align-items: center; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-5); }
body.soundlabs-page .sl-psheet-controls .sl-play { width: 64px; height: 64px; }
body.soundlabs-page .sl-psheet-controls .sl-play .sl-icon { width: 26px; height: 26px; }
body.soundlabs-page .sl-psheet-controls .sl-iconbtn { width: 48px; height: 48px; }
body.soundlabs-page .sl-psheet-controls .sl-iconbtn .sl-icon { width: 24px; height: 24px; }
body.soundlabs-page .sl-psheet-actions { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-6); width: 100%; }

/* =========================================================================
   10. SEO content
   ========================================================================= */
body.soundlabs-page .sl-seo {
  padding-block: var(--sp-14) var(--sp-14);
  padding-inline: var(--sp-4);
  background: var(--bg);
  border-top: 1px solid var(--border);
}
body.soundlabs-page .sl-seo-inner { max-width: 720px; margin: 0 auto; color: var(--text-2); font-size: var(--fs-body); line-height: 1.5rem; }
body.soundlabs-page .sl-seo-h2 { margin: var(--sp-12) 0 var(--sp-3); font: 600 1.375rem/1.75rem var(--font-display); letter-spacing: -.01em; color: var(--text); }
body.soundlabs-page .sl-seo-h2:first-child { margin-top: 0; }
body.soundlabs-page .sl-seo p { margin: 0 0 var(--sp-3); }
body.soundlabs-page .sl-seo-tools { display: grid; gap: var(--sp-4); margin: var(--sp-5) 0 0; }
body.soundlabs-page .sl-seo-tools dt { color: var(--text); font-weight: 700; }
body.soundlabs-page .sl-seo-tools dd { margin: 2px 0 0; }
body.soundlabs-page .sl-seo-tablewrap { overflow-x: auto; margin: var(--sp-4) 0 var(--sp-3); }
body.soundlabs-page .sl-seo-table { width: 100%; border-collapse: collapse; font-size: var(--fs-label); line-height: var(--lh-label); }
body.soundlabs-page .sl-seo-table th,
body.soundlabs-page .sl-seo-table td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
body.soundlabs-page .sl-seo-table thead th { color: var(--text-3); font-weight: 700; }
body.soundlabs-page .sl-seo-table tbody th { color: var(--text); font-weight: 700; }
body.soundlabs-page .sl-seo-table td { color: var(--text); font-weight: 600; }
body.soundlabs-page .sl-seo-unit { color: var(--text-3); font-weight: 500; }
body.soundlabs-page .sl-seo-note { font-size: var(--fs-label); color: var(--text-3); }
body.soundlabs-page .sl-faq { border-top: 1px solid var(--border); }
body.soundlabs-page .sl-faq-item { border-bottom: 1px solid var(--border); }
body.soundlabs-page .sl-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
  padding: var(--sp-3) 0;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-sm);
}
body.soundlabs-page .sl-faq-item > summary::-webkit-details-marker { display: none; }
body.soundlabs-page .sl-faq-chevron { width: 18px; height: 18px; color: var(--text-3); transition: transform var(--t-med) var(--ease-out); }
body.soundlabs-page .sl-faq-item[open] .sl-faq-chevron { transform: rotate(180deg); }
body.soundlabs-page .sl-faq-item p { margin: 0 0 var(--sp-4); max-width: 640px; }

/* =========================================================================
   11. Prompt Keeper placement (page-scoped; the shared widget is untouched)
   ========================================================================= */
body.soundlabs-page .pk-root:not(.pk-is-open) .pk-launcher { display: none; }
/* >=1024: next to the rail item that opens it, over the composer (never over the list's actions), above the run bar. */
body.soundlabs-page .pk-root { left: calc(var(--rail-w) + var(--sp-4)); right: auto; bottom: calc(var(--player-h) + var(--sl-runbar-h, 0px) + var(--sp-4)); }
body.soundlabs-page .pk-root .pk-panel { left: 0; right: auto; max-height: calc(100dvh - var(--player-h) - var(--sl-runbar-h, 0px) - var(--sl-nav-h, 65px) - 32px); }
body.soundlabs-page .sl-app[data-player="off"] ~ .pk-root,
body.soundlabs-page.sl-no-player .pk-root { bottom: calc(var(--sl-runbar-h, 0px) + var(--sp-4)); }
/* The Library has no composer under the panel, so the list steps aside while Keeper is open instead of being covered
   (critic r2 N6); the panel keeps its place beside the rail item that opened it. */
@media (min-width: 1024px) {
  /* The whole column steps aside, so its own width shrinks and the header reflows with it (critic r3 F3) — insetting
     only the header's padding left it overflowing its box in silence. */
  body.soundlabs-page .sl-app.is-keeper-open[data-view="library"] .sl-results { padding-left: 412px; }
  body.soundlabs-page .sl-app.is-keeper-open[data-view="library"] .sl-list-root { max-width: none; }
}

/* =========================================================================
   12. Tablet 768-1023: tab bar + single column + dock
   ========================================================================= */
@media (max-width: 1023px) {
  html:has(body.soundlabs-page) { scroll-padding-bottom: calc(var(--sl-dock-total, 120px) + 16px); scroll-padding-top: calc(var(--sl-sticky-top, 65px) + var(--switcher-h) + 8px); }
  body.soundlabs-page { padding-bottom: var(--sl-dock-total, 120px); }

  body.soundlabs-page .sl-app {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    border-top: 0;
  }
  body.soundlabs-page .sl-main { display: block; }
  body.soundlabs-page .sl-player { display: none; }

  body.soundlabs-page .sl-composer {
    max-width: 640px;
    margin: 0 auto;
    background: transparent;
    border: 0;
  }
  .sl-composer-scroll { overflow: visible; padding: var(--sp-6) var(--sp-4) var(--sp-6); }
  body.soundlabs-page .sl-runbar { display: none; }

  body.soundlabs-page .sl-results { background: transparent; }
  body.soundlabs-page .sl-results-head {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-3);
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    border-bottom: 0;
  }
  body.soundlabs-page .sl-app[data-view="library"] .sl-results-head { border-top: 0; }
  /* The divider between the composer and the results starts where the content starts, not where the band does (N4). */
  body.soundlabs-page .sl-results-head { position: relative; border-top-color: transparent; }
  body.soundlabs-page .sl-app:not([data-view="library"]) .sl-results-head::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--sp-4);
    right: var(--sp-4);
    height: 1px;
    background: var(--border);
  }
  body.soundlabs-page .sl-offline { width: 100%; max-width: 640px; margin: 0 auto var(--sp-2); padding: 10px var(--sp-4); border: 0; border-radius: var(--r-md); }
  /* Same 640 box as the composer; card padding (12) + 4 = the composer's 16 inline start. */
  .sl-list-scroll { overflow: visible; width: 100%; max-width: 640px; margin: 0 auto; padding: 0 4px var(--sp-8); }

  body.soundlabs-page .sl-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-dock);
    display: block;
    padding: var(--sp-2) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: var(--e-2);
  }
  /* The dock shares the content box of the column above it: its Make button starts where the field it submits does
     (16 px of dock padding + 64 px of centring = the composer's 80 px inline start at 768) — critic r2 N4. */
  body.soundlabs-page .sl-dock-inner { width: 100%; max-width: 608px; margin: 0 auto; }
  body.soundlabs-page .sl-dock[data-empty] { display: none; }
  body.soundlabs-page .sl-run--dock { height: 56px; }
  body.soundlabs-page .sl-run-helper--dock { margin-bottom: 6px; }

  body.soundlabs-page .sl-toasts {
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: calc(var(--sl-dock-total, 120px) + var(--sp-3));
    align-items: center;
  }

  body.soundlabs-page .pk-root { left: auto; right: var(--sp-4); bottom: calc(var(--sl-dock-total, 120px) + var(--sp-3)); }
  body.soundlabs-page .pk-root .pk-panel { left: auto; right: 0; max-height: calc(100dvh - var(--sl-dock-total, 120px) - 88px); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.soundlabs-page .sl-rail {
    position: sticky;
    top: var(--sl-sticky-top, 65px);
    z-index: var(--z-sticky);
    flex-direction: row;
    align-items: center;
    height: var(--switcher-h);
    padding: 0 var(--sp-3);
    border-right: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface-1);
  }
  body.soundlabs-page .sl-brand,
  body.soundlabs-page .sl-rail .sl-toolgroup-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .sl-rail-scroll { display: flex; align-items: center; height: 100%; overflow-x: auto; overflow-y: hidden; }
  body.soundlabs-page .sl-rail .sl-toolgroup { display: contents; }
  body.soundlabs-page .sl-rail .sl-toolgroup--work { margin: 0; padding: 0; border: 0; }
  body.soundlabs-page .sl-rail .sl-toollist { display: flex; gap: 0; height: 100%; }
  body.soundlabs-page .sl-rail .sl-toollist li { height: 100%; }
  body.soundlabs-page .sl-rail .sl-toollist--keeper { margin: 0 0 0 auto; }
  body.soundlabs-page .sl-rail .sl-toollink {
    height: 100%;
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
    border-radius: 0;
    background: transparent;
    white-space: nowrap;
  }
  body.soundlabs-page .sl-rail .sl-toollink:hover { background: transparent; color: var(--text); }
  body.soundlabs-page .sl-rail .sl-toollink[aria-current="page"] { background: transparent; }
  body.soundlabs-page .sl-rail .sl-toollink[aria-current="page"]::before { left: var(--sp-3); right: var(--sp-3); top: auto; bottom: 0; width: auto; height: 2px; }
  body.soundlabs-page .sl-rail .sl-toollink-label { overflow: visible; }
  body.soundlabs-page .sl-rail .sl-toollink-meta { display: none; }
  body.soundlabs-page .sl-rail .sl-keeper-link { width: 44px; justify-content: center; padding: 0; border-radius: var(--r-md); height: 44px; margin: 6px 0; }
  body.soundlabs-page .sl-rail .sl-keeper-link::before { display: none; }
  body.soundlabs-page .sl-rail .sl-keeper-link .sl-toollink-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  body.soundlabs-page .sl-rail-foot,
  body.soundlabs-page .sl-rail-plan { display: none; }
  body.soundlabs-page .sl-rail .sl-toolgroup--work .sl-toollist:not(.sl-toollist--keeper) { margin-left: 0; }
  body.soundlabs-page .sl-rail .sl-toolgroup--work::before { content: ""; align-self: center; width: 1px; height: 20px; margin: 0 var(--sp-1); background: var(--border); }
}

/* =========================================================================
   13. Phone < 768: switcher bar + sheet
   ========================================================================= */
@media (max-width: 767px) {
  body.soundlabs-page .sl-rail { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
  body.soundlabs-page .sl-rail-scroll,
  body.soundlabs-page .sl-rail-foot,
  body.soundlabs-page .sl-rail-plan { display: none; }

  body.soundlabs-page .sl-switcherbar {
    position: sticky;
    top: var(--sl-sticky-top, 65px);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    height: var(--switcher-h);
    padding: 0 var(--sp-4);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
  }
  body.soundlabs-page .sl-switcher {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    height: 44px;
    margin: 0 0 0 calc(-1 * var(--sp-2));
    padding: 0 var(--sp-3) 0 var(--sp-2);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text);
    font: 700 var(--fs-body)/var(--lh-body) var(--font-ui);
    cursor: pointer;
  }
  body.soundlabs-page .sl-switcher:active { background: var(--surface-2); }
  body.soundlabs-page .sl-switcher-icon { display: inline-grid; place-items: center; color: var(--tint, var(--accent)); }
  body.soundlabs-page .sl-switcher-icon .sl-icon { width: 18px; height: 18px; }
  body.soundlabs-page .sl-app[data-tint="song"] { --tint: var(--tool-song); }
  body.soundlabs-page .sl-app[data-tint="inst"] { --tint: var(--tool-inst); }
  body.soundlabs-page .sl-app[data-tint="sfx"] { --tint: var(--tool-sfx); }
  body.soundlabs-page .sl-app[data-tint="voice"] { --tint: var(--tool-voice); }
  body.soundlabs-page .sl-app[data-view="library"] { --tint: var(--accent); }
  .sl-switcher-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body.soundlabs-page .sl-switcher-chevron { width: 16px; height: 16px; color: var(--text-3); }
  /* The allowance is on the Make button, which is always on screen in the dock: saying it twice is noise (r2 N19). */
  body.soundlabs-page .sl-switcher-usage { display: none; }
  /* The right half of the bar earns its place: the Library, one tap away, with its count (critic r3 F14). */
  body.soundlabs-page .sl-switcher-lib {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--sp-2);
    margin-right: calc(-1 * var(--sp-2));
    border-radius: var(--r-md);
    color: var(--text-2);
    font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
    text-decoration: none;
  }
  body.soundlabs-page .sl-switcher-lib .sl-icon { width: 18px; height: 18px; color: var(--text-3); }
  body.soundlabs-page .sl-switcher-lib .sl-num { color: var(--text-3); }
  body.soundlabs-page .sl-switcher-lib:active { background: var(--surface-2); }

  .sl-composer-scroll { padding: var(--sp-5) var(--sp-4) var(--sp-5); }
  body.soundlabs-page .sl-composer-head { margin-bottom: var(--sp-4); }
  body.soundlabs-page .sl-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--sp-4));
    padding: 0 var(--sp-4);
    scrollbar-width: none;
    scroll-padding-inline: var(--sp-4);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
  }
  body.soundlabs-page .sl-chips::-webkit-scrollbar { display: none; }
  body.soundlabs-page .sl-chip { height: 36px; }
  body.soundlabs-page .sl-seg-opt { height: 38px; }

  body.soundlabs-page .sl-results-head { padding: var(--sp-5) var(--sp-4) var(--sp-3); gap: var(--sp-2) var(--sp-3); }
  body.soundlabs-page .sl-results-tools { width: 100%; }
  body.soundlabs-page .sl-app[data-view="library"] .sl-results-tools { flex-wrap: wrap; }
  body.soundlabs-page .sl-filters { flex: 0 0 auto; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  body.soundlabs-page .sl-filters .sl-chip { height: 44px; padding: 0 14px; font-size: var(--fs-label); }
  body.soundlabs-page .sl-search { flex: 1 1 auto; width: auto; min-width: 0; }
  body.soundlabs-page .sl-app[data-view="library"] .sl-search { flex-basis: 100%; }
  body.soundlabs-page .sl-search-input { height: 44px; font-size: 1rem; }
  body.soundlabs-page .sl-search-icon { top: 14px; }

  body.soundlabs-page .sl-card { grid-template-columns: 48px minmax(0, 1fr) var(--sl-actions-w, auto); column-gap: var(--sp-3); padding: 10px var(--sp-2); }
  body.soundlabs-page .sl-card .sl-cover { width: 48px; height: 48px; }
  body.soundlabs-page .sl-card .sl-cover-glyph { width: 20px; height: 20px; }
  body.soundlabs-page .sl-card-top { flex-direction: column; gap: 0; }
  body.soundlabs-page .sl-card-title { max-width: 100%; }
  body.soundlabs-page .sl-card .sl-wave { height: 24px; }
  body.soundlabs-page .sl-card-actions .sl-hide-phone { display: none; }
  body.soundlabs-page .sl-card-actions .sl-iconbtn { width: 44px; height: 44px; }
  body.soundlabs-page .sl-job { grid-template-columns: 48px minmax(0, 1fr); padding: var(--sp-3); }
  body.soundlabs-page .sl-job-well { width: 48px; height: 48px; }
  /* Phone: Cancel is a text button on the meta line (the card stays compact). */
  body.soundlabs-page .sl-job:not(.is-error) .sl-job-actions { display: none; }
  body.soundlabs-page .sl-job-cancel-inline { display: inline-flex; align-items: center; min-height: 32px; }
  body.soundlabs-page .sl-job.is-error { grid-template-columns: 40px minmax(0, 1fr); padding-right: 48px; }
  body.soundlabs-page .sl-job.is-error .sl-job-well { width: 40px; height: 40px; }
  body.soundlabs-page .sl-job-dismiss { top: 4px; right: 4px; }
  body.soundlabs-page .sl-job-err-actions { gap: var(--sp-1) var(--sp-2); }
  body.soundlabs-page .sl-job-err-actions .sl-btn { height: 44px; }

  body.soundlabs-page .sl-guest { padding: var(--sp-6) var(--sp-4) var(--sp-8); }
  body.soundlabs-page .sl-guest-tools { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  body.soundlabs-page .sl-empty { padding: var(--sp-8) var(--sp-4); }
  body.soundlabs-page .sl-empty .sl-chips { flex-wrap: wrap; overflow: visible; margin: var(--sp-5) 0 0; padding: 0; }

  body.soundlabs-page .sl-iconbtn { width: 44px; height: 44px; }
  body.soundlabs-page .sl-btn { min-height: 44px; }
  body.soundlabs-page .sl-btn--sm { min-height: 44px; }

  /* Dialogs become bottom sheets. */
  body.soundlabs-page .sl-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    margin: auto 0 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  body.soundlabs-page .sl-dialog[open] { animation: sl-sheet-in var(--t-slow) var(--ease-out); }
  body.soundlabs-page .sl-dialog-panel {
    max-height: 90dvh;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
  }
  body.soundlabs-page .sl-sheet-handle { display: block; width: 36px; height: 4px; margin: 0 auto var(--sp-3); border-radius: var(--r-pill); background: var(--border-control); }
  body.soundlabs-page .sl-dialog-close { top: 16px; right: 12px; }
  body.soundlabs-page .sl-dialog--sheet .sl-dialog-head { margin-bottom: var(--sp-1); }
  body.soundlabs-page .sl-menu-item { min-height: 48px; font-size: var(--fs-body); }
  body.soundlabs-page .sl-dialog--player { max-height: 100dvh; height: 100dvh; border-radius: 0; }
  body.soundlabs-page .sl-dialog--player .sl-dialog-panel { max-height: 100dvh; min-height: 100dvh; border-radius: 0; display: flex; flex-direction: column; }
  body.soundlabs-page .sl-dialog--player .sl-psheet { flex: 1 1 auto; justify-content: center; }

  body.soundlabs-page .sl-seo { padding-block: var(--sp-10) var(--sp-10); }
  body.soundlabs-page .sl-seo-h2 { margin-top: var(--sp-10); }
}
@keyframes sl-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Coarse pointers: every target at least 44px (WCAG 2.5.8). */
@media (pointer: coarse) {
  body.soundlabs-page .sl-chip { min-height: 44px; }
  body.soundlabs-page .sl-seg-opt { height: 44px; }
  body.soundlabs-page .sl-more-toggle { height: 48px; }
  body.soundlabs-page .sl-iconbtn--sm { width: 44px; height: 44px; }
}

/* =========================================================================
   14. Round 1 critic fixes (2026-09-16)
   ========================================================================= */

/* Visibility helpers (phone-only / hidden-on-phone), not tied to one component. */
body.soundlabs-page .sl-show-phone { display: none; }
@media (max-width: 767px) {
  body.soundlabs-page .sl-show-phone { display: inline-flex; }
  body.soundlabs-page .sl-hide-phone { display: none !important; }
}

/* Expired card: the warning owns the full content width; the phone link wraps under it. */
body.soundlabs-page .sl-card-expired { flex-wrap: wrap; height: auto; min-height: 32px; column-gap: 6px; row-gap: 0; }
body.soundlabs-page .sl-card-expired .sl-link--button { min-height: 32px; align-items: center; }
@media (max-width: 767px) {
  body.soundlabs-page .sl-card-expired { font-size: var(--fs-meta); }
  body.soundlabs-page .sl-card-expired .sl-link--button { flex-basis: 100%; min-height: 44px; margin-top: -6px; margin-bottom: -10px; font-size: var(--fs-label); }
}

/* Composer edges: a hairline only when there is content scrolled past (top) or still below the run bar (bottom). */
body.soundlabs-page .sl-composer::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
  pointer-events: none;
}
body.soundlabs-page .sl-composer[data-scrolled]::before { opacity: 1; }
body.soundlabs-page .sl-runbar { border-top-color: transparent; transition: border-color var(--t-fast) var(--ease-out); }
body.soundlabs-page .sl-composer[data-more] .sl-runbar { border-top-color: var(--border); }
@media (min-width: 1024px) and (max-height: 799px) {
  body.soundlabs-page .sl-composer-body,
  body.soundlabs-page .sl-more-panel { gap: var(--sp-4); }
}

/* Helper copy: no orphans. */
body.soundlabs-page .sl-help,
body.soundlabs-page .sl-run-helper-text,
body.soundlabs-page .sl-rail-foot-copy,
body.soundlabs-page .sl-dialog-body,
body.soundlabs-page .sl-guest-sub,
body.soundlabs-page .sl-empty-sub { text-wrap: balance; }

/* Results header: one control height per breakpoint (32 desktop / 44 touch). */
body.soundlabs-page .sl-filters .sl-chip,
body.soundlabs-page .sl-sortbtn { height: 32px; min-height: 32px; }
@media (max-width: 1023px) {
  body.soundlabs-page .sl-filters .sl-chip,
  body.soundlabs-page .sl-sortbtn { height: 44px; min-height: 44px; padding: 0 14px; font-size: var(--fs-label); }
  body.soundlabs-page .sl-search-input { height: 44px; font-size: 1rem; }
  body.soundlabs-page .sl-search-icon { top: 14px; }
  body.soundlabs-page .sl-results-tools { flex-wrap: wrap; max-width: 100%; }
  body.soundlabs-page .sl-search { min-width: 0; }
  body.soundlabs-page .sl-filters { scrollbar-width: none; }
  body.soundlabs-page .sl-filters::-webkit-scrollbar { display: none; }

  /* Library below 1024: three rows. (a) title + count + sort, (b) filter strip that scrolls on its own, (c) search. */
  body.soundlabs-page .sl-app[data-view="library"] .sl-results-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titles sort" "filters filters" "search search";
    align-items: center;
    gap: var(--sp-3);
  }
  body.soundlabs-page .sl-app[data-view="library"] .sl-results-tools:not([hidden]) { display: contents; }
  body.soundlabs-page .sl-app[data-view="library"] .sl-results-titles { grid-area: titles; margin: 0; }
  body.soundlabs-page .sl-app[data-view="library"] .sl-sort { grid-area: sort; justify-self: end; }
  body.soundlabs-page .sl-app[data-view="library"] .sl-sortbtn { margin-right: -14px; }
  body.soundlabs-page .sl-app[data-view="library"] .sl-filters { grid-area: filters; min-width: 0; max-width: none; overflow-x: auto; }
  body.soundlabs-page .sl-app[data-view="library"] .sl-filters .sl-chip { flex: 0 0 auto; }
  body.soundlabs-page .sl-app[data-view="library"] .sl-search { grid-area: search; width: auto; }
}
@media (max-width: 767px) {
  body.soundlabs-page .sl-app[data-view="library"] .sl-filters {
    margin: 0 calc(-1 * var(--sp-4));
    padding: 0 var(--sp-4);
    scroll-padding-inline: var(--sp-4);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
  }
  /* Phone: card content and day labels start at the composer's 16 px (8 list + 8 card padding). */
  body.soundlabs-page .sl-list-scroll { padding-inline: var(--sp-2); }
  body.soundlabs-page .sl-day { padding-inline: var(--sp-2); }
}

/* 1920: the list and header share a readable width, left-aligned (header content ends where the cards' does). */
@media (min-width: 1024px) {
  body.soundlabs-page .sl-list-root { max-width: 976px; }
  body.soundlabs-page .sl-results-head { padding-right: max(var(--sp-6), calc(100% - 980px)); }
  body.soundlabs-page .sl-offline { padding-right: max(var(--sp-6), calc(100% - 980px)); }
}

/* Below 1024 the SEO band shares the composer's 640 box, so the page has one inline start. */
@media (max-width: 1023px) {
  body.soundlabs-page .sl-seo-inner { max-width: 608px; } /* 16 (section) + 64 centring = the composer’s 80 px inline start at 768 */
}

/* Whenever the results column itself is narrow — a 1024 window, or Ask Keeper taking 412 px of it — the header uses
   the same three rows it uses on phones, instead of overflowing its own box in silence (critic r3 F3). */
@container sl-results (max-width: 840px) {
  body.soundlabs-page .sl-results-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titles sort" "filters filters" "search search";
    align-items: center;
    gap: var(--sp-3);
  }
  body.soundlabs-page .sl-results-tools:not([hidden]) { display: contents; }
  body.soundlabs-page .sl-results-titles { grid-area: titles; margin: 0; min-width: 0; }
  body.soundlabs-page .sl-results-title { overflow: hidden; text-overflow: ellipsis; }
  body.soundlabs-page .sl-sort { grid-area: sort; justify-self: end; }
  body.soundlabs-page .sl-filters { grid-area: filters; min-width: 0; max-width: none; overflow-x: auto; }
  body.soundlabs-page .sl-filters .sl-chip { flex: 0 0 auto; }
  body.soundlabs-page .sl-search { grid-area: search; width: auto; flex: 1 1 auto; }
}

/* While a new query is in flight the rows you were reading stay put, dimmed, rather than flashing to skeletons (F13). */
body.soundlabs-page .sl-list-root.is-restating .sl-daylist,
body.soundlabs-page .sl-list-root.is-restating .sl-day { opacity: .45; transition: opacity var(--t-fast) var(--ease-out); pointer-events: none; }

/* Recently deleted: restore within the 10-minute window. */
body.soundlabs-page .sl-deleted { margin: var(--sp-6) 0 0; padding: 0 var(--sp-3); }
body.soundlabs-page .sl-deleted-title {
  margin: 0 0 var(--sp-2);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  color: var(--text-2);
}
body.soundlabs-page .sl-deleted-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
body.soundlabs-page .sl-deleted-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--sp-3);
  min-height: 44px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
}
body.soundlabs-page .sl-deleted-item .sl-icon { width: 16px; height: 16px; color: var(--text-3); }
body.soundlabs-page .sl-deleted-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 var(--fs-label)/var(--lh-label) var(--font-ui); color: var(--text-2); }
body.soundlabs-page .sl-deleted-meta { font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui); color: var(--text-3); white-space: nowrap; }
@media (max-width: 767px) {
  body.soundlabs-page .sl-deleted { padding: 0 var(--sp-2); }
  body.soundlabs-page .sl-deleted-item { grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "icon name btn" "icon meta btn"; padding-block: var(--sp-2); }
  body.soundlabs-page .sl-deleted-item .sl-icon { grid-area: icon; }
  body.soundlabs-page .sl-deleted-name { grid-area: name; }
  body.soundlabs-page .sl-deleted-meta { grid-area: meta; }
  body.soundlabs-page .sl-deleted-item .sl-btn { grid-area: btn; }
}

/* Kind (moderation) card: never looks like a failure. */
body.soundlabs-page .sl-job.is-error.is-kind { border-color: var(--border); }
body.soundlabs-page .sl-job.is-error.is-kind .sl-job-well { background: var(--accent-tint); color: var(--accent); }

/* ---- Page-scoped dark skin for shared components at the conversion moment (behaviour untouched) ---- */
body.soundlabs-page #tpiUpgradeModal { background: var(--scrim); }
body.soundlabs-page #tpiUpgradeModal .tpi-modal-card {
  background: var(--surface-1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--e-3);
  font-family: var(--font-ui);
}
body.soundlabs-page #tpiUpgradeModal .tpi-modal-close { color: var(--text-3); }
body.soundlabs-page #tpiUpgradeModal .tpi-modal-close:hover { color: var(--text); }
/* The emoji is replaced by a calm accent tile (the text node stays for the shared script). */
body.soundlabs-page #tpiUpgradeModal .tpi-modal-icon {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-3);
  border-radius: var(--r-md);
  background: var(--accent-tint);
  font-size: 0;
  color: transparent;
}
body.soundlabs-page #tpiUpgradeModal .tpi-modal-icon::after {
  content: "";
  position: absolute;
  inset: 13px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.soundlabs-page #tpiUpgradeModal .tpi-modal-card h2 { color: var(--text); font: 700 var(--fs-title)/var(--lh-title) var(--font-ui); text-wrap: balance; }
body.soundlabs-page #tpiUpgradeModal .tpi-modal-lead { color: var(--text-2); text-wrap: pretty; }
body.soundlabs-page #tpiUpgradeModal .tpi-free-ribbon { background: var(--accent-tint); color: var(--text); box-shadow: none; border: 1px solid var(--border); border-radius: var(--r-md); }
body.soundlabs-page #tpiUpgradeModal .tpi-free-ribbon i { color: var(--accent); }
body.soundlabs-page #tpiUpgradeModal .tpi-free-code { background: var(--surface-3); color: var(--accent); }
body.soundlabs-page #tpiUpgradeModal .tpi-plan-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); }
body.soundlabs-page #tpiUpgradeModal .tpi-plan-name { color: var(--accent); }
body.soundlabs-page #tpiUpgradeModal .tpi-plan-price { color: var(--text); }
body.soundlabs-page #tpiUpgradeModal .tpi-plan-price small { color: var(--text-3); }
body.soundlabs-page #tpiUpgradeModal .tpi-benefits li { color: var(--text-2); }
body.soundlabs-page #tpiUpgradeModal .tpi-benefits li i { color: var(--accent); }
body.soundlabs-page #tpiUpgradeModal .tpi-resets-note { color: var(--text-3); }
body.soundlabs-page #tpiUpgradeModal .tpi-btn-primary { background: var(--brand-gradient); color: var(--on-accent); border-radius: var(--r-md); box-shadow: none; }
body.soundlabs-page #tpiUpgradeModal .tpi-btn-primary:hover { color: var(--on-accent); filter: brightness(1.04); box-shadow: none; }
body.soundlabs-page #tpiUpgradeModal .tpi-btn-primary:focus-visible,
body.soundlabs-page #tpiUpgradeModal .tpi-btn-secondary:focus-visible,
body.soundlabs-page #tpiUpgradeModal .tpi-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.soundlabs-page #tpiUpgradeModal .tpi-btn-secondary { color: var(--text-2); }
body.soundlabs-page #tpiUpgradeModal .tpi-btn-secondary:hover { color: var(--text); }

body.soundlabs-page .pk-root {
  --pk-ink: var(--text);
  --pk-muted: var(--text-3);
  --pk-line: var(--border);
  --pk-light: var(--accent);
  --pk-grad: var(--brand-gradient);
}
body.soundlabs-page .pk-root .pk-panel { background: var(--surface-1); border-color: var(--border); border-radius: var(--r-xl); box-shadow: var(--e-3); font-family: var(--font-ui); }
body.soundlabs-page .pk-root .pk-head { background: var(--surface-2); color: var(--text); border-bottom: 1px solid var(--border); }
body.soundlabs-page .pk-root .pk-head-txt span { color: var(--text-3); opacity: 1; }
body.soundlabs-page .pk-root .pk-close { color: var(--text-2); }
body.soundlabs-page .pk-root .pk-body { background: var(--bg); }
body.soundlabs-page .pk-root .pk-msg-bot { background: var(--surface-2); border-color: var(--border); color: var(--text); }
body.soundlabs-page .pk-root .pk-msg-user { background: var(--accent-tint); color: var(--text); border: 1px solid var(--border); }
body.soundlabs-page .pk-root .pk-msg-user a { color: var(--accent); }
body.soundlabs-page .pk-root .pk-card { background: var(--surface-2); border-color: var(--border); color: var(--text); }
body.soundlabs-page .pk-root .pk-card:hover { border-color: var(--border-strong); box-shadow: none; }
body.soundlabs-page .pk-root .pk-card-thumb { background: var(--surface-3); }
body.soundlabs-page .pk-root .pk-card-reason { color: var(--text-2); }
body.soundlabs-page .pk-root .pk-card-go,
body.soundlabs-page .pk-root .pk-signin a,
body.soundlabs-page .pk-root .pk-foot-fb:hover { color: var(--accent); }
body.soundlabs-page .pk-root .pk-chip { background: var(--accent-tint); color: var(--accent); }
body.soundlabs-page .pk-root .pk-sugg { background: var(--surface-2); color: var(--text); border-color: var(--border); }
body.soundlabs-page .pk-root .pk-sugg:hover { background: var(--surface-3); border-color: var(--border-strong); }
body.soundlabs-page .pk-root .pk-foot,
body.soundlabs-page .pk-root .pk-sheet { background: var(--surface-1); border-color: var(--border); }
body.soundlabs-page .pk-root .pk-input,
body.soundlabs-page .pk-root .pk-fb-field { background: var(--surface-2); border-color: var(--border-control); color: var(--text); }
body.soundlabs-page .pk-root .pk-input::placeholder,
body.soundlabs-page .pk-root .pk-fb-field::placeholder { color: var(--text-3); }
body.soundlabs-page .pk-root .pk-input:focus,
body.soundlabs-page .pk-root .pk-fb-field:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
body.soundlabs-page .pk-root .pk-send,
body.soundlabs-page .pk-root .pk-fb-submit,
body.soundlabs-page .pk-root .pk-fb-cta { background: var(--brand-gradient); color: var(--on-accent); }
body.soundlabs-page .pk-root .pk-back { background: var(--surface-3); color: var(--text); }
body.soundlabs-page .pk-root .pk-back:hover { background: var(--surface-2); }
body.soundlabs-page .pk-root .pk-fb-cancel:hover { background: var(--surface-2); color: var(--text); }
body.soundlabs-page .pk-root .pk-fb-file::file-selector-button { background: var(--accent-tint); color: var(--accent); }
body.soundlabs-page .pk-root .pk-fb-done-ico { background: var(--surface-2); color: var(--success); }

/* -------------------------------------------------------------------------
   Composer scrolling (Song critic round 1, blockers 1-2): any tool's composer,
   at any height, scrolls inside its column with a visible affordance.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* A real, always-visible scrollbar (macOS overlay scrollbars hide themselves, so a tall composer looked clipped). */
  /* Classic scrollbars (Windows, "always show" on macOS) get a token-coloured one; overlay scrollbars hide
     themselves, so the gradient below is the affordance that is always there when content continues. */
  body.soundlabs-page .sl-composer-scroll,
  body.soundlabs-page .sl-list-scroll { scrollbar-width: thin; }
  body.soundlabs-page .sl-composer-scroll::-webkit-scrollbar,
  body.soundlabs-page .sl-list-scroll::-webkit-scrollbar { width: 10px; }
  body.soundlabs-page .sl-composer-scroll::-webkit-scrollbar-track,
  body.soundlabs-page .sl-list-scroll::-webkit-scrollbar-track { background: transparent; }
  body.soundlabs-page .sl-composer-scroll::-webkit-scrollbar-thumb,
  body.soundlabs-page .sl-list-scroll::-webkit-scrollbar-thumb {
    background-color: var(--surface-3);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: var(--r-pill);
  }
  body.soundlabs-page .sl-composer-scroll:hover::-webkit-scrollbar-thumb,
  body.soundlabs-page .sl-list-scroll:hover::-webkit-scrollbar-thumb { background-color: var(--border-control); }
  /* "There is more below" is a real scroll thumb and a hairline, never a fade over a live control (critic r2 N3).
     The thumb is drawn by the app (macOS overlay scrollbars hide themselves), sized and moved in _pipeline.js. */
  body.soundlabs-page .sl-composer-track {
    position: absolute;
    top: 0;
    right: 3px;
    width: 4px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease-out);
    pointer-events: none;
  }
  body.soundlabs-page .sl-composer[data-more] .sl-composer-track,
  body.soundlabs-page .sl-composer[data-scrolled] .sl-composer-track { opacity: 1; }
  body.soundlabs-page .sl-composer-thumb {
    position: absolute;
    left: 0;
    width: 4px;
    min-height: 24px;
    border-radius: var(--r-pill);
    background: var(--border-control);
  }
  body.soundlabs-page .sl-composer[data-more] .sl-runbar { border-top-color: var(--border); }
  /* Round 3: nothing is pinned over the fields any more — the disclosure has its own row (see .sl-composer-foot). */
}

/* -------------------------------------------------------------------------
   15. Round 2 critic fixes (2026-09-16)
   ------------------------------------------------------------------------- */
/* The rail footer's shortcuts entry (N17). */
body.soundlabs-page .sl-rail-foot-keys {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  margin-top: var(--sp-2);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
@media (max-width: 1279px) {
  body.soundlabs-page .sl-rail-foot-keys { display: none; }
}
/* Loop in the phone player sheet sits with the transport (N11). */
body.soundlabs-page .sl-psheet-controls .sl-iconbtn[aria-pressed="true"] { color: var(--accent); background: var(--accent-tint); }
/* An empty library asks you to make something; it does not offer filters over nothing (N12). */
body.soundlabs-page .sl-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }