:root {
    --font-display: "Bebas Neue", Impact, sans-serif;
    --font-body: var(--font-sans, Outfit, system-ui, sans-serif);
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-body);
    background: var(--background);
    color: var(--foreground);
}

/* Keep unstyled nav/content links inheriting; leave BbButton[Href] colors alone.
   Unlayered `color: inherit` would override BlazorBlueprint's @layer bb rules. */
@layer base {
    a {
        color: inherit;
        text-decoration: none;
    }
}

h1:focus {
    outline: none;
}

.bg-background { background-color: var(--background); }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }

/* Font Awesome webfonts: honor the same h-* / w-* boxes Lucide SVGs used */
.fa-solid,
.fa-regular,
.fa-brands,
.fa-light,
.fa-thin,
.fa-duotone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.fa-solid.h-3, .fa-regular.h-3, .fa-brands.h-3, .fa-light.h-3 { font-size: 0.75rem; }
.fa-solid.h-3\.5, .fa-regular.h-3\.5, .fa-brands.h-3\.5, .fa-light.h-3\.5 { font-size: 0.875rem; }
.fa-solid.h-4, .fa-regular.h-4, .fa-brands.h-4, .fa-light.h-4 { font-size: 1rem; }
.fa-solid.h-5, .fa-regular.h-5, .fa-brands.h-5, .fa-light.h-5 { font-size: 1.25rem; }
.fa-solid.h-8, .fa-regular.h-8, .fa-brands.h-8, .fa-light.h-8 { font-size: 2rem; }
.fa-solid.h-10, .fa-regular.h-10, .fa-brands.h-10, .fa-light.h-10 { font-size: 2.5rem; }
.text-primary { color: var(--primary); }
.text-destructive { color: var(--destructive); }
.bg-card { background-color: var(--card); }

/*
 * Informational BbBadge pills use tertiary so they do not look like BbButton.
 * Blueprint badges share: inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold
 * Destructive, PositionBadge, paused drafts, keeper cost deltas, and action-needed
 * pills (on the clock) keep their own colors.
 */
.inline-flex.items-center.rounded-full.border.px-2\.5.py-0\.5.text-xs.font-semibold.bg-primary {
    color: var(--tertiary-foreground);
    background: var(--tertiary);
    border-color: var(--tertiary);
}

.inline-flex.items-center.rounded-full.border.px-2\.5.py-0\.5.text-xs.font-semibold.bg-secondary {
    color: var(--tertiary-emphasis);
    background: color-mix(in srgb, var(--tertiary) 28%, var(--muted));
    border-color: color-mix(in srgb, var(--tertiary) 55%, var(--border));
}

.inline-flex.items-center.rounded-full.border.px-2\.5.py-0\.5.text-xs.font-semibold:not(.bg-primary):not(.bg-secondary):not(.bg-destructive):not(.position-badge):not(.draft-state-badge--paused):not(.keeper-player-cell__delta):not(.action-badge) {
    color: var(--tertiary-emphasis);
    border-color: color-mix(in srgb, var(--tertiary) 45%, var(--border));
    background: color-mix(in srgb, var(--tertiary) 16%, var(--muted));
}

.inline-flex.items-center.rounded-full.border.px-2\.5.py-0\.5.text-xs.font-semibold.action-badge {
    color: var(--info-foreground);
    background: var(--info);
    border-color: var(--info);
}

/* Brand */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.brand-mark__icon {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: calc(var(--radius) - 0.35rem);
    object-fit: cover;
    flex-shrink: 0;
}

.brand-mark__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Marketing layout */
.marketing-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
}

.marketing-header__nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.marketing-header__link {
    color: var(--muted-foreground);
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    transition: color 160ms ease;
}

.marketing-header__link:hover {
    color: var(--foreground);
}

.marketing-header__cta {
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.55rem 1rem;
    border-radius: 0.5rem;
    transition: transform 160ms ease, filter 160ms ease;
}

.marketing-header__cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* Landing hero */
.landing-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 6.5rem 1.5rem 4rem;
}

.landing-hero__atmosphere {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 20%, color-mix(in oklch, var(--primary) 35%, transparent), transparent 55%),
        radial-gradient(ellipse 50% 40% at 15% 80%, color-mix(in oklch, var(--primary) 18%, transparent), transparent 50%),
        linear-gradient(180deg, var(--background) 0%, color-mix(in oklch, var(--muted) 55%, var(--background)) 45%, var(--background) 100%);
    animation: atmosphere-shift 18s ease-in-out infinite alternate;
}

.landing-hero__atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in oklch, var(--foreground) 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--foreground) 6%, transparent) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    opacity: 0.45;
}

.dark .landing-hero__atmosphere {
    background:
        radial-gradient(ellipse 80% 60% at 70% 20%, color-mix(in oklch, var(--primary) 40%, transparent), transparent 55%),
        radial-gradient(ellipse 50% 40% at 15% 80%, color-mix(in oklch, var(--primary) 20%, transparent), transparent 50%),
        linear-gradient(180deg, color-mix(in oklch, var(--background) 88%, black) 0%, var(--background) 45%, var(--background) 100%);
}

.landing-hero__content {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    animation: hero-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-hero__brand {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 12vw, 7rem);
    letter-spacing: 0.06em;
    line-height: 0.9;
    margin: 0 0 1rem;
    color: var(--foreground);
    text-shadow: 0 10px 40px color-mix(in oklch, var(--primary) 35%, transparent);
}

.landing-hero__headline {
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 3.5vw, 2.15rem);
    font-weight: 600;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.landing-hero__lede {
    margin: 0 0 1.75rem;
    max-width: 34rem;
    color: var(--muted-foreground);
    font-size: 1.05rem;
    line-height: 1.55;
}

.landing-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.landing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 1.25rem;
    border-radius: 0.55rem;
    font-weight: 600;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.landing-cta:hover {
    transform: translateY(-1px);
}

.landing-cta--primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.landing-cta--primary:hover {
    filter: brightness(1.08);
}

.landing-cta--ghost {
    border: 1px solid var(--border);
    color: var(--foreground);
    background: color-mix(in oklch, var(--foreground) 4%, transparent);
}

.landing-cta--ghost:hover {
    border-color: color-mix(in oklch, var(--primary) 60%, var(--border));
}

.landing-promise {
    padding: 5rem 1.5rem 6rem;
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.landing-promise__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem;
}

.landing-promise__text {
    color: var(--muted-foreground);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes atmosphere-shift {
    from {
        filter: hue-rotate(0deg) saturate(1);
    }
    to {
        filter: hue-rotate(12deg) saturate(1.15);
    }
}

/* Auth */
.auth-shell {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in oklch, var(--primary) 18%, transparent), transparent 60%),
        var(--background);
}

.auth-header {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 0.5rem;
}

.auth-footer {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: var(--muted-foreground);
    font-size: 0.8rem;
}

.auth-footer a:hover {
    color: var(--foreground);
}

.auth-card-wrap {
    width: 100%;
    max-width: 26rem;
}

.auth-card {
    border: 1px solid var(--border) !important;
    background: color-mix(in oklch, var(--card) 92%, transparent) !important;
    backdrop-filter: blur(8px);
}

.auth-card__title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
}

/* App shell */
.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklch, var(--background) 88%, transparent);
    backdrop-filter: blur(8px);
}

.app-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-topbar__user {
    color: var(--muted-foreground);
    font-size: 0.9rem;
}

.dashboard {
    width: 100%;
}

.dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.pre-draft-tasks-card__sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dashboard__title {
    margin: 0;
    font-size: 1.75rem;
}

.dashboard__error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.dashboard__empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.dashboard-league-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dashboard-league-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--card);
}

.dashboard-league-row--skeleton {
    flex-direction: column;
    align-items: flex-start;
}

.dashboard-league-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.dashboard-league-row__name {
    font-weight: 600;
    font-size: 1rem;
}

.dashboard-league-row__meta {
    font-size: 0.875rem;
}

/* Create League Wizard
   Pin the dialog between viewport insets. Header + footer stay put; only the
   step body scrolls. Footer is rendered outside BbFormWizard on purpose. */
.fixed.z-50.grid:has(.create-league-wizard) {
    top: 1rem !important;
    bottom: 1rem;
    left: 50%;
    --tw-translate-x: -50%;
    --tw-translate-y: 0 !important;
    translate: -50% 0 !important;
    transform: none !important;
    max-height: none;
    width: min(56rem, calc(100vw - 2rem));
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    align-content: stretch;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.fixed.z-50.grid:has(.create-league-wizard) > *:not(button):not([class*="absolute"]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.create-league-wizard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100dvh - 5.5rem);
    overflow: hidden;
}

.create-league-wizard__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex: 0 0 auto;
}

.create-league-wizard__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.create-league-wizard__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
}

.create-league-wizard__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.15rem;
}

.create-league-wizard__content {
    margin-top: 0.75rem;
}

.create-league-wizard__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 0 0 auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.create-league-wizard__section-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.create-league-wizard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem 1rem;
}

.create-league-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.create-league-template-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    text-align: left;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--muted);
    color: var(--foreground);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.create-league-template-card:hover {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.create-league-template-card--selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.create-league-template-card__check {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    color: var(--primary);
}

.create-league-template-card__icon {
    display: inline-flex;
    color: var(--primary);
}

.create-league-template-card__name {
    font-weight: 600;
    font-size: 0.95rem;
}

.create-league-template-card__desc {
    font-size: 0.75rem;
    line-height: 1.35;
}

.create-league-accordion {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--card);
}

.create-league-franchise-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.create-league-franchise-row {
    display: grid;
    grid-template-columns: auto 1fr 5rem auto;
    gap: 0.6rem;
    align-items: center;
}

.create-league-franchise-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.create-league-espn-import {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--card);
}

.create-league-espn-import__action {
    justify-self: end;
}

.create-league-espn-import__action button {
    width: max-content;
    white-space: nowrap;
}

.create-league-franchise-row--imported {
    grid-template-columns: 1fr 5rem auto;
}

.create-league-franchise-row--none {
    grid-template-columns: auto 1fr;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.create-league-franchise-row__radio {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.create-league-franchise-row__abbr input,
.create-league-franchise-row__abbr {
    max-width: 5rem;
}

.create-league-franchise-row__status {
    font-size: 0.75rem;
    min-width: 3.25rem;
}

.create-league-continuity-note {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--border));
    background: color-mix(in srgb, #f59e0b 8%, var(--card));
}

.create-league-continuity-note strong {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.875rem;
}

.create-league-review {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--card);
}

.create-league-review__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .create-league-franchise-row {
        grid-template-columns: 1fr;
    }
}

/* Validation / Blazor defaults */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: var(--destructive);
    font-size: 0.8rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.25rem;
    color: white;
}

#blazor-error-ui {
    background: #1f2937;
    color: #f8fafc;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 640px) {
    .landing-hero {
        align-items: center;
        padding-top: 7rem;
    }

    .marketing-header {
        padding-inline: 1rem;
    }
}

/* Paged list */
.paged-list__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
}

/* Authenticated app shell + side rail */
.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--background);
    color: var(--foreground);
}

.app-shell__rail {
    display: flex;
    flex-direction: column;
    width: 16.5rem;
    min-width: 16.5rem;
    flex-shrink: 0;
    overflow: hidden;
    border-right: 1px solid var(--border);
    background: color-mix(in oklch, var(--card) 94%, var(--foreground) 6%);
    z-index: 30;
    transition: width 180ms ease, min-width 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.app-shell:not(.app-shell--rail-open) .app-shell__rail {
    width: 0;
    min-width: 0;
    border-right-color: transparent;
    pointer-events: none;
}

.app-shell__scrim {
    display: none;
}

.app-shell__main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 100vh;
}

.app-shell__content {
    flex: 1;
    padding: 1rem 1.25rem 1.5rem;
}

.app-topbar__start {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.app-topbar__menu {
    display: inline-flex;
}

.app-sidenav {
    display: flex;
    flex-direction: column;
    width: 16.5rem;
    height: 100%;
    min-height: 100vh;
    padding: 1rem 0.85rem 1rem;
    gap: 1.15rem;
    box-sizing: border-box;
}

.app-sidenav__brand {
    padding: 0.15rem 0.4rem 0.35rem;
}

.app-sidenav__primary {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.app-sidenav__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 140ms ease, color 140ms ease;
}

.app-sidenav__link:hover {
    color: var(--foreground);
    background: color-mix(in srgb, var(--muted) 80%, transparent);
}

.app-sidenav__link.active {
    color: var(--foreground);
    background: color-mix(in srgb, var(--primary) 18%, var(--muted));
}

.app-sidenav__link-icon {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    flex-shrink: 0;
}

.app-sidenav__leagues {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
    min-height: 0;
}

.app-sidenav__heading {
    margin: 0;
    padding: 0 0.7rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    font-family: var(--font-body);
}

.app-sidenav__league-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.app-sidenav__league-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.app-sidenav__league-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-sidenav__league-item:has(.app-sidenav__tasks) .app-sidenav__league-link {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.app-sidenav__league-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    color: var(--foreground);
    border: 1px solid transparent;
    transition: background 140ms ease, border-color 140ms ease;
}

.app-sidenav__league-link:hover {
    background: color-mix(in srgb, var(--muted) 80%, transparent);
}

.app-sidenav__league-link--active,
.app-sidenav__league-link.active {
    background: color-mix(in srgb, var(--primary) 22%, var(--card));
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.app-sidenav__league-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.app-sidenav__league-name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidenav__league-season {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.app-sidenav__comm-badge {
    flex-shrink: 0;
    font-size: 0.65rem !important;
    letter-spacing: 0.04em;
}

.app-sidenav__tasks {
    margin: -1px 0 0 0.85rem;
    padding: 0.45rem 0.65rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--tertiary) 45%, var(--border));
    border-radius: 0 0 0.5rem 0.5rem;
    background: color-mix(in srgb, var(--tertiary) 14%, var(--card));
}

.app-sidenav__tasks-heading {
    margin: 0 0 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tertiary-emphasis);
    font-family: var(--font-body);
}

