*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: var(--fill); }

body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--space-six) 1fr;
    justify-content: center;
    min-height: var(--view-h);
    margin: 0;
    padding-inline: var(--space-four);
    background-color: var(--canvas);
    background-image:
        linear-gradient(to right, var(--grid-line) var(--border-w), transparent var(--border-w)),
        linear-gradient(to bottom, var(--grid-line) var(--border-w), transparent var(--border-w));
    background-size: var(--space-six) var(--space-six);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--weight-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tracking-body);
    -webkit-font-smoothing: antialiased;
    transition:
        background-color var(--t-base) var(--e-standard),
        color var(--t-base) var(--e-standard);
}

:focus { outline: none; }

:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.theme {
    position: relative;
    grid-row: var(--track-two);
    grid-column: 1;
    z-index: var(--z-sticky);
    display: grid;
    place-items: center;
    align-self: start;
    justify-self: end;
    width: var(--space-six);
    height: var(--topbar-h);
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--text-body);
    cursor: pointer;
    transition: color var(--t-base) var(--e-standard);
}

.shell {
    grid-row: var(--track-two);
    grid-column: 1;
    min-width: 0;
}

.mark {
    display: block;
    width: var(--fill);
    height: calc(var(--topbar-h) + var(--border-w));
    padding-block: var(--space-three);
    border-bottom: var(--border-w) solid var(--border-hairline);
    object-fit: contain;
    object-position: left center;
}

.subjects,
.foot,
.intro > :not(.plate) {
    opacity: 0;
    transform: translateY(var(--space-two));
}

.intro {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    grid-template-rows: var(--space-six) auto var(--space-two) auto var(--space-six);
    row-gap: 0;
    margin-block: 0;
    min-width: 0;
}

.plate {
    grid-row: 1 / -1;
    grid-column: var(--track-two);
    align-self: center;
    justify-self: end;
    inline-size: max(0px, min(var(--plate-w), calc(var(--fill) - var(--plate-gap))));
    aspect-ratio: var(--plate-aspect);
    block-size: auto;
    visibility: hidden;
    pointer-events: none;
}

.subjects {
    display: flex;
    flex-direction: column;
    border-top: var(--border-w) solid var(--border-subtle);
    min-width: 0;
}

.subject { border-bottom: var(--border-w) solid var(--border-subtle); }

.subject-top {
    display: grid;
    grid-template-columns: var(--bar-accent) var(--space-five) minmax(0, 1fr) auto;
    column-gap: var(--space-three);
    align-items: start;
    padding-block: var(--space-four);
    list-style: none;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--e-standard);
}

.tick {
    grid-column: var(--track-two);
    display: grid;
    place-items: center;
    width: var(--space-five);
    height: var(--space-five);
    border: var(--rule-accent) solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background-color: transparent;
    transition:
        background-color var(--t-fast) var(--e-standard),
        border-color var(--t-fast) var(--e-standard);
}

.subject-head {
    grid-column: var(--track-three);
    display: grid;
    row-gap: var(--space-one);
    min-width: 0;
}

.subject-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-three);
    row-gap: var(--space-one);
    min-height: var(--space-five);
    min-width: 0;
}

.held {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--weight-strong);
    line-height: var(--lh-compact);
    color: var(--text-primary);
}

.pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: calc(var(--space-five) - var(--space-one));
    padding-inline: var(--space-three);
    border: var(--border-w) solid transparent;
    border-radius: var(--radius-chip);
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: var(--weight-strong);
    line-height: var(--lh-compact);
    letter-spacing: var(--tracking-chip);
    text-transform: uppercase;
    white-space: nowrap;
}

.pill-idle {
    border-color: var(--border-subtle);
    color: var(--text-body);
}

.pill-count {
    background-color: var(--bg-chip);
    color: var(--text-primary);
}

.chevron {
    grid-column: var(--track-four);
    display: flex;
    align-items: center;
    gap: var(--space-two);
    height: var(--space-five);
    color: var(--text-muted);
}

.body {
    min-width: 0;
    padding-block: var(--space-five) var(--space-six);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-four);
    margin-bottom: var(--space-four);
}

.field {
    flex: 1 1 0;
    display: grid;
    grid-template-rows: auto auto;
    row-gap: var(--space-one);
    min-width: fit-content;
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--pair), minmax(0, 1fr));
    column-gap: var(--space-two);
    row-gap: var(--space-five);
    padding: var(--space-two);
}

@supports (width: round(down, 1px, 1px)) {
    .grid {
        grid-template-columns:
            repeat(
                var(--pair),
                round(down, calc((var(--fill) - var(--space-two)) / var(--pair)), var(--border-w)));
    }
}

.day { min-width: 0; }

.day-head {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--space-two);
    height: var(--space-five);
    padding-bottom: var(--space-two);
    border-bottom: var(--border-w) solid var(--border-subtle);
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: var(--weight-strong);
    line-height: var(--lh-compact);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
}

.slot {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--fill);
    min-height: var(--card-min-h);
    margin: 0;
    margin-bottom: var(--space-two);
    padding: 0;
    overflow: hidden;
    border: var(--border-w) solid var(--border-hairline);
    border-radius: var(--radius-xs);
    background-color: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    letter-spacing: var(--tracking-body);
    text-align: left;
    cursor: pointer;
    transition:
        background-color var(--t-fast) var(--e-standard),
        border-color var(--t-fast) var(--e-standard);
}

.slot[hidden] { display: none; }

.slot-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-three);
    border-bottom: var(--border-w) solid var(--border-subtle);
}

.where {
    display: block;
    margin-top: var(--space-one);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--weight-body);
    line-height: var(--lh-compact);
    color: var(--text-body);
}

.slot-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--space-five);
    padding-inline: var(--space-two);
    border-top: var(--rule-accent) solid transparent;
    border-radius: 0 0
        calc(var(--radius-xs) - var(--border-w))
        calc(var(--radius-xs) - var(--border-w));
    background-color: var(--bg-sunken);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: var(--weight-strong);
    line-height: var(--lh-flush);
    letter-spacing: var(--tracking-caps);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-muted);
}

.foot {
    position: sticky;
    bottom: 0;
    anchor-name: --band;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-four);
    margin-top: var(--space-six);
    padding-block: var(--space-five) var(--space-six);
    border-top: var(--border-w) solid var(--border-hairline);
    background-color: var(--bg-canvas);
}

.state {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--weight-strong);
    line-height: var(--lh-compact);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.send {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    padding: var(--space-three) var(--space-five);
    border: var(--border-w) solid var(--highlighter);
    border-radius: var(--radius-pill);
    background-color: var(--highlighter);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: var(--weight-strong);
    line-height: var(--lh-flush);
    letter-spacing: var(--tracking-control);
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--t-fast) var(--e-standard),
        border-color var(--t-fast) var(--e-standard);
}

.toast {
    position: fixed;
    top: calc(var(--topbar-h) + var(--space-four));
    right: max(var(--space-six), env(safe-area-inset-right));
    z-index: var(--z-toast);
    width: min(var(--toast-w), calc(var(--view-w) - var(--pair) * var(--space-six)));
    display: none;
    overflow: hidden;
    padding: var(--space-three) var(--space-four) var(--space-three) var(--space-eight);
    border: var(--border-w) solid var(--border-hairline);
    border-radius: var(--radius-xs);
    background: var(--cream-lighter);
    color: var(--text-primary);
    box-shadow:
        var(--bar-accent) var(--bar-accent) 0
        color-mix(in srgb, var(--border-hairline) var(--mix-toast), transparent);
    pointer-events: none;
}