/* Planning pages: a topic's objectives, the lesson's topic cards, the PHSG
 * planning, year plans, the Mediathek form and the settings page. */
@layer pages {
    /* ---------- A topic's objectives (#121) ----------
     * Nr, Kurztitel and Titel over the Bemerkungen on the left, the Lernziel
     * beside them, then Stufe, Sprache and delete; the "new" form last on the
     * same grid. Narrow cards stack the parts. */
    .objective-row {
        grid-template-columns: 4.25rem 6rem minmax(0, 1fr) minmax(0, 2fr) 5.5rem 4.5rem 2rem;
        grid-template-areas:
            "nr short title text level lang del"
            "notes notes notes text . . .";
        /* A tall Lernziel grows the Bemerkungen row, not the first one. */
        grid-template-rows: auto 1fr;
        align-items: start;
    }
    .objective-row.record-head { grid-template-areas: "nr short title text level lang del"; grid-template-rows: auto; }
    .objective-row textarea { field-sizing: content; }
    .objective-row :is(.o-nr, [name=number]) { grid-area: nr; }
    .objective-row :is(.o-short, [name=short_title]) { grid-area: short; }
    .objective-row :is(.o-title, [name=title]) { grid-area: title; }
    .objective-row :is(.o-text, [name=text]) { grid-area: text; align-self: stretch; }
    .objective-row :is(.o-level, [name=level]) { grid-area: level; }
    .objective-row :is(.o-lang, [name=language]) { grid-area: lang; }
    .objective-row [name=notes] { grid-area: notes; align-self: stretch; }
    .objective-row > button { grid-area: del; }
    .objective-new {
        grid-template-areas:
            "nr short title text level lang ."
            "notes notes notes text del del del";
        margin-top: var(--space-3);
    }
    .objective-new > button { justify-self: end; align-self: end; }
    @container (max-width: 42rem) {
        .objective-row, .objective-new {
            grid-template-columns: 4.75rem minmax(0, 1fr) minmax(0, 1fr) auto;
            grid-template-areas:
                "nr short short del"
                "title title title title"
                "text text text text"
                "notes notes notes notes"
                "level level lang lang";
            grid-template-rows: none;
        }
    }
    /* The lesson's topics: each card lists its objectives and Kompetenzstufen. */
    .topic-objectives { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
    .topic-objectives li { margin-bottom: var(--space-0); }
    .topic-ks { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-1) 0 0; }

    /* ---------- PHSG planning ---------- */
    /* "Anzahl Schüler": Knaben + Mädchen = Total on one line. */
    .phsg-pupils { display: flex; align-items: end; gap: var(--space-2); margin-bottom: var(--space-3); }
    .phsg-pupils :is(legend, label) { color: var(--text-muted); font-size: var(--text-sm); }
    .phsg-pupils legend { margin-bottom: var(--space-1); }
    .phsg-pupils label { margin: 0; flex: 1 1 0; min-width: 0; }
    .phsg-pupils output {
        display: flex;
        align-items: center;
        height: var(--control-h);
        margin-top: var(--space-1);
        font-size: var(--control-text);
        font-weight: var(--weight-semibold);
        color: var(--text);
    }
    /* Until the card has three columns the group takes a full row, or its
     * number inputs get too narrow to show their values. */
    @container (max-width: 33.99rem) {
        .field-card .grid-form > .phsg-pupils { grid-column: 1 / -1; }
    }
    .phsg-op { display: flex; align-items: center; height: var(--control-h); font-weight: var(--weight-semibold); color: var(--text-muted); }
    .phsg-prereqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 var(--space-4); }
    .phsg-prereqs label { margin-bottom: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }
    .phsg-prereqs textarea { color: var(--text); }
    /* The Unterrichtsreihe: the lessons' table, then "+ Lektion" and the
     * existing-lesson picker on one line. */
    table.phsg-series td:last-child { text-align: right; white-space: nowrap; }
    table.phsg-series .phsg-time { white-space: nowrap; }
    table.phsg-series form { margin: 0; }
    .phsg-row-actions a.secondary { height: auto; padding: var(--space-0) var(--space-2); font-size: var(--text-sm); vertical-align: middle; }
    .phsg-series-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
    .phsg-attach { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; min-width: 0; max-width: 100%; }
    .phsg-attach select { flex: 1 1 14rem; width: auto; }
    /* A series lesson's picks from its planning: two lists of checkboxes. */
    form.phsg-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-4) var(--space-6); margin: 0 0 var(--space-3); }
    .phsg-links legend { margin-bottom: var(--space-2); font-weight: var(--weight-semibold); }
    label.phsg-pick { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); }
    label.phsg-pick .chip { flex: none; }
    /* "HA auf diese Lektion": read-only, from the previous series lesson. */
    .phsg-homework-in p { margin: var(--space-1) 0 0; white-space: pre-line; }

    /* ---------- Year plans: 53 week rows ---------- */
    .plan-subjects { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin-bottom: var(--space-3); }
    .plan-subjects legend { margin-bottom: var(--space-1); }
    .plan-subjects label { margin: 0; }
    .plan-year { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-1) var(--space-4); margin-top: var(--space-4); }
    .plan-year label { margin: 0; }
    :is(.plan-year, td.plan-copy) select { width: auto; }
    table.plan-weeks { font-size: var(--text-sm); }
    table.plan-weeks :is(th, td) { padding: var(--space-1) var(--space-2); }
    table.plan-weeks td:nth-child(3), table.plan-weeks td:nth-child(4) { width: 26%; }
    table.plan-weeks td:nth-child(5) { width: 32%; }
    table.plan-weeks form { margin: 0; }
    table.plan-weeks textarea {
        height: auto;
        min-height: 2rem;
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-sm);
        field-sizing: content;
    }
    table.plan-weeks .plan-date { white-space: nowrap; }
    /* A link to a week (#week-N) leaves the week before it in view. */
    table.plan-weeks tr[id] { scroll-margin-top: var(--space-8); }
    table.plan-weeks tr.is-current > td { background: color-mix(in srgb, var(--primary) var(--tint-hover), transparent); }
    table.plan-weeks tr.is-current .plan-date a { font-weight: var(--weight-bold); }
    .plan-topics { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
    .plan-topic {
        display: inline-flex;
        align-items: center;
        gap: var(--space-0);
        white-space: nowrap;
        color: inherit;
        background: color-mix(in srgb, var(--primary) var(--tint-selected), transparent);
    }
    .plan-topic a { color: inherit; text-decoration: none; }
    .plan-topic form { display: inline; }
    .plan-add select {
        width: auto;
        max-width: 12rem;
        height: auto;
        padding: var(--space-0) var(--space-7) var(--space-0) var(--space-2);
        font-size: var(--text-sm);
    }

    /* ---------- Mediathek form ----------
     * Title and location (often a long URL) get twice the room of the short
     * fields: Titel | Art | Fach over Ort/URL | Bewertung | Dauer. */
    @container content (min-width: 50rem) {
        form.media-grid { grid-template-columns: 2fr 1fr 2fr 1fr; }
        .field-card form.media-grid { grid-template-columns: 2fr 1fr 1fr; }
    }

    /* ---------- Settings: the optional areas, each a checkbox with its hint ---------- */
    .settings-modules { margin-bottom: var(--space-3); }
    .settings-modules legend { margin-bottom: var(--space-1); }
    .settings-modules label { margin: 0; }
    .settings-modules small { display: block; margin-top: var(--space-1); }
}