autumn-web 0.10.0

/*
 * Autumn — framework-owned widget component CSS (issue #1215)
 *
 * Backs every `autumn-*` class emitted by
 * `autumn_web::{form, widgets, wizard, ui::pagination, storage::form_helper,
 * job_tracking}`. Plain CSS — no `@import`/`@apply` — so it works standalone,
 * without a Tailwind build. Colors, spacing, type, radius and z-index use the
 * shared design tokens (`ui/tokens.css`). Re-theme by overriding the tokens,
 * not by forking these rules. The tokens carry the dark scheme and density.
 *
 * Not included here: `autumn-dev-*` (dev-error badge ships its own inline
 * `<style>`) and `.flash`/`.flash-*` (served separately as `FLASH_CSS`).
 *
 * The opt-in widget families (search, social, workflow, charts) keep their
 * rules in `ui/widgets/<family>.css`. The server adds each file only when its
 * feature is on (#3408).
 */

/* ── Wizard progress stepper ──────────────────────────────────────────────── */

.autumn-wizard-progress {
    display: flex;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6) 0;
}

.autumn-wizard-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.autumn-wizard-step + .autumn-wizard-step {
    flex: 1;
}

.autumn-wizard-step + .autumn-wizard-step::before {
    content: '';
    flex: 1;
    height: 2px;
    background-color: var(--border);
}

.autumn-wizard-step--completed + .autumn-wizard-step::before {
    background-color: var(--primary);
}

.autumn-wizard-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
    background-color: var(--surface-muted);
    color: var(--text-muted);
}

.autumn-wizard-step__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: capitalize;
    white-space: nowrap;
}

.autumn-wizard-step--completed .autumn-wizard-step__number {
    background-color: var(--primary);
    color: var(--on-primary);
}

.autumn-wizard-step--completed .autumn-wizard-step__label {
    color: var(--primary);
}

.autumn-wizard-step--current .autumn-wizard-step__number {
    background-color: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.autumn-wizard-step--current .autumn-wizard-step__label {
    color: var(--text);
    font-weight: var(--font-weight-semibold);
}

/* Same as the unmodified .autumn-wizard-step__number/__label defaults — stated
   explicitly so every state the widget emits has a rule, per the coverage
   test in tests/integration/widget_css_coverage.rs. */
.autumn-wizard-step--upcoming .autumn-wizard-step__number {
    background-color: var(--surface-muted);
    color: var(--text);
}

.autumn-wizard-step--upcoming .autumn-wizard-step__label {
    color: var(--text-muted);
}

.autumn-wizard-progress__summary {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* ── Form fields (autumn-field) ───────────────────────────────────────────── */

.autumn-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

/* A grouped custom control (#3400): a <fieldset> with a <legend>. */
.autumn-field--group {
    min-inline-size: 0;
    padding: 0;
    border: 0;
}

/* A legend is not a flex item, so it takes the label gap as a margin. */
.autumn-field--group > legend {
    padding: 0;
    margin-bottom: var(--space-1);
}

.autumn-field__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text);
}

.autumn-field__input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--text);
    background-color: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.autumn-field__input:focus {
    outline: 2px solid transparent;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.autumn-field__input--invalid {
    border-color: var(--danger);
}

.autumn-field__input--invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-light);
}

.autumn-field__errors {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.autumn-field__error {
    font-size: 0.8125rem;
    color: var(--danger);
    margin: 0;
}

/* Field wrapper v2 — issue #3395. The hint is between the label and the
   control. The marker has aria-hidden="true": aria-required gives the state
   to a screen reader. */
.autumn-field__hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

.autumn-field__required {
    color: var(--danger);
    margin-left: var(--space-1);
}

/* A checkbox shows the box, then the label, on one line. */
.autumn-field--checkbox {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.autumn-field--checkbox .autumn-field__input {
    width: auto;
}

.autumn-field__input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.autumn-field--checkbox .autumn-field__hint,
.autumn-field--checkbox .autumn-field__errors {
    flex-basis: 100%;
}

/* Client-side state: :user-invalid matches only after the user changes the
   field or submits the form. Plain :invalid matches an empty required field
   when the page loads. Server errors use the --invalid class above. */
.autumn-field__input:user-invalid {
    border-color: var(--danger);
}

.autumn-field__input:user-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-light);
}

/* Currently stored file shown above an attachment column's file input, and the
   type/size annotation beside a rendered attachment link — issue #1236. A file
   input can't be repopulated, so this line is the only signal that the record
   already holds a blob. */
.autumn-field__current {
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-1);
}

.autumn-attachment__meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ── Native inputs — issue #3405 ──────────────────────────────────────────── */

/* A switch is a native checkbox, drawn as a track and a thumb. */
.autumn-field--switch .autumn-field__input {
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-full);
    color: var(--text);
    background-color: var(--surface-muted);
    cursor: pointer;
}

/* Logical offsets, so the thumb moves the other way in a right-to-left page. */
.autumn-field--switch .autumn-field__input::before {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-start: 0.125rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--radius-full);
    background-color: var(--text-muted);
    transform: translateY(-50%);
    transition: inset-inline-start 0.15s ease, background-color 0.15s ease;
}

.autumn-field--switch .autumn-field__input:checked {
    border-color: var(--primary);
    background-color: var(--primary);
}

.autumn-field--switch .autumn-field__input:checked::before {
    inset-inline-start: calc(100% - 1rem);
    background-color: var(--on-primary);
}

/* The switch rule above is more specific than the shared invalid and
   disabled rules, so state them again. */
.autumn-field--switch .autumn-field__input--invalid,
.autumn-field--switch .autumn-field__input:user-invalid {
    border-color: var(--danger);
}

.autumn-field--switch .autumn-field__input:disabled {
    cursor: not-allowed;
}

.autumn-field--switch .autumn-field__input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* A slider has no box. The browser draws the track and the thumb. */
.autumn-field--range .autumn-field__input {
    padding: 0;
    border: 0;
    background-color: transparent;
    accent-color: var(--primary);
}

.autumn-field--range .autumn-field__input:focus {
    box-shadow: none;
}

.autumn-field--range .autumn-field__input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.autumn-field--color .autumn-field__input {
    width: 3rem;
    height: 2.5rem;
    padding: var(--space-1);
    cursor: pointer;
}

/* A radio group and a checkbox group: one choice for each line. */
.autumn-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.autumn-choice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.autumn-choice__input {
    margin: 0;
    accent-color: var(--primary);
}

.autumn-choice__input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.autumn-choice__label {
    font-size: var(--font-size-sm);
    color: var(--text);
    cursor: pointer;
}

/* A segmented control: radios with a visible label for each segment. The
   radio stays in the tab order (clip pattern, not display:none), so the
   native arrow keys move the selection. */
.autumn-segmented {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-self: flex-start;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
}

.autumn-segmented__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.autumn-segmented__option {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text);
    background-color: var(--surface);
    cursor: pointer;
}

.autumn-segmented__option:first-of-type {
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
}

.autumn-segmented__option:last-of-type {
    border-start-end-radius: var(--radius);
    border-end-end-radius: var(--radius);
}

.autumn-segmented__option ~ .autumn-segmented__option {
    border-inline-start: 1px solid var(--control-border);
}

.autumn-segmented__input:checked + .autumn-segmented__option {
    color: var(--on-primary);
    background-color: var(--primary);
}

