/**
 * Layout CSS - Arcade Creative Suite Pro
 * Sidebar, Header, Split-pane layout styles
 */

/* ==================== BASE LAYOUT ==================== */

body {
    font-family: var(--font-family);
    background-color: var(--color-bg-primary);
    color: var(--color-text-secondary);
}

/* ==================== SIDEBAR ==================== */

#sidebar {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
    transition: width var(--transition-base), min-width var(--transition-base);
}

@media (min-width: 1024px) {
    #sidebar {
        width: var(--sidebar-width-expanded);
        min-width: var(--sidebar-width-expanded);
    }
}

/* Navigation Items */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.nav-item:hover:not(.active):not([class*="cursor-not-allowed"]) {
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
}

.nav-item.active {
    color: white;
    background-color: var(--color-accent);
    box-shadow: var(--shadow-accent);
}

.nav-item i,
.nav-item svg {
    color: inherit;
}

.nav-item.active i,
.nav-item.active svg {
    color: white;
}

/* Sidebar avatar */
#sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: white;
    flex-shrink: 0;
}

/* ==================== HEADER ==================== */

header {
    height: var(--header-height);
    min-height: var(--header-height);
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-default);
}

#page-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* Credits badge */
#header-credits {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

/* Storyboard header button */
.header-storyboard-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.header-storyboard-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.header-storyboard-btn.has-storyboard {
    color: var(--color-accent);
    background: rgba(255, 120, 20, 0.1);
}

.header-storyboard-btn.has-storyboard:hover {
    background: rgba(255, 120, 20, 0.2);
}

.storyboard-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-accent);
    color: white;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.storyboard-badge.hidden {
    display: none;
}

/* ==================== SPLIT-PANE LAYOUT ==================== */

/* Controls Panel (Left) */
#controls-panel {
    width: var(--panel-width);
    min-width: var(--panel-width);
    max-width: var(--panel-width);
    background-color: rgba(30, 41, 59, 0.5);
    border-right: 1px solid var(--color-border-default);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Collapsible Controls Panel */
#controls-panel {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#controls-panel.panel-collapsed {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
}

#controls-panel.panel-collapsed .controls-content {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.storyboard-controls {
    position: relative;
    height: 100%;
}

.controls-content {
    padding: var(--space-4) var(--space-5);
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.controls-collapse-btn {
    position: absolute;
    right: 8px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast), background var(--transition-fast);
    z-index: 10;
}

.controls-collapse-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border-color: var(--color-border-hover);
}

#controls-panel.panel-collapsed .controls-collapse-btn {
    right: 8px;
    left: auto;
}

#controls-panel.panel-collapsed .controls-collapse-btn i {
    transform: rotate(180deg);
}

/* Controls Panel Sections */
.controls-header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-default);
}

.controls-body {
    flex: 1;
    padding: var(--space-6);
    overflow-y: auto;
}

.controls-footer {
    padding: var(--space-6);
    border-top: 1px solid var(--color-border-default);
    background-color: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(10px);
    position: sticky;
    bottom: 0;
}

/* ==================== DASHBOARD TOOLBAR LAYOUT ==================== */