.app-sidenav__tasks-section + .app-sidenav__tasks-section {
    margin-top: 0.55rem;
    padding-top: 0.45rem;
    border-top: 1px solid color-mix(in srgb, var(--tertiary) 35%, var(--border));
}

.app-sidenav__tasks-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-sidenav__task-link {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.2rem 0.25rem;
    border-radius: 0.35rem;
    color: var(--foreground);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
    transition: background 140ms ease;
}

.app-sidenav__task-link:hover {
    background: color-mix(in srgb, var(--tertiary) 22%, transparent);
}

.app-sidenav__task-icon {
    width: 0.55rem;
    height: 0.55rem;
    font-size: 0.55rem;
    margin-top: 0.22rem;
    flex-shrink: 0;
    color: var(--tertiary-emphasis);
}

.app-sidenav__skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.15rem 0.35rem;
}

.app-sidenav__skeleton-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.45rem 0.35rem;
}

.app-sidenav__footer {
    margin-top: auto;
    padding-top: 0.35rem;
}

.app-sidenav__create {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

@media (max-width: 899px) {
    .app-shell__rail {
        position: fixed;
        inset: 0 auto 0 0;
        height: 100vh;
        width: 16.5rem;
        min-width: 16.5rem;
        transform: translateX(-105%);
        border-right-color: var(--border);
        box-shadow: none;
        pointer-events: none;
    }

    .app-shell--rail-open .app-shell__rail {
        width: 16.5rem;
        min-width: 16.5rem;
        transform: translateX(0);
        box-shadow: 12px 0 32px color-mix(in oklch, var(--foreground) 18%, transparent);
        pointer-events: auto;
    }

    .dark .app-shell--rail-open .app-shell__rail {
        box-shadow: 12px 0 32px color-mix(in oklch, black 45%, transparent);
    }

    .app-shell:not(.app-shell--rail-open) .app-shell__rail {
        width: 16.5rem;
        min-width: 16.5rem;
        border-right-color: var(--border);
    }

    .app-shell__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 25;
        margin: 0;
        padding: 0;
        border: 0;
        background: color-mix(in oklch, var(--foreground) 28%, transparent);
        cursor: pointer;
    }

    .dark .app-shell__scrim {
        background: color-mix(in oklch, black 45%, transparent);
    }

    .app-topbar__menu {
        display: inline-flex;
    }

    .app-shell__content {
        padding: 1rem;
    }
}

@media (min-width: 900px) {
    .app-topbar .brand-mark {
        display: none;
    }

    .app-shell__scrim {
        display: none;
    }
}

/* Auth shell — two-column brand + panel (appended; do not edit rules above) */
.auth-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-shell__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(ellipse 90% 70% at 20% 30%, color-mix(in oklch, var(--primary) 28%, transparent), transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 80%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 50%),
        color-mix(in oklch, var(--card) 82%, var(--foreground) 18%);
}

.auth-shell__wordmark .brand-mark__name {
    font-size: clamp(1.75rem, 4vw, 2.35rem);
}

.auth-shell__tagline {
    margin: 0;
    max-width: 22rem;
    color: var(--muted-foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
}

.auth-shell__panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.auth-shell__toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1rem 0;
}

.auth-shell__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem 1rem;
}

.auth-form-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.35rem 0;
    color: var(--muted-foreground);
}

.auth-divider__line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-divider__label {
    font-size: 0.75rem;
    text-transform: lowercase;
    white-space: nowrap;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.auth-field__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.auth-forgot {
    font-size: 0.875rem;
    color: var(--primary);
    white-space: nowrap;
}

.auth-forgot--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    user-select: none;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.auth-footer-prompt {
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.auth-footer-prompt__link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.auth-footer-prompt__link:hover {
    filter: brightness(1.1);
}

@media (min-width: 900px) {
    .auth-shell {
        grid-template-columns: minmax(18rem, 0.95fr) minmax(22rem, 1.05fr);
    }

    .auth-shell__brand {
        border-bottom: none;
        border-right: 1px solid var(--border);
        padding: 3rem 3.25rem;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .auth-shell__panel {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .auth-shell__main {
        padding: 2.5rem 2rem 1.25rem;
    }

    .auth-shell__tagline {
        font-size: 1.05rem;
        max-width: 24rem;
    }
}

.auth-shell__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}

/* User profile */
.profile {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 48rem;
}

.profile__header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--card);
}

.profile__avatar {
    flex-shrink: 0;
}

.profile__meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.profile__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    letter-spacing: 0.03em;
    line-height: 1.1;
    color: var(--foreground);
}

.profile__email {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted-foreground);
}

.profile__member-since {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.profile__league-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.profile__league-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--muted) 55%, var(--card));
    color: var(--foreground);
    transition: border-color 140ms ease, background 140ms ease;
}

a.profile__league-row:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
}

.profile__league-row--skeleton {
    flex-direction: column;
    align-items: flex-start;
}

.profile__league-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.profile__league-name {
    font-weight: 600;
    font-size: 0.98rem;
}

.profile__league-meta {
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.profile__edit-card {
    overflow: visible;
}

.profile__edit {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 720px) {
    .profile__edit {
        grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
        align-items: start;
    }
}

.profile__avatar-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile__avatar-source {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile__avatar-modes {
    display: grid;
    gap: 0.35rem;
}

.profile__avatar-dropzone {
    margin: 0;
    font-size: 0.9rem;
}

.profile__avatar-hint {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
}

.profile__camera-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.profile__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.profile__actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.25rem;
}

.camera-capture {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.camera-capture__alert {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--destructive) 35%, var(--border));
    background: color-mix(in srgb, var(--destructive) 12%, var(--card));
    color: var(--foreground);
    font-size: 0.9rem;
}

.camera-capture__alert--hidden {
    display: none;
}

.camera-capture__device {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.camera-capture__device--hidden {
    display: none;
}

.camera-capture__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

.camera-capture__select {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--background);
    color: var(--foreground);
}

.camera-capture__select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.camera-capture__preview {
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 70%, var(--card));
    aspect-ratio: 4 / 3;
}

.camera-capture__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.camera-capture__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

.camera-capture__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.camera-capture__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.camera-capture__button--outline {
    border-color: var(--border);
    background: transparent;
    color: var(--foreground);
}

.camera-capture__button--primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

/* User settings (browser-local preferences) */
.settings {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 36rem;
}

.settings__header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.settings__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--foreground);
}

.settings__subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted-foreground);
}

.settings__fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.settings__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.settings__row-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.settings__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.settings__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
}

.settings__hint {
    font-size: 0.8rem;
    color: var(--muted-foreground);
    line-height: 1.35;
}

.settings__page-size {
    max-width: 10rem;
}

.settings__theme {
    flex-shrink: 0;
}

/* Appearance picker */
.appearance-picker__trigger {
    gap: 0.45rem;
}

.appearance-picker__label {
    font-size: 0.875rem;
    font-weight: 500;
}

.appearance-picker__item--active {
    background: var(--accent);
    color: var(--accent-foreground);
}

/* Sound mute toggle */
.sound-mute-toggle__trigger {
    gap: 0.45rem;
}

.sound-mute-toggle__label {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Claim invitation */
.claim {
    width: 100%;
}

.claim__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.claim__league {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    letter-spacing: 0.04em;
    line-height: 1.05;
    color: var(--foreground);
    text-align: center;
}

.claim__meta,
.claim__email,
.claim__prompt {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: center;
}

.claim__email-value {
    color: var(--foreground);
    font-weight: 600;
}

.claim__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}


/* League management hub */
.league-hub {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 72rem;
}

.league-hub__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.25rem;
}

.league-hub__header-main {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.league-hub__header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-shrink: 0;
}

.league-hub__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.league-hub__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--foreground);
}

.league-hub__meta {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.league-hub__season {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.league-hub__season-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted-foreground);
}

.league-hub__season-select {
    display: inline-flex;
    min-width: 12rem;
}

.league-hub__season-select > button {
    width: 100%;
}

.league-hub__season-note {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
}

.league-hub__manage {
    white-space: nowrap;
}

.league-hub__realtime-warning {
    margin: 0.75rem 0 0;
}

.league-hub__tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.league-hub__tabs::-webkit-scrollbar {
    display: none;
}

.league-hub__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    position: relative;
    padding: 0.7rem 0.85rem;
    border-bottom: none;
    color: var(--muted-foreground);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 160ms ease;
}

.league-hub__tab:hover {
    color: var(--foreground);
}

.league-hub__tab--active {
    color: var(--foreground);
}

.league-hub__tab--active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--primary);
}

.league-hub__tab--disabled {
    color: color-mix(in srgb, var(--muted-foreground) 70%, transparent);
    cursor: not-allowed;
    opacity: 0.7;
}

.league-hub__tab--disabled:hover {
    color: color-mix(in srgb, var(--muted-foreground) 70%, transparent);
}

.league-hub__body {
    min-width: 0;
}

.league-manage {
    display: grid;
    grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    width: 100%;
}

.league-manage__aside {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: sticky;
    top: 0.5rem;
}

.league-manage__aside-header {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.league-manage__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted-foreground);
}

.league-manage__back:hover {
    color: var(--foreground);
}

.league-manage__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--foreground);
}

.league-manage__nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.league-manage__link {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 140ms ease, color 140ms ease;
}

.league-manage__link:hover {
    color: var(--foreground);
    background: color-mix(in srgb, var(--muted) 80%, transparent);
}

.league-manage__link--active {
    color: var(--foreground);
    background: color-mix(in srgb, var(--primary) 18%, var(--muted));
}

.league-manage__body {
    min-width: 0;
}

@media (max-width: 48rem) {
    .league-manage {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .league-manage__aside {
        position: static;
    }

    .league-manage__nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.15rem;
        border-bottom: 1px solid var(--border);
        padding-bottom: 0;
        scrollbar-width: thin;
    }

    .league-manage__link {
        flex: 0 0 auto;
        border-radius: 0;
        margin-bottom: -1px;
        border-bottom: 2px solid transparent;
        background: transparent;
    }

    .league-manage__link:hover {
        background: transparent;
    }

    .league-manage__link--active {
        background: transparent;
        border-bottom-color: var(--primary);
    }
}

.league-hub__overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.league-hub__owner-franchise {
    height: auto;
    width: 100%;
}

.league-hub__owner-franchise-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.league-hub__owner-franchise-identity {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.league-hub__owner-franchise-identity:hover .league-hub__owner-franchise-name {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.league-hub__owner-franchise-logo {
    flex-shrink: 0;
}

.league-hub__owner-franchise-copy {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.league-hub__owner-franchise-kicker {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.league-hub__owner-franchise-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.league-hub__owner-franchise-name {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
}

.league-hub__owner-franchise-action {
    flex-shrink: 0;
}

.league-hub__owner-franchise-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem 2rem;
    margin: 0;
    padding-top: 1.15rem;
    border-top: 1px solid var(--border);
}

.league-hub__owner-franchise-stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.league-hub__owner-franchise-stat dt {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 500;
}

.league-hub__owner-franchise-stat dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--foreground);
    word-break: break-word;
}

.league-hub__scheduled-draft {
    height: auto;
}

.league-hub__scheduled-draft-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.85rem;
}

.league-hub__scheduled-draft-dl {
    flex: 1 1 16rem;
    min-width: 0;
}

.league-hub__scheduled-draft-dl .league-hub__dl-row {
    grid-template-columns: max-content minmax(0, 1fr);
}

.league-hub__scheduled-draft-dl .league-hub__dl-row dd {
    text-align: left;
}

.league-hub__scheduled-draft-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.league-hub__scheduled-draft-action {
    white-space: nowrap;
}

.league-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.league-hub__card {
    height: 100%;
    background: var(--card);
    border-color: var(--border);
}

.league-hub__card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.league-hub__dl {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
}

.league-hub__dl-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
}

.league-hub__dl-row dt {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.league-hub__dl-row dd {
    margin: 0;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--foreground);
    word-break: break-word;
}

.league-hub__dl--skeleton {
    gap: 0.65rem;
}

.league-hub__franchise-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.league-hub__franchise-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.league-hub__franchise-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.league-hub__franchise-link:hover .league-hub__franchise-name {
    text-decoration: underline;
}

