/* Slides mode is an isolated Notes surface. Keep it after the general Notes and
   Canvas styles so a selected deck never leaves an editable note underneath. */
body.slides-page-active #notesPrimaryPane > :not(#slidesEditor) {
    display: none !important;
}

/* Author-level display rules override the browser's built-in [hidden] rule.
   Keep the Slides surface unconditionally out of layout when another note
   mode is active so it cannot paint beneath Notepad or Canvas. */
.slides-editor[hidden] {
    display: none !important;
}

/* Decks are a workspace, not a document. Remove the note editor's narrow
   reading column and fixed formatting bar while a slide page is active. */
body.slides-page-active #view-notes .toolbar-wrapper {
    display: none !important;
}
body.slides-page-active #view-notes .editor-container,
body.slides-page-active #view-notes #notesPrimaryPane,
body.slides-page-active #slidesEditor {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
}
body.slides-page-active #view-notes .editor-container {
    display: flex;
    height: 100%;
    overflow: hidden;
}
body.slides-page-active #view-notes #notesPrimaryPane,
body.slides-page-active #slidesEditor {
    flex: 1 1 auto;
    height: 100%;
}

.slides-editor {
    /* These are Sutra shell tokens, intentionally separate from the deck's
       selected design theme. Changing the app theme updates editor chrome,
       while the slide itself stays true to its saved presentation design. */
    --slides-border: var(--surface-border, var(--border, #d9dce6));
    --slides-surface: var(--bg-elevated, #fff);
    --slides-workspace: var(--editor-bg, #f8f9fc);
    --slides-muted: var(--text-secondary, #667085);
    --slides-accent: var(--accent, #635bdf);
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    background: var(--slides-workspace);
    color: var(--text-primary, #1d2939);
}

.slides-mode-tabs,
.slides-toolbar,
.slides-status {
    display: flex;
    /* Editor chrome must retain its intrinsic height. The workspace is the
       scrollable flex child; allowing these rows to shrink clips controls. */
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--slides-border);
    background: var(--slides-surface);
}

.slides-mode-tabs { gap: 28px; min-height: 42px; }
.slides-mode-tabs span { color: var(--slides-muted); }
.slides-mode-tabs strong { color: var(--slides-accent); position: relative; }
.slides-mode-tabs strong::after { content: ''; position: absolute; height: 2px; border-radius: 2px; background: var(--slides-accent); inset: auto -10px -12px; }
.slides-toolbar { justify-content: space-between; flex-wrap: wrap; }
.slides-toolbar-main, .slides-toolbar-end { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.slides-toolbar-btn,
.slides-inspector button,
.slides-status button,
.slides-add-thumbnail {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 10px;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.slides-toolbar-btn:hover, .slides-toolbar-btn:focus-visible,
.slides-inspector button:hover, .slides-inspector button:focus-visible,
.slides-status button:hover, .slides-status button:focus-visible,
.slides-add-thumbnail:hover, .slides-add-thumbnail:focus-visible {
    border-color: var(--slides-border);
    background: color-mix(in srgb, var(--slides-accent) 9%, var(--slides-surface));
    outline: none;
}
.slides-toolbar-btn i { margin-right: 6px; }
.slides-workspace { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) minmax(190px, 230px); gap: 16px; min-height: 0; flex: 1 1 auto; padding: 16px; overflow: hidden; }
.slides-thumbnails { min-width: 0; overflow-y: auto; padding-right: 4px; }
.slides-thumbnail-list { display: grid; gap: 9px; }
.slides-thumbnail { display: block; width: 100%; min-height: 74px; padding: 10px; overflow: hidden; border: 1px solid var(--slides-border); border-radius: 9px; background: var(--slides-surface); color: var(--text-primary, #1d2939); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.slides-thumbnail.active { border: 2px solid var(--slides-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--slides-accent) 14%, transparent); }
.slides-add-thumbnail { display: block; width: 100%; margin-top: 10px; border-color: var(--slides-border); background: var(--slides-surface); }
.slides-center { min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; overflow: auto; }
.slides-stage { position: relative; width: min(100%, 940px); aspect-ratio: 16 / 9; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--slides-border); border-radius: 10px; box-shadow: 0 10px 30px color-mix(in srgb, #1d2939 10%, transparent); container-type: inline-size; }
.slides-editor[data-size="standard"] .slides-stage { aspect-ratio: 4 / 3; max-width: 760px; }
.slides-element { position: absolute; box-sizing: border-box; padding: 4px; overflow: hidden; cursor: pointer; }
.slides-element.selected { outline: 2px solid var(--slides-accent); outline-offset: 2px; }
.slides-element-resize { position: absolute; z-index: 3; right: -7px; bottom: -7px; width: 15px; height: 15px; padding: 0; border: 2px solid var(--slides-accent); border-radius: 50%; background: var(--slides-surface); cursor: nwse-resize; }
.slides-element:not(.selected) .slides-element-resize { display: none; }
.slides-element-text { height: 100%; outline: none; white-space: pre-wrap; line-height: 1.25; }
.slides-element.slides-element-text { overflow: visible; }
.slides-element img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slides-chart { display: flex; height: 100%; gap: 10%; align-items: end; border-bottom: 1px solid currentColor; }
.slides-chart span { display: block; flex: 1; min-height: 5%; border-radius: 4px 4px 0 0; background: var(--slides-accent); }
.slides-element-table { padding: 0; }
.slides-element-table table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; font-size: .82em; }
.slides-element-table th, .slides-element-table td { padding: .35em .5em; overflow: hidden; border: 1px solid currentColor; text-overflow: ellipsis; }
.slides-element-table th { font-weight: 700; background: color-mix(in srgb, currentColor 10%, transparent); }
.slides-notes-panel { width: min(100%, 940px); padding: 12px; border: 1px solid var(--slides-border); border-radius: 10px; background: var(--slides-surface); }
.slides-notes-panel label { display: block; margin-bottom: 7px; font-weight: 600; }
.slides-notes-panel textarea { width: 100%; min-height: 62px; resize: vertical; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
.slides-inspector { overflow-y: auto; padding: 14px; border: 1px solid var(--slides-border); border-radius: 10px; background: var(--slides-surface); }
.slides-inspector h3 { margin: 0 0 14px; font-size: .9rem; color: var(--slides-accent); }
.slides-inspector label { display: grid; gap: 6px; margin: 0 0 14px; font-size: .84rem; font-weight: 600; }
.slides-inspector select, .slides-inspector input[type="color"] { width: 100%; min-height: 36px; padding: 6px; border: 1px solid var(--slides-border); border-radius: 7px; color: inherit; background: transparent; font: inherit; }
.slides-inspector button { display: block; width: 100%; margin-top: 8px; border-color: var(--slides-border); text-align: left; }
.slides-element-inspector { margin: 18px -2px 8px; padding: 13px; border: 1px solid var(--slides-border); border-radius: 9px; background: color-mix(in srgb, var(--slides-accent) 5%, var(--slides-surface)); }
.slides-element-inspector[hidden] { display: none; }
.slides-element-inspector h3 { margin-bottom: 4px; }
.slides-element-inspector p { margin: 0 0 12px; overflow: hidden; color: var(--slides-muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.slides-element-inspector input[type="range"], .slides-element-inspector input[type="color"] { width: 100%; min-height: 32px; }
.slides-inspector-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.slides-inspector-grid button { margin-top: 0; font-size: .78rem; }
.slides-toggle { display: flex !important; grid-template-columns: auto 1fr; align-items: center; }
.slides-status { justify-content: flex-end; gap: 18px; padding-right: 96px; border-top: 1px solid var(--slides-border); border-bottom: 0; color: var(--slides-muted); font-size: .8rem; }
.slides-status button { color: #fff; background: var(--slides-accent); }
.slides-present-overlay { position: fixed; z-index: 2147483646; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 25vw); gap: 18px; padding: 24px; background: color-mix(in srgb, #101828 94%, transparent); }
.slides-present-stage { position: relative; align-self: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; container-type: inline-size; }
.slides-present-notes { align-self: center; max-height: 70vh; overflow: auto; padding: 18px; border: 1px solid var(--slides-border); border-radius: 10px; background: var(--slides-surface); color: var(--text-primary, #1d2939); white-space: pre-wrap; }
.slides-present-overlay > button { position: fixed; top: 16px; right: 16px; padding: 9px 12px; border: 1px solid #fff; border-radius: 8px; background: #101828; color: #fff; font: inherit; cursor: pointer; }

@media (max-width: 1000px) {
    .slides-workspace { grid-template-columns: minmax(0, 1fr) 210px; }
    .slides-thumbnails { grid-column: 1 / -1; overflow-x: auto; overflow-y: hidden; }
    .slides-thumbnail-list { display: flex; min-width: max-content; }
    .slides-thumbnail { width: 145px; }
    .slides-add-thumbnail { width: 80px; margin: 0; }
}
@media (max-width: 700px) {
    /* A phone is an editing surface, not a scaled-down desktop. Put the active
       slide first, then keep the slide rail and inspector as deliberate,
       scrollable follow-up controls. The feature stylesheet loads after the
       general mobile layer, so this needs to own the final narrow layout. */
    body.slides-page-active #slidesEditor .slides-workspace {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 10px;
        padding: 8px;
        overflow: auto;
    }
    body.slides-page-active #slidesEditor .slides-center { order: 1; flex: 0 0 auto; width: 100%; overflow: visible; }
    body.slides-page-active #slidesEditor .slides-stage { width: 100%; border-radius: 7px; }
    body.slides-page-active #slidesEditor .slides-notes-panel { width: 100%; padding: 10px; border-radius: 7px; }
    body.slides-page-active #slidesEditor .slides-thumbnails {
        order: 2;
        flex: 0 0 auto;
        min-height: 66px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 3px;
    }
    body.slides-page-active #slidesEditor .slides-thumbnail-list { display: flex; min-width: max-content; gap: 7px; }
    body.slides-page-active #slidesEditor .slides-thumbnail { width: 132px; min-height: 66px; }
    body.slides-page-active #slidesEditor .slides-add-thumbnail { width: 72px; min-height: 66px; margin: 0; }
    body.slides-page-active #slidesEditor .slides-inspector { order: 3; flex: 0 0 auto; max-height: none; overflow: visible; padding: 12px; }
    body.slides-page-active #slidesEditor .slides-toolbar {
        display: block;
        flex: 0 0 auto;
        min-height: 58px;
        padding: 7px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }
    body.slides-page-active #slidesEditor .slides-toolbar-main,
    body.slides-page-active #slidesEditor .slides-toolbar-end { display: inline-flex; flex-wrap: nowrap; vertical-align: middle; }
    body.slides-page-active #slidesEditor .slides-toolbar-btn { min-width: 44px; min-height: 44px; padding: 8px; }
    .slides-element-resize { width: 20px; height: 20px; right: -9px; bottom: -9px; }
    .slides-mode-tabs { gap: 18px; }
    .slides-toolbar-btn span { display: none; }
    .slides-toolbar-btn i { margin: 0; }
    .slides-present-overlay { grid-template-columns: 1fr; padding: 10px; }
    .slides-present-notes { max-height: 25vh; }
    .slides-status { justify-content: space-between; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .slides-editor *, .slides-present-overlay * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }