/* Students, classes and subjects: the record pages (profile header, facts
 * sidebar, field cards), guardians, groups, absences, the class roster and
 * its dialogs. */
@layer pages {
    /* ---------- Record header (page-head with an avatar) ---------- */
    /* The photo, or the initials in the accent tint when there is none. */
    .profile-avatar {
        flex: none;
        width: 5.5rem;
        height: 5.5rem;
        border-radius: var(--radius-round);
        object-fit: cover;
        box-shadow: 0 0 0 var(--border-thick) var(--surface), 0 0 0 5px var(--accent);
    }
    .profile-initials {
        display: grid;
        place-items: center;
        background: color-mix(in srgb, var(--accent) 18%, var(--surface));
        color: var(--accent-text);
        font-family: var(--font-head);
        font-size: var(--text-2xl);
        font-weight: var(--weight-semibold);
    }
    /* The "Heimweg" link (search.ch) at the end of the header facts. */
    .page-meta .profile-link { font-weight: var(--weight-semibold); text-decoration: none; }
    .page-meta .profile-link.muted { color: var(--text-muted); font-weight: var(--weight-regular); text-decoration: underline; }
    .profile-aside { position: sticky; top: var(--space-5); }
    .profile-aside h2, .field-card h2 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
    :is(.lp-areas, .danger-zone) h2 { font-size: var(--text-lg); }
    @container content (max-width: 38rem) {
        /* One column: the fields come first, the facts follow; the contact
         * card would repeat the Kontakt fields right above it. */
        .profile-aside { order: 2; position: static; }
        .profile-aside .contact-card { display: none; }
        .profile-avatar { width: 4rem; height: 4rem; }
        .profile-initials { font-size: var(--text-xl); }
    }
    .card-link { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }
    .contact-list { margin: 0; }
    .contact-list dt { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-regular); }
    .contact-list dd { margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
    .contact-list a { text-decoration: none; }
    .photo-form { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
    .photo-form input[type="file"] { padding: var(--space-1); }
    .photo-form button { width: 100%; }
    .profile-new { max-width: 60rem; }

    /* ---------- Field cards: denser forms with small muted captions ---------- */
    .field-card textarea { margin: 0; }
    .field-card .grid-form { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-3) var(--space-4); }
    .field-card .grid-form > label { color: var(--text-muted); font-size: var(--text-sm); }
    .field-card .grid-form > label > :is(input, textarea, select) { color: var(--text); }
    /* E-mail addresses need room; only where the card has three columns. */
    .field-card { container-type: inline-size; }
    @container (min-width: 34rem) {
        .field-card .grid-form > .span-2 { grid-column: span 2; }
    }
    /* Each legal guardian is its own autosaving grid, ruled off from the
     * next; its delete button starts its own line. */
    .field-card form.guardian { padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--border); }
    .field-card form.guardian > .row-delete { grid-column: 1 / -1; justify-self: start; }

    /* Student forms: the class checkboxes wrap as a row of options. */
    .student-classes { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-4); }
    .student-classes legend { margin-bottom: var(--space-1); line-height: var(--leading-snug); }
    .student-classes legend small { display: block; margin-top: var(--space-0); }

    /* ---------- Groups ---------- */
    /* The student's groups: a ticked chip per group (unticked = being left,
     * faded until reload), then the field that adds one. */
    .group-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
    .group-field legend { margin-bottom: var(--space-1); }
    .group-chips { display: contents; }
    label.group-chip { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; cursor: pointer; }
    label.group-chip:has(input:not(:checked)) { opacity: 0.5; text-decoration: line-through; }
    .group-field input[data-group-add] { flex: 0 1 14rem; width: auto; margin: 0; }
    /* The groups not taken yet, offered while "+ Gruppe" has focus. */
    .group-suggest { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: var(--space-1); }
    .group-suggestion {
        --btn-border: transparent;
        height: auto;
        padding: var(--space-0) var(--space-2);
        font-size: var(--text-sm);
        line-height: var(--leading-normal);
    }
    .group-suggestion::before { content: "+ "; }
    /* In a student-list row: small chips and a short field. */
    .group-cell { gap: var(--space-1); }
    .group-cell input[data-group-add] {
        flex: 0 1 7.5rem;
        min-width: 6rem;
        height: auto;
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-sm);
    }
    .chip-list form { margin: 0; }

    /* ---------- Absences ---------- */
    .abs-row { grid-template-columns: 9.5rem 3.5rem 3.5rem minmax(8rem, 1fr) 6rem 4rem 2rem; }
    .abs-row input[type="checkbox"] { justify-self: center; }
    .abs-head span:nth-child(n+2):not(:nth-child(4)) { text-align: center; }
    @container (max-width: 42rem) {
        .abs-row { grid-template-columns: 1fr auto auto auto; }
        .abs-row input[type="text"] { grid-column: 1 / -1; }
    }
    /* Totals: overall and one semester side by side, stacked when narrow. */
    .abs-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem)); gap: var(--space-4) var(--space-6); }
    .abs-group h3, .abs-semester { margin: 0 0 var(--space-2); }
    .abs-group h3 { line-height: 2; }
    .abs-semester select { height: auto; padding-block: var(--space-1); }

    /* ---------- Class page ---------- */
    .card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
    details.promote > summary h2 { display: inline; font-size: var(--text-lg); }
    .roster { container-type: inline-size; }
    .roster li {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) 0;
    }
    .roster-name { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: min(12rem, 50%); text-decoration: none; }
    /* A student's groups beside the name on a wide card, under it on a
     * narrow one (a long group name would cover the name). */
    .roster-groups { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }
    @container (max-width: 26rem) {
        .roster li { flex-wrap: wrap; }
        .roster-name { flex-basis: calc(100% - var(--space-8)); }
        .roster-groups { order: 3; flex-basis: 100%; justify-content: flex-start; padding-left: calc(var(--space-7) + var(--space-3)); }
    }
    /* Fächer tab: swatch and name, the code, the seating link at the end. */
    .class-subjects > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2) var(--space-3);
        padding-block: var(--space-2);
    }
    .class-subjects > li > :last-child { margin-left: auto; }
    /* Absenzen tab: the totals keep the student page's width. */
    .class-absences .stats { max-width: 22rem; }
    /* The "add students" checklist scrolls inside its dialog. */
    .enroll-dialog { --dialog-width: 32rem; }
    .enroll-list { max-height: 45vh; overflow-y: auto; margin: var(--space-2) 0; }
    .enroll-list label { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
    .enroll-list label small { margin-left: auto; }
    .enroll-list.only-free li.has-class { display: none; }
    .enroll-scope { font-size: var(--text-sm); }
    /* Class-list PDF dialog: empty columns, paper and orientation side by
     * side, then the fit hint (class-detail.js). */
    .class-list-page { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 0 var(--space-3); }
    @media (max-width: 39.99rem) {
        .class-list-page { grid-template-columns: 1fr 1fr; }
        .class-list-page label:last-child { grid-column: 1 / -1; }
    }
    .fit-hint { font-size: var(--text-sm); margin: 0 0 var(--space-4); }
    .fit-hint.fit-ok { color: var(--text-muted); }
    .fit-hint.fit-warn { color: var(--accent-text); }
    .fit-hint button { display: flex; height: auto; margin-top: var(--space-2); padding: var(--space-1) var(--space-3); }

    /* ---------- Subject swatch (subject page, class Fächer tab) ---------- */
    .subject-swatch {
        display: inline-block;
        width: 0.8em;
        height: 0.8em;
        margin-right: var(--space-2);
        border-radius: var(--radius-sm);
        background: var(--subject-color);
        vertical-align: 0.05em;
    }
}