/*
    T136-D — Teams and Organizations pages (T72 handoff, 11-groups.md).

    ONE stylesheet for every Groups page, linked by SimTelemetry.Web/App.razor as
    _content/SimTelemetry.Groups.Web/groups-pages.css.

    Why a linked file and not .razor.css: the Web host links its stylesheets by hand and does not link the
    Blazor CSS-isolation bundle (SimTelemetry.Web.styles.css), so a .razor.css beside a Groups component
    reached nobody. That is why the car checklist on the event editor ran to 28,000px and the filter toggle
    rendered as a grey native button. The dead .razor.css files were removed; what they held and still
    matters lives here, unscoped, under Groups-specific class names.

    Tokens only (--ghostai-* / --tds-*): no new colours, and both skins follow the active data-theme.
    Surfaces that must turn translucent over the brand backdrop use .ghostai-card, which the backdrop
    layer already handles.
*/

/* ── Page frame ──────────────────────────────────────────────────────────── */
.groups-page {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-4, 16px);
    min-width: 0;
}

.groups-page > * {
    min-width: 0;
}

.groups-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-1, 4px);
    align-self: flex-start;
    min-height: 32px;
    color: var(--ghostai-color-accent);
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
}

.groups-back-link:hover,
.groups-back-link:focus-visible {
    color: var(--ghostai-color-text-primary);
    text-decoration: underline;
}

.groups-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.groups-muted {
    margin: 0;
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

.groups-inline-alert {
    margin: 0;
}

/* ── List toolbar: search + Filters in one line, one control height ─────── */
.groups-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ghostai-space-2, 8px);
    align-items: center;
}

.groups-toolbar__extra {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.groups-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.groups-search__icon {
    position: absolute;
    left: 12px;
    color: var(--ghostai-color-text-muted);
    pointer-events: none;
}

.groups-search__input {
    width: 100%;
    min-width: 0;
    height: var(--tds-input-height-md, 40px);
    padding: 0 12px 0 38px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 8px);
    background: var(--ghostai-color-input-bg, var(--ghostai-color-surface));
    color: var(--ghostai-color-text-primary);
    font: inherit;
}

.groups-search__input::placeholder {
    color: var(--ghostai-color-text-muted);
}

.groups-search__input:focus-visible {
    outline: none;
    border-color: var(--ghostai-color-border-strong);
    box-shadow: var(--ghostai-shadow-focus);
}

/* The Filters toggle reads as a secondary button of the same height as the search field. */
.group-entity-filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ghostai-space-2, 8px);
    height: var(--tds-input-height-md, 40px);
    padding: 0 14px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 8px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.group-entity-filters-toggle:hover,
.group-entity-filters-toggle:focus-visible {
    border-color: var(--ghostai-color-border-strong);
    outline: none;
    box-shadow: var(--ghostai-shadow-focus);
}

.group-entity-filters-toggle[aria-expanded="true"] {
    border-color: var(--ghostai-color-border-strong);
}

.group-entity-filters-toggle__icon {
    font-size: 1.1rem;
}

.group-entity-list-page {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.group-entity-header {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.group-entity-toolbar:empty {
    display: none;
}

.group-entity-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.group-entity-summary {
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

/* ── List cells ──────────────────────────────────────────────────────────── */
.group-entity-name {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.group-entity-name__link {
    color: var(--ghostai-color-text-primary);
    font-weight: 700;
    text-decoration: none;
    min-width: 0;
}

.group-entity-name__link:hover,
.group-entity-name__link:focus-visible {
    color: var(--ghostai-color-accent);
    text-decoration: underline;
}

.group-entity-number {
    display: block;
    text-align: right;
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
}

.group-entity-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ghostai-space-2, 8px);
}

.group-entity-row-message {
    flex-basis: 100%;
    text-align: right;
    color: var(--ghostai-color-text-muted);
    font-size: 0.75rem;
}

/* A rule-blocked row action: a quiet, disabled-looking pill (the guard carries the reason). */
.group-entity-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-pill, 999px);
    color: var(--ghostai-color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Tables never push the page sideways: they scroll inside their own box. */
.groups-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Radzen lays the columns out with table-layout: fixed, so on a phone the one column without a width (the
   name) was squeezed to nothing. The table keeps a readable minimum and the grid scrolls inside itself. */
.groups-table-scroll table {
    min-width: 760px;
}

.groups-table-scroll .rz-data-grid-data {
    overflow-x: auto;
}

/* ── "My team" card ─────────────────────────────────────────────────────── */
.groups-my-card .ghostai-card__footer {
    justify-content: flex-end;
}

.groups-my-card__identity {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.groups-my-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.groups-my-card__name {
    margin: 0;
    font-size: var(--ghostai-type-h3, 1.125rem);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.groups-my-card__facts {
    margin: 0;
    color: var(--ghostai-color-text-secondary);
}

.groups-my-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ghostai-space-3, 12px);
}

.groups-my-card__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-3, 12px);
}

/* ── Tabs (Series | Members) ─────────────────────────────────────────────── */
.groups-tabs.tds-tab-list {
    padding: 0;
}

.groups-tabs .tds-tab-button {
    min-height: 44px;
    font: inherit;
    font-weight: 700;
}

.groups-tab-panel {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-4, 16px);
    min-width: 0;
}

/* ── Series cards ────────────────────────────────────────────────────────── */
.groups-series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--ghostai-space-3, 12px);
}

.groups-series-card__next {
    margin: 0;
    color: var(--ghostai-color-text-primary);
    font-weight: 600;
}

.groups-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
}

/* ── Definition list inside a settings card ─────────────────────────────── */
.groups-definition-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 14px 20px;
    margin: 0;
}

.groups-definition-list > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.groups-definition-list dt {
    color: var(--ghostai-color-text-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.groups-definition-list dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.groups-card-heading {
    margin: 0;
    font-size: var(--ghostai-type-h3, 1.125rem);
    font-weight: 800;
}

/* ── Events table cells ─────────────────────────────────────────────────── */
.race-event-list-grid__when {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* LIGA-UX (2026-10-01): a race the divisions share — the driver's own division above the span of every division. */
.group-race-schedule {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.group-race-schedule__mine {
    font-weight: 600;
}

.group-race-schedule__mine + .group-race-schedule__range {
    color: var(--ghostai-color-text-muted, inherit);
    font-size: 0.875em;
}

.race-event-list-grid__name {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    flex-wrap: wrap;
    min-width: 0;
}

.race-event-list-grid__name--highlight {
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 6px;
    outline: 1px solid var(--ghostai-color-success);
}

.race-event-list-grid__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ghostai-space-2, 8px);
}

.race-event-list__footer {
    margin: 0;
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

/* ══ GFUX slice A — group lists + create forms (handoff v2: ORG-01, TEAM-01, ORG-03, TEAM-03) ══
   Tokens only; no colour is introduced. Everything for this slice is in this one block, including
   its own phone breakpoint, so it can be merged and reviewed on its own. */

/* Members: the header sits over the right-aligned, tabular numbers it names. */
.group-entity-column--number {
    text-align: right;
}

/* TEAM-01: the one-team note, then the "My team" card, spanning the toolbar row. */
.groups-toolbar__extra > .groups-my-team {
    flex: 1 1 100%;
}

.groups-my-team {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.groups-limit-note {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
}

.groups-limit-note__icon {
    flex: 0 0 auto;
    color: var(--ghostai-color-text-muted);
}

/* Rule 4: an action the plan denies stays active and carries the plan badge beside it. */
.groups-plan-action {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

/* TEAM-03: a form row that states a fact (the organization rule) instead of taking input. */
.groups-form-fact {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1, 4px);
    min-width: 0;
}

.groups-form-fact__label {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.groups-form-fact__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-height: var(--tds-input-height-md, 40px);
}

.groups-form-fact__link {
    font-weight: 600;
}

/* ORG-03 / TEAM-03: Cancel · Create. The shared sticky footer, on the card's own surface. */
.groups-create-actions {
    margin-top: var(--ghostai-space-4, 16px);
}

.groups-form-card .groups-create-actions {
    background: var(--ghostai-color-surface);
}

@media (max-width: 640px) {
    /* Rule 9: the bar stays at the bottom of a phone, and every target in it is at least 44 px. */
    .groups-create-actions :is(button, a) {
        min-height: 44px;
    }

    .groups-create-actions .groups-plan-action {
        flex-direction: column;
        align-items: stretch;
    }

    .groups-form-fact__link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}
/* ══ end GFUX slice A ══ */

/* ── Forms: one centred column, section cards, sticky footer ────────────── */
.groups-form-column {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-4, 16px);
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    min-width: 0;
}

.groups-form-column--narrow {
    max-width: 640px;
}

.groups-form-card .ghostai-card__body {
    gap: var(--ghostai-space-4, 16px);
}

.groups-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--ghostai-space-4, 16px);
    align-items: start;
}

.groups-form-grid--rules {
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}

.groups-field {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.groups-field__label {
    color: var(--tds-text-label, var(--ghostai-color-text-secondary));
    font-size: 0.8125rem;
    font-weight: 600;
}

.groups-field__hint {
    margin: 0;
    color: var(--ghostai-color-text-muted);
    font-size: 0.78rem;
}

.groups-field__error {
    margin: 0;
    color: var(--ghostai-color-danger);
    font-size: 0.78rem;
    font-weight: 600;
}

/* Segmented switch (direction, car group, all / selected). */
.groups-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 8px);
    overflow: hidden;
    background: var(--ghostai-color-input-bg, var(--ghostai-color-surface));
}

.groups-segmented__option {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid var(--ghostai-color-border);
    background: transparent;
    color: var(--ghostai-color-text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.groups-segmented__option:last-child {
    border-right: 0;
}

.groups-segmented__option[aria-pressed="true"] {
    background: var(--ghostai-color-primary);
    color: var(--tds-text-on-primary);
}

.groups-segmented__option:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: -2px;
}

.groups-segmented__option:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* A choice the catalogue made for the driver (one layout, one direction, one car). */
.groups-only-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px dashed var(--ghostai-color-border-strong);
    border-radius: var(--ghostai-radius-sm, 8px);
    color: var(--ghostai-color-text-secondary);
}

.groups-only-choice strong {
    color: var(--ghostai-color-text-primary);
}

.groups-summary-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ghostai-color-success);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Track picker */
.group-track-picker {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-4, 16px);
    min-width: 0;
}

.group-track-picker__option-meta {
    color: var(--ghostai-color-text-muted);
}

/* Car picker */
.group-car-picker {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.group-car-picker__mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-3, 12px);
}

.group-car-picker__count {
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.group-car-picker__selected {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
}

.group-car-picker__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 6px 0 12px;
    border: 1px solid var(--ghostai-color-border-strong);
    border-radius: var(--ghostai-radius-pill, 999px);
    background: var(--ghostai-color-surface-2);
    font-size: 0.8125rem;
}

.group-car-picker__chip-remove {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.group-car-picker__chip-remove:hover,
.group-car-picker__chip-remove:focus-visible {
    background: var(--ghostai-color-surface);
    outline: none;
}

.group-car-picker__hint {
    margin: 0;
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

/* Block, not a flex column: a flex container would shrink Virtualize's spacer elements. */
.group-car-picker__list {
    display: block;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 8px);
    background: var(--ghostai-color-input-bg, var(--ghostai-color-surface));
}

.group-car-picker__option {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-3, 12px);
    /* Fixed, not a minimum: the list is virtualized at RowHeight = 44 (GroupCarPicker). */
    height: 44px;
    box-sizing: border-box;
    padding: 0 12px;
    border-bottom: 1px solid var(--ghostai-color-border);
    cursor: pointer;
}

.group-car-picker__option:last-child {
    border-bottom: 0;
}

.group-car-picker__option:hover {
    background: var(--ghostai-color-surface-2);
}

.group-car-picker__option input {
    width: 18px;
    height: 18px;
    accent-color: var(--ghostai-color-primary);
}

.group-car-picker__option-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-car-picker__option-brand {
    flex: 0 0 auto;
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

.group-car-picker__empty {
    padding: 12px;
    color: var(--ghostai-color-text-muted);
}

/* Local date-time field: the zone and the stored instant, under the field. */
.local-datetime-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.local-datetime-field__hint {
    margin: 0;
    color: var(--ghostai-color-text-muted);
    font-size: 0.78rem;
}

/* The stored instant is a quiet technical footnote, not an alert: no browser/Radzen pink `code` colour. */
.local-datetime-field__storage code {
    padding: 0;
    background: none;
    color: inherit;
    font-family: var(--ghostai-font-technical);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* ── Saved synthetic references (event edit, session screen) ───────────────────────────────────────────────
   T136-D — this block had no rule at all: browser-default inputs, select and grey buttons under a bare heading.
   It is a section card now, with the design system's field and button look, scoped to the block so the raw
   controls it still renders need no Bootstrap names. */
.ghostai-saved-references {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
    padding: var(--ghostai-space-5, 20px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-lg, 12px);
    background: var(--ghostai-color-surface);
    color: var(--ghostai-color-text-primary);
}

.ghostai-saved-references > h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.ghostai-saved-references p {
    margin: 0;
}

.ghostai-saved-references__create,
.ghostai-saved-references__action {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.ghostai-saved-references label {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1, 4px);
    max-width: 480px;
    color: var(--tds-text-label, var(--ghostai-color-text-secondary));
    font-size: 0.8125rem;
    font-weight: 600;
}

.ghostai-saved-references input[type="text"],
.ghostai-saved-references select {
    width: 100%;
    min-width: 0;
    min-height: var(--ghostai-touch-target, 44px);
    padding: 0 var(--ghostai-space-3, 12px);
    border: 1px solid var(--tds-border-input, var(--ghostai-color-border));
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-input-bg, var(--ghostai-color-surface-2));
    color: var(--ghostai-color-text-primary);
    font: inherit;
    font-weight: 400;
}

.ghostai-saved-references select option {
    background: var(--ghostai-color-surface);
    color: var(--ghostai-color-text-primary);
}

/* A native <select> wearing the shared field class (create forms, team settings, appearance): without a surface
   of its own the browser paints it light grey in the dark theme. Tokens only, same as the fields beside it. */
.groups-page select.tds-field-input,
.groups-form-card select.tds-field-input {
    background-color: var(--ghostai-color-input-bg, var(--ghostai-color-surface-2));
    color: var(--ghostai-color-text-primary);
}

.groups-page select.tds-field-input option,
.groups-form-card select.tds-field-input option {
    background: var(--ghostai-color-surface);
    color: var(--ghostai-color-text-primary);
}

.ghostai-saved-references input[type="text"]:focus-visible,
.ghostai-saved-references select:focus-visible,
.ghostai-saved-references button:focus-visible,
.ghostai-saved-references a:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.ghostai-saved-references button {
    align-self: flex-start;
    min-height: 36px;
    padding: 0 var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border-strong, var(--ghostai-color-border));
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.ghostai-saved-references button:hover:not(:disabled) {
    border-color: var(--ghostai-color-accent);
}

.ghostai-saved-references button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* The DS primary button (TelemetryButton Primary): accent-subtle ground, accent text and border. */
.ghostai-saved-references button.ghostai-saved-references__primary {
    border-color: var(--tds-accent-border);
    background: var(--tds-accent-subtle);
    color: var(--tds-accent-text);
}

.ghostai-saved-references button.ghostai-saved-references__primary:hover:not(:disabled) {
    background: var(--tds-accent-hover);
}

.ghostai-saved-references button[data-testid$="-delete"] {
    color: var(--ghostai-color-danger);
}

.ghostai-saved-references__confirm,
.ghostai-saved-references__quota {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.ghostai-saved-references__message {
    padding: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px);
    border-left: 3px solid var(--ghostai-color-accent);
    border-radius: var(--ghostai-radius-sm, 6px);
    background: var(--ghostai-color-surface-2);
    overflow-wrap: anywhere;
}

.ghostai-saved-references__list,
.ghostai-saved-references__archived ul {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ghostai-saved-references__list > li,
.ghostai-saved-references__archived li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px);
    min-width: 0;
    padding: var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
}

.ghostai-saved-references__list > li button {
    align-self: center;
}

.ghostai-saved-references__name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ghostai-saved-references__state,
.ghostai-saved-references__default {
    padding: 2px 8px;
    border: 1px solid var(--ghostai-color-border-strong, var(--ghostai-color-border));
    border-radius: var(--ghostai-radius-pill, 999px);
    font-size: 0.75rem;
    font-weight: 600;
}

.ghostai-saved-references__time {
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
}

.ghostai-saved-references__reason,
.ghostai-saved-references__remedy,
.ghostai-saved-references__artifact {
    flex-basis: 100%;
    overflow-wrap: anywhere;
}

.ghostai-saved-references__reason {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
}

.ghostai-saved-references__remedy {
    color: var(--ghostai-color-warning);
    font-size: 0.8125rem;
}

.ghostai-saved-references__rename {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.ghostai-saved-references__rename input[type="text"] {
    width: auto;
    min-width: min(16rem, 100%);
}

.ghostai-saved-references__delete-refusal {
    padding: var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-danger);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--tds-error-bg, var(--ghostai-color-surface-2));
}

.ghostai-saved-references__catalog-link {
    align-self: flex-start;
    font-weight: 600;
}

/* Sticky footer: Cancel · Save, never covering a message (messages sit above the cards, in the flow). */
.groups-sticky-actions,
.race-event-form__actions,
.race-event-wizard__actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ghostai-space-2, 8px);
    padding: 12px 0;
    border-top: 1px solid var(--ghostai-color-border);
    background: var(--ghostai-color-bg);
}

.groups-sticky-actions__end {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    margin-left: auto;
}

.race-event-form,
.race-event-wizard {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-4, 16px);
    min-width: 0;
}

.race-event-form__errors,
.race-event-wizard__errors {
    margin: 0;
    scroll-margin-bottom: 6rem;
}

.race-event-wizard__errors:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.race-event-form__hint,
.race-event-wizard__hint,
.race-event-wizard__position {
    margin: 0;
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

/* Wizard progress: three bars with labels. */
.race-event-wizard__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.race-event-wizard__step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.race-event-wizard__step-bar {
    display: block;
    height: 6px;
    border-radius: var(--ghostai-radius-pill, 999px);
    background: var(--ghostai-color-surface-2);
}

.race-event-wizard__step--current .race-event-wizard__step-bar,
.race-event-wizard__step--done .race-event-wizard__step-bar {
    background: var(--ghostai-color-primary);
}

.race-event-wizard__step-title {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.race-event-wizard__step--current .race-event-wizard__step-title {
    color: var(--ghostai-color-text-primary);
}

.race-event-wizard__step-number {
    font-variant-numeric: tabular-nums;
}

/* Summary step */
.race-event-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    min-width: 0;
}

.race-event-summary__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ghostai-color-border);
}

.race-event-summary__row dt {
    flex: 0 0 12rem;
    max-width: 100%;
    color: var(--ghostai-color-text-muted);
    font-weight: 600;
}

.race-event-summary__row dd {
    flex: 1 1 12rem;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.race-event-summary__note {
    margin: 12px 0 0;
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

/* Truncated values keep their full text accessible. */
.group-truncated-value--clipped {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: help;
}

.group-truncated-value--clipped:focus-visible {
    outline: 2px solid var(--ghostai-color-border-strong);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Organization detail: current and upcoming events list. */
.upcoming-series-events {
    display: grid;
    gap: 0;
}

.upcoming-series-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--ghostai-space-3, 12px);
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--ghostai-color-border);
}

.upcoming-series-event:first-child {
    border-top: 0;
}

/* Series slug prefix on the event name (#3664): a long slug is cut with an ellipsis, never in the text (full text in title). */
.upcoming-series-event__name {
    display: flex;
    min-width: 0;
}

.upcoming-series-event__prefix {
    flex: 0 1 auto;
    min-width: 3ch;
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upcoming-series-event__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    /* Keeps the separator's leading space, which a flex item would otherwise drop. */
    white-space: pre-wrap;
}

/* Appearance tab (moved from its dead .razor.css). */
/* The editor is the wider column: twenty colours in two modes need the room, the preview does not. Below 1280 px
   the preview goes under the form (the breakpoint block at the end of the GFUX-C slice). */
.group-appearance {
    /* The ONE height of every control on the tab — field, swatch, select, file trigger and button. */
    --group-appearance-control: var(--tds-input-height-md, 36px);
}

.group-appearance__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(20rem, 1fr);
    gap: var(--ghostai-space-6, 24px);
    align-items: start;
}

.group-appearance__form,
.group-appearance__preview {
    min-width: 0;
}

/* The shared form is a card of two fieldset columns, each a three-column field grid. Here the card is the tab's
   own, the sections follow one another and lay their own rows out, so both grids are one column wide. */
.group-appearance .tds-form {
    padding: 0;
    border: 0;
    background: transparent;
}

.group-appearance .tds-form-body,
.group-appearance .tds-fieldset-content {
    grid-template-columns: minmax(0, 1fr);
}

.group-appearance .tds-fieldset-content {
    gap: var(--ghostai-space-3, 12px);
}

/* One line per colour: label (with its InfoTip) · #rrggbb · swatch · reset · verdict. The two trailing cells are
   kept when they are empty, so the fields of every row stand in one column. */