.league-hub__franchise-name {
    font-size: 0.9rem;
    font-weight: 500;
}

.league-hub__franchise-abbr {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.league-hub__more {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
}

.league-hub__more-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
}

.league-hub__more-link:hover {
    text-decoration: underline;
}

.league-hub__empty-copy {
    margin: 0;
    font-size: 0.9rem;
}

.league-hub__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 32rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--card);
}

.league-hub__panel-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.league-hub__panel-copy {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.league-hub__panel-link {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.league-hub__panel-link:hover {
    text-decoration: underline;
}

/* Definition list */
.definition-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
}

.definition-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
}

.definition-list__label {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.definition-list__value {
    margin: 0;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--foreground);
    word-break: break-word;
}

.definition-list--skeleton {
    gap: 0.65rem;
}

/* League rule set (read-only) */
.rule-set {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rule-set__notice {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.rule-set__notice-link {
    color: var(--primary);
    font-weight: 600;
}

.rule-set__notice-link:hover {
    text-decoration: underline;
}

.rule-set__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.rule-set__table th,
.rule-set__table td {
    padding: 0.55rem 0.35rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: baseline;
}

.rule-set__table thead th {
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 500;
}

.rule-set__table tbody td:last-child,
.rule-set__table thead th:last-child {
    text-align: right;
}

.rule-set__group-row th {
    padding-top: 0.85rem;
    color: var(--foreground);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
}

.rule-set__group-row:first-child th {
    padding-top: 0.15rem;
}

.rule-set__summary {
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
}

.rule-set__empty {
    margin: 0;
    font-size: 0.9rem;
}

/* Season management */
.season-mgmt {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.season-mgmt__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.season-mgmt__header-main {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.season-mgmt__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    letter-spacing: 0.03em;
    line-height: 1.1;
    color: var(--foreground);
}

.season-mgmt__derived {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.season-mgmt__card {
    height: 100%;
    background: var(--card);
    border-color: var(--border);
}

.season-mgmt__card--action {
    height: auto;
}

.season-mgmt__action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.season-mgmt__action-meta {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.season-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.season-checklist__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
}

.season-checklist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.season-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.season-checklist__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    color: var(--muted-foreground);
}

.season-checklist__item--complete .season-checklist__icon {
    color: var(--primary);
}

.season-checklist__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.season-checklist__link {
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}

.season-checklist__link:hover {
    text-decoration: underline;
}

.season-checklist__label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.35;
}

.season-checklist__optional {
    display: inline-block;
    width: fit-content;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.season-checklist__description {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.season-checklist__empty {
    margin: 0;
    font-size: 0.9rem;
}

.keeper-deadline__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.keeper-deadline__value {
    color: var(--foreground);
}

.keeper-deadline__countdown {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

.keeper-deadline__finalized {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.keeper-deadline__editor {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.keeper-deadline__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.85rem;
}

@media (max-width: 36rem) {
    .keeper-deadline__fields {
        grid-template-columns: 1fr;
    }
}

.keeper-deadline__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.keeper-deadline__actions {
    display: flex;
    justify-content: flex-start;
}

/* Reorderable list */
.reorderable-list {
    width: 100%;
}

.reorderable-list__items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reorderable-list__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.65rem;
    padding: 0.55rem 0.35rem;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.reorderable-list__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.55rem;
    color: var(--muted-foreground);
    cursor: grab;
    touch-action: none;
}

.reorderable-list__handle:active {
    cursor: grabbing;
}

.reorderable-list__body {
    min-width: 0;
}

.reorderable-list__actions {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.15rem;
}

.reorderable-list[aria-disabled="true"] .reorderable-list__handle {
    cursor: default;
    opacity: 0.45;
}

/* BlazorBlueprint hides .sortable-ghost and relies on a .sortable-fallback clone.
   Inside overflow / translate-containing dialogs that clone is often clipped, so
   keep a visible placeholder and ensure the fallback paints above dialog chrome. */
.sortable-ghost {
    visibility: visible !important;
    opacity: 0.45;
}

.sortable-fallback {
    z-index: 100000 !important;
    pointer-events: none;
}

/* Roster slots editor */
.roster-slots-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 5rem;
}

.roster-slots-editor__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.roster-slots-editor__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--foreground);
}

.roster-slots-editor__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.roster-slots-editor__back {
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.roster-slots-editor__back:hover {
    text-decoration: underline;
}

.roster-slots-editor__banner {
    margin-bottom: 0.25rem;
}

.roster-slots-editor__table-head,
.roster-slots-editor__caps-head {
    display: grid;
    gap: 0.65rem;
    padding: 0.35rem 0.35rem 0.55rem;
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 500;
}

.roster-slots-editor__table-head {
    grid-template-columns: 1.75rem 1fr 1fr minmax(5.5rem, 7rem) auto;
    padding-left: calc(0.35rem + 1.75rem + 0.65rem);
}

.roster-slots-editor__caps-head {
    grid-template-columns: 1fr minmax(5.5rem, 7rem) auto;
}

.roster-slots-editor__col-handle,
.roster-slots-editor__col-actions {
    width: 1.75rem;
}

.roster-slots-editor__slot-row {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(5.5rem, 7rem) auto;
    gap: 0.65rem;
    align-items: start;
}

.roster-slots-editor__cap-row {
    display: grid;
    grid-template-columns: 1fr minmax(5.5rem, 7rem) auto;
    gap: 0.65rem;
    align-items: start;
    padding: 0.55rem 0.35rem;
    border-bottom: 1px solid var(--border);
}

.roster-slots-editor__caps {
    display: flex;
    flex-direction: column;
}

.roster-slots-editor__field {
    min-width: 0;
}

.roster-slots-editor__field--count {
    max-width: 7rem;
}

.roster-slots-editor__row-actions {
    display: inline-flex;
    align-items: center;
    margin-top: 0.15rem;
}

.roster-slots-editor__row-errors {
    grid-column: 1 / -1;
}

.roster-slots-editor__card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}

.roster-slots-editor__footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.85rem 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--background) 0%, transparent) 0%,
            var(--background) 28%,
            var(--background) 100%
        );
    border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
    .roster-slots-editor__table-head,
    .roster-slots-editor__caps-head {
        display: none;
    }

    .roster-slots-editor__slot-row,
    .roster-slots-editor__cap-row {
        grid-template-columns: 1fr;
    }

    .roster-slots-editor__field--count {
        max-width: none;
    }

    .roster-slots-editor__header {
        flex-direction: column;
    }
}

