/* Studio Shell — Paper artboard '17 Studio Shell — Full Density'.
 * Token-only restyle of the EXISTING header + toolbar markup: every id,
 * handler and feature stays; this file only re-casts the look. Loaded
 * after style.css so it wins the cascade. Fallback values guard the
 * moment before tokens.css (injected by skin.js) arrives. */

/* ---- Transport bar (header) ------------------------------------------- */
header {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 8px 14px;
    background: var(--color-surface, #0C120C);
    border: 1px solid var(--color-border, #1E2C1E);
    margin-bottom: 10px;
}

.header-left, .header-center, .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.header-right { margin-left: auto; }

.shell-transport { display: flex; align-items: center; gap: 5px; }
.btn-shell-play {
    width: 44px; height: 34px;
    background: var(--color-live-hot, #2BFF57);
    border: none;
    color: var(--color-bg, #060906);
    font-size: 13px;
    cursor: pointer;
    transition: box-shadow var(--duration-press, 180ms) ease;
}
.btn-shell-play:hover { box-shadow: 0 0 18px rgba(43, 255, 87, 0.45); }
.btn-shell-stop {
    width: 44px; height: 34px;
    background: var(--color-surface, #0C120C);
    border: 1px solid var(--color-danger, #FF4545);
    color: var(--color-danger, #FF4545);
    font-size: 12px;
    cursor: pointer;
}
header .btn-record { height: 34px; }

/* The mockup's transport bar carries no brand — the login owns it. */
header .title { display: none; }

.bpm-control { display: flex; align-items: baseline; gap: 6px; }
.bpm-input {
    width: 58px;
    background: none;
    border: none;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xl, 20px);
    color: var(--color-text, #E6F4E6);
    text-shadow: none;
}
.bpm-label {
    font-family: var(--font-display, monospace);
    font-size: 10px;
    letter-spacing: var(--tracking-wide, 0.08em);
    color: var(--color-muted, #79947B);
}

.key-display { display: flex; align-items: center; gap: 6px; }
.key-select {
    background: none;
    border: none;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xl, 20px);
    color: var(--color-armed, #FFB020);
    text-shadow: none;
}
.key-label {
    font-family: var(--font-display, monospace);
    font-size: 10px;
    letter-spacing: var(--tracking-wide, 0.08em);
    color: var(--color-muted, #79947B);
}

.master-gain-wrap { display: flex; align-items: center; gap: 8px; }
.master-label {
    font-family: var(--font-display, monospace);
    font-size: 10px;
    letter-spacing: var(--tracking-wide, 0.08em);
    color: var(--color-muted, #79947B);
}
.master-gain-slider { width: 90px; accent-color: var(--color-live-dim, #1E9E43); }

/* Header chip buttons share one anatomy. */
header .btn-live-in,
header .btn-session-rec,
header .btn-perform,
header .btn-tap,
header .btn-key-lock,
header .btn-key-detect {
    height: 30px;
    padding: 0 10px;
    background: none;
    border: 1px solid var(--color-border, #1E2C1E);
    color: var(--color-text, #E6F4E6);
    font-family: var(--font-display, monospace);
    font-size: 10px;
    letter-spacing: var(--tracking-wide, 0.08em);
    text-shadow: none;
    cursor: pointer;
    transition: border-color var(--duration-press, 180ms) ease;
}
header .btn-tap, header .btn-key-lock, header .btn-key-detect { height: 24px; padding: 0 8px; color: var(--color-muted, #79947B); }
/* The ⚡ FIX offer stands out on a failing block. */
.block-controls .block-btn-aifix {
    border-color: var(--color-armed, #FFB020) !important;
    color: var(--color-armed, #FFB020) !important;
}
/* ◆ — le diagnostic de l'audit, sur le bloc lui-même. Le code joue quand
 * même : c'est une remarque chiffrée, pas un blocage. Rouge seulement quand
 * le défaut est avéré (mélodie effondrée, évolution nulle). */
.block-controls .block-btn-ear {
    border-color: var(--color-muted, #79947B) !important;
    color: var(--color-muted, #79947B) !important;
    /* le compteur doit tenir : la puce s'élargit, elle ne tronque pas */
    width: auto !important;
    min-width: 24px;
    padding: 0 6px;
    gap: 3px;
    white-space: nowrap;
}
.block-controls .block-btn-ear-fail {
    border-color: var(--color-danger, #FF4545) !important;
    color: var(--color-danger, #FF4545) !important;
}
header .btn-live-in:hover, header .btn-session-rec:hover, header .btn-perform:hover,
header .btn-tap:hover, header .btn-key-lock:hover { border-color: var(--color-live-dim, #1E9E43); }

/* ---- Command bar (toolbar) -------------------------------------------- */
/* Mockup row 2: the command bar sits ABOVE the tracks. DOM stays where it
 * is (handlers, panels untouched) — flex order lifts it. */
main { display: flex; flex-direction: column; }
main > .toolbar { order: -2; }
main > #suggestion-bar { order: -1; }

.toolbar {
    background: var(--color-surface, #0C120C);
    border: 1px solid var(--color-border, #1E2C1E);
    padding: 8px 14px;
    margin-bottom: 10px;
}

/* Both expert rows flow as one wrapping row — mockup: single dense band. */
#toolbar-expert { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; row-gap: 10px; }
/* applyMode() sets inline display:block — reclaim flex only when shown. */
#toolbar-expert[style*="block"] { display: flex !important; }
#toolbar-expert .toolbar-row { display: contents; }
#toolbar-expert .toolbar-fill { display: none; }
#toolbar-expert .toolbar-row-secondary .toolbar-fill:last-of-type { display: none; }

/* Transport moved to the header — its group here would be a duplicate. */
#toolbar-expert .toolbar-row-primary .toolbar-group-labeled:first-child { display: none; }

.toolbar-group-labeled {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.toolbar-group-tag {
    font-family: var(--font-display, monospace);
    font-size: 9px;
    letter-spacing: var(--tracking-wider, 0.14em);
    color: var(--color-muted, #79947B);
    text-shadow: none;
}
.toolbar-group-labeled .btn, .toolbar-group-labeled .preset-select { align-self: flex-start; }
.toolbar-group-labeled { flex-direction: column; }
.toolbar-group-labeled > .toolbar-group-tag + * { margin-top: 0; }

/* Buttons inside labeled groups sit in a row under the tag. */
#toolbar-expert .toolbar-group-labeled {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 4px;
    /* Legacy .toolbar-group stretches — pin each group to its content. */
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}
/* BEGINNER + COACH anchor the far right of the band (mockup). */
#toolbar-expert .btn-mode-toggle { order: 98; margin-left: auto; align-self: center; }
#toolbar-expert .btn-coach { order: 99; align-self: center; }
#toolbar-expert .toolbar-group-tag { grid-row: 1; grid-column: 1 / -1; }
#toolbar-expert .toolbar-group-labeled .btn,
#toolbar-expert .toolbar-group-labeled .preset-select { grid-row: 2; }

.toolbar .btn {
    height: 26px;
    padding: 0 9px;
    background: none;
    border: 1px solid var(--color-border, #1E2C1E);
    color: var(--color-text, #E6F4E6);
    font-family: var(--font-display, monospace);
    font-size: 10px;
    letter-spacing: var(--tracking-wide, 0.08em);
    text-shadow: none;
    border-radius: 0;
    cursor: pointer;
    transition: border-color var(--duration-press, 180ms) ease, color var(--duration-press, 180ms) ease;
}
.toolbar .btn:hover { border-color: var(--color-live-dim, #1E9E43); color: var(--color-text, #E6F4E6); }
.toolbar .btn-primary {
    background: var(--color-raised, #121A12);
    border-color: var(--color-live-dim, #1E9E43);
    color: var(--color-live-dim, #1E9E43);
}
.toolbar .btn-mode-toggle.active,
.toolbar .btn-mode-toggle {
    background: var(--color-armed, #FFB020);
    border: none;
    color: var(--color-bg, #060906);
}
.toolbar .preset-select {
    height: 26px;
    background: var(--color-raised, #121A12);
    border: 1px solid var(--color-border, #1E2C1E);
    color: var(--color-text, #E6F4E6);
    font-family: var(--font-display, monospace);
    font-size: 10px;
    border-radius: 0;
}

/* Beginner bar inherits the same chip anatomy (row layout untouched). */
#toolbar-beginner .toolbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-sep { width: 1px; height: 26px; background: var(--color-border, #1E2C1E); }

@media (prefers-reduced-motion: no-preference) {
    header { animation: shell-rise var(--duration-rise, 700ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1)) both; }
    .toolbar { animation: shell-rise var(--duration-rise, 700ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1)) both; animation-delay: calc(var(--stagger-step, 70ms) * 1); }
}
@keyframes shell-rise {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Stage C: track blocks as Paper 17 cards --------------------------- */
.block {
    background: var(--color-surface, #0C120C);
    border: 1px solid var(--color-border, #1E2C1E);
    border-radius: 0;
    box-shadow: none;
    padding: 10px 12px;
    margin-bottom: 10px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.block:hover { box-shadow: 0 0 24px rgba(43, 255, 87, 0.06); }
.block.playing, .block.block-playing {
    border-color: var(--color-live-dim, #1E9E43);
}

.block-header { border: none; background: none; padding: 2px 0 6px; }
.block-badge {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--color-muted, #79947B);
    text-shadow: none;
}
.block-name {
    font-family: var(--font-display, monospace);
    font-size: var(--text-sm, 13px);
    letter-spacing: var(--tracking-wide, 0.08em);
    color: var(--color-text, #E6F4E6);
    background: none;
    border: none;
    text-shadow: none;
}
.block-drag-handle { color: var(--color-muted, #79947B); }

.block-controls .block-btn {
    height: 22px;
    min-width: 24px;
    padding: 0 6px;
    background: none;
    border: 1px solid var(--color-border, #1E2C1E);
    color: var(--color-text, #E6F4E6);
    font-family: var(--font-display, monospace);
    font-size: 9px;
    letter-spacing: var(--tracking-wide, 0.08em);
    border-radius: 0;
    text-shadow: none;
    cursor: pointer;
    transition: border-color var(--duration-press, 180ms) ease, color var(--duration-press, 180ms) ease;
}
.block-controls .block-btn:hover { border-color: var(--color-live-dim, #1E9E43); }
.block-controls .block-btn-play { background: var(--color-live-hot, #2BFF57); border: none; color: var(--color-bg, #060906); }
.block-controls .block-btn-mute { border-color: var(--color-border, #1E2C1E); }
.block-sep { width: 1px; height: 18px; background: var(--color-border, #1E2C1E); }
.block-vol-wrap input[type="range"] { accent-color: var(--color-live-dim, #1E9E43); }

.see-strip {
    border: 1px solid var(--color-border, #1E2C1E);
    background: var(--color-screen, #060906);
}

.block-editor .cm-editor {
    background: var(--color-screen, #060906);
    border: 1px solid var(--color-border, #1E2C1E);
}

/* FX panel rows on tokens. */
.fx-panel { background: var(--color-raised, #121A12); border: 1px solid var(--color-border, #1E2C1E); }
.fx-label {
    font-family: var(--font-display, monospace);
    font-size: 9px;
    letter-spacing: var(--tracking-wide, 0.08em);
    color: var(--color-muted, #79947B);
    text-shadow: none;
}
.fx-slider { accent-color: var(--color-live-dim, #1E9E43); }
.fx-value { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--color-text, #E6F4E6); }

/* Suggestion + section chrome on tokens. */
.suggestion-bar {
    background: var(--color-surface, #0C120C);
    border: 1px solid var(--color-border, #1E2C1E);
    margin-bottom: 10px;
}
.suggestion-text { font-family: var(--font-mono, monospace); color: var(--color-text, #E6F4E6); text-shadow: none; }
.section-tabs .btn, .section-tabs button {
    background: none;
    border: 1px dashed var(--color-border, #1E2C1E);
    color: var(--color-muted, #79947B);
    font-family: var(--font-display, monospace);
    text-shadow: none;
    border-radius: 0;
}

/* Status indicators speak only when they have something to say:
 * the WebSocket dot hides while connected, turns danger when lost;
 * one quiet engine dot + text remain. */
.ws-dot { display: none; }
.ws-dot.disconnected {
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--color-danger, #FF4545) !important;
    opacity: 1;
}
.status-dot { opacity: 0.6; width: 7px; height: 7px; }
.status-dot.ready { background: var(--color-live-dim, #1E9E43) !important; }
.status-text { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--color-muted, #79947B); text-shadow: none; }

/* ---- Stage D: Dual-Lens cockpit (rail · lens · drawer) ----------------- */
/* Every rule is gated by body.shell-cockpit — setCockpit(false) restores
 * the classic stacked layout instantly. */
.btn-cockpit {
    height: 30px;
    padding: 0 10px;
    background: none;
    border: 1px solid var(--color-border, #1E2C1E);
    color: var(--color-muted, #79947B);
    font-family: var(--font-display, monospace);
    font-size: 10px;
    letter-spacing: var(--tracking-wide, 0.08em);
    text-shadow: none;
    cursor: pointer;
}
.btn-cockpit.active { border-color: var(--color-live, #22B84A); color: var(--color-live, #22B84A); }

#shell-stage { display: block; }

.shell-cockpit #shell-stage {
    display: flex;
    gap: 10px;
    align-items: stretch;
    min-height: calc(100vh - 210px);
}

/* Left rail: compact track cards — every control stays visible. */
.shell-cockpit #blocks-container {
    width: 320px;
    flex: 0 0 auto;
    overflow-y: auto;
    max-height: calc(100vh - 210px);
}
.shell-cockpit #blocks-container .block { padding: 8px 10px; margin-bottom: 8px; cursor: pointer; }
.shell-cockpit #blocks-container .block .block-editor,
.shell-cockpit #blocks-container .block .fx-panel { display: none; }
.shell-cockpit #blocks-container .block .see-strip { height: 26px; }
/* Tidy control rows: core line (play/mute/solo + slider + FX/AI/⋯),
 * extras flow to a clean second line — uniform 4px rhythm. */
.shell-cockpit #blocks-container .block-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 4px;
    align-items: center;
}
.shell-cockpit #blocks-container .block-vol-wrap { flex: 1 1 56px; min-width: 56px; }
.shell-cockpit #blocks-container .block-vol-wrap input[type="range"] { width: 100%; }

/* Center: the selected block, opened wide, MUSIC lens under it. */
.shell-cockpit #lens-stage {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 210px);
}
/* The opened block FILLS the column — no dead black below the code. */
.shell-cockpit #lens-stage .block {
    margin-bottom: 0;
    cursor: default;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.shell-cockpit #lens-stage .block .see-strip { height: 72px; flex: 0 0 auto; }
.shell-cockpit #lens-stage .block .block-header { flex: 0 0 auto; }
.shell-cockpit #lens-stage .block .block-editor { flex: 1 1 0; min-height: 200px; display: flex; }
.shell-cockpit #lens-stage .block .block-editor .cm-editor { min-height: 200px; height: 100%; flex: 1 1 0; }
.shell-cockpit #lens-stage .block .cm-content { font-size: 15px; }
.shell-cockpit .lens-music { flex: 0 0 auto; }

.lens-music { display: none; }
.shell-cockpit .lens-music {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--color-surface, #0C120C);
    border: 1px solid var(--color-border, #1E2C1E);
}
.lens-music-head { display: flex; align-items: center; gap: 10px; }
.lens-music-body { display: flex; flex-direction: column; gap: 6px; }

/* Right drawer: real-feature proxies. */
#shell-drawer { display: none; }
.shell-cockpit #shell-drawer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 240px;
    flex: 0 0 auto;
    padding: 12px;
    background: var(--color-surface, #0C120C);
    border: 1px solid var(--color-border, #1E2C1E);
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
/* Status readout stays quiet even with legacy state colors. */
header .status-text, header .status-text.ready { color: var(--color-muted, #79947B) !important; }
.shell-cockpit #shell-drawer .suggestion-text { font-size: 10px; color: var(--color-muted, #79947B); }
.drawer-tag {
    font-family: var(--font-display, monospace);
    font-size: 9px;
    letter-spacing: var(--tracking-wider, 0.14em);
    color: var(--color-muted, #79947B);
    margin-top: 6px;
}
.drawer-tag:first-child { margin-top: 0; }
#shell-drawer > * { flex-shrink: 0; }
.drawer-btn {
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    text-align: left;
    background: none;
    border: 1px solid var(--color-border, #1E2C1E);
    color: var(--color-text, #E6F4E6);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    cursor: pointer;
    transition: border-color var(--duration-press, 180ms) ease;
}
.drawer-btn:hover { border-color: var(--color-live-dim, #1E9E43); }
.drawer-hint { font-family: var(--font-mono, monospace); font-size: 9px; color: var(--color-muted, #79947B); margin-top: 6px; }

/* Suggestion bar docked in the drawer: stack it, keep GO prominent. */
.shell-cockpit #shell-drawer .suggestion-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 8px;
    background: var(--color-raised, #121A12);
}
.shell-cockpit #shell-drawer .suggestion-text { font-size: 10px; line-height: 14px; }
.shell-cockpit #shell-drawer .btn-suggestion-action {
    height: 26px;
    background: var(--color-live-hot, #2BFF57);
    border: none;
    color: var(--color-bg, #060906);
    font-family: var(--font-display, monospace);
    font-size: 10px;
    letter-spacing: var(--tracking-wide, 0.08em);
    cursor: pointer;
}
.shell-cockpit #shell-drawer .btn-suggestion-dismiss {
    height: 22px;
    background: none;
    border: 1px solid var(--color-border, #1E2C1E);
    color: var(--color-muted, #79947B);
    font-size: 9px;
    cursor: pointer;
}
#drawer-suggestion-slot:empty::after,
#drawer-suggestion-slot .suggestion-bar[style*="none"] + *,
#drawer-suggestion-slot:has(.suggestion-bar[style*="none"])::after {
    content: 'AI suggestions appear here while you play.';
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    color: var(--color-muted, #79947B);
}

/* MUSIC lens internals (ml-*) already exist in components.css. */

/* ---- Panels pass: every remaining panel joins the token system --------- */
/* One generic anatomy so PATTERNS, LOOP, SECTIONS, BROWSE, LIBRARY,
 * PRODUCER, COACH, GLOSSARY and presets stop looking legacy inside the
 * new shell. Layout/logic untouched — surfaces, borders, type only. */
.audition-panel, .coach-panel, .glossary-panel, .loop-builder-panel,
.pack-manager-panel, .producer-panel, .scenes-panel, .snippets-panel,
.timeline-panel, .preset-manager {
    background: var(--color-surface, #0C120C) !important;
    border: 1px solid var(--color-border, #1E2C1E) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}

/* Titles & section headers inside those panels. */
.audition-panel [class*="-title"], .coach-panel [class*="-title"],
.glossary-panel [class*="-title"], .loop-builder-panel [class*="-title"],
.pack-manager-panel [class*="-title"], .producer-panel [class*="-title"],
.scenes-panel [class*="-title"], .snippets-panel [class*="-title"],
.preset-manager [class*="-title"] {
    font-family: var(--font-display, monospace);
    letter-spacing: var(--tracking-wide, 0.08em);
    color: var(--color-text, #E6F4E6);
    text-shadow: none;
}

/* Buttons inside panels: the shell chip anatomy. */
.audition-panel .btn, .coach-panel .btn, .glossary-panel .btn,
.loop-builder-panel .btn, .pack-manager-panel .btn, .producer-panel .btn,
.scenes-panel .btn, .snippets-panel .btn, .preset-manager .btn {
    background: none;
    border: 1px solid var(--color-border, #1E2C1E);
    color: var(--color-text, #E6F4E6);
    font-family: var(--font-display, monospace);
    letter-spacing: var(--tracking-wide, 0.08em);
    border-radius: 0;
    text-shadow: none;
    transition: border-color var(--duration-press, 180ms) ease;
}
.audition-panel .btn:hover, .coach-panel .btn:hover, .glossary-panel .btn:hover,
.loop-builder-panel .btn:hover, .pack-manager-panel .btn:hover,
.producer-panel .btn:hover, .scenes-panel .btn:hover, .snippets-panel .btn:hover,
.preset-manager .btn:hover { border-color: var(--color-live-dim, #1E9E43); }
.audition-panel .btn-primary, .producer-panel .btn-primary,
.scenes-panel .btn-primary, .snippets-panel .btn-primary,
.loop-builder-panel .btn-primary {
    background: var(--color-raised, #121A12);
    border-color: var(--color-live-dim, #1E9E43);
    color: var(--color-live-dim, #1E9E43);
}

/* Inputs & selects. */
.audition-panel input, .audition-panel select,
.pack-manager-panel input, .producer-panel input, .producer-panel textarea,
.scenes-panel input, .snippets-panel input {
    background: var(--color-raised, #121A12);
    border: 1px solid var(--color-border, #1E2C1E);
    color: var(--color-text, #E6F4E6);
    font-family: var(--font-mono, monospace);
    border-radius: 0;
}

/* Cards / list items (snippets, scenes, search results, packs). */
.snippets-panel [class*="snippet"], .scenes-panel [class*="scene-item"],
.audition-panel [class*="result"], .pack-manager-panel [class*="pack-item"],
.preset-manager [class*="preset-item"] {
    background: var(--color-raised, #121A12);
    border: 1px solid var(--color-border, #1E2C1E);
    border-radius: 0;
}

/* Loop-builder grid keeps its cells but on tokens. */
.loop-grid [class*="cell"].active, .loop-grid [class*="cell"][data-on="1"] {
    background: var(--color-live, #22B84A);
}