/*
 * Shader Lab — only what's specific to this tool.
 * Window, menus, toolbar, panels, tab strip, sliders, readouts, rows,
 * status bar and taskbar come from ../../shared-studio.css.
 */

html, body { height: 100%; overflow: hidden; }

#win-main { min-width: 0; min-height: 0; border: none; box-shadow: none; }

/* ─── Layout: layers | canvas | inspector, chain underneath ─ */

.sl-body {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 280px;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 4px; padding: 4px;
}
.sl-left, .sl-right { min-height: 0; overflow: hidden; }
.sl-left { overflow-y: auto; }

.sl-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
#canvas.sl-fit { object-fit: contain; }   /* exporting at a different shape */
.sl-steer #canvas { cursor: move; }

/* ─── Left: layers + settings ───────────────────────────── */

.sl-layer-btns { display: flex; gap: 2px; }
.sl-layer-btns .s-btn { min-width: 0; padding: 0 5px; line-height: 14px; }

.sl-layers { margin: 4px; min-height: 66px; max-height: 180px; overflow-y: auto; }
.sl-layer-row { gap: 6px; }
.sl-layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.sl-layer-blend { font-size: 9px; opacity: 0.6; }
.sl-has-err .sl-layer-name::after { content: ' ✕'; color: #ff5050; }
.sl-eye {
    width: 16px; padding: 0; border: none; background: none; cursor: pointer;
    font: 11px var(--s-mono); color: inherit;
}

.sl-group { display: flex; flex-direction: column; gap: 7px; padding: 7px 8px 10px; }
.sl-group.sl-off { opacity: 0.45; }
.sl-indent { margin-left: 70px; margin-top: -3px; }
.sl-section-check { font-weight: normal; letter-spacing: 0; }
.sl-section-check input[type="checkbox"] { width: 11px; height: 11px; }

.sl-field { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 6px; }
.sl-field > span { font-size: 11px; }
.sl-color {
    width: 100%; height: 22px; padding: 1px; cursor: pointer;
    background: var(--s-field); border: 2px solid; border-color: var(--s-sunken);
}

.sl-param { display: flex; flex-direction: column; gap: 2px; }
.sl-param-head { display: flex; align-items: center; gap: 4px; }
.sl-param-name { flex: 1; }

/* ƒ: swap a slider for a typed expression */
.sl-fx {
    width: 16px; height: 15px; padding: 0; cursor: pointer;
    font: italic bold 11px/11px Georgia, serif; color: var(--s-text);
    background: var(--s-face); border: 2px solid; border-color: var(--s-raised-soft);
}
.sl-fx.on { color: var(--s-on-phosphor); background: var(--s-phosphor); border-color: var(--s-sunken); }
.sl-expr { display: none; font: 11px var(--s-mono); }
.sl-expr.bad { color: var(--s-danger); }
.sl-expr-on .s-slider { display: none; }
.sl-expr-on .sl-expr { display: block; }
.sl-expr-on .s-readout { opacity: 0.35; }

/* ~ modulator */
.sl-lfo { font: bold 12px/9px var(--s-mono); }
.sl-mod { display: flex; flex-direction: column; gap: 4px; margin: 3px 0 2px 10px; padding-left: 8px; border-left: 2px solid var(--s-phosphor); }
.sl-mod:empty { display: none; }
.sl-mod .sl-field { grid-template-columns: 54px minmax(0, 1fr); }
.sl-mod .sl-param-name { font-size: 10px; }

/* ─── Export window ─────────────────────────────────────── */

.sl-export { overflow-y: auto; }
.sl-btn-row { flex-direction: row; flex-wrap: wrap; }
.sl-rec { display: flex; align-items: center; gap: 6px; }
.sl-meter {
    flex: 1; height: 16px; padding: 2px;
    background: var(--s-ink); border: 2px solid; border-color: var(--s-sunken);
}
.sl-meter > span { display: block; width: 0; height: 100%; background: var(--s-phosphor); }
.sl-rec-time { min-width: 72px; font: 10px var(--s-mono); text-align: right; }
#recBtn.on { color: var(--s-danger); }

/* ─── Right: inspector + code peek ──────────────────────── */

.sl-tab { display: none; flex: 1; min-height: 0; overflow-y: auto; }
.sl-tab.active { display: flex; flex-direction: column; }

.sl-insp { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.sl-info { margin: 0; font-size: 10px; color: var(--s-dark); }
.sl-actions { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.sl-tip {
    padding: 5px 6px;
    font: 10px/1.5 var(--s-mono); color: var(--s-ink-dim);
    background: var(--s-ink); border: 1px solid; border-color: var(--s-sunken);
}
.sl-sig { font: 10px var(--s-mono); color: var(--s-dark); }
.sl-codeedit {
    min-height: 140px; resize: vertical;
    font: 11px/1.5 var(--s-mono); white-space: pre; tab-size: 2;
    color: var(--s-ink-text); background: var(--s-ink);
}
.sl-err { font: 10px var(--s-mono); color: var(--s-danger); white-space: pre-wrap; }
.sl-err:empty { display: none; }

.sl-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; font-size: 10px; }
.sl-code {
    flex: 1; min-height: 0; margin: 0 4px 4px; padding: 6px 8px; overflow: auto;
    font: 10px/1.55 var(--s-mono); white-space: pre; user-select: text;
}
.sl-code .sl-dim { color: var(--s-ink-dim); }
.sl-code .sl-hl { display: inline-block; min-width: 100%; color: var(--s-on-phosphor); background: var(--s-phosphor); }
.sl-code .sl-hl .sl-dim { color: inherit; opacity: 0.6; }
.sl-code .sl-errline { display: inline-block; min-width: 100%; background: #5a0000; color: #fff; }

/* ─── Bottom: the chain ─────────────────────────────────── */

.sl-chain {
    grid-column: 1 / -1;
    display: flex; align-items: stretch; gap: 4px;
    padding: 4px; overflow-x: auto;
    background: var(--s-face); border: 1px solid; border-color: var(--s-sunken);
}
.sl-chain-empty { flex: 1; }

.sl-lane { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.sl-lane-head { display: flex; align-items: baseline; gap: 6px; padding: 0 2px; font-size: 10px; }
.sl-lane-head b { letter-spacing: 0.5px; text-transform: uppercase; font-size: 9px; }
.sl-lane-head span { color: var(--s-lo); font-size: 9px; }
.sl-lane-row {
    display: flex; align-items: center; gap: 3px; min-height: 84px; padding: 3px;
    background: var(--s-ink); border: 2px solid; border-color: var(--s-sunken);
}
.sl-arrow { align-self: center; margin-top: 14px; font: 14px var(--s-mono); color: var(--s-lo); }

.sl-chip {
    position: relative; display: flex; flex-direction: column; flex-shrink: 0;
    width: 100px; padding: 2px; cursor: pointer; outline: none;
    background: var(--s-ink-2); border: 1px solid var(--s-ink-line);
}
.sl-chip:hover { border-color: var(--s-ink-dim); }
.sl-chip.sel { border-color: var(--s-phosphor); box-shadow: 0 0 0 1px var(--s-phosphor); }
.sl-chip:focus-visible { outline: 1px dotted var(--s-phosphor); outline-offset: 2px; }
.sl-chip.err { border-color: #ff5050; box-shadow: 0 0 0 1px #ff5050; }
.sl-thumb { display: block; width: 96px; height: 60px; background: #000; image-rendering: auto; }
.sl-chip-label {
    padding: 2px 1px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 10px var(--s-mono); color: var(--s-ink-text);
}
.sl-chip.sel .sl-chip-label { color: var(--s-phosphor); }
.sl-chip-x {
    position: absolute; top: 3px; right: 3px; display: none;
    width: 15px; height: 15px; padding: 0; cursor: pointer;
    font: 11px/11px var(--s-mono); color: #fff;
    background: rgba(0, 0, 0, 0.7); border: 1px solid var(--s-ink-dim);
}
.sl-chip:hover .sl-chip-x { display: block; }

.sl-op { min-width: 0; width: 24px; height: 24px; padding: 0; font: bold 13px var(--s-mono); flex-shrink: 0; }
.sl-add { min-width: 0; width: 24px; height: 60px; padding: 0; font-size: 14px; flex-shrink: 0; }

/* ─── Add-block popup ───────────────────────────────────── */

.sl-pop {
    position: fixed; z-index: 1000; display: none; flex-direction: column;
    width: 380px; max-height: 70vh;
    background: var(--s-face);
    border: 2px solid; border-color: var(--s-raised);
    box-shadow: var(--s-drop);
}
.sl-add-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 5px 6px; font-size: 10px; }
.sl-add-ops span { margin-right: 4px; }
.sl-add-ops .s-btn { min-width: 0; padding: 1px 6px; font-family: var(--s-mono); }
.sl-add-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
    margin: 4px; padding: 3px; overflow-y: auto;
    background: var(--s-ink); border: 2px solid; border-color: var(--s-sunken);
}
.sl-add-tile {
    display: flex; flex-direction: column; gap: 2px; padding: 2px; cursor: pointer;
    background: var(--s-ink-2); border: 1px solid var(--s-ink-line);
    font: 9px var(--s-mono); color: var(--s-ink-text); text-align: left;
}
.sl-add-tile:hover { border-color: var(--s-phosphor); color: var(--s-phosphor); }
.sl-add-tile img { display: block; width: 100%; aspect-ratio: 8 / 5; background: #000; }
.sl-add-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Mutate window ─────────────────────────────────────── */

.sl-mutate { display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.sl-mutate-grid {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px;
    padding: 4px; background: var(--s-ink); border: 2px solid; border-color: var(--s-sunken);
}
.sl-variant { position: relative; min-height: 0; padding: 0; cursor: pointer; background: #000; border: 1px solid var(--s-ink-line); }
.sl-variant:hover { border-color: var(--s-phosphor); }
.sl-variant canvas { display: block; width: 100%; height: 100%; }
.sl-variant-cur { cursor: default; border-color: var(--s-ink-dim); }
.sl-variant-cur::after {
    content: 'current'; position: absolute; left: 4px; top: 3px;
    font: 9px var(--s-mono); color: var(--s-phosphor);
}
.sl-mutate-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; }

/* ─── Small screens: stack everything, page scrolls ─────── */

@media (max-width: 900px) {
    html, body { overflow: auto; }
    #win-main .s-win-controls { display: none; }
    /* The window scrolls; the body keeps its natural height. */
    #win-main { overflow-y: auto; overflow-x: hidden; }
    .sl-body { flex: none; grid-template-columns: 1fr; grid-template-rows: 46vh auto auto auto; }
    .sl-chain { flex-wrap: nowrap; min-height: 120px; }
    .sl-left { overflow: visible; }
    .sl-stage { order: 0; }
    .sl-chain { order: 1; }
    .sl-right { order: 2; min-height: 320px; }
    .sl-left { order: 3; }
    .sl-pop { width: calc(100vw - 16px); }
}

/* ─── Phones: canvas on top, one panel at a time below ──── */
/* Tab bar, sheet and finger-sized controls come from shared-studio.css.
   Comes after the 900px rules above so it wins on phones. */

@media (max-width: 768px) {
    html, body { overflow: hidden; }
    #win-main { overflow: hidden; }
    .sl-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; gap: 0; }
    .sl-stage { flex: 1; min-height: 0; border: none; touch-action: none; }

    .sl-phone-sheet .sl-left, .sl-phone-sheet .sl-right { border: none; overflow: visible; min-height: 0; }
    .sl-phone-sheet .sl-tab { display: flex; flex-direction: column; flex: none; overflow: visible; }
    .sl-phone-sheet .sl-chain { margin: 0; border-left: none; border-right: none; overflow-x: auto; }
    .sl-layers { max-height: none; }
    .sl-layer-btns .s-btn { min-width: 36px; min-height: 32px; }
    .sl-eye { width: 32px; height: 32px; font-size: 14px; }
    .sl-field { grid-template-columns: 84px minmax(0, 1fr); }
    .sl-field > span { font-size: 13px; }
    .sl-color { height: 40px; }
    .sl-code { max-height: 50vh; }

    /* The toolbar, moved into the Tools tab: a grid of real buttons. */
    .sl-phone-sheet > .s-toolbar {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
        padding: 8px 10px 10px; border: none; background: none;
    }
    .sl-phone-sheet > .s-toolbar .s-tool-sep, .sl-phone-sheet > .s-toolbar .s-tool-spacer { display: none; }
    .sl-phone-sheet > .s-toolbar .s-tool-btn {
        min-height: 40px; justify-content: center; font-size: 13px;
        background: var(--s-face); border: 2px solid; border-color: var(--s-raised);
    }
    .sl-phone-sheet > .s-toolbar .s-tool-btn.on { border-color: var(--s-sunken); background: var(--s-face-down); }
    .sl-phone-sheet > .s-toolbar #helpBtn { display: none; }

    .sl-quick {
        display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
        padding: 6px 8px; border-bottom: 1px solid #b0b0b0;
    }
    .sl-quick .s-btn { min-height: 40px; padding: 2px 0; font-size: 12px; white-space: normal; line-height: 1.1; }
}