/* League members list */
.members {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.members__notice {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.members__card {
    width: 100%;
}

.members__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.members__header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    margin-left: auto;
}

.members__filter {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 10rem;
}

.members__filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.members__filter-select {
    min-width: 10rem;
}

.trades-card-header {
    width: 100%;
}

.trades-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.members-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.members-table th,
.members-table td {
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

.members-table thead th {
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 500;
}

.members-table__row:last-child td {
    border-bottom: none;
}

.members-table__member {
    min-width: 14rem;
    white-space: normal;
}

.members-table__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.members-table__avatar {
    flex-shrink: 0;
}

.members-table__identity-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.members-table__name {
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
}

.members-table__email {
    font-size: 0.8rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.members-table__franchise {
    color: var(--foreground);
}

.members-table__autopick,
.members-table__joined {
    font-size: 0.875rem;
}

.members-table__actions {
    width: 2.75rem;
    text-align: right;
}

.member-actions {
    display: flex;
    justify-content: flex-end;
}

.member-actions__trigger {
    color: var(--muted-foreground);
}

.member-actions__item--destructive {
    color: var(--destructive);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.franchises {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.franchises__notice {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.franchises__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
    width: 100%;
}

.franchises__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.franchises__card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.franchises__logo {
    flex-shrink: 0;
}

.franchises__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    min-width: 0;
}

.franchises__name {
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.franchises__meta {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
}

.franchises__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.franchises__meta-row dt {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted-foreground);
}

.franchises__meta-row dd {
    margin: 0;
    font-size: 0.875rem;
    text-align: right;
    color: var(--foreground);
}

.franchises__footer {
    margin-top: auto;
    justify-content: flex-end;
}

.franchises__continuity {
    margin: 0;
}

.franchises__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.franchises__header-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.franchises__header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.franchises__progress {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
}

.franchises-table__claim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.franchises-table__claim-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.franchise-setup {
    display: grid;
    gap: 1.25rem;
    max-width: 56rem;
}

.franchise-setup__intro {
    margin: 0;
}

.franchise-setup__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.franchise-setup__fields {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.franchise-setup .franchise-edit__logo {
    flex-wrap: wrap;
}

.franchise-setup__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

@media (max-width: 800px) {
    .franchise-setup__grid {
        grid-template-columns: 1fr;
    }
}

.franchises__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.franchises__filter {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 10rem;
}

.franchises__empty-filter {
    margin: 0;
}

.franchises-table__franchise {
    min-width: 14rem;
    white-space: normal;
}

.franchises-table__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.franchises-table__identity:hover .franchises-table__name {
    text-decoration: underline;
}

.franchises-table__logo {
    flex-shrink: 0;
}

.franchises-table__name {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.franchises-table__actions {
    width: 1%;
    white-space: nowrap;
}

.franchises-table__actions-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
}

.franchises-table__edit {
    display: flex;
    justify-content: flex-end;
    min-width: 2.25rem;
}

.franchise-detail {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.franchise-detail__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.franchise-detail__logo {
    flex-shrink: 0;
}

.franchise-detail__identity {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1;
}

.franchise-detail__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.franchise-detail__name {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
}

.franchise-detail__owner {
    margin: 0;
    font-size: 0.9rem;
}

.franchise-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.franchise-detail__commissioner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.franchise-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.franchise-history__item-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.franchise-history__name {
    font-weight: 500;
}

.franchise-history__dates,
.franchise-history__note {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
}

.franchise-status__copy {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.franchise-season__cards {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.franchise-season__section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.franchise-season__heading {
    margin: 0;
    font-size: 0.95rem;
}

.franchise-season__link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
}

.franchise-season__link:hover {
    text-decoration: underline;
}

.franchise-season__list {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.875rem;
}

.franchise-edit {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.franchise-edit__alert {
    margin: 0;
}

.franchise-edit__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.franchise-edit__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.franchise-edit__logo {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.franchise-edit__logo-preview {
    flex-shrink: 0;
}

.franchise-edit__logo-controls {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.franchise-edit__logo-upload {
    width: 100%;
}

.franchise-edit__logo-dropzone {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.franchise-edit__logo-hint {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
}

.franchise-edit__logo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.franchise-edit__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.assign-franchise {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.assign-franchise__alert {
    margin: 0;
}

.assign-franchise__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.assign-franchise__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.assign-franchise__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* League invitations manager */
.invitations {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.invitations__notice {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.invitations__card {
    width: 100%;
}

.invitations__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.invitations__access {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.invitations__join-code-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.invitations__code {
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.invitations__requester {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.find-leagues {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.find-leagues__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.find-leagues__title {
    margin: 0;
    font-size: 1.5rem;
}

.find-leagues__subtitle {
    margin: 0.35rem 0 0;
}

.find-leagues__filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.85rem 1rem;
    align-items: end;
}

.find-leagues__open-spots {
    display: flex;
    align-items: flex-end;
}

.find-leagues__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.find-leagues__card-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.find-leagues__meta,
.find-leagues__spots {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
}

.find-leagues__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.join-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.invitations-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.invitations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.invitations-table th,
.invitations-table td {
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

.invitations-table thead th {
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 500;
}

.invitations-table__row:last-child td {
    border-bottom: none;
}

.invitations-table__email {
    min-width: 12rem;
    font-weight: 500;
    color: var(--foreground);
}

.invitations-table__expires,
.invitations-table__timestamps {
    font-size: 0.875rem;
}

.invitations-table__actions {
    text-align: right;
}

.invitations-table__revoke {
    color: var(--destructive);
}

.create-invite {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.create-invite__success {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.create-invite__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.create-invite__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.create-invite__alert {
    margin: 0;
}

.create-invite__claim {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.create-invite__claim-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.create-invite__claim-url {
    display: block;
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--muted);
    color: var(--foreground);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    word-break: break-all;
    white-space: normal;
}

.create-invite__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* League activity (audit log) timeline */
.activity {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.activity__card {
    width: 100%;
}

.activity__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.activity__filter {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 12rem;
}

.activity__filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.activity__filter-select {
    min-width: 12rem;
}

.activity__timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.activity__day {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.activity__day-heading {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.activity__entries {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 0.25rem;
}

.activity__entries::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 1.15rem;
    width: 1px;
    background: var(--border);
}

.activity__entry {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 0;
    position: relative;
}

.activity__entry:first-child {
    padding-top: 0.35rem;
}

.activity__entry:last-child {
    padding-bottom: 0.35rem;
}

.activity__icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--muted-foreground);
}

.activity__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
    padding-top: 0.15rem;
}

.activity__summary {
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.35;
}

.activity__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.activity__time {
    font-size: 0.8rem;
    color: var(--muted-foreground);
    line-height: 1.3;
    cursor: default;
}

.keepers {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.keepers__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.keepers__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem;
}

.keepers__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.keepers__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 650;
    color: var(--foreground);
    line-height: 1.3;
}

.keepers__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.keepers__filter {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 8rem;
}

.keepers__filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.keepers__filter-select {
    min-width: 8rem;
}

.keepers__groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.keepers__commissioner-split {
    display: flex;
    align-items: center;
    padding-block: 0.35rem;
}

.keepers__commissioner-rule {
    width: 100%;
}

.keeper-group {
    width: 100%;
}

.keeper-group__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.keeper-group__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.keeper-group__name {
    margin: 0;
}

.keeper-group__cost-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.keeper-group__adjusted {
    font-size: 0.7rem;
    font-weight: 500;
}

.keeper-group--hidden .keeper-group__hidden {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.35rem 0;
    color: var(--muted-foreground);
    font-size: 0.9rem;
    line-height: 1.45;
}

.keeper-group__hidden svg,
.keeper-group__hidden i {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.keepers__commissioner-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.keepers__commissioner-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.3;
}

.keeper-peek-banner {
    margin-bottom: 1rem;
}

.keeper-peek-banner--active {
    margin-bottom: 1rem;
}

.keeper-peek-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.keeper-peek-banner__dialog {
    max-width: 28rem;
}

.keepers-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.keepers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.keepers-table th,
.keepers-table td {
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

.keepers-table thead th {
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.keepers-table__row:last-child td {
    border-bottom: none;
}

.keepers-table__player {
    font-weight: 600;
    color: var(--foreground);
}

.keepers-table__muted {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.keepers-table__empty {
    color: var(--muted-foreground);
    font-style: italic;
    white-space: normal;
}

/* Position badge */
.position-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    min-width: 2.25rem;
    justify-content: center;
}

.position-badge--qb {
    color: color-mix(in srgb, #1d4ed8 85%, var(--foreground));
    border-color: color-mix(in srgb, #3b82f6 45%, var(--border));
    background: color-mix(in srgb, #3b82f6 16%, var(--muted));
}

.position-badge--rb {
    color: color-mix(in srgb, #15803d 85%, var(--foreground));
    border-color: color-mix(in srgb, #22c55e 45%, var(--border));
    background: color-mix(in srgb, #22c55e 16%, var(--muted));
}

.position-badge--wr {
    color: color-mix(in srgb, #b45309 88%, var(--foreground));
    border-color: color-mix(in srgb, #f59e0b 45%, var(--border));
    background: color-mix(in srgb, #f59e0b 16%, var(--muted));
}

.position-badge--te {
    color: color-mix(in srgb, #0f766e 85%, var(--foreground));
    border-color: color-mix(in srgb, #14b8a6 45%, var(--border));
    background: color-mix(in srgb, #14b8a6 16%, var(--muted));
}

.position-badge--k {
    color: color-mix(in srgb, #a16207 88%, var(--foreground));
    border-color: color-mix(in srgb, #eab308 45%, var(--border));
    background: color-mix(in srgb, #eab308 14%, var(--muted));
}

.position-badge--dst {
    color: color-mix(in srgb, #b91c1c 82%, var(--foreground));
    border-color: color-mix(in srgb, var(--destructive) 45%, var(--border));
    background: color-mix(in srgb, var(--destructive) 14%, var(--muted));
}

.dark .position-badge--qb {
    color: color-mix(in srgb, #60a5fa 90%, var(--foreground));
}

.dark .position-badge--rb {
    color: color-mix(in srgb, #4ade80 90%, var(--foreground));
}

.dark .position-badge--wr {
    color: color-mix(in srgb, #fbbf24 90%, var(--foreground));
}

.dark .position-badge--te {
    color: color-mix(in srgb, #2dd4bf 90%, var(--foreground));
}

.dark .position-badge--k {
    color: color-mix(in srgb, #fcd34d 90%, var(--foreground));
}

.dark .position-badge--dst {
    color: color-mix(in srgb, #f87171 90%, var(--foreground));
}

.position-badge--unknown {
    color: var(--muted-foreground);
    border-color: var(--border);
    background: var(--muted);
}

/* Player picker */
.player-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.player-picker__search {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.player-picker__loading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-picker__empty {
    margin: 0;
    font-size: 0.875rem;
}

.player-picker__results {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--card) 94%, var(--foreground) 6%);
    max-height: 18rem;
    overflow-y: auto;
}

.player-picker__result {
    border-bottom: 1px solid var(--border);
}

.player-picker__result:last-child {
    border-bottom: none;
}

.player-picker__result-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--foreground);
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease;
}

.player-picker__result-button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.player-picker__result-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.player-picker__result--disabled .player-picker__result-button {
    opacity: 0.45;
}

.player-picker__headshot {
    flex-shrink: 0;
}

.player-picker__name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keeper submission */
.keeper-submission {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.keeper-submission__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.keeper-submission__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 650;
    color: var(--foreground);
    line-height: 1.3;
}

.keeper-submission__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 40rem;
}

.keeper-submission__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.keeper-submission__deadline {
    margin: 0;
    font-size: 0.875rem;
}

.keeper-submission__finalized-banner,
.keeper-submission__conflict {
    width: 100%;
}

.keeper-submission__commissioner,
.keeper-submission__card {
    width: 100%;
}

.keeper-submission__card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.keeper-submission__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.keeper-submission__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.keeper-submission__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.keeper-submission__form:disabled {
    opacity: 0.85;
}

.keeper-submission__selected {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--card) 94%, var(--foreground) 6%);
}

.keeper-submission__selected-empty {
    margin: 0;
    padding: 0.9rem 1rem;
    font-size: 0.875rem;
    font-style: italic;
}

.keeper-submission__selected-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border);
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.keeper-submission__selected-row:last-child {
    border-bottom: none;
}

.keeper-player-cell-trigger {
    appearance: none;
    display: flex;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 0.375rem;
}

.keeper-player-cell-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px var(--ring);
}

.keeper-submission__selected-row:hover,
.keeper-submission__pool-row:hover {
    background: color-mix(in srgb, var(--muted) 70%, transparent);
}

.keeper-submission__player-row--selected,
.keeper-submission__player-row--selected:hover {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, var(--border));
}

.keeper-player-cell {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}

.keeper-player-cell__headshot {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.keeper-player-cell__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.65rem 1.1rem;
    min-width: 0;
    flex: 1;
}

.keeper-player-cell__main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    box-sizing: border-box;
    /* Fixed width so keep-cost panels stay adjacent and vertically aligned */
    flex: 0 0 14.5rem;
    width: 14.5rem;
    max-width: 100%;
    min-width: 0;
}

.keeper-player-cell__primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.keeper-player-cell__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.keeper-player-cell__team,
.keeper-player-cell__adp {
    font-size: 0.8rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.keeper-player-cell__acquired {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.35rem;
}

.keeper-player-cell__fact-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.keeper-player-cell__fact-label--cost {
    color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground) 28%);
}

.keeper-player-cell__acquired-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.keeper-player-cell__acquired-type {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
}

.keeper-player-cell__acquired-round,
.keeper-player-cell__shared {
    flex-shrink: 0;
}

.keeper-player-cell__cost-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    box-sizing: border-box;
    flex: 0 0 11.25rem;
    width: 11.25rem;
    min-height: 6.85rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid color-mix(in oklch, var(--border) 70%, var(--foreground) 30%);
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--card) 88%, var(--foreground) 12%);
}

.keeper-player-cell__cost-value {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--foreground);
}

.keeper-player-cell__delta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.25;
    white-space: nowrap;
    padding: 0.12rem 0.45rem;
    border-radius: 9999px;
    border-width: 1px;
    border-style: solid;
}

.keeper-player-cell__delta--advantage {
    color: #fff;
    border-color: #15803d;
    background: #16a34a;
}

.keeper-player-cell__delta--disadvantage {
    color: #fff;
    border-color: #b91c1c;
    background: #dc2626;
}

.keeper-player-cell__delta--even {
    color: var(--muted-foreground);
    border-color: var(--border);
    background: var(--muted);
}

.keeper-submission__remove {
    color: var(--muted-foreground);
    margin-left: auto;
    flex-shrink: 0;
}

.keeper-submission__hint {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
}

.keeper-submission__picker,
.keeper-submission__pool {
    width: 100%;
}

.keeper-submission__pool-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.65rem;
}

.keeper-submission__pool-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.keeper-submission__sort-trigger {
    gap: 0.4rem;
}

.keeper-submission__sort-caret {
    opacity: 0.7;
}

.keeper-submission__sort-menu {
    min-width: 9.5rem;
}

.keeper-submission__sort-item--active {
    background: var(--accent);
    color: var(--accent-foreground);
}

.keeper-submission__pool-empty {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.keeper-submission__pool-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--card) 94%, var(--foreground) 6%);
}

.keeper-submission__pool-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border);
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.keeper-submission__pool-row:last-child {
    border-bottom: none;
}

.keeper-submission__inline-link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.keeper-submission__inline-link:hover {
    color: color-mix(in oklch, var(--primary) 85%, var(--foreground));
}

.keeper-submission__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
    padding-top: 0.25rem;
}

/* ── Season roster finalization (rollover) ─────────────────────────────── */

.season-rollover {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    padding-bottom: 4.5rem;
}

.season-rollover__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.season-rollover__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.season-rollover__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 650;
    color: var(--foreground);
    line-height: 1.3;
}

.season-rollover__season {
    font-weight: 550;
    color: var(--muted-foreground);
}

.season-rollover__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 42rem;
}

.season-rollover__notice {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    font-style: italic;
}

.season-rollover__progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--card) 94%, var(--foreground) 6%);
}

.season-rollover__progress-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.season-rollover__progress-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
}

.season-rollover__progress-count {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.season-rollover__progress-bar {
    width: 100%;
}

.season-rollover__franchises {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.season-rollover__footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.85rem 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--background) 0%, transparent) 0%,
            var(--background) 28%,
            var(--background) 100%
        );
    border-top: 1px solid var(--border);
}

.team-roster-editor {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--card);
    overflow: hidden;
    padding-inline: 1.25rem;
}

.team-roster-editor__trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.team-roster-editor__trigger-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.team-roster-editor__logo {
    flex-shrink: 0;
}

.team-roster-editor__name {
    font-weight: 600;
    color: var(--foreground);
}

.team-roster-editor__abbr {
    font-size: 0.85rem;
}

.team-roster-editor__count {
    margin-left: auto;
    flex-shrink: 0;
}

.team-roster-editor__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.25rem;
}

.team-roster-editor__franchise-errors {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.team-roster-editor__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--card) 94%, var(--foreground) 6%);
}

.team-roster-editor__empty {
    margin: 0;
    padding: 0.9rem 1rem;
    font-size: 0.875rem;
    font-style: italic;
}

.team-roster-editor__row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(8rem, 0.9fr) auto;
    gap: 0.65rem 0.85rem;
    align-items: end;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border);
}

.team-roster-editor__row--with-round {
    grid-template-columns: minmax(0, 1.4fr) minmax(8rem, 0.9fr) minmax(5.5rem, 0.55fr) auto;
}

.team-roster-editor__row--full {
    grid-template-columns: minmax(0, 1.3fr) minmax(5.5rem, 0.5fr) minmax(8rem, 0.85fr) minmax(5.5rem, 0.5fr) auto;
}

.team-roster-editor__keep-cost {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.team-roster-editor__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.team-roster-editor__row:last-child {
    border-bottom: none;
}

.team-roster-editor__player {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    align-self: center;
}

.team-roster-editor__player-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-roster-editor__source,
.team-roster-editor__round {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.team-roster-editor__round--placeholder {
    min-height: 0;
}

.team-roster-editor__field-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.team-roster-editor__row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: center;
    padding-bottom: 0.1rem;
}

.team-roster-editor__row-errors {
    grid-column: 1 / -1;
}

.team-roster-editor__picker {
    width: 100%;
}

@media (max-width: 720px) {
    .team-roster-editor__row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .team-roster-editor__player {
        grid-column: 1 / 2;
    }

    .team-roster-editor__row-actions {
        grid-column: 2 / 3;
        grid-row: 1;
        align-self: start;
    }

    .team-roster-editor__source,
    .team-roster-editor__round,
    .team-roster-editor__keep-cost {
        grid-column: 1 / -1;
    }

    .team-roster-editor__round--placeholder {
        display: none;
    }

    .team-roster-editor__row--full {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Player pool */
.player-pool {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.player-pool__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.player-pool__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 650;
    color: var(--foreground);
    line-height: 1.3;
}

.player-pool__subtitle {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 40rem;
}

.player-pool__card {
    width: 100%;
}

.player-pool__table {
    width: 100%;
    min-height: 12rem;
}

.player-pool__header,
.player-row {
    display: grid;
    grid-template-columns:
        minmax(3rem, 0.35fr)
        minmax(10rem, 2fr)
        minmax(3.5rem, 0.45fr)
        minmax(4.75rem, 0.55fr)
        minmax(3.5rem, 0.45fr)
        auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.35rem;
}

.player-pool__header {
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 500;
    padding-bottom: 0.6rem;
    margin-bottom: 0.15rem;
}

.player-pool__sort {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    text-align: left;
}

.player-pool__sort:hover,
.player-pool__sort--active {
    color: var(--foreground);
}

.player-pool__sort:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 0.2rem;
}

.player-pool__sort:disabled {
    cursor: default;
}

.player-pool__row-wrap {
    border-bottom: 1px solid var(--border);
    border-radius: 0.4rem;
    cursor: pointer;
    outline: none;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.player-pool__row-wrap:last-child {
    border-bottom: none;
}

.player-pool__row-wrap:hover {
    background: color-mix(in srgb, var(--muted) 70%, transparent);
}

.player-pool__row-wrap:focus-visible {
    box-shadow: inset 0 0 0 1px var(--ring);
}

.player-pool__row-wrap--selected {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, var(--border));
}

.player-row {
    min-height: 2.75rem;
}

.player-row__player {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.player-row__headshot {
    flex-shrink: 0;
}

.player-row__name {
    font-weight: 600;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-row__rank {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.player-row__team,
.player-row__adp {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.player-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    min-height: 1.5rem;
}

.player-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem 1rem;
    width: 100%;
}

.player-filter-bar .position-filter-group,
.player-filter-bar .experience-years-filter {
    flex: 0 0 auto;
}

.position-filter-group {
    flex-wrap: nowrap;
}

.position-filter-group__btn {
    min-width: 2.5rem;
    letter-spacing: 0.02em;
    font-weight: 650;
}

.player-filter-bar__search {
    position: relative;
    flex: 1 1 12rem;
    max-width: 20rem;
    min-width: 10rem;
    margin-left: auto;
}

.player-filter-bar__search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    color: var(--muted-foreground);
    pointer-events: none;
    z-index: 1;
}

.player-filter-bar__search-input {
    width: 100%;
    padding-left: 2.15rem;
}

@media (max-width: 720px) {
    .player-pool__header,
    .player-row {
        grid-template-columns:
            minmax(2.5rem, 0.3fr)
            minmax(0, 1.6fr)
            minmax(3rem, 0.4fr)
            minmax(4.25rem, 0.5fr)
            minmax(3rem, 0.4fr)
            auto;
    }

    .player-filter-bar__search {
        max-width: none;
    }
}

/* Player detail drawer */
.player-detail-drawer {
    width: min(26rem, 100vw);
    max-width: 100%;
    background: var(--card);
    color: var(--card-foreground);
    border-left: 1px solid var(--border);
}

.player-detail-drawer__panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
    outline: none;
    padding: 0.25rem 0.15rem 0.75rem;
}

.player-detail-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.player-detail-drawer__header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.player-detail-drawer__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.3;
}

.player-detail-drawer__description {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.player-detail-drawer__header-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.player-detail-drawer__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.player-detail-drawer__identity {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.player-detail-drawer__headshot {
    flex-shrink: 0;
}

.player-detail-drawer__identity-text {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.player-detail-drawer__name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--foreground);
}

.player-detail-drawer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
}

.player-detail-drawer__team {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.player-detail-drawer__team-logo {
    flex-shrink: 0;
    height: 1.35rem;
    width: 1.35rem;
}

.player-detail-drawer__team-abbr {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.player-detail-drawer__jersey {
    font-size: 0.9rem;
    font-weight: 500;
}

.player-detail-drawer__inactive {
    font-size: 0.7rem;
}

.player-detail-drawer__adp {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--muted);
}

.player-detail-drawer__section-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.player-detail-drawer__adp-value {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--foreground);
}

.player-detail-drawer__adp-source,
.player-detail-drawer__adp-empty {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.player-detail-drawer__extra {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Player schedule panel */
.player-schedule {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--muted);
}

.player-schedule__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.player-schedule__title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.player-schedule__bye-badge {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.player-schedule__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.player-schedule__row {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.player-schedule__row:last-child {
    border-bottom: none;
}

.player-schedule__row--bye {
    opacity: 0.72;
}

.player-schedule__week {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted-foreground);
}

.player-schedule__opponent {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.player-schedule__opponent--bye {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.player-schedule__logo {
    flex-shrink: 0;
    height: 1.5rem;
    width: 1.5rem;
}

.player-schedule__matchup {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-schedule__meta {
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Player news panel */
.player-news {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--muted);
}

.player-news__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.player-news__title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.player-news__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.player-news__item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.player-news__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.player-news__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 0.7rem;
    font-size: 0.78rem;
}

.player-news__source {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.player-news__headline {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--foreground);
}

.player-news__text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--muted-foreground);
}

/* Player statistics panel */
.player-statistics {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--muted);
}

.player-statistics__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.player-statistics__title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.player-statistics__toggle {
    flex-shrink: 0;
}

.player-statistics__year,
.player-statistics__category,
.player-statistics__stat-block {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.player-statistics__year + .player-statistics__year,
.player-statistics__category--statistic + .player-statistics__category--statistic,
.player-statistics__stat-block + .player-statistics__stat-block {
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.player-statistics__year-header,
.player-statistics__stat-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.player-statistics__year-title,
.player-statistics__category-title,
.player-statistics__stat-title {
    margin: 0;
    color: var(--foreground);
}

.player-statistics__year-title {
    font-size: 1rem;
    font-weight: 700;
}

.player-statistics__year-team,
.player-statistics__stat-label,
.player-statistics__team-suffix {
    font-size: 0.8rem;
}

.player-statistics__category-title {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.player-statistics__category--statistic > .player-statistics__category-title {
    font-size: 0.9rem;
    font-weight: 700;
}

.player-statistics__stat-title {
    font-size: 0.88rem;
    font-weight: 600;
}

.player-statistics__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.player-statistics__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.75rem;
}

.player-statistics__label {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.player-statistics__value {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
    text-align: right;
}

.player-statistics__chart {
    width: 100%;
    min-width: 0;
}

/* Player note editor */
.player-note-editor {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--muted);
}

.player-note-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.player-note-editor__title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.player-note-editor__dirty {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--warning, #f59e0b);
}

.player-note-editor__dirty-icon {
    width: 0.85rem;
    height: 0.85rem;
    font-size: 0.85rem;
}

.player-note-editor__privacy {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.player-note-editor__privacy-icon {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.player-note-editor__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.player-note-editor__label {
    font-size: 0.85rem;
}

.player-note-editor__textarea {
    min-height: 7.5rem;
    width: 100%;
}

.player-note-editor__meta {
    display: flex;
    justify-content: flex-end;
}

.player-note-editor__counter {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.player-note-editor__counter--over {
    color: var(--destructive);
    font-weight: 600;
}

.player-note-editor__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.player-note-editor__loading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-note-editor__skeleton {
    width: 100%;
}

.player-note-editor__skeleton-line {
    width: 40%;
}

.player-detail-drawer__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* Watch toggle */
.watch-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.watch-toggle__button {
    color: var(--muted-foreground);
}

.watch-toggle__button--watched {
    color: var(--primary);
}

.watch-toggle__icon {
    width: 1.1rem;
    height: 1.1rem;
    font-size: 1.1rem;
}

/* Watch list page */
.watch-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.watch-list__intro {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.watch-list__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 650;
    color: var(--foreground);
    line-height: 1.3;
}

.watch-list__subtitle {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 40rem;
}

.watch-list__card {
    width: 100%;
}

.watch-list__table {
    width: 100%;
    min-height: 8rem;
}

.watch-list__header,
.watch-list__row {
    display: grid;
    grid-template-columns:
        minmax(12rem, 2.2fr)
        minmax(3.5rem, 0.45fr)
        minmax(6rem, 0.7fr)
        auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.35rem;
}

.watch-list__header {
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 500;
    padding-bottom: 0.6rem;
    margin-bottom: 0.15rem;
}

.watch-list__row {
    min-height: 2.75rem;
    border-bottom: 1px solid var(--border);
}

.watch-list__row:last-child {
    border-bottom: none;
}

.watch-list__player {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.watch-list__headshot {
    flex-shrink: 0;
}

.watch-list__name {
    font-weight: 600;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watch-list__added {
    font-size: 0.875rem;
}

.watch-list__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.watch-list__rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .watch-list__header,
    .watch-list__row {
        grid-template-columns:
            minmax(0, 1.6fr)
            minmax(3rem, 0.5fr)
            auto;
    }

    .watch-list__col--added,
    .watch-list__added {
        display: none;
    }
}

/* Rankings viewer */
.rankings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.rankings__intro {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rankings__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 650;
    color: var(--foreground);
    line-height: 1.3;
}

.rankings__subtitle {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 40rem;
}

.rankings__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.rankings__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.rankings__empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.rankings__list-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.rankings__list-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted-foreground);
}

.rankings__list-select {
    min-width: 12rem;
}

.rankings__card {
    width: 100%;
}

.rankings__filters {
    padding-bottom: 0;
}

.experience-years-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.experience-years-filter__label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.experience-years-filter__select {
    min-width: 4.5rem;
}

.rankings__table {
    width: 100%;
    min-height: 8rem;
}

.rankings__header,
.ranking-entry-row {
    display: grid;
    grid-template-columns:
        minmax(3rem, 0.35fr)
        minmax(10rem, 2fr)
        minmax(3.5rem, 0.45fr)
        minmax(4.75rem, 0.55fr)
        minmax(3.5rem, 0.45fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.35rem;
}

.rankings__header {
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 500;
    padding-bottom: 0.6rem;
    margin-bottom: 0.15rem;
}

.rankings__sort {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    text-align: left;
}

.rankings__sort:hover,
.rankings__sort--active {
    color: var(--foreground);
}

.rankings__sort:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 0.2rem;
}

.rankings__sort:disabled {
    cursor: default;
}

.rankings__row-wrap {
    border-bottom: 1px solid var(--border);
    border-radius: 0.4rem;
    cursor: pointer;
    outline: none;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.rankings__row-wrap:last-child {
    border-bottom: none;
}

.rankings__row-wrap:hover {
    background: color-mix(in srgb, var(--muted) 70%, transparent);
}

.rankings__row-wrap:focus-visible {
    box-shadow: inset 0 0 0 1px var(--ring);
}

.rankings__row-wrap--selected {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, var(--border));
}

.ranking-entry-row {
    min-height: 2.75rem;
}

.rankings__row-wrap .ranking-entry-row {
    border-bottom: none;
}

.ranking-entry-row__rank {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ranking-entry-row__player {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.ranking-entry-row__headshot {
    flex-shrink: 0;
}

.ranking-entry-row__name {
    font-weight: 600;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-entry-row__player-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-entry-row__team,
.ranking-entry-row__adp {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.rankings__tier {
    display: flex;
    flex-direction: column;
}

.rankings__tier-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0.35rem 0 0;
    padding: 0.45rem 0.35rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    background: color-mix(in srgb, var(--card) 92%, var(--muted));
    border-bottom: 1px solid var(--border);
}

.rankings__rows,
.rankings__row-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .rankings__header,
    .ranking-entry-row {
        grid-template-columns:
            minmax(2.5rem, 0.3fr)
            minmax(0, 1.6fr)
            minmax(3rem, 0.4fr)
            minmax(4.25rem, 0.5fr)
            minmax(3rem, 0.4fr);
    }
}

/* Ranking list reorder editor */
.ranking-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 5rem;
}

.ranking-editor__conflict {
    margin-bottom: 0.25rem;
}

.ranking-editor__table-head {
    display: grid;
    grid-template-columns: 1.75rem minmax(3rem, 0.35fr) minmax(8rem, 1.4fr) minmax(6rem, 8rem) auto auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.35rem 0.35rem 0.55rem;
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
}

.ranking-editor__col-handle,
.ranking-editor__col-remove,
.ranking-editor__col-move {
    width: 1.75rem;
}

.ranking-editor__row {
    display: grid;
    grid-template-columns: minmax(3rem, 0.35fr) minmax(8rem, 1.4fr) minmax(6rem, 8rem) auto;
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
}

.ranking-editor__rank {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ranking-editor__player {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.ranking-editor__headshot {
    flex-shrink: 0;
}

.ranking-editor__name {
    font-weight: 600;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-editor__tier {
    min-width: 0;
}

.ranking-editor__row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.ranking-editor__picker {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

.ranking-editor__picker-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
}

.ranking-editor__footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.85rem 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--background) 0%, transparent) 0%,
            var(--background) 28%,
            var(--background) 100%
        );
    border-top: 1px solid var(--border);
}

.ranking-editor__footer-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.ranking-editor__count {
    font-size: 0.85rem;
}

.ranking-editor__dirty {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--warning, #f59e0b);
}

.ranking-editor__dirty-icon {
    width: 0.85rem;
    height: 0.85rem;
    font-size: 0.85rem;
}

.ranking-editor__footer-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

@media (max-width: 720px) {
    .ranking-editor__table-head {
        display: none;
    }

    .ranking-editor__row {
        grid-template-columns: minmax(2.5rem, 0.3fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "rank player remove"
            "tier tier tier";
    }

    .ranking-editor__rank {
        grid-area: rank;
    }

    .ranking-editor__player {
        grid-area: player;
    }

    .ranking-editor__tier {
        grid-area: tier;
    }

    .ranking-editor__row-actions {
        grid-area: remove;
    }
}

/* Drafts list */
.drafts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.drafts__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.drafts__header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.drafts__schedule-block {
    margin: 0.75rem 0 0;
    max-width: 40rem;
}

.drafts__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
}

.drafts__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.drafts__list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
}

.drafts__empty-hint {
    margin: -0.25rem 0 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.45;
}

.draft-card {
    background: var(--card);
    border-color: var(--border);
    color: var(--card-foreground);
}

.draft-card--muted {
    opacity: 0.7;
    color: var(--muted-foreground);
}

.draft-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    min-width: 0;
}

.draft-card__title-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.draft-card__title {
    margin: 0;
    line-height: 1.25;
}

.draft-card__kind {
    margin: 0;
}

.draft-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.85rem;
}

.draft-card__schedule {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.draft-card__schedule-label {
    font-size: 0.8rem;
}

.draft-card__schedule-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--foreground);
}

.draft-card--muted .draft-card__schedule-value {
    color: var(--muted-foreground);
}

.draft-card__countdown {
    font-size: 0.85rem;
}

.draft-card__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.draft-card__action {
    white-space: nowrap;
}

/* Draft state badge */
.draft-state-badge {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.draft-state-badge--scheduled {
    color: var(--muted-foreground);
    border-color: var(--border);
    background: var(--muted);
}

.draft-state-badge--not-scheduled {
    color: var(--muted-foreground);
    border-color: var(--border);
    background: transparent;
}

.draft-state-badge--in-progress {
    color: var(--tertiary-foreground);
    border-color: var(--tertiary);
    background: var(--tertiary);
}

.draft-state-badge--paused {
    color: color-mix(in srgb, var(--warning, #f59e0b) 90%, var(--foreground));
    border-color: color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border));
    background: color-mix(in srgb, var(--warning, #f59e0b) 16%, var(--muted));
}

.draft-state-badge--completed {
    color: var(--muted-foreground);
    border-color: var(--border);
    background: color-mix(in srgb, var(--muted) 80%, transparent);
}

.draft-state-badge--cancelled {
    color: color-mix(in srgb, var(--destructive) 90%, var(--foreground));
    border-color: color-mix(in srgb, var(--destructive) 45%, var(--border));
    background: color-mix(in srgb, var(--destructive) 14%, var(--muted));
}

/*
 * BlazorBlueprint floating portals (DatePicker, TimePicker, Select, etc.) must stack
 * above BbDialog / BbSheet shells, which use Tailwind z-50. Popover content also ships
 * with a z-50 utility class — keep the portaled wrapper clearly above dialog chrome.
 */
[data-portal-content="true"] {
    z-index: 10000 !important;
}

[data-portal-content="true"] > .z-50 {
    z-index: 10000 !important;
}

/* Schedule draft dialog
   Pin within viewport insets. Header + footer stay put; body scrolls.
   First-round order list has its own scroll so season/date stay reachable.
   Center with left/right + margin (not translate/transform) so SortableJS's
   position:fixed drag fallback is not trapped/clipped by a containing block. */
.fixed.z-50.grid.schedule-draft {
    top: 1rem !important;
    bottom: auto;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    --tw-translate-x: 0;
    --tw-translate-y: 0 !important;
    translate: none !important;
    transform: none !important;
    max-height: calc(100dvh - 2rem);
    width: min(32rem, calc(100vw - 2rem));
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    align-content: stretch;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.schedule-draft__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 0.15rem 0.5rem 0;
}

.schedule-draft__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.schedule-draft__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.schedule-draft__datetime {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    align-items: stretch;
}

.schedule-draft__datetime > .schedule-draft__field {
    min-width: 0;
    width: 100%;
}

.schedule-draft__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
}

.schedule-draft__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.schedule-draft__row-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.schedule-draft__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    flex: 0 0 auto;
    margin-top: 0.5rem;
}

.schedule-draft__order {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    min-height: 0;
}

.schedule-draft__order-label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.schedule-draft__order .reorderable-list {
    max-height: min(40vh, 18rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* First-round order editor */
.first-round-order {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.first-round-order__hint,
.first-round-order__empty {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
}

.first-round-order .reorderable-list__items {
    gap: 0;
}

.first-round-order .reorderable-list__row {
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.15rem;
}

.first-round-order .reorderable-list__handle {
    margin-top: 0;
}

.first-round-order .reorderable-list__actions {
    gap: 0;
}

.first-round-order__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: 2rem;
}

.first-round-order__position {
    flex-shrink: 0;
    width: 1.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
    text-align: center;
}

.first-round-order__logo {
    flex-shrink: 0;
}

.first-round-order__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.first-round-order__actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.15rem;
}

.first-round-order-panel__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.first-round-order-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.schedule-draft__method-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.draft-order-selection-panel__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.draft-order-selection-panel__meta {
    margin: 0;
}

.draft-order-selection-panel__section-label {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.draft-order-selection-panel__hint {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    line-height: 1.45;
}

.draft-order-selection-panel__turn-expires {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.85rem;
}

.draft-order-selection-panel__queue {
    min-width: 0;
}

.draft-order-selection-panel__turns {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.draft-order-selection-panel__turn {
    display: grid;
    grid-template-columns: 2rem auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.draft-order-selection-panel__turn--current {
    border-color: var(--info);
}

.draft-order-selection-panel__turn--claimed {
    opacity: 0.85;
}

.draft-order-selection-panel__turn-seq {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
}

.draft-order-selection-panel__turn-logo {
    flex-shrink: 0;
}

.draft-order-selection-panel__turn-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-order-selection-panel__turn-slot {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.draft-order-selection-panel__claim,
.draft-order-selection-panel__finalize {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.draft-order-selection-panel__finalize-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--border);
}

.draft-order-selection-panel__finalize-team {
    font-size: 0.875rem;
    font-weight: 500;
}

.draft-order-selection-panel__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.draft-order-selection-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* Draft detail (pre-draft lobby) */
.draft-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.draft-detail__breadcrumb {
    display: flex;
    align-items: center;
}

.draft-detail__breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted-foreground);
    font-size: 0.85rem;
    font-weight: 500;
}

.draft-detail__breadcrumb-link:hover {
    color: var(--foreground);
}

.draft-detail__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.draft-detail__title-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.draft-detail__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.draft-detail__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.2;
}

.draft-detail__kind {
    margin: 0;
    font-size: 0.95rem;
}

.draft-detail__schedule {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.9rem;
}

.draft-detail__enter {
    white-space: nowrap;
}

.draft-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    gap: 1rem;
    align-items: start;
}

.draft-detail__main,
.draft-detail__aside {
    min-width: 0;
}

.draft-detail__main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.draft-detail__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.commissioner-remaining-tasks {
    background: var(--card);
    border-color: var(--border);
}

@media (max-width: 900px) {
    .draft-detail__layout {
        grid-template-columns: 1fr;
    }
}

/* Draft settings summary */
.draft-settings-summary {
    background: var(--card);
    border-color: var(--border);
    color: var(--card-foreground);
}

.draft-settings-summary__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.draft-settings-summary__edit {
    flex-shrink: 0;
    margin: -0.35rem -0.5rem 0 0;
}

.draft-settings-summary__slots {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.draft-settings-summary__slots-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.draft-settings-summary__empty {
    margin: 0;
    font-size: 0.875rem;
}

.draft-settings-summary__slot-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.draft-settings-summary__slot-kind {
    font-size: 0.8rem;
    font-weight: 500;
}

.draft-settings-summary__slot-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Draft settings editor */
.draft-settings-editor {
    background: var(--card);
    border-color: var(--border);
    color: var(--card-foreground);
}

.draft-settings-editor__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.draft-settings-editor__conflict {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.draft-settings-editor__locked {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.draft-settings-editor__fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.draft-settings-editor__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.draft-settings-editor__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.draft-settings-editor__row-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.draft-settings-editor__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.draft-settings-editor__schedule {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.draft-settings-editor__deadline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.draft-settings-editor__deadline-label {
    color: var(--muted-foreground);
}

.draft-settings-editor__deadline-value {
    font-weight: 600;
    color: var(--foreground);
}

.draft-settings-editor__datetime {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    align-items: stretch;
}

.draft-settings-editor__datetime > .draft-settings-editor__field {
    min-width: 0;
    width: 100%;
}

.draft-settings-editor__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

/* Pick order table */
.pick-order {
    background: var(--card);
    border-color: var(--border);
    color: var(--card-foreground);
}

.pick-order__slot-warning {
    margin-bottom: 0.75rem;
}

.pick-order__slot-warning-list {
    margin: 0.5rem 0 0;
    padding-left: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pick-order__round-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.65rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
}

.pick-order__round-link {
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
    text-decoration: none;
}

.pick-order__round-link:hover,
.pick-order__round-link:focus-visible {
    text-decoration: underline;
}

.pick-order__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: min(70vh, 48rem);
    overflow: auto;
}

.pick-order__round {
    display: flex;
    flex-direction: column;
}

.pick-order__round-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 0.55rem 0.15rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.pick-order__rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pick-order__row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.15rem;
    border-bottom: 1px solid var(--border);
}

.pick-order__row:last-child {
    border-bottom: none;
}

.pick-order__pick {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.pick-order__pick-label {
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
}

.pick-order__overall {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.pick-order__owner {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pick-order__team {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pick-order__player {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pick-order__badges {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.pick-order__traded-wrap {
    display: inline-flex;
}

.pick-order__reassign {
    height: 1.75rem;
    gap: 0.25rem;
    padding-inline: 0.4rem;
    font-size: 0.75rem;
}

.pick-order__reassign-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-block: 0.25rem;
}

.pick-order__reassign-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

@media (max-width: 640px) {
    .pick-order__row {
        grid-template-columns: 4.25rem minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .pick-order__badges {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* Compensation pick panel */
.compensation-pick {
    background: var(--card);
    border-color: var(--border);
    color: var(--card-foreground);
}

.compensation-pick__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.compensation-pick__empty {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.compensation-pick__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.compensation-pick__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--muted);
}

.compensation-pick__slot {
    font-size: 0.8rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
}

.compensation-pick__team {
    font-size: 0.9rem;
    color: var(--foreground);
    overflow-wrap: anywhere;
}

.compensation-pick__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.compensation-pick__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.compensation-pick__fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.compensation-pick__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.compensation-pick__field-hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.compensation-pick__actions {
    display: flex;
    justify-content: flex-start;
}

/* Mock drafts page */
.mock-drafts__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mock-drafts__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
}

.mock-drafts__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 42rem;
}

.mock-drafts__list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
}

.mock-drafts__empty-hint {
    margin: -0.25rem 0 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.45;
}

.mock-drafts__create {
    margin-bottom: 1.25rem;
    background: var(--card);
    border-color: var(--border);
    color: var(--card-foreground);
}

.mock-drafts__create-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mock-drafts__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.mock-drafts__method-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mock-drafts__order {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.mock-drafts__order-label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.mock-drafts__persistent {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.mock-drafts__persistent-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 16rem;
}

.mock-drafts__hint {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.mock-drafts__create-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.mock-draft-card {
    background: var(--card);
    border-color: var(--border);
    color: var(--card-foreground);
}

.mock-draft-card--muted {
    opacity: 0.7;
    color: var(--muted-foreground);
}

.mock-draft-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    min-width: 0;
}

.mock-draft-card__title-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.mock-draft-card__title {
    margin: 0;
    line-height: 1.25;
}

.mock-draft-card__meta {
    margin: 0;
}

.mock-draft-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.85rem;
}

.mock-draft-card__times {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.mock-draft-card__time,
.mock-draft-card__purge {
    font-size: 0.85rem;
}

.mock-draft-card__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mock-draft-card__action {
    white-space: nowrap;
}

/* Draft room — full-viewport live draft shell */
.draft-room-shell {
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: var(--background);
    color: var(--foreground);
}

.draft-room {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    height: 100%;
    padding: 0.75rem;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

.draft-room__skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.draft-room__skip-link:focus {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.65rem 0.9rem;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border-radius: 0.4rem;
    background: var(--card);
    color: var(--foreground);
    border: 1px solid var(--border);
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.draft-room a:focus-visible,
.draft-room button:focus-visible,
.draft-room [href]:focus-visible,
.draft-room summary:focus-visible,
.draft-room [role="button"]:focus-visible,
.draft-room [tabindex]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Form fields use their own border affordance; avoid a second colored outline. */
.draft-room input:focus,
.draft-room input:focus-visible,
.draft-room select:focus,
.draft-room select:focus-visible,
.draft-room textarea:focus,
.draft-room textarea:focus-visible {
    outline: none;
}

.draft-room__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 0 0 auto;
    min-width: 0;
}

.draft-room__header-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.draft-room__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--foreground);
}

.draft-room__header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.draft-room__meta-text {
    font-size: 0.9rem;
    color: var(--muted-foreground);
}

.draft-room__header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.commissioner-control-bar__item--destructive {
    color: var(--destructive);
}

.commissioner-control-bar__start-blocked {
    max-width: 16rem;
    white-space: normal;
    line-height: 1.35;
}

.draft-room__status-card {
    max-width: 28rem;
    margin: 1.5rem auto;
}

.draft-room__status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.35rem;
    color: var(--muted-foreground);
}

.draft-room__body {
    --dr-rail: 260px;
    --dr-recommended: minmax(18rem, 0.85fr);
    --dr-main: minmax(0, 1.25fr);
    --dr-side: 33%;
    display: grid;
    grid-template-columns: var(--dr-rail) var(--dr-recommended) var(--dr-main) var(--dr-side);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "rail clock clock side"
        "rail recommended main side";
    flex: 1 1 0%;
    gap: 0.75rem;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    transition: grid-template-columns 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.draft-room__body--completed {
    --dr-rail: 260px;
    --dr-main: minmax(0, 1fr);
    --dr-side: 33%;
    grid-template-columns: var(--dr-rail) var(--dr-main) var(--dr-side);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "rail main side";
}

.draft-room__body--custom-columns,
.draft-room__body--resizing {
    transition: none;
}

.draft-room__body--layout-reset {
    transition: grid-template-columns 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.draft-room__rail {
    grid-area: rail;
}

.draft-room__clock {
    grid-area: clock;
}

.draft-room__recommended {
    grid-area: recommended;
}

.draft-room__main {
    grid-area: main;
}

.draft-room__side {
    grid-area: side;
}

.draft-room__rail,
.draft-room__recommended,
.draft-room__main,
.draft-room__side {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    padding: 0.85rem;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    box-sizing: border-box;
}

/* Column resize handles — anchored to the panel's trailing edge */
.draft-room__resize {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;
    width: 0.85rem;
    bottom: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 0.65rem 0.65rem 0;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    appearance: none;
    display: grid;
    place-items: center;
}

.draft-room__resize::before {
    content: "";
    position: absolute;
    inset: 18% 35% 18% auto;
    width: 0.18rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 88%, var(--foreground));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--background) 55%, transparent);
    transition:
        width 160ms ease,
        inset 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
    opacity: 0.45;
}

.draft-room__resize::after {
    content: "";
    width: 0.28rem;
    height: 1.55rem;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 20%, var(--card-foreground) 0 1.1px, transparent 1.3px),
        radial-gradient(circle at 50% 50%, var(--card-foreground) 0 1.1px, transparent 1.3px),
        radial-gradient(circle at 50% 80%, var(--card-foreground) 0 1.1px, transparent 1.3px);
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity 160ms ease,
        transform 160ms ease;
    pointer-events: none;
    z-index: 1;
}

.draft-room__resize:hover::before,
.draft-room__resize:focus-visible::before,
.draft-room__resize--active::before,
.draft-room__resize--flash::before {
    inset: 12% 28% 12% auto;
    width: 0.28rem;
    background: color-mix(in srgb, var(--primary) 82%, white);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent),
        0 0 14px color-mix(in srgb, var(--primary) 40%, transparent);
    opacity: 1;
}

.draft-room__resize:hover,
.draft-room__resize:focus-visible,
.draft-room__resize--active {
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--primary) 12%, transparent) 100%
    );
}

.draft-room__resize:hover::after,
.draft-room__resize:focus-visible::after,
.draft-room__resize--active::after,
.draft-room__resize--flash::after {
    opacity: 0.9;
    transform: scale(1);
}

.draft-room__resize:focus {
    outline: none;
}

.draft-room__resize:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.draft-room__resize-tip {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    translate: -50% -130%;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
    background: color-mix(in srgb, var(--popover) 92%, var(--primary));
    color: var(--popover-foreground);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 120ms ease,
        translate 120ms ease;
}

.draft-room__resize--active .draft-room__resize-tip {
    opacity: 1;
    translate: -50% -150%;
}

.draft-room__body--resizing .draft-room__rail,
.draft-room__body--resizing .draft-room__recommended,
.draft-room__body--resizing .draft-room__main,
.draft-room__body--resizing .draft-room__side,
.draft-room__body--resizing .draft-room__clock {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

body.draft-room-resizing {
    cursor: col-resize !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.draft-room-resizing iframe,
body.draft-room-resizing img,
body.draft-room-resizing a,
body.draft-room-resizing button:not(.draft-room__resize) {
    pointer-events: none !important;
}

.draft-room__header-actions .draft-room__reset-layout {
    color: var(--muted-foreground);
}

.draft-room__header-actions .draft-room__reset-layout:hover {
    color: var(--foreground);
}

.draft-room__recommended,
.draft-room__side {
    overflow: hidden;
}

.draft-room__main {
    overflow: hidden;
}

.draft-room__main:focus {
    outline: none;
}

.draft-room__main:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Collapsed panels — the panel keeps rendering so it does not reload on expand;
   only its body is hidden, leaving the title-only header behind. */
.draft-room__rail--collapsed,
.draft-room__recommended--collapsed,
.draft-room__main--collapsed {
    align-items: center;
    padding: 0.5rem 0.25rem;
    overflow: hidden;
}

.draft-room__rail--collapsed .draft-queue,
.draft-room__recommended--collapsed .draft-recommended,
.draft-room__main--collapsed .draft-players,
.draft-room__side--board-collapsed .draft-board,
.draft-room__side--roster-collapsed .roster-summary {
    display: none;
}

/* A collapsed track cannot be dragged, and neither can its neighbour boundary. */
.draft-room__body--rail-collapsed .draft-room__resize[data-resize-left="rail"],
.draft-room__body--recommended-collapsed .draft-room__resize[data-resize-left="recommended"],
.draft-room__body--recommended-collapsed .draft-room__resize[data-resize-right="recommended"],
.draft-room__body--main-collapsed .draft-room__resize[data-resize-left="main"],
.draft-room__body--main-collapsed .draft-room__resize[data-resize-right="main"] {
    display: none;
}

/* Side column: the expanded sibling absorbs the freed height. */
.draft-room__side--board-collapsed .roster-summary {
    flex: 1 1 auto;
    max-height: none;
}

.draft-room__side--roster-collapsed .draft-board {
    flex: 1 1 auto;
}

.collapsed-panel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.collapsed-panel--vertical {
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.collapsed-panel--vertical .collapsed-panel__title {
    flex: 1 1 auto;
    min-height: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Reversed so the title still reads on the left and the toggle on the right,
   matching the expanded panel headers. */
.collapsed-panel--horizontal {
    flex: 0 0 auto;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    background: color-mix(in srgb, var(--muted) 55%, transparent);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.collapsed-panel__title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--muted-foreground);
}

.collapsed-panel__toggle {
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.panel-minimize {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--muted-foreground);
}

.collapsed-panel__toggle:hover,
.panel-minimize:hover:not(:disabled) {
    color: var(--foreground);
}

.draft-room__panel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--muted) 55%, transparent);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    min-width: 0;
}

.draft-room__panel-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.draft-room__banner {
    flex: 0 0 auto;
}

/* Recommended players panel (draft room column) */
.draft-recommended {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.draft-recommended__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.draft-recommended__strategy {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
}

.draft-recommended__help {
    height: 1.5rem !important;
    width: 1.5rem !important;
    min-height: 1.5rem !important;
    min-width: 1.5rem !important;
    color: var(--muted-foreground);
}

.draft-recommended__help:hover {
    color: var(--foreground);
}

.draft-recommended__help-popover {
    width: min(18rem, calc(100vw - 1.5rem));
    padding: 0.75rem 0.85rem;
}

.draft-recommended__help-content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.draft-recommended__help-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.draft-recommended__help-focus,
.draft-recommended__help-body {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
}

.draft-recommended__help-body {
    color: var(--foreground);
}

.draft-recommended__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--foreground);
}

.draft-recommended__position {
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.draft-recommended__position .position-filter-group__btn {
    min-width: 2.15rem;
    padding-inline: 0.4rem;
}

.draft-recommended__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.draft-recommended__loading {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.draft-recommended__table {
    display: flex;
    flex-direction: column;
}

.draft-recommended__header-row,
.draft-recommended__row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 3rem 2.75rem auto;
    gap: 0.35rem;
    align-items: center;
    padding: 0.35rem 0.15rem;
}

.draft-recommended__header-row {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    border-bottom: 1px solid var(--border);
}

.draft-recommended__row {
    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
    cursor: pointer;
    border-radius: 0.35rem;
}

.draft-recommended__row:last-child {
    border-bottom: none;
}

.draft-recommended__row:hover {
    background: color-mix(in oklch, var(--muted) 70%, transparent);
}

.draft-recommended__row:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.draft-recommended__row--selected {
    background: color-mix(in oklch, var(--primary) 16%, transparent);
}

.draft-recommended__row--drafted {
    opacity: 0.55;
    cursor: default;
}

.draft-recommended__row--drafted:hover {
    background: transparent;
}

.draft-recommended__cell--player {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.draft-recommended__headshot {
    flex-shrink: 0;
}

.draft-recommended__player-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.05rem;
}

.draft-recommended__name {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-recommended__reason {
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-recommended__cell--rk,
.draft-recommended__cell--adp {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.draft-recommended__cell--actions {
    display: flex;
    justify-content: flex-end;
}

.draft-recommended__row-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/* Available players panel (draft room centre column) */
.draft-players {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

.draft-players__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 0;
}

.draft-players__title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted-foreground);
    text-transform: uppercase;
}

.draft-players__filters {
    flex-shrink: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    padding: 0.15rem 0 0.55rem;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.draft-players__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.draft-players__list-picker {
    flex: 1 1 12rem;
    min-width: 11rem;
    max-width: 18rem;
}

.draft-players__rankings {
    width: 100%;
}

.draft-players__search {
    position: relative;
    flex: 1 1 12rem;
    max-width: 20rem;
    min-width: 10rem;
    margin-left: auto;
}

.draft-players__search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    color: var(--muted-foreground);
    pointer-events: none;
    z-index: 1;
}

.draft-players__search-input {
    width: 100%;
    padding-left: 2.15rem;
}

.draft-players__position,
.draft-players__yoe {
    flex: 0 0 auto;
}

.draft-players__loading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.draft-players__table {
    width: 100%;
    min-height: 8rem;
}

.draft-players__header-row,
.draft-players__row {
    display: grid;
    grid-template-columns:
        minmax(2rem, 0.35fr)
        minmax(10rem, 2.2fr)
        minmax(3.25rem, 0.45fr)
        minmax(3.25rem, 0.45fr)
        auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.35rem;
}

.draft-players__header-row {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.1rem;
}

.draft-players__row {
    border-bottom: 1px solid var(--border);
    border-radius: 0.4rem;
    cursor: pointer;
    outline: none;
    min-height: 2.65rem;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.draft-players__row:last-child {
    border-bottom: none;
}

.draft-players__row:hover {
    background: color-mix(in srgb, var(--muted) 70%, transparent);
}

.draft-players__row:focus-visible {
    box-shadow: inset 0 0 0 1px var(--ring);
}

.draft-players__row--selected {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.draft-players__row--drafted {
    opacity: 0.55;
    cursor: default;
}

.draft-players__row--drafted:hover {
    background: transparent;
}

.draft-players__cell--player {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.draft-players__headshot {
    flex-shrink: 0;
}

.draft-players__player-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.draft-players__name {
    font-weight: 600;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-players__drafted-meta {
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-players__cell--rk,
.draft-players__cell--team {
    font-size: 0.875rem;
}

.draft-players__cell--star {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 1.5rem;
}

.draft-players__row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
}

/* Personal draft queue (left rail) */
.draft-queue {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
    min-width: 0;
    flex: 1;
    container-type: inline-size;
    container-name: draft-queue;
}

.draft-queue .reorderable-list__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    padding: 0.45rem 0.15rem;
}

.draft-queue .reorderable-list__handle {
    margin-top: 0;
    flex: 0 0 auto;
}

.draft-queue .reorderable-list__body {
    flex: 1 1 8rem;
    min-width: 0;
}

.draft-queue .reorderable-list__actions {
    flex: 0 0 auto;
    margin-top: 0;
    margin-left: auto;
}

.draft-queue__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.draft-queue__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.draft-queue__loading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.draft-queue__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.35rem;
    min-width: 0;
}

.draft-queue__order {
    flex: 0 0 1.25rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.draft-queue__player {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.4rem;
    flex: 1 1 6.5rem;
    min-width: 0;
}

.draft-queue__player > :not(.draft-queue__name) {
    flex-shrink: 0;
}

.draft-queue__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-queue__row--drafted .draft-queue__name {
    text-decoration: line-through;
    color: var(--muted-foreground);
    font-weight: 500;
}

.draft-queue__row-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
    margin-left: auto;
}

@container draft-queue (max-width: 16.5rem) {
    .reorderable-list__actions {
        flex-direction: row;
    }

    .draft-queue__row-actions {
        flex: 1 0 100%;
        justify-content: flex-start;
        margin-left: 1.7rem;
    }
}

.draft-players__footer {
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding: 0.55rem 0 0.15rem;
    background: var(--card);
    border-top: 1px solid var(--border);
}

/* Player details dialog (centered modal, viewport-capped, dialog scrolls) */
.fixed.z-50.grid.player-details {
    top: 1rem !important;
    bottom: auto;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    --tw-translate-x: 0;
    --tw-translate-y: 0 !important;
    translate: none !important;
    transform: none !important;
    width: min(48rem, calc(100vw - 2rem));
    max-width: none;
    height: auto;
    max-height: calc(100dvh - 2rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex !important;
    flex-direction: column;
    align-content: stretch;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.fixed.z-50.grid.player-details > *:not(button):not([class*="absolute"]) {
    flex: 0 0 auto;
    min-width: 0;
}

.player-details__header {
    gap: 0.75rem;
}

.player-details__top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(6rem, auto);
    align-items: center;
    gap: 0.85rem 1.25rem;
}

.player-details__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.player-details__headshot {
    flex-shrink: 0;
}

.player-details__identity-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.player-details__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-details__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
}

.player-details__team {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.player-details__team-logo {
    flex-shrink: 0;
    height: 1.35rem;
    width: 1.35rem;
}

.player-details__team-abbr {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.player-details__jersey {
    font-size: 0.875rem;
    font-weight: 500;
}

.player-details__inactive {
    font-size: 0.7rem;
}

.player-details__adp {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.player-details__section-title {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.player-details__adp-loading {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.player-details__adp-value {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--foreground);
}

.player-details__adp-source,
.player-details__adp-empty {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.3;
}

.player-details__body {
    padding: 0.25rem 0.15rem 0.5rem 0;
}

.player-details__tabs {
    min-width: 0;
}

.player-details__tab-panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-top: 0.65rem;
    min-width: 0;
}

.player-details__draft-action {
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .player-details__top {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

/* Propose trade dialog (DialogService shell, viewport-capped, dialog scrolls) */
.fixed.z-50.grid:has(.propose-trade) {
    top: 1rem !important;
    bottom: auto;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    --tw-translate-x: 0;
    --tw-translate-y: 0 !important;
    translate: none !important;
    transform: none !important;
    width: min(56rem, calc(100vw - 2rem));
    max-width: none;
    height: auto;
    max-height: calc(100dvh - 2rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex !important;
    flex-direction: column;
    align-content: stretch;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.fixed.z-50.grid:has(.propose-trade) > *:not(button):not([class*="absolute"]) {
    flex: 0 0 auto;
    min-width: 0;
}

/* On-the-clock header + countdown */
.draft-room__clock {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(10rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--muted) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.draft-room__clock-status {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    grid-column: 1 / -1;
}

.draft-room__clock-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

.draft-room__clock-waiting {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
}

.draft-room__clock-team {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.draft-room__clock-team-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.draft-room__clock-team-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 16%, var(--muted));
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
}

.draft-room__clock-team-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.draft-room__clock-team-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.draft-room__clock-team-name {
    font-family: var(--font-display);
    font-size: 1.65rem;
    letter-spacing: 0.03em;
    line-height: 1;
    color: var(--foreground);
}

.draft-room__clock-team-abbr {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.draft-room__clock-pick-context {
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.draft-room__clock-timer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    gap: 0.2rem;
    min-width: 8rem;
}

.draft-room__clock-timer::before,
.draft-room__clock-timer::after {
    content: "";
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 1px;
    background: var(--border);
    pointer-events: none;
}

.draft-room__clock-timer::before {
    left: -0.75rem;
}

.draft-room__clock-timer::after {
    right: -0.75rem;
}

.draft-room__clock-timer-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
}

.draft-room__clock-timer-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.draft-room__clock-last {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    justify-self: end;
    text-align: right;
}

.draft-room__clock-last-body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    min-width: 0;
}

.draft-room__clock-last-name {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--foreground);
}

.draft-room__clock-last-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.draft-room__clock-last-nfl {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.draft-room__clock-last-team {
    font-size: 0.8rem;
    color: var(--muted-foreground);
}

.draft-room__clock-last-empty {
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.countdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 6.5rem;
    font-family: var(--font-display);
    color: var(--foreground);
}

.countdown__value {
    font-size: 2.75rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
}

.countdown__bar {
    height: 0.3rem;
    border-radius: 999px;
    background: var(--primary);
    max-width: 100%;
    transition: width 0.2s linear;
}

.countdown--urgent {
    color: var(--destructive);
}

.countdown--urgent .countdown__bar {
    background: var(--destructive);
}

/* Standalone draft board window */
.draft-board-shell {
    height: 100dvh;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    background: var(--background);
    color: var(--foreground);
}

.draft-board-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    height: 100%;
    padding: 0.75rem;
    overflow: hidden;
}

.draft-board-page--status {
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.draft-board-page__banner {
    flex-shrink: 0;
}

.draft-board-page .draft-board {
    flex: 1;
    min-height: 0;
}

/* Draft board grid (live / mock room side panel) */
.draft-board {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 12rem;
    flex: 1 1 0%;
    overflow: hidden;
}

.draft-board__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 0;
}

.draft-board__title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted-foreground);
    text-transform: uppercase;
}

.draft-board__pop-out {
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.draft-board__pop-out:hover {
    color: var(--foreground);
}

.draft-board__scroll {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--card);
}

.draft-board__scroll:focus {
    outline: none;
}

.draft-board__scroll:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.draft-board__table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.75rem;
    line-height: 1.25;
}

.draft-board__table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.4rem 0.45rem;
    background: var(--muted);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted-foreground);
    text-align: center;
    white-space: nowrap;
}

.draft-board__corner,
.draft-board__round {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 2.25rem;
    min-width: 2.25rem;
    padding: 0.35rem 0.4rem;
    background: var(--muted);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
    font-weight: 700;
    color: var(--muted-foreground);
}

.draft-board__corner {
    z-index: 3;
    top: 0;
}

.draft-board__slot-head:last-child,
.draft-board__cell:last-child {
    border-right: none;
}

.draft-board__slot-head {
    font-variant-numeric: tabular-nums;
}

.draft-board__row--comp .draft-board__round {
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.draft-board__row--comp .draft-board__cell {
    background: color-mix(in srgb, var(--muted) 35%, var(--card));
}

.draft-board__cell {
    min-width: 6.5rem;
    max-width: 8.5rem;
    min-height: 3.5rem;
    padding: 0.3rem 0.35rem;
    vertical-align: top;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.draft-board--avatars .draft-board__cell {
    min-width: 8.25rem;
    max-width: 10.5rem;
    min-height: 4rem;
}

.draft-board__cell-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.2rem;
    min-width: 0;
    min-height: 3rem;
}

.draft-board--avatars .draft-board__cell-body {
    min-height: 3.5rem;
}

.draft-board__content {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    min-width: 0;
}

.draft-board__avatar {
    flex-shrink: 0;
}

.draft-board__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.draft-board__footer {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-top: auto;
    min-width: 0;
}

.draft-board__owner {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.draft-board--avatars .draft-board__owner {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.draft-board__via {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--muted-foreground);
    opacity: 0.85;
    white-space: nowrap;
}

.draft-board__player {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.draft-board__player-meta {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.draft-board__on-clock {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
}

.draft-board__cell--on-the-clock {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    z-index: 1;
}

.draft-board__cell--empty {
    background: var(--card);
}

.draft-board__cell--keeper {
    background: color-mix(in srgb, var(--muted) 40%, var(--card));
}

.draft-board__cell--keeper .draft-board__marker {
    color: var(--foreground);
}

.draft-board__markers {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.draft-board__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    cursor: default;
}

.draft-board__marker:hover {
    color: var(--primary);
}

/* Roster summary (draft room side column, under board) */
.roster-summary {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 42%;
    overflow: auto;
    padding: 0.75rem 0.85rem;
    background: color-mix(in srgb, var(--muted) 55%, transparent);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    min-width: 0;
}

.roster-summary-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    height: 100%;
    padding: 0.75rem;
    overflow: hidden;
}

.roster-summary-page--status {
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.roster-summary-page__banner {
    flex-shrink: 0;
}

.roster-summary-page .roster-summary {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

.roster-summary-page .roster-summary__picks {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.roster-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.roster-summary__header-end {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.roster-summary__pop-out {
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.roster-summary__pop-out:hover {
    color: var(--foreground);
}

.roster-summary__title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.roster-summary__total {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
}

.roster-summary__team {
    width: 100%;
}

.roster-summary__team > button {
    width: 100%;
    height: 2rem;
    font-size: 0.75rem;
}

.roster-summary__counters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.55rem 0.65rem;
}

.roster-summary__counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 2.75rem;
    margin: 0;
    padding: 0.2rem 0.25rem 0.15rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    appearance: none;
}

.roster-summary__counter:hover {
    background: color-mix(in srgb, var(--muted) 80%, transparent);
}

.roster-summary__counter:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.roster-summary__counters:has(.roster-summary__counter--selected) .roster-summary__counter:not(.roster-summary__counter--selected) {
    opacity: 0.42;
}

.roster-summary__counter--selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
}

.roster-summary__counter--selected .position-badge {
    box-shadow: inset 0 0 0 1px currentColor;
    filter: saturate(1.15) brightness(1.12);
}

.roster-summary__counter-ratio {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
}

.roster-summary__estimate,
.roster-summary__empty {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.35;
}

.roster-summary__picks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 7.5rem;
    overflow-y: auto;
}

.roster-summary__pick {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.78rem;
}

.roster-summary__pick-overall {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
}

.roster-summary__pick-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--foreground);
}

.roster-summary__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}

.roster-summary__footer-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
}

.roster-summary__footer-item--end {
    margin-left: auto;
}

.roster-summary__footer-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.roster-summary__footer-value {
    font-size: 0.78rem;
    color: var(--muted-foreground);
}

.roster-summary__footer-value--emphasis {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
}

@media (max-width: 1200px) {
    .draft-room-shell {
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        grid-template-rows: auto auto;
    }

    .draft-room {
        height: auto;
        overflow: visible;
    }

    .draft-room__body {
        flex: 1 1 auto;
        min-height: auto;
    }

    .draft-room__clock {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .draft-room__clock-timer {
        align-items: flex-start;
    }

    .draft-room__clock-timer::before,
    .draft-room__clock-timer::after {
        display: none;
    }

    .draft-room__clock-last {
        justify-self: start;
        text-align: left;
    }

    .draft-room__clock-last-body {
        align-items: flex-start;
    }

    .draft-room__body,
    .draft-room__body--custom-columns,
    .draft-room__body--completed,
    .draft-room__body--completed.draft-room__body--custom-columns {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "clock clock"
            "main side"
            "recommended recommended"
            "rail rail";
        transition: none;
    }

    .draft-room__body--completed,
    .draft-room__body--completed.draft-room__body--custom-columns {
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas:
            "main side"
            "rail rail";
    }

    .draft-room__resize {
        display: none;
    }

    .draft-room__header-actions .draft-room__reset-layout {
        display: none;
    }

    /* The grid stacks below this width, so a collapsed column becomes a short bar. */
    .draft-room__rail--collapsed,
    .draft-room__recommended--collapsed,
    .draft-room__main--collapsed {
        align-items: stretch;
        padding: 0.5rem 0.85rem;
    }

    .collapsed-panel--vertical {
        flex: 0 0 auto;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .collapsed-panel--vertical .collapsed-panel__title {
        flex: 0 1 auto;
        writing-mode: horizontal-tb;
    }

    .draft-room__rail,
    .draft-room__recommended,
    .draft-room__main,
    .draft-room__side {
        overflow-y: visible;
    }

    .draft-room__recommended {
        overflow: hidden;
        max-height: 22rem;
    }

    .draft-room__side {
        overflow: hidden;
        max-height: 36rem;
    }
}

@media (max-width: 840px) {
    .draft-room__body,
    .draft-room__body--custom-columns,
    .draft-room__body--completed,
    .draft-room__body--completed.draft-room__body--custom-columns {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "clock"
            "side"
            "recommended"
            "main"
            "rail";
    }

    .draft-room__body--completed,
    .draft-room__body--completed.draft-room__body--custom-columns {
        grid-template-areas:
            "side"
            "main"
            "rail";
    }

    .draft-room__recommended {
        max-height: 20rem;
    }

    .draft-room__side {
        max-height: 28rem;
    }

    .draft-room__clock {
        grid-template-columns: 1fr;
    }
}

.create-ranking-list,
.copy-ranking-entries,
.rename-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.create-ranking-list__fields,
.copy-ranking-entries__fields,
.rename-ranking-list__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.create-ranking-list__field,
.copy-ranking-entries__field,
.rename-ranking-list__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.create-ranking-list__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.create-ranking-list__actions,
.copy-ranking-entries__actions,
.rename-ranking-list__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.export-data {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 5rem;
}

.export-data__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.export-data__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
}

.export-data__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 42rem;
}

.export-data__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.export-data__groups {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.export-data__group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.export-data__dataset {
    padding-left: 0.75rem;
}

.export-data__dataset-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.export-data__scope {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.export-data__scope--disabled {
    opacity: 0.55;
}

.export-data__field {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.export-data__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.export-data__drafts {
    display: flex;
    flex-direction: column;
}

.export-data__format {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
}

.export-data__summary {
    position: sticky;
    bottom: 0.75rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--card);
    box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--foreground) 8%, transparent);
}

.export-data__summary-copy {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.export-data__run-progress {
    margin-top: 0.45rem;
    min-width: 8rem;
}

.export-data__run-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}