/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* STEP 21: one calm column, like the profile page */
.sl-manage[b-te2lppz6od] {
    max-width: 640px;
    margin: 0 auto;
    padding: 4px 0 40px;
}

.sl-manage-back[b-te2lppz6od] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--sl-muted);
    font-weight: 600;
    text-decoration: none;
}

.sl-manage h1[b-te2lppz6od] {
    margin: 0 0 16px;
    font-size: 36px;
}

/* Each page (password, two-factor, passkeys) sits in one card.
   STEP 22: the fields and buttons reuse the sign-in pages' look (auth.css), which reads these colours */
.sl-manage-body[b-te2lppz6od] {
    --auth-bg: var(--sl-bg);
    --auth-surface: var(--sl-surface);
    --auth-border: var(--sl-border);
    --auth-border-strong: color-mix(in srgb, var(--sl-border), var(--sl-text) 10%);
    --auth-text: var(--sl-text);
    --auth-muted: var(--sl-muted);
    --auth-g1: var(--sl-grad-1);
    --auth-g2: var(--sl-grad-2);
    --auth-g3: var(--sl-grad-3);
    --auth-teal: #34E0D1;
    --auth-warn: #FFB347;
    padding: 24px;
    border: 1px solid var(--sl-border);
    border-radius: 22px;
    background: var(--sl-surface);
}

    .sl-manage-body[b-te2lppz6od]  h3 {
        margin: 0 0 14px;
        font-size: 22px;
    }

    .sl-manage-body[b-te2lppz6od]  h4 {
        margin: 22px 0 12px;
        font-size: 17px;
    }

    .sl-manage-body[b-te2lppz6od]  .sl-manage-lead {
        margin: -4px 0 18px;
        color: var(--sl-muted);
    }

    /* STEP 22: fields stacked with even spacing, the full width of the card */
    .sl-manage-body[b-te2lppz6od]  .sl-manage-form {
        display: grid;
        gap: 18px;
    }

    .sl-manage-body[b-te2lppz6od]  .validation-message {
        margin: 0;
        color: var(--auth-warn);
        font-size: 13px;
        line-height: 1.5;
    }

    .sl-manage-body[b-te2lppz6od]  .sl-auth-input.invalid {
        border-color: var(--auth-warn);
    }

    .sl-manage-body[b-te2lppz6od]  .sl-auth-input.valid.modified,
    .sl-manage-body[b-te2lppz6od]  .sl-auth-input.invalid {
        outline: none;
    }

    /* Buttons side by side with room between them, stacking on a phone */
    .sl-manage-body[b-te2lppz6od]  .sl-manage-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

        .sl-manage-body[b-te2lppz6od]  .sl-manage-actions .sl-auth-btn {
            width: auto;
        }

        .sl-manage-body[b-te2lppz6od]  .sl-manage-actions form {
            display: contents;
        }

    .sl-manage-body[b-te2lppz6od]  .sl-2fa-state {
        margin: 0 0 14px;
        font-weight: 600;
        color: var(--sl-muted);
    }

        .sl-manage-body[b-te2lppz6od]  .sl-2fa-state.on {
            color: var(--auth-teal);
        }

    /* The account pages come with a half-width column grid. In this narrow card, one full column reads better */
    .sl-manage-body[b-te2lppz6od]  .row {
        margin: 0;
    }

        .sl-manage-body[b-te2lppz6od]  .row > * {
            width: 100%;
            padding: 0;
        }

    /* The authenticator app's QR code (drawn by auth.js) */
    .sl-manage-body[b-te2lppz6od]  .sl-qr svg {
        display: block;
        width: 180px;
        height: 180px;
        margin: 4px 0 12px;
        border-radius: 12px;
    }

@media (hover: hover) and (pointer: fine) {
    .sl-manage-back:hover[b-te2lppz6od] {
        color: var(--sl-text);
    }
}

@media (max-width: 600px) {
    .sl-manage h1[b-te2lppz6od] {
        font-size: 28px;
    }

    .sl-manage-body[b-te2lppz6od] {
        padding: 18px;
    }

        .sl-manage-body[b-te2lppz6od]  .sl-manage-actions .sl-auth-btn {
            width: 100%;
        }
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* STEP 21: quiet pill tabs. The page you're on is lit up */
.sl-manage-tabs[b-75j7k6plqk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

    .sl-manage-tabs[b-75j7k6plqk]  a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid var(--sl-border);
        border-radius: 999px;
        color: var(--sl-text);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

        .sl-manage-tabs[b-75j7k6plqk]  a.active {
            border-color: var(--sl-accent);
            background: color-mix(in srgb, var(--sl-accent) 16%, transparent);
        }

@media (hover: hover) and (pointer: fine) {
    .sl-manage-tabs[b-75j7k6plqk]  a:not(.active):hover {
        border-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
    }
}
/* /Components/Layout/BottomTabs.razor.rz.scp.css */
/* Bottom tabs: hidden on bigger screens */
.sl-tabs[b-6qgtnawp3e] {
    display: none;
}

/* ...and shown on phones */
@media (max-width: 767.98px) {
    .sl-tabs[b-6qgtnawp3e] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));   
        align-items: end;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--sl-bg) 92%, transparent);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--sl-border);
    }
}

/* Each tab. ::deep again, because NavLink renders the link */
.sl-tabs[b-6qgtnawp3e]  .sl-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sl-muted);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.12s ease;
}

    /* STEP 14 polish: each tab presses down a little when tapped */
    .sl-tabs[b-6qgtnawp3e]  .sl-tab:active {
        transform: scale(0.94);
    }

    .sl-tabs[b-6qgtnawp3e]  .sl-tab.active {
        color: var(--sl-accent);
    }

/* The raised gradient Lock button in the middle */
.sl-lock-btn[b-6qgtnawp3e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-top: -34px;
    border-radius: 50%;
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--sl-accent) 35%, transparent), 0 0 0 6px var(--sl-bg);
    transition: transform 0.12s ease;
}

/* STEP 13 polish: the Lock button presses down when you tap it */
.sl-tabs[b-6qgtnawp3e]  .sl-tab:active .sl-lock-btn {
    transform: scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
    .sl-lock-btn[b-6qgtnawp3e] {
        transition: none;
    }

    .sl-tabs[b-6qgtnawp3e]  .sl-tab:active .sl-lock-btn,
    .sl-tabs[b-6qgtnawp3e]  .sl-tab:active {
        transform: none;
    }

    .sl-tabs[b-6qgtnawp3e]  .sl-tab {
        transition: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The frame around every page: top bar, content, footer */
.sl-page[b-vk0nm98kb5] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sl-main[b-vk0nm98kb5] {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.sl-footer[b-vk0nm98kb5] {
    border-top: 1px solid var(--sl-border);
    padding: 20px 24px;
    text-align: center;
    font-size: 13px;
    color: var(--sl-muted);
}

/* STEP 20: About, House rules and Privacy, quietly above the small print */
.sl-footer-links[b-vk0nm98kb5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 14px;
    margin-bottom: 4px;
}

    .sl-footer-links a[b-vk0nm98kb5] {
        padding: 10px 4px;
        color: var(--sl-muted);
        font-weight: 600;
        text-decoration: none;
    }

@media (hover: hover) and (pointer: fine) {
    .sl-footer-links a:hover[b-vk0nm98kb5] {
        color: var(--sl-text);
    }
}

/* Blazor only shows this bar when something crashes */
#blazor-error-ui[b-vk0nm98kb5] {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 1.25rem 0.7rem;
    background: var(--sl-surface);
    border-top: 2px solid var(--sl-accent);
    color: var(--sl-text);
}

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

/* Phones: tighter padding, and room at the bottom for the tabs */
@media (max-width: 767.98px) {
    .sl-main[b-vk0nm98kb5] {
        padding: 16px;
    }

    .sl-page[b-vk0nm98kb5] {
        padding-bottom: 84px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ===== Top bar ===== */
.sl-topbar[b-sh5bxapw1a] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--sl-bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sl-border);
}

.sl-topbar-inner[b-sh5bxapw1a] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Logo */
.sl-brand[b-sh5bxapw1a] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk', Inter, system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sl-text);
    text-decoration: none;
}

.sl-brand-tile[b-sh5bxapw1a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
    transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); /* STEP 14 polish: a little springy */
}

/* Main links. ::deep reaches inside NavLink, because it's its own component */
.sl-nav[b-sh5bxapw1a] {
    display: flex;
    gap: 4px;
}

    .sl-nav[b-sh5bxapw1a]  .sl-nav-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 16px;
        border-radius: 999px;
        font-weight: 600;
        color: var(--sl-muted);
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
    }

        /* STEP 14 polish: pointing at a link fades in a soft pill, the same shape as the page you're on */
        .sl-nav[b-sh5bxapw1a]  .sl-nav-link:hover {
            background: color-mix(in srgb, var(--sl-text) 7%, transparent);
            color: var(--sl-text);
        }

        .sl-nav[b-sh5bxapw1a]  .sl-nav-link:active {
            transform: scale(0.96);
        }

        .sl-nav[b-sh5bxapw1a]  .sl-nav-link.active {
            background: var(--sl-surface);
            color: var(--sl-accent);
        }

/* Sign in, avatar and log out */
.sl-account[b-sh5bxapw1a] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sl-pill[b-sh5bxapw1a] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: var(--sl-surface);
    color: var(--sl-text);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .sl-pill:hover[b-sh5bxapw1a] {
        color: var(--sl-text);
    }

    .sl-pill:active[b-sh5bxapw1a] {
        transform: scale(0.97);
    }

/* STEP 17: the round photo inside comes from Avatar.razor; this link around it adds the hover ring */
.sl-account[b-sh5bxapw1a]  .sl-avatar {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* STEP 17: the bell, with a small pink count when there's news.
   STEP 18: the staff shield next to it (staff only) looks the same */
.sl-account[b-sh5bxapw1a]  .sl-bell,
.sl-account[b-sh5bxapw1a]  .sl-staff-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--sl-border);
    border-radius: 50%;
    background: var(--sl-surface);
    color: var(--sl-text);
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease;
}

    .sl-account[b-sh5bxapw1a]  .sl-bell.active,
    .sl-account[b-sh5bxapw1a]  .sl-staff-link.active {
        border-color: var(--sl-accent);
        color: var(--sl-accent);
    }

.sl-account[b-sh5bxapw1a]  .sl-bell-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--sl-bg);
    border-radius: 999px;
    background: var(--sl-accent);
    color: var(--sl-bg);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* STEP 14 polish: with a mouse, Sign in / Log out lift and get the season's gradient border (like "Show more"),
   your avatar gets a soft glow ring, and the logo gives a little tilt */
@media (hover: hover) and (pointer: fine) {
    .sl-pill:hover[b-sh5bxapw1a] {
        transform: translateY(-2px);
        border-color: transparent;
        background:
            linear-gradient(var(--sl-surface), var(--sl-surface)) padding-box,
            linear-gradient(90deg, var(--sl-grad-1), var(--sl-grad-2), var(--sl-grad-3)) border-box;
        box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--sl-grad-3) 80%, transparent);
    }

    .sl-account[b-sh5bxapw1a]  .sl-avatar:hover {
        transform: scale(1.06);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-accent) 30%, transparent);
    }

    .sl-account[b-sh5bxapw1a]  .sl-bell:hover,
    .sl-account[b-sh5bxapw1a]  .sl-staff-link:hover {
        border-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
        color: var(--sl-text);
    }

    .sl-brand:hover .sl-brand-tile[b-sh5bxapw1a] {
        transform: rotate(-8deg) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-brand-tile[b-sh5bxapw1a],
    .sl-pill[b-sh5bxapw1a],
    .sl-nav[b-sh5bxapw1a]  .sl-nav-link,
    .sl-account[b-sh5bxapw1a]  .sl-avatar,
    .sl-account[b-sh5bxapw1a]  .sl-bell,
    .sl-account[b-sh5bxapw1a]  .sl-staff-link {
        transition: none;
    }

        .sl-pill:hover[b-sh5bxapw1a],
        .sl-pill:active[b-sh5bxapw1a],
        .sl-nav[b-sh5bxapw1a]  .sl-nav-link:active,
        .sl-account[b-sh5bxapw1a]  .sl-avatar:hover,
        .sl-brand:hover .sl-brand-tile[b-sh5bxapw1a] {
            transform: none;
        }
}

/* STEP 18: small tablets. Slimmer links, so the staff shield still fits next to the bell */
@media (min-width: 768px) and (max-width: 899.98px) {
    .sl-nav[b-sh5bxapw1a]  .sl-nav-link {
        padding: 0 10px;
    }
}

/* Phones: the links move to the bottom tabs, and the top bar gets tighter */
@media (max-width: 767.98px) {
    .sl-nav[b-sh5bxapw1a] {
        display: none;
    }

    .sl-topbar-inner[b-sh5bxapw1a] {
        padding: 10px 16px;
        gap: 12px;
    }

    .sl-brand[b-sh5bxapw1a] {
        font-size: 1.25rem;
        gap: 8px;
    }

    .sl-account[b-sh5bxapw1a] {
        gap: 8px;
    }

    .sl-pill[b-sh5bxapw1a] {
        padding: 0 12px;
        font-size: 14px;
    }
    .sl-logout[b-sh5bxapw1a] {
        display: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-9tx5fv0930],
.components-reconnect-repeated-attempt-visible[b-9tx5fv0930],
.components-reconnect-failed-visible[b-9tx5fv0930],
.components-pause-visible[b-9tx5fv0930],
.components-resume-failed-visible[b-9tx5fv0930],
.components-rejoining-animation[b-9tx5fv0930] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-9tx5fv0930],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-9tx5fv0930],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-9tx5fv0930],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-9tx5fv0930],
#components-reconnect-modal.components-reconnect-retrying[b-9tx5fv0930],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-9tx5fv0930],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-9tx5fv0930],
#components-reconnect-modal.components-reconnect-failed[b-9tx5fv0930],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-9tx5fv0930] {
    display: block;
}


#components-reconnect-modal[b-9tx5fv0930] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-9tx5fv0930 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-9tx5fv0930 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-9tx5fv0930 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-9tx5fv0930]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-9tx5fv0930 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-9tx5fv0930 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-9tx5fv0930 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-9tx5fv0930 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-9tx5fv0930] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-9tx5fv0930] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-9tx5fv0930] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-9tx5fv0930] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-9tx5fv0930] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-9tx5fv0930] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-9tx5fv0930] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-9tx5fv0930 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-9tx5fv0930] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-9tx5fv0930 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/CalledIt.razor.rz.scp.css */
/* STEP 24: the "Called it" hall of fame. The same card grid as the Vault */
.sl-called[b-ucorfhffs6] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 12px 0 40px;
}

.sl-called-intro h1[b-ucorfhffs6] {
    margin: 0 0 8px;
    font-size: 36px;
}

.sl-called-intro p[b-ucorfhffs6],
.sl-called-muted[b-ucorfhffs6] {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--sl-muted);
}

.sl-called-empty[b-ucorfhffs6] {
    margin: 0;
    padding: 28px 20px;
    border: 1px dashed color-mix(in srgb, var(--sl-text) 16%, transparent);
    border-radius: 20px;
    text-align: center;
    color: var(--sl-muted);
}

.sl-called-error[b-ucorfhffs6] {
    margin: 0;
    color: var(--sl-grad-1);
}

.sl-called-grid[b-ucorfhffs6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 16px;
}

@media (max-width: 600px) {
    .sl-called-intro h1[b-ucorfhffs6] {
        font-size: 28px;
    }

    .sl-called-intro p[b-ucorfhffs6] {
        font-size: 16px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* 2 columns on desktop, 1 on phones */
.sl-vault-grid[b-31wk19c4pk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 16px;
    transition: opacity 0.15s ease;
}

/* While new cards load, the old ones fade a little. The short wait stops quick searches from flickering */
.sl-results.busy .sl-vault-grid[b-31wk19c4pk] {
    opacity: 0.5;
    transition-delay: 0.2s;
}

/* "Theory Vault", then search + Hot / New / Top, then the filters. All on the left, where people start reading.
   STEP 13 polish: a thin line underneath closes off the controls, so the cards start fresh below it */
.sl-vault-head[b-31wk19c4pk] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--sl-text) 8%, transparent);
    container-type: inline-size; /* lets the rules further down react to how wide the toolbar really is */
}

    .sl-vault-head h2[b-31wk19c4pk] {
        margin: 0;
    }

/* STEP 12: the search box with Hot / New / Top beside it */
.sl-vault-tools[b-31wk19c4pk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px; /* STEP 13 polish: a clear gap between searching and sorting */
    align-self: stretch;
}

.sl-search[b-31wk19c4pk] {
    position: relative;
    flex: 1 1 260px;
    max-width: 440px;
    margin: 0;
}

    .sl-search input[b-31wk19c4pk] {
        box-sizing: border-box;
        width: 100%;
        height: 52px;
        padding: 0 52px 0 46px; /* room for the magnifying glass on the left and the x on the right */
        border: 1px solid color-mix(in srgb, var(--sl-text) 12%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--sl-surface) 70%, transparent); /* STEP 13: a little see-through, like the glass cards */
        color: var(--sl-text);
        font-size: 16px; /* 16px stops iPhones zooming in when you tap the box */
        -webkit-appearance: none;
        appearance: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .sl-search input[b-31wk19c4pk]::placeholder {
            color: color-mix(in srgb, var(--sl-muted) 80%, transparent);
        }

        /* Typing in it: the border glows in the season colour */
        .sl-search input:focus[b-31wk19c4pk] {
            outline: none;
            border-color: var(--sl-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-accent) 28%, transparent);
        }

        /* Chrome and Safari add their own little x. We have ours, so theirs is hidden */
        .sl-search input[b-31wk19c4pk]::-webkit-search-cancel-button {
            -webkit-appearance: none;
            display: none;
        }

.sl-search-icon[b-31wk19c4pk] {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    color: var(--sl-muted);
    pointer-events: none;
}

