/*
 * Poker Night series hub — follow/list page for shared series.
 *
 * Purple series identity: mirrors App05 PokerNight's AccentPurple.xaml
 * (every in-app series surface merges AccentPurple), NOT the amber clock
 * accent. Dark-first with a prefers-color-scheme: light override,
 * self-contained (does not depend on /css/site.css), system fonts only,
 * external file only (CSP style-src 'self'). Mobile-first; cards go 2-up
 * at >=720px.
 *
 * Token sources (AccentPurple.xaml + Colors.xaml):
 *   AccentColor #5B50D6 · AccentDark #493EB5 · AccentForegroundDark #C4B5FD
 *   AccentGradientStart #766CF0 -> AccentGradientEnd #5B50D6 (horizontal)
 *   AccentLight #F0EFFF / AccentBorder #B8B2EF (light washes)
 *   AccentLightDark #211E49 / AccentBorderDark #5F58A5 (dark washes)
 *   BackgroundDark #101012 · SurfaceDark #1B1B1F · TextSecondaryDark #AEAEB2
 *   ChipGreenGlyphDark #56C46E / Light #2E7D32 (success)
 *   SeriesFinanceErrorTextDark #FF9D96 / Light #A1120B (danger)
 */

:root {
    /* Neutral shell */
    --bg: #101012;
    --surface: #1b1b1f;
    --fg: #f5f5f5;
    --muted: #aeaeb2;
    --faint: #8e8e93;
    --line: #3a3a3c;
    --input-bg: rgba(16, 16, 18, 0.6);

    /* Accent system (dark-first) */
    --accent: #5b50d6;             /* raw brand accent: fills, dots, selection */
    --accent-strong: #493eb5;      /* pressed / darker fill */
    --accent-text: #c4b5fd;        /* contrast-safe accent TEXT on dark */
    --accent-text-strong: #ddd6fe; /* hover state for accent text/links */
    --accent-soft: #211e49;        /* wash surface (AccentLightDark) */
    --accent-border: #5f58a5;      /* wash border (AccentBorderDark) */
    --accent-border-dim: rgba(95, 88, 165, 0.55);  /* resting card border */
    --accent-grad-a: #766cf0;      /* gradient start */
    --accent-grad-b: #5b50d6;      /* gradient end */
    --accent-on: #ffffff;          /* text on gradient fills */
    --wash: rgba(91, 80, 214, 0.12);      /* translucent panel tint */
    --glow-a: rgba(118, 108, 240, 0.20);  /* hero atmosphere */
    --glow-b: rgba(91, 80, 214, 0.08);
    --focus: #766cf0;

    /* Semantic */
    --online: #56c46e;
    --danger: #ff9d96;
    --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.30);
    --shadow-pop: 0 24px 70px rgba(0, 0, 0, 0.36);

    color-scheme: dark;
    scrollbar-color: var(--accent-border) transparent;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #ffffff;
        --surface: #ffffff;
        --fg: #0f0f11;
        --muted: #555555;
        --faint: #767680;
        --line: #e6e4f4;
        --input-bg: rgba(255, 255, 255, 0.85);

        --accent-text: #493eb5;        /* AccentDark reads on white */
        --accent-text-strong: #3a3190;
        --accent-soft: #f0efff;        /* AccentLight */
        --accent-border: #b8b2ef;      /* AccentBorder */
        --accent-border-dim: rgba(184, 178, 239, 0.9);
        --wash: rgba(91, 80, 214, 0.08);
        --glow-a: rgba(118, 108, 240, 0.16);
        --glow-b: rgba(91, 80, 214, 0.05);
        --focus: #5b50d6;

        --online: #2e7d32;
        --danger: #a1120b;
        --shadow-card: 0 14px 40px rgba(31, 26, 84, 0.10);
        --shadow-pop: 0 20px 56px rgba(31, 26, 84, 0.14);

        color-scheme: light;
    }
}

* { box-sizing: border-box; }