.group-appearance__row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(5.5rem, 7rem)
        var(--group-appearance-control)
        var(--group-appearance-control)
        4rem;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
    min-height: var(--group-appearance-control);
}

/* Outside the two mode columns a row is no wider than a mode's, so its field stays beside its label. */
.group-appearance__color:not(.group-appearance__color--palette) > .group-appearance__row {
    max-width: 30rem;
}

/* A select needs the room of its longest option; it takes the field and swatch columns together. */
.group-appearance__row--select {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem) var(--group-appearance-control);
}

.group-appearance__row-label {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-1, 4px);
    min-width: 0;
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}

.group-appearance__row-label > label,
.group-appearance__row-label > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.group-appearance__hex,
.group-appearance__hex .tds-field-input,
.group-appearance__select,
.group-appearance__row .rz-button.tds-btn,
.group-appearance__image-actions .rz-button.tds-btn,
.group-appearance .groups-image-trigger {
    height: var(--group-appearance-control);
    min-height: var(--group-appearance-control);
    box-sizing: border-box;
}

.group-appearance__hex {
    min-width: 0;
}

.group-appearance__hex .tds-field-input {
    padding: 0 var(--ghostai-space-2, 8px);
    font-family: var(--ghostai-font-technical);
    font-size: 0.8125rem;
}

.group-appearance__color[data-refused="true"] .tds-field-input {
    border-color: var(--ghostai-color-danger);
}

.group-appearance__select {
    width: 100%;
    min-width: 0;
    padding: 0 var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    font: inherit;
    font-size: 0.875rem;
}

.group-appearance__row-cell,
.group-appearance__row-status {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-1, 4px);
    min-width: 0;
    height: var(--group-appearance-control);
}

/* The reset is an icon as wide as it is tall, like the swatch beside it. */
.group-appearance__row .group-appearance__reset .rz-button.tds-btn {
    width: var(--group-appearance-control);
    min-width: 0;
    padding: 0;
}

/* A row's verdict: an icon and at most a ratio, at the control height; what it means is in its tooltip. The
   colour is a second signal, never the only one — the icon differs and the tooltip says it in words. */
.group-appearance__verdict {
    align-items: center;
    gap: 2px;
    height: var(--group-appearance-control);
    box-sizing: border-box;
    padding: 0 var(--ghostai-space-1, 4px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    color: var(--ghostai-color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}

.group-appearance__verdict--pass {
    color: var(--ghostai-color-success);
}

.group-appearance__verdict--warn {
    border-color: var(--ghostai-color-warning);
    color: var(--ghostai-color-warning);
}

.group-appearance__verdict--fail {
    border-color: var(--ghostai-color-danger);
    color: var(--ghostai-color-danger);
}

.group-appearance__verdict .tds-tooltip__bubble {
    cursor: default;
    white-space: normal;
}

/* In the tooltip a measurement is its icon, then the sentence with its verdict under it. */
.group-appearance__verdict .group-appearance__measure {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0 var(--ghostai-space-2, 8px);
    color: var(--ghostai-color-text-primary);
    font-weight: 400;
}

.group-appearance__verdict .group-appearance__measure-verdict {
    grid-column: 2;
}

/* The section's own header: what the section is (with its InfoTip) at the start, its command at the end. */
.group-appearance__color.group-appearance__section-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px);
}

.group-appearance__section-action {
    margin-left: auto;
}

/* Dark and Light: one under the other, side by side from 1100 px (below). */
.group-appearance__modes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ghostai-space-5, 20px) var(--ghostai-space-6, 24px);
    min-width: 0;
}

.group-appearance__mode {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

@media (min-width: 1100px) {
    .group-appearance__modes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* An image of the skin: a box of one size, its name, and Replace / Remove. As many cards across as fit. */
.group-appearance__images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.group-appearance__color.group-appearance__image {
    display: grid;
    grid-column: auto;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px);
    padding: var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
}

.group-appearance__image > .group-appearance__field-refusal {
    grid-column: 1 / -1;
}

.group-appearance__image-thumb {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 4.5rem;
    overflow: hidden;
    border: 1px dashed var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 4px);
    background: var(--ghostai-color-bg);
}

.group-appearance__image[data-has-image="true"] .group-appearance__image-thumb {
    border-style: solid;
}

.group-appearance__image-empty {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--ghostai-color-text-muted);
    font-size: 0.75rem;
}

.group-appearance__image-body {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.group-appearance__image-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.group-appearance__commands,
.group-appearance__switches,
.group-appearance__switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.group-appearance__switches {
    justify-content: space-between;
    margin-bottom: var(--ghostai-space-4, 16px);
}

.group-appearance__commands {
    margin-top: var(--ghostai-space-4, 16px);
}

/* SKIN-6 — the skin editor: two palettes, a page background and the images. Tokens only; no colour is added. */
.group-appearance__mode-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

/* One mode's ten colours: ten rows of one height, so the two modes line up row for row. */
.group-appearance__palette {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.group-appearance__color[data-missing="true"] .tds-field-input {
    border-color: var(--ghostai-color-warning);
}

.group-appearance__field-refusal {
    display: flex;
    align-items: flex-start;
    gap: var(--ghostai-space-2, 8px);
    color: var(--ghostai-color-danger);
    font-size: 0.8125rem;
}

/* The pattern picker: one control height for every option, the swatch inside it. */
.group-appearance__patterns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
}

.group-appearance__pattern {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    box-sizing: border-box;
    height: var(--group-appearance-control, var(--tds-input-height-md, 36px));
    padding: 0 var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.group-appearance__pattern[aria-checked="true"] {
    border-color: var(--ghostai-color-accent);
    box-shadow: inset 0 0 0 1px var(--ghostai-color-accent);
}

.group-appearance__pattern:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.group-appearance__swatch {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.25rem;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 4px);
    background-color: var(--ghostai-color-bg);
}

.group-appearance__swatch--carbon {
    background-image:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--ghostai-color-text-primary) 14%, transparent) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ghostai-color-text-primary) 8%, transparent) 0 2px, transparent 2px 4px);
}

.group-appearance__swatch--inherit {
    border-style: dashed;
}

/* A stored image inside its box (.group-appearance__image-thumb): whole, never cropped, never larger than the box. */
.group-appearance__thumb {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* A division's logo in place of its name (SKIN-6): as tall as a line of the row it sits in, so a logo never
   changes a row's height. The name is the image's alt text. */
.division-badge {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

.division-badge__logo {
    display: block;
    width: auto;
    max-width: 7.5rem;
    height: 1.25em;
    max-height: 1.5rem;
    object-fit: contain;
}

.division-badge--large .division-badge__logo {
    height: 2rem;
    max-height: 2rem;
    max-width: 10rem;
}

/* Division and series logo management: the current image, the file input and Remove on one row. */
.groups-logo-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px);
    min-width: 0;
}

.groups-logo-field__thumb {
    flex: 0 0 auto;
    max-width: 8rem;
    height: var(--tds-input-height-md, 40px);
    object-fit: contain;
}

/* The image trigger (GroupImageFileButton) is the screenshot import's file trigger; it never grows past its row. */
.groups-image-trigger {
    max-width: 100%;
    min-width: 0;
}

.groups-image-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══ GFUX-C begin ══ team detail, appearance and sponsors (handoff 02 TEAM-02, findings C3 / C6).
   Tokens only; no colour is added. Keep this block together: it is one slice of the Groups UX rework. */

/* An ACTIVE action the group's plan does not carry (rule 4): the action and its plan badge, side by side. */
.groups-plan-action {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.groups-plan-action__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tds-input-height-md, 40px);
    color: var(--ghostai-color-accent);
    font-weight: 600;
}

/* A short label or heading with the InfoTip that explains it (rule 3). */
.groups-tip-row {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.groups-tip-row > h3 {
    margin: 0;
}

.groups-tip-row__label {
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Form commands: a wrapping row here, a sticky bar on a phone (rule 9, in the media query below). */
.groups-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    margin-top: var(--ghostai-space-4, 16px);
}

/* The team settings form is one column: three across put the country beside the name. */
.team-settings-form .tds-fieldset-content {
    grid-template-columns: minmax(0, 1fr);
}

/* C6 — a brand colour: the #rrggbb field, the native picker and its reset on one row, the live check under them.
   The block spans the fieldset's grid so the check is not squeezed into one narrow cell. */
.group-appearance__color {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    grid-column: 1 / -1;
    min-width: 0;
}

.group-appearance__picker {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--group-appearance-control, var(--tds-input-height-md, 36px));
    height: var(--group-appearance-control, var(--tds-input-height-md, 36px));
    padding: 2px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
    cursor: pointer;
}

.group-appearance__picker:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.group-appearance__check {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ghostai-space-2, 8px);
    padding: var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    font-size: 0.8125rem;
}

.group-appearance__check[data-verdict="fail"] {
    border-color: var(--ghostai-color-danger);
}

.group-appearance__check-head,
.group-appearance__range,
.group-appearance__band,
.group-appearance__measure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.group-appearance__check-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.group-appearance__check-note,
.group-appearance__measure-verdict {
    color: var(--ghostai-color-text-muted);
}

.group-appearance__measure[data-pass="false"] .group-appearance__measure-verdict {
    color: var(--ghostai-color-danger);
    font-weight: 600;
}

/* A sample of an allowed shade. Its fill is the shade itself (data, like the preview), never a theme colour. */
.group-appearance__chip {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--ghostai-color-border);
    border-radius: 50%;
}

@media (max-width: 640px) {
    .groups-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: 12px 0;
        border-top: 1px solid var(--ghostai-color-border);
        background: var(--ghostai-color-surface);
    }

    .groups-form-actions > span,
    .groups-form-actions > .tds-button {
        flex: 1 1 auto;
    }

    .groups-form-actions button,
    .groups-form-actions a,
    .groups-plan-action__link {
        min-height: 44px;
    }

    .groups-form-actions > span > button {
        width: 100%;
    }

}

/* The Appearance tab on a touch screen: every control of a row is the touch target's height, and a colour's label
   goes above its controls — at 390 px the five cells of a row do not fit beside a label. */
@media (max-width: 760px) {
    .group-appearance {
        --group-appearance-control: var(--ghostai-touch-target, 44px);
    }

    .group-appearance__row {
        grid-template-columns:
            minmax(0, 1fr)
            var(--group-appearance-control)
            var(--group-appearance-control)
            4rem;
    }

    .group-appearance__row--select {
        grid-template-columns: minmax(0, 1fr) var(--group-appearance-control);
    }

    .group-appearance__row > .group-appearance__row-label {
        grid-column: 1 / -1;
    }

    .group-appearance__section-action {
        margin-left: 0;
    }

    /* A narrower box leaves the trigger room for its words. */
    .group-appearance__image-thumb {
        width: 5rem;
        height: 3.5rem;
    }
}
/* ══ GFUX-C end ══ */

/* ── Breakpoints ─────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
    .group-appearance__layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .groups-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .groups-header-actions {
        width: 100%;
    }

    .upcoming-series-event {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .race-event-wizard__steps {
        gap: 6px;
    }

    .groups-sticky-actions,
    .race-event-form__actions,
    .race-event-wizard__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .groups-sticky-actions__end {
        margin-left: 0;
        flex-direction: column;
    }

    .groups-segmented {
        display: flex;
        width: 100%;
    }

    .groups-segmented__option {
        flex: 1 1 auto;
    }
}

/* ── Design-system forms inside a Groups section card ───────────────────────
   TelemetryForm draws its own bordered panel and lays fields three to a row; inside a Groups card
   (T72: one section card per topic) the card is the panel, and fields stack or pair up. */
.groups-form-card .tds-form,
.groups-form-column .tds-form {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.groups-form-card .tds-form-body,
.groups-form-column .tds-form-body {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.groups-form-column .tds-fieldset-content,
.groups-form-card .tds-fieldset-content {
    grid-template-columns: minmax(0, 1fr);
}

.groups-form-card .tds-form-body > .groups-form-grid {
    grid-column: 1 / -1;
}

.groups-form-card .tds-field-label,
.groups-form-card .tds-fieldset .tds-field-label {
    background: var(--ghostai-color-surface);
}

/* The "My team" card spans the toolbar row like the directory under it. */
.groups-toolbar__extra > .groups-my-list {
    flex: 1 1 100%;
}

.groups-my-list {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
}

.groups-back-link .ghostai-icon {
    width: 1rem;
    height: 1rem;
}

.groups-summary-line .ghostai-icon {
    width: 1.1rem;
    height: 1.1rem;
}

/* ── Tab panels: only the active one shows (all are rendered so the roster loads with the page) ── */
.groups-tab-panel[hidden] {
    display: none;
}

/* ── Badges and tabs on Groups pages ────────────────────────────────────────
   components/_badge.scss and _tabs.scss are not compiled into any stylesheet the host links, so a
   TelemetryBadge / tds-tab-button renders bare. Scoped to Groups pages (no global change): the same
   --tds-* tokens the design-system SCSS names. */
.groups-page .tds-badge,
.group-entity-list-page .tds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--ghostai-radius-pill, 999px);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.groups-page .tds-badge__icon,
.group-entity-list-page .tds-badge__icon {
    font-size: 0.95em;
}

.groups-page .tds-badge--success,
.group-entity-list-page .tds-badge--success {
    background: var(--tds-success-bg);
    border-color: var(--tds-success-border);
    color: var(--tds-success-text);
}

.groups-page .tds-badge--warning,
.group-entity-list-page .tds-badge--warning {
    background: var(--tds-warning-bg);
    border-color: var(--tds-warning-border);
    color: var(--tds-warning-text);
}

.groups-page .tds-badge--error,
.group-entity-list-page .tds-badge--error {
    background: var(--tds-error-bg);
    border-color: var(--tds-error-border);
    color: var(--tds-error-text);
}

.groups-page .tds-badge--info,
.group-entity-list-page .tds-badge--info {
    background: var(--tds-accent-subtle);
    border-color: var(--tds-accent-border);
    color: var(--tds-accent-text);
}

.groups-page .tds-badge--neutral,
.group-entity-list-page .tds-badge--neutral {
    background: var(--ghostai-color-surface-2);
    border-color: var(--ghostai-color-border);
    color: var(--ghostai-color-text-secondary);
}

.groups-tabs {
    display: flex;
    gap: var(--ghostai-space-4, 16px);
    overflow-x: auto;
    border-bottom: 1px solid var(--ghostai-color-border);
}

.groups-tabs .tds-tab-button {
    position: relative;
    flex: 0 0 auto;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--ghostai-color-text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.groups-tabs .tds-tab-button:hover {
    color: var(--ghostai-color-text-primary);
}

.groups-tabs .tds-tab-button--active {
    color: var(--ghostai-color-text-primary);
}

.groups-tabs .tds-tab-button--active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--ghostai-color-accent);
}

.groups-tabs .tds-tab-button:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: -2px;
}

/* .ghostai-card asks for min-height:100% so cards in a grid row match; stacked in a column that
   stretches a card to its parent. Grid rows still equalise through align-items: stretch. */
.groups-page .ghostai-card,
.groups-form-column .ghostai-card {
    min-height: 0;
}

@media (max-width: 900px) {
    /* A search field next to a row of chips: the chips go under the field instead of squeezing it. */
    .groups-toolbar--chips {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    /* Four stat cards as a 2 × 2 grid on a phone, not four full-width rows. */
    .groups-page .ghostai-stat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .groups-page .ghostai-stat-strip__item {
        padding: 10px 12px;
    }

    .groups-page .ghostai-stat-strip__icon {
        display: none;
    }
}

/* #3664 (AC-17) — a visitor's team / organization page has three tiles ("Your role" is not drawn): three equal
   columns that fill the row, never four with an empty slot. Where the shared strip drops to two columns
   (<= 1024px) the third tile spans the row; on a phone (<= 640px) it is one column, as for four tiles. */
.groups-page .ghostai-stat-strip[data-tile-count="3"],
.groups-page [data-tile-count="3"] > .ghostai-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .groups-page .ghostai-stat-strip[data-tile-count="3"],
    .groups-page [data-tile-count="3"] > .ghostai-stat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .groups-page .ghostai-stat-strip[data-tile-count="3"] > :last-child,
    .groups-page [data-tile-count="3"] > .ghostai-stat-strip > :last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .groups-page .ghostai-stat-strip[data-tile-count="3"],
    .groups-page [data-tile-count="3"] > .ghostai-stat-strip {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* #3664 (AC-19) — the visitor's "Log in to join": one compact header button, icon and words on one line. */
.groups-guest-join {
    display: inline-flex;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* #3664 (AC-23/AC-24) — the /teams and /organizations tables. The columns size to what they hold (auto layout)
   instead of fixed pixel widths, so the name — the only column whose text can be long — is the one capped: at most
   40% of the table, wrapping inside its cell (minmax(0, 2fr) in grid terms). Counts and actions are as wide as their
   content and the Members header and numbers never wrap or clip. Down to 641px the table keeps its readable
   minimum width and scrolls inside .groups-table-scroll, as before; on a phone the rows stack (below). */
.group-entity-list-page .groups-table-scroll table {
    table-layout: auto;
}

.group-entity-list-page .group-entity-column--name {
    width: 40%;
    max-width: 40%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.group-entity-list-page .group-entity-column--count,
.group-entity-list-page .group-entity-column--count .group-entity-number,
.group-entity-list-page .group-entity-column--count .rz-column-title-content {
    white-space: nowrap;
}

.group-entity-list-page .group-entity-column--count {
    overflow: visible;
    text-overflow: clip;
}

/* #3664 — on a phone each row of /teams and /organizations is a card: the header row is hidden (still read by a
   screen reader), the name leads across the full width, and every other cell is one line, its column's title on the
   left (data-label on .group-entity-cell) and its value on the right. Nothing scrolls sideways and nothing clips. */
@media (max-width: 640px) {
    .group-entity-list-page .groups-table-scroll table {
        min-width: 0;
        width: 100%;
    }

    .group-entity-list-page .groups-table-scroll thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .group-entity-list-page .groups-table-scroll colgroup {
        display: none;
    }

    .group-entity-list-page .groups-table-scroll table,
    .group-entity-list-page .groups-table-scroll tbody,
    .group-entity-list-page .groups-table-scroll tr,
    .group-entity-list-page .groups-table-scroll td {
        display: block;
        width: 100%;
        max-width: none;
    }

    .group-entity-list-page .groups-table-scroll tbody > tr {
        margin-top: var(--ghostai-space-2);
        padding: var(--ghostai-space-2) var(--ghostai-space-3);
        border: 1px solid var(--ghostai-color-border);
        border-radius: var(--ghostai-radius-md);
    }

    .group-entity-list-page .groups-table-scroll tbody > tr > td {
        padding: var(--ghostai-space-1) 0;
        border: 0;
        text-align: left;
    }

    .group-entity-list-page .group-entity-column--name {
        width: 100%;
        max-width: none;
    }

    .group-entity-list-page .group-entity-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ghostai-space-3);
        min-width: 0;
    }

    .group-entity-list-page .group-entity-cell[data-label]::before {
        content: attr(data-label);
        color: var(--ghostai-color-text-secondary);
        font-size: 0.8125rem;
        font-weight: 700;
    }

    .group-entity-list-page .group-entity-column--name .group-entity-cell::before {
        content: none;
    }

    .group-entity-list-page .telemetry-data-grid__actions-cell {
        min-width: 0;
        width: 100%;
        white-space: normal;
    }
}

/* Series create / edit (T136-D, T72 PageEventForm): section cards in the form column, fields in the shared
   two-up grid (.groups-form-grid), long ones across the whole row. The Bootstrap row/col layer this form used to
   need — and the 12-column rules that fought the compatibility layer's col-* widths — are gone with its markup. */
.organization-series-form {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-4, 16px);
    grid-column: 1 / -1;
    min-width: 0;
}

.groups-page > .tds-form .tds-form-body {
    grid-template-columns: minmax(0, 1fr);
}

.groups-page .tds-fieldset .tds-field,
.groups-page .tds-fieldset .rz-textbox,
.groups-page .tds-fieldset .rz-dropdown,
.groups-page .tds-fieldset textarea {
    width: 100%;
}

.groups-form-grid > .groups-field--wide {
    grid-column: 1 / -1;
}

/* A Groups form field fills its grid cell; the DS field row (input + info tip) inside it too. */
.groups-field > .tds-field,
.groups-field .local-datetime-field {
    width: 100%;
}

/* The organization series page's "Generate events" panel: two dates and the action on one row. */
.series-generation-panel .groups-field--action {
    align-self: end;
}

@media (max-width: 760px) {
    /* The fixed-width columns (joining, members, role, action) add up to ~730px; the name keeps ~250px. */
    .groups-table-scroll table {
        min-width: 980px;
    }
}

/* LIGA-04 (#2878) — the competition section of a series page (edition, switcher, divisions, calendar, entries).
   Existing GhostAI tokens only; the owner's brand reaches it through the page's GhostAiGroupThemeScope. */
.competition-edition,
.competition-edition .ghostai-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3);
}

/* The section carries tds-form for the design system's outlined-input theme (Radzen dropdowns and date pickers);
   the frame that class draws around a stand-alone form is taken away — the cards are the frames here. */
