/* A departures board: monospaced times and labels, hairlines, square corners, one amber signal
   colour for "now", a coloured rail per kind of class, and the room on a plate like a gate number.
   Everything is sized in rem, and the root size follows the window, so it scales with the screen. */

:root {
    color-scheme: light dark;
    --mono:
        ui-monospace, 'JetBrains Mono', 'Cascadia Mono', 'SF Mono', 'Roboto Mono', Menlo, Consolas, 'DejaVu Sans Mono',
        monospace;
    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bg: #f1eee7;
    --surface: #faf8f3;
    --raised: #fff;
    --line: #d8d3c7;
    --text: #15171a;
    --muted: #61666e;
    --accent: #ffb224;
    /* The accent as text or a thin line, where amber on paper would be too faint. */
    --accent-ink: #8f4c00;
    --on-accent: #1d1400;
    --danger: #b3261e;
    --plate: #15171a;
    --on-plate: #fff;
    --board: #15171a;
    --board-text: #f1eee7;
    --board-muted: #a5aab2;
    --w: #1d5fc4;
    --c: #12784d;
    --l: #6741d9;
    --p: #b62f7e;
    --s: #0b7785;
    --wf: #b5501b;
    --head: 2.4rem;
    font-size: clamp(14px, 12.4px + 0.32vw, 18px);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0d10;
        --surface: #111418;
        --raised: #171b21;
        --line: #272c35;
        --text: #e9ebee;
        --muted: #8b93a1;
        --accent-ink: #ffb224;
        --danger: #ff6b5e;
        --plate: #e9ebee;
        --on-plate: #0b0d10;
        --board: #171b21;
        --board-text: #e9ebee;
        --board-muted: #8b93a1;
        --w: #62a8ff;
        --c: #45d19a;
        --l: #b79bff;
        --p: #ff8fc7;
        --s: #4dd6e6;
        --wf: #ff9d6b;
    }
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

::selection {
    background: var(--accent);
    color: var(--on-accent);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 0.94rem/1.4 var(--sans);
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button {
    min-height: 2.25rem;
    padding: 0 0.8rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--raised);
    font: 600 0.72rem/1 var(--mono);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
}

button:hover:not(:disabled) {
    border-color: var(--accent-ink);
}

button:disabled {
    opacity: 0.35;
    cursor: default;
}

:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 2px;
}

.link {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-ink);
    font: inherit;
    letter-spacing: 0;
    text-decoration: underline;
    text-transform: none;
}

a {
    color: var(--accent-ink);
}

/* Header */

.bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: max(0.55rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.55rem
        max(1rem, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.bar h1 {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 auto 0 0;
    font: 700 0.92rem/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mark {
    width: 0.62em;
    height: 0.62em;
    background: var(--accent);
}

.bar small {
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
}

.bar nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

#prev,
#next,
dialog header button {
    flex: none;
    width: 2.25rem;
    padding: 0;
    font-size: 1rem;
}

#weekLabel {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: 0.5rem;
    font: 600 0.85rem/1 var(--mono);
    font-variant-numeric: tabular-nums;
}

/* Week A is a solid plate, week B an outlined one: readable at a glance, and without colour. */
#weekLabel b {
    padding: 0.42rem 0.5rem;
    border: 1px solid var(--accent-ink);
    border-radius: 2px;
    color: var(--accent-ink);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#weekLabel .a {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.days {
    display: none;
}

/* The room plate, the gate number of a class */

.plate {
    display: grid;
    flex: none;
    justify-items: center;
    align-content: start;
    min-width: 2.8em;
    padding: 0.25em 0.45em 0.28em;
    border-radius: 3px;
    background: var(--plate);
    color: var(--on-plate);
    font: 700 0.8rem/1.15 var(--mono);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.plate small {
    font-size: 0.68em;
    font-weight: 600;
    opacity: 0.75;
}

.plate.online {
    background: none;
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--muted);
    font-size: 0.66rem;
    text-transform: uppercase;
}

/* Now and next */

.board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 0.5rem;
    padding: 0.75rem max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
}