/* Horizontal Toolbar (replaces side panel for dashboard) */
.dashboard-toolbar {
    padding: 10px 20px;
    background: rgba(30, 41, 59, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.dashboard-toolbar .toolbar-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.dashboard-toolbar .filter-btn {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.dashboard-toolbar .filter-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.dashboard-toolbar .filter-btn:hover:not(.active) {
    border-color: rgba(255, 140, 0, 0.4);
    color: #e2e8f0;
}

.dashboard-toolbar .toolbar-control {
    padding: 6px 10px;
    background: rgba(51, 65, 85, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

.dashboard-toolbar .toolbar-toggle-group {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.dashboard-toolbar .toolbar-toggle-group button {
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    transition: all 150ms ease;
}

.dashboard-toolbar .toolbar-toggle-group button.active {
    background: rgba(255, 140, 0, 0.1);
    color: var(--color-accent);
}

.dashboard-toolbar .toolbar-toggle-group button:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-toolbar .toolbar-icon-btn {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.dashboard-toolbar .toolbar-icon-btn.active {
    background: rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.4);
    color: var(--color-accent);
}

/* Select Mode Action Bar */
.dashboard-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: rgba(255, 140, 0, 0.05);
    border-bottom: 1px solid transparent;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                padding 0.3s ease,
                border-color 0.2s ease;
}

.dashboard-action-bar.visible {
    max-height: 60px;
    opacity: 1;
    padding: 8px 20px;
    border-bottom-color: rgba(255, 140, 0, 0.15);
}

.dashboard-action-bar .action-btn {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid;
    background: transparent;
    transition: all 150ms ease;
}

.dashboard-action-bar .action-btn.storyboard {
    background: rgba(255, 140, 0, 0.1);
    border-color: rgba(255, 140, 0, 0.3);
    color: var(--color-accent);
}

.dashboard-action-bar .action-btn.danger {
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.dashboard-action-bar .action-btn.neutral {
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

/* Stats Footer */
.dashboard-stats-footer {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.dashboard-stats-footer > div {
    flex: 1;
    padding: 8px 16px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.dashboard-stats-footer > div:last-child {
    border-right: none;
}

.dashboard-stats-footer .stat-label {
    font-size: 10px;
    color: #64748b;
}

.dashboard-stats-footer .stat-value {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
    margin-left: 4px;
}

/* Preview Panel (Right) */
#preview-panel {
    flex: 1;
    min-width: 0;
    background: radial-gradient(ellipse at top right, var(--color-bg-secondary), var(--color-bg-primary), #000);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

/* The shell's own stage surfaces (loading skeleton, honest load-failure state) sit centered in
   the stage, the same way the per-tab empty states below do. Scoped to the shell's class so it
   can never catch a tab's own markup. */
.scs-stage-state {
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
    max-width: 48rem;
}

/* Center standalone empty states vertically in preview panel.
   `#image-preview-canvas`, `#image-empty-state`, `#image-error-state` and `#image-result-grid` are
   gone with the Image Gen migration — StateSurface owns the empty/error panes and TakeGrid owns the
   results, neither of which uses a shipped id. The four ids below still exist in their tabs. */
#angles-empty-state,
#journey-empty-state,
#prompt-empty-state,
#director-empty-state {
    margin-top: auto;
    margin-bottom: auto;
}

/* Preview Canvas Centering
   w-full (width:100%!important) was removed from HTML so that
   margin:auto + flex align-items:center can properly center these.
   Plain width:100% (no !important) lets max-width + margin-auto work. */
#video-preview-canvas,
#edit-preview-canvas {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Preview Canvas Area */
.preview-canvas {
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.preview-canvas img,
.preview-canvas video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* History Strip */
#history-strip {
    position: absolute;
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
}

.history-item {
    width: 128px;
    height: 80px;
    flex-shrink: 0;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-default);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.history-item:hover {
    border-color: var(--color-accent);
    transform: scale(1.02);
}

.history-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.history-item:hover img {
    opacity: 1;
}

.history-item .duration {
    position: absolute;
    bottom: var(--space-1);
    right: var(--space-1);
    background-color: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    color: white;
}

/* ==================== CONSOLE DECK (SCS / Video Village) ==================== *\
   The two-row command deck that replaces the 400px control column on `scs: true` tabs
   (V1 spec §3.2). Structure is owned by scs/console-dock.js; this file owns where it sits.

   POSITION: FIXED, not a flex child. Three reasons, in order of how much they'd hurt:
     1. While no SCS tab is mounted the container is `.hidden` and contributes NOTHING to the
        workspace flex row — so all 16 V1 tabs lay out byte-identically to before it existed.
     2. The deck floats OVER the stage rather than reflowing it; `--console-clearance` on the
        stage is what keeps media clear of it (and what FloatingPanel's snap corners offset by).
     3. A fixed child of #preview-panel would be captured by any transform/filter the stage ever
        grows — the classic silently-mispositioned-overlay bug. It is a sibling instead.
   The `left` offsets mirror the sidebar's Tailwind widths (w-20 / lg:w-64 → the two tokens) and
   its off-canvas behavior below 768px, because the deck spans the STAGE, not the viewport.
\* =========================================================================== */

#console-dock {
    position: fixed;
    left: var(--sidebar-width-collapsed);
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    /* A COLUMN, and the direction is load-bearing (P2 CRIT-1). This container holds up to three
       peers — an extension sheet, the deck, and the restore pill — and they are a STACK, not a
       row. Under the default `row` the sheet and the deck became two flex items competing for the
       same line: measured in Chromium at 1440, opening a sheet put it BESIDE the deck (sheet
       x=272 w=560, deck x=832 w=592) and squeezed the deck from 1052px to 592px, reflowing every
       chip on it. `.scs-sheet`'s own geometry — `margin-bottom` for the gap above the deck, the
       shared `max-width`, "it rises from the deck" — was all written for this column and silently
       meant nothing without it. jsdom loads no stylesheets, so nothing in the suite could see it;
       the file-level pin next to `.scs-sheet` exists because of that. */
    flex-direction: column;
    align-items: center;
    /* Vertical now (the axis flipped with the direction). Inert while the height is auto, and the
       honest value if this container is ever given one: the stack is bottom-docked. */
    justify-content: flex-end;
    padding: 0 var(--space-4) var(--space-4);
    /* The container spans the stage so the deck can center in it; only the deck itself is a
       click target, or an invisible strip would eat clicks on the media behind it. */
    pointer-events: none;
}

#console-dock > * {
    pointer-events: auto;
}

.scs-console {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    max-width: 1120px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    /* Restore side: `visibility` flips back INSTANTLY (0s delay) so the deck is on screen for the
       whole slide-in. The delayed half lives on --minimized below — see the note there. */
    visibility: visible;
    transition: transform var(--motion-gentle) var(--ease-out),
                opacity var(--motion-base) var(--ease-out),
                visibility 0s linear 0s;
}

.scs-console-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.scs-console-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

/* Row A is the take (well · prompt · CTA): 44px is the well thumbnail size.

   THE GUTTER IS LOAD-BEARING, not padding taste. The minimize button is absolutely positioned in
   the deck's top-right corner (`right: 8px`, `width: 24px`), so it occupies the 32px nearest the
   deck's right edge — while the deck's own padding only holds 16px of that back, leaving Row A's
   last control (the CTA, i.e. the PAID action) overlapping the chrome by ~16×14px.

   Measured consequence, live at 1280/1440/1920: `elementFromPoint` at the minimize button's centre
   returned `#generateVideoBtn`, so the button was mouse-unreachable except for a ~10px top strip
   and ⌘. was the only way to minimize. The cause is state-dependent, which is why no static read
   found it: `.scs-btn:disabled` sets `opacity: .45`, an opacity < 1 CREATES A STACKING CONTEXT,
   and that context paints above a `z-index: auto` positioned sibling. With a prompt typed (CTA
   enabled, opacity 1) the same probe returned the button's own icon.

   The fix is geometric, not a stacking fight: give the chrome its own gutter so the two targets do
   not overlap in ANY state. A z-index on the button would have restored the minimize target while
   leaving the mirror hazard — a click aimed at the CTA's top-right corner minimizing the deck.
   20px = the 32px the chrome occupies, minus the 16px the deck's padding already provides, plus
   ~5px of clearance. `scs-console-chrome-gutter.test.js` recomputes that from the file. */
.scs-console-row--a { min-height: 44px; padding-right: var(--space-5); }
/* Row B is the quiet settings rail; it wraps rather than overflowing on narrow laptops. */
.scs-console-row--b { min-height: 32px; flex-wrap: wrap; }

.scs-console-minimize {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out);
}

.scs-console-minimize i,
.scs-console-minimize svg { width: 14px; height: 14px; }
.scs-console-minimize:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.scs-console-minimize:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Minimized: the deck steps aside for pure review, leaving ONE always-reachable way back.
   `pointer-events: none` stops the MOUSE, but a translated, fully transparent deck is still in the
   tab order — so Tab used to walk the user through every control of an `aria-hidden="true"`
   surface parked off-screen. Same fix as the rack (#rack-drawer below): `visibility: hidden`
   removes it from the tab order, and the flip is DELAYED by the slide duration so the slide-out
   still plays instead of the deck vanishing on the first frame. (`inert` is set alongside it in
   console-dock.js — belt and braces, and the only half a jsdom test can observe.) */
.scs-console--minimized {
    transform: translateY(calc(100% + var(--space-4)));
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform var(--motion-gentle) var(--ease-out),
                opacity var(--motion-base) var(--ease-out),
                visibility 0s linear var(--motion-gentle);
}

.scs-console-pill {
    display: none;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    /* CENTER, not `flex-end` — the rider on the column flip above (P2 CRIT-1). `flex-end` meant
       BOTTOM while this container was a row, which was the whole intent; the horizontal position
       was incidental. In a column it means RIGHT EDGE, which measured as the pill jumping to the
       far right of the stage while the deck it restores sits centred. Bottom is now structural
       (the pill is the last item in a bottom-docked column), so the only thing left to say is
       where it sits across — under the deck it replaces. */
    align-self: center;
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
}

.scs-console-pill i,
.scs-console-pill svg { width: 14px; height: 14px; }
.scs-console-pill--visible { display: inline-flex; }
.scs-console-pill:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }
.scs-console-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The deck's own popovers open UPWARD from a bottom-anchored surface. */
.scs-console-popover { min-width: 220px; }

/* Stage clearance. `!important` is required, not decorative: #preview-panel carries Tailwind
   `p-6 lg:p-8`, and `important: true` emits those as `padding: 1.5rem !important`. Winning needs
   both the flag and the higher specificity of `#id.class`. */
#preview-panel.scs-stage {
    padding-bottom: var(--console-clearance) !important;
}

/* A MINIMIZED deck reserves only its restore pill (P2 R22).
   The token is redefined on the ROOT rather than a new rule being written per consumer, so every
   surface that already reads `--console-clearance` — the stage padding above, the Viewer's bottom
   (components.css), the FloatingPanel pill, and `floating-panel.js`'s own
   `getComputedStyle(document.documentElement)` read — collapses together and cannot drift apart.
   `:root.class` is (0,2,0) against the token block's (0,1,0), so it wins without !important.
   `console-dock.js` owns the flag and removes it in `destroy()`. */
:root.scs-console-layout--minimized {
    --console-clearance: var(--console-clearance-minimized);
}

/* ==================== RACK (SCS right drawer) ==================== *\
   360px slide-over for progressive-disclosure settings (V1 spec §3.3). It NEVER reflows the
   stage — opening it while results are on screen must not move the media — so it is fixed and
   transform-slid, over the deck but UNDER popovers and modals
   (--z-sticky 200 < --z-drawer 220 < --z-popover 250 < --z-overlay 300 < --z-modal 400).
   Its own token, not --z-overlay: a popover anchored to a rack control is portaled to <body>
   at --z-popover, so a rack in the overlay band painted straight over the menu it opened.
   `visibility` is transitioned with a delay rather than toggled instantly so the closed drawer
   drops out of the tab order (a transform alone leaves its controls focusable off-screen) while
   the slide-out animation still plays.
\* ================================================================= */

#rack-drawer {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    width: var(--rack-width);
    max-width: 100%;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--motion-gentle) var(--ease-out),
                visibility 0s linear var(--motion-gentle);
}

#rack-drawer.scs-rack-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--motion-gentle) var(--ease-out),
                visibility 0s linear 0s;
}

.scs-rack {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-bg-secondary);
    border-left: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-xl);
}