/* Our x: shows once there's something in the box */
.sl-search-clear[b-31wk19c4pk] {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sl-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hot / New / Top and All / Theories / Polls use the shared sliding pill ("sl-seg" in app.css).
   The bits below only change how they look here */
/* STEP 13 polish: the type switch is a filter, so its highlight is a quiet tint.
   Only Hot / New / Top keeps the bright white pill, so there's one clear "main" control */
.sl-kind[b-31wk19c4pk]::before {
    background: color-mix(in srgb, var(--sl-text) 16%, transparent);
}

.sl-kind button.active[b-31wk19c4pk] {
    color: var(--sl-text);
}

/* STEP 13 polish: "Sort" and its options sit behind a thin line, away from the search box */
.sl-sort-group[b-31wk19c4pk] {
    padding-left: 20px;
    border-left: 1px solid color-mix(in srgb, var(--sl-text) 14%, transparent);
}

/* STEP 12: the filters row. The type pill is a little smaller, so it sits level with the category chips.
   STEP 13 polish: two labelled groups ("Show" and "Category") with a thin line between them */
.sl-filters[b-31wk19c4pk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 0;
    align-self: stretch;
}

.sl-filter-group[b-31wk19c4pk] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sl-filter-group-cats[b-31wk19c4pk] {
    margin-left: 22px;
    padding-left: 22px;
    border-left: 1px solid color-mix(in srgb, var(--sl-text) 14%, transparent);
}

/* The small "SHOW" and "CATEGORY" labels */
.sl-filter-label[b-31wk19c4pk] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sl-muted) 85%, transparent);
}

.sl-kind button[b-31wk19c4pk] {
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
}

.sl-cats[b-31wk19c4pk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* STEP 13: a category chip with its colour dot. Tapped, it lights up in its own category colour (--cat comes from app.css).
   STEP 13 polish: lighter outline and no fill, so the six chips feel airy instead of crowded */
.sl-cat[b-31wk19c4pk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 9%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--sl-muted);
    font-size: 14px;
    font-weight: 600;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

    /* STEP 13 polish: chips press down a touch when tapped, but never lift. Filters stay calm; buttons are the ones that jump */
    .sl-cat:active[b-31wk19c4pk] {
        transform: scale(0.96);
    }

    .sl-cat .sl-cat-dot[b-31wk19c4pk] {
        transition: transform 0.15s ease;
    }

    .sl-cat.on[b-31wk19c4pk] {
        border-color: var(--cat, var(--sl-accent-2));
        background: color-mix(in srgb, var(--cat, var(--sl-accent-2)) 16%, transparent);
        color: var(--cat, var(--sl-accent-2));
    }

/* With a mouse, the other choices light up a little when you point at them */
@media (hover: hover) and (pointer: fine) {
    .sl-cat:not(.on):hover[b-31wk19c4pk] {
        border-color: color-mix(in srgb, var(--cat, var(--sl-muted)) 45%, transparent);
        background: color-mix(in srgb, var(--cat, var(--sl-text)) 8%, transparent);
        color: var(--sl-text);
    }

        /* The colour dot grows a little, a hint of the colour it will light up in */
        .sl-cat:hover .sl-cat-dot[b-31wk19c4pk] {
            transform: scale(1.35);
        }

    .sl-search-clear:hover[b-31wk19c4pk] {
        background: color-mix(in srgb, var(--sl-text) 8%, transparent);
        color: var(--sl-text);
    }
}

/* STEP 13 polish: when there isn't room for a group on the same line, it moves to its own line,
   and its dividing line goes too (a line at the start of a row looks like a mistake).
   These check the toolbar's own width, so they're right on every screen size */
@container (max-width: 1100px) {
    .sl-filter-group-cats[b-31wk19c4pk] {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

@container (max-width: 640px) {
    .sl-sort-group[b-31wk19c4pk] {
        padding-left: 0;
        border-left: 0;
    }
}

/* Phones */
@media (max-width: 600px) {
    /* In the swipe row the line comes back, between Polls and the first category */
    .sl-filter-group-cats[b-31wk19c4pk] {
        margin-left: 16px;
        padding-left: 16px;
        border-left: 1px solid color-mix(in srgb, var(--sl-text) 14%, transparent);
    }

    /* Hot / New / Top goes under the search box, so it doesn't need the dividing line */
    .sl-sort-group[b-31wk19c4pk] {
        padding-left: 0;
        border-left: 0;
    }

    .sl-sort[b-31wk19c4pk] {
        flex: 1;
    }

    /* A little slimmer, so the first category chips peek in next to it */
    .sl-kind button[b-31wk19c4pk] {
        padding: 0 11px;
    }

    /* Phones are narrow, so the labels hide and the first chips peek in instead (a better "swipe me" hint).
       Screen readers still hear each group's name from its aria-label */
    .sl-filter-label[b-31wk19c4pk] {
        display: none;
    }

    /* Search on top, Hot / New / Top under it, both the full width */
    .sl-vault-tools[b-31wk19c4pk] {
        flex-direction: column;
        align-items: stretch;
    }

    .sl-search[b-31wk19c4pk] {
        flex: none;
        max-width: none;
    }

        .sl-sort button[b-31wk19c4pk] {
            flex: 1;
            padding: 0 8px;
        }

    /* The filters become one row you swipe sideways. The fade on the right hints there's more */
    .sl-filters[b-31wk19c4pk],
    .sl-cats[b-31wk19c4pk] {
        flex-wrap: nowrap;
    }

    .sl-filters[b-31wk19c4pk] {
        overflow-x: auto;
        margin: -4px;
        padding: 4px 28px 4px 4px; /* a little room so the focus ring isn't cut off */
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    }

        .sl-filters[b-31wk19c4pk]::-webkit-scrollbar {
            display: none;
        }

        .sl-filters > *[b-31wk19c4pk],
        .sl-cat[b-31wk19c4pk] {
            flex: none;
        }
}

/* STEP 12: when a search finds nothing */
.sl-empty[b-31wk19c4pk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 20px;
    border: 1px dashed var(--sl-border);
    border-radius: 22px;
    text-align: center;
    color: var(--sl-muted);
}

    .sl-empty p[b-31wk19c4pk] {
        margin: 0;
    }

.sl-empty-title[b-31wk19c4pk] {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--sl-text);
}

.sl-empty-actions[b-31wk19c4pk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

/* The lift, glow and press come from "sl-action" in app.css */
.sl-empty-lock[b-31wk19c4pk] {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
    font-weight: 700;
    text-decoration: none;
}

    /* Other links change colour on hover; this one keeps its dark text on the gradient */
    .sl-empty-lock:hover[b-31wk19c4pk] {
        color: var(--sl-bg);
    }

/* "Show more theories" under the cards */
.sl-more[b-31wk19c4pk] {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.sl-more-btn[b-31wk19c4pk] {
    min-height: 48px;
    padding: 0 26px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: var(--sl-surface);
    color: var(--sl-text);
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .sl-more-btn:disabled[b-31wk19c4pk] {
        opacity: 0.6;
        cursor: wait;
    }

/* Hover: it lifts and its border lights up in the season gradient */
@media (hover: hover) and (pointer: fine) {
    .sl-more-btn:not(:disabled):hover[b-31wk19c4pk] {
        transform: translateY(-2px);
        border-color: transparent;
        background:
            linear-gradient(var(--sl-surface), var(--sl-surface)) padding-box,
            linear-gradient(90deg, var(--sl-grad-1), var(--sl-grad-2), var(--sl-grad-3)) border-box;
        box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--sl-grad-3) 80%, transparent);
    }
}

.sl-more-btn:not(:disabled):active[b-31wk19c4pk] {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .sl-cat[b-31wk19c4pk],
    .sl-cat .sl-cat-dot[b-31wk19c4pk],
    .sl-search input[b-31wk19c4pk],
    .sl-search-clear[b-31wk19c4pk],
    .sl-vault-grid[b-31wk19c4pk],
    .sl-more-btn[b-31wk19c4pk] {
        transition: none;
    }

    .sl-more-btn:hover[b-31wk19c4pk],
    .sl-more-btn:active[b-31wk19c4pk],
    .sl-cat:active[b-31wk19c4pk],
    .sl-cat:hover .sl-cat-dot[b-31wk19c4pk] {
        transform: none;
    }
}

.sl-vote-error[b-31wk19c4pk] {
    margin: 0 0 12px;
    color: #FFB347;
    font-weight: 600;
}
/* /Components/Pages/Lock.razor.rz.scp.css */
.sl-lock[b-bog7ww37j9] {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sl-lock-head h1[b-bog7ww37j9] {
    margin: 0 0 6px;
    font-size: clamp(26px, 4vw, 32px);
}

.sl-lock-head p[b-bog7ww37j9],
.sl-lock-muted[b-bog7ww37j9] {
    margin: 0;
    color: var(--sl-muted);
}

.sl-mode[b-bog7ww37j9] {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: var(--sl-surface);
}

    .sl-mode button[b-bog7ww37j9] {
        flex: 1 1 0;
        min-height: 44px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--sl-muted);
        font-size: 15px;
        font-weight: 600;
    }

        .sl-mode button.active[b-bog7ww37j9] {
            background: var(--sl-text);
            color: var(--sl-bg);
            font-weight: 700;
        }

.sl-lock-card[b-bog7ww37j9],
.sl-lock-need[b-bog7ww37j9] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(18px, 3vw, 24px);
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 22px;
}

.sl-lock-need[b-bog7ww37j9] {
    align-items: flex-start;
    gap: 12px;
}

    .sl-lock-need p[b-bog7ww37j9] {
        margin: 0;
    }

.sl-field[b-bog7ww37j9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sl-label[b-bog7ww37j9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-muted);
}

.sl-chips[b-bog7ww37j9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* STEP 13: category chips with their colour dot. Picked, a chip lights up in its own colour (--cat comes from app.css) */
.sl-chip[b-bog7ww37j9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: var(--sl-bg);
    color: var(--sl-muted);
    font-size: 14px;
    font-weight: 600;
}

    .sl-chip.on[b-bog7ww37j9] {
        border-color: var(--cat, var(--sl-accent-2));
        background: color-mix(in srgb, var(--cat, var(--sl-accent-2)) 14%, transparent);
        color: var(--cat, var(--sl-accent-2));
    }

.sl-lock textarea[b-bog7ww37j9],
.sl-option input[b-bog7ww37j9] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sl-border);
    border-radius: 14px;
    background: var(--sl-bg);
    color: var(--sl-text);
    font-size: 16px;
    line-height: 1.5;
}

.sl-lock textarea[b-bog7ww37j9] {
    resize: vertical;
}

    .sl-lock textarea[b-bog7ww37j9]::placeholder,
    .sl-option input[b-bog7ww37j9]::placeholder {
        color: color-mix(in srgb, var(--sl-muted) 75%, transparent);
    }

.sl-count[b-bog7ww37j9] {
    align-self: flex-end;
    font-size: 13px;
    color: var(--sl-muted);
}

.sl-option[b-bog7ww37j9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sl-option input[b-bog7ww37j9] {
        flex: 1;
        min-width: 0;
        min-height: 48px;
    }

.sl-remove[b-bog7ww37j9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: transparent;
    color: var(--sl-muted);
}

.sl-add[b-bog7ww37j9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 1px dashed color-mix(in srgb, var(--sl-muted) 35%, var(--sl-border));
    border-radius: 14px;
    background: transparent;
    color: var(--sl-text);
    font-size: 15px;
    font-weight: 600;
}

.sl-lock-btn[b-bog7ww37j9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border: 0;
    border-radius: 14px;
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
    font-size: 16px;
    font-weight: 700;
}

    .sl-lock-btn:disabled[b-bog7ww37j9] {
        background: color-mix(in srgb, var(--sl-border) 55%, var(--sl-surface));
        color: var(--sl-muted);
        cursor: not-allowed;
    }

.sl-lock-error[b-bog7ww37j9] {
    margin: 0;
    font-size: 14px;
    color: var(--sl-grad-1);
}

.sl-lock-note[b-bog7ww37j9] {
    margin: -6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sl-muted);
}
/* /Components/Pages/Notifications.razor.rz.scp.css */
/* STEP 17: the notifications page. One calm column, like the Wish List */
.sl-notes[b-4tvgd0mh58] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 0 40px;
}

.sl-notes-intro h1[b-4tvgd0mh58] {
    margin: 0 0 8px;
    font-size: 36px;
}

.sl-notes-intro p[b-4tvgd0mh58],
.sl-notes-muted[b-4tvgd0mh58] {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--sl-muted);
}

.sl-notes-empty[b-4tvgd0mh58] {
    margin: 0;
    padding: 28px 20px;
    border: 1px dashed color-mix(in srgb, var(--sl-text) 16%, transparent);
    border-radius: 20px;
    text-align: center;
    font-size: 15px;
    color: var(--sl-muted);
}

/* STEP 19: Mark all as read and Select, quietly above the list */
.sl-notes-tools[b-4tvgd0mh58] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: -10px;
}

.sl-notes-tool[b-4tvgd0mh58] {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: transparent;
    color: var(--sl-text);
    font-size: 14px;
    font-weight: 600;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .sl-notes-tool.danger[b-4tvgd0mh58] {
        border-color: color-mix(in srgb, var(--sl-grad-1) 55%, transparent);
        color: var(--sl-grad-1);
    }

    .sl-notes-tool:disabled[b-4tvgd0mh58] {
        opacity: 0.45;
        cursor: not-allowed;
    }

@media (hover: hover) and (pointer: fine) {
    .sl-notes-tool:not(:disabled):hover[b-4tvgd0mh58] {
        border-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
        background: color-mix(in srgb, var(--sl-text) 6%, transparent);
    }
}

/* "2 selected" sits on the left while selecting */
.sl-notes-picked[b-4tvgd0mh58] {
    margin-right: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-muted);
}

.sl-notes-notice[b-4tvgd0mh58] {
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sl-accent-2) 12%, transparent);
    font-size: 15px;
    font-weight: 600;
}

.sl-notes-list[b-4tvgd0mh58] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One notification: the whole row opens it (or picks it, while selecting) */
.sl-note[b-4tvgd0mh58] {
    width: 100%;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 10px 16px 10px 12px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 8%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--sl-surface) 70%, transparent);
    color: var(--sl-text);
    text-align: left;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    /* STEP 19: selecting. A round tick box takes the icon's place */
    .sl-note-check[b-4tvgd0mh58] {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        margin: 0 auto;
        border: 2px solid color-mix(in srgb, var(--sl-text) 30%, transparent);
        border-radius: 50%;
        color: transparent;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .sl-note.picked[b-4tvgd0mh58] {
        border-color: color-mix(in srgb, var(--sl-accent) 55%, transparent);
        background: color-mix(in srgb, var(--sl-accent) 10%, var(--sl-surface));
    }

        .sl-note.picked .sl-note-check[b-4tvgd0mh58] {
            border-color: var(--sl-accent);
            background: var(--sl-accent);
            color: var(--sl-bg);
        }

    .sl-note:hover[b-4tvgd0mh58] {
        color: var(--sl-text);
    }

@media (hover: hover) and (pointer: fine) {
    .sl-note:hover[b-4tvgd0mh58] {
        border-color: color-mix(in srgb, var(--sl-text) 22%, transparent);
        background-color: color-mix(in srgb, var(--sl-surface) 90%, transparent);
    }

    /* STEP 19: unread and picked ones keep their pink under the mouse, just a little stronger */
    .sl-note.new:hover[b-4tvgd0mh58],
    .sl-note.picked:hover[b-4tvgd0mh58] {
        border-color: var(--sl-accent);
        background-color: color-mix(in srgb, var(--sl-accent) 12%, var(--sl-surface));
    }
}

    /* Not opened yet: a soft pink edge and a dot (STEP 19: it stays until you open it or mark all as read) */
    .sl-note.new[b-4tvgd0mh58] {
        border-color: color-mix(in srgb, var(--sl-accent) 45%, transparent);
        background: color-mix(in srgb, var(--sl-accent) 8%, var(--sl-surface));
    }

        .sl-note.new .sl-note-time[b-4tvgd0mh58]::before {
            content: "";
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 8px;
            border-radius: 50%;
            background: var(--sl-accent);
            vertical-align: middle;
        }

.sl-note-icon[b-4tvgd0mh58] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sl-text) 7%, transparent);
    font-size: 19px;
}

.sl-note-text[b-4tvgd0mh58] {
    font-size: 15px;
    line-height: 1.4;
}

.sl-note-time[b-4tvgd0mh58] {
    font-size: 13px;
    color: var(--sl-muted);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .sl-notes[b-4tvgd0mh58] {
        gap: 18px;
        padding-top: 4px;
    }

    .sl-notes-intro h1[b-4tvgd0mh58] {
        font-size: 28px;
    }

    .sl-notes-intro p[b-4tvgd0mh58] {
        font-size: 16px;
    }

    .sl-note[b-4tvgd0mh58] {
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-note[b-4tvgd0mh58],
    .sl-note-check[b-4tvgd0mh58],
    .sl-notes-tool[b-4tvgd0mh58] {
        transition: none;
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.sl-profile[b-i0buum7chr] {
    max-width: 560px;
    margin: 0 auto;
}

    .sl-profile h1[b-i0buum7chr] {
        margin-bottom: 8px;
    }

.sl-profile-intro[b-i0buum7chr] {
    margin-bottom: 24px;
    color: var(--sl-muted);
}

.sl-profile-card[b-i0buum7chr] {
    margin-bottom: 16px;
    padding: 24px;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 22px;
}

.sl-label[b-i0buum7chr] {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-muted);
}

/* The username box, with a fixed @ in front */
.sl-handle-input[b-i0buum7chr] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    border: 1px solid var(--sl-border);
    border-radius: 14px;
    background: var(--sl-bg);
}

    .sl-handle-input:focus-within[b-i0buum7chr] {
        border-color: var(--sl-accent);
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sl-accent) 30%, transparent);
    }

    .sl-handle-input span[b-i0buum7chr] {
        font-size: 18px;
        font-weight: 700;
        color: var(--sl-accent);
    }

    .sl-handle-input input[b-i0buum7chr] {
        flex: 1;
        min-width: 0;
        min-height: 52px;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--sl-text);
        font-size: 18px;
    }

.sl-hint[b-i0buum7chr] {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--sl-muted);
}

.sl-profile[b-i0buum7chr]  .validation-message {
    margin-top: 6px;
    font-size: 14px;
    color: #FFB347;
}

.sl-profile-card .btn[b-i0buum7chr] {
    margin-top: 20px;
}

.sl-ok[b-i0buum7chr],
.sl-error[b-i0buum7chr] {
    margin: 16px 0 0;
    font-weight: 600;
}

.sl-ok[b-i0buum7chr] {
    color: var(--sl-accent-2);
}

.sl-error[b-i0buum7chr] {
    color: #FFB347;
}

/* STEP 19: the title picker. Your badges as chips, and the one you wear is lit up */
.sl-titles-intro[b-i0buum7chr] {
    margin: -2px 0 14px;
}