/* Make the HTML `hidden` attribute win over explicit `display` values below
 * (same rule and rationale as series.css/clock.css). */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #ffffff; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-text-strong); text-decoration: underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Shared monospace stack for share codes. */
.hub-card-code,
#add-code {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, Menlo, monospace;
}

/* ---- Layout shell ---------------------------------------------------- */

.hub {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(16px, 3vw, 40px);
    gap: clamp(14px, 2vh, 24px);
    min-width: 0;
    background:
        radial-gradient(1200px 620px at 50% -14%, var(--glow-a), transparent 62%),
        radial-gradient(900px 480px at 90% 12%, var(--glow-b), transparent 60%);
}

.hub-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    font-size: clamp(0.8rem, 1.4vw, 1.05rem);
    color: var(--muted);
}

.hub-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg);
}
.hub-brand:hover { color: var(--fg); text-decoration: none; }
.hub-brand-icon {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

.hub-nav a { font-weight: 600; }

.hub-body {
    flex: 1 0 auto;
    width: min(100%, 880px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.4vh, 28px);
}

/* ---- Hero header ------------------------------------------------------ */

.hub-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 22px);
    padding: clamp(18px, 3vh, 30px) clamp(16px, 2.6vw, 28px);
    border: 1px solid var(--accent-border-dim);
    border-radius: 14px;
    background:
        radial-gradient(640px 300px at 12% -30%, var(--glow-a), transparent 62%),
        radial-gradient(520px 260px at 96% 130%, var(--glow-b), transparent 60%),
        var(--surface);
    overflow: hidden;
}

/* Decorative card-suit glyphs; purely atmospheric. */
.hub-suits {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
    user-select: none;
}
.hub-suits span {
    position: absolute;
    font-size: clamp(3rem, 9vw, 5.5rem);
    line-height: 1;
    color: var(--accent-text);
    opacity: 0.07;
    transform: rotate(-14deg);
}
.hub-suits .suit-1 { top: -0.28em; right: 8%; }
.hub-suits .suit-2 { bottom: -0.34em; right: 22%; transform: rotate(12deg); font-size: clamp(2.2rem, 6vw, 4rem); }
.hub-suits .suit-3 { top: 8%; right: 34%; transform: rotate(-4deg); font-size: clamp(1.6rem, 4vw, 2.6rem); opacity: 0.05; }

.hub-hero-icon {
    flex: 0 0 auto;
    display: block;
    width: clamp(48px, 8vw, 64px);
    height: auto;
    border-radius: 13px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: light) {
    .hub-hero-icon { box-shadow: 0 8px 24px rgba(31, 26, 84, 0.22); }
}

.hub-hero-copy { position: relative; min-width: 0; }

.hub-kicker {
    margin: 0 0 2px;
    font-size: clamp(0.68rem, 1.3vw, 0.8rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.hub-hero h1 {
    margin: 0 0 0.2em;
    font-size: clamp(1.7rem, 4.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
}

.hub-lead {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(0.92rem, 1.7vw, 1.08rem);
    color: var(--muted);
}

/* ---- Shared section title chrome -------------------------------------- */

.card-title {
    margin: 0 0 0.7em;
    font-size: clamp(0.82rem, 1.5vw, 1rem);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    font-weight: 700;
}

/* ---- Add-a-series form ------------------------------------------------- */

.hub-add {
    padding: clamp(14px, 2vh, 24px) clamp(14px, 2.4vw, 24px);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 14px;
    box-shadow: var(--shadow-pop);
}
.hub-add .card-title { color: var(--accent-text); }

.hub-add-label {
    display: block;
    margin: 0 0 8px;
    font-weight: 600;
    font-size: clamp(0.9rem, 1.7vw, 1.05rem);
}

.hub-add-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#add-code {
    flex: 1 1 240px;
    min-width: 0;
    min-height: 46px;
    padding: 0.6em 0.9em;
    font-size: clamp(1rem, 1.9vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg);
    background: var(--input-bg);
    border: 1px solid var(--accent-border);
    border-radius: 11px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#add-code::placeholder {
    color: var(--faint);
    letter-spacing: 0.12em;
    text-transform: none;
    font-weight: 400;
}
#add-code:focus-visible {
    outline-offset: 0;
    border-color: var(--accent-grad-a);
    box-shadow: 0 0 0 3px var(--wash);
}
#add-code.is-valid { border-color: var(--online); }

.hub-add-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 46px;
    padding: 0.6em 1.7em;
    font: inherit;
    font-size: clamp(0.98rem, 1.8vw, 1.1rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--accent-on);
    background: linear-gradient(90deg, var(--accent-grad-a), var(--accent-grad-b));
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hub-add-button:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 26px rgba(91, 80, 214, 0.4);
}
.hub-add-button:active { transform: translateY(1px); filter: brightness(0.96); }
.hub-add-button:disabled {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
    transform: none;
}

