/* ── korbPuls "Court Night" ─────────────────────────────────── */

/* Tokens */
:root {
    --kp-base: #09090b;
    --kp-surface: #18181b;
    --kp-surface-elevated: #27272a;
    --kp-border: #3f3f46;
    --kp-border-subtle: #27272a;
    --kp-text: #fafafa;
    --kp-text-secondary: #a1a1aa;
    --kp-accent: #fb923c;
    --kp-accent-hover: #f97316;
    --kp-accent-soft: rgba(251,146,60,0.12);
    --kp-positive: #4ade80;
    --kp-positive-soft: rgba(74,222,128,0.1);
    --kp-negative: #f87171;
    --kp-negative-soft: rgba(248,113,113,0.1);
    --kp-ai: #a78bfa;
    --kp-ai-soft: rgba(167,139,250,0.08);
    --kp-radius: 0.25rem;
    --kp-shadow: 0 1px 2px rgba(0,0,0,0.3);
    --kp-font-display: 'Space Grotesk', sans-serif;
    --kp-font-body: 'Inter', sans-serif;

    /* Pico overrides — dark theme */
    --pico-font-size: 16px;
    --pico-background-color: var(--kp-base);
    --pico-card-background-color: var(--kp-surface);
    --pico-card-border-color: var(--kp-border);
    --pico-muted-border-color: var(--kp-border);
    --pico-primary: var(--kp-accent);
    --pico-primary-hover: var(--kp-accent-hover);
    --pico-primary-focus: rgba(251,146,60,0.3);
    --pico-primary-inverse: #09090b;
    --pico-color: var(--kp-text);
    --pico-muted-color: var(--kp-text-secondary);
    --pico-border-radius: var(--kp-radius);
    --pico-spacing: 1rem;
    --pico-form-element-spacing-vertical: 0.8rem;
    --pico-form-element-spacing-horizontal: 0.9rem;
    --pico-form-element-background-color: var(--kp-surface-elevated);
    --pico-form-element-border-color: var(--kp-border);
    --pico-form-element-color: var(--kp-text);
    --pico-form-element-focus-color: var(--kp-accent);
    --pico-form-element-placeholder-color: var(--kp-text-secondary);
    --pico-table-border-color: var(--kp-border-subtle);
    --pico-code-background-color: var(--kp-surface-elevated);
    --pico-code-color: var(--kp-accent);
    --pico-del-color: var(--kp-text-secondary);
    --pico-mark-background-color: var(--kp-accent-soft);
    --pico-card-sectioning-background-color: var(--kp-surface-elevated);
}

/* ── Base ──────────────────────────────────────────────────── */

html { background: var(--kp-base); }

body.app-shell {
    min-height: 100vh;
    overflow-x: clip;
    color: var(--kp-text);
    background: var(--kp-base);
    position: relative;
}

body.app-shell > * { position: relative; z-index: 1; }

/* ── Typography ─────────────────────────────────────────────── */

h1, h2, .brand__mark, .stat-card__label, .metric-card__label,
.eyebrow, .ai-panel__eyebrow {
    font-family: var(--kp-font-display);
}

body, p, td, th, input, button, select, textarea, .stat-card__detail,
.metric-card__detail {
    font-family: var(--kp-font-body);
}

/* Card values use body font for better legibility in dense data */
.stat-card__value, .metric-card__value {
    font-family: var(--kp-font-body);
}

/* ── Header ─────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(24, 24, 27, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--kp-border-subtle);
}

.site-header__inner,
.site-footer__inner,
.page-shell {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    text-decoration: none;
    color: inherit;
}

.brand__mark {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.brand__svg {
    width: 26px;
    height: 26px;
    color: var(--kp-accent);
    flex-shrink: 0;
}

.brand__tagline {
    color: var(--kp-text-secondary);
    font-size: 1rem;
}

.league-pill {
    background: var(--kp-surface-elevated);
    border: 1px solid var(--kp-border-subtle);
    color: var(--kp-text-secondary);
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-decoration: none;
}

/* ── Layout ─────────────────────────────────────────────────── */

.site-main { padding: 1.25rem 0 3rem; }

.page-shell { display: grid; gap: 1.5rem; }

.page, .page--narrow { display: grid; gap: 1.5rem; }

.page--narrow { width: min(720px, 100%); margin: 0 auto; }

/* ── Page Intro ─────────────────────────────────────────────── */

.page-intro {
    display: grid;
    gap: 0.3rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--kp-border-subtle);
}

.page-intro h1, .hero h1 {
    margin-bottom: 0;
    letter-spacing: -0.03em;
    font-weight: 800;
}

