/* Kontrollen (checklists.html, student_checklists.html): the list of a
 * class's checklists beside one checklist's rows. */
@layer pages {
    .checklist-grid { --side-max: 19rem; }
    .checklist-list { margin-bottom: var(--space-3); }
    .checklist-title { font-weight: var(--weight-semibold); }
    .check-row.is-marked :is(.check-num, .check-meta) { color: var(--muted-on-tint); }
    .checklist-marked { color: var(--accent-text); font-weight: var(--weight-semibold); }
    .checklist-overdue { color: var(--danger-text); font-weight: var(--weight-semibold); }
    /* A student's number of marked entries, beside the name. */
    .check-total { justify-content: center; min-width: 1.6em; margin-left: var(--space-1); }
    .checklist-new summary { color: var(--primary); font-weight: var(--weight-semibold); }
    .checklist-new form { margin-top: var(--space-3); }
    /* A checklist's title, subject and due date follow their card's width:
     * one column, then subject and date side by side under the title, then
     * all three on one line. The card is the container, a plain block. */
    .checklist-panel { container-type: inline-size; }
    .checklist-head { grid-template-columns: minmax(0, 1fr); }
    @container (min-width: 20rem) {
        .checklist-head { grid-template-columns: minmax(10rem, 1fr) minmax(9rem, 1fr); }
        .checklist-head > .checklist-head-title { grid-column: 1 / -1; }
    }
    @container (min-width: 34rem) {
        .checklist-head { grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) minmax(9rem, 1fr); }
        .checklist-head > .checklist-head-title { grid-column: auto; }
    }
    .checklist-fill { align-items: center; }
    .checklist-fill label { flex: none; margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
    .checklist-fill input[type="text"] { flex: 0 1 14rem; }

    /* One autosaving form per row on a shared grid that follows the table's
     * width: one line per student where there is room, else name + Markieren
     * above Inhalt + Bemerkung, and three lines on a phone. */
    .check-table { container-type: inline-size; }
    .check-row {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr) auto;
        grid-template-areas: "num name mark" "num content content" "num note note";
        gap: var(--space-1) var(--space-2);
        align-items: center;
        margin: 0;
        padding: var(--space-1) var(--space-2);
        border-bottom: var(--border-width) solid var(--border);
    }
    .check-row.student-check-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name mark" "content content" "note note";
    }
    .check-num { grid-area: num; align-self: start; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
    .check-name { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
    .check-content { grid-area: content; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; }
    .check-row input[type="checkbox"] { grid-area: mark; margin: 0 auto; }
    .check-row > input[name="note"] { grid-area: note; }
    .check-row input[type="text"] { height: auto; padding: var(--space-1) var(--space-2); }
    .check-row .check-content input[type="text"] { flex: 1 1 5rem; min-width: 4rem; }
    .check-meta { display: block; color: var(--text-muted); }
    /* The header row sits in the autosave rows' gutter, so its columns line
     * up with theirs. */
    .check-head {
        display: none;
        margin-left: calc((var(--space-2) + var(--border-thick)) * -1);
        border-left: var(--border-thick) solid transparent;
        color: var(--text-muted);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
    }
    .check-head:not(.student-check-row) > span:first-child { text-align: right; }
    @container (min-width: 27.5rem) {
        .check-row {
            grid-template-columns: 2rem minmax(0, 2.4fr) minmax(0, 1fr) auto;
            grid-template-areas: "num name name mark" "num content note note";
        }
        .check-row.student-check-row {
            grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) auto;
            grid-template-areas: "name name mark" "content note note";
        }
    }
    /* A student row needs 41.5rem of columns, 1.5rem of gaps and the
     * padding, so 44rem keeps both row kinds inside the table. */
    @container (min-width: 44rem) {
        .check-row {
            grid-template-columns: 2rem minmax(8rem, 1fr) minmax(17rem, 1.8fr) 5.5rem minmax(8rem, 1.2fr);
            grid-template-areas: "num name content mark note";
        }
        .check-row.student-check-row {
            grid-template-columns: minmax(11rem, 1.4fr) minmax(17rem, 1.8fr) 5.5rem minmax(8rem, 1.2fr);
            grid-template-areas: "name content mark note";
        }
        .check-head { display: grid; }
        .check-head > span { grid-area: auto; }
        .check-num { align-self: center; }
    }
    /* Marked for follow-up: an accent tint, like the old planner's yellow rows. */
    .check-row.is-marked { background: color-mix(in srgb, var(--accent) var(--tint-selected), transparent); }
    /* Quick picks: small outlined pills that take the row's text colour. */
    .check-quick { display: inline-flex; flex-wrap: wrap; flex: 0 1 auto; min-width: 0; gap: var(--space-1); }
    .check-quick button {
        --btn-bg: transparent;
        --btn-bg-hover: color-mix(in srgb, var(--primary) var(--tint-hover), transparent);
        --btn-border: var(--border-strong);
        --btn-text: var(--text);
        height: auto;
        padding: var(--space-0) var(--space-2);
        border-radius: var(--radius-pill);
        font-size: var(--text-sm);
    }
}