.slot {
    --k: var(--muted);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        'label label plate'
        'time subject plate'
        'time meta plate'
        'time actions plate';
    align-items: baseline;
    gap: 0.15rem 0.9rem;
    padding: 0.6rem 0.8rem 0.7rem;
    overflow: hidden;
    border-left: 4px solid var(--k);
    border-radius: 4px;
    background: var(--board);
    color: var(--board-text);
}

/* Covers the whole slot, so tapping anywhere opens the details; the links are raised above it. */
.slot .open {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
}

.slot .open:focus-visible {
    outline-offset: -3px;
}

.slot .actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    grid-area: actions;
    gap: 0.35rem 1rem;
    margin-top: 0.3rem;
    font: 600 0.72rem var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.slot .actions a {
    color: var(--accent);
}

.slot .label b {
    margin-left: 0.6rem;
    padding: 0.05rem 0.35rem;
    border-radius: 2px;
    background: var(--danger);
    color: #fff;
}

.slot .label {
    grid-area: label;
    color: var(--accent);
    font: 700 0.66rem/1.3 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.slot .time {
    grid-area: time;
    font: 700 1.15rem/1.2 var(--mono);
    font-variant-numeric: tabular-nums;
}

.slot .subject {
    grid-area: subject;
    font-weight: 650;
}

.slot .meta {
    grid-area: meta;
    color: var(--board-muted);
    font-size: 0.82rem;
}

.slot .plate {
    grid-area: plate;
    align-self: center;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 1.05rem;
}

.slot .plate.online {
    background: none;
    box-shadow: inset 0 0 0 1px var(--board-muted);
    color: var(--board-text);
    font-size: 0.7rem;
}

/* How much of the class on now is over. */
.slot.live::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--done);
    height: 3px;
    background: var(--accent);
    content: '';
}

.alert {
    margin: 0.75rem 1rem 0;
    padding: 0.55rem 0.75rem;
    border-left: 3px solid var(--accent);
    background: var(--raised);
    font-size: 0.9rem;
}

/* Shared changes to my classes since I last looked: red, like the changes themselves. */
.alert.fresh {
    border-left-color: var(--danger);
}

.alert .link {
    font-weight: 600;
}

.upcoming {
    margin: 0.75rem max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
}