.scs-rack-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
}

.scs-rack-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.scs-rack-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out),
                color var(--motion-fast) var(--ease-out);
}

.scs-rack-close i,
.scs-rack-close svg { width: 16px; height: 16px; }
.scs-rack-close:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.scs-rack-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.scs-rack-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-2) var(--space-3) var(--space-6);
}

.scs-rack-section {
    border-bottom: 1px solid var(--color-border-subtle);
}

.scs-rack-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-1);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color var(--motion-fast) var(--ease-out);
}

.scs-rack-section-head:hover { color: var(--color-text-primary); }
.scs-rack-section-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scs-rack-section-label { flex: 1; min-width: 0; }

/* "The check invites opening" — a configured section says so from the closed state. */
.scs-rack-section-check[data-scs-configured="1"] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-success);
    flex-shrink: 0;
}

.scs-rack-section-caret {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--motion-fast) var(--ease-out);
}

.scs-rack-section--open .scs-rack-section-caret { transform: rotate(180deg); }

.scs-rack-section-body {
    padding: 0 var(--space-1) var(--space-4);
}

/* The Rack toggle chip in the deck carries a dot whenever anything inside is non-default —
   configuration must never be invisible from outside the drawer that holds it. */
[data-scs-badge] {
    position: relative;
}

[data-scs-badge]::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--accent);
}