.sl-title-picks[b-i0buum7chr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sl-title-pick[b-i0buum7chr] {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 14%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--sl-text);
    font-size: 14px;
    font-weight: 600;
}

    .sl-title-pick.on[b-i0buum7chr] {
        border-color: var(--sl-accent);
        background: color-mix(in srgb, var(--sl-accent) 16%, transparent);
    }

    /* Titles from the hard badges are gold */
    .sl-title-pick.rare[b-i0buum7chr] {
        border-color: color-mix(in srgb, var(--sl-grad-1) 45%, transparent);
        color: var(--sl-grad-1);
    }

        .sl-title-pick.rare.on[b-i0buum7chr] {
            border-color: var(--sl-grad-1);
            background: color-mix(in srgb, var(--sl-grad-1) 16%, transparent);
        }

    .sl-title-pick:disabled[b-i0buum7chr] {
        cursor: progress;
    }

/* How it looks next to your name on theories and comments */
.sl-title-preview[b-i0buum7chr] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sl-bg) 60%, transparent);
}

.sl-title-preview-name[b-i0buum7chr] {
    font-size: 15px;
    font-weight: 600;
}

.sl-titles-more[b-i0buum7chr] {
    display: inline-block;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
}

/* STEP 19: Account: your public profile, password and log out, as one tidy list */
.sl-account-list[b-i0buum7chr] {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sl-account-list li + li[b-i0buum7chr] {
        border-top: 1px solid color-mix(in srgb, var(--sl-text) 8%, transparent);
    }

    .sl-account-list a[b-i0buum7chr] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        color: var(--sl-text);
        font-weight: 600;
        text-decoration: none;
    }

        .sl-account-list a span[b-i0buum7chr] {
            font-size: 22px;
            color: var(--sl-muted);
        }

    .sl-account-list form[b-i0buum7chr] {
        padding-top: 14px;
    }

@media (hover: hover) and (pointer: fine) {
    .sl-account-list a:hover[b-i0buum7chr] {
        color: var(--sl-accent);
    }
}

.sl-logout-btn[b-i0buum7chr] {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: var(--sl-surface);
    color: var(--sl-text);
    font-weight: 600;
}
/* Stop Chrome's autofill from painting the username box blue */
.sl-handle-input input:-webkit-autofill[b-i0buum7chr] {
    -webkit-box-shadow: 0 0 0 1000px var(--sl-bg) inset;
    -webkit-text-fill-color: var(--sl-text);
}

/* STEP 17: the profile photo card: the picture on the left, the buttons beside it */
.sl-photo[b-i0buum7chr] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sl-photo-body[b-i0buum7chr] {
    flex: 1;
    min-width: 0;
}

    .sl-photo-body .sl-label[b-i0buum7chr] {
        margin-bottom: 0;
    }

    .sl-photo-body .sl-hint[b-i0buum7chr] {
        margin-top: 4px;
    }

.sl-photo-actions[b-i0buum7chr] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* "Choose a photo" opens the file picker. It's a label around a hidden file box, so it works with a keyboard too */
.sl-photo-pick[b-i0buum7chr],
.sl-photo-remove[b-i0buum7chr] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.sl-photo-pick[b-i0buum7chr] {
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
}

    .sl-photo-pick:focus-within[b-i0buum7chr] {
        outline: 2px solid var(--sl-accent);
        outline-offset: 2px;
    }

    .sl-photo-pick.busy[b-i0buum7chr] {
        opacity: 0.7;
        cursor: progress;
    }

.sl-photo-remove[b-i0buum7chr] {
    border: 1px solid var(--sl-border);
    background: transparent;
    color: var(--sl-text);
}

    .sl-photo-remove:hover[b-i0buum7chr] {
        border-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
    }

.sl-photo .sl-ok[b-i0buum7chr],
.sl-photo .sl-error[b-i0buum7chr] {
    margin-top: 10px;
}

@media (max-width: 480px) {
    .sl-photo[b-i0buum7chr] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* STEP 18: the locked username, with a calm Change button beside it */
.sl-handle-row[b-i0buum7chr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sl-handle-now[b-i0buum7chr] {
    overflow-wrap: anywhere;
    font-size: 20px;
    font-weight: 700;
}

.sl-handle-change[b-i0buum7chr],
.sl-handle-cancel[b-i0buum7chr] {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: transparent;
    color: var(--sl-text);
    font-size: 15px;
    font-weight: 600;
}

    .sl-handle-change:hover:not(:disabled)[b-i0buum7chr],
    .sl-handle-cancel:hover[b-i0buum7chr] {
        border-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
    }

    .sl-handle-change:disabled[b-i0buum7chr] {
        color: var(--sl-muted);
        cursor: not-allowed;
    }

/* "@name is free ✓" while you type */
.sl-handle-status[b-i0buum7chr] {
    min-height: 20px;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--sl-muted);
}

    .sl-handle-status.ok[b-i0buum7chr] {
        color: var(--sl-accent-2);
        font-weight: 600;
    }

    .sl-handle-status.bad[b-i0buum7chr] {
        color: #FFB347;
        font-weight: 600;
    }

.sl-handle-actions[b-i0buum7chr] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.sl-handle-save[b-i0buum7chr] {
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
    font-size: 15px;
    font-weight: 700;
}

    .sl-handle-save:disabled[b-i0buum7chr] {
        background: color-mix(in srgb, var(--sl-border) 55%, var(--sl-surface));
        color: var(--sl-muted);
        cursor: not-allowed;
    }
/* /Components/Pages/SeerPage.razor.rz.scp.css */
/* STEP 16: a seer's profile. One calm column like the Wish List and Trivia */
.sl-seer[b-7dus9vj870] {
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 0 40px;
}

.sl-seer-muted[b-7dus9vj870] {
    margin: 0;
    color: var(--sl-muted);
}

/* The big picture, the @name and when they joined */
.sl-seer-head[b-7dus9vj870] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 22px;
}

.sl-seer-id[b-7dus9vj870] {
    flex: 1;
    min-width: 0;
}

    .sl-seer-id h1[b-7dus9vj870] {
        margin: 0;
        overflow-wrap: anywhere;
        font-size: 34px;
    }

    .sl-seer-id p[b-7dus9vj870] {
        margin: 4px 0 0;
        font-size: 15px;
        color: var(--sl-muted);
    }

    /* STEP 19: the title they wear, under their name */
    .sl-seer-id[b-7dus9vj870]  .sl-title {
        margin-top: 8px;
    }

/* "Edit profile" only shows on your own page: a calm outline button */
.sl-seer-edit[b-7dus9vj870] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 18%, transparent);
    border-radius: 999px;
    color: var(--sl-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .sl-seer-edit:hover[b-7dus9vj870] {
        border-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
        background-color: color-mix(in srgb, var(--sl-text) 6%, transparent);
        color: var(--sl-text);
    }
}

/* Four numbers in a row (two by two on phones) */
.sl-seer-stats[b-7dus9vj870] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.sl-stat[b-7dus9vj870] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 9%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--sl-surface) 72%, transparent);
}

    .sl-stat strong[b-7dus9vj870] {
        font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
        font-size: 28px;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    .sl-stat span[b-7dus9vj870] {
        font-size: 13px;
        color: var(--sl-muted);
    }

/* ===== Badges ===== */
.sl-seer-section-head[b-7dus9vj870] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .sl-seer-section-head h2[b-7dus9vj870] {
        margin: 0;
        font-size: 22px;
    }

    .sl-seer-section-head span[b-7dus9vj870] {
        font-size: 14px;
        color: var(--sl-muted);
        font-variant-numeric: tabular-nums;
    }

.sl-badges[b-7dus9vj870] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-badge[b-7dus9vj870] {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas: "emoji name" "emoji how" "emoji title";
    align-items: center;
    column-gap: 12px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 9%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--sl-surface) 72%, transparent);
}

    /* Earned: a soft glow in the season colours */
    .sl-badge.earned[b-7dus9vj870] {
        border-color: color-mix(in srgb, var(--sl-grad-2) 40%, transparent);
        background:
            radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sl-grad-1) 14%, transparent), transparent 60%),
            color-mix(in srgb, var(--sl-surface) 80%, transparent);
    }

    /* Still to earn (only on your own profile): faded, so the earned ones stand out */
    .sl-badge.locked[b-7dus9vj870] {
        border-style: dashed;
    }

        .sl-badge.locked .sl-badge-emoji[b-7dus9vj870] {
            filter: grayscale(1);
            opacity: 0.45;
        }

        .sl-badge.locked .sl-badge-name[b-7dus9vj870] {
            color: var(--sl-muted);
        }

.sl-badge-emoji[b-7dus9vj870] {
    grid-area: emoji;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sl-text) 7%, transparent);
    font-size: 24px;
    line-height: 1;
}

.sl-badge-name[b-7dus9vj870] {
    grid-area: name;
    align-self: end;
    font-size: 15px;
    font-weight: 700;
}

.sl-badge-how[b-7dus9vj870] {
    grid-area: how;
    align-self: start;
    font-size: 13px;
    line-height: 1.35;
    color: var(--sl-muted);
}

/* STEP 19: the title each badge unlocks */
.sl-badge-title[b-7dus9vj870] {
    grid-area: title;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: color-mix(in srgb, var(--sl-accent) 75%, var(--sl-text));
}

.sl-badge.locked .sl-badge-title[b-7dus9vj870] {
    color: var(--sl-muted);
}

/* STEP 19: the hard badges get a gold edge, and a warm glow once earned */
.sl-badge.rare[b-7dus9vj870] {
    border-color: color-mix(in srgb, var(--sl-grad-1) 35%, transparent);
}

    .sl-badge.rare.earned[b-7dus9vj870] {
        border-color: color-mix(in srgb, var(--sl-grad-1) 65%, transparent);
        box-shadow: 0 0 26px -12px var(--sl-grad-1);
    }

    .sl-badge.rare .sl-badge-title[b-7dus9vj870] {
        color: var(--sl-grad-1);
    }

.sl-seer-empty[b-7dus9vj870] {
    margin: 0;
    padding: 24px 20px;
    border: 1px dashed color-mix(in srgb, var(--sl-text) 16%, transparent);
    border-radius: 20px;
    text-align: center;
    color: var(--sl-muted);
}

/* "See their theories in the Vault" and "Back to the Vault" */
.sl-seer-btn[b-7dus9vj870] {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

    .sl-seer-btn:hover[b-7dus9vj870] {
        color: var(--sl-bg);
    }

/* Nobody with that name */
.sl-seer-missing[b-7dus9vj870] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 0;
    text-align: center;
}

.sl-seer-missing-icon[b-7dus9vj870] {
    font-size: 48px;
}

.sl-seer-missing h1[b-7dus9vj870] {
    margin: 0;
    font-size: 28px;
}

.sl-seer-missing p[b-7dus9vj870] {
    margin: 0 0 8px;
    color: var(--sl-muted);
}

.sl-seer-missing .sl-seer-btn[b-7dus9vj870] {
    align-self: center;
}

/* ===== Phones ===== */
@media (max-width: 600px) {
    .sl-seer[b-7dus9vj870] {
        gap: 22px;
        padding-top: 6px;
    }

    .sl-seer-id h1[b-7dus9vj870] {
        font-size: 28px;
    }

    .sl-seer-stats[b-7dus9vj870] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sl-seer-edit[b-7dus9vj870] {
        flex: 1 1 100%;
        justify-content: center;
    }

    .sl-seer-btn[b-7dus9vj870] {
        align-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-seer-edit[b-7dus9vj870] {
        transition: none;
    }
}
/* /Components/Pages/Staff.razor.rz.scp.css */
/* STEP 18: the staff page. One calm column, like the Wish List and Notifications.
   The tabs are separate components (Components/Staff), so the styles they share live here.
   "::deep" lets this page's styles reach into those components.
   STEP 25: a menu down the side on computers, and a row of pills to swipe along on phones */
.sl-staff-loading[b-68opuodbp9] {
    max-width: 1040px;
    margin: 24px auto;
    color: var(--sl-muted);
}

.sl-staff[b-68opuodbp9] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 12px 0 40px;
}

.sl-staff-title-row[b-68opuodbp9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 8px;
}

.sl-staff-intro h1[b-68opuodbp9] {
    margin: 0;
    font-size: 36px;
}

.sl-staff-intro p[b-68opuodbp9] {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--sl-muted);
}

/* "Admin" or "Moderator" next to the title */
.sl-staff-you[b-68opuodbp9] {
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-accent-2) 16%, transparent);
    color: var(--sl-accent-2);
    font-size: 13px;
    font-weight: 700;
}

/* ===== STEP 25: the menu, and the tool next to it ===== */
.sl-staff-layout[b-68opuodbp9] {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.sl-staff-nav[b-68opuodbp9] {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sl-staff-nav-item[b-68opuodbp9] {
    position: relative; /* keeps the count's screen-reader words inside the pill, even when the row is scrolled */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--sl-muted);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .sl-staff-nav-item.active[b-68opuodbp9] {
        background: color-mix(in srgb, var(--sl-text) 10%, transparent);
        color: var(--sl-text);
    }

/* How many are waiting, like the bell's number */
.sl-staff-count[b-68opuodbp9] {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--sl-accent);
    color: var(--sl-bg);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.sl-staff-main[b-68opuodbp9] {
    min-width: 0;
    max-width: 800px;
}

@media (hover: hover) and (pointer: fine) {
    .sl-staff-nav-item:not(.active):hover[b-68opuodbp9] {
        background: color-mix(in srgb, var(--sl-text) 6%, transparent);
        color: var(--sl-text);
    }
}

@media (max-width: 900px) {
    .sl-staff-layout[b-68opuodbp9] {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .sl-staff-nav[b-68opuodbp9] {
        position: static;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

        .sl-staff-nav[b-68opuodbp9]::-webkit-scrollbar {
            display: none;
        }

    .sl-staff-nav-item[b-68opuodbp9] {
        flex: none;
        min-height: 40px;
        border-color: color-mix(in srgb, var(--sl-text) 12%, transparent);
        border-radius: 999px;
    }

        .sl-staff-nav-item.active[b-68opuodbp9] {
            border-color: transparent;
            background: var(--sl-text);
            color: var(--sl-bg);
        }

    .sl-staff-main[b-68opuodbp9] {
        max-width: none;
    }
}

/* ===== What the tabs share ===== */
.sl-staff[b-68opuodbp9]  .sl-staff-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sl-staff[b-68opuodbp9]  .sl-staff-hint,
.sl-staff[b-68opuodbp9]  .sl-staff-muted {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sl-muted);
}

.sl-staff[b-68opuodbp9]  .sl-staff-empty {
    margin: 0;
    padding: 28px 20px;
    border: 1px dashed color-mix(in srgb, var(--sl-text) 16%, transparent);
    border-radius: 20px;
    text-align: center;
    font-size: 15px;
    color: var(--sl-muted);
}

/* "Kept ✓", "@vicekid is paused until 8 Nov ✓" and friends */
.sl-staff[b-68opuodbp9]  .sl-staff-notice {
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sl-accent-2) 12%, transparent);
    color: var(--sl-text);
    font-size: 15px;
    font-weight: 600;
}

.sl-staff[b-68opuodbp9]  .sl-staff-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-staff[b-68opuodbp9]  .sl-staff-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 9%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--sl-surface) 75%, transparent);
}

.sl-staff[b-68opuodbp9]  .sl-staff-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.sl-staff[b-68opuodbp9]  .sl-staff-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-text) 8%, transparent);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

    .sl-staff[b-68opuodbp9]  .sl-staff-chip.warn {
        background: color-mix(in srgb, var(--sl-grad-1) 16%, transparent);
        color: var(--sl-grad-1);
    }

.sl-staff[b-68opuodbp9]  .sl-staff-meta {
    margin: 0;
    font-size: 14px;
    color: var(--sl-muted);
}

/* The quiet buttons under each card. Ghost style, so a card full of choices still feels calm */
.sl-staff[b-68opuodbp9]  .sl-staff-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sl-staff[b-68opuodbp9]  .sl-staff-btn {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: transparent;
    color: var(--sl-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .sl-staff[b-68opuodbp9]  .sl-staff-btn.primary {
        border-color: transparent;
        background: var(--sl-text);
        color: var(--sl-bg);
    }

    .sl-staff[b-68opuodbp9]  .sl-staff-btn.danger {
        border-color: color-mix(in srgb, var(--sl-grad-1) 55%, transparent);
        color: var(--sl-grad-1);
    }

    .sl-staff[b-68opuodbp9]  .sl-staff-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

@media (hover: hover) and (pointer: fine) {
    .sl-staff[b-68opuodbp9]  .sl-staff-btn:not(:disabled):not(.primary):hover {
        border-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
        background: color-mix(in srgb, var(--sl-text) 6%, transparent);
        color: var(--sl-text);
    }

    .sl-staff[b-68opuodbp9]  .sl-staff-btn.danger:not(:disabled):hover {
        background: color-mix(in srgb, var(--sl-grad-1) 12%, transparent);
        color: var(--sl-grad-1);
    }
}

.sl-staff[b-68opuodbp9]  .sl-staff-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 14%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--sl-bg) 60%, transparent);
    color: var(--sl-text);
    font-size: 16px; /* 16px stops iPhones zooming in */
}

    .sl-staff[b-68opuodbp9]  .sl-staff-input:focus {
        outline: none;
        border-color: var(--sl-accent);
    }

/* ===== STEP 25: shared by the Overview, Trivia and Seasons tools ===== */

/* A hint with its main button beside it (they stack on phones) */
.sl-staff[b-68opuodbp9]  .sl-staff-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}

    .sl-staff[b-68opuodbp9]  .sl-staff-bar .sl-staff-hint {
        flex: 1 1 320px;
    }

.sl-staff[b-68opuodbp9]  .sl-staff-error {
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sl-grad-1) 14%, transparent);
    color: var(--sl-text);
    font-size: 15px;
    font-weight: 600;
}

.sl-staff[b-68opuodbp9]  .sl-staff-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.sl-staff[b-68opuodbp9]  .sl-staff-chip.live {
    background: color-mix(in srgb, var(--sl-accent-2) 18%, transparent);
    color: var(--sl-accent-2);
}

.sl-staff[b-68opuodbp9]  .sl-staff-group {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sl-muted);
}

