/* /Components/ChallengeView.razor.rz.scp.css */
/* "Question:" and "Submission:" — the two card labels on the daily challenge.
   Deliberately set here rather than on the global .oad-box h2, so the bump is
   confined to this component and doesn't also inflate the labels on Yesterday's
   solution or the admin panels. app.css sets these to 1.05rem. */
.cv-question-head h2[b-y5w5ogpzig],
.oad-box h2[b-y5w5ogpzig] {
    font-size: 1.45rem;
    font-weight: 700;
}

.cv-question-head[b-y5w5ogpzig] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.cv-question-head h2[b-y5w5ogpzig] {
    margin: 0;
}

.cv-note[b-y5w5ogpzig] {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--ink-soft);
    margin-bottom: 0.5rem;
}

.cv-question-text[b-y5w5ogpzig] {
    font-size: 1.2rem;
    line-height: 1.55;
}

.cv-image[b-y5w5ogpzig] {
    display: block;
    max-width: 100%;
    max-height: 340px;
    border-radius: 10px;
    border: 1px solid var(--line);
    margin-top: 1.1rem;
    background: #fff;
}

/* ------------------------------------------------------------------- hint --- */

.cv-hint-section[b-y5w5ogpzig] {
    margin-bottom: 0.85rem;
}

/* One shared shape for all three hint states — locked, offered, revealed — so
   the bar doesn't jump as it changes. */
.cv-hint-toggle[b-y5w5ogpzig],
.cv-hint-locked[b-y5w5ogpzig],
.cv-hint-revealed[b-y5w5ogpzig] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: var(--radius);
    padding: 0.9rem 1.15rem;
    font-size: 1rem;
    font-family: inherit;
    text-align: left;
    line-height: 1.5;
}

/* Locked: dashed, muted — visibly not a button yet. */
.cv-hint-locked[b-y5w5ogpzig] {
    background: var(--gold-tint);
    border: 1px dashed var(--gold);
    color: var(--amber);
    justify-content: center;
    font-size: 0.95rem;
}

/* Offered: solid and clickable. */
.cv-hint-toggle[b-y5w5ogpzig] {
    background: var(--gold-tint);
    border: 1px solid var(--gold);
    color: var(--amber);
    font-weight: 700;
    justify-content: center;
    cursor: pointer;
    min-height: 48px;
    transition: background-color .15s ease;
}

.cv-hint-toggle:hover[b-y5w5ogpzig] {
    background: var(--gold-tint-hover);
}

/* Revealed: switches to blue so it reads as information rather than an offer. */
.cv-hint-revealed[b-y5w5ogpzig] {
    justify-content: space-between;
    background: var(--blue-tint);
    border: 1px solid var(--blue);
    color: var(--blue-deep);
    cursor: pointer;
    transition: background-color .15s ease;
}

.cv-hint-revealed:hover[b-y5w5ogpzig] {
    background: var(--blue-tint-hover);
}

.cv-hint-hide[b-y5w5ogpzig] {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.7;
    white-space: nowrap;
}

/* ------------------------------------------------------------- submission --- */

.cv-input[b-y5w5ogpzig] {
    width: 100%;
    min-height: 84px;
    font-size: 1.05rem;
}

.cv-submit-row[b-y5w5ogpzig] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.cv-reveal[b-y5w5ogpzig] {
    background: var(--blue-tint);
    color: var(--blue-deep);
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.3rem;
    font-weight: 700;
    min-height: 48px;
    cursor: pointer;
}

.cv-reveal:hover[b-y5w5ogpzig] {
    background: var(--blue-tint-hover);
}

.cv-feedback[b-y5w5ogpzig] {
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
}

.cv-correct[b-y5w5ogpzig] {
    color: var(--green-deep);
}

.cv-incorrect[b-y5w5ogpzig] {
    color: var(--red);
}

.cv-locked-note[b-y5w5ogpzig] {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.cv-solution[b-y5w5ogpzig] {
    margin-top: 1rem;
    background: var(--green-tint);
    border-left: 4px solid var(--green);
    padding: 0.9rem 1.1rem;
    border-radius: 0 10px 10px 0;
}

/* --------------------------------------------------- yesterday's solution --- */

/* Its own container below the submission box — the padding comes from the
   link itself, so the box hugs it. */
.cv-yesterday-box[b-y5w5ogpzig] {
    padding: 0.45rem;
}

/* Was a glossy gradient with an animated shine. Now a calm blue panel: the
   editorial design has no other gradient in it, and a sweeping highlight next to
   a puzzle competes with the puzzle. */
.cv-yesterday[b-y5w5ogpzig] {
    display: block;
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--blue-deep);
    text-decoration: none;
    background: var(--blue-tint);
    transition: background-color .15s ease;
}

.cv-yesterday:hover[b-y5w5ogpzig] {
    background: var(--blue-tint-hover);
}

/* ------------------------------------------------- solved dialog (on solve) --- */

/* The countdown used to sit only at the bottom of the page, below the submission
   box and the yesterday link — off-screen on most displays, with nothing but a
   slightly longer scrollbar to hint it existed. It is announced here instead. */

.cv-solved-backdrop[b-y5w5ogpzig] {
    position: fixed;
    inset: 0;
    background: rgba(34, 51, 77, 0.45);
    z-index: 950;
    animation: cv-solved-fade-b-y5w5ogpzig .18s ease;
}