.competition-edition.tds-form {
    /* tds-form is a grid; as a grid its tracks grew to the session table's width and widened a phone page. */
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* S5-UX T07 — the season centre: the two views, the section navigation and the sections. A section that is not on
   the screen stays in the document, hidden, so its cards keep what they read and what was typed into them. */
.competition-season__views {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2);
}

/* The page's tab look (groups-tabs), on links. GTSC5-UX: ONE strip that scrolls sideways inside itself when the
   sections do not fit (a phone), like the tabs of the organization page — wrapped, the seven sections of the
   organizer's view took three rows of a 390 px screen. Only the strip scrolls: the page never does.
   `display` is said here because the strip is a list inside .competition-edition, and the rule that makes those
   lists one-column grids (V14, below) is more specific than .groups-tabs: without it every section was a row. */
.competition-season__tabs.groups-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ghostai-space-4, 16px);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    list-style: none;
}

/* Walk finding (2026-10-09): on a phone the last sections ("Fantasy League") were off screen with no hint that the
   strip scrolls. Its trailing edge fades, so the cut label reads as "more this way"; the padding lets the last
   section scroll clear of the fade. */
@media (max-width: 640px) {
    .competition-season__tabs.groups-tabs {
        padding-inline-end: var(--ghostai-space-8, 48px);
        -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - var(--ghostai-space-8, 48px)), transparent);
        mask-image: linear-gradient(to right, currentColor calc(100% - var(--ghostai-space-8, 48px)), transparent);
    }
}

/* A section's link keeps its own width and its label on one line; the strip scrolls instead of squeezing it. */
.competition-season__tabs > li {
    flex: 0 0 auto;
}

/* The current section's underline is drawn inside the strip: one pixel below it, the strip's own scroller cut it. */
.competition-season__tabs .tds-tab-button--active::after {
    bottom: 0;
}

.competition-season__tabs .tds-tab-button {
    display: inline-flex;
    align-items: center;
    /* A finger's target, not a line of text's height. */
    min-height: 44px;
    text-decoration: none;
}

/* The navigation takes the focus once, on arrival at a section's address, to be brought into view (it is not a tab
   stop). It is a place on the page, not a control: the ring belongs to the links inside it. */
/* "Back to the sections" scrolls the navigation to the top of the screen, where the shell's header is: it stops
   below the header, not under it. */
.competition-season__nav {
    min-width: 0;
    max-width: 100%;
    scroll-margin-top: var(--ghostai-shell-header-offset, 72px);
}

.competition-season__nav:focus {
    outline: none;
}

.competition-season__panel {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3);
    min-width: 0;
}

.competition-season__panel[hidden] {
    display: none;
}

/* A round as one line (the published protocols of a round; a calendar round that is behind): the whole line opens
   it, and it is a finger's target. */
.competition-results__round-summary,
.competition-calendar__round-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2) var(--ghostai-space-3);
    min-height: 44px;
    cursor: pointer;
}

/* The line is a flex row, which takes away the browser's own disclosure triangle: it is drawn here, so a closed round
   still says it can be opened. */
.competition-results__round-summary,
.competition-calendar__round-summary {
    list-style: none;
}

.competition-results__round-summary::-webkit-details-marker,
.competition-calendar__round-summary::-webkit-details-marker {
    display: none;
}

.competition-results__round-summary::before,
.competition-calendar__round-summary::before {
    content: "▸";
    flex: 0 0 auto;
    color: var(--ghostai-color-text-secondary);
}

details[open] > .competition-results__round-summary::before,
details[open] > .competition-calendar__round-summary::before {
    content: "▾";
}

.competition-results__round-summary:focus-visible,
.competition-calendar__round-summary:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.competition-results__round-name {
    font-weight: 700;
}

.competition-calendar__round-summary h4 {
    margin: 0;
}

.competition-results__round {
    border-top: 1px solid var(--ghostai-color-border);
}

/* Deleting a round's results: the one destructive action of the results, apart from the editor above it — a line of
   its own across the section, closed until the organizer opens it. */
.competition-results__reset {
    justify-self: stretch;
    margin-top: var(--ghostai-space-4, 16px);
    border-top: 1px solid var(--ghostai-color-border);
}

.competition-results__reset-body {
    display: grid;
    justify-items: start;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.competition-results__reset-option {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2);
    min-height: 44px;
}

.competition-season__panel-error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ghostai-space-2);
}

.competition-season__back {
    align-self: flex-start;
    padding: var(--ghostai-space-2) 0;
}

.groups-card-subheading {
    margin: var(--ghostai-space-3) 0 var(--ghostai-space-2);
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
}

.groups-inline-link {
    color: var(--ghostai-color-accent);
    font-weight: 600;
}

.competition-edition__switcher ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.competition-edition__switcher-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2);
    padding: var(--ghostai-space-2) var(--ghostai-space-3);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-pill);
    color: var(--ghostai-color-text-primary);
    text-decoration: none;
}

.competition-edition__switcher-link.is-current {
    border-color: var(--ghostai-color-accent);
    background: var(--ghostai-color-surface-2);
}

.competition-edition__lifecycle,
.competition-my-entry__actions,
.competition-form__actions,
.competition-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ghostai-space-2);
    margin-top: var(--ghostai-space-3);
}

/* A field in an inline form takes a real share of the row: a dropdown sized to its content was narrower than its
   floating label, which then ran into the next field. */
.competition-inline-form > .tds-field,
.competition-inline-form > .competition-field {
    flex: 1 1 11rem;
    min-width: 10rem;
}

.competition-inline-form > .competition-field--datetime {
    flex-basis: 14rem;
}

.competition-field > .tds-field {
    width: 100%;
}

.competition-choice-field .rz-dropdown {
    width: 100%;
}

/* The raced-date correction's history sits under its form, in the same row of the sessions table. */
.competition-raced-date-history {
    margin-top: var(--ghostai-space-3);
}

.competition-raced-date-history ul {
    margin: var(--ghostai-space-1) 0 0;
    padding-left: var(--ghostai-space-4);
}

.competition-calendar__rounds {
    margin: var(--ghostai-space-2) 0 0;
    padding-left: var(--ghostai-space-4);
}

.competition-calendar__round + .competition-calendar__round {
    margin-top: var(--ghostai-space-4);
    padding-top: var(--ghostai-space-3);
    border-top: 1px solid var(--ghostai-color-border);
}

.competition-calendar__race {
    margin-top: var(--ghostai-space-2);
    padding: var(--ghostai-space-2) var(--ghostai-space-3);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md);
}

.competition-calendar__race-head {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2);
    font-weight: 600;
}

/* The event's own actions for its manager (edit, telemetry review), at the end of the race's line; under it when
   the line is too narrow for both. */
.competition-calendar__race-head {
    flex-wrap: wrap;
}

.competition-calendar__race-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2);
    margin-inline-start: auto;
    max-width: 100%;
    min-width: 0;
    font-weight: 400;
}

/* An action never holds the page wider than the screen: on a narrow one (a phone at 200 % zoom) it shrinks to the
   line and its label breaks, instead of the nowrap label of a grid action reaching past the edge. */
.competition-calendar__race-actions .ghostai-grid-action {
    flex: 0 1 auto;
    max-width: 100%;
    height: auto;
    padding-block: var(--ghostai-space-1, 4px);
}

.competition-calendar__race-actions .ghostai-grid-action__label {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

.competition-calendar__sessions,
.competition-entries__table,
.competition-divisions__table {
    width: 100%;
    margin-top: var(--ghostai-space-2);
    border-collapse: collapse;
}

.competition-calendar__sessions th,
.competition-calendar__sessions td,
.competition-entries__table th,
.competition-entries__table td,
.competition-divisions__table th,
.competition-divisions__table td {
    padding: var(--ghostai-space-2);
    border-bottom: 1px solid var(--ghostai-color-border);
    text-align: left;
    vertical-align: middle;
}

.competition-entries__table .competition-choice-field {
    min-width: 9rem;
}

/* GTSC5-UX — the entries' state filter (All · Pending · Approved · …) sits above the table, not on its frame. */
.competition-entries .groups-chip-row {
    margin-bottom: var(--ghostai-space-3, 12px);
}

/* ADR-2026-10-06 — "Add drivers without an account": a form asked for with one button, one nick per line. */
.competition-entries__noaccount {
    display: grid;
    gap: var(--tds-spacing-md);
    max-width: 40rem;
    margin-block: var(--tds-spacing-xl);
}

.competition-entries__noaccount > p {
    margin: 0;
}

.competition-entries__noaccount-names {
    min-height: 10rem;
    height: auto;
    padding-block: var(--tds-spacing-md);
    resize: vertical;
    font: inherit;
}

.competition-entries__noaccount-errors {
    margin: var(--tds-spacing-xs) 0 0;
    padding-inline-start: var(--tds-spacing-3xl);
    color: var(--tds-error-text);
}

/* A driver entered without an account: the typed nick and its "No account" badge stay together on one line. */
.competition-driver-typed {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tds-spacing-sm);
}

.competition-driver-typed__name {
    overflow-wrap: anywhere;
}

.competition-divisions__table th {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
}

.competition-divisions__order {
    width: 4rem;
    color: var(--ghostai-color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.competition-divisions__number {
    max-width: 7rem;
}

.competition-divisions__actions {
    white-space: nowrap;
    text-align: right;
}

/* On a phone each division is a card: the cells stack, each named by its column, the actions in a row. */
@media (max-width: 760px) {
    .competition-divisions__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .competition-divisions__table,
    .competition-divisions__table tbody,
    .competition-divisions__table tr,
    .competition-divisions__table td {
        display: block;
        width: 100%;
    }

    .competition-divisions__table tr {
        margin-top: var(--ghostai-space-2);
        padding: var(--ghostai-space-2) var(--ghostai-space-3);
        border: 1px solid var(--ghostai-color-border);
        border-radius: var(--ghostai-radius-md);
    }

    .competition-divisions__table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ghostai-space-3);
        padding: var(--ghostai-space-1) 0;
        border-bottom: 0;
        text-align: right;
    }

    .competition-divisions__table td[data-label]::before {
        content: attr(data-label);
        color: var(--ghostai-color-text-secondary);
        font-size: 0.8125rem;
        font-weight: 700;
        text-align: left;
    }

    .competition-divisions__actions {
        justify-content: flex-end;
        white-space: normal;
    }
}

.competition-form__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2) var(--ghostai-space-4);
    margin: var(--ghostai-space-3) 0 0;
    padding: 0;
    border: 0;
}

.competition-form__choices legend {
    color: var(--ghostai-color-text-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Competition forms and lists that had no layout of their own ──────────────────────────────────────────────
   Measured on the dev stack (GTSC, 2026-10-06): the scoring-rules editor stacked its fields with no gap, so each
   floating label sat on the border of the field above ("the dropdowns overlap"); its bonuses fieldset, the
   results / qualifying session lists and the per-division rule lists were browser defaults (white groove border,
   bullets); action buttons touched. Tokens only. */
.competition-scoring__editor,
.competition-form {
    display: grid;
    gap: var(--ghostai-space-4, 16px);
    max-width: 720px;
    margin-top: var(--ghostai-space-4, 16px);
}

.competition-scoring__editor > *,
.competition-form > * {
    margin: 0;
    min-width: 0;
}

.competition-standings__cell-points--dropped {
    text-decoration: line-through;
    opacity: 0.6;
}

.competition-scoring__rounds {
    display: grid;
    gap: var(--ghostai-space-4, 16px);
    margin: 0;
    padding: var(--ghostai-space-4, 16px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    min-width: 0;
}

.competition-scoring__rounds > legend {
    padding: 0 var(--ghostai-space-2, 8px);
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.competition-scoring__rounds .competition-scoring__weights {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.competition-scoring__rounds .competition-scoring__weight {
    flex: 0 0 auto;
    width: auto;
    display: inline-flex;
    align-items: center;
    height: var(--tds-input-height-md, 40px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    overflow: hidden;
}

.competition-scoring__weight[data-weight]:not([data-weight="1"]) {
    border-color: var(--ghostai-color-accent, currentColor);
}

.competition-scoring__weight-round {
    padding: 0 var(--ghostai-space-2, 8px);
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.competition-scoring__weight-value {
    min-width: 2.5ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.competition-scoring__weight-step {
    align-self: stretch;
    min-width: 32px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.competition-scoring__weight-step:disabled {
    opacity: 0.4;
    cursor: default;
}

.competition-scoring__count-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.competition-scoring__summary {
    margin: 0;
    font-weight: 600;
}

.competition-scoring__bonuses {
    display: grid;
    gap: var(--ghostai-space-4, 16px);
    margin: 0;
    padding: var(--ghostai-space-4, 16px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
}

.competition-scoring__bonuses > legend {
    padding: 0 var(--ghostai-space-2, 8px);
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.competition-scoring__bonuses > p {
    margin: 0;
}

.competition-scoring__bonus {
    display: grid;
    gap: var(--ghostai-space-3, 12px);
}

.competition-scoring__actions,
.competition-results__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.competition-scoring__divisions,
.competition-scoring__bonus-list,
.competition-results__sessions {
    display: grid;
    gap: var(--ghostai-space-2, 8px);
    margin: var(--ghostai-space-2, 8px) 0 0;
    padding: 0;
    list-style: none;
}

.competition-results__sessions > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ghostai-space-2, 8px) var(--ghostai-space-4, 16px);
    min-height: var(--ghostai-touch-target, 44px);
    padding: var(--ghostai-space-1, 4px) 0;
    border-bottom: 1px solid var(--ghostai-color-border);
}

.competition-results__sessions > li:last-child {
    border-bottom: none;
}

.competition-scoring__points,
.competition-scoring__preview {
    border-collapse: collapse;
    margin: var(--ghostai-space-2, 8px) 0;
}

.competition-scoring__points th,
.competition-scoring__points td,
.competition-scoring__preview th,
.competition-scoring__preview td {
    padding: var(--ghostai-space-1, 4px) var(--ghostai-space-4, 16px) var(--ghostai-space-1, 4px) 0;
    text-align: left;
}

.competition-scoring__points td:last-child,
.competition-scoring__points th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.competition-scoring__history {
    margin-top: var(--ghostai-space-3, 12px);
}

/* ── Scoring rules screen (skins wave 2, part B) ──────────────────────────────────────────────────────────────
   The rules as a composed screen instead of loose text: a header row, place tiles with a hierarchy (first, podium,
   rest), bonuses as icon pills, the rules as an icon list, one line for "all divisions", divisions that differ side
   by side, and the editor in titled sections. Colours, borders and radii are the theme's tokens only, so a skin
   recolours the screen and changes nothing of its layout. */
.competition-scoring__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ghostai-space-2, 8px) var(--ghostai-space-4, 16px);
}

.competition-scoring__head .groups-card-heading {
    margin: 0;
}

.competition-scoring__published {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    margin: var(--ghostai-space-3, 12px) 0 0;
}

.competition-scoring__published .ghostai-icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ghostai-color-success);
}

.competition-scoring__block {
    display: grid;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
    margin-top: var(--ghostai-space-4, 16px);
    padding-top: var(--ghostai-space-4, 16px);
    border-top: 1px solid var(--ghostai-color-border);
}

.competition-scoring__block > h4,
.competition-scoring__block-head > h4 {
    margin: 0;
}

.competition-scoring__block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px);
}

.competition-scoring__rules {
    display: grid;
    gap: var(--ghostai-space-4, 16px);
    min-width: 0;
}

.scoring-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0 var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border-strong, var(--ghostai-color-border));
    border-radius: var(--ghostai-radius-pill, 999px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.scoring-chip--quiet {
    color: var(--ghostai-color-text-secondary);
    font-weight: 500;
}

/* Points per place: the winner is the largest tile, the podium the next, every later place one quiet tile. */
.scoring-tiles {
    display: grid;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.scoring-tiles__none {
    margin: 0;
}

.scoring-tiles .scoring-tiles__places {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.scoring-tile {
    flex: 0 0 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    min-width: 0;
    padding: var(--ghostai-space-2, 8px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    text-align: center;
}

.scoring-tile__place {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.scoring-tile__points {
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
}

.scoring-tile--first {
    flex-basis: 9.5rem;
    padding: var(--ghostai-space-3, 12px);
    border-color: var(--ghostai-color-accent);
    box-shadow: inset 0 0 0 1px var(--ghostai-color-accent);
}

.scoring-tile--first .scoring-tile__place {
    color: var(--ghostai-color-text-primary);
}

.scoring-tile--first .scoring-tile__points {
    font-size: 1.75rem;
}

.scoring-tile--podium {
    border-color: var(--ghostai-color-border-strong, var(--ghostai-color-border));
}

.scoring-tile--podium .scoring-tile__points {
    font-size: 1.375rem;
}

.scoring-tile--rest {
    background: transparent;
}

.scoring-tile[data-testid="competition-scoring-zero-from"] {
    flex-basis: 9.5rem;
}

/* The bonuses are icon pills; the tooltip carries every condition of the rule. */
.scoring-bonuses.scoring-bonuses {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.scoring-bonus {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-height: var(--ghostai-touch-target, 44px);
    box-sizing: border-box;
    padding: 0 var(--ghostai-space-4, 16px);
    border: 1px solid var(--ghostai-color-border-strong, var(--ghostai-color-border));
    border-radius: var(--ghostai-radius-pill, 999px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    cursor: help;
}

.scoring-bonus__icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ghostai-color-accent);
}

.scoring-bonus__points {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.scoring-bonuses .tds-tooltip:focus-visible .scoring-bonus,
.scoring-rules .tds-tooltip:focus-visible .scoring-rule__icon {
    box-shadow: var(--ghostai-shadow-focus);
}

/* The rule list: an icon, whose tooltip says what the rule means, and the rule in words. */
.scoring-rules.scoring-rules {
    display: grid;
    gap: var(--ghostai-space-3, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.scoring-rule {
    display: flex;
    align-items: flex-start;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.scoring-rule__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 4px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-accent);
    cursor: help;
}

.scoring-rule__icon .ghostai-icon {
    width: 1rem;
    height: 1rem;
}

.scoring-rule__text {
    min-width: 0;
    padding-top: 2px;
    overflow-wrap: anywhere;
}

.scoring-rule[data-rule="rounds"] .scoring-rule__text {
    font-weight: 600;
}

/* Divisions: one line when they all share a version, a plaque each, and a table where they differ. */
.scoring-plaque {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 2rem;
    padding: var(--ghostai-space-1, 4px) var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border-strong, var(--ghostai-color-border));
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.scoring-all {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    font-weight: 600;
}

.scoring-all .ghostai-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ghostai-color-accent);
}

.competition-scoring__divisions > li {
    display: grid;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.competition-scoring__division-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px);
    min-width: 0;
}

.competition-scoring__round-versions {
    margin: 0;
    padding: 0 0 0 var(--ghostai-space-4, 16px);
}

.competition-scoring__own > summary {
    padding: var(--ghostai-space-3, 12px) 0;
    cursor: pointer;
}

.competition-scoring__own[open] > summary {
    margin-bottom: var(--ghostai-space-2, 8px);
}

.scoring-compare {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.scoring-compare th,
.scoring-compare td {
    padding: var(--ghostai-space-2, 8px);
    border-bottom: 1px solid var(--ghostai-color-border);
    text-align: center;
    overflow-wrap: anywhere;
}

.scoring-compare thead th {
    vertical-align: bottom;
}

.scoring-compare th:first-child {
    width: 6rem;
    text-align: left;
}

.scoring-compare tbody th {
    overflow-wrap: break-word;
    font-size: 0.8125rem;
    color: var(--ghostai-color-text-secondary);
    font-weight: 600;
}

.scoring-compare .scoring-plaque {
    padding: var(--ghostai-space-1, 4px) var(--ghostai-space-2, 8px);
}

.scoring-compare__source {
    display: block;
    margin-top: var(--ghostai-space-1, 4px);
    color: var(--ghostai-color-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.scoring-compare__bonus {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-1, 4px);
}

.scoring-compare__bonus .ghostai-icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--ghostai-color-accent);
}

.scoring-compare__cell--differs {
    background: var(--ghostai-color-surface-2);
    font-weight: 700;
}

.scoring-compare__cell--differs::after {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.35rem;
    border-radius: 50%;
    background: var(--ghostai-color-accent);
    vertical-align: middle;
}

/* The editor: sections with a title and a line on what each is for. */
.competition-scoring__section {
    display: grid;
    gap: var(--ghostai-space-3, 12px);
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: var(--ghostai-space-4, 16px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
}

.competition-scoring__section > legend {
    padding: 0 var(--ghostai-space-2, 8px);
}

.competition-scoring__section-title {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    color: var(--ghostai-color-text-primary);
    font-size: 0.9375rem;
    font-weight: 700;
}

.competition-scoring__section-hint {
    margin: 0;
    color: var(--ghostai-color-text-secondary);
    font-size: 0.875rem;
}

/* A section's one column never grows past its card: an `auto` track would take the min-content width of the widest
   control (a dropdown's label, a row of steppers) and push the page sideways at 200 % zoom on a phone. */
.competition-scoring__section {
    grid-template-columns: minmax(0, 1fr);
}

.competition-scoring__section .rz-dropdown,
.competition-scoring__section .rz-numeric,
.competition-scoring__section .rz-textbox {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 640px) {
    .competition-scoring__section {
        padding: var(--ghostai-space-2, 8px);
    }
}

.competition-scoring__bonus-title {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
}

.competition-scoring__bonus-title .ghostai-icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ghostai-color-accent);
}

.competition-scoring__bonus + .competition-scoring__bonus {
    padding-top: var(--ghostai-space-4, 16px);
    border-top: 1px dashed var(--ghostai-color-border);
}

/* Walk finding E-3 (2026-10-09) — a shared field's label floats: half of it rises above the field's own box
   (telemetry-form: position absolute, translateY(-50%)). The stewarding forms were plain block flow with no gap, so
   each label was drawn over the sentence or the field above it. One stacked layout for all of them: every child keeps
   its own row with room for the label; a field takes the form's width, a button and a text keep their own. */
.competition-stack-form,
.competition-cases__correct,
.competition-cases__panel-form,
.competition-cases__propose,
.competition-cases__recuse,
.competition-cases__end,
.competition-stewarding__settings-form,
.competition-stewarding__form,
.competition-stewarding__appeal-form,
.competition-standings__manage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ghostai-space-4, 16px);
    justify-items: start;
    margin-top: var(--ghostai-space-4, 16px);
}

.competition-stack-form > *,
.competition-cases__correct > *,
.competition-cases__panel-form > *,
.competition-cases__propose > *,
.competition-cases__recuse > *,
.competition-cases__end > *,
.competition-stewarding__settings-form > *,
.competition-stewarding__form > *,
.competition-stewarding__appeal-form > *,
.competition-standings__manage > * {
    margin-top: 0;
    margin-bottom: 0;
    min-width: 0;
    max-width: 100%;
}

.competition-stack-form > .tds-field,
.competition-stack-form > .competition-form-error,
.competition-stack-form > .competition-evidence-links,
.competition-cases__correct > .tds-field,
.competition-cases__correct > .competition-evidence-links,
.competition-cases__panel-form > .tds-field,
.competition-cases__propose > .tds-field,
.competition-cases__recuse > .tds-field,
.competition-cases__end > .tds-field,
.competition-stewarding__settings-form > .tds-field,
.competition-stewarding__form > .tds-field,
.competition-stewarding__appeal-form > .tds-field,
.competition-standings__manage > .tds-field {
    justify-self: stretch;
}

/* S5-UX T09 — a refusal takes the focus to be brought on the screen; it is a message, not a control: no ring. */
.competition-form-error:focus {
    outline: none;
}

.competition-form-error {
    margin-top: var(--ghostai-space-2);
}

.competition-edition .ghostai-card {
    min-width: 0;
    max-width: 100%;
}

/* The card body is a grid: a child left at min-width:auto (the calendar's rounds list) grew its track to the session
   table's width, so the table never scrolled and the card widened a phone page instead. */
.competition-edition .ghostai-card__body > * {
    min-width: 0;
}

/* The session and entry tables scroll inside their card rather than widening the page (390px phones). */
.competition-table-scroll {
    /* Positioned, so the visually-hidden column label is contained by the scroller instead of widening the page. */
    position: relative;
    max-width: 100%;
    overflow-x: auto;
}

/* S5-UX T09 — forms on a phone. A field that takes the focus is scrolled clear of the shell's sticky header. Moving the
   focus UP the page (Shift+Tab, a refusal taking the focus above the keyboard) aligns the target with the top of the
   screen, which is where the header is: the field then held the focus underneath it. The padding is on the page's own
   scroller, so it also holds for a field inside a table that scrolls sideways, where a margin on the field would only
   count against the table. The header's measured height lives on the shell element, out of the root's reach: this
   is its token plus the room a wrapped navigation takes.
   At the bottom: Chromium does not scroll a field that is already partly on the screen when it takes the focus — a
   textarea whose top line was above the screen's bottom edge held the focus with two lines below it (Rules, 390 x 844).
   A field the bottom padding wholly covers counts as off the screen and is brought up; the padding is taller than a
   field (a three-line textarea), but never more than a quarter of a short screen (the keyboard open, 200 % zoom). */
:root:has(.groups-page, .groups-form-column) {
    scroll-padding-top: calc(var(--ghostai-shell-header-height, 64px) + var(--ghostai-space-8, 2rem));
    scroll-padding-bottom: min(11rem, 25vh);
}

/* S5-UX T09 — the create and edit forms end in a bar that stays at the bottom of the screen (Cancel · Save). A field
   the focus moves DOWN to stopped at the bottom edge, which is where the bar is, and held the focus underneath it:
   the page's scroller keeps the bar's height clear (three stacked actions on a phone). On a screen too short for a
   bar that stays — a zoomed page, a phone on its side, a browser whose page ends above the keyboard — the bar is the
   end of the form instead: staying, it left a few lines of the form between the header and itself. */
:root:has(.groups-sticky-actions, .race-event-form__actions, .race-event-wizard__actions) {
    scroll-padding-bottom: 11rem;
}

@media (max-height: 560px) {
    .groups-sticky-actions,
    .race-event-form__actions,
    .race-event-wizard__actions {
        position: static;
    }

    :root:has(.groups-sticky-actions, .race-event-form__actions, .race-event-wizard__actions) {
        scroll-padding-bottom: min(11rem, 25vh);
    }
}

/* S5-UX T09 — a session's "new start" form is a row of the sessions table and spans its columns, so it was as wide as
   the table: on a 390 px phone the date field was 378 px in the 250 px of the table that are on the screen, and the
   buttons came after it. The form is held at the visible edge of the table and is as wide as the part of the table on
   the screen, whatever that is: the table's box is the form's container. */
.competition-calendar__race .competition-table-scroll {
    container-type: inline-size;
}

.competition-calendar__sessions td[colspan] > .competition-inline-form,
.competition-calendar__sessions td[colspan] > .competition-raced-date-history {
    position: sticky;
    left: 0;
    box-sizing: border-box;
    width: calc(100cqi - 2 * var(--ghostai-space-2));
}

/* S5-UX T09 — below 320 px: what 200 % zoom makes of a phone (a 390 px screen lays out at 195 px). The shell is built
   for 320 px and wider and nothing above that width changes here; inside the edition, no field or action may need a
   wider screen than the one it is on. */
@media (max-width: 319.98px) {
    /* A button is never wider than what holds it: its label wraps instead. */
    .competition-edition .rz-button {
        max-width: 100%;
        height: auto;
        white-space: normal;
    }

    .competition-edition .rz-button .rz-button-box {
        min-width: 0;
        white-space: normal;
    }

    .competition-edition .rz-button .rz-button-text {
        min-width: 0;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* A field of an inline form is the whole row; ten rem beside another field is wider than the screen. */
    .competition-inline-form > .tds-field,
    .competition-inline-form > .competition-field {
        flex-basis: 100%;
        min-width: 0;
    }

    /* The browser's own file control is as wide as its two labels: it is held to its card. */
    .competition-import__upload input[type="file"] {
        min-width: 0;
        max-width: 100%;
    }

    /* A race's event name goes under its kind, and a long name breaks. */
    .competition-calendar__race-head {
        flex-wrap: wrap;
    }

    .competition-calendar__race-head > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* A field in a table that scrolls sideways is narrower than the part of the table on the screen: a field wider
       than the screen cannot be seen whole wherever the table is scrolled to. */
    .competition-table-scroll input.tds-field-input {
        max-width: calc(100vw - 7rem);
    }
}

/* S5-UX T08 — the page's sections were read at different publications and could not be brought to one: said above the
   first of them, with the reload beside the sentence and under it on a phone. */
.competition-edition__generations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2) var(--ghostai-space-3);
    margin-bottom: var(--ghostai-space-3);
}

/* S5-UX T08 — a division's standings: the season's points and what each race gave. One column per race, so the table
   is wider than a phone: it scrolls inside its own region (focusable, so a keyboard reaches every column) and the
   driver's name stays in view while it does. */
.competition-standings__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2) var(--ghostai-space-4);
    margin-bottom: var(--ghostai-space-3);
}

