.theme::before {
    content: "";
    grid-area: 1 / 1;
    width: var(--space-six);
    height: var(--space-six);
    border: var(--border-w) solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background-color: var(--bg-canvas);
    transition:
        background-color var(--t-base) var(--e-standard),
        border-color var(--t-base) var(--e-standard);
}

.theme::after {
    content: "";
    position: absolute;
    inset-block: calc((var(--topbar-h) - var(--tap-min)) / var(--pair));
    inset-inline: calc((var(--tap-min) - var(--space-six)) / var(--pair-back));
}

.theme svg {
    grid-area: 1 / 1;
    width: var(--space-four);
    height: var(--space-four);
    animation: glyph-turn var(--t-base) var(--e-standard);
}

.intro p {
    order: -1;
    grid-row: var(--track-two);
    grid-column: 1;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: var(--weight-strong);
    line-height: var(--lh-compact);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}

.intro h1 {
    grid-row: var(--track-four);
    grid-column: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-display-m);
    font-weight: var(--weight-display);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-display);
    color: var(--text-primary);
}

.subject-top::-webkit-details-marker { display: none; }

.subject-top::before {
    content: "";
    grid-column: 1;
    width: var(--bar-accent);
    height: var(--space-five);
    background-color: transparent;
    background-image: linear-gradient(var(--accent-tick) 0 0);
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--bar-accent) var(--space-four);
}

.tick svg {
    width: var(--space-four);
    height: var(--space-four);
    line-height: var(--lh-flush);
    opacity: 0;
    color: var(--on-accent);
    transition: opacity var(--t-fast) var(--e-standard);
}

.subject-line h2 {
    flex: 1 1 auto;
    display: block;
    min-height: var(--space-five);
    min-width: 0;
    margin: 0;
    padding-block: calc((var(--space-five) - var(--lh-compact) * var(--fs-caption)) / var(--pair));
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: var(--weight-strong);
    line-height: var(--lh-compact);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--accent-text);
}

.held:empty { display: none; }

.chevron svg {
    width: var(--space-four);
    height: var(--space-four);
    transition: transform var(--t-base) var(--e-standard);
}

.field > span {
    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;
    color: var(--text-muted);
}

.field > select {
    grid-row: var(--track-two);
    grid-column: 1;
    appearance: none;
    -webkit-appearance: none;
    width: var(--fill);
    min-width: 0;
    height: var(--tap-min);
    padding-inline: var(--space-four) var(--space-six);
    border: var(--border-w) solid var(--border-hairline);
    border-radius: var(--radius-s);
    background-color: var(--bg-raised);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: var(--weight-strong);
    line-height: var(--lh-flush);
    letter-spacing: var(--tracking-control);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--t-fast) var(--e-standard),
        border-color var(--t-fast) var(--e-standard);
}

.field > svg {
    grid-row: var(--track-two);
    grid-column: 1;
    align-self: center;
    justify-self: end;
    width: var(--space-four);
    height: var(--space-four);
    margin-inline-end: var(--space-four);
    color: var(--text-muted);
    pointer-events: none;
}

.slot-body > b,
.slot-body > .where { align-self: stretch; }

.slot-body > b {
    display: block;
    margin-top: var(--space-two);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--weight-strong);
    line-height: var(--lh-compact);
    color: var(--text-primary);
}

.where svg { display: none; }