@media (min-width: 1024px) {
    #console-dock { left: var(--sidebar-width-expanded); }
}

@media (prefers-reduced-motion: reduce) {
    #rack-drawer,
    #rack-drawer.scs-rack-open { transition: transform 0s, visibility 0s; }
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    #controls-panel {
        width: var(--panel-width-sm);
        min-width: var(--panel-width-sm);
        max-width: var(--panel-width-sm);
    }

    .controls-body {
        padding: var(--space-4);
    }

    .controls-footer {
        padding: var(--space-4);
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    /* Stack layout vertically */
    #app-container > main > div:last-child {
        flex-direction: column;
    }

    #sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        z-index: var(--z-overlay);
        width: var(--sidebar-width-expanded);
        transition: left var(--transition-base);
    }

    #sidebar.open {
        left: 0;
    }

    #controls-panel {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        max-height: 50vh;
        border-right: none;
        border-bottom: 1px solid var(--color-border-default);
    }

    #preview-panel {
        min-height: 50vh;
        padding: var(--space-4);
    }

    .preview-canvas {
        max-width: 100%;
    }

    #history-strip {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin-top: var(--space-4);
    }

    /* The sidebar is off-canvas here, so the stage — and therefore the deck — spans the
       full viewport. The rack takes the whole width; a 360px drawer on a 375px screen is a
       modal pretending to be a drawer. */
    #console-dock {
        left: 0;
        padding: 0 var(--space-2) var(--space-2);
    }

    #rack-drawer {
        width: 100%;
        top: 0;
    }
}

/* ==================== SCROLLBAR CUSTOMIZATION ==================== */

#controls-panel::-webkit-scrollbar {
    width: 6px;
}

#controls-panel::-webkit-scrollbar-track {
    background: transparent;
}

#controls-panel::-webkit-scrollbar-thumb {
    background: var(--color-bg-tertiary);
    border-radius: 3px;
}

#controls-panel::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-disabled);
}