.cv-solved[b-y5w5ogpzig] {
    position: fixed;
    z-index: 960;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 2.5rem));
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.9rem 1.75rem 1.6rem;
    box-shadow: 0 20px 56px rgba(34, 51, 77, .3);
    text-align: center;
    animation: cv-solved-rise-b-y5w5ogpzig .22s cubic-bezier(.2, .8, .3, 1);
}

/* It receives focus on open, but it isn't itself interactive — the ring belongs
   on the buttons inside, not around the whole panel. */
.cv-solved:focus[b-y5w5ogpzig] { outline: none; }

@keyframes cv-solved-fade-b-y5w5ogpzig { from { opacity: 0; } to { opacity: 1; } }

@keyframes cv-solved-rise-b-y5w5ogpzig {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.cv-solved-close[b-y5w5ogpzig] {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    line-height: 1;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
}

.cv-solved-close:hover[b-y5w5ogpzig] {
    background: var(--blue-tint);
    color: var(--blue-deep);
}

.cv-solved-mark[b-y5w5ogpzig] {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.cv-solved-title[b-y5w5ogpzig] {
    font-size: 1.9rem;
    color: var(--green-deep);
    margin-bottom: 0.25rem;
}

.cv-solved-sub[b-y5w5ogpzig] {
    color: var(--ink-soft);
    margin-bottom: 1.25rem;
}

.cv-solved-solution[b-y5w5ogpzig] {
    background: var(--green-tint);
    border-left: 4px solid var(--green);
    border-radius: 0 10px 10px 0;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    text-align: left;
    line-height: 1.6;
    white-space: pre-wrap;
}

.cv-solved-next[b-y5w5ogpzig] {
    background: var(--gold-tint);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.1rem 1rem 0.9rem;
    color: var(--amber);
}

.cv-solved-next-label[b-y5w5ogpzig] {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.cv-solved-stats[b-y5w5ogpzig] {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin-top: 1rem;
    line-height: 1.5;
}

.cv-solved-actions[b-y5w5ogpzig] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

.cv-solved-yesterday[b-y5w5ogpzig] {
    display: block;
    padding: 0.85rem 1.2rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--blue-deep);
    text-decoration: none;
    background: var(--blue-tint);
    transition: background-color .15s ease;
}

.cv-solved-yesterday:hover[b-y5w5ogpzig] { background: var(--blue-tint-hover); }

@media (prefers-reduced-motion: reduce) {
    .cv-solved[b-y5w5ogpzig],
    .cv-solved-backdrop[b-y5w5ogpzig] { animation: none; }
}

/* ------------------------------------------------------------- post-solve --- */

.cv-next[b-y5w5ogpzig] {
    background: var(--gold-tint);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    text-align: center;
    padding: 1.4rem 1rem;
    margin-bottom: 1.25rem;
    color: var(--amber);
}

.cv-next-msg[b-y5w5ogpzig] {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.cv-next-timer[b-y5w5ogpzig] {
    font-family: 'Lora', Georgia, serif;
    font-size: 2.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.cv-next-sub[b-y5w5ogpzig] {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 0.4rem;
}

.cv-stats[b-y5w5ogpzig] {
    text-align: center;
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin-top: 0.25rem;
}
/* /Components/DifficultyBadge.razor.rz.scp.css */
/* Tinted pill rather than a solid block: at this size a saturated fill next to the
   question competes with it, and the tint + coloured dot still reads at a glance. */
.diff-badge[b-ibn54rfcgp] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

.diff-dot[b-ibn54rfcgp] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex: none;
}

.diff-easy[b-ibn54rfcgp] {
    background: var(--green-tint);
    color: var(--green-deep);
}

.diff-easy .diff-dot[b-ibn54rfcgp] { background: var(--green); }

.diff-medium[b-ibn54rfcgp] {
    background: var(--gold-tint);
    color: var(--amber);
}

.diff-medium .diff-dot[b-ibn54rfcgp] { background: var(--gold); }

.diff-hard[b-ibn54rfcgp] {
    background: var(--red-tint);
    color: var(--red);
}

.diff-hard .diff-dot[b-ibn54rfcgp] { background: var(--red); }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Layout shell.

   Every band here is full-bleed and lets an inner wrapper do the centring, so the
   header rule and footer rule reach the viewport edges while their contents stay
   aligned with the reading column at any window width. */

.oad-skip[b-6by5iepybf] {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 8px 0;
    z-index: 100;
    text-decoration: none;
}

.oad-skip:focus[b-6by5iepybf] { left: 0; }

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

.oad-header[b-6by5iepybf] {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}

.oad-header-inner[b-6by5iepybf] {
    /* Wider than the reading column: the nav needs the room, and a header that
       tracked the 680px text column would look pinched on a large screen. */
    max-width: 1040px;
    margin-inline: auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.oad-wordmark[b-6by5iepybf] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.oad-mark[b-6by5iepybf] {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold);
    font-size: 1.05rem;
    flex: none;
}

.oad-wordmark:hover .oad-mark[b-6by5iepybf] { filter: brightness(1.06); }

/* ------------------------------------------------------------- inline nav --- */

.oad-nav[b-6by5iepybf] {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;
}

.oad-nav-link[b-6by5iepybf] {
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 0.97rem;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.oad-nav-link:hover[b-6by5iepybf] {
    background: var(--blue-tint);
    color: var(--blue-deep);
}

.oad-nav-current[b-6by5iepybf] {
    background: var(--ink);
    color: #fff;
    font-weight: 700;
}

.oad-nav-current:hover[b-6by5iepybf] {
    background: var(--ink);
    color: #fff;
}

/* --------------------------------------------------------- hamburger menu --- */

.oad-menu-wrap[b-6by5iepybf] {
    position: relative;
    display: none;   /* only below the breakpoint; see the media query */
}

.oad-menu-button[b-6by5iepybf] {
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 0.7rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    min-height: 44px;
}

.oad-menu-button span[b-6by5iepybf] {
    display: block;
    width: 22px;
    height: 2.5px;
    background: var(--ink);
    border-radius: 2px;
}

.oad-menu-panel[b-6by5iepybf] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--card);
    border: 1px solid var(--line);
    min-width: 250px;
    padding: 0.5rem;
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(34, 51, 77, .14);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

/* Invisible bridge over the 8px gap so the menu doesn't
   vanish while the cursor travels from button to panel. */
.oad-menu-panel[b-6by5iepybf]::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.oad-menu-wrap:hover .oad-menu-panel[b-6by5iepybf],
.oad-menu-wrap:focus-within .oad-menu-panel[b-6by5iepybf] {
    opacity: 1;
    visibility: visible;
}

.oad-menu-panel ul[b-6by5iepybf] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.oad-menu-panel li + li[b-6by5iepybf] { border-top: 1px solid var(--line); }

.oad-menu-panel[b-6by5iepybf]  a {
    display: block;
    padding: 0.75rem 0.85rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.02rem;
    border-radius: 8px;
    min-height: 44px;
}

.oad-menu-panel[b-6by5iepybf]  a:hover {
    background: var(--blue-tint);
    color: var(--blue-deep);
}

.oad-menu-panel[b-6by5iepybf]  a[aria-current="page"] {
    font-weight: 700;
    color: var(--blue-deep);
}

/* Swap inline nav for the hamburger once the links stop fitting comfortably. */
@media (max-width: 900px) {
    .oad-nav[b-6by5iepybf] { display: none; }
    .oad-menu-wrap[b-6by5iepybf] { display: block; }
}

/* ------------------------------------------------------------------- main --- */

/* Vertical rhythm here is tuned so the four main pages fit a laptop viewport without
   a scrollbar — see the note in PRD 09. The bottom padding was 4.5rem, which alone
   pushed every page ~40px over on a 14" screen. */
.oad-main[b-6by5iepybf] {
    display: block;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    /* Push the footer down on short pages so it never floats mid-screen. */
    min-height: calc(100vh - 320px);
}

/* ----------------------------------------------------------------- footer --- */

.oad-footer[b-6by5iepybf] {
    border-top: 1px solid var(--line);
    padding: 0.7rem 0 0.9rem;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

/* Tagline and subscribe link share one line on desktop and wrap on a phone. */
.oad-footer-line[b-6by5iepybf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.2rem 0.55rem;
}

.oad-footer-sep[b-6by5iepybf] {
    color: var(--line);
}

/* On a phone the separator would dangle at the end of the first line. */
@media (max-width: 560px) {
    .oad-footer-sep[b-6by5iepybf] { display: none; }
}

/* ------------------------------------------------------------ error strip --- */

#blazor-error-ui[b-6by5iepybf] {
    color-scheme: light only;
    background: var(--gold-tint);
    border-top: 2px solid var(--gold);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-6by5iepybf] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-sma6g415jb],
.components-reconnect-repeated-attempt-visible[b-sma6g415jb],
.components-reconnect-failed-visible[b-sma6g415jb],
.components-pause-visible[b-sma6g415jb],
.components-resume-failed-visible[b-sma6g415jb],
.components-rejoining-animation[b-sma6g415jb] {
    display: none;
}

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


/* This modal ships with the Blazor template and was missed by the redesign — it
   kept the stock blue and square corners long after the rest moved on. It is not
   an edge case: it appears on every deploy, every network blip, and every time a
   laptop wakes from sleep, so for many visitors it is the second thing they see. */
#components-reconnect-modal[b-sma6g415jb] {
    background-color: var(--card);
    color: var(--ink);
    font-family: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 16px 44px rgba(34, 51, 77, .28);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-sma6g415jb 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-sma6g415jb] {
    border: 0;
    background-color: var(--green);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    padding: 0.65rem 1.4rem;
    min-height: 44px;
    border-radius: 10px;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-sma6g415jb] {
        background-color: var(--green-deep);
    }

    #components-reconnect-modal button:active[b-sma6g415jb] {
        background-color: var(--green-deep);
    }

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

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

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