/* The divisions as tabs (owner, 2026-10-09): the shared pill tabs as links, one division's table at a time. The strip
   scrolls sideways on a phone like the season's own navigation; a tab is a finger's target. */
/* Said with the list's own tab class as well: the rule that makes every list inside a competition card a one-column
   grid (V14, below) is more specific than one class, and the two division pills stood one under the other (second
   walk, 2026-10-09). */
.competition-standings__tabs.tds-tab-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: var(--ghostai-space-2, 8px);
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    list-style: none;
}

.competition-standings__tabs > li {
    flex: 0 0 auto;
}

.competition-standings__tabs .tds-tab-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    white-space: nowrap;
}

/* The explanations of the table are InfoTips on the labels they explain (owner, 2026-10-14), so a header cell is its
   label and a small (?) on one line. */
.competition-standings__th {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-1);
    white-space: nowrap;
}

/* A division with no result yet: the sentence and the state's InfoTip on one line. */
.competition-standings__empty {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2);
}

.competition-standings__empty > p {
    margin: 0;
}

/* "To leader": points behind the division's leader, right-aligned tabular figures that never wrap. A deficit is the
   system's loss colour (a token, not a skin colour); a dash and a 0 stay in the cell's own colour. */
.competition-standings__table .competition-standings__gap {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.competition-standings__gap-value--behind {
    color: var(--ghostai-color-danger);
}

/* The number of a round cell and its status glyph are one line: the link is as tall as its text, whatever the status,
   so a DNF row is as tall as its neighbours (the note that used to stand under the number is gone). */
.competition-standings__cell-points {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ghostai-space-1);
    white-space: nowrap;
}

.competition-standings__cell-content {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-1);
}

/* OFFICIAL-SHARE — the standings graphic: controls wrap on a phone, the preview never overflows the card. */
.competition-official-share {
    margin: var(--ghostai-space-6) 0;
}

.competition-official-share__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ghostai-space-3) var(--ghostai-space-4);
    margin-bottom: var(--ghostai-space-3);
}

.competition-official-share__field {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1);
    min-width: 12rem;
}

.competition-official-share__layouts,
.competition-official-share__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2);
}

.competition-official-share__preview {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    border-radius: var(--ghostai-radius-md);
    border: 1px solid var(--ghostai-color-border);
}

.competition-standings__division {
    margin-bottom: var(--ghostai-space-6);
    /* A division link lands under the app's header, not behind it. */
    scroll-margin-top: var(--ghostai-space-12);
}

.competition-standings__scroll:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.competition-standings__table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.competition-standings__table th,
.competition-standings__table td {
    padding: var(--ghostai-space-2) var(--ghostai-space-3);
    border-bottom: 1px solid var(--ghostai-color-border);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.competition-standings__table thead th {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
    vertical-align: bottom;
}

.competition-standings__table tbody th {
    font-weight: 400;
}

.competition-standings__table .competition-standings__place {
    width: 3.5rem;
}

/* The driver stays put while the races scroll under it; opaque (the page's own colour), so the cells passing behind
   do not show through, and clipped, so a long name never lies over the column beside it. */
.competition-standings__table .competition-standings__driver-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    /* Wide enough for a name on one or two lines: a wrapping name must not let the column collapse to a few letters. */
    min-width: 11rem;
    max-width: 14rem;
    overflow: hidden;
    background: var(--ghostai-color-bg);
    white-space: normal;
}

/* A name wraps inside the driver's cell instead of widening it. */
.competition-standings__driver-cell .competition-standings__driver {
    max-width: 100%;
    min-width: 0;
}

.competition-standings__driver-cell .user-identity-cell,
.competition-standings__driver-cell .user-identity-cell * {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.competition-standings__table .competition-standings__total {
    font-weight: 700;
}

.competition-standings__table .competition-standings__race,
.competition-standings__table .competition-standings__cell {
    text-align: right;
}

.competition-standings__race abbr {
    text-decoration: none;
    cursor: help;
}

/* What a race that counts nothing is — provisional, a draft, cancelled, not published — under its number. */
.competition-standings__race-note {
    display: block;
    color: var(--ghostai-color-text-muted);
    font-size: 0.75rem;
    font-weight: 400;
    white-space: normal;
}

.competition-standings__race-note {
    min-width: 5.5rem;
}

.competition-standings__race:not([data-state="official"]) abbr,
.competition-standings__cell[data-counted="false"] {
    color: var(--ghostai-color-text-muted);
}

.competition-standings__mismatch {
    display: block;
    max-width: 16rem;
    color: var(--ghostai-color-warning);
    font-size: 0.75rem;
    font-weight: 400;
    white-space: normal;
}

/* The driver and the points are actions (the card, the races behind the sum): link-like, with a finger-sized target. */
.competition-standings__driver,
.competition-standings__figure {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ghostai-color-accent);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.competition-standings__driver:disabled {
    cursor: progress;
    opacity: 0.6;
}

.competition-standings__driver:focus-visible,
.competition-standings__figure:focus-visible,
.competition-standings__cell-points:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

/* The races behind a sum: a list that wraps inside whatever holds it (the driver card, at any zoom). */
.competition-standings__sources {
    margin: 0;
    padding-left: var(--ghostai-space-4);
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Under a row of the table the list spans every column, so it is held at the visible edge of a table scrolled
   sideways and kept no wider than the screen. */
.competition-standings__table .competition-standings__sources {
    position: sticky;
    left: var(--ghostai-space-3);
    width: max-content;
    max-width: min(40rem, 78vw);
}

.competition-standings__card {
    margin-top: var(--ghostai-space-4);
    padding: var(--ghostai-space-3) var(--ghostai-space-4);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md);
    scroll-margin-top: var(--ghostai-space-12);
    /* An edition's name or a slug-like word wraps inside the card at any zoom. */
    overflow-wrap: anywhere;
}

/* The card takes focus when it opens, so the reader is taken to it; it is not a control and shows no focus ring. */
.competition-standings__card:focus {
    outline: none;
}

.competition-standings__manage .tds-field-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 32rem;
}

@media (max-width: 760px) {
    /* A phone keeps as much width as it can for the races: a narrower name, tighter cells. */
    .competition-standings__table th,
    .competition-standings__table td {
        padding: var(--ghostai-space-2);
    }

    .competition-standings__table .competition-standings__driver-cell {
        min-width: 8.5rem;
        max-width: 9.5rem;
    }

}

/* The lineup card's tables (qualifying times, allocation per division, reserves) read like the divisions table:
   full width, padded cells, a rule under each row. They keep their columns on a phone and scroll inside
   .competition-table-scroll instead of widening the page. */
.competition-edition-qualifying__allocation {
    margin-top: var(--ghostai-space-4);
}

/* G203 T206: the search and the "without a time" filter above the times wrap onto their own lines on a phone; the
   paste area and its preview take the card's width, and the preview table scrolls like the others. */
.competition-edition-qualifying__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2) var(--ghostai-space-4);
    margin-top: var(--ghostai-space-3);
}

.competition-edition-qualifying__filter .tds-field-input {
    box-sizing: border-box;
    width: min(100%, 20rem);
}

.competition-edition-qualifying__filter p {
    flex-basis: 100%;
    margin: 0;
}

.competition-edition-qualifying__paste {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ghostai-space-3);
    margin-top: var(--ghostai-space-3);
    padding-top: var(--ghostai-space-3);
    border-top: 1px solid var(--ghostai-color-border);
}

.competition-edition-qualifying__paste-text {
    box-sizing: border-box;
    width: 100%;
    resize: vertical;
    font-variant-numeric: tabular-nums;
}

.competition-edition-qualifying__paste-preview ul {
    margin: var(--ghostai-space-2) 0;
    padding-left: var(--ghostai-space-4);
    overflow-wrap: anywhere;
}

/* G203 T207: the organizer's round status — one line per division, wrapping on a phone rather than widening the card. */
.competition-round-status__divisions {
    display: grid;
    gap: var(--ghostai-space-2);
    margin: var(--ghostai-space-3) 0;
    padding: 0;
    list-style: none;
}

.competition-round-status__division {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-1) var(--ghostai-space-3);
    padding: var(--ghostai-space-2) 0;
    border-bottom: 1px solid var(--ghostai-color-border);
}

.competition-round-status__detail {
    flex: 1 1 16rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Qualifying conditions (track, cars, tyres, description) in the lineup card: a summary every reader gets, and the
   organizer's form under it — one field per row, the design system's gap between them. */
.competition-qualifying-conditions {
    margin-top: var(--ghostai-space-4);
}

.competition-qualifying-conditions__heading,
.competition-qualifying-conditions__field-heading {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2);
}

/* The organizer's own words: plain text, line breaks kept, long words wrapped instead of widening the card. */
.competition-qualifying-conditions__description {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.competition-qualifying-conditions__changed {
    margin: var(--ghostai-space-2) 0 0;
    font-size: 0.8125rem;
}

.competition-qualifying-conditions .competition-qualifying-conditions__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ghostai-space-4);
    margin-top: var(--ghostai-space-3);
    padding-top: var(--ghostai-space-3);
    border-top: 1px solid var(--ghostai-color-border);
}

.competition-qualifying-conditions__input {
    width: 100%;
    resize: vertical;
}

.competition-edition-qualifying .competition-results__lines,
.competition-edition-qualifying .competition-results__table {
    width: 100%;
    margin-top: var(--ghostai-space-2);
    margin-bottom: var(--ghostai-space-3);
    border-collapse: collapse;
}

.competition-edition-qualifying .competition-results__lines th,
.competition-edition-qualifying .competition-results__lines td,
.competition-edition-qualifying .competition-results__table th,
.competition-edition-qualifying .competition-results__table td {
    padding: var(--ghostai-space-2) var(--ghostai-space-3);
    border-bottom: 1px solid var(--ghostai-color-border);
    text-align: left;
    vertical-align: middle;
}

.competition-edition-qualifying .competition-results__lines th,
.competition-edition-qualifying .competition-results__table th {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Times: driver takes the free width; place and time stay on one line; the actions sit at the row's end. */
.competition-edition-qualifying .competition-results__lines td:nth-child(2) {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.competition-edition-qualifying .competition-results__lines td:nth-child(3) {
    width: 9rem;
}

.competition-edition-qualifying .competition-results__lines td:nth-child(3) .tds-field-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 7rem;
    min-height: 36px;
    padding: 0 var(--ghostai-space-2);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 8px);
    background: var(--ghostai-color-input-bg, var(--ghostai-color-surface));
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.competition-edition-qualifying .competition-results__lines td:nth-child(4) {
    white-space: nowrap;
    text-align: right;
}

/* Allocation and reserves: a narrow place column, the driver takes the free width, the lap is a fixed column. */
.competition-edition-qualifying .competition-results__table th:first-child,
.competition-edition-qualifying .competition-results__table td:first-child {
    width: 5rem;
    font-variant-numeric: tabular-nums;
}

.competition-edition-qualifying .competition-results__table th:last-child,
.competition-edition-qualifying .competition-results__table td:last-child {
    width: 9rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* LIGA-20 — the results-import review: the screenshots beside the rows read from them; stacked below 1024px. */
.competition-import {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3);
    min-width: 0;
    margin-bottom: var(--ghostai-space-4);
}

.competition-import__upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-3);
}

.competition-import__list {
    margin: 0;
    padding-left: var(--ghostai-space-4);
}

.competition-import__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
    gap: var(--ghostai-space-4);
    align-items: start;
}

.competition-import__sources {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3);
    min-width: 0;
}

.competition-import__source {
    margin: 0;
}

.competition-import__source img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 8px);
}

.competition-import__raw {
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
    font-size: 0.8rem;
}

.competition-import__as-read {
    font-family: var(--ghostai-font-technical);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* A flag is words under the field, never colour alone. */
.competition-import__flag {
    display: block;
    margin-top: 2px;
    color: var(--ghostai-color-warning, #b26a00);
    font-size: 0.75rem;
}

.competition-import__row--excluded td {
    opacity: 0.55;
}

@media (max-width: 1024px) {
    .competition-import__layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    /* As specific as the field rules above, so a phone stacks every field rather than keeping two abreast. */
    .competition-inline-form > *,
    .competition-inline-form > .tds-field,
    .competition-inline-form > .competition-field {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Series form — selected-members picker (same list shape as the car picker). */
.series-eligible-members__list {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 8px);
    background: var(--ghostai-color-input-bg, var(--ghostai-color-surface));
}

.series-eligible-members__option {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-3, 12px);
    min-height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid var(--ghostai-color-border);
    cursor: pointer;
}

.series-eligible-members__option:last-child {
    border-bottom: none;
}

.series-eligible-members__empty {
    color: var(--ghostai-color-text-muted);
}

/* ══ GFUX-F begin — steward picker (F09): pick a group member, never type a user id ══ */
.competition-steward-picker {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
    max-width: 480px;
    margin-top: var(--ghostai-space-3, 12px);
}

.competition-steward-picker__heading {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    font-weight: 600;
}

.competition-steward-picker__list {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 8px);
    background: var(--ghostai-color-input-bg, var(--ghostai-color-surface));
}

/* A touch target of at least 44 px (rule 9); the whole row is the label of its radio. */
.competition-steward-picker__option {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-3, 12px);
    min-height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid var(--ghostai-color-border);
    cursor: pointer;
}

