/**
 * Selection Studio — Base Variables & Layout Shell
 * Location: /studio/css/variables.css
 */

:root {
    /* Canonical surfaces */
    --color-bg-canvas: #0b1116;
    --color-bg-panel: #121a21;
    --color-bg-elevated: #121a21;
    --color-bg-input: #121f2d;

    /* Canonical text */
    --color-text-primary: rgba(255, 255, 255, 0.92);
    --color-text-secondary: rgba(255, 255, 255, 0.62);
    --color-text-muted: rgba(255, 255, 255, 0.40);

    /* Canonical borders */
    --color-border-subtle: rgba(255, 255, 255, 0.06);
    --color-border-default: rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    /* Accent */
    --color-accent: #d4b483;
    --color-accent-soft: rgba(212, 180, 131, 0.10);
    --color-accent-border: rgba(212, 180, 131, 0.28);

    /* States */
    --color-success: #48a868;
    --color-danger: #ff6961;
    --color-focus: #2775ff;

    /* Canonical typography */
    --studio-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --studio-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --studio-font-weight-regular: 400;
    --studio-font-weight-medium: 500;
    --studio-font-weight-strong: 600;
    --studio-font-weight-label: 700;

    --studio-type-display-xl-size: clamp(34px, 5vw, 52px);
    --studio-type-display-xl-line-height: 1.08;
    --studio-type-display-xl-letter-spacing: -0.045em;

    --studio-type-display-size: clamp(24px, 3vw, 32px);
    --studio-type-display-line-height: 1.2;
    --studio-type-display-letter-spacing: -0.035em;

    --studio-type-dialog-title-size: clamp(22px, 3vw, 26px);
    --studio-type-dialog-title-line-height: 1.2;
    --studio-type-dialog-title-letter-spacing: -0.03em;

    --studio-type-panel-title-size: 18px;
    --studio-type-panel-title-line-height: 1.3;

    --studio-type-card-title-size: 14px;
    --studio-type-card-title-line-height: 1.35;

    --studio-type-body-size: 14px;
    --studio-type-body-line-height: 1.55;

    --studio-type-body-compact-size: 13px;
    --studio-type-body-compact-line-height: 1.55;

    --studio-type-ui-label-size: 13px;
    --studio-type-ui-label-line-height: 1.3;

    --studio-type-field-label-size: 12px;
    --studio-type-field-label-line-height: 1.35;
    --studio-type-field-label-letter-spacing: 0.04em;

    --studio-type-meta-size: 11px;
    --studio-type-meta-line-height: 1.4;

    --studio-type-eyebrow-size: 10px;
    --studio-type-eyebrow-line-height: 1.3;
    --studio-type-eyebrow-letter-spacing: 0.1em;

    --studio-type-status-size: 9px;
    --studio-type-status-line-height: 1.3;
    --studio-type-status-letter-spacing: 0.05em;

    --studio-type-mono-meta-size: 10px;
    --studio-type-mono-meta-line-height: 1.3;
    --studio-type-mono-meta-letter-spacing: 0.03em;

    /* Semantic text colors */
    --studio-text-primary: var(--color-text-primary);
    --studio-text-secondary: var(--color-text-secondary);
    --studio-text-muted: var(--color-text-muted);
    --studio-text-accent: var(--color-accent);
    --studio-text-danger: var(--color-danger);
    --studio-text-success: var(--color-success);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Radius */
    --radius-small: 6px;
    --radius-medium: 10px;
    --radius-large: 16px;
    --radius-pill: 999px;

    /* Motion */
    --motion-fast: 120ms;
    --motion-normal: 160ms;
    --motion-slow: 240ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Elevation */
    --shadow-small: 0 8px 24px rgba(0, 0, 0, 0.22);
    --shadow-medium: 0 16px 40px rgba(0, 0, 0, 0.32);
    --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.46);

    /* Compatibility aliases — existing Studio remains stable */
    --bg-dark: var(--color-bg-canvas);
    --bg-workspace: var(--color-bg-elevated);
    --bg-panel: var(--color-bg-panel);
    --bg-input: var(--color-bg-input);
    --border: var(--color-border-subtle);
    --text-main: var(--color-text-primary);
    --muted: var(--color-text-muted);
    --gold: var(--color-accent);
    --accent-blue: var(--color-focus);
    --font-sans: var(--studio-font-sans);
    --font-mono: var(--studio-font-mono);
    --studio-text-main: var(--studio-text-primary);
    --studio-text-dim: var(--studio-text-muted);
    --studio-gold: var(--studio-text-accent);

    /* Studio Workspace Geometry */
    --studio-workspace-column: 20%;
    --studio-canvas-column: 80%;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--studio-font-sans);
    background: var(--bg-dark);
    color: var(--studio-text-primary);
    -webkit-font-smoothing: antialiased;
}

#studio-shell {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- STUDIO WORKSPACE GEOMETRY V1 --- */
.studio-grid {
    display: grid;
    grid-template-columns: var(--studio-workspace-column) var(--studio-canvas-column);
    height: calc(100vh - 52px);
    width: 100%;
}

.panel-shared {
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--bg-panel);
}

