/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Minimal overrides for MudBlazor layout */
#blazor-error-ui[b-vty9sjjl6n] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    padding-left: calc(1.25rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1.25rem + env(safe-area-inset-right, 0px));
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-vty9sjjl6n] {
    cursor: pointer;
    position: absolute;
    right: calc(0.75rem + env(safe-area-inset-right, 0px));
    top: 0.5rem;
}

.app-drawer-content[b-vty9sjjl6n] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.app-drawer-nav[b-vty9sjjl6n] {
    flex: 1;
    overflow-y: auto;
}

.app-drawer-version[b-vty9sjjl6n] {
    padding: 0.75rem 0.5rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}
/* /Components/Pages/Gameday.razor.rz.scp.css */
.gameday-pull-to-refresh[b-vubpqjjf3g] {
    --gameday-pull-distance: 0px;
    position: relative;
}

.gameday-pull-indicator[b-vubpqjjf3g] {
    display: none;
}

.gameday-page-title[b-vubpqjjf3g] {
    flex-shrink: 0;
    white-space: nowrap;
}

.gameday-refresh-status[b-vubpqjjf3g] {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    align-items: center;
    justify-content: center;
}

.gameday-refresh-complete[b-vubpqjjf3g] {
    animation: gameday-refresh-complete-b-vubpqjjf3g 3s ease-out;
}

