/* Admin dashboard: sign in, then five tabs of ruled work. */

/* --- Sign in and the other pre-dashboard panels -------------------------- */

/*
 * One narrow column, not a card. The handoff signs an organiser in against
 * the same paper everything else sits on: an eyebrow, a hero, a rule, and
 * then bare underlined fields.
 */
.login-view { display: block; }

.login-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
}

.login-card__title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 7vw, 4rem);
    letter-spacing: -0.045em;
    line-height: 0.82;
    margin-top: 10px;
}

.login-card__intro {
    font-size: 0.8rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    margin-top: 22px;
    /* The heavy rule that separates the explanation from the work. */
    padding-bottom: 34px;
    border-bottom: 1px solid var(--color-text);
    margin-bottom: 30px;
}

.login-card .form { gap: 28px; }
.login-card .form .button--cta { margin-top: 6px; }

/* --- Dashboard header --------------------------------------------------- */

/* Sign out sits in the eyebrow rule rather than beside the heading. */
.eyebrow__action {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.eyebrow__action:hover { color: var(--color-text); }

/* --- Tabs --------------------------------------------------------------- */

/*
 * The tabs wrap; they do not scroll. Do not add `overflow-x` here to "let them
 * scroll on a phone" — setting either overflow axis to something other than
 * `visible` computes the *other* axis to `auto`, and `.tab` below carries
 * `margin-bottom: -1px` on purpose, so each tab hangs 1px past this element's
 * content box. That one pixel is enough to paint a full vertical scrollbar down
 * the side of the row, which is what used to happen here.
 */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 40px;
    border-bottom: 1px solid var(--color-text);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.69rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.tab:hover { color: var(--color-text); }
.tab--active { color: var(--color-text); border-bottom-color: var(--color-text); }

/* How many things are waiting, in the ledger's serif and its warning gold. */
.tab__count {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-warning);
}

.tab-panel { padding-top: 34px; }

.panel-heading__controls {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}
/* A filter sits on the heading rule as a bare underlined select. */
.panel-heading__controls .input--select {
    width: auto;
    border-bottom-color: var(--color-text);
    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-bottom: 8px;
}

/* --- Registration, access and people cards ------------------------------ */

/*
 * All three lists share a shape: a ruled row with the name in serif, a status
 * badge opposite it, a label/value grid underneath, and the actions last.
 */
.registration-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.registration-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 26px 0;
    border-top: 1px solid var(--color-border);
}
.registration-list > .registration-card:first-child { border-top-color: var(--color-text); }

.registration-card__header {
    display: flex;
    gap: 18px;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
}
.registration-card__name {
    font-size: 1.875rem;
    line-height: 1;
    overflow-wrap: anywhere;
}

.registration-card__rename-form {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
}
.registration-card__rename-form .input { flex: 1 1 16rem; }
.registration-card__rename-form .registration-card__name-change-message { flex-basis: 100%; }

/* label / value, at the handoff's 130px gutter. */
.registration-card__details {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 8px 24px;
    margin: 8px 0 0;
    font-size: 0.75rem;
}
.registration-card__details dt {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 400;
}
.registration-card__details dd { margin: 0; overflow-wrap: anywhere; line-height: 1.7; }

.registration-card__members {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.registration-card__member--withdrawn { color: var(--color-text-muted); }

/*
 * Capped rather than justified across the whole card: at full width the Edit
 * chip drifts to the far edge and stops reading as belonging to the name
 * beside it.
 */
.registration-card__member-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: 34rem;
}
.registration-card__member-line .button--chip { flex-shrink: 0; }
.registration-card__member .registration-card__rename-form { margin-top: var(--space-2); }

/* The year group sits beside the name field rather than stretching with it. */
.registration-card__member-grade { flex: 0 0 auto; }

/* A requested rename is the one thing on a card that needs its own frame. */
.registration-card__name-change {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-2);
    padding: 16px 18px;
    border: 1px solid var(--color-warning);
}
.registration-card__name-change p { margin: 0; font-size: 0.75rem; }
.registration-card__name-change strong {
    font-family: var(--font-serif);
    font-size: 1.3125rem;
    font-weight: 400;
}