.competition-steward-picker__option:last-child {
    border-bottom: none;
}

.competition-steward-picker > .tds-button {
    align-self: flex-start;
}

@media (max-width: 640px) {
    .competition-steward-picker {
        max-width: none;
    }

    .competition-steward-picker > .tds-button {
        align-self: stretch;
    }
}
/* ══ GFUX-F end ══ */

/* ── Tyre rules (league rule sets): full-width chip rows grouped by family, never a popup over the car list ── */
.race-event-tyres {
    grid-column: 1 / -1;
}

.race-event-tyres__family {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1, 4px);
}

.race-event-tyres__family-label {
    color: var(--ghostai-color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* LIGA-14 (#2888) — the captain's panel and the team table of a team edition. A hint before saving reads as a warning
   (it names what the API would refuse) without being an error: nothing has been sent yet. */
.competition-team-panel__warning {
    padding: var(--ghostai-space-2) var(--ghostai-space-3);
    border: 1px solid var(--tds-warning-border);
    border-radius: var(--ghostai-radius-sm, 8px);
    background: var(--tds-warning-bg);
    color: var(--tds-warning-text);
}

.competition-team-panel__drivers,
.competition-team-panel__nominees {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2);
    padding: 0;
    list-style: none;
}

.competition-team-panel__drivers > li,
.competition-team-panel__editor-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2);
}

.competition-team-panel__lineup {
    margin-top: var(--ghostai-space-3);
    padding-top: var(--ghostai-space-3);
    border-top: 1px solid var(--ghostai-color-border);
}

/* LIGA-14 (#2888) — the organizer team rules forms: two regulations one under the other, and the change windows as a
   group of the roster form that takes a full row. */
.competition-team-policies__policy + .competition-team-policies__policy {
    margin-top: var(--ghostai-space-3);
    padding-top: var(--ghostai-space-3);
    border-top: 1px solid var(--ghostai-color-border);
}

.competition-team-policies__windows {
    flex-basis: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.competition-team-policies__windows > legend {
    padding: 0;
    font-weight: 600;
}

.competition-team-policies__note {
    flex-basis: 100%;
    margin: 0;
}

/* The lineup change history: one change per row with the author underneath. A replacement or a removed time is
   set in stronger type than the routine rows; the times of one save fold into a single line that opens. */
.competition-edition-qualifying__history-list {
    display: grid;
    gap: var(--ghostai-space-2);
    margin: 0;
    padding-left: var(--ghostai-space-4);
}

.competition-edition-qualifying__history-row--key .competition-edition-qualifying__history-change {
    font-weight: 600;
}

.competition-edition-qualifying__history-row summary {
    cursor: pointer;
}

/* #3651: a driver who resigned during the qualifying stays in the table with the time, greyed, holding no place. */
.competition-edition-qualifying__resigned td {
    color: var(--ghostai-color-text-muted);
}

.competition-edition-qualifying__resigned td:first-child {
    text-decoration: line-through;
}

.competition-edition-qualifying__manual {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-1, 4px);
    margin-left: var(--ghostai-space-1, 4px);
}

/* The move-or-swap form and the preview of who moves: one column on a phone, fields side by side when there is room. */
.competition-lineup-change {
    display: grid;
    gap: var(--ghostai-space-3, 12px);
    margin-block: var(--ghostai-space-3, 12px);
}

.competition-lineup-change__form {
    display: grid;
    gap: var(--ghostai-space-3, 12px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    align-items: end;
}

/* A sentence of the form (a round with provisional results, what a withdrawal does) takes the whole row. */
.competition-lineup-change__note {
    grid-column: 1 / -1;
    margin: 0;
}

.competition-lineup-preview ul {
    margin: 0;
    padding-left: var(--ghostai-space-4, 16px);
}

/* ── Group sponsors (SPN-03) ─────────────────────────────────────────────────
   The Sponsors page of a Team / Organization and the Series "Enabled sponsors" section. Tokens only. */
.group-sponsors {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-4, 16px);
}

.group-sponsor-card--inactive {
    opacity: 0.72;
}

.group-sponsor-card__window,
.series-sponsors__window {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

.group-sponsor-card__website {
    color: var(--ghostai-color-accent);
    overflow-wrap: anywhere;
}

.group-sponsor-card__description {
    margin: 0;
}

.group-sponsor-panel {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    margin-top: var(--ghostai-space-3, 12px);
    padding-top: var(--ghostai-space-3, 12px);
    border-top: 1px solid var(--ghostai-color-border);
}

.group-sponsor-panel__note {
    margin: 0;
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

.group-sponsor-editor__commands,
.series-sponsors__row-actions,
.group-sponsor-share-offer__kinds {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    align-items: center;
}

.group-sponsor-image__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-3, 12px);
    align-items: center;
}

.group-sponsor-image__preview {
    max-height: 64px;
    max-width: 160px;
    object-fit: contain;
    border-radius: var(--ghostai-radius-sm, 4px);
}

.group-sponsor-image__preview--banner {
    max-width: min(320px, 100%);
}

.group-sponsor-image__empty {
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

.group-sponsor-share-list,
.series-sponsors__selection,
.series-sponsors__available {
    display: grid;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.group-sponsor-share-list__item,
.series-sponsors__row-heading {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    align-items: center;
}

.series-sponsors__heading {
    margin: var(--ghostai-space-3, 12px) 0 var(--ghostai-space-2, 8px);
    font-size: 0.9375rem;
}

.series-sponsors__row {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    padding: var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
}

.series-sponsors__row--unavailable {
    border-color: var(--ghostai-color-warning, var(--ghostai-color-border));
}

/* Where and how the partners strip is drawn: three choices (placement, mode, interval), each its own labelled row. */
.sponsor-strip-settings {
    display: grid;
    gap: var(--ghostai-space-3, 12px);
    max-width: 48rem;
}

.sponsor-strip-settings__group {
    display: grid;
    gap: var(--ghostai-space-2, 8px);
}

.sponsor-strip-settings__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
}

.sponsor-strip-settings__interval {
    max-width: 16rem;
}

/* A sponsor's logo in the editor and on its card: on a neutral plate, contained, never cropped. */
.sponsor-logo-field {
    grid-column: 1 / -1;
}

.sponsor-logo-field__plate,
.group-sponsor-card__plate {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 6px);
    background: var(--ghostai-color-surface-2);
}

.sponsor-logo-field__plate {
    height: var(--tds-input-height-md, 40px);
    max-width: 10rem;
    padding: 0 var(--ghostai-space-2, 8px);
}

.sponsor-logo-field__thumb {
    display: block;
    max-width: 100%;
    max-height: calc(var(--tds-input-height-md, 40px) - 8px);
    object-fit: contain;
}

.sponsor-logo-field__pending {
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.group-sponsor-card__plate {
    width: 64px;
    height: 64px;
    padding: 4px;
}

.group-sponsor-card__logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ── The partners strip: at the bottom and/or at the top of every public page under /o/ and /t/ ─────────────────────
   A framed band (surface + border tokens, so a league skin recolours it) holding the partners on plates.
   FULL (the bottom strip): a small label on the left and a 60 px row. SLIM (the top strip): no label, a 40 px row.
   What a plate shows: the sponsor's BANNER, else its LOGO, else a text plate; an image keeps its own background and
   shape (contained, never cropped or recoloured).
   ALL AT ONCE with logos only: equal slots, the column count following the number of partners
   (GroupSponsorsStripLayout.ColumnsFor: one row up to five, then 3 + 3, 4 + 3, 4 + 4); fewer than four use the width of
   four so a single logo is not stretched across the page; the last row is centred; a phone has two columns.
   ALL AT ONCE with a banner among them (--natural): every slot has the same height and the width of its own image,
   wrapped and centred.
   ROTATING (--rotating): one partner in a banner-sized stage; all slides are stacked and only the active one is
   visible, so a change is a cross-fade (switched off for prefers-reduced-motion). */
.groups-sponsors-strip {
    --groups-sponsors-columns: 4;
    --groups-sponsors-gap: var(--ghostai-space-3, 12px);
    --groups-sponsors-row: 60px;
    --groups-sponsors-logo: 44px;
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-4, 16px);
    box-sizing: border-box;
    min-width: 0;
    /* Aligned with the page content (a .groups-page starts two page paddings in) and with a skin's band and footer. */
    margin: var(--ghostai-space-6, 24px) calc(var(--ghostai-page-padding-inline, 16px) * 2) var(--ghostai-space-4, 16px);
    padding: var(--ghostai-space-3, 12px) var(--ghostai-space-4, 16px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface);
}

.groups-sponsors-strip--slim {
    --groups-sponsors-gap: var(--ghostai-space-2, 8px);
    --groups-sponsors-row: 40px;
    --groups-sponsors-logo: 28px;
    margin: var(--ghostai-space-2, 8px) calc(var(--ghostai-page-padding-inline, 16px) * 2) 0;
    padding: var(--ghostai-space-1, 4px) var(--ghostai-space-3, 12px);
}

.groups-sponsors-strip--n5 { --groups-sponsors-columns: 5; }
.groups-sponsors-strip--n6 { --groups-sponsors-columns: 3; }
.groups-sponsors-strip--n7,
.groups-sponsors-strip--n8 { --groups-sponsors-columns: 4; }

.groups-sponsors-strip__label {
    flex: 0 0 auto;
    max-width: 9rem;
    color: var(--ghostai-color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.groups-sponsors-strip__list {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--groups-sponsors-gap);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.groups-sponsors-strip__slot {
    display: flex;
    flex: 0 0 calc((100% - (var(--groups-sponsors-columns) - 1) * var(--groups-sponsors-gap)) / var(--groups-sponsors-columns));
    min-width: 0;
}

.groups-sponsors-strip--natural .groups-sponsors-strip__slot {
    flex: 0 1 auto;
    max-width: 100%;
}

.groups-sponsors-strip .tds-tooltip {
    display: flex;
    max-width: 100%;
}

.groups-sponsors-strip__slot > .tds-tooltip--full {
    width: 100%;
}

.groups-sponsors-strip__plate {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: var(--groups-sponsors-row);
    padding: 0 var(--ghostai-space-2, 8px);
    overflow: hidden;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 6px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    text-decoration: none;
}

.groups-sponsors-strip--natural .groups-sponsors-strip__plate {
    width: auto;
}

.groups-sponsors-strip--natural .groups-sponsors-strip__plate--logo,
.groups-sponsors-strip--natural .groups-sponsors-strip__plate--text,
.groups-sponsors-strip--rotating .groups-sponsors-strip__plate--logo,
.groups-sponsors-strip--rotating .groups-sponsors-strip__plate--text {
    min-width: calc(var(--groups-sponsors-row) * 2);
}

.groups-sponsors-strip__plate--banner {
    padding: 0;
}

a.groups-sponsors-strip__plate:hover {
    border-color: var(--ghostai-color-border-strong);
}

a.groups-sponsors-strip__plate:focus-visible,
.groups-sponsors-strip .tds-tooltip:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.groups-sponsors-strip__image {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.groups-sponsors-strip__image--logo {
    height: var(--groups-sponsors-logo);
}

.groups-sponsors-strip__image--banner {
    height: 100%;
}

.groups-sponsors-strip__name {
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
}

.groups-sponsors-strip--slim .groups-sponsors-strip__name {
    font-size: 0.75rem;
}

/* Rotating: one slot sized for a banner (five times the row, never wider than the strip), the controls beside it. */
.groups-sponsors-strip--rotating {
    justify-content: center;
}

.groups-sponsors-strip__rotator {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.groups-sponsors-strip__stage {
    display: grid;
    flex: 0 1 calc(var(--groups-sponsors-row) * 5);
    min-width: 0;
    height: var(--groups-sponsors-row);
}

.groups-sponsors-strip__slide {
    display: flex;
    grid-area: 1 / 1;
    align-items: stretch;
    justify-content: center;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.groups-sponsors-strip__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s;
}

.groups-sponsors-strip__slide .tds-tooltip {
    width: 100%;
    justify-content: center;
}

.groups-sponsors-strip__slide .groups-sponsors-strip__plate {
    width: auto;
}

.groups-sponsors-strip__controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    color: var(--ghostai-color-text-muted);
    font-size: 0.75rem;
}

.groups-sponsors-strip__pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm, 6px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    cursor: pointer;
}

.groups-sponsors-strip__pause:hover {
    border-color: var(--ghostai-color-border-strong);
}

.groups-sponsors-strip__pause:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.groups-sponsors-strip__position {
    min-width: 2.5em;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .groups-sponsors-strip__slide,
    .groups-sponsors-strip__slide.is-active {
        transition: none;
    }
}

@media (max-width: 760px) {
    .groups-sponsors-strip,
    .groups-sponsors-strip--slim {
        margin-inline: calc(var(--ghostai-page-padding-inline, 16px) + var(--ghost-space-3, 12px));
    }
}

@media (max-width: 640px) {
    .groups-sponsors-strip {
        --groups-sponsors-columns: 2;
        flex-direction: column;
        align-items: stretch;
        gap: var(--ghostai-space-2, 8px);
        padding: var(--ghostai-space-3, 12px);
    }

    .groups-sponsors-strip--slim {
        padding: var(--ghostai-space-1, 4px) var(--ghostai-space-2, 8px);
    }

    .groups-sponsors-strip__label {
        max-width: none;
    }

    .groups-sponsors-strip__stage {
        flex-basis: auto;
        width: 100%;
    }
}

/* ── GROUP-DRIVER-CARD (T12): a driver's card in a group, and its editor ────────
   The look comes only from what the server gated: the accent and the text colour it computed on it arrive as two
   custom properties (DriverCardPresentation.AccentStyle), and the surface as one of the design system's three
   modifiers. A card with neither is the default card, in the page's own tokens. */
.driver-group-card {
    --driver-card-accent: var(--ghostai-color-accent);
    --driver-card-on-accent: var(--ghostai-color-bg);
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
    max-width: 1040px;
    padding: var(--ghostai-space-4, 16px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface);
}

.driver-group-card--flat {
    border-color: transparent;
}

.driver-group-card--elevated {
    border-color: transparent;
    background: var(--ghostai-color-surface-2);
    box-shadow: var(--ghostai-shadow-md);
}

.driver-group-card--outlined {
    border-color: var(--ghostai-color-border-strong);
    background: transparent;
}

.driver-group-card--accented {
    border-top: 4px solid var(--driver-card-accent);
}

.driver-group-card__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-3, 12px);
    align-items: center;
    min-width: 0;
}

.driver-group-card__emblem {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--ghostai-radius-md, 8px);
    object-fit: cover;
}

.driver-group-card__emblem--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    font-weight: 700;
}

.driver-group-card--accented .driver-group-card__emblem--initials {
    background: var(--driver-card-accent);
    color: var(--driver-card-on-accent);
}

.driver-group-card__identity {
    flex: 1 1 12rem;
    min-width: 0;
}

.driver-group-card__name {
    margin: 0;
    font-size: var(--ghostai-type-h3, 1.25rem);
    overflow-wrap: anywhere;
}

.driver-group-card__tagline {
    margin: 0;
    color: var(--ghostai-color-text-secondary);
    overflow-wrap: anywhere;
}

.driver-group-card__coverage {
    margin: 0;
}

.driver-group-card__stats {
    display: grid;
    /* Four across where the column has the room, two where it does not (the left column, a phone). */
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
}

.driver-group-card__stats > div {
    min-width: 0;
    padding: var(--ghostai-space-2, 8px);
    border-radius: var(--ghostai-radius-sm, 4px);
    background: var(--ghostai-color-surface-2);
}

.driver-group-card__stats dt {
    color: var(--ghostai-color-text-muted);
    font-size: 0.85em;
}

.driver-group-card__stats dd {
    margin: 0;
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.driver-group-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.driver-group-card__list > li {
    overflow-wrap: anywhere;
}

.driver-group-card__protocols {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
}

.driver-group-card__sources > summary {
    cursor: pointer;
    min-height: var(--ghostai-touch-target, 44px);
    display: flex;
    align-items: center;
}

.driver-group-card a:focus-visible,
.driver-group-card__sources > summary:focus-visible,
.driver-card-editor .tds-field-input:focus-visible,
.driver-card-panel__reader-link:focus-visible {
    outline: none;
    box-shadow: var(--ghostai-shadow-focus);
}

.driver-card-panel,
.driver-card-editor,
.driver-card-editor__form,
.driver-card-editor__fields {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.driver-card-editor__fields {
    margin: 0;
    padding: 0;
    border: 0;
}

.driver-card-editor__field {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1, 4px);
    max-width: 28rem;
}

.driver-card-editor__field .tds-field-input {
    width: 100%;
    min-height: var(--ghostai-touch-target, 44px);
}

.driver-card-editor__accent,
.driver-card-editor__emblem {
    display: flex;
    gap: var(--ghostai-space-2, 8px);
    align-items: center;
}

.driver-card-editor__swatch {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ghostai-color-border-strong);
    border-radius: var(--ghostai-radius-sm, 4px);
}

.driver-card-editor__commands,
.driver-card-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    align-items: center;
}

.driver-card-panel__reader-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--ghostai-touch-target, 44px);
}

/* ── The card's two columns ("A2"): the driver and their figures on the left, the races of one edition·division on
   the right. The columns fold into one by the room the card actually has (a phone, the editor's preview), not by
   the viewport alone. Tokens only; the accent is the card's own (--driver-card-accent), gated by the server. */
.driver-group-card__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--ghostai-space-4, 16px) var(--ghostai-space-6, 24px);
    align-items: start;
    min-width: 0;
}

.driver-group-card__columns--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
}

.driver-group-card__main,
.driver-group-card__results {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.driver-group-card__main > p,
.driver-group-card__results > p {
    margin: 0;
}

/* An eyebrow label: the column's heading and the small captions above a figure. */
.driver-group-card__eyebrow,
.driver-group-card__highlight dt {
    margin: 0;
    color: var(--ghostai-color-text-muted);
    font-size: var(--ghostai-type-eyebrow, 0.6875rem);
    font-weight: 600;
    letter-spacing: var(--ghostai-tracking-eyebrow, 0.08em);
    text-transform: uppercase;
}

.driver-group-card__highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
}

.driver-group-card__highlight {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1, 4px);
    min-width: 0;
    padding: var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border);
    border-inline-start: 4px solid var(--driver-card-accent);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
}

.driver-group-card__highlight dd {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    align-items: baseline;
    margin: 0;
    color: var(--ghostai-color-text-primary);
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--ghostai-type-h3, 1.25rem);
    font-weight: 700;
}

.driver-group-card__highlight-note {
    color: var(--ghostai-color-text-secondary);
    font-family: inherit;
    font-size: 0.75em;
    font-weight: 400;
}

.driver-group-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
}

.driver-group-card__chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--ghostai-touch-target, 44px);
    max-width: 100%;
    padding: var(--ghostai-space-1, 4px) var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border-strong);
    border-radius: var(--ghostai-radius-pill, 999px);
    background: transparent;
    color: var(--ghostai-color-text-secondary);
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.driver-group-card__chip--selected {
    border-color: var(--driver-card-accent);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--driver-card-accent);
}

.driver-group-card__record {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px) var(--ghostai-space-4, 16px);
    align-items: baseline;
    justify-content: space-between;
    font-weight: 600;
}

.driver-group-card__record-points {
    display: inline-flex;
    gap: var(--ghostai-space-2, 8px);
    align-items: baseline;
}

.driver-group-card__record-points strong,
.driver-group-card__round-points,
.driver-group-card__round-number,
.driver-group-card__breakdown dd {
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
}

.driver-group-card__rounds {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.driver-group-card__rounds > li {
    border-top: 1px solid var(--ghostai-color-border);
}

/* One race: a line that opens its own breakdown. The whole line is the target. */
.driver-group-card__round > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "number title points"
        "number finish points";
    column-gap: var(--ghostai-space-3, 12px);
    align-items: center;
    min-height: var(--ghostai-touch-target, 44px);
    padding: var(--ghostai-space-2, 8px) 0;
    cursor: pointer;
    list-style: none;
}

.driver-group-card__round > summary::-webkit-details-marker {
    display: none;
}

.driver-group-card__round-number {
    grid-area: number;
    min-width: 2.5rem;
    padding: var(--ghostai-space-1, 4px) var(--ghostai-space-2, 8px);
    border-radius: var(--ghostai-radius-sm, 4px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-secondary);
    font-weight: 700;
    text-align: center;
}

.driver-group-card__round-title {
    grid-area: title;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.driver-group-card__round-finish {
    grid-area: finish;
    min-width: 0;
    color: var(--ghostai-color-text-secondary);
    overflow-wrap: anywhere;
}

.driver-group-card__round-points {
    grid-area: points;
    font-weight: 700;
    white-space: nowrap;
}

.driver-group-card__round[open] > summary {
    color: var(--ghostai-color-text-primary);
}

.driver-group-card__breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: var(--ghostai-space-2, 8px);
    margin: 0 0 var(--ghostai-space-2, 8px);
}

.driver-group-card__breakdown > div {
    min-width: 0;
    padding: var(--ghostai-space-2, 8px);
    border-radius: var(--ghostai-radius-sm, 4px);
    background: var(--ghostai-color-surface-2);
}