.upcoming h2 {
    margin: 0 0 0.3rem;
    color: var(--muted);
    font: 600 0.68rem/1.4 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.upcoming ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.upcoming .link {
    color: var(--text);
    font-size: 0.88rem;
    text-decoration: none;
}

.upcoming .link:hover {
    text-decoration: underline;
}

.upcoming b {
    margin-right: 0.3rem;
    padding: 0.05rem 0.35rem;
    border-radius: 2px;
    background: var(--danger);
    color: #fff;
    font: 700 0.64rem/1.3 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The week: a timeline that fills the window below the header, from 4.6 to 11 px per 5 minutes */

.week {
    display: grid;
    grid-template-columns: 2.6rem;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0 0.5rem;
    padding: 0.75rem max(1rem, env(safe-area-inset-right)) 0.5rem max(1rem, env(safe-area-inset-left));
}

.empty {
    grid-column: 1 / -1;
    margin: 3rem 0;
    color: var(--muted);
    font-family: var(--mono);
    text-align: center;
}

.week h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    height: var(--head);
    margin: 0;
    padding-top: 0.5rem;
    overflow: hidden;
    border-top: 2px solid transparent;
    color: var(--muted);
    font: 600 0.7rem/1.2 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.week h2 b {
    color: var(--text);
    font-size: 0.88rem;
    letter-spacing: 0;
}

.week h2 small {
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.today h2 {
    border-color: var(--accent);
}

.today h2,
.today h2 b {
    color: var(--accent-ink);
}

.slots {
    position: relative;
    display: grid;
    grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column dense;
    gap: 0 2px;
    /* At least 0.27rem per 5 minutes: a 90-minute card then holds its time, two lines of subject and
       the teacher at any text size. */
    height: clamp(
        calc(var(--rows) * 0.27rem),
        calc(100dvh - var(--above, 10rem) - var(--head) - 1.25rem),
        calc(var(--rows) * 0.62rem)
    );
}

.day {
    container: day / inline-size;
}

/* A hairline every hour, however tall an hour is. */
.day .slots {
    background: linear-gradient(var(--line) 0 1px, transparent 1px) 0 0 / 100% calc(100% / var(--hours)) var(--surface);
}

.today .slots {
    background-color: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.closed .slots {
    background:
        repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--line) 70%, transparent) 9px 10px),
        var(--surface);
}

.hours span {
    color: var(--muted);
    font: 0.68rem/1 var(--mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    transform: translateY(-0.45em);
}

.free {
    grid-row: 1 / -1;
    margin: 0.7rem;
    color: var(--muted);
    font: 0.7rem var(--mono);
}

/* Under the cards: the class on now shows its own progress, and the line marks the free time. */
.nowline {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 0;
    height: 2px;
    background: var(--accent);
    pointer-events: none;
}

.nowline::before {
    position: absolute;
    top: -3px;
    left: -4px;
    width: 8px;
    height: 8px;
    background: var(--accent);
    content: '';
}

/* A class */

.ev {
    --k: var(--muted);
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 1px 0.45rem;
    min-height: 0;
    padding: 0.3rem 0.4rem 0.3rem 0.55rem;
    overflow: hidden;
    border: 0;
    border-left: 3px solid var(--k);
    border-radius: 3px;
    background: color-mix(in srgb, var(--k) 8%, var(--raised));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 20%, var(--line));
    font: 0.8rem/1.3 var(--sans);
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

/* The start time and a one-line room plate share the first line, so the subject gets the card's
   full width below them and wraps as little as possible. */
.ev > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.ev .time {
    grid-row: 1;
    grid-column: 1;
}

.ev .plate {
    display: flex;
    grid-row: 1;
    grid-column: 2;
    gap: 0.3em;
    align-items: baseline;
    align-self: start;
    min-width: 0;
    padding: 0.08em 0.35em;
    font-size: 0.7rem;
}

.ev:hover {
    box-shadow: inset 0 0 0 1px var(--k);
}

.ev.w,
.slot.w {
    --k: var(--w);
}

.ev.c,
.slot.c {
    --k: var(--c);
}

.ev.l,
.slot.l {
    --k: var(--l);
}

.ev.p,
.slot.p {
    --k: var(--p);
}

.ev.s,
.slot.s {
    --k: var(--s);
}

.ev.wf,
.slot.wf {
    --k: var(--wf);
}

.ev span:empty {
    display: none;
}

.ev .time {
    color: var(--muted);
    font: 0.7rem/1.25 var(--mono);
    font-variant-numeric: tabular-nums;
}

.time span + span::before {
    content: '–';
}

.ev .subject {
    font-weight: 650;
}

.ev .meta,
.ev .note {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lines a too-short card gives up, least important first (tighten() in app.js). */
.ev.t1 .note,
.ev.t2 .meta {
    display: none;
}

.ev.t3 .subject {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

/* Kolokwium, egzamin...: a red tag and a red edge, the one thing that must not be missed. */
.ev .tag {
    justify-self: start;
    padding: 0.05rem 0.35rem;
    border-radius: 2px;
    background: var(--danger);
    color: #fff;
    font: 700 0.64rem/1.3 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ev.marked {
    box-shadow:
        inset 0 0 0 1px var(--danger),
        inset 0 3px 0 var(--danger);
}

/* The class on now: how far along it is, in the corner and along the bottom edge. */
.ev .progress {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.05rem 0.4rem;
    border-top-left-radius: 3px;
    background: var(--accent);
    color: var(--on-accent);
    font: 700 0.62rem/1.4 var(--mono);
    white-space: nowrap;
}

.ev.live::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--done);
    height: 3px;
    background: var(--accent);
    content: '';
}

.meta b {
    margin-right: 0.4rem;
    padding: 0 0.25rem;
    border: 1px solid;
    border-radius: 2px;
    color: var(--k);
    font: 600 0.66rem var(--mono);
}

.ev .status {
    color: var(--danger);
    font: 600 0.7rem/1.3 var(--mono);
}

.ev .rule {
    color: var(--accent-ink);
}

/* Cancelled, or moved away from here. */
.ev.off {
    border-left-style: dashed;
    background: var(--surface);
}

.ev.off .subject {
    color: var(--muted);
    text-decoration: line-through;
}

.ev.off .plate {
    opacity: 0.45;
}

/* Hatched: a one-off slot, not where this class usually is. */
.ev.moved {
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 6px,
        color-mix(in srgb, var(--k) 14%, transparent) 6px 12px
    );
}

/* Dimmed, but still solid over the hour lines. */
.ev.past {
    border-left-color: color-mix(in srgb, var(--k) 45%, var(--raised));
}

.ev.past > * {
    opacity: 0.5;
}

.ev.live,
.ev.live:hover {
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Columns of a small laptop or a tablet: a slightly smaller subject, so a long one still fits a
   90-minute card whole (the teacher line gives way first, in tighten()). */
@container day (max-width: 12.5rem) {
    .ev .subject {
        font-size: 0.74rem;
        line-height: 1.2;
    }
}

/* Narrow columns (tablets, small windows): only the start time, so it and the room fit one line. */
@container day (max-width: 11rem) {
    .ev {
        padding-right: 0.3rem;
    }

    .ev .time span + span {
        display: none;
    }

    .ev .plate {
        font-size: 0.68rem;
    }
}

@container day (max-width: 7.5rem) {
    .ev .plate small {
        display: none;
    }
}

@container day (max-width: 11rem) {
    .ev .progress {
        font-size: 0.58rem;
    }
}

/* Changes and footer */

.changes,
footer {
    padding: 0 max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
}

.changes h2,
dt,
legend,
.wide,
.fields label,
.quick {
    color: var(--muted);
    font: 600 0.68rem/1.4 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.changes h2 {
    margin: 0.75rem 0 0.4rem;
}

.changes ul {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--line);
    list-style: none;
}

.changes li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.75rem;
    padding: 0.45rem 0.65rem;
    background: var(--raised);
    font-size: 0.88rem;
}

.changes li b {
    min-width: 3.2rem;
    color: var(--accent-ink);
    font: 600 0.72rem var(--mono);
    text-transform: uppercase;
}

.changes li span {
    flex: 1 1 14rem;
}

.changes small {
    color: var(--muted);
    font: 0.7rem var(--mono);
}

.changes li.fresh {
    box-shadow: inset 3px 0 0 var(--danger);
}

/* The changes that shape one class's date, in its dialog. */
.layers {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.layers:empty {
    display: none;
}

.layers li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    padding: 0.35rem 0.55rem;
    border-left: 3px solid var(--accent);
    background: var(--raised);
    font-size: 0.85rem;
}

.layers b {
    color: var(--accent-ink);
    font: 600 0.68rem var(--mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.layers span {
    flex: 1 1 12rem;
}

.outside {
    display: grid;
    gap: 0.5rem;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
}

.outside input {
    font-family: var(--mono);
}

footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    color: var(--muted);
    font: 0.7rem/1.5 var(--mono);
}

footer a,
footer .link {
    color: inherit;
}

/* Dialogs */

dialog {
    width: min(36rem, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    padding: 0;
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    scrollbar-color: var(--line) transparent;
    scrollbar-width: thin;
}

#groupsDialog {
    width: min(48rem, calc(100vw - 1.5rem));
}

dialog::backdrop {
    background: rgb(0 0 0 / 0.6);
}

dialog form {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
}

dialog header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

dialog h2 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.25;
}

dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: baseline;
    gap: 0.35rem 0.9rem;
    margin: 0;
}

dd,
.hint {
    margin: 0;
}

.hint {
    color: var(--muted);
    font-size: 0.85rem;
}

fieldset {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 3px;
}

legend {
    padding: 0 0.4rem;
}

.choices,
.fields,
.quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 1rem;
}