/* "Delete it?" and "Make it live?" open right on the card, instead of a pop-up */
.sl-staff[b-68opuodbp9]  .sl-staff-confirm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sl-text) 6%, transparent);
}

    .sl-staff[b-68opuodbp9]  .sl-staff-confirm p {
        margin: 0;
        font-size: 15px;
        line-height: 1.5;
    }

.sl-staff[b-68opuodbp9]  .sl-staff-back {
    align-self: flex-start;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--sl-muted);
    font-size: 15px;
    font-weight: 600;
}

.sl-staff[b-68opuodbp9]  .sl-staff-callout {
    margin: 0;
    padding: 12px 16px;
    border-left: 3px solid var(--sl-grad-1);
    border-radius: 0 12px 12px 0;
    background: color-mix(in srgb, var(--sl-grad-1) 10%, transparent);
    font-size: 15px;
    line-height: 1.5;
}

.sl-staff[b-68opuodbp9]  .sl-editor-title {
    margin: 0;
    font-size: 24px;
    overflow-wrap: anywhere;
}

/* Form fields: the label above, a hint below when it helps */
.sl-staff[b-68opuodbp9]  .sl-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .sl-staff[b-68opuodbp9]  .sl-field label {
        font-size: 14px;
        font-weight: 600;
    }

        .sl-staff[b-68opuodbp9]  .sl-field label span {
            font-weight: 400;
            color: var(--sl-muted);
        }

.sl-staff[b-68opuodbp9]  .sl-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.sl-staff[b-68opuodbp9]  .sl-field-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sl-muted);
}

.sl-staff[b-68opuodbp9]  textarea.sl-staff-input {
    resize: vertical;
    line-height: 1.45;
}

.sl-staff[b-68opuodbp9]  .sl-staff-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sl-staff[b-68opuodbp9]  input[type="datetime-local"] {
    color-scheme: dark;
}

@media (hover: hover) and (pointer: fine) {
    .sl-staff[b-68opuodbp9]  .sl-staff-back:hover {
        color: var(--sl-text);
    }
}

/* ===== Reports ===== */
.sl-staff[b-68opuodbp9]  .sl-staff-quote {
    margin: 0;
    padding: 2px 0 2px 14px;
    border-left: 3px solid color-mix(in srgb, var(--sl-text) 18%, transparent);
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sl-staff[b-68opuodbp9]  .sl-staff-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sl-staff[b-68opuodbp9]  .sl-staff-reasons li {
        padding: 3px 10px;
        border: 1px solid color-mix(in srgb, var(--sl-grad-1) 40%, transparent);
        border-radius: 999px;
        color: var(--sl-grad-1);
        font-size: 13px;
        font-weight: 600;
    }

.sl-staff[b-68opuodbp9]  .sl-staff-note {
    margin: 0;
    font-size: 14px;
    font-style: italic;
    color: var(--sl-muted);
    overflow-wrap: anywhere;
}

/* ===== Wishes ===== */
.sl-staff[b-68opuodbp9]  .sl-staff-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sl-staff[b-68opuodbp9]  .sl-staff-filter-btn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 14%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--sl-text);
    font-size: 14px;
}

    .sl-staff[b-68opuodbp9]  .sl-staff-filter-btn.on {
        border-color: var(--sl-accent);
        background: color-mix(in srgb, var(--sl-accent) 14%, transparent);
        font-weight: 700;
    }

.sl-staff[b-68opuodbp9]  .sl-staff-wish-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.sl-staff[b-68opuodbp9]  .sl-staff-why {
    margin: -4px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sl-muted);
    overflow-wrap: anywhere;
}

.sl-staff[b-68opuodbp9]  .sl-staff-reply {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--sl-accent) 8%, transparent);
    font-size: 15px;
    line-height: 1.45;
}

    .sl-staff[b-68opuodbp9]  .sl-staff-reply span {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--sl-accent);
    }

.sl-staff[b-68opuodbp9]  .sl-staff-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--sl-muted);
    font-variant-numeric: tabular-nums;
}

/* ===== Seers ===== */
.sl-staff[b-68opuodbp9]  .sl-staff-search {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .sl-staff[b-68opuodbp9]  .sl-staff-search label {
        font-size: 15px;
        font-weight: 700;
    }

.sl-staff[b-68opuodbp9]  .sl-staff-seer {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
}

.sl-staff[b-68opuodbp9]  .sl-staff-seer-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sl-staff[b-68opuodbp9]  .sl-staff-handle {
    font-size: 16px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* "Pause @vicekid for 7 days?" Yes / Cancel */
.sl-staff[b-68opuodbp9]  .sl-staff-confirm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--sl-grad-1) 40%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--sl-grad-1) 7%, transparent);
}

    .sl-staff[b-68opuodbp9]  .sl-staff-confirm p {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.45;
    }

/* ===== Log ===== */
.sl-staff[b-68opuodbp9]  .sl-staff-log {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sl-staff[b-68opuodbp9]  .sl-staff-log li {
        padding: 12px 0;
        border-bottom: 1px solid color-mix(in srgb, var(--sl-text) 8%, transparent);
    }

.sl-staff[b-68opuodbp9]  .sl-staff-log-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 15px;
}

.sl-staff[b-68opuodbp9]  .sl-staff-log-who {
    font-weight: 700;
}

.sl-staff[b-68opuodbp9]  .sl-staff-log-time {
    margin-left: auto;
    font-size: 13px;
    color: var(--sl-muted);
    white-space: nowrap;
}

.sl-staff[b-68opuodbp9]  .sl-staff-log-details {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--sl-muted);
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .sl-staff[b-68opuodbp9] {
        gap: 18px;
        padding-top: 4px;
    }

    .sl-staff-intro h1[b-68opuodbp9] {
        font-size: 28px;
    }

    .sl-staff-intro p[b-68opuodbp9] {
        font-size: 16px;
    }

    .sl-staff[b-68opuodbp9]  .sl-staff-card {
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-staff[b-68opuodbp9]  .sl-staff-btn,
    .sl-staff-nav-item[b-68opuodbp9] {
        transition: none;
    }
}
/* /Components/Pages/Support.razor.rz.scp.css */
/* The Support page. Colours come from the season (App.razor); the value after each comma is the Season 1 colour. */

.sl-sup[b-8z0nmcxegj] {
    --sup-bg: var(--sl-bg, #0E0B1A);
    --sup-surface: var(--sl-surface, #18122C);
    --sup-border: var(--sl-border, #2A2142);
    --sup-text: var(--sl-text, #FFF4F8);
    --sup-muted: var(--sl-muted, #B9A9C9);
    --sup-g1: var(--sl-grad-1, #FFB347);
    --sup-g2: var(--sl-grad-2, #FF4FA3);
    --sup-g3: var(--sl-grad-3, #8B5CF6);
    --sup-teal: #34E0D1;

    box-sizing: border-box;
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 16px 64px;
    color: var(--sup-text);
}

.sl-sup h1[b-8z0nmcxegj] {
    margin: 0 0 12px;
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: clamp(32px, 6vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.sl-sup-intro[b-8z0nmcxegj] {
    margin: 0 0 28px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--sup-muted);
}

.sl-sup-card[b-8z0nmcxegj] {
    padding: 28px;
    border: 1px solid var(--sup-border);
    border-radius: 22px;
    background: var(--sup-surface);
}

.sl-sup-card h2[b-8z0nmcxegj] {
    margin: 0 0 18px;
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.sl-sup-list[b-8z0nmcxegj] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.sl-sup-list li[b-8z0nmcxegj] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 17px;
    line-height: 1.45;
}

/* Small tinted tiles with our own line icons */
.sl-sup-icon[b-8z0nmcxegj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--sup-teal) 12%, transparent);
    color: var(--sup-teal);
}

/* The main button: season gradient, lifts and glows on hover, sinks a little when pressed */
.sl-sup-btn[b-8z0nmcxegj] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--sup-g1), var(--sup-g2), var(--sup-g3));
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    color: var(--sup-bg);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.sl-sup-btn:disabled[b-8z0nmcxegj] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
    .sl-sup-btn:not(:disabled):hover[b-8z0nmcxegj] {
        transform: translateY(-2px) scale(1.015);
        filter: brightness(1.05);
        box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--sup-g2) 70%, transparent);
        color: var(--sup-bg);
    }
}

.sl-sup-btn:not(:disabled):active[b-8z0nmcxegj] {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
    transition-duration: 0.06s;
}

.sl-sup-btn:focus-visible[b-8z0nmcxegj] {
    outline: 2px solid var(--sup-teal);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .sl-sup-btn[b-8z0nmcxegj] {
        transition: none;
    }

    .sl-sup-btn:hover[b-8z0nmcxegj],
    .sl-sup-btn:active[b-8z0nmcxegj] {
        transform: none;
    }
}

.sl-sup-note[b-8z0nmcxegj] {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sup-muted);
}

/* ---------- Thank-you screen, after PayPal sends people back ---------- */

.sl-sup-thanks[b-8z0nmcxegj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
    text-align: center;
}

.sl-sup-thanks h1[b-8z0nmcxegj] {
    margin: 0;
}

.sl-sup-thanks p[b-8z0nmcxegj] {
    max-width: 460px;
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--sup-muted);
}

.sl-sup-thanks .sl-sup-btn[b-8z0nmcxegj] {
    max-width: 340px;
    margin-top: 8px;
}

.sl-sup-badge[b-8z0nmcxegj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sup-g1), var(--sup-g2) 55%, var(--sup-g3));
    color: var(--sup-bg);
}
/* /Components/Pages/TheoryPage.razor.rz.scp.css */
.sl-theory-page[b-nwx06j74cd] {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sl-theory-top[b-nwx06j74cd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sl-back[b-nwx06j74cd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sl-muted);
    text-decoration: none;
}

    .sl-back:hover[b-nwx06j74cd] {
        color: var(--sl-text);
    }

.sl-share[b-nwx06j74cd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: var(--sl-surface);
    color: var(--sl-text);
    font-size: 14px;
    font-weight: 600;
}

    .sl-share.copied[b-nwx06j74cd] {
        color: var(--sl-accent-2);
    }

.sl-theory-card[b-nwx06j74cd] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(20px, 4vw, 32px);
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 24px;
}

.sl-chips[b-nwx06j74cd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sl-verdict[b-nwx06j74cd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-border) 55%, var(--sl-surface));
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-muted);
}

    .sl-verdict.confirmed[b-nwx06j74cd] {
        background: color-mix(in srgb, var(--sl-accent-2) 14%, transparent);
        color: var(--sl-accent-2);
    }

    .sl-verdict.debunked[b-nwx06j74cd] {
        background: color-mix(in srgb, var(--sl-grad-1) 14%, transparent);
        color: var(--sl-grad-1);
    }

.sl-theory-text[b-nwx06j74cd] {
    margin: 0;
    font-size: clamp(22px, 3.6vw, 30px);
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -0.015em;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.sl-byline[b-nwx06j74cd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sl-byline-text[b-nwx06j74cd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sl-handle[b-nwx06j74cd] {
    font-size: 15px;
    font-weight: 600;
}

.sl-stamp[b-nwx06j74cd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sl-muted);
}

.sl-votes[b-nwx06j74cd] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sl-vote[b-nwx06j74cd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 140px;
    max-width: 200px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: var(--sl-bg);
    color: var(--sl-text);
    font-size: 15px;
    font-weight: 600;
    transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    /* STEP 13 polish: a quick press-down when tapped (the pop after it lives in app.css) */
    .sl-vote:not(:disabled):active[b-nwx06j74cd] {
        transform: scale(0.95);
    }

    .sl-vote.on[b-nwx06j74cd] {
        border-color: var(--sl-accent-2);
        background: color-mix(in srgb, var(--sl-accent-2) 16%, transparent);
        color: var(--sl-accent-2);
    }

.sl-cap.on[b-nwx06j74cd] {
    border-color: var(--sl-grad-1);
    background: color-mix(in srgb, var(--sl-grad-1) 16%, transparent);
    color: var(--sl-grad-1);
}

.sl-vote:disabled[b-nwx06j74cd] {
    opacity: 0.55;
    cursor: not-allowed;
}

.sl-vote-error[b-nwx06j74cd] {
    margin: -8px 0 0;
    font-size: 14px;
    color: var(--sl-grad-1);
}

/* STEP 18: Report (and Remove, for staff) sit quietly under everything else.
   Pulled 12px left so the flag lines up with the text above it */
.sl-theory-tools[b-nwx06j74cd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: -12px 0 -10px -12px;
}



.sl-muted[b-nwx06j74cd] {
    margin: 0;
    color: var(--sl-muted);
}

.sl-theory-missing[b-nwx06j74cd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 24px;
}

    .sl-theory-missing h1[b-nwx06j74cd] {
        margin: 0;
        font-size: 24px;
    }

    .sl-theory-missing p[b-nwx06j74cd] {
        margin: 0;
        color: var(--sl-muted);
    }

/* STEP 13: calm grey, like the "POLL" label on Vault cards, so the category colour next to it stands out */
.sl-poll-chip[b-nwx06j74cd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-text) 8%, transparent);
    font-size: 13px;
    font-weight: 700;
    color: var(--sl-muted);
}

@media (max-width: 767.98px) {
    .sl-vote[b-nwx06j74cd] {
        max-width: none;
    }
}
/* /Components/Pages/Trivia.razor.rz.scp.css */
/* STEP 15: Trivia. One calm column like the Wish List: the quiz on top, the leaderboard under it */
.sl-trivia[b-5vgusg6e89] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 0 40px;
}

.sl-trivia-intro h1[b-5vgusg6e89] {
    margin: 0 0 8px;
    font-size: 36px;
    text-wrap: balance;
}

.sl-trivia-intro p[b-5vgusg6e89] {
    margin: 0;
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.55;
    color: var(--sl-muted);
}

/* The quiz box: frosted like the cards, but it stays still (you're reading, not browsing) */
.sl-trivia-panel[b-5vgusg6e89] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 11%, transparent);
    border-radius: 22px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--sl-text) 8%, transparent), color-mix(in srgb, var(--sl-text) 2.5%, transparent) 40%, color-mix(in srgb, var(--sl-surface) 70%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sl-text) 9%, transparent), 0 20px 44px -26px rgba(0, 0, 0, 0.85);
}

.sl-trivia-head[b-5vgusg6e89] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 14px;
}

    .sl-trivia-head h2[b-5vgusg6e89] {
        margin: 0;
        font-size: 22px;
    }

.sl-trivia-meta[b-5vgusg6e89] {
    font-size: 14px;
    color: var(--sl-muted);
}

.sl-trivia-muted[b-5vgusg6e89],
.sl-trivia-soon[b-5vgusg6e89] {
    margin: 0;
    font-size: 15px;
    color: var(--sl-muted);
}

.sl-trivia-soon[b-5vgusg6e89] {
    padding: 8px 0;
    font-size: 16px;
}

/* "Question 3 of 10" and your points, with the bar under them */
.sl-trivia-progress-row[b-5vgusg6e89] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--sl-muted);
}

.sl-trivia-points[b-5vgusg6e89] {
    display: inline-block;
    font-weight: 700;
    color: var(--sl-accent-2);
    font-variant-numeric: tabular-nums;
}

.sl-trivia-bar[b-5vgusg6e89] {
    height: 8px;
    margin-top: -6px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-text) 9%, transparent);
}

    .sl-trivia-bar span[b-5vgusg6e89] {
        display: block;
        height: 100%;
        border-radius: inherit;
        background-image: var(--sl-gradient);
        transition: width 0.45s ease;
    }

.sl-trivia-question[b-5vgusg6e89] {
    margin: 4px 0 0;
    font-size: 22px;
    line-height: 1.35;
    text-wrap: balance;
}

/* The answers: big, easy to tap, and calm until you pick one */
.sl-trivia-options[b-5vgusg6e89] {
    display: grid;
    gap: 10px;
}

.sl-trivia-option[b-5vgusg6e89] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 12%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--sl-bg) 55%, transparent);
    color: var(--sl-text);
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.25s ease, transform 0.1s ease;
}

    /* After you lock, the answers stop being buttons but keep their colours (no grey "disabled" look) */
    .sl-trivia-option:disabled[b-5vgusg6e89] {
        color: var(--sl-text);
        cursor: default;
    }

    .sl-trivia-option:not(:disabled):active[b-5vgusg6e89] {
        transform: scale(0.99);
    }

@media (hover: hover) and (pointer: fine) {
    .sl-trivia-option:not(:disabled):not(.picked):hover[b-5vgusg6e89] {
        border-color: color-mix(in srgb, var(--sl-text) 28%, transparent);
        background-color: color-mix(in srgb, var(--sl-text) 5%, transparent);
    }
}

.sl-trivia-option:focus-visible[b-5vgusg6e89] {
    outline: 2px solid var(--sl-accent);
    outline-offset: 2px;
}

/* The little circle on the left: empty, then filled when picked */
.sl-trivia-dot[b-5vgusg6e89] {
    flex: none;
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, var(--sl-text) 32%, transparent);
    border-radius: 50%;
    transition: border-color 0.15s ease;
}

    .sl-trivia-dot[b-5vgusg6e89]::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: transparent;
        transition: background-color 0.15s ease;
    }

.sl-trivia-option-text[b-5vgusg6e89] {
    flex: 1;
    min-width: 0;
}

/* Picked, not locked yet: the season colour */
.sl-trivia-option.picked[b-5vgusg6e89] {
    border-color: var(--sl-accent);
    background-color: color-mix(in srgb, var(--sl-accent) 12%, transparent);
}

    .sl-trivia-option.picked .sl-trivia-dot[b-5vgusg6e89] {
        border-color: var(--sl-accent);
    }

        .sl-trivia-option.picked .sl-trivia-dot[b-5vgusg6e89]::after {
            background-color: var(--sl-accent);
        }

/* Locked: the right answer in teal (it glows once), your wrong pick in orange, the rest step back */
.sl-trivia-option.right[b-5vgusg6e89] {
    border-color: var(--sl-accent-2);
    background-color: color-mix(in srgb, var(--sl-accent-2) 14%, transparent);
    animation: sl-trivia-reveal-b-5vgusg6e89 0.9s ease-out;
}

    .sl-trivia-option.right .sl-trivia-dot[b-5vgusg6e89] {
        border-color: var(--sl-accent-2);
    }

        .sl-trivia-option.right .sl-trivia-dot[b-5vgusg6e89]::after {
            background-color: var(--sl-accent-2);
        }

