/* The app's tokens: every colour in this file comes from here. Most are
   Juel's opt-in look (juel.theme.useLook(), see src/app.ts), which follows the
   system or the View menu's Light / Dark / System; the fallbacks are the old
   values. The rest (the logo's backing, the stage, the inline bubble) look the
   same in both themes. */
:root {
    --app-surface: var(--juel-surface, #fff);
    --app-raised: var(--juel-raised, #f6f6f6);
    --app-sunken: var(--juel-sunken, #eee);
    --app-border: var(--juel-border, #ddd);
    --app-text: var(--juel-text, #1d1f23);
    --app-muted: var(--juel-muted, #555);
    --app-hover: var(--juel-hover, #f1f3f5);
    --app-selection: var(--juel-selection, #dde8ff);
    --app-accent: var(--juel-accent, #3b6fd8);
    /* The accent as text: the logo orange is 2.6:1 on white, so light mode darkens it (6.3:1) for WCAG AA. */
    --app-accent-text: color-mix(in srgb, var(--app-accent) 60%, black);
    --app-danger: var(--juel-danger, #b00020);
    --app-warning: #8a5a00;
    --app-success: #228844;
    --app-separator: var(--juel-border, #d5d8de);
    --app-logo-backing: #fff;
    --app-stage: #111;
    --app-canvas-shadow: rgb(0 0 0 / 0.28);
    --app-bubble: #2b2118;
    --app-bubble-text: #f6e7d3;
    --app-bubble-hover: #4a3a2c;
    --app-bubble-separator: #5a4838;
}
:root[data-juel-look][data-theme="dark"] {
    --app-warning: #e0b050;
    --app-success: #6cc68a;
    --app-accent-text: var(--app-accent);
    /* The slide's edge against the dark sunken canvas. */
    --app-canvas-shadow: rgb(0 0 0 / 0.75);
}
@media (prefers-color-scheme: dark) {
    :root[data-juel-look]:not([data-theme="light"]) {
        --app-warning: #e0b050;
        --app-success: #6cc68a;
        --app-accent-text: var(--app-accent);
        --app-canvas-shadow: rgb(0 0 0 / 0.75);
    }
}

html, body {
    margin: 0;
    height: 100%;
    font: 14px/1.4 system-ui, sans-serif;
}

juel-router, jollify-edit {
    display: block;
    height: 100%;
}

jollify-edit {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* #/files: the library on its own page, under a bar like the dashboard's. */
jollify-files {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--app-surface);
    color: var(--app-text);
}
.files-page-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--app-border);
}
.files-page-top img { display: block; height: 28px; }
.files-page-top h1 { font-size: 1.1rem; font-weight: 600; margin: 0; flex: 1; }
.files-page-top a { color: var(--app-accent-text); }
.files-page-problem { margin: 0; padding: 10px 20px 0; font-size: 13px; color: var(--app-muted, #555); }
.files-page-panel { flex: 1; min-height: 0; display: block; padding: 0 12px 12px; }
.files-page-panel juel-file-manager { height: 100%; }

/* #/brand: a library brand in the Brand editor, under the same bar. */
jollify-brand {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--app-surface);
    color: var(--app-text);
}
.brand-page-status { font-size: 13px; color: var(--app-muted, #555); }
.brand-page-body { flex: 1; min-height: 0; display: flex; overflow: auto; }
.brand-page-editor { flex: none; width: 22rem; padding: 16px 20px; }
/* The previews take the rest, side by side where there's room (each a heading over its preview). */
.brand-page-previews { flex: 1; min-width: 0; padding: 16px 20px 16px 0; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 16px; align-items: start; align-content: start; }
.brand-page-previews h2 { font-size: 13px; font-weight: 600; margin: 0 0 6px; color: var(--app-muted, #555); }
.brand-page-making { font-size: 13px; color: var(--app-muted, #555); }
.brand-report-preview { height: auto; aspect-ratio: 210 / 297; border-radius: 4px; --juel-frame-background: #fff; }
.brand-site-preview { height: auto; aspect-ratio: 4 / 3; border-radius: 4px; --juel-frame-background: #fff; }

/* The deck toolbar and the format bar are juel-toolbars of juel-buttons;
   these set Juel's own custom properties rather than restyling inside. */
.toolbar {
    --toolbar-padding: 6px 10px;
    --toolbar-gap: 6px;
    --toolbar-background-color: var(--app-raised);
    --toolbar-box-shadow: none;
    border-bottom: 1px solid var(--app-border);
}

.toolbar juel-button,
.format-bar juel-button {
    --padding: 3px 10px;
    --font-size: 14px;
}

.toolbar .doc-name {
    font-weight: 600;
    margin-right: 10px;
    max-width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toolbar .dirty { color: var(--app-warning); }
.toolbar .doc-name { cursor: text; border-radius: 4px; padding: 2px 4px; }
.toolbar .doc-name:hover { background: var(--app-sunken); }
.toolbar .doc-name-input { width: 24ch; margin-right: 10px; --text-padding: 3px 6px; }
.toolbar .history-buttons { display: inline-flex; gap: 2px; }

/* The logo: the Jollify mark (it will go to the dashboard, U6). It's bigger
   than the toolbar and hangs over the top-left corner of the workspace
   below, so it holds a fixed slot and floats above everything else. */
.toolbar .app-logo {
    width: 50px;
    height: 28px;
    position: relative;
    z-index: 20;
}
/* The sun fills the circle (the Player's launcher mark: no reflection);
   the white shows through the dolphin cut-out. */
/* The logo is the main menu's trigger (jollify-app-menu, EDITOR-UX X1). */
jollify-app-menu .app-logo { display: block; cursor: pointer; }
.toolbar jollify-app-menu .app-logo { display: inline-block; }
.toolbar .app-logo img {
    display: block;
    width: 48px;
    height: 48px;
    margin: -5px 0 0 -2px;
    border-radius: 50%;
    background: var(--app-logo-backing);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
}
/* File / View / Insert: plain menu triggers, like a menu bar. */
.toolbar .menu-trigger { --padding: 3px 8px; }
.toolbar .minimized-tab { --font-size: 13px; }

/* juel-toolbar spreads its items (space-between) unless a .spacer takes
   the room: .sep pushes Present/Export right, the trailing .spacer keeps
   the rest packed. */
.toolbar .sep { flex: 1; }

/* Write | Design | Split: a segmented switch in the middle of the bar. */
.toolbar .mode-switch {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--app-border);
    border-radius: var(--juel-radius-md, 8px);
}
.toolbar .mode-switch juel-button { --padding: 2px 12px; }

/* Present is a split button: the main half presents from the start, the
   caret half opens the other ways. */
.toolbar .present-split { display: inline-flex; align-items: stretch; gap: 1px; }
.toolbar .present-split .present-menu { display: flex; }
.toolbar .present-split .present-menu::part(trigger) { display: flex; }
.toolbar .present-split .present::part(button) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* No text line in the caret half: padding makes up the height of the main half. */
.toolbar .present-split .present-more { --padding: 7px 6px 8px; }
.toolbar .present-split .present-more::part(button) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.toolbar .spacer { flex: 0; }

jollify-edit .workspace {
    display: block;
    min-height: 0;
}

/* juel-mdi panels need their own height (see juel's mdi example). */
jollify-edit .workspace > div {
    height: 100%;
    box-sizing: border-box;
}

jollify-edit juel-markdown-editor {
    display: block;
    height: 100%;
}

jollify-edit juel-frame {
    height: 100%;
    --juel-frame-background: var(--app-stage);
}

#slides-panel {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.slide-list {
    margin: 0;
    padding: 6px 8px 2px 4px;
    box-sizing: border-box;
    list-style: none;
}

/* The Slides panel's note of missing files (they're dealt with in Files). */
.slides-missing { margin: auto 10px 10px; --font-size: 12px; --padding: 3px 10px; color: var(--app-danger); }

/* ---- the Files panel (src/components/FilesPanel.ts) ------------------- */

#files-panel { overflow: auto; }

.files-panel {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 100%;
    box-sizing: border-box;
    padding: 6px 8px 8px;
    font-size: 12.5px;
}

.files-bar, .files-views, .files-find { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.files-bar { justify-content: space-between; }
.files-bar juel-button, .files-panel .file-preview-actions juel-button,
.files-panel .file-actions juel-button, .files-panel .row-menu-button { --font-size: 12px; --padding: 2px 8px; }
.files-find juel-text { flex: 1 1 8rem; min-width: 0; }
.files-find juel-select { flex: 0 0 6.5rem; }

.files-body { display: flex; gap: 8px; min-height: 0; }
.files-tree { display: none; flex: 0 0 11rem; max-height: 22rem; overflow: auto; border-right: 1px solid var(--app-border); padding-right: 4px; }
@container (min-width: 460px) { .files-tree { display: block; } }
.files-main { flex: 1; min-width: 0; }

.files-crumbs { margin: 2px 0 4px; color: var(--app-muted); }
.files-crumbs .crumb { color: inherit; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.files-crumbs .crumb:hover { text-decoration: underline; }

.files-list { list-style: none; margin: 0; padding: 0; }
.files-list li {
    display: flex; align-items: center; gap: 6px;
    min-height: 28px; padding: 2px 4px; border-radius: 4px; cursor: default;
}
.files-list li:hover { background: var(--app-hover); }
.files-list li.selected { background: var(--app-selection); }
.files-list li.drop, .files-crumbs .crumb.drop { outline: 2px dashed var(--app-accent); outline-offset: -2px; background: var(--app-selection); }
.files-list li.folder { cursor: pointer; }
.files-list li.used .file-name::after { content: ' •'; color: var(--app-accent); }
.files-list li.missing { color: var(--app-danger); flex-wrap: wrap; }
.files-list li.present { cursor: pointer; }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { color: var(--app-muted); font-size: 11px; white-space: nowrap; }
.file-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 3px; background: var(--app-sunken); flex: 0 0 auto; }
.file-icon { width: 28px; text-align: center; flex: 0 0 auto; }
.file-actions { display: flex; gap: 4px; }

/* Pictures: a grid of thumbnails. */
.files-panel.grid .files-main .files-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.files-panel.grid .files-main .files-list li { flex-direction: column; align-items: stretch; padding: 4px; text-align: center; }
.files-panel.grid .file-thumb, .files-panel.grid .file-icon { width: 100%; height: 72px; font-size: 32px; line-height: 72px; }
.files-panel.grid .file-size { display: none; }

.file-preview { border-top: 1px solid var(--app-border); padding-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.file-preview-media img, .file-preview-media video { display: block; max-width: 100%; max-height: 14rem; margin: 0 auto; border-radius: 4px; background: var(--app-stage); }
.file-preview-media audio { width: 100%; }
.file-text { max-height: 12rem; overflow: auto; margin: 0; padding: 6px; background: var(--app-raised); border-radius: 4px; font-size: 11px; white-space: pre-wrap; }
.file-table { border-collapse: collapse; font-size: 11px; display: block; max-height: 12rem; overflow: auto; }
.file-table th, .file-table td { border: 1px solid var(--app-border); padding: 2px 5px; text-align: left; }
.file-table th { background: var(--app-raised); }
.font-sample { font-size: 22px; margin: 4px 0; }
.file-facts { margin: 0; color: var(--app-muted); word-break: break-all; }
.file-decks { color: var(--app-warning); }
.file-preview-actions { display: flex; gap: 4px; flex-wrap: wrap; }

.files-empty { color: var(--app-muted); margin: 6px 2px; }
/* Empty states: what's missing and how to fill it, in the muted text the Style panel's uses. */
jollify-edit .empty { color: var(--app-muted); font-size: 13px; line-height: 1.4; }
#slides-panel .slides-empty { margin: 8px 10px; }
#preview-panel .canvas-empty {
    position: absolute;
    inset: 0;
    margin: auto;
    width: fit-content;
    max-width: 22em;
    height: fit-content;
    padding: 10px 14px;
    text-align: center;
    /* Its own surface: the blank page under it is white in either theme. */
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 6px;
}
.files-message { margin: 0; color: var(--app-success); }
.files-usage { margin: auto 0 0; color: var(--app-muted); font-size: 11px; }

/* Notes: a strip under the Designer's canvas, folded to its header or open. */
.notes-strip {
    flex: none;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--app-border);
    margin: 8px -10px -10px;
    background: var(--app-surface);
}
.notes-strip .notes-toggle { align-self: flex-start; --font-size: 12px; }
.notes-strip .notes-body { display: none; height: 120px; overflow: auto; }
.notes-strip.open .notes-body { display: block; }
.notes-strip iframe.notes {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.notes-strip .empty { margin: 4px 12px 10px; color: var(--app-muted); }

/* The filmstrip (U3): a number and a thumbnail (SlideThumb) per slide, the
   title on hover (it stays in the item for screen readers), sections as
   group labels, a ring on the current slide, + New slide at the end. */
.slide-list li {
    position: relative;
    padding: 3px 0;
    cursor: pointer;
    outline: none;
}
.slide-card {
    display: grid;
    grid-template-columns: 1.8em 1fr;
    align-items: start;
}
.slide-number {
    font-size: 11px;
    text-align: right;
    padding: 1px 6px 0 0;
    color: var(--app-muted);
    font-variant-numeric: tabular-nums;
}
.slide-list jollify-slide-thumb {
    outline: 1px solid var(--app-border);
    outline-offset: 0;
}
.slide-list li:hover jollify-slide-thumb { outline-color: var(--app-muted); }
.slide-list li.current jollify-slide-thumb,
.slide-list li:focus-visible jollify-slide-thumb {
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}
.slide-list li.current .slide-number { color: var(--app-accent-text); font-weight: 600; }
/* {.background}: a background slide, behind the slides after it; not numbered. */
.slide-list li.slide-backdrop .slide-number { font-size: 9px; letter-spacing: .04em; padding-top: 3px; }
.slide-list li.slide-backdrop jollify-slide-thumb { outline-style: dashed; }
.slide-list li.slide-backdrop.current jollify-slide-thumb { outline-style: solid; }
.slide-backdrop-note { margin: 2px 0 0 1.8em; font-size: 11px; color: var(--app-muted); }
/* {.hidden}: skipped when presenting; still listed, dimmed. */
.slide-list li.slide-hidden .slide-card { opacity: 0.45; }
.slide-list li:focus-visible:not(.current) jollify-slide-thumb { outline-style: dashed; }
/* Dragging a slide: where it would go. */
.slide-list li.drop-before { box-shadow: inset 0 2px 0 var(--app-accent); }
.slide-list li.drop-after { box-shadow: inset 0 -2px 0 var(--app-accent); }
.slide-list .slide-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.slide-section {
    margin: 8px 0 4px 1.8em;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slide-list li:first-child .slide-section { margin-top: 2px; }
.new-slide {
    display: block;
    margin: 4px 8px 8px calc(4px + 1.8em);
    aspect-ratio: 16 / 9;
    border: 1px dashed var(--app-border);
    border-radius: 4px;
    --color: var(--app-muted);
}
.new-slide:hover { border-color: var(--app-muted); }

/* Under the current slide's title: style the slide, choose its transition. */
.slide-tools {
    display: flex;
    gap: 3px;
    margin: 4px 0 2px 1.8em;
    cursor: default;
}
.slide-tools juel-button { --padding: 3px 5px; --color: var(--app-text); }

.status {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 2px 10px;
    font-size: 12px;
    color: var(--app-muted);
    border-top: 1px solid var(--app-border);
    background: var(--app-raised);
}

.status .message { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status .status-link { flex: none; color: var(--app-accent); white-space: nowrap; }
.status .store-failed { flex: none; color: var(--app-danger); white-space: nowrap; }
.status .facts { display: flex; align-items: center; gap: 12px; flex: none; white-space: nowrap; }
.status .facts juel-button { --padding: 0 6px; --font-size: 12px; --color: var(--app-muted); --button-min-height: 24px; }
.status .save-state.dirty { color: var(--app-text); }
.status .select-nav { display: flex; gap: 2px; }
.status .select-nav juel-button {
    --padding: 0 8px;
    --font-size: 12px;
}

/* The Markdown panel: the format bar, then the editor filling the rest. */
#markdown-panel {
    display: flex;
    flex-direction: column;
}

/* Panel titles sit a little in from the edge (and clear of the logo). */
jollify-edit .workspace::part(pane-title) { padding-left: 16px; }

/* The Editor's and the Designer's bars live in their panels' title bars
   (juel-mdi data-header-for), so they take no room of their own. */
.format-bar,
.designer-bar {
    flex: 1;
    min-width: 0;
    --toolbar-padding: 0;
    --toolbar-background-color: transparent;
    --toolbar-box-shadow: none;
}

.format-bar {
    --toolbar-gap: 2px;
}

/* Lucide icons on plain tool buttons (Juel's glyph=). */
.format-bar juel-button { --padding: 4px 6px; --color: var(--app-text); }

.format-bar .gap { width: 8px; }

/* The Insert menu sits at the right of the format bar. */
.format-bar .spacer { flex: 0; }
.insert-menu { margin-left: auto; }

/* The Style panel: the selected element's rule in the design stylesheet. */
#style-panel {
    overflow: hidden;
}
/* It scrolls its own sections, under the selected element. */
#style-panel jollify-style-panel { height: 100%; }

/* The inline tools: a dark bar floating over the preview by the selected
   element (or the text selected in it), Medium-style. */
#preview-panel {
    position: relative;
    display: flex;
    flex-direction: column;
}
/* The canvas (U2): the slide on the sunken surface with margins, no bezel.
   The frame's host stays transparent round the scaled slide, so the
   drop-shadow follows the slide, not the letterbox. */
#preview-panel { background: var(--app-sunken); }
#preview-panel .canvas-area {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
}
#preview-panel .canvas {
    position: absolute;
    inset: 0;
    display: flex;
    overflow: hidden;
}
#preview-panel juel-frame {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    width: auto;
    margin: 16px 20px;
    filter: drop-shadow(0 2px 10px var(--app-canvas-shadow));
}
/* Zoomed: the slide at a fixed size, centred, scrolling when bigger. */
#preview-panel .canvas.zoomed { overflow: auto; }
#preview-panel .canvas.zoomed juel-frame { flex: none; margin: auto; padding: 0; }
#preview-panel .canvas.zoomed::after { content: ""; flex: none; width: 20px; }
#preview-panel .zoom-menu {
    position: absolute;
    right: 8px;
    bottom: 4px;
    z-index: 2;
}
#preview-panel .zoom-button { --padding: 2px 6px; --font-size: 12px; --background-color: var(--app-surface); }

/* The Designer's bar, over the slide: undo, redo and CSS for the design;
   lettering and animation for the selected element. */
.designer-bar {
    --toolbar-gap: 3px;
}
.designer-bar juel-button {
    --padding: 4px 6px;
    --font-size: 14px;
    --color: var(--app-text);
}
.designer-bar .spacer { flex: 1; }
.inline-tools {
    --toolbar-z-index: 5;
    --toolbar-padding: 3px 4px;
    --toolbar-gap: 1px;
    --toolbar-background-color: var(--app-bubble);
    --toolbar-box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
    border-radius: 6px;
    white-space: nowrap;
}
.inline-tools juel-button {
    --padding: 5px 7px;
    --font-size: 14px;
    --color: var(--app-bubble-text);
    --hover-background-color: var(--app-bubble-hover);
    --pressed-background-color: var(--app-bubble-hover);
    --pressed-color: var(--app-bubble-text);
}
.inline-tools .sep {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 3px 4px;
    background: var(--app-bubble-separator);
}
.inline-tools .move-handle { cursor: move; touch-action: none; }

/* The logo menu's Files… dialog (REVIEW-FIXES A6). */
juel-modal.files-dialog { --modal-min-width: min(60rem, 94vw); --modal-max-width: min(72rem, 96vw); }
juel-modal.files-dialog jollify-library-panel { display: block; height: min(70vh, 40rem); }
juel-modal.files-dialog jollify-library-panel juel-file-manager { height: 100%; }
/* Its Files and Assets views (QUESTIONS §23 Q1): the tab bar takes ~3rem of the panel's height. */
juel-modal.files-dialog jollify-library-panel juel-tabs.library-views { display: block; height: 100%; }
juel-modal.files-dialog jollify-library-panel juel-tabs juel-file-manager { height: calc(min(70vh, 40rem) - 3rem); }
jollify-library-panel .library-assets { height: calc(min(70vh, 40rem) - 3rem); overflow: auto; padding: 0 0.5rem 1rem; box-sizing: border-box; }
jollify-library-panel .asset-heading { font-size: 1rem; margin: 1rem 0 0.5rem; }
jollify-library-panel .asset-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; }
jollify-library-panel .asset-card::part(body), jollify-library-panel .asset-card { display: flex; flex-direction: column; gap: 0.4rem; }
/* juel-card paints its box var(--light), white in dark mode too (walk F8): the app's surface instead, as the Dashboard's cards. */
jollify-library-panel .asset-card::part(card) { background: var(--app-surface, #fff); color: var(--app-text, #1d1f23); border-color: var(--app-border, #ddd); }
jollify-library-panel .asset-cover { height: 3.5rem; display: grid; place-items: center; background: var(--app-raised, #f6f6f6); color: var(--app-muted, #555); font-size: 0.85rem; }
jollify-library-panel .asset-cover img { max-width: 70%; max-height: 80%; }
jollify-library-panel .asset-cover.diagram-cover { padding: 2px 6px; overflow: hidden; box-sizing: border-box; }
jollify-library-panel .asset-cover.diagram-cover juel-diagram { display: block; width: 100%; --diagram-max-height: 3rem; pointer-events: none; }
jollify-library-panel .asset-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
jollify-library-panel .asset-hint { color: var(--app-muted, #555); font-size: 0.85rem; }
jollify-library-panel .asset-cards .files-empty { grid-column: 1 / -1; }