.page-intro .eyebrow,
.section-heading .eyebrow,
.hero .eyebrow {
    color: var(--kp-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
}

.ai-panel__eyebrow {
    color: var(--kp-ai);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
}

.page-meta, .meta, .liga, .hint, .note, .muted {
    color: var(--kp-text-secondary);
}

/* ── Surfaces ───────────────────────────────────────────────── */

.surface,
.table-shell,
.hero-card,
.loading-card,
.error-card,
.ai-panel,
.stats-grid > .stat-card,
.metric-grid > .metric-card,
.form-panel {
    background: var(--kp-surface);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
}

.surface, .hero-card, .loading-card, .error-card, .ai-panel, .form-panel {
    padding: 1.35rem;
}

.page > *,
.page-intro,
.team-hero,
.section-heading > *,
.ai-panel__header > * {
    min-width: 0;
}

/* ── Hero ───────────────────────────────────────────────────── */

.hero {
    min-height: calc(100vh - 12rem);
    display: grid;
    align-items: center;
    padding: 2rem 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.hero__content { display: grid; gap: 1rem; }

.hero__lead {
    font-size: 1.1rem;
    color: var(--kp-text-secondary);
    max-width: 40ch;
}

.benefit-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: grid;
    gap: 0.4rem;
}

.benefit-list li::before {
    content: '→ ';
    color: var(--kp-accent);
}

.hero__trust {
    font-size: 0.85rem;
    color: var(--kp-text-secondary);
    margin-top: 0.5rem;
}

.hero__form-panel {
    background: var(--kp-surface);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
}

.hero-form { display: grid; gap: 1rem; }

.hero-form .form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: stretch;
}

.hero-form .form-row > * {
    margin-bottom: 0;
}

.liga-id-helper {
    background: var(--kp-surface-elevated);
    border: 1px solid var(--kp-border-subtle);
    border-radius: var(--kp-radius);
    padding: 1rem;
    font-size: 0.9rem;
}

.liga-id-helper__title {
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--kp-text);
}

.liga-id-helper p { margin: 0.3rem 0; }

.liga-id-helper code {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    background: var(--kp-surface);
    border-radius: 4px;
    font-size: 0.85rem;
}

.hero-form button,
.action-bar a,
.action-bar button,
.inline-form button,
.ai-panel__header form button,
.footer-actions button {
    margin-bottom: 0;
}

/* ── Section Heading ────────────────────────────────────────── */

.section-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-heading h2, .section-heading p { margin-bottom: 0; }

/* ── Action Bar ─────────────────────────────────────────────── */

.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.action-bar a,
.action-bar .inline-form button,
.footer-actions a,
.footer-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.7rem 1rem;
    border-radius: var(--kp-radius);
    border: 1px solid var(--kp-border);
    background: var(--kp-surface-elevated);
    color: var(--kp-text);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}

.action-bar a:hover,
.action-bar .inline-form button:hover,
.footer-actions a:hover,
.footer-actions button:hover {
    background: var(--kp-border);
    transform: translateY(-1px);
}

.action-bar a[aria-current="page"] {
    background: var(--kp-accent);
    border-color: var(--kp-accent);
    color: #09090b;
}

.inline-form { margin: 0; }

.inline-form button,
.secondary-button {
    --pico-background-color: var(--kp-surface-elevated);
    --pico-border-color: var(--kp-border);
    --pico-color: var(--kp-text);
    --pico-box-shadow: none;
}

/* ── Segmented Navigation ─────────────────────────────────── */

.segmented-nav {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.segmented-nav__tabs {
    display: flex;
    gap: 0.25rem;
    background: var(--kp-surface);
    border: 1px solid var(--kp-border-subtle);
    border-radius: var(--kp-radius);
    padding: 0.25rem;
    min-width: 0;
}

.segmented-nav__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.5rem 1rem;
    border-radius: calc(var(--kp-radius) - 2px);
    border: none;
    background: transparent;
    color: var(--kp-text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
    min-width: 0;
    text-align: center;
}

.segmented-nav__tab:hover {
    color: var(--kp-text);
    background: var(--kp-surface-elevated);
}

.segmented-nav__tab--active {
    background: var(--kp-accent);
    color: #09090b;
}

.segmented-nav__tab--active:hover {
    background: var(--kp-accent-hover);
    color: #09090b;
}

.refresh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--kp-radius);
    border: 1px solid var(--kp-border);
    background: transparent;
    color: var(--kp-text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.refresh-button:hover {
    background: var(--kp-surface-elevated);
    color: var(--kp-text);
}

/* ── Primary CTA Button ───────────────────────────────────── */

.primary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.7rem 1.5rem;
    border-radius: var(--kp-radius);
    border: none;
    background: var(--kp-accent);
    color: #09090b;
    font-weight: 700;
    font-size: 1rem;
    transition: background 0.15s, transform 0.1s;
}

