/* /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;
}

/* A visitor's credit, at the foot of the question card. Quiet, like the note above the
   question. Its first line, with the gap above it, is as tall as a line of the question (1.86rem),
   so QuestionLines counts it as one and a laptop's picture gives way to it. */
.cv-credit[b-y5w5ogpzig] {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--ink-soft);
    /* A name with no spaces, such as a web address, would otherwise run past the card and
       scroll a phone's page sideways. */
    overflow-wrap: anywhere;
}

.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;
}

/* ------------------------------------------------------------ two columns --- */

/* On a laptop the question and its picture sit to the left of the answer box,
   so the whole challenge fits one screen (PRD 09, "Fitting on one screen"). Stacked,
   the picture pushed the page about 350px past a 15-inch laptop's window. The width
   comes from the layout's .oad-measure-split, which widens at the same 1100px. */
@media (min-width: 1100px) {
    .cv[b-y5w5ogpzig] {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        column-gap: 1.25rem;
        align-items: start;
    }

    /* The picture takes what the question leaves: the window, less the rest of the page
       (377px, measured, plus a few to spare), less the question's lines at 1.86rem each
       (--q-lines, from the component). A short question's picture is its usual size; the
       longest go down to 140px tall, which fits every question on a 790px-tall window. */
    .cv-image[b-y5w5ogpzig] {
        max-height: clamp(140px, calc(100vh - 384px - var(--q-lines, 1) * 1.86rem), 340px);
        margin-inline: auto;
    }
}

/* ------------------------------------------------------------- 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] {
    display: block;
    height: 96px;
    width: auto;
    margin: 0 auto 0.6rem;
}

.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;
}

/* The duck on its stump (PRD 09). 40px is as tall as it can go without making the header
   taller: the section pills beside it are 40.8px. */
.oad-mark[b-6by5iepybf] {
    height: 40px;
    width: auto;
    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,
.oad-menu-action[b-6by5iepybf] {
    display: block;
    padding: 0.75rem 0.85rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.02rem;
    border-radius: 8px;
    min-height: 44px;
}

/* An action, not a place: a button, in the soft ink of the floating one. */
.oad-menu-action[b-6by5iepybf] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
    color: var(--ink-soft);
    cursor: pointer;
}

.oad-menu-panel[b-6by5iepybf]  a:hover,
.oad-menu-action:hover[b-6by5iepybf] {
    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. The floating
   report button's wide-screens-only rule (ReportIssue.razor.css) uses the same width. */
@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);
}

/* The duck, at the size of the words around it. */
.oad-footer-mark[b-6by5iepybf] {
    height: 1.3em;
    width: auto;
    vertical-align: -0.3em;
}

/* 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/MetricsPanel.razor.rz.scp.css */
.mx[b-4by61c6tir] {
    display: grid;
    gap: 1.25rem;
}

.mx-top[b-4by61c6tir] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.mx-fresh[b-4by61c6tir] {
    margin: 0;
    max-width: 60ch;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.mx-fresh code[b-4by61c6tir] {
    font-size: 0.85em;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0 0.3rem;
    white-space: nowrap;
}

.mx-range[b-4by61c6tir] {
    display: inline-flex;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
}

.mx-range-btn[b-4by61c6tir] {
    border: 0;
    background: none;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
}

.mx-range-btn:hover[b-4by61c6tir] { color: var(--ink); }

.mx-range-on[b-4by61c6tir] {
    background: var(--blue-tint);
    color: var(--blue-deep);
}

.mx-note[b-4by61c6tir],
.mx-lead[b-4by61c6tir] {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
    max-width: 75ch;
}

.mx-section[b-4by61c6tir] {
    display: grid;
    gap: 0.6rem;
    min-width: 0;
}

.mx-section h3[b-4by61c6tir] {
    margin: 0;
    font-size: 1.1rem;
}

.mx-tiles[b-4by61c6tir] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.6rem;
}