.registration-card__name-change-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.registration-card__name-change-message { color: var(--color-danger); font-size: 0.75rem; }
.registration-card__name-change-message:empty { display: none; }

.registration-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: var(--space-2);
}
.registration-card__message {
    flex-basis: 100%;
    margin: 0;
    color: var(--color-danger);
    font-size: 0.75rem;
}

.registration-card__note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-style: italic;
    font-family: var(--font-serif);
}

/* "Who has access" sits under the request list in the same tab. */
.panel-heading--secondary {
    margin-top: 56px;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-text);
}

.people-list .registration-card__details { grid-template-columns: 130px minmax(0, 1fr); }

@media (max-width: 640px) {
    .registration-card__details,
    .people-list .registration-card__details {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px 0;
    }
    .registration-card__details dt { margin-top: var(--space-2); }
}

/* --- Counting laps ------------------------------------------------------ */

#score-search { max-width: 300px; }

.sync-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.sync-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.sync-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.sync-status[data-state="synced"] { color: var(--color-success); }
.sync-status[data-state="pending"],
.sync-status[data-state="syncing"] { color: var(--color-warning); }
.sync-status[data-state="rejected"] { color: var(--color-danger); }

/*
 * Laps the database refused. These exist nowhere else — a refused tap never
 * reached score_events, so it is not in the audit trail — which is why the
 * panel is loud and stays until a Captain dismisses it.
 */
.rejected-laps {
    border: 2px solid var(--color-danger);
    padding: 22px 24px;
    margin-bottom: var(--space-5);
}
.rejected-laps__title {
    margin: 0;
    font-size: 1.625rem;
    color: var(--color-danger);
}
.rejected-laps__note {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.rejected-laps__list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.rejected-laps__item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 0;
    border-top: 1px solid var(--color-border);
}
.rejected-laps__what { font-family: var(--font-serif); font-size: 1.3125rem; }
.rejected-laps__why { font-size: 0.69rem; color: var(--color-text-muted); }
.rejected-laps__reason {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.rejected-laps__dismiss { margin-top: 20px; align-self: flex-start; }

.score-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 34px;
    list-style: none;
    padding: 0;
}

/*
 * One team. The tap target keeps its position as counts change, so a rapid
 * second tap cannot land somewhere else.
 */
.score-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "identity identity"
        "total    tap"
        "adjust   adjust";
    align-items: end;
    gap: 24px;
    padding: 24px 26px;
    border: 1px solid var(--color-border);
}

/* A pinned team keeps this border wherever the sort puts it, so the reason it
   jumped to the top is visible without reading the button. */
.score-row--pinned { border: 2px solid var(--color-text); }

.score-row__identity {
    grid-area: identity;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    min-width: 0;
}
.score-row__name { font-size: 2rem; line-height: 1; overflow-wrap: anywhere; }

/* The bibs take their own line under the name and the actions: they are what a
   counter matches a runner against, so they must not be squeezed by whatever
   the team is called. */
.score-row__bibs { flex-basis: 100%; }

.score-row__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.score-row__pin[aria-pressed="true"],
.score-row__fullscreen[aria-pressed="true"] {
    color: var(--color-text);
    border-color: var(--color-text);
}

.score-row__total {
    grid-area: total;
    text-align: right;
    white-space: nowrap;
}
.score-row__laps {
    font-family: var(--font-serif);
    font-size: 3.625rem;
    line-height: 0.9;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.score-row__laps-label {
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-left: 8px;
}
.score-row__pending {
    display: block;
    margin-top: 6px;
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-warning);
}

/* One button per tier, each big enough to hit reliably while looking at the
   runners, not the phone. They share the width equally so the row reads as one
   strip of targets rather than a primary and two afterthoughts. */
.score-row__tiers {
    grid-area: tap;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
}