@keyframes gameday-refresh-complete-b-vubpqjjf3g {
    0% {
        opacity: 0;
        transform: scale(0.65);
    }

    15% {
        opacity: 1;
        transform: scale(1.15);
    }

    25% {
        transform: scale(1);
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 767.98px) and (pointer: coarse) {
    .gameday-pull-indicator[b-vubpqjjf3g] {
        position: fixed;
        z-index: 1200;
        top: calc(68px + env(safe-area-inset-top, 0px));
        left: 50%;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 0.75rem;
        border-radius: 999px;
        color: var(--mud-palette-text-primary);
        background: var(--mud-palette-surface);
        box-shadow: var(--mud-elevation-4);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, calc(-100% + var(--gameday-pull-distance)));
        transition: opacity 120ms ease, transform 120ms ease;
    }

    .gameday-pull-to-refresh[data-pull-state] .gameday-pull-indicator[b-vubpqjjf3g] {
        opacity: 1;
    }

    .gameday-pull-to-refresh[data-pull-state="ready"] .gameday-pull-icon[b-vubpqjjf3g] {
        transform: rotate(180deg);
    }

    .gameday-pull-to-refresh[data-pull-state="refreshing"] .gameday-pull-icon[b-vubpqjjf3g] {
        animation: gameday-pull-spin-b-vubpqjjf3g 800ms linear infinite;
    }

    .gameday-pull-icon[b-vubpqjjf3g] {
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        transition: transform 150ms ease;
    }

    .gameday-pull-label[b-vubpqjjf3g] {
        display: none;
        white-space: nowrap;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .gameday-pull-to-refresh[data-pull-state="pulling"] .gameday-pull-label-pull[b-vubpqjjf3g],
    .gameday-pull-to-refresh[data-pull-state="ready"] .gameday-pull-label-release[b-vubpqjjf3g],
    .gameday-pull-to-refresh[data-pull-state="refreshing"] .gameday-pull-label-refreshing[b-vubpqjjf3g] {
        display: inline;
    }
}

@keyframes gameday-pull-spin-b-vubpqjjf3g {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Picks/PicksDragHandle.razor.rz.scp.css */
.drag-handle[b-x6gmmgi6fs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: grab;
    touch-action: none; /* a touch that starts on the handle drags instead of scrolling the page */
    user-select: none;
    -webkit-user-select: none;
}

/* Opt-in (OffsetIntoHeaderPadding): tuned to the pick card header's pa-3, so the 40px target sits in the padding. */
.drag-handle.drag-handle-offset[b-x6gmmgi6fs] {
    margin: -8px 0 -8px -8px;
}

@media (hover: hover) {
    .drag-handle:hover[b-x6gmmgi6fs] {
        background: var(--mud-palette-action-default-hover);
    }
}

.drag-handle:active[b-x6gmmgi6fs] {
    cursor: grabbing;
}

.drag-handle:focus-visible[b-x6gmmgi6fs] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 1px;
}
/* /Components/Picks/PicksGameCard.razor.rz.scp.css */
.game-header[b-wa0i190afh] {
    background: var(--mud-palette-background-grey);
}

/* The pinned (started) header's lock, in the same slot the drag handle would occupy. */
.pick-card-locked[b-wa0i190afh] {
    display: flex;
    align-items: center;
}

/* Visually hidden, same pattern as PicksGameRow's .pick-row-sr-only: announced to screen readers only. */
.pick-card-sr-only[b-wa0i190afh] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.game-header-right[b-wa0i190afh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* The value the page is sorted by (O/U or spread) is emphasised: bold plus a primary outline (not colour alone). Text colour is
   untouched, so contrast is unchanged; only the outline (an inset box-shadow, no layout change) and the weight differ.
   The chips are MudChip / PicksTeamButton markup, not this component's own, so the rule reaches them with ::deep from the two
   elements of this component that contain them: the header's chip row (O/U chip) and the card body (the team buttons' spread chips). */
.pick-chip-row[b-wa0i190afh]  .mud-chip.sort-active,
.pick-card-body[b-wa0i190afh]  .mud-chip.sort-active {
    font-weight: 700;
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

/* The two team buttons sit side by side (away left, home right) with a small "@" between them, instead of stacked full-width, which
   saves roughly a sixth of the card's height on a phone. The button's own look (border, hover, selected, focus ring) stays in
   PicksTeamButton; only their arrangement is decided here, reaching into that component's markup with ::deep.
   - The column gap (6px) is wider than the focus ring (3px outline + 1px offset = 4px), so a focused button's ring is not clipped
     by, or painted over, its neighbour or the "@". The card body's own padding covers the outer edges.
   - The grid is capped and centred so that on a wide screen the buttons do not stretch into two enormous, mostly empty tiles.
   - Grid items stretch, so both buttons in a row are the same height even when only one name wraps. */
.pick-team-grid[b-wa0i190afh] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 6px;
    max-width: 480px;
    margin-inline: auto;
}

/* Decorative separator ("X at Y" is already the group's aria-label), so it stays small and out of the way. */
.pick-team-at[b-wa0i190afh] {
    align-self: center;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    user-select: none;
}

/* !important only where it must beat a MudBlazor utility class the button carries (mb-2 / pa-3, whose values are !important);
   everything else wins on specificity (a scoped ancestor plus class beats the utilities and the button's global rules). */
.pick-team-grid[b-wa0i190afh]  .team-pick-btn {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0 !important;
    padding: 8px 6px !important;
}

/* Logo on top, then the name, then the spread chip, all centred. The name block takes the spare height (its own content centred),
   so when the two names wrap differently the logos still line up at the top and the chips at the bottom. */
.pick-team-grid[b-wa0i190afh]  .team-pick-content {
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

/* MudBlazor gives every .mud-chip margin: 4px, meant for chips sitting in a row. Here the chip is the last item of the column flex
   above, where that margin only adds 8px of dead height per button (the flex gap already spaces it). Three classes plus the scope
   attribute beat MudBlazor's single-class rule on specificity, so no !important is needed; it sets margin only, so the
   .sort-active bold and outline (above) are untouched. */
.pick-team-grid[b-wa0i190afh]  .team-pick-content .mud-chip {
    margin: 0;
}

.pick-team-grid[b-wa0i190afh]  .team-pick-text {
    align-items: center;
    justify-content: center;
}

.pick-team-grid[b-wa0i190afh]  .team-pick-name {
    font-size: 0.85rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.pick-date-short[b-wa0i190afh] {
    display: none;
}

/* Narrow phones: short date, and the O/U and points chips share one row, so the header is a single compact line. */
@media (max-width: 420px) {
    .pick-date-full[b-wa0i190afh] {
        display: none;
    }

    .pick-date-short[b-wa0i190afh] {
        display: inline;
    }

    /* .local-time is the LocalTime component's own span, hence ::deep */
    .pick-card-header[b-wa0i190afh]  .local-time {
        white-space: nowrap;
    }

    .pick-chip-row[b-wa0i190afh] {
        flex-wrap: nowrap;
    }
}

@media (max-width: 359px) {
    .pick-chip-row[b-wa0i190afh] {
        flex-wrap: wrap;
    }
}
/* /Components/Picks/PicksGameRow.razor.rz.scp.css */
/* One line, about 52px: a 40px points chip plus 6px of padding above and below. No horizontal padding beyond 4px, so at 375px the
   content is about 303px and each team chip gets roughly 108px (81px at 320px). The paper look comes from the mud-paper classes on
   the root; only the arrangement is decided here. */
.pick-row[b-yd7f234ghh] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    padding: 6px 4px;
    margin-bottom: 4px;
    box-sizing: border-box;
    border-radius: 8px;
    position: relative; /* anchors the visually hidden text */
}

/* The handle slot. 36px, but a pinned row's lock + day/time may grow it a few px (the chips give way, they can shrink). */
.pick-row-lead[b-yd7f234ghh] {
    flex: none;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* PicksDragHandle is 40px in its own scoped CSS; the compact row wants 36px. Its root belongs to that component, so ::deep. */
.pick-row-lead[b-yd7f234ghh]  .drag-handle {
    width: 36px;
    height: 36px;
}

.pick-row-locked[b-yd7f234ghh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.pick-row-time[b-yd7f234ghh] {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* .local-time is the LocalTime component's own span, hence ::deep */
.pick-row-time[b-yd7f234ghh]  .local-time {
    white-space: nowrap;
}

/* Announced by screen readers, not shown. */
.pick-row-sr-only[b-yd7f234ghh] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pick-row-teams[b-yd7f234ghh] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 4px;
}

.pick-row-points[b-yd7f234ghh] {
    flex: none;
}

/* The team chip: a real button (issue #72 pattern). Both chips share the width equally and never overflow it. */
.pick-row-chip[b-yd7f234ghh] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 40px;
    padding: 0 4px;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    background-color: transparent;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    cursor: pointer;
    touch-action: manipulation;
    appearance: none;
    -webkit-appearance: none;
}

/* Let a click land on the button itself (not a child span), so the button takes focus and shows its ring. */
.pick-row-chip > *[b-yd7f234ghh] {
    pointer-events: none;
}

/* The abbreviation (2-3 letters) is never cut; if a chip is ever too narrow, the spread is what gives way. */
.pick-row-chip-name[b-yd7f234ghh] {
    flex: none;
    white-space: nowrap;
}

.pick-row-chip-spread[b-yd7f234ghh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* :not(.selected) so a picked chip keeps its tint on hover. Hover-capable pointers only: on touch, :hover sticks after a drag drop. */
@media (hover: hover) {
    .pick-row-chip:hover:not(:disabled):not(.selected)[b-yd7f234ghh] {
        border-color: var(--mud-palette-primary);
        background-color: var(--mud-palette-action-default-hover);
    }
}

.pick-row-chip:focus-visible[b-yd7f234ghh] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.pick-row-chip:disabled[b-yd7f234ghh] {
    cursor: default;
}

/* Picked state, not colour alone (WCAG 1.4.1): filled surface + 2px border + bold text + 3px left accent bar (+ aria-pressed).
   The unpicked chip already has a 2px border, so nothing shifts when the pick changes. */
.pick-row-chip.selected[b-yd7f234ghh] {
    font-weight: 700;
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.16);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

/* Forced colors (Windows High Contrast) drops the fill and the shadow bar, leaving the border colour and weight, which may map to
   the same system colour as an unpicked chip's. A Highlight outline (drawn with the border) and a wider left border keep the picked
   chip distinguishable without colour. */
@media (forced-colors: active) {
    .pick-row-chip.selected[b-yd7f234ghh] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
        border-left-width: 5px;
    }
}

/* A locked (started) or read-only row: its chips are inert, so the unpicked one is dimmed (the picked one keeps its full look). */
.pinned-row .pick-row-chip:not(.selected)[b-yd7f234ghh],
.readonly-row .pick-row-chip:not(.selected)[b-yd7f234ghh] {
    opacity: 0.6;
}

/* Narrow phones: not enough width for "PHI -10.5" on one line, so name and spread stack (row about 64px). */
@media (max-width: 359px) {
    .pick-row-chip[b-yd7f234ghh] {
        flex-direction: column;
        gap: 0;
        height: auto;
        min-height: 48px;
        padding: 2px 4px;
        line-height: 1.15;
    }

    .pick-row-chip-spread[b-yd7f234ghh] {
        max-width: 100%;
    }
}
/* /Components/Picks/PicksPointsChip.razor.rz.scp.css */
/* The host of the passive chip (a MudChip child component, whose root scoped CSS cannot stamp): no box of its own. */
.rank-chip-host[b-7uzqsfdb7j] {
    display: contents;
}

/* Points chip: fill/outline strength ramps with rank (--rank-t: 1 = top card, 0 = bottom card). The fill is a tint of the
   primary colour over the card surface capped at 55%, and the text stays the theme's primary text colour, which keeps
   WCAG AA contrast (>= 4.5:1) at every rank in both the light and dark themes.
   Keyed off the chip itself, not a .game-header ancestor, so it shades the same wherever the chip is rendered. The two selectors
   are the two renderings: the picker <button> (this component's own markup, so scoped CSS stamps it) and the passive MudChip
   (a child component, reached through ::deep from .rank-chip-host). */
.mud-chip.mud-chip-filled.rank-chip[b-7uzqsfdb7j],
.rank-chip-host[b-7uzqsfdb7j]  .mud-chip.mud-chip-filled.rank-chip {
    background-color: rgba(var(--mud-palette-primary-rgb), calc(0.10 + var(--rank-t, 1) * 0.45));
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(var(--mud-palette-primary-rgb), calc(0.35 + var(--rank-t, 1) * 0.65));
}

/* The exact tint, where color-mix() exists. It MUST sit inside @supports: because the values contain var(), a browser without
   color-mix (iOS < 16.2) accepts the declaration at parse time and only fails when computing it, which resets the property to its
   initial value and discards the rgba() fallback above. Inside @supports the declaration is never seen there. */
@supports (color: color-mix(in srgb, red, blue)) {
    .mud-chip.mud-chip-filled.rank-chip[b-7uzqsfdb7j],
    .rank-chip-host[b-7uzqsfdb7j]  .mud-chip.mud-chip-filled.rank-chip {
        background-color: color-mix(in srgb, var(--mud-palette-primary) calc(10% + var(--rank-t, 1) * 45%), var(--mud-palette-surface));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) calc(35% + var(--rank-t, 1) * 65%), transparent);
    }
}

/* The picker button is styled by Mud's own .mud-chip classes plus the rank shading above; this only adds what a
   <button> needs, a tap target of at least 40x40px (a hit-area pseudo-element, so the header layout does not change), and a caret. */
.rank-chip-btn[b-7uzqsfdb7j] {
    position: relative;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    appearance: none;
    -webkit-appearance: none;
}

.rank-chip-btn[b-7uzqsfdb7j]::before {
    content: "";
    position: absolute;
    inset: -8px -4px; /* 24px chip -> 40px tall hit area */
}

.rank-chip-btn:focus-visible[b-7uzqsfdb7j] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

@media (hover: hover) {
    .rank-chip-btn:hover[b-7uzqsfdb7j] {
        filter: brightness(0.96);
    }
}

.rank-chip-btn[b-7uzqsfdb7j]  .rank-chip-caret {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 -8px 0 0;
}

/* Compact (the one-line row, issue #68): the chip is a 40px square showing only the number. The picker button's own box is then
   40x40, so it needs no hit-area pseudo-element; the MudBlazor chip margin is zeroed so the box is not inflated. The button is
   own markup (stamped); the passive MudChip is a child component, reached through ::deep from the host. */
.rank-chip-btn.rank-chip-compact[b-7uzqsfdb7j],
.rank-chip-host[b-7uzqsfdb7j]  .mud-chip.rank-chip-compact {
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 4px;
    justify-content: center;
    border-radius: 12px;
}

.rank-chip-btn.rank-chip-compact[b-7uzqsfdb7j]::before {
    content: none;
}

.rank-chip-btn.rank-chip-compact[b-7uzqsfdb7j]  .rank-chip-caret {
    width: 1rem;
    height: 1rem;
    margin: 0 -2px 0 0;
}

/* Read by screen readers, not shown (the passive compact chip's "pts"). Own markup inside the MudChip content, so it is stamped. */
.rank-chip-sr-only[b-7uzqsfdb7j] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* /Components/Picks/ReorderableGameList.razor.rz.scp.css */
/* Scroll anchoring off: a density switch or a move re-lays the list out, and the browser must not "helpfully" shift the scroll
   position to keep some other element still (Chromium does this; Firefox too). This property is not implemented in WebKit, so on
   iOS/Safari it is a no-op and harmless. */
.reorderable-list[b-86ch0iiq3p] {
    overflow-anchor: none;
}

/* Items: no text selection / iOS callout, so a press-and-hold on the card body drags instead of selecting text. */
.reorder-item[b-86ch0iiq3p] {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* scrollIntoView clearance: below the sticky app bar, above the fixed save bar. */
    scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px));
    scroll-margin-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); /* covers the save bar's error state */
}