.sl-trivia-option.wrong[b-5vgusg6e89] {
    border-color: var(--sl-grad-1);
    background-color: color-mix(in srgb, var(--sl-grad-1) 12%, transparent);
}

    .sl-trivia-option.wrong .sl-trivia-dot[b-5vgusg6e89] {
        border-color: var(--sl-grad-1);
    }

        .sl-trivia-option.wrong .sl-trivia-dot[b-5vgusg6e89]::after {
            background-color: var(--sl-grad-1);
        }

.sl-trivia-option.faded[b-5vgusg6e89] {
    opacity: 0.5;
}

@keyframes sl-trivia-reveal-b-5vgusg6e89 {
    from {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--sl-accent-2) 55%, transparent);
    }

    to {
        box-shadow: 0 0 0 12px transparent;
    }
}

/* "Right answer" / "Your pick" at the end of the line */
.sl-trivia-mark[b-5vgusg6e89] {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

    .sl-trivia-mark.right[b-5vgusg6e89] {
        background: color-mix(in srgb, var(--sl-accent-2) 20%, transparent);
        color: var(--sl-accent-2);
    }

    .sl-trivia-mark.wrong[b-5vgusg6e89] {
        background: color-mix(in srgb, var(--sl-grad-1) 18%, transparent);
        color: var(--sl-grad-1);
    }

/* The main button (Start, Lock my answer, Next question). It lifts and glows like Lock theory (sl-action in app.css) */
.sl-trivia-btn[b-5vgusg6e89] {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

    .sl-trivia-btn:hover[b-5vgusg6e89] {
        color: var(--sl-bg); /* links change colour on hover; this one keeps its dark text on the gradient */
    }

    .sl-trivia-btn:disabled[b-5vgusg6e89] {
        background: color-mix(in srgb, var(--sl-border) 55%, var(--sl-surface));
        color: var(--sl-muted);
        cursor: not-allowed;
    }

.sl-trivia-verdict[b-5vgusg6e89] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

    .sl-trivia-verdict.right[b-5vgusg6e89] {
        color: var(--sl-accent-2);
    }

    .sl-trivia-verdict.wrong[b-5vgusg6e89] {
        color: var(--sl-grad-1);
    }

/* "Did you know?" The fun fact after every answer */
.sl-trivia-fact[b-5vgusg6e89] {
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--sl-accent-2) 26%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--sl-accent-2) 7%, transparent);
}

    .sl-trivia-fact span[b-5vgusg6e89] {
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--sl-accent-2);
    }

    .sl-trivia-fact p[b-5vgusg6e89] {
        margin: 0;
        font-size: 15px;
        line-height: 1.55;
    }

.sl-trivia-start[b-5vgusg6e89] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

    .sl-trivia-start p[b-5vgusg6e89] {
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
        color: var(--sl-muted);
    }

.sl-trivia-error[b-5vgusg6e89] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-grad-1);
}

/* Your score at the end: one big number in the season gradient */
.sl-trivia-score[b-5vgusg6e89] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0 4px;
    text-align: center;
}

    .sl-trivia-score p[b-5vgusg6e89] {
        margin: 0;
    }

.sl-trivia-score-big[b-5vgusg6e89] {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    background-image: var(--sl-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

    .sl-trivia-score-big small[b-5vgusg6e89] {
        font-size: 28px;
    }

.sl-trivia-score-points[b-5vgusg6e89] {
    font-size: 18px;
    font-weight: 700;
}

.sl-trivia-score-line[b-5vgusg6e89] {
    font-size: 16px;
    color: var(--sl-accent-2);
    font-weight: 600;
}

/* ===== The leaderboard ===== */
.sl-trivia-board[b-5vgusg6e89] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sl-trivia-board-head[b-5vgusg6e89] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
}

    .sl-trivia-board-head h2[b-5vgusg6e89] {
        margin: 0;
        font-size: 22px;
    }

.sl-trivia-tabs[b-5vgusg6e89] {
    min-width: 240px;
}

.sl-board[b-5vgusg6e89] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-board-row[b-5vgusg6e89] {
    display: grid;
    grid-template-columns: 44px 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 16px 8px 10px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 8%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--sl-surface) 70%, transparent);
}

    /* Your own line, so you can find yourself fast */
    .sl-board-row.me[b-5vgusg6e89] {
        border-color: color-mix(in srgb, var(--sl-accent-2) 50%, transparent);
        background: color-mix(in srgb, var(--sl-accent-2) 9%, var(--sl-surface));
    }

.sl-board-rank[b-5vgusg6e89] {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--sl-muted);
    font-variant-numeric: tabular-nums;
}

/* The medals are emoji, so they get a little more room */
.sl-board li:nth-child(-n + 3) .sl-board-rank[b-5vgusg6e89] {
    font-size: 22px;
}

.sl-board-name[b-5vgusg6e89] {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-board-you[b-5vgusg6e89] {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-accent-2) 20%, transparent);
    color: var(--sl-accent-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sl-board-points[b-5vgusg6e89] {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    .sl-board-points small[b-5vgusg6e89] {
        font-size: 12px;
        font-weight: 600;
        color: var(--sl-muted);
    }

.sl-board-gap[b-5vgusg6e89] {
    margin: -2px 0;
    text-align: center;
    letter-spacing: 0.3em;
    color: var(--sl-muted);
}

.sl-trivia-empty[b-5vgusg6e89] {
    margin: 0;
    padding: 28px 20px;
    border: 1px dashed color-mix(in srgb, var(--sl-text) 16%, transparent);
    border-radius: 20px;
    text-align: center;
    font-size: 15px;
    color: var(--sl-muted);
}

/* ===== Phones ===== */
@media (max-width: 600px) {
    .sl-trivia[b-5vgusg6e89] {
        gap: 18px;
        padding-top: 4px;
    }

    .sl-trivia-intro h1[b-5vgusg6e89] {
        font-size: 28px;
    }

    .sl-trivia-intro p[b-5vgusg6e89] {
        font-size: 16px;
    }

    .sl-trivia-panel[b-5vgusg6e89] {
        padding: 18px 16px;
    }

    .sl-trivia-question[b-5vgusg6e89] {
        font-size: 19px;
    }

    /* Big buttons are easier to hit with a thumb */
    .sl-trivia-btn[b-5vgusg6e89] {
        align-self: stretch;
    }

    .sl-trivia-start[b-5vgusg6e89] {
        align-items: stretch;
    }

    .sl-trivia-tabs[b-5vgusg6e89] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .sl-board-row[b-5vgusg6e89] {
        grid-template-columns: 36px 32px minmax(0, 1fr) auto;
        gap: 10px;
        padding-right: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-trivia-bar span[b-5vgusg6e89],
    .sl-trivia-option[b-5vgusg6e89],
    .sl-trivia-dot[b-5vgusg6e89],
    .sl-trivia-dot[b-5vgusg6e89]::after {
        transition: none;
    }

    .sl-trivia-option.right[b-5vgusg6e89] {
        animation: none;
    }

    .sl-trivia-option:not(:disabled):active[b-5vgusg6e89] {
        transform: none;
    }
}
/* /Components/Pages/WishList.razor.rz.scp.css */
/* STEP 14: the Wish List. One calm column, easy to read on any screen */
.sl-wish[b-l2ib89b1nb] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 0 40px;
}

.sl-wish-intro h1[b-l2ib89b1nb] {
    margin: 0 0 8px;
    font-size: 36px;
    text-wrap: balance;
}

.sl-wish-intro p[b-l2ib89b1nb] {
    margin: 0;
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.55;
    color: var(--sl-muted);
}

/* The "Make a wish" box: frosted like the cards, but it stays still (it's a form, not a card) */
.sl-wish-panel[b-l2ib89b1nb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 11%, transparent);
    border-radius: 22px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--sl-text) 8%, transparent), color-mix(in srgb, var(--sl-text) 2.5%, transparent) 40%, color-mix(in srgb, var(--sl-surface) 70%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sl-text) 9%, transparent), 0 20px 44px -26px rgba(0, 0, 0, 0.85);
}

.sl-wish-panel-head[b-l2ib89b1nb] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

    .sl-wish-panel-head label[b-l2ib89b1nb] {
        font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--sl-text);
    }

.sl-wish-count[b-l2ib89b1nb] {
    font-size: 13px;
    color: var(--sl-muted);
    font-variant-numeric: tabular-nums;
}

.sl-wish-panel input[b-l2ib89b1nb],
.sl-wish-panel textarea[b-l2ib89b1nb] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 12%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--sl-bg) 60%, transparent);
    color: var(--sl-text);
    font-size: 16px; /* 16px stops iPhones zooming in when you tap the box */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sl-wish-panel input[b-l2ib89b1nb] {
    min-height: 52px;
}

.sl-wish-panel textarea[b-l2ib89b1nb] {
    line-height: 1.5;
    resize: vertical;
}

    .sl-wish-panel input[b-l2ib89b1nb]::placeholder,
    .sl-wish-panel textarea[b-l2ib89b1nb]::placeholder {
        color: color-mix(in srgb, var(--sl-muted) 80%, transparent);
    }

    /* Typing in it: the border glows in the season colour, like the Vault search */
    .sl-wish-panel input:focus[b-l2ib89b1nb],
    .sl-wish-panel textarea:focus[b-l2ib89b1nb] {
        outline: none;
        border-color: var(--sl-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-accent) 28%, transparent);
    }

/* "Already on the list? Vote for it instead." */
.sl-wish-similar[b-l2ib89b1nb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 8%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--sl-surface) 75%, transparent);
}

.sl-wish-similar-title[b-l2ib89b1nb] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-text);
}

.sl-wish-similar-row[b-l2ib89b1nb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sl-wish-similar-text[b-l2ib89b1nb] {
    min-width: 0;
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.sl-wish-minivote[b-l2ib89b1nb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 12%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-bg) 50%, transparent);
    color: var(--sl-text);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .sl-wish-minivote.on[b-l2ib89b1nb] {
        border-color: var(--sl-accent-2);
        background: var(--sl-accent-2);
        color: var(--sl-bg);
    }

.sl-wish-why-label[b-l2ib89b1nb] {
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-text);
}

    .sl-wish-why-label span[b-l2ib89b1nb] {
        font-weight: 500;
        color: var(--sl-muted);
    }

.sl-wish-panel-foot[b-l2ib89b1nb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .sl-wish-panel-foot p[b-l2ib89b1nb] {
        flex: 1 1 240px;
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        color: var(--sl-muted);
    }

/* Gradient button. The lift, glow and press come from "sl-action" in app.css */
.sl-wish-btn[b-l2ib89b1nb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

    .sl-wish-btn:hover[b-l2ib89b1nb] {
        color: var(--sl-bg); /* links change colour on hover; this one keeps its dark text on the gradient */
    }

    .sl-wish-btn:disabled[b-l2ib89b1nb] {
        background: color-mix(in srgb, var(--sl-border) 55%, var(--sl-surface));
        color: var(--sl-muted);
        cursor: not-allowed;
    }

.sl-wish-error[b-l2ib89b1nb] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-grad-1);
}

.sl-wish-posted[b-l2ib89b1nb] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-accent-2);
}

/* Signed out: one line and a button */
.sl-wish-signin[b-l2ib89b1nb] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

    .sl-wish-signin p[b-l2ib89b1nb] {
        margin: 0;
        font-size: 16px;
    }

/* The tabs, with a little hint about the order next to them */
.sl-wish-tabs-row[b-l2ib89b1nb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
}

.sl-wish-hint[b-l2ib89b1nb] {
    margin: 0;
    font-size: 14px;
    color: var(--sl-muted);
}

/* While a tab loads, the old list fades a little. The short wait stops quick taps from flickering */
.sl-wish-list[b-l2ib89b1nb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: opacity 0.15s ease;
}

.sl-wish-results.busy .sl-wish-list[b-l2ib89b1nb] {
    opacity: 0.5;
    transition-delay: 0.2s;
}

/* One wish. The glass look and hover lift come from "sl-glass" in app.css */
.sl-wish-row[b-l2ib89b1nb] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    border-radius: 20px;
}

/* The vote button: an arrow and the count, teal once you've voted */
.sl-wish-vote[b-l2ib89b1nb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 60px;
    min-height: 66px;
    padding: 8px 0;
    border: 1px solid color-mix(in srgb, var(--sl-text) 12%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--sl-bg) 50%, transparent);
    color: var(--sl-text);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .sl-wish-vote.on[b-l2ib89b1nb] {
        border-color: var(--sl-accent-2);
        background: var(--sl-accent-2);
        color: var(--sl-bg);
    }

    /* Built wishes: just the count, no button feel */
    .sl-wish-vote:disabled[b-l2ib89b1nb] {
        background: transparent;
        color: var(--sl-muted);
        cursor: default;
    }

    /* A quick press-down when tapped (the pop after it is "sl-pop" in app.css) */
    .sl-wish-vote:not(:disabled):active[b-l2ib89b1nb],
    .sl-wish-minivote:active[b-l2ib89b1nb] {
        transform: scale(0.94);
    }

@media (hover: hover) and (pointer: fine) {
    .sl-wish-vote:not(:disabled):not(.on):hover[b-l2ib89b1nb],
    .sl-wish-minivote:not(.on):hover[b-l2ib89b1nb] {
        border-color: var(--sl-accent-2);
    }
}

.sl-wish-body[b-l2ib89b1nb] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sl-wish-title-row[b-l2ib89b1nb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.sl-wish-title[b-l2ib89b1nb] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.sl-wish-why[b-l2ib89b1nb] {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sl-muted);
    overflow-wrap: anywhere;
}

.sl-wish-meta[b-l2ib89b1nb] {
    font-size: 13px;
    color: color-mix(in srgb, var(--sl-muted) 80%, transparent);
}

/* Roadmap labels: Building = the season's main colour, Planned = its third colour, Done = teal */
.sl-wish-chip[b-l2ib89b1nb] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

    .sl-wish-chip.building[b-l2ib89b1nb] {
        background: color-mix(in srgb, var(--sl-accent) 18%, transparent);
        color: var(--sl-accent);
    }

    .sl-wish-chip.planned[b-l2ib89b1nb] {
        background: color-mix(in srgb, var(--sl-grad-3) 24%, transparent);
        color: color-mix(in srgb, var(--sl-grad-3) 62%, #FFFFFF);
    }

    .sl-wish-chip.done[b-l2ib89b1nb] {
        background: color-mix(in srgb, var(--sl-accent-2) 14%, transparent);
        color: var(--sl-accent-2);
    }

/* Your reply under a wish */
.sl-wish-reply[b-l2ib89b1nb] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 8%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--sl-surface) 75%, transparent);
}

.sl-wish-reply-logo[b-l2ib89b1nb] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background-image: linear-gradient(135deg, var(--sl-grad-1), var(--sl-grad-2) 55%, var(--sl-grad-3));
    color: var(--sl-bg);
}

.sl-wish-reply-text[b-l2ib89b1nb] {
    min-width: 0;
}

    .sl-wish-reply-text p[b-l2ib89b1nb] {
        margin: 3px 0 0;
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

.sl-wish-reply-who[b-l2ib89b1nb] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

.sl-wish-founder[b-l2ib89b1nb] {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-text) 8%, transparent);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sl-muted);
}

/* Just posted: a soft teal ring fades away, so you can spot your wish */
.sl-wish-row.fresh[b-l2ib89b1nb] {
    outline: 2px solid transparent;
    outline-offset: 3px;
    animation: sl-wish-fresh-b-l2ib89b1nb 1.8s ease-out;
}

@keyframes sl-wish-fresh-b-l2ib89b1nb {
    from {
        outline-color: var(--sl-accent-2);
    }

    to {
        outline-color: transparent;
    }
}

.sl-wish-loading[b-l2ib89b1nb] {
    margin: 0;
    color: var(--sl-muted);
}

.sl-wish-empty[b-l2ib89b1nb] {
    margin: 0;
    padding: 28px 20px;
    border: 1px dashed color-mix(in srgb, var(--sl-text) 16%, transparent);
    border-radius: 20px;
    text-align: center;
    font-size: 15px;
    color: var(--sl-muted);
}

/* "Show more wishes" under the list, the same as "Show more theories" in the Vault */
.sl-wish-more[b-l2ib89b1nb] {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.sl-wish-more-btn[b-l2ib89b1nb] {
    min-height: 48px;
    padding: 0 26px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: var(--sl-surface);
    color: var(--sl-text);
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .sl-wish-more-btn:disabled[b-l2ib89b1nb] {
        opacity: 0.6;
        cursor: wait;
    }

@media (hover: hover) and (pointer: fine) {
    .sl-wish-more-btn:not(:disabled):hover[b-l2ib89b1nb] {
        transform: translateY(-2px);
        border-color: transparent;
        background:
            linear-gradient(var(--sl-surface), var(--sl-surface)) padding-box,
            linear-gradient(90deg, var(--sl-grad-1), var(--sl-grad-2), var(--sl-grad-3)) border-box;
        box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--sl-grad-3) 80%, transparent);
    }
}

.sl-wish-more-btn:not(:disabled):active[b-l2ib89b1nb] {
    transform: scale(0.98);
}

/* Phones */
@media (max-width: 600px) {
    .sl-wish[b-l2ib89b1nb] {
        gap: 18px;
        padding-top: 4px;
    }

    .sl-wish-intro h1[b-l2ib89b1nb] {
        font-size: 28px;
    }

    .sl-wish-intro p[b-l2ib89b1nb] {
        font-size: 16px;
    }

    .sl-wish-panel[b-l2ib89b1nb] {
        padding: 16px;
    }

    /* A big, easy-to-tap button under the note */
    .sl-wish-panel-foot .sl-wish-btn[b-l2ib89b1nb] {
        flex: 1 1 100%;
    }

    /* The tabs take the full width, one quarter each */
    .sl-wish-tabs[b-l2ib89b1nb] {
        flex: 1 1 100%;
    }

        .sl-wish-tabs button[b-l2ib89b1nb] {
            padding: 0 6px;
        }

    .sl-wish-row[b-l2ib89b1nb] {
        gap: 12px;
        padding: 14px;
    }

    .sl-wish-vote[b-l2ib89b1nb] {
        width: 52px;
        min-height: 60px;
    }

    .sl-wish-title[b-l2ib89b1nb] {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-wish-panel input[b-l2ib89b1nb],
    .sl-wish-panel textarea[b-l2ib89b1nb],
    .sl-wish-minivote[b-l2ib89b1nb],
    .sl-wish-vote[b-l2ib89b1nb],
    .sl-wish-list[b-l2ib89b1nb],
    .sl-wish-more-btn[b-l2ib89b1nb] {
        transition: none;
    }

    .sl-wish-row.fresh[b-l2ib89b1nb] {
        animation: none;
    }

    .sl-wish-vote:active[b-l2ib89b1nb],
    .sl-wish-minivote:active[b-l2ib89b1nb],
    .sl-wish-more-btn:hover[b-l2ib89b1nb],
    .sl-wish-more-btn:active[b-l2ib89b1nb] {
        transform: none;
    }
}
/* /Components/Shared/Avatar.razor.rz.scp.css */
/* STEP 16 + 17: the round picture. --av is its size, set by the Size parameter */
.sl-av[b-5dgv2wkdl3] {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--av);
    height: var(--av);
    overflow: hidden;
    border-radius: 50%;
    color: var(--sl-bg);
    font-size: calc(var(--av) * 0.42);
    font-weight: 700;
    line-height: 1;
}

    /* The photo covers the letter. Any shape of photo fills the circle, cropped from the middle */
    .sl-av img[b-5dgv2wkdl3] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.sl-av-0[b-5dgv2wkdl3] {
    background: var(--sl-grad-1);
}

