/* Sample Studio (plan R6) — the sampler's own workspace.
   Unlayered and scoped under .sample-studio, like song-lanes.css: legacy
   component rules such as `label { display: grid }` otherwise beat [hidden]
   and layered styles. Waveform geometry lives in canvas + percent overlays
   (SampleWaveform.js); nothing here animates the playhead. */

.sample-studio {
    width: min(1320px, calc(100vw - 24px));
    height: min(860px, calc(100dvh - 24px));
    max-width: none;
    max-height: none;
    /* The global reset's margin:0 removes native <dialog> centring. */
    margin: auto;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface-200);
    color: var(--text-primary);
    overflow: hidden;
    box-shadow: 0 24px 70px #000c;
    font-family: var(--font-sans, inherit);
}
.sample-studio::backdrop { background: #050507c4; backdrop-filter: blur(3px); }
.sample-studio [hidden] { display: none !important; }
.sample-studio :is(button, input, select, [role="slider"], [role="tab"]):focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.ss-frame { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }

/* ── Header ───────────────────────────────────────────────────────── */
.ss-header {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 16px; border-bottom: 1px solid var(--border-default); background: var(--surface-300);
}
.ss-heading { flex: 1 1 auto; min-width: 0; }
.ss-eyebrow {
    margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 10px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #c4b5fd;
}
.ss-heading h2 { margin: 1px 0 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.ss-sound { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }
.ss-sound-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 600; }
.ss-status {
    flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--border-default); border-radius: 999px;
    font-size: 10px; font-weight: 600; color: var(--text-secondary);
}
.ss-status[data-state="saved"] { color: var(--accent-success); border-color: color-mix(in srgb, var(--accent-success) 45%, transparent); }
.ss-status[data-state="session"] { color: var(--accent-warning); border-color: color-mix(in srgb, var(--accent-warning) 45%, transparent); }
.ss-status[data-state="missing"] { color: var(--accent-danger); border-color: color-mix(in srgb, var(--accent-danger) 50%, transparent); }
/* The Studio's own error line: page toasts render beneath a top-layer dialog. */
.ss-alert {
    margin: 4px 0 0; padding: 3px 8px; border-radius: 6px; width: fit-content; max-width: 100%;
    font-size: 12px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere;
    color: var(--accent-danger); background: color-mix(in srgb, var(--accent-danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-danger) 45%, transparent);
}
.ss-alert[data-type="info"] {
    color: var(--text-primary); background: var(--surface-400); border-color: var(--border-default);
}
.ss-header-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ss-slot { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.ss-slot .ss-select { width: auto; min-width: 150px; }
.ss-history { display: inline-flex; gap: 4px; }
.ss-close { font-size: 20px; }

/* ── Controls ─────────────────────────────────────────────────────── */
.ss-btn {
    min-height: 32px; padding: 5px 12px; border: 1px solid var(--border-default); border-radius: 6px;
    background: var(--surface-500); color: var(--text-primary); font: inherit; font-size: 12px; cursor: pointer;
    white-space: nowrap;
}
.ss-btn:hover:not(:disabled) { background: var(--surface-600); }
.ss-btn:disabled, .ss-icon-btn:disabled { opacity: .45; cursor: default; }
.ss-btn--primary { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; font-weight: 650; }
.ss-btn--primary:hover:not(:disabled) { background: var(--accent-primary-dim); }
.ss-btn--small { min-height: 26px; padding: 3px 9px; font-size: 11px; }
.ss-icon-btn {
    display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-400);
    color: var(--text-secondary); font: 600 15px/1 var(--font-sans, inherit); cursor: pointer;
}
.ss-icon-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-500); }
.ss-segmented { display: inline-flex; border: 1px solid var(--border-default); border-radius: 7px; overflow: hidden; }
.ss-seg { min-height: 30px; padding: 4px 12px; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.ss-seg[aria-pressed="true"] { background: var(--accent-primary); color: #fff; font-weight: 600; }
.ss-chip {
    display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid var(--border-default);
    border-radius: 999px; font: 600 10px/1 var(--font-mono); color: var(--text-secondary); white-space: nowrap;
}
.ss-chip--accent { color: #f0abfc; border-color: color-mix(in srgb, #f0abfc 45%, transparent); }
.ss-input, .ss-select {
    width: 100%; min-height: 32px; padding: 4px 8px; border: 1px solid var(--border-default); border-radius: 6px;
    background: var(--surface-500); color: var(--text-primary); font: inherit; font-size: 12px;
}
.ss-input--num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ss-input:disabled, .ss-select:disabled { opacity: .5; }
.ss-note { margin: 0; font-size: 11px; line-height: 1.45; color: var(--text-secondary); }
.ss-note--warn { color: var(--accent-warning); }
.ss-empty-title { margin: 0; font-size: 13px; font-weight: 600; }
.ss-empty { padding: 10px 6px; font-size: 12px; color: var(--text-muted); }
.ss-collapse { display: none; }

/* ── Body: rail | waveform | inspector ────────────────────────────── */
.ss-body { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; min-height: 0; }
.ss-rail, .ss-inspector { min-height: 0; overflow: auto; background: var(--surface-300); }
.ss-rail { border-right: 1px solid var(--border-default); }
.ss-inspector { border-left: 1px solid var(--border-default); }
.ss-rail-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.ss-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ss-tab {
    min-height: 32px; padding: 4px 6px; border: 1px solid var(--border-default); border-radius: 6px;
    background: var(--surface-400); color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer;
}
.ss-tab[aria-selected="true"] {
    border-color: var(--accent-primary); color: var(--text-primary);
    background: color-mix(in srgb, var(--accent-primary) 22%, var(--surface-400));
}
.ss-panel { display: flex; flex-direction: column; gap: 8px; }
.ss-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ss-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; }
.ss-item:hover { background: var(--surface-400); }
.ss-item.is-current { background: color-mix(in srgb, var(--accent-primary) 14%, transparent); }
.ss-item .ss-play { width: 26px; height: 26px; font-size: 10px; }
.ss-play.is-playing { color: #fff; background: var(--accent-primary); border-color: var(--accent-primary); }
.ss-item-text { min-width: 0; }
.ss-item-name, .ss-item-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-item-name { font-size: 12px; }
.ss-item-meta { font-size: 10px; color: var(--text-muted); }
.ss-drop {
    display: grid; justify-items: center; gap: 8px; padding: 22px 12px; text-align: center;
    border: 1.5px dashed var(--border-strong); border-radius: 10px; color: var(--text-secondary); font-size: 12px;
}
.ss-drop strong { color: var(--text-primary); font-size: 13px; }
.ss-drop.is-over { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, transparent); }

.ss-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; padding: 12px 14px; overflow: auto; }
.ss-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--accent-warning) 50%, transparent); border-radius: 8px;
    background: color-mix(in srgb, var(--accent-warning) 10%, transparent); font-size: 12px;
}
.ss-wave-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ss-zoom { display: inline-flex; align-items: center; gap: 4px; }
.ss-hint { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.ss-readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ss-readout { padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-300); }
.ss-readout dt { font: 600 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ss-readout dd { margin: 3px 0 0; font: 600 14px/1.25 var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Waveform ─────────────────────────────────────────────────────── */
.ss-wave { display: flex; flex-direction: column; gap: 6px; }
.ss-wave__stage {
    position: relative; height: clamp(160px, 32vh, 290px); overflow: hidden; touch-action: none;
    border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-100);
}
.ss-wave__canvas, .ss-wave__overview-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ss-wave__dim { position: absolute; top: 20px; bottom: 0; background: rgba(5, 5, 7, .64); pointer-events: none; }
.ss-wave__fade { position: absolute; top: 20px; bottom: 0; pointer-events: none; }
.ss-wave__fade--in { background: linear-gradient(to right, rgba(240, 171, 252, .30), rgba(240, 171, 252, 0)); }
.ss-wave__fade--out { background: linear-gradient(to left, rgba(240, 171, 252, .30), rgba(240, 171, 252, 0)); }
.ss-wave__fade--in.is-reversed { background: linear-gradient(to left, rgba(240, 171, 252, .30), rgba(240, 171, 252, 0)); }
.ss-wave__fade--out.is-reversed { background: linear-gradient(to right, rgba(240, 171, 252, .30), rgba(240, 171, 252, 0)); }
.ss-wave__loop {
    position: absolute; top: 20px; bottom: 0; padding: 3px 6px; pointer-events: none;
    border: 1px dashed #2dd4bf; background: rgba(45, 212, 191, .08); color: #5eead4;
    font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.ss-wave__playhead {
    position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; pointer-events: none; z-index: 3;
    background: #fafafa; box-shadow: 0 0 8px rgba(255, 255, 255, .45);
}
.ss-wave__empty {
    position: absolute; inset: 20px 0 0; display: grid; place-items: center; padding: 16px;
    text-align: center; font-size: 13px; color: var(--text-secondary);
}
.ss-wave__overview {
    position: relative; height: 34px; overflow: hidden; cursor: pointer; touch-action: none;
    border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-100);
}
.ss-wave__window {
    position: absolute; top: 0; bottom: 0; pointer-events: none; border-radius: 4px;
    border: 1px solid var(--accent-primary); background: rgba(139, 92, 246, .16);
}

/* Handles: 16 px hit area (28 px on touch), a line, and a grip. */
.ss-handle { position: absolute; top: 0; bottom: 0; z-index: 2; width: 16px; margin-left: -8px; cursor: ew-resize; outline: none; touch-action: none; }
.ss-handle::before { content: ''; position: absolute; top: 20px; bottom: 0; left: 7px; width: 2px; background: currentColor; opacity: .9; }
.ss-handle__grip { position: absolute; top: 20px; left: 2px; width: 12px; height: 18px; border-radius: 3px; background: currentColor; }
.ss-handle--start, .ss-handle--end { color: #c4b5fd; }
.ss-handle--fadeIn, .ss-handle--fadeOut { color: #f0abfc; }
.ss-handle--fadeIn::before, .ss-handle--fadeOut::before { opacity: .35; }
.ss-handle--fadeIn .ss-handle__grip, .ss-handle--fadeOut .ss-handle__grip { top: 26px; left: 3px; width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); }
.ss-handle--loopStart, .ss-handle--loopEnd { color: #5eead4; }
.ss-handle--loopStart::before, .ss-handle--loopEnd::before { opacity: .5; }
.ss-handle--loopStart .ss-handle__grip, .ss-handle--loopEnd .ss-handle__grip { top: auto; bottom: 4px; height: 14px; }
.ss-handle.is-offscreen { visibility: hidden; }
.ss-handle.is-dragging .ss-handle__grip, .ss-handle:hover .ss-handle__grip { filter: brightness(1.25); }
.ss-handle:focus-visible .ss-handle__grip { box-shadow: 0 0 0 2px var(--surface-100), 0 0 0 4px var(--accent-primary); }

/* ── Inspector ────────────────────────────────────────────────────── */
.ss-inspector-body { display: flex; flex-direction: column; padding-bottom: 12px; }
.ss-inspector-body > .ss-btn { margin: 12px 14px 0; }
.ss-group { margin: 0; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border-subtle); }
.ss-group legend {
    float: left; width: 100%; margin: 0 0 8px; padding: 0;
    font: 600 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary);
}
.ss-group > * { clear: both; }
.ss-field { display: grid; gap: 4px; margin-bottom: 8px; font-size: 11px; color: var(--text-secondary); }
.ss-field--range { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ss-field--range > span { grid-column: 1; }
.ss-field--range > .ss-output { grid-column: 2; grid-row: 1; font: 600 11px var(--font-mono); color: var(--text-primary); }
.ss-field--range > input { grid-column: 1 / -1; }
.ss-range { width: 100%; accent-color: var(--accent-primary); }
.ss-grid2, .ss-grid3 { display: grid; gap: 0 8px; }
.ss-grid2 { grid-template-columns: 1fr 1fr; }
.ss-grid3 { grid-template-columns: 1fr 1fr 1fr; }
.ss-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 12px; color: var(--text-primary); cursor: pointer; }
.ss-check input { accent-color: var(--accent-primary); }

/* ── Footer: preview, keys / pads, outputs ────────────────────────── */
.ss-footer {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    border-top: 1px solid var(--border-default); background: var(--surface-300);
}
.ss-btn--play { min-width: 104px; font-weight: 650; }
.ss-btn--play.is-playing { border-color: var(--accent-success); background: color-mix(in srgb, var(--accent-success) 22%, var(--surface-500)); }
.ss-keys { display: flex; align-items: stretch; gap: 3px; min-width: 0; overflow-x: auto; }
.ss-key {
    display: flex; align-items: flex-end; justify-content: center; flex: 0 0 30px; height: 46px; padding: 0 0 4px;
    border: 1px solid #3f3f46; border-radius: 0 0 5px 5px; background: #e4e4e7; color: #18181b;
    font: 600 9px/1 var(--font-mono); cursor: pointer; user-select: none; touch-action: none;
}
.ss-key--black { background: #27272a; color: #d4d4d8; }
.ss-key--root { box-shadow: inset 0 -3px 0 var(--accent-primary); }
.ss-key:active { background: var(--accent-primary); color: #fff; }
.ss-pad {
    display: grid; align-content: center; gap: 2px; flex: 0 0 64px; height: 46px; padding: 2px 4px; overflow: hidden;
    border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-500); color: var(--text-primary);
    font: inherit; font-size: 10px; text-align: center; cursor: pointer; user-select: none; touch-action: none;
}
.ss-pad strong { font-size: 12px; }
.ss-pad span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.ss-pad.is-selected { border-color: var(--accent-primary); box-shadow: inset 0 0 0 1px var(--accent-primary); }
.ss-pad:active:not(:disabled) { background: var(--accent-primary); }
.ss-pad:disabled { opacity: .4; cursor: default; }
.ss-footer-actions { display: flex; gap: 8px; margin-left: auto; }

/* ── Narrower screens ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ss-body { grid-template-columns: 200px minmax(0, 1fr) 260px; }
    .ss-hint { display: none; }
}

@media (max-width: 759px) {
    .sample-studio { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
    .ss-header { flex-wrap: wrap; gap: 10px; }
    .ss-header-controls { justify-content: flex-start; width: 100%; }
    .ss-body { display: flex; flex-direction: column; overflow: auto; }
    .ss-rail, .ss-inspector { flex: 0 0 auto; overflow: visible; border: 0; border-bottom: 1px solid var(--border-default); }
    .ss-main { flex: 0 0 auto; overflow: visible; order: -1; }
    .ss-collapse {
        display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 8px 14px;
        border: 0; background: var(--surface-400); color: var(--text-primary); font: 600 12px/1 var(--font-sans, inherit); cursor: pointer;
    }
    .ss-collapse::after { content: '▾'; color: var(--text-secondary); }
    .ss-collapse[aria-expanded="false"]::after { content: '▸'; }
    .is-collapsed > :not(.ss-collapse) { display: none !important; }
    .ss-readouts { grid-template-columns: 1fr 1fr 1fr; }
    .ss-readout dd { font-size: 12px; }
    .ss-footer { flex-wrap: wrap; }
    .ss-keys { order: 3; width: 100%; }
    .ss-footer-actions { margin-left: 0; }
}

@media (pointer: coarse) {
    .ss-handle { width: 28px; margin-left: -14px; }
    .ss-handle::before { left: 13px; }
    .ss-handle__grip { left: 7px; width: 14px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .sample-studio, .sample-studio * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── R10: slice markers, Slices and Voices sections ─────────────────
   Slice markers are waveform sliders like the trim handles, drawn as a thin
   amber line with a numbered flag at the FOOT of the stage. Only the flag
   takes the pointer, so a marker sitting on the region start never covers
   the trim handle's grip at the top. */
.sample-studio .ss-handle--slice { top: 20px; z-index: 3; color: #fbbf24; pointer-events: none; }
.sample-studio .ss-handle--slice::before { top: 0; bottom: 0; width: 1px; left: 7.5px; opacity: .75; }
.sample-studio .ss-handle--slice .ss-handle__grip {
    top: auto; bottom: 3px; left: 0; width: 16px; height: 16px; border-radius: 3px 3px 3px 0;
    display: grid; place-items: center; pointer-events: auto; cursor: ew-resize;
    font: 700 10px/1 var(--font-mono); color: #1c1917;
}
.sample-studio .ss-handle--slice.is-dragging .ss-handle__grip,
.sample-studio .ss-handle--slice:hover .ss-handle__grip { filter: brightness(1.15); }
@media (pointer: coarse) {
    .sample-studio .ss-handle--slice .ss-handle__grip { left: -4px; width: 24px; height: 24px; }
}

.ss-slices__pitched { display: grid; gap: 8px; justify-items: start; }
.ss-slices__controls { display: flex; flex-direction: column; gap: 6px; }
.ss-slices__map { align-self: stretch; }
.ss-slice-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ss-slice-list:empty { display: none; }
.ss-slice {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px;
    padding: 3px 6px; border-radius: 6px; font-size: 12px;
}
.ss-slice:hover { background: var(--surface-400); }
.ss-slice .ss-play { width: 26px; height: 26px; font-size: 10px; }
.ss-slice__name { font-weight: 600; color: #fbbf24; }
.ss-slice__meta {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 11px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.ss-voices__peers { color: var(--text-primary); }

/* ── Find a sound + Generate (plan R9 · SampleFindPanel / SampleGeneratePanel) ─
   Scoped to the two rail panels; the rail is 200–240 px wide, so everything
   stacks. Nothing here depends on the provider being enabled. */
.ss-find, .ss-gen { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ss-find-scope { color: var(--text-muted); }
.ss-find-item { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.ss-find-item > .ss-btn--primary { grid-column: 2 / -1; justify-self: start; }
.ss-find-spacer { width: 26px; }
.ss-find-detail { display: flex; flex-direction: column; gap: 2px; }
.ss-find-detail .ss-item-meta { white-space: normal; }
.ss-find-mismatch { color: var(--accent-warning); }
.ss-find-ai { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--border-default); }
.ss-find-constraints { color: var(--text-primary); }
.ss-find-status[data-tone="warn"], .ss-gen-status[data-tone="warn"] { color: var(--accent-warning); }

.ss-gen-providers, .ss-gen-jobs { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ss-gen-provider { padding: 5px 6px; border-radius: 6px; background: var(--surface-400); font-size: 11px; line-height: 1.4; }
.ss-gen-provider-name { font-weight: 650; color: var(--text-primary); }
.ss-gen-provider-state { color: var(--text-secondary); }
.ss-gen-provider[data-state="enabled"] { box-shadow: inset 2px 0 0 var(--accent-success); }
.ss-gen-provider[data-state="error"] { display: flex; flex-direction: column; gap: 6px; color: var(--accent-warning); }
.ss-gen-none, .ss-gen-signin, .ss-gen-alt { display: flex; flex-direction: column; gap: 6px; }
.ss-gen-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ss-gen-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-secondary); }
.ss-gen-prompt { resize: vertical; min-height: 56px; font: inherit; font-size: 12px; }
.ss-gen-presets { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 6px 8px; border: 1px solid var(--border-default); border-radius: 6px; }
.ss-gen-presets legend { padding: 0 4px; font-size: 11px; color: var(--text-secondary); }
.ss-gen-preset { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.ss-gen-sent { font-style: italic; overflow-wrap: anywhere; }
.ss-gen-job { display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 6px; background: var(--surface-400); }
.ss-gen-job-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ss-gen-job-head .ss-item-name { flex: 1 1 auto; min-width: 0; }
.ss-gen-remove { width: 22px; height: 22px; font-size: 13px; }
.ss-gen-job-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.ss-gen-job[data-state="failed"] .ss-gen-job-state,
.ss-gen-job[data-state="unknown"] .ss-gen-job-state,
.ss-gen-job[data-state="unconfirmed"] .ss-gen-job-state { color: var(--accent-warning); }
.ss-gen-attrib { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px solid var(--border-default); }
.ss-gen-attrib-line { margin: 0; font-size: 11px; font-weight: 650; color: var(--text-primary); }
.ss-gen-licence { font-size: 11px; color: #c4b5fd; }

/* ── 2026-09-30: generate, empty slots, native controls ─────────────────
   color-scheme makes Chromium draw number spinners, range thumbs, selects and
   checkboxes for a dark surface: without it every number field showed a light
   grey spinner block and the sliders a white thumb. overflow: clip (not
   hidden) because a hidden box can still be scrolled by focus, which pushed
   the header's top line out of view. */
.sample-studio { color-scheme: dark; overflow: clip; }
.ss-frame { min-height: 0; overflow: clip; }
.ss-body { grid-template-columns: 276px minmax(0, 1fr) 300px; }
@media (max-width: 1100px) { .ss-body { grid-template-columns: 236px minmax(0, 1fr) 260px; } }

/* Rail tabs: five sources, icon over label, one row. */
.sample-studio .ss-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 3px; border: 1px solid var(--border-default); border-radius: 9px; background: var(--surface-200); }
.sample-studio .ss-tab {
    display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 48px; padding: 6px 2px;
    border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: 10.5px; font-weight: 600;
}
.sample-studio .ss-tab:hover { color: var(--text-primary); background: var(--surface-400); }
.sample-studio .ss-tab[aria-selected="true"] {
    color: #fff; border-color: color-mix(in srgb, var(--accent-primary) 70%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 38%, var(--surface-400)), color-mix(in srgb, var(--accent-primary) 18%, var(--surface-400)));
}
.sample-studio .ss-tab .ss-icon { width: 17px; height: 17px; }
.sample-studio .ss-tab[data-tab="generate"] .ss-icon { color: #f0abfc; }
.sample-studio .ss-tab[aria-selected="true"] .ss-icon { color: #fff; }

/* Badges and cards */
.ss-badge {
    display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
    font: 600 10px/1.4 var(--font-sans, inherit); color: #e9d5ff; background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, transparent);
}
.ss-badge--free { color: #6ee7b7; background: color-mix(in srgb, var(--accent-success) 14%, transparent); border-color: color-mix(in srgb, var(--accent-success) 40%, transparent); }
.ss-card { padding: 10px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-400); }

/* Empty slot: start cards in the waveform's place. */
.ss-start {
    display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; justify-content: center; min-height: 280px;
    padding: 22px; border: 1.5px dashed var(--border-strong); border-radius: 12px;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent-primary) 10%, transparent), transparent 70%);
}
.ss-start.is-over { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 12%, transparent); }
.ss-start-title { margin: 0; font-size: 18px; font-weight: 700; }
.ss-start-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.ss-start-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center;
    padding: 14px; text-align: left; cursor: pointer; font: inherit; color: var(--text-primary);
    border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-300);
    transition: border-color .15s, background .15s, transform .15s;
}
.ss-start-card:hover { border-color: color-mix(in srgb, var(--accent-primary) 65%, transparent); background: var(--surface-400); transform: translateY(-1px); }
.ss-start-card .ss-icon {
    grid-row: 1 / span 2; width: 38px; height: 38px; padding: 9px; border-radius: 10px;
    color: #c4b5fd; background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
}
.ss-start-card[data-start="generate"] .ss-icon { color: #f0abfc; background: color-mix(in srgb, #f0abfc 14%, transparent); }
.ss-start-card strong { font-size: 13.5px; }
.ss-start-card span { font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); }
@media (max-width: 759px) { .ss-start-cards { grid-template-columns: 1fr; } }

/* Inspector with no sound: only the sampler's own settings, plus why. */
.ss-inspector-body.is-empty > :not(.ss-group--sampler):not(.ss-inspector-empty) { display: none !important; }
.ss-inspector-empty { margin: 12px 14px 0; padding: 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); background: var(--surface-400); }

/* Pads: every pad selects its slot; empty ones invite a sound. */
.sample-studio .ss-pad.is-empty { border-style: dashed; background: transparent; }
.sample-studio .ss-pad.is-empty span { color: var(--text-muted); }
.sample-studio .ss-pad.is-empty:hover { border-color: var(--accent-primary); }
.sample-studio .ss-pad.is-selected.is-empty { background: color-mix(in srgb, var(--accent-primary) 12%, transparent); }
.sample-studio .ss-keys--pads { flex: 1 1 auto; }
.sample-studio .ss-pad { flex: 1 0 58px; max-width: 86px; }

/* Design panel */
.ss-design { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ss-design-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-design-group { display: flex; flex-direction: column; gap: 4px; }
.ss-design-group-label { margin: 0; font: 600 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ss-design-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ss-type {
    min-height: 28px; padding: 3px 4px; border: 1px solid var(--border-default); border-radius: 6px; cursor: pointer;
    background: var(--surface-400); color: var(--text-secondary); font: 600 11px/1.1 var(--font-sans, inherit);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-type:hover { color: var(--text-primary); border-color: var(--border-strong); }
.ss-type[aria-checked="true"] { color: #fff; border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 34%, var(--surface-400)); }
.ss-type[data-group="tonal"][aria-checked="true"] { border-color: #f0abfc; background: color-mix(in srgb, #f0abfc 26%, var(--surface-400)); }
.ss-type[data-group="fx"][aria-checked="true"] { border-color: #5eead4; background: color-mix(in srgb, #2dd4bf 24%, var(--surface-400)); }
.ss-design-stage { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-100); }
.ss-design-thumb { display: block; width: 100%; height: 64px; }
.ss-design-stage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ss-design-play.is-playing { border-color: var(--accent-success); background: color-mix(in srgb, var(--accent-success) 22%, var(--surface-500)); }
.ss-design-knobs { display: flex; flex-direction: column; gap: 2px; }
.ss-design-knobs .ss-field { margin-bottom: 4px; }
.ss-design-note { margin-bottom: 0; }
.ss-design-use { width: 100%; min-height: 38px; font-size: 13px; }
.ss-design-after { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* AI panel */
.ss-gen-ideas { display: flex; flex-wrap: wrap; gap: 4px; }
.ss-idea {
    padding: 3px 8px; border: 1px solid var(--border-default); border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--text-secondary); font: 11px/1.35 var(--font-sans, inherit);
}
.ss-idea:hover { color: var(--text-primary); border-color: color-mix(in srgb, #f0abfc 55%, transparent); }
.sample-studio .ss-gen-presets { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 0; border: 0; }
.sample-studio .ss-gen-presets legend { float: left; width: 100%; margin-bottom: 4px; padding: 0; }
.sample-studio .ss-gen-preset {
    position: relative; padding: 4px 9px; border: 1px solid var(--border-default); border-radius: 999px;
    font-size: 11px; color: var(--text-secondary); background: var(--surface-400);
}
.sample-studio .ss-gen-preset input { position: absolute; opacity: 0; pointer-events: none; }
.sample-studio .ss-gen-preset:has(input:checked) { color: #fff; border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 30%, var(--surface-400)); }
.sample-studio .ss-gen-preset:has(input:focus-visible) { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.ss-gen-advanced summary, .ss-gen-provider-details summary { cursor: pointer; font-size: 11px; color: var(--text-secondary); }
.ss-gen-advanced[open] { display: flex; flex-direction: column; gap: 6px; }
.ss-gen-provider-details { padding-top: 6px; border-top: 1px solid var(--border-default); }
.ss-gen-provider-details[open] > ul { margin-top: 6px; }
.sample-studio .ss-gen-generate { width: 100%; min-height: 38px; font-size: 13px; }
.ss-gen-none .ss-gen-alt .ss-btn { width: 100%; }
.ss-gen-job[data-state="queued"] .ss-gen-job-state::after,
.ss-gen-job[data-state="running"] .ss-gen-job-state::after,
.ss-gen-job[data-state="sending"] .ss-gen-job-state::after {
    content: ""; display: block; height: 3px; margin-top: 5px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent) 0 0 / 40% 100% no-repeat, var(--surface-500);
    animation: ss-progress 1.2s linear infinite;
}
@keyframes ss-progress { from { background-position: -40% 0, 0 0; } to { background-position: 140% 0, 0 0; } }

/* Sound-first workspace: choose/create in the main area, edit on demand. */
.sample-studio { width: min(1240px, calc(100vw - 32px)); border-radius: 18px; }
.sample-studio .ss-frame { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.sample-studio .ss-header { height: auto !important; min-height: 88px; padding: 14px 24px !important; background: #19191f; flex-shrink: 0; }
.sample-studio .ss-heading h2 { font-size: 23px; letter-spacing: -.035em; }
.sample-studio .ss-sound { margin-top: 5px; }
.sample-studio .ss-tabs { display: flex; gap: 8px; border: 0; border-bottom: 1px solid var(--border-default); border-radius: 0; padding: 10px 24px; background: #15151b; }
.sample-studio .ss-tab { display: flex; gap: 8px; min-height: 42px; padding: 10px 18px; font-size: 12px; }
.sample-studio .ss-tab:disabled { opacity: .4; cursor: default; }
.sample-studio .ss-body { display: grid; grid-template-columns: minmax(0, 1fr); background: radial-gradient(ellipse at top left, #242036 0, #121217 62%); }
.sample-studio[data-workspace="edit"] .ss-body { grid-template-columns: minmax(0, 1fr) 290px; }
.sample-studio .ss-rail { border: 0; background: transparent; }
.sample-studio .ss-rail-body { padding: 22px 28px; gap: 18px; max-width: 1080px; margin: 0 auto; }
.sample-studio .ss-rail-toggle, .sample-studio .ss-rail > .ss-collapse { display: none; }
.sample-studio .ss-rail.is-collapsed .ss-rail-body { display: flex; }
.sample-studio .ss-panel { gap: 18px; }
.sample-studio .ss-panel h3, .ss-community h3 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.ss-methods { display: flex; gap: 8px; }
.ss-methods [aria-pressed="true"] { color: #ddd3ff; background: #382956; border-color: #8b5cf6; }
.sample-studio .ss-design { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px 30px; }
.ss-design-head { grid-column: 1 / -1; }
.sample-studio .ss-empty-title { font-size: 20px; letter-spacing: -.02em; }
.ss-design-palette { display: flex; flex-direction: column; gap: 18px; grid-column: 1; grid-row: 2 / 4; }
.sample-studio .ss-design-types { gap: 6px; }
.sample-studio .ss-type { min-height: 40px; font-size: 12px; border-radius: 9px; background: #23232c; }
.sample-studio .ss-design-stage { grid-column: 2; gap: 10px; padding: 16px; border-radius: 14px; background: linear-gradient(155deg, #1d1830, #10141c); border-color: #40364f; }
.sample-studio .ss-design-thumb { height: 110px; }
.ss-design-wave-info { font-variant-numeric: tabular-nums; }
.ss-design-controls { grid-column: 2; display: flex; flex-direction: column; gap: 10px; }
.sample-studio .ss-design-knobs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.ss-design-outputs { grid-column: 2; display: flex; gap: 10px; position: sticky; bottom: 0; padding: 10px 0; background: #17151e; z-index: 2; border-radius: 8px; }
.ss-design-outputs .ss-design-use { flex: 1; width: auto; }
.sample-studio .ss-design-after { grid-column: 1 / -1; }
.sample-studio .ss-range { height: 24px; cursor: pointer; }
.sample-studio .ss-range { appearance: none; background: transparent; }
.sample-studio .ss-range::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: #544366; }
.sample-studio .ss-range::-webkit-slider-thumb { appearance: none; margin-top: -5px; width: 15px; height: 15px; border-radius: 50%; background: #c0a1ff; border: 2px solid #ede3ff; }
.sample-studio .ss-range::-moz-range-track { height: 5px; border-radius: 3px; background: #544366; }
.sample-studio .ss-range::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #c0a1ff; border: 2px solid #ede3ff; }
.sample-studio .ss-btn { min-height: 36px; border-radius: 8px; }
.sample-studio .ss-btn--primary { background: #8151df; border-color: #a280ed; }
.sample-studio .ss-btn--primary:hover:not(:disabled) { background: #9464f2; }
.sample-studio .ss-gen { max-width: 760px; gap: 16px; }
.sample-studio .ss-gen-form { gap: 16px; }
.sample-studio .ss-gen-prompt { min-height: 110px; padding: 14px; font-size: 15px; line-height: 1.5; }
.sample-studio .ss-gen-presets { gap: 8px; }
.sample-studio .ss-gen-preset { padding: 10px 16px; font-size: 12px; }
.sample-studio .ss-gen-none, .sample-studio .ss-gen-signin { max-width: 600px; padding: 24px; border: 1px solid var(--border-default); border-radius: 14px; background: #1d1b26; }
.sample-studio .ss-drop { padding: 70px 24px; gap: 20px; background: #1a1825; }
.sample-studio .ss-drop strong { font-size: 24px; }
.ss-local-library, .ss-community { display: flex; flex-direction: column; gap: 16px; }
.ss-library-filters { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 10px; }
.sample-studio .ss-input, .sample-studio .ss-select { min-height: 38px; }
.sample-studio .ss-list { gap: 8px; }
.sample-studio .ss-item { padding: 13px 16px; border: 1px solid #35313e; background: #201e28; border-radius: 12px; gap: 16px; }
.sample-studio .ss-item-name { font-size: 14px; font-weight: 600; }
.sample-studio .ss-item-meta { font-size: 11px; margin-top: 4px; color: #b5afc2; }
.sample-studio .ss-item .ss-play { height: 36px; width: 36px; }
.ss-community-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-share { padding: 18px; border: 1px solid #4d3b68; border-radius: 12px; background: #201b2c; }
.ss-share summary { cursor: pointer; font-weight: 600; }
.ss-share-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 18px; }
.ss-share-form > :is(.ss-check, p, button) { grid-column: 1 / -1; }
.ss-share-form .ss-check { align-items: flex-start; line-height: 1.5; }
.sample-studio .ss-main { padding: 24px; gap: 20px; }
.sample-studio .ss-wave__stage { height: clamp(210px, 36vh, 370px); border-radius: 12px; border-color: #4c3d69; }
.sample-studio .ss-wave__overview { height: 48px; margin-top: 6px; }
.sample-studio .ss-readout { padding: 14px; background: #1f1d28; }
.sample-studio .ss-hint { flex-basis: 100%; margin: 4px 0; line-height: 1.5; }
.sample-studio .ss-footer { flex-wrap: wrap; padding: 12px 20px; gap: 12px; }
.sample-studio .ss-footer-actions { margin-left: auto; }
.sample-studio .ss-footer-actions > button:disabled { display: none; }
.wavetable-import { padding: 12px; border: 1px solid var(--border-default); border-radius: 10px; }
.wavetable-import summary { cursor: pointer; font-weight: 600; }
.wavetable-import p { font-size: 12px; line-height: 1.5; }
.wavetable-import :is(select, input, button) { max-width: 100%; margin: 6px 0; }
.sample-studio .ss-keys--pads { flex: 1; }
.sample-studio .ss-pad { flex: 1 0 48px; }
.sample-studio[data-workspace="design"] .ss-footer .ss-btn--play,
.sample-studio[data-workspace="upload"] .ss-footer .ss-btn--play { display: none; }
@media (max-width: 900px) {
    .sample-studio .ss-design { grid-template-columns: 210px minmax(0, 1fr); gap: 16px; }
    .sample-studio .ss-rail-body { padding: 18px; }
    .sample-studio .ss-design-thumb { height: 130px; }
    .sample-studio .ss-footer-actions { width: 100%; justify-content: flex-end; }
    .ss-community-actions { flex-direction: column; }
}
@media (max-width: 650px) {
    .sample-studio { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 12px; }
    .sample-studio .ss-frame { width: 100%; grid-template-columns: minmax(0, 1fr); }
    .sample-studio .ss-frame > * { min-width: 0; }
    .sample-studio .ss-header { padding: 12px; gap: 8px; }
    .sample-studio .ss-heading h2 { font-size: 19px; }
    .sample-studio .ss-tabs { padding: 6px; gap: 3px; justify-content: space-between; }
    .sample-studio .ss-tab { min-width: 0; flex: 1; padding: 6px 3px; font-size: 10px; white-space: normal; flex-direction: column; gap: 4px; }
    .sample-studio .ss-slot { display: none; }
    .sample-studio .ss-design { display: flex; flex-direction: column; }
    .ss-design-palette { gap: 10px; }
    .sample-studio .ss-design-types { grid-template-columns: repeat(3, 1fr); }
    .sample-studio .ss-design-thumb { height: 140px; }
    .sample-studio .ss-body, .sample-studio[data-workspace="edit"] .ss-body { display: block; overflow: auto; }
    .sample-studio .ss-inspector { overflow: visible; }
    .sample-studio .ss-main { padding: 14px; overflow: visible; }
    .sample-studio .ss-footer { padding: 8px; gap: 8px; }
    .sample-studio .ss-footer-actions { gap: 5px; flex-wrap: wrap; }
    .sample-studio .ss-footer-actions .ss-btn { font-size: 11px; padding: 6px 8px; }
    .ss-library-filters { grid-template-columns: 1fr; }
    .ss-share-form { grid-template-columns: 1fr; }
    .ss-design-outputs { flex-wrap: wrap; }
    .ss-design-outputs > button { min-width: 0; font-size: 11px; white-space: normal; }
    .sample-studio .ss-item { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
    .ss-community-actions { grid-column: 1 / -1; flex-direction: row; }
    .sample-studio .ss-wave__stage { height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .ss-gen-job .ss-gen-job-state::after { animation: none !important; } }