.autumn-segmented__input:focus-visible + .autumn-segmented__option {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.autumn-segmented__input:disabled + .autumn-segmented__option {
    opacity: 0.6;
    cursor: not-allowed;
}

.autumn-field--group[aria-invalid="true"] .autumn-segmented {
    border-color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
    .autumn-field--switch .autumn-field__input::before {
        transition: none;
    }
}

/* Forced colors (Windows High Contrast): the page colors go away, so draw
   the switch and the selected segment with system colors. */
@media (forced-colors: active) {
    .autumn-field--switch .autumn-field__input {
        border-color: CanvasText;
    }

    .autumn-field--switch .autumn-field__input::before {
        background-color: CanvasText;
    }

    .autumn-field--switch .autumn-field__input:checked {
        border-color: Highlight;
        background-color: Highlight;
    }

    .autumn-field--switch .autumn-field__input:checked::before {
        background-color: HighlightText;
    }

    .autumn-segmented__input:checked + .autumn-segmented__option {
        forced-color-adjust: none;
        color: HighlightText;
        background-color: Highlight;
    }

    .autumn-segmented__input:focus-visible + .autumn-segmented__option {
        outline-color: CanvasText;
    }
}

/* ── Password and one-time code — issue #3412 ──────────────────────────── */

/* The reveal button sits after the input. It has `hidden` until
   autumn-widgets.js shows it. */
.autumn-password {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.autumn-password > .autumn-field__input {
    flex: 1 1 auto;
    min-width: 0;
}

.autumn-password__reveal {
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text);
    background-color: var(--surface);
    cursor: pointer;
}

.autumn-password__reveal[hidden] {
    display: none;
}

.autumn-password__reveal[aria-pressed="true"] {
    border-color: var(--primary);
    color: var(--on-primary);
    background-color: var(--primary);
}

.autumn-password__reveal:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.autumn-password__reveal:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* The strength hint is empty until the user types. It stays in the
   accessibility tree, so a screen reader reads the first level. */
.autumn-field__strength {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    margin: 0;
}

.autumn-field__strength[data-autumn-strength-level="0"] {
    color: var(--danger);
}

.autumn-field__strength[data-autumn-strength-level="1"] {
    color: var(--warning-text);
}

.autumn-field__strength[data-autumn-strength-level="2"],
.autumn-field__strength[data-autumn-strength-level="3"] {
    color: var(--success-text);
}

/* A one-time code is one input over a row of boxes. The boxes are
   aria-hidden spans. Each cell is one pitch wide: the box and the gap. The
   input has a monospace font and a letter spacing of one pitch, so each
   digit is in the center of its box.

   `--autumn-otp-span` is the cell count plus one pitch for the input. A
   rule below sets it for each count of cells. A
   narrow screen makes the boxes smaller, so the page does not scroll
   sideways (WCAG 1.4.10). The 2rem is the page gutters. */
.autumn-field--otp {
    align-items: flex-start;
}

.autumn-otp {
    --autumn-otp-span: 7;
    --autumn-otp-pitch: min(3rem, (100vw - 2rem) / var(--autumn-otp-span));
    --autumn-otp-gap: calc(var(--autumn-otp-pitch) / 6);
    --autumn-otp-box: calc(var(--autumn-otp-pitch) - var(--autumn-otp-gap));
    position: relative;
    display: inline-flex;
    direction: ltr;
}

.autumn-otp__cells {
    display: flex;
    gap: var(--autumn-otp-gap);
}

.autumn-otp__cell {
    box-sizing: border-box;
    width: var(--autumn-otp-box);
    height: calc(var(--autumn-otp-box) * 1.2);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    color: var(--text);
    background-color: var(--surface);
}

.autumn-otp:has(.autumn-otp__cells > :nth-child(7)) {
    --autumn-otp-span: 8;
}

.autumn-otp:has(.autumn-otp__cells > :nth-child(8)) {
    --autumn-otp-span: 9;
}

.autumn-otp:has(.autumn-otp__cells > :nth-child(9)) {
    --autumn-otp-span: 10;
}

.autumn-otp:has(.autumn-otp__cells > :nth-child(10)) {
    --autumn-otp-span: 11;
}

.autumn-otp:has(.autumn-otp__cells > :nth-child(11)) {
    --autumn-otp-span: 12;
}

.autumn-otp:has(.autumn-otp__cells > :nth-child(12)) {
    --autumn-otp-span: 13;
}

.autumn-otp:has(.autumn-otp__cells > :nth-child(13)) {
    --autumn-otp-span: 14;
}

.autumn-otp:has(.autumn-otp__cells > :nth-child(14)) {
    --autumn-otp-span: 15;
}

/* A separator shows only when the runtime groups the digits. It and its
   gap are half a pitch: the input's word spacing makes the group space
   half a pitch too. */
.autumn-otp__sep {
    display: none;
    width: calc(var(--autumn-otp-pitch) / 2 - var(--autumn-otp-gap));
}

.autumn-otp:has(> [data-autumn-otp-grouped]) .autumn-otp__sep {
    display: block;
}

/* The input is one pitch wider than the boxes. The caret after the last
   digit then does not scroll the text. */
.autumn-field__input.autumn-otp__input {
    position: absolute;
    z-index: 1;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(100% + var(--autumn-otp-pitch));
    padding: 0;
    padding-inline-start: calc((var(--autumn-otp-box) - 1ch) / 2);
    border: 0;
    font-family: var(--font-mono);
    font-size: min(var(--font-size-lg), var(--autumn-otp-box) / 2);
    font-variant-numeric: tabular-nums;
    letter-spacing: calc(var(--autumn-otp-pitch) - 1ch);
    word-spacing: calc(var(--autumn-otp-pitch) / -2);
    color: var(--text);
    background-color: transparent;
    caret-color: var(--primary);
}

/* Chromium paints a color behind an autofilled input. A long transition
   keeps the boxes visible. */
.autumn-field__input.autumn-otp__input:autofill {
    transition: background-color 600000s 0s;
}

.autumn-field__input.autumn-otp__input:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
}

.autumn-otp:focus-within .autumn-otp__cell {
    border-color: var(--primary);
}

.autumn-otp:has(> :focus-visible) {
    border-radius: var(--radius);
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.autumn-otp:has(> .autumn-field__input--invalid) .autumn-otp__cell,
.autumn-otp:has(> :user-invalid) .autumn-otp__cell {
    border-color: var(--danger);
}

.autumn-otp:has(> :disabled) .autumn-otp__cell {
    opacity: 0.6;
}

@media (forced-colors: active) {
    .autumn-otp__cell {
        border-color: CanvasText;
    }

    .autumn-password__reveal[aria-pressed="true"] {
        forced-color-adjust: none;
        border-color: Highlight;
        color: HighlightText;
        background-color: Highlight;
    }

    .autumn-otp:has(> :focus-visible) {
        outline-color: Highlight;
    }
}

/* ── Styled select — issue #3409 ──────────────────────────────────────────── */

/* Opt-in with FieldOptions::styled_select(). Chrome 135+ and Safari 27 draw
   the select with `appearance: base-select`. Other browsers keep the native
   control with the field style above. A multiple select keeps the native
   list box. A browser that does not know `::picker(select)` drops the whole
   rule, so each `::picker` rule has one selector. */
@supports (appearance: base-select) {
    .autumn-select:not([multiple]) {
        appearance: base-select;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
    }

    .autumn-select:not([multiple]):enabled {
        cursor: pointer;
    }

    .autumn-select:not([multiple])::picker(select) {
        appearance: base-select;
        padding: var(--space-1);
        margin-block: var(--space-1);
        border: 1px solid var(--control-border);
        border-radius: var(--radius);
        color: var(--text);
        background-color: var(--surface);
        box-shadow: var(--shadow);
    }

    .autumn-select:not([multiple])::picker-icon {
        color: var(--text-muted);
    }

    .autumn-select:not([multiple]):open::picker-icon {
        rotate: 180deg;
    }

    .autumn-select:not([multiple]) optgroup {
        padding-block: var(--space-1);
        font-size: 0.8125rem;
        font-weight: var(--font-weight-medium);
        color: var(--text-muted);
    }

    .autumn-select:not([multiple]) option {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-normal);
        color: var(--text);
        background-color: transparent;
        cursor: pointer;
    }

    .autumn-select:not([multiple]) option:enabled:hover,
    .autumn-select:not([multiple]) option:focus-visible {
        color: var(--text);
        background-color: var(--surface-muted);
    }

    .autumn-select:not([multiple]) option:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
    }

    .autumn-select:not([multiple]) option:checked {
        font-weight: var(--font-weight-medium);
    }

    .autumn-select:not([multiple]) option::checkmark {
        color: var(--primary);
    }

    .autumn-select:not([multiple]) option:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* The icon turns only for a user who did not ask for less motion. */
    @media (prefers-reduced-motion: no-preference) {
        .autumn-select:not([multiple])::picker-icon {
            transition: rotate 0.15s ease;
        }
    }

    /* Forced colors (Windows High Contrast): the page colors go away, so
       show the hovered and the focused option with system colors. */
    @media (forced-colors: active) {
        .autumn-select:not([multiple]) option:enabled:hover,
        .autumn-select:not([multiple]) option:focus-visible {
            forced-color-adjust: none;
            color: HighlightText;
            background-color: Highlight;
        }
    }
}

/* ── Rich text (autumn-rich-text) — issue #1255 ───────────────────────────── */

.autumn-rich-text {
    gap: 0.375rem;
}

.autumn-rich-text__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0.375rem var(--space-2);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    background-color: var(--surface);
    color: var(--text);
}

.autumn-rich-text__toolbar-item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
}

.autumn-rich-text__toolbar-label {
    color: var(--text-muted);
}

.autumn-rich-text__toolbar-syntax {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color: var(--text);
}