.fields label,
.wide {
    display: grid;
    gap: 0.25rem;
}

.choices label,
.check,
.quick label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.choices label,
.check {
    color: var(--text);
    font: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.fields .grow {
    flex: 1 1 14rem;
}

dd a {
    color: var(--accent-ink);
    font-weight: 600;
}

.steps {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding-left: 1.4rem;
    font-size: 0.9rem;
}

.steps a {
    font-weight: 600;
}

kbd {
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 3px;
    background: var(--raised);
    font: 600 0.78em var(--mono);
}

.demo summary {
    color: var(--accent-ink);
    font: 600 0.72rem var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

/* A 12-second loop of the four steps, played only when someone opens it. */
.demo .screen {
    position: relative;
    display: grid;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.6rem 0.7rem 2.2rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--raised);
    font-size: 0.78rem;
}

.demo .url {
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    background: var(--bg);
    color: var(--muted);
    font: 0.7rem var(--mono);
}

.demo .table {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 1rem;
    padding: 0.3rem;
    animation: demo-select 12s infinite;
}

.demo .table span:nth-child(-n + 2) {
    color: var(--muted);
    font: 600 0.66rem var(--mono);
    text-transform: uppercase;
}

.demo .frame {
    opacity: 0;
    animation: demo-step 12s infinite;
}

.demo .f0 {
    opacity: 1;
}

.demo .f1 {
    animation-delay: -9s;
}

.demo .f2 {
    animation-delay: -6s;
}

.demo .f3 {
    animation-delay: -3s;
}

.demo .screen > .frame:not(.paste) {
    position: absolute;
    top: 0.5rem;
    right: 0.9rem;
    padding: 0.3rem 0.5rem;
    border-radius: 3px;
    background: var(--board);
    color: var(--board-text);
    font: 600 0.75rem var(--mono);
}

.demo .screen > .frame kbd {
    border-color: currentColor;
    background: none;
    color: inherit;
}

.demo .paste {
    position: absolute;
    inset: 2.4rem 0.7rem 2.2rem;
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: 0.5rem;
    border-top: 3px solid var(--accent);
    background: var(--surface);
}

.demo .paste .label {
    color: var(--muted);
    font: 600 0.66rem var(--mono);
    text-transform: uppercase;
}

.demo .paste .box {
    padding: 0.3rem;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.demo .paste .done {
    color: var(--c);
    font-weight: 600;
}

.demo .caption {
    position: absolute;
    right: 0.7rem;
    bottom: 0.6rem;
    left: 0.7rem;
    height: 1.3rem;
    font: 600 0.75rem/1.3rem var(--mono);
}

.demo .caption .frame {
    position: absolute;
    inset: 0 auto auto 0;
}

@keyframes demo-step {
    0%,
    24% {
        opacity: 1;
    }

    25%,
    100% {
        opacity: 0;
    }
}

@keyframes demo-select {
    0%,
    24%,
    75%,
    100% {
        background: none;
    }

    25%,
    74% {
        background: color-mix(in srgb, var(--w) 25%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .demo .frame,
    .demo .table {
        animation: none;
    }
}

input:not([type='radio'], [type='checkbox']),
select,
textarea {
    max-width: 100%;
    min-height: 2.25rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--bg);
    color: var(--text);
    font: 0.9rem var(--sans);
    letter-spacing: 0;
    text-transform: none;
}

input[type='date'],
input[type='time'],
select {
    font-family: var(--mono);
}

input[type='radio'],
input[type='checkbox'] {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--accent-ink);
}

menu {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

/* The one filled button per dialog: the safe, usual action. */
#saveLocal,
#adminForm menu button,
#groupsDialog menu button {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.error {
    margin: 0;
    color: var(--danger);
    font-size: 0.88rem;
}

.error:empty {
    display: none;
}

.cohorts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0 0.75rem;
    max-height: 13rem;
    padding: 0.4rem 0.6rem;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--bg);
    scrollbar-color: var(--line) transparent;
    scrollbar-width: thin;
}