.button--tap {
    flex-direction: column;
    gap: 6px;
    min-height: 118px;
    padding: 14px 12px;
    background: var(--color-ink-dark);
    color: var(--color-lime);
    border-color: var(--color-ink-dark);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.button--tap:hover { background: var(--color-ink-dark-2); border-color: var(--color-ink-dark-2); }
.button--tap:active { background: var(--color-accent); border-color: var(--color-accent); }
.button__tap-tier {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.05;
    text-transform: none;
    letter-spacing: 0;
}
.button__tap-caption {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
}

.button--tap-flash { animation: tap-flash 320ms ease-out; }
@keyframes tap-flash {
    0% { box-shadow: 0 0 0 0 rgba(195, 220, 146, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(195, 220, 146, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .button--tap-flash { animation: none; }
}

/*
 * Full screen focus mode: one team fills the viewport, mainly for a phone. It
 * stops a stray touch from scrolling the page or landing on a neighbouring
 * team's button while the counter is watching the runners. A CSS overlay, not
 * the Fullscreen API — requestFullscreen() on an arbitrary element has no
 * support on iOS Safari, which is the device this is for.
 */
body.has-fullscreen-score-row { overflow: hidden; }

.score-row--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    /* The row's own `align-items: end` means "sit on the baseline" in the grid
       layout; in this column flex it would shrink every child to its content
       and push it against the right edge. */
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-5);
    padding-top: max(var(--space-5), env(safe-area-inset-top));
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
    padding-left: max(var(--space-5), env(safe-area-inset-left));
    padding-right: max(var(--space-5), env(safe-area-inset-right));
    border: none;
    background: var(--color-bg);
    overflow-y: auto;
}

/* Flex order rather than reordering the DOM: identity (with the button that
   exits) stays reachable at the top, the total is easy to check next, and the
   tap target — the thing this mode exists for — gets what is left. */
.score-row--fullscreen .score-row__identity { order: 1; }
/* align-self: stretch undoes the `align-self: end` the narrow layout gives the
   total specifically. */
.score-row--fullscreen .score-row__total { order: 2; text-align: left; align-self: stretch; }
.score-row--fullscreen .score-row__laps { font-size: 4.5rem; }
/* The tier buttons are what this mode exists for, so they take everything the
   identity and the total leave: stacked, full width, and each one a share of
   the height rather than a fixed size. */
.score-row--fullscreen .score-row__tiers {
    order: 3;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.score-row--fullscreen .button--tap { flex: 1; min-height: 5rem; }
.score-row--fullscreen .button__tap-tier { font-size: 2.25rem; }
.score-row--fullscreen .button__tap-caption { font-size: 0.75rem; }
.score-row--fullscreen .score-row__adjust { order: 4; }

/* --- Corrections -------------------------------------------------------- */

.score-row__adjust {
    grid-area: adjust;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}
.score-row__adjust-summary {
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
    list-style: none;
}
.score-row__adjust-summary::-webkit-details-marker { display: none; }
.score-row__adjust-summary::before { content: "\25B8\00a0"; }
.score-row__adjust[open] .score-row__adjust-summary::before { content: "\25BE\00a0"; }
.score-row__adjust-summary:hover { color: var(--color-text); }

.adjust-form {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 1.6fr) auto;
    gap: 20px;
    align-items: end;
    margin-top: 20px;
}
.adjust-form__field { display: flex; flex-direction: column; gap: 8px; }
.adjust-form__label {
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.adjust-form .input { font-size: 0.8rem; }
.adjust-form__hint {
    grid-column: 1 / -1;
    font-size: 0.69rem;
    color: var(--color-text-muted);
}
/* The runner field's own hint would otherwise sit between the label and the
   control; it belongs under the whole row. */
.adjust-form__field .adjust-form__hint { grid-column: auto; order: 3; }
.adjust-form__message {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    min-height: 1.2em;
}
.adjust-form__message--error { color: var(--color-danger); }

@media (max-width: 1100px) {
    .score-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "identity"
            "total"
            "tap"
            "adjust";
    }
    .score-row__total { text-align: left; align-self: end; }
    .adjust-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .adjust-form > *:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .score-row { padding: 20px; }
    /* A thumb, not a cursor: the three targets stack full width rather than
       sharing a phone's width three ways. */
    .score-row__tiers { grid-auto-flow: row; }
    .adjust-form { grid-template-columns: minmax(0, 1fr); }
    .adjust-form > *:nth-child(3) { grid-column: auto; }
}

/* --- History ------------------------------------------------------------ */

.history-table { min-width: 900px; }
.history-table__when { color: var(--color-text-muted); white-space: nowrap; }
.history-table__change {
    font-family: var(--font-serif);
    font-size: 1.1875rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.history-table__change--gain { color: var(--color-success); }
.history-table__change--loss { color: var(--color-danger); }
.history-table__team { font-family: var(--font-serif); font-size: 1.0625rem; }
.history-table__runner { overflow-wrap: anywhere; }
.history-table__runner--none { color: var(--color-border); }
.history-table__type {
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.history-table__reason { min-width: 12rem; overflow-wrap: anywhere; }
.history-table__reason--implicit { color: var(--color-text-muted); }
.history-table__admin {
    font-size: 0.63rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* --- Settings ----------------------------------------------------------- */

.settings-card { display: flex; flex-direction: column; }
.settings-card + .settings-card { margin-top: 56px; }

.settings-card__title { font-size: clamp(1.6rem, 3vw, 2.125rem); }
.settings-card__intro {
    margin-top: 12px;
    font-size: 0.75rem;
    line-height: 1.8;
    color: var(--color-text-muted);
    max-width: 60ch;
}
.settings-card .form { margin-top: 26px; max-width: 420px; }

.lap-type-settings {
    display: flex;
    flex-direction: column;
    margin-top: 26px;
    list-style: none;
    padding: 0;
}
.lap-type-settings__row {
    padding: 22px 0;
    border-top: 1px solid var(--color-border);
}
.lap-type-settings > .lap-type-settings__row:first-child { border-top-color: var(--color-text); }

/*
 * Named areas rather than source order: the component emits label, input,
 * caption, label, input, hint, button, message as eight flat children, and
 * this row wants each caption sitting above its own field with the tier name
 * and the Save button spanning both lines.
 */
.lap-type-settings__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 190px minmax(0, 1fr) auto;
    grid-template-areas:
        "label ptcap capcap hint save"
        "label ptfld capfld hint save"
        "msg   msg   msg    msg  msg";
    column-gap: 22px;
    row-gap: 7px;
    align-items: end;
}
.lap-type-settings__label {
    grid-area: label;
    align-self: center;
    font-family: var(--font-serif);
    font-size: 1.75rem;
    line-height: 1;
}
.lap-type-settings__suffix { grid-area: ptcap; }
.lap-type-settings__points-input {
    grid-area: ptfld;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    border-bottom-color: var(--color-text);
}
.lap-type-settings__cap-label { grid-area: capcap; }
.lap-type-settings__cap-input { grid-area: capfld; }
.lap-type-settings__cap-label,
.lap-type-settings__suffix {
    display: block;
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.lap-type-settings__hint {
    grid-area: hint;
    align-self: center;
    font-size: 0.63rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}
.lap-type-settings__form .button { grid-area: save; align-self: center; }
.lap-type-settings__message {
    grid-area: msg;
    font-size: 0.75rem;
    min-height: 1.2em;
}
.lap-type-settings__message:empty { min-height: 0; }
.lap-type-settings__message--error { color: var(--color-danger); }
.lap-type-settings__message--success { color: var(--color-success); }

/* The hint is the first thing to go: it repeats what the blank placeholder
   already says, and the two fields are what the row is for. */
@media (max-width: 1100px) {
    .lap-type-settings__form {
        grid-template-columns: minmax(0, 1fr) 92px 190px auto;
        grid-template-areas:
            "label ptcap capcap save"
            "label ptfld capfld save"
            "msg   msg   msg    msg";
    }
    .lap-type-settings__hint { display: none; }
}
@media (max-width: 640px) {
    .lap-type-settings__form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "label  label"
            "ptcap  capcap"
            "ptfld  capfld"
            "save   save"
            "msg    msg";
        column-gap: 18px;
        row-gap: 10px;
    }
    .lap-type-settings__form .button { justify-self: start; margin-top: var(--space-2); }
}

/* The level choice on the access request form. */
.level-choice {
    border: 0;
    margin: 0;
    padding: 0;
}
.level-choice__legend {
    padding: 0;
    font-size: 0.63rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.level-choice__option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    cursor: pointer;
}
.level-choice__option:has(input:checked) {
    border-color: var(--color-text);
    box-shadow: inset 0 0 0 1px var(--color-text);
}
.level-choice__option:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.level-choice__option > span { display: grid; gap: 3px; }
.level-choice__hint { font-size: 0.72rem; color: var(--color-text-muted); line-height: 1.6; }

/* --- Entrances ---------------------------------------------------------- */

/*
 * Plain CSS rather than a scroll trigger: these lists rebuild often during an
 * event — a pin toggle, a lap type save, a realtime score change — and a
 * reveal keyed to scroll would either re-fire on every rebuild or never fire
 * again after the first.
 */
.registration-card,
.score-row,
.lap-type-settings__row {
    animation: om-rise 480ms cubic-bezier(.16, 1, .3, 1) both;
}
.registration-card:nth-child(1), .score-row:nth-child(1) { animation-delay: 0ms; }
.registration-card:nth-child(2), .score-row:nth-child(2) { animation-delay: 40ms; }
.registration-card:nth-child(3), .score-row:nth-child(3) { animation-delay: 80ms; }
.registration-card:nth-child(4), .score-row:nth-child(4) { animation-delay: 120ms; }
.registration-card:nth-child(5), .score-row:nth-child(5) { animation-delay: 160ms; }
.registration-card:nth-child(n+6), .score-row:nth-child(n+6) { animation-delay: 200ms; }

/* The fullscreen counting overlay reuses .score-row; it must snap in rather
   than rise like a freshly rendered list row. */
.score-row--fullscreen { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .registration-card, .score-row, .lap-type-settings__row { animation: none; }
}

/* --- The Event tab ------------------------------------------------------- */

/*
 * Three jobs on one screen — the event's record, its page content and its
 * documents — so each is its own ruled section rather than a box. Same
 * reasoning as everywhere else here: a rule divides, a border decorates.
 */
.event-settings__section {
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-border);
}

.event-settings__title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
}

.event-settings__form { max-width: 34rem; }

.event-settings__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-settings__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.event-settings__name {
    flex: 1 1 12rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
}

.event-settings__state {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.panel-heading__note {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
.panel-heading__note strong { font-weight: 400; color: var(--color-text); }

/* A checkbox reads left to right, unlike every other field here. */
.field--check {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.field--check .field__label { margin: 0; }
.field--check .field__hint { flex-basis: 100%; }

/* --- Editing a page's steps ---------------------------------------------- */

.block-editor {
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-editor__item {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.block-editor__form { max-width: 40rem; }

/* Prose needs room: a step's body is the one field here somebody writes
   paragraphs into, so it is not a single-line input pretending otherwise. */
.block-editor__body {
    min-height: 8rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.6;
    resize: vertical;
}

.block-editor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* Removing is destructive and sits among four other buttons, so it is pushed
   away from them rather than sitting flush against "Move down". */
.block-editor__remove { margin-left: auto; }

/* --- Documents ----------------------------------------------------------- */

.document-editor__card {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.document-editor__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.document-editor__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 400;
}

.document-editor__pages {
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.document-editor__page {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

/* Small enough to be a reminder of which page this is, not a preview of it. */
.document-editor__thumb {
    flex-shrink: 0;
    width: 3.5rem;
    height: auto;
    border: 1px solid var(--color-border);
}

.document-editor__page-text { flex: 1 1 12rem; min-width: 0; }

.document-editor__caption {
    margin: 0 0 4px;
    font-size: 0.8rem;
}

/* The alt text is long by design, so it is clamped here rather than pushing
   every other page in the list off the screen. */
.document-editor__alt {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.document-editor__form { max-width: 34rem; }
.document-editor__form--new { padding-top: var(--space-4); }

@media (max-width: 640px) {
    .block-editor__remove { margin-left: 0; }
    .document-editor__page { flex-wrap: wrap; }
}