/* The toolbar sits directly on top of the editor, so they read as one control. */
.autumn-rich-text__toolbar + .autumn-rich-text__editor {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.autumn-rich-text__editor {
    min-height: 12rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    resize: vertical;
}

.autumn-rich-text__hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

.autumn-rich-text__preview-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.autumn-rich-text__preview-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text);
}

.autumn-rich-text__preview {
    padding: var(--space-3);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.autumn-rich-text__preview > :first-child {
    margin-top: 0;
}

.autumn-rich-text__preview > :last-child {
    margin-bottom: 0;
}

.autumn-rich-text__preview pre {
    overflow-x: auto;
}

.autumn-rich-text__preview table {
    border-collapse: collapse;
}

.autumn-rich-text__preview th,
.autumn-rich-text__preview td {
    border: 1px solid var(--border);
    padding: var(--space-1) var(--space-2);
}

/* ── Submit button (autumn-submit) ────────────────────────────────────────── */

.autumn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-5);
    background-color: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.autumn-submit:hover {
    background-color: var(--primary-hover);
}

.autumn-submit:focus {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px var(--primary-light);
}

.autumn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Nav bar (autumn-nav) ──────────────────────────────────────────────────── */

.autumn-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
}

.autumn-nav--sidebar {
    flex-direction: column;
    align-items: stretch;
}

.autumn-nav__brand {
    font-weight: var(--font-weight-semibold);
    color: var(--text);
    text-decoration: none;
}

.autumn-nav__toggle {
    display: none;
}

/* Wraps the primary and trailing item lists; must be a flex row itself (and
   grow to fill space the brand/toggle don't use) or the two lists just stack
   as ordinary block children instead of sitting side by side — which would
   leave .autumn-nav__items--trailing's margin-left:auto below with nothing
   to push against. */
.autumn-nav__collapse {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
}

.autumn-nav__items {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.autumn-nav__items--trailing {
    margin-left: auto;
}

.autumn-nav__item {
    display: flex;
    align-items: center;
}

.autumn-nav__item a:not(.autumn-menu__item) {
    color: var(--text);
    text-decoration: none;
}

.autumn-nav__item a:not(.autumn-menu__item):hover {
    color: var(--primary);
}

.autumn-nav__item--menu {
    position: relative;
}

.autumn-nav__section {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--text-muted);
}

.autumn-nav__menu-toggle {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 768px) {
    /* .autumn-nav is a nowrap flex row; .autumn-nav__collapse's basis-full
       below only starts a new row (dropping the menu under the brand/toggle
       instead of squeezing onto the same row) once the row itself can wrap. */
    .autumn-nav--enhanced {
        flex-wrap: wrap;
    }
    .autumn-nav--enhanced .autumn-nav__toggle {
        display: flex;
    }
    .autumn-nav--enhanced .autumn-nav__collapse {
        display: none;
        width: 100%;
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .autumn-nav--enhanced .autumn-nav__collapse--open {
        display: flex;
    }
    .autumn-nav--enhanced .autumn-nav__items {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Locale switcher (autumn-locale-switcher, issue #1251) ───────────────────── */

.autumn-locale-switcher {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.autumn-locale-switcher a {
    color: var(--text);
    text-decoration: none;
}

.autumn-locale-switcher a:hover {
    color: var(--primary);
}

.autumn-locale-switcher__current {
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
}

/* ── Theme toggle (autumn-theme-toggle, issue #3396) ───────────────────────── */

.autumn-theme-toggle {
    display: inline-flex;
    margin: 0;
}

.autumn-theme-toggle__group {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text);
}

.autumn-theme-toggle__option {
    padding: var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.autumn-theme-toggle__option:hover {
    color: var(--text);
}

.autumn-theme-toggle__option[aria-pressed="true"] {
    background: var(--primary);
    color: var(--on-primary);
}

.autumn-theme-toggle__option:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Breadcrumb (autumn-breadcrumb) ───────────────────────────────────────── */

.autumn-breadcrumb {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.autumn-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.autumn-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.autumn-breadcrumb__separator {
    color: var(--text-muted);
}

.autumn-breadcrumb__link {
    color: var(--text-muted);
    text-decoration: none;
}

.autumn-breadcrumb__link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.autumn-breadcrumb__current {
    color: var(--text);
    font-weight: var(--font-weight-medium);
}

.autumn-breadcrumb__text {
    color: var(--text-muted);
}

/* ── Hero (autumn-hero) ────────────────────────────────────────────────────── */

.autumn-hero {
    padding: 3rem var(--space-6);
    text-align: center;
}

.autumn-hero__title {
    margin: 0;
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--text);
}

.autumn-hero__subtitle {
    margin: var(--space-3) 0 0 0;
    font-size: var(--font-size-lg);
    color: var(--text-muted);
}

.autumn-hero__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.autumn-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem var(--space-6);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.autumn-hero__cta--primary {
    background-color: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--primary);
}

.autumn-hero__cta--primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.autumn-hero__cta--secondary {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.autumn-hero__cta--secondary:hover {
    background-color: var(--bg);
}

/* ── Property list (autumn-property-list) ─────────────────────────────────── */

.autumn-property-list {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.autumn-property-list dt {
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
}

.autumn-property-list dd {
    margin: 0;
    color: var(--text);
}

/* ── Popover + dropdown menu (autumn-popover, autumn-menu) ─────────────────── */

.autumn-popover {
    display: inline-block;
}

.autumn-popover__trigger {
    font: inherit;
    cursor: pointer;
}

/* The popover is in the top layer. The trigger is its implicit anchor, so
   `position-area` needs no anchor name. `position-try-fallbacks` flips the
   panel when it does not fit. Without anchor positioning, the UA centers it. */
.autumn-popover__panel {
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    max-width: min(24rem, calc(100vw - 2rem));
}

@supports (position-area: bottom) {
    .autumn-popover__panel {
        inset: auto;
        margin: 0;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        position-visibility: anchors-visible;
    }

    .autumn-popover__panel[data-side="bottom"] { position-area: block-end span-inline-end; }
    .autumn-popover__panel[data-side="bottom"][data-align="center"] { position-area: block-end; }
    .autumn-popover__panel[data-side="bottom"][data-align="end"] { position-area: block-end span-inline-start; }
    .autumn-popover__panel[data-side="top"] { position-area: block-start span-inline-end; }
    .autumn-popover__panel[data-side="top"][data-align="center"] { position-area: block-start; }
    .autumn-popover__panel[data-side="top"][data-align="end"] { position-area: block-start span-inline-start; }
    .autumn-popover__panel[data-side="end"] { position-area: inline-end span-block-end; }
    .autumn-popover__panel[data-side="end"][data-align="center"] { position-area: inline-end; }
    .autumn-popover__panel[data-side="end"][data-align="end"] { position-area: inline-end span-block-start; }
    .autumn-popover__panel[data-side="start"] { position-area: inline-start span-block-end; }
    .autumn-popover__panel[data-side="start"][data-align="center"] { position-area: inline-start; }
    .autumn-popover__panel[data-side="start"][data-align="end"] { position-area: inline-start span-block-start; }
}

/* `display` only while open: a `display` on the closed popover would beat the
   UA rule that hides it. */
.autumn-menu:popover-open {
    display: flex;
}

.autumn-menu {
    flex-direction: column;
    min-width: 10rem;
    padding: var(--space-1);
    list-style: none;
}

.autumn-menu__form {
    display: contents;
}

.autumn-menu__item {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--font-size-sm);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.autumn-menu__item:hover,
.autumn-menu__item:focus-visible {
    background-color: var(--surface-muted);
}

.autumn-menu__item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.autumn-menu__item--destructive {
    color: var(--danger);
}

@media (forced-colors: active) {
    .autumn-menu__item:hover {
        outline: 1px solid Highlight;
        outline-offset: -1px;
    }
}

.autumn-menu__separator {
    height: 1px;
    margin: var(--space-1) 0;
    border: 0;
    background-color: var(--border);
}

.autumn-menu__group {
    display: flex;
    flex-direction: column;
}

.autumn-menu__label {
    padding: var(--space-1) var(--space-3);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

/* ── Modal / confirm dialog (autumn-modal, autumn-confirm) ────────────────── */

.autumn-confirm {
    display: inline-block;
}

.autumn-modal {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    max-width: 28rem;
    width: calc(100% - 2rem);
}

.autumn-modal::backdrop {
    background-color: rgba(17, 24, 39, 0.5);
}

.autumn-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
}

.autumn-modal__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.autumn-modal__body {
    color: var(--text);
    font-size: 0.9375rem;
}

.autumn-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.autumn-modal--sm {
    max-width: 20rem;
}

.autumn-modal--lg {
    max-width: 48rem;
}

.autumn-modal--full {
    max-width: none;
    width: 100%;
    max-height: none;
    height: 100%;
    margin: 0;
    border-radius: 0;
}

.autumn-modal__content,
.autumn-drawer__content {
    position: relative;
}

.autumn-modal__close,
.autumn-drawer__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    color: var(--text);
    border: 0;
    border-radius: var(--radius);
    font-size: var(--font-size-lg);
    line-height: 1;
    cursor: pointer;
}

.autumn-modal__close:hover,
.autumn-drawer__close:hover {
    background-color: var(--bg);
}

.autumn-modal__close:focus-visible,
.autumn-drawer__close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.autumn-modal__close ~ .autumn-modal__title,
.autumn-drawer__close ~ .autumn-drawer__title {
    padding-right: var(--space-8);
}

.autumn-modal__confirm-form {
    display: inline;
}

.autumn-modal__cancel {
    padding: var(--space-2) var(--space-5);
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.autumn-modal__cancel:hover {
    background-color: var(--bg);
}

.autumn-modal__confirm {
    padding: var(--space-2) var(--space-5);
    background-color: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.autumn-modal__confirm:hover {
    background-color: var(--primary-hover);
}

.autumn-modal__confirm--danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: var(--on-danger);
}

.autumn-modal__confirm--danger:hover {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
}

/* ── Drawer / sheet (autumn-drawer) ────────────────────────────────────────── */

.autumn-drawer {
    --autumn-drawer-size: 24rem;
    box-sizing: border-box;
    position: fixed;
    z-index: var(--z-banner);
    margin: 0;
    padding: 0;
    max-width: none;
    max-height: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}

.autumn-drawer[open] {
    display: flex;
    flex-direction: column;
}

.autumn-drawer::backdrop {
    background-color: rgba(17, 24, 39, 0.5);
}

.autumn-drawer--sm {
    --autumn-drawer-size: 16rem;
}

.autumn-drawer--lg {
    --autumn-drawer-size: 40rem;
}

.autumn-drawer--full {
    --autumn-drawer-size: 100%;
}

.autumn-drawer--left,
.autumn-drawer--right {
    top: 0;
    bottom: 0;
    width: var(--autumn-drawer-size);
    max-width: 100%;
    height: 100%;
}

.autumn-drawer--left {
    left: 0;
    right: auto;
    border-width: 0 1px 0 0;
}

.autumn-drawer--right {
    right: 0;
    left: auto;
    border-width: 0 0 0 1px;
}

.autumn-drawer--top,
.autumn-drawer--bottom {
    left: 0;
    right: 0;
    height: var(--autumn-drawer-size);
    max-height: 100%;
    width: 100%;
}

.autumn-drawer--top {
    top: 0;
    bottom: auto;
    border-width: 0 0 1px;
}

.autumn-drawer--bottom {
    bottom: 0;
    top: auto;
    border-width: 1px 0 0;
}

.autumn-drawer__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: var(--space-3);
    padding: var(--space-6);
    overflow: auto;
}

.autumn-drawer__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.autumn-drawer__body {
    flex: 1;
    color: var(--text);
    font-size: 0.9375rem;
}

.autumn-drawer__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

@keyframes autumn-drawer-in-x {
    from { translate: var(--autumn-drawer-from, 100%) 0; }
}

@keyframes autumn-drawer-in-y {
    from { translate: 0 var(--autumn-drawer-from, 100%); }
}

@media (prefers-reduced-motion: no-preference) {
    .autumn-drawer--left[open] { --autumn-drawer-from: -100%; animation: autumn-drawer-in-x 0.2s ease-out; }
    .autumn-drawer--right[open] { animation: autumn-drawer-in-x 0.2s ease-out; }
    .autumn-drawer--top[open] { --autumn-drawer-from: -100%; animation: autumn-drawer-in-y 0.2s ease-out; }
    .autumn-drawer--bottom[open] { animation: autumn-drawer-in-y 0.2s ease-out; }
}

/* ── Accordion and collapsible (autumn-accordion, autumn-collapsible) ──────── */

.autumn-accordion {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    overflow: hidden;
}

.autumn-accordion__item + .autumn-accordion__item {
    border-top: 1px solid var(--border);
}

.autumn-collapsible {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    overflow: hidden;
}

.autumn-accordion__summary,
.autumn-collapsible__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--text);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    list-style: none;
}

.autumn-accordion__summary::-webkit-details-marker,
.autumn-collapsible__summary::-webkit-details-marker {
    display: none;
}

/* The chevron is a border, so it needs no icon font and follows the text color. */
.autumn-accordion__summary::after,
.autumn-collapsible__summary::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
}

:is(.autumn-accordion__item, .autumn-collapsible)[open] > :is(.autumn-accordion__summary, .autumn-collapsible__summary)::after {
    transform: rotate(-135deg);
}

.autumn-accordion__summary:hover,
.autumn-collapsible__summary:hover {
    background: var(--surface-muted);
}

.autumn-accordion__summary:focus-visible,
.autumn-collapsible__summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.autumn-accordion__heading {
    margin: 0;
    font: inherit;
}

.autumn-accordion__body,
.autumn-collapsible__body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    color: var(--text);
}

/* Motion is opt-in: reduced motion is the default. */
@media (prefers-reduced-motion: no-preference) {
    .autumn-accordion__summary::after,
    .autumn-collapsible__summary::after {
        transition: transform 0.15s ease;
    }
}

/* ── Tabs (autumn-tabs) ────────────────────────────────────────────────────── */

.autumn-tabs__list {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-4);
}