/*
   Drag feedback. SortableJS adds sortable-chosen when a drag is armed and, for touch / forceFallback, a body-level clone with
   sortable-drag + sortable-fallback (the clone keeps our scope attribute, so these rules reach it). The clone is positioned
   with an inline "transform", so the lift uses the separate "scale" property, which composes with it. Only scale and
   box-shadow change (no layout shift: Sortable measures positions). While dragging, JS sets data-reorder-dragging on the list
   and the other cards dim slightly.
*/
.reorder-item[b-86ch0iiq3p] {
    transition: opacity 0.15s ease;
}

.reorder-item.sortable-chosen[b-86ch0iiq3p],
.reorder-item.sortable-drag[b-86ch0iiq3p] {
    z-index: 2;
    scale: 1.025;
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--mud-palette-primary);
    transition: scale 0.15s ease, box-shadow 0.15s ease;
}

/* The placeholder left in the list (also .sortable-chosen) must not look lifted. */
.reorder-item.sortable-ghost[b-86ch0iiq3p] {
    opacity: 0.4;
    scale: 1;
    box-shadow: none;
}

.reorderable-list[data-reorder-dragging] .reorder-item:not(.sortable-chosen):not(.sortable-drag):not(.sortable-ghost)[b-86ch0iiq3p] {
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .reorder-item[b-86ch0iiq3p],
    .reorder-item.sortable-chosen[b-86ch0iiq3p],
    .reorder-item.sortable-drag[b-86ch0iiq3p] {
        transition: none;
    }

    .reorder-item.sortable-chosen[b-86ch0iiq3p],
    .reorder-item.sortable-drag[b-86ch0iiq3p] {
        scale: 1; /* keep the shadow and outline, drop the motion */
    }
}