.driver-group-card__breakdown dt {
    color: var(--ghostai-color-text-muted);
    font-size: 0.85em;
}

.driver-group-card__breakdown dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* LIGA-16: the points a steward decision gave or took. The sign and the unit are in the text; the colour only repeats it. */
.driver-group-card__change--gain {
    color: var(--ghostai-color-success);
}

.driver-group-card__change--loss {
    color: var(--ghostai-color-danger);
}

.driver-group-card__round-protocol,
.driver-group-card-dialog__full-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--ghostai-touch-target, 44px);
}

.driver-group-card__chip:focus-visible,
.driver-group-card__round > summary:focus-visible,
.driver-group-card-dialog__full-link:focus-visible,
.groups-member-card-button:focus-visible,
.competition-standings__group-card:focus-visible {
    outline: none;
    box-shadow: var(--ghostai-shadow-focus);
}

/* In the dialog the modal is the frame: the card keeps its look but not a second border and padding inside it. */
.driver-group-card-dialog .driver-group-card {
    max-width: none;
}

.driver-group-card-dialog__full-link {
    margin-inline-end: auto;
}

/* A member's identity that opens their driver card: the cell as it was, link-like, with a finger-sized target. */
.groups-member-card-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--ghostai-touch-target, 44px);
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--ghostai-radius-sm, 4px);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.groups-member-card-button:hover {
    color: var(--ghostai-color-accent);
}

/* The group card beside a standings row's name: an icon-sized second action, never taller than the name's own. */
.competition-standings__group-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ghostai-touch-target, 44px);
    min-height: var(--ghostai-touch-target, 44px);
    padding: 0;
    border: 0;
    border-radius: var(--ghostai-radius-sm, 4px);
    background: none;
    color: var(--ghostai-color-text-secondary);
    cursor: pointer;
}

.competition-standings__group-card:hover {
    color: var(--ghostai-color-accent);
}

@media (max-width: 640px) {
    .driver-group-card {
        padding: var(--ghostai-space-3, 12px);
    }

    .driver-group-card__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .driver-card-editor__field {
        max-width: none;
    }
}

/* ══ GFUX-B — organization detail, cycle cards, members (begin) ══════════════
   One delimited block: the organization page's tiles and plan-badged actions,
   the season chips of a cycle card, and the members grid's role select and
   plans link. Tokens only; no new colours. */

/* A header action the organization's plan does not include: the button and its plan badge read as one. */
.groups-plan-action {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

/* The (?) sits on the tile's label line, never under the value. */
.groups-tile-label {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

/* The seasons of one cycle: a single wrapping row of chips, newest first. */
.groups-season-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.groups-season-chips__item {
    display: inline-flex;
    align-items: center;
    gap: var(--tds-spacing-xs, 4px);
    min-width: 0;
    max-width: 100%;
}

.groups-season-chips .tds-chip {
    min-height: var(--tds-input-height-md);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

/* A season with no page for this viewer is text in a chip's shape — it must not look clickable. */
.groups-season-chips__unlinked {
    cursor: default;
    border-style: dashed;
}

.groups-season-chips__unlinked:hover {
    border-color: var(--tds-border-default);
    color: var(--tds-text-secondary);
}

/* Members grid: the role is chosen in its own column, at the shared control height. */
.groups-member-role-select {
    min-height: var(--tds-input-height-md);
    max-width: 100%;
}

/* 0.4.2 (e2e 0.4.1 #7): the actions of a member row never clip ("Usuń" cut at the right edge). The shared actions cell
   is max-content and nowrap; here it may wrap inside its column, and the cell shows what overflows instead of hiding it. */
.groups-members-grid .ghostai-grid-actions-cell {
    min-width: 0;
    flex-wrap: wrap;
    white-space: normal;
}

.groups-members-grid .rz-cell-data:has(.ghostai-grid-actions-cell),
.groups-members-grid td:has(.ghostai-grid-actions-cell) {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* "See plans" under a seat-limit refusal. */
.groups-plan-link {
    display: inline-flex;
    align-items: center;
    gap: var(--tds-spacing-xs, 4px);
    min-height: var(--tds-input-height-md);
    color: var(--ghostai-color-accent, var(--tds-accent-text));
    font-weight: 600;
    text-decoration: none;
}

.groups-plan-link:hover,
.groups-plan-link:focus-visible {
    text-decoration: underline;
}

@media (max-width: 480px) {
    /* Touch targets of at least 44px on a phone (rule 9). */
    .groups-season-chips .tds-chip,
    .groups-plan-link,
    .groups-member-role-select {
        min-height: 44px;
    }
}
/* ══ GFUX-B (end) ══════════════════════════════════════════════════════════ */

/* ══ E2E league campaign 2026-10-06 (FINDINGS V01–V27) ═══════════════════════════════════════════════════════════
   One general rule per kind of defect instead of a copy per component. Tokens only, no new colours. Selectors
   that restyle bare elements are wrapped in :where() so every existing, more specific rule keeps winning. */

/* ── V01 / V16 — native fields wearing the shared field class outside a TelemetryFieldWrapper ────────────────────
   The design system styles ".tds-field .tds-field-input" only, so a bare <input class="tds-field-input"> in a
   table cell, and every <select class="tds-field-input">, was the browser's own control (inset border, UA font).
   Same look as the wrapped fields beside them: one height, the input border, the page's font. */
:where(.groups-page, .groups-form-card, .competition-edition) input.tds-field-input:not([class*="rz-"]):not([type="checkbox"]):not([type="radio"]),
:where(.groups-page, .groups-form-card, .competition-edition) textarea.tds-field-input,
:where(.groups-page, .groups-form-card, .competition-edition) select.tds-field-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--tds-input-height-md, 36px);
    padding: 0 var(--ghostai-space-3, 12px);
    border: 1px solid var(--tds-border-input, var(--ghostai-color-border));
    border-radius: var(--ghostai-radius-sm, 8px);
    background-color: var(--ghostai-color-input-bg, var(--ghostai-color-surface-2));
    color: var(--ghostai-color-text-primary);
    font: inherit;
    font-size: 0.8125rem;
}

:where(.groups-page, .groups-form-card, .competition-edition) textarea.tds-field-input {
    padding-top: var(--ghostai-space-2, 8px);
    padding-bottom: var(--ghostai-space-2, 8px);
    line-height: 1.45;
}

:where(.groups-page, .groups-form-card, .competition-edition) :is(input, textarea, select).tds-field-input:focus-visible {
    outline: none;
    border-color: var(--ghostai-color-accent);
    box-shadow: var(--ghostai-shadow-focus, 0 0 0 2px var(--ghostai-color-accent));
}

:where(.groups-page, .groups-form-card, .competition-edition) :is(input, textarea, select).tds-field-input:disabled {
    color: var(--ghostai-color-text-muted);
    cursor: not-allowed;
}

/* ── V01 / V15 — native checkboxes and radios: the accent colour and a size a finger can hit ───────────────────── */
:where(.groups-page, .groups-form-card, .competition-edition) input:is([type="checkbox"], [type="radio"]):not(.rz-helper-hidden-accessible *) {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    flex: none;
    accent-color: var(--ghostai-color-accent);
    vertical-align: middle;
}

/* ── V14 — lists inside competition cards are rows, not bulleted documents ─────────────────────────────────────── */
:where(.competition-edition) :is(ul, ol):not([class*="rz-"]) {
    display: grid;
    /* One column that may shrink: an implicit auto track takes its widest item's min-content, so a round with a
       session table made the whole list 368 px wide in a 277 px card and the page scrolled sideways at 390 px
       (run 2 of the league campaign, N01). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ghostai-space-1, 4px);
    margin: var(--ghostai-space-2, 8px) 0 0;
    padding: 0;
    list-style: none;
}

/* ── V03 / V04 / V09 — protocol, standings and lineup tables: one table look ──────────────────────────────────────
   The table rules used to exist for the lineup card only, so the results and standings tables had centred headers
   over left-aligned cells, no padding and no lines. A wide table keeps its natural width and scrolls inside its own
   framed container (the frame is the visible edge) instead of being squeezed or cut off at 390 px. */
.competition-table-scroll {
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    scrollbar-width: thin;
}

.competition-table-scroll > table {
    margin: 0;
}

.competition-results__table,
.competition-results__lines {
    width: 100%;
    border-collapse: collapse;
}

.competition-results__table th,
.competition-results__table td,
.competition-results__lines th,
.competition-results__lines td {
    padding: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px);
    border-bottom: 1px solid var(--ghostai-color-border);
    text-align: left;
    vertical-align: middle;
}

.competition-results__table tbody tr:last-child > td,
.competition-results__lines tbody tr:last-child > td,
.competition-calendar__sessions tbody tr:last-child > td,
.competition-entries__table tbody tr:last-child > td {
    border-bottom: 0;
}

.competition-results__table th,
.competition-results__lines th {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Numbers read down a column: right-aligned, tabular figures. Published protocol — place, race time, best lap,
   points; standings — points, starts, wins, podiums, win rate. */
.competition-results__protocol .competition-results__table :is(th, td):is(:nth-child(1), :nth-child(4), :nth-child(5), :nth-child(6)),
.competition-standings__division .competition-results__table :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7)) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.competition-standings__division .competition-results__table :is(th, td):first-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* V09 — a driver who did not finish, did not start or was disqualified is not read as a classified place. */
.competition-results__table tr[data-status]:not([data-status="Finished"]) > td {
    color: var(--ghostai-color-text-secondary);
}

.competition-results__table tr[data-status]:not([data-status="Finished"]) > td:nth-child(3) {
    color: var(--ghostai-color-warning);
    font-weight: 700;
}

/* 2026-10-14 — the points cell of a published protocol is the final number with a chevron (GhostAiBreakdownValue); what
   it is made of opens in the row under the line (GhostAiBreakdownPanel), spanning the table, its lines held against the
   points column on the right. A plain line is the number alone with the chevron's room kept, so the column stays tidy. */
.competition-results__protocol .competition-results__table td:nth-child(6) {
    padding-block: 0;
}

.competition-results__breakdown-row > td {
    background: var(--ghostai-color-surface-2, transparent);
}

.competition-results__breakdown-row .ghostai-breakdown-panel {
    width: min(100%, 24rem);
    margin-inline-start: auto;
    text-align: left;
}

/* GTSC5-UX — a published protocol on a phone (480 px and narrower). Six columns do not fit: the table scrolled
   sideways and Points, the last column, was beyond the edge while Place and Driver were on the screen. Every row —
   the header too, so each value stays under its name — is laid out as two lines of one grid:
       Place | Driver ............ | Points
       Status ........ | Race time | Best lap
   No column is removed and nothing scrolls sideways; the second line is the detail of the first. The tracks are
   the same in every row (fixed and fr, never auto), so the columns line up although each row is its own grid. The
   first track holds the word "Miejsce"; the last two are the wider ones, for a race time of an hour and more. */
@media (max-width: 480px) {
    .competition-results__protocol .competition-results__table,
    .competition-results__protocol .competition-results__table thead,
    .competition-results__protocol .competition-results__table tbody {
        display: block;
    }

    .competition-results__protocol .competition-results__table tr {
        display: grid;
        grid-template-columns: 4.5rem minmax(0, 0.8fr) repeat(2, minmax(0, 1.1fr));
        align-items: center;
        border-bottom: 1px solid var(--ghostai-color-border);
    }

    .competition-results__protocol .competition-results__table tbody tr:last-child {
        border-bottom: 0;
    }

    .competition-results__protocol .competition-results__table :is(th, td) {
        min-width: 0;
        padding: var(--ghostai-space-1, 4px) var(--ghostai-space-2, 8px);
        border-bottom: 0;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* The number columns are kept on one line on a wide screen (the rule above this block); in a track of a phone a
       long header ("Najlepsze okrążenie") or "25 · bonus +1" wraps instead of reaching past the frame. */
    .competition-results__protocol .competition-results__table :is(th, td):is(:nth-child(1), :nth-child(4), :nth-child(5), :nth-child(6)) {
        white-space: normal;
    }

    /* Line 1: place, driver (two tracks wide), points. */
    .competition-results__protocol .competition-results__table :is(th, td):nth-child(1) {
        grid-area: 1 / 1;
    }

    .competition-results__protocol .competition-results__table :is(th, td):nth-child(2) {
        grid-area: 1 / 2 / auto / span 2;
    }

    .competition-results__protocol .competition-results__table :is(th, td):nth-child(6) {
        grid-area: 1 / 4;
    }

    .competition-results__protocol .competition-results__table :is(th, td):is(:nth-child(1), :nth-child(2), :nth-child(6)) {
        padding-top: var(--ghostai-space-2, 8px);
    }

    /* Line 2: status (under place and driver), race time, best lap — the detail, in the header's size. */
    .competition-results__protocol .competition-results__table :is(th, td):nth-child(3) {
        grid-area: 2 / 1 / auto / span 2;
    }

    .competition-results__protocol .competition-results__table :is(th, td):nth-child(4) {
        grid-area: 2 / 3;
    }

    .competition-results__protocol .competition-results__table :is(th, td):nth-child(5) {
        grid-area: 2 / 4;
    }

    .competition-results__protocol .competition-results__table :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(5)) {
        padding-bottom: var(--ghostai-space-2, 8px);
        font-size: 0.8125rem;
    }

    .competition-results__protocol .competition-results__table td:is(:nth-child(4), :nth-child(5)) {
        padding-inline: var(--ghostai-space-1, 4px);
        color: var(--ghostai-color-text-secondary);
    }

    .competition-results__protocol .competition-results__table td:nth-child(5) {
        padding-inline-end: var(--ghostai-space-2, 8px);
    }

    /* The opened points of a line: one cell across the whole grid row, its lines full width (stacked), not held right. */
    .competition-results__protocol .competition-results__table tr.competition-results__breakdown-row > td {
        grid-area: auto / 1 / auto / -1;
        padding: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px);
        text-align: left;
    }

    .competition-results__breakdown-row .ghostai-breakdown-panel {
        width: 100%;
    }
}

/* ── V01 / V10 / V18 — the editors: one gap between their parts, nothing touching ──────────────────────────────── */
.competition-results__editor,
.competition-results__manage,
.competition-standings__manage,
.competition-edition-qualifying__manage {
    display: grid;
    justify-items: start;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.competition-results__editor > *,
.competition-results__manage > *,
.competition-standings__manage > *,
.competition-edition-qualifying__manage > * {
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

:is(.competition-results__editor, .competition-results__manage, .competition-standings__manage, .competition-edition-qualifying__manage) > :is(section, form, div, ul, ol, details, h4, .tds-field) {
    justify-self: stretch;
}

/* Sized to what they hold, so eight columns fit a desktop card and the table scrolls only on a narrow screen. */
.competition-results__lines td input.tds-field-input {
    width: 8rem;
    min-width: 5rem;
    font-variant-numeric: tabular-nums;
}

.competition-results__lines td:first-child input.tds-field-input {
    width: 14rem;
}

.competition-results__lines td input.tds-field-input[type="number"] {
    width: 5rem;
    text-align: right;
}

/* ── V02 — standings: the driver and the points are buttons that read as what they are ─────────────────────────── */
.competition-standings__driver,
.competition-standings__figure {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-1, 4px);
    min-height: var(--tds-input-height-md, 36px);
    padding: 0;
    border: 0;
    border-radius: var(--ghostai-radius-sm, 8px);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.competition-standings__driver:hover,
.competition-standings__figure:hover {
    color: var(--ghostai-color-accent);
}

.competition-standings__driver:focus-visible,
.competition-standings__figure:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.competition-standings__figure {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/* The points open their sources: a caret says so and turns when they are open. */
.competition-standings__figure::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-left: var(--ghostai-space-1, 4px);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.competition-standings__figure[aria-expanded="true"]::after {
    transform: rotate(-135deg) translateY(-2px);
}

.competition-standings__sources > li {
    padding: var(--ghostai-space-1, 4px) 0;
    color: var(--ghostai-color-text-secondary);
}

/* ── V08 — bonuses under a protocol: one line each ─────────────────────────────────────────────────────────────── */
.competition-results__bonuses > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-1, 4px) var(--ghostai-space-2, 8px);
}

.competition-results__protocol + .competition-results__protocol {
    margin-top: var(--ghostai-space-4, 16px);
}

/* ── V06 — the screenshot import's file trigger ────────────────────────────────────────────────────────────────── */
.competition-file-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-height: var(--tds-input-height-md, 36px);
    padding: 0 var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border-strong, var(--ghostai-color-border));
    border-radius: var(--ghostai-radius-sm, 8px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.competition-file-trigger:hover {
    border-color: var(--ghostai-color-accent);
}

.competition-file-trigger:focus-within {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.competition-file-trigger.is-disabled {
    color: var(--ghostai-color-text-muted);
    cursor: not-allowed;
}

/* The real input covers the trigger invisibly: a click, a drop and the keyboard all still reach it. */
.competition-file-trigger__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}

/* ── V11 — scoring bonuses: a fieldset is min-content wide by default and pushed a phone page sideways ─────────── */
.competition-scoring__bonuses,
.competition-scoring__bonus,
.competition-form__choices {
    min-width: 0;
    max-width: 100%;
}

.competition-scoring__bonus > *,
.competition-scoring__bonuses > * {
    min-width: 0;
    max-width: 100%;
}

/* ── V13 — the series page: the competition cards keep the page's own gap between sections (they were 12 px apart
   under a 16 px page rhythm), and every card heading has one gap to its body. No restructuring: the tabbed season
   page is another change. */
.competition-edition,
.competition-edition .ghostai-section__body {
    gap: var(--ghostai-space-4, 16px);
}

.competition-edition .groups-card-heading {
    margin: 0 0 var(--ghostai-space-3, 12px);
}

/* ── V17 — the event wizard: the step's cards do not touch; the stepper buttons use the page's font ────────────── */
.race-event-wizard__body {
    display: grid;
    gap: var(--ghostai-space-4, 16px);
}

.race-event-wizard__body > * {
    min-width: 0;
}

:where(.groups-page) .tds-field-stepper__button {
    font: inherit;
}

/* ── V20 — calendar rounds are titled "Round N · name": the list's own "1." in front repeated the number ───────── */
.competition-calendar__rounds {
    padding-left: 0;
    list-style: none;
}

/* ── V23 — the events table's "When" cell wraps instead of being cut off mid-time ──────────────────────────────── */
.race-event-list-grid__when {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ── V24 — the driver's entry card: the badge and its sentence are two things with a gap; links share a baseline ─ */
.competition-my-entry__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-1, 4px) var(--ghostai-space-2, 8px);
}

.competition-my-entry__actions {
    align-items: center;
}

.competition-my-entry [data-testid="competition-my-entry-withdraw"] {
    margin-top: var(--ghostai-space-3, 12px);
}

/* ── V26 — an empty state's action sits at the end of the card, not glued to the end of the sentence ───────────── */
:where(.groups-page) .ghostai-empty-state__action {
    margin-left: auto;
}

@media (max-width: 760px) {
    /* Touch targets on a phone: fields and the standings buttons are at least 44 px tall. */
    :where(.groups-page, .groups-form-card, .competition-edition) :is(input, select).tds-field-input:not([type="checkbox"]):not([type="radio"]),
    .competition-file-trigger,
    .competition-standings__driver,
    .competition-standings__figure {
        min-height: var(--ghostai-touch-target, 44px);
    }

    :where(.groups-page, .groups-form-card, .competition-edition) input:is([type="checkbox"], [type="radio"]):not(.rz-helper-hidden-accessible *) {
        width: 1.5rem;
        height: 1.5rem;
    }

    :where(.groups-page) .ghostai-empty-state__action {
        margin-left: 0;
    }
}
/* ══ end of E2E league campaign 2026-10-06 ═══════════════════════════════════════════════════════════════════════ */

/* ══ Round flow 2026-10-07 — the provisional reading of a division table ═══════════════════════════════════════════
   What a provisional protocol would give is shown beside the official figures and is never told by colour alone: the
   points carry a plus, the place change an arrow and a number, the race cell a dashed outline, the reports a flag. */
.competition-standings__switch {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-height: var(--tds-input-height-md, 36px);
    margin: var(--ghostai-space-2, 8px) 0;
    padding: 0;
    border: 0;
    border-radius: var(--ghostai-radius-sm, 8px);
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.competition-standings__switch:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.competition-standings__switch-track {
    position: relative;
    flex: none;
    width: 2.25rem;
    height: 1.25rem;
    border: 1px solid var(--ghostai-color-border);
    border-radius: 999px;
    background: var(--ghostai-color-bg);
}

.competition-standings__switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.25rem - 6px);
    height: calc(1.25rem - 6px);
    border-radius: 50%;
    background: var(--ghostai-color-text-muted);
    transition: transform 120ms ease;
}

.competition-standings__switch[aria-checked="true"] .competition-standings__switch-track {
    border-color: var(--ghostai-color-accent);
}

.competition-standings__switch[aria-checked="true"] .competition-standings__switch-track::after {
    background: var(--ghostai-color-accent);
    transform: translateX(1rem);
}

@media (prefers-reduced-motion: reduce) {
    .competition-standings__switch-track::after {
        transition: none;
    }
}