/* Selection-owned internal application scroll surfaces. */
:where(
    .panel-shared,
    .capsule-resident-shell__content,
    .publish-workflow-body,
    .page-manager-body,
    .experience-manager-body,
    .page-switcher-body,
    .capsule-picker-body,
    .studio-hub,
    .hub-experience-list,
    .timeline-capsule-scroll-region,
    .explorer-tree,
    .selection-data-responses__body,
    .custom-html-assist [data-assist-content]
) {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

:where(
    .panel-shared,
    .capsule-resident-shell__content,
    .publish-workflow-body,
    .page-manager-body,
    .experience-manager-body,
    .page-switcher-body,
    .capsule-picker-body,
    .studio-hub,
    .hub-experience-list,
    .timeline-capsule-scroll-region,
    .explorer-tree,
    .selection-data-responses__body,
    .custom-html-assist [data-assist-content]
)::-webkit-scrollbar { width: 8px; }

:where(
    .panel-shared,
    .capsule-resident-shell__content,
    .publish-workflow-body,
    .page-manager-body,
    .experience-manager-body,
    .page-switcher-body,
    .capsule-picker-body,
    .studio-hub,
    .hub-experience-list,
    .timeline-capsule-scroll-region,
    .explorer-tree,
    .selection-data-responses__body,
    .custom-html-assist [data-assist-content]
)::-webkit-scrollbar-track { background: transparent; }

:where(
    .panel-shared,
    .capsule-resident-shell__content,
    .publish-workflow-body,
    .page-manager-body,
    .experience-manager-body,
    .page-switcher-body,
    .capsule-picker-body,
    .studio-hub,
    .hub-experience-list,
    .timeline-capsule-scroll-region,
    .explorer-tree,
    .selection-data-responses__body,
    .custom-html-assist [data-assist-content]
)::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

:where(
    .panel-shared,
    .capsule-resident-shell__content,
    .publish-workflow-body,
    .page-manager-body,
    .experience-manager-body,
    .page-switcher-body,
    .capsule-picker-body,
    .studio-hub,
    .hub-experience-list,
    .timeline-capsule-scroll-region,
    .explorer-tree,
    .selection-data-responses__body,
    .custom-html-assist [data-assist-content]
)::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .3); }

@media (forced-colors: active) {
    :where(
        .panel-shared,
        .capsule-resident-shell__content,
        .publish-workflow-body,
        .page-manager-body,
        .experience-manager-body,
        .page-switcher-body,
        .capsule-picker-body,
        .studio-hub,
        .hub-experience-list,
        .timeline-capsule-scroll-region,
        .explorer-tree,
        .selection-data-responses__body,
        .custom-html-assist [data-assist-content]
    ) { scrollbar-color: auto; }
}

.simulator-panel {
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    padding: 0 !important;
}

.simulator-view-box {
    flex: 1;
    width: 100%;
    background: #000;
    margin: 0;
    padding: 0;
}

/* Preview is a shell-only projection of the already-mounted Runtime iframe. */
.studio-grid--preview-mobile .simulator-panel {
    align-items: center;
}

.studio-grid--preview-mobile .simulator-view-box {
    width: min(390px, 100%);
    margin-inline: auto;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    display: block;
}

.studio-grid>.timeline-panel,
.studio-grid>.workspace-panel {
    grid-column: 1;
}

.studio-grid>.simulator-panel {
    grid-column: 2;
    min-width: 0;
}

/* Normal compose mode: Timeline occupies the shared workspace column. */
.studio-grid>.workspace-panel {
    display: none;
}

/* Resident mode reuses the exact workspace column; Canvas never changes column. */
.studio-grid--resident {
    grid-template-columns: var(--studio-workspace-column) var(--studio-canvas-column);
}

.studio-grid--resident .timeline-panel {
    display: none;
}

/* The resident is the active occupant of the same left workspace column. */
.studio-grid--resident>.workspace-panel {
    display: flex;
    overflow: hidden;
}

@media (max-width: 1199px) {
    :root {
        --studio-workspace-column: 50%;
        --studio-canvas-column: 50%;
    }
}

/* Mobile S1: one mounted shell projects Timeline or one focused surface. */
@media (max-width: 700px) {
    #studio-shell {
        --topbar-height: 60px;
        height: 100vh;
    }

    .studio-grid,
    .studio-grid--resident,
    .studio-grid--visual-surface {
        display: block;
        grid-template-columns: 1fr;
        height: calc(100vh - var(--topbar-height));
    }

    .studio-grid > .timeline-panel,
    .studio-grid > .workspace-panel,
    .studio-grid > .simulator-panel {
        grid-column: 1;
        min-width: 0;
        height: 100%;
    }

    .studio-grid > .timeline-panel {
        display: block;
    }

    .studio-grid > .workspace-panel,
    .studio-grid > .simulator-panel {
        display: none;
    }

    .studio-grid--resident .timeline-panel,
    .studio-grid--visual-surface .timeline-panel {
        display: none;
    }

    .studio-grid--resident > .workspace-panel {
        display: flex;
        overflow: hidden;
    }

    .studio-grid--visual-surface > .simulator-panel {
        display: flex;
    }

    .studio-grid--preview-mobile .simulator-view-box {
        width: 100%;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 700px) {
        #studio-shell {
            height: 100dvh;
        }

        .studio-grid,
        .studio-grid--resident,
        .studio-grid--visual-surface {
            height: calc(100dvh - var(--topbar-height));
        }
    }
}