/* ── Variables ─────────────────────────────────────────────────────────── */

:root {
    --nav-h: 40px;
    --pico-font-family-monospace: "Consolas", "Courier New", "DejaVu Sans Mono", monospace;
}

/* ── Alpine cloak ──────────────────────────────────────────────────────── */

[x-cloak] { display: none !important; }

/* ── Body shell ────────────────────────────────────────────────────────── */

body {
    margin: 0;
    padding-top: var(--nav-h);
    min-height: 100vh;
}

/* ── Page grid ─────────────────────────────────────────────────────────── */

.container { max-width: 1000px; }

.layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--pico-spacing);
    align-items: start;
}

/* ── Layout primitives ─────────────────────────────────────────────────── */

.row     { display: flex; align-items: center; gap: .5rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.spread  { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cluster > button, .cluster > [role="button"] { width: auto; }
.meta-right { margin-left: auto; }
.spread h2  { margin: 0; }
.sentinel   { height: 1px; }

/* ── Auth / fullscreen state ────────────────────────────────────────────── */

[data-auth="out"] [data-when="in"],
[data-auth="in"]  [data-when="out"] { display: none; }
[data-auth="pending"] [data-when]   { visibility: hidden; }
[data-auth="pending"]               { cursor: progress; }

[data-fullscreen] :is(.sidebar, .banner, footer, hr) { display: none; }
[data-fullscreen] main   { width: 100%; max-width: none; margin: 0; padding: 0; overflow: auto; }
[data-fullscreen] .layout { grid-template-columns: 1fr; }
[data-fullscreen] .tab-bar { display: none; }

/* ── Responsive: desktop ────────────────────────────────────────────────── */

@media (min-width: 769px) {
    .sidebar-open-btn { display: none; }
    #sidebar {
        display: block;
        position: static;
        inset: auto;
        margin: 0;
        border: 0;
        padding: 0;
        overflow: visible;
        color: inherit;
        background: none;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
    }
}

/* ── Responsive: mobile ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .layout { grid-template-columns: 1fr; }

    #main-nav .nav-secondary { display: none; }
    #main-nav .user-identity span { display: none; }

    #sidebar {
        inset: 0 auto 0 0;
        width: min(280px, 85vw);
        height: 100%;
        margin: 0;
        border: 0;
        border-right: 1px solid var(--pico-muted-border-color);
        padding: 1rem;
        overflow-y: auto;
        background: var(--pico-background-color);
        color: inherit;
        translate: -100%;
        transition: translate 0.25s ease,
                    overlay 0.25s allow-discrete,
                    display 0.25s allow-discrete;
    }

    #sidebar:popover-open { translate: 0; }

    @starting-style {
        #sidebar:popover-open { translate: -100%; }
    }

    #sidebar::backdrop {
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.25s,
                    overlay 0.25s allow-discrete,
                    display 0.25s allow-discrete;
    }

    #sidebar:popover-open::backdrop { opacity: 1; }
}

/* ── Container queries ──────────────────────────────────────────────────── */

.card { container-type: inline-size; position: relative; }

@container (max-width: 420px) {
    .cluster { flex-direction: column; align-items: flex-start; }
    .row     { flex-wrap: wrap; }
}