.cohorts label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.9rem;
}

.picks h3 {
    margin: 0.6rem 0 0.3rem;
    font: 700 0.8rem var(--mono);
    letter-spacing: 0.04em;
}

.quick {
    margin: 0 0 0.4rem;
}

.pick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}

.pick b {
    color: var(--muted);
    font: 600 0.72rem var(--mono);
}

.pick select {
    min-width: 10rem;
}

/* Phones, and any screen too short for a timeline (a phone on its side): one day at a time, as a list */

@media (max-width: 47.99em), (max-height: 32em) and (max-width: 74.99em) {
    .bar {
        gap: 0.5rem;
        padding-bottom: 0;
    }

    .bar small {
        display: none;
    }

    .bar nav {
        order: 1;
        width: 100%;
    }

    #weekLabel {
        margin-left: auto;
    }

    /* Day tabs sit on the header's bottom edge, the active one underlined in amber. */
    .days {
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        order: 2;
        width: 100%;
    }

    .days button {
        display: grid;
        justify-items: center;
        gap: 0.15rem;
        min-height: 3.1rem;
        padding: 0.35rem 0 0.4rem;
        border: 0;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        background: none;
        color: var(--muted);
        font-size: 0.64rem;
    }

    .days b {
        color: var(--text);
        font-size: 1.15rem;
        letter-spacing: 0;
    }

    .days i {
        margin-left: 0.2em;
        font-size: 0.85em;
        font-style: normal;
        vertical-align: super;
    }

    .days .today b {
        color: var(--accent-ink);
    }

    .days [aria-pressed='true'] {
        border-color: var(--accent);
        color: var(--text);
    }

    .slot {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'label plate'
            'time plate'
            'subject subject'
            'meta meta'
            'actions actions';
        gap: 0.1rem 0.75rem;
    }

    .slot .actions a {
        padding: 0.45rem 0;
    }

    /* One day per screen; the browser's own scroll snapping does the swiping. */
    .week {
        display: flex;
        gap: 0;
        padding: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .hours,
    .nowline,
    .day h2:not(:has(small)) {
        display: none;
    }

    .day {
        flex: 0 0 100%;
        padding: 0.75rem max(0.75rem, env(safe-area-inset-right)) 1rem max(0.75rem, env(safe-area-inset-left));
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .week h2 {
        height: auto;
        margin-bottom: 0.5rem;
        padding: 0;
        border: 0;
    }

    .slots,
    .day .slots,
    .closed .slots {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        height: auto;
        background: none;
    }

    .free {
        margin: 3rem 0;
        font-size: 0.8rem;
        text-align: center;
    }

    .ev {
        grid-template-columns: 3.3rem minmax(0, 1fr) auto;
        gap: 0.1rem 0.8rem;
        padding: 0.7rem 0.75rem 0.7rem 0.8rem;
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .ev > * {
        grid-column: 2;
    }

    .ev .time {
        display: flex;
        flex-direction: column;
        grid-row: 1 / span 6;
        grid-column: 1;
        color: var(--text);
        font-size: 1.05rem;
        font-weight: 700;
    }

    .time span + span {
        color: var(--muted);
        font-size: 0.8rem;
        font-weight: 400;
    }

    .time span + span::before {
        content: none;
    }

    .ev .plate {
        display: grid;
        grid-row: 1 / span 3;
        grid-column: 3;
        gap: 0;
        min-width: 2.8em;
        padding: 0.25em 0.45em 0.28em;
        font-size: 0.95rem;
    }

    .ev .subject {
        font-size: 1rem;
    }

    .ev .meta,
    .ev .note {
        font-size: 0.8rem;
        white-space: normal;
    }

    .ev .progress {
        font-size: 0.72rem;
    }

    .ev .status {
        font-size: 0.78rem;
    }

    .changes,
    footer {
        padding: 0 max(0.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom))
            max(0.75rem, env(safe-area-inset-left));
    }

    .board {
        padding: 0.75rem max(0.75rem, env(safe-area-inset-right)) 0 max(0.75rem, env(safe-area-inset-left));
    }

    /* Dialogs become bottom sheets, within thumb reach. */
    dialog,
    #groupsDialog {
        width: 100%;
        max-width: 100%;
        max-height: 92dvh;
        margin: auto 0 0;
        border-width: 3px 0 0;
        border-radius: 10px 10px 0 0;
    }

    dialog form {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    menu button {
        flex: 1;
        min-height: 2.75rem;
    }
}

/* A phone on its side: the header scrolls away instead of covering half the screen. */
@media (max-height: 32em) {
    .bar {
        position: static;
    }
}