/* Inline spinner shown while the code is being checked. */
.hub-add-spinner {
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: hub-spin 0.7s linear infinite;
}
@keyframes hub-spin { to { transform: rotate(360deg); } }

/* Live shape hint under the input (updates as you type). */
.hub-hint {
    margin: 8px 0 0;
    min-height: 1.2em;
    font-size: clamp(0.78rem, 1.4vw, 0.9rem);
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.hub-hint[data-kind="ok"] { color: var(--online); }
.hub-hint[data-kind="ok"]::before { content: "✓ "; }
.hub-hint[data-kind="warn"] { color: var(--danger); }

.hub-help {
    margin: 8px 0 0;
    font-size: clamp(0.8rem, 1.5vw, 0.95rem);
    color: var(--muted);
}

.hub-status {
    margin: 8px 0 0;
    min-height: 1.3em;
    font-size: clamp(0.85rem, 1.6vw, 1rem);
    font-weight: 600;
}
.hub-status[data-kind] { animation: hub-rise 0.22s ease-out; }
.hub-status[data-kind="error"] { color: var(--danger); }
.hub-status[data-kind="error"]::before { content: "⚠ "; }
.hub-status[data-kind="ok"] { color: var(--online); }
.hub-status[data-kind="ok"]::before { content: "✓ "; }
.hub-status[data-kind="pending"] { color: var(--muted); }
@keyframes hub-rise {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* ---- Followed list ------------------------------------------------------ */

.hub-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
}
.hub-refresh-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: clamp(0.75rem, 1.4vw, 0.9rem);
    color: var(--muted);
}
.hub-refresh-note[data-busy]::before {
    content: "";
    width: 0.8em;
    height: 0.8em;
    border: 2px solid var(--accent-border);
    border-top-color: var(--accent-text);
    border-radius: 50%;
    animation: hub-spin 0.7s linear infinite;
}

.hub-storage-note {
    margin: 0;
    padding: 12px 16px;
    background: var(--wash);
    border: 1px solid var(--accent-border-dim);
    border-radius: 12px;
    color: var(--muted);
    font-size: clamp(0.85rem, 1.6vw, 1rem);
}

.hub-cards {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(12px, 1.8vw, 18px);
}
@media (min-width: 720px) {
    .hub-cards { grid-template-columns: 1fr 1fr; }
}

/* ---- Series cards -------------------------------------------------------- */

.hub-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(14px, 2vh, 20px) clamp(14px, 2.2vw, 20px);
    background: var(--surface);
    border: 1px solid var(--accent-border-dim);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
    .hub-card:hover {
        transform: translateY(-2px);
        border-color: var(--accent-border);
        box-shadow: var(--shadow-pop);
    }
}

/* Live series get the accent wash (mirrors the app's AccentSurface emphasis). */
.hub-card.is-live {
    background: var(--accent-soft);
    border-color: var(--accent-border);
}