.sl-av-1[b-5dgv2wkdl3] {
    background: var(--sl-grad-2);
}

.sl-av-2[b-5dgv2wkdl3] {
    background: var(--sl-grad-3);
}

.sl-av-3[b-5dgv2wkdl3] {
    background: var(--sl-accent-2);
}
/* /Components/Shared/CommentItem.razor.rz.scp.css */
.sl-comment[b-ft900ch0ge] {
    display: flex;
    gap: 12px;
}

.sl-c-body[b-ft900ch0ge] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.sl-c-meta[b-ft900ch0ge] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 22px;
}

.sl-c-handle[b-ft900ch0ge] {
    font-size: 14px;
    font-weight: 600;
}

.sl-c-author[b-ft900ch0ge] {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-accent) 14%, transparent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sl-accent);
}

.sl-c-time[b-ft900ch0ge] {
    font-size: 13px;
    color: var(--sl-muted);
}

.sl-c-text[b-ft900ch0ge] {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.sl-mention[b-ft900ch0ge] {
    font-weight: 600;
    color: var(--sl-accent);
}

.sl-c-actions[b-ft900ch0ge] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-left: -12px;
}

.sl-c-votes[b-ft900ch0ge] {
    display: flex;
    align-items: center;
}

.sl-arrow[b-ft900ch0ge] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sl-muted);
}

    .sl-arrow:hover:not(:disabled)[b-ft900ch0ge] {
        color: var(--sl-text);
    }

    .sl-arrow.up.on[b-ft900ch0ge] {
        background: color-mix(in srgb, var(--sl-accent-2) 16%, transparent);
        color: var(--sl-accent-2);
    }

    .sl-arrow.down.on[b-ft900ch0ge] {
        background: color-mix(in srgb, var(--sl-grad-1) 16%, transparent);
        color: var(--sl-grad-1);
    }

    .sl-arrow:disabled[b-ft900ch0ge] {
        opacity: 0.4;
        cursor: default;
    }

.sl-c-score[b-ft900ch0ge] {
    min-width: 22px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    .sl-c-score.up[b-ft900ch0ge] {
        color: var(--sl-accent-2);
    }

    .sl-c-score.down[b-ft900ch0ge] {
        color: var(--sl-grad-1);
    }

.sl-c-reply[b-ft900ch0ge] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sl-muted);
    font-size: 14px;
    font-weight: 600;
}

    .sl-c-reply:hover[b-ft900ch0ge] {
        color: var(--sl-text);
    }
/* /Components/Shared/Countdown.razor.rz.scp.css */
/* ===== Countdown: a glass panel with three tiles ===== */
.sl-countdown[b-jk5bqt74lw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--sl-bg) 45%, transparent);
    border: 1px solid color-mix(in srgb, var(--sl-text) 14%, transparent);
    backdrop-filter: blur(12px);
}

.sl-countdown-label[b-jk5bqt74lw] {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--sl-text) 85%, transparent);
}

.sl-tiles[b-jk5bqt74lw] {
    display: flex;
    gap: 8px;
}

.sl-tile[b-jk5bqt74lw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 74px;
    padding: 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sl-bg) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--sl-text) 14%, transparent);
}

.sl-tile-num[b-jk5bqt74lw] {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sl-text);
}

.sl-tile-unit[b-jk5bqt74lw] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sl-text) 78%, transparent);
}

.sl-countdown-date[b-jk5bqt74lw] {
    font-size: 12px;
    color: color-mix(in srgb, var(--sl-text) 75%, transparent);
}

/* Phones: no outer panel, just smaller tiles sitting on the sky */
@media (max-width: 767.98px) {
    .sl-countdown[b-jk5bqt74lw] {
        padding: 0;
        background: none;
        border: 0;
        backdrop-filter: none;
    }

    .sl-tile[b-jk5bqt74lw] {
        min-width: 48px;
        padding: 8px;
        backdrop-filter: blur(10px);
    }

    .sl-tile-num[b-jk5bqt74lw] {
        font-size: 24px;
    }

    .sl-countdown-date[b-jk5bqt74lw] {
        display: none;
    }
}
/* /Components/Shared/Discussion.razor.rz.scp.css */
.sl-discussion[b-qih7r48mke] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 8px;
}

.sl-d-head[b-qih7r48mke] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sl-d-title[b-qih7r48mke] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

    .sl-d-title h2[b-qih7r48mke] {
        margin: 0;
        font-size: 22px;
    }

.sl-d-count[b-qih7r48mke],
.sl-d-hint[b-qih7r48mke] {
    font-size: 13px;
    color: var(--sl-muted);
}

.sl-d-sort[b-qih7r48mke] {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: var(--sl-surface);
}

    .sl-d-sort button[b-qih7r48mke] {
        min-height: 44px;
        padding: 0 14px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--sl-muted);
        font-size: 14px;
        font-weight: 600;
    }

        .sl-d-sort button.active[b-qih7r48mke] {
            background: var(--sl-text);
            color: var(--sl-bg);
            font-weight: 700;
        }

.sl-d-composer[b-qih7r48mke],
.sl-d-prompt[b-qih7r48mke] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 20px;
}

.sl-d-prompt[b-qih7r48mke] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
}

.sl-d-composer textarea[b-qih7r48mke],
.sl-reply-box textarea[b-qih7r48mke] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sl-border);
    border-radius: 14px;
    background: var(--sl-bg);
    color: var(--sl-text);
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
}

    .sl-d-composer textarea[b-qih7r48mke]::placeholder {
        color: color-mix(in srgb, var(--sl-muted) 75%, transparent);
    }

.sl-d-composer-foot[b-qih7r48mke] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.sl-d-composer-actions[b-qih7r48mke] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sl-d-post[b-qih7r48mke],
.sl-d-cta[b-qih7r48mke] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

    .sl-d-cta:hover[b-qih7r48mke] {
        color: var(--sl-bg);
    }

    .sl-d-post:disabled[b-qih7r48mke] {
        background: color-mix(in srgb, var(--sl-border) 55%, var(--sl-surface));
        color: var(--sl-muted);
        cursor: not-allowed;
    }

.sl-ghost[b-qih7r48mke] {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: transparent;
    color: var(--sl-text);
    font-size: 14px;
    font-weight: 600;
}

.sl-d-error[b-qih7r48mke] {
    margin: 0;
    font-size: 14px;
    color: var(--sl-grad-1);
}

.sl-d-empty[b-qih7r48mke] {
    margin: 0;
    padding: 24px;
    text-align: center;
    color: var(--sl-muted);
    border: 1px dashed var(--sl-border);
    border-radius: 20px;
}

.sl-d-list[b-qih7r48mke] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 4px 4px 0;
}

.sl-thread[b-qih7r48mke] {
    display: flex;
    flex-direction: column;
}

/* The thread line sits under the comment's avatar */
.sl-replies[b-qih7r48mke] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 17px;
    padding: 12px 0 0 29px;
    border-left: 2px solid var(--sl-border);
}

.sl-more[b-qih7r48mke] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 44px;
    margin-left: -12px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sl-accent);
    font-size: 14px;
    font-weight: 600;
}

.sl-reply-box[b-qih7r48mke] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sl-reply-label[b-qih7r48mke] {
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-muted);
}

.sl-reply-box textarea[b-qih7r48mke] {
    padding: 10px 12px;
    background: var(--sl-surface);
}

.sl-reply-actions[b-qih7r48mke] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* /Components/Shared/InfoPage.razor.rz.scp.css */
/* STEP 20: one easy-to-read column. Each section is its own card, so the page is quick to scan */
.sl-info[b-ztwr68jhl0] {
    max-width: 720px;
    margin: 0 auto;
    padding: 12px 0 40px;
}

.sl-info-head h1[b-ztwr68jhl0] {
    margin: 0 0 8px;
    font-size: 36px;
}

.sl-info-intro[b-ztwr68jhl0] {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--sl-muted);
}

.sl-info[b-ztwr68jhl0]  section {
    margin-bottom: 14px;
    padding: 20px 22px;
    border: 1px solid var(--sl-border);
    border-radius: 20px;
    background: var(--sl-surface);
}

.sl-info[b-ztwr68jhl0]  section h2 {
    margin: 0 0 8px;
    font-size: 19px;
}

/* Only inside the sections, so the intro and "Last updated" keep their own look */
.sl-info[b-ztwr68jhl0]  section p,
.sl-info[b-ztwr68jhl0]  section li {
    font-size: 15.5px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--sl-text) 88%, transparent);
}

.sl-info[b-ztwr68jhl0]  section p {
    margin: 0 0 8px;
}

    .sl-info[b-ztwr68jhl0]  section p:last-child {
        margin-bottom: 0;
    }

.sl-info[b-ztwr68jhl0]  section ul {
    margin: 0;
    padding-left: 20px;
}

    .sl-info[b-ztwr68jhl0]  section li + li {
        margin-top: 6px;
    }

.sl-info[b-ztwr68jhl0]  section a {
    font-weight: 600;
}

.sl-info-updated[b-ztwr68jhl0] {
    margin: 20px 0 0;
    font-size: 13px;
    color: var(--sl-muted);
}

@media (max-width: 600px) {
    .sl-info[b-ztwr68jhl0] {
        padding-top: 4px;
    }

    .sl-info-head h1[b-ztwr68jhl0] {
        font-size: 28px;
    }

    .sl-info-intro[b-ztwr68jhl0] {
        font-size: 16px;
    }

    .sl-info[b-ztwr68jhl0]  section {
        padding: 18px;
    }
}
/* /Components/Shared/MessageCard.razor.rz.scp.css */
/* STEP 21: one calm card in the middle of the page */
.sl-message[b-49p5lfgxae] {
    max-width: 480px;
    margin: 64px auto;
    padding: 40px 24px;
    text-align: center;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 24px;
}

    .sl-message h1[b-49p5lfgxae] {
        font-size: 30px;
        text-wrap: balance;
    }

    .sl-message p[b-49p5lfgxae] {
        margin-bottom: 24px;
        color: var(--sl-muted);
    }

.sl-message-icon[b-49p5lfgxae] {
    margin-bottom: 8px;
    font-size: 48px;
}

@media (max-width: 600px) {
    .sl-message[b-49p5lfgxae] {
        margin: 24px auto;
        padding: 32px 20px;
    }

        .sl-message h1[b-49p5lfgxae] {
            font-size: 26px;
        }
}
/* /Components/Shared/PollBlock.razor.rz.scp.css */
.sl-poll[b-j899o7b0yw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sl-poll-options[b-j899o7b0yw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.sl-poll-option[b-j899o7b0yw] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--sl-border);
    border-radius: 14px;
    background: var(--sl-bg);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}

    /* STEP 13 polish: a light press-down when you tap an answer */
    .sl-poll-option:active[b-j899o7b0yw] {
        transform: scale(0.985);
    }

    .sl-poll-option.selected[b-j899o7b0yw] {
        border-color: var(--sl-accent-2);
        background: color-mix(in srgb, var(--sl-accent-2) 12%, transparent);
    }

    .sl-poll-option:has(.sl-poll-radio:focus-visible)[b-j899o7b0yw] {
        outline: 2px solid var(--sl-accent-2);
        outline-offset: 2px;
    }

.sl-poll-radio[b-j899o7b0yw] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.sl-poll-dot[b-j899o7b0yw] {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, var(--sl-muted) 60%, transparent);
    border-radius: 50%;
}

.sl-poll-option.selected .sl-poll-dot[b-j899o7b0yw] {
    border: 6px solid var(--sl-accent-2);
    background: var(--sl-bg);
    animation: sl-dot-pop-b-j899o7b0yw 0.3s ease-out; /* STEP 13 polish: the dot pops in when you pick an answer */
}

@keyframes sl-dot-pop-b-j899o7b0yw {
    0% {
        transform: scale(0.6);
    }

    60% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1);
    }
}

.sl-poll-lock[b-j899o7b0yw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
    font-size: 15px;
    font-weight: 700;
}

    .sl-poll-lock:disabled[b-j899o7b0yw] {
        background: color-mix(in srgb, var(--sl-border) 55%, var(--sl-surface));
        color: var(--sl-muted);
        cursor: not-allowed;
    }

.sl-poll-hint[b-j899o7b0yw],
.sl-poll-total[b-j899o7b0yw] {
    margin: 0;
    font-size: 13px;
    color: var(--sl-muted);
}

.sl-poll-results[b-j899o7b0yw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sl-poll-result[b-j899o7b0yw] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--sl-border);
    border-radius: 14px;
    font-size: 16px;
}

/* The bars grow in when results appear */
@keyframes sl-grow-b-j899o7b0yw {
    from {
        transform: scaleX(0);
    }
}

.sl-poll-bar[b-j899o7b0yw] {
    position: absolute;
    inset: 0 auto 0 0;
    background: color-mix(in srgb, var(--sl-text) 7%, transparent);
    transform-origin: left center;
    animation: sl-grow-b-j899o7b0yw 0.7s ease-out;
}

.sl-poll-result.leading .sl-poll-bar[b-j899o7b0yw] {
    background: color-mix(in srgb, var(--sl-text) 12%, transparent);
}

.sl-poll-result.mine[b-j899o7b0yw] {
    border-color: var(--sl-accent-2);
}

    .sl-poll-result.mine .sl-poll-bar[b-j899o7b0yw] {
        background: color-mix(in srgb, var(--sl-accent-2) 22%, transparent);
    }

.sl-poll-label[b-j899o7b0yw] {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 500;
}

.sl-poll-pct[b-j899o7b0yw] {
    position: relative;
    flex-shrink: 0;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Like X: the answer that's winning is bold */
.sl-poll-result.leading .sl-poll-label[b-j899o7b0yw],
.sl-poll-result.leading .sl-poll-pct[b-j899o7b0yw] {
    font-weight: 700;
}

.sl-poll-result.mine .sl-poll-label svg[b-j899o7b0yw],
.sl-poll-result.mine .sl-poll-pct[b-j899o7b0yw],
.sl-poll-yours[b-j899o7b0yw] {
    color: var(--sl-accent-2);
}

.sl-poll-yours[b-j899o7b0yw] {
    font-size: 12px;
    font-weight: 700;
}

.sl-poll-locked[b-j899o7b0yw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-accent-2);
}

.sl-poll-error[b-j899o7b0yw] {
    margin: 0;
    font-size: 14px;
    color: var(--sl-grad-1);
}

.sl-poll-foot[b-j899o7b0yw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    /* STEP 13: "Lock my pick" fills the row, next to the comments button */
    .sl-poll-foot .sl-poll-lock[b-j899o7b0yw] {
        flex: 1;
    }

.sl-poll-comments[b-j899o7b0yw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    color: var(--sl-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

    .sl-poll-comments:hover[b-j899o7b0yw] {
        color: var(--sl-text);
    }

@media (prefers-reduced-motion: reduce) {
    .sl-poll-bar[b-j899o7b0yw],
    .sl-poll-option.selected .sl-poll-dot[b-j899o7b0yw] {
        animation: none;
    }

    .sl-poll-option[b-j899o7b0yw] {
        transition: none;
    }

        .sl-poll-option:active[b-j899o7b0yw] {
            transform: none;
        }
}
/* /Components/Shared/PollCard.razor.rz.scp.css */
/* STEP 13: the glass look (background, border, hover lift) lives in app.css as .sl-glass, shared with theory cards */
.sl-pc[b-wfjnpu22i0] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: 22px;
}

.sl-pc-top[b-wfjnpu22i0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sl-pc-author[b-wfjnpu22i0] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sl-pc-who[b-wfjnpu22i0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sl-pc-handle[b-wfjnpu22i0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
}

.sl-pc-stamp[b-wfjnpu22i0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sl-muted);
}

.sl-pc-question[b-wfjnpu22i0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* STEP 24: the label with its Pre-launch stamp */
.sl-pc-eyebrow-row[b-wfjnpu22i0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

/* STEP 13: "POLL" label in calm grey, the same as "THEORY" on theory cards */
.sl-pc-eyebrow[b-wfjnpu22i0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-muted);
}

/* Long questions stop after 3 lines here (the full question is on the poll page) */
.sl-pc-question h3[b-wfjnpu22i0] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.sl-pc-question a[b-wfjnpu22i0] {
    color: inherit;
    text-decoration: none;
}

    .sl-pc-question a:hover[b-wfjnpu22i0] {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
        text-underline-offset: 4px;
    }

/* STEP 13: inside the Vault the poll is a little more compact, so poll cards sit closer to theory cards in height.
   ::deep reaches into the PollBlock component; the poll page keeps its roomier look */
.sl-pc[b-wfjnpu22i0]  .sl-poll-options,
.sl-pc[b-wfjnpu22i0]  .sl-poll-results {
    gap: 6px;
}

.sl-pc[b-wfjnpu22i0]  .sl-poll-option,
.sl-pc[b-wfjnpu22i0]  .sl-poll-result {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 15px;
}

.sl-pc[b-wfjnpu22i0]  .sl-poll-option:not(.selected) {
    border-color: color-mix(in srgb, var(--sl-text) 12%, transparent);
    background: color-mix(in srgb, var(--sl-bg) 55%, transparent);
}

.sl-pc[b-wfjnpu22i0]  .sl-poll-result:not(.mine) {
    border-color: color-mix(in srgb, var(--sl-text) 12%, transparent);
}

.sl-pc[b-wfjnpu22i0]  .sl-poll-dot {
    width: 18px;
    height: 18px;
}

.sl-pc[b-wfjnpu22i0]  .sl-poll-option.selected .sl-poll-dot {
    border-width: 5px;
}

.sl-pc[b-wfjnpu22i0]  .sl-poll-comments {
    border-color: color-mix(in srgb, var(--sl-text) 12%, transparent);
    background: color-mix(in srgb, var(--sl-bg) 45%, transparent);
}

.sl-pc[b-wfjnpu22i0]  .sl-poll-lock:disabled {
    background: color-mix(in srgb, var(--sl-surface) 85%, transparent);
}

/* Poll answers sit at the top, the Lock button and comments at the bottom, so it lines up with theory cards */
.sl-pc[b-wfjnpu22i0]  .sl-poll {
    flex: 1;
}

.sl-pc[b-wfjnpu22i0]  .sl-poll-foot {
    margin-top: auto;
}

/* Small phones: the same slimmer padding as theory cards */
@media (max-width: 400px) {
    .sl-pc[b-wfjnpu22i0] {
        padding: 18px;
    }
}
/* /Components/Shared/ReportButton.razor.rz.scp.css */
/* STEP 18: the Report button stays quiet (it's not something people should tap often), and its panel is calm */
.sl-report-btn[b-awdlfk6lf4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sl-muted);
    font-size: 14px;
    font-weight: 600;
}

    .sl-report-btn:hover[b-awdlfk6lf4] {
        color: var(--sl-text);
    }

    .sl-report-btn[aria-expanded="true"][b-awdlfk6lf4] {
        color: var(--sl-grad-1);
    }

    /* On comments: just the flag, in a round 44px tap area */
    .sl-report-btn.compact[b-awdlfk6lf4] {
        justify-content: center;
        width: 44px;
        padding: 0;
    }

/* Opens underneath, across the full width. The rows it sits in are pulled 12px left
   (so the first button lines up with the text), so the panel steps 12px back in.
   order: 1 keeps it after every button in the row, so staff's Remove stays up with the others */
.sl-report-panel[b-awdlfk6lf4] {
    order: 1;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 6px 0 4px 12px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 12%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--sl-surface) 85%, transparent);
}

.sl-report-title[b-awdlfk6lf4] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.sl-report-reasons[b-awdlfk6lf4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The reasons are choices, so they look like the calm filter chips, not like buttons that do something */
.sl-report-reason[b-awdlfk6lf4] {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 14%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--sl-text);
    font-size: 14px;
}

    .sl-report-reason.on[b-awdlfk6lf4] {
        border-color: var(--sl-grad-1);
        background: color-mix(in srgb, var(--sl-grad-1) 16%, transparent);
        font-weight: 600;
    }

.sl-report-note[b-awdlfk6lf4] {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 12%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--sl-bg) 60%, transparent);
    color: var(--sl-text);
    font-size: 16px; /* 16px stops iPhones zooming in */
}

    .sl-report-note:focus[b-awdlfk6lf4] {
        outline: none;
        border-color: var(--sl-accent);
    }