.autumn-tabs__tab {
    padding: var(--space-2) var(--space-4);
    margin-bottom: -1px;
    color: var(--text-muted);
    font-weight: var(--font-weight-medium);
    font-size: 0.9375rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.autumn-tabs__tab:hover {
    color: var(--text);
}

.autumn-tabs__tab--active {
    color: var(--text);
    border-bottom-color: var(--primary);
}

.autumn-tabs__panel {
    display: none;
}

/* No-JS switching: a panel becomes visible when its id is the URL's
   fragment (`:target`), OR when it contains — at any depth — a currently
   `:target`-ed element. The second half reveals the whole ancestor chain
   down to a panel deep-linked inside a *nested* `tabs()` widget (one
   `tabs()` call rendered inside another's panel body): without it, the
   ancestor panel that merely contains the nested widget would stay
   `display: none` and hide the correctly-targeted inner panel along with
   it, even though the inner panel's own `:target` rule matched. The
   `:has()` argument is deliberately unscoped, since the target may be
   arbitrarily deep. */
.autumn-tabs:not(.autumn-tabs--enhanced) > .autumn-tabs__panel:is(:target, :has(:target)) {
    display: block;
}

/* Fallback: show the first panel only when NOTHING inside this widget is
   currently targeted — checked as bare `:target` (any element at all, not
   just `.autumn-tabs__panel`), since the fragment can target an arbitrary
   element inside a panel's body (a heading, an anchor) and not just a
   panel or a nested tabs() widget's panel; any such target means some
   panel of ours is already shown by the rule above, so the default must
   be suppressed. (An earlier version checked only
   `.autumn-tabs__panel:target`, which missed body-anchor targets: the
   panel containing the anchor would correctly show via `:has(:target)`
   above, but this fallback wouldn't detect anything was targeted and
   would show the default panel *too* — two panels visible for one
   deep link.) The `:has()` argument here is intentionally UNSCOPED (no
   `>`, checked at any depth): CSS forbids nesting `:has()` inside another
   `:has()`, so the `:has(:target)` half of the rule above can't be tested
   from inside this `:has()` directly — but any `:target` anywhere in the
   subtree, direct or nested, is exactly the signal that some panel is
   already shown by one half of the rule above or the other, so testing
   for plain `:target` gives the same answer without needing to nest. The
   *consequent* (`> .autumn-tabs__panel--active`) IS scoped to direct
   children, so this rule only ever reveals THIS widget's own default
   panel, never a nested widget's. */
.autumn-tabs:not(.autumn-tabs--enhanced):not(:has(:target)) > .autumn-tabs__panel--active {
    display: block;
}

/* With JS (issue #3397): autumn-widgets.js adds `autumn-tabs--enhanced` and
   sets `hidden` on each panel that is not selected. The `:target` rules
   above and below apply only without JS. */
.autumn-tabs.autumn-tabs--enhanced > .autumn-tabs__panel:not([hidden]) {
    display: block;
}

/* Graceful degradation for browsers that support `:target` (universal)
   but not `:has()` (narrower support): the `:not(:has(...))` fallback
   above never applies, so without this rule every panel would stay
   `display: none` on first load. Unconditionally showing the first panel
   here is a strictly better failure mode than a blank widget — in these
   browsers, navigating to a different panel's fragment may show that
   panel alongside the first rather than replacing it. */
@supports not selector(:has(a)) {
    .autumn-tabs > .autumn-tabs__panel--active {
        display: block;
    }
}

/* Sync the active-tab highlight with whichever panel is actually shown.
   Panel/tab ids are arbitrary caller strings, so a shared stylesheet can't
   match them by value — match by position instead, for the first 6 tabs.
   Widgets with more tabs keep switching panels correctly; only the
   active-tab highlight past the 6th degrades to showing no tab as active.
   The suppression rule below checks bare `:target` (any element, matching
   the panel-fallback reasoning above — the fragment can target an
   arbitrary element inside a panel body, not just a panel), with the same
   unscoped-argument / scoped-consequent pattern as the panel fallback,
   for the same :has()-can't-nest-in-:has() reason. The per-tab rules that
   follow can only match a panel that is ITSELF the direct `:target` — a
   panel shown only because it *contains* a target (nested widget or plain
   body anchor) can't be attributed to a specific tab position without
   nesting `:has()` inside `:has()`, which CSS disallows, so in that case
   no tab gets highlighted (a graceful degrade: no tab looks active,
   rather than the wrong one). */
.autumn-tabs:not(.autumn-tabs--enhanced):has(:target) > .autumn-tabs__list > .autumn-tabs__tab--active {
    color: var(--text-muted);
    border-bottom-color: transparent;
}

.autumn-tabs:not(.autumn-tabs--enhanced):has(> .autumn-tabs__panel:nth-of-type(1):target) > .autumn-tabs__list > .autumn-tabs__tab:nth-child(1),
.autumn-tabs:not(.autumn-tabs--enhanced):has(> .autumn-tabs__panel:nth-of-type(2):target) > .autumn-tabs__list > .autumn-tabs__tab:nth-child(2),
.autumn-tabs:not(.autumn-tabs--enhanced):has(> .autumn-tabs__panel:nth-of-type(3):target) > .autumn-tabs__list > .autumn-tabs__tab:nth-child(3),
.autumn-tabs:not(.autumn-tabs--enhanced):has(> .autumn-tabs__panel:nth-of-type(4):target) > .autumn-tabs__list > .autumn-tabs__tab:nth-child(4),
.autumn-tabs:not(.autumn-tabs--enhanced):has(> .autumn-tabs__panel:nth-of-type(5):target) > .autumn-tabs__list > .autumn-tabs__tab:nth-child(5),
.autumn-tabs:not(.autumn-tabs--enhanced):has(> .autumn-tabs__panel:nth-of-type(6):target) > .autumn-tabs__list > .autumn-tabs__tab:nth-child(6) {
    color: var(--text);
    border-bottom-color: var(--primary);
}

/* ── Pagination (autumn-pager) ─────────────────────────────────────────────── */

.autumn-pager,
.autumn-pager--cursor {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.autumn-pager__link,
.autumn-pager__current,
.autumn-pager__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.375rem var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    color: var(--text);
    text-decoration: none;
}

.autumn-pager__link:hover {
    background-color: var(--bg);
}

/* `__prev`/`__next` are always combined with `.autumn-pager__link` (enabled)
   or `.autumn-pager__disabled` (disabled) on the same element — no unique
   styling needed beyond that combination; kept as flex-shrink-0 hooks for
   app overrides that want to target direction specifically. */
.autumn-pager__prev,
.autumn-pager__next {
    flex-shrink: 0;
}

.autumn-pager__current {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.autumn-pager__ellipsis {
    border: none;
    color: var(--text-muted);
}

.autumn-pager__disabled {
    color: var(--text-muted);
    opacity: 0.5;
}

/* ── Direct-to-storage upload (autumn-direct-upload) ──────────────────────── */

.autumn-direct-upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    position: relative;
    border: 1px dashed var(--text-muted);
    border-radius: var(--radius-md);
}

.autumn-direct-upload[data-dragging] {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 8%, transparent);
}