/* Staggered entrance on first render only (hub.js adds .is-entering once). */
.hub-cards.is-entering .hub-card {
    animation: hub-card-in 0.34s ease-out backwards;
}
.hub-cards.is-entering .hub-card:nth-child(2) { animation-delay: 60ms; }
.hub-cards.is-entering .hub-card:nth-child(3) { animation-delay: 120ms; }
.hub-cards.is-entering .hub-card:nth-child(4) { animation-delay: 180ms; }
.hub-cards.is-entering .hub-card:nth-child(5) { animation-delay: 240ms; }
.hub-cards.is-entering .hub-card:nth-child(n+6) { animation-delay: 300ms; }
@keyframes hub-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.hub-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 12px;
}

.hub-card-name {
    font-size: clamp(1.12rem, 2.4vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fg);
    overflow-wrap: anywhere;
}
.hub-card-name:hover { color: var(--accent-text); text-decoration: none; }

/* Status pills. Active = purple wash; Completed = quiet neutral. */
.hub-badge {
    flex: 0 0 auto;
    display: inline-block;
    padding: 0.3em 0.9em;
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    background: var(--wash);
    color: var(--accent-text);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.72rem;
}
.hub-badge.is-completed {
    background: transparent;
    border-color: var(--line);
    color: var(--muted);
}

.hub-card-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-size: clamp(0.85rem, 1.6vw, 1rem);
}
.hub-card-row-label {
    flex: 0 0 auto;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-weight: 700;
    min-width: 6.5em;
}
.hub-card-row-value { overflow-wrap: anywhere; }

.hub-card-champion .hub-card-row-value {
    color: var(--accent-text);
    font-weight: 800;
}
.hub-glyph { margin-right: 0.35em; }

/* Leader / last-winner rows (additive summarize() fields; cards rendered
 * from an older cached meta simply omit these rows). */
.hub-card-leader .hub-card-row-value {
    color: var(--accent-text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.hub-card-lastwin .hub-card-row-value { color: var(--fg); font-weight: 600; }

/* Live row: pulsing dot ahead of the label. */
.hub-card-live .hub-card-row-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--online);
}
.hub-live-dot {
    flex: 0 0 auto;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--online);
    animation: hub-pulse 1.6s ease-in-out infinite;
}
@keyframes hub-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.72); }
}

/* Events progress: bold numeral (BigStatLabel echo) + thin determinate bar. */
.hub-progress-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 0;
}
.hub-progress-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-weight: 700;
}
.hub-progress-num {
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 800;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.hub-progress-den {
    font-size: 0.62em;
    font-weight: 700;
    color: var(--muted);
}
.hub-progress {
    width: 100%;
    height: 5px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--wash);
    overflow: hidden;
}
.hub-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-grad-a), var(--accent-grad-b));
    transition: width 0.4s ease;
}

/* Footer strip: updated-ago + state chip + share-code chip. */
.hub-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 6px;
    font-size: clamp(0.75rem, 1.4vw, 0.9rem);
    color: var(--muted);
}
.hub-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Stale-state chip ('gone'/'offline' refresh outcomes). */
.hub-chip {
    display: inline-block;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.hub-chip.is-gone {
    color: var(--danger);
    border: 1px solid currentColor;
}
.hub-chip.is-offline {
    color: var(--muted);
    border: 1px solid var(--line);
}

/* Share code as a monospace chip + copy button. */
.hub-card-codewrap {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--accent-border-dim);
    border-radius: 9px;
    overflow: hidden;
}
.hub-card-code {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.7em;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--fg);
    background: var(--wash);
    font-variant-numeric: tabular-nums;
}
.hub-card-copy {
    padding: 0.3em 0.75em;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-text);
    background: none;
    border: 0;
    border-left: 1px solid var(--accent-border-dim);
    cursor: pointer;
    min-height: 30px;
}
.hub-card-copy:hover { background: var(--wash); }
.hub-card-copy.is-copied { color: var(--online); }