.competition-standings__provisional-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--ghostai-space-2, 8px);
    margin: var(--ghostai-space-2, 8px) 0;
    padding: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px);
    border: 1px solid color-mix(in srgb, var(--ghostai-color-warning) 55%, transparent);
    border-radius: var(--ghostai-radius-sm, 8px);
    font-size: 0.875rem;
}

.competition-standings__provisional-notice svg {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ghostai-color-warning);
}

.competition-standings__division[data-provisional="true"] .competition-standings__table .competition-standings__place {
    width: 6rem;
}

.competition-standings__place-change {
    margin-left: var(--ghostai-space-1, 4px);
    color: var(--ghostai-color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.competition-standings__place-change[data-direction="up"] {
    color: var(--ghostai-color-success);
}

.competition-standings__place-change[data-direction="down"] {
    color: var(--ghostai-color-danger);
}

/* The official points keep their size; what is not official yet stands beside them, smaller. */
.competition-standings__provisional-points {
    margin-left: var(--ghostai-space-1, 4px);
    color: var(--ghostai-color-warning);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.competition-standings__cell-points--provisional {
    display: inline-block;
    padding: 1px var(--ghostai-space-1, 4px);
    border: 1px dashed color-mix(in srgb, var(--ghostai-color-warning) 55%, transparent);
    border-radius: var(--ghostai-radius-sm, 8px);
    color: var(--ghostai-color-warning);
}

.competition-standings__open-cases {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: var(--ghostai-space-1, 4px);
    padding: 1px var(--ghostai-space-1, 4px);
    border: 1px solid color-mix(in srgb, var(--ghostai-color-warning) 50%, transparent);
    border-radius: var(--ghostai-radius-sm, 8px);
    color: var(--ghostai-color-warning);
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: middle;
}

.competition-standings__open-cases svg {
    width: 0.8125rem;
    height: 0.8125rem;
}
/* ══ end of round flow 2026-10-07 ════════════════════════════════════════════════════════════════════════════════ */
/* Round flow: links to recordings on an incident report, and the confirmation checklist of a result. */
.competition-evidence-links {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.competition-evidence-links__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ghostai-space-2, 8px);
    font-weight: 600;
}

.competition-evidence-links__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.competition-evidence-links__row > .tds-field-input {
    flex: 1 1 240px;
    min-width: 0;
}

.competition-evidence-links > .tds-button {
    align-self: flex-start;
}

.competition-results__confirmation ul {
    margin: var(--ghostai-space-2, 8px) 0;
    padding: 0;
    list-style: none;
}

.competition-results__confirmation li {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-height: 32px;
}

/* ══ #3429 — the group's plan on its own page ═══════════════════════════════════════════════════════════════════════
   The plan strip under the stat tiles of a team and an organization: the level as a chip, its variant, the promotion,
   the seats in use, what the level carries, and the way to the plans. One column on a phone. */
.groups-plan-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ghostai-space-3, 12px) var(--ghostai-space-5, 24px);
    min-width: 0;
    padding: var(--ghostai-space-4, 16px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
}

.groups-plan-strip__head,
.groups-plan-strip__note,
.groups-plan-strip__promotion,
.groups-plan-strip__actions {
    grid-column: 1 / -1;
}

.groups-plan-strip__head,
.groups-plan-strip__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px);
    min-width: 0;
}

.groups-plan-strip__eyebrow,
.groups-plan-strip__benefits-title {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.groups-plan-strip__variant {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.groups-plan-strip__note,
.groups-plan-strip__promotion,
.groups-plan-strip__owner-note,
.groups-plan-note {
    margin: 0;
    color: var(--ghostai-color-text-secondary);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.groups-plan-strip__promotion {
    display: flex;
    align-items: flex-start;
    gap: var(--ghostai-space-2, 8px);
    color: var(--ghostai-color-text-primary);
}

.groups-plan-strip__benefits {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.groups-plan-strip__benefits ul {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1, 4px);
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.875rem;
}

.groups-plan-strip__seats {
    min-width: 0;
}

/* A sentence about the plan beside the list it explains, with the way to the plans. */
.groups-plan-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-1, 4px) var(--ghostai-space-3, 12px);
}

@media (max-width: 760px) {
    .groups-plan-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .groups-plan-strip__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .groups-plan-strip__actions .groups-plan-action__link {
        justify-content: center;
    }
}
/* ══ end #3429 ══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Reserve (stand-in) drivers: the "R" mark of a race a stand-in drove, with its words beside it where there is room. */
.competition-reserve-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-1);
    margin-inline-start: var(--ghostai-space-1);
    vertical-align: middle;
}

.competition-reserve-badge__text {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

/* The editor's reserve cell: the pick, the typed name and the driver's use stack, so the column stays narrow. */
.competition-results__reserve {
    min-width: 11rem;
}

.competition-results__reserve > * {
    display: block;
}

.competition-results__reserve > * + * {
    margin-top: var(--ghostai-space-1);
}

.competition-import__reserve {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2);
    margin-top: var(--ghostai-space-2);
}

.competition-reserve__stand-ins ul {
    display: grid;
    gap: var(--ghostai-space-2);
    margin: 0;
    padding-inline-start: 1.25rem;
}

.competition-reserve__stand-ins li {
    overflow-wrap: anywhere;
}

/* What the organizer reads under a driver in the entries: the game names and the reserve use, each on its own line. */
.competition-entry__game,
.competition-entry__reserve {
    display: block;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.competition-entry__game > span + span::before {
    content: " · ";
}

/* #3498 (G-DISCORD-GROUPS) — a group's own Discord channel (GroupDiscordChannelSection). */
.group-discord {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-4, 16px);
}

.group-discord-status {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
}

.group-discord-status__badges,
.group-discord-status__commands,
.group-discord-form__commands {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    align-items: center;
}

.group-discord-status__delivery,
.group-discord-export__lead,
.group-discord-form__note,
.group-discord-panel__note {
    margin: 0;
}

.group-discord-form__note,
.group-discord-panel__note,
.group-discord-status__channel {
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

.group-discord-status__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--ghostai-space-1, 4px) var(--ghostai-space-3, 12px);
    margin: 0;
}

.group-discord-status__facts dt {
    color: var(--ghostai-color-text-muted);
}

.group-discord-status__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.group-discord-status__channel {
    margin-left: var(--ghostai-space-2, 8px);
}

.group-discord-export {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
}

.group-discord-export__list {
    margin: 0;
    padding-left: 1.25rem;
}

.group-discord-panel {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    padding-top: var(--ghostai-space-3, 12px);
    border-top: 1px solid var(--ghostai-color-border);
}

@media (max-width: 640px) {
    .group-discord-status__facts {
        grid-template-columns: 1fr;
    }
}

/* #3498 T220 — calendar subscriptions (Team) and calendar sharing (Organization) on the Discord page. */
.group-calendar {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-4, 16px);
}

.group-calendar-destination,
.group-calendar-public,
.group-calendar-grants,
.group-calendar-subscribers {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
}

.group-calendar__heading,
.group-calendar-destination__lead {
    margin: 0;
}

.group-calendar-list {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.group-calendar-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    padding: var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
}

.group-calendar-list__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2, 8px);
    align-items: center;
}

.group-calendar-list__note,
.group-calendar-list__empty {
    margin: 0;
    color: var(--ghostai-color-text-muted);
    font-size: 0.8125rem;
}

/* #3646 — the danger zone of a series, a cycle or a whole group: closed until its owner opens it, a line of its own at
   the end of the page, one column on a phone (the counts wrap, the button keeps a 44px target). */
.group-danger-zone {
    box-sizing: border-box;
    width: 100%;
    margin-top: var(--ghostai-space-4, 16px);
    padding: var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-danger, #b3261e);
    border-radius: var(--ghostai-radius-md, 8px);
    max-width: 48rem;
    min-width: 0;
}

.group-danger-zone__summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--ghostai-color-danger, #b3261e);
}

.group-danger-zone__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ghostai-space-3, 12px);
    margin-top: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.group-danger-zone__counts {
    margin: 0;
    padding-left: var(--ghostai-space-4, 16px);
    overflow-wrap: anywhere;
}

.group-danger-zone__acknowledge {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2);
    min-height: 44px;
}

/* At 200 % zoom on a phone (a 195 px screen) the zone's own controls must not hold it open: the long button label
   wraps, the typed-name field shrinks with the column, a long series name breaks. */
.group-danger-zone__body > *,
.group-danger-zone__body input,
.group-danger-zone__body button {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.group-danger-zone__body input {
    width: 100%;
}

.group-danger-zone__body button {
    white-space: normal;
    height: auto;
    overflow-wrap: anywhere;
}

.group-danger-zone__body .tds-alert-message {
    overflow-wrap: anywhere;
}

/* The series / season page header (GroupSeriesHeader, the designer's handoff screens 05/06/12): the title row with the
   series mark and the page's actions, one row of status chips, and the "Edition:" row of season chips. Tokens only, so
   it reads in the GhostAI skins and in a group's skin alike. */
.series-header {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3);
    min-width: 0;
}

/* The page header has its own bottom margin; the rows of this block are spaced by the block's gap instead. */
.series-header .ghostai-page-header {
    margin-bottom: 0;
}

.series-header__chips,
.series-header__editions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2);
    min-width: 0;
}

/* A status chip with its (?) beside it. */
.series-header__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--tds-spacing-xs, 4px);
    min-width: 0;
    max-width: 100%;
}

/* ONE chip height for the whole header: the status badges and the season chips share the control height (a badge has
   none of its own), and on a touch device both take the touch target together. */
.series-header .tds-badge,
.series-header .tds-chip {
    box-sizing: border-box;
    min-height: var(--tds-input-height-md, 36px);
    max-width: 100%;
    justify-content: center;
    overflow-wrap: anywhere;
    text-decoration: none;
}

@media (pointer: coarse) {
    .series-header .tds-badge,
    .series-header .tds-chip {
        min-height: var(--ghostai-touch-target, 44px);
    }
}

.series-header__editions-label {
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* The seasons wrap onto more lines rather than widening the page (many seasons, a phone, 200 % zoom). */
.series-header__editions-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ghostai-space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.series-header__editions-list > li {
    min-width: 0;
    max-width: 100%;
}

/* The description of the series is the first thing in the Overview card now. */
.competition-edition__description {
    margin: 0 0 var(--ghostai-space-3, 12px);
    color: var(--ghostai-color-text-secondary);
    overflow-wrap: anywhere;
}

/* #3664 — the overview's division podiums: one tile per division, each a link to its table.

   The tiles are laid out by the width of the BLOCK, not the screen (the block's wrapper is a size container), and by
   the number of divisions (data-count on the wrapper), with no script:
     maxCols = how many tiles of at least 17rem fit (2 from 34.75rem, 3 from 52.5rem, 4 from 70.25rem, 5 from 88rem,
               6 from 105.75rem — each step is c * 17rem + (c - 1) gaps of 0.75rem); below 34.75rem it is 1;
     rows    = ceil(N / maxCols);   columns = ceil(N / rows)   (6 divisions: 3 + 3, never 4 + 2; 5: 3 + 2, never 4 + 1);
     N <= maxCols: the row keeps maxCols tracks, so one to a few tiles are as wide as a tile of a full row and are
     not stretched across the page.
   A short last row is left-aligned, so its tiles stand under those above. The rules below are generated for N = 1..12
   (CompetitionPodiumGridTests pins them against that formula); more divisions, or a browser without container
   queries, fall back to the auto-fill grid, whose columns change at the very same widths. */
.competition-podiums {
    container-type: inline-size;
    container-name: competition-podiums;
}

.competition-podiums__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    /* Every row as tall as the tallest tile, so a podium of fewer than three finishers is the same size. */
    grid-auto-rows: 1fr;
    gap: var(--ghostai-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.competition-podiums__grid > li {
    min-width: 0;
}

/* maxCols 2: container >= 34.75rem */
@container competition-podiums (min-width: 34.75rem) {
    .competition-podiums[data-count="1"] .competition-podiums__grid,
    .competition-podiums[data-count="2"] .competition-podiums__grid,
    .competition-podiums[data-count="3"] .competition-podiums__grid,
    .competition-podiums[data-count="4"] .competition-podiums__grid,
    .competition-podiums[data-count="5"] .competition-podiums__grid,
    .competition-podiums[data-count="6"] .competition-podiums__grid,
    .competition-podiums[data-count="7"] .competition-podiums__grid,
    .competition-podiums[data-count="8"] .competition-podiums__grid,
    .competition-podiums[data-count="9"] .competition-podiums__grid,
    .competition-podiums[data-count="10"] .competition-podiums__grid,
    .competition-podiums[data-count="11"] .competition-podiums__grid,
    .competition-podiums[data-count="12"] .competition-podiums__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* maxCols 3: container >= 52.5rem */
@container competition-podiums (min-width: 52.5rem) {
    .competition-podiums[data-count="4"] .competition-podiums__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .competition-podiums[data-count="1"] .competition-podiums__grid,
    .competition-podiums[data-count="2"] .competition-podiums__grid,
    .competition-podiums[data-count="3"] .competition-podiums__grid,
    .competition-podiums[data-count="5"] .competition-podiums__grid,
    .competition-podiums[data-count="6"] .competition-podiums__grid,
    .competition-podiums[data-count="7"] .competition-podiums__grid,
    .competition-podiums[data-count="8"] .competition-podiums__grid,
    .competition-podiums[data-count="9"] .competition-podiums__grid,
    .competition-podiums[data-count="10"] .competition-podiums__grid,
    .competition-podiums[data-count="11"] .competition-podiums__grid,
    .competition-podiums[data-count="12"] .competition-podiums__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* maxCols 4: container >= 70.25rem */
@container competition-podiums (min-width: 70.25rem) {
    .competition-podiums[data-count="5"] .competition-podiums__grid,
    .competition-podiums[data-count="6"] .competition-podiums__grid,
    .competition-podiums[data-count="9"] .competition-podiums__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .competition-podiums[data-count="1"] .competition-podiums__grid,
    .competition-podiums[data-count="2"] .competition-podiums__grid,
    .competition-podiums[data-count="3"] .competition-podiums__grid,
    .competition-podiums[data-count="4"] .competition-podiums__grid,
    .competition-podiums[data-count="7"] .competition-podiums__grid,
    .competition-podiums[data-count="8"] .competition-podiums__grid,
    .competition-podiums[data-count="10"] .competition-podiums__grid,
    .competition-podiums[data-count="11"] .competition-podiums__grid,
    .competition-podiums[data-count="12"] .competition-podiums__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* maxCols 5: container >= 88rem */
@container competition-podiums (min-width: 88rem) {
    .competition-podiums[data-count="6"] .competition-podiums__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .competition-podiums[data-count="7"] .competition-podiums__grid,
    .competition-podiums[data-count="8"] .competition-podiums__grid,
    .competition-podiums[data-count="11"] .competition-podiums__grid,
    .competition-podiums[data-count="12"] .competition-podiums__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .competition-podiums[data-count="1"] .competition-podiums__grid,
    .competition-podiums[data-count="2"] .competition-podiums__grid,
    .competition-podiums[data-count="3"] .competition-podiums__grid,
    .competition-podiums[data-count="4"] .competition-podiums__grid,
    .competition-podiums[data-count="5"] .competition-podiums__grid,
    .competition-podiums[data-count="9"] .competition-podiums__grid,
    .competition-podiums[data-count="10"] .competition-podiums__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* maxCols 6: container >= 105.75rem */
@container competition-podiums (min-width: 105.75rem) {
    .competition-podiums[data-count="7"] .competition-podiums__grid,
    .competition-podiums[data-count="8"] .competition-podiums__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .competition-podiums[data-count="9"] .competition-podiums__grid,
    .competition-podiums[data-count="10"] .competition-podiums__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .competition-podiums[data-count="1"] .competition-podiums__grid,
    .competition-podiums[data-count="2"] .competition-podiums__grid,
    .competition-podiums[data-count="3"] .competition-podiums__grid,
    .competition-podiums[data-count="4"] .competition-podiums__grid,
    .competition-podiums[data-count="5"] .competition-podiums__grid,
    .competition-podiums[data-count="6"] .competition-podiums__grid,
    .competition-podiums[data-count="11"] .competition-podiums__grid,
    .competition-podiums[data-count="12"] .competition-podiums__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.competition-podiums__tile {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2);
    box-sizing: border-box;
    height: 100%;
    min-width: 0;
    padding: var(--ghostai-space-3);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    text-decoration: none;
}

.competition-podiums__tile:hover,
.competition-podiums__tile:focus-visible {
    border-color: var(--ghostai-color-accent);
}

.competition-podiums__tile:focus-visible {
    box-shadow: var(--ghostai-shadow-focus);
    outline: none;
}

/* The heading row is one height whether it holds a division's logo plate or its name, so tiles with and without a
   plate line up. The plate (DivisionBadge --large) is a fixed 1.875rem tall, left-aligned, as wide as its own
   proportions make it and never wider than the tile; it is shown as it is (its own colours, uncropped). */
.competition-podiums__division {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 1.875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.competition-podiums__division .division-badge--large .division-badge__logo {
    width: auto;
    max-width: 100%;
    height: 1.875rem;
    max-height: 1.875rem;
    object-fit: contain;
    object-position: left center;
}

.competition-podiums__rows {
    display: grid;
    gap: var(--ghostai-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.competition-podiums__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ghostai-space-2);
    min-width: 0;
}

/* A long nickname is cut with an ellipsis (its full text is the title); the points stay on one line at the right. */
.competition-podiums__driver {
    min-width: 0;
}

.competition-podiums__driver .competition-driver-typed,
.competition-podiums__driver .competition-driver-typed__name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.competition-podiums__place,
.competition-podiums__points {
    font-family: var(--ghostai-font-numeric);
    font-variant-numeric: tabular-nums;
    color: var(--ghostai-color-text-secondary);
}

.competition-podiums__points {
    text-align: right;
    white-space: nowrap;
}

/* #3664 — the qualifying results in a native dialog on the overview. */
.competition-qualifying-dialog {
    margin: var(--ghostai-space-3) 0;
}

.competition-qualifying-dialog__dialog {
    width: min(40rem, calc(100vw - 2 * var(--ghostai-space-4)));
    max-height: calc(100vh - 2 * var(--ghostai-space-4));
    padding: var(--ghostai-space-4);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md);
    background: var(--ghostai-color-surface);
    color: var(--ghostai-color-text-primary);
    box-shadow: var(--ghostai-shadow-md);
}

.competition-qualifying-dialog__dialog::backdrop {
    background: var(--ghostai-color-bg);
    opacity: 0.7;
}

.competition-qualifying-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ghostai-space-2);
}

.competition-qualifying-dialog__close {
    min-width: var(--ghostai-touch-target);
    min-height: var(--ghostai-touch-target);
}

/* #3664 — an event's cars: three names, then "…" with every car in a popover (hover, focus and tap). */
.group-car-names__more {
    position: relative;
    display: inline-block;
}

.group-car-names__toggle {
    min-width: var(--ghostai-touch-target);
    min-height: var(--ghostai-touch-target);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-sm);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    cursor: pointer;
}

.group-car-names__toggle:focus-visible {
    box-shadow: var(--ghostai-shadow-focus);
    outline: none;
}

.group-car-names__popover {
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 0;
    display: none;
    min-width: 14rem;
    padding: var(--ghostai-space-2) var(--ghostai-space-3);
    border: 1px solid var(--ghostai-color-border-strong);
    border-radius: var(--ghostai-radius-sm);
    background: var(--ghostai-color-surface);
    color: var(--ghostai-color-text-primary);
    box-shadow: var(--ghostai-shadow-md);
}

.group-car-names__popover ul {
    margin: var(--ghostai-space-1) 0 0;
    padding-left: var(--ghostai-space-4);
}

.group-car-names__popover-title {
    color: var(--ghostai-color-text-muted);
}

.group-car-names__more:hover .group-car-names__popover,
.group-car-names__more:focus-within .group-car-names__popover,
.group-car-names__more.is-open .group-car-names__popover {
    display: block;
}

/* ---------------------------------------------------------------------------------------------------------------
   BROADCAST (#3700) — a live standings board for a stream overlay, and the organizer's panel that configures it.
   Owner, 2026-10-16: the board looks exactly like the standings graphic, because it IS that picture (see below).
   --------------------------------------------------------------------------------------------------------------- */
.broadcast-overlay {
    min-height: 100vh;
}

.broadcast-overlay__reconnect {
    display: none !important;
}

/* The board is the standings picture itself (CompetitionStandingsSvg, the renderer of the downloadable graphic): an SVG
   in the page, scaled to the viewport with its 16:9 proportions kept, so the same board reads at 1920x1080 and at
   3840x2160. Its colours are inside the picture (the Classic palette or the league skin), never the site theme's. */
.broadcast-board {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: #f5f7fa;
}

.broadcast-board--dark {
    background: #0b0f17;
}

.broadcast-board--transparent {
    background: transparent;
}

.broadcast-board .standings-sheet {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100vh;
}

.broadcast-board--preview {
    min-height: 0;
    border-radius: var(--ghostai-radius-md, 8px);
}

.broadcast-board--preview .standings-sheet {
    max-height: none;
}

.broadcast-board--transparent.broadcast-board--preview {
    /* A checkerboard behind the preview shows what "transparent" will let through. */
    background: repeating-conic-gradient(#2b303b 0 25%, #1b1f27 0 50%) 50% / 24px 24px;
}

.broadcast-board--message {
    padding: 1em 1.4em;
    font-size: clamp(16px, 2vw, 80px);
    line-height: 1.25;
    text-align: center;
}

/* ---------------------------------------------------------------------------------------------------------------
   SHARE-TOOL - the standings graphic and the live broadcast link in one tool (replaces the two panels). Chrome only
   uses the design tokens, so inside a league skin it wears the skin; the two OUTPUTS (graphic, board) wear the colour
   scheme chosen in the tool and are drawn by CompetitionStandingsSvg in CompetitionSharePalette colours.
   Layout: configuration left, preview right from 1100 px (the preview stays in view while the form scrolls); stacked
   below that, configuration first. Every control is one height (--tds-input-height-md).
   --------------------------------------------------------------------------------------------------------------- */
.share-tool {
    --share-control: var(--tds-input-height-md, 40px);
    margin: var(--ghostai-space-6, 24px) 0;
}

.share-tool__root {
    display: grid;
    gap: var(--ghostai-space-4, 16px);
    min-width: 0;
}

.share-tool__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ghostai-space-3, 12px);
}

.share-tool__title {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    color: var(--ghostai-color-text-primary);
}

.share-tool__title .groups-card-heading {
    margin: 0;
}

.share-tool__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ghostai-space-5, 20px);
    min-width: 0;
}