.mx-tile[b-4by61c6tir] {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.mx-tile-label[b-4by61c6tir] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.mx-tile-value[b-4by61c6tir] {
    font-size: 1.05rem;
}

.mx-scroll[b-4by61c6tir] {
    overflow-x: auto;
}

.mx-table[b-4by61c6tir] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.mx-table th[b-4by61c6tir],
.mx-table td[b-4by61c6tir] {
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.mx-table th[b-4by61c6tir] {
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.mx-num[b-4by61c6tir] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mx-date[b-4by61c6tir] {
    white-space: nowrap;
}

.mx-question[b-4by61c6tir] {
    min-width: 16rem;
}

.mx-share[b-4by61c6tir] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mx-count[b-4by61c6tir],
.mx-sub[b-4by61c6tir],
.mx-muted[b-4by61c6tir] {
    color: var(--ink-soft);
    font-size: 0.85em;
}

.mx-few[b-4by61c6tir] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--gold-tint);
    color: var(--amber);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.mx-bar-row[b-4by61c6tir] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.mx-bar[b-4by61c6tir] {
    display: inline-block;
    width: 80px;
    height: 8px;
    border-radius: 999px;
    background: var(--blue-tint);
    overflow: hidden;
    flex: none;
}

.mx-bar-fill[b-4by61c6tir] {
    display: block;
    height: 100%;
    background: var(--blue);
}

.mx-spread[b-4by61c6tir] {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    height: 2.4rem;
}

.mx-spread-col[b-4by61c6tir] {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    width: 1.4rem;
    height: 100%;
}

.mx-spread-bar[b-4by61c6tir] {
    align-self: end;
    width: 100%;
    min-height: 1px;
    background: var(--green);
    border-radius: 3px 3px 0 0;
}

.mx-spread-n[b-4by61c6tir] {
    font-size: 0.72rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.mx-pair[b-4by61c6tir] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.mx-facts[b-4by61c6tir] {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 0.3rem 1.5rem;
    margin: 0;
}

.mx-facts dt[b-4by61c6tir] { color: var(--ink-soft); }
.mx-facts dd[b-4by61c6tir] { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.mx-empty[b-4by61c6tir] {
    margin: 0;
    color: var(--ink-soft);
}
/* /Components/Pages/About.razor.rz.scp.css */
/* The mascot beside the opening paragraph (PRD 09). Floated, so the words wrap round it
   rather than waiting below a picture; flow-root keeps it inside the box. */
.about-body[b-x2tsopfb8x] {
    display: flow-root;
}

.about-mascot[b-x2tsopfb8x] {
    float: right;
    width: 140px;
    height: auto;
    margin: 0.2rem 0 0.75rem 1.25rem;
}

@media (max-width: 560px) {
    .about-mascot[b-x2tsopfb8x] {
        width: 96px;
        margin-left: 0.9rem;
    }
}

/* 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;
}

/* Difficulty beside the name to credit; stacked on a phone. */
.oad-contact-row[b-0sgqhhundz] {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    column-gap: 1rem;
}

@media (max-width: 480px) {
    .oad-contact-row[b-0sgqhhundz] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.oad-contact-optional[b-0sgqhhundz] {
    font-weight: 400;
    color: var(--ink-soft);
}

.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],
.tf-impossible[b-fctcr00qu9] {
    margin-top: 0.5rem;
}

/* "How to play": a laptop's way to the rules it folds (see the markup, and the laptop section
   at the end). Plain underlined text, not a button's box, so it reads as part of the rules. */
.tf-how[b-fctcr00qu9] {
    display: none;
    margin-top: 0.5rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--blue-deep);
    font-weight: 700;
    font-size: 0.97rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.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; }
}

.tf-run[b-fctcr00qu9] {
    margin: 0.9rem 0 0;
    text-align: center;
    font-size: 0.94rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

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

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

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

/* --- keypad ------------------------------------------------------------- */

/* Numbers on top, symbols below, ⌫ across the last two columns: four columns
   fit a 320px phone with every key at least 44px wide. */
.tf-keypad[b-fctcr00qu9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.tf-key[b-fctcr00qu9] {
    min-height: 48px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    /* Two quick taps on the same key would otherwise zoom the page. */
    touch-action: manipulation;
    transition: background-color .1s ease, border-color .1s ease, opacity .18s ease;
}

/* In the cards' face, so the numbers read as the hand rather than a calculator.
   Plain ink, not the cards' suit colours: duplicates are spent left to right, so
   tapping a red 3 can fade the black one — harmless, but not if the colours
   make the swap look like a mistake. */
.tf-key-number[b-fctcr00qu9] {
    font-family: 'Lora', Georgia, serif;
    font-size: 1.4rem;
}

.tf-key-symbol[b-fctcr00qu9],
.tf-key-delete[b-fctcr00qu9] {
    background: var(--paper);
    color: var(--ink-soft);
}

.tf-key-delete[b-fctcr00qu9] {
    grid-column: span 2;
}

.tf-key:active:not(:disabled)[b-fctcr00qu9] {
    background: var(--blue-tint);
    border-color: var(--blue);
    color: var(--blue-deep);
}

/* A spent number fades like its card. */
.tf-key:disabled[b-fctcr00qu9] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Where there's a mouse there's a keyboard, and the keypad would only be clutter.
   Asked this way round so a device that answers neither still gets the keypad. */
@media (hover: hover) and (pointer: fine) {
    .tf-keypad[b-fctcr00qu9] { display: none; }
}

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

/* On a phone the three don't fit at their usual size, and Pass wrapped onto a line of its
   own. One row of smaller buttons instead, down to a 320px screen. Each starts at its own
   text's width and they share what's left, so "Impossible" gets the room it needs: three
   equal columns left it spilling out of its button at 320px. */
@media (max-width: 480px) {
    .tf-buttons[b-fctcr00qu9] {
        flex-wrap: nowrap;
        gap: 0.4rem;
    }

    .tf-buttons > button[b-fctcr00qu9] {
        flex: 1 1 auto;
        min-height: 44px;
        padding: 0.5rem 0.4rem;
        font-size: 0.88rem;
    }
}

/* Impossible and Pass: the two ways out of a hand, both quieter than Submit. */
.tf-call[b-fctcr00qu9],
.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-call:hover:not(:disabled)[b-fctcr00qu9],
.tf-pass:hover:not(:disabled)[b-fctcr00qu9] {
    border-color: var(--ink-soft);
}

.tf-call:disabled[b-fctcr00qu9],
.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;
}

/* The laptop's way to the next hand, in the answer box where the three buttons were. */
.tf-next-here[b-fctcr00qu9] {
    display: none;
    margin-top: 1rem;
}

/* 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;
}

/* Where the keypad shows: no mouse, so no keyboard and no space bar. */
@media (hover: none), (pointer: coarse) {
    .tf-next-hint[b-fctcr00qu9] { display: none; }
}

/* --- the board --------------------------------------------------------- */

.tf-board h2[b-fctcr00qu9] {
    margin-bottom: 0.25rem;
}

/* Folded, the title is all there is: no gap under it. */
.tf-board-closed h2[b-fctcr00qu9] {
    margin-bottom: 0;
}

/* The whole title row folds and opens the board, the chevron at its far end saying which way. */
.tf-board-toggle[b-fctcr00qu9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
}

/* Points up while the board is open, down once it's folded. */
.tf-chevron[b-fctcr00qu9] {
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    margin: 0.25rem 0.3rem 0 0;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: rotate(-135deg);
    transition: transform 0.15s ease;
}

.tf-board-closed .tf-chevron[b-fctcr00qu9] {
    margin-top: -0.25rem;
    transform: rotate(45deg);
}

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

.tf-board-note[b-fctcr00qu9] {
    margin: 0 0 1rem;
    color: var(--ink-soft);
    font-size: 0.97rem;
}

/* Today beside All time, stacked where two won't fit. */
.tf-board-lists[b-fctcr00qu9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem 1.5rem;
}

.tf-board-list h3[b-fctcr00qu9] {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.tf-board-list ol[b-fctcr00qu9] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tf-row[b-fctcr00qu9] {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}

.tf-row:last-child[b-fctcr00qu9] {
    border-bottom: none;
}

.tf-row-you[b-fctcr00qu9] {
    background: var(--blue-tint);
    border-radius: 8px;
    color: var(--blue-deep);
    font-weight: 700;
}

.tf-place[b-fctcr00qu9] {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.tf-row-you .tf-place[b-fctcr00qu9] {
    color: inherit;
}

.tf-name[b-fctcr00qu9] {
    overflow-wrap: anywhere;
}

.tf-length[b-fctcr00qu9] {
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
}

.tf-board-empty[b-fctcr00qu9] {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.94rem;
}

/* --- on a laptop -------------------------------------------------------- */

/* Two columns from 1100px, like today's challenge and yesterday's solution, so the page fits a
   laptop's window (PRD 09, "Fitting on one screen"): the game on the left, the board on the
   right. Moving the board alone wasn't enough. The narrower column made the rules wrap onto
   more lines, and the answer box fell below the fold, so the rules marked tf-more fold under
   "How to play", and a finished hand is dealt from the answer box rather than a box of its own.
   The markup keeps the phone's order; the grid places each part. The last row soaks up the
   board's extra height, so the left column stays packed at the top. The width comes from the
   layout's .oad-measure-split, which widens at the same 1100px. */
@media (min-width: 1100px) {
    .tf-page[b-fctcr00qu9] {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto auto 1fr;
        column-gap: 1.25rem;
        align-items: start;
    }

    .tf-page > *[b-fctcr00qu9] {
        grid-column: 1;
    }

    .tf-page > .oad-banner[b-fctcr00qu9] {
        grid-column: 1 / -1;
    }

    .tf-page > .tf-board[b-fctcr00qu9] {
        grid-column: 2;
        grid-row: 2 / -1;
    }

    .tf-how[b-fctcr00qu9] {
        display: inline-block;
    }

    .tf-rules-box:not(.tf-rules-open) .tf-more[b-fctcr00qu9] {
        display: none;
    }

    /* Folded, "How to play" ends the last line showing rather than taking a line of its own. */
    .tf-rules-box:not(.tf-rules-open) .tf-impossible:not(.tf-more)[b-fctcr00qu9] {
        display: inline;
    }

    .tf-rules-box:not(.tf-rules-open) .tf-how[b-fctcr00qu9] {
        margin: 0 0 0 0.35rem;
    }

    .tf-buttons-over[b-fctcr00qu9],
    .tf-next-box[b-fctcr00qu9] {
        display: none;
    }

    /* One row, like the three buttons it stands in for, with the space bar beside it. */
    .tf-next-here[b-fctcr00qu9] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .tf-next-here .tf-next[b-fctcr00qu9] {
        width: auto;
    }

    .tf-next-here .tf-next-hint[b-fctcr00qu9] {
        margin: 0;
    }

    /* Today beside All time even in this narrower column: stacked, the board is twice as tall
       as the window. */
    .tf-board-lists[b-fctcr00qu9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.25rem;
    }
}
/* /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;
    /* Back to what the page allows, which is nothing: this page can't be copied (PRD 01).
       "auto" here made the revealed solution selectable again, in Chrome at least. */
    user-select: inherit;
    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;
}

/* --- two columns ------------------------------------------------------- */

/* On a laptop the question and its picture sit on the left; the spoiler warning, the solution it
   warns about and the way back on the right, so the page fits one screen (PRD 09, "Fitting on
   one screen"). The markup keeps the phone's order, warning first; the grid places each part.
   The last row soaks up the question's extra height, so the right column stays packed at the
   top. The width comes from the layout's .oad-measure-split, which widens at the same 1100px. */
@media (min-width: 1100px) {
    .ys-split[b-kqdvtvggsc] {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto auto 1fr;
        column-gap: 1.25rem;
        align-items: start;
    }

    .ys-split > .oad-banner[b-kqdvtvggsc] {
        grid-column: 1 / -1;
    }

    .ys-question[b-kqdvtvggsc] {
        grid-column: 1;
        grid-row: 2 / -1;
    }

    .ys-spoiler-warning[b-kqdvtvggsc],
    .ys-solution[b-kqdvtvggsc],
    .ys-back[b-kqdvtvggsc] {
        grid-column: 2;
    }

    .ys-back[b-kqdvtvggsc] {
        justify-self: start;
    }

    /* As on today's challenge: the picture takes what the question leaves, the window less the
       rest of the page (401px, measured while a hint bar still sat under the picture; it has
       since gone, so there's room to spare) and the question's lines (--q-lines, at
       1.15rem × 1.65 each, rounded up to 1.9rem). Never under 140px, never over its usual size. */
    .ys-image[b-kqdvtvggsc] {
        max-height: clamp(140px, calc(100vh - 408px - var(--q-lines, 1) * 1.9rem), 320px);
        margin-inline: auto;
    }
}

.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);
}

/* Drawn, not an emoji, so it takes the button's colour and turns blue with it on hover. */
.ri-fab-icon[b-deqxgijpmj] {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

/* Off the challenge, wide screens only: at 900px and below the menu is the hamburger, which
   has the entry. MainLayout's breakpoint — change both together. */
@media (max-width: 900px) {
    .ri-fab-wide-only[b-deqxgijpmj] {
        display: none;
    }
}

/* 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);
}

/* It takes the focus on opening only so the menu closes and a keyboard starts inside it;
   a ring round the whole dialog would mark nothing the dialog doesn't already. */
.ri-modal:focus[b-deqxgijpmj] {
    outline: none;
}

.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;
}

/* The categories: one row each, the whole row tappable, the text free to wrap. */
.ri-categories[b-deqxgijpmj] {
    border: none;
    margin: 0 0 1.1rem;
    padding: 0;
    /* A fieldset is as wide as its longest line by default, which is the very
       cut-off this list replaced. */
    min-width: 0;
}

.ri-categories legend[b-deqxgijpmj] {
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0;
    margin-bottom: 0.4rem;
}

.ri-choice[b-deqxgijpmj] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.65rem 0.8rem;
    min-height: 44px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.ri-choice + .ri-choice[b-deqxgijpmj] {
    margin-top: 0.45rem;
}

.ri-choice input[b-deqxgijpmj] {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.17rem 0 0;
    accent-color: var(--blue);
    cursor: pointer;
}

.ri-choice:has(input:checked)[b-deqxgijpmj] {
    border-color: var(--blue);
    background: var(--blue-tint);
}

.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/ScratchPad.razor.rz.scp.css */
/* The scratch pad, bottom left: the mirror of "Report an issue", bottom right, and clear of
   the Twenty Four nudge, which comes in from the right (PRD 09). The pad opens above its
   button, with no backdrop — the question has to stay in view while you work on it. */

.sp-launcher[b-3bfa6wgw3g] {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 850;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    padding: 0;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(34, 51, 77, .14);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.sp-launcher:hover[b-3bfa6wgw3g],
.sp[data-open] .sp-launcher[b-3bfa6wgw3g] {
    border-color: var(--blue);
}

.sp[data-open] .sp-launcher[b-3bfa6wgw3g] {
    background: var(--blue-tint);
}

/* The word under the button: an icon alone doesn't say what it opens (PRD 01). It hangs in the
   gap below the button, so nothing moves to make room, on a phone as much as a computer. */
.sp-caption[b-3bfa6wgw3g] {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--ink-soft);
}

.sp-launcher:hover .sp-caption[b-3bfa6wgw3g],
.sp[data-open] .sp-caption[b-3bfa6wgw3g] {
    color: var(--blue-deep);
}

/* Shown by the script, which sets data-open; Blazor never touches that attribute. */
.sp-panel[b-3bfa6wgw3g] {
    display: none;
    position: fixed;
    left: 1.25rem;
    bottom: calc(1.25rem + 52px + 0.6rem);
    z-index: 850;
    width: min(360px, calc(100vw - 2.5rem));
    padding: 0.6rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 16px 44px rgba(34, 51, 77, .22);
    user-select: none;
    -webkit-user-select: none;
}

.sp[data-open] .sp-panel[b-3bfa6wgw3g] {
    display: block;
}

/* Four tools sharing the row equally, then ✕: on a 320px phone each is still a thumb wide. */
.sp-tools[b-3bfa6wgw3g] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 44px;
    gap: 0.3rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sp-tool[b-3bfa6wgw3g] {
    min-height: 44px;
    padding: 0 0.3rem;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    /* Quick taps on Undo would otherwise zoom the page. */
    touch-action: manipulation;
}

.sp-tool[aria-pressed="true"][b-3bfa6wgw3g] {
    background: var(--blue-tint);
    border-color: var(--blue);
    color: var(--blue-deep);
}

/* The smallest phones: "Eraser" still fits its quarter of the row. */
@media (max-width: 360px) {
    .sp-tool[b-3bfa6wgw3g] {
        font-size: 0.84rem;
    }
}

.sp-close[b-3bfa6wgw3g] {
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

.sp-close:hover[b-3bfa6wgw3g] {
    background: var(--blue-tint);
    color: var(--blue-deep);
}

.sp-sheet[b-3bfa6wgw3g] {
    position: relative;
}

/* The eraser's reach, while the eraser is picked. Its edge is the edge of what it wipes:
   the border is inside the size, and the white inner line keeps it visible over ink. */
.sp-ring[b-3bfa6wgw3g] {
    display: none;
    position: absolute;
    box-sizing: border-box;
    border: 1.5px solid var(--ink-soft);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.sp[data-tool="eraser"] .sp-ring[b-3bfa6wgw3g] {
    display: block;
}

/* With a mouse, the ring is the cursor. */
.sp[data-tool="eraser"] .sp-canvas[b-3bfa6wgw3g] {
    cursor: none;
}

/* A finger on the pad draws instead of scrolling the page. Short enough to leave room to
   scroll past it, a phone held sideways included. */
.sp-canvas[b-3bfa6wgw3g] {
    display: block;
    width: 100%;
    height: min(240px, 40vh);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    touch-action: none;
    cursor: crosshair;
}
/* /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-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; }
}