/* Actions row. */
.hub-card-actions {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--accent-border-dim);
}

.hub-card-view,
.hub-card-clock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0.4em 1.1em;
    border-radius: 999px;
    font-size: clamp(0.8rem, 1.5vw, 0.95rem);
    font-weight: 700;
    transition: filter 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.hub-card-view {
    border: 1px solid var(--accent-text);
    color: var(--accent-text);
}
.hub-card-view:hover {
    background: var(--wash);
    color: var(--accent-text-strong);
    text-decoration: none;
}

/* Live clock = highest-value action: filled purple gradient chip. */
.hub-card-clock {
    background: linear-gradient(90deg, var(--accent-grad-a), var(--accent-grad-b));
    color: var(--accent-on);
    box-shadow: 0 6px 20px rgba(91, 80, 214, 0.35);
}
.hub-card-clock:hover {
    filter: brightness(1.08);
    color: var(--accent-on);
    text-decoration: none;
}
.hub-card-clock .hub-live-dot { background: #ffffff; }

/* Unfollow: quiet text button with a two-step arm/confirm. */
.hub-card-unfollow {
    margin-left: auto;
    min-height: 40px;
    padding: 0.4em 0.9em;
    font: inherit;
    font-size: clamp(0.78rem, 1.4vw, 0.9rem);
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.hub-card-unfollow:hover { color: var(--danger); }
.hub-card-unfollow.is-armed {
    color: var(--danger);
    border-color: currentColor;
    font-weight: 700;
}

/* ---- Empty state --------------------------------------------------------- */

.hub-empty {
    padding: clamp(24px, 4vh, 44px) clamp(18px, 4vw, 40px);
    text-align: center;
    background: var(--wash);
    border: 1px dashed var(--accent-border);
    border-radius: 14px;
}
.hub-empty-suits {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
    letter-spacing: 0.35em;
    color: var(--accent-text);
    opacity: 0.85;
    user-select: none;
}
.hub-empty-suits span:nth-child(even) { opacity: 0.55; }
.hub-empty-title {
    margin: 0 0 0.35em;
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    font-weight: 800;
}
.hub-empty-message {
    margin: 0 auto;
    max-width: 52ch;
    font-size: clamp(0.9rem, 1.7vw, 1.05rem);
    color: var(--muted);
}
.hub-empty-steps {
    margin: 18px auto 0;
    padding: 0;
    max-width: 46ch;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    counter-reset: hub-step;
}
.hub-empty-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: clamp(0.88rem, 1.6vw, 1rem);
}
.hub-step-n {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-grad-a), var(--accent-grad-b));
    color: var(--accent-on);
    font-weight: 800;
    font-size: 0.85em;
}

/* ---- Footer / acquisition funnel ------------------------------------ */

.hub-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    flex-wrap: wrap;
    padding-top: clamp(12px, 2vh, 24px);
    font-size: clamp(0.72rem, 1.3vw, 1rem);
    color: var(--muted);
    border-top: 1px solid var(--line);
}
.footer-site { letter-spacing: 0.04em; }
.footer-cta { font-weight: 600; }

/* ---- Small screens ---------------------------------------------------- */

@media (max-width: 540px) {
    .hub { padding-inline: 12px; }
    .hub-add,
    .hub-card { min-width: 0; padding-inline: 12px; }
    .hub-add-button { flex: 1 1 auto; }
    .hub-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
    .hub-footer {
        justify-content: center;
        text-align: center;
    }
    .hub-card-row { flex-direction: column; gap: 2px; }
    .hub-card-copy { min-height: 40px; }
}

/* ---- Honor reduced-motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hub-add-spinner,
    .hub-refresh-note[data-busy]::before,
    .hub-live-dot { animation: none; }
    .hub-status[data-kind],
    .hub-cards.is-entering .hub-card { animation: none; }
    .hub-card,
    .hub-progress-fill,
    .hub-add-button,
    #add-code { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
    .hub-card:hover { transform: none; }
}