/* Lessons: the list (course folders), the lesson editor (header, time
 * picker, phases, symbols, due homework, print picks) and the "carry over
 * from the previous lesson" review page. */
@layer pages {
    /* ---------- Course folders (lesson list, grouped by course) ---------- */
    .course-folder { margin-bottom: var(--space-3); overflow: hidden; }
    /* The folder header: the course, then its lesson count and the chevron
     * at the right edge. */
    .course-folder > summary {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        font-family: var(--font-head);
        font-weight: var(--weight-semibold);
    }
    .course-folder > summary:hover { background: color-mix(in srgb, var(--primary) var(--tint-hover), transparent); }
    .course-folder[open] > summary { margin-bottom: 0; border-bottom: var(--border-width) solid var(--border); }
    .course-folder > summary::after { float: none; margin-left: 0; }
    .folder-count { margin-left: auto; font-family: var(--font-body); }
    /* Lesson rows: one link each; title left, the date in a fixed slot on
     * the right so dates line up across folders. */
    .lesson-row {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-4);
        color: var(--text);
        text-decoration: none;
    }
    .lesson-row:hover { color: var(--text); background: color-mix(in srgb, var(--primary) 7%, transparent); }
    .lesson-row .lesson-title { color: var(--primary); font-weight: var(--weight-medium); }
    .lesson-row.is-past .lesson-title { color: var(--text-muted); font-weight: var(--weight-regular); }
    .lesson-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .row-symbol { margin-right: var(--space-1); }
    /* While searching: the hit's context under the title. */
    .lesson-excerpt {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text-muted);
        font-size: var(--text-sm);
        font-weight: var(--weight-regular);
    }
    .lesson-date {
        flex: none;
        min-width: 6rem;
        text-align: right;
        white-space: nowrap;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    /* ---------- Lesson editor ---------- */
    /* The title with its symbol button beside it. */
    .lesson-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
    /* The ‹ › series links, beside the year-plan link in the page head. */
    .series-nav { display: flex; gap: var(--space-3); }
    /* The period choice ("Doppellektion Nachmittag · 13:30–15:05") and its
     * button need two columns once the form has them. The container is the
     * panel around the form, never the grid itself: older iPad Safari lays
     * out a grid with `container-type` at zero width. */
    .lesson-panel { container-type: inline-size; }
    @container (min-width: 23rem) {
        .grid-form > .lesson-time { grid-column: span 2; }
    }
    .lesson-time-row { display: flex; gap: var(--space-2); margin-top: var(--space-1); font-variant-numeric: tabular-nums; }
    .lesson-time-row select { flex: 1; margin: 0; }
    .grid-form > .time-pair { display: contents; }
    .grid-form > .time-pair[hidden] { display: none; }
    /* Read-only values (the subject's area): no field chrome. */
    .lesson-form input[readonly] {
        border-color: transparent;
        box-shadow: none;
        color: var(--text-muted);
        cursor: default;
    }
    /* The symbol button: a dashed "+ Symbol" until one is chosen. */
    .symbol-pick {
        --btn-bg: transparent;
        --btn-bg-hover: transparent;
        --btn-border: var(--border-strong);
        --btn-text: var(--text-muted);
        height: auto;
        padding: var(--space-1) var(--space-2);
        border-style: dashed;
        font-size: var(--text-sm);
    }
    .symbol-pick:hover { --btn-border: var(--primary); --btn-text: var(--primary); }
    .symbol-pick.has-symbol { padding: var(--space-0); --btn-border: transparent; }
    .symbol-pick img.symbol-icon { height: 2.6rem; }
    .symbol-pick.has-symbol .symbol-placeholder { display: none; }
    /* 204 pictures in rows of up to six; rows sit side by side as space
     * allows, and the list scrolls. */
    .symbol-dialog { --dialog-width: 64rem; }
    .symbol-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
        gap: 0 var(--space-4);
        max-height: 60vh;
        overflow-y: auto;
    }
    .symbol-row { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1) 0; border-bottom: var(--border-width) solid var(--border); }
    .symbol-choice {
        --btn-bg: transparent;
        --btn-bg-hover: color-mix(in srgb, var(--primary) 10%, transparent);
        --btn-border: transparent;
        height: auto;
        padding: var(--space-1);
        border-width: var(--focus-width);
        border-radius: var(--radius-sm);
        line-height: 0;
    }
    .symbol-choice[aria-pressed="true"] { --btn-border: var(--primary); }
    .symbol-choice img.symbol-icon { height: 2.6rem; }
    /* Phases (Lektionsverlauf): each one a form with a quiet left edge. */
    .phase { border-left: var(--border-thick) solid var(--border); padding-left: var(--space-3); }
    .phase-no { margin: 0; font-weight: var(--weight-semibold); color: var(--text-muted); font-size: var(--text-sm); }
    /* Homework from earlier lessons that is due today, on top. */
    .due-homework h2 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
    .due-homework li + li { margin-top: var(--space-2); }
    .due-homework-text { margin: 0; white-space: pre-line; }
    .homework-due small { display: block; margin-top: var(--space-1); color: var(--text-muted); }
    /* The "im PDF" checkbox before each section caption (print_pick). */
    input.print-pick[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin: 0 var(--space-2) 0 0; vertical-align: -0.12rem; }
    .print-pick-hint { align-self: center; }

    /* ---------- "Von Vorlektion übernehmen" review ----------
     * Per conflicting field: current and previous content side by side
     * (stacked on narrow screens), then overwrite / append / keep. */
    .carry-field { margin-bottom: var(--space-6); }
    .carry-field legend { font-weight: var(--weight-semibold); }
    .carry-compare {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: var(--space-3);
        margin-bottom: var(--space-2);
    }
    .carry-caption { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
    .carry-box {
        max-height: 16rem;
        overflow-y: auto;
        padding: var(--space-2) var(--space-3);
        border: var(--border-width) solid var(--border);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
    }
    .carry-phase + .carry-phase { margin-top: var(--space-2); padding-top: var(--space-2); border-top: var(--border-width) dashed var(--border); }
    .carry-phase small { display: block; color: var(--text-muted); }
    .carry-choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
    .carry-choices label { margin: 0; }
}