/* pages/archives.css
   Archive board (/dev/archives) chrome that must not live in Tailwind: the
   corner maximize toggle on the canvas and the maximized layout, which reaches
   outside the board island to hide the page header and the app navigation.

   The board island itself is Tailwind slate; the values below mirror that
   palette (slate-700/900/950, cyan-400/500) so the toggle matches the toolbar
   buttons it replaced. */

.archives-corner-toggle {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    z-index: 25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgb(51 65 85);
    border-radius: 0.25rem;
    background: rgb(2 6 23 / 0.85);
    color: rgb(203 213 225);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.archives-corner-toggle:hover {
    border-color: rgb(6 182 212);
    background: rgb(15 23 42 / 0.95);
    color: rgb(34 211 238);
}

.archives-corner-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgb(34 211 238 / 0.75);
}

.archives-corner-toggle[hidden] {
    display: none;
}

.archives-corner-toggle svg {
    width: 1rem;
    height: 1rem;
}

/* ---- Maximized board ---------------------------------------------------- */

/* Maximizing drops the app chrome: the side/top navigation, the page header
   (back link + title), and the container's reading width. `:has()` lets the
   board island drive that without a body class that would survive enhanced
   navigation away from the page. */
.saga-player-shell:has(.archives-layout.is-maximized) > *:not(main) {
    display: none;
}

.admin-page-xl:has(.archives-layout.is-maximized) {
    max-width: none;
    padding: 0.5rem;
}

.admin-page-xl:has(.archives-layout.is-maximized) .admin-head {
    display: none;
}

/* Reclaim the vertical space the hidden header used to take (the unmaximized
   layout budgets 9rem for page chrome). */
.archives-layout.is-maximized {
    min-height: calc(100vh - 1rem);
}

/* Matches the breakpoint at which the board column takes a fixed viewport
   height (Tailwind `xl:h-[calc(100vh-9rem)]`); below it the column stays auto
   so the wrapped toolbar can't clip the canvas. */
@media (min-width: 1280px) {
    .archives-layout.is-maximized .archives-board-column {
        height: calc(100vh - 1rem);
    }
}