@keyframes components-rejoining-animation-b-sma6g415jb {
    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/About.razor.rz.scp.css */
/* app.css zeroes p margins globally, so consecutive paragraphs would otherwise butt
   together and read as one block — which is what made this page a wall of text even
   though it already had two <p> elements. */
.about-body p + p[b-x2tsopfb8x] {
    margin-top: 1.1rem;
}

.about-body p[b-x2tsopfb8x] {
    line-height: 1.7;
}

/* The closing line is an aside rather than part of the argument, so it gets a rule
   above it and steps back a shade. */
.about-close[b-x2tsopfb8x] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-style: italic;
}
/* /Components/Pages/Admin.razor.rz.scp.css */
/* Width is the layout's job — MainLayout applies .oad-measure-wide on this route.
   A max-width here would cap without centring, which is the bug that used to make
   the whole site hug the left edge on a wide monitor. */
.oad-admin[b-76klmokn3s] {
    width: 100%;
}

/* Tables can out-grow even the wide measure; let them scroll in place rather
   than pushing the page sideways. */
.oad-admin-table-scroll[b-76klmokn3s] {
    overflow-x: auto;
}

.oad-field[b-76klmokn3s] {
    margin-bottom: 1rem;
}

.oad-field label[b-76klmokn3s] {
    display: block;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

/* Fields take the site's form style from app.css — outline, rounding, focus ring. This
   page used to strip their borders, a leftover from the old design where white fields
   sat on a coloured card; on today's white card that made them invisible. */
.oad-field[b-76klmokn3s]  input[type="date"] {
    max-width: 220px;
}

.oad-difficulty-row[b-76klmokn3s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.oad-tag-preview[b-76klmokn3s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.oad-tag-chip[b-76klmokn3s] {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.oad-image-preview[b-76klmokn3s] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.6rem;
}

.oad-image-preview img[b-76klmokn3s] {
    max-width: 180px;
    max-height: 140px;
    border-radius: 4px;
    background: #fff;
}

.oad-difficulty-row[b-76klmokn3s]  select {
    max-width: 220px;
}

.oad-warning[b-76klmokn3s] {
    display: block;
    margin-top: 0.35rem;
    color: #8f1a00;
    font-weight: 600;
}

.oad-admin-actions[b-76klmokn3s] {
    display: flex;
    gap: 0.75rem;
}

.oad-btn-plain[b-76klmokn3s] {
    background: none;
    border: 2px solid #1a1a1a;
    border-radius: 4px;
    padding: 0.35rem 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.oad-btn-danger[b-76klmokn3s] {
    background: none;
    border: 2px solid #8f1a00;
    color: #8f1a00;
    border-radius: 4px;
    padding: 0.35rem 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.oad-saved[b-76klmokn3s] {
    margin-top: 0.9rem;
    font-weight: 700;
    color: #0a5c1d;
}

.oad-admin-table[b-76klmokn3s] {
    width: 100%;
    border-collapse: collapse;
}

.oad-admin-table th[b-76klmokn3s],
.oad-admin-table td[b-76klmokn3s] {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    vertical-align: top;
}

.oad-cell-date[b-76klmokn3s] {
    white-space: nowrap;
}

.oad-cell-actions[b-76klmokn3s] {
    white-space: nowrap;
}

.oad-cell-stats[b-76klmokn3s] {
    white-space: nowrap;
    font-size: 0.85rem;
}

.oad-cell-tags[b-76klmokn3s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 160px;
}

.oad-cell-muted[b-76klmokn3s] {
    opacity: 0.5;
}

.oad-cell-actions button[b-76klmokn3s] {
    margin-left: 0.3rem;
}

.oad-row-today[b-76klmokn3s] {
    background: rgba(251, 216, 93, 0.5);
}

.oad-rotation-lead[b-76klmokn3s] {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}

.oad-rotation-state[b-76klmokn3s] {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 4px;
    padding: 0.5rem 0.8rem;
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
}

.oad-rotation-table[b-76klmokn3s] {
    font-size: 0.9rem;
    margin-bottom: 0.9rem;
}

.oad-rotation-actions[b-76klmokn3s] {
    display: flex;
    gap: 0.5rem;
}

.oad-suggestion[b-76klmokn3s] {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.oad-suggestion:last-child[b-76klmokn3s] {
    border-bottom: none;
    padding-bottom: 0;
}

.oad-suggestion-meta[b-76klmokn3s] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 0.4rem;
}

.oad-suggestion-difficulty[b-76klmokn3s] {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 4px;
    padding: 0.1rem 0.5rem;
    font-weight: 700;
}

.oad-suggestion-blocked[b-76klmokn3s] {
    font-size: 0.9rem;
    background: #fff6e5;
    border-left: 3px solid #e0a020;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.oad-suggestion-q[b-76klmokn3s] {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.oad-suggestion-s[b-76klmokn3s] {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.oad-suggestion-actions[b-76klmokn3s] {
    display: flex;
    gap: 0.5rem;
}

/* Reported issues */
.oad-issue[b-76klmokn3s] {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.oad-issue:last-child[b-76klmokn3s] {
    border-bottom: none;
    padding-bottom: 0;
}

.oad-issue-closed[b-76klmokn3s] {
    opacity: 0.6;
}

/* Status tag */
.oad-issue-status[b-76klmokn3s] {
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.oad-status-new[b-76klmokn3s] {
    background-color: #d23b34;   /* red — needs attention */
}

.oad-status-progress[b-76klmokn3s] {
    background-color: #e0a92b;   /* amber — being worked on */
    color: #1a1a1a;
}

.oad-status-solved[b-76klmokn3s] {
    background-color: #2e9e3f;   /* green */
}

.oad-status-wontsolve[b-76klmokn3s] {
    background-color: #6b7280;   /* grey */
}

.oad-status-duplicate[b-76klmokn3s] {
    background-color: #577590;   /* slate blue */
}

.oad-issue-updated[b-76klmokn3s] {
    font-size: 0.75rem;
    opacity: 0.7;
    font-style: italic;
}

.oad-issue-statuslabel[b-76klmokn3s] {
    font-size: 0.85rem;
    font-weight: 700;
}

.oad-issue-select[b-76klmokn3s] {
    border: none;
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
    background: #fff;
}

.oad-issue-meta[b-76klmokn3s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.oad-issue-category[b-76klmokn3s] {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    padding: 0.1rem 0.5rem;
    font-weight: 700;
}

.oad-issue-done[b-76klmokn3s] {
    font-weight: 700;
    color: #0a5c1d;
}

.oad-issue-details[b-76klmokn3s] {
    font-size: 1rem;
    margin-bottom: 0.35rem;
    white-space: pre-wrap;
}

.oad-issue-context[b-76klmokn3s] {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.oad-issue-jump[b-76klmokn3s] {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
}

.oad-issue-actions[b-76klmokn3s] {
    display: flex;
    gap: 0.5rem;
}

.oad-row-future[b-76klmokn3s] {
    opacity: 0.75;
}

/* ------------------------------------------------- collapsible sections --- */

/* Each section under the form is a <details>, and its summary is the section banner. */
.oad-admin-section > summary[b-76klmokn3s] {
    display: block;          /* not list-item: that drops the browser's own triangle */
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.oad-admin-section > summary[b-76klmokn3s]::-webkit-details-marker {
    display: none;           /* Safari still draws its triangle without this */
}

.oad-admin-section > summary:focus-visible[b-76klmokn3s] {
    outline: 3px solid rgba(43, 123, 199, .35);
    outline-offset: 4px;
    border-radius: 8px;
}

.oad-section-count[b-76klmokn3s] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: var(--blue-tint);
    color: var(--blue-deep);
    font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: middle;
}

/* The drop arrow: points down when open, right when collapsed. Drawn with borders so it
   doesn't depend on the heading font having an arrow glyph. */
.oad-chevron[b-76klmokn3s] {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-left: 0.65rem;
    border-right: 2.5px solid var(--ink-soft);
    border-bottom: 2.5px solid var(--ink-soft);
    transform: translateY(-0.2em) rotate(45deg);
    transition: transform .15s ease;
    vertical-align: middle;
}

.oad-admin-section:not([open]) > summary .oad-chevron[b-76klmokn3s] {
    transform: rotate(-45deg);
}

.oad-admin-section > summary:hover .oad-chevron[b-76klmokn3s] {
    border-color: var(--ink);
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.oad-contact-intro[b-0sgqhhundz] {
    margin-bottom: 1.1rem;
    color: var(--ink-soft);
}

.oad-contact-field[b-0sgqhhundz] {
    margin-bottom: 0.8rem;
}

.oad-contact-field label[b-0sgqhhundz] {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

/* Inputs inherit their shape from app.css; only the textarea height is
   page-specific — a teaser needs more room than a one-line answer. */
.oad-contact-field textarea[b-0sgqhhundz] {
    min-height: 64px;
}

.oad-contact-thanks p[b-0sgqhhundz] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--green-deep);
    margin-bottom: 0;
}

.oad-contact-limit-note[b-0sgqhhundz] {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin-top: 0.4rem;
}

/* Decoy field for the honeypot check.

   Deliberately NOT display:none, visibility:hidden, or type="hidden" — every
   scraper library skips those, which would make the trap useless. Moving it off
   the canvas keeps it "visible" to anything reading the DOM while no sighted
   user can reach it. tabindex="-1" and aria-hidden in the markup cover keyboard
   and screen-reader users. */
.oad-hp[b-0sgqhhundz] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
/* /Components/Pages/Error.razor.rz.scp.css */
.err-box[b-w2zokv4yo2] {
    text-align: center;
}

.err-lead[b-w2zokv4yo2] {
    font-size: 1.15rem;
    margin-bottom: 0.6rem;
}

.err-sub[b-w2zokv4yo2] {
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}

.err-home[b-w2zokv4yo2] {
    display: inline-block;
    padding: 0.85rem 1.4rem;
    border-radius: 10px;
    font-weight: 700;
    color: var(--blue-deep);
    background: var(--blue-tint);
    text-decoration: none;
    transition: background-color .15s ease;
}

.err-home:hover[b-w2zokv4yo2] {
    background: var(--blue-tint-hover);
}

/* Quiet on purpose — useful if someone reports the problem, meaningless otherwise. */
.err-ref[b-w2zokv4yo2] {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.err-ref code[b-w2zokv4yo2] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Deliberately no max-width.

   This file used to read `.oad-home { max-width: 720px }` — the same cap-without-
   centring pattern that made the whole site hug the left edge on a wide monitor. It
   was harmless only by accident: the reading column is 680px, so a 720px cap never
   bound. Widen the measure and it would have started clipping the home page alone,
   which is a horrible bug to track down.

   Width belongs to MainLayout, in one place. See PRD 09. */
/* /Components/Pages/TwentyFour.razor.rz.scp.css */
/* No max-width here — the layout owns the reading column, in one place. */

.tf-lead[b-fctcr00qu9] {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.tf-rules[b-fctcr00qu9] {
    font-size: 0.97rem;
    line-height: 1.6;
    margin: 0;
    color: var(--ink-soft);
}

/* Deliberately quiet — it shows the *format*, not a technique, so it shouldn't
   compete with the rules above it. See the comment in the markup. */
.tf-example[b-fctcr00qu9] {
    margin-top: 0.5rem;
}

.tf-eg[b-fctcr00qu9] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}

/* --- the dealt hand ----------------------------------------------------- */

.tf-hand-box[b-fctcr00qu9] {
    padding: 1.1rem 1rem;
}

.tf-hand[b-fctcr00qu9] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem;
}

/* Proper playing cards: corner ranks, a centre pip, and red/black suits, so the
   hand reads as something dealt rather than as four buttons. The suits carry no
   meaning in the game — they exist to tell duplicates apart. */
.tf-card[b-fctcr00qu9] {
    position: relative;
    width: 5rem;
    height: 7rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(34, 51, 77, .10);
    font-family: 'Lora', Georgia, serif;
    transition: transform .16s ease, box-shadow .16s ease, opacity .18s ease;
}

.tf-card:hover[b-fctcr00qu9] {
    transform: translateY(-6px) rotate(-1.5deg);
    box-shadow: 0 10px 24px rgba(34, 51, 77, .16);
}

.tf-card-black[b-fctcr00qu9] { color: var(--ink); }
.tf-card-red[b-fctcr00qu9]   { color: var(--red); }

.tf-rank[b-fctcr00qu9] {
    position: absolute;
    top: 7px;
    left: 9px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

/* Bottom-right rank, rotated like a real card. */
.tf-rank-br[b-fctcr00qu9] {
    top: auto;
    left: auto;
    bottom: 7px;
    right: 9px;
    transform: rotate(180deg);
}

.tf-suit[b-fctcr00qu9] {
    display: block;
    text-align: center;
    font-size: .72rem;
    margin-top: 1px;
}

.tf-pip[b-fctcr00qu9] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    font-weight: 700;
}

/* Spent: the number is already in the expression. Fades rather than greys out, so
   the card still reads — you need to see WHICH card you spent. Deleting the number
   from the box brings it straight back. */
.tf-card-used[b-fctcr00qu9] {
    opacity: 0.3;
}

.tf-card-used:hover[b-fctcr00qu9] {
    transform: none;
    box-shadow: 0 2px 8px rgba(34, 51, 77, .10);
}

@media (max-width: 420px) {
    .tf-card[b-fctcr00qu9] {
        width: 3.9rem;
        height: 5.5rem;
    }

    .tf-pip[b-fctcr00qu9] { font-size: 1.9rem; }
    .tf-rank[b-fctcr00qu9] { font-size: .85rem; top: 5px; left: 6px; }
    .tf-rank-br[b-fctcr00qu9] { top: auto; left: auto; bottom: 5px; right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .tf-card:hover[b-fctcr00qu9] { transform: none; }
}

/* --- input and buttons -------------------------------------------------- */

.tf-input[b-fctcr00qu9] {
    width: 100%;
    font-size: 1.1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tf-buttons[b-fctcr00qu9] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.tf-pass[b-fctcr00qu9] {
    background: #fff;
    border: 1.5px solid var(--field);
    border-radius: 10px;
    padding: 0.75rem 1.4rem;
    font-weight: 700;
    font-family: inherit;
    font-size: 1.02rem;
    min-height: 48px;
    cursor: pointer;
    transition: border-color .15s ease;
}

.tf-pass:hover:not(:disabled)[b-fctcr00qu9] {
    border-color: var(--ink-soft);
}

.tf-pass:disabled[b-fctcr00qu9] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- feedback ----------------------------------------------------------- */

.tf-message[b-fctcr00qu9] {
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 700;
    font-size: 1.02rem;
}

.tf-correct[b-fctcr00qu9] {
    color: var(--green-deep);
}

.tf-wrong[b-fctcr00qu9] {
    color: var(--red);
}

.tf-passed[b-fctcr00qu9] {
    color: var(--ink-soft);
}

.tf-worked[b-fctcr00qu9] {
    margin-top: 0.5rem;
    margin-bottom: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 0.98rem;
}

/* --- next hand ---------------------------------------------------------- */

.tf-next-box[b-fctcr00qu9] {
    padding: 0.45rem;
}

/* Was a glossy gradient; now matches the calm blue panel used for
   "yesterday's solution", so the two share one visual language. */
.tf-next[b-fctcr00qu9] {
    display: block;
    width: 100%;
    padding: 0.95rem 1.2rem;
    border: none;
    border-radius: 10px;
    font-size: 1.02rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--blue-deep);
    background: var(--blue-tint);
    cursor: pointer;
    transition: background-color .15s ease;
}

.tf-next:hover[b-fctcr00qu9] {
    background: var(--blue-tint-hover);
}

.tf-next-hint[b-fctcr00qu9] {
    text-align: center;
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin: 0.5rem 0 0 0;
}

.tf-score[b-fctcr00qu9] {
    text-align: center;
    font-size: 0.94rem;
    color: var(--ink-soft);
}
/* /Components/Pages/Yesterday.razor.rz.scp.css */
/* No max-width here — the layout owns the reading column, in one place.
   This used to cap at 720px, which fought the centred column. */

.ys-spoiler-warning[b-kqdvtvggsc] {
    background: var(--gold-tint);
    border-left: 5px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0.8rem 1.15rem;
    margin-bottom: 0.85rem;
    font-size: 0.97rem;
    line-height: 1.55;
    color: var(--amber);
}

.ys-head[b-kqdvtvggsc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ys-head h2[b-kqdvtvggsc] {
    margin: 0;
}

/* --- the blurred veil -------------------------------------------------- */

.ys-veil[b-kqdvtvggsc] {
    position: relative;
    border-radius: 10px;
}

.ys-content[b-kqdvtvggsc] {
    filter: blur(7px);
    user-select: none;            /* can't select-and-read through the blur */
    pointer-events: none;
    transition: filter 0.35s ease;
}

.ys-open .ys-content[b-kqdvtvggsc] {
    filter: none;
    user-select: auto;
    pointer-events: auto;
}

/* Sits over the blurred text until tapped */
.ys-unveil[b-kqdvtvggsc] {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(252, 251, 246, 0.55);
    border: 2px dashed var(--blue);
    border-radius: 10px;
    font-size: 0.97rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--blue-deep);
    cursor: pointer;
    transition: background-color .15s ease;
}

.ys-unveil:hover[b-kqdvtvggsc] {
    background: rgba(234, 243, 251, 0.8);
}

.ys-question-text[b-kqdvtvggsc] {
    font-size: 1.15rem;
    line-height: 1.65;
    margin: 0;
}

.ys-image[b-kqdvtvggsc] {
    display: block;
    max-width: 100%;
    max-height: 320px;
    border-radius: 10px;
    border: 1px solid var(--line);
    margin-top: 0.9rem;
    background: #fff;
}

.ys-hint[b-kqdvtvggsc] {
    margin-top: 1rem;
    background: var(--gold-tint);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    color: var(--amber);
}

.ys-answer[b-kqdvtvggsc] {
    font-family: 'Lora', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 650;
    margin: 0 0 0.6rem 0;
}

.ys-explanation[b-kqdvtvggsc] {
    line-height: 1.65;
    margin: 0;
    white-space: pre-wrap;
    color: var(--ink-soft);
}

.ys-back[b-kqdvtvggsc] {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 700;
    color: var(--blue-deep);
}
/* /Components/ReportIssue.razor.rz.scp.css */
/* Floating action button, bottom right */
.ri-fab[b-deqxgijpmj] {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--card);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(34, 51, 77, .14);
    transition: color .15s ease, border-color .15s ease;
    min-height: 44px;
}

.ri-fab:hover[b-deqxgijpmj] {
    color: var(--blue-deep);
    border-color: var(--blue);
}

.ri-fab-icon[b-deqxgijpmj] {
    font-size: 1rem;
    line-height: 1;
}

/* On narrow screens collapse to just the icon */
@media (max-width: 520px) {
    .ri-fab-label[b-deqxgijpmj] {
        display: none;
    }
    .ri-fab[b-deqxgijpmj] {
        padding: 0.75rem 0.85rem;
    }
}

.ri-backdrop[b-deqxgijpmj] {
    position: fixed;
    inset: 0;
    background: rgba(34, 51, 77, 0.4);
    z-index: 950;
}

.ri-modal[b-deqxgijpmj] {
    position: fixed;
    z-index: 960;
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(460px, calc(100vw - 2.5rem));
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem 1.5rem;
    box-shadow: 0 16px 44px rgba(34, 51, 77, .28);
}

.ri-head[b-deqxgijpmj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ri-head h2[b-deqxgijpmj] {
    font-family: 'Lora', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 650;
    margin: 0;
}

.ri-close[b-deqxgijpmj] {
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    line-height: 1;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
}

.ri-close:hover[b-deqxgijpmj] {
    background: var(--blue-tint);
    color: var(--blue-deep);
}

.ri-context[b-deqxgijpmj] {
    font-size: 0.85rem;
    color: var(--ink-soft);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 1rem;
}

.ri-field[b-deqxgijpmj] {
    margin-bottom: 1.1rem;
}

.ri-field label[b-deqxgijpmj] {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.ri-field textarea[b-deqxgijpmj] {
    min-height: 120px;
}

.ri-counter[b-deqxgijpmj] {
    display: block;
    text-align: right;
    font-size: 0.78rem;
    color: var(--ink-soft);
    margin-top: 0.25rem;
}

.ri-actions[b-deqxgijpmj] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.ri-cancel[b-deqxgijpmj] {
    background: none;
    border: none;
    color: var(--ink-soft);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    min-height: 48px;
}

.ri-cancel:hover[b-deqxgijpmj] {
    background: var(--paper);
    color: var(--ink);
}

.ri-thanks[b-deqxgijpmj] {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--green-deep);
    margin-bottom: 1.1rem;
}

/* Decoy field for the honeypot check.

   Deliberately NOT display:none, visibility:hidden, or type="hidden" — scrapers skip
   all three, which would leave the trap looking correct while doing nothing. Moving it
   off the canvas keeps it readable to anything walking the DOM while no sighted user
   can reach it; tabindex="-1" and aria-hidden cover keyboard and screen-reader users. */
.ri-hp[b-deqxgijpmj] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
/* /Components/SubscribeDialog.razor.rz.scp.css */
/* The footer trigger — reads as a link, sits in the footer's quiet register. */
.sd-open[b-ahmvhwj7ro] {
    background: none;
    border: none;
    padding: 0.2rem 0.3rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--blue-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.sd-open:hover[b-ahmvhwj7ro] { color: var(--blue); }

.sd-backdrop[b-ahmvhwj7ro] {
    position: fixed;
    inset: 0;
    background: rgba(34, 51, 77, 0.45);
    z-index: 950;
    animation: sd-fade-b-ahmvhwj7ro .18s ease;
}

.sd-dialog[b-ahmvhwj7ro] {
    position: fixed;
    z-index: 960;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 2.5rem));
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.8rem 1.6rem 1.5rem;
    box-shadow: 0 20px 56px rgba(34, 51, 77, .3);
    text-align: left;
    animation: sd-rise-b-ahmvhwj7ro .22s cubic-bezier(.2, .8, .3, 1);
}

.sd-dialog:focus[b-ahmvhwj7ro] { outline: none; }

@keyframes sd-fade-b-ahmvhwj7ro { from { opacity: 0; } to { opacity: 1; } }

@keyframes sd-rise-b-ahmvhwj7ro {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.sd-close[b-ahmvhwj7ro] {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    line-height: 1;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
}

.sd-close:hover[b-ahmvhwj7ro] {
    background: var(--blue-tint);
    color: var(--blue-deep);
}

.sd-mark[b-ahmvhwj7ro] {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    text-align: center;
}

.sd-title[b-ahmvhwj7ro] {
    font-family: 'Lora', Georgia, serif;
    font-size: 1.45rem;
    font-weight: 650;
    margin-bottom: 0.45rem;
    padding-right: 1.5rem;   /* clear of the close button */
}

.sd-lead[b-ahmvhwj7ro] {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 1.1rem;
}

.sd-dialog label[b-ahmvhwj7ro] {
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.sd-dialog input[type="email"][b-ahmvhwj7ro] {
    width: 100%;
    border: 1.5px solid var(--field);
    border-radius: 10px;
    background: #fff;
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
}

.sd-dialog input[type="email"]:focus[b-ahmvhwj7ro] {
    border-color: var(--blue);
    outline: 3px solid rgba(43, 123, 199, .25);
    outline-offset: 0;
}

.sd-error[b-ahmvhwj7ro] {
    color: var(--red);
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 0.45rem;
}

.sd-full[b-ahmvhwj7ro] {
    width: 100%;
    margin-top: 1rem;
}

/* Decoy field for the honeypot check — never display:none, which scrapers skip. See
   PRD 06. */
.sd-hp[b-ahmvhwj7ro] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .sd-dialog[b-ahmvhwj7ro], .sd-backdrop[b-ahmvhwj7ro] { animation: none; }
}
/* /Components/TwentyFourNudge.razor.rz.scp.css */
/* Parked off the right edge and slid in — never a modal, so the puzzle stays usable
   the whole time it is on screen. */
.tfn[b-c9mxsvrl50] {
    position: fixed;
    right: 0;
    bottom: 5.5rem;      /* clear of the "Report an issue" button */
    z-index: 800;
    width: min(300px, calc(100vw - 2rem));
    background: var(--card);
    border: 1px solid var(--line);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: -6px 8px 28px rgba(34, 51, 77, .16);
    padding: 1.1rem 1.25rem 1.25rem;

    /* The "fan": it swings in from behind the edge rather than sliding flat, which
       reads as a card being dealt onto the page — the same gesture as the game. */
    transform: translateX(100%) rotate(2.5deg);
    transform-origin: bottom right;
    opacity: 0;
    visibility: hidden;
    transition: transform .38s cubic-bezier(.2, .9, .3, 1.05),
                opacity .28s ease,
                visibility .38s;
}

.tfn-in[b-c9mxsvrl50] {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
    visibility: visible;
}

.tfn-close[b-c9mxsvrl50] {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 0.85rem;
    color: var(--ink-soft);
    cursor: pointer;
    line-height: 1;
    padding: 0.35rem 0.45rem;
    border-radius: 6px;
}

.tfn-close:hover[b-c9mxsvrl50] {
    background: var(--blue-tint);
    color: var(--blue-deep);
}

.tfn-kicker[b-c9mxsvrl50] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 0.15rem;
}

.tfn-title[b-c9mxsvrl50] {
    font-family: 'Lora', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 650;
    margin-bottom: 0.4rem;
}

.tfn-body[b-c9mxsvrl50] {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-bottom: 0.9rem;
}

.tfn-go[b-c9mxsvrl50] {
    display: block;
    text-align: center;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.97rem;
    color: var(--blue-deep);
    background: var(--blue-tint);
    text-decoration: none;
    transition: background-color .15s ease;
}

.tfn-go:hover[b-c9mxsvrl50] { background: var(--blue-tint-hover); }

/* On a phone it spans the width and comes up from the bottom instead — a card
   hanging off the right edge of a 375px screen would cover the answer box. */
@media (max-width: 560px) {
    .tfn[b-c9mxsvrl50] {
        right: 0.6rem;
        left: 0.6rem;
        bottom: 4.5rem;
        width: auto;
        border-right: 1px solid var(--line);
        border-radius: var(--radius);
        transform: translateY(120%) rotate(0deg);
    }

    .tfn-in[b-c9mxsvrl50] { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tfn[b-c9mxsvrl50] { transition: opacity .2s ease, visibility .2s; transform: none; }
    .tfn-in[b-c9mxsvrl50] { transform: none; }
}