.primary-cta:hover {
    background: var(--kp-accent-hover);
    transform: translateY(-1px);
}

/* ── AI Teaser Strip ──────────────────────────────────────── */

.ai-teaser-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--kp-radius);
    background: var(--kp-ai-soft);
    border: 1px solid rgba(167, 139, 250, 0.2);
}

.ai-teaser-strip p {
    margin: 0;
    color: var(--kp-text);
}

.ai-teaser-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--kp-radius);
    border: 1px solid var(--kp-ai);
    background: transparent;
    color: var(--kp-ai);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.ai-teaser-cta:hover {
    background: var(--kp-ai);
    color: #09090b;
}

/* ── Team Hero ─────────────────────────────────────────────── */

.team-hero {
    display: grid;
    gap: 0.5rem;
    padding: 1.5rem;
    background: var(--kp-surface);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
}

.team-hero__name-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.team-hero__name-row h1 {
    margin: 0;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: var(--kp-radius);
    background: var(--kp-accent-soft);
    color: var(--kp-accent);
    font-size: 0.9rem;
    font-weight: 700;
}

.team-hero__league {
    color: var(--kp-text-secondary);
    margin: 0;
}

.team-hero__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0;
    color: var(--kp-text);
}

.streak-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: var(--kp-radius);
    background: var(--kp-positive-soft);
    color: var(--kp-positive);
    font-size: 0.85rem;
    font-weight: 700;
}

.streak-badge--loss {
    background: var(--kp-negative-soft);
    color: var(--kp-negative);
}

/* ── Section Meta ──────────────────────────────────────────── */