.autumn-upload-label {
    font-weight: 600;
}

.autumn-upload-hint,
.autumn-upload-status {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.autumn-upload-hint[hidden],
.autumn-upload-progress[hidden] {
    display: none;
}

/* An empty live region stays in the accessibility tree, but takes no room. */
.autumn-upload-status:empty,
.autumn-upload-error:empty {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.autumn-upload-error {
    font-size: 0.8125rem;
    color: var(--danger);
}

.autumn-upload-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.autumn-upload-bar {
    height: 0.375rem;
    border-radius: var(--radius-full);
    background-color: var(--border);
    overflow: hidden;
}

.autumn-upload-bar::before {
    content: '';
    display: block;
    height: 100%;
    width: var(--autumn-upload-percent, 0%);
    background-color: var(--primary);
    transition: width 0.15s ease;
}

.autumn-upload-noscript {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ── Job status (autumn-job-status) ───────────────────────────────────────── */

.autumn-job-status {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.autumn-job-status__bar {
    width: 100%;
    height: 0.5rem;
    border-radius: var(--radius-full);
    accent-color: var(--primary);
}

.autumn-job-status__message {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.autumn-job-status__success {
    font-size: var(--font-size-sm);
    color: var(--success-text);
}

.autumn-job-status__error {
    font-size: var(--font-size-sm);
    color: var(--danger);
}

/* ── Badge / status pill (#1259) ──────────────────────────────────────────── */

.autumn-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.125rem var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    border-radius: var(--radius);
    border: 1px solid transparent;
    white-space: nowrap;
}

.autumn-badge--neutral {
    background: var(--surface-muted);
    color: var(--text-muted);
    border-color: var(--border);
}

.autumn-badge--info {
    background: var(--info-light);
    color: var(--info);
    border-color: var(--info);
}

.autumn-badge--success {
    background: var(--success-light);
    color: var(--success-text);
    border-color: var(--success);
}

.autumn-badge--warning {
    background: var(--warning-light);
    color: var(--warning-text);
    border-color: var(--warning);
}

.autumn-badge--danger {
    background: var(--danger-light);
    color: var(--danger-hover);
    border-color: var(--danger);
}

/* ── Avatar (#1263) ───────────────────────────────────────────────────────── */

.autumn-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    overflow: hidden;
    vertical-align: middle;
    border: 1px solid var(--border);
}

.autumn-avatar--image {
    object-fit: cover;
}

.autumn-avatar--initials {
    color: #fff;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    /* Fallback; the deterministic per-name color is one of the
       .autumn-avatar--cN palette classes below (defined after this rule so it
       wins at equal specificity). Class-based — not an inline style — so it
       survives a nonce CSP that forbids inline `style` attributes. */
    background: hsl(262, 60%, 45%);
}

/* Deterministic per-name background palette (selected by avatar_palette_class).
   Class-based so no inline `style` attribute is emitted. Each color gives
   white initials 4.5:1 (WCAG 1.4.3); a test in widgets_css.rs checks it. */
.autumn-avatar--c0 { background: hsl(0, 60%, 42%); }
.autumn-avatar--c1 { background: hsl(30, 60%, 40%); }
.autumn-avatar--c2 { background: hsl(60, 55%, 30%); }
.autumn-avatar--c3 { background: hsl(90, 55%, 32%); }
.autumn-avatar--c4 { background: hsl(120, 50%, 34%); }
.autumn-avatar--c5 { background: hsl(150, 55%, 33%); }
.autumn-avatar--c6 { background: hsl(180, 55%, 32%); }
.autumn-avatar--c7 { background: hsl(210, 60%, 42%); }
.autumn-avatar--c8 { background: hsl(240, 55%, 50%); }
.autumn-avatar--c9 { background: hsl(270, 55%, 48%); }
.autumn-avatar--c10 { background: hsl(300, 55%, 42%); }
.autumn-avatar--c11 { background: hsl(330, 60%, 44%); }

.autumn-avatar--sm {
    width: 24px;
    height: 24px;
    font-size: 0.625rem;
}

.autumn-avatar--md {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-sm);
}

.autumn-avatar--lg {
    width: 64px;
    height: 64px;
    font-size: 1.375rem;
}

.autumn-avatar__initials {
    line-height: 1;
    user-select: none;
}

/* ── Alert / callout (#1314) ──────────────────────────────────────────────── */

.autumn-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: var(--space-4);
}

.autumn-alert__icon {
    flex: 0 0 auto;
    display: inline-flex;
    line-height: 1;
}

.autumn-alert__content {
    flex: 1 1 auto;
    min-width: 0;
}

.autumn-alert__title {
    margin: 0 0 var(--space-1);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-bold);
}

.autumn-alert__body {
    font-size: var(--font-size-sm);
}

