/* Journal: the week toolbar and week note, the period × day grid with its
 * day heads and their popovers, and the lesson popup. */
@layer pages {
    /* ---------- Toolbar ----------
     * Calendar-app layout on one row: Today, a segmented prev/next group, the
     * week title (opens the date picker), actions pushed right. */
    .cal-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2) var(--space-3);
        margin-bottom: var(--space-4);
    }
    .cal-toolbar form { margin: 0; }
    .cal-toolbar .cal-actions { margin-left: auto; }
    /* The week title: a ghost button; the hidden date input sits under it so
     * the native picker anchors there. */
    .cal-jump { position: relative; }
    .cal-toolbar .cal-title {
        --btn-bg: transparent;
        --btn-bg-hover: var(--surface-sunken);
        --btn-border: transparent;
        --btn-text: var(--text);
        align-items: baseline;
        height: auto;
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-lg);
        line-height: var(--leading-tight);
    }
    .cal-week { font-weight: var(--weight-bold); }
    .cal-range { color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .cal-title svg { align-self: center; color: var(--text-muted); }
    .cal-toolbar input.cal-picker {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0;
        padding: 0;
        border: 0;
        opacity: 0;
        pointer-events: none;
    }

    /* The "Tagesinfos" menu (a .menu): checkboxes for the kinds of day info
     * to show. */
    .info-menu-panel label { display: flex; margin: 0; padding: var(--space-1) 0; font-size: var(--text-sm); white-space: nowrap; }

    /* The week's note: a strip between the toolbar and the grid, one line
     * that grows with its text. */
    .week-note { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
    .week-note label { margin: 0; font-weight: var(--weight-semibold); white-space: nowrap; }
    .week-note textarea { flex: 1; min-height: 2.2rem; field-sizing: content; }

    /* ---------- Grid ---------- */
    table.journal { table-layout: fixed; }
    table.journal th, table.journal td {
        padding: var(--space-2);
        border: var(--border-width) solid var(--border);
        vertical-align: top;
    }
    table.journal thead th, table.journal tbody th { background: var(--surface-sunken); }
    table.journal td { height: 3.4rem; }
    /* Row headers: wide enough for the German labels, hyphenated rather than
     * broken mid-word. */
    table.journal thead th:first-child { width: 6.5rem; }
    table.journal tbody th { hyphens: auto; overflow-wrap: normal; word-break: normal; }
    table.journal small { color: var(--text-muted); }
    /* The table is a grid, not a list: no row hover. */
    table.journal tbody tr:hover { background: none; }
    /* Weekend columns (Sa, So): a faint tint so the working week stays the
     * focus. :where() keeps it weakest, so tiles and holidays win. */
    table.journal thead th.weekend,
    table.journal :where(td:nth-child(n+7)) {
        background: color-mix(in srgb, var(--text-muted) 7%, transparent);
    }
    /* Today's column header: accent text and a bar on top, as calendars do. */
    table.journal thead th.today { color: var(--primary); box-shadow: inset 0 var(--border-thick) 0 var(--primary); }
    table.journal thead th.today .day-label small { color: var(--primary); font-weight: var(--weight-semibold); }
    /* A holiday's head: tinted, unless the "Tagesinfos" menu hides holidays. */
    :root:not([data-journal-hide~="holidays"], [data-journal-hide~="all"]) table.journal thead th.is-holiday {
        background: color-mix(in srgb, var(--accent-text) var(--tint-hover), transparent);
    }

    /* ---------- Day heads ----------
     * Each day head is a .menu (ui.js opens, closes, flips it) drawn as the
     * whole head instead of a button: the label, the holiday name and a
     * chip for each thing the day holds; no chevron. Its panel is the
     * day's popover, anchored to the head cell, never wider than the
     * window. */
    table.journal thead th + th { position: relative; padding: 0; }
    .day-pop { position: static; display: block; }
    .day-pop > summary { display: block; padding: var(--space-2); hyphens: auto; }
    .day-pop > summary::after { display: none; }
    /* Hover and open show as a bar under the head, not as a tint, so the
     * chips keep their contrast on a holiday's tinted head. */
    .day-pop > summary:hover { box-shadow: inset 0 calc(var(--border-thick) * -1) 0 var(--border-strong); }
    .day-pop[open] > summary { box-shadow: inset 0 calc(var(--border-thick) * -1) 0 var(--primary-fill); }
    .day-pop > summary:focus-visible { outline-offset: calc(var(--focus-width) * -1); }
    .day-label { display: block; }
    .day-pop :is(.day-tag, .day-chips, .menu-panel) { text-transform: none; letter-spacing: normal; }
    /* A chip wraps inside its column instead of cutting its label: on an
     * iPad the day columns are narrow and a cut label said nothing. The
     * label breaks between words (hyphenated), a Kontrolle's progress (its
     * second span) moves to the next line as a whole, and a chip of several
     * lines gets small corners instead of a pill. No chip widens its column
     * (the table is fixed). */
    .day-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
    .day-chips .chip { flex-wrap: wrap; max-width: 100%; border-radius: var(--radius-sm); white-space: normal; font-size: var(--text-xs); }
    .day-chips .chip > span:first-of-type { min-width: 0; hyphens: auto; overflow-wrap: break-word; }
    .day-chips .chip > span + span { white-space: nowrap; }
    .day-pop > .menu-panel {
        display: grid;
        gap: var(--space-3);
        width: 18rem;
        min-width: 0;
        max-width: calc(100vw - var(--space-4) * 2);
        padding: var(--space-3) var(--space-4) var(--space-4);
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--weight-regular);
    }
    .day-pop .menu-panel > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        color: var(--text-heading);
        font-size: var(--text-base);
    }
    .day-pop .menu-panel :is(h2, p) { margin: 0; }
    .day-pop .menu-panel h2 { margin-bottom: var(--space-1); font-size: var(--text-sm); }
    .day-pop .day-list > li + li { margin-top: var(--space-1); }
    .day-pop section > button { margin-top: var(--space-2); }

    /* The "Tagesinfos" menu hides a kind of day info: its chips, the holiday
     * name (and tint, above), the week note. boot.js and journal.js put the
     * hidden keys on <html>; "all" is the old single switch. */
    :root[data-journal-hide~="all"] :is(.day-pop > summary [data-info], .week-note),
    :root[data-journal-hide~="week-note"] .week-note,
    :root[data-journal-hide~="holidays"] .day-pop > summary [data-info="holidays"],
    :root[data-journal-hide~="appointments"] .day-pop > summary [data-info="appointments"],
    :root[data-journal-hide~="day-notes"] .day-pop > summary [data-info="day-notes"],
    :root[data-journal-hide~="absences"] .day-pop > summary [data-info="absences"],
    :root[data-journal-hide~="checklists"] .day-pop > summary [data-info="checklists"],
    :root[data-journal-hide~="birthdays"] .day-pop > summary [data-info="birthdays"],
    :root[data-journal-hide~="anniversaries"] .day-pop > summary [data-info="anniversaries"] {
        display: none;
    }

    /* Lesson tiles: occupied slots read as filled tiles with a primary edge;
     * a subject colour replaces it (set inline from a validated #RRGGBB). */
    table.journal td:has(a) {
        background: color-mix(in srgb, var(--primary) 9%, transparent);
        border-left: var(--border-thick) solid var(--primary-fill);
    }
    table.journal td:has(a) a { font-weight: var(--weight-medium); }
    table.journal td.has-subject {
        background: color-mix(in srgb, var(--subject-color) 15%, transparent);
        border-left: var(--border-thick) solid var(--subject-color);
    }
    /* A lesson without content yet (not prepared): no fill and a dashed
     * outline inside the cell (an outline: the collapsed table borders would
     * draw a dashed border solid). The legend under the grid explains it. */
    table.journal td.is-unprepared,
    .legend-tile.is-unprepared {
        background: none;
        outline: var(--border-width) dashed var(--text-muted);
        outline-offset: calc(var(--space-1) * -1);
    }
    table.journal td:has(.cell-place):hover { background: color-mix(in srgb, var(--primary) var(--tint-faint), transparent); }
    /* A tile's title (hyphenated at syllables in the narrow columns), then
     * the topic as a quiet second line. */
    table.journal .cell-title {
        margin-right: var(--space-1);
        font-size: var(--text-base);
        line-height: var(--leading-snug);
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
        text-decoration: none;
    }
    table.journal .cell-title:is(:hover, :focus-visible) { text-decoration: underline; }
    table.journal td:has(a) a.cell-title { color: var(--text-heading); }
    table.journal .cell-topic {
        display: block;
        margin-top: var(--space-0);
        hyphens: auto;
        overflow-wrap: break-word;
        line-height: var(--leading-snug);
        font-size: var(--text-sm);
    }
    table.journal td:has(a) .cell-topic { color: var(--muted-on-tint); }
    .cell-symbol { margin-left: var(--space-1); white-space: nowrap; }
    /* A lesson whose own from/to was edited off its period slot. */
    small.alt-time {
        display: block;
        margin-top: var(--space-0);
        color: var(--accent-text);
        font-weight: var(--weight-semibold);
        font-variant-numeric: tabular-nums;
        cursor: help;
    }
    /* The tile's "show lesson" eye and delete ×: quiet, bottom right. */
    table.journal :is(.cell-peek, .journal-remove) { float: right; margin: var(--space-1) 0 0 var(--space-1); }
    table.journal .cell-peek:is(:hover, :focus-visible) { --btn-text: var(--primary); }
    @media (hover: hover) {
        table.journal .journal-remove { opacity: 0; transition: opacity var(--duration-fast) ease; }
        table.journal td:hover .journal-remove,
        table.journal .journal-remove:focus-within { opacity: 1; }
    }
    /* Placing a subject into an empty slot: a "+" select. */
    .cell-place select { width: 100%; border: none; background: transparent; }
    .cell-place select:invalid { color: var(--text-muted); text-align: center; }
    /* Drag and drop: the moved tile fades, free cells show where it can go. */
    table.journal td[draggable="true"] { cursor: grab; }
    table.journal td.is-dragging { opacity: 0.45; }
    table.journal.is-dragging td[data-drop-date] { outline: var(--border-width) dashed var(--border-strong); outline-offset: -4px; }
    table.journal td.is-drop-target {
        background: color-mix(in srgb, var(--primary) 16%, transparent);
        outline: var(--focus-width) dashed var(--primary);
        outline-offset: -4px;
    }
    /* The lunch break (or a long Pause) before a period: a quiet strip
     * across the days, its time column left empty. */
    table.journal tr.long-break > * {
        height: auto;
        padding: var(--space-1) var(--space-2);
        background: var(--surface-sunken);
    }
    table.journal tr.long-break > td { color: var(--text-muted); font-size: var(--text-sm); text-align: center; }
    /* The legend under the grid: what a filled and a dashed tile mean. */
    .journal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
    .journal-legend > span { display: inline-flex; align-items: center; gap: var(--space-2); }
    .legend-tile {
        width: 1.4rem;
        height: 0.9rem;
        border-left: var(--border-thick) solid var(--primary-fill);
        background: color-mix(in srgb, var(--primary) 9%, transparent);
    }
    .legend-tile.is-unprepared { outline-offset: calc(var(--border-width) * -1); }

    /* ---------- Day information (popovers, Heute) ---------- */
    /* The absence dialog's half-days, side by side. */
    .absence-halves { display: flex; gap: var(--space-6); }
    /* A holiday's name. */
    .day-tag { display: block; font-weight: var(--weight-semibold); color: var(--accent-text); }
    /* Kontrollen due that day; muted once everyone is recorded. */
    .due-check:not(.is-complete) a { font-weight: var(--weight-semibold); }
    .due-check:not(.is-complete) small { color: var(--accent-text); font-weight: var(--weight-semibold); }
    .due-check.is-complete, .due-check.is-complete a { color: var(--text-muted); }

    /* ---------- Lesson popup ---------- */
    .lesson-peek-dialog { --dialog-width: 40rem; }
    .lesson-peek-dialog .peek-head h3 { margin-bottom: var(--space-1); }
    .peek-head p { margin-bottom: var(--space-5); }
    .peek-section + .peek-section { margin-top: var(--space-5); }
    .peek-section h4 { margin-bottom: var(--space-1); }
    .peek-media li { margin-bottom: var(--space-2); }
    .peek-media .rich-view { margin-top: var(--space-1); font-size: var(--text-sm); }

    /* ---------- Phones: the time column plus one day ----------
     * journal.js sets data-day; the switcher above the grid changes it. */
    .day-switch { display: none; }
    @media (max-width: 39.99rem) {
        .day-switch:not([hidden]) {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-3);
        }
        table.journal tr > :nth-child(n+2) { display: none; }
        table.journal[data-day="0"] tr > :nth-child(2),
        table.journal[data-day="1"] tr > :nth-child(3),
        table.journal[data-day="2"] tr > :nth-child(4),
        table.journal[data-day="3"] tr > :nth-child(5),
        table.journal[data-day="4"] tr > :nth-child(6),
        table.journal[data-day="5"] tr > :nth-child(7),
        table.journal[data-day="6"] tr > :nth-child(8) { display: table-cell; }
        /* The lunch divider spans the week, so it stays whichever day is
         * shown; the shown day claims the full width. */
        table.journal tr.long-break > td { display: table-cell; }
        table.journal thead th:not(:first-child) { width: 100%; }
        table.journal thead th:first-child { width: 6rem; }
    }
}