.section-meta {
    color: var(--kp-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* ── AI Teaser Text ───────────────────────────────────────── */

.ai-teaser {
    color: var(--kp-text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.ai-benefits {
    display: grid;
    gap: 0.4rem;
}

.ai-benefits p {
    margin: 0;
    color: var(--kp-text-secondary);
    font-size: 0.9rem;
}

/* ── AI Spotlight ─────────────────────────────────────────── */

.ai-panel--spotlight {
    border-color: rgba(167, 139, 250, 0.35);
    background: linear-gradient(
        135deg,
        var(--kp-ai-soft) 0%,
        rgba(167, 139, 250, 0.05) 100%
    );
}

/* ── Feature Chips ────────────────────────────────────────── */

.feature-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: var(--kp-radius);
    background: var(--kp-surface-elevated);
    border: 1px solid var(--kp-border);
    color: var(--kp-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Benefit Bullets ──────────────────────────────────────── */

.benefit-bullets {
    display: grid;
    gap: 0.4rem;
}

.benefit-bullets p {
    margin: 0;
    color: var(--kp-text-secondary);
    font-size: 0.9rem;
}

/* ── Disclaimer ───────────────────────────────────────────── */

.disclaimer {
    font-size: 0.8rem;
    color: var(--kp-text-secondary);
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--kp-border-subtle);
}

/* ── Tables ─────────────────────────────────────────────────── */

.table-shell {
    border: 1px solid var(--kp-border);
    position: relative;
    overflow: hidden;
}

.table-scroll table {
    border-collapse: collapse;
    width: 100%;
}

.table-scroll th {
    background: var(--kp-surface-elevated);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--kp-text-secondary);
}

.table-shell > .section-heading {
    padding: 1.25rem 1.25rem 0;
    margin-bottom: 0.5rem;
}

.table-shell > .note {
    padding: 0.75rem 1.25rem;
    margin: 0;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.table-scroll table {
    margin-bottom: 0;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0;
}

/* AI-panel tables: no forced min-width, fill available space */
.ai-panel .table-scroll table {
    min-width: 0;
    width: 100%;
}

/* Lift the prose-width cap when the body holds a table */
.ai-panel__body.table-scroll {
    max-width: none;
}

table thead th {
    white-space: nowrap;
    color: var(--kp-text);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--kp-surface-elevated);
    font-family: var(--kp-font-display);
    font-weight: 700;
}

table tbody tr {
    border-bottom: 1px solid var(--kp-border-subtle);
    transition: background 0.15s;
}

/* Subtle background tint on hover, no border shift */
table tbody tr:hover {
    background: var(--kp-accent-soft);
}

/* Zebra striping for better table readability */
table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

table tbody td {
    font-variant-numeric: tabular-nums;
}

.col-number, .col-score, .col-diff, .col-points, .col-short {
    text-align: right;
    white-space: nowrap;
}

/* ── Team Link ──────────────────────────────────────────────── */

.team-link {
    font-weight: 650;
    text-decoration: none;
    position: relative;
    transition: color 0.15s;
    display: inline-block;
    padding: 0.3rem 0;
}

.team-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--kp-accent);
    transition: width 0.2s ease;
}

.team-link:hover { color: var(--kp-accent); }

.team-link:hover::after { width: 100%; }

/* ── Stat / Metric Cards ───────────────────────────────────── */

.stats-grid, .metric-grid { display: grid; gap: 1rem; }

/* 4-column grid for primary KPI row on team page */
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

.stat-card, .metric-card { display: grid; gap: 0.35rem; }

.stat-card__label, .metric-card__label {
    color: var(--kp-text-secondary);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.stat-card__value, .metric-card__value {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    /* font-family set to body font at line 93 for legibility */
}

.stat-card__detail, .metric-card__detail {
    color: var(--kp-text-secondary);
    margin-bottom: 0;
}

/* ── Form Panel ─────────────────────────────────────────────── */

.form-panel { display: grid; gap: 0.8rem; }


/* ── AI Panel ───────────────────────────────────────────────── */

.ai-panel {
    display: grid;
    gap: 1rem;
    border-color: rgba(167,139,250,0.25);
    background: var(--kp-ai-soft);
    border-left: 3px solid var(--kp-ai);
}

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

.ai-panel__header h2,
.ai-panel__header p,
.ai-panel__body p,
.ai-panel__footer p { margin-bottom: 0; }

.ai-panel__body {
    max-width: 72ch;
    line-height: 1.75;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ai-panel__body > * + * {
    margin-top: 0.85rem;
}

.ai-panel__supplement {
    padding-top: 0.5rem;
    border-top: 1px solid var(--kp-border);
    display: grid;
    gap: 0.75rem;
}

.ai-output-raw {
    margin: 0;
    padding: 1rem;
    border-radius: var(--kp-radius);
    background: #09090b;
    color: #e5e7eb;
    overflow-x: auto;
    font-size: 0.88rem;
}

.disclosure { font-size: 0.88rem; color: var(--kp-text-secondary); }

/* ── Badges ─────────────────────────────────────────────────── */

.status-badge, .winner-badge, .cancelled-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 0.125rem;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-badge--win, .winner-badge {
    color: var(--kp-positive);
    background: var(--kp-positive-soft);
}

.status-badge--loss {
    color: var(--kp-negative);
    background: var(--kp-negative-soft);
}

.cancelled-badge {
    color: var(--kp-negative);
    background: var(--kp-negative-soft);
}

/* ── Diff Colors ────────────────────────────────────────────── */

.diff-positive { color: var(--kp-positive); font-weight: 700; }

.diff-negative { color: var(--kp-negative); font-weight: 700; }

.diff-neutral { color: var(--kp-text-secondary); font-weight: 700; }

/* ── Prediction Score ────────────────────────────────────────── */

.prediction-score {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Finished / Error / Loading ─────────────────────────────── */

.finished-note, .error-card, .loading-card { display: grid; gap: 0.9rem; }

/* ── Spinner ────────────────────────────────────────────────── */

.spinner {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 4px solid rgba(251,146,60,0.14);
    border-top-color: var(--kp-accent);
    animation: spin 0.8s linear infinite, glowPulse 2s ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(251,146,60,0.2); }
    50% { box-shadow: 0 0 16px rgba(251,146,60,0.5); }
}

/* ── Footer ─────────────────────────────────────────────────── */

.footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.site-footer { padding: 0 0 2rem; }

.site-footer__inner { padding-top: 0.5rem; }

.site-credit {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--kp-border-subtle);
    font-size: 0.85rem;
    color: var(--kp-text-secondary);
    text-align: center;
}

.site-credit a {
    color: var(--kp-accent);
    text-decoration: none;
}

.site-credit a:hover {
    text-decoration: underline;
}

/* ── AI Details ─────────────────────────────────────────────── */

details.ai-details {
    background: var(--kp-surface-elevated);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    padding: 0.9rem 1rem;
}

details.ai-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--kp-text);
}

/* ── Animations ─────────────────────────────────────────────── */

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rowSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes eyebrowEnter {
    from { letter-spacing: 0.2em; opacity: 0; }
    to { letter-spacing: 0.08em; opacity: 1; }
}