.autumn-alert__errors {
    margin: 0;
    padding-left: var(--space-5);
}

.autumn-alert__dismiss {
    flex: 0 0 auto;
    cursor: pointer;
    line-height: 1;
    font-size: var(--font-size-xl);
    color: inherit;
    padding: 0 var(--space-1);
    background: none;
    border: 0;
}

/* Visually hidden but kept in tab order / focusable (WCAG 2.1.1) — never
   `display:none`/`hidden`, which would remove it from the keyboard path. */
.autumn-alert__dismiss-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.autumn-alert__dismiss:has(.autumn-alert__dismiss-toggle:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.autumn-alert:has(.autumn-alert__dismiss-toggle:checked) {
    display: none;
}

.autumn-alert--info {
    background: var(--info-light);
    color: var(--info);
    border-color: var(--info);
}

.autumn-alert--success {
    background: var(--success-light);
    color: var(--success-text);
    border-color: var(--success);
}

.autumn-alert--warning {
    background: var(--warning-light);
    color: var(--warning-text);
    border-color: var(--warning);
}

.autumn-alert--error {
    background: var(--danger-light);
    color: var(--danger-hover);
    border-color: var(--danger);
}

/* ── Toast (autumn-toast) ──────────────────────────────────────────────────── */

/* Fixed stacking context dropped once in the layout; `pointer-events: none`
   so the empty region never blocks clicks, re-enabled on each toast below.
   The region is `popover="manual"` (#3399). The runtime opens it in the top
   layer, where `z-index` does not apply. These rules reset the UA popover
   box. `display` overrides the UA `display: none`, so the region also shows
   without JS. */
.autumn-toast-region {
    position: fixed;
    inset: auto 1rem 1rem auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

/* A popover has a transparent full-page `::backdrop`. The region does not
   need one. */
.autumn-toast-region::backdrop {
    display: none;
}

/* CSS runs the timer: a slide and fade in, then a fade and collapse out
   after the dwell. The runtime sets `--autumn-toast-duration` from
   `data-autumn-toast-duration`, and removes the toast when the fade ends.
   Without JS the toast stays in the DOM, `visibility: hidden` with zero
   height. */
.autumn-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
    font-size: 0.9375rem;
    /* Explicit starting max-height so the dismiss animation's height collapse
       (to `max-height: 0`) transitions smoothly instead of jumping — larger
       than any realistic single toast. */
    max-height: 200px;
    animation:
        autumn-toast-in 200ms ease-out,
        autumn-toast-out 400ms ease-in var(--autumn-toast-duration, 5s) forwards;
}

/* WCAG 2.2.1: hover or focus on a toast pauses the timer of every toast in
   the region. Then the user can read and act. Only the exit animation (the
   second one) pauses. A toast that arrives during the pause still fades in. */
.autumn-toast-region:hover .autumn-toast,
.autumn-toast-region:focus-within .autumn-toast,
.autumn-toast:hover,
.autumn-toast:focus-within {
    animation-play-state: running, paused;
}

/* No timer: the user closes the toast. */
.autumn-toast--persistent {
    animation: autumn-toast-in 200ms ease-out;
}

/* `display: flex` above overrides the UA `[hidden]` rule. */
.autumn-toast[hidden] {
    display: none;
}

.autumn-toast__message {
    display: block;
    flex: 1 1 auto;
}

/* The runtime shows the button. Without JS it does nothing, so it stays
   hidden. The target is at least 24 px (WCAG 2.5.8). */
.autumn-toast__close {
    flex: 0 0 auto;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: var(--font-size-xl);
    line-height: 1;
}

.autumn-toast__close[hidden] {
    display: none;
}

.autumn-toast__close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.autumn-toast--success {
    border-left-color: var(--success);
}

.autumn-toast--info {
    border-left-color: var(--info);
}

.autumn-toast--warning {
    border-left-color: var(--warning);
}

.autumn-toast--error {
    border-left-color: var(--danger);
}

@keyframes autumn-toast-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes autumn-toast-out {
    to {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        margin-top: calc(-1 * var(--space-2));
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Reduced motion: no slide or fade. A timed toast still hides after the
   dwell, so toasts do not pile up. A persistent toast has no animation. */
@media (prefers-reduced-motion: reduce) {
    /* A 0s entrance keeps the exit animation second, as the pause needs. */
    .autumn-toast {
        animation:
            autumn-toast-in 0s,
            autumn-toast-out 0s linear var(--autumn-toast-duration, 5s) forwards;
    }

    .autumn-toast--persistent {
        animation: none;
    }
}

/* ── Tooltip (autumn-tooltip, #3404) ───────────────────────────────────────── */

/* The root is the anchor. `anchor-scope` keeps each tooltip on its own
   trigger. `display: inline` keeps a long link trigger in the text flow.
   The fallback places the text with `position: absolute`. */
.autumn-tooltip {
    --autumn-tooltip-gap: var(--space-2);
    position: relative;
    display: inline;
    anchor-name: --autumn-tooltip;
    anchor-scope: --autumn-tooltip;
}

/* Hidden: `display: none`, so a hidden text adds no scroll overflow.
   `aria-describedby` still reads it. `pointer-events: auto` lets the
   pointer move onto it (WCAG 1.4.13). The transparent border shows in
   forced colors. */
.autumn-tooltip__bubble {
    display: none;
    position: absolute;
    z-index: var(--z-tooltip);
    box-sizing: border-box;
    width: max-content;
    max-width: min(20rem, calc(100vw - 2 * var(--space-2)));
    margin: 0;
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--text);
    color: var(--surface);
    box-shadow: var(--shadow);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    text-align: start;
    white-space: normal;
    overflow-wrap: break-word;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 120ms ease-out;
}

/* The hover bridge: a transparent box that covers the gap on each side. */
.autumn-tooltip__bubble::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--autumn-tooltip-gap));
}

/* One rule for each selector: a browser drops a whole list when it does
   not know one pseudo-class in it. A popover shows only when open. */
.autumn-tooltip:hover > .autumn-tooltip__bubble:not([popover]) {
    display: block;
}

.autumn-tooltip:has(:focus-visible) > .autumn-tooltip__bubble:not([popover]) {
    display: block;
}

.autumn-tooltip > .autumn-tooltip__bubble[popover]:popover-open {
    display: block;
}

/* Without `:has()`, any focus shows the text. */
@supports not selector(:has(a)) {
    .autumn-tooltip:focus-within > .autumn-tooltip__bubble:not([popover]) {
        display: block;
    }
}

/* Fade in from transparent. */
@starting-style {
    .autumn-tooltip__bubble {
        opacity: 0;
    }
}

/* Escape sets `hidden`. An empty text never shows. `!important` wins over
   each show rule above. */
.autumn-tooltip__bubble[hidden],
.autumn-tooltip__bubble:empty {
    display: none !important;
}

/* Fallback placement, without anchor positioning. */
.autumn-tooltip--top > .autumn-tooltip__bubble {
    bottom: 100%;
    left: 50%;
    translate: -50% 0;
    margin-bottom: var(--autumn-tooltip-gap);
}

.autumn-tooltip--bottom > .autumn-tooltip__bubble {
    top: 100%;
    left: 50%;
    translate: -50% 0;
    margin-top: var(--autumn-tooltip-gap);
}

.autumn-tooltip--start > .autumn-tooltip__bubble {
    top: 50%;
    inset-inline-end: 100%;
    translate: 0 -50%;
    margin-inline-end: var(--autumn-tooltip-gap);
}

.autumn-tooltip--end > .autumn-tooltip__bubble {
    top: 50%;
    inset-inline-start: 100%;
    translate: 0 -50%;
    margin-inline-start: var(--autumn-tooltip-gap);
}

/* Anchor positioning. `position: fixed` escapes an `overflow` clip. The
   text tries the other side, then above and below. `self-*` areas follow
   the direction of the tooltip, not of the page. `unsafe` alignment keeps
   the text off its trigger when no block area fits. */
@supports (anchor-scope: all) {
    .autumn-tooltip > .autumn-tooltip__bubble {
        position: fixed;
        position-anchor: --autumn-tooltip;
        inset: auto;
        translate: none;
        margin: 0;
    }

    .autumn-tooltip--top > .autumn-tooltip__bubble {
        position-area: block-start;
        align-self: unsafe end;
        margin-block-end: var(--autumn-tooltip-gap);
        position-try-fallbacks: flip-block;
    }

    .autumn-tooltip--bottom > .autumn-tooltip__bubble {
        position-area: block-end;
        align-self: unsafe start;
        margin-block-start: var(--autumn-tooltip-gap);
        position-try-fallbacks: flip-block;
    }

    .autumn-tooltip--start > .autumn-tooltip__bubble {
        position-area: self-inline-start;
        margin-inline-end: var(--autumn-tooltip-gap);
        position-try-fallbacks: flip-inline, --autumn-tooltip-above, --autumn-tooltip-below;
    }

    .autumn-tooltip--end > .autumn-tooltip__bubble {
        position-area: self-inline-end;
        margin-inline-start: var(--autumn-tooltip-gap);
        position-try-fallbacks: flip-inline, --autumn-tooltip-above, --autumn-tooltip-below;
    }
}

