/* Start page (getting started; its setup steps also on Heute), Heute, setup
 * and Werkzeuge (countdown). */
@layer pages {
    /* ---------- Getting started ----------
     * The setup steps as a checklist: an open ring, a filled tick once done,
     * and the next step on the accent tint with its button. */
    .start-setup .panel-head { flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
    .start-setup progress { margin: var(--space-2) 0 var(--space-4); }
    .setup-steps { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
    .setup-steps li {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border: var(--border-width) solid var(--border);
        border-radius: var(--radius-md);
    }
    .setup-steps li::before {
        content: "";
        flex: none;
        width: 1.25rem;
        height: 1.25rem;
        margin-top: var(--space-0);
        border: var(--focus-width) solid var(--text-muted);
        border-radius: var(--radius-round);
    }
    .setup-steps li.done::before {
        border-color: var(--ok);
        background: var(--ok);
        /* A tick cut out of the filled circle, in the theme's colour. */
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20a10 10 0 0 1 0-20zm4.3 6.3-5.6 5.6-2.6-2.6-1.4 1.4 4 4 7-7z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20a10 10 0 0 1 0-20zm4.3 6.3-5.6 5.6-2.6-2.6-1.4 1.4 4 4 7-7z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    .setup-steps li.done :is(strong, a) { color: var(--text-muted); }
    .setup-steps li.next {
        background: color-mix(in srgb, var(--accent) 10%, var(--surface));
        border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    }
    .setup-steps li.next::before { border-color: var(--accent-text); }
    .setup-steps p { margin: var(--space-0) 0 0; font-size: var(--text-sm); }
    .setup-steps .chip { margin-right: var(--space-2); }
    .setup-steps a.button { margin-top: var(--space-3); }
    .setup-steps a:not(.button) { text-decoration: none; }
    .start-areas { margin-bottom: var(--space-5); }
    .start-areas .card .muted { font-size: var(--text-sm); }
    .shortcuts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
    .shortcuts :is(dt, dd) { margin: 0; }
    /* Touch-only devices have no keyboard to press them on. */
    @media (hover: none) and (pointer: coarse) { .start-keys { display: none; } }

    /* ---------- Heute ----------
     * The day's lessons as an agenda: a time column, then a card tinted by
     * the subject's colour (set inline from a validated #RRGGBB). Over
     * lessons go quiet, the running one (aria-current="time") gets a primary
     * ring, an unprepared one a dashed frame; free periods and breaks are
     * quiet lines between.
     * The rest of the day sits in one panel beside it (.split-end). */
    .today-layout { --side-max: 20rem; }
    .today-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-1) var(--space-3);
        font-size: var(--text-lg);
    }
    .today-heading .meta { font-weight: var(--weight-regular); }
    .agenda {
        --agenda-time: 3.5rem;
        display: grid;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .agenda > li { margin-block: 0; }
    .agenda-item { display: grid; grid-template-columns: var(--agenda-time) minmax(0, 1fr); gap: var(--space-3); }
    .agenda-time {
        display: grid;
        align-content: start;
        padding-top: var(--space-2);
        line-height: var(--leading-snug);
        font-variant-numeric: tabular-nums;
    }
    .agenda-time strong { color: var(--text-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
    .agenda-time small { color: var(--text-muted); font-size: var(--text-xs); }
    .agenda-card {
        --subject-color: var(--primary-fill);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2) var(--space-4);
        min-width: 0;
        padding: var(--space-3) var(--space-4);
        border: var(--border-width) solid color-mix(in srgb, var(--subject-color) 30%, transparent);
        border-left: var(--border-thick) solid var(--subject-color);
        border-radius: var(--radius-md);
        background: color-mix(in srgb, var(--subject-color) 9%, var(--surface));
    }
    .agenda-main { flex: 1 1 12rem; display: grid; gap: var(--space-0); min-width: 0; }
    .agenda-context { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
    .agenda-title { color: var(--text-heading); font-weight: var(--weight-semibold); text-decoration: none; overflow-wrap: anywhere; }
    .agenda-title:is(:hover, :focus-visible) { text-decoration: underline; }
    .agenda-topic { color: var(--text-muted); font-size: var(--text-sm); }
    .agenda-side {
        display: flex;
        margin-left: auto; /* stays right when wrapped under the title */
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-2) var(--space-3);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }
    .agenda-item.is-unprepared .agenda-card { border-style: dashed; background: var(--surface); }
    .agenda-item.is-past .agenda-card {
        border-color: var(--border);
        border-left-color: color-mix(in srgb, var(--subject-color) 40%, var(--border));
        background: var(--surface);
    }
    .agenda-item.is-past :is(.agenda-title, .agenda-time strong, .status-ok) { color: var(--text-muted); }
    .agenda-item[aria-current="time"] .agenda-card {
        border-color: var(--primary);
        box-shadow: 0 0 0 var(--border-width) var(--primary);
    }
    .agenda-item[aria-current="time"] .agenda-time strong { color: var(--primary); }
    .agenda-item.is-free .agenda-card {
        display: block;
        padding-block: var(--space-2);
        border: var(--border-width) dashed var(--border);
        background: transparent;
        color: var(--text-muted);
        font-size: var(--text-sm);
    }
    .agenda-break {
        margin-left: calc(var(--agenda-time) + var(--space-3));
        padding: var(--space-1);
        border-radius: var(--radius-md);
        background: color-mix(in srgb, var(--text-muted) 8%, transparent);
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        text-align: center;
    }
    /* The side panel: one section per kind, ruled off from each other
     * (child selectors: the absence dialog inside keeps its own look). A
     * ticked to-do reads as done until the page reloads. */
    .today-side > section + section {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: var(--border-width) solid var(--border);
    }
    .today-side > section > h2 { margin-bottom: var(--space-2); font-size: var(--text-base); }
    .today-side > section > :is(p, .list) { margin-bottom: var(--space-2); }
    .today-side > section > :last-child { margin-bottom: 0; }
    .today-side > section > .list > li { padding-block: var(--space-1); }
    .today-side label.checkbox:has(:checked) { color: var(--text-muted); text-decoration: line-through; }

    /* ---------- Setup: current-year badges beside the year title ---------- */
    .year-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
    .year-status button { height: auto; padding: var(--space-1) var(--space-3); }

    /* ---------- Werkzeuge: countdown ----------
     * A wide card with a large display, preset pills, Min:Sek entry and the
     * Start/Pause toggle; time's up pulses red (like the sidebar timer). */
    @media (min-width: 40rem) { .card-wide { grid-column: span 2; } }
    .countdown .cd-display { font-size: var(--text-display); }
    .countdown.running .cd-display { color: var(--primary); }
    .countdown .cd-done-label { display: none; color: var(--danger-text); font-weight: var(--weight-semibold); }
    .countdown.done .cd-done-label { display: inline; }
    .countdown.done .cd-display { color: var(--danger-text); animation: timer-pulse 1s ease-in-out infinite; }
    .cd-presets, .cd-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
    .cd-preset {
        --btn-bg: transparent;
        --btn-bg-hover: color-mix(in srgb, var(--primary) 10%, transparent);
        --btn-border: var(--border);
        --btn-text: var(--primary);
        padding: 0 var(--space-3);
        border-radius: var(--radius-pill);
        font-variant-numeric: tabular-nums;
    }
    .cd-entry { display: flex; align-items: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
    .cd-entry label { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
    .cd-entry input { width: 6rem; font-variant-numeric: tabular-nums; }
    .cd-colon { padding-bottom: var(--space-2); font-weight: var(--weight-semibold); }
}