/* Stagger reveal for cards and sections */
.page > section,
.page > .stats-grid,
.page > .ai-panel,
.hero-card,
.loading-card,
.error-card {
    animation: fadeSlideUp 0.4s ease-out both;
}

.page > section:nth-child(1) { animation-delay: 0.05s; }
.page > section:nth-child(2) { animation-delay: 0.1s; }
.page > section:nth-child(3) { animation-delay: 0.15s; }
.page > section:nth-child(4) { animation-delay: 0.2s; }
.page > section:nth-child(5) { animation-delay: 0.25s; }
.page > section:nth-child(6) { animation-delay: 0.3s; }

.page > .stats-grid { animation-delay: 0.08s; }
.page > .ai-panel { animation-delay: 0.18s; }

/* Table row stagger */
.table-scroll tbody tr {
    animation: rowSlideIn 0.25s ease-out both;
}

.table-scroll tbody tr:nth-child(1) { animation-delay: 0.05s; }
.table-scroll tbody tr:nth-child(2) { animation-delay: 0.07s; }
.table-scroll tbody tr:nth-child(3) { animation-delay: 0.09s; }
.table-scroll tbody tr:nth-child(4) { animation-delay: 0.11s; }
.table-scroll tbody tr:nth-child(5) { animation-delay: 0.13s; }
.table-scroll tbody tr:nth-child(6) { animation-delay: 0.15s; }
.table-scroll tbody tr:nth-child(7) { animation-delay: 0.17s; }
.table-scroll tbody tr:nth-child(8) { animation-delay: 0.19s; }
.table-scroll tbody tr:nth-child(9) { animation-delay: 0.21s; }
.table-scroll tbody tr:nth-child(10) { animation-delay: 0.23s; }
.table-scroll tbody tr:nth-child(n+11) { animation-delay: 0.25s; }

/* Eyebrow entrance */
.page-intro .eyebrow {
    animation: eyebrowEnter 0.5s ease-out both;
}

/* ── Responsive ─────────────────────────────────────────────── */

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

@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .site-nav,
    .section-heading,
    .segmented-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .site-header {
        position: static;
    }

    .site-main {
        padding-top: 0.85rem;
    }

    .site-nav {
        gap: 0.75rem;
        padding: 0.85rem 0;
    }

    .brand {
        width: 100%;
    }

    .league-pill {
        width: 100%;
        text-align: center;
    }

    .ai-panel__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero { min-height: auto; }
    .hero::before { display: none; }
    .hero-card { padding: 1.35rem; }
    .hero-form .form-row { grid-template-columns: 1fr; }

    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-grid { grid-template-columns: 1fr; }

    .ai-teaser-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    .segmented-nav__tabs {
        width: 100%;
        flex-direction: column;
    }

    .segmented-nav__tab {
        width: 100%;
        justify-content: center;
        min-height: 2.75rem;
        white-space: normal;
    }

    .page-shell,
    .site-header__inner,
    .site-footer__inner {
        width: min(1120px, calc(100% - 1.5rem));
    }

    .surface,
    .hero-card,
    .loading-card,
    .error-card,
    .ai-panel,
    .form-panel {
        padding: 1rem;
    }

    .team-hero {
        padding: 1rem;
    }

    .table-shell > .section-heading,
    .table-shell > .note {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .table-scroll table { min-width: 620px; }

    /* Scroll shadow hint on right edge of scrollable tables */
    .table-shell::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 2rem;
        background: linear-gradient(to right, transparent, var(--kp-surface));
        pointer-events: none;
        z-index: 2;
        border-radius: 0 var(--kp-radius) var(--kp-radius) 0;
    }
}

/* ── Small phones ──────────────────────────────────────────── */

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }

    .brand__tagline { display: none; }

    .site-nav {
        min-height: auto;
    }

    h1 { font-size: 1.5rem; }
    .page-intro h1, .hero h1 { font-size: 1.6rem; }
    .team-hero__name-row h1 { font-size: 1.85rem; }

    .eyebrow, .ai-panel__eyebrow { font-size: 0.82rem; }
    .stat-card__label, .metric-card__label { font-size: 0.85rem; }
    .stat-card__value, .metric-card__value { font-size: 1.05rem; }
    .ai-panel__body {
        font-size: 0.98rem;
        line-height: 1.6;
    }
    .section-heading h2,
    .ai-panel__header h2 {
        font-size: 1.2rem;
    }

    .table-scroll table { min-width: 480px; }

    .hide-mobile { display: none; }
}