@position-try --autumn-tooltip-above {
    position-area: block-start;
    align-self: unsafe end;
    justify-self: anchor-center;
    margin: 0 0 var(--autumn-tooltip-gap);
}

@position-try --autumn-tooltip-below {
    position-area: block-end;
    align-self: unsafe start;
    justify-self: anchor-center;
    margin: var(--autumn-tooltip-gap) 0 0;
}

/* Chromium: the runtime makes the text a `popover="hint"`. The browser
   shows it in the top layer. Reset the UA popover box, and place the text
   at the implicit anchor (the `interestfor` trigger). */
.autumn-tooltip__bubble[popover] {
    position: fixed;
    position-anchor: auto;
    inset: auto;
    translate: none;
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .autumn-tooltip__bubble {
        transition: none;
    }
}

/* ── Cookie-consent banner (issue #1214) ──────────────────────────────────── */

/* `position: sticky` (not `fixed`) deliberately: the banner is spliced right
   before `</body>`, so as the last element in normal document flow it always
   reserves exactly its own real, responsive height -- however many lines the
   message/buttons wrap to on a narrow viewport or at increased text zoom --
   with no separate CSS reservation hack that could fall out of sync and let
   a `fixed` banner permanently cover page content (e.g. a `<footer>`)
   underneath it. It still behaves like a persistent bottom bar (not a
   full-screen overlay, not a blocking modal) on any page taller than the
   viewport, which is the common case; on a very short page it simply settles
   in flow just after the content rather than pinned to the visual bottom of
   the screen. `--text-muted` (not `--border`, which is only ~1.2:1 against
   `--surface`) gives the boundary the ~3:1 contrast WCAG 1.4.11 requires for
   a UI-component edge; `--shadow` reinforces it. */
.autumn-consent-banner {
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-banner);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background-color: var(--surface);
    border-top: 1px solid var(--text-muted);
    box-shadow: var(--shadow);
    color: var(--text);
}

.autumn-consent-banner__message {
    margin: 0;
    flex: 1 1 20rem;
    font-size: 0.9rem;
}

.autumn-consent-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
}

/* Reject and Accept share this one base class — and no other sizing/color
   rule distinguishes them — so rejecting is exactly as easy (same size,
   same prominence) as accepting. Do not add a `--reject`/`--accept`-only
   rule that changes size, weight, or fill; that would recreate the
   dark-pattern "big Accept button, buried Reject link" this widget exists
   to avoid. */
.autumn-consent-banner__button {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--text-muted);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.autumn-consent-banner__button:hover {
    border-color: var(--primary);
}

.autumn-consent-banner__button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Visually hidden (autumn-visually-hidden) ─────────────────────────────── */

/* Core widgets (spinner, icon-only button) and the chart and bulk-action
   families use it, so it stays in the core file (#3408). */
/* Visually hidden but still exposed to assistive technology — the standard
   clip pattern (never `display:none`, which removes it from the a11y tree). */
.autumn-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Card (#2354) ──────────────────────────────────────────────────────────
   The card()/stat_card() widgets emit these namespaced hooks. They were
   unprefixed (card, card-header, stat-card, …) before 0.8.0 and had no
   rules in this bundle. */

.autumn-card {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: var(--space-6);
}

.autumn-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6) var(--space-3);
    border-bottom: 1px solid var(--border);
}

.autumn-card__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.autumn-card__body {
    padding: var(--space-6);
}

.autumn-card__footer {
    padding: var(--space-3) var(--space-6);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* ── Stat card (#2354) ───────────────────────────────────────────────────── */

.autumn-stat-card {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-5);
}

.autumn-stat-card__label {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
}

.autumn-stat-card__value {
    margin-top: var(--space-1);
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--text);
}

.autumn-stat-card__link {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
}

/* ── Alert icon (#2354) ──────────────────────────────────────────────────── */

.autumn-alert__icon-svg {
    flex-shrink: 0;
}

/* The circle is currentColor. The glyph uses the surface color, so it is
   visible in both schemes. */
.autumn-alert__icon-glyph {
    fill: var(--surface);
}

/* ── Active nav link (#2354) ─────────────────────────────────────────────── */

.autumn-active {
    font-weight: var(--font-weight-semibold);
    color: var(--primary);
}

/* ── Button (autumn-button, #3406) ────────────────────────────────────────── */

.autumn-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.autumn-button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.autumn-button:disabled,
.autumn-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* A busy button is disabled too. It keeps full opacity: the spinner shows. */
.autumn-button[aria-busy="true"] {
    opacity: 1;
    cursor: progress;
}

/* Sizes come before the variants, so the link variant can drop the padding. */
.autumn-button--sm {
    min-block-size: var(--space-8);
    padding-inline: var(--space-3);
}

.autumn-button--md {
    min-block-size: calc(var(--space-8) + var(--space-2));
    padding-inline: var(--space-4);
}

.autumn-button--lg {
    min-block-size: calc(var(--space-8) + var(--space-4));
    padding-inline: var(--space-6);
    font-size: var(--font-size-md);
}

/* An icon-only button is square. */
.autumn-button--icon {
    padding-inline: 0;
    min-inline-size: calc(var(--space-8) + var(--space-2));
}

.autumn-button--icon.autumn-button--sm {
    min-inline-size: var(--space-8);
}

.autumn-button--icon.autumn-button--lg {
    min-inline-size: calc(var(--space-8) + var(--space-4));
}

.autumn-button--primary {
    background-color: var(--primary);
    color: var(--on-primary);
}

.autumn-button--primary:hover {
    background-color: var(--primary-hover);
}

.autumn-button--secondary {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--control-border);
}

.autumn-button--secondary:hover {
    background-color: var(--surface-muted);
}

.autumn-button--ghost {
    background-color: transparent;
    color: var(--text);
}

.autumn-button--ghost:hover {
    background-color: var(--surface-muted);
}

.autumn-button--destructive {
    background-color: var(--danger);
    color: var(--on-danger);
}

.autumn-button--destructive:hover {
    background-color: var(--danger-hover);
}

/* A link button keeps a 24px target (WCAG 2.5.8). A fixed size, not a
   space token: the minimum must not scale down with density. */