.share-tool__config {
    display: grid;
    gap: var(--ghostai-space-4, 16px);
    min-width: 0;
    align-content: start;
}

.share-tool__stage {
    display: grid;
    gap: var(--ghostai-space-3, 12px);
    align-content: start;
    min-width: 0;
    padding: var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-lg, 12px);
    background: var(--ghostai-color-bg, transparent);
}

@media (min-width: 1100px) {
    .share-tool__body {
        grid-template-columns: minmax(22rem, 5fr) minmax(0, 7fr);
        align-items: start;
    }

    .share-tool__stage {
        position: sticky;
        top: calc(var(--ghostai-shell-header-height, 64px) + var(--ghostai-space-3, 12px));
    }
}

.share-tool__stage-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ghostai-space-2, 8px);
    min-height: var(--share-control);
}

.share-tool__stage-title,
.share-tool__section-title {
    margin: 0;
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.share-tool__pages {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

/* A framed stage: the output is shown at the width it will be used at, never cropped by the page. */
.share-tool__frame {
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
}

.share-tool__frame--board {
    overflow-x: auto;
}

/* A checkerboard behind a board shows what a transparent background will let through. */
.share-tool__frame.is-checkerboard {
    background: repeating-conic-gradient(#2b303b 0 25%, #1b1f27 0 50%) 50% / 24px 24px;
}

.share-tool__graphic-image {
    display: block;
    width: 100%;
    height: auto;
}

.share-tool__graphic,
.share-tool__link-stage {
    display: grid;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.share-tool__group {
    display: grid;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
    margin: 0;
    padding: var(--ghostai-space-3, 12px) var(--ghostai-space-4, 16px) var(--ghostai-space-4, 16px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
}

.share-tool__group > legend {
    padding: 0 var(--ghostai-space-2, 8px);
    color: var(--ghostai-color-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.share-tool__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ghostai-space-1, 4px);
    min-width: 0;
}

/* One column that never grows past the card (an `auto` track takes the widest chip's min-content width). */
.share-tool__group {
    grid-template-columns: minmax(0, 1fr);
}

.share-tool__field--narrow {
    max-width: 16rem;
}

.share-tool__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ghostai-space-3, 12px) var(--ghostai-space-4, 16px);
}

.share-tool__inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.share-tool__label {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-1, 4px);
    color: var(--ghostai-color-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.share-tool__unit {
    color: var(--ghostai-color-text-muted);
}

.share-tool__control {
    box-sizing: border-box;
    width: 100%;
    height: var(--share-control);
}

.share-tool__number {
    width: 6rem;
}

.share-tool__glyph {
    flex: none;
    width: 1.15em;
    height: 1.15em;
}

.share-tool__empty .share-tool__glyph {
    width: 1.6em;
    height: 1.6em;
}

.share-tool__control:disabled {
    opacity: 0.55;
}

.share-tool__url {
    font-family: var(--ghostai-font-technical);
}

.share-tool__invalid {
    color: var(--ghostai-color-danger, #e5484d);
    font-size: 0.85rem;
}

.share-tool__check {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    max-width: 100%;
    min-height: var(--share-control);
}

/* Why an option is off, written under it (not only a tooltip, which a touch screen never shows). */
.share-tool__hint {
    margin: 0;
    font-size: var(--ghostai-font-size-sm, 0.875rem);
}

/* A division chip with a logo: the logo alone, as tall as the chip allows (the chip keeps its height). */
.share-chip--division .division-badge__logo {
    height: 1.5rem;
    max-height: 1.5rem;
    max-width: 8rem;
}

/* At 200 % zoom on a phone the words wrap and the (?) drops under them instead of leaving the card. */
.share-tool__check > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.share-tool__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

/* Segmented control: two or three exclusive choices, one pill. */
.share-seg {
    display: inline-flex;
    align-items: stretch;
    box-sizing: border-box;
    height: var(--share-control);
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-pill, 999px);
    background: var(--ghostai-color-surface-2);
}

.share-seg__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-1, 4px);
    padding: 0 var(--ghostai-space-4, 16px);
    border: 1px solid transparent;
    border-radius: var(--ghostai-radius-pill, 999px);
    background: transparent;
    color: var(--ghostai-color-text-secondary);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.share-seg__btn:hover:not(:disabled) {
    color: var(--ghostai-color-text-primary);
}

.share-seg__btn[aria-pressed="true"] {
    border-color: var(--tds-accent-border, var(--ghostai-color-accent));
    background: var(--tds-accent-subtle, var(--ghostai-color-surface));
    color: var(--tds-accent-text, var(--ghostai-color-text-primary));
}

.share-seg__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.share-seg__btn:focus-visible,
.share-chip:focus-visible,
.share-chip__btn:focus-visible {
    outline: none;
    box-shadow: var(--ghostai-shadow-focus);
}

/* Chips: a division, a column, a branding switch. */
.share-tool .share-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.share-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ghostai-space-1, 4px);
    box-sizing: border-box;
    height: var(--share-control);
    padding: 0 var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-pill, 999px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-secondary);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.share-chip[aria-pressed="true"],
.share-chip--toggle:has(input:checked),
.share-chip--shown {
    border-color: var(--tds-accent-border, var(--ghostai-color-accent));
    background: var(--tds-accent-subtle, var(--ghostai-color-surface));
    color: var(--tds-accent-text, var(--ghostai-color-text-primary));
}

.share-chip--shown {
    cursor: default;
    padding-right: var(--ghostai-space-1, 4px);
}

/* On a phone (or at 200 % zoom) a shown column - name plus three buttons - is wider than the field: the chip may
   not be wider than its list, so its name wraps and the buttons drop under it instead of leaving the screen. */
.share-tool .share-chips {
    min-width: 0;
}

.share-chip {
    max-width: 100%;
    height: auto;
    min-height: var(--share-control);
    white-space: normal;
    text-align: left;
}

.share-chip--shown {
    flex-wrap: wrap;
}

.share-tool .share-chips > li {
    min-width: 0;
    max-width: 100%;
}

.share-chip--add {
    border-style: dashed;
}

.share-chip.is-link-only {
    opacity: 0.55;
    border-style: dashed;
}

.share-chip--toggle input {
    accent-color: var(--ghostai-color-accent);
}

.share-chip__name {
    padding-right: var(--ghostai-space-1, 4px);
}

.share-chip__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--ghostai-radius-pill, 999px);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.share-chip__btn:hover:not(:disabled) {
    background: var(--ghostai-color-surface);
}

.share-chip__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* The links already made: a compact card each, and an empty state that is an icon, one line and one action. */
.share-tool__boards {
    display: grid;
    gap: var(--ghostai-space-2, 8px);
}

.share-tool__board-list {
    display: grid;
    gap: var(--ghostai-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.share-tool__board {
    display: grid;
    gap: var(--ghostai-space-1, 4px);
    padding: var(--ghostai-space-3, 12px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
}

.share-tool__board.is-editing {
    border-color: var(--tds-accent-border, var(--ghostai-color-accent));
}

.share-tool__board-head,
.share-tool__board-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
}

.share-tool__board-meta {
    overflow-wrap: anywhere;
}

.share-tool__empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ghostai-space-3, 12px);
    padding: var(--ghostai-space-5, 20px);
    border: 1px dashed var(--ghostai-color-border-strong, var(--ghostai-color-border));
    border-radius: var(--ghostai-radius-md, 8px);
    color: var(--ghostai-color-text-secondary);
    text-align: center;
}

.share-tool__link {
    display: grid;
    gap: var(--ghostai-space-2, 8px);
    padding: var(--ghostai-space-3, 12px);
    border: 1px solid var(--tds-accent-border, var(--ghostai-color-accent));
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
}

.share-tool__logos {
    margin-top: var(--ghostai-space-2, 8px);
}

/* A phone: tighter groups, and a segmented control that fills its row and wraps rather than running off the card. */
@media (max-width: 640px) {
    .share-tool__group {
        padding: var(--ghostai-space-2, 8px) var(--ghostai-space-3, 12px) var(--ghostai-space-3, 12px);
    }

    .share-seg {
        width: 100%;
        height: auto;
        min-height: var(--share-control);
        flex-wrap: wrap;
        border-radius: var(--ghostai-radius-md, 8px);
    }

    .share-seg__btn {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
        min-height: calc(var(--share-control) - 8px);
        padding: 0 var(--ghostai-space-3, 12px);
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    /* The tool sits in a card in a card: the inner card gives its padding back so the controls keep the width. */
    .share-tool.ghostai-card {
        padding: var(--ghostai-space-3, 12px);
    }

    .share-tool__label {
        flex-wrap: wrap;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .share-tool__logos {
        min-width: 0;
        max-width: 100%;
    }

    .share-tool__head .share-seg {
        width: auto;
    }

    .share-tool__field--narrow {
        max-width: none;
    }
}

/* ── A calendar round's line says what happened (a finished round is closed): title · event · days · state · divisions ──
   It wraps instead of overflowing (390 px); the state chip is a control-height chip like every chip of the product
   (design guideline: one height, --tds-input-height-md), and the (?) beside it explains how the state is worked out. */
.competition-calendar__round-summary > * {
    min-width: 0;
}

.competition-calendar__round-event {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.competition-calendar__round-dates,
.competition-calendar__round-divisions {
    white-space: normal;
}

.competition-calendar__round-state {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ghostai-space-1, 4px);
    max-width: 100%;
}

.competition-calendar__round-state .tds-badge {
    min-height: var(--tds-input-height-md, 40px);
    box-sizing: border-box;
    /* "Raced · results provisional" is longer than a phone at 200 % zoom: it wraps inside the chip. */
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* A link to a round (?round=3) brings its line to the top, clear of the shell's sticky header. */
.competition-calendar__round {
    scroll-margin-top: calc(var(--ghostai-shell-header-height, 64px) + var(--ghostai-space-4, 1rem));
}

/* ── Driver collector card (ADR-2026-10-14) ──────────────────────────────────────────────────────────────────────
   One SVG drawn by DriverCardSvg.razor. Every colour below is a token of the page scope — the skin of the address
   (a series' or a group's palette) or GhostAI's own — so dark and light and every series come from where the card is
   drawn. The only per-card colour is the driver's own accent (--driver-card-accent, gated by the server), used on the
   window's corner marks and the driver's emblem. No literal colour, no layout metric a series could change. */
.driver-card-svg-wrap {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.driver-card-svg {
    display: block;
    width: 100%;
    max-width: 24rem;
    height: auto;
    overflow: visible;
    font-family: inherit;
}

.driver-card-svg__stop-strong { stop-color: var(--ghostai-color-border-strong); }
.driver-card-svg__stop-soft { stop-color: var(--ghostai-color-border); }
.driver-card-svg__stop-raised { stop-color: var(--ghostai-color-surface-2); }
.driver-card-svg__stop-ground { stop-color: var(--ghostai-color-bg); }

.driver-card-svg__frame-inner,
.driver-card-svg__rule {
    fill: none;
    stroke: var(--ghostai-color-border);
    stroke-width: 1;
}

.driver-card-svg__bar,
.driver-card-svg__plate-bar { fill: var(--ghostai-color-primary); }

.driver-card-svg__rule-primary,
.driver-card-svg__ring {
    fill: none;
    stroke: var(--ghostai-color-primary);
    stroke-width: 2;
}

.driver-card-svg__ring {
    stroke: var(--driver-card-accent, var(--ghostai-color-primary));
    stroke-width: 3;
}

.driver-card-svg__title {
    fill: var(--ghostai-color-text-primary);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
}

.driver-card-svg__window { fill: var(--ghostai-color-surface-2); }
.driver-card-svg__scrim { fill: var(--ghostai-color-bg); opacity: 0.55; }

.driver-card-svg__window-edge {
    fill: none;
    stroke: var(--ghostai-color-border-strong);
    stroke-width: 2;
}

.driver-card-svg__initials {
    fill: var(--ghostai-color-primary);
    font-size: 84px;
    font-weight: 800;
    opacity: 0.8;
}

.driver-card-svg__tagline {
    fill: var(--ghostai-color-text-primary);
    font-size: 11px;
    font-style: italic;
}

.driver-card-svg__emblem {
    fill: var(--ghostai-color-surface);
    stroke: var(--driver-card-accent, var(--ghostai-color-accent));
    stroke-width: 2;
}

.driver-card-svg__badge { fill: var(--ghostai-color-primary); }

.driver-card-svg__badge-text {
    fill: var(--tds-text-on-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.driver-card-svg__plate {
    fill: var(--ghostai-color-surface);
    stroke: var(--ghostai-color-border);
    stroke-width: 1.2;
}

.driver-card-svg__label {
    fill: var(--ghostai-color-text-muted);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.driver-card-svg__value {
    fill: var(--ghostai-color-text-primary);
    font-weight: 800;
}

.driver-card-svg__value--empty { fill: var(--ghostai-color-text-muted); }

.driver-card-svg__detail {
    fill: var(--ghostai-color-text-secondary);
    font-size: 10px;
}

.driver-card-svg__icon {
    fill: none;
    stroke: var(--ghostai-color-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.driver-card-svg__season {
    fill: var(--ghostai-color-text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.4px;
}

.driver-card-svg__source {
    fill: var(--ghostai-color-text-muted);
    font-size: 7.5px;
}

.driver-card-svg__mark {
    fill: var(--ghostai-color-surface-2);
    stroke: var(--ghostai-color-primary);
}

.driver-card-svg__mark-eye { fill: var(--ghostai-color-text-primary); }

/* The collector card sits above the card's table of results and, on its own page, above the series' editions. */
.driver-collector {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-2, 8px);
    min-width: 0;
}

.driver-collector__note {
    margin: 0;
    text-align: center;
}
/* ── The driver card configuration (ADR-2026-10-14): a list of slots to turn on, off and order, and a preview. Tokens only. */
.driver-card-config {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    margin-top: var(--ghostai-space-6, 24px);
    min-width: 0;
}

.driver-card-config__title { margin: 0; }
.driver-card-config__intro { margin: 0; }

.driver-card-config__layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--ghostai-space-4, 16px) var(--ghostai-space-6, 24px);
    align-items: start;
    min-width: 0;
}

.driver-card-config__form,
.driver-card-config__preview {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-3, 12px);
    min-width: 0;
}

.driver-card-config__mode {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1, 4px);
}

.driver-card-config__mode select {
    min-height: var(--ghostai-touch-target, 44px);
    padding-inline: var(--ghostai-space-2, 8px);
    border: 1px solid var(--ghostai-color-border-strong);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface);
    color: var(--ghostai-color-text-primary);
    font: inherit;
}

.driver-card-config__list {
    display: flex;
    flex-direction: column;
    gap: var(--ghostai-space-1, 4px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.driver-card-config__item {
    display: flex;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-height: var(--ghostai-touch-target, 44px);
    padding-inline: var(--ghostai-space-2, 8px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface);
}

.driver-card-config__item--off {
    background: transparent;
    color: var(--ghostai-color-text-muted);
}

.driver-card-config__check {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--ghostai-space-2, 8px);
    min-height: var(--ghostai-touch-target, 44px);
    cursor: pointer;
}

.driver-card-config__move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ghostai-touch-target, 44px);
    height: var(--ghostai-touch-target, 44px);
    border: 1px solid var(--ghostai-color-border);
    border-radius: var(--ghostai-radius-md, 8px);
    background: var(--ghostai-color-surface-2);
    color: var(--ghostai-color-text-primary);
    cursor: pointer;
}

.driver-card-config__move:disabled {
    opacity: 0.4;
    cursor: default;
}

.driver-card-config__move:focus-visible,
.driver-card-config__mode select:focus-visible {
    outline: 2px solid var(--ghostai-color-accent);
    outline-offset: 2px;
}

.driver-card-config__status { margin: 0; min-height: 1.5em; }
.driver-card-config__preview-note { margin: 0; }

/* ONE GRAPHIC (issue 4006) — the public standings page of a division: the share tool's graphic, page after page, at the width of the
   page and never wider (phone and desktop alike), with the division links above it. */
.public-standings__divisions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.public-standings__division-link {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--ghostai-color-border);
    border-radius: 999px;
    text-decoration: none;
}

.public-standings__division-link[aria-current="page"] {
    font-weight: 700;
    border-color: var(--ghostai-color-accent);
}

.public-standings__sheets {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.public-standings__sheet {
    display: block;
    width: 100%;
    max-width: 1600px;
    height: auto;
    border-radius: 12px;
}

.public-standings__actions {
    margin: 1rem 0 0;
}

/* T2008 — the links to each round's official result under the standings: one wrapping row, a phone included. */
.public-standings__rounds {
    align-items: center;
    margin: 1rem 0 0;
}

.public-standings__rounds-label {
    font-weight: 600;
}

.competition-standings__public-link {
    margin: 0.5rem 0 0;
}

/* Issue 4544 — under a public division's table: its PNG (visitors' default template) and its link; a manager's way to the
   "Szablony grafik" section. */
.competition-standings__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tds-spacing-xs);
    margin: var(--tds-spacing-xs) 0 0;
}

/* The PNG is a download link drawn as the secondary button beside it. */
.competition-standings__share-png {
    display: inline-flex;
    align-items: center;
    min-height: var(--tds-input-height-md);
    padding: 0 var(--tds-spacing-md);
    border: 1px solid var(--tds-border-default);
    border-radius: var(--tds-radius-md);
    background: var(--tds-bg-surface);
    color: var(--tds-text-secondary);
    font-weight: 500;
    text-decoration: none;
}

.competition-standings__share-png:hover {
    background: var(--tds-bg-input-hover);
}

.competition-standings__templates {
    margin: var(--tds-spacing-sm) 0 0;
}

.discord-results-template {
    margin: var(--tds-spacing-sm) 0;
}

/* Issue 4539: preview of the Discord results post: the post keeps its line breaks, but a long line ("**GTSC Sezon 5 — wyniki
   rundy 3 (Monza)** · *TYMCZASOWE*") wraps inside the card as Discord wraps it. A bare <pre> did not wrap and pushed the
   Series edit page and the Team's Discord page ~200 px past a 390 px phone (web smoke, 2026-11-08). */
.discord-results-preview__message {
    max-width: 100%;
    margin: var(--tds-spacing-sm) 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Issue 4535 — the results entry: stepper, OCR progress, review-first table without horizontal scroll at desktop width,
   row actions and their proposal popover. */
.competition-import__stepper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tds-spacing-xs);
    list-style: none;
    margin: 0 0 var(--tds-spacing-md);
    padding: 0;
}

.competition-import__stepper li {
    border: 1px solid var(--tds-accent-border);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    color: var(--tds-text-label);
}

.competition-import__stepper li.is-current {
    border-color: var(--tds-accent-text);
    color: var(--tds-color-text);
    font-weight: 600;
}

.competition-import__stepper li.is-done {
    color: var(--tds-color-text);
}

.competition-import__step-number {
    font-variant-numeric: tabular-nums;
}

.competition-import__progress {
    display: flex;
    align-items: center;
    gap: var(--tds-spacing-xs);
}

.competition-import__source img {
    max-height: 240px;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .competition-import .competition-table-scroll {
        overflow-x: visible;
    }

    .competition-import__lines {
        table-layout: auto;
        width: 100%;
    }

    .competition-import__lines .tds-field-input {
        min-width: 0;
        width: 100%;
    }
}

.competition-import__sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--ghostai-color-surface);
}

.competition-import__row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--tds-spacing-xs);
}

.competition-import__popover {
    border: 1px solid var(--tds-accent-text);
    border-radius: 8px;
    padding: var(--tds-spacing-md);
    margin-top: var(--tds-spacing-xs);
    background: var(--tds-accent-subtle);
}

.competition-import__remember {
    display: flex;
    align-items: center;
    gap: var(--tds-spacing-xs);
}