/*
   Pending state: while a reorder round-trip is in flight (JS sets data-reorder-pending on the list and
   data-reorder-moving on the moved card) the card is dimmed and shows a small spinner, so the brief snap-back to its old
   position doesn't read as a bug. Both effects are delayed ~120 ms so a fast round-trip doesn't flicker.
*/
.reorderable-list[data-reorder-pending] .reorder-item[data-reorder-moving][b-86ch0iiq3p] {
    opacity: 0.55;
    transition: opacity 0.15s ease 0.12s;
}

.reorderable-list[data-reorder-pending] .reorder-item[data-reorder-moving][b-86ch0iiq3p]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid var(--mud-palette-primary);
    border-right-color: transparent;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: reorder-fade-in-b-86ch0iiq3p 0.15s ease 0.12s forwards, reorder-spin-b-86ch0iiq3p 0.8s linear infinite;
}

@keyframes reorder-fade-in-b-86ch0iiq3p {
    to {
        opacity: 1;
    }
}

@keyframes reorder-spin-b-86ch0iiq3p {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reorderable-list[data-reorder-pending] .reorder-item[data-reorder-moving][b-86ch0iiq3p]::after {
        animation: reorder-fade-in-b-86ch0iiq3p 0.01s ease 0.12s forwards;
    }
}

/* Screen-reader announcement after a move (visually hidden, still exposed to assistive tech). */
.reorder-live[b-86ch0iiq3p] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}