.autumn-button--link {
    min-block-size: 1.5rem;
    padding: 0;
    background-color: transparent;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.autumn-button--link:hover {
    color: var(--primary-hover);
}

.autumn-button__icon {
    display: inline-flex;
    flex: none;
}

.autumn-button__label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The spinner sits on top of the label, so the width does not change.
   Two classes: this rule must beat the `.autumn-spinner__icon` display. */
.autumn-button > .autumn-button__spinner {
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
}

/* Busy: `aria-busy` (from the server, or from the runtime for the
   submitter of a form), or htmx marks the button itself (it sends the
   request, or `hx-indicator` names it). Three classes: these beat the
   rule above. */
.autumn-button[aria-busy="true"] > .autumn-button__spinner,
.autumn-button.htmx-request > .autumn-button__spinner {
    display: block;
}

/* Hide the icon and the label with opacity only. They stay in the
   accessibility tree, so the button keeps its name. */
.autumn-button[aria-busy="true"] > .autumn-button__spinner ~ *,
.autumn-button.htmx-request > .autumn-button__spinner ~ * {
    opacity: 0;
}

/* ── Button group (autumn-button-group, #3406) ────────────────────────────── */

.autumn-button-group {
    display: inline-flex;
    isolation: isolate;
}

.autumn-button-group--vertical {
    flex-direction: column;
}

/* The focus ring shows above the next button. */
.autumn-button-group > :focus-visible {
    z-index: 1;
}

/* The buttons touch. -1px puts two borders on one line. */
.autumn-button-group:not(.autumn-button-group--vertical) > :not(:first-child) {
    margin-inline-start: -1px;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.autumn-button-group:not(.autumn-button-group--vertical) > :not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.autumn-button-group--vertical > :not(:first-child) {
    margin-block-start: -1px;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.autumn-button-group--vertical > :not(:last-child) {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

/* ── Spinner (autumn-spinner, #3406) ──────────────────────────────────────── */

.autumn-spinner {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: var(--primary);
}

.autumn-spinner--sm {
    font-size: var(--font-size-md);
}

.autumn-spinner--md {
    font-size: var(--font-size-2xl);
}

.autumn-spinner--lg {
    font-size: calc(2 * var(--font-size-md));
}

/* A ring with one colored arc. The busy button uses it too. Without
   color-mix(), the track is transparent and the arc still shows. */
.autumn-spinner__icon {
    display: inline-block;
    flex: none;
    inline-size: 1em;
    block-size: 1em;
    box-sizing: border-box;
    border: 0.15em solid transparent;
    border-color: color-mix(in srgb, currentColor 25%, transparent);
    border-block-start-color: currentColor;
    border-radius: var(--radius-full);
}

@keyframes autumn-spin {
    to { transform: rotate(1turn); }
}

/* Opacity only: no motion. */
@keyframes autumn-pulse {
    50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: no-preference) {
    .autumn-spinner__icon {
        animation: autumn-spin 0.8s linear infinite;
    }
}

/* Reduced motion: the ring does not turn. It fades slowly. */
@media (prefers-reduced-motion: reduce) {
    .autumn-spinner__icon {
        animation: autumn-pulse 2s ease-in-out infinite;
    }
}

/* Forced colors makes every border one color, and the arc goes. */
@media (forced-colors: active) {
    .autumn-spinner__icon {
        forced-color-adjust: none;
        border-color: GrayText;
        border-block-start-color: CanvasText;
    }
}

/* An htmx indicator is hidden until htmx gives it, or an element around
   it, the `htmx-request` class. A spinner keeps its `role="status"` root
   in the tree and hides only its content, so a screen reader reads the
   label when it shows. */
.autumn-indicator:not(.autumn-spinner):not(.htmx-request, .htmx-request *),
.autumn-spinner.autumn-indicator:not(.htmx-request, .htmx-request *) > * {
    display: none;
}

/* ── Skeleton (autumn-skeleton, #3406) ────────────────────────────────────── */

.autumn-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.autumn-skeleton--circle {
    flex-direction: row;
}

/* Forced colors removes the background. The transparent border keeps an
   edge, because forced colors paints it. */
.autumn-skeleton__item {
    display: block;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: var(--border);
}

.autumn-skeleton--line .autumn-skeleton__item {
    inline-size: 100%;
    block-size: 1em;
}

.autumn-skeleton--line .autumn-skeleton__item:last-child:not(:only-child) {
    inline-size: 60%;
}

.autumn-skeleton--block .autumn-skeleton__item {
    block-size: calc(3 * var(--space-8));
    border-radius: var(--radius);
}

.autumn-skeleton--circle .autumn-skeleton__item {
    flex: none;
    inline-size: calc(var(--space-8) + var(--space-2));
    block-size: calc(var(--space-8) + var(--space-2));
    border-radius: var(--radius-full);
}

/* The skeleton pulses. Reduced motion: it does not. */
@media (prefers-reduced-motion: no-preference) {
    .autumn-skeleton__item {
        animation: autumn-pulse 1.5s ease-in-out infinite;
    }
}

/* ── Progress and meter (autumn-progress, autumn-meter, #3406) ────────────── */

.autumn-progress {
    display: block;
    inline-size: 100%;
    block-size: var(--space-2);
    accent-color: var(--primary);
}

/* The browser colors a meter good, average or bad. These rules use the
   tokens. Keep each engine's pseudo-element in its own rule: one unknown
   selector drops the whole rule. Use the `background` shorthand: the UA
   paints a gradient image over a `background-color`. */
.autumn-meter {
    display: block;
    inline-size: 100%;
    block-size: var(--space-2);
    appearance: none;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface-muted);
    color: var(--text);
}

.autumn-meter::-webkit-meter-bar {
    block-size: var(--space-2);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface-muted);
}

.autumn-meter::-webkit-meter-optimum-value {
    border-radius: var(--radius-full);
    background: var(--success);
}

.autumn-meter::-webkit-meter-suboptimum-value {
    border-radius: var(--radius-full);
    background: var(--warning-text);
}

.autumn-meter::-webkit-meter-even-less-good-value {
    border-radius: var(--radius-full);
    background: var(--danger);
}

.autumn-meter::-moz-meter-bar {
    border-radius: var(--radius-full);
    background: var(--success);
}

.autumn-meter:-moz-meter-optimum::-moz-meter-bar {
    background: var(--success);
}

.autumn-meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--warning-text);
}

.autumn-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--danger);
}

/* Forced colors removes the backgrounds, and the bar goes. Use system
   colors: a Canvas track with an edge and a Highlight fill. */
@media (forced-colors: active) {
    .autumn-meter {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
        background: Canvas;
    }

    .autumn-meter::-webkit-meter-bar {
        background: Canvas;
    }

    .autumn-meter::-webkit-meter-optimum-value {
        background: Highlight;
    }

    .autumn-meter::-webkit-meter-suboptimum-value {
        background: Highlight;
    }

    .autumn-meter::-webkit-meter-even-less-good-value {
        background: Highlight;
    }

    .autumn-meter::-moz-meter-bar {
        background: Highlight;
    }

    .autumn-meter:-moz-meter-optimum::-moz-meter-bar {
        background: Highlight;
    }

    .autumn-meter:-moz-meter-sub-optimum::-moz-meter-bar {
        background: Highlight;
    }

    .autumn-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
        background: Highlight;
    }
}

.autumn-progress-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.autumn-progress-field__header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}

.autumn-progress-field__label {
    font-weight: var(--font-weight-medium);
    color: var(--text);
}

.autumn-progress-field__value {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Separator (autumn-separator, #3406) ──────────────────────────────────── */

.autumn-separator {
    block-size: 0;
    margin: var(--space-4) 0;
    border: 0;
    border-block-start: 1px solid var(--border);
}

.autumn-separator--vertical {
    display: inline-block;
    align-self: stretch;
    inline-size: 0;
    block-size: auto;
    min-block-size: 1em;
    margin: 0 var(--space-2);
    border-block-start: 0;
    border-inline-start: 1px solid var(--border);
    vertical-align: middle;
}

/* ── Kbd (autumn-kbd, #3406) ──────────────────────────────────────────────── */

.autumn-kbd {
    display: inline-block;
    min-inline-size: 1.5em;
    padding: 0 var(--space-1);
    border: 1px solid var(--border);
    border-block-end-width: 2px;
    border-radius: var(--radius-sm);
    background-color: var(--surface-muted);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    text-align: center;
    white-space: nowrap;
}

.autumn-kbd-combo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ── Empty state (autumn-empty-state, #3406) ──────────────────────────────── */

.autumn-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.autumn-empty-state__icon {
    display: inline-flex;
    color: var(--text-muted);
    font-size: var(--font-size-2xl);
}

.autumn-empty-state__title {
    margin: 0;
    color: var(--text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.autumn-empty-state__body {
    max-inline-size: 40ch;
    margin: 0;
    color: var(--text-muted);
}

.autumn-empty-state__action {
    margin-block-start: var(--space-2);
}

/* ── Avatar group (autumn-avatar-group, #3406) ────────────────────────────── */

.autumn-avatar-group {
    display: inline-flex;
    align-items: center;
}

/* A ring in the surface color shows where two avatars overlap. */
.autumn-avatar-group > .autumn-avatar {
    box-shadow: 0 0 0 2px var(--surface);
}

.autumn-avatar-group > .autumn-avatar + .autumn-avatar {
    margin-inline-start: calc(-1 * var(--space-2));
}

/* The +N item is a pill: a long count or large text does not clip
   (WCAG 1.4.4). Its minimum sizes match the .autumn-avatar--* sizes. */
.autumn-avatar-group__more {
    width: auto;
    height: auto;
    padding: 0 var(--space-1);
    background-color: var(--surface-muted);
    color: var(--text);
    font-weight: var(--font-weight-semibold);
}

.autumn-avatar-group__more.autumn-avatar--sm {
    min-width: 24px;
    min-height: 24px;
}

.autumn-avatar-group__more.autumn-avatar--md {
    min-width: 40px;
    min-height: 40px;
}

.autumn-avatar-group__more.autumn-avatar--lg {
    min-width: 64px;
    min-height: 64px;
}

/* ── Auto-grow textarea (autumn-auto-grow, #3406) ─────────────────────────── */

/* The textarea grows with its text. A browser with no `field-sizing` keeps
   the `rows` height. `field-sizing` also sizes the width to the text, so
   the width is set. */
.autumn-auto-grow {
    inline-size: 100%;
    field-sizing: content;
    min-block-size: 3lh;
    max-block-size: 50vh;
}