/*
 * Layout: the app shell (sidebar + content), page heads and the page-level
 * grids every page reuses. Media queries use only the breakpoints in
 * tokens.css (phone < 40rem, tablet 40–64rem, desktop ≥ 64rem); components
 * adapt to their own width with container queries.
 */
@layer layout {
    /* ---------- Shell: fixed left sidebar + scrolling content ---------- */
    .layout { display: flex; align-items: stretch; min-height: 100vh; }
    .content {
        flex: 1 1 auto;
        min-width: 0;
        /* The top padding matches the sidebar's, so the page title sits on the
         * brand's row. */
        padding: var(--space-4) var(--space-7) var(--space-8);
        /* Page grids follow the content's width, not the window's (beside the
         * sidebar a wide window can still leave a narrow column). */
        container: content / inline-size;
    }

    .sidebar {
        flex: 0 0 var(--sidebar-width);
        width: var(--sidebar-width);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4) var(--space-3) var(--space-5);
        background: var(--nav-bg);
        border-right: var(--border-width) solid var(--border);
        /* Stays put while the content scrolls; only the link list scrolls, so
         * the account footer never drops below the fold. */
        position: sticky;
        top: 0;
        height: 100dvh;
        overflow: hidden;
    }
    .sidebar-body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; min-height: 0; }
    /* Brand + collapse button share one row; the divider lives on the wrapper. */
    .sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        padding-bottom: var(--space-3);
        border-bottom: var(--border-width) solid var(--border);
    }
    .brand {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-width: 0;
        padding: var(--space-1);
        font-family: var(--font-head);
        font-size: var(--text-lg);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-tight);
        color: var(--text-heading);
        text-decoration: none;
        white-space: nowrap;
    }
    .brand:hover { color: var(--text-heading); }
    /* Warm accent mark before the wordmark. */
    .brand::before {
        content: "";
        width: 0.7rem;
        height: 0.7rem;
        border-radius: var(--radius-sm);
        background: var(--accent);
        box-shadow: 0 0 0 var(--border-thick) color-mix(in srgb, var(--accent) 22%, transparent);
    }
    .mainnav {
        display: flex;
        flex-direction: column;
        gap: var(--space-0);
        margin: var(--space-1) 0;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        /* Room for the focus outline inside the scroll box. */
        padding: var(--focus-width);
    }
    /* Section captions: Planung / Material, quiet labels. */
    .nav-group {
        margin: var(--space-3) var(--space-3) var(--space-0);
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
    }
    /* Each entry: its icon left of the label. */
    .mainnav a {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-sm);
        color: var(--text-quiet);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        text-decoration: none;
        transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
    }
    /* Hover and the current section (nav.js) are primary tints, the current
     * one stronger and bold. Text in the darker link-hover shade: plain
     * --primary misses AA on its own tint. */
    .mainnav a:hover {
        color: var(--primary-hover);
        background: color-mix(in srgb, var(--primary) var(--tint-hover), transparent);
    }
    .mainnav a[aria-current="page"] {
        color: var(--primary-hover);
        background: color-mix(in srgb, var(--primary) var(--tint-selected), transparent);
        font-weight: var(--weight-semibold);
    }
    /* The link list scrolls, which would clip an outer ring: draw it inside. */
    .mainnav a:focus-visible { outline-offset: calc(var(--focus-width) * -1); }
    /* Einrichtung, the last entry, sits at the end of the list while the
     * list is shorter than the sidebar. */
    .nav-end { margin-top: auto; padding-top: var(--space-3); }
    /* The account menu (a .menu-up) pinned to the bottom; the email in its
     * summary is cut off with an ellipsis. */
    .sidebar-foot {
        margin-top: auto;
        padding-top: var(--space-3);
        border-top: var(--border-width) solid var(--border);
    }
    .user { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* The theme toggle's icon previews the mode the click switches to. */
    .theme-toggle .icon-sun, .theme-toggle.is-dark .icon-moon { display: none; }
    .theme-toggle.is-dark .icon-sun { display: inline; }

    /* Collapse (desktop): a ghost square with a CSS hamburger. */
    .nav-toggle, .nav-menu {
        --btn-bg: transparent;
        --btn-bg-hover: color-mix(in srgb, var(--primary) var(--tint-selected), transparent);
        /* The stronger edge still reads on the tinted sidebar. */
        --btn-border: var(--border-strong);
        --btn-text: var(--text-quiet);
        flex: none;
        width: var(--control-h);
        padding: 0;
    }
    .nav-toggle::before {
        content: "";
        width: 1rem;
        height: var(--focus-width);
        background: currentColor;
        box-shadow: 0 -0.32rem 0 currentColor, 0 0.32rem 0 currentColor;
    }
    .nav-menu, .bottom-bar { display: none; }
    /* Reopen tab: hidden until the sidebar is collapsed, then floats top-left. */
    .nav-open {
        display: none;
        position: fixed;
        top: var(--space-3);
        left: var(--space-3);
        z-index: var(--z-floating);
        box-shadow: var(--shadow-raised);
    }
    .nav-collapsed .sidebar { display: none; }
    .nav-collapsed .nav-open { display: inline-flex; }
    .nav-collapsed .content { padding-top: var(--space-8); }

    /* Phones and tablets in portrait: the sidebar becomes a slim top bar
     * (brand + menu button) and the links open as a drawer (nav.js), so the
     * content gets the full width. */
    @media (max-width: 63.99rem) {
        .layout { flex-direction: column; }
        .sidebar {
            flex: none;
            width: auto;
            height: auto;
            padding: var(--space-2) var(--space-4);
            z-index: var(--z-sticky);
            overflow: visible;
            border-right: none;
            border-bottom: var(--border-width) solid var(--border);
        }
        .sidebar-head { border-bottom: none; padding-bottom: 0; }
        .nav-menu { display: inline-flex; margin-left: auto; }
        .sidebar-body {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            /* Down to the window's bottom, or the phone bottom bar's top
             * edge: 100% is the top bar's height. */
            max-height: calc(100dvh - 100% - var(--bottom-bar-h));
            overflow-y: auto;
            padding: var(--space-2) var(--space-4) var(--space-4);
            background: var(--nav-bg);
            border-bottom: var(--border-width) solid var(--border);
            box-shadow: var(--shadow-overlay);
        }
        .sidebar.is-open .sidebar-body { display: flex; }
        .mainnav { flex: none; overflow: visible; }
        .mainnav a { padding: var(--space-2) var(--space-3); }
        .nav-toggle { display: none; }
        .nav-collapsed .sidebar { display: flex; }
        .nav-collapsed .content { padding-top: var(--space-4); }
        /* The page ends above the phone bottom bar. */
        .content { padding: var(--space-4) var(--space-4) calc(var(--space-8) + var(--bottom-bar-h)); }
    }

    /* Phones: a bar of the daily pages fixed to the bottom of the window;
     * "Mehr" opens the drawer and carries data-current (nav.js) while a page
     * behind it is shown. */
    @media (max-width: 39.99rem) {
        .bottom-bar {
            position: fixed;
            inset: auto 0 0;
            display: flex;
            height: var(--bottom-bar-h);
            padding: 0 var(--space-2);
            background: var(--nav-bg);
            border-top: var(--border-width) solid var(--border);
        }
        /* Icon above label; "Mehr" is a button, dressed like the links. */
        .bottom-bar > * {
            --btn-bg: transparent;
            --btn-bg-hover: transparent;
            --btn-border: transparent;
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--space-0);
            min-width: var(--target-min);
            height: auto;
            min-height: var(--target-min);
            padding: var(--space-1);
            border-radius: 0;
            color: var(--text-quiet);
            font-size: var(--text-xs);
            font-weight: var(--weight-medium);
            line-height: var(--leading-snug);
            text-decoration: none;
            white-space: nowrap;
        }
        /* svg.i is sized to its font size. */
        .bottom-bar svg.i { font-size: var(--text-lg); }
        .bottom-bar > :hover { color: var(--primary-hover); }
        .bottom-bar > :is([aria-current="page"], [data-current]) {
            color: var(--primary-hover);
            font-weight: var(--weight-semibold);
        }
        /* The bar ends at the window's edge, which would clip an outer ring. */
        .bottom-bar > :focus-visible { outline-offset: calc(var(--focus-width) * -1); }
    }

    /* ---------- Page head ----------
     * Every page: a back link (crumb macro) above, then the head: an optional
     * avatar, the title block (h1 or an editable title, with a .page-meta
     * line of facts) and the page's actions on the right. */
    .crumb { margin-bottom: var(--space-3); font-size: var(--text-sm); }
    .crumb a { text-decoration: none; }
    .page-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-5);
        margin-bottom: var(--space-4);
    }
    .page-head h1, .page-head .title-edit-h1 { margin: 0; }
    .page-head-title { flex: 1 1 12rem; min-width: 0; display: grid; gap: var(--space-2); justify-items: start; }
    .page-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2) var(--space-3);
        margin: 0;
        color: var(--text-muted);
        font-size: var(--text-sm);
    }
    .page-meta .badge { margin-left: 0; }
    /* The controls on the right: a filter form and the "New…" button. */
    /* Direct children only: a dialog opened from here keeps its own layout. */
    .page-head-actions, .page-head-actions > form {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
    }
    .page-head-actions:empty { display: none; }
    .page-head-actions > label, .page-head-actions > form > label {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
        color: var(--text-muted);
        font-size: var(--text-sm);
    }
    :is(.page-head-actions > label, .page-head-actions > form > label) > select { margin: 0; width: auto; }

    /* ---------- Page grids ---------- */
    /* Sidebar beside the main column (student, class, subject pages,
     * Kontrollen, curriculum); .split-end puts the sidebar on the right. Pages
     * tune it with --side-min / --side-max. One column below tablet width. */
    .split {
        display: grid;
        grid-template-columns: minmax(var(--side-min, 15rem), var(--side-max, 18rem)) minmax(0, 1fr);
        gap: var(--space-5);
        align-items: start;
    }
    .split-end { grid-template-columns: minmax(0, 1fr) minmax(var(--side-min, 15rem), var(--side-max, 18rem)); }
    @container content (max-width: 38rem) {
        .split, .split-end { grid-template-columns: minmax(0, 1fr); }
    }
    /* Tool and overview cards (start page, Werkzeuge). */
    .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); }
    /* A narrow page (create forms, error pages). */
    .narrow-page { max-width: 60rem; }
}