.sl-report-actions[b-awdlfk6lf4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sl-report-send[b-awdlfk6lf4],
.sl-report-cancel[b-awdlfk6lf4] {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

.sl-report-send[b-awdlfk6lf4] {
    border: 0;
    background: var(--sl-grad-1);
    color: var(--sl-bg);
}

    .sl-report-send:disabled[b-awdlfk6lf4] {
        background: color-mix(in srgb, var(--sl-border) 55%, var(--sl-surface));
        color: var(--sl-muted);
        cursor: not-allowed;
    }

.sl-report-cancel[b-awdlfk6lf4] {
    border: 1px solid var(--sl-border);
    background: transparent;
    color: var(--sl-text);
}

.sl-report-done[b-awdlfk6lf4] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--sl-accent-2);
    font-weight: 600;
}

.sl-report-error[b-awdlfk6lf4] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-grad-1);
}
/* /Components/Shared/SeasonHero.razor.rz.scp.css */
/* ===== The season hero: sky, sun, art and the big headline ===== */
.sl-hero[b-f2ad2taqyp] {
    position: relative;
    overflow: hidden;
    min-height: 460px;
    margin-bottom: 32px;
    border-radius: 28px;
    /* The sky: night at the top, the season gradient at the horizon */
    background: linear-gradient(180deg, color-mix(in srgb, var(--sl-bg) 92%, var(--sl-grad-3)) 0%, color-mix(in srgb, var(--sl-bg) 70%, var(--sl-grad-3)) 38%, var(--sl-grad-3) 63%, var(--sl-grad-2) 81%, var(--sl-grad-1) 100%);
}

/* Soft glow behind the sun */
.sl-hero-glow[b-f2ad2taqyp] {
    position: absolute;
    right: 76px;
    bottom: -45px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--sl-grad-1) 50%, transparent) 0%, transparent 65%);
}

/* The retro sun: a circle with stripes cut out of the bottom half */
.sl-hero-sun[b-f2ad2taqyp] {
    position: absolute;
    right: 182px;
    bottom: 60px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sl-grad-1) 40%, white) 0%, var(--sl-grad-1) 42%, var(--sl-grad-2) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 56%, transparent 61%, #000 61%, #000 69%, transparent 69%, transparent 75%, #000 75%, #000 82%, transparent 82%, transparent 89%, #000 89%);
    mask-image: linear-gradient(180deg, #000 56%, transparent 56%, transparent 61%, #000 61%, #000 69%, transparent 69%, transparent 75%, #000 75%, #000 82%, transparent 82%, transparent 89%, #000 89%);
}

/* The season's art (stars, skyline, palms), pinned to the bottom-right corner */
.sl-hero-art[b-f2ad2taqyp] {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 460px;
    width: auto;
    max-width: none;
}

/* Darkens the left side a little so the headline is easy to read */
.sl-hero-scrim[b-f2ad2taqyp] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--sl-bg) 55%, transparent) 0%, transparent 55%);
}

.sl-hero-content[b-f2ad2taqyp] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(20px, 4vw, 48px);
}

.sl-hero-text[b-f2ad2taqyp] {
    flex: 1 1 420px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.sl-hero-label[b-f2ad2taqyp] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sl-text) 82%, transparent);
}

.sl-hero-title[b-f2ad2taqyp] {
    margin: 0;
    font-size: clamp(27px, 4.6vw, 54px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--sl-text);
}

.sl-hero-sub[b-f2ad2taqyp] {
    margin: 0;
    max-width: 480px;
    font-size: 17px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--sl-text) 88%, transparent);
}

.sl-hero-cta[b-f2ad2taqyp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* Phones: a shorter hero with the narrow art. The bottom Lock button does the big button's job */
@media (max-width: 767.98px) {
    .sl-hero[b-f2ad2taqyp] {
        min-height: 360px;
        border-radius: 24px;
    }

    .sl-hero-text[b-f2ad2taqyp] {
        flex-basis: 100%;
        gap: 12px;
    }

    .sl-hero-sub[b-f2ad2taqyp],
    .sl-hero-cta[b-f2ad2taqyp],
    .sl-hero-scrim[b-f2ad2taqyp] {
        display: none;
    }

    .sl-hero-art[b-f2ad2taqyp] {
        height: 340px;
    }

    .sl-hero-sun[b-f2ad2taqyp] {
        right: 8px;
        bottom: 66px;
        width: 120px;
        height: 120px;
    }

    .sl-hero-glow[b-f2ad2taqyp] {
        right: -52px;
        bottom: 6px;
        width: 240px;
        height: 240px;
    }
}
/* /Components/Shared/SeerTitle.razor.rz.scp.css */
/* STEP 19: a seer's title, a small pill after their name */
.sl-title[b-lr95ksr78f] {
    display: inline-flex;
    align-items: center;
    flex: 0 1000 auto; /* short on room (like on a phone)? The title gives way long before the name does */
    min-width: 44px;   /* ...but its emoji always stays */
    overflow: hidden;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-accent) 12%, transparent);
    color: color-mix(in srgb, var(--sl-accent) 75%, var(--sl-text));
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

    .sl-title > span:first-child[b-lr95ksr78f] {
        flex-shrink: 0;
    }

    .sl-title > span:last-child[b-lr95ksr78f] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The hard badges' titles shine gold */
    .sl-title.rare[b-lr95ksr78f] {
        background: color-mix(in srgb, var(--sl-grad-1) 14%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sl-grad-1) 45%, transparent);
        color: var(--sl-grad-1);
    }

    .sl-title.large[b-lr95ksr78f] {
        gap: 6px;
        padding: 4px 12px;
        font-size: 14px;
        line-height: 20px;
    }
/* /Components/Shared/SpotlightCard.razor.rz.scp.css */
/* STEP 16: the spotlight. A warm beam of light in the corner and a gradient edge, so it reads as "the big one" without shouting */
.sl-spot[b-30cuggngb7] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 4px 0 30px;
    padding: 22px 24px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 22px;
    background:
        radial-gradient(70% 140% at 0% 0%, color-mix(in srgb, var(--sl-grad-1) 20%, transparent), transparent 62%) padding-box,
        linear-gradient(color-mix(in srgb, var(--sl-surface) 92%, transparent), color-mix(in srgb, var(--sl-surface) 92%, transparent)) padding-box,
        linear-gradient(120deg, var(--sl-grad-1), var(--sl-grad-2), var(--sl-grad-3)) border-box;
    box-shadow: 0 26px 60px -34px color-mix(in srgb, var(--sl-grad-2) 80%, transparent);
}

.sl-spot-head[b-30cuggngb7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.sl-spot-chip[b-30cuggngb7] {
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-grad-1) 18%, transparent);
    color: var(--sl-grad-1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sl-spot-when[b-30cuggngb7] {
    font-size: 14px;
    color: var(--sl-muted);
}

.sl-spot-cat[b-30cuggngb7] {
    margin-left: auto;
}

/* The theory itself: big enough to read from across the room, cut at 3 lines */
.sl-spot-text[b-30cuggngb7] {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--sl-text);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
    text-wrap: pretty;
}

    .sl-spot-text:hover[b-30cuggngb7] {
        color: var(--sl-text);
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
        text-underline-offset: 4px;
    }

.sl-spot-foot[b-30cuggngb7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
}

.sl-spot-who[b-30cuggngb7] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sl-spot-who-text[b-30cuggngb7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sl-spot-handle[b-30cuggngb7] {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-spot-meta[b-30cuggngb7] {
    font-size: 13px;
    color: var(--sl-accent-2);
    font-weight: 600;
}

.sl-spot-actions[b-30cuggngb7] {
    display: flex;
    gap: 10px;
}

/* Share: a calm outline button. Read it: the gradient one that lifts (sl-action in app.css) */
.sl-spot-share[b-30cuggngb7],
.sl-spot-read[b-30cuggngb7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.sl-spot-share[b-30cuggngb7] {
    border: 1px solid color-mix(in srgb, var(--sl-text) 18%, transparent);
    background: transparent;
    color: var(--sl-text);
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

    .sl-spot-share.copied[b-30cuggngb7] {
        border-color: var(--sl-accent-2);
        color: var(--sl-accent-2);
    }

    .sl-spot-share:active[b-30cuggngb7] {
        transform: scale(0.97);
    }

@media (hover: hover) and (pointer: fine) {
    .sl-spot-share:hover[b-30cuggngb7] {
        border-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
        background-color: color-mix(in srgb, var(--sl-text) 6%, transparent);
    }
}

.sl-spot-read[b-30cuggngb7] {
    border: 0;
    background-image: var(--sl-gradient);
    color: var(--sl-bg);
}

    .sl-spot-read:hover[b-30cuggngb7] {
        color: var(--sl-bg);
    }

@media (max-width: 600px) {
    .sl-spot[b-30cuggngb7] {
        margin-bottom: 22px;
        padding: 18px 16px;
    }

    .sl-spot-text[b-30cuggngb7] {
        font-size: 18px;
    }

    /* The category would sit alone on its own line here; the theory page still shows it */
    .sl-spot-cat[b-30cuggngb7] {
        display: none;
    }

    .sl-spot-actions[b-30cuggngb7] {
        flex: 1 1 100%;
    }

        .sl-spot-share[b-30cuggngb7],
        .sl-spot-read[b-30cuggngb7] {
            flex: 1;
        }
}

@media (prefers-reduced-motion: reduce) {
    .sl-spot-share[b-30cuggngb7] {
        transition: none;
    }

        .sl-spot-share:active[b-30cuggngb7] {
            transform: none;
        }
}
/* /Components/Shared/StaffRemoveButton.razor.rz.scp.css */
/* STEP 18: the staff-only Remove button, in the warning orange */
.sl-remove-btn[b-jyxopgio30] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sl-grad-1);
    font-size: 14px;
    font-weight: 600;
}

    .sl-remove-btn:hover[b-jyxopgio30] {
        background: color-mix(in srgb, var(--sl-grad-1) 12%, transparent);
    }

.sl-remove-confirm[b-jyxopgio30] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.sl-remove-yes[b-jyxopgio30],
.sl-remove-no[b-jyxopgio30] {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

.sl-remove-yes[b-jyxopgio30] {
    border: 0;
    background: var(--sl-grad-1);
    color: var(--sl-bg);
}

.sl-remove-no[b-jyxopgio30] {
    border: 1px solid var(--sl-border);
    background: transparent;
    color: var(--sl-text);
}

.sl-remove-error[b-jyxopgio30] {
    font-size: 14px;
    color: var(--sl-grad-1);
}
/* /Components/Shared/VaultCard.razor.rz.scp.css */
/* STEP 13: the glass look itself (background, border, hover lift) lives in app.css as .sl-glass, so every card shares it */
.sl-card[b-dqf2zb2d7f] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: 22px;
}

.sl-card-top[b-dqf2zb2d7f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sl-card-stamp[b-dqf2zb2d7f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sl-muted);
}

.sl-card-author[b-dqf2zb2d7f] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sl-card-who[b-dqf2zb2d7f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sl-card-handle[b-dqf2zb2d7f] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: var(--sl-text);
}

/* STEP 13: "THEORY" label above the text, in calm grey so the category colour stays the star */
.sl-card-body[b-dqf2zb2d7f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sl-card-kind[b-dqf2zb2d7f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-muted);
}

/* STEP 24: the label with its Pre-launch or Called it stamp */
.sl-card-kind-row[b-dqf2zb2d7f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

/* The theory text. Long ones stop after 4 lines here (the full text is on the theory page), so one long theory can't stretch a whole row */
.sl-card-text[b-dqf2zb2d7f] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--sl-text);
    overflow-wrap: anywhere;
}

.sl-card-text-link[b-dqf2zb2d7f] {
    color: inherit;
    text-decoration: none;
}

    .sl-card-text-link:hover[b-dqf2zb2d7f] {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
        text-underline-offset: 4px;
    }

/* Belief meter + buttons sit together at the bottom, so every card in a row lines up */
.sl-card-bottom[b-dqf2zb2d7f] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: auto;
}

/* STEP 13: the belief meter */
.sl-meter[b-dqf2zb2d7f] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sl-meter-text[b-dqf2zb2d7f] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--sl-muted);
}

    .sl-meter-text strong[b-dqf2zb2d7f] {
        color: var(--sl-accent-2);
    }

.sl-meter-count[b-dqf2zb2d7f] {
    font-variant-numeric: tabular-nums;
}

/* Teal = believe, the warm part = cap (the same colours as the Believe and Cap buttons) */
.sl-meter-track[b-dqf2zb2d7f] {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-grad-1) 55%, var(--sl-surface));
}

    .sl-meter-track.empty[b-dqf2zb2d7f] {
        background: color-mix(in srgb, var(--sl-text) 10%, transparent);
    }

.sl-meter-fill[b-dqf2zb2d7f] {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--sl-accent-2);
    transition: width 0.4s ease;
}

/* Believe / Cap buttons */
.sl-card-votes[b-dqf2zb2d7f] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sl-vote[b-dqf2zb2d7f] {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* STEP 13 polish: the emoji is its own piece now, so 6px keeps the button the same width as before */
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 12%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-bg) 55%, transparent);
    color: var(--sl-text);
    font-weight: 600;
    transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .sl-vote span[b-dqf2zb2d7f] {
        font-weight: 700;
    }

    /* STEP 13 polish: a quick press-down when tapped (the pop after it lives in app.css) */
    .sl-vote:not(:disabled):active[b-dqf2zb2d7f] {
        transform: scale(0.95);
    }

    .sl-vote:hover:not(:disabled)[b-dqf2zb2d7f] {
        border-color: var(--sl-accent-2);
    }

    /* Believe glows teal, Cap glows orange (both come from the season colours) */
    .sl-vote.on[b-dqf2zb2d7f] {
        background: var(--sl-accent-2);
        border-color: var(--sl-accent-2);
        color: var(--sl-bg);
    }

.sl-cap:hover:not(:disabled)[b-dqf2zb2d7f] {
    border-color: var(--sl-grad-1);
}

.sl-cap.on[b-dqf2zb2d7f] {
    background: var(--sl-grad-1);
    border-color: var(--sl-grad-1);
    color: var(--sl-bg);
}

.sl-vote:disabled[b-dqf2zb2d7f] {
    opacity: 0.55;
    cursor: not-allowed;
}

.sl-card-comments[b-dqf2zb2d7f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 12%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-bg) 45%, transparent);
    color: var(--sl-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

    .sl-card-comments:hover[b-dqf2zb2d7f] {
        color: var(--sl-text);
        border-color: color-mix(in srgb, var(--sl-text) 30%, transparent);
    }

/* Small phones: slightly slimmer buttons, so Believe, Cap and comments fit on one line */
@media (max-width: 400px) {
    .sl-card[b-dqf2zb2d7f] {
        padding: 18px;
    }

    .sl-card-votes[b-dqf2zb2d7f] {
        gap: 6px;
    }

    .sl-vote[b-dqf2zb2d7f] {
        gap: 5px;
        padding: 0 13px;
    }

    .sl-card-comments[b-dqf2zb2d7f] {
        padding: 0 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-meter-fill[b-dqf2zb2d7f] {
        transition: none;
    }
}
/* /Components/Shared/VerdictBox.razor.rz.scp.css */
/* STEP 24: "Did it happen?" A calm box under the Believe and Cap buttons, once the game is out */
.sl-did[b-woikqtvvxz] {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--sl-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--sl-bg) 55%, transparent);
}

    .sl-did h2[b-woikqtvvxz] {
        margin: 0 0 12px;
        font-size: 17px;
    }

