/* The Develop Bench — editor-specific layout. Flat, tokens only. */

.dk-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .dk-editor { grid-template-columns: 1fr; }
}

.dk-editor__canvas-wrap { position: relative; }

.dk-editor__overlay {
    position: absolute;
    inset: 0.75rem;
    width: calc(100% - 1.5rem);
    height: calc(100% - 1.5rem);
    pointer-events: none;
}

.dk-editor__overlay.is-cropping { pointer-events: auto; cursor: move; }

.dk-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.875rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: 0.5rem;
}

.dk-editor__side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dk-editor__group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.875rem;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: 0.5rem;
}

/* Auto-enhance is the bench's hero action — full width of its group,
   Reset drops to a secondary line beneath it. */
.dk-editor__auto { flex: 1 1 100%; }

.dk-editor__sliders {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: 0.5rem;
}

.dk-editor__slider { display: block; }

/* Instrument channel: uppercase micro label left, mono value right. */
.dk-editor__slider .dk-panel__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

.dk-editor__slider .dk-panel__label output {
    margin-left: 0;
    color: var(--pt-text-muted);
}

/* A moved channel lights amber — the JS toggles .is-active when the value
   leaves zero (see editor.js syncSliders / input handler). */
.dk-editor__slider .dk-panel__label output.is-active,
#dk-ed-straighten-value.is-active {
    color: var(--pt-accent);
}

.dk-editor__luts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.dk-editor__luts-empty {
    font-size: 0.75rem;
    color: var(--pt-text-muted);
}

.dk-lut-chip {
    display: block;
    padding: 0;
    border: 2px solid var(--pt-border-strong);
    border-radius: 0.375rem;
    background: var(--pt-chrome-bg);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--pt-dur) var(--pt-ease);
}

.dk-lut-chip:hover { border-color: var(--pt-text-muted); }
.dk-lut-chip:focus-visible { outline: none; border-color: var(--pt-accent); }
.dk-lut-chip.is-active { border-color: var(--pt-accent); }
.dk-lut-chip[disabled] { opacity: 0.4; cursor: not-allowed; }

.dk-lut-chip canvas { display: block; width: 100%; height: 44px; }

.dk-lut-chip__name {
    display: block;
    padding: 0.25rem 0.25rem 0.3125rem;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pt-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dk-editor__export { margin-top: 0; }

/* Straighten channel: a centered zero-tick sits behind the range so the
   thumb reads against a true-level reference. Flat 1px marker, no gradient. */
.dk-range-tick { position: relative; }

.dk-range-tick::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 14px;
    transform: translate(-50%, -50%);
    background: var(--pt-border-strong);
    pointer-events: none;
    z-index: 0;
}

.dk-range-tick .dk-range { position: relative; z-index: 1; }

/* --- Mobile: single column, comfortable channels ------------------------- */
@media (max-width: 560px) {
    .dk-editor { gap: 0.75rem; }

    .dk-editor__toolbar {
        gap: 0.625rem;
        padding: 0.75rem;
    }

    /* Straighten spans its own row so the tick and thumb have room. */
    .dk-editor__toolbar .dk-panel__group--grow { flex: 1 1 100%; }

    .dk-editor__toolbar > .dk-btn { flex: 1 1 auto; }

    .dk-editor__sliders { gap: 0.75rem; }

    .dk-editor__luts { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}