/*
 * Presentation layer: layout modes, drawers and the effects toggle.
 *
 * Written by the generator as assets/presentation.css and loaded after style.css on
 * every page. Everything here is keyed off attributes the generator writes on <body>
 * (data-layout, data-theme, data-route, data-effects) from each page's front matter,
 * so a page that sets nothing renders exactly as it did before.
 *
 *   data-layout="standard"   today's three-column page (default)
 *   data-layout="wide"       no right panel; the article takes its width
 *   data-layout="workbench"  both side panels become drawers; the article takes
 *                            the whole width. For pages built around an editor.
 *
 * html[data-focus="off"] is the reader's "show panels" choice on a workbench page,
 * set before first paint by the inline head snippet so there is no layout jump.
 */

:root {
    /* Height an editor can claim without the page scrolling: viewport minus the
       top bar, the workbench toolbar and the layout padding. Page CSS uses this. */
    --pres-viewport-h: calc(100dvh - var(--topbar-h) - 2 * var(--page-padding) - 52px);
    --pres-drawer-w: 320px;
}

/* ------------------------------------------------------------------ wide */

/* Desktop only: below 1081px style.css already makes every page one column, and a
   more specific rule here would put the article back into a 300px sidebar track. */
@media (min-width: 1081px) {
    body[data-layout="wide"] .article-layout {
        grid-template-columns: minmax(270px, 300px) minmax(0, 1fr);
        max-width: 1920px;
    }
}

body[data-layout="wide"] .right-panel {
    display: none;
}

/* ------------------------------------------------------------- workbench */

.pres-toolbar {
    display: none;
}

body[data-layout="workbench"] .pres-toolbar {
    position: sticky;
    top: calc(var(--topbar-h) + 6px);
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
}

.pres-toolbar__spacer {
    flex: 1 1 auto;
}

.pres-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 4px 14px rgba(30, 45, 90, 0.06);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    backdrop-filter: blur(12px);
}

    .pres-btn:hover,
    .pres-btn:focus-visible {
        background: white;
    }

    .pres-btn[aria-pressed="true"],
    .pres-btn[aria-expanded="true"] {
        border-color: color-mix(in srgb, var(--brand) 30%, transparent);
        background: var(--brand-soft);
        color: var(--brand);
    }

    .pres-btn svg {
        width: 15px;
        height: 15px;
    }

/* Focus on (the default for a workbench page): one column, panels as drawers. */
@media (min-width: 1081px) {
    html:not([data-focus="off"]) body[data-layout="workbench"] .article-layout {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    html:not([data-focus="off"]) body[data-layout="workbench"] .sidebar {
        position: fixed;
        top: calc(var(--topbar-h) + var(--layout-gap));
        bottom: var(--layout-gap);
        left: var(--layout-gap);
        z-index: 150;
        width: var(--pres-drawer-w);
        max-height: none;
        /* style.css gives the panels align-self:start for the sticky grid layout. On a
           fixed box that makes it content-height, and Chrome then shifts a box taller
           than the window up to y=0, over the top bar. Stretch fills top..bottom. */
        align-self: stretch;
        background: var(--panel-strong);
        box-shadow: 0 24px 60px rgba(12, 18, 28, 0.22);
        visibility: hidden;
        transform: translateX(calc(-100% - 2 * var(--layout-gap)));
        transition: transform 0.22s ease, visibility 0.22s;
    }

        html:not([data-focus="off"]) body[data-layout="workbench"] .sidebar.pres-drawer--open {
            visibility: visible;
            transform: none;
        }
}

/* The right panel is a drawer at every width on a workbench page; on narrow
   screens style.css hides it, and the toolbar is the only way back to it. */
html:not([data-focus="off"]) body[data-layout="workbench"] .right-panel {
    position: fixed;
    top: calc(var(--topbar-h) + var(--layout-gap));
    right: var(--layout-gap);
    bottom: var(--layout-gap);
    z-index: 150;
    display: block;
    width: min(var(--pres-drawer-w), calc(100vw - 2 * var(--layout-gap)));
    align-self: stretch;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-xl);
    background: var(--panel-strong);
    box-shadow: 0 24px 60px rgba(12, 18, 28, 0.22);
    backdrop-filter: blur(18px);
    visibility: hidden;
    transform: translateX(calc(100% + 2 * var(--layout-gap)));
    transition: transform 0.22s ease, visibility 0.22s;
}

    html:not([data-focus="off"]) body[data-layout="workbench"] .right-panel.pres-drawer--open {
        visibility: visible;
        transform: none;
    }

html[data-focus="off"] body[data-layout="workbench"] [data-pres-drawer] {
    display: none;
}

/* Editors on a workbench page can grow into the room they were given. Opt-in:
   a page adds class="pres-fill" to whatever should take the viewport height. */
html:not([data-focus="off"]) body[data-layout="workbench"] .pres-fill {
    height: var(--pres-viewport-h);
    min-height: 420px;
}

/* --------------------------------------------------------- effects toggle */

.pres-effects-toggle {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--muted);
    cursor: pointer;
}

    .pres-effects-toggle:hover {
        background: rgba(255, 255, 255, 0.88);
        color: var(--text);
    }

    .pres-effects-toggle[aria-pressed="true"] {
        color: var(--brand);
    }

    .pres-effects-toggle svg {
        width: 18px;
        height: 18px;
    }

/* Effect layers never take clicks from the page under them. */
.pres-effect-layer {
    position: fixed;
    inset: 0;
    z-index: 2500; /* above panels and drawers, below search (3000) */
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    html:not([data-focus="off"]) body[data-layout="workbench"] .sidebar,
    html:not([data-focus="off"]) body[data-layout="workbench"] .right-panel {
        transition: none;
    }
}