.sl-did-buttons[b-woikqtvvxz] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sl-did-btn[b-woikqtvvxz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    background: transparent;
    color: var(--sl-text);
    font-weight: 600;
}

    .sl-did-btn.yes.on[b-woikqtvvxz] {
        border-color: var(--sl-accent-2);
        background: color-mix(in srgb, var(--sl-accent-2) 14%, transparent);
    }

    .sl-did-btn.no.on[b-woikqtvvxz] {
        border-color: var(--sl-grad-1);
        background: color-mix(in srgb, var(--sl-grad-1) 14%, transparent);
    }

    .sl-did-btn:disabled[b-woikqtvvxz] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.sl-did-count[b-woikqtvvxz] {
    color: var(--sl-muted);
    font-variant-numeric: tabular-nums;
}

.sl-did-hint[b-woikqtvvxz] {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--sl-muted);
}

    .sl-did-hint.error[b-woikqtvvxz] {
        color: var(--sl-grad-1);
    }

/* On phones the two answers stack, full width, with the count on the right like poll options */
@media (max-width: 480px) {
    .sl-did-buttons[b-woikqtvvxz] {
        flex-direction: column;
    }

    .sl-did-count[b-woikqtvvxz] {
        margin-left: auto;
    }
}

@media (hover: hover) and (pointer: fine) {
    .sl-did-btn:not(:disabled):not(.on):hover[b-woikqtvvxz] {
        border-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
    }
}
/* /Components/Shared/WelcomeCard.razor.rz.scp.css */
/* STEP 21: the first-visit hello. The card rises in, the sun comes up and the lock clicks shut */
.sl-welcome-backdrop[b-ao35ljn5fg] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(8, 6, 16, 0.72);
    backdrop-filter: blur(4px);
    animation: sl-welcome-fade-b-ao35ljn5fg 0.3s ease both;
}

.sl-welcome[b-ao35ljn5fg] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1001;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px 24px 18px;
    border: 1px solid var(--sl-border);
    border-radius: 26px;
    background: var(--sl-surface);
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.7);
    text-align: center;
    transform: translate(-50%, -50%);
    animation: sl-welcome-rise-b-ao35ljn5fg 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

    .sl-welcome:focus[b-ao35ljn5fg] {
        outline: none;
    }

.sl-welcome-close[b-ao35ljn5fg] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sl-muted);
}

/* The little scene: a sunset on the horizon, with the lock in front */
.sl-welcome-scene[b-ao35ljn5fg] {
    position: relative;
    width: 220px;
    height: 118px;
    margin: 4px auto 14px;
    clip-path: inset(-60px -80px 0 -80px); /* hides the sun below the horizon, but never cuts its glow */
}

    .sl-welcome-scene[b-ao35ljn5fg]::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--sl-grad-2), transparent);
    }

.sl-welcome-sun[b-ao35ljn5fg] {
    position: absolute;
    bottom: -64px;
    left: 50%;
    width: 160px;
    height: 160px;
    margin-left: -80px;
    border-radius: 50%;
    background: linear-gradient(var(--sl-grad-1), var(--sl-grad-2) 55%, var(--sl-grad-3));
    box-shadow: 0 0 60px -6px var(--sl-grad-2);
    animation: sl-welcome-sunrise-b-ao35ljn5fg 1.1s ease-out 0.1s both;
}

.sl-welcome-lock[b-ao35ljn5fg] {
    position: absolute;
    bottom: 6px;
    left: 50%;
    margin-left: -32px;
    color: #fff;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
    animation: sl-welcome-pop-b-ao35ljn5fg 0.45s ease 0.55s both;
}

.sl-welcome-shackle[b-ao35ljn5fg] {
    animation: sl-welcome-click-b-ao35ljn5fg 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) 1s both;
}

.sl-welcome-season[b-ao35ljn5fg] {
    margin: 0 0 6px;
    background: var(--sl-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sl-welcome h2[b-ao35ljn5fg] {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.2;
    text-wrap: balance;
}

.sl-welcome-intro[b-ao35ljn5fg] {
    margin: 0 0 16px;
    color: var(--sl-muted);
    font-size: 15px;
    line-height: 1.5;
}

/* 1, 2, 3: what you do here */
.sl-welcome-steps[b-ao35ljn5fg] {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    text-align: left;
}

    .sl-welcome-steps li[b-ao35ljn5fg] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 14px;
        background: color-mix(in srgb, var(--sl-bg) 55%, transparent);
        font-size: 15px;
        line-height: 1.35;
        animation: sl-welcome-step-b-ao35ljn5fg 0.4s ease both;
    }

        .sl-welcome-steps li:nth-child(1)[b-ao35ljn5fg] {
            animation-delay: 0.45s;
        }

        .sl-welcome-steps li:nth-child(2)[b-ao35ljn5fg] {
            animation-delay: 0.55s;
        }

        .sl-welcome-steps li:nth-child(3)[b-ao35ljn5fg] {
            animation-delay: 0.65s;
        }

        .sl-welcome-steps li span[b-ao35ljn5fg] {
            display: grid;
            flex-shrink: 0;
            place-items: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--sl-accent) 18%, transparent);
            color: var(--sl-accent);
            font-size: 13px;
            font-weight: 700;
        }

.sl-welcome-go[b-ao35ljn5fg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 999px;
    background: var(--sl-gradient);
    color: #14101f;
    font-weight: 700;
    text-decoration: none;
}

    .sl-welcome-go:hover[b-ao35ljn5fg] {
        color: #14101f;
    }

.sl-welcome-later[b-ao35ljn5fg] {
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    border: 0;
    background: transparent;
    color: var(--sl-muted);
    font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
    .sl-welcome-close:hover[b-ao35ljn5fg],
    .sl-welcome-later:hover[b-ao35ljn5fg] {
        color: var(--sl-text);
    }
}

@keyframes sl-welcome-fade-b-ao35ljn5fg {
    from {
        opacity: 0;
    }
}

@keyframes sl-welcome-rise-b-ao35ljn5fg {
    from {
        opacity: 0;
        transform: translate(-50%, -44%) scale(0.97);
    }
}

@keyframes sl-welcome-sunrise-b-ao35ljn5fg {
    from {
        opacity: 0;
        transform: translateY(46px);
    }
}

@keyframes sl-welcome-pop-b-ao35ljn5fg {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.85);
    }
}

@keyframes sl-welcome-click-b-ao35ljn5fg {
    from {
        transform: translateY(-9px);
    }
}

@keyframes sl-welcome-step-b-ao35ljn5fg {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-welcome[b-ao35ljn5fg],
    .sl-welcome-backdrop[b-ao35ljn5fg],
    .sl-welcome-sun[b-ao35ljn5fg],
    .sl-welcome-lock[b-ao35ljn5fg],
    .sl-welcome-shackle[b-ao35ljn5fg],
    .sl-welcome-steps li[b-ao35ljn5fg] {
        animation: none;
    }
}
/* /Components/Staff/QuizEditor.razor.rz.scp.css */
/* STEP 25: the quiz form. One card per question, with its answers in a short list */
.sl-quiz-editor[b-68bocv1sbl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sl-questions[b-68bocv1sbl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.sl-question[b-68bocv1sbl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 9%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--sl-surface) 75%, transparent);
}

.sl-question-top[b-68bocv1sbl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sl-question-number[b-68bocv1sbl] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sl-muted);
}

.sl-question-tools[b-68bocv1sbl] {
    display: flex;
    gap: 6px;
}

.sl-icon-btn[b-68bocv1sbl] {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--sl-border);
    border-radius: 50%;
    background: transparent;
    color: var(--sl-muted);
    font-size: 15px;
    line-height: 1;
}

    .sl-icon-btn:disabled[b-68bocv1sbl] {
        opacity: 0.35;
        cursor: not-allowed;
    }

.sl-answers[b-68bocv1sbl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

    .sl-answers legend[b-68bocv1sbl] {
        margin-bottom: 2px;
        font-size: 14px;
        font-weight: 600;
    }

        .sl-answers legend span[b-68bocv1sbl] {
            font-weight: 400;
            color: var(--sl-muted);
        }

.sl-answer[b-68bocv1sbl] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .sl-answer input[type="radio"][b-68bocv1sbl] {
        flex: none;
        width: 22px;
        height: 22px;
        margin: 0;
        accent-color: var(--sl-accent-2);
    }

    /* The right answer gets a teal edge, so it's easy to check before saving */
    .sl-answer.right .sl-staff-input[b-68bocv1sbl] {
        border-color: color-mix(in srgb, var(--sl-accent-2) 70%, transparent);
    }

.sl-add-answer[b-68bocv1sbl] {
    align-self: flex-start;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--sl-accent);
    font-size: 14px;
    font-weight: 600;
}

.sl-add-question[b-68bocv1sbl] {
    align-self: flex-start;
}

@media (hover: hover) and (pointer: fine) {
    .sl-icon-btn:not(:disabled):hover[b-68bocv1sbl] {
        border-color: color-mix(in srgb, var(--sl-text) 35%, transparent);
        color: var(--sl-text);
    }

    .sl-add-answer:hover[b-68bocv1sbl] {
        text-decoration: underline;
    }
}
/* /Components/Staff/SeasonEditor.razor.rz.scp.css */
/* STEP 25: the season form. The form on the left, the preview on the right (under the colours on smaller screens) */
.sl-season-editor[b-35o13pf4wq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sl-season-layout[b-35o13pf4wq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    gap: 24px;
}

.sl-season-form[b-35o13pf4wq] {
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
}

.sl-season-section[b-35o13pf4wq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .sl-season-section h4[b-35o13pf4wq] {
        margin: 0;
        font-size: 17px;
    }

.sl-preview-side[b-35o13pf4wq] {
    position: sticky;
    top: 88px;
}

.sl-preview-inline[b-35o13pf4wq] {
    display: none;
}

/* ===== The colours ===== */
.sl-colours[b-35o13pf4wq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
}

.sl-colour[b-35o13pf4wq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 9%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--sl-surface) 60%, transparent);
}

.sl-colour-pick[b-35o13pf4wq] {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--sl-text) 22%, transparent);
    border-radius: 10px;
    background: none;
    cursor: pointer;
}

    .sl-colour-pick[b-35o13pf4wq]::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    .sl-colour-pick[b-35o13pf4wq]::-webkit-color-swatch {
        border: 0;
        border-radius: 9px;
    }

    .sl-colour-pick[b-35o13pf4wq]::-moz-color-swatch {
        border: 0;
        border-radius: 9px;
    }

.sl-colour-text[b-35o13pf4wq] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.sl-colour-name[b-35o13pf4wq] {
    font-size: 14px;
    font-weight: 600;
}

.sl-colour-hint[b-35o13pf4wq] {
    overflow: hidden;
    font-size: 12px;
    color: var(--sl-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-colour-hex[b-35o13pf4wq] {
    flex: none;
    width: 100px;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 14%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--sl-bg) 60%, transparent);
    color: var(--sl-text);
    font: 600 16px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* 16px stops iPhones zooming in */
    text-transform: uppercase;
}

    .sl-colour-hex:focus[b-35o13pf4wq] {
        outline: none;
        border-color: var(--sl-accent);
    }

    .sl-colour-hex.bad[b-35o13pf4wq] {
        border-color: var(--sl-grad-1);
    }

.sl-readability[b-35o13pf4wq] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    font-size: 13px;
}

    .sl-readability .ok[b-35o13pf4wq] {
        color: var(--sl-muted);
    }

    .sl-readability .low[b-35o13pf4wq] {
        color: var(--sl-grad-1);
        font-weight: 600;
    }

.sl-check[b-35o13pf4wq] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    font-size: 15px;
    cursor: pointer;
}

    .sl-check input[b-35o13pf4wq] {
        width: 20px;
        height: 20px;
        margin: 0;
        accent-color: var(--sl-accent-2);
    }

/* ===== Hero art ===== */
.sl-art-slots[b-35o13pf4wq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.sl-art-slot[b-35o13pf4wq] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 9%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--sl-surface) 60%, transparent);
}

/* A tiny sky in the season's own colours, with the art pinned bottom-right like on the home page */
.sl-art-thumb[b-35o13pf4wq] {
    position: relative;
    flex: none;
    overflow: hidden;
    width: 120px;
    height: 68px;
    border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sl-bg) 85%, var(--sl-grad-3)) 0%, var(--sl-grad-3) 60%, var(--sl-grad-2) 82%, var(--sl-grad-1) 100%);
}

    .sl-art-thumb.narrow[b-35o13pf4wq] {
        width: 68px;
    }

    .sl-art-thumb img[b-35o13pf4wq] {
        position: absolute;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        height: 100%;
    }

.sl-art-text[b-35o13pf4wq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .sl-art-text strong[b-35o13pf4wq] {
        font-size: 15px;
    }

.sl-art-note[b-35o13pf4wq] {
    font-size: 13px;
    color: var(--sl-muted);
}

.sl-upload[b-35o13pf4wq] {
    cursor: pointer;
}

    .sl-upload:focus-within[b-35o13pf4wq] {
        outline: 2px solid var(--sl-accent);
        outline-offset: 2px;
    }

    .sl-upload.busy[b-35o13pf4wq] {
        opacity: 0.6;
        pointer-events: none;
    }

/* ===== The preview: a small copy of the home page in the colours being picked ===== */
.sl-preview[b-35o13pf4wq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--sl-border);
    border-radius: 20px;
    background: var(--sl-bg);
    color: var(--sl-text);
}

.sl-preview-label[b-35o13pf4wq] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sl-muted);
}

.sl-preview-hero[b-35o13pf4wq] {
    position: relative;
    overflow: hidden;
    min-height: 176px;
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sl-bg) 92%, var(--sl-grad-3)) 0%, color-mix(in srgb, var(--sl-bg) 70%, var(--sl-grad-3)) 38%, var(--sl-grad-3) 63%, var(--sl-grad-2) 81%, var(--sl-grad-1) 100%);
}

.sl-preview-glow[b-35o13pf4wq] {
    position: absolute;
    right: 10px;
    bottom: -26px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--sl-grad-1) 50%, transparent) 0%, transparent 65%);
}

.sl-preview-sun[b-35o13pf4wq] {
    position: absolute;
    right: 50px;
    bottom: 22px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sl-grad-1) 40%, white) 0%, var(--sl-grad-1) 42%, var(--sl-grad-2) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 56%, transparent 61%, #000 61%, #000 69%, transparent 69%, transparent 75%, #000 75%, #000 82%, transparent 82%, transparent 89%, #000 89%);
    mask-image: linear-gradient(180deg, #000 56%, transparent 56%, transparent 61%, #000 61%, #000 69%, transparent 69%, transparent 75%, #000 75%, #000 82%, transparent 82%, transparent 89%, #000 89%);
}

.sl-preview-art[b-35o13pf4wq] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    height: 176px;
}

.sl-preview-hero-text[b-35o13pf4wq] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--sl-bg) 55%, transparent) 0%, transparent 75%);
}

.sl-preview-kicker[b-35o13pf4wq] {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    color: color-mix(in srgb, var(--sl-text) 82%, transparent);
}

.sl-preview-hero-text strong[b-35o13pf4wq] {
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.sl-preview-cta[b-35o13pf4wq] {
    margin-top: 2px;
    padding: 6px 12px;
    border-radius: 999px;
    background-image: linear-gradient(90deg, var(--sl-grad-1), var(--sl-grad-2), var(--sl-grad-3));
    color: var(--sl-bg);
    font-size: 12px;
    font-weight: 700;
}

.sl-preview-card[b-35o13pf4wq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--sl-border);
    border-radius: 16px;
    background: var(--sl-surface);
}

.sl-preview-who[b-35o13pf4wq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sl-preview-avatar[b-35o13pf4wq] {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sl-accent);
    color: var(--sl-bg);
    font-size: 13px;
    font-weight: 700;
}

.sl-preview-name[b-35o13pf4wq] {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 600;
}

    .sl-preview-name small[b-35o13pf4wq] {
        font-size: 11px;
        font-weight: 400;
        color: var(--sl-muted);
    }

.sl-preview-tag[b-35o13pf4wq] {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--sl-accent) 50%, transparent);
    border-radius: 999px;
    color: var(--sl-accent);
    font-size: 11px;
    font-weight: 600;
}

.sl-preview-text[b-35o13pf4wq] {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.sl-preview-meter[b-35o13pf4wq] {
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-grad-1) 55%, transparent);
}

    .sl-preview-meter span[b-35o13pf4wq] {
        display: block;
        width: 72%;
        height: 100%;
        background: var(--sl-accent-2);
    }

.sl-preview-votes[b-35o13pf4wq] {
    display: flex;
    gap: 8px;
}

.sl-preview-vote[b-35o13pf4wq] {
    padding: 5px 10px;
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

    .sl-preview-vote.on[b-35o13pf4wq] {
        border-color: transparent;
        background: var(--sl-accent-2);
        color: var(--sl-bg);
    }

.sl-preview-link[b-35o13pf4wq] {
    color: var(--sl-accent);
    font-size: 12px;
    text-decoration: underline;
}

/* Smaller screens: the preview moves under the colours, where it's easy to see what changed */
@media (max-width: 760px) {
    .sl-season-layout[b-35o13pf4wq] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sl-preview-side[b-35o13pf4wq] {
        display: none;
    }

    .sl-preview-inline[b-35o13pf4wq] {
        display: block;
    }
}
/* /Components/Staff/StaffOverview.razor.rz.scp.css */
/* STEP 25: the Overview. A calm grid of cards, one per job. A card with something waiting gets a pink edge */
.sl-overview[b-wezsx1fw70] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.sl-overview-card[b-wezsx1fw70] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--sl-text) 9%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--sl-surface) 75%, transparent);
}

    .sl-overview-card.busy[b-wezsx1fw70] {
        border-color: color-mix(in srgb, var(--sl-accent) 50%, transparent);
    }

    .sl-overview-card h3[b-wezsx1fw70] {
        margin: 0 0 2px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--sl-muted);
    }

.sl-overview-big[b-wezsx1fw70] {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.sl-overview-note[b-wezsx1fw70] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sl-muted);
}

    .sl-overview-note.warn[b-wezsx1fw70] {
        color: var(--sl-grad-1);
        font-weight: 600;
    }

/* The button sits at the bottom, so the cards in a row line up */
.sl-overview-card .sl-staff-btn[b-wezsx1fw70] {
    margin-top: auto;
}

.sl-overview-card > .sl-overview-note:last-of-type[b-wezsx1fw70] {
    margin-bottom: 8px;
}