@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Dashboard/CoachConsole.razor.rz.scp.css */
/* CoachConsole (Dashboard Overhaul #6105). One unified coach card: the coach's
   read (focus picks / next step), the embedded plan, and the chip + free-text
   ask surface that deep-links into the study-plan thread. */

.cc-section-label[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* #7543 - was rgba(255,255,255,0.45): 4.48:1 measured by axe. */
    color: var(--ascend-text-muted);
    margin: 0.5rem 0 0.4rem;
}

/* #6162-adjacent fix — the "Full plan" header link lives in this component but the
   same class is used by Dashboard.razor, and scoped CSS doesn't cross the component
   boundary. The rule now lives in wwwroot/app.css as shared vocabulary (#6347), so
   both surfaces get one definition instead of two drifted copies. */

.cc-plan-label[b-bqd0pjpu7w] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1rem;
}

.cc-plan-day[b-bqd0pjpu7w] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(49, 221, 227, 0.7);
}

/* Coach-surfaced insight (tilt, Epic C) */
.cc-insight[b-bqd0pjpu7w] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 12px;
    background: rgba(184, 133, 54, 0.06);
}

.cc-insight-alert[b-bqd0pjpu7w] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.08);
}

.cc-insight-icon[b-bqd0pjpu7w] {
    color: #B88536;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.cc-insight-alert .cc-insight-icon[b-bqd0pjpu7w] { color: #f87171; }

.cc-insight-body[b-bqd0pjpu7w] { flex: 1; min-width: 0; }

.cc-insight-text[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    line-height: 1.45;
}

.cc-insight-link[b-bqd0pjpu7w] {
    display: inline-block;
    margin-top: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: #31DDE3;
    text-decoration: none;
}

.cc-insight-link:hover[b-bqd0pjpu7w] { text-decoration: underline; }

/* Cross-surface diagnosis (#986) — the coach's single most important Read,
   the same verdict shown on the Progress tab. */
.cc-topread[b-bqd0pjpu7w] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-left: 3px solid #31DDE3;
    border-radius: 12px;
    /* #7543 - flat tint. This and the two sibling panels (.cc-insight-alert,
       .cc-focus) were tint-to-navy gradients; axe-core cannot measure text
       over a gradient, so .cc-topread-text and .cc-topread-action were
       undecidable. Over the now-opaque card, the flat tint reads the same. */
    background: rgba(49, 221, 227, 0.07);
}

.cc-topread-icon[b-bqd0pjpu7w] {
    color: #31DDE3;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.cc-topread-body[b-bqd0pjpu7w] { flex: 1; min-width: 0; }

.cc-topread-text[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    line-height: 1.5;
}

.cc-topread-assoc[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.35rem 0 0;
}

.cc-topread-action[b-bqd0pjpu7w] {
    display: inline-block;
    margin-top: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    color: #31DDE3;
    text-decoration: none;
}

.cc-topread-action:hover[b-bqd0pjpu7w] { text-decoration: underline; }

/* #6108 — focus-area progress: the one trend for what they're working on.
   Direction tints the accent honestly (green up / red down / neutral hold). */
.cc-focus[b-bqd0pjpu7w] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.cc-focus-improving[b-bqd0pjpu7w] { border-left-color: #10b981; }
.cc-focus-worsening[b-bqd0pjpu7w] { border-left-color: #f87171; }
.cc-focus-holding[b-bqd0pjpu7w] { border-left-color: rgba(255, 255, 255, 0.35); }
.cc-focus-cannot-tell[b-bqd0pjpu7w] { border-left-color: rgba(255, 255, 255, 0.35); }
.cc-focus-new[b-bqd0pjpu7w] { border-left-color: rgba(255, 255, 255, 0.35); }
.cc-focus-withheld[b-bqd0pjpu7w] { border-left-color: rgba(255, 255, 255, 0.35); }

.cc-focus-icon[b-bqd0pjpu7w] { font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; color: rgba(255, 255, 255, 0.7); }
.cc-focus-improving .cc-focus-icon[b-bqd0pjpu7w] { color: #10b981; }
.cc-focus-worsening .cc-focus-icon[b-bqd0pjpu7w] { color: #f87171; }

.cc-focus-body[b-bqd0pjpu7w] { flex: 1; min-width: 0; }

.cc-focus-head[b-bqd0pjpu7w] { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }

.cc-focus-label[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
}

.cc-focus-trend[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.cc-focus-improving .cc-focus-trend[b-bqd0pjpu7w] { color: #10b981; }
.cc-focus-worsening .cc-focus-trend[b-bqd0pjpu7w] { color: #f87171; }

.cc-focus-name[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0.15rem 0 0;
}

.cc-focus-detail[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.3rem 0 0;
    line-height: 1.45;
}

.cc-focus-link[b-bqd0pjpu7w] {
    display: inline-block;
    margin-top: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    color: #31DDE3;
    text-decoration: none;
}

.cc-focus-link:hover[b-bqd0pjpu7w] { text-decoration: underline; }

/* Coach picks / next step */
.cc-picks[b-bqd0pjpu7w] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cc-pick[b-bqd0pjpu7w], .cc-next-step[b-bqd0pjpu7w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(49, 221, 227, 0.18);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.04);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cc-pick:hover[b-bqd0pjpu7w], .cc-next-step:hover[b-bqd0pjpu7w] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
}

.cc-pick-icon[b-bqd0pjpu7w] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(49, 221, 227, 0.1);
    color: #31DDE3;
    font-size: 1rem;
}

/* #7037 - the extra connect actions under the next-step card. Deliberately
   quieter than .cc-next-step: the primary action stays the one destination the
   card leads with, and these are the alternatives. */
.cc-next-step-more[b-bqd0pjpu7w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cc-next-step-more-link[b-bqd0pjpu7w] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: var(--ascend-accent);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cc-next-step-more-link:hover[b-bqd0pjpu7w] {
    border-color: var(--ascend-accent);
    background: color-mix(in srgb, var(--ascend-accent) 8%, transparent);
}

.cc-pick-body[b-bqd0pjpu7w] {
    flex: 1;
    min-width: 0;
}

.cc-pick-title-row[b-bqd0pjpu7w] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.cc-pick-title[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.cc-pick-duration[b-bqd0pjpu7w] {
    font-size: 0.7rem;
    /* #7543 - was rgba(255,255,255,0.35): 3.18:1 on the now-opaque card. */
    color: var(--ascend-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.cc-pick-rationale[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.15rem 0 0;
    line-height: 1.4;
}

.cc-pick-arrow[b-bqd0pjpu7w] {
    /* #7543 - was rgba(49,221,227,0.5): 3.50:1 on the now-opaque card. */
    color: var(--ascend-accent);
    flex-shrink: 0;
}

/* Active coaching jobs */
.cc-jobs[b-bqd0pjpu7w] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.75rem;
}

.cc-job[b-bqd0pjpu7w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

.cc-job-icon[b-bqd0pjpu7w] { color: #B88536; }
.cc-job-title[b-bqd0pjpu7w] { font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.cc-job-status[b-bqd0pjpu7w] { color: rgba(255, 255, 255, 0.4); margin-left: auto; }

.cc-plan-message[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.5rem 0;
}

.cc-plan-cta[b-bqd0pjpu7w] {
    color: #31DDE3;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cc-plan-cta:hover[b-bqd0pjpu7w] { text-decoration: underline; }

/* Empty state */
.cc-empty[b-bqd0pjpu7w] {
    text-align: center;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.cc-empty > i[b-bqd0pjpu7w] {
    font-size: 1.6rem;
    color: rgba(49, 221, 227, 0.6);
}

.cc-empty p[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.cc-empty-cta[b-bqd0pjpu7w] {
    display: inline-block;
    font-size: 0.8rem;
    color: #31DDE3;
    text-decoration: none;
}

.cc-empty-cta:hover[b-bqd0pjpu7w] { text-decoration: underline; }

/* Ask surface (1c) */
.cc-ask[b-bqd0pjpu7w] {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cc-chips[b-bqd0pjpu7w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.cc-chip[b-bqd0pjpu7w] {
    padding: 0.35rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 20px;
    background: rgba(49, 221, 227, 0.06);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.15s;
}

.cc-chip:hover[b-bqd0pjpu7w] {
    border-color: #31DDE3;
    color: #31DDE3;
}

.cc-ask-row[b-bqd0pjpu7w] {
    display: flex;
    gap: 0.4rem;
}

.cc-ask-input[b-bqd0pjpu7w] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #fff;
}

.cc-ask-input:focus[b-bqd0pjpu7w] { outline: none; border-color: rgba(49, 221, 227, 0.5); }
/* #7543 - was rgba(255,255,255,0.3): 2.69:1 on the now-opaque card. */
.cc-ask-input[b-bqd0pjpu7w]::placeholder { color: var(--ascend-text-muted); }

.cc-ask-send[b-bqd0pjpu7w] {
    flex-shrink: 0;
    width: 40px;
    border: none;
    border-radius: 12px;
    background: #31DDE3;
    color: #0a1628;
    cursor: pointer;
    font-size: 0.9rem;
}

.cc-ask-send:disabled[b-bqd0pjpu7w] {
    background: rgba(255, 255, 255, 0.1);
    /* #7543 - was rgba(255,255,255,0.3): 2.60:1. */
    color: var(--ascend-text-muted);
    cursor: default;
}

.cc-ask-hint[b-bqd0pjpu7w] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    /* #7543 - was rgba(255,255,255,0.35): 3.21:1 measured by axe once the card
       became measurable. The secondary token is the quiet-but-AA grey. */
    color: var(--ascend-text-secondary);
    margin: 0.4rem 0 0;
}


/* #7736 — the coach console's suggestion chips (30px) and the send button
   (40x36). .cc-empty-cta and .cc-plan-cta are NOT here: both are inline text
   links inside a sentence and are recorded exceptions under WCAG 2.5.8. */
@media (hover: none) and (pointer: coarse) {
    .cc-chip[b-bqd0pjpu7w] {
        min-height: var(--touch-target);
    }

    .cc-ask-send[b-bqd0pjpu7w] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}


/* #7736 follow-on — .cc-topread-action, measured 112x20 by CI (build 10882)
   and unregistered.

   IT IS NOT AN INLINE TEXT LINK, so it does not get the exception its two
   neighbors in the register carry. .cc-empty-cta and .cc-plan-cta sit INSIDE
   a sentence, where padding out to 44px forces the line box open - that is the
   WCAG 2.2 AA 2.5.8 "in a sentence or block of text" exemption and it is real.
   This one is a standalone call to action on its own line under the Read, with
   a trailing arrow icon and nothing beside it. It is the shape 2.5.8 is aimed
   at, and there is clear space to grow into.

   Two floors, the same two the sweep established: 20px fails 2.5.8's 24px
   minimum on a MOUSE as well, so that half is unconditional. inline-flex
   rather than the inherited inline-block because a min-height on an
   inline-block box pins the text to the top and leaves dead space under it.

   Only e2e@ascendchess.com rendered it: the Top Read block is `@if
   (Brief?.TopRead is { } topRead)` and the demo account has no TopRead, so the
   sweep that measured this page never met the control. */
.cc-topread-action[b-bqd0pjpu7w] {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}

@media (hover: none) and (pointer: coarse) {
    .cc-topread-action[b-bqd0pjpu7w] {
        min-height: var(--touch-target);
    }
}
/* /Components/Dashboard/CoachMessageToday.razor.rz.scp.css */
/* #8093 ONE-THREAD - the coach's latest message on the student's Today, with Reply inline.
   A plain bordered block: no trophy, no animation. */
.cmt-card[b-afc20qh3tm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    /* A solid surface, so text contrast on it is decidable (a gradient is not). */
    background: var(--ascend-bg-card);
    border: 1px solid rgba(184, 133, 54, 0.35);
    min-width: 0;
    /* Its own full row of the dashboard grid at every width. */
    grid-column: 1 / -1;
}

.cmt-head[b-afc20qh3tm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.cmt-from[b-afc20qh3tm] {
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ascend-secondary-light);
    overflow-wrap: anywhere;
    min-width: 0;
}

.cmt-time[b-afc20qh3tm],
.cmt-about[b-afc20qh3tm] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ascend-text-muted);
    overflow-wrap: anywhere;
}

/* The coach's words. A long message is CLAMPED to six lines so the card stays "near the
   top" without pushing the rest of Today away; the whole message is one tap away in the
   conversation. Clamped, never scrollable: a capped scroller here was a nested scroll region
   with nothing focusable in it (axe scrollable-region-focusable) and a scroll trap inside the
   page's own scroll on a phone. CoachMessageTodayBodyContractTests pins it. */
.cmt-body[b-afc20qh3tm] {
    margin: 0;
    color: var(--ascend-text-light);
    font-size: 0.9375rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.cmt-reply[b-afc20qh3tm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.cmt-label[b-afc20qh3tm] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.cmt-input[b-afc20qh3tm] {
    width: 100%;
    box-sizing: border-box;
    min-height: 5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: var(--ascend-bg-card);
    color: var(--ascend-text-light);
    font: inherit;
    /* 16px keeps iOS from zooming the page when the field takes focus. */
    font-size: 1rem;
    resize: vertical;
}

.cmt-input:focus-visible[b-afc20qh3tm] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.cmt-actions[b-afc20qh3tm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.cmt-link[b-afc20qh3tm],
.cmt-more[b-afc20qh3tm] {
    color: var(--ascend-accent);
    font-size: 0.875rem;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.cmt-more[b-afc20qh3tm],
.cmt-earlier[b-afc20qh3tm] {
    align-self: flex-start;
}

/* Several unread messages from the same coach: each is its own paragraph, parted by a rule. */
.cmt-body + .cmt-body[b-afc20qh3tm] {
    padding-top: 0.5rem;
    border-top: 1px solid rgba(184, 133, 54, 0.2);
}

.cmt-error[b-afc20qh3tm] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ascend-error-light);
}

.cmt-sent[b-afc20qh3tm] {
    grid-column: 1 / -1;
    margin: 0 0 1rem;
    padding: 0.625rem 0.875rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.875rem;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

@media (pointer: coarse) {
    .cmt-card[b-afc20qh3tm]  .ascend-btn {
        min-height: 44px;
    }

    /* Links are tap targets too: give them the same 44px row on a phone. */
    .cmt-link[b-afc20qh3tm],
    .cmt-more[b-afc20qh3tm] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}
/* /Components/Dashboard/CoachNudges.razor.rz.scp.css */
/* Coach Bridge nudge rows (PBI #5398; extracted to a shared component #6235) */
.coach-bridge-nudges[b-v84l1vvgu8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.cb-nudge-row[b-v84l1vvgu8] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    column-gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.10), rgba(10, 22, 40, 0.6));
    border: 1px solid rgba(184, 133, 54, 0.35);
}
.cb-nudge-icon[b-v84l1vvgu8] {
    color: #B88536;
    font-size: 1.125rem;
    line-height: 1;
    padding-top: 0.125rem;
}
.cb-nudge-body[b-v84l1vvgu8] { min-width: 0; }
.cb-nudge-head[b-v84l1vvgu8] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.cb-nudge-from[b-v84l1vvgu8] {
    font-weight: 700;
    color: #B88536;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cb-nudge-time[b-v84l1vvgu8] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}
.cb-nudge-text[b-v84l1vvgu8] {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
    font-size: 0.9375rem;
}
.cb-nudge-dismiss[b-v84l1vvgu8] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
}
.cb-nudge-dismiss:hover[b-v84l1vvgu8] {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.05);
}
.cb-nudge-dismiss i[b-v84l1vvgu8] {
    font-size: 1rem;
}
/* /Components/Dashboard/CoachPrompt.razor.rz.scp.css */
.coach-prompt-card[b-v4qaxm3iz2] {
    grid-column: 1 / -1;
}

.coach-header-row[b-v4qaxm3iz2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.coach-icon[b-v4qaxm3iz2] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.2), rgba(49, 221, 227, 0.15));
    border: 2px solid rgba(184, 133, 54, 0.3);
    border-radius: 12px;
    flex-shrink: 0;
}

/* Active Jobs */
.active-jobs[b-v4qaxm3iz2] {
    margin-bottom: 1.25rem;
}

.active-jobs-header[b-v4qaxm3iz2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.active-jobs-label[b-v4qaxm3iz2] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.active-job[b-v4qaxm3iz2] {
    padding: 1rem;
    background: rgba(184, 133, 54, 0.06);
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 12px;
    margin-bottom: 0.75rem;
}

.active-job:last-child[b-v4qaxm3iz2] {
    margin-bottom: 0;
}

.job-info[b-v4qaxm3iz2] {
    margin-bottom: 0.75rem;
}

.job-title[b-v4qaxm3iz2] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: var(--ascend-secondary);
    margin-bottom: 0.25rem;
}

.job-step[b-v4qaxm3iz2] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.825rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.job-progress-bar[b-v4qaxm3iz2] {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.job-progress-fill[b-v4qaxm3iz2] {
    height: 100%;
    background: linear-gradient(90deg, var(--ascend-accent), var(--ascend-secondary));
    border-radius: 2px;
    transition: width 0.4s ease;
}

.job-actions[b-v4qaxm3iz2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.job-continue-btn[b-v4qaxm3iz2] {
    padding: 0.4rem 1.25rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 20px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.job-continue-btn:hover[b-v4qaxm3iz2] {
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transform: translateY(-1px);
    color: #0f172a;
}

.job-abandon-btn[b-v4qaxm3iz2] {
    background: none;
    border: none;
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s;
}

.job-abandon-btn:hover[b-v4qaxm3iz2] {
    color: rgba(239, 68, 68, 0.8);
}

/* Job Selection Grid */
.job-grid[b-v4qaxm3iz2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.job-card[b-v4qaxm3iz2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    color: inherit;
    font: inherit;
}

.job-card:hover:not(.disabled)[b-v4qaxm3iz2] {
    background: rgba(49, 221, 227, 0.06);
    border-color: rgba(49, 221, 227, 0.35);
    transform: translateY(-2px);
}

.job-card.disabled[b-v4qaxm3iz2] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.job-card-icon[b-v4qaxm3iz2] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.1), rgba(184, 133, 54, 0.08));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 14px;
}

.job-card-title[b-v4qaxm3iz2] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

.job-card-description[b-v4qaxm3iz2] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    /* #7543 - was rgba(255,255,255,0.45): 4.41:1 on the now-opaque card. */
    color: var(--ascend-text-muted);
    line-height: 1.4;
}

.coming-soon-badge[b-v4qaxm3iz2] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: var(--ascend-text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .job-grid[b-v4qaxm3iz2] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Dashboard/CoachSessionBriefCard.razor.rz.scp.css */
/* Coach Session Brief — inherits dashboard-card chrome from parent.
   Only defines pick-specific + empty-state styling here. */

/* .sync-btn moved to global app.css (P4 cleanup) */

/* Section label */
.brief-section-label[b-nj8fz4rbrd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #B88536;
    margin: 0.75rem 0 0.6rem;
}

/* Picks list */
.brief-picks[b-nj8fz4rbrd] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.brief-pick[b-nj8fz4rbrd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-left: 3px solid rgba(49, 221, 227, 0.5);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.18s ease;
}

.brief-pick:hover[b-nj8fz4rbrd] {
    background: rgba(49, 221, 227, 0.06);
    border-color: rgba(49, 221, 227, 0.3);
    border-left-color: #31DDE3;
    transform: translateX(2px);
}

/* Source-specific accent colors */
.brief-pick.source-due-review[b-nj8fz4rbrd] { border-left-color: rgba(184, 133, 54, 0.7); }
.brief-pick.source-due-review:hover[b-nj8fz4rbrd] { border-left-color: #B88536; }
.brief-pick.source-weakness[b-nj8fz4rbrd] { border-left-color: rgba(239, 68, 68, 0.6); }
.brief-pick.source-weakness:hover[b-nj8fz4rbrd] { border-left-color: #f87171; }
.brief-pick.source-habit[b-nj8fz4rbrd] { border-left-color: rgba(251, 191, 36, 0.6); }
.brief-pick.source-habit:hover[b-nj8fz4rbrd] { border-left-color: #fbbf24; }

.pick-icon[b-nj8fz4rbrd] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(49, 221, 227, 0.1);
}

.pick-icon[b-nj8fz4rbrd]  i { font-size: 18px; color: var(--ascend-accent); }
.brief-pick.source-due-review .pick-icon[b-nj8fz4rbrd] { background: rgba(184, 133, 54, 0.12); }
/* #7543 - the lighter gold: --ascend-secondary on its own 12% tint over the
   now-opaque card measured 4.46:1, a hair under AA. */
.brief-pick.source-due-review .pick-icon[b-nj8fz4rbrd]  i { color: var(--ascend-secondary-light); }
.brief-pick.source-weakness .pick-icon[b-nj8fz4rbrd] { background: rgba(239, 68, 68, 0.1); }
.brief-pick.source-weakness .pick-icon[b-nj8fz4rbrd]  i { color: #f87171; }
.brief-pick.source-habit .pick-icon[b-nj8fz4rbrd] { background: rgba(251, 191, 36, 0.1); }
.brief-pick.source-habit .pick-icon[b-nj8fz4rbrd]  i { color: #fbbf24; }

.pick-body[b-nj8fz4rbrd] { flex: 1; min-width: 0; }

.pick-title-row[b-nj8fz4rbrd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.2rem;
}

.pick-title[b-nj8fz4rbrd] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.pick-duration[b-nj8fz4rbrd] {
    flex-shrink: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* #7543 - was rgba(255,255,255,0.45): 4.41:1 on the now-opaque card. */
    color: var(--ascend-text-muted);
}

.pick-rationale[b-nj8fz4rbrd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.4;
}

.pick-arrow[b-nj8fz4rbrd] {
    flex-shrink: 0;
    /* #7543 - was rgba(255,255,255,0.3): 2.70:1 on the now-opaque card. */
    color: var(--ascend-text-muted);
    transition: all 0.18s ease;
}
.brief-pick:hover .pick-arrow[b-nj8fz4rbrd] { color: #31DDE3; transform: translateX(2px); }
.pick-arrow[b-nj8fz4rbrd]  i { font-size: 16px; }

/* Plan refresh nudge */
.plan-refresh-nudge[b-nj8fz4rbrd] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.65rem 0.85rem;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 10px;
    margin-top: 0.75rem;
}

.plan-refresh-nudge[b-nj8fz4rbrd]  i {
    font-size: 1rem;
    color: var(--ascend-secondary);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.refresh-content[b-nj8fz4rbrd] { flex: 1; min-width: 0; }

.refresh-message[b-nj8fz4rbrd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    display: block;
    margin-bottom: 0.4rem;
}

.refresh-cta[b-nj8fz4rbrd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    color: #B88536;
    text-decoration: none;
    transition: color 0.15s;
}

.refresh-cta:hover[b-nj8fz4rbrd] { color: #d4a44a; }

/* Override link */
.brief-footer[b-nj8fz4rbrd] { text-align: center; padding-top: 0.5rem; }

.brief-override-link[b-nj8fz4rbrd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    /* #7543 - was rgba(255,255,255,0.4): 3.80:1 on the now-opaque card. */
    color: var(--ascend-text-muted);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    transition: color 0.18s ease;
}
.brief-override-link:hover[b-nj8fz4rbrd] { color: rgba(255, 255, 255, 0.75); }
.brief-override-link[b-nj8fz4rbrd]  i { font-size: 12px; }

/* Empty state */
.brief-empty-state[b-nj8fz4rbrd] { text-align: center; padding: 1.25rem 1rem 0.5rem; }
.brief-empty-state[b-nj8fz4rbrd] >  i { font-size: 40px; color: rgba(49, 221, 227, 0.5); margin-bottom: 0.75rem; }
.brief-empty-state p[b-nj8fz4rbrd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.brief-empty-cta[b-nj8fz4rbrd] {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0a1628;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: all 0.18s ease;
}
.brief-empty-cta:hover[b-nj8fz4rbrd] { box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4); transform: translateY(-1px); }

/* Self-analyze nudge — surfaces unreviewed-game count from the last 7 days */
.self-analyze-nudge[b-nj8fz4rbrd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.08), rgba(10, 22, 40, 0.5));
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.self-analyze-nudge:hover[b-nj8fz4rbrd] {
    border-color: rgba(184, 133, 54, 0.45);
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.12), rgba(10, 22, 40, 0.6));
}
.self-analyze-nudge i[b-nj8fz4rbrd] {
    color: #B88536;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 640px) {
    .brief-pick[b-nj8fz4rbrd] { padding: 0.7rem 0.75rem; gap: 0.65rem; }
    .pick-title[b-nj8fz4rbrd] { font-size: 0.88rem; }
    .pick-rationale[b-nj8fz4rbrd] { font-size: 0.75rem; }
}

/* ── Coach Bridge nudge rows (PBI #5398) ─────────────────────────────── */
.coach-bridge-nudges[b-nj8fz4rbrd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.cb-nudge-row[b-nj8fz4rbrd] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    column-gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.10), rgba(10, 22, 40, 0.6));
    border: 1px solid rgba(184, 133, 54, 0.35);
}
.cb-nudge-icon[b-nj8fz4rbrd] {
    color: #B88536;
    font-size: 1.125rem;
    line-height: 1;
    padding-top: 0.125rem;
}
.cb-nudge-body[b-nj8fz4rbrd] { min-width: 0; }
.cb-nudge-head[b-nj8fz4rbrd] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.cb-nudge-from[b-nj8fz4rbrd] {
    font-weight: 700;
    color: #B88536;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cb-nudge-time[b-nj8fz4rbrd] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}
.cb-nudge-text[b-nj8fz4rbrd] {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
    font-size: 0.9375rem;
}
.cb-nudge-dismiss[b-nj8fz4rbrd] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
}
.cb-nudge-dismiss:hover[b-nj8fz4rbrd] {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.05);
}
.cb-nudge-dismiss i[b-nj8fz4rbrd] {
    font-size: 1rem;
}
/* /Components/Dashboard/Cross800RecognitionCard.razor.rz.scp.css */
.cross800-card[b-ooy6lvuszb] {
    margin-bottom: 1.5rem;
    /* Same warm coach-note treatment as the Pre-Foundation Welcome + Foundation
       Intro cards, for cohesion. A forward-looking note, not a trophy. */
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.06) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-color: rgba(184, 133, 54, 0.35);
}

.cross800-card .cr8-headline[b-ooy6lvuszb] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.cross800-card .cr8-body[b-ooy6lvuszb] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 0.85rem;
}

.cross800-card .cr8-actions[b-ooy6lvuszb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.1rem;
}
/* /Components/Dashboard/DubiousLineReviewCard.razor.rz.scp.css */
.dubious-line-review[b-1red208iaf] {
    margin-bottom: 1.5rem;
}

.dubious-line-review .dubious-list[b-1red208iaf] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dubious-line-review .dubious-item-link[b-1red208iaf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.28);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dubious-line-review .dubious-item-link:hover[b-1red208iaf],
.dubious-line-review .dubious-item-link:focus-visible[b-1red208iaf] {
    background: rgba(184, 133, 54, 0.16);
    border-color: rgba(184, 133, 54, 0.5);
    outline: none;
}

.dubious-line-review .dubious-item-main[b-1red208iaf] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.dubious-line-review .dubious-book[b-1red208iaf] {
    font-family: var(--ascend-font-primary);
    font-size: 0.78rem;
    /* #9405 - the lighter gold: 0.9 brand gold measured 4.30:1 on this card's own gold tint
       (axe color-contrast, serious, on prod). The same fix as the opening badge (#8278). */
    color: var(--ascend-secondary-light);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.dubious-line-review .dubious-path[b-1red208iaf] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dubious-line-review .dubious-eval[b-1red208iaf] {
    font-family: var(--ascend-font-primary);
    font-size: 0.82rem;
    font-weight: 600;
    color: #d6a45a;
    flex-shrink: 0;
}

.dubious-line-review .dubious-more[b-1red208iaf] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 0.75rem;
}

.dubious-line-review .dubious-hint[b-1red208iaf] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    font-style: italic;
}
/* /Components/Dashboard/FindACoachPromoCard.razor.rz.scp.css */
/* #5489 — Find-a-Coach discovery card (extracted from Dashboard.razor.css
   when the readiness gate + dismiss landed). */
.find-coach-card-body[b-g87hnduars] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* #8421 - the handoff card (find-a-coach-plateau-handoff): the icon and the words on
   one line; below them, the way forward, then the two quiet answers, each on the shared
   .action-row (stacked full width on a phone, a left-aligned row from 480px). No layout
   of its own for the buttons. */
.find-coach-card-head[b-g87hnduars] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* The text column may shrink below the flag-off card's 12rem floor: beside the icon at
   344px that floor pushed the paragraph past the card's content box. */
.find-coach-card-head .find-coach-card-text[b-g87hnduars] {
    min-width: 0;
}

.find-coach-card-actions[b-g87hnduars] {
    margin-top: 1rem;
}

.find-coach-card-answers[b-g87hnduars] {
    margin-top: 0.5rem;
}

.find-coach-card-icon[b-g87hnduars] {
    color: #B88536;
    flex-shrink: 0;
}

.find-coach-card-icon[b-g87hnduars]  i {
    font-size: 28px;
}

.find-coach-card-text[b-g87hnduars] {
    flex: 1;
    min-width: 12rem;
}

.find-coach-card-title[b-g87hnduars] {
    margin: 0 0 0.25rem;
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    color: #ffffff;
}

.find-coach-card-sub[b-g87hnduars] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.6);
}

.find-coach-dismiss[b-g87hnduars] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ascend-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    align-self: start;
}

.find-coach-dismiss:hover[b-g87hnduars] {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.find-coach-dismiss[b-g87hnduars]  i {
    font-size: 14px;
}
/* /Components/Dashboard/FoundationGuidanceCard.razor.rz.scp.css */
.foundation-guidance[b-4dqr54a18h] {
    margin-bottom: 1.5rem;
}

.foundation-guidance .rationale[b-4dqr54a18h] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.foundation-guidance .primary-cta[b-4dqr54a18h] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0a1628;
    border: none;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-bottom: 1.25rem;
}

.foundation-guidance .primary-cta:hover[b-4dqr54a18h] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
}

.foundation-guidance .element-grid[b-4dqr54a18h] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 720px) {
    .foundation-guidance .element-grid[b-4dqr54a18h] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.foundation-guidance .element[b-4dqr54a18h] {
    border: 1px solid rgba(49, 221, 227, 0.18);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
}

.foundation-guidance .element.tier-mastered[b-4dqr54a18h] {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
}

.foundation-guidance .element.tier-practicing[b-4dqr54a18h] {
    border-color: rgba(184, 133, 54, 0.45);
    background: rgba(184, 133, 54, 0.07);
}

.foundation-guidance .element.tier-learning[b-4dqr54a18h] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.06);
}

.foundation-guidance .element.tier-untouched[b-4dqr54a18h] {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.foundation-guidance .element-label[b-4dqr54a18h] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.2rem;
}

.foundation-guidance .element-tier[b-4dqr54a18h] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.foundation-guidance .pillars-hint[b-4dqr54a18h] {
    font-family: var(--ascend-font-secondary);
    /* #7543 - was rgba(255,255,255,0.45): 4.48:1 on the now-opaque card. */
    color: var(--ascend-text-muted);
    font-size: 0.8rem;
    margin: 0.5rem 0 0;
    font-style: italic;
}

.foundation-guidance.maintenance .maintenance-pointer[b-4dqr54a18h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: background 0.15s ease;
}

.foundation-guidance.maintenance .maintenance-pointer:hover[b-4dqr54a18h] {
    background: rgba(16, 185, 129, 0.14);
}

.foundation-guidance.maintenance .maintenance-text[b-4dqr54a18h] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
}

.foundation-guidance.maintenance[b-4dqr54a18h]  i.bi-chevron-right {
    color: rgba(16, 185, 129, 0.85);
    font-size: 1.1rem;
}
/* /Components/Dashboard/FoundationIntroCard.razor.rz.scp.css */
.foundation-intro[b-l9t7jxhq2w] {
    margin-bottom: 1.5rem;
    /* Slightly warmer than other cards so the welcome reads as a coach note,
       not a system surface. */
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.06) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-color: rgba(184, 133, 54, 0.35);
}

.foundation-intro .headline[b-l9t7jxhq2w] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.foundation-intro .element-lines[b-l9t7jxhq2w] {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    list-style: none;
}

.foundation-intro .element-lines li[b-l9t7jxhq2w] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    line-height: 1.7;
    position: relative;
    padding-left: 0.25rem;
}

.foundation-intro .element-lines li[b-l9t7jxhq2w]::before {
    content: "•";
    color: var(--ascend-secondary);
    position: absolute;
    left: -1.25rem;
}

.foundation-intro .closing[b-l9t7jxhq2w] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    font-style: italic;
}
/* /Components/Dashboard/MirrorCard.razor.rz.scp.css */
/* #6365 — THE MIRROR card. Same dashboard-card chrome as its siblings; the
   only bespoke pieces are the verification chip and the evidence styling. */

.mirror-label[b-g9xcg0otri] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    border-radius: 50px;
    white-space: nowrap;
}

.mirror-label-verified[b-g9xcg0otri] {
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
}

.mirror-label-verified[b-g9xcg0otri]  i {
    font-size: 12px;
}

.mirror-label-unverified[b-g9xcg0otri] {
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.mirror-statement[b-g9xcg0otri] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.55;
    margin: 0 0 0.6rem;
}

/* #8012 - the pillar tag on the per-game Today pick. Upright UI chrome, quiet
   gold: a label, not a reward. */
.mirror-pillar[b-g9xcg0otri] {
    display: inline-flex;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ascend-secondary-light);
    border: 1px solid color-mix(in srgb, var(--ascend-secondary) 40%, transparent);
    background: color-mix(in srgb, var(--ascend-secondary) 10%, transparent);
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    margin: 0 0 0.6rem;
    white-space: nowrap;
}

.mirror-evidence[b-g9xcg0otri] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 0.85rem;
}

/* #8844 - the evidence pills: a label, then one pill per cited game. Side by side
   they size to their text, like chips. */
.mirror-games[b-g9xcg0otri] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

/* #8844 review round 1 - on a phone each pill wraps onto a line of its own, and three
   bordered, accented pills at their own widths (253 / 240 / 238px at 390, looked at in
   the real card) read as an uneven stack of buttons: the shape the owner reported. At
   480px and below each pill grows to fill its line, so the stacked pills share one width.
   Above 480px they stay natural-width chips on one or two lines. The card's action is
   not in this row: it is in .mirror-actions, its own row. */
@media (max-width: 480px) {
    .mirror-games .mirror-game-link[b-g9xcg0otri] {
        flex: 1 1 auto;
    }
}

.mirror-games-label[b-g9xcg0otri] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}

.mirror-game-link[b-g9xcg0otri] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-accent);
    text-decoration: none;
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

/* #6865 — the user-color dot on each named evidence pill (the Games-list
   convention). The white/black values are DATA (which side the user played),
   not brand tokens. */
.mirror-game-link:hover[b-g9xcg0otri] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
}

.mirror-actions[b-g9xcg0otri] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* #6571 — the next-action deep link: the pill treatment of the game links,
   weighted up slightly because it is the card's actionable step. */
.mirror-next-action[b-g9xcg0otri] {
    /* #7783 - inline-flex so the touch floor at the bottom of this file centers
       the label in the taller box instead of pinning it to the top. */
    display: inline-flex;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-accent);
    text-decoration: none;
    padding: 0.25rem 0.85rem;
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 50px;
    background: rgba(49, 221, 227, 0.06);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.mirror-next-action:hover[b-g9xcg0otri] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.12);
}

.mirror-link[b-g9xcg0otri] {
    /* #7783 - see the touch-target block below. inline-flex for the same reason
       .mirror-next-action has it: a min-height on an inline box pins the text to
       the top and leaves dead space under it. */
    display: inline-flex;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-accent);
    text-decoration: none;
    /* Floor 1 - WCAG 2.2 AA 2.5.8's 24px minimum applies to a MOUSE too, and
       this link measured 22px tall. 1.5rem does not change the row: the
       neighboring .mirror-next-action pill is ~32px and sets the row height. */
    min-height: 1.5rem;
}

.mirror-link:hover[b-g9xcg0otri] {
    color: var(--ascend-accent-light);
}

/* #8293 - THE COMPACT MIRROR (phone-today, phone widths only - the dashboard
   renders this copy inside its 768px-and-below slot). The statement, label and
   pillar keep the full card's styling; the one way forward sits directly under
   them, left-aligned where the thumb is; the evidence and the cited games fold
   into a native disclosure. Nothing here is clamped or hidden by CSS: what is
   not on screen is behind the disclosure, which a keyboard, a screen reader
   and a finger all open the same way. */
.mirror-actions-compact[b-g9xcg0otri] {
    justify-content: flex-start;
    margin-bottom: 0.5rem;
}

.mirror-more[b-g9xcg0otri] {
    margin: 0;
}

.mirror-more-toggle[b-g9xcg0otri] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-accent);
    cursor: pointer;
    list-style: none;
    min-height: 1.5rem;
}

.mirror-more-toggle[b-g9xcg0otri]::-webkit-details-marker {
    display: none;
}

/* The disclosure's own state mark, drawn so it turns with the state. */
.mirror-more-toggle[b-g9xcg0otri]::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.1rem);
    transition: transform 0.2s ease;
}

.mirror-more[open] > .mirror-more-toggle[b-g9xcg0otri]::after {
    transform: rotate(-135deg) translateY(-0.1rem);
}

.mirror-more-toggle:hover[b-g9xcg0otri] {
    color: var(--ascend-accent-light);
}

.mirror-more-body[b-g9xcg0otri] {
    padding-top: 0.75rem;
}

.mirror-more-body .mirror-link[b-g9xcg0otri] {
    margin-top: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .mirror-more-toggle[b-g9xcg0otri]::after {
        transition: none;
    }
}

/* #7783 - THE CARD'S THREE CONTROLS ON A FINGER.
   CI build 10900 measured `a.mirror-link` at 128x22 on /dashboard at 390px on a
   coarse pointer. It is not a regression: the link has been 22px tall since it
   was written, and the Mirror renders only for an account that HAS a mirror
   observation, so the ratchet had simply never met it.

   THE OTHER TWO ARE THE SAME MISS, ONE LAYER DEEPER. .mirror-next-action
   (~32px) renders only when the handler supplied a NextActionUrl, and
   .mirror-game-link (~27px) only when the observation carries hydrated evidence
   rows. Neither rendered on the run that caught the link, so neither has ever
   been measured by the gate. They are raised here with it rather than waiting
   for the account that finally renders them.

   GROW THE BOX, NOT A PSEUDO-ELEMENT. .mirror-link sits immediately beside
   .mirror-next-action in .mirror-actions, and that neighbor is the card's
   PRIMARY action - the one tool that trains the finding. An absolutely
   positioned 44px hit area on a control 0.75rem from its neighbor overlaps it,
   and the top control then silently eats the other's taps. That is the trap
   app.css names and the one #7758 hit on the Opening Hub, where the control on
   top was DELETE. Flex items cannot overlap, so growing the boxes keeps the
   0.75rem gap intact and each control keeps its own taps.

   NOT A REGISTER LINE. TouchTargetRegister.txt is frozen and rejects new keys
   by design, and it should: its entries are inline text links inside a
   sentence, which WCAG 2.5.8 exempts. None of these three is that shape - they
   are standalone controls on their own row with clear space to grow into. */
@media (hover: none) and (pointer: coarse) {
    .mirror-link[b-g9xcg0otri],
    .mirror-next-action[b-g9xcg0otri],
    .mirror-game-link[b-g9xcg0otri],
    /* #8293 - the compact card's disclosure is a standalone control on its own
       row, the same shape as the three above. */
    .mirror-more-toggle[b-g9xcg0otri] {
        min-height: var(--touch-target);
    }
}
/* /Components/Dashboard/MirrorClosureCard.razor.rz.scp.css */
/* #8021 — THE MIRROR's closure card. Same dashboard-card chrome as the Mirror
   card it belongs beside; the only bespoke pieces are the chip, the quoted
   original statement and the footnote.

   Deliberately quiet. A closure is recognition, but the recognition rules put
   the line at manipulation, not at volume of decoration: no trophy, no badge,
   no animation, no color that shouts. The accent chip and a left rule on the
   quote are the whole treatment. */

.closure-chip[b-d78vpdz4o5] {
    display: inline-flex;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    border-radius: 50px;
    white-space: nowrap;
}

/* A closure is the good outcome, so it carries the accent. */
.closure-chip-closed[b-d78vpdz4o5] {
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
}

/* A recurrence is neither good news nor bad news dressed up — it is a plain
   correction, so it reads in the neutral chrome rather than in a warning color.
   Nothing about coming back is the member's fault. */
.closure-chip-back[b-d78vpdz4o5] {
    color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.closure-lead[b-d78vpdz4o5] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 0.5rem;
}

.closure-quote[b-d78vpdz4o5] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.55;
    margin: 0 0 0.85rem;
    padding: 0 0 0 0.85rem;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
}

.closure-body[b-d78vpdz4o5] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.55;
    margin: 0 0 0.75rem;
}

.closure-footnote[b-d78vpdz4o5] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
}
/* /Components/Dashboard/NextStepCard.razor.rz.scp.css */
/* NextStepCard — single-CTA wayfinding at top of dashboard (PBI #5861).
   Category tints color the left accent stripe so users build a
   subconscious read of "what kind of work this is" without reading the
   icon. */

.next-step-card[b-h0c71l7pyl] {
    border-left: 4px solid #31DDE3;
}

.next-step-card.next-step-setup[b-h0c71l7pyl] {
    border-left-color: #B88536;
}

.next-step-card.next-step-repertoire[b-h0c71l7pyl] {
    border-left-color: #31DDE3;
}

.next-step-card.next-step-review[b-h0c71l7pyl] {
    border-left-color: #a78bfa;
}

.next-step-card.next-step-training[b-h0c71l7pyl] {
    border-left-color: #10b981;
}

.next-step-card.next-step-selfanalysis[b-h0c71l7pyl] {
    border-left-color: #f59e0b;
}

.next-step-card.next-step-plan[b-h0c71l7pyl] {
    border-left-color: #ffffff;
}

.next-step-row[b-h0c71l7pyl] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
    align-items: start;
}

.next-step-icon[b-h0c71l7pyl] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.18), rgba(184, 133, 54, 0.18));
    border: 1px solid rgba(49, 221, 227, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #31DDE3;
    flex-shrink: 0;
}

.next-step-icon[b-h0c71l7pyl]  i {
    font-size: 24px;
}

.next-step-body[b-h0c71l7pyl] {
    min-width: 0;
}

.next-step-eyebrow[b-h0c71l7pyl] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #B88536;
    margin-bottom: 0.25rem;
}

.next-step-title[b-h0c71l7pyl] {
    margin: 0 0 0.5rem;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
}

.next-step-desc[b-h0c71l7pyl] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    font-size: 0.9375rem;
}

.next-step-actions[b-h0c71l7pyl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
}

.next-step-cta[b-h0c71l7pyl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6875rem 1.25rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 50px;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 14px rgba(49, 221, 227, 0.25);
}

.next-step-cta:hover[b-h0c71l7pyl] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(49, 221, 227, 0.35);
}

.next-step-cta[b-h0c71l7pyl]  i {
    transition: transform 0.15s ease;
}

.next-step-cta:hover[b-h0c71l7pyl]  i {
    transform: translateX(2px);
}

.next-step-secondary[b-h0c71l7pyl] {
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.next-step-secondary:hover[b-h0c71l7pyl] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(49, 221, 227, 0.35);
}

.next-step-dismiss[b-h0c71l7pyl] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ascend-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    align-self: start;
    margin-top: 2px;
}

.next-step-dismiss:hover[b-h0c71l7pyl] {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.next-step-dismiss[b-h0c71l7pyl]  i {
    font-size: 14px;
}

@media (max-width: 32rem) {
    .next-step-row[b-h0c71l7pyl] {
        grid-template-columns: auto 1fr;
        row-gap: 0.5rem;
    }
    .next-step-dismiss[b-h0c71l7pyl] {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
    }
    .next-step-body[b-h0c71l7pyl] {
        grid-column: 1 / -1;
    }
}
/* /Components/Dashboard/OpeningEloPerformance.razor.rz.scp.css */
/* Opening Elo Performance Component */

.opening-elo-performance[b-cpfxqf0blt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* Header with tabs and date selector */
.performance-header[b-cpfxqf0blt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

/* Color Tabs (White/Black) */
.color-tabs[b-cpfxqf0blt] {
    display: flex;
    flex: 1;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.25rem;
    border-radius: 10px;
    border: 1px solid rgba(49, 221, 227, 0.15);
}

.color-tab[b-cpfxqf0blt] {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.color-tab.active[b-cpfxqf0blt] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.3);
}

.color-tab[b-cpfxqf0blt]  i {
    width: 14px;
    height: 14px;
}

/* Color-specific icon styling */
.color-tab:first-child[b-cpfxqf0blt]  i {
    color: #ffffff;
}

.color-tab:last-child[b-cpfxqf0blt]  i {
    color: #6b7280;
}

/* Time Range Selector */
.time-range-selector[b-cpfxqf0blt] {
    display: flex;
    flex: 1;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.25rem;
    border-radius: 8px;
    border: 1px solid rgba(49, 221, 227, 0.15);
}

.time-range-selector button[b-cpfxqf0blt] {
    flex: 1;
    padding: 0.5rem 0.5rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.time-range-selector button.active[b-cpfxqf0blt] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.3);
}

/* Loading State */
.loading-state[b-cpfxqf0blt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Sort toggle.
   #8278 - four labels side by side need ~320px and the card body on a 390px
   phone is ~240px. As one unbreakable flex line the last button ran past the
   row and the card clipped it ("Trying ou"). The row now wraps: each button is
   sized from its whole label (auto basis) and grows to fill its row, so a
   button that does not fit moves to the next row intact. A label may still
   wrap inside its own button as the last resort, when even a row to itself is
   too narrow, so no card width can push text out of view. Content-driven, not
   a viewport query: the card's width comes from the page grid. */
.sort-toggle[b-cpfxqf0blt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.25rem;
    border-radius: 8px;
    border: 1px solid rgba(49, 221, 227, 0.15);
}

.sort-toggle button[b-cpfxqf0blt] {
    flex: 1 1 auto;
    padding: 0.4rem 0.5rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-toggle button.active[b-cpfxqf0blt] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.3);
}

.sort-toggle button.trying-out-tab[b-cpfxqf0blt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.sort-toggle button.trying-out-tab[b-cpfxqf0blt]  i {
    font-size: 14px;
}

.trying-out-hint[b-cpfxqf0blt] {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
    font-style: italic;
}

/* Per-sort empty state — shows when the active toggle (Best Δ / Worst Δ)
   has no rows after filtering, but other sorts may still have data. */
.sort-empty[b-cpfxqf0blt] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-style: italic;
}

/* Openings List — capped height so the dashboard widget doesn't grow
   unboundedly when the user has many openings. Scrolls inside the card. */
.openings-list[b-cpfxqf0blt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 32rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.openings-list[b-cpfxqf0blt]::-webkit-scrollbar {
    width: 6px;
}

.openings-list[b-cpfxqf0blt]::-webkit-scrollbar-track {
    background: transparent;
}

.openings-list[b-cpfxqf0blt]::-webkit-scrollbar-thumb {
    background: rgba(49, 221, 227, 0.2);
    border-radius: 3px;
}

/* Opening Item — multi-row card: top (name + Δ) / bar (W/D/L) / meta */
.opening-item[b-cpfxqf0blt] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.opening-row-top[b-cpfxqf0blt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.opening-details[b-cpfxqf0blt] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

/* Name + rep badge sit on the same line; ellipsis on the name, badge holds
   its size. */
.opening-name-row[b-cpfxqf0blt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.opening-name[b-cpfxqf0blt] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* In-repertoire badge — gold tick. Coach reads this at a glance:
   ✓ studied line vs. drift. */
.rep-badge[b-cpfxqf0blt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--ascend-secondary);
    background: rgba(184, 133, 54, 0.15);
    flex-shrink: 0;
    font-size: 0.75rem;
}

.rep-badge[b-cpfxqf0blt]  i {
    font-size: 0.75rem;
    line-height: 1;
}

.opening-variation[b-cpfxqf0blt] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(49, 221, 227, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* #9365 - the chip holds the estimate over its likely range (EloImpactInterval,
   stacked), right-aligned. The range keeps the shared component's size and color,
   so only the estimate takes the chip's tone, and the tone is neutral unless the
   games support a direction. #9453 - the chip now holds the estimate alone; its
   certainty and range are in the tooltip. */
.elo-impact[b-cpfxqf0blt] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

.elo-impact.positive[b-cpfxqf0blt] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.elo-impact.negative[b-cpfxqf0blt] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.15);
}

.elo-impact.neutral[b-cpfxqf0blt] {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
}

/* #9384 - a likely range wholly on one side of zero without the 95% rule's direction:
   the side's tint at half strength under a dashed edge, so it reads as a lean, never as
   the full direction chip above and never as the neutral "no lean" chip. The inset
   outline keeps the chip's box the same size as its neighbors. */
.elo-impact.lean-positive[b-cpfxqf0blt] {
    color: var(--ascend-text-light);
    background: rgba(16, 185, 129, 0.07);
    outline: 1px dashed rgba(16, 185, 129, 0.6);
    outline-offset: -1px;
}

.elo-impact.lean-negative[b-cpfxqf0blt] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.07);
    outline: 1px dashed rgba(239, 68, 68, 0.6);
    outline-offset: -1px;
}

/* #9365 - every chip now carries a range line, which is wider than a bare number
   (the #8228 withheld note had the same problem on its rows only). When the chip
   would leave the opening name less than 7rem (the 180px card body of a 344px
   phone), it drops to its own line on the right instead of squeezing the name to a
   few letters, and a trend chip plus the impact chip may shrink to the line and
   wrap, both kept to the right. */
.opening-row-top[b-cpfxqf0blt] {
    flex-wrap: wrap;
    row-gap: 0.3rem;
}

.opening-row-top .opening-details[b-cpfxqf0blt] {
    flex: 1 1 7rem;
}

.opening-row-top .row-right[b-cpfxqf0blt] {
    margin-left: auto;
    flex-shrink: 1;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.3rem;
}

/* #8228 - the row's win-rate interval as text, under the W/D/L bar it describes.
   On a narrow card the line wraps after the rate, never between the two bounds. */
.opening-row-interval[b-cpfxqf0blt] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
}

/* W/D/L bar */
.opening-row-bar[b-cpfxqf0blt] {
    width: 100%;
}

.wdl-bar[b-cpfxqf0blt] {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.wdl-bar .seg.win[b-cpfxqf0blt] { background: #10b981; }
.wdl-bar .seg.draw[b-cpfxqf0blt] { background: rgba(255, 255, 255, 0.35); }
.wdl-bar .seg.loss[b-cpfxqf0blt] { background: #ef4444; }

/* Meta row — games · W/D/L · vs avg · perf */
.opening-row-meta[b-cpfxqf0blt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
}

.opening-row-meta .meta-sep[b-cpfxqf0blt] {
    color: rgba(255, 255, 255, 0.25);
}

.opening-row-meta .meta-wdl .w[b-cpfxqf0blt] { color: #10b981; font-weight: 600; }
.opening-row-meta .meta-wdl .d[b-cpfxqf0blt] { color: rgba(255, 255, 255, 0.7); font-weight: 600; }
.opening-row-meta .meta-wdl .l[b-cpfxqf0blt] { color: #ef4444; font-weight: 600; }

.opening-row-meta .meta-perf[b-cpfxqf0blt],
.opening-row-meta .meta-opp[b-cpfxqf0blt] {
    color: rgba(255, 255, 255, 0.7);
}

/* Learning lane — separate "Trying out" section above the main sort.
   Visually distinct so the user (and coach voice) reads it as exploration,
   not weakness. Subtle gold accent matching the Learning badge. */
.learning-section[b-cpfxqf0blt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.6rem 0.75rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.08), rgba(49, 221, 227, 0.05));
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 10px;
}

.learning-section-header[b-cpfxqf0blt] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.learning-section-title[b-cpfxqf0blt] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-secondary);
}

.learning-section-hint[b-cpfxqf0blt] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

/* Learning row variant — softens the visual weight to match the voice. */
.opening-item.learning[b-cpfxqf0blt] {
    background: rgba(184, 133, 54, 0.06);
    border-color: rgba(184, 133, 54, 0.15);
}

.learning-badge[b-cpfxqf0blt] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* #8278 - the lighter gold: --ascend-secondary measured 4.27:1 on this
       badge's own tint (axe color-contrast, serious; AA needs 4.5:1). */
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.15);
    flex-shrink: 0;
    cursor: help;
}

/* Low-confidence row — Wilson interval too wide to make a confident call.
   Reduce visual weight so the eye reads it as "directional, not verdict."
   #9405 - through the BORDER, never opacity: 0.7 opacity composited every figure in
   the row toward the background and axe failed the opening name and three figures
   on prod. A dashed border carries the same "not a verdict" cue and holds no text. */
.opening-item.low-confidence[b-cpfxqf0blt] {
    border-style: dashed;
}

/* Trend chip — sits next to the Δ badge. ▲ improving / ▼ worsening, and only
   when the two samples support a direction (#8223). */
.row-right[b-cpfxqf0blt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.trend-chip[b-cpfxqf0blt] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: help;
    line-height: 1;
}

.trend-chip.up[b-cpfxqf0blt] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.trend-chip.down[b-cpfxqf0blt] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.12);
}

.trend-chip .trend-delta[b-cpfxqf0blt] {
    font-size: 0.65rem;
    opacity: 0.85;
}

/* #8223 - the sample the chip was read from, beside it. */
.trend-chip .trend-n[b-cpfxqf0blt] {
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
}

/* In-book ratio badge — colored by how studied vs drifted the line is. */
.opening-row-meta .meta-inbook[b-cpfxqf0blt] {
    font-weight: 600;
    cursor: help;
}

.opening-row-meta .meta-inbook.good[b-cpfxqf0blt] {
    color: var(--ascend-secondary);
}

.opening-row-meta .meta-inbook.mixed[b-cpfxqf0blt] {
    color: rgba(184, 133, 54, 0.75);
}

.opening-row-meta .meta-inbook.drifting[b-cpfxqf0blt] {
    color: #ef4444;
}

.performance-legend[b-cpfxqf0blt] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    line-height: 1.4;
    cursor: help;
}

.performance-legend[b-cpfxqf0blt]  i {
    flex-shrink: 0;
    margin-top: 2px;
    color: rgba(49, 221, 227, 0.6);
}

/* #8228 review round 1 - the interval's level, on its own line under the legend. */
.performance-legend .legend-interval[b-cpfxqf0blt] {
    display: block;
    margin-top: 0.2rem;
}

.legend-pos[b-cpfxqf0blt] { color: #10b981; font-weight: 600; }
/* #9393 - the legend's minus sign is text that carries the sign's meaning. At
   --ascend-error (#ef4444) it measured 4.39:1 on the Insights card surface (axe, with a
   BMP stand-in for the U+2212 glyph axe cannot measure); brand-tokens.md names
   --ascend-error-light for error text on a tinted surface. */
.legend-neg[b-cpfxqf0blt] { color: var(--ascend-error-light); font-weight: 600; }

.opening-item.clickable[b-cpfxqf0blt] {
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.opening-item.clickable:focus-visible[b-cpfxqf0blt] {
    outline: 2px solid rgba(49, 221, 227, 0.5);
    outline-offset: 2px;
}

/* #9075 - each row's hide control. It is a SIBLING of the row, never inside
   it: the row is role="button" (it opens the preview), and a button nested in
   it is an axe nested-interactive failure. It is drawn over the row's
   bottom-right corner, beside the W/D/L bar and the meta line, so the opening
   name and the delta keep the row's full width on a phone. */
.opening-row-wrap[b-cpfxqf0blt] {
    position: relative;
}

.opening-row-wrap .opening-row-bar[b-cpfxqf0blt],
.opening-row-wrap .opening-row-interval[b-cpfxqf0blt],
.opening-row-wrap .opening-row-meta[b-cpfxqf0blt] {
    margin-right: 2.25rem;
}

.opening-row-wrap[b-cpfxqf0blt]  .row-hide {
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
    padding: 0.3rem 0.45rem;
    /* #9397 - the WCAG 2.2 AA 2.5.8 floor on every pointer. Glyph plus padding
       alone was 28.4 x 23.6; the minimum grows the hit area, not the glyph. */
    min-width: 1.5rem;
    min-height: 1.5rem;
}

/* #9397 - the 24px floor above must not LOWER the shared Button's phone floor:
   it beats the Button's scoped `.btn-sm` on specificity, and that class holds a
   small button at 2.5rem (40px) at 768px and below on every pointer. The
   coarse-pointer block further down still wins with the full 44px. */
@media (max-width: 768px) {
    .opening-row-wrap[b-cpfxqf0blt]  .row-hide {
        min-height: 2.5rem;
    }
}

/* #9075 - the member's hidden rows, seen and undone from the card itself. */
.hidden-rows[b-cpfxqf0blt] {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hidden-rows-list[b-cpfxqf0blt] {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hidden-row[b-cpfxqf0blt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.hidden-row-name[b-cpfxqf0blt] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

/* Review round 1 - the ECO code beside a hidden line, so two lines with the
   same name in different families (Modern Defense A41 and B06) read apart. */
.hidden-row-eco[b-cpfxqf0blt] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

/* The toggle's chevron points the way the list will move. */
.hidden-rows[b-cpfxqf0blt]  .hidden-rows-chevron {
    margin-left: 0.35rem;
}

.hidden-row-opening[b-cpfxqf0blt] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    overflow-wrap: anywhere;
}

.hidden-row-variation[b-cpfxqf0blt] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    overflow-wrap: anywhere;
}

.hidden-row[b-cpfxqf0blt]  .hidden-row-restore {
    flex-shrink: 0;
}

.hidden-rows-note[b-cpfxqf0blt] {
    margin: 0.5rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

/* Hover feedback, only where a pointer can actually hover.
   #8278 - iOS Safari applies :hover to the last element TAPPED and leaves it
   on until something else is tapped. These rules paint the same tint and
   accent the selected state uses, so on a phone a tapped-then-abandoned
   button kept looking selected beside the real one ("two tabs selected"),
   and a tapped row stayed nudged sideways. A touch screen gets no hover
   styling at all; the selected state carries the choice on its own.
   The choosers' hover rules skip the selected button: this block now sits
   after the .active rules, and at equal specificity a hover background would
   otherwise replace the selected gradient under a mouse. */
@media (hover: hover) {
    .color-tab:not(.active):hover[b-cpfxqf0blt] {
        background: rgba(49, 221, 227, 0.1);
        color: var(--ascend-accent);
    }

    .time-range-selector button:not(.active):hover[b-cpfxqf0blt] {
        background: rgba(49, 221, 227, 0.1);
        color: var(--ascend-accent);
    }

    .sort-toggle button:not(.active):hover[b-cpfxqf0blt] {
        background: rgba(49, 221, 227, 0.1);
        color: var(--ascend-accent);
    }

    .openings-list[b-cpfxqf0blt]::-webkit-scrollbar-thumb:hover {
        background: rgba(49, 221, 227, 0.35);
    }

    .opening-item:hover[b-cpfxqf0blt] {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(49, 221, 227, 0.15);
    }

    .opening-item.learning:hover[b-cpfxqf0blt] {
        background: rgba(184, 133, 54, 0.1);
        border-color: rgba(184, 133, 54, 0.3);
    }

    .opening-item.clickable:hover[b-cpfxqf0blt] {
        background: rgba(49, 221, 227, 0.08);
        transform: translateX(2px);
    }
}

/* Defect #8309 - the touch floor for every chooser in this card.
   #8278's `line-height: 1.3` (which lets a sort label wrap inside its own
   button as the last resort) shrank the sort buttons from 33px to 30.4px on a
   coarse pointer, and 28.4px at 344; the color tabs and range buttons were
   36px. /progress is not on the live touch-target ratchet's route list, so CI
   never measured any of them.

   min-height, never height: a wrapped two-line label still grows its button
   instead of being clipped, and #8278's wrapping row is untouched. Inside the
   pointer query only, so a mouse at 1440 keeps the compact card. Buttons
   center their own content, and the two flex-based ones (.color-tab and the
   "Trying out" button) already align their items to the center, so the
   label sits in the middle of the taller box. */
@media (hover: none) and (pointer: coarse) {
    .color-tab[b-cpfxqf0blt],
    .time-range-selector button[b-cpfxqf0blt],
    .sort-toggle button[b-cpfxqf0blt] {
        min-height: var(--touch-target);
    }

    /* #9075 - the icon-only hide control is a full square target on a finger,
       and the bar and meta line clear it; the meta line is tall enough that
       the control never reaches up into the name and delta line. */
    .opening-row-wrap[b-cpfxqf0blt]  .row-hide {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
        bottom: 0.15rem;
        right: 0.15rem;
    }

    .opening-row-wrap .opening-row-bar[b-cpfxqf0blt],
    .opening-row-wrap .opening-row-interval[b-cpfxqf0blt],
    .opening-row-wrap .opening-row-meta[b-cpfxqf0blt] {
        margin-right: 2.85rem;
    }

    .opening-row-wrap .opening-row-meta[b-cpfxqf0blt] {
        min-height: 1.9rem;
    }
}

/* Responsive Design */
@media (max-width: 400px) {
    .opening-name[b-cpfxqf0blt] {
        font-size: 0.75rem;
    }

    /* Review round 1 - on a narrow phone a long name beside Restore became a
       tall sliver one or two words wide. The name takes its own line and
       Restore sits under it on the right. */
    .hidden-row[b-cpfxqf0blt] {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .hidden-row-name[b-cpfxqf0blt] {
        flex: 1 1 100%;
    }

    .hidden-row[b-cpfxqf0blt]  .hidden-row-restore {
        margin-left: auto;
    }

    .elo-impact[b-cpfxqf0blt] {
        font-size: 0.8rem;
    }
}
/* /Components/Dashboard/PendingCoachShares.razor.rz.scp.css */
/* Coach Studies pending-share accept card (#6475) - gold-accent family with
   the CoachNudges rows ("from your coach" surfaces share the accent). */
.coach-share-cards[b-m09g6m1cik] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cs-share-card[b-m09g6m1cik] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.10), rgba(10, 22, 40, 0.6));
    border: 1px solid rgba(184, 133, 54, 0.35);
}

.cs-share-icon[b-m09g6m1cik] {
    color: var(--ascend-secondary);
    font-size: 1.25rem;
    line-height: 1;
    padding-top: 0.125rem;
}

.cs-share-body[b-m09g6m1cik] {
    min-width: 0;
}

.cs-share-head[b-m09g6m1cik] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.cs-share-from[b-m09g6m1cik] {
    font-weight: 700;
    color: var(--ascend-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cs-share-time[b-m09g6m1cik] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.cs-share-title[b-m09g6m1cik] {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cs-share-chapters[b-m09g6m1cik] {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
    font-size: 0.8125rem;
}

.cs-share-message[b-m09g6m1cik] {
    margin: 0.375rem 0 0;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    font-size: 0.9375rem;
}

/* #8530 - where a shared repertoire can go after the accept. */
.cs-share-repertoire-hint[b-m09g6m1cik] {
    margin: 0.375rem 0 0;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-size: 0.875rem;
}

.cs-share-error[b-m09g6m1cik] {
    margin-top: 0.5rem;
    color: var(--ascend-error);
    font-size: 0.8125rem;
}

.cs-share-actions[b-m09g6m1cik] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
    flex-wrap: wrap;
}

/* #8595 - the link on the "it is in your repertoire" confirmation. */
.cs-share-link[b-m09g6m1cik] {
    color: var(--ascend-secondary);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
/* /Components/Dashboard/PhaseTransitionsCard.razor.rz.scp.css */
/* #5444 — phase-transition performance panel (Insights tab).
   Stat tiles use the shared StatItem (#6433); only the split-row layout
   stays here. */

.pt-split[b-d0jc81c6l2] {
    display: flex;
    justify-content: space-around;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pt-boundaries[b-d0jc81c6l2] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.phase-item[b-d0jc81c6l2] {
    display: grid;
    grid-template-columns: 180px 1fr 40px;
    align-items: center;
    gap: 0.75rem;
}

.phase-label[b-d0jc81c6l2] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    min-width: 0;
}

.phase-bar-container[b-d0jc81c6l2] {
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50px;
    overflow: hidden;
}

.phase-bar[b-d0jc81c6l2] {
    height: 100%;
    border-radius: 50px;
    transition: width 0.3s ease;
}

.phase-bar.phase-good[b-d0jc81c6l2] { background: var(--ascend-success); }
.phase-bar.phase-ok[b-d0jc81c6l2] { background: var(--ascend-secondary); }
.phase-bar.phase-weak[b-d0jc81c6l2] { background: var(--ascend-error); }

.phase-value[b-d0jc81c6l2] {
    text-align: right;
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.pt-note[b-d0jc81c6l2] {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .phase-item[b-d0jc81c6l2] {
        grid-template-columns: 120px 1fr 40px;
    }

    .phase-label[b-d0jc81c6l2] {
        font-size: 0.7rem;
    }
}
/* /Components/Dashboard/PreFoundationWelcomeCard.razor.rz.scp.css */
.pre-foundation-welcome[b-hrkcsxf9u6] {
    margin-bottom: 1.5rem;
    /* Warmer than system surfaces so it reads as a coach note. Matches the
       FoundationIntroCard treatment for cohesion. */
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.06) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-color: rgba(184, 133, 54, 0.35);
}

.pre-foundation-welcome .pfw-headline[b-hrkcsxf9u6] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.pre-foundation-welcome .pfw-body[b-hrkcsxf9u6] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 0.85rem;
}

.pre-foundation-welcome .pfw-actions[b-hrkcsxf9u6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.1rem;
}

/* #9447 - the icon-only dismiss X in the header's top-right (the header is
   position: relative in app.css). The title gets right padding so a long heading
   wraps before it reaches the button. */
.pre-foundation-welcome .pfw-title[b-hrkcsxf9u6] {
    padding-right: 2rem;
}

.pre-foundation-welcome .pfw-dismiss[b-hrkcsxf9u6] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ascend-text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.pre-foundation-welcome .pfw-dismiss:hover[b-hrkcsxf9u6] {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

/* On a coarse pointer the real box grows to the 44x44 touch target (#7736). */
@media (hover: none) and (pointer: coarse) {
    .pre-foundation-welcome .pfw-dismiss[b-hrkcsxf9u6] {
        top: 0.25rem;
        right: 0.25rem;
        width: auto;
        height: auto;
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }

    .pre-foundation-welcome .pfw-title[b-hrkcsxf9u6] {
        padding-right: 2.75rem;
    }
}
/* /Components/Dashboard/RatingProgressionChart.razor.rz.scp.css */


.chart-header[b-08r5316a5p] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.time-range-selector[b-08r5316a5p] {
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.25rem;
    border-radius: 8px;
    border: 1px solid rgba(49, 221, 227, 0.15);
}

.time-range-selector button[b-08r5316a5p] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-range-selector button:hover[b-08r5316a5p] {
    background: rgba(49, 221, 227, 0.1);
    color: var(--ascend-accent);
}

.time-range-selector button.active[b-08r5316a5p] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.3);
}/* Responsive */
@media (max-width: 768px) {
    .time-range-selector[b-08r5316a5p] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .time-range-selector button[b-08r5316a5p] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }

    }

.chart-footnote[b-08r5316a5p] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}
/* /Components/Dashboard/ReactivationMomentCard.razor.rz.scp.css */
.reactivation-card[b-z8f65funtc] {
    position: relative;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(184, 133, 54, 0.4);
    /* Develop build 11079 - this was linear-gradient(135deg, rgba(184,133,54,0.1),
       rgba(10,22,40,0.6)). axe cannot resolve a gradient's color, so it reported the
       greeting and the interpreted line as "incomplete" and the /dashboard axe gate
       failed (its undecidable register is frozen). A flat surface lets axe judge the
       text. This is the gradient's midpoint (premultiplied), so over the same page it
       averages to the same color. Pinned by AxeDecidableTextSurfaceTests. */
    background: rgba(35, 38, 42, 0.35);
}

.reactivation-dismiss[b-z8f65funtc] {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
}

.reactivation-dismiss:hover[b-z8f65funtc] { color: rgba(255, 255, 255, 0.8); }

.reactivation-head[b-z8f65funtc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.reactivation-head i[b-z8f65funtc] { color: #B88536; font-size: 1.1rem; }

.reactivation-greeting[b-z8f65funtc] {
    font-family: 'condor', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.reactivation-line[b-z8f65funtc] {
    margin: 0 0 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

/* Develop build 11079 (#7736 ratchet) - on a coarse pointer the dismiss X was 26x17,
   one glyph with no padding. It is the only control in the card's top-right corner,
   so the real box grows to 44x44 in both axes (no pseudo-element hit area), centered
   so the glyph stays about where it was. The heading gets right padding so a long
   name wraps before it reaches the larger button. Desktop keeps its compact size. */
@media (hover: none) and (pointer: coarse) {
    .reactivation-dismiss[b-z8f65funtc] {
        top: 0;
        right: 0.125rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }

    .reactivation-head[b-z8f65funtc] {
        padding-right: 1.5rem;
    }
}
/* /Components/Dashboard/ReferencePositionsCard.razor.rz.scp.css */
.rp-progress[b-lx3f59jblt] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rp-mastered[b-lx3f59jblt] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #31DDE3;
}

.rp-total[b-lx3f59jblt] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
}

/* Breakdown tiles migrated to the shared StatsRow/StatItem (#6433); only
   the spacing below the row stays here. */
[b-lx3f59jblt] .rp-breakdown {
    margin-bottom: 1rem;
}

.rp-due[b-lx3f59jblt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.2), rgba(49, 221, 227, 0.15));
    border: 1px solid rgba(184, 133, 54, 0.5);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.rp-due:hover[b-lx3f59jblt] {
    border-color: #B88536;
    box-shadow: 0 4px 16px rgba(184, 133, 54, 0.25);
}

.rp-due[b-lx3f59jblt]  i {
    font-size: 16px;
}

.rp-link[b-lx3f59jblt] {
    display: inline-block;
    color: #31DDE3;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.rp-link:hover[b-lx3f59jblt] {
    text-decoration: underline;
}

/* #8873 review - the empty state's one link is the member's way into rating a first
   position, and as an unpadded inline link it measured 168x23 on a coarse pointer at 390.
   The floor goes inside the pointer query so desktop density is unchanged, and on the box
   itself (no pseudo-element hit area) so it cannot overlap anything beside it. Held by
   ConditionalSurfaceTouchTargetTests, because CI's account rarely renders this state. */
@media (hover: none) and (pointer: coarse) {
    .rp-first-rating[b-lx3f59jblt] {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target);
    }
}

/* #6169 — clickable list of the reached tabiyas. Fills the box (was mostly empty
   next to Opening Deviations) and routes the user straight into each position. */
.rp-list[b-lx3f59jblt] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.rp-item[b-lx3f59jblt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.12);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.rp-item:hover[b-lx3f59jblt] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.06);
}

.rp-item-name[b-lx3f59jblt] {
    min-width: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-item-tag[b-lx3f59jblt] {
    flex-shrink: 0;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
}

/* mastery-level accent on the tag */
.rp-level-mastered .rp-item-tag[b-lx3f59jblt] {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.12);
}

.rp-level-practicing .rp-item-tag[b-lx3f59jblt] {
    color: #B88536;
    background: rgba(184, 133, 54, 0.14);
}

.rp-item-due-tag[b-lx3f59jblt] {
    color: #0a1628;
    background: linear-gradient(135deg, #B88536, #d4a04a);
    font-weight: 700;
}
/* /Components/Dashboard/StudyStreakCard.razor.rz.scp.css */
/* Study Streak card (#6133) - styles carried from Dashboard.razor.css when the
   card was extracted into this self-contained component for the Insights tab. */

.streak-hero[b-r9i7uumcjr] {
    text-align: center;
    padding: 0.75rem 0 0.25rem;
}

/* Glowing brand ring behind the streak count. */
.streak-ring[b-r9i7uumcjr] {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 0;
}

.streak-ring[b-r9i7uumcjr]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 130px;
    transform: translate(-50%, -48%);
    background: radial-gradient(circle, rgba(49, 221, 227, 0.18), rgba(184, 133, 54, 0.08) 55%, transparent 72%);
    z-index: 0;
    pointer-events: none;
}

.streak-number[b-r9i7uumcjr] {
    position: relative;
    z-index: 1;
    font-family: var(--ascend-font-primary);
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #31DDE3 0%, #B88536 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #31DDE3; /* fallback */
}

.streak-unit[b-r9i7uumcjr] {
    position: relative;
    z-index: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
}

.streak-label[b-r9i7uumcjr] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* #9401 - axe 4.48:1 at 0.45 white. */
    color: var(--ascend-text-secondary);
    margin-top: 0.15rem;
}

/* Quiet "best run" chip — only rendered when it beats the current streak. */
.streak-best[b-r9i7uumcjr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0.75rem auto 0;
    padding: 0.35rem 0.9rem;
    width: fit-content;
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 50px;
    background: rgba(184, 133, 54, 0.08);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}

/* Bug #9053 follow-up 3: the chip's check is a neutral count marker, so a muted token
   rather than the achievement gold (--ascend-secondary) or the success green. */
.streak-best[b-r9i7uumcjr]  i {
    color: var(--ascend-text-muted);
    font-size: 0.85rem;
}

.streak-best strong[b-r9i7uumcjr] {
    color: #ffffff;
    font-weight: 600;
}

.streak-heatmap-wrap[b-r9i7uumcjr] {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(49, 221, 227, 0.12);
}

.streak-heatmap-caption[b-r9i7uumcjr] {
    display: block;
    text-align: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    /* #9401 - 0.4 white, 3.80:1 on the card; same fix as .streak-label above it. */
    color: var(--ascend-text-secondary);
    margin-bottom: 0.65rem;
}

.streak-heatmap[b-r9i7uumcjr] {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.heatmap-cell[b-r9i7uumcjr] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.heatmap-cell.active[b-r9i7uumcjr] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.8), rgba(49, 221, 227, 0.45));
    box-shadow: 0 0 5px rgba(49, 221, 227, 0.35);
}

/* Today gets a gold marker so the user's eye lands on "now". */
.heatmap-cell.today[b-r9i7uumcjr] {
    outline: 1.5px solid rgba(184, 133, 54, 0.9);
    outline-offset: 1px;
}

.heatmap-cell.today.active[b-r9i7uumcjr] {
    background: linear-gradient(135deg, #31DDE3, #B88536);
    box-shadow: 0 0 7px rgba(184, 133, 54, 0.45);
}

/* ── #8065 study-days card (honest-consistency) ─────────────────────────────
   Owner ruling D2: the support-tier test on the rendered UI. Everything below is
   deliberately quiet: no gradient, no glow, no hero number, no animation. The count
   is a StatItem at the same Small/Bare weight as the other Insights figures; text
   wears text tokens, never the bar color. The bar is one validated single-series
   hue (#239fa4: OKLCH L inside the dark band, >= 3:1 against --ascend-bg-card), and
   the plan tick is a neutral text-secondary line, so identity is never color alone:
   every row also prints its numbers. */

.sd-summary[b-r9i7uumcjr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.sd-rule[b-r9i7uumcjr] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--ascend-text-secondary);
}

.sd-weeks[b-r9i7uumcjr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sd-week[b-r9i7uumcjr] {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) 3.75rem;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.sd-week-label[b-r9i7uumcjr] {
    color: var(--ascend-text-secondary);
    white-space: nowrap;
}

.sd-week-current .sd-week-label[b-r9i7uumcjr] {
    color: var(--ascend-text-light);
}

.sd-week-track[b-r9i7uumcjr] {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
}

.sd-week-fill[b-r9i7uumcjr] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 4px;
    background: #239fa4;
}

/* The member's plan: a thin neutral tick at their days-per-week. */
.sd-week-plan[b-r9i7uumcjr] {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: var(--ascend-text-secondary);
}

.sd-week-value[b-r9i7uumcjr] {
    text-align: right;
    color: var(--ascend-text-light);
    white-space: nowrap;
}

.sd-legend[b-r9i7uumcjr] {
    margin: 0.6rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: var(--ascend-text-secondary);
}

.sd-off[b-r9i7uumcjr] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.study-days-hidden-note[b-r9i7uumcjr] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-secondary);
}

@media (max-width: 400px) {
    .sd-week[b-r9i7uumcjr] {
        grid-template-columns: 4.25rem minmax(0, 1fr) 3.25rem;
        gap: 0.45rem;
        font-size: 0.75rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── App footer — legal links + copyright. Rendered in both authenticated
   and marketing layouts so ToS/Privacy are always one click away (launch
   prereq). Subtle, low contrast — should never compete with content.
   The bar carries its OWN dark background: white-alpha text was invisible
   when a page painted a light surface behind it (copy-rework v1 flag #2). */
.app-footer[b-dx84giicde] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    margin-top: 2rem;
    background: #0f172a;
    /* 0.6 alpha over slate -> ~6.99:1, clears WCAG AA 4.5:1 for the
       copyright text (was 0.4 -> 3.81:1, failing). PBI #5853. */
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.app-footer-link[b-dx84giicde] {
    /* 0.7 alpha over slate -> ~9.1:1; clears AA with margin and reads as
       an actionable link, not muted chrome. PBI #5853. */
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.15s ease;
}

.app-footer-link:hover[b-dx84giicde] {
    color: #31DDE3;
}

/* #7862 - the '·' between the footer links is DECORATION, and it is now drawn
   as decoration instead of being a text node.
   Measured with axe-core 4.13.0 in Chrome on /studies: fg #3f4555 on bg #0f172a
   = 1.86:1, which is far under the 4.5:1 floor - but axe never said so, because
   a ONE-CHARACTER element that fails contrast is reported as "incomplete"
   (messageKey shortTextContent), never as a violation. So the separators sat in
   the frozen undecidable register looking like a quirk of axe when they were
   really a sub-AA pair hiding behind it.
   WCAG 1.4.3 does not apply to pure decoration, and that is what this is: it
   separates two links and carries no information. Generated content is not a
   DOM text node, so axe's color-contrast rule no longer matches the element at
   all (it requires a non-empty #text child) - the element genuinely leaves
   contrast scope rather than being excused inside it. aria-hidden on the span
   does the same for assistive tech, which used to announce "middle dot" three
   times in the footer of every page. The color is unchanged: it is the same
   faint separator on screen. */
.app-footer-sep[b-dx84giicde] {
    color: rgba(255, 255, 255, 0.2);
}

.app-footer-sep[b-dx84giicde]::before {
    content: '\00B7';
}

/* App Layout - Authenticated Users */
.app-layout[b-dx84giicde] {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(135deg, #0a1628 0%, #0f172a 50%, #0d1f35 100%);
    position: relative;
}

.app-layout[b-dx84giicde]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(49, 221, 227, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(184, 133, 54, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Removed repeating-linear-gradient - caused horizontal lines everywhere */

/* Marketing Layout - Unauthenticated Users */
.marketing-layout[b-dx84giicde] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e8f0f7 50%, #f1f5f9 100%);
    position: relative;
}

.marketing-layout[b-dx84giicde]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(49, 221, 227, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(184, 133, 54, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Sidebar - Premium Professional Design */
.sidebar[b-dx84giicde] {
    width: 280px;
    /* #7906 - FLAT AND OPAQUE, deliberately. This was a three-stop 180deg navy
       gradient under a full-coverage rotating radial pseudo-element, and the two
       together made every text node in the sidebar unmeasurable: axe-core
       returned 23 "incomplete" color-contrast nodes at 1440x900 (the wordmark,
       the nav labels, the pillar labels, the member name and the rating), all
       messageKey pseudoContent. Neither a pass nor a fail - so the two REAL
       failures hiding in there (.nav-section-label at 2.97:1 and
       .pillar-technical at 2.63:1) could not surface as violations. The CI axe
       gate never saw any of it because it runs at 1280x720, where the sidebar is
       an off-screen drawer: invisible to the gate by accident of viewport, which
       is exactly the shape that rots.
       The flat value is the gradient's own 50% stop, so the middle of the
       sidebar is unchanged and the ends move by a few units of blue. Same move
       #7862 made for .main-header and .mobile-header, and #7543 for the cards. */
    background: #0d2137;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: var(--z-sticky);
    border-right: 1px solid rgba(49, 221, 227, 0.2);
    overflow: hidden;
}

/* Drawer close button — hidden by default; media queries below show it
   in drawer mode (phone / short-landscape). */
.drawer-close-btn[b-dx84giicde] {
    display: none;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    z-index: 3;
    padding: 0;
    font-size: 1rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.drawer-close-btn:hover[b-dx84giicde],
.drawer-close-btn:focus-visible[b-dx84giicde] {
    background: rgba(49, 221, 227, 0.22);
    transform: scale(1.05);
    outline: none;
}

/* #7906 - the "subtle animated background effect" that used to live here was a
   200% x 200% absolutely positioned ::before carrying a radial-gradient at 3%
   cyan, rotating forever. axe reports every text node under a content-bearing
   pseudo-element as undecidable, so this one alone accounted for the sidebar's
   23 incomplete nodes; it also kept a compositor animation running on every
   authenticated page for an effect measured at 3% alpha. Removed, not replaced:
   #7312 established that moving such an overlay only CONVERTS the finding, and
   #7543 removed the same glow from the cards and the auth shell. */

/* Sidebar Header - Enhanced */
.sidebar-header[b-dx84giicde] {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 var(--space-lg);
    border-bottom: var(--header-border);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Main-header timer slot — right-aligned in the persistent top page header
   (visible on desktop only; mobile has its own copy in mobile-header). The
   header-content wrapper uses space-between, so this slot floats right
   without needing explicit margin-left or flex ordering. */
.main-header-timer[b-dx84giicde] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.4rem;
}

/* Mobile header variant — a compact button slot between logo and profile link.
   Main-header is hidden below 768px so this is the timer's mobile home.
   gap separates the timer button and the SoundToggle so they don't visually
   merge; flex-shrink: 0 keeps the slot at its natural width so the logo
   text shrinks first, not the controls (Joe-flagged 2026-05-01: timer was
   visually overlapping the brand name on phone width). */
.mobile-timer-slot[b-dx84giicde] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Removed decorative line - too busy */

.logo-link[b-dx84giicde] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    text-decoration: none;
    transition: all var(--transition-smooth);
    position: relative;
    width: 100%;
}

.logo-link[b-dx84giicde]::after {
    display: none !important; /* Disable global link underline animation */
}

.logo-link:hover[b-dx84giicde] {
    transform: translateX(4px) scale(1.02);
}

.logo-link:hover .logo-image[b-dx84giicde] {
    box-shadow: 0 0 20px rgba(49, 221, 227, 0.4);
    transform: rotate(-5deg);
}

.logo-image[b-dx84giicde] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    padding: 6px;
    transition: all var(--transition-smooth);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.logo-text[b-dx84giicde] {
    font-family: var(--ascend-font-primary);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.logo-primary[b-dx84giicde] {
    color: #ffffff;
}

.logo-secondary[b-dx84giicde] {
    color: #b88536;
}

/* Sidebar Navigation - Premium Design */
.sidebar-nav[b-dx84giicde] {
    flex: 1;
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
    min-height: 0;
}

.nav-link[b-dx84giicde] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.nav-link[b-dx84giicde]::after {
    display: none !important; /* Disable global link underline animation */
}

/* Gradient border accent */
.nav-link[b-dx84giicde]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
    opacity: 0;
    transition: opacity var(--transition-smooth);
    border-radius: 0 4px 4px 0;
}

/* #7906 - the hover glow ::after that used to be here (inset: 0, a radial
   gradient, `display: block !important`) is removed as DEAD CODE, not as the
   accessibility fix. Measured in a browser, not inferred: the sidebar rows are
   <NavLink>, a CHILD component, so the <a> it renders carries no b-* scope
   attribute and every `.nav-link` rule in this file compiles to
   `.nav-link[b-...]` and matches nothing - the limitation app.css documents at
   length under #7736. getComputedStyle on a live row reports content: none for
   this pseudo. What actually made .nav-text and the other 22 sidebar nodes
   undecidable was .sidebar::before, which IS this file's own markup and did
   render. Removed anyway so a future fix to the scoping does not silently
   switch a full-coverage pseudo back on over every nav label. */

.nav-link:hover[b-dx84giicde] {
    background: rgba(49, 221, 227, 0.15);
    color: #ffffff;
    transform: translateX(6px);
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.2);
}

.nav-link:hover[b-dx84giicde]::before {
    opacity: 1;
}

.nav-link:hover .nav-icon[b-dx84giicde] {
    transform: scale(1.1);
    color: var(--ascend-accent);
}

/* #8704 - THE ACTIVE ROW, REACHED THROUGH ::deep.
   The <a> is rendered by <NavLink>, a child component, so it carries no b-*
   scope attribute (the #7736 note above): the `.nav-link.active` rule that used
   to be here compiled to `.nav-link.active[b-...]` and matched nothing, so the
   current page's row painted no background and no bar. Measured before this fix
   on /dashboard at 1440, 390 and 344: background transparent, ::before content
   none. Through `.sidebar-nav`, which IS this file's markup, the rule compiles
   to `.sidebar-nav[b-...] a[aria-current="page"]` and matches.
   aria-current="page", not .active: NavLink sets both on the current row, and
   the attribute is the one that says what the state means. #8932 - the rows are
   SidebarNavLink (a NavLink), so exactly ONE row carries it: the most specific
   href across the whole sidebar (NavDefinitions.CurrentOf). It also keeps this
   paint off the .nav-link and .active class names, which app.css's selectors
   mention, so SharedClassOwnershipTests (#7266) does not read it as a scoped
   repaint of a global class; app.css never painted the active row.
   Only the ACTIVE state is switched on. The other `.nav-link` rules in this
   file (the flex row, hover, the base ::before) are still inert, and turning
   them on would restyle every row and every hover, a separate change. So the
   bar's geometry is stated here rather than inherited from the inert base rule.
   #7906 - #133f53 is 16% cyan over the flat sidebar (#0d2137), kept flat AND
   opaque so axe can measure the label on it (9.46:1). The 4px cyan-to-gold bar
   is the non-text state indicator. Pinned by SidebarActiveRowContractTests and
   AxeMeasurableSurfaceRatchetTests. */
.sidebar-nav[b-dx84giicde]  a[aria-current="page"] {
    position: relative;
    background: #133f53;
    color: #ffffff;
    font-weight: 600;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.25);
}

/* #8704 review - THE BAR IS A BORDER, NOT A BACKGROUND (#7543's rule).
   axe-core's color-contrast marks text undecidable (messageKey pseudoContent)
   when an ancestor's absolutely positioned ::before/::after paints a background
   over more than a quarter of the text's own box. Drawn with a background, this
   bar was 4x44 = 176px2 on a coarse-pointer row, more than a quarter of a short
   label: at 390 and 344 the active "Games", "Billing" and "Logout" rows went to
   axe's incomplete bucket, while "Coaching Hub" stayed decidable and every row
   at 1280 and 1440 did too. The CI axe gate runs at 1280x720 with the sidebar
   off screen, so only a phone-width walk sees it. axe counts a pseudo's area
   only when it paints a background color or image, and border-image is
   neither: the same gradient, drawn as a 4px left border on a zero-width box,
   is ignored by that check. Same fix as Card, .dashboard-card::after and
   OpeningExplorerPanel. border-image does not follow border-radius, so the
   bar's ends are square. */
.sidebar-nav[b-dx84giicde]  a[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%) 1;
}

/* The icon rule DOES work as written: the <i> is this file's own markup. */
.nav-link.active .nav-icon[b-dx84giicde] {
    color: var(--ascend-accent);
}

.nav-icon[b-dx84giicde] {
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
    transition: all var(--transition-smooth);
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.9);
}

.nav-text[b-dx84giicde] {
    flex: 1;
    color: rgba(255, 255, 255, 0.9);
}

/* Navigation Section Labels */
.nav-section-label[b-dx84giicde] {
    font-family: var(--ascend-font-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    /* #7906 - was rgba(49, 221, 227, 0.45): 2.97:1, a REAL AA failure that the
       "incomplete" verdict had been hiding (it was already recorded in
       InheritedContrastRatchetExemptions.txt and nothing could see it in a
       browser). 0.75 measures 6.08:1 on the flat sidebar and 6.48:1 on
       --ascend-bg-dark, and keeps the label quieter than a full-strength cyan. */
    color: rgba(49, 221, 227, 0.75);
    padding: var(--space-xs) 0;
    margin-top: var(--space-md);
    user-select: none;
    position: relative;
}

/* Pillar label dual-register layout — PBI #5497.
   Player-facing phrase as the prominent line; technical name as a small subtitle
   so the methodology framework stays visible without competing with the coaching voice. */
.nav-pillar-label[b-dx84giicde] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.5rem 0 0.15rem 0;
    margin-top: 0.75rem;
    user-select: none;
}

.nav-pillar-label .pillar-phrase[b-dx84giicde] {
    font-family: var(--ascend-font-primary);
    font-size: 0.88rem;
    font-weight: 700;
    /* #7906 - was rgba(184, 133, 54, 0.95) at 4.24:1. The light step of the same
       brand gold, which is the move #7905 made for --ascend-error-light: 5.59:1
       on the flat sidebar. */
    color: color-mix(in srgb, var(--ascend-secondary-light) 95%, transparent);
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.nav-pillar-label .pillar-technical[b-dx84giicde] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.55rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* #7906 - was rgba(255, 255, 255, 0.3): 2.63:1, the worst REAL failure the
       sidebar was hiding, on 8.8px type. 0.55 measures 5.79:1 on the flat
       sidebar and still reads as the quieter subtitle line (#5497's intent) next
       to .pillar-phrase. */
    color: rgba(255, 255, 255, 0.55);
    line-height: 1;
}

/* Trail Guide Tier 2/3 expanders (#6198) — native <details>/<summary>, no JS,
   accessible by default. Summary reads like a nav-link; the body holds the
   child NavLinks. Collapsed/expanded purely via the open attribute. */
.nav-group[b-dx84giicde] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.nav-group-summary[b-dx84giicde] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    margin-top: var(--space-md);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-lg);
    font-family: var(--ascend-font-primary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all var(--transition-smooth);
    user-select: none;
}

/* Remove the default disclosure triangle (we render our own chevron). */
.nav-group-summary[b-dx84giicde]::-webkit-details-marker {
    display: none;
}
.nav-group-summary[b-dx84giicde]::marker {
    content: "";
}

.nav-group-summary:hover[b-dx84giicde] {
    color: #ffffff;
}

.nav-group-summary:hover .nav-icon[b-dx84giicde] {
    color: var(--ascend-accent);
}

.nav-group-chevron[b-dx84giicde] {
    margin-left: auto;
    font-size: 0.7rem;
    /* #7906 - was rgba(255, 255, 255, 0.45) at 4.16:1. 0.55 is 5.79:1 on the
       flat sidebar. */
    color: rgba(255, 255, 255, 0.55);
    transition: transform var(--transition-smooth);
}

.nav-group[open] > .nav-group-summary .nav-group-chevron[b-dx84giicde] {
    transform: rotate(180deg);
}

.nav-group-body[b-dx84giicde] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-left: var(--space-sm);
}

.nav-divider[b-dx84giicde] {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: var(--space-lg) var(--space-xl);
    position: relative;
}

/* Removed decorative dot - too busy */

/* Logout Form & Button */
.nav-link-form[b-dx84giicde] {
    margin: 0;
    padding: 0;
    width: 100%;
}

.nav-link-button[b-dx84giicde] {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

/* Sidebar Footer - Premium Design */
.sidebar-footer[b-dx84giicde] {
    padding: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Removed decorative line - too busy */

/* #9104 - the dual-role coach's link to their coach page, above the badge. A plain row,
   not a second badge: the badge stays the member's own profile. 44px tall for touch. */
.user-coach-page-link[b-dx84giicde] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
    margin-bottom: var(--space-sm);
    padding: 0 var(--space-lg);
    border-radius: var(--radius-lg);
    color: var(--ascend-text-light);
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #142631;
}

.user-coach-page-link:hover[b-dx84giicde],
.user-coach-page-link:focus-visible[b-dx84giicde] {
    border-color: rgba(49, 221, 227, 0.4);
    background: #1a2d37;
}

.user-coach-page-link i[b-dx84giicde] {
    color: var(--ascend-accent);
}

.user-badge[b-dx84giicde] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    /* #7906 - flat, so axe can judge .user-name, .user-rating and .rating-scale.
       Was a 10% cyan -> 10% gold gradient over the footer wash; #142631 is the
       midpoint of those two stops composited over it. */
    background: #142631;
    border-radius: var(--radius-xl);
    transition: all var(--transition-smooth);
    cursor: pointer;
    border: 1px solid rgba(49, 221, 227, 0.2);
    position: relative;
    overflow: hidden;
}

/* #7906 - the member badge carried the same full-coverage radial ::before as the
   nav links, over the member's own name. Removed for the same reason. */

.user-badge:hover[b-dx84giicde] {
    /* The hover step, flat for the same reason: 15% of each stop over the footer. */
    background: #1a2d37;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(49, 221, 227, 0.2);
    border-color: rgba(49, 221, 227, 0.4);
}

.user-badge:hover .user-avatar[b-dx84giicde] {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 20px rgba(49, 221, 227, 0.6);
}

.user-avatar[b-dx84giicde] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--ascend-accent), var(--ascend-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ascend-primary);
    font-size: 1.375rem;
    flex-shrink: 0;
    transition: all var(--transition-smooth);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
}

.user-avatar .avatar-image[b-dx84giicde] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.user-info[b-dx84giicde] {
    flex: 1;
    min-width: 0;
}

.user-name[b-dx84giicde] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.user-rating[b-dx84giicde] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: 2px;
}

.user-rating[b-dx84giicde]::before {
    content: '♔';
    /* #7906 - was var(--ascend-secondary) at 4.25:1. The light step of the same
       brand gold: 5.78:1 on the flat member badge. The crown is decoration, but
       the pseudo-element carries a text node, so axe grades it as text. */
    color: var(--ascend-secondary-light);
    font-size: 1rem;
}

/* Clarify the nav rating is the normalized rating ("Est. FIDE", #8996), not a raw site rating. */
.rating-scale[b-dx84giicde] {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Sync indicator animation */
.spin-icon[b-dx84giicde] {
    animation: spin-b-dx84giicde 1s linear infinite;
    margin-right: 4px;
    font-size: 0.75rem;
    opacity: 0.8;
}

@keyframes spin-b-dx84giicde {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.user-badge.syncing[b-dx84giicde] {
    opacity: 0.85;
}

.user-badge.syncing .user-avatar[b-dx84giicde] {
    animation: pulse-b-dx84giicde 2s ease-in-out infinite;
}

@keyframes pulse-b-dx84giicde {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Main Content Area */
/* #7911 - --app-content-top IS A PUBLISHED CONTRACT. Read this before changing
   the header height or the content padding in ANY band below.

   It is the distance from the top of the viewport to the top of the page's own
   content with the page scrolled to 0: the app chrome above the content (the
   sticky .main-header on desktop, the fixed .mobile-header's padding-top
   reservation below 768px and on short landscape screens) plus
   .content-wrapper's top padding. It is set here, on .main-content, and it
   inherits into every page.

   DrillShell reads it to size the drill board to the height that is actually
   left on screen (a 600px board under a 128px desktop header and a two-line
   title ran rank 1 off a 900px window, #7911). This file is the only place
   that knows these heights, so it publishes the sum rather than making the
   board guess them. Every band below that moves either half re-states the
   sum next to the rule that moved it; DrillFoldContractTests fails a band
   that moves one without the other. */
.main-content[b-dx84giicde] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: 280px;
    --app-content-top: calc(var(--header-height) + var(--space-xl));
}

/* Main Header */
/* #7862 - OPAQUE and FLAT, the same treatment #7543 gave the shared Card and
   #7817 gave the studies grid. This bar was a TRANSLUCENT gradient (0.95 -> 0.9
   alpha) over the layout's own gradient, so axe-core could not resolve a
   background for anything sitting on it: the breadcrumb page label and the
   session-timer button's label both came back "incomplete" on every signed-in
   route. The two stops are rgb(10,22,40) and rgb(15,23,42) - five units apart -
   and the bar MEASURED rgb(9,21,39) at its left edge and rgb(14,22,41) at its
   right, so --ascend-bg-card (#0a1628) is what the gradient was already
   rendering as rather than a new color. Measured after with axe-core 4.13.0:
   .header-page-label 5.84:1, the timer button's "Set timer" 9.54:1 - neither
   was judged at all before. */
.main-header[b-dx84giicde] {
    height: var(--header-height);
    background: var(--ascend-bg-card);
    border-bottom: var(--header-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* #8809 - once this bar's controls row has scrolled off screen, the session
   timer pins itself to the top-right (SessionTimer.razor.css, keyed on
   data-timer-floating). It is still a child of this bar, so it paints on the
   bar's z-index above, and that is deliberate: 50 is over every static page
   layer (the highest is 30; only open dropdowns and menus go higher) and UNDER
   every full-screen page overlay and modal (the lowest painted one is 100).
   Do not lift the bar while the timer floats. Review
   round 1 measured a lift to var(--z-fixed): the pinned pill was drawn sharp
   over StudyBoard's guess-side card (100), the BoardVision and KnightVision
   wrong-answer overlay (900) and DrillIntroOverlay (1000). Held by
   SessionTimerReachableContractTests.EveryPageOverlay_PaintsOverThePinnedTimer. */

.header-content[b-dx84giicde] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-xl);
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.page-title[b-dx84giicde] {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
    font-family: var(--ascend-font-primary);
}

/* Subtle "you are here" label in the topbar. Replaced the prior H1
   page-title (Joe-flagged: collided with each page's own H1 emitted
   by PageContainer/PageHeader). De-emphasized styling — the page's
   own loud H1 stays the focal point; this is breadcrumb context. */
.header-page-label[b-dx84giicde] {
    font-family: var(--ascend-font-primary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(49, 221, 227, 0.7);
}

/* Content Wrapper */
.content-wrapper[b-dx84giicde] {
    flex: 1;
    padding: var(--space-xl);
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

/* Error UI - Modern */
#blazor-error-ui[b-dx84giicde] {
    background: linear-gradient(135deg, var(--ascend-error), #dc2626);
    color: white;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 9999;
    padding: var(--space-lg) var(--space-xl);
    box-shadow: var(--shadow-xl);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.error-content[b-dx84giicde] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-weight: 500;
}

.error-content i[b-dx84giicde] {
    font-size: 1.5rem;
}

.reload-link[b-dx84giicde] {
    color: white;
    text-decoration: underline;
    font-weight: 600;
    transition: opacity var(--transition-fast);
}

.reload-link:hover[b-dx84giicde] {
    opacity: 0.8;
}

.dismiss-btn[b-dx84giicde] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.dismiss-btn:hover[b-dx84giicde] {
    background: rgba(255, 255, 255, 0.3);
}

/* Mobile Header - visible only below 768px */
.mobile-header[b-dx84giicde] {
    display: none;
}

.hamburger-btn[b-dx84giicde] {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.hamburger-btn:hover[b-dx84giicde] {
    background: rgba(49, 221, 227, 0.15);
}

.mobile-logo-link[b-dx84giicde] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    /* Allow the logo block to shrink so the timer + sound toggle aren't
       pushed under it on narrow phones. min-width: 0 lets the text
       truncate / hide on the narrowest screens. */
    min-width: 0;
    flex-shrink: 1;
}

.mobile-logo-link[b-dx84giicde]::after {
    display: none !important;
}

.mobile-logo-image[b-dx84giicde] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    padding: 4px;
}

.mobile-logo-text[b-dx84giicde] {
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.mobile-user-link[b-dx84giicde] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    text-decoration: none;
}

.mobile-user-link[b-dx84giicde]::after {
    display: none !important;
}

.mobile-avatar[b-dx84giicde] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid rgba(49, 221, 227, 0.3);
}

.mobile-avatar-placeholder[b-dx84giicde] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--ascend-accent), var(--ascend-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ascend-primary);
    font-size: 1.125rem;
}

/* Drawer Overlay — always positioned + styled at base so tap-to-close
   works in every drawer-activating breakpoint (portrait, landscape-short,
   future narrow-laptop rules). drawer.js toggles display: none/block. */
.drawer-overlay[b-dx84giicde] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal-backdrop);
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sidebar[b-dx84giicde] {
        width: 240px;
    }

    .main-content[b-dx84giicde] {
        margin-left: 240px;
        --app-content-top: calc(var(--header-height) + var(--space-lg));
    }

    .content-wrapper[b-dx84giicde] {
        padding: var(--space-lg);
    }
}

/* #7756 - THE WORDMARK IS CLIPPED WHEREVER THE SIDEBAR IS 240px.
   Reported against the two review pages, but it is the shell: the rule above
   takes the sidebar from 280px to 240px and nothing in the header followed, so
   `.logo-text` (white-space: nowrap, 1.375rem) asks for 162-167px and gets 127
   - and `.sidebar` is overflow: hidden, so the brand rendered as "ASCENDCHES".
   MEASURED on dev 2026-09-19 at 834 and at 1024, and identical on every member
   page, so this is a shell fix rather than a page fix.

   The arithmetic, so the next change to either number can be checked: the
   header's content box is 240 - 2x16 padding = 208px, less the 40px mark and
   the 10px gap = 158px for the text, which needs 167 x (20/22) = 152px at
   1.25rem. 6px of margin. Scoped to >=769px because below that the sidebar is
   a 280px drawer where the wordmark already fits at full size and must not be
   shrunk for nothing.

   NOT fixed here and still clipped: the foldable-landscape rule far below
   (min-width: 1024 and max-height: 700) takes the sidebar to 200px, which is
   narrower than this band and outside the viewport heights this bug was
   reported at. */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar-header[b-dx84giicde] {
        padding: 0 1rem;
    }

    .logo-link[b-dx84giicde] {
        gap: 0.625rem;
    }

    .logo-image[b-dx84giicde] {
        width: 40px;
        height: 40px;
    }

    .logo-text[b-dx84giicde] {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    /* Show mobile header */
    /* #7862 - flat, for the same reason .main-header above is. This bar carries
       the wordmark (.logo-primary / .logo-secondary) and the session-timer
       button, and its gradient is what made all three undecidable to axe on
       EVERY signed-in route whenever the mobile header is the one on screen -
       which includes the accessibility gate's own 1280x720 viewport, because
       the short-landscape rule below swaps to this header at 720px tall.
       Measured after the flatten: the wordmark's white half 18.46:1, its gold
       half 5.66:1, the timer button's label 9.54:1 - none of which axe would
       previously judge at all. */
    .mobile-header[b-dx84giicde] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0 var(--space-md);
        background: var(--ascend-bg-card);
        border-bottom: 1px solid rgba(49, 221, 227, 0.15);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--z-fixed);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    }

    /* Convert sidebar to slide-out drawer */
    .sidebar[b-dx84giicde] {
        width: 280px;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        z-index: var(--z-popover);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.open[b-dx84giicde] {
        transform: translateX(0);
    }

    /* Show the explicit close button in drawer mode */
    .drawer-close-btn[b-dx84giicde] {
        display: flex;
    }

    /* Overlay — hidden by default, drawer.js sets display:block when .sidebar.open */
    .drawer-overlay[b-dx84giicde] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: var(--z-modal-backdrop);
    }

    /* Main content adjustments */
    .main-content[b-dx84giicde] {
        margin-left: 0;
        padding-top: 60px;
        --app-content-top: calc(60px + var(--space-md));
    }

    .main-header[b-dx84giicde] {
        display: none;
    }

    .content-wrapper[b-dx84giicde] {
        padding: var(--space-md);
    }

    .page-title[b-dx84giicde] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    /* #8328 - 16px of side gutter, not 8. The vertical padding stays
       var(--space-sm) (vertical space is the scarce axis on a phone); only the
       SIDE edge changes, and it comes from the shared token in app.css so the
       four shells cannot drift apart again. */
    .content-wrapper[b-dx84giicde] {
        padding: var(--space-sm) var(--page-gutter-phone);
    }

    .mobile-logo-text[b-dx84giicde] {
        font-size: 1rem;
    }

    /* Two-row mobile header: brand row stays clean (hamburger | logo |
       profile); timer + sound toggle wrap to a second row centered below.
       Avoids fighting for horizontal space on phones — Joe-flagged
       2026-05-01: 'opt for putting things below the brand if it makes
       more sense for design'. flex-wrap on the header lets the timer-slot
       break to its own line. order: 3 puts it after hamburger/logo (1) +
       user-link (2), and flex-basis: 100% forces a full-width second row. */
    .mobile-header[b-dx84giicde] {
        flex-wrap: wrap;
        height: auto;
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
        row-gap: var(--space-sm);
    }
    .hamburger-btn[b-dx84giicde],
    .mobile-logo-link[b-dx84giicde] {
        order: 1;
    }
    .mobile-user-link[b-dx84giicde] {
        order: 2;
    }
    .mobile-timer-slot[b-dx84giicde] {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        margin-right: 0;
    }
    /* Bump the main-content top padding so the now-taller mobile header
       (60px → ~108px) doesn't slide under the page content. */
    .main-content[b-dx84giicde] {
        padding-top: 108px;
        --app-content-top: calc(108px + var(--space-sm));
    }
}

/* Landscape on short viewports — force drawer layout so the sidebar
   doesn't eat horizontal space on a hand-held device.
   Threshold 720 catches:
     - Phone landscape (<=460 tall)
     - Z Fold inner screen landscape (~660-720 tall)
     - Z Flip, foldable cover landscape (very short)
   And still excludes:
     - iPad Mini landscape (744 tall)
     - iPad landscape (820+)
     - Desktop/laptop (always taller)
   A device with width > height AND height <= 720 is almost certainly
   something you're holding, not sitting in front of. */
@media (max-height: 720px) and (orientation: landscape) {
    .mobile-header[b-dx84giicde] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        padding: 0 var(--space-md);
        /* #7862 - flat, matching the 768px rule above. */
        background: var(--ascend-bg-card);
        border-bottom: 1px solid rgba(49, 221, 227, 0.15);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--z-fixed);
    }

    .sidebar[b-dx84giicde] {
        width: 280px;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        z-index: var(--z-popover);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.open[b-dx84giicde] {
        transform: translateX(0);
    }

    /* Show the explicit close button in short-landscape drawer too */
    .drawer-close-btn[b-dx84giicde] {
        display: flex;
        top: 0.35rem;
        right: 0.35rem;
        width: 32px;
        height: 32px;
    }

    /* In short-landscape the mobile-header at the top already shows the
       brand and user avatar. The sidebar-header and sidebar-footer
       duplicate that information — hide both so the drawer's limited
       vertical space (358px minus 48px mobile-header = 310px) is given
       entirely to nav links. */
    .sidebar-header[b-dx84giicde],
    .sidebar-footer[b-dx84giicde] {
        display: none;
    }

    .sidebar-nav[b-dx84giicde] {
        padding: 0.5rem 0.6rem;
        gap: 0.15rem;
    }

    .nav-link[b-dx84giicde] {
        padding: 0.35rem 0.75rem;
        font-size: 0.82rem;
    }

    .nav-icon[b-dx84giicde] {
        font-size: 0.95rem;
    }

    .nav-section-label[b-dx84giicde] {
        padding: 0.35rem 0.75rem 0.15rem;
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    .nav-pillar-label[b-dx84giicde] {
        padding: 0.3rem 0.75rem 0.1rem;
    }

    .nav-pillar-label .pillar-phrase[b-dx84giicde] {
        font-size: 0.72rem;
    }

    .nav-pillar-label .pillar-technical[b-dx84giicde] {
        font-size: 0.52rem;
    }

    .main-content[b-dx84giicde] {
        margin-left: 0;
        padding-top: 48px;
        --app-content-top: calc(48px + var(--space-sm));
    }

    .main-header[b-dx84giicde] {
        display: none;
    }

    /* #8328 - the same 16px side gutter. A phone in landscape is still a
       phone: this band is what a handheld matches once it is turned, so
       leaving it at 8px would have put the gutter back for exactly the
       devices the fix is for. */
    .content-wrapper[b-dx84giicde] {
        padding: var(--space-sm) var(--page-gutter-phone);
    }
}

/* Foldable inner screen landscape — tablet-width but phone-height.
   Reduce spacing, compact header, keep sidebar but narrower.
   min-width raised from 768 to 1024 so phones in landscape (typically
   ~900 wide) fall through to the drawer rule above instead of matching
   here — phones should be in drawer mode, not a narrow fixed sidebar. */
@media (min-width: 1024px) and (max-height: 700px) and (orientation: landscape) {
    .sidebar[b-dx84giicde] {
        width: 200px;
    }

    .main-content[b-dx84giicde] {
        margin-left: 200px;
        /* #7911 - this band always sits inside the short-landscape band above
           (max-height 700 is inside 720), so the 48px header still applies; the
           padding below keeps its space-sm top. Re-stated because this block
           moves .content-wrapper's padding. */
        --app-content-top: calc(48px + var(--space-sm));
    }

    .sidebar-header[b-dx84giicde] {
        padding: 0.5rem 1rem;
    }

    .nav-link[b-dx84giicde] {
        padding: 0.4rem 1rem;
        font-size: 0.82rem;
    }

    .nav-section-label[b-dx84giicde], .nav-pillar-label[b-dx84giicde] {
        padding: 0.3rem 1rem;
    }

    /* Foldable landscape: shrink dual-register pillar labels to save vertical space */
    .nav-pillar-label .pillar-phrase[b-dx84giicde] {
        font-size: 0.7rem;
    }

    .nav-pillar-label .pillar-technical[b-dx84giicde] {
        font-size: 0.5rem;
    }

    /* #8328 - already 16px horizontally; restated through the token so a
       future change to the gutter reaches every shell at once. */
    .content-wrapper[b-dx84giicde] {
        padding: var(--space-sm) var(--page-gutter-phone);
    }

    .sidebar-footer[b-dx84giicde] {
        padding: 0.5rem 1rem;
    }
}


/* #7736 — touch-target floor for the shell. See the policy block in app.css.

   This file owns the controls that appear on EVERY member surface, so it is
   where the count actually moves: ~26 .nav-link rows plus the group summaries
   are 33-35px tall, and they alone were most of the 35-70 small targets
   counted per page at 390px. The nav links are already flex rows with
   centered content, so a min-height grows the tap row without moving the
   label. .app-footer-link is deliberately NOT here — it is inline text inside
   the footer sentence and is a recorded exception (WCAG 2.5.8 exempts a
   target in a block of text; padding it to 44px would break the line). */
@media (hover: none) and (pointer: coarse) {
    .nav-link[b-dx84giicde],
    .nav-group-summary[b-dx84giicde] {
        min-height: var(--touch-target);
    }

    .mobile-logo-link[b-dx84giicde],
    .mobile-user-link[b-dx84giicde],
    .drawer-close-btn[b-dx84giicde] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}

/* Defect #8528 (D5) - the past-due recovery notice inside WalledShell. As a bare
   child of the walled shell's flex column it stretched to the full viewport
   (x=0, its rounded corners and amber border on the screen edge, about 1430px
   wide at 1440). This slot gives it the same column the hosted page uses
   (PublicPageShell's .public-container: 860px max, with a 32 / 24 / 16px side
   gutter at the same breakpoints), so at phone width it sits at x=16 exactly as
   it does in the normal shell. No vertical padding: an empty slot (flag off, or
   not past due) is zero height. The banner owns its own look; only its outer
   spacing is set here, through ::deep because it is a child component. */
.walled-pastdue-slot[b-dx84giicde] {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    box-sizing: border-box;
    flex-shrink: 0;
}

.walled-pastdue-slot[b-dx84giicde]  .pastdue-note {
    margin: var(--space-lg) 0 0;
}

@media (max-width: 768px) {
    .walled-pastdue-slot[b-dx84giicde] {
        padding: 0 var(--space-lg);
    }
}

@media (max-width: 480px) {
    .walled-pastdue-slot[b-dx84giicde] {
        padding: 0 var(--space-md);
    }
}

/* #8715 slice 8715-8, review round 4 walk - /coach-lessons inside the walled
   shell. It is an app page with no gutter of its own (the app shell's
   .content-wrapper supplies one), so as a bare child of .walled-main it sat at
   x=0 at every width. Same padding and column as .content-wrapper, at the same
   breakpoints. */
.walled-page-slot[b-dx84giicde] {
    width: 100%;
    padding: var(--space-xl);
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .walled-page-slot[b-dx84giicde] {
        padding: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .walled-page-slot[b-dx84giicde] {
        padding: var(--space-md);
    }
}

@media (max-width: 480px) {
    .walled-page-slot[b-dx84giicde] {
        padding: var(--space-sm) var(--page-gutter-phone);
    }
}
/* /Components/Layout/OnboardingLayout.razor.rz.scp.css */
/* #6978 - anonymous arrival: the auth-shell chrome (login-page / login-card /
   accent-line / logo-section) is global (#5848, app.css); these style the
   layout's own sign-in body. Own-markup elements carry the scope attribute,
   so plain selectors apply (no ::deep). Tokens per the styling guide. */
.signin-body[b-t2o14wt1ab] {
    padding: 0 2rem 2.5rem;
    text-align: center;
}

.signin-heading[b-t2o14wt1ab] {
    margin: 0 0 0.75rem;
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ascend-text-light);
}

.signin-note[b-t2o14wt1ab] {
    margin: 0 0 1.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.signin-btn[b-t2o14wt1ab] {
    display: inline-block;
    padding: 0.9rem 2.25rem;
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: #06222b;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: all 0.2s ease;
}

.signin-btn:hover[b-t2o14wt1ab] {
    background: linear-gradient(135deg, var(--ascend-accent-light) 0%, var(--ascend-accent) 100%);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

.onboarding-layout[b-t2o14wt1ab] {
    min-height: 100vh;
    background: #0f172a;
    background-image: radial-gradient(ellipse at 50% 0%, rgba(49, 221, 227, 0.06) 0%, transparent 60%),
                       radial-gradient(ellipse at 80% 50%, rgba(184, 133, 54, 0.04) 0%, transparent 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl);
}

@media (max-width: 768px) {
    .onboarding-layout[b-t2o14wt1ab] {
        padding: var(--space-md);
    }
}

@media (max-width: 480px) {
    /* #8328 - 16px of side gutter from the shared token. Onboarding is the
       FIRST thing a new member sees on a phone, so an 8px edge here is the
       worst place to have one. */
    .onboarding-layout[b-t2o14wt1ab] {
        padding: var(--space-sm) var(--page-gutter-phone);
    }
}
/* /Components/Layout/WalledCheckoutLayout.razor.rz.scp.css */
/* PBI #6825 - the shell chrome lives in Shared/WalledShell.razor.css. Only the
   layout's OWN markup (the anonymous-handshake note passed as child content,
   which carries THIS component's scope attribute) is styled here. */

/* margin: auto centers the note in both axes inside the shell's flex-column
   main region. */
.walled-login-note[b-o7e1duqmc3] {
    margin: auto;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
}
/* /Components/Pages/Account/AccessEnded.razor.rz.scp.css */
/* #6136 — scoped styling for the value-led /access-ended screen. The login-card
   shell (login-page / login-container / login-card / accent-line / logo-section)
   is styled globally; this styles the be-* value-led content to match the brand
   dark theme (cyan --ascend-accent, gold --ascend-secondary). */

/* #6979 - the composed card body. Owns the shared horizontal/bottom padding
   (the global login-card has none of its own) and sets the CENTERED rhythm the
   shell already follows (wordmark, CTA, footer). be-next and be-coach opt back
   into left alignment deliberately below. */
.be-body[b-iqaifzpulp] {
    padding: 0 2rem 2.5rem;
    text-align: center;
}

/* #6979 - the heading was a bare h1: the global h1 rule paints
   --ascend-text-primary (#0f172a) - invisible on the dark card - with default
   h1 size/margins opening a dead gap. Explicit scoped rule, brand-consistent
   with the sibling auth-shell headings (condor, white, centered, tight). */
.be-headline[b-iqaifzpulp] {
    margin: 0 0 1rem;
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ascend-text-light);
    text-align: center;
}

/* The placeholder arm's intro copy (the auth-shell .subtitle is per-page). */
.subtitle[b-iqaifzpulp] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.7);
}

/* #8424 - the one factual line naming what ended, in the value-led arm. Calmer
   than .be-progress-headline: it is a statement of fact, not the lead. */
/* #9368 - the walled member's games line reads as the same quiet, factual line. */
.be-ended-line[b-iqaifzpulp],
.be-games-line[b-iqaifzpulp] {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
}

/* #9368 - on the placeholder arm the line follows the ended subtitle (margin 0), so it keeps
   the same gap the arm's next paragraph does instead of running into it. */
.subtitle + .be-games-line[b-iqaifzpulp] {
    margin-top: 0.75rem;
}

.be-loading[b-iqaifzpulp] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    color: var(--ascend-accent);
}

/* The weak-spot chip — a calm pill, gold accent on the focus name. */
.be-focus-chip[b-iqaifzpulp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto 1.25rem;
    padding: 0.5rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.be-focus-chip i[b-iqaifzpulp] {
    color: var(--ascend-secondary);
}

.be-focus-chip strong[b-iqaifzpulp] {
    color: #ffffff;
}

/* Progress — the value lead. Largest, brightest beat on the screen. */
.be-progress[b-iqaifzpulp] {
    margin-bottom: 1.5rem;
}

.be-progress-headline[b-iqaifzpulp] {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    line-height: 1.5;
    color: #ffffff;
}

.be-progress-detail[b-iqaifzpulp] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* Next step — a highlighted card so the one action stands out. */
.be-next[b-iqaifzpulp] {
    margin: 0 0 1.5rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.08), rgba(184, 133, 54, 0.06));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    text-align: left;
}

.be-next-label[b-iqaifzpulp] {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ascend-accent);
    margin-bottom: 0.5rem;
}

.be-next-tool[b-iqaifzpulp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: #ffffff;
}

.be-next-tool i[b-iqaifzpulp] {
    color: var(--ascend-accent);
    flex-shrink: 0;
}

.be-next-tool strong[b-iqaifzpulp] {
    color: #ffffff;
}

.be-next-hub[b-iqaifzpulp] {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}

.be-next-reason[b-iqaifzpulp] {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

/* Coach line — quiet, italic, gold quote bar; deliberately left-aligned
   inside the centered be-body (quote treatment reads left). */
.be-coach[b-iqaifzpulp] {
    display: flex;
    gap: 0.6rem;
    margin: 0 0 1.75rem;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    border-left: 2px solid var(--ascend-secondary);
    padding-left: 0.75rem;
    text-align: left;
}

.be-coach i[b-iqaifzpulp] {
    color: var(--ascend-secondary);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Actions — primary CTA then the quiet WilcoChess + sublinks. */
.be-actions[b-iqaifzpulp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

/* #6180 - geometry only. The fill and text color belong to the global
   .btn-primary (the cyan CTA in css/SharedPages.css, with app.css's :hover),
   the same treatment the Home hero CTA wears. This rule used to restate them
   as literal hex (and a near-black #06222b text the global rule never used),
   a private copy with nothing keeping it in step with its owner. */
.be-actions .btn-primary[b-iqaifzpulp] {
    display: inline-block;
    width: 100%;
    padding: 0.9rem 1.5rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: all 0.2s ease;
}

.be-actions .btn-primary:hover[b-iqaifzpulp] {
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

.be-wilco[b-iqaifzpulp] {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

.be-sublinks[b-iqaifzpulp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.82rem;
}

.be-sub[b-iqaifzpulp] {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.be-sub:hover[b-iqaifzpulp] {
    color: var(--ascend-accent);
}

.be-dot[b-iqaifzpulp] {
    color: rgba(255, 255, 255, 0.3);
}

/* #8099 review round 1 - the walled student's paused coach relationships, under the page's own
   card. Left-aligned like the share page that also hosts the card. */
.be-paused-coaches[b-iqaifzpulp] {
    margin-top: 1.5rem;
    text-align: left;
}
/* /Components/Pages/Account/ChangePassword.razor.rz.scp.css */
/* #7438 - one narrow form. Inputs are the global .form-input from app.css
   (rendered by InputText, so the sizing below needs ::deep to reach them). */
.change-password-page[b-sqcqfv8jo3] {
    max-width: 36rem;
}

.form-group[b-sqcqfv8jo3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.form-group label[b-sqcqfv8jo3] {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

[b-sqcqfv8jo3] .form-input {
    width: 100%;
    font-size: 0.95rem;
    border-width: 2px;
}

.no-password-note[b-sqcqfv8jo3] {
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.form-actions[b-sqcqfv8jo3] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* #7441 - the global `a` rule paints links --ascend-primary (#042047, the deep
   navy), which is the BRAND colour and reads fine on the light body. This link
   sits inside a dark Card (--ascend-bg-card, #0a1628), where navy-on-navy is
   effectively invisible - the link was live in production that way, because the
   `password-reset` flag is Enabled. The token for an interactive element on a
   dark surface is --ascend-accent, which is what every sibling account page
   (ForgotPassword, ResetPassword, ConfirmEmail) already uses for its own
   `.back-link`. No new colour is introduced.

   NOTE for anyone re-checking this with axe-core: axe ABSTAINS on this element
   rather than failing it - the global `a::after` gradient hover bar makes the
   background undeterminable, so the finding lands in the INCOMPLETE bucket
   ("pseudoContent") and the violations list reads clean either way. */
.back-link[b-sqcqfv8jo3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ascend-accent);
    font-weight: 600;
    text-decoration: underline;
}

.back-link:hover[b-sqcqfv8jo3] {
    color: var(--ascend-accent-light);
}
/* /Components/Pages/Account/ClubLogin.razor.rz.scp.css */
/* #7548 - shared partner-club sign-in page.

   Deliberately SMALL. The auth-page chrome - .login-page, .login-container,
   .login-card, .accent-line, .logo-section, .logo, .brand-name - is owned by
   app.css, which tells a new auth-style page to use those class names and
   inherit it rather than copy it; the button, the alert and the wordmark are
   the shared components. What is left here is this page's own geometry, and
   every color and font in it is a token, never a literal. */

.member-badge[b-p6dibyax2o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.2), rgba(184, 133, 54, 0.1));
    border: 1px solid rgba(184, 133, 54, 0.4);
    color: var(--ascend-secondary-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 3.125rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 auto 1.5rem;
    width: fit-content;
}

.member-badge[b-p6dibyax2o]  i {
    font-size: 0.875rem;
}

.club-login-title[b-p6dibyax2o] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-p6dibyax2o] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 2rem;
    padding: 0 2rem;
}

.sso-section[b-p6dibyax2o] {
    padding: 0 2rem 2rem;
}

.login-footer[b-p6dibyax2o] {
    padding: 2rem;
    text-align: center;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
}

.login-footer p[b-p6dibyax2o] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.5rem;
}

.login-footer a[b-p6dibyax2o] {
    color: var(--ascend-accent);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.login-footer a:hover[b-p6dibyax2o] {
    color: var(--ascend-accent-light);
    text-decoration: underline;
}

.login-footer a[b-p6dibyax2o]  i {
    font-size: 0.75rem;
}

@media (max-width: 48rem) {
    .club-login-title[b-p6dibyax2o] {
        font-size: 1.5rem;
    }

    .sso-section[b-p6dibyax2o] {
        padding: 0 1.5rem 2rem;
    }
}
/* /Components/Pages/Account/ConfirmEmail.razor.rz.scp.css */
/* Email confirmation. Auth-shell chrome lives in wwwroot/app.css per PBI
   #5848 dedup. This file keeps the page-specific extras + the
   card-padding-bottom override. */

.confirm-card[b-j8vh0oi509] {
    padding-bottom: 3rem;
}

.loading-section[b-j8vh0oi509] {
    text-align: center;
    padding: 0 2rem 2rem;
}

.spinner-icon[b-j8vh0oi509] {
    margin-bottom: 2rem;
}

.spinner-icon[b-j8vh0oi509]  i {
    font-size: 40px;
}

.success-icon[b-j8vh0oi509],
.error-icon[b-j8vh0oi509] {
    text-align: center;
    padding: 0 2rem 2rem;
}

.icon-circle[b-j8vh0oi509] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    animation: scaleIn-b-j8vh0oi509 0.5s ease;
}

.icon-circle.success[b-j8vh0oi509] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(16, 185, 129, 0.2));
    border-color: rgba(49, 221, 227, 0.4);
}

.icon-circle.success[b-j8vh0oi509]  i {
    font-size: 40px;
}

.icon-circle.error[b-j8vh0oi509] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border-color: rgba(239, 68, 68, 0.4);
}

.icon-circle.error[b-j8vh0oi509]  i {
    font-size: 40px;
}

@keyframes scaleIn-b-j8vh0oi509 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.confirm-card h1[b-j8vh0oi509] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-j8vh0oi509] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 2rem;
    padding: 0 2rem;
}

.message-section[b-j8vh0oi509] {
    padding: 0 2rem 2rem;
}

.action-section[b-j8vh0oi509] {
    padding: 0 2rem 2rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.success-text[b-j8vh0oi509] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    margin: 0;
}

.alert[b-j8vh0oi509] {
    margin: 0 2rem 2rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

.alert-error[b-j8vh0oi509] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.help-section[b-j8vh0oi509] {
    padding: 0 2rem 2rem;
    text-align: center;
}

.help-title[b-j8vh0oi509] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0.5rem;
}

.help-text[b-j8vh0oi509] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.help-text a[b-j8vh0oi509] {
    color: #31DDE3;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.help-text a:hover[b-j8vh0oi509] {
    color: #42e8ed;
    text-decoration: underline;
}

.footer-section[b-j8vh0oi509] {
    padding: 2rem 2rem 0;
    text-align: center;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    margin-top: 2rem;
}

.back-link[b-j8vh0oi509] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
}

.back-link:hover[b-j8vh0oi509] {
    color: #31DDE3;
}

.back-link[b-j8vh0oi509]  i {
    font-size: 14px;
}

@media (max-width: 768px) {
    .confirm-card h1[b-j8vh0oi509] {
        font-size: 1.75rem;
    }

    .icon-circle[b-j8vh0oi509] {
        width: 60px;
        height: 60px;
    }

    .icon-circle[b-j8vh0oi509]  i {
        font-size: 30px;
    }

    .spinner-icon[b-j8vh0oi509]  i {
        font-size: 30px;
    }
}
/* /Components/Pages/Account/EmailUnsubscribe.razor.rz.scp.css */
.unsub-page[b-hx4dzv08y9] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.unsub-card[b-hx4dzv08y9] {
    width: min(95vw, 480px);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.logo-section[b-hx4dzv08y9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.logo[b-hx4dzv08y9] {
    height: 56px;
    width: auto;
}

/* Two-tone wordmark rendered by the shared <Wordmark /> component; the heading
   only sets face/size and the tracking custom property (#6355). */
.brand-name[b-hx4dzv08y9] {
    font-family: var(--ascend-font-primary);
    font-size: 1.4rem;
    font-weight: 800;
    --wordmark-tracking: 0.05em;
}

.unsub-card h1[b-hx4dzv08y9] {
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-primary);
    font-size: 1.6rem;
    margin: 0 0 0.75rem;
}

.unsub-card .subtitle[b-hx4dzv08y9] {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    margin: 0 0 1.25rem;
}

.unsub-card .hint[b-hx4dzv08y9] {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    margin: 1.25rem 0 0;
    line-height: 1.6;
}

.unsub-card a[b-hx4dzv08y9] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.unsub-card a:hover[b-hx4dzv08y9] {
    text-decoration: underline;
}

.unsub-btn[b-hx4dzv08y9] {
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    /* Owner canary 2026-07-31 caught this pairing on the guided path; the same
       sweep found it here. Cyan gradient takes the dark text token, as every
       other cyan button in the app does. */
    color: var(--ascend-bg-dark);
    -webkit-text-fill-color: var(--ascend-bg-dark);
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    padding: 0.875rem 2.5rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: all 0.2s ease;
}

.unsub-btn:hover[b-hx4dzv08y9] {
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}
/* /Components/Pages/Account/ForgotPassword.razor.rz.scp.css */
/* #7146 forgot-password. Auth-shell chrome (page wrapper, card, logo, brand)
   lives in wwwroot/app.css per PBI #5848 dedup - this file keeps only the
   page-specific extras. */

.confirm-card[b-7yazdlvxf7] {
    padding-bottom: 1rem;
}

.confirm-card h1[b-7yazdlvxf7] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-7yazdlvxf7] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 2rem;
    padding: 0 2rem;
}

.form-group[b-7yazdlvxf7] {
    margin-bottom: 1.5rem;
    padding: 0 2rem;
}

.form-group label[b-7yazdlvxf7] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

/* #7266: this page restated the whole dark input treatment privately. Every
   declaration but the width came from the global .form-input in app.css
   (#7258), and two of them had DRIFTED: the border was white at 15% instead
   of the accent cyan at 20%, and the placeholder sat at 0.35 white against
   the global 0.5 - lower contrast than the design system asks for. The global
   values win. ::deep stays because InputText renders the <input>. */
[b-7yazdlvxf7] .form-input {
    width: 100%;
}

.validation-summary[b-7yazdlvxf7] {
    margin: 0 2rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: #fca5a5;
}

[b-7yazdlvxf7] .validation-message {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: #fca5a5;
    margin-top: 0.375rem;
    display: block;
}

.success-icon[b-7yazdlvxf7] {
    text-align: center;
    padding: 0 2rem 2rem;
}

.icon-circle[b-7yazdlvxf7] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    animation: scaleIn-b-7yazdlvxf7 0.5s ease;
}

.icon-circle.success[b-7yazdlvxf7] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(16, 185, 129, 0.2));
    border-color: rgba(49, 221, 227, 0.4);
}

.icon-circle.success[b-7yazdlvxf7]  i {
    font-size: 40px;
}

@keyframes scaleIn-b-7yazdlvxf7 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

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

.help-section[b-7yazdlvxf7] {
    padding: 0 2rem 1rem;
}

.help-text[b-7yazdlvxf7] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 0;
}

.help-text a[b-7yazdlvxf7] {
    color: var(--ascend-accent);
}

.footer-section[b-7yazdlvxf7] {
    padding: 1rem 2rem 2rem;
    text-align: center;
}

.back-link[b-7yazdlvxf7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: var(--ascend-accent);
    text-decoration: none;
    font-weight: 600;
}

.back-link:hover[b-7yazdlvxf7] {
    color: var(--ascend-accent-light);
    text-decoration: underline;
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
/* Sign-in form. Auth-shell chrome lives in wwwroot/app.css per PBI #5848
   dedup. This file keeps page-specific extras + the narrower container
   override. */

.login-container[b-c6b8gg0bai] {
    max-width: 500px;
}

/* Phase 3 (#5996): WilcoChess SSO button shown alongside the email/password
   form once invitation registration is live. It no longer mirrors
   WilcoChessLogin's hand-rolled button - #7309 moved it onto the shared
   <Button> so the two sign-in affordances on this page match. */
/* #7309 - the alternate sign-in block lives outside the EditForm, so it never
   picked up the 2rem side inset every .form-group has. That is the whole 64px
   width gap the owner measured: Sign In 434px, WilcoChess 498px, stacked with an
   "or" between them. Same inset here puts the divider and the partner button on
   exactly the same left and right edges as the form above. */
.login-alt-signin[b-c6b8gg0bai] {
    padding: 0 2rem;
    /* Same 1.5rem as .form-group. Without it the block owns no bottom rhythm and
       the partner button's edge lands exactly on the .login-footer rule - measured
       at a 0px gap. That was survivable while the button ran the full card width
       and read as a band; once it is inset to match Sign In, a narrower button
       touching a wider rule reads as a mistake. */
    margin-bottom: 1.5rem;
}

.login-divider[b-c6b8gg0bai] {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.25rem 0;
    /* #7543 - was rgba(255,255,255,0.4): 3.8:1 measured by axe once the login
       card became measurable. */
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
}
.login-divider[b-c6b8gg0bai]::before,
.login-divider[b-c6b8gg0bai]::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.login-divider span[b-c6b8gg0bai] {
    padding: 0 0.75rem;
}

/* #7309 - .btn-wilcochess is gone. It duplicated the shared button's padding,
   radius, transition and gold gradient by hand and drifted 15px taller; the
   partner button now renders through <Button Variant="Accent">, whose gradient
   is the same --ascend-secondary -> --ascend-secondary-light pair. The only
   thing left to own here is the partner mark.

   The logo is sized in em, not the old fixed 24px, so it tracks the button's
   own text and cannot be what sets the button's height: .ascend-btn's line box
   is 1.5 x 0.9375rem = 22.5px, and 1.25em lands at 18.75px, comfortably inside
   it. A 24px mark overran that box and grew the button past Sign In - which is
   the other half of the height mismatch, and would come straight back if this
   were pinned in px again. */
.provider-logo[b-c6b8gg0bai] {
    width: 1.25em;
    height: 1.25em;
    object-fit: contain;
    flex-shrink: 0;
}

.login-card h1[b-c6b8gg0bai] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-c6b8gg0bai] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 2rem;
    padding: 0 2rem;
}

.alert[b-c6b8gg0bai] {
    margin: 2rem 2rem 0;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

.alert-error[b-c6b8gg0bai] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.form-group[b-c6b8gg0bai] {
    padding: 0 2rem;
    margin-bottom: 1.5rem;
}

.form-group label[b-c6b8gg0bai] {
    display: block;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

/* #7266: everything but the width was a verbatim-ish copy of the global
   .form-input in app.css (#7258) - including a raw 'tablet-gothic' font
   literal and a focus ring at a weaker 10% glow than the global 25%. The
   global rule owns all of it now. ::deep stays because InputText renders the
   <input>. */
[b-c6b8gg0bai] .form-input {
    width: 100%;
}

/* #7146 - forgot-password affordance shares the remember-me row */
.forgot-password-link[b-c6b8gg0bai] {
    margin-left: auto;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: var(--ascend-accent);
    text-decoration: none;
    font-weight: 600;
}

.forgot-password-link:hover[b-c6b8gg0bai] {
    color: var(--ascend-accent-light);
    text-decoration: underline;
}

.checkbox-group[b-c6b8gg0bai] {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.checkbox-group label[b-c6b8gg0bai] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0;
}

[b-c6b8gg0bai] .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #31DDE3;
}

.checkbox-group span[b-c6b8gg0bai] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.login-footer[b-c6b8gg0bai] {
    padding: 2rem;
    text-align: center;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
}

.login-footer p[b-c6b8gg0bai] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.login-footer a[b-c6b8gg0bai] {
    color: #31DDE3;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.login-footer a:hover[b-c6b8gg0bai] {
    color: #42e8ed;
    text-decoration: underline;
}

.validation-summary[b-c6b8gg0bai] {
    margin: 2rem 2rem 0;
    padding: 1rem 1.25rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #fca5a5;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

.validation-summary ul[b-c6b8gg0bai] {
    margin: 0;
    padding-left: 1.5rem;
}

[b-c6b8gg0bai] .validation-message {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8125rem;
    color: #fca5a5;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .login-card h1[b-c6b8gg0bai] {
        font-size: 1.75rem;
    }

    /* #7309 - .login-alt-signin rides with .form-group here for the same reason
       it carries the 2rem inset: the partner button has to keep the same left and
       right edges as Sign In at every width, not just on desktop. */
    .form-group[b-c6b8gg0bai],
    .login-alt-signin[b-c6b8gg0bai],
    .alert[b-c6b8gg0bai],
    .validation-summary[b-c6b8gg0bai] {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}

/* #6914 - restore offer for an account pending deletion. Informational, not an
   error: the credentials were RIGHT, which is why the offer appears at all. */
.restore-offer[b-c6b8gg0bai] {
    margin: 0 2rem 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ascend-secondary);
    border-radius: 12px;
    text-align: left;
}

.restore-offer p[b-c6b8gg0bai] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    margin: 0 0 0.75rem;
}

.restore-offer .restore-offer-headline[b-c6b8gg0bai] {
    color: var(--ascend-secondary-light);
    font-weight: 600;
}

.restore-offer label[b-c6b8gg0bai] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-size: 0.9375rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.restore-offer .restore-offer-hint[b-c6b8gg0bai] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    margin-bottom: 0;
}
/* /Components/Pages/Account/LoginSecondFactor.razor.rz.scp.css */
/* #6760 Phase B - the challenge. Auth-shell chrome (.callback-page, the card,
   the logo, .icon-circle) lives in wwwroot/app.css per PBI #5848 dedup; this
   file keeps only the two forms' layout, the divider between them and the
   subtitle spacing the shell does not set. */
.second-factor-body[b-9gq0jzxj95] {
    padding: 0 2rem 2.5rem;
    text-align: center;
}

/* Text inside the dark card is painted explicitly (the sibling auth pages do
   the same): the inherited --ascend-text-primary is the LIGHT body's navy and
   vanishes on this surface - measured in the headless-Chrome walk, where the
   heading and the trust label rendered invisible. */
.second-factor-body h1[b-9gq0jzxj95] {
    margin: 1rem 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    color: var(--ascend-text-light);
}

.subtitle[b-9gq0jzxj95] {
    margin: 0 0 1.5rem;
    color: var(--ascend-text-secondary);
    line-height: 1.5;
}

.email-callout[b-9gq0jzxj95] {
    display: block;
    margin-top: 0.35rem;
    font-weight: 600;
    color: var(--ascend-accent);
    overflow-wrap: anywhere;
}

.second-factor-form[b-9gq0jzxj95] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.form-group[b-9gq0jzxj95] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-9gq0jzxj95] {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ascend-text-light);
}

[b-9gq0jzxj95] .form-input {
    width: 100%;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    border-width: 2px;
}

/* The trust checkbox: a real 44px touch target, label and box on one line. */
.trust-browser[b-9gq0jzxj95] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    font-size: 0.95rem;
    color: var(--ascend-text-light);
    cursor: pointer;
}

[b-9gq0jzxj95] .trust-browser input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--ascend-accent);
    flex: 0 0 auto;
}

.second-factor-divider[b-9gq0jzxj95] {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
}

.second-factor-divider[b-9gq0jzxj95]::before,
.second-factor-divider[b-9gq0jzxj95]::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.second-factor-divider span[b-9gq0jzxj95] {
    padding: 0 0.75rem;
}

.recovery-details[b-9gq0jzxj95] {
    text-align: left;
}

.recovery-details summary[b-9gq0jzxj95] {
    cursor: pointer;
    padding: 0.5rem 0;
    font-weight: 600;
    color: var(--ascend-accent);
}

.recovery-details[open] summary[b-9gq0jzxj95] {
    margin-bottom: 0.75rem;
}

.help-section[b-9gq0jzxj95] {
    margin-top: 1.75rem;
}

.help-text[b-9gq0jzxj95] {
    margin: 0 0 1rem;
    color: var(--ascend-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.help-text a[b-9gq0jzxj95] {
    color: var(--ascend-accent);
}

.back-link[b-9gq0jzxj95] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ascend-accent);
    font-weight: 600;
    text-decoration: underline;
}

.back-link:hover[b-9gq0jzxj95] {
    color: var(--ascend-accent-light);
}
/* /Components/Pages/Account/MagicLink.razor.rz.scp.css */
/* #6759 magic-link request. Auth-shell chrome (page wrapper, card, logo,
   brand, .icon-circle, .validation-message) lives in wwwroot/app.css per PBI
   #5848 dedup and the #7266 shared-class ownership rule - this file keeps only
   the page-specific extras, mirroring ForgotPassword.razor.css. */

.confirm-card[b-4jeapvr5lv] {
    padding-bottom: 1rem;
}

.confirm-card h1[b-4jeapvr5lv] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-4jeapvr5lv] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 2rem;
    padding: 0 2rem;
}

.form-group[b-4jeapvr5lv] {
    margin-bottom: 1.5rem;
    padding: 0 2rem;
}

.form-group label[b-4jeapvr5lv] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

/* The global .form-input in app.css (#7258) owns the treatment; ::deep because
   InputText renders the <input>. */
[b-4jeapvr5lv] .form-input {
    width: 100%;
}

.validation-summary[b-4jeapvr5lv] {
    margin: 0 2rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: #fca5a5;
}

.success-icon[b-4jeapvr5lv] {
    text-align: center;
    padding: 0 2rem 2rem;
}

.help-section[b-4jeapvr5lv] {
    padding: 0 2rem 1rem;
}

.help-text[b-4jeapvr5lv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 0;
}

.footer-section[b-4jeapvr5lv] {
    padding: 1rem 2rem 2rem;
    text-align: center;
}

.back-link[b-4jeapvr5lv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: var(--ascend-accent);
    text-decoration: none;
    font-weight: 600;
}

.back-link:hover[b-4jeapvr5lv] {
    color: var(--ascend-accent-light);
    text-decoration: underline;
}
/* /Components/Pages/Account/MagicLinkConfirm.razor.rz.scp.css */
/* #6759 magic-link confirm. Auth-shell chrome (page wrapper, card, logo,
   brand, .icon-circle) lives in wwwroot/app.css per PBI #5848 dedup and the
   #7266 shared-class ownership rule - this file keeps only the page-specific
   extras, mirroring ResetPassword.razor.css. */

.confirm-card[b-ac0p2rh9ff] {
    padding-bottom: 1rem;
}

.confirm-card h1[b-ac0p2rh9ff] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-ac0p2rh9ff] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 0.5rem;
    padding: 0 2rem;
}

/* The account the button signs in - the one thing the person must be able to
   read before committing. */
.email-callout[b-ac0p2rh9ff] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin: 0 0 2rem;
    padding: 0 2rem;
    word-break: break-all;
}

.form-group[b-ac0p2rh9ff] {
    margin-bottom: 1.5rem;
    padding: 0 2rem;
}

.success-icon[b-ac0p2rh9ff],
.error-icon[b-ac0p2rh9ff] {
    text-align: center;
    padding: 0 2rem 2rem;
}

.action-section[b-ac0p2rh9ff] {
    padding: 0 2rem 2rem;
    text-align: center;
}

.help-section[b-ac0p2rh9ff] {
    padding: 0 2rem 1rem;
}

.help-text[b-ac0p2rh9ff] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 0;
}
/* /Components/Pages/Account/OAuthCallback.razor.rz.scp.css */
/* OAuth provider callback (Lichess, Chess.com). Auth-shell chrome lives
   in wwwroot/app.css per PBI #5848 dedup. This file keeps page-specific
   extras. Default 550px container + no card-padding-bottom override
   inherit from the shared block. */

.processing-section[b-slf1efoob8],
.success-section[b-slf1efoob8],
.error-section[b-slf1efoob8] {
    text-align: center;
    padding: 0 2rem 3rem;
}

.icon-circle[b-slf1efoob8] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(49, 221, 227, 0.4);
    margin-bottom: 2rem;
    animation: scaleIn-b-slf1efoob8 0.5s ease;
}

.icon-circle[b-slf1efoob8]  i {
    font-size: 40px;
}

.icon-circle.success[b-slf1efoob8] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(16, 185, 129, 0.2));
    border-color: rgba(49, 221, 227, 0.4);
}

.icon-circle.error[b-slf1efoob8] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border-color: rgba(239, 68, 68, 0.4);
}

@keyframes scaleIn-b-slf1efoob8 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.callback-card h1[b-slf1efoob8] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.subtitle[b-slf1efoob8] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.action-section[b-slf1efoob8] {
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .callback-card h1[b-slf1efoob8] {
        font-size: 1.75rem;
    }

    .icon-circle[b-slf1efoob8] {
        width: 60px;
        height: 60px;
    }

    .icon-circle[b-slf1efoob8]  i {
        font-size: 30px;
    }
}
/* /Components/Pages/Account/Passkeys.razor.rz.scp.css */
/* #6760 Phase B - passkey management. Cards, buttons and the page shell are
   the shared components; inputs are the global .form-input from app.css
   (needs ::deep to reach the rendered element). */
.passkeys-page[b-hcjdmoc8kd] {
    max-width: 42rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

[b-hcjdmoc8kd] .passkeys-card {
    width: 100%;
}

.lede[b-hcjdmoc8kd] {
    margin: 0 0 1rem;
    color: var(--ascend-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.form-group[b-hcjdmoc8kd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.form-group label[b-hcjdmoc8kd] {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

[b-hcjdmoc8kd] .form-input {
    width: 100%;
    font-size: 0.95rem;
    border-width: 2px;
}

.field-hint[b-hcjdmoc8kd] {
    margin: 0;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.passkey-list[b-hcjdmoc8kd],
.recovery-code-list[b-hcjdmoc8kd] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.passkey-row[b-hcjdmoc8kd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.passkey-row:first-child[b-hcjdmoc8kd] {
    border-top: 0;
}

.passkey-identity[b-hcjdmoc8kd] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    color: var(--ascend-accent);
}

.passkey-name[b-hcjdmoc8kd] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.passkey-meta[b-hcjdmoc8kd] {
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
}

.passkey-confirm[b-hcjdmoc8kd] {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* The hidden attribute must win over the block display above (and over any
   form default), or the idle confirm form would paint an empty bordered box. */
.passkey-confirm[hidden][b-hcjdmoc8kd],
form[hidden][b-hcjdmoc8kd] {
    display: none;
}

.passkey-confirm-copy[b-hcjdmoc8kd] {
    margin: 0 0 0.85rem;
    line-height: 1.5;
}

/* The ten codes: a two-column grid on anything wider than a phone, one
   column below, in a monospace face so O/0 and I/1 cannot be confused. */
.recovery-code-list[b-hcjdmoc8kd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem 1.5rem;
}

.recovery-code-list code[b-hcjdmoc8kd] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
}

/* Same token as every sibling account page's back link (ChangePassword,
   ForgotPassword, ResetPassword): an interactive element on the dark shell. */
.back-link[b-hcjdmoc8kd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    color: var(--ascend-accent);
    font-weight: 600;
    text-decoration: underline;
}

.back-link:hover[b-hcjdmoc8kd] {
    color: var(--ascend-accent-light);
}

/* #6760 review group C - the CONFIRM IT'S YOU card's recovery-code fallback,
   styled like the challenge page's (LoginSecondFactor.razor.css). */
.step-up-code[b-hcjdmoc8kd] {
    margin-top: 1rem;
}

.step-up-code summary[b-hcjdmoc8kd] {
    cursor: pointer;
    padding: 0.5rem 0;
    font-weight: 600;
    color: var(--ascend-accent);
}

.step-up-code[open] summary[b-hcjdmoc8kd] {
    margin-bottom: 0.75rem;
}
/* /Components/Pages/Account/Register.razor.rz.scp.css */
/* New-user registration form. Auth-shell chrome lives in wwwroot/app.css
   per PBI #5848 dedup. This file keeps page-specific extras + the wider
   container override. */

/* Register form is denser than the standard auth-shell page, so the
   container goes wider to keep two-column form rows readable. */
.register-container[b-c1h50fsr19] {
    max-width: 650px;
}

.register-card h1[b-c1h50fsr19] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-c1h50fsr19] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 2rem;
    padding: 0 2rem;
}

/* #7591 - the "see plans first" line under the subtitle. Quieter than the
   subtitle it follows, and it sits ABOVE the form deliberately: its whole job is
   to be reachable before someone commits to creating an account. Tokens, not
   literals, per the brand rule - the surrounding rule predates that rule and is
   left alone rather than silently restyled here. */
.subtitle-secondary[b-c1h50fsr19] {
    font-size: 0.875rem;
    color: var(--ascend-text-muted);
    margin: -1.25rem 0 1.75rem;
}

.subtitle-secondary a[b-c1h50fsr19] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

.subtitle-secondary a:hover[b-c1h50fsr19] {
    color: var(--ascend-accent-light);
}

.alert[b-c1h50fsr19] {
    margin: 0 2rem 2rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

.alert-error[b-c1h50fsr19] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.validation-summary[b-c1h50fsr19] {
    margin: 0 2rem 2rem;
    padding: 1rem 1.25rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #fca5a5;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

.validation-summary ul[b-c1h50fsr19] {
    margin: 0;
    padding-left: 1.5rem;
}

.form-section[b-c1h50fsr19] {
    padding: 0 2rem;
    margin-bottom: 2rem;
}

.form-section-title[b-c1h50fsr19] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.2);
}

.form-row[b-c1h50fsr19] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group[b-c1h50fsr19] {
    margin-bottom: 1.5rem;
}

.form-group label[b-c1h50fsr19] {
    display: block;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

/* #7266: everything but the width was a verbatim-ish copy of the global
   .form-input in app.css (#7258) - including a raw 'tablet-gothic' font
   literal and a focus ring at a weaker 10% glow than the global 25%. The
   global rule owns all of it now. ::deep stays because InputText renders the
   <input>. */
[b-c1h50fsr19] .form-input {
    width: 100%;
}

.form-hint[b-c1h50fsr19] {
    display: block;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

[b-c1h50fsr19] .validation-message {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8125rem;
    color: #fca5a5;
    margin-top: 0.5rem;
}

.register-footer[b-c1h50fsr19] {
    padding: 2rem;
    text-align: center;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
}

.register-footer p[b-c1h50fsr19] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.register-footer a[b-c1h50fsr19] {
    color: #31DDE3;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.register-footer a:hover[b-c1h50fsr19] {
    color: #42e8ed;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .register-card h1[b-c1h50fsr19] {
        font-size: 1.75rem;
    }

    .form-row[b-c1h50fsr19] {
        grid-template-columns: 1fr;
    }

    .form-section[b-c1h50fsr19],
    .alert[b-c1h50fsr19],
    .validation-summary[b-c1h50fsr19] {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}
/* /Components/Pages/Account/RegistrationSuccess.razor.rz.scp.css */
/* Post-registration success page. Auth-shell chrome lives in
   wwwroot/app.css per PBI #5848 dedup. This file keeps page-specific
   extras + the wider container override. */

.success-container[b-kyg10vwgqe] {
    max-width: 650px;
}

.success-card h1[b-kyg10vwgqe] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-kyg10vwgqe] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 0;
    padding: 0 2rem;
}

.email-section[b-kyg10vwgqe] {
    padding: 2rem;
}

.instruction-text[b-kyg10vwgqe] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    margin: 0 0 1rem;
}

.email-address[b-kyg10vwgqe] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: #31DDE3;
    text-align: center;
    padding: 1rem 1.5rem;
    background: rgba(49, 221, 227, 0.1);
    border-radius: 12px;
    margin: 1rem 0;
    border: 1px solid rgba(49, 221, 227, 0.2);
    word-break: break-all;
}

.divider[b-kyg10vwgqe] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(49, 221, 227, 0.3), transparent);
    margin: 2rem 2rem;
}

.next-steps[b-kyg10vwgqe] {
    padding: 0 2rem 2rem;
}

.next-steps h2[b-kyg10vwgqe] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1.5rem;
    text-align: center;
}

.step[b-kyg10vwgqe] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.step:last-child[b-kyg10vwgqe] {
    margin-bottom: 0;
}

.step-number[b-kyg10vwgqe] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border: 2px solid rgba(49, 221, 227, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #31DDE3;
}

.step-content[b-kyg10vwgqe] {
    flex: 1;
}

.step-content h3[b-kyg10vwgqe] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem;
}

.step-content p[b-kyg10vwgqe] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.help-section[b-kyg10vwgqe] {
    padding: 0 2rem 2rem;
    text-align: center;
}

.help-title[b-kyg10vwgqe] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0.5rem;
}

.help-text[b-kyg10vwgqe] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.help-text a[b-kyg10vwgqe] {
    color: #31DDE3;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.help-text a:hover[b-kyg10vwgqe] {
    color: #42e8ed;
    text-decoration: underline;
}

.footer-section[b-kyg10vwgqe] {
    padding: 2rem;
    text-align: center;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
}

.back-link[b-kyg10vwgqe] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
}

.back-link:hover[b-kyg10vwgqe] {
    color: #31DDE3;
}

.back-link i[b-kyg10vwgqe] {
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .success-card h1[b-kyg10vwgqe] {
        font-size: 1.75rem;
    }

    .icon-circle[b-kyg10vwgqe] {
        width: 60px;
        height: 60px;
    }

    .email-section[b-kyg10vwgqe],
    .next-steps[b-kyg10vwgqe],
    .help-section[b-kyg10vwgqe],
    .footer-section[b-kyg10vwgqe] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .divider[b-kyg10vwgqe] {
        margin: 1.5rem 1.5rem;
    }

    .step[b-kyg10vwgqe] {
        gap: 1rem;
    }

    .step-number[b-kyg10vwgqe] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}
/* /Components/Pages/Account/ResetPassword.razor.rz.scp.css */
/* #7146 reset-password. Auth-shell chrome (page wrapper, card, logo, brand)
   lives in wwwroot/app.css per PBI #5848 dedup - this file keeps only the
   page-specific extras. */

.confirm-card[b-81d43voyz0] {
    padding-bottom: 1rem;
}

.confirm-card h1[b-81d43voyz0] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-81d43voyz0] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 2rem;
    padding: 0 2rem;
}

.form-group[b-81d43voyz0] {
    margin-bottom: 1.5rem;
    padding: 0 2rem;
}

.form-group label[b-81d43voyz0] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

/* #7266: this page restated the whole dark input treatment privately. Every
   declaration but the width came from the global .form-input in app.css
   (#7258), and two of them had DRIFTED: the border was white at 15% instead
   of the accent cyan at 20%, and the placeholder sat at 0.35 white against
   the global 0.5 - lower contrast than the design system asks for. The global
   values win. ::deep stays because InputText renders the <input>. */
[b-81d43voyz0] .form-input {
    width: 100%;
}

.validation-summary[b-81d43voyz0] {
    margin: 0 2rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: #fca5a5;
}

[b-81d43voyz0] .validation-message {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: #fca5a5;
    margin-top: 0.375rem;
    display: block;
}

.success-icon[b-81d43voyz0],
.error-icon[b-81d43voyz0] {
    text-align: center;
    padding: 0 2rem 2rem;
}

.icon-circle[b-81d43voyz0] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    animation: scaleIn-b-81d43voyz0 0.5s ease;
}

.icon-circle.success[b-81d43voyz0] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(16, 185, 129, 0.2));
    border-color: rgba(49, 221, 227, 0.4);
}

.icon-circle.success[b-81d43voyz0]  i {
    font-size: 40px;
}

.icon-circle.error[b-81d43voyz0] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border-color: rgba(239, 68, 68, 0.4);
}

.icon-circle.error[b-81d43voyz0]  i {
    font-size: 40px;
}

.action-section[b-81d43voyz0] {
    padding: 0 2rem 2rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@keyframes scaleIn-b-81d43voyz0 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

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

.help-section[b-81d43voyz0] {
    padding: 0 2rem 1rem;
}

.help-text[b-81d43voyz0] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 0;
}

.footer-section[b-81d43voyz0] {
    padding: 1rem 2rem 2rem;
    text-align: center;
}

.back-link[b-81d43voyz0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: var(--ascend-accent);
    text-decoration: none;
    font-weight: 600;
}

.back-link:hover[b-81d43voyz0] {
    color: var(--ascend-accent-light);
    text-decoration: underline;
}
/* /Components/Pages/Account/WaitlistUnsubscribe.razor.rz.scp.css */
.unsub-page[b-1lzq9lmhy6] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.unsub-card[b-1lzq9lmhy6] {
    width: min(95vw, 480px);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.logo-section[b-1lzq9lmhy6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.logo[b-1lzq9lmhy6] {
    height: 56px;
    width: auto;
}

.brand-name[b-1lzq9lmhy6] {
    font-family: var(--ascend-font-primary);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* letter-spacing trails after every glyph (incl. the last letter of "ASCEND"),
   which renders as a gap before "CHESS". Cancel the trailing track so the
   two-tone segments sit flush (#6193). */
.brand-white[b-1lzq9lmhy6] { color: #fff; margin-right: -0.05em; }
.brand-gold[b-1lzq9lmhy6]  { color: var(--ascend-secondary); }

.unsub-card h1[b-1lzq9lmhy6] {
    color: #fff;
    font-family: var(--ascend-font-primary);
    font-size: 1.6rem;
    margin: 0 0 0.75rem;
}

.unsub-card .subtitle[b-1lzq9lmhy6] {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    margin: 0 0 1.25rem;
}

.unsub-card .hint[b-1lzq9lmhy6] {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.6;
}

.unsub-card a[b-1lzq9lmhy6] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.unsub-card a:hover[b-1lzq9lmhy6] {
    text-decoration: underline;
}
/* /Components/Pages/Account/WilcoChessLogin.razor.rz.scp.css */
.wilcochess-login-page[b-9grf4a568e] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

.wilcochess-login-page[b-9grf4a568e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(49, 221, 227, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.login-container[b-9grf4a568e] {
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 1;
}

.login-card[b-9grf4a568e] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border-radius: 24px;
    border: 1px solid rgba(49, 221, 227, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(49, 221, 227, 0.1) inset;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.accent-line[b-9grf4a568e] {
    height: 4px;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
}

.logo-section[b-9grf4a568e] {
    text-align: center;
    padding: 3rem 2rem 1.5rem;
}

.logo[b-9grf4a568e] {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.brand-name[b-9grf4a568e] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.brand-white[b-9grf4a568e] {
    color: #ffffff;
}

.brand-gold[b-9grf4a568e] {
    color: #B88536;
}

.alpha-badge[b-9grf4a568e] {
    /* #8003 (Sonar css:S4656) - `display: inline-flex` also sat here and was
       overridden by the `display: flex` below, so it never applied. */
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.2), rgba(184, 133, 54, 0.1));
    border: 1px solid rgba(184, 133, 54, 0.4);
    color: var(--ascend-secondary-light);
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 auto 1.5rem;
    width: fit-content;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.alpha-badge[b-9grf4a568e]  i {
    font-size: 14px;
}

.login-card h1[b-9grf4a568e] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-9grf4a568e] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 2rem;
    padding: 0 2rem;
}

.alert[b-9grf4a568e] {
    margin: 0 2rem 2rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

.alert-error[b-9grf4a568e] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-error[b-9grf4a568e]  i {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.sso-section[b-9grf4a568e] {
    padding: 0 2rem 2rem;
}

.btn-wilcochess[b-9grf4a568e] {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #2D5016 0%, #3d6a1e 100%);
    color: #ffffff;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(45, 80, 22, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.btn-wilcochess:hover:not(:disabled)[b-9grf4a568e] {
    background: linear-gradient(135deg, #3d6a1e 0%, #2D5016 100%);
    box-shadow: 0 6px 20px rgba(45, 80, 22, 0.4);
    transform: translateY(-1px);
}

.btn-wilcochess:disabled[b-9grf4a568e] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-wilcochess[b-9grf4a568e]  i {
    font-size: 20px;
}

.provider-logo[b-9grf4a568e] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.login-footer[b-9grf4a568e] {
    padding: 2rem;
    text-align: center;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
}

.login-footer p[b-9grf4a568e] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.5rem;
}

.login-footer a[b-9grf4a568e] {
    color: #31DDE3;
    text-decoration: none;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.login-footer a:hover[b-9grf4a568e] {
    color: #42e8ed;
    text-decoration: underline;
}

.login-footer a[b-9grf4a568e]  i {
    font-size: 12px;
}

@media (max-width: 768px) {
    .login-card h1[b-9grf4a568e] {
        font-size: 1.5rem;
    }

    .logo[b-9grf4a568e] {
        width: 60px;
        height: 60px;
    }

    .brand-name[b-9grf4a568e] {
        font-size: 1.5rem;
    }

    .sso-section[b-9grf4a568e],
    .alert[b-9grf4a568e] {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        padding-left: 0;
        padding-right: 0;
    }

    .sso-section[b-9grf4a568e] {
        padding: 0 1.5rem 2rem;
    }
}
/* /Components/Pages/Admin/AdminAffiliates.razor.rz.scp.css */
/* Affiliate Program - /admin/affiliates management (#6561/#6564). */

.admin-affiliates-page[b-t0apkgbh9e] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.aa-queue[b-t0apkgbh9e] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.aa-application[b-t0apkgbh9e] {
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aa-app-header[b-t0apkgbh9e] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.aa-applicant[b-t0apkgbh9e] {
    font-family: var(--ascend-font-primary);
    font-size: 1.0625rem;
    color: #ffffff;
}

.aa-email[b-t0apkgbh9e] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 0.75rem;
}

.aa-status[b-t0apkgbh9e] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.aa-status-pending[b-t0apkgbh9e] {
    border-color: rgba(49, 221, 227, 0.4);
    color: var(--ascend-accent);
}

.aa-status-approved[b-t0apkgbh9e] {
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.aa-status-declined[b-t0apkgbh9e] {
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.aa-fields[b-t0apkgbh9e] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
}

.aa-fields dt[b-t0apkgbh9e] {
    color: rgba(255, 255, 255, 0.55);
}

.aa-fields dd[b-t0apkgbh9e] {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    white-space: pre-wrap;
}

.aa-dim[b-t0apkgbh9e] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.aa-decide[b-t0apkgbh9e] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aa-note-input[b-t0apkgbh9e] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: #ffffff;
    box-sizing: border-box;
    resize: vertical;
}

.aa-note-input:focus[b-t0apkgbh9e] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
}

.aa-note-input[b-t0apkgbh9e]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.aa-decide-buttons[b-t0apkgbh9e] {
    display: flex;
    gap: 0.75rem;
}

/* #6572 - the Add-affiliate (owner invite) form. */
.aa-invite[b-t0apkgbh9e] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aa-invite-row[b-t0apkgbh9e] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.aa-invite-field[b-t0apkgbh9e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.aa-invite-field label[b-t0apkgbh9e] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.aa-invite-email[b-t0apkgbh9e] {
    width: 18rem;
    max-width: 100%;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    color: #ffffff;
    box-sizing: border-box;
}

.aa-invite-email:focus[b-t0apkgbh9e] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
}

.aa-invite-email[b-t0apkgbh9e]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.aa-invite-success[b-t0apkgbh9e] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: #34d399;
    margin: 0;
}

.aa-roster[b-t0apkgbh9e] {
    overflow-x: auto;
}

.aa-amount[b-t0apkgbh9e] {
    color: var(--ascend-secondary-light);
}

.aa-paid[b-t0apkgbh9e] {
    color: #34d399;
    font-size: 0.875rem;
}

.aa-link-status[b-t0apkgbh9e] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.75);
}

.aa-manage[b-t0apkgbh9e] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.aa-manage-row[b-t0apkgbh9e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.aa-manage-row label[b-t0apkgbh9e] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.aa-manage-inline[b-t0apkgbh9e] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.aa-rate-input[b-t0apkgbh9e] {
    width: 6rem;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    color: #ffffff;
}

.aa-rate-input:focus[b-t0apkgbh9e] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
}

.aa-manage-subtitle[b-t0apkgbh9e] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.85);
    margin: 0.5rem 0 0;
}

.aa-error[b-t0apkgbh9e] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: #fca5a5;
    margin: 0.75rem 0 0;
}

@media (max-width: 640px) {
    .aa-fields[b-t0apkgbh9e] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .aa-fields dd[b-t0apkgbh9e] {
        margin-bottom: 0.5rem;
    }
}

/* #8609 - the per-promoter backfill link in the roster. */
.aa-backfill-link[b-t0apkgbh9e] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: var(--ascend-accent);
    text-decoration: none;
    white-space: nowrap;
}

.aa-backfill-link:hover[b-t0apkgbh9e] {
    text-decoration: underline;
}
/* /Components/Pages/Admin/AdminComps.razor.rz.scp.css */
/* #admin-comp - admin-granted comp list. */
.comp-page[b-ocbeigtr0p] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.comp-add[b-ocbeigtr0p] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* #7266: fill, border, radius and colour came straight from the global
   .form-input in app.css (#7258). The padding went with them - at (0,2,0)
   this selector outranked the global select.form-input padding-right, so the
   comp-type <select> was losing the room its caret is drawn in. */
.comp-add .form-input[b-ocbeigtr0p] {
    width: 100%;
    box-sizing: border-box;
}

.comp-add .btn-primary[b-ocbeigtr0p] {
    width: 100%;
}

@media (min-width: 480px) {
    .comp-add .form-input[b-ocbeigtr0p] {
        width: auto;
        flex: 1 1 220px;
        min-width: 0;
    }

    .comp-add .comp-tier[b-ocbeigtr0p] {
        flex-basis: 160px;
    }

    .comp-add .comp-date[b-ocbeigtr0p] {
        flex-basis: 180px;
    }

    .comp-add .btn-primary[b-ocbeigtr0p] {
        width: auto;
    }
}

.comp-error[b-ocbeigtr0p] {
    color: #ef4444;
    margin: 0;
}

.comp-message[b-ocbeigtr0p] {
    color: #31DDE3;
    margin: 0;
}

.comp-table[b-ocbeigtr0p] {
    width: 100%;
    border-collapse: collapse;
}

.comp-table th[b-ocbeigtr0p] {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.25);
}

.comp-table td[b-ocbeigtr0p] {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
}

.comp-expired td[b-ocbeigtr0p] {
    color: rgba(255, 255, 255, 0.35);
}

.comp-permanent[b-ocbeigtr0p] {
    color: #B88536;
}

.comp-pending[b-ocbeigtr0p] {
    margin-left: 0.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #31DDE3;
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
}

/* #7517 - the delivery state of the ONE invitation for a pending grant.
   Colored by outcome so a held or bounced invite reads as a problem at a
   glance, not as a neutral word in a column. */
.comp-invite[b-ocbeigtr0p] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
    white-space: nowrap;
}

.comp-invite-good[b-ocbeigtr0p] {
    color: #31DDE3;
    border: 1px solid rgba(49, 221, 227, 0.4);
}

.comp-invite-warn[b-ocbeigtr0p] {
    color: #E3B331;
    border: 1px solid rgba(227, 179, 49, 0.45);
}

.comp-invite-bad[b-ocbeigtr0p] {
    color: #E36A6A;
    border: 1px solid rgba(227, 106, 106, 0.45);
}

.comp-invite-none[b-ocbeigtr0p] {
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[b-ocbeigtr0p] .comp-resend-btn {
    margin-left: 0.5rem;
}

.comp-empty[b-ocbeigtr0p] {
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
}

.btn-remove[b-ocbeigtr0p] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    color: var(--ascend-text-light);
    padding: 0.3rem 0.55rem;
    cursor: pointer;
}
/* /Components/Pages/Admin/AdminHub.razor.rz.scp.css */
.admin-hub-page[b-ghum8bnnxk] {
    width: 100%;
}

.admin-grid[b-ghum8bnnxk] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.admin-section[b-ghum8bnnxk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.section-title[b-ghum8bnnxk] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-accent);
    margin: 0;
}

.section-description[b-ghum8bnnxk] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.5rem;
}

.tile-row[b-ghum8bnnxk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
}

@media (min-width: 480px) {
    .tile-row[b-ghum8bnnxk] {
        grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    }
}

.admin-tile[b-ghum8bnnxk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-tile:hover[b-ghum8bnnxk] {
    border-color: rgba(49, 221, 227, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(4, 32, 71, 0.4), 0 0 16px rgba(49, 221, 227, 0.1);
}

.admin-tile .tile-icon[b-ghum8bnnxk] {
    font-size: 1.6rem;
    color: var(--ascend-accent);
    flex-shrink: 0;
}

.tile-meta[b-ghum8bnnxk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.tile-title[b-ghum8bnnxk] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.tile-blurb[b-ghum8bnnxk] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

.go-arrow[b-ghum8bnnxk] {
    color: rgba(49, 221, 227, 0.6);
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.admin-tile:hover .go-arrow[b-ghum8bnnxk] {
    color: var(--ascend-accent);
    transform: translateX(3px);
}

/* Disabled placeholder tile (#6457 social hub): a built-but-not-yet-wired surface.
   Reads as a disabled control - muted, dashed, not-allowed cursor, no hover response. */
.admin-tile-disabled[b-ghum8bnnxk] {
    cursor: not-allowed;
    opacity: 0.55;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.14);
}

.admin-tile-disabled:hover[b-ghum8bnnxk] {
    border-color: rgba(255, 255, 255, 0.14);
    transform: none;
    box-shadow: none;
}

.admin-tile-disabled .tile-icon[b-ghum8bnnxk] {
    color: rgba(255, 255, 255, 0.35);
}

.admin-tile-disabled .tile-title[b-ghum8bnnxk] {
    color: rgba(255, 255, 255, 0.6);
}

.coming-soon-chip[b-ghum8bnnxk] {
    flex-shrink: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}
/* /Components/Pages/Admin/AdminNotifications.razor.rz.scp.css */
.push-page[b-rzl80y5r99] {
    max-width: 640px;
    margin: 0 auto;
}

.push-state[b-rzl80y5r99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem 0.5rem;
}

.push-state h3[b-rzl80y5r99] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    font-size: 1.25rem;
}

.push-state p[b-rzl80y5r99] {
    margin: 0;
    max-width: 46ch;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.push-state-icon[b-rzl80y5r99] {
    color: var(--ascend-secondary);
}

.push-state-icon.push-state-icon-on[b-rzl80y5r99] {
    color: var(--ascend-accent);
}

.push-state[b-rzl80y5r99]  i {
    font-size: 40px;
}

.push-actions[b-rzl80y5r99] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.push-message[b-rzl80y5r99] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
}

.push-message[b-rzl80y5r99]  i {
    flex-shrink: 0;
    font-size: 16px;
}

.push-message-ok[b-rzl80y5r99] {
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: var(--ascend-accent-light);
}

.push-message-error[b-rzl80y5r99] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
/* /Components/Pages/Admin/AffiliateAttributionBackfill.razor.rz.scp.css */
.aab-gate[b-ee1ei7qnky] {
    padding: 1rem;
}

.aab-help[b-ee1ei7qnky] {
    color: var(--ascend-text-secondary);
    margin: 0 0.5rem 0.75rem;
}

.aab-row[b-ee1ei7qnky] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 0.5rem;
}

.aab-row label[b-ee1ei7qnky] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--ascend-text-light);
    flex: 1 1 16rem;
    min-width: 0;
}

.aab-input[b-ee1ei7qnky] {
    background-color: var(--ascend-bg-secondary);
    border: 1px solid var(--ascend-border);
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.75rem 2.25rem 0.75rem 1rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.aab-input:focus[b-ee1ei7qnky] {
    outline: none;
    border-color: var(--ascend-primary);
}

.aab-dim[b-ee1ei7qnky] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: var(--ascend-text-secondary);
    margin: 0.5rem;
}

.aab-error[b-ee1ei7qnky] {
    color: var(--ascend-error);
    margin: 0.5rem;
}

.aab-grid[b-ee1ei7qnky] {
    margin-top: 1rem;
}

.aab-eligible[b-ee1ei7qnky] {
    color: var(--ascend-accent);
    white-space: nowrap;
}

.aab-skipped[b-ee1ei7qnky] {
    color: var(--ascend-text-secondary);
}

.aab-report-title[b-ee1ei7qnky] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-text-light);
    margin: 0 0.5rem 0.75rem;
}
/* /Components/Pages/Admin/AgeReview.razor.rz.scp.css */
/* Defect #8378 - admin age review. Brand tokens only; the shared Card owns all
   .card-* chrome and the shared Button its own, so nothing here touches them. */
.agereview-page[b-b07qmhtz23] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* --- Find --- */
.agereview-find[b-b07qmhtz23] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.agereview-field[b-b07qmhtz23] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 16rem;
    min-width: 0;
}

.agereview-field .form-input[b-b07qmhtz23] {
    width: 100%;
    box-sizing: border-box;
}

.agereview-label[b-b07qmhtz23] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}

.agereview-summary[b-b07qmhtz23] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;
    overflow-wrap: anywhere;
}

.agereview-summary p[b-b07qmhtz23] {
    margin: 0;
}

/* --- Owner-confirmation warning --- */
.agereview-warning[b-b07qmhtz23] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.agereview-warning strong[b-b07qmhtz23] {
    display: block;
    color: var(--ascend-warning);
}

.agereview-warning i[b-b07qmhtz23] {
    font-size: 16px;
    flex-shrink: 0;
    color: var(--ascend-warning);
}

/* --- Messages --- */
.agereview-error[b-b07qmhtz23] {
    margin: 0;
    color: var(--ascend-error);
    font-size: 0.9rem;
}

.agereview-message[b-b07qmhtz23] {
    margin: 0;
    color: var(--ascend-accent);
    font-size: 0.9rem;
}

.agereview-hint[b-b07qmhtz23] {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Cases and record grids --- */
.agereview-who[b-b07qmhtz23] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    overflow-wrap: anywhere;
}

.agereview-email[b-b07qmhtz23] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.9);
}

.agereview-sub[b-b07qmhtz23] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.agereview-status[b-b07qmhtz23] {
    display: inline-block;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
}

.agereview-status-deleting[b-b07qmhtz23] {
    color: rgba(255, 255, 255, 0.6);
}

.agereview-status-overdue[b-b07qmhtz23] {
    color: var(--ascend-warning);
    font-weight: 600;
}

/* #8402 - the case's billing step, on its own line under the status. */
.agereview-billing[b-b07qmhtz23] {
    display: block;
    margin-top: 0.2rem;
}

.agereview-billing-failed[b-b07qmhtz23] {
    color: var(--ascend-warning);
    font-weight: 600;
}

.agereview-actions[b-b07qmhtz23] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* /Components/Pages/Admin/AiModels.razor.rz.scp.css */
.ai-models-page[b-yx1mpbzctf] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ===== Global kill switch ===== */
.kill-switch-card[b-yx1mpbzctf] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.kill-switch-card.kill-active[b-yx1mpbzctf] {
    border-color: rgba(239, 68, 68, 0.7);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3), 0 8px 30px rgba(239, 68, 68, 0.12);
}

.kill-info[b-yx1mpbzctf] { flex: 1; min-width: 0; }

.kill-title[b-yx1mpbzctf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'condor', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

.kill-title[b-yx1mpbzctf]  i { color: #ef4444; }

.kill-desc[b-yx1mpbzctf] {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

.kill-banner[b-yx1mpbzctf] {
    margin-top: 0.6rem;
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.kill-edit[b-yx1mpbzctf] { flex-shrink: 0; }

/* ===== Feature groups ===== */
.model-group[b-yx1mpbzctf] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.model-group-title[b-yx1mpbzctf] {
    margin: 0;
    font-family: 'condor', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #B88536;
}

.model-list[b-yx1mpbzctf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.model-row[b-yx1mpbzctf] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.12);
}

.model-row.row-killed[b-yx1mpbzctf] {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.2);
}

.model-info[b-yx1mpbzctf] { flex: 1; min-width: 0; }

.model-feature[b-yx1mpbzctf] {
    font-family: 'tablet-gothic', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
}

.model-desc[b-yx1mpbzctf] {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.45;
}

.model-meta[b-yx1mpbzctf] {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* #6731 - the card leads with the model the feature actually uses. */
.model-serving[b-yx1mpbzctf] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
}

.serving-model[b-yx1mpbzctf] {
    font-weight: 600;
    color: var(--ascend-accent);
}

.serving-factory[b-yx1mpbzctf] {
    color: rgba(255, 255, 255, 0.45);
}

.model-factory-note[b-yx1mpbzctf] {
    margin-top: 0.15rem;
}

.badge-override[b-yx1mpbzctf] {
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
    font-weight: 600;
}

/* #6731 - explicit premium (Candidate+ only) marker on catalog rows. */
.badge-premium[b-yx1mpbzctf] {
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    background: rgba(184, 133, 54, 0.18);
    color: var(--ascend-secondary-light);
    font-weight: 600;
}

.badge-killed[b-yx1mpbzctf] {
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    font-weight: 600;
}

.model-error[b-yx1mpbzctf] {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: #ef4444;
}

.model-edit[b-yx1mpbzctf] { flex-shrink: 0; display: flex; flex-direction: column; gap: 0.6rem; }

/* #6129 — default + admin-user dropdown stack. */
.model-edit-field[b-yx1mpbzctf] { display: flex; flex-direction: column; gap: 0.25rem; }

.model-edit-label[b-yx1mpbzctf] {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* Admin-user override reads as the gold "canary" affordance, distinct from the default. */
.model-select-admin[b-yx1mpbzctf] { border-color: rgba(184, 133, 54, 0.4); }
.model-select-admin:focus[b-yx1mpbzctf] { border-color: #B88536; box-shadow: 0 0 0 3px rgba(184, 133, 54, 0.12); }

/* ===== Shared select ===== */
.model-select[b-yx1mpbzctf] {
    min-width: 280px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 10px;
    color: #ffffff;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.model-select:focus[b-yx1mpbzctf] {
    outline: none;
    border-color: #31DDE3;
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.model-select:disabled[b-yx1mpbzctf] {
    opacity: 0.5;
    cursor: not-allowed;
}

.model-select option[b-yx1mpbzctf] {
    background: #0f172a;
    color: #ffffff;
}

@media (max-width: 768px) {
    .kill-switch-card[b-yx1mpbzctf], .model-row[b-yx1mpbzctf] {
        flex-direction: column;
        align-items: stretch;
    }
    .model-select[b-yx1mpbzctf] { min-width: 0; width: 100%; }
}

/* ── #6702 model catalog ────────────────────────────────────────────────── */

.catalog-header[b-yx1mpbzctf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.catalog-subtitle[b-yx1mpbzctf] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    max-width: 60ch;
    line-height: 1.5;
}

.catalog-banner[b-yx1mpbzctf] {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    font-size: 0.85rem;
}

.catalog-banner-notice[b-yx1mpbzctf] {
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid var(--ascend-secondary);
    color: rgba(255, 255, 255, 0.85);
}

.catalog-list[b-yx1mpbzctf] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.catalog-row[b-yx1mpbzctf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.catalog-row.row-retired[b-yx1mpbzctf] {
    opacity: 0.55;
}

.catalog-name[b-yx1mpbzctf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: #ffffff;
}

.catalog-vendor[b-yx1mpbzctf] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.catalog-id[b-yx1mpbzctf] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    color: var(--ascend-accent);
    margin: 0.15rem 0 0.25rem;
}

.catalog-usage[b-yx1mpbzctf] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0.25rem;
}

/* #7331 - the row has no "In use" line, so without this the model reads as
   free to retire. Amber, not grey: it is a warning, not metadata. */
.catalog-usage-orphan[b-yx1mpbzctf] {
    color: var(--ascend-warning);
}

.catalog-actions[b-yx1mpbzctf] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.badge-unverified[b-yx1mpbzctf] {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 50px;
    border: 1px solid var(--ascend-secondary);
    color: var(--ascend-secondary-light);
}

.catalog-form[b-yx1mpbzctf] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.catalog-field[b-yx1mpbzctf] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border: none;
    padding: 0;
    margin: 0;
}

.catalog-field-row[b-yx1mpbzctf] {
    display: flex;
    gap: 0.9rem;
}

.catalog-field-row .catalog-field[b-yx1mpbzctf] {
    flex: 1;
}

.catalog-check[b-yx1mpbzctf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
}

.catalog-hint[b-yx1mpbzctf] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.45;
}

@media (max-width: 768px) {
    .catalog-header[b-yx1mpbzctf], .catalog-row[b-yx1mpbzctf], .catalog-field-row[b-yx1mpbzctf] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Admin/AiUsage.razor.rz.scp.css */
.ai-usage-page[b-6mvo4kz59m] {
    max-width: 1100px;
    margin: 0 auto;
}

.filter-row[b-6mvo4kz59m] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.filter-btn[b-6mvo4kz59m] {
    padding: 6px 16px;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.15s ease;
}

.filter-btn:hover[b-6mvo4kz59m] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.filter-btn.active[b-6mvo4kz59m] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.loading-container[b-6mvo4kz59m] {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

.spinner[b-6mvo4kz59m] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(49, 221, 227, 0.2);
    border-top-color: #31DDE3;
    border-radius: 50%;
    animation: spin-b-6mvo4kz59m 0.8s linear infinite;
}

@keyframes spin-b-6mvo4kz59m {
    to { transform: rotate(360deg); }
}

.section-heading[b-6mvo4kz59m] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.2);
}

.usage-table-wrapper[b-6mvo4kz59m] {
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.15);
}

.usage-table[b-6mvo4kz59m] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.usage-table th[b-6mvo4kz59m] {
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(49, 221, 227, 0.15);
}

.usage-table td[b-6mvo4kz59m] {
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.usage-table tbody tr:hover[b-6mvo4kz59m] {
    background: rgba(49, 221, 227, 0.04);
}

.num[b-6mvo4kz59m] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.feature-cell[b-6mvo4kz59m] {
    font-weight: 600;
    color: #ffffff;
}

.model-cell[b-6mvo4kz59m] {
    color: rgba(49, 221, 227, 0.8);
}

.cost-cell[b-6mvo4kz59m] {
    color: var(--ascend-secondary);
}

.error-cell[b-6mvo4kz59m] {
    color: #ef4444;
}

.totals-row[b-6mvo4kz59m] {
    background: rgba(15, 23, 42, 0.4);
}

.totals-row td[b-6mvo4kz59m] {
    border-top: 2px solid rgba(49, 221, 227, 0.2);
    border-bottom: none;
    padding: 12px 14px;
}

@media (max-width: 768px) {
    .filter-row[b-6mvo4kz59m] {
        flex-wrap: wrap;
    }

    .usage-table[b-6mvo4kz59m] {
        font-size: 0.8rem;
    }

    .usage-table th[b-6mvo4kz59m],
    .usage-table td[b-6mvo4kz59m] {
        padding: 8px 10px;
    }
}
/* /Components/Pages/Admin/AlertTriage.razor.rz.scp.css */
/* #6555 - alert-triage inbox. */
.triage-page[b-d2s731tw2t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.triage-toolbar[b-d2s731tw2t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-md) 0;
}

.triage-counts[b-d2s731tw2t] {
    color: rgba(255, 255, 255, 0.7);
}

.triage-include-closed[b-d2s731tw2t] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.triage-grid[b-d2s731tw2t] {
    padding: var(--space-sm);
}

.triage-grid[b-d2s731tw2t]  table {
    width: 100%;
}

.triage-count[b-d2s731tw2t] {
    font-weight: 700;
    color: var(--ascend-accent);
}

.triage-kind[b-d2s731tw2t] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.triage-kind-exception[b-d2s731tw2t] {
    color: var(--ascend-text-light);
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
}

.triage-kind-grounding[b-d2s731tw2t] {
    color: var(--ascend-secondary-light);
    border-color: rgba(184, 133, 54, 0.4);
    background: rgba(184, 133, 54, 0.1);
}

.triage-title[b-d2s731tw2t] {
    color: var(--ascend-text-light);
}

.triage-dim[b-d2s731tw2t] {
    color: rgba(255, 255, 255, 0.5);
}

/* #7258: fill, border, radius and colour were a verbatim restatement of the
   global .form-input and are gone. The tighter padding stays - this select
   sits inside a triage row, not a form - and the right-hand room for the
   caret has to be kept explicitly because this padding outranks the global
   select.form-input padding-right. */
.triage-status[b-d2s731tw2t] {
    padding: 0.4rem 2.25rem 0.4rem 0.6rem;
}

.triage-message[b-d2s731tw2t] {
    padding: 0 var(--space-md) var(--space-md);
    color: var(--ascend-accent);
}

.triage-detail-head[b-d2s731tw2t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-md) 0;
}

.triage-detail-title[b-d2s731tw2t] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    color: var(--ascend-text-light);
    word-break: break-word;
}

.triage-detail-subtitle[b-d2s731tw2t] {
    margin: var(--space-md) 0 0.25rem;
    padding: 0 var(--space-md);
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Bug #9314 - at 344 and 390 every value broke mid-word ("Excepti/on"): the
   whole dd carried word-break: break-word, which collapses a value's
   min-content to one character, so the max-content label column took the room
   and each value broke wherever it met the edge. Now words wrap at spaces, and
   only the id and trace values (.triage-id: fingerprint, reporter GUID,
   correlation id), which are one unbroken token each, may break anywhere.
   minmax(0, 1fr) lets the value column shrink below its longest word, and
   break-word breaks a word only when it cannot fit a line on its own. */
.triage-detail-meta[b-d2s731tw2t] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.25rem 1rem;
    padding: var(--space-md) var(--space-md) 0;
    margin: 0;
}

.triage-detail-meta dt[b-d2s731tw2t] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.triage-detail-meta dd[b-d2s731tw2t] {
    margin: 0;
    color: var(--ascend-text-light);
    overflow-wrap: break-word;
}

.triage-detail-meta dd.triage-id[b-d2s731tw2t] {
    overflow-wrap: anywhere;
}

/* At phone width the label sits above its value, so a value gets the card's
   whole width instead of what the longest label leaves. */
@media (max-width: 480px) {
    .triage-detail-meta[b-d2s731tw2t] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .triage-detail-meta dd[b-d2s731tw2t] {
        margin-bottom: 0.5rem;
    }
}

.triage-mono[b-d2s731tw2t] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

.triage-pre[b-d2s731tw2t] {
    margin: 0.25rem var(--space-md) 0;
    padding: var(--space-sm);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.8);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Pages/Admin/AppSettings.razor.rz.scp.css */
.app-settings-page[b-42dlqvcwyj] {
    max-width: 1100px;
    margin: 0 auto;
}

.setting-list[b-42dlqvcwyj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.setting-row[b-42dlqvcwyj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-left: 3px solid rgba(184, 133, 54, 0.6);
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.6) 0%, rgba(15, 23, 42, 0.5) 100%);
    transition: all 0.15s ease;
}

.setting-row:hover[b-42dlqvcwyj] {
    border-color: rgba(49, 221, 227, 0.3);
    border-left-color: rgba(184, 133, 54, 0.6);
}

.setting-info[b-42dlqvcwyj] {
    flex: 1;
    min-width: 0;
}

.setting-key[b-42dlqvcwyj] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
    word-break: break-word;
}

.setting-description[b-42dlqvcwyj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    margin-bottom: 6px;
}

.setting-meta[b-42dlqvcwyj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.02em;
}

.setting-error[b-42dlqvcwyj] {
    margin-top: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: #f87171;
}

.setting-edit[b-42dlqvcwyj] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.setting-input[b-42dlqvcwyj] {
    width: 140px;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.setting-input:focus[b-42dlqvcwyj] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.setting-input:disabled[b-42dlqvcwyj] {
    opacity: 0.6;
    cursor: not-allowed;
}

.save-btn[b-42dlqvcwyj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2) 0%, rgba(49, 221, 227, 0.1) 100%);
    border: 1px solid rgba(49, 221, 227, 0.4);
    color: #31DDE3;
    transition: all 0.15s ease;
    min-width: 100px;
    justify-content: center;
}

.save-btn:hover:not(:disabled)[b-42dlqvcwyj] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.3) 0%, rgba(49, 221, 227, 0.15) 100%);
    box-shadow: 0 0 16px rgba(49, 221, 227, 0.2);
}

.save-btn:disabled[b-42dlqvcwyj] {
    cursor: not-allowed;
    opacity: 0.4;
}

.save-btn[b-42dlqvcwyj]  i {
    font-size: 16px;
}

@media (max-width: 768px) {
    .setting-row[b-42dlqvcwyj] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .setting-edit[b-42dlqvcwyj] {
        align-self: stretch;
    }

    /* Let the value field flex with the row instead of a fixed 140px,
       so input + Save never overflow at 320px. */
    .setting-input[b-42dlqvcwyj] {
        flex: 1;
        width: auto;
        min-width: 0;
    }
}
/* /Components/Pages/Admin/BoardScanCorrections.razor.rz.scp.css */
/* #9179 - the scan correction readout. Chrome only: Card, StatsRow, StatItem, EmptyState and QuickGrid
   own their own styling, and .card-header / .card-title / .card-body are the shared Card's and are
   never redefined here. Measurement, so nothing is colored as a win or a loss: the square map is
   shaded by count in the accent color alone, with the count printed on every square. */

.bsc-page[b-inrnvy5be2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.bsc-range[b-inrnvy5be2] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.bsc-field[b-inrnvy5be2] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
}

.bsc-date[b-inrnvy5be2] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    padding: 0.5rem 0.75rem;
}

.bsc-date:focus[b-inrnvy5be2] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

/* The presets sit on the shared .action-row (a full-width column on a phone, a row above 480px). */

.bsc-preset[b-inrnvy5be2] {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 35%, transparent);
    border-radius: 50px;
    color: var(--ascend-accent);
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding: 0.35rem 0.9rem;
}

.bsc-preset:hover[b-inrnvy5be2] {
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
    border-color: var(--ascend-accent);
}

.bsc-note[b-inrnvy5be2] {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    margin: 0.75rem 0 0;
}

.bsc-caveat[b-inrnvy5be2],
.bsc-caveat-line[b-inrnvy5be2] {
    display: block;
    color: #f0d9a8;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    margin: 0.5rem 0 0;
}

.bsc-caveat[b-inrnvy5be2] {
    margin: 0;
}

.bsc-defs[b-inrnvy5be2] {
    margin: 0;
}

.bsc-defs dt[b-inrnvy5be2] {
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0.9rem 0 0.25rem;
}

.bsc-defs dt:first-child[b-inrnvy5be2] {
    margin-top: 0;
}

.bsc-defs dd[b-inrnvy5be2] {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
    line-height: 1.5;
}

.bsc-split-title[b-inrnvy5be2] {
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 1.1rem 0 0.5rem;
}

.bsc-kind[b-inrnvy5be2] {
    color: #ffffff;
}

[b-inrnvy5be2] td.bsc-num,
[b-inrnvy5be2] th.bsc-num {
    text-align: right;
}

.bsc-board[b-inrnvy5be2] {
    display: grid;
    grid-template-rows: repeat(8, auto);
    width: min(100%, 22rem);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 25%, transparent);
    border-radius: 12px;
    overflow: hidden;
}

.bsc-board-row[b-inrnvy5be2] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

.bsc-square[b-inrnvy5be2] {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--ascend-font-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.bsc-square.dark[b-inrnvy5be2] {
    background: rgba(255, 255, 255, 0.1);
}

/* The shading: one accent overlay whose opacity is the square's share of the most-fixed square. */
.bsc-square[b-inrnvy5be2]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ascend-accent) 35%, transparent);
    opacity: var(--bsc-weight, 0);
}

.bsc-square-name[b-inrnvy5be2] {
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.6rem;
}

.bsc-square-count[b-inrnvy5be2] {
    position: relative;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
}

@media (hover: none) and (pointer: coarse) {
    .bsc-preset[b-inrnvy5be2] {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/Admin/CampaignSelector.razor.rz.scp.css */
.campaign-bar[b-lkkgqjhrst] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.campaign-bar-row[b-lkkgqjhrst] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.campaign-bar-label[b-lkkgqjhrst] {
    font-family: var(--ascend-font-primary, 'condor');
    color: #31DDE3;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.campaign-select[b-lkkgqjhrst] {
    flex: 1 1 280px;
    min-width: 220px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.05)
        url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%208'%3E%3Cpath%20fill%3D'%2331DDE3'%20d%3D'M1.41%200L6%204.58%2010.59%200%2012%201.41l-6%206-6-6z'%2F%3E%3C%2Fsvg%3E")
        no-repeat right 0.9rem center / 12px 8px;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary, 'tablet-gothic');
    font-size: 0.9rem;
    padding: 0.6rem 2.4rem 0.6rem 1rem;
    cursor: pointer;
}

.campaign-select:focus[b-lkkgqjhrst] {
    outline: none;
    border-color: #31DDE3;
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.campaign-select option[b-lkkgqjhrst] {
    background: #0f172a;
    color: #ffffff;
}

.campaign-new-toggle[b-lkkgqjhrst],
.campaign-create-btn[b-lkkgqjhrst] {
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 50px;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary, 'tablet-gothic');
    font-size: 0.85rem;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.campaign-new-toggle:hover:not(:disabled)[b-lkkgqjhrst],
.campaign-create-btn:hover:not(:disabled)[b-lkkgqjhrst] {
    background: rgba(49, 221, 227, 0.2);
}

.campaign-create-btn:disabled[b-lkkgqjhrst] {
    opacity: 0.45;
    cursor: not-allowed;
}

.campaign-new-row[b-lkkgqjhrst] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.campaign-new-input[b-lkkgqjhrst] {
    flex: 1 1 280px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary, 'tablet-gothic');
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
}

.campaign-new-input:focus[b-lkkgqjhrst] {
    outline: none;
    border-color: #31DDE3;
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.campaign-new-input[b-lkkgqjhrst]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.campaign-bar-hint[b-lkkgqjhrst] {
    margin-top: 0.65rem;
    font-family: var(--ascend-font-secondary, 'tablet-gothic');
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

.campaign-bar-hint .campaign-active[b-lkkgqjhrst] {
    color: rgba(49, 221, 227, 0.85);
}

.campaign-bar-hint .campaign-active strong[b-lkkgqjhrst] {
    color: #ffffff;
}
/* /Components/Pages/Admin/CoachBookingReviews.razor.rz.scp.css */
/* #8716 - the owner's lesson review queue. Brand tokens only; the shared Card owns all
   .card-* chrome, the shared Button its own, and the decision buttons sit on the shared
   .action-row (app.css), so nothing here makes a column or a wrapping row of buttons. */
.lrv-page[b-xv4bp9rcjp] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.lrv-error[b-xv4bp9rcjp] {
    margin: 0;
    color: var(--ascend-error-light);
}

.lrv-message[b-xv4bp9rcjp] {
    margin: 0;
    color: var(--ascend-success);
}

.lrv-zone[b-xv4bp9rcjp] {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

.lrv-list[b-xv4bp9rcjp] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lrv-row[b-xv4bp9rcjp] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.lrv-head[b-xv4bp9rcjp],
.lrv-sub[b-xv4bp9rcjp],
.lrv-quote[b-xv4bp9rcjp],
.lrv-amount-error[b-xv4bp9rcjp] {
    margin: 0;
    font-style: normal;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.lrv-sub[b-xv4bp9rcjp] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

.lrv-block[b-xv4bp9rcjp] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.lrv-label[b-xv4bp9rcjp],
.lrv-partial-label[b-xv4bp9rcjp] {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Somebody's own words, as typed: line breaks kept, nothing interpreted. */
.lrv-quote[b-xv4bp9rcjp] {
    white-space: pre-wrap;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.9);
}

/* The amount field and its one button: a two-track grid (label across the top, the
   error across the bottom), so the field keeps a usable width beside the button. */
.lrv-partial[b-xv4bp9rcjp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem 0.5rem;
    align-items: center;
    min-width: 0;
}

.lrv-partial-label[b-xv4bp9rcjp],
.lrv-amount-error[b-xv4bp9rcjp] {
    grid-column: 1 / -1;
}

.lrv-amount[b-xv4bp9rcjp] {
    width: 100%;
    min-width: 0;
    max-width: 12rem;
}

.lrv-amount-error[b-xv4bp9rcjp] {
    font-size: 0.85rem;
    color: var(--ascend-error-light);
}

@media (hover: none) and (pointer: coarse) {
    .lrv-amount[b-xv4bp9rcjp] {
        min-height: var(--touch-target);
    }
}

/* #9168 - the reading admin is one of the lesson's two people: said plainly on the row, in the
   page's own voice (not an error, not a warning box), so the decision buttons stay exactly where they are. */
.lrv-party[b-xv4bp9rcjp] {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}
/* /Components/Pages/Admin/CoachHelpMeasurement.razor.rz.scp.css */
/* #8749 - the help measurement view. Chrome only: Card, StatsRow, StatItem, EmptyState and QuickGrid
   own their own styling, and .card-header / .card-title / .card-body are the shared Card's and are
   never redefined here. Measurement, so nothing is colored as a win or a loss. */

.chm-page[b-bpv76vald6] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.chm-range[b-bpv76vald6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.chm-field[b-bpv76vald6] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
}

.chm-date[b-bpv76vald6] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    padding: 0.5rem 0.75rem;
}

.chm-date:focus[b-bpv76vald6] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

.chm-presets[b-bpv76vald6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chm-preset[b-bpv76vald6] {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 35%, transparent);
    border-radius: 50px;
    color: var(--ascend-accent);
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding: 0.35rem 0.9rem;
}

.chm-preset:hover[b-bpv76vald6] {
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
    border-color: var(--ascend-accent);
}

.chm-staff[b-bpv76vald6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.chm-staff input[b-bpv76vald6] {
    width: 1.1rem;
    height: 1.1rem;
}

.chm-note[b-bpv76vald6] {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    margin: 0.75rem 0 0;
}

.chm-caveat[b-bpv76vald6],
.chm-caveat-line[b-bpv76vald6] {
    display: block;
    color: #f0d9a8;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    margin: 0.5rem 0 0;
}

.chm-caveat[b-bpv76vald6] {
    margin: 0;
}

.chm-defs[b-bpv76vald6] {
    margin: 0;
}

.chm-defs dt[b-bpv76vald6] {
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0.9rem 0 0.25rem;
}

.chm-defs dt:first-child[b-bpv76vald6] {
    margin-top: 0;
}

.chm-defs dd[b-bpv76vald6] {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
    line-height: 1.5;
}

.chm-kind[b-bpv76vald6] {
    color: #ffffff;
}

[b-bpv76vald6] td.chm-num,
[b-bpv76vald6] th.chm-num {
    text-align: right;
}

@media (hover: none) and (pointer: coarse) {
    .chm-preset[b-bpv76vald6],
    .chm-staff[b-bpv76vald6] {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/Admin/CoachingDecisions.razor.rz.scp.css */
.cd-dim[b-m5y06ooq18] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.cd-row[b-m5y06ooq18] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 0.5rem;
}

.cd-form[b-m5y06ooq18] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
}

.cd-form label[b-m5y06ooq18],
.cd-row label[b-m5y06ooq18] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.85);
}

.cd-row label[b-m5y06ooq18] {
    flex: 1 1 16rem;
    min-width: 0;
}

.cd-input[b-m5y06ooq18] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.75rem 1rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cd-input:focus[b-m5y06ooq18] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.cd-error[b-m5y06ooq18] {
    color: #ef4444;
    margin: 0.5rem;
}

.cd-notice[b-m5y06ooq18] {
    color: #10b981;
    margin: 0.5rem;
}

.cd-link[b-m5y06ooq18] {
    background: none;
    border: none;
    color: #31DDE3;
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-decoration: underline;
}
/* /Components/Pages/Admin/CoachingNotesBackfill.razor.rz.scp.css */
.cnb-gate[b-10ngwvzcvl] {
    padding: 1rem;
}

.cnb-help[b-10ngwvzcvl] {
    color: var(--ascend-text-secondary);
    margin: 0 0.5rem 0.75rem;
}

.cnb-row[b-10ngwvzcvl] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 0.5rem;
}

.cnb-row label[b-10ngwvzcvl] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--ascend-text-light);
    flex: 1 1 16rem;
    min-width: 0;
}

.cnb-input[b-10ngwvzcvl] {
    background: var(--ascend-bg-secondary);
    border: 1px solid var(--ascend-border);
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.75rem 1rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cnb-input:focus[b-10ngwvzcvl] {
    outline: none;
    border-color: var(--ascend-primary);
}

.cnb-error[b-10ngwvzcvl] {
    color: var(--ascend-error);
    margin: 0.5rem;
}

.cnb-grid[b-10ngwvzcvl] {
    margin-top: 1rem;
}

.cnb-recovered-title[b-10ngwvzcvl] {
    margin: 0 0.5rem 0.5rem;
}

.cnb-recovered[b-10ngwvzcvl]  td {
    vertical-align: top;
}

.cnb-line[b-10ngwvzcvl] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--ascend-text-light);
}
/* /Components/Pages/Admin/CoachListingApprovals.razor.rz.scp.css */
/* #8102 - the owner's listing approval queue. Brand tokens only; the shared Card owns all
   .card-* chrome and the shared Button its own, so nothing here touches them. */
.cla-page[b-xtobu0uu3e] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cla-error[b-xtobu0uu3e] {
    margin: 0;
    color: var(--ascend-error-light);
}

.cla-message[b-xtobu0uu3e] {
    margin: 0;
    color: var(--ascend-success);
}

.cla-who[b-xtobu0uu3e] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cla-sub[b-xtobu0uu3e] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

/* #8647 - why this admin cannot decide a row. Capped so the sentence wraps inside the
   Account column instead of widening the grid. */
.cla-cannot[b-xtobu0uu3e] {
    max-width: 18rem;
    color: var(--ascend-warning);
}

.cla-row-actions[b-xtobu0uu3e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.cla-detail[b-xtobu0uu3e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    min-width: 0;
}

.cla-detail-head[b-xtobu0uu3e],
.cla-hint[b-xtobu0uu3e],
.cla-warning[b-xtobu0uu3e] {
    margin: 0;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.cla-hint[b-xtobu0uu3e] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

.cla-warning[b-xtobu0uu3e] {
    padding: 0.75rem 1rem;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.cla-current[b-xtobu0uu3e] {
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
}

.cla-current summary[b-xtobu0uu3e] {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
}

/* A whole-row label so the tap target is at least 44px tall on a phone. */
.cla-identity[b-xtobu0uu3e] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-height: 44px;
    line-height: 1.45;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.cla-identity input[b-xtobu0uu3e] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: var(--ascend-secondary-light);
}

.cla-actions[b-xtobu0uu3e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* #8103 - the FIDE record beside the account, so the owner compares before approving.
   Two columns on a wide screen, one on a phone; nothing in it scrolls sideways. */
.cla-fide[b-xtobu0uu3e] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    min-width: 0;
}

.cla-fide-head[b-xtobu0uu3e] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
}

.cla-compare[b-xtobu0uu3e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.9rem;
}

.cla-compare-col[b-xtobu0uu3e] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
}

.cla-compare-label[b-xtobu0uu3e] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.cla-compare-name[b-xtobu0uu3e] {
    font-weight: 600;
}

/* #8104 - the removed listings: text-heavy rows, so a list and not a grid. */
.cla-removed[b-xtobu0uu3e] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cla-removed-row[b-xtobu0uu3e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
}
/* /Components/Pages/Admin/CoachRatingLineNoticePanel.razor.rz.scp.css */
/* #9004 - the rating line notice control on the owner's listing queue. Brand tokens only; the
   shared Card owns all .card-* chrome and the shared Button its own, so nothing here touches them. */
.rln[b-cj5rg9ldeq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.rln-draft[b-cj5rg9ldeq] {
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rln-error[b-cj5rg9ldeq] {
    margin: 0;
    color: var(--ascend-error-light);
}

.rln-message[b-cj5rg9ldeq] {
    margin: 0;
    color: var(--ascend-success);
}

.rln-count[b-cj5rg9ldeq],
.rln-hint[b-cj5rg9ldeq],
.rln-bell-title[b-cj5rg9ldeq],
.rln-bell-body[b-cj5rg9ldeq] {
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rln-hint[b-cj5rg9ldeq] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

.rln-bell-title[b-cj5rg9ldeq] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.rln-bell-body[b-cj5rg9ldeq] {
    color: rgba(255, 255, 255, 0.85);
}

.rln-field[b-cj5rg9ldeq] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.rln-label[b-cj5rg9ldeq] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

/* A plain select, at least 44px tall so it is a fair tap target on a phone. background-color, never
   the shorthand, and right padding, so the global select rule's chevron still draws. */
.rln-select[b-cj5rg9ldeq] {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background-color: var(--ascend-bg-dark);
    color: rgba(255, 255, 255, 0.95);
    font: inherit;
}

.rln-block[b-cj5rg9ldeq] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    min-width: 0;
}

.rln-head[b-cj5rg9ldeq] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
}

/* The email as the coach gets it, on the light email background (the SME broadcast precedent). */
.rln-frame[b-cj5rg9ldeq] {
    width: 100%;
    height: 32rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: var(--ascend-bg-light);
}

/* The coaches already told, one row each: who, then when and what became of the notice. */
.rln-told[b-cj5rg9ldeq] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rln-told-row[b-cj5rg9ldeq] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.rln-told-who[b-cj5rg9ldeq] {
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
}
/* /Components/Pages/Admin/CoachReports.razor.rz.scp.css */
/* #8104 - the owner's coach reports queue. Brand tokens only; the shared Card owns all
   .card-* chrome and the shared Button its own, so nothing here touches them. */
.crq-page[b-qtu109oql4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.crq-error[b-qtu109oql4] {
    margin: 0;
    color: var(--ascend-error-light);
}

.crq-message[b-qtu109oql4] {
    margin: 0;
    color: var(--ascend-success);
}

.crq-list[b-qtu109oql4] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.crq-row[b-qtu109oql4] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.crq-head[b-qtu109oql4],
.crq-sub[b-qtu109oql4],
.crq-quote[b-qtu109oql4] {
    margin: 0;
    font-style: normal;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.crq-sub[b-qtu109oql4] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

.crq-block[b-qtu109oql4] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.crq-label[b-qtu109oql4] {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Somebody's own words, as typed: line breaks kept, nothing interpreted. */
.crq-quote[b-qtu109oql4] {
    white-space: pre-wrap;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.9);
}

.crq-actions[b-qtu109oql4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* #8647 - why this admin cannot dismiss a report against a listing: the same amber note the
   listing queue shows on a row the admin cannot decide. */
.crq-cannot[b-qtu109oql4] {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Admin/ContactSubmissions.razor.rz.scp.css */
/* #7326 - the contact-form audit trail. Chrome only: Card, StatsRow, StatItem,
   EmptyState and QuickGrid own their own styling, and .card-header /
   .card-title / .card-body belong to the shared Card and are never redefined
   here. */

.contact-submissions-page[b-sy8kxin7v5] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cs-range[b-sy8kxin7v5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.cs-field[b-sy8kxin7v5] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
}

.cs-date[b-sy8kxin7v5] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    padding: 0.5rem 0.75rem;
}

.cs-date:focus[b-sy8kxin7v5] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

.cs-presets[b-sy8kxin7v5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cs-preset[b-sy8kxin7v5] {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 35%, transparent);
    border-radius: 50px;
    color: var(--ascend-accent);
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding: 0.35rem 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cs-preset:hover[b-sy8kxin7v5] {
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
    border-color: var(--ascend-accent);
}

.cs-note[b-sy8kxin7v5] {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    margin: 0.75rem 0 0;
}

/* The outcome is the column an admin scans down, so it reads as a state rather
   than as another word in a sentence. Held is deliberately NOT alarming: a held
   message is stored and recoverable, and coloring it as an error would push
   whoever is reviewing towards clearing the queue instead of reading it. */
.cs-outcome[b-sy8kxin7v5] {
    border-radius: 50px;
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

.cs-delivered[b-sy8kxin7v5] {
    background: color-mix(in srgb, var(--ascend-accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 40%, transparent);
    color: var(--ascend-accent-light);
}

.cs-held[b-sy8kxin7v5] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
}

.cs-failed[b-sy8kxin7v5] {
    background: color-mix(in srgb, var(--ascend-error) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-error) 45%, transparent);
    /* #7905 - was var(--ascend-error): 4.13:1 on its own 15% tint, below AA.
       The light step clears it at 5.62:1, exactly as .cs-delivered above
       already uses --ascend-accent-light on an accent tint. */
    color: var(--ascend-error-light);
}

/* Whatever a stranger typed, read as prose. The whole value of the held rows is
   that somebody can actually read them and disagree with the classification. */
.cs-message[b-sy8kxin7v5] {
    color: rgba(255, 255, 255, 0.9);
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    /* The message is the widest thing on the row and the only one worth
       reading, so it claims space rather than being squeezed to three words a
       line by the metadata columns around it. */
    min-width: 24ch;
    max-width: 44ch;
    overflow-wrap: anywhere;
}

[b-sy8kxin7v5] .cs-messages td,
[b-sy8kxin7v5] .cs-repeats td {
    vertical-align: top;
}

[b-sy8kxin7v5] td.cs-num,
[b-sy8kxin7v5] th.cs-num {
    text-align: right;
}

[b-sy8kxin7v5] td.cs-when,
[b-sy8kxin7v5] td.cs-ip {
    white-space: nowrap;
}

/* Wide enough that the reason reads as a sentence. Squeezed to one word a line
   it stops being an explanation an admin can disagree with, which is its only
   job. */
[b-sy8kxin7v5] td.cs-why,
[b-sy8kxin7v5] th.cs-why {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    min-width: 20ch;
}

/* Long spam addresses must wrap rather than push the source-IP column off the
   right edge of the card. Addressed through QuickGrid's Class parameter, never
   by position - #7260 is what a :nth-child rule costs the first time a column
   becomes conditional. */
[b-sy8kxin7v5] td.cs-address {
    overflow-wrap: anywhere;
}
/* /Components/Pages/Admin/ContentAuthoring.razor.rz.scp.css */
/* #5962 — admin content-authoring form styling. On-brand dark theme: cyan
   accents, gold headings, glowing focus. Matches the platform form language
   (CLAUDE.md). The ca-* fields are authored in this component (even though they
   sit inside the shared Card's BodyContent), so they carry this component's
   scope id and these rules apply directly — no ::deep needed. */

/* Two authoring cards side by side; stack on narrow screens. */
.ca-grid[b-fnjaoca81a] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 980px) {
    .ca-grid[b-fnjaoca81a] {
        grid-template-columns: 1fr;
    }
}

/* Card title — heading font, two-tone rendered by the shared Wordmark
   component (#6356), which owns the flush-seam rule. */
.ca-card-title[b-fnjaoca81a] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
}

/* Field label. */
.ca-label[b-fnjaoca81a] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.6);
    margin: 1rem 0 0.4rem;
}

/* First label in a card shouldn't push off the top. */
.ca-label:first-child[b-fnjaoca81a] {
    margin-top: 0;
}

/* Text inputs, selects, textareas. */
.ca-input[b-fnjaoca81a],
.ca-area[b-fnjaoca81a] {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    font-family: var(--ascend-font-secondary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ca-area[b-fnjaoca81a] {
    resize: vertical;
    line-height: 1.5;
}

.ca-input:focus[b-fnjaoca81a],
.ca-area:focus[b-fnjaoca81a] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.12);
}

.ca-input[b-fnjaoca81a]::placeholder,
.ca-area[b-fnjaoca81a]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Native select arrow on the dark field. */
select.ca-input[b-fnjaoca81a] {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2331DDE3' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem;
    padding-right: 2.2rem;
    cursor: pointer;
}

select.ca-input option[b-fnjaoca81a] {
    background: var(--ascend-bg-dark);
    color: #ffffff;
}

/* Monospace variant for FEN / PGN. */
.ca-mono[b-fnjaoca81a] {
    font-family: 'Cascadia Code', 'Consolas', 'SF Mono', monospace;
    font-size: 0.82rem;
    letter-spacing: 0;
}

.ca-input[readonly][b-fnjaoca81a] {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.03);
    border-style: dashed;
    cursor: default;
}

/* Two fields on one row (Tier / Category, etc.). */
.ca-row[b-fnjaoca81a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.ca-col[b-fnjaoca81a] {
    min-width: 0;
}

@media (max-width: 520px) {
    .ca-row[b-fnjaoca81a] {
        grid-template-columns: 1fr;
    }
}

/* Inline result banners — subtle tints, not bright Bootstrap alerts. */
.ca-error[b-fnjaoca81a],
.ca-success[b-fnjaoca81a] {
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
}

.ca-error[b-fnjaoca81a] {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
}

.ca-success[b-fnjaoca81a] {
    color: #6ee7d6;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid var(--ascend-accent);
}

/* #5980 — one drill position inside the endgame form. Subtle bordered block so
   multiple positions read as distinct cards without competing with the parent. */
.ca-position[b-fnjaoca81a] {
    margin-top: 1rem;
    padding: 0.85rem 1rem 1.1rem;
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.ca-position-head[b-fnjaoca81a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ca-position-num[b-fnjaoca81a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-accent);
}

.ca-position-remove[b-fnjaoca81a] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
}

.ca-position-remove:hover[b-fnjaoca81a] {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
}

.ca-add-position[b-fnjaoca81a] {
    margin-top: 0.85rem;
}

/* #5980 Phase 2 — play-to-capture solution board. */
.ca-playtoggle[b-fnjaoca81a] {
    margin-top: 0.5rem;
    background: transparent;
    border: none;
    color: var(--ascend-accent);
    cursor: pointer;
    padding: 0.3rem 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ca-playtoggle:hover[b-fnjaoca81a] {
    color: #6ee7d6;
}

.ca-playboard[b-fnjaoca81a] {
    margin-top: 0.6rem;
    max-width: min(380px, 100%);
}

.ca-playboard-actions[b-fnjaoca81a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.ca-link[b-fnjaoca81a] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.ca-link:hover[b-fnjaoca81a] {
    color: var(--ascend-accent);
}

.ca-playboard-hint[b-fnjaoca81a] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
}

/* #5980 Phase 4 — AI coach-voice draft assist block. */
.ca-aiassist[b-fnjaoca81a] {
    margin-top: 1rem;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 12px;
    background: rgba(184, 133, 54, 0.04);
}

/* Top spacing for the shared .action-row inside the AI-assist block and the
   create-button footer (the shared primitive carries no vertical margin). */
.ca-aiassist .action-row[b-fnjaoca81a] {
    margin-top: 0.6rem;
}

.ca-create-actions[b-fnjaoca81a] {
    margin-top: 1.5rem;
}
/* /Components/Pages/Admin/ContentEdit.razor.rz.scp.css */
/* #6846 — admin content-EDIT surface. Mirrors ContentAuthoring's (ca-*) form
   language on ce-* classes: dark fields, cyan focus glow, bordered position
   blocks. All colors ride the brand tokens. The ce-* markup is authored in
   this component (inside the shared Card's BodyContent), so it carries this
   component's scope id — no ::deep needed except where noted. */

.ce-card-title[b-vwo58bcb8s] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
}

/* ── Picker ─────────────────────────────────────────────────────────────── */

.ce-toolbar[b-vwo58bcb8s] {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ce-search[b-vwo58bcb8s] {
    flex: 1 1 16rem;
}

.ce-type-filter[b-vwo58bcb8s] {
    flex: 0 1 14rem;
}

.ce-grid[b-vwo58bcb8s] {
    overflow-x: auto;
}

/* QuickGrid renders its own table markup — reach it via ::deep. */
.ce-grid[b-vwo58bcb8s]  table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
}

.ce-grid[b-vwo58bcb8s]  th {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.2);
}

.ce-grid[b-vwo58bcb8s]  td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

.ce-type-chip[b-vwo58bcb8s] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 50px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.35);
    background: rgba(49, 221, 227, 0.08);
    white-space: nowrap;
}

.ce-title[b-vwo58bcb8s] {
    color: #ffffff;
}

.ce-key[b-vwo58bcb8s] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}

.ce-state[b-vwo58bcb8s] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.ce-state-autoverified[b-vwo58bcb8s],
.ce-state-smeapproved[b-vwo58bcb8s] {
    color: #6ee7d6;
}

.ce-state-awaitingreview[b-vwo58bcb8s],
.ce-state-reworkrequested[b-vwo58bcb8s],
.ce-state-validating[b-vwo58bcb8s] {
    color: var(--ascend-secondary-light);
}

.ce-state-smerejected[b-vwo58bcb8s],
.ce-state-suppressed[b-vwo58bcb8s] {
    color: #fca5a5;
}

.ce-served[b-vwo58bcb8s] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ── Member visibility (Issue #8666) ───────────────────────────────────── */

.ce-hidden-chip[b-vwo58bcb8s] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 50px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fca5a5;
    border: 1px solid rgba(252, 165, 165, 0.45);
    background: rgba(252, 165, 165, 0.1);
    white-space: nowrap;
}

/* Issue #8699 - Back soon: listed grayed out for members, so a neutral chip
   rather than the Hidden red. */
.ce-hidden-chip.ce-back-soon-chip[b-vwo58bcb8s] {
    color: var(--ascend-text-muted);
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(148, 163, 184, 0.1);
}

.ce-row-actions[b-vwo58bcb8s] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .ce-row-actions[b-vwo58bcb8s] {
        flex-wrap: wrap;
    }
}

.ce-visibility[b-vwo58bcb8s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
}

.ce-visibility-state[b-vwo58bcb8s] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* ── PBI #8938: send the open item to SME review ─────────────────────── */

.ce-sme-review[b-vwo58bcb8s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
}

.ce-sme-review-text[b-vwo58bcb8s] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 16rem;
    min-width: 0;
}

.ce-sme-review-text i[b-vwo58bcb8s] {
    color: var(--ascend-secondary-light);
}

.ce-sme-review-text a[b-vwo58bcb8s] {
    color: var(--ascend-accent);
    text-decoration: underline;
    white-space: nowrap;
}

.ce-sme-review-note[b-vwo58bcb8s] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

/* ── The unverified-consequence banner (the load-bearing UX contract) ───── */

.ce-consequence[b-vwo58bcb8s] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(184, 133, 54, 0.45);
    background: rgba(184, 133, 54, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.ce-consequence i[b-vwo58bcb8s] {
    color: var(--ascend-secondary-light);
    margin-top: 0.1rem;
}

.ce-consequence strong[b-vwo58bcb8s] {
    color: var(--ascend-secondary-light);
}

/* ── #8773: an edit to reviewed content waiting for review ─────────────── */

.ce-pending[b-vwo58bcb8s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.ce-pending > span[b-vwo58bcb8s] {
    flex: 1 1 16rem;
    min-width: 0;
}

.ce-pending i[b-vwo58bcb8s] {
    color: var(--ascend-secondary-light);
}

/* ── Editor meta line ───────────────────────────────────────────────────── */

.ce-meta[b-vwo58bcb8s] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Form fields (mirrors ca-*) ─────────────────────────────────────────── */

.ce-label[b-vwo58bcb8s] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.6);
    margin: 1rem 0 0.4rem;
}

.ce-input[b-vwo58bcb8s],
.ce-area[b-vwo58bcb8s] {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    font-family: var(--ascend-font-secondary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ce-area[b-vwo58bcb8s] {
    resize: vertical;
    line-height: 1.5;
}

.ce-input:focus[b-vwo58bcb8s],
.ce-area:focus[b-vwo58bcb8s] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.12);
}

.ce-input[b-vwo58bcb8s]::placeholder,
.ce-area[b-vwo58bcb8s]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

select.ce-input[b-vwo58bcb8s] {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2331DDE3' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem;
    padding-right: 2.2rem;
    cursor: pointer;
}

select.ce-input option[b-vwo58bcb8s] {
    background: var(--ascend-bg-dark);
    color: #ffffff;
}

.ce-mono[b-vwo58bcb8s] {
    font-family: 'Cascadia Code', 'Consolas', 'SF Mono', monospace;
    font-size: 0.82rem;
    letter-spacing: 0;
}

.ce-row[b-vwo58bcb8s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.ce-col[b-vwo58bcb8s] {
    min-width: 0;
}

@media (max-width: 520px) {
    .ce-row[b-vwo58bcb8s] {
        grid-template-columns: 1fr;
    }

    .ce-toolbar[b-vwo58bcb8s] {
        flex-direction: column;
    }

    /* Issue #8666 - in a column the row-direction flex-basis became each
       control's HEIGHT (a 16rem-tall search box at phone width). */
    .ce-search[b-vwo58bcb8s],
    .ce-type-filter[b-vwo58bcb8s] {
        flex: 0 0 auto;
    }
}

/* ── Position blocks ────────────────────────────────────────────────────── */

.ce-position[b-vwo58bcb8s] {
    margin-top: 1rem;
    padding: 0.85rem 1rem 1.1rem;
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.ce-position-head[b-vwo58bcb8s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ce-position-num[b-vwo58bcb8s] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-accent);
}

.ce-position-remove[b-vwo58bcb8s] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
}

.ce-position-remove:hover[b-vwo58bcb8s] {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
}

.ce-add-position[b-vwo58bcb8s] {
    margin-top: 0.85rem;
}

.ce-boardtoggle[b-vwo58bcb8s] {
    margin-top: 0.5rem;
    background: transparent;
    border: none;
    color: var(--ascend-accent);
    cursor: pointer;
    padding: 0.3rem 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ce-boardtoggle:hover[b-vwo58bcb8s] {
    color: #6ee7d6;
}

.ce-board[b-vwo58bcb8s] {
    margin-top: 0.6rem;
    max-width: min(420px, 100%);
}

/* ── Result banners — subtle tints, never bright Bootstrap alerts ───────── */

.ce-error[b-vwo58bcb8s],
.ce-info[b-vwo58bcb8s],
.ce-success[b-vwo58bcb8s] {
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
}

.ce-error[b-vwo58bcb8s] {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
}

.ce-info[b-vwo58bcb8s] {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid rgba(255, 255, 255, 0.3);
}

.ce-success[b-vwo58bcb8s] {
    color: #6ee7d6;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid var(--ascend-accent);
}

.ce-actions[b-vwo58bcb8s] {
    margin-top: 1.5rem;
}

/* ── Edit history (Defect #8375, owner decision 69) ─────────────────────────
   The admin-only read of the opened item's edits, change reasons included.
   A stacked list rather than a grid: each entry carries free-text reasons that
   must wrap at 344px. Long identities and field lists break anywhere. */

.ce-history[b-vwo58bcb8s] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
}

.ce-history-note[b-vwo58bcb8s],
.ce-history-empty[b-vwo58bcb8s] {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

.ce-history-list[b-vwo58bcb8s] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ce-history-entry[b-vwo58bcb8s] {
    padding: 0.65rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    min-width: 0;
}

.ce-history-head[b-vwo58bcb8s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.ce-history-editor[b-vwo58bcb8s],
.ce-history-fields[b-vwo58bcb8s] {
    overflow-wrap: anywhere;
}

.ce-history-fields[b-vwo58bcb8s] {
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.6);
}

.ce-history-reason[b-vwo58bcb8s] {
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ce-history-reason-none[b-vwo58bcb8s] {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}
/* /Components/Pages/Admin/CustomerReports.razor.rz.scp.css */
.cr-grid[b-zggm4a5pyk] {
    overflow-x: auto;
}

/* ::deep - QuickGrid renders the table itself, so the scoped attribute lands
   on the wrapper above it. */
.cr-grid[b-zggm4a5pyk]  .cr-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-text-light);
}

.cr-grid[b-zggm4a5pyk]  .cr-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-text-secondary);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
}

.cr-grid[b-zggm4a5pyk]  .cr-table td {
    padding: 0.65rem 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid color-mix(in srgb, var(--ascend-accent) 10%, transparent);
}

.cr-title[b-zggm4a5pyk] {
    display: block;
    font-weight: 700;
    color: var(--ascend-text-light);
    text-decoration: none;
}

.cr-title:hover[b-zggm4a5pyk] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

.cr-meta[b-zggm4a5pyk] {
    display: block;
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.cr-waiting[b-zggm4a5pyk] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ascend-warning);
}

.mr-status[b-zggm4a5pyk] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}

.mr-status.received[b-zggm4a5pyk] {
    /* #7905 - was var(--ascend-info): 4.20:1 on its own 12% tint, below AA.
       The light step clears it at 5.79:1, matching how .accepted already
       reaches for --ascend-secondary-light. */
    color: var(--ascend-info-light);
    border-color: color-mix(in srgb, var(--ascend-info-light) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-info-light) 12%, transparent);
}

.mr-status.accepted[b-zggm4a5pyk] {
    color: var(--ascend-secondary-light);
    border-color: color-mix(in srgb, var(--ascend-secondary-light) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-secondary-light) 12%, transparent);
}

.mr-status.working[b-zggm4a5pyk] {
    color: var(--ascend-accent);
    border-color: color-mix(in srgb, var(--ascend-accent) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

.mr-status.fixed[b-zggm4a5pyk],
.mr-status.answered[b-zggm4a5pyk] {
    color: var(--ascend-success);
    border-color: color-mix(in srgb, var(--ascend-success) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-success) 12%, transparent);
}

.mr-status.not-planned[b-zggm4a5pyk] {
    color: var(--ascend-text-muted);
    border-color: color-mix(in srgb, var(--ascend-text-muted) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-text-muted) 12%, transparent);
}
/* /Components/Pages/Admin/CustomerReportThread.razor.rz.scp.css */
.crt-back[b-ddpwf490p7] {
    margin: 0 0 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.crt-back a[b-ddpwf490p7] {
    color: var(--ascend-accent);
    text-decoration: none;
}

.crt-back a:hover[b-ddpwf490p7] {
    text-decoration: underline;
}

.crt-item[b-ddpwf490p7] {
    max-width: 52rem;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 15%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ascend-primary-dark) 60%, transparent);
    padding: 1rem 1.25rem;
}

.crt-head[b-ddpwf490p7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.crt-meta[b-ddpwf490p7] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.crt-ado[b-ddpwf490p7] {
    color: var(--ascend-accent);
    text-decoration: none;
}

.crt-ado:hover[b-ddpwf490p7] {
    text-decoration: underline;
}

.crt-title[b-ddpwf490p7] {
    margin: 0.6rem 0 0.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ascend-text-light);
}

.crt-reporter[b-ddpwf490p7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-secondary);
}

.crt-text[b-ddpwf490p7] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-text-secondary);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.crt-sent[b-ddpwf490p7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-success);
}

.crt-compose[b-ddpwf490p7] {
    margin-top: 1rem;
}

/* ::deep - EditForm renders the <form> itself, so the scoped attribute lands
   on the wrapper above it, not on the form. */
.crt-compose[b-ddpwf490p7]  .crt-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crt-form-label[b-ddpwf490p7] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-text-secondary);
}

/* ::deep - the textarea is rendered by InputTextArea. */
.crt-compose[b-ddpwf490p7]  .crt-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 6.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
    background: color-mix(in srgb, var(--ascend-primary-dark) 75%, transparent);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}

.crt-compose[b-ddpwf490p7]  .crt-input:focus-visible {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 1px;
}

.crt-compose[b-ddpwf490p7]  .validation-message {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
}

.crt-error[b-ddpwf490p7] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-warning);
}

.crt-actions[b-ddpwf490p7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.crt-count[b-ddpwf490p7] {
    margin-right: auto;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-text-muted);
}

.mr-status[b-ddpwf490p7] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid;
}

.mr-status.received[b-ddpwf490p7] {
    /* #7905 - was var(--ascend-info): 4.20:1 on its own 12% tint, below AA.
       The light step clears it at 5.79:1, matching how .accepted already
       reaches for --ascend-secondary-light. */
    color: var(--ascend-info-light);
    border-color: color-mix(in srgb, var(--ascend-info-light) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-info-light) 12%, transparent);
}

.mr-status.accepted[b-ddpwf490p7] {
    color: var(--ascend-secondary-light);
    border-color: color-mix(in srgb, var(--ascend-secondary-light) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-secondary-light) 12%, transparent);
}

.mr-status.working[b-ddpwf490p7] {
    color: var(--ascend-accent);
    border-color: color-mix(in srgb, var(--ascend-accent) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

.mr-status.fixed[b-ddpwf490p7],
.mr-status.answered[b-ddpwf490p7] {
    color: var(--ascend-success);
    border-color: color-mix(in srgb, var(--ascend-success) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-success) 12%, transparent);
}

.mr-status.not-planned[b-ddpwf490p7] {
    color: var(--ascend-text-muted);
    border-color: color-mix(in srgb, var(--ascend-text-muted) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-text-muted) 12%, transparent);
}

/* #8118 - the read-only line that replaces the compose box on an archived report. */
.crt-archived-note[b-ddpwf490p7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-muted);
}
/* /Components/Pages/Admin/EnrichmentRecovery.razor.rz.scp.css */
.recovery-page[b-36jfypq45o] >  .card {
    margin-bottom: 1.5rem;
}

.recovery-note[b-36jfypq45o] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--ascend-accent);
    background: rgba(49, 221, 227, 0.06);
    color: var(--ascend-text-secondary);
    font-size: 0.9rem;
}

.recovery-ceiling[b-36jfypq45o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.recovery-ceiling label[b-36jfypq45o] {
    font-family: var(--ascend-font-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    color: var(--ascend-text-secondary);
}

.recovery-ceiling input[b-36jfypq45o] {
    width: 8rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: var(--ascend-text-light);
}

.recovery-hint[b-36jfypq45o] {
    flex: 1 1 20rem;
    font-size: 0.85rem;
    color: var(--ascend-text-secondary);
}

.recovery-id[b-36jfypq45o] {
    display: block;
    font-size: 0.8rem;
    color: var(--ascend-accent);
    word-break: break-all;
}

.recovery-sub[b-36jfypq45o] {
    display: block;
    font-size: 0.85rem;
    color: var(--ascend-text-secondary);
}

.damage[b-36jfypq45o] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8rem;
    white-space: normal;
}

.damage-missingnarrative[b-36jfypq45o] {
    color: var(--ascend-error);
    border: 1px solid var(--ascend-error);
}

.damage-truncatednarrative[b-36jfypq45o] {
    color: var(--ascend-warning);
    border: 1px solid var(--ascend-warning);
}

.damage-missingkeymoments[b-36jfypq45o] {
    color: var(--ascend-text-secondary);
    border: 1px solid var(--ascend-text-secondary);
}

.recovery-paste[b-36jfypq45o] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.recovery-paste label[b-36jfypq45o] {
    font-family: var(--ascend-font-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    color: var(--ascend-text-secondary);
}

.recovery-paste textarea[b-36jfypq45o] {
    width: 100%;
    max-width: 34rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: var(--ascend-text-light);
    font-family: monospace;
}

.recovery-error[b-36jfypq45o] {
    color: var(--ascend-error);
    font-size: 0.85rem;
}

.recovery-gate[b-36jfypq45o] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--ascend-warning);
    background: rgba(245, 158, 11, 0.08);
    color: var(--ascend-text-secondary);
    font-size: 0.9rem;
}

.recovery-running[b-36jfypq45o] {
    margin-top: 1.25rem;
}

.recovery-results[b-36jfypq45o] {
    margin-top: 1.5rem;
    padding-left: 1.25rem;
}

.recovery-result[b-36jfypq45o] {
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--ascend-text-secondary);
}

.recovery-result-recovered[b-36jfypq45o] {
    border-left-color: var(--ascend-success);
}

.recovery-result-recoveredwithwarning[b-36jfypq45o] {
    border-left-color: var(--ascend-warning);
}

.recovery-result-stilldamaged[b-36jfypq45o],
.recovery-result-noenrichmentproduced[b-36jfypq45o],
.recovery-result-refused[b-36jfypq45o],
.recovery-result-error[b-36jfypq45o] {
    border-left-color: var(--ascend-error);
}

.recovery-outcome[b-36jfypq45o] {
    display: block;
    font-family: var(--ascend-font-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    color: var(--ascend-text-light);
}

.recovery-message[b-36jfypq45o] {
    display: block;
    margin: 0.35rem 0 0.5rem;
    font-size: 0.9rem;
    color: var(--ascend-text-secondary);
}
/* /Components/Pages/Admin/FeatureFlags.razor.rz.scp.css */
.feature-flags-page[b-p98kdclebv] {
    max-width: 1100px;
    margin: 0 auto;
}

/* Search toolbar */
.flag-toolbar[b-p98kdclebv] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.15);
    background: rgba(10, 22, 40, 0.5);
}

.flag-toolbar > .bi[b-p98kdclebv] { color: rgba(255, 255, 255, 0.4); }

.flag-search[b-p98kdclebv] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
}

.flag-search[b-p98kdclebv]::placeholder { color: rgba(255, 255, 255, 0.35); }

.flag-search-clear[b-p98kdclebv] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    padding: 4px 10px;
    cursor: pointer;
}

.flag-search-clear:hover[b-p98kdclebv] { color: #fff; border-color: rgba(255, 255, 255, 0.4); }

.flag-no-match[b-p98kdclebv] {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    padding: 8px 4px;
}

/* Grouped sections */
.flag-group[b-p98kdclebv] { margin-bottom: 24px; }

.flag-group-head[b-p98kdclebv] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    width: 100%;
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
}

.flag-group-toggle[b-p98kdclebv] { cursor: pointer; }
.flag-group-toggle:disabled[b-p98kdclebv] { cursor: default; }

.flag-group-title[b-p98kdclebv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: 'condor', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: #fff;
}

.flag-group-title .bi[b-p98kdclebv] { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }

.flag-count[b-p98kdclebv] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--ascend-font-secondary);
    letter-spacing: 0;
}

.flag-group-note[b-p98kdclebv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
}

.flag-group-empty[b-p98kdclebv] {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    font-size: 0.88rem;
    padding: 4px 4px 8px;
}

.flag-list[b-p98kdclebv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flag-row[b-p98kdclebv] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.15);
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.6) 0%, rgba(15, 23, 42, 0.5) 100%);
    transition: all 0.15s ease;
}

.flag-row:hover[b-p98kdclebv] {
    border-color: rgba(49, 221, 227, 0.3);
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.75) 0%, rgba(15, 23, 42, 0.65) 100%);
}

.flag-row.flag-enabled[b-p98kdclebv] {
    border-left: 3px solid #31DDE3;
}

.flag-row.flag-admin[b-p98kdclebv] {
    border-left: 3px solid #B88536;
}

.flag-row.flag-disabled[b-p98kdclebv] {
    border-left: 3px solid rgba(239, 68, 68, 0.6);
    opacity: 0.85;
}

/* #8865 - the row's main line (info + controls); the lifecycle editor opens below it. */
.flag-row-main[b-p98kdclebv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.flag-info[b-p98kdclebv] {
    flex: 1;
    min-width: 0;
}

.flag-controls[b-p98kdclebv] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.flag-key[b-p98kdclebv] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
    word-break: break-word;
}

/* Retirement-review affordance: long-Disabled ("stale") flags. */
.flag-stale-badge[b-p98kdclebv] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 50px;
    border: 1px solid rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.15);
    color: #d4a050;
    font-family: var(--ascend-font-secondary);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: help;
}

.flag-stale-summary[b-p98kdclebv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(184, 133, 54, 0.3);
    background: rgba(184, 133, 54, 0.08);
    color: #d4a050;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.flag-stale-summary .bi[b-p98kdclebv] { font-size: 0.85rem; }

.flag-description[b-p98kdclebv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    margin-bottom: 6px;
}

/* #8865 - the admin's one-line lifecycle note. */
.flag-lifecycle-note[b-p98kdclebv] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    word-break: break-word;
}

.flag-lifecycle-note .bi[b-p98kdclebv] { color: #d4a050; font-size: 0.75rem; }

.flag-lifecycle-note-label[b-p98kdclebv] {
    font-weight: 700;
    color: #d4a050;
    white-space: nowrap;
}

.flag-meta[b-p98kdclebv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.02em;
}

.mode-group[b-p98kdclebv] {
    flex-shrink: 0;
    display: inline-flex;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(10, 22, 40, 0.6);
}

.mode-btn[b-p98kdclebv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    border: none;
    border-right: 1px solid rgba(49, 221, 227, 0.15);
    transition: all 0.15s ease;
    min-width: 100px;
}

.mode-btn:last-child[b-p98kdclebv] {
    border-right: none;
}

.mode-btn:hover:not(:disabled):not(.mode-current)[b-p98kdclebv] {
    background: rgba(49, 221, 227, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

.mode-btn:disabled[b-p98kdclebv] {
    cursor: not-allowed;
}

.mode-btn.mode-current.mode-enabled[b-p98kdclebv] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.3) 0%, rgba(49, 221, 227, 0.15) 100%);
    color: #31DDE3;
    box-shadow: inset 0 0 12px rgba(49, 221, 227, 0.15);
}

.mode-btn.mode-current.mode-admin[b-p98kdclebv] {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.3) 0%, rgba(184, 133, 54, 0.15) 100%);
    color: #d4a050;
    box-shadow: inset 0 0 12px rgba(184, 133, 54, 0.18);
}

.mode-btn.mode-current.mode-disabled[b-p98kdclebv] {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    box-shadow: inset 0 0 12px rgba(239, 68, 68, 0.12);
}

.mode-btn[b-p98kdclebv]  i {
    font-size: 14px;
}

@media (max-width: 768px) {
    .flag-row-main[b-p98kdclebv] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .flag-controls[b-p98kdclebv] {
        flex-direction: column;
        align-items: stretch;
    }

    .mode-group[b-p98kdclebv] {
        align-self: stretch;
    }

    .lifecycle-fields[b-p98kdclebv] {
        flex-direction: column;
    }

    .mode-btn[b-p98kdclebv] {
        flex: 1;
        min-width: 0;
    }
}

/* #8865 - lifecycle sections. Retired rows read as dimmed history. */
.flag-group-retired .flag-row[b-p98kdclebv] { opacity: 0.7; }

/* Lifecycle button: the shared Button renders its own element, so reach it with ::deep. */
.flag-controls[b-p98kdclebv]  .lifecycle-edit-btn {
    min-width: 108px;
}

/* #8865 - inline lifecycle editor under a row. */
.lifecycle-editor[b-p98kdclebv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(184, 133, 54, 0.35);
    background: rgba(10, 22, 40, 0.7);
}

.lifecycle-fields[b-p98kdclebv] {
    display: flex;
    gap: 14px;
}

.lifecycle-field[b-p98kdclebv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.lifecycle-field-note[b-p98kdclebv] { flex: 1; }

.lifecycle-field-label[b-p98kdclebv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.lifecycle-select[b-p98kdclebv],
.lifecycle-note-input[b-p98kdclebv] {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(49, 221, 227, 0.25);
    /* background-color, never the shorthand: the global select rule draws the chevron
       with background-image (SelectChevronRatchetTests). */
    background-color: rgba(10, 22, 40, 0.85);
    color: #fff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.lifecycle-select[b-p98kdclebv] {
    min-width: 160px;
    padding-right: 2.25rem;   /* room for the global chevron */
}

.lifecycle-select option[b-p98kdclebv] {
    background: #0a1628;
    color: #fff;
}

.lifecycle-note-input[b-p98kdclebv]::placeholder { color: rgba(255, 255, 255, 0.35); }

.lifecycle-select:focus-visible[b-p98kdclebv],
.lifecycle-note-input:focus-visible[b-p98kdclebv] {
    outline: 2px solid #31DDE3;
    outline-offset: 1px;
}

.lifecycle-hint[b-p98kdclebv] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.lifecycle-error[b-p98kdclebv] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: #f87171;
}

.lifecycle-actions[b-p98kdclebv] {
    display: flex;
    gap: 10px;
}
/* /Components/Pages/Admin/FoundingMembers.razor.rz.scp.css */
.fm-admin-hidden[b-l170v4s8re] {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    padding: 1rem 0;
}

.fm-admin-page[b-l170v4s8re] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.fm-admin-error[b-l170v4s8re] {
    color: #ef4444;
}

.fm-admin-note[b-l170v4s8re] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

.fm-admin-contact[b-l170v4s8re] {
    color: #31DDE3;
    text-decoration: none;
}

.fm-admin-contact:hover[b-l170v4s8re] {
    text-decoration: underline;
}

.fm-admin-contact-none[b-l170v4s8re] {
    color: rgba(255, 255, 255, 0.4);
}

.fm-admin-table[b-l170v4s8re] {
    width: 100%;
    border-collapse: collapse;
}

.fm-admin-table thead th[b-l170v4s8re] {
    text-align: left;
    padding: 0.65rem 0.85rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(49, 221, 227, 0.2);
}

.fm-admin-table tbody td[b-l170v4s8re] {
    padding: 0.7rem 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fm-admin-num[b-l170v4s8re] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #B88536;
    font-weight: 600;
}

.fm-admin-thanked td[b-l170v4s8re] {
    color: rgba(255, 255, 255, 0.5);
}

.fm-admin-thanked-label[b-l170v4s8re] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #10b981;
    margin-right: 0.75rem;
}

.fm-admin-thanked-label[b-l170v4s8re]  i {
    font-size: 14px;
}

.fm-admin-mark[b-l170v4s8re] {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
}

.fm-admin-undo[b-l170v4s8re] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.fm-admin-undo:hover:not(:disabled)[b-l170v4s8re] {
    background: rgba(255, 255, 255, 0.14);
}
/* /Components/Pages/Admin/HeardAboutAnswers.razor.rz.scp.css */
/* #7063 - the heard-about attribution view. Chrome only: Card, StatsRow,
   StatItem, EmptyState and Button own their own styling, and .card-header /
   .card-title / .card-body are the shared Card's and are never redefined
   here. */

.heard-page[b-bu7bap2u3k] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.heard-range[b-bu7bap2u3k] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.heard-field[b-bu7bap2u3k] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
}

.heard-date[b-bu7bap2u3k] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    padding: 0.5rem 0.75rem;
}

.heard-date:focus[b-bu7bap2u3k] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

.heard-presets[b-bu7bap2u3k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.heard-preset[b-bu7bap2u3k] {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 35%, transparent);
    border-radius: 50px;
    color: var(--ascend-accent);
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding: 0.35rem 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.heard-preset:hover[b-bu7bap2u3k] {
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
    border-color: var(--ascend-accent);
}

.heard-range-note[b-bu7bap2u3k],
.heard-note[b-bu7bap2u3k],
.heard-message[b-bu7bap2u3k] {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    margin: 0.75rem 0 0;
}

.heard-actions[b-bu7bap2u3k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.heard-actions .heard-note[b-bu7bap2u3k] {
    margin: 0;
}

.heard-count[b-bu7bap2u3k] {
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-variant-numeric: tabular-nums;
}

.heard-share[b-bu7bap2u3k] {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-variant-numeric: tabular-nums;
}

/* The typed answers are the reason this page exists - let them read as prose
   rather than as another table cell. */
.heard-detail[b-bu7bap2u3k] {
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
}

[b-bu7bap2u3k] .heard-verbatim td,
[b-bu7bap2u3k] .heard-channels td {
    vertical-align: top;
}

[b-bu7bap2u3k] td.heard-num,
[b-bu7bap2u3k] th.heard-num {
    text-align: right;
}

[b-bu7bap2u3k] td.heard-when {
    white-space: nowrap;
}
/* /Components/Pages/Admin/HelpArticles.razor.rz.scp.css */
/* #8745 - /admin/help. Page-scoped; the Card, Button and PageContainer own their own chrome. */

.ha-page[b-x6c2eln1ph] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.ha-list-head[b-x6c2eln1ph] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ha-lede[b-x6c2eln1ph] {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    flex: 1 1 18rem;
    min-width: 0;
}

.ha-dim[b-x6c2eln1ph] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.ha-ok[b-x6c2eln1ph] {
    color: var(--ascend-success);
}

.ha-problems[b-x6c2eln1ph] {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ascend-warning);
    font-size: 0.85rem;
}

.ha-problems li[b-x6c2eln1ph] {
    overflow-wrap: anywhere;
}

.ha-state[b-x6c2eln1ph] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

.ha-state-published[b-x6c2eln1ph] {
    border-color: rgba(16, 185, 129, 0.6);
    color: #6ee7b7;
}

.ha-state-publishedwithnewerdraft[b-x6c2eln1ph] {
    border-color: rgba(49, 221, 227, 0.6);
    color: var(--ascend-accent);
}

.ha-error[b-x6c2eln1ph] {
    color: var(--ascend-error-light);
    margin: 0;
}

.ha-notice[b-x6c2eln1ph] {
    color: #6ee7b7;
    margin: 0;
}

.ha-editor[b-x6c2eln1ph] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.ha-editor-title[b-x6c2eln1ph] {
    margin: 0;
    color: var(--ascend-text-light);
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

.ha-history-title[b-x6c2eln1ph] {
    margin: 0.5rem 0 0;
    color: var(--ascend-accent);
    font-size: 1rem;
}

.ha-editor label[b-x6c2eln1ph] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.85);
}

.ha-hint[b-x6c2eln1ph] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.ha-input[b-x6c2eln1ph] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.75rem 1rem;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    min-height: 44px;
}

.ha-input:focus[b-x6c2eln1ph] {
    outline: none;
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.15);
}

.ha-body[b-x6c2eln1ph] {
    line-height: 1.5;
    resize: vertical;
}

.ha-mono[b-x6c2eln1ph] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.85rem;
}

.ha-preview[b-x6c2eln1ph] {
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    min-width: 0;
}

.ha-preview-label[b-x6c2eln1ph] {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
}

.ha-preview-body[b-x6c2eln1ph] {
    color: rgba(255, 255, 255, 0.9);
    overflow-wrap: anywhere;
}

.ha-preview-body[b-x6c2eln1ph]  p {
    margin: 0 0 0.6rem;
}

.ha-preview-body[b-x6c2eln1ph]  ul,
.ha-preview-body[b-x6c2eln1ph]  ol {
    margin: 0 0 0.6rem;
    padding-left: 1.25rem;
}

.ha-actions[b-x6c2eln1ph] {
    flex-wrap: wrap;
}
/* /Components/Pages/Admin/KnowledgeCorpus.razor.rz.scp.css */
/* PBI #6753 - training-corpus export console. */

.corpus-actions[b-8sk6kcwbk5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 1rem;
}

.corpus-note[b-8sk6kcwbk5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.corpus-grid[b-8sk6kcwbk5] {
    margin-top: 0.5rem;
}

.corpus-when[b-8sk6kcwbk5],
.corpus-model[b-8sk6kcwbk5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
}

/* The verdict is the one column an operator scans for, so it reads as a
   label rather than body text. Refuted is muted gold, not red: a refutation
   is a successful outcome of the review loop, not an error. */
.corpus-verdict[b-8sk6kcwbk5] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    white-space: nowrap;
}

.corpus-verdict.is-confirm[b-8sk6kcwbk5] {
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
}

.corpus-verdict.is-refuted[b-8sk6kcwbk5] {
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.4);
    background: rgba(184, 133, 54, 0.08);
}

.corpus-text[b-8sk6kcwbk5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    display: inline-block;
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.corpus-message[b-8sk6kcwbk5] {
    margin-top: 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Pages/Admin/LessonPayments.razor.rz.scp.css */
/* #8716 slice 8 - the owner's lesson money list. Brand tokens only; the shared Card owns all
   .card-* chrome, the shared Button its own, and the one action sits on the shared .action-row
   (app.css). Same shape as /admin/lesson-reviews so the two pages read as one surface. */
.lpa-page[b-05ycpwgxxz] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.lpa-error[b-05ycpwgxxz] {
    margin: 0;
    color: var(--ascend-error-light);
}

.lpa-message[b-05ycpwgxxz] {
    margin: 0;
    color: var(--ascend-success);
}

.lpa-list[b-05ycpwgxxz] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lpa-row[b-05ycpwgxxz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.lpa-head[b-05ycpwgxxz],
.lpa-sub[b-05ycpwgxxz] {
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.lpa-sub[b-05ycpwgxxz] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}
/* /Components/Pages/Admin/MarketingQuotes.razor.rz.scp.css */
.mq-form[b-cq0wets0hm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.mq-form h3[b-cq0wets0hm] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    color: var(--ascend-text-light);
}

.mq-form label[b-cq0wets0hm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    flex: 1;
}

.mq-row[b-cq0wets0hm] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    align-items: flex-end;
}

.mq-input[b-cq0wets0hm] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
}

.mq-input:focus[b-cq0wets0hm] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
}

.mq-num[b-cq0wets0hm] {
    max-width: 7rem;
}

.mq-check[b-cq0wets0hm] {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    white-space: nowrap;
}

.mq-error[b-cq0wets0hm] {
    color: #ef4444;
    margin: 0;
}

.mq-toolbar[b-cq0wets0hm] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--space-md) var(--space-md) 0;
}

.mq-import-result[b-cq0wets0hm] {
    color: var(--ascend-accent);
    font-size: 0.875rem;
}

.mq-grid[b-cq0wets0hm] {
    padding: var(--space-sm);
}

.mq-grid[b-cq0wets0hm]  table {
    width: 100%;
}

.mq-grid[b-cq0wets0hm]  .mq-col-quote {
    max-width: 21rem;
}

.mq-dim[b-cq0wets0hm] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

.mq-link[b-cq0wets0hm] {
    background: none;
    border: none;
    color: var(--ascend-accent);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0 var(--space-xs);
}

.mq-danger[b-cq0wets0hm] {
    color: var(--ascend-error);
}

/* #6875 excerpts — sectioning one testimonial to the pages it fits. */

.mq-note[b-cq0wets0hm] {
    margin: 0;
    max-width: 60ch;
}

.mq-consent-note[b-cq0wets0hm] {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-left: 2px solid var(--ascend-secondary);
    background: rgba(184, 133, 54, 0.08);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--ascend-text-light);
    font-size: 0.875rem;
}

.mq-source[b-cq0wets0hm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    max-height: 22rem;
    overflow-y: auto;
}

.mq-para[b-cq0wets0hm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-start;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mq-para:last-of-type[b-cq0wets0hm] {
    border-bottom: none;
}

.mq-para p[b-cq0wets0hm] {
    margin: 0;
    color: var(--ascend-text-light);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.mq-excerpt-list[b-cq0wets0hm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.mq-excerpt[b-cq0wets0hm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
}

.mq-excerpt-tags[b-cq0wets0hm] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.mq-audience[b-cq0wets0hm] {
    padding: 0.125rem var(--space-sm);
    border: 1px solid var(--ascend-accent);
    border-radius: var(--radius-full);
    color: var(--ascend-accent);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mq-excerpt-text[b-cq0wets0hm] {
    margin: 0;
    color: var(--ascend-text-light);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.mq-excerpt-actions[b-cq0wets0hm] {
    display: flex;
    gap: var(--space-sm);
}

/* #9173 - whose consent a row records, under its status. */
.mq-consent-source[b-cq0wets0hm] {
    display: block;
    font-size: 0.8rem;
}
/* /Components/Pages/Admin/PromptTemplates.razor.rz.scp.css */
.pt-dim[b-7fzfnn9uwf] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.pt-editor[b-7fzfnn9uwf] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.5rem;
}

.pt-editor h3[b-7fzfnn9uwf] {
    margin: 0;
    color: #ffffff;
}

.pt-editor h4[b-7fzfnn9uwf] {
    margin: 0.5rem 0 0;
    color: #31DDE3;
}

.pt-desc[b-7fzfnn9uwf] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.pt-clauses[b-7fzfnn9uwf] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.pt-clause[b-7fzfnn9uwf] {
    margin-left: 0.4rem;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
    color: #31DDE3;
}

.pt-editor label[b-7fzfnn9uwf] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.85);
}

.pt-input[b-7fzfnn9uwf] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.75rem 1rem;
    width: 100%;
    box-sizing: border-box;
}

.pt-input:focus[b-7fzfnn9uwf] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.pt-mono[b-7fzfnn9uwf] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre;
}

.pt-error[b-7fzfnn9uwf] {
    color: #ef4444;
    margin: 0;
}

.pt-notice[b-7fzfnn9uwf] {
    color: #10b981;
    margin: 0;
}

.pt-link[b-7fzfnn9uwf] {
    background: none;
    border: none;
    color: #31DDE3;
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-decoration: underline;
}
/* /Components/Pages/Admin/RoleManager.razor.rz.scp.css */
/* Role manager — grant/remove additive admin-hub roles. */
.role-page[b-u323akbtax] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.role-add[b-u323akbtax] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* #7266: fill, border, radius, colour and padding duplicated the global
   .form-input in app.css (#7258). The border also reached for
   --ascend-accent-border, a token that has never been defined, so it was the
   hard-coded fallback doing the work. */
.role-add .form-input[b-u323akbtax] {
    width: 100%;
    box-sizing: border-box;
}

.role-add[b-u323akbtax]  .role-grant-button {
    width: 100%;
}

@media (min-width: 480px) {
    .role-add .form-input[b-u323akbtax] {
        width: auto;
        flex: 1 1 220px;
        min-width: 0;
    }

    .role-add[b-u323akbtax]  .role-grant-button {
        width: auto;
    }
}

/* Multi-select role toggle-chips — one per manageable role, click to toggle. */
.role-toggle-set[b-u323akbtax] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.role-toggle[b-u323akbtax] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ascend-accent-border, rgba(49, 221, 227, 0.2));
    border-radius: 50px;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.role-toggle:hover:not(:disabled)[b-u323akbtax] {
    border-color: var(--ascend-accent);
    color: #ffffff;
}

.role-toggle.is-selected[b-u323akbtax] {
    color: var(--ascend-accent-light, var(--ascend-accent));
    background: rgba(49, 221, 227, 0.14);
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.role-toggle:disabled[b-u323akbtax] {
    opacity: 0.5;
    cursor: default;
}

.role-toggle[b-u323akbtax]  i {
    font-size: 11px;
}

.role-hint[b-u323akbtax] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.role-error[b-u323akbtax] {
    color: #ef4444;
    margin: 0;
}

.role-message[b-u323akbtax] {
    color: var(--ascend-accent);
    margin: 0;
}

.role-table[b-u323akbtax] {
    width: 100%;
    border-collapse: collapse;
}

.role-table th[b-u323akbtax] {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ascend-accent-border, rgba(49, 221, 227, 0.25));
}

.role-table td[b-u323akbtax] {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
    vertical-align: middle;
}

.role-pending[b-u323akbtax] {
    margin-left: 0.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-accent);
    border: 1px solid var(--ascend-accent-border, rgba(49, 221, 227, 0.4));
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
}

.role-pending-row td[b-u323akbtax] {
    color: rgba(255, 255, 255, 0.6);
}

.role-chips[b-u323akbtax] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.role-chip[b-u323akbtax] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.4);
    border-radius: 50px;
    padding: 0.2rem 0.35rem 0.2rem 0.7rem;
}

.role-chip-x[b-u323akbtax] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 50%;
    color: var(--ascend-text-light);
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    cursor: pointer;
}

.role-chip-x[b-u323akbtax]  i {
    display: block;
    font-size: 10px;
}

/* Inline per-row "add role" — the roles a user does NOT yet hold, click to grant. */
.role-chip-add[b-u323akbtax] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: var(--ascend-accent);
    background: transparent;
    border: 1px dashed var(--ascend-accent-border, rgba(49, 221, 227, 0.35));
    border-radius: 50px;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.role-chip-add:hover:not(:disabled)[b-u323akbtax] {
    background: rgba(49, 221, 227, 0.12);
    border-style: solid;
    color: var(--ascend-accent-light, var(--ascend-accent));
}

.role-chip-add:disabled[b-u323akbtax] {
    opacity: 0.5;
    cursor: default;
}

.role-chip-add[b-u323akbtax]  i {
    font-size: 9px;
}

.role-empty[b-u323akbtax] {
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
}

/* #9261 - the role-change history under the assignments table. */
.role-history[b-u323akbtax] {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.role-history-title[b-u323akbtax] {
    margin: 0;
    font-size: 1.1rem;
    /* #9570 - the global h2 color is the light theme's dark text (1:1 on this navy); the page's light text token. */
    color: var(--ascend-text-light);
}

.role-history-note[b-u323akbtax] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 65ch;
}
/* /Components/Pages/Admin/ServiceAccounts.razor.rz.scp.css */
/* PBI #6758 - admin service-account provisioning. Brand tokens only; the shared
   Card owns all .card-* chrome, so nothing here touches it. */
.svcacct-page[b-a1qrfbitch] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* --- Provision form --- */
.svcacct-form[b-a1qrfbitch] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

@media (min-width: 720px) {
    .svcacct-form[b-a1qrfbitch] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.svcacct-field[b-a1qrfbitch] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.svcacct-label[b-a1qrfbitch] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}

/* #7266: fill, border, radius, colour, padding and the focus ring duplicated
   the global .form-input in app.css (#7258); the placeholder had DRIFTED DOWN
   to 0.4 white against the global 0.5, so the global value wins. */
.svcacct-field .form-input[b-a1qrfbitch],
.svcacct-form .form-input[b-a1qrfbitch] {
    width: 100%;
    box-sizing: border-box;
}

/* --- Role toggles --- */
.svcacct-roles[b-a1qrfbitch] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
}

.svcacct-toggle-set[b-a1qrfbitch] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.svcacct-toggle[b-a1qrfbitch] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 50px;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.svcacct-toggle:hover:not(:disabled):not(.is-fixed)[b-a1qrfbitch] {
    border-color: var(--ascend-accent);
    color: var(--ascend-text-light);
}

.svcacct-toggle.is-selected[b-a1qrfbitch] {
    color: var(--ascend-accent-light);
    background: rgba(49, 221, 227, 0.14);
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

/* Admin is the one choice that changes the risk profile of the account. */
.svcacct-toggle.is-risky.is-selected[b-a1qrfbitch] {
    color: var(--ascend-warning);
    background: rgba(245, 158, 11, 0.14);
    border-color: var(--ascend-warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.svcacct-toggle.is-fixed[b-a1qrfbitch] {
    cursor: default;
    color: rgba(255, 255, 255, 0.55);
    border-style: dashed;
}

.svcacct-toggle:disabled[b-a1qrfbitch] {
    opacity: 0.5;
    cursor: default;
}

.svcacct-toggle[b-a1qrfbitch]  i {
    font-size: 11px;
}

/* --- Admin opt-in warning --- */
.svcacct-admin-warning[b-a1qrfbitch] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

.svcacct-admin-warning strong[b-a1qrfbitch] {
    display: block;
    color: var(--ascend-warning);
}

.svcacct-admin-warning[b-a1qrfbitch]  i {
    font-size: 16px;
    flex-shrink: 0;
}

.svcacct-confirm[b-a1qrfbitch] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    cursor: pointer;
}

.svcacct-confirm[b-a1qrfbitch]  input[type="checkbox"] {
    accent-color: var(--ascend-warning);
    width: 1rem;
    height: 1rem;
}

/* --- Actions + messages --- */
.svcacct-actions[b-a1qrfbitch] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.1rem;
}

.svcacct-error[b-a1qrfbitch] {
    margin: 0.85rem 0 0;
    color: var(--ascend-error);
    font-size: 0.9rem;
}

.svcacct-message[b-a1qrfbitch] {
    margin: 0.85rem 0 0;
    color: var(--ascend-accent);
    font-size: 0.9rem;
}

/* --- One-time credential --- */
.svcacct-credential[b-a1qrfbitch] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
}

.svcacct-secret[b-a1qrfbitch] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    word-break: break-all;
    user-select: all;
    color: var(--ascend-accent-light);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.svcacct-hint[b-a1qrfbitch] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Roster table --- */
.svcacct-table[b-a1qrfbitch] {
    width: 100%;
    border-collapse: collapse;
}

.svcacct-table th[b-a1qrfbitch] {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.25);
}

.svcacct-table td[b-a1qrfbitch] {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
    vertical-align: middle;
}

.svcacct-revoked-row td[b-a1qrfbitch] {
    color: rgba(255, 255, 255, 0.45);
}

.svcacct-chips[b-a1qrfbitch] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.svcacct-chip[b-a1qrfbitch] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.4);
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
}

/* The risk flag the list must never bury: this account can reach the admin hub. */
.svcacct-chip-admin[b-a1qrfbitch] {
    color: var(--ascend-warning);
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.5);
}

.svcacct-chip-admin[b-a1qrfbitch]  i {
    font-size: 10px;
}

.svcacct-chip-fixture[b-a1qrfbitch] {
    margin-left: 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-accent);
    background: transparent;
    border-color: rgba(49, 221, 227, 0.4);
}

.svcacct-row-actions[b-a1qrfbitch] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.svcacct-link[b-a1qrfbitch] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: var(--ascend-accent);
    background: transparent;
    border: none;
    border-bottom: 1px dotted rgba(49, 221, 227, 0.5);
    padding: 0;
    cursor: pointer;
}

.svcacct-link:hover:not(:disabled)[b-a1qrfbitch] {
    color: var(--ascend-accent-light);
    border-bottom-style: solid;
}

.svcacct-link-danger[b-a1qrfbitch] {
    color: var(--ascend-error);
    border-bottom-color: rgba(239, 68, 68, 0.5);
}

.svcacct-link-danger:hover:not(:disabled)[b-a1qrfbitch] {
    color: var(--ascend-error);
}

.svcacct-link:disabled[b-a1qrfbitch] {
    opacity: 0.5;
    cursor: default;
}

/* #7146 - customer-reset extension */
.svcacct-customer-summary[b-a1qrfbitch] {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.svcacct-customer-summary > p[b-a1qrfbitch] {
    margin: 0 0 0.5rem;
    color: var(--ascend-text, #ffffff);
}

.svcacct-customer-summary .svcacct-admin-warning[b-a1qrfbitch] {
    margin-top: 1rem;
}
/* /Components/Pages/Admin/SignupNudgeConsole.razor.rz.scp.css */
/* PBI #6925 - /admin/signup-nudge. Tokens only; Card owns its own header and body. */

.sn-gate[b-rvev86pp58] {
    padding: 1rem;
}

.sn-help[b-rvev86pp58] {
    color: var(--ascend-text-secondary);
    margin: 0.75rem 0.5rem;
}

.sn-dim[b-rvev86pp58] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: var(--ascend-text-secondary);
    margin: 0.5rem;
}

.sn-warn[b-rvev86pp58] {
    color: var(--ascend-secondary-light);
    margin: 0.5rem;
}

.sn-notice[b-rvev86pp58] {
    color: var(--ascend-accent);
    margin: 0.5rem;
}

.sn-error[b-rvev86pp58] {
    color: var(--ascend-error);
    margin: 0.5rem;
}

.sn-grid[b-rvev86pp58] {
    margin-top: 1rem;
}

.sn-selected[b-rvev86pp58] {
    color: var(--ascend-accent);
    white-space: nowrap;
}

.sn-excluded[b-rvev86pp58] {
    color: var(--ascend-text-secondary);
}

.sn-meta[b-rvev86pp58] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0 0.5rem 1rem;
    color: var(--ascend-text-light);
}

.sn-meta dt[b-rvev86pp58] {
    color: var(--ascend-text-secondary);
}

.sn-meta dd[b-rvev86pp58] {
    margin: 0;
    overflow-wrap: anywhere;
}

.sn-frame[b-rvev86pp58] {
    width: 100%;
    height: 40rem;
    border: 1px solid var(--ascend-border);
    border-radius: 12px;
    background: var(--ascend-bg-light);
}
/* /Components/Pages/Admin/SmeRates.razor.rz.scp.css */
/* #6538 - admin per-SME rate management. */
.sme-rates-page[b-h4lnjx075s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.smr-grid[b-h4lnjx075s] {
    padding: var(--space-sm);
}

.smr-grid[b-h4lnjx075s]  table {
    width: 100%;
}

.smr-amount[b-h4lnjx075s] {
    color: var(--ascend-secondary-light);
    font-weight: 600;
}

.smr-dim[b-h4lnjx075s] {
    color: rgba(255, 255, 255, 0.5);
}

.smr-warn[b-h4lnjx075s] {
    color: var(--ascend-warning);
    font-weight: 600;
}

.smr-history-title[b-h4lnjx075s] {
    margin: 0;
    padding: var(--space-md) var(--space-md) 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    color: var(--ascend-text-light);
}

.smr-add[b-h4lnjx075s] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
    padding: var(--space-md) var(--space-md) 0;
}

/* #7266: fill, border, radius, colour and padding duplicated the global
   .form-input in app.css (#7258). */
.smr-add .form-input[b-h4lnjx075s] {
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 480px) {
    .smr-add .smr-rate-input[b-h4lnjx075s] {
        width: auto;
        flex: 0 1 200px;
    }

    .smr-add .smr-date-input[b-h4lnjx075s] {
        width: auto;
        flex: 0 1 190px;
    }
}

.smr-add-hint[b-h4lnjx075s] {
    margin: 0;
    padding: var(--space-xs) var(--space-md) 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}

.smr-error[b-h4lnjx075s] {
    margin: 0;
    padding: var(--space-xs) var(--space-md) 0;
    color: var(--ascend-error);
}

.smr-message[b-h4lnjx075s] {
    margin: 0;
    padding: var(--space-xs) var(--space-md) 0;
    color: var(--ascend-accent);
}
/* /Components/Pages/Admin/Subscribers.razor.rz.scp.css */
/* #6816 admin subscriber roster. Tokens only - no raw brand hex / font names
   (see CLAUDE.md; Feature #6303 tracks the existing drift elsewhere). */

.subs-hidden[b-fdxvww988o] {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    padding: var(--space-md) 0;
}

.subs-error[b-fdxvww988o] {
    color: var(--ascend-danger, #ef4444);
}

.subs-page[b-fdxvww988o] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.subs-note[b-fdxvww988o] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

.subs-note a[b-fdxvww988o] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.subs-note a:hover[b-fdxvww988o] {
    text-decoration: underline;
}

/* --- grid cells ------------------------------------------------------- */

.subs-who[b-fdxvww988o] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.subs-name[b-fdxvww988o] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.9);
}

.subs-email[b-fdxvww988o] {
    color: var(--ascend-accent);
    text-decoration: none;
    font-size: 0.82rem;
}

.subs-email:hover[b-fdxvww988o] {
    text-decoration: underline;
}

.subs-tier[b-fdxvww988o] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-secondary);
    font-weight: 600;
    margin-right: 0.4rem;
}

.subs-cadence[b-fdxvww988o] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

.subs-addon[b-fdxvww988o] {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}

.subs-status[b-fdxvww988o] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 50px;
    font-size: 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.8);
}

.subs-status-active[b-fdxvww988o] {
    border-color: rgba(49, 221, 227, 0.45);
    color: var(--ascend-accent);
}

.subs-status-trialing[b-fdxvww988o] {
    border-color: rgba(184, 133, 54, 0.5);
    color: var(--ascend-secondary-light);
}

.subs-status-pastdue[b-fdxvww988o],
.subs-status-unpaid[b-fdxvww988o] {
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}

.subs-status-canceled[b-fdxvww988o],
.subs-status-incomplete[b-fdxvww988o],
.subs-status-paused[b-fdxvww988o] {
    color: rgba(255, 255, 255, 0.5);
}

.subs-canceling[b-fdxvww988o],
.subs-soon[b-fdxvww988o] {
    display: block;
    font-size: 0.75rem;
    color: var(--ascend-secondary-light);
    margin-top: 0.2rem;
}

.subs-founding[b-fdxvww988o] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-secondary);
    font-weight: 600;
}

.subs-none[b-fdxvww988o] {
    color: rgba(255, 255, 255, 0.35);
}

/* Review round 1 (#8892): with the Cancel reason column added, a date must never
   break at its hyphen ("2026-06-" / "19"); the grid scrolls sideways instead. */
.subs-date[b-fdxvww988o] {
    white-space: nowrap;
}

/* --- #8892 why members cancel ----------------------------------------- */

.subs-why-windows[b-fdxvww988o] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--space-md);
}

.subs-why-lists[b-fdxvww988o] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.subs-why[b-fdxvww988o] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    column-gap: var(--space-lg);
}

.subs-why-row[b-fdxvww988o] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.subs-why-label[b-fdxvww988o] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.subs-why-count[b-fdxvww988o] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.subs-why-row-muted .subs-why-label[b-fdxvww988o],
.subs-why-row-muted .subs-why-count[b-fdxvww988o] {
    color: rgba(255, 255, 255, 0.6);
}

.subs-why-row-total .subs-why-label[b-fdxvww988o] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.9);
}

.subs-why-row-total .subs-why-count[b-fdxvww988o] {
    color: var(--ascend-secondary);
}

/* --- #8892 cancel reason column -------------------------------------- */

.subs-reason-cell[b-fdxvww988o] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 11rem;
    /* Narrow enough at 390px that an open note reads without a sideways scroll
       inside the grid once the column is in view, and capped at 18rem so the seven
       columns still fit at 1440 with a note open. */
    max-width: min(18rem, 70vw);
}

.subs-reason[b-fdxvww988o] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
}

.subs-reason-muted[b-fdxvww988o] {
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
}

.subs-reason-note summary[b-fdxvww988o] {
    cursor: pointer;
    color: var(--ascend-accent);
    font-size: 0.8rem;
    min-height: 24px;
    display: list-item;
}

.subs-reason-note-text[b-fdxvww988o] {
    margin: 0.3rem 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Admin/ToolEmailGateFunnel.razor.rz.scp.css */
/* #9469 - the tool email-gate funnel readout. */
.tg-funnel-page[b-eoxrwohvk6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.tg-funnel-presets[b-eoxrwohvk6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.tg-funnel-preset[b-eoxrwohvk6] {
    min-height: 44px;
    padding: 0 var(--space-md);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 35%, transparent);
    border-radius: 50px;
    background: transparent;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
}

.tg-funnel-preset:hover[b-eoxrwohvk6],
.tg-funnel-preset.is-active[b-eoxrwohvk6] {
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
    border-color: var(--ascend-accent);
}

.tg-funnel-grid[b-eoxrwohvk6]  .tg-funnel-table {
    width: 100%;
}

.tg-funnel-grid[b-eoxrwohvk6]  .tg-funnel-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Affiliate/AffiliateAgreement.razor.rz.scp.css */
/* Affiliate Program - the versioned agreement page (#6562). */

.affiliate-agreement-page[b-5b22w145ik] {
    max-width: 820px;
}

.ag-header[b-5b22w145ik] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ag-version[b-5b22w145ik] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-secondary-light);
}

.ag-accepted[b-5b22w145ik] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: #34d399;
}

.ag-rebump[b-5b22w145ik] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.875rem 1.125rem;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 12px;
    margin: 0 0 1.25rem;
}

.ag-body[b-5b22w145ik] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8);
}

.ag-body[b-5b22w145ik]  h1 {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    color: #ffffff;
    margin: 0 0 1rem;
}

.ag-body[b-5b22w145ik]  h2 {
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 1.5rem 0 0.75rem;
}

.ag-body[b-5b22w145ik]  li {
    margin-bottom: 0.5rem;
}

.ag-body[b-5b22w145ik]  strong {
    color: #ffffff;
}

.ag-accept[b-5b22w145ik] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.ag-accept-note[b-5b22w145ik] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* #6579 - the accepted-state next step: point at the dashboard. */
.ag-next[b-5b22w145ik] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.ag-next-note[b-5b22w145ik] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.ag-error[b-5b22w145ik] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: #fca5a5;
    margin: 0;
}

/* #8419 - what the agreement means for an SME (promoter-disclosure). */
.ag-sme-note[b-5b22w145ik] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.875rem 1.125rem;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    margin: 0 0 1.25rem;
}
/* /Components/Pages/Affiliate/AffiliateApply.razor.rz.scp.css */
/* Affiliate Program - the application form + status (#6561). */

.affiliate-apply-page[b-ddkb7wbo0r] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 760px;
}

.aap-status[b-ddkb7wbo0r],
.aap-form[b-ddkb7wbo0r] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.aap-status-title[b-ddkb7wbo0r] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}

.aap-dim[b-ddkb7wbo0r] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.aap-note[b-ddkb7wbo0r] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    padding: 0.75rem 1rem;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 12px;
}

.aap-actions[b-ddkb7wbo0r] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.aap-section-label[b-ddkb7wbo0r] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.8);
    margin: 1rem 0 0.5rem;
}

.aap-fields[b-ddkb7wbo0r] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.25rem;
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
}

.aap-fields dt[b-ddkb7wbo0r] {
    color: rgba(255, 255, 255, 0.55);
}

.aap-fields dd[b-ddkb7wbo0r] {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    white-space: pre-wrap;
}

.aap-field label[b-ddkb7wbo0r] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

.aap-input[b-ddkb7wbo0r] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    color: #ffffff;
    box-sizing: border-box;
    resize: vertical;
}

.aap-input:focus[b-ddkb7wbo0r] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.aap-input[b-ddkb7wbo0r]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.aap-error[b-ddkb7wbo0r] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: #fca5a5;
    margin: 0;
}

@media (max-width: 640px) {
    .aap-fields[b-ddkb7wbo0r] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .aap-fields dd[b-ddkb7wbo0r] {
        margin-bottom: 0.75rem;
    }
}
/* /Components/Pages/Affiliate/AffiliateDashboard.razor.rz.scp.css */
/* Affiliate Program - the self-serve dashboard (#6563). */

.affiliate-dashboard-page[b-k748o0q3kc] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ad-link-block[b-k748o0q3kc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.ad-link-header[b-k748o0q3kc] {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.ad-block-title[b-k748o0q3kc] {
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    color: #ffffff;
    margin: 0;
}

.ad-state[b-k748o0q3kc] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    border: 1px solid;
}

.ad-state-active[b-k748o0q3kc] {
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.ad-state-inactive[b-k748o0q3kc] {
    border-color: rgba(184, 133, 54, 0.45);
    color: var(--ascend-secondary-light);
}

.ad-label[b-k748o0q3kc] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

.ad-link-input[b-k748o0q3kc] {
    width: 100%;
    max-width: 560px;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: var(--ascend-accent-light);
    box-sizing: border-box;
}

.ad-reason[b-k748o0q3kc] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    padding: 0.75rem 1rem;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 12px;
    max-width: 62ch;
}

.ad-rate[b-k748o0q3kc] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0.25rem 0 0;
}

.ad-rate strong[b-k748o0q3kc] {
    color: var(--ascend-accent);
}

.ad-dim[b-k748o0q3kc] {
    color: rgba(255, 255, 255, 0.55);
}

.ad-amount[b-k748o0q3kc] {
    color: var(--ascend-secondary-light);
}

.ad-paid[b-k748o0q3kc] {
    color: #34d399;
    font-size: 0.875rem;
}

.ad-pending[b-k748o0q3kc] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

.ad-grid[b-k748o0q3kc] {
    overflow-x: auto;
}

.ad-totals[b-k748o0q3kc] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 1rem 0 0;
}
/* /Components/Pages/Affiliate/AffiliateHub.razor.rz.scp.css */
/* Affiliate Program - the /affiliate hub (#6565). */

.affiliate-hub-page[b-uueq9918vb] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* #6579 - the one state-aware "next step" card that threads the journey. */
.next-step[b-uueq9918vb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.next-step-label[b-uueq9918vb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.next-step-title[b-uueq9918vb] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}

.next-step-copy[b-uueq9918vb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 0.25rem;
    max-width: 60ch;
}

.upgrade-nudge[b-uueq9918vb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.upgrade-title[b-uueq9918vb] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}

.upgrade-copy[b-uueq9918vb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 0.5rem;
    max-width: 60ch;
}
/* /Components/Pages/Affiliate/AffiliateRegister.razor.rz.scp.css */
/* Affiliate Program - affiliate-only signup page (#6565).
   Mirrors CoachBridgeRegister.razor.css (coach-only account precedent) with
   tokens instead of raw literals; auth-shell chrome lives in wwwroot/app.css. */

.register-card[b-vuh0ygf4g4] {
    padding-bottom: 2rem;
}

.register-card h1[b-vuh0ygf4g4] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-vuh0ygf4g4] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 2rem;
    padding: 0 2rem;
}

.validation-summary[b-vuh0ygf4g4] {
    margin: 0 2rem 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #fca5a5;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

.validation-summary ul[b-vuh0ygf4g4] {
    margin: 0;
    padding-left: 1.5rem;
}

[b-vuh0ygf4g4] form {
    padding: 0 2rem;
}

.form-row[b-vuh0ygf4g4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.form-group[b-vuh0ygf4g4] {
    margin-bottom: 1.25rem;
}

.form-group label[b-vuh0ygf4g4] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

/* #7266: fill, border, radius, colour, font and the focus ring all duplicated
   the global .form-input in app.css (#7258); the placeholder had DRIFTED DOWN
   to 0.4 white against the global 0.5, so the global value wins. Only the
   box model this page needs is left. ::deep stays because InputText renders
   the <input>. */
[b-vuh0ygf4g4] .form-input {
    width: 100%;
    box-sizing: border-box;
}

.form-hint[b-vuh0ygf4g4] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

[b-vuh0ygf4g4] .btn-primary {
    width: 100%;
    margin-top: 0.5rem;
}

.register-footer[b-vuh0ygf4g4] {
    padding: 1.5rem 2rem 0;
    text-align: center;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    margin-top: 1.5rem;
    margin-left: 2rem;
    margin-right: 2rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.register-footer a[b-vuh0ygf4g4] {
    color: var(--ascend-accent);
    text-decoration: none;
    font-weight: 600;
}

.register-footer a:hover[b-vuh0ygf4g4] {
    color: var(--ascend-accent-light);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .register-card h1[b-vuh0ygf4g4] { font-size: 1.75rem; }
    .form-row[b-vuh0ygf4g4] { grid-template-columns: 1fr; }
    .validation-summary[b-vuh0ygf4g4] { margin-left: 1.5rem; margin-right: 1.5rem; }
    [b-vuh0ygf4g4] form { padding: 0 1.5rem; }
}
/* /Components/Pages/BestProphylacticMoveDrill.razor.rz.scp.css */
.prophylaxis-page[b-0dbay80gqx] {
    padding-bottom: 2rem;
}

.drill-intro[b-0dbay80gqx] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
}

.intro-description[b-0dbay80gqx] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.intro-description em[b-0dbay80gqx] {
    color: #31DDE3;
    font-style: italic;
}

.position-source[b-0dbay80gqx] {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    font-size: 0.85rem;
    margin: 0.5rem 0 1rem 0;
}

/* #9060 chunk 2 - the question, the move preview and Lock ride the idle verdict dock's Actions
   half, a plain column with its own 0.75rem gap, so they carry no vertical margins of their
   own. tabindex="-1" makes the question a focus target (a keyboard Next or Change lands here). */
.prompt[b-0dbay80gqx] {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin: 0;
}

.move-preview[b-0dbay80gqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.move-label[b-0dbay80gqx] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
}

.move-value[b-0dbay80gqx] {
    font-family: 'condor', monospace;
    font-size: 1.2rem;
    color: #31DDE3;
    font-weight: 600;
}

.move-clear[b-0dbay80gqx] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.move-clear:hover[b-0dbay80gqx] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.45);
}

/* #9060 chunk 2 - the reveal rides the verdict dock's Verdict half: the phone's width at the
   bottom of the screen, 20rem beside the board above 1100px. The dock is the panel now, so the
   reveal drops its own box and stays compact (TenSecondsDrill's shape): what does not fit
   scrolls inside the dock while Next stays pinned.

   Review round 1 - one flex column (the reveal row, the why, the annotation), so the phone rule
   at the end can put the why first with `order`; its children carry no margins of their own. */
.reveal-stack[b-0dbay80gqx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reveal-row[b-0dbay80gqx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: start;
}

.reveal-col[b-0dbay80gqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    text-align: center;
}

/* Review round 1 - one line wherever the reveal shows, and it only ever shows in the dock: a
   two-line "CANONICAL BEST" (the 20rem desktop dock, and 344px phones) knocked its value out of
   line with the other two. */
.reveal-label[b-0dbay80gqx] {
    font-size: 0.6rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.5);
}

.reveal-value[b-0dbay80gqx] {
    font-family: 'condor', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
}

.reveal-score .reveal-value[b-0dbay80gqx] {
    font-size: 1.15rem;
}

.score-strong[b-0dbay80gqx] {
    color: #10b981;
}

.score-modest[b-0dbay80gqx] {
    color: #B88536;
}

.score-weak[b-0dbay80gqx] {
    color: #ef4444;
}

.reveal-meta[b-0dbay80gqx] {
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.reveal-threat[b-0dbay80gqx] {
    padding: 0.75rem 1rem;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 10px;
    text-align: center;
}

.reveal-threat-label[b-0dbay80gqx] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #B88536;
    margin-bottom: 0.25rem;
}

.reveal-threat-value[b-0dbay80gqx] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
}

.reveal-annotation[b-0dbay80gqx] {
    font-style: italic;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

.submit-btn[b-0dbay80gqx] {
    margin-top: 0;
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 50px;
    padding: 0.875rem 1.25rem;
    font-family: 'condor', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.submit-btn:hover[b-0dbay80gqx] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
}

/* #9060 chunk 2 - Change is an answer control: the shared touch target on a touch screen
   (Lock and Next are already 49px). */
@media (hover: none) and (pointer: coarse) {
    .move-clear[b-0dbay80gqx] {
        min-height: var(--touch-target);
    }
}

/* #9060 chunk 2 - a phone's dock is about 240px tall. Tighter values keep the reveal row
   compact (the labels are one line at every width, above).

   Review round 1 - and the WHY comes first: with the verdict and the reveal row on top, the
   threat / drift prose sat under the dock's fold and the annotation in flow behind the fixed
   dock, so a phone showed the score but not the reason. The why now follows the verdict, then
   the annotation, and the reveal row goes last (the chip at the board already names the best
   move); the reading half scrolls, with its bottom-edge cue, for whatever does not fit. Visual
   order only; the DOM keeps the desktop order. */
@media (max-width: 480px) {
    .reveal-stack > .reveal-row[b-0dbay80gqx] {
        order: 1;
    }

    .reveal-col[b-0dbay80gqx] {
        gap: 0.1rem;
    }

    .reveal-value[b-0dbay80gqx] {
        font-size: 0.9rem;
        line-height: 1.15;
    }

    .reveal-score .reveal-value[b-0dbay80gqx] {
        font-size: 0.95rem;
    }
}
/* /Components/Pages/BlunderDrill.razor.rz.scp.css */
/* Page max-width intentionally NOT set — layout cap lives inside DrillShell
   (board column flex-caps at 600px, sidebar flexes beside). Adding a
   max-width here re-introduces the inconsistency PBI #5934 fixed. */
.blunder-drill-page[b-y9pk48vnjp] {
    padding: 0 1rem;
}

/* Loading */

/* Setup */
.setup-container[b-y9pk48vnjp] {
    max-width: 700px;
    margin: 0 auto;
}

.setup-header[b-y9pk48vnjp] {
    text-align: center;
    margin-bottom: 2rem;
}

.setup-title[b-y9pk48vnjp] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
}

.setup-subtitle[b-y9pk48vnjp] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* #6681 - VERIFIED by rendering at 390x844: .blunder-drill-page (1rem) plus
   .empty-state-card (2rem) leaves exactly 278px here, and the two-button exits
   ("Reset Progress"/"Go to Games", "Go to Games"/"Back to Insights") clip their
   labels by 9-12px unwrapped.
   #8844 - the two-button exits are on the shared .action-row .action-row--center:
   a full-width column on a phone (both exits one width; the old wrapping row
   stacked "Go to Games" 138px over "Back to Insights" 165px, both centered) and
   a centered row above 480px. This rule keeps only the spacing, plus the
   centered row for the one-button exit ("Drill all phases"). */
.empty-actions[b-y9pk48vnjp] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.section-heading[b-y9pk48vnjp] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.section-description[b-y9pk48vnjp] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
}

/* Row holding the Set-size + Game-phase selectors (#1152). Wraps on mobile. */
.drill-controls[b-y9pk48vnjp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.drill-set-size[b-y9pk48vnjp],
.drill-phase[b-y9pk48vnjp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.drill-set-size label[b-y9pk48vnjp],
.drill-phase label[b-y9pk48vnjp] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

/* #7266: both InputSelects here already carry class="form-input", and this
   file used to restate the entire native-select treatment on top of it - its
   own chevron, its own border at 30% accent (the global draws 20%/25%), its
   own hover at 55% (the global 40%), its own <option> fill and its own focus
   ring. All of it now comes from app.css: the `select` rule draws the caret
   and paints <option>, .form-input paints the field, select.form-input keeps
   the caret room. Nothing page-specific was left, so nothing is left here. */

/* Deviation preview list */
.deviation-preview-list[b-y9pk48vnjp] {
    text-align: left;
}

.deviation-preview[b-y9pk48vnjp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.deviation-move-num[b-y9pk48vnjp] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    min-width: 55px;
}

.deviation-opening[b-y9pk48vnjp] {
    color: rgba(255, 255, 255, 0.7);
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deviation-detail[b-y9pk48vnjp] {
    color: rgba(255, 255, 255, 0.5);
    flex: 1;
}

.deviation-detail .played[b-y9pk48vnjp] {
    color: #ef4444;
    font-weight: 500;
}

.deviation-detail .expected[b-y9pk48vnjp] {
    color: #10b981;
    font-weight: 500;
}

.deviation-count[b-y9pk48vnjp] {
    color: rgba(184, 133, 54, 0.8);
    font-weight: 600;
    font-size: 0.75rem;
}

.deviation-more[b-y9pk48vnjp] {
    text-align: center;
    padding: 0.5rem;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

.setup-actions[b-y9pk48vnjp] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Drill active */
/* Layout is provided by shared DrillShell — only the inner content
   styles below remain here. */

.board-area[b-y9pk48vnjp] {
    aspect-ratio: 1;
    width: 100%;
    position: relative;
}

/* #7519 - the grading indicator, over the board it has just locked. Sits
   BELOW the feedback overlay's z-index 10 on purpose: the verdict replaces the
   indicator, it never stacks on top of it. pointer-events are off so the scrim
   is a statement about the board's state and not a second thing blocking it -
   the board is already unmovable while this is up. */
.grading-overlay[b-y9pk48vnjp] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 5;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.72);
    animation: blunder-grading-in-b-y9pk48vnjp 0.15s ease-out;
}

/* ::deep because LoadingSpinner is a child component and owns its own markup.
   Its container is sized for a full page (min-height: 60vh), which inside a
   square board would push the spinner out of the box entirely. */
.grading-overlay[b-y9pk48vnjp]  .loading-container {
    min-height: 0;
}

@keyframes blunder-grading-in-b-y9pk48vnjp {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .grading-overlay[b-y9pk48vnjp] { animation: none; }
}

/* #8730 - THE VERDICT DOCK IS SHARED NOW AND THIS PAGE READS IT. #8710 built it
   here, for this page only, and left the other eight callers of
   DrillFeedbackOverlay flooding their boards. The sweep needed one copy, not
   nine, so: the row, its flex split, its room clip and its idle shell are
   DrillVerdictDock.razor.css, and the reserve plus the four viewport bands (the
   phone dock, the side panel, the flow fallback) are DrillShell.razor.css,
   reached with ::deep. The class names did not change, so this page's three test
   files point at the same elements they always did; the page opts in by passing
   ReserveVerdictRoom to <DrillShell />. What is left here is this page's own
   COSMETICS - the correction panel's type scale, set larger than the shared
   default because this panel carries a whole coaching sentence, and the
   flash-card offer. */

/* ============================================================
   #8710 (customer-filed) - the correction panel, below the board.

   It replaces the red flood that used to fill the board area. The
   member's words: "the red makes it hard to see the board and I
   cannot seem to make it go away." The correction names squares, so
   the board has to stay readable while it is on screen.

   flex-basis: 100% gives it its own line at the TOP of the row, above
   the buttons, on every width - the same device .deck-offer uses. On a
   phone the row is a fixed dock, so this puts the verdict and the
   control that clears it in the same thumb-reachable block.

   ::deep because the panel is DrillFeedbackOverlay's own markup and
   carries the shared component's scope id, not this page's. The ancestor is
   .blunder-correction rather than the row, because #8730 moved the row into
   <DrillVerdictDock /> and a ::deep rule compiles the SCOPE ID onto its
   ancestor - the row no longer carries this page's.
   ============================================================ */
.blunder-correction[b-y9pk48vnjp]  .drill-feedback-inline {
    /* #8710 round 3 - no flex-basis and no scroller of its own: it is a block
       inside .drill-advance-scroll, which owns the shrinking and the overflow.
       It used to carry flex: 1 1 100% to claim its own line in a wrapping row;
       the row is a column now and the panel is simply the first block in it. */
    text-align: left;
    /* The shared default is 0.9rem, sized for EvaluationDrill's own Body.
       This panel carries the whole coaching sentence, so it reads at the
       body size the rest of the drill uses. */
    font-size: 0.95rem;
    line-height: 1.45;
}

.blunder-correction[b-y9pk48vnjp]  .drill-feedback-inline-header {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}

.blunder-correction[b-y9pk48vnjp]  .drill-feedback-inline-header i {
    font-size: 1.25rem;
}

/* The shared .drill-feedback-sub is a span sized for the flood (1rem,
   centered under a 1.75rem verdict). Inline it is the body copy. */
.blunder-correction[b-y9pk48vnjp]  .drill-feedback-sub {
    display: block;
    margin-top: 0;
    font-size: 0.95rem;
}

.drill-next-btn[b-y9pk48vnjp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.drill-next-btn:hover[b-y9pk48vnjp] { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(49, 221, 227, 0.35); }
.drill-next-btn:focus-visible[b-y9pk48vnjp] { outline: 2px solid #31DDE3; outline-offset: 2px; }
.drill-next-btn i[b-y9pk48vnjp] { font-size: 1rem; }

/* #7173 - "Show the move", the secondary next to "Try again". Deliberately
   quieter than the retry: the drill's recommendation is to look again, and
   being handed the answer is the fallback, not the default. Same 44px touch
   target as the primary - the request came from a phone. */
.drill-reveal-btn[b-y9pk48vnjp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: rgba(49, 221, 227, 0.06);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.drill-reveal-btn:hover[b-y9pk48vnjp] { border-color: rgba(49, 221, 227, 0.5); color: var(--ascend-accent); }
.drill-reveal-btn:focus-visible[b-y9pk48vnjp] { outline: 2px solid var(--ascend-accent); outline-offset: 2px; }
.drill-reveal-btn i[b-y9pk48vnjp] { font-size: 0.95rem; }

/* Sidebar card chrome (background/border/padding) is provided by
   DrillShell's .drill-shell-sidebar — content below renders inside
   the SidebarRich slot, no extra card wrapper needed. */

/* Progress */
.progress-header[b-y9pk48vnjp] {
    margin-bottom: 1.25rem;
}

.progress-label[b-y9pk48vnjp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 0.5rem;
}

.progress-bar[b-y9pk48vnjp] {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-y9pk48vnjp] {
    height: 100%;
    background: linear-gradient(90deg, #31DDE3, #B88536);
    transition: width 0.3s ease;
    border-radius: 2px;
}

/* Position context */
.position-context[b-y9pk48vnjp] {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.context-opening[b-y9pk48vnjp] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: #ffffff;
    margin-bottom: 0.35rem;
}

.context-move[b-y9pk48vnjp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(49, 221, 227, 0.7);
    margin-bottom: 0.35rem;
}

.context-history[b-y9pk48vnjp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.context-history .played[b-y9pk48vnjp] {
    color: #ef4444;
    font-weight: 500;
}

/* Score */
.score-section[b-y9pk48vnjp] {
    display: flex;
    gap: 1.5rem;
}

.score-row[b-y9pk48vnjp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.score-label[b-y9pk48vnjp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.correct-label[b-y9pk48vnjp] { color: rgba(16, 185, 129, 0.7); }
.incorrect-label[b-y9pk48vnjp] { color: rgba(239, 68, 68, 0.7); }

.score-value[b-y9pk48vnjp] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.correct-value[b-y9pk48vnjp] { color: #10b981; }
.incorrect-value[b-y9pk48vnjp] { color: #ef4444; }

/* #7173 - the second-look tally. Cyan, not green: it is neither a right answer
   nor a wrong one, and colouring it green would read as "the retry fixed it". */
.retry-label[b-y9pk48vnjp] { color: rgba(49, 221, 227, 0.7); }
.retry-value[b-y9pk48vnjp] { color: var(--ascend-accent); }
.score-row-retry .score-value[b-y9pk48vnjp] { font-size: 1.25rem; }
.accent-value[b-y9pk48vnjp] { color: #31DDE3; }

/* Complete */
.complete-container[b-y9pk48vnjp] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.complete-card[b-y9pk48vnjp] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 3rem;
    max-width: 550px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    position: relative;
    overflow: hidden;
}

.complete-card[b-y9pk48vnjp]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
}

.complete-icon[b-y9pk48vnjp] {
    margin-bottom: 1rem;
}

.complete-title[b-y9pk48vnjp] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.complete-actions[b-y9pk48vnjp] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Blunder-specific */
.blunder-preview[b-y9pk48vnjp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.blunder-type[b-y9pk48vnjp] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.type-blunder[b-y9pk48vnjp] { background: rgba(239, 68, 68, 0.15); color: var(--ascend-text-light); }
.type-mistake[b-y9pk48vnjp] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.type-inaccuracy[b-y9pk48vnjp] { background: rgba(59, 130, 246, 0.15); color: var(--ascend-text-light); }

.blunder-move[b-y9pk48vnjp] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    min-width: 55px;
}

.blunder-detail[b-y9pk48vnjp] {
    color: rgba(255, 255, 255, 0.5);
    flex: 1;
}

.blunder-detail .played[b-y9pk48vnjp] { color: #ef4444; font-weight: 500; }

.blunder-game[b-y9pk48vnjp] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.blunder-more[b-y9pk48vnjp] {
    text-align: center;
    padding: 0.5rem;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

.mistake-badge[b-y9pk48vnjp] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    text-transform: uppercase;
    margin-right: 0.35rem;
}

.context-game[b-y9pk48vnjp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.35rem;
}

.context-mistake[b-y9pk48vnjp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.35rem;
}

.context-mistake .played[b-y9pk48vnjp] { color: #ef4444; font-weight: 500; }

/* Progress banner (setup) */
.progress-banner[b-y9pk48vnjp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 10px;
    margin-bottom: 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
}
.progress-banner i[b-y9pk48vnjp] { color: #31DDE3; font-size: 1.1rem; }
.progress-banner strong[b-y9pk48vnjp] { color: #ffffff; }
.progress-banner .link-btn[b-y9pk48vnjp] {
    margin-left: auto;
    background: none;
    border: none;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.progress-banner .link-btn:hover[b-y9pk48vnjp] { color: #42e8ed; }

/* Save as flash card */
.flash-card-action[b-y9pk48vnjp] { margin-top: 1rem; }
.flash-card-btn[b-y9pk48vnjp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.4);
    border-radius: 8px;
    color: #B88536;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.flash-card-btn:hover:not(:disabled)[b-y9pk48vnjp] {
    background: rgba(184, 133, 54, 0.18);
    border-color: #B88536;
    color: #d4a04c;
}
.flash-card-btn:disabled[b-y9pk48vnjp] { opacity: 0.7; cursor: default; }
.flash-card-btn.saved[b-y9pk48vnjp] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}
.flash-card-btn i[b-y9pk48vnjp] { font-size: 1rem; }
.flash-card-toast[b-y9pk48vnjp] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    text-align: center;
}
.flash-card-toast.success[b-y9pk48vnjp] { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.flash-card-toast.error[b-y9pk48vnjp] { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }/* Mobile */
@media (max-width: 768px) {
    .drill-container[b-y9pk48vnjp] {
        grid-template-columns: 1fr;
    }

    .blunder-preview[b-y9pk48vnjp] {
        flex-wrap: wrap;
    }

    /* #8710 - the dock is the only thing between the board and the bottom of
       a phone screen, so the correction is set tighter here than on desktop.

       ROUND 3 CORRECTED THE NUMBERS IN THIS COMMENT. It used to read "the full
       page is header 220 + board 280 + dock", which was wrong by 104px and
       contradicted round 2's own walk table. The 220 was invented out of a
       --page-header-block this page does not have: BlunderDrill passes
       <PageContainer> with NO Title, so PageContainer renders no .page-header,
       its `:has(> .page-header)` rule never matches, and --page-header-block
       resolves to its 0px fallback. Read off getComputedStyle at 344x740:

         --app-content-top .... calc(108px + 0.5rem) = 116px
         --page-header-block .. 0px
         board-area ........... top 116, height 280, bottom 396
         room under the board . 344px

       So the board's top edge is at 116, not 220, and every band number in the
       table above is measured from --app-content-top alone. The premise is
       pinned by DrillVerticalBudgetTests
       .BlunderDrill_Has_No_Page_Header_So_The_Header_Block_Is_Zero, because
       adding a Title to that PageContainer shifts the whole table by 42-52px. */
    .blunder-correction[b-y9pk48vnjp]  .drill-feedback-inline {
        padding: 0.7rem 0.85rem;
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .blunder-correction[b-y9pk48vnjp]  .drill-feedback-inline-header {
        font-size: 0.95rem;
        margin-bottom: 0.2rem;
    }

    .blunder-correction[b-y9pk48vnjp]  .drill-feedback-sub {
        font-size: 0.875rem;
    }
}

/* ============================================================
   #7173 follow-on - the second-look flash-card offer.

   It lives INSIDE the verdict dock's SCROLLING half rather than beside
   the buttons (#8710 round 3), because on a
   phone that row is a fixed bottom dock. Any sibling placed outside
   the dock lands several hundred px below the fold - the same reason
   the dock exists at all. Inside it, the offer and "Next position"
   arrive together, at the thumb.

   Quieter than .drill-next-btn on purpose. This is an invitation at a
   good moment, not the drill's recommendation; the action the page is
   steering toward is still moving on to the next position.
   ============================================================ */
.deck-offer[b-y9pk48vnjp] {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 10px;
}

.deck-offer-text[b-y9pk48vnjp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
    max-width: 46ch;
}

.deck-offer-actions[b-y9pk48vnjp] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* 44px minimum on BOTH actions at every width. Declining has to be as
   easy to hit as accepting - a decline that is fiddly on a phone is an
   accept by accident, and the deck fills with cards nobody chose. */
.deck-offer-add[b-y9pk48vnjp],
.deck-offer-skip[b-y9pk48vnjp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.deck-offer-add[b-y9pk48vnjp] {
    background: rgba(184, 133, 54, 0.16);
    border: 1px solid rgba(184, 133, 54, 0.5);
    color: var(--ascend-secondary-light);
}

.deck-offer-add:hover:not(:disabled)[b-y9pk48vnjp] { background: rgba(184, 133, 54, 0.26); border-color: var(--ascend-secondary); }
.deck-offer-add:focus-visible[b-y9pk48vnjp] { outline: 2px solid var(--ascend-secondary); outline-offset: 2px; }
.deck-offer-add:disabled[b-y9pk48vnjp] { opacity: 0.6; cursor: default; }
.deck-offer-add i[b-y9pk48vnjp] { font-size: 1rem; }

.deck-offer-skip[b-y9pk48vnjp] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.6);
}

.deck-offer-skip:hover:not(:disabled)[b-y9pk48vnjp] { border-color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85); }
.deck-offer-skip:focus-visible[b-y9pk48vnjp] { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; }
.deck-offer-skip:disabled[b-y9pk48vnjp] { opacity: 0.6; cursor: default; }

/* The confirmation replaces the offer in place, so the answer is where
   the question was. On a phone the sidebar toast is off-screen. */
.deck-offer-outcome[b-y9pk48vnjp] {
    flex: 1 1 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-align: center;
}

.deck-offer-outcome.ok[b-y9pk48vnjp] { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.deck-offer-outcome.warn[b-y9pk48vnjp] { background: rgba(184, 133, 54, 0.15); color: var(--ascend-secondary-light); }

@media (max-width: 600px) {
    /* The floating feedback FAB (MainLayout -> FeedbackButton) is fixed at
       right: 1rem with a 44px box, so it owns the rightmost 60px of the screen
       in a band 72-116px above the bottom edge. The shipped one-row dock is
       short enough that the FAB floats clear above it; the offer makes the dock
       tall enough to reach into that band, and at 390x844 the FAB landed on top
       of "Not this one".

       A decline the user cannot reliably hit is not a decline - the tap opens
       the feedback dialog instead - so the offer keeps out of the FAB's column.
       Inset here rather than moving the FAB, which is sitewide chrome and sits
       correctly on every other page. */
    .deck-offer[b-y9pk48vnjp],
    .deck-offer-outcome[b-y9pk48vnjp] {
        margin-right: 3rem;
    }

    /* #8710 - the correction panel sits in the same dock and reaches into
       the same band, so it keeps out of the FAB's column too. */
    .blunder-correction[b-y9pk48vnjp]  .drill-feedback-inline {
        margin-right: 3rem;
    }
}
/* /Components/Pages/BoardVision.razor.rz.scp.css */
/* #7858 - NO page-level max-width and NO page grid. Board modes ride the shared
   DrillShell, which owns the board column (600px cap) and the sidebar; a cap or a
   grid here is exactly what built the oversized board column that put pieces off
   their squares on a wide window. Board-less modes (square-color, diagonal-
   recognition) keep the single centered column below. See DrillShell.razor.css
   and DrillShellConvergenceTests. */

/* #9084 - the miss teaching is no longer a full-screen overlay (the old teach overlay was
   position: fixed; inset: 0 over the board, the board-flood shape #8710 / #8991 ban).
   It is the shared VisionTeachPanel now, styled in its own stylesheet. */

/* Mode picker */
.mode-override[b-y0mjwy3dc5] { margin-top: 1.5rem; }
.mode-override-label[b-y0mjwy3dc5] {
    display: flex; align-items: center; gap: 0.4rem;
    font-family: var(--ascend-font-secondary); font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55); letter-spacing: 0.5px;
    text-transform: uppercase; margin-bottom: 0.5rem;
}
.mode-override-label[b-y0mjwy3dc5]  i { color: var(--ascend-accent); font-size: 0.9rem; }

.mode-grid[b-y0mjwy3dc5] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
}
.mode-card[b-y0mjwy3dc5] {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.8rem 0.5rem; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15); border-radius: 10px;
    cursor: pointer; text-align: center; color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary); transition: all 0.15s;
}
.mode-card:hover[b-y0mjwy3dc5] { background: rgba(49, 221, 227, 0.06); border-color: rgba(49, 221, 227, 0.3); }
.mode-card.selected[b-y0mjwy3dc5] { background: rgba(49, 221, 227, 0.12); border-color: #31DDE3; color: #fff; }
.mode-card[b-y0mjwy3dc5]  i { font-size: 1.5rem; color: var(--ascend-accent); }
.mode-name[b-y0mjwy3dc5] { font-weight: 600; font-size: 0.85rem; }
.mode-desc[b-y0mjwy3dc5] { font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); }

/* HUD */
.drill-active[b-y0mjwy3dc5] { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.drill-hud[b-y0mjwy3dc5] {
    display: flex; gap: 2rem; justify-content: center; align-items: center;
    padding: 0.75rem 1.5rem; background: rgba(10, 22, 40, 0.9);
    border: 1px solid rgba(49, 221, 227, 0.2); border-radius: 12px;
    width: 100%;
}
.hud-item[b-y0mjwy3dc5] { text-align: center; }
.hud-label[b-y0mjwy3dc5] { display: block; font-family: var(--ascend-font-secondary); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.45); }
.hud-value[b-y0mjwy3dc5] { display: block; font-family: var(--ascend-font-primary); font-size: 1.5rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); }
.hud-item.timer .hud-value[b-y0mjwy3dc5] { color: #31DDE3; }

/* Bug #6696 - the clock is genuinely stopped while the miss teaching is up, so the
   HUD says so instead of leaving a frozen number looking like a glitch. */
.hud-item.timer.paused .hud-value[b-y0mjwy3dc5] { color: rgba(255, 255, 255, 0.45); }
/* Same signal on the shell chip used by the board modes. 0,4,0 so it outranks
   DrillShell's own chip value color (0,3,0). */
.shell-chip .shell-chip-value.clock-paused[b-y0mjwy3dc5] { color: rgba(255, 255, 255, 0.6); }

.mode-label[b-y0mjwy3dc5] { font-size: 0.85rem !important; color: rgba(255, 255, 255, 0.6) !important; }

/* Question area. Inside the shell the prompt heads DrillShell's question panel,
   which brings its own spacing. */
.drill-shell .question-prompt[b-y0mjwy3dc5] { margin: 0; font-size: 1.35rem; text-align: center; }
.drill-question[b-y0mjwy3dc5] { text-align: center; width: 100%; }
.question-prompt[b-y0mjwy3dc5] {
    font-family: var(--ascend-font-primary); font-size: 1.5rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.95); margin-bottom: 1.5rem;
}

/* Answer buttons */
.answer-buttons[b-y0mjwy3dc5] { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.answer-btn[b-y0mjwy3dc5] {
    min-width: 120px; padding: 1rem 2rem; font-family: var(--ascend-font-primary);
    font-size: 1.1rem; font-weight: 700; border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.9);
    cursor: pointer; transition: all 0.15s;
}
.answer-btn:hover:not(:disabled)[b-y0mjwy3dc5] { background: rgba(49, 221, 227, 0.1); border-color: #31DDE3; }
.answer-btn.correct[b-y0mjwy3dc5] { background: rgba(16, 185, 129, 0.2); border-color: #34d399; color: #34d399; }
.answer-btn.wrong[b-y0mjwy3dc5] { background: rgba(239, 68, 68, 0.2); border-color: #f87171; color: #f87171; }
.answer-buttons.rank-file[b-y0mjwy3dc5] { gap: 0.4rem; }
.answer-buttons.rank-file .answer-btn[b-y0mjwy3dc5] { min-width: 48px; padding: 0.6rem 0.8rem; font-size: 0.95rem; }

/* Text answer */
.text-answer[b-y0mjwy3dc5] { display: flex; justify-content: center; }
/* #7912 - the field is sized for its HINT, not only for the answer. It was a
   100px box (80px of room inside the padding and border) sized for a
   two-character answer, and the hint "e.g. e4" at the field's 2rem needs ~103px,
   so it rendered cut to "e.g. e" - at every width, first reported at 344px.
   9rem leaves ~124px of room: the hint fits at full size with margin for font
   fallback. Shrinking only the hint was tried and rejected - a smaller
   placeholder sits on the 2rem line's baseline, visibly low in the box. */
.answer-input[b-y0mjwy3dc5] {
    width: 9rem; text-align: center; font-family: var(--ascend-font-primary);
    font-size: 2rem; font-weight: 700; padding: 0.5rem; background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(49, 221, 227, 0.3); border-radius: 12px; color: #fff;
    text-transform: lowercase;
}
.answer-input:focus[b-y0mjwy3dc5] { outline: none; border-color: #31DDE3; }
.answer-input.correct[b-y0mjwy3dc5] { border-color: #34d399; background: rgba(16, 185, 129, 0.1); }
.answer-input.wrong[b-y0mjwy3dc5] { border-color: #f87171; background: rgba(239, 68, 68, 0.1); }

/* DrillShell's question panel is a stretch column, so a single button opts out
   of full width and sits centered under the prompt. */
.submit-sight-btn[b-y0mjwy3dc5] { align-self: center; }
.submit-sight-btn[b-y0mjwy3dc5] {
    margin-top: 1rem; padding: 0.7rem 2rem; font-family: var(--ascend-font-primary);
    font-size: 1rem; font-weight: 700; border: 2px solid rgba(49, 221, 227, 0.4);
    border-radius: 12px; background: rgba(49, 221, 227, 0.1); color: #31DDE3;
    cursor: pointer; transition: all 0.15s;
}
.submit-sight-btn:hover:not(:disabled)[b-y0mjwy3dc5] { background: rgba(49, 221, 227, 0.2); border-color: #31DDE3; }
.submit-sight-btn:disabled[b-y0mjwy3dc5] { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 640px) {
    .drill-hud[b-y0mjwy3dc5] { gap: 1rem; padding: 0.5rem 1rem; }
    .hud-value[b-y0mjwy3dc5] { font-size: 1.2rem; }
    .question-prompt[b-y0mjwy3dc5], .drill-shell .question-prompt[b-y0mjwy3dc5] { font-size: 1.2rem; }
    .answer-btn[b-y0mjwy3dc5] { min-width: 100px; padding: 0.75rem 1.5rem; }
}

/* #7190 (WCAG 1.4.1) - the slot for the icon + word chip under the answer
   area. The per-square verdict glyphs are DrillBoard's own now (#7858). */
.answer-result-slot[b-y0mjwy3dc5] {
    min-height: 2rem;
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
}
/* /Components/Pages/BookCatalog.razor.rz.scp.css */
.books-page[b-p9s1hvhet5] {
    background: radial-gradient(circle at top, rgba(49, 221, 227, 0.08), transparent 50%),
                linear-gradient(180deg, #0f172a 0%, #0a1628 100%);
    padding: 2rem;
}

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

.books-container[b-p9s1hvhet5] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* #7164 - unconditional Book Drills entry. Same visual family as StudyDetail's
   drill-due banner so the funnel reads as one feature across pages. */
.drills-strip[b-p9s1hvhet5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 10px;
}

.drills-strip-info[b-p9s1hvhet5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    min-width: 0;
}

.drills-strip-info > i[b-p9s1hvhet5] {
    color: var(--ascend-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.drills-strip-info strong[b-p9s1hvhet5] {
    color: var(--ascend-text-light);
}

.drills-strip-btn[b-p9s1hvhet5] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.875rem;
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-bg-dark);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: box-shadow 0.15s ease;
}

.drills-strip-btn:hover[b-p9s1hvhet5] {
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.3);
}

@media (max-width: 640px) {
    .drills-strip[b-p9s1hvhet5] {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .drills-strip-btn[b-p9s1hvhet5] {
        justify-content: center;
    }
}

/* Filter Bar */
.library-tabs[b-p9s1hvhet5] {
    display: flex;
    /* The tab row is as wide as the sum of its tabs - measured 410px against a
       390px phone, so the last tab fell off the right edge, and html/body's
       overflow-x: hidden left it unreachable rather than merely off-screen.
       Wrapping is the same accommodation .action-row and .board-controls make
       (#7296, same family as #6780). */
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.lib-tab[b-p9s1hvhet5] {
    padding: 6px 16px;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.15s ease;
}

.lib-tab:hover[b-p9s1hvhet5] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.lib-tab.active[b-p9s1hvhet5] {
    background: rgba(49, 221, 227, 0.12);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.rec-count[b-p9s1hvhet5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(184, 133, 54, 0.3);
    color: var(--ascend-text-light);
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 6px;
}

.badge-recommended[b-p9s1hvhet5] {
    background: rgba(184, 133, 54, 0.15);
    color: #B88536;
    border-color: rgba(184, 133, 54, 0.3);
}

.rec-reason[b-p9s1hvhet5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
    margin: 4px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rec-actions[b-p9s1hvhet5] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.rec-btn[b-p9s1hvhet5] {
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.rec-btn-add[b-p9s1hvhet5] {
    background: rgba(49, 221, 227, 0.12);
    color: #31DDE3;
}

.rec-btn-add:hover[b-p9s1hvhet5] {
    background: rgba(49, 221, 227, 0.2);
}

.rec-btn-wishlist[b-p9s1hvhet5] {
    background: rgba(168, 85, 247, 0.12);
    color: var(--ascend-text-light);
}

.rec-btn-wishlist:hover[b-p9s1hvhet5] {
    background: rgba(168, 85, 247, 0.2);
}

.rec-btn-ordered[b-p9s1hvhet5] {
    background: rgba(184, 133, 54, 0.14);
    color: #f4a83b;
}

.rec-btn-ordered:hover[b-p9s1hvhet5] {
    background: rgba(184, 133, 54, 0.24);
}

.rec-count.ordered-count[b-p9s1hvhet5] {
    background: rgba(184, 133, 54, 0.5);
}

.find-result-category[b-p9s1hvhet5] {
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.2);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    width: 100%;
    max-width: 260px;
}

.find-result-category:focus[b-p9s1hvhet5] {
    outline: none;
    border-color: var(--ascend-accent);
}

.rec-btn-dismiss[b-p9s1hvhet5] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ascend-text-secondary);
}

.rec-btn-dismiss:hover[b-p9s1hvhet5] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--ascend-text-light);
}

/* Find a Book modal */

.find-search-row[b-p9s1hvhet5] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.find-search-row[b-p9s1hvhet5]  .form-input {
    flex: 1;
}

.find-isbn-row[b-p9s1hvhet5] {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.find-isbn-row[b-p9s1hvhet5]  .form-input {
    flex: 1;
}

.find-results[b-p9s1hvhet5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.find-result-card[b-p9s1hvhet5] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.find-result-card:hover[b-p9s1hvhet5] {
    background: rgba(49, 221, 227, 0.04);
    border-color: rgba(49, 221, 227, 0.15);
}

.find-result-cover[b-p9s1hvhet5] {
    width: 48px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

.find-result-cover img[b-p9s1hvhet5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.find-cover-placeholder[b-p9s1hvhet5] {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    /* #7232: 0.2 read 1.91:1. */
    color: rgba(255, 255, 255, 0.5);
}

.find-result-info[b-p9s1hvhet5] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.find-result-title[b-p9s1hvhet5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.find-result-author[b-p9s1hvhet5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.find-result-year[b-p9s1hvhet5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
}

.find-result-actions[b-p9s1hvhet5] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.find-empty[b-p9s1hvhet5] {
    text-align: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    padding: 24px 0;
}

/* #7735 — the second overflowing element on this page in the tablet band.
   The header actions were the headline (see PageContainer.razor.css), but a
   nowrap filter row put .filter-search's right edge at 960px on an 834px
   viewport for the same reason: four selects plus a 160px-min search field
   exceed the content column, and with html/body at overflow-x: hidden the
   remainder is unreachable rather than scrollable (#7296). */
.filter-bar[b-p9s1hvhet5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

[b-p9s1hvhet5] .filter-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-p9s1hvhet5] .filter-select:focus {
    outline: none;
    border-color: #31DDE3;
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

[b-p9s1hvhet5] .filter-select option {
    background: #0f172a;
    color: #ffffff;
}

[b-p9s1hvhet5] .filter-search {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: #ffffff;
    min-width: 160px;
}

/* #7786 - the "for rating" level filter is a number, not a search: narrower. */
[b-p9s1hvhet5] .filter-search.filter-level {
    min-width: 0;
    width: 9rem;
}

.level-filter-note[b-p9s1hvhet5] {
    margin: 0 0 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
}

[b-p9s1hvhet5] .filter-search:focus {
    outline: none;
    border-color: rgba(49, 221, 227, 0.4);
}

[b-p9s1hvhet5] .filter-search::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.assistant-action-btn.primary[b-p9s1hvhet5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: var(--ascend-primary);
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.assistant-action-btn.primary:hover[b-p9s1hvhet5] {
    background: linear-gradient(135deg, #42e8ed 0%, #31DDE3 100%);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

/* Books Grid */
.books-grid[b-p9s1hvhet5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}

/* Book Card */
.book-card[b-p9s1hvhet5] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.book-card:hover[b-p9s1hvhet5] {
    border-color: rgba(49, 221, 227, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(4, 32, 71, 0.5), 0 0 20px rgba(49, 221, 227, 0.1);
}

.book-cover[b-p9s1hvhet5] {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
}

.book-cover img[b-p9s1hvhet5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-placeholder[b-p9s1hvhet5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* #7232: 0.15 read 1.55:1 - the "no cover" book mark was not visible at all. */
    color: rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(10, 22, 40, 0.9));
}

.book-info[b-p9s1hvhet5] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.book-title[b-p9s1hvhet5] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.book-author[b-p9s1hvhet5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-badges[b-p9s1hvhet5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.badge[b-p9s1hvhet5] {
    font-family: var(--ascend-font-primary);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
}

.badge-format-book[b-p9s1hvhet5] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-format-course[b-p9s1hvhet5] {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-format-workbook[b-p9s1hvhet5] {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.badge-platform[b-p9s1hvhet5] {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge-category[b-p9s1hvhet5] {
    background: rgba(49, 221, 227, 0.1);
    color: rgba(49, 221, 227, 0.8);
    border: 1px solid rgba(49, 221, 227, 0.2);
}

.badge-status[b-p9s1hvhet5] {
    border: 1px solid;
}

.status-default[b-p9s1hvhet5] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.status-reading[b-p9s1hvhet5] {
    background: rgba(49, 221, 227, 0.1);
    color: #31DDE3;
    border-color: rgba(49, 221, 227, 0.3);
}

.status-wishlist[b-p9s1hvhet5] {
    background: rgba(168, 85, 247, 0.1);
    color: var(--ascend-text-light);
    border-color: rgba(168, 85, 247, 0.3);
}

.status-ordered[b-p9s1hvhet5] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--ascend-text-light);
    border-color: rgba(59, 130, 246, 0.3);
}

.wishlist-count[b-p9s1hvhet5] {
    background: rgba(168, 85, 247, 0.3);
    color: var(--ascend-text-light);
}

.status-paused[b-p9s1hvhet5] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.status-complete[b-p9s1hvhet5] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.status-abandoned[b-p9s1hvhet5] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ascend-text-light);
    border-color: rgba(239, 68, 68, 0.3);
}

.book-rating[b-p9s1hvhet5] {
    font-size: 0.75rem;
    color: var(--ascend-secondary);
    letter-spacing: 1px;
    margin-top: 0.15rem;
}

/* Form Elements */
.modal-subtitle[b-p9s1hvhet5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: -0.5rem 0 1rem;
}

.course-form[b-p9s1hvhet5] {
    margin: 1rem 0;
}

.cover-upload-row[b-p9s1hvhet5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cover-preview[b-p9s1hvhet5] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(49, 221, 227, 0.3);
}

.upload-btn[b-p9s1hvhet5] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 6px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: #31DDE3;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.upload-btn:hover[b-p9s1hvhet5] {
    background: rgba(49, 221, 227, 0.2);
}

.form-hint[b-p9s1hvhet5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
}

.field-charcount[b-p9s1hvhet5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
    margin-top: 0.25rem;
}

.toc-searching[b-p9s1hvhet5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.toc-found[b-p9s1hvhet5] {
    margin-bottom: 0.75rem;
}

.toc-found-label[b-p9s1hvhet5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #10b981;
}

.toc-source[b-p9s1hvhet5] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.toc-list[b-p9s1hvhet5] {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.toc-item[b-p9s1hvhet5] {
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.toc-item-row[b-p9s1hvhet5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

.toc-item-title[b-p9s1hvhet5] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-p9s1hvhet5] .toc-theme-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.2rem 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    width: 100px;
    flex-shrink: 0;
}

[b-p9s1hvhet5] .toc-theme-select option {
    background: #0f172a;
    color: #ffffff;
}

.toc-not-found[b-p9s1hvhet5] {
    text-align: center;
    padding: 1.5rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.toc-hint[b-p9s1hvhet5] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.5rem;
}

.paste-modules-section[b-p9s1hvhet5] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.paste-toggle-btn[b-p9s1hvhet5] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
    align-self: flex-start;
}

.paste-toggle-btn:hover[b-p9s1hvhet5] {
    color: #31DDE3;
    border-color: rgba(49, 221, 227, 0.3);
}

.paste-area[b-p9s1hvhet5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    resize: vertical;
    min-height: 80px;
}

.spin-icon[b-p9s1hvhet5] {
    animation: spin-b-p9s1hvhet5 1s linear infinite;
}

@keyframes spin-b-p9s1hvhet5 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.form-row[b-p9s1hvhet5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group[b-p9s1hvhet5] {
    margin-bottom: 1.25rem;
}

.form-label[b-p9s1hvhet5] {
    display: block;
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.label-optional[b-p9s1hvhet5] {
    font-weight: 400;
    text-transform: none;
    color: rgba(255, 255, 255, 0.4);
}

/* #7266: fill, border, radius, colour, font, padding and the focus ring were
   a verbatim copy of the global .form-input in app.css (#7258); the
   placeholder had DRIFTED DOWN to 0.3 white - well under the global 0.5 and
   the lowest of any copy in the repo - so the global value wins. Only the box
   model is left. */
[b-p9s1hvhet5] .form-input {
    width: 100%;
    box-sizing: border-box;
}

.form-textarea[b-p9s1hvhet5] {
    min-height: 80px;
    resize: vertical;
}

.error-message[b-p9s1hvhet5] {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

/* Manual entry link */
.manual-entry-link[b-p9s1hvhet5] {
    text-align: center;
    margin-top: 1rem;
}

.btn-text[b-p9s1hvhet5] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}

.btn-text:hover[b-p9s1hvhet5] {
    color: #31DDE3;
}

/* Scanned preview */
.scanned-preview[b-p9s1hvhet5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 10px;
    padding: 0.625rem 0.75rem;
    margin-bottom: 1.25rem;
    position: relative;
}

.scanned-cover[b-p9s1hvhet5] {
    width: 48px;
    height: auto;
    border-radius: 4px;
    flex-shrink: 0;
}

.scanned-info[b-p9s1hvhet5] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.scanned-author[b-p9s1hvhet5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-secondary);
}

.btn-clear-scan[b-p9s1hvhet5] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-clear-scan:hover[b-p9s1hvhet5] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}/* Responsive */
@media (max-width: 768px) {
    .books-page[b-p9s1hvhet5] {
        padding: 1rem;
    }

    .page-header[b-p9s1hvhet5] {
        flex-direction: column;
        gap: 1rem;
    }

    .page-heading[b-p9s1hvhet5] {
        font-size: 1.75rem;
    }

    .books-grid[b-p9s1hvhet5] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }

    .filter-bar[b-p9s1hvhet5] {
        flex-direction: column;
    }

}

@media (max-width: 480px) {
    .books-page[b-p9s1hvhet5] {
        padding: 0.5rem;
    }

    .books-container[b-p9s1hvhet5] {
        gap: 1rem;
    }

    /* #5460 — side-by-side modal form fields are too cramped on phones */
    .form-row[b-p9s1hvhet5] {
        grid-template-columns: 1fr;
    }

    .books-grid[b-p9s1hvhet5] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .book-card[b-p9s1hvhet5] {
        border-radius: 12px;
    }

    .book-info[b-p9s1hvhet5] {
        padding: 0.5rem;
    }

    .book-title[b-p9s1hvhet5] {
        font-size: 0.8rem;
    }

    }

.checkbox-row[b-p9s1hvhet5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    margin: 4px 0 8px;
}

.checkbox-row input[type="checkbox"][b-p9s1hvhet5] {
    accent-color: #31DDE3;
    width: 16px;
    height: 16px;
}


/* #7736 — touch-target floor for /library. The tab strip (.lib-tab, 33px),
   the drills entry chip (32px) and the filter row were all under the line on
   a phone; these are ordinary padded controls in wrapping rows, so growing
   them is safe and no pseudo hit area is needed. */
@media (hover: none) and (pointer: coarse) {
    .lib-tab[b-p9s1hvhet5],
    .drills-strip-btn[b-p9s1hvhet5] {
        min-height: var(--touch-target);
    }

    [b-p9s1hvhet5] .filter-select,
    [b-p9s1hvhet5] .filter-search {
        min-height: var(--touch-target);
    }
}


/* #7736 follow-on — .assistant-action-btn.primary, measured 209x42 by CI
   (build 10882): two pixels under the line, and unregistered.

   It is the button inside /library's EMPTY STATE ("Add Your First Book", and
   "Clear Filters" when a filter matches nothing), so it renders only for an
   account whose catalog is empty. The CI account's is; the demo account the
   sweep was measured against has books, so the control was never on the page.
   Nothing sits beside it - EmptyState centers one action - so the box grows.

   The 0.75rem padding already carries it to 42px; the floor only has to close
   the last two. */
@media (hover: none) and (pointer: coarse) {
    .assistant-action-btn.primary[b-p9s1hvhet5] {
        min-height: var(--touch-target);
    }
}

/* #9069 - the reader's copy: print or digital. Neutral, so it never reads as a status. */
.badge-medium[b-p9s1hvhet5] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
/* /Components/Pages/BookDetail.razor.rz.scp.css */
.book-detail-page[b-0v02ca4mp6] {
    background: radial-gradient(circle at top, rgba(49, 221, 227, 0.08), transparent 50%),
                linear-gradient(180deg, #0f172a 0%, #0a1628 100%);
    padding: 2rem;
}

@keyframes spin-b-0v02ca4mp6 {
    to { transform: rotate(360deg); }
}

.not-found[b-0v02ca4mp6] {
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.6);
}

.not-found h2[b-0v02ca4mp6] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    margin: 0 0 0.75rem;
}

.detail-container[b-0v02ca4mp6] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Back Link */
.back-link[b-0v02ca4mp6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    transition: color 0.2s;
}

.back-link:hover[b-0v02ca4mp6] {
    color: #31DDE3;
}

/* Book Header */
.book-header[b-0v02ca4mp6] {
    display: flex;
    gap: 2rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.book-header[b-0v02ca4mp6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
}

.book-cover-large[b-0v02ca4mp6] {
    width: 180px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    position: relative;
}

.book-cover-large img[b-0v02ca4mp6] {
    width: 100%;
    height: auto;
    display: block;
}

.cover-actions-overlay[b-0v02ca4mp6] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    /* #7758 - nothing destructive here, but a control a finger cannot see is a
       control a finger does not have. */
    opacity: var(--hover-reveal-rest, 0);
    transition: opacity 0.2s;
}

.book-cover-large:hover .cover-actions-overlay[b-0v02ca4mp6] {
    opacity: 1;
}

.cover-change-btn[b-0v02ca4mp6] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(10, 22, 40, 0.9);
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.cover-change-btn:hover[b-0v02ca4mp6] {
    color: #31DDE3;
    border-color: rgba(49, 221, 227, 0.5);
}

.cover-placeholder-actions[b-0v02ca4mp6] {
    display: flex;
    gap: 0.5rem;
}

.cover-placeholder-large[b-0v02ca4mp6] {
    width: 100%;
    aspect-ratio: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(10, 22, 40, 0.9));
    /* #7232: 0.15 read 1.55:1 - the "no cover" book mark was not visible at all. */
    color: rgba(255, 255, 255, 0.5);
}

.cover-find-btn[b-0v02ca4mp6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    color: rgba(49, 221, 227, 0.8);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cover-find-btn:hover[b-0v02ca4mp6] {
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
}

.book-header-info[b-0v02ca4mp6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.book-title[b-0v02ca4mp6] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.book-author[b-0v02ca4mp6] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: var(--ascend-secondary);
    margin: 0;
}

.book-badges[b-0v02ca4mp6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.badge[b-0v02ca4mp6] {
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
}

.badge-category[b-0v02ca4mp6] {
    background: rgba(49, 221, 227, 0.1);
    color: rgba(49, 221, 227, 0.8);
    border: 1px solid rgba(49, 221, 227, 0.2);
}

.badge-status[b-0v02ca4mp6] {
    border: 1px solid;
}

.status-default[b-0v02ca4mp6] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.status-reading[b-0v02ca4mp6] {
    background: rgba(49, 221, 227, 0.1);
    color: #31DDE3;
    border-color: rgba(49, 221, 227, 0.3);
}

.status-wishlist[b-0v02ca4mp6] {
    background: rgba(168, 85, 247, 0.1);
    color: var(--ascend-text-light);
    border-color: rgba(168, 85, 247, 0.3);
}

.status-ordered[b-0v02ca4mp6] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--ascend-text-light);
    border-color: rgba(59, 130, 246, 0.3);
}

.status-paused[b-0v02ca4mp6] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.status-complete[b-0v02ca4mp6] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.status-abandoned[b-0v02ca4mp6] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ascend-text-light);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Rating Stars */
.book-rating-display[b-0v02ca4mp6] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.25rem;
}

.star-btn[b-0v02ca4mp6] {
    background: none;
    border: none;
    font-size: 1.25rem;
    /* #7232: 0.2 read 1.87:1 - the stars you are asked to click were invisible. */
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
}

.star-btn:hover[b-0v02ca4mp6] {
    transform: scale(1.2);
}

.star-btn.filled[b-0v02ca4mp6] {
    color: var(--ascend-secondary);
}

.rate-hint[b-0v02ca4mp6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    margin-left: 0.5rem;
}

.header-actions[b-0v02ca4mp6] {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Detail Panels */
.detail-panels[b-0v02ca4mp6] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.panel[b-0v02ca4mp6] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
}

.panel-heading[b-0v02ca4mp6] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toc-source-badge[b-0v02ca4mp6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(49, 221, 227, 0.7);
    background: rgba(49, 221, 227, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 400;
}

.toc-refresh-btn[b-0v02ca4mp6] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.2rem;
    font-size: 0.85rem;
    transition: color 0.15s;
}

.toc-refresh-btn:hover:not(:disabled)[b-0v02ca4mp6] {
    color: #31DDE3;
}

.toc-list[b-0v02ca4mp6] {
    list-style: decimal;
    padding-left: 1.5rem;
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
}

/* Detail Grid */
.detail-grid[b-0v02ca4mp6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.detail-item[b-0v02ca4mp6] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.detail-label[b-0v02ca4mp6] {
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
}

.detail-value[b-0v02ca4mp6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: #ffffff;
}

.scanning-indicator[b-0v02ca4mp6] {
    text-align: center;
    padding: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.cover-choice-row[b-0v02ca4mp6] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.cover-option[b-0v02ca4mp6] {
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s ease;
    text-align: center;
    width: 120px;
    flex-shrink: 0;
}

.cover-option:hover[b-0v02ca4mp6] {
    border-color: rgba(49, 221, 227, 0.4);
}

.cover-option.selected[b-0v02ca4mp6] {
    border-color: #31DDE3;
    box-shadow: 0 0 12px rgba(49, 221, 227, 0.3);
}

.cover-option img[b-0v02ca4mp6] {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.cover-option-label[b-0v02ca4mp6] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.3rem;
}

.spin-icon[b-0v02ca4mp6] {
    animation: spin-b-0v02ca4mp6 1s linear infinite;
}

@keyframes spin-b-0v02ca4mp6 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.detail-link[b-0v02ca4mp6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #31DDE3;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.15s ease;
}

.detail-link:hover[b-0v02ca4mp6] {
    color: #42e8ed;
}

.detail-value.mono[b-0v02ca4mp6] {
    font-family: monospace;
    color: rgba(49, 221, 227, 0.7);
}

/* Description & Notes */
.description-text[b-0v02ca4mp6],
.notes-text[b-0v02ca4mp6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin: 0;
    white-space: pre-wrap;
}

/* Linked Studies */
.studies-list[b-0v02ca4mp6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.study-row[b-0v02ca4mp6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.study-row:hover[b-0v02ca4mp6] {
    background: rgba(49, 221, 227, 0.05);
    border-color: rgba(49, 221, 227, 0.2);
}

.study-row > i:first-child[b-0v02ca4mp6] {
    color: rgba(49, 221, 227, 0.5);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.study-row-info[b-0v02ca4mp6] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.study-row-title[b-0v02ca4mp6] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    color: #ffffff;
}

.study-row-meta[b-0v02ca4mp6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.study-row > i:last-child[b-0v02ca4mp6] {
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* Modal text used inside shared Modal ChildContent */
.modal-text[b-0v02ca4mp6] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

/* Form Elements */
.form-group[b-0v02ca4mp6] {
    margin-bottom: 1.25rem;
}

.form-label[b-0v02ca4mp6] {
    display: block;
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.label-optional[b-0v02ca4mp6] {
    font-weight: 400;
    text-transform: none;
    color: rgba(255, 255, 255, 0.4);
}

/* #7266: fill, border, radius, colour, font, padding and the focus ring were
   a verbatim copy of the global .form-input in app.css (#7258); the
   placeholder had DRIFTED DOWN to 0.3 white - well under the global 0.5 and
   the lowest of any copy in the repo - so the global value wins. Only the box
   model is left. */
[b-0v02ca4mp6] .form-input {
    width: 100%;
    box-sizing: border-box;
}

.form-textarea[b-0v02ca4mp6] {
    min-height: 80px;
    resize: vertical;
}

.field-charcount[b-0v02ca4mp6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
    margin-top: 0.25rem;
}

.error-message[b-0v02ca4mp6] {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .book-detail-page[b-0v02ca4mp6] {
        padding: 1rem;
    }

    .book-header[b-0v02ca4mp6] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .book-cover-large[b-0v02ca4mp6] {
        width: 140px;
    }

    .book-header-info[b-0v02ca4mp6] {
        align-items: center;
    }

    .book-badges[b-0v02ca4mp6] {
        justify-content: center;
    }

    .book-rating-display[b-0v02ca4mp6] {
        justify-content: center;
    }

    .header-actions[b-0v02ca4mp6] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .book-title[b-0v02ca4mp6] {
        font-size: 1.35rem;
    }

    .detail-grid[b-0v02ca4mp6] {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 480px) {
    .book-detail-page[b-0v02ca4mp6] {
        padding: 0.5rem;
    }

    .detail-container[b-0v02ca4mp6] {
        gap: 1rem;
    }

    .book-header[b-0v02ca4mp6] {
        padding: 1rem;
        border-radius: 16px;
    }

    .header-actions[b-0v02ca4mp6] {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .panel[b-0v02ca4mp6] {
        padding: 1rem;
        border-radius: 12px;
    }

}

.checkbox-row[b-0v02ca4mp6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    margin: 4px 0 8px;
}

.checkbox-row input[type="checkbox"][b-0v02ca4mp6] {
    accent-color: #31DDE3;
    width: 16px;
    height: 16px;
}

.study-format-picker[b-0v02ca4mp6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.picker-label[b-0v02ca4mp6] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.format-pill[b-0v02ca4mp6] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.format-pill:hover[b-0v02ca4mp6] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
}

.format-pill.active[b-0v02ca4mp6] {
    background: rgba(49, 221, 227, 0.18);
    border-color: var(--ascend-accent);
    color: #ffffff;
}

.badge-studyformat[b-0v02ca4mp6] {
    background: rgba(184, 133, 54, 0.15);
    color: #B88536;
    border: 1px solid rgba(184, 133, 54, 0.3);
}

.badge-studyformat.sf-reference[b-0v02ca4mp6] {
    background: rgba(49, 221, 227, 0.15);
    color: var(--ascend-accent);
    border-color: rgba(49, 221, 227, 0.3);
}

.badge-studyformat.sf-repertoire[b-0v02ca4mp6] {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.3);
}

/* #6991 - bring-your-own-book register on the reading area. Quiet, factual,
   sits directly under the Chapters heading. */
.toc-own-copy[b-0v02ca4mp6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.85rem;
}

/* #9069 - the reader's copy: print or digital. Neutral, so it never reads as a status. */
.badge-medium[b-0v02ca4mp6] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
/* /Components/Pages/BookDrill.razor.rz.scp.css */
.drill-page[b-lv47sf9qpn] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Loading */

/* Header */

.drill-header[b-lv47sf9qpn] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.drill-header.compact[b-lv47sf9qpn] {
    margin-bottom: 16px;
}

.back-link[b-lv47sf9qpn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.15s ease;
}

.back-link:hover[b-lv47sf9qpn] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.drill-title[b-lv47sf9qpn] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    margin: 0;
    line-height: 1.2;
}

.drill-subtitle[b-lv47sf9qpn] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

/* Progress bar */

.drill-progress-info[b-lv47sf9qpn] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.drill-counter[b-lv47sf9qpn] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.drill-progress-bar[b-lv47sf9qpn] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.drill-progress-fill[b-lv47sf9qpn] {
    height: 100%;
    background: linear-gradient(90deg, #31DDE3, var(--ascend-secondary));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.drill-score[b-lv47sf9qpn] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.correct-icon[b-lv47sf9qpn] {
    color: #10b981;
}

.incorrect-icon[b-lv47sf9qpn] {
    color: #ef4444;
}

/* Setup */

/* #7164 - the card used to be centered while the page header stays left-aligned,
   which stranded a 480px card in the middle of the row, visually disconnected
   from its own header. Anchor it to the same left edge so the setup state reads
   as one column. */
.setup-content[b-lv47sf9qpn] {
    display: flex;
    /* Owner-reported 2026-08-20: "the study drill needs to be centered". The
       card is a fixed 480px panel on a full-width page, so flex-start parked it
       against the left edge with the whole remainder empty. */
    justify-content: center;
    padding: 8px 0;
}

/* Set-size picker. Had NO rule at all before 2026-08-20, which is why the
   select rendered at the browser's default width with no separation from the
   Start Drill button beneath it (both owner-reported). ::deep is required:
   InputSelect renders the <select> from ITS markup, so the element never
   carries this component's scope attribute. */
.drill-set-size[b-lv47sf9qpn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    /* The missing gap between the picker and the Start Drill button. */
    margin: 0 0 1.5rem;
}

.drill-set-size label[b-lv47sf9qpn] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-text-muted);
}

.drill-set-size[b-lv47sf9qpn]  select {
    /* Was full-bleed inside the card - "that select field is too big". Sized to
       its content with a floor so the longest option label still fits. */
    width: auto;
    min-width: 13rem;
    max-width: 100%;
}

.setup-card[b-lv47sf9qpn] {
    text-align: center;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 40px;
    max-width: 480px;
    position: relative;
    overflow: hidden;
}

.setup-card[b-lv47sf9qpn]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
}

.setup-icon[b-lv47sf9qpn] {
    font-size: 48px;
    color: #31DDE3;
    margin-bottom: 16px;
}

.setup-card h3[b-lv47sf9qpn] {
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0 0 12px;
}

.setup-desc[b-lv47sf9qpn] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 24px;
    line-height: 1.6;
}

/* Drill content layout — the board+sidebar grid, the board/sidebar columns and
   the side-pill row are all provided by <DrillShell> (#6347). Only the board
   canvas itself is styled here; it renders inside DrillShell's BoardContent. */

.board-area[b-lv47sf9qpn] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
}

/* Position context */

.position-context[b-lv47sf9qpn] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    flex-wrap: wrap;
}

.context-game[b-lv47sf9qpn] {
    color: rgba(255, 255, 255, 0.6);
}

/* Layer card */

.layer-card[b-lv47sf9qpn] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.layer-card[b-lv47sf9qpn]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
}

.layer-badge[b-lv47sf9qpn] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
    padding: 2px 10px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.layer-card h3[b-lv47sf9qpn] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    color: #ffffff;
    margin: 0 0 8px;
}

.layer-card p[b-lv47sf9qpn] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 16px;
    line-height: 1.5;
}

.layer-hint[b-lv47sf9qpn] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.move-answer strong[b-lv47sf9qpn] {
    color: #31DDE3;
}

/* Recall textarea */

.recall-textarea[b-lv47sf9qpn] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 10px 12px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    resize: vertical;
    line-height: 1.5;
    margin-bottom: 12px;
}

.recall-textarea:focus[b-lv47sf9qpn] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.recall-textarea[b-lv47sf9qpn]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Revealed content */

.revealed-content[b-lv47sf9qpn] {
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.revealed-label[b-lv47sf9qpn] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(49, 221, 227, 0.7);
    margin-bottom: 6px;
}

.revealed-text[b-lv47sf9qpn] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

/* Self-grade row */

.self-grade-row[b-lv47sf9qpn] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.grade-label[b-lv47sf9qpn] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 4px;
}

.grade-btn[b-lv47sf9qpn] {
    padding: 6px 14px;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.grade-got-it[b-lv47sf9qpn] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.grade-got-it:hover[b-lv47sf9qpn] {
    background: rgba(16, 185, 129, 0.25);
}

.grade-partial[b-lv47sf9qpn] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.grade-partial:hover[b-lv47sf9qpn] {
    background: rgba(245, 158, 11, 0.25);
}

.grade-missed[b-lv47sf9qpn] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--ascend-text-light);
    border-color: rgba(239, 68, 68, 0.3);
}

.grade-missed:hover[b-lv47sf9qpn] {
    background: rgba(239, 68, 68, 0.25);
}

/* Buttons — the private .drill-btn system was replaced by the shared
   <Button> component (#6347). No local button rules remain. */

/* Complete */

.complete-content[b-lv47sf9qpn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
    text-align: center;
}

.complete-icon[b-lv47sf9qpn] {
    font-size: 64px;
    color: var(--ascend-secondary);
    margin-bottom: 16px;
    animation: scaleIn-b-lv47sf9qpn 0.5s ease;
}

@keyframes scaleIn-b-lv47sf9qpn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.complete-content h2[b-lv47sf9qpn] {
    font-family: var(--ascend-font-primary);
    font-size: 1.6rem;
    color: #ffffff;
    margin: 0 0 32px;
}

.complete-actions[b-lv47sf9qpn] {
    display: flex;
    gap: 12px;
}

/* Mobile */

@media (max-width: 768px) {
    .drill-title[b-lv47sf9qpn] {
        font-size: 1.2rem;
    }

    .setup-card[b-lv47sf9qpn] {
        padding: 24px;
    }

    .self-grade-row[b-lv47sf9qpn] {
        flex-direction: column;
        align-items: stretch;
    }

    .grade-label[b-lv47sf9qpn] {
        margin-bottom: 4px;
    }
}
/* /Components/Pages/CalculationTrainerDrill.razor.rz.scp.css */
.calc-intro[b-u05bwi2ymr] {
    line-height: 1.55;
    margin-bottom: 1.1rem;
    opacity: 0.9;
}

/* #9060 chunk 3 - the question, the list and the step controls are QuestionContent now (beside
   the board on desktop, directly under it on a phone); the verdict, its why and Next ride the
   verdict dock under the board. tabindex="-1" on .calc-goal makes the question a focus target. */
.calc-side[b-u05bwi2ymr] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* #9060 chunk 3 - the why in the dock's reading half: a flex column whose children carry no
   margins of their own (the dock's sibling rule spaces it from the verdict panel). */
.reveal-stack[b-u05bwi2ymr] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.calc-goal[b-u05bwi2ymr] {
    margin: 0;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: #B88536;
}

.calc-instruction[b-u05bwi2ymr] {
    margin: 0;
    line-height: 1.45;
    opacity: 0.92;
}

.calc-mono[b-u05bwi2ymr] {
    font-family: var(--font-mono, monospace);
}

/* #9053 - .calc-good / .calc-bad and .calc-verdict are gone with the hand-rolled
   verdict line. The shared DrillFeedbackOverlay owns the green / gold / red
   treatment now and publishes it to the board frame and the DrillVerdictChip.
   The per-variation .calc-verdict-* classes below are a DIFFERENT thing - the
   engine's winning / drawing / losing label on each line - and stay. */

.calc-actions[b-u05bwi2ymr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

/* ---- Candidate list ----------------------------------------------------- */

.calc-empty[b-u05bwi2ymr] {
    margin: 0;
    opacity: 0.6;
    font-style: italic;
}

.calc-candidates[b-u05bwi2ymr] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.calc-candidate[b-u05bwi2ymr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.18);
}

.calc-candidate.is-selected[b-u05bwi2ymr] {
    border-color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
    box-shadow: 0 0 0 1px rgba(49, 221, 227, 0.25);
}

.calc-candidate-select[b-u05bwi2ymr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    width: 100%;
}

.calc-candidate-select input[type="radio"][b-u05bwi2ymr] {
    accent-color: #31DDE3;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.calc-candidate-line[b-u05bwi2ymr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.calc-candidate-label[b-u05bwi2ymr] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
}

.calc-candidate-moves[b-u05bwi2ymr] {
    font-family: var(--font-mono, monospace);
    font-size: 0.95rem;
}

.calc-remove[b-u05bwi2ymr] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.4rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
}

.calc-remove:hover[b-u05bwi2ymr] {
    color: #e06666;
    background: rgba(224, 102, 102, 0.12);
}

.calc-remove[b-u05bwi2ymr]  i {
    font-size: 14px;
}

/* ---- Expand phase ------------------------------------------------------- */

.calc-entered[b-u05bwi2ymr] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.calc-entered-label[b-u05bwi2ymr] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.calc-entered-moves[b-u05bwi2ymr] {
    font-family: var(--font-mono, monospace);
    font-size: 0.95rem;
}

/* ---- Reveal ------------------------------------------------------------- */

.calc-divergence[b-u05bwi2ymr],
.calc-note[b-u05bwi2ymr] {
    margin: 0;
    line-height: 1.5;
}

.calc-note[b-u05bwi2ymr] {
    opacity: 0.75;
    font-style: italic;
}

.calc-insight[b-u05bwi2ymr] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.7rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.16), rgba(184, 133, 54, 0.06));
    border: 1px solid rgba(184, 133, 54, 0.4);
    line-height: 1.5;
}

.calc-insight[b-u05bwi2ymr]  i {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.calc-solution[b-u05bwi2ymr] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.08);
}

.calc-solution-label[b-u05bwi2ymr] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.calc-solution-moves[b-u05bwi2ymr] {
    font-family: var(--font-mono, monospace);
    font-size: 0.95rem;
}

/* ---- Reveal: engine grading state + per-variation verdicts -------------- */

.calc-grading[b-u05bwi2ymr] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.02rem;
    opacity: 0.85;
}

.calc-grading[b-u05bwi2ymr]  i {
    font-size: 18px;
}

.calc-verdicts[b-u05bwi2ymr] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.calc-verdicts-label[b-u05bwi2ymr] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.calc-verdict-list[b-u05bwi2ymr] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.calc-verdict-row[b-u05bwi2ymr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    row-gap: 0.3rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.calc-verdict-row .calc-candidate-label[b-u05bwi2ymr] {
    flex-shrink: 0;
}

.calc-verdict-row.is-selected[b-u05bwi2ymr] {
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(49, 221, 227, 0.08);
}

.calc-verdict-chip[b-u05bwi2ymr] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.calc-verdict-winning[b-u05bwi2ymr] {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.14);
    border-color: rgba(49, 221, 227, 0.4);
}

.calc-verdict-drawing[b-u05bwi2ymr] {
    color: #d4af37;
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.4);
}

.calc-verdict-losing[b-u05bwi2ymr] {
    color: #e06666;
    background: rgba(224, 102, 102, 0.14);
    border-color: rgba(224, 102, 102, 0.4);
}

.calc-verdict-not-analyzed[b-u05bwi2ymr] {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

/* The mono move line gets its OWN full-width line below the label/chip/pick
   (order:1 pushes it last in the flex, flex-basis:100% forces the wrap). In the
   narrow reveal pane a single horizontal row squeezed the moves into a sliver
   and they wrapped into a cramped multi-line block. */
.calc-verdict-row .calc-candidate-moves[b-u05bwi2ymr] {
    order: 1;
    flex: 1 0 100%;
    min-width: 0;
    line-height: 1.5;
}

.calc-verdict-you[b-u05bwi2ymr] {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #31DDE3;
    opacity: 0.85;
    flex-shrink: 0;
}

.calc-fallback[b-u05bwi2ymr] {
    opacity: 0.7;
    font-size: 0.85rem;
}

/* #9060 chunk 3 - the list's controls are answer controls: the shared touch target on a touch
   screen (the remove button was about 22px, a radio row could be shorter than 44px). */
@media (hover: none) and (pointer: coarse) {
    .calc-remove[b-u05bwi2ymr] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }

    .calc-candidate-select[b-u05bwi2ymr] {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/CandidateMovesDrill.razor.rz.scp.css */
/* Page max-width intentionally NOT set — layout cap lives inside DrillShell. */
.candidates-drill-page[b-2qgq4tsc10] {
    padding: 0 1rem;
}

/* Setup */
.setup-container[b-2qgq4tsc10] {
    max-width: 720px;
    margin: 0 auto;
}

.setup-header[b-2qgq4tsc10] {
    text-align: center;
    margin-bottom: 2rem;
}

.setup-title[b-2qgq4tsc10] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
}

.setup-subtitle[b-2qgq4tsc10] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 560px;
    margin: 0.75rem auto 0;
}

.empty-actions[b-2qgq4tsc10] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.section-heading[b-2qgq4tsc10] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    color: #ffffff;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.section-description[b-2qgq4tsc10] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.setup-actions[b-2qgq4tsc10] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.aagaard-framing[b-2qgq4tsc10] {
    margin-top: 1.25rem;
    padding: 1.25rem;
    background: rgba(184, 133, 54, 0.06);
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 14px;
    text-align: left;
}

.aagaard-framing h4[b-2qgq4tsc10] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    color: #B88536;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}

.aagaard-framing ol[b-2qgq4tsc10] {
    margin: 0;
    padding-left: 1.25rem;
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
    line-height: 1.6;
}

.aagaard-framing em[b-2qgq4tsc10] {
    color: rgba(49, 221, 227, 0.85);
    font-style: normal;
    font-size: 0.78rem;
    margin-left: 0.3rem;
}

/* Active drill */
/* Active-phase layout + sidebar card chrome are provided by the shared
   DrillShell. Only the inner-content styles below remain page-scoped. */

.board-area[b-2qgq4tsc10] {
    position: relative;
}

.progress-header[b-2qgq4tsc10] { margin: 0; }

.progress-label[b-2qgq4tsc10] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.45rem;
}

.progress-bar[b-2qgq4tsc10] {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-2qgq4tsc10] {
    height: 100%;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
    transition: width 0.25s ease;
}

/* #9060 chunk 3 - the question and its list are QuestionContent now (beside the board on
   desktop, under it on a phone): a flex column with its own 1rem gap, so the blocks below carry
   no outer margins of their own. tabindex="-1" makes the question a focus target (a keyboard
   Next lands here). */
.position-context[b-2qgq4tsc10] {
    padding: 0 0 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.context-game[b-2qgq4tsc10] {
    font-family: var(--ascend-font-primary);
    font-size: 0.92rem;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

.context-opening[b-2qgq4tsc10] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(49, 221, 227, 0.85);
    margin-bottom: 0.3rem;
}

.context-move[b-2qgq4tsc10] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Candidate list */

.candidate-list-header[b-2qgq4tsc10] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.candidate-list-label[b-2qgq4tsc10] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.candidate-count[b-2qgq4tsc10] {
    font-family: var(--ascend-font-primary);
    font-size: 0.88rem;
    font-weight: 700;
    color: #31DDE3;
}

.candidate-list-empty[b-2qgq4tsc10] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    margin: 0;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.candidate-chip-list[b-2qgq4tsc10] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.candidate-chip[b-2qgq4tsc10] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem 0.3rem 0.7rem;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.candidate-chip:hover[b-2qgq4tsc10] {
    background: rgba(49, 221, 227, 0.2);
    border-color: rgba(49, 221, 227, 0.5);
}

.candidate-chip.picked[b-2qgq4tsc10] {
    background: rgba(184, 133, 54, 0.25);
    border-color: #B88536;
    box-shadow: 0 0 0 2px rgba(184, 133, 54, 0.2);
}

.candidate-chip.picked:hover[b-2qgq4tsc10] {
    background: rgba(184, 133, 54, 0.3);
}


.candidate-instructions[b-2qgq4tsc10] {
    padding: 0.75rem 0.85rem;
    background: rgba(49, 221, 227, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 10px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.candidate-pick-hint[b-2qgq4tsc10] {
    margin: 0.5rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
}

.candidate-san[b-2qgq4tsc10] {
    font-weight: 600;
}

.candidate-remove[b-2qgq4tsc10] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.candidate-remove:hover[b-2qgq4tsc10] {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.drill-actions[b-2qgq4tsc10] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* #9060 chunk 3 - AFTER THE REVEAL THE LIST STAYS, LOCKED AND MARKED (the Name the Imbalances
   marks): the engine's pick in the success color with a check, the member's other pick struck
   through in red, the rest dimmed. Words for a screen reader ride in a visually-hidden span. */
.candidate-chip.is-locked[b-2qgq4tsc10],
.candidate-chip.is-locked:hover[b-2qgq4tsc10] {
    cursor: default;
    background: rgba(49, 221, 227, 0.12);
    border-color: rgba(49, 221, 227, 0.35);
    /* #9082 - no gold glow on a locked pick (the choosing state's .picked): once the list is
       marked, gold beside the truth's green reads as a second verdict. The tag says "You". */
    box-shadow: none;
}

.candidate-chip.is-truth[b-2qgq4tsc10],
.candidate-chip.is-truth:hover[b-2qgq4tsc10] {
    font-weight: 600;
    border-color: color-mix(in srgb, var(--ascend-success) 80%, transparent);
    background: color-mix(in srgb, var(--ascend-success) 18%, transparent);
}

/* The check is the truth's alone; the member's pick carries the neutral YourPickTag (#9082),
   while choosing and after the reveal. */
.truth-mark[b-2qgq4tsc10] { color: var(--ascend-success); font-size: 0.9rem; }

.candidate-chip.is-wrong-pick[b-2qgq4tsc10],
.candidate-chip.is-wrong-pick:hover[b-2qgq4tsc10] {
    border-color: color-mix(in srgb, var(--ascend-error) 70%, transparent);
    background: color-mix(in srgb, var(--ascend-error) 12%, transparent);
    box-shadow: none;
}

.candidate-chip.is-wrong-pick .candidate-san[b-2qgq4tsc10] { text-decoration: line-through; }

/* Review round 1 - dimmed by color, not by opacity: axe-core measured opacity 0.45 at 4.02:1 on
   the chip's move (13px text needs 4.5:1). The chip's own tint and border go quiet instead, and
   the text takes the muted token (#94a3b8: 6.29:1 on #112234, 5.78:1 on the chip's 3% tint). The
   hover selector keeps the locked rule's hover from re-tinting a dimmed chip. */
.candidate-chip.dimmed[b-2qgq4tsc10],
.candidate-chip.dimmed:hover[b-2qgq4tsc10] {
    color: var(--ascend-text-muted);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.16);
}

/* #9060 chunk 3 - the reveal rides the verdict dock's Verdict half: the phone's width at the
   bottom of the screen, 20rem beside the board above 1100px. The dock is the panel now, so the
   reveal drops its own box: what does not fit scrolls inside the dock while Next stays pinned.
   One flex column (the three rows, then the coach note), so the rule further down can put the
   why first with `order` at every width (review round 1); its children carry no margins of
   their own. */
.reveal-stack[b-2qgq4tsc10] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* #9053 - .reveal-verdict and its three color classes are gone with the
   hand-rolled verdict box. The shared DrillFeedbackOverlay owns that chrome now,
   in the same three states, and it publishes them to the board frame and the
   DrillVerdictChip - which the hand-rolled box could not do. */

.reveal-row[b-2qgq4tsc10] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.reveal-row:last-of-type[b-2qgq4tsc10] {
    border-bottom: none;
}

.reveal-label[b-2qgq4tsc10] {
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.reveal-move[b-2qgq4tsc10] {
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.reveal-move.best[b-2qgq4tsc10] { color: #31DDE3; }
.reveal-move.played[b-2qgq4tsc10] { color: rgba(255, 255, 255, 0.8); }

.reveal-coach-note[b-2qgq4tsc10] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.reveal-coach-note em[b-2qgq4tsc10] {
    color: rgba(49, 221, 227, 0.85);
    font-style: normal;
}

/* Score section. #9060 chunk 3 - it sits right under the progress bar in the sidebar card
   now (the question and the list moved to QuestionContent), so no rule above it. */
.score-section[b-2qgq4tsc10] {
    display: flex;
    gap: 0.5rem;
}

.score-row[b-2qgq4tsc10] {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    text-align: center;
}

.score-label[b-2qgq4tsc10] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.25rem;
}

.correct-label[b-2qgq4tsc10] { color: rgba(49, 221, 227, 0.7); }
.incorrect-label[b-2qgq4tsc10] { color: rgba(184, 133, 54, 0.7); }

.score-value[b-2qgq4tsc10] {
    font-family: var(--ascend-font-primary);
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
}

.correct-value[b-2qgq4tsc10] { color: #31DDE3; }
.incorrect-value[b-2qgq4tsc10] { color: #B88536; }

/* #9060 chunk 3 - the chip (tap to pick) and its remove button are answer controls: the shared
   touch target on a touch screen (they were 36px and 18px). */
@media (hover: none) and (pointer: coarse) {
    .candidate-chip[b-2qgq4tsc10] {
        min-height: var(--touch-target);
    }

    .candidate-remove[b-2qgq4tsc10] {
        width: var(--touch-target);
        height: var(--touch-target);
        margin: -0.6rem -0.5rem -0.6rem 0;
    }
}

/* #9060 chunk 3 - THE WHY COMES FIRST wherever the reveal shows. The dock is never roomy: about
   240px tall on a phone, and capped at 16rem beside the board above 1100px
   (ReserveDockRoomBesideBoard), where review round 1 found the coach note hidden under the cue
   behind the three rows. So the coach note follows the verdict and the three rows go last at
   every width (the chip at the board and the marked list already name the engine's pick). The
   reading half scrolls, with its bottom-edge cue, for whatever does not fit. Visual order only;
   the DOM keeps the rows first for a screen reader. */
.reveal-stack > .reveal-rows[b-2qgq4tsc10] {
    order: 1;
}

@media (max-width: 480px) {
    .reveal-row[b-2qgq4tsc10] {
        padding: 0.2rem 0;
        font-size: 0.82rem;
    }
}

/* Responsive */
@media (max-width: 900px) {
    .drill-container[b-2qgq4tsc10] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CheckmatePatternsHub.razor.rz.scp.css */
/* Pattern Library hub — page had no scoped CSS at all, so .pattern-card
 * etc. rendered with default browser flow. Long pattern descriptions
 * spilled past the card boundary. This file owns the look. */

.pattern-hub-page[b-fexgoqioo4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pattern-hub-actions[b-fexgoqioo4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pattern-tier-filter[b-fexgoqioo4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.filter-pill[b-fexgoqioo4] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.filter-pill:hover[b-fexgoqioo4] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.4);
}

.filter-pill.active[b-fexgoqioo4] {
    background: rgba(49, 221, 227, 0.15);
    border-color: var(--ascend-accent);
    color: var(--ascend-accent);
}

.filter-pill.clear[b-fexgoqioo4] {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
}

.filter-pill .count[b-fexgoqioo4] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.pattern-grid[b-fexgoqioo4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.pattern-card[b-fexgoqioo4] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.95), rgba(15, 23, 42, 0.92));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    overflow: hidden;
    /* Allow long pattern names to wrap rather than cut off — prior version
     * had no constraint at all so the text just bled past the card. */
    min-width: 0;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.pattern-card:hover[b-fexgoqioo4] {
    border-color: rgba(49, 221, 227, 0.4);
    transform: translateY(-2px);
}

.pattern-card.tier-risingclub[b-fexgoqioo4] { border-color: rgba(49, 221, 227, 0.35); }
.pattern-card.tier-master[b-fexgoqioo4]     { border-color: rgba(168, 85, 247, 0.4); }

.pattern-card-head[b-fexgoqioo4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
}

.pattern-name[b-fexgoqioo4] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    /* Wrap, don't truncate — these names are short enough that wrapping
     * onto two lines is fine and clearer than ellipsis. */
    word-break: break-word;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
}

.pattern-tier-badge[b-fexgoqioo4] {
    flex-shrink: 0;
    padding: 0.15rem 0.55rem;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 999px;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.pattern-card.tier-club       .pattern-tier-badge[b-fexgoqioo4] { color: var(--ascend-secondary); border-color: rgba(184, 133, 54, 0.4); background: rgba(184, 133, 54, 0.08); }

.pattern-description[b-fexgoqioo4] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    /* Constrain wide tables / long words inside descriptions to the card
     * width and let them wrap normally. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pattern-mastery-row[b-fexgoqioo4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.mastery-chip[b-fexgoqioo4] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.mastery-chip.mastered[b-fexgoqioo4]   { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.35); color: #10b981; }
.mastery-chip.practicing[b-fexgoqioo4] { background: rgba(184, 133, 54, 0.08); border-color: rgba(184, 133, 54, 0.35); color: var(--ascend-secondary); }
.mastery-chip.learning[b-fexgoqioo4]   { background: rgba(49, 221, 227, 0.08); border-color: rgba(49, 221, 227, 0.3); color: var(--ascend-accent); }

.pattern-card-actions[b-fexgoqioo4] {
    margin-top: auto;
    padding-top: 0.25rem;
}

/* 2026-06-11 expansion - kind section headers (Checkmate Patterns / Mating Attacks) */
.kind-header[b-fexgoqioo4] {
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(184, 133, 54, 0.35);
}

.kind-header:first-of-type[b-fexgoqioo4] {
    margin-top: 0.5rem;
}

.kind-title[b-fexgoqioo4] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    color: var(--ascend-secondary);
    margin: 0 0 0.2rem;
}

.kind-subtitle[b-fexgoqioo4] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}
/* /Components/Pages/CoachBridge/BlockCoachDialog.razor.rz.scp.css */
/* #8715 R6 - the block dialog's lessons line (the shared ConfirmDialog's ChildContent, rendered in this component's
   scope), below its message and above its buttons. */
.bcd-lessons[b-jcwcqth196] {
    margin: 0 0 var(--space-md, 1rem);
    text-align: left;
    line-height: 1.6;
    overflow-wrap: anywhere;
    color: var(--ascend-text-light);
}
/* /Components/Pages/CoachBridge/CoachAssignGameTrigger.razor.rz.scp.css */
/* #6018 slice 3 - "Set as homework" on the coach's game review view: one quiet row under
   the coach banner, and a small form in the shared dialog. No celebration styling. */

.cag[b-ytepzo9uov] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.75rem;
    min-width: 0;
}

.cag-status[b-ytepzo9uov],
.cag-toast[b-ytepzo9uov] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
    min-width: 0;
}

.cag-form[b-ytepzo9uov] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.cag-label[b-ytepzo9uov] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.35rem;
}

.cag-select[b-ytepzo9uov],
.cag-minutes[b-ytepzo9uov],
.cag-note[b-ytepzo9uov] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.9375rem;
}

/* Room for the dropdown arrow the global select rule draws (SelectChevronRatchetTests). */
.cag-select[b-ytepzo9uov] {
    padding-right: 2.25rem;
}

.cag-select option[b-ytepzo9uov] {
    background-color: #0a1628;
    color: #ffffff;
}

.cag-minutes[b-ytepzo9uov] {
    max-width: 8rem;
}

.cag-note[b-ytepzo9uov] {
    resize: vertical;
}

.cag-select:focus[b-ytepzo9uov],
.cag-minutes:focus[b-ytepzo9uov],
.cag-note:focus[b-ytepzo9uov] {
    outline: none;
    border-color: var(--ascend-accent);
}

.cag-line[b-ytepzo9uov] {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.cag-error[b-ytepzo9uov] {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}
/* /Components/Pages/CoachBridge/CoachBlockPanel.razor.rz.scp.css */
/* #8104 CB-TRUST - the student's block panel, after the share page's tier gate (outside it) and on
   /access-ended. Same row shape as the paused card beside it. */

.cbp[b-33ponos4wg] {
    margin-bottom: 1.5rem;
}

.cbp-list[b-33ponos4wg] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cbp-row[b-33ponos4wg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cbp-name[b-33ponos4wg] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ascend-text-light);
}

.cbp-heading[b-33ponos4wg] {
    margin: 0.5rem 0 0.5rem;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    color: var(--ascend-text-light);
}

.cbp-text[b-33ponos4wg],
.cbp-status[b-33ponos4wg],
.cbp-error[b-33ponos4wg] {
    margin: 0 0 0.75rem;
    font-style: normal;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.cbp-error[b-33ponos4wg] {
    color: var(--ascend-error-light);
}
/* /Components/Pages/CoachBridge/CoachBookingControl.razor.rz.scp.css */
/* #8714 slice 8714-4 - "Book a lesson" on one listing card. The picker brings its own styles. */
.cbk[b-wbkpcyn8vd] {
    flex: 1 1 100%;
    min-width: 0;
}
/* /Components/Pages/CoachBridge/CoachBridgeAvailability.razor.rz.scp.css */
/* #8714 - the coach's availability editor. Brand tokens only; the shared Card and Button own
   their chrome, and .form-input is the global dark input (app.css). The shared selects are
   child components, so their sizing from here goes through ::deep. */
.cba-page[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 760px;
    min-width: 0;
}

.cba-dark[b-4dev65fvu4],
.cba-state[b-4dev65fvu4],
.cba-hint[b-4dev65fvu4],
.cba-status-line[b-4dev65fvu4],
.cba-terms-lead[b-4dev65fvu4],
.cba-message[b-4dev65fvu4],
.cba-error[b-4dev65fvu4] {
    margin: 0;
    overflow-wrap: anywhere;
}

.cba-dark[b-4dev65fvu4] {
    color: rgba(255, 255, 255, 0.75);
}

.cba-status[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.cba-status-line[b-4dev65fvu4],
.cba-state[b-4dev65fvu4],
.cba-terms-lead[b-4dev65fvu4] {
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

/* #9236 - the Coach Studio notice's link target: the card keeps its own look; the wrapper only carries the id and
   leaves room above the card when the browser scrolls to it. The header is sticky on desktop and fixed on phones, so
   the room is the header's own height (--app-content-top, published by MainLayout for every band) plus a little: the
   #8708 convention for a fragment target. */
.cba-terms-anchor[b-4dev65fvu4] {
    min-width: 0;
    scroll-margin-top: calc(var(--app-content-top, 0px) + var(--space-md, 1rem));
}

/* #9236 - the terms card's line after the terms changed: a statement in the warning tone, never an alarm. */
.cba-terms-update[b-4dev65fvu4] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ascend-warning);
    overflow-wrap: anywhere;
}

.cba-hint[b-4dev65fvu4] {
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

.cba-message[b-4dev65fvu4] {
    color: var(--ascend-success);
}

.cba-error[b-4dev65fvu4] {
    color: var(--ascend-error-light);
}

.cba-label[b-4dev65fvu4] {
    margin: 0;
    padding: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
}

.cba-field[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.cba-select[b-4dev65fvu4] {
    width: 100%;
    max-width: 18rem;
    box-sizing: border-box;
}

.cba-price[b-4dev65fvu4] {
    width: 100%;
    max-width: 10rem;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}

.cba-zone-prompt[b-4dev65fvu4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* ── weekly hours ─────────────────────────────────────────────────── */

.cba-week[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.cba-day[b-4dev65fvu4] {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 0;
}

.cba-day-name[b-4dev65fvu4] {
    margin: 0;
    padding-top: 0.45rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.cba-day-body[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.cba-day-off[b-4dev65fvu4] {
    margin: 0;
    padding-top: 0.45rem;
    color: rgba(255, 255, 255, 0.6);
}

.cba-window[b-4dev65fvu4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

.cba-window-edge[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.cba-window-edge[b-4dev65fvu4]  .tod-select {
    width: 8.5rem;
}

/* The buttons sit on the shared .action-row (app.css): one column on a phone, a row above it. */
.cba-actions[b-4dev65fvu4] {
    margin-top: 0.75rem;
}

/* ── rules ────────────────────────────────────────────────────────── */

.cba-rules[b-4dev65fvu4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 1rem 1.5rem;
}

.cba-check[b-4dev65fvu4] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-height: 44px;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
}

.cba-check input[b-4dev65fvu4] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: var(--ascend-secondary-light);
}

.cba-check-text[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.cba-rules .cba-check[b-4dev65fvu4] {
    grid-column: 1 / -1;
}

.cba-save[b-4dev65fvu4] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
}

/* ── lessons ──────────────────────────────────────────────────────── */

.cba-lessons[b-4dev65fvu4],
.cba-terms[b-4dev65fvu4],
.cba-preview-times[b-4dev65fvu4] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cba-lessons[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cba-lesson[b-4dev65fvu4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cba-lesson-label[b-4dev65fvu4] {
    /* Takes the free width; on a phone it takes the line and the two buttons go under it. */
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.92);
}

/* Change and Remove stay together on one line (never one button per line). */
.cba-lesson-actions[b-4dev65fvu4] {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

.cba-lesson-form[b-4dev65fvu4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
}

.cba-format[b-4dev65fvu4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.cba-format legend[b-4dev65fvu4] {
    width: 100%;
    margin-bottom: 0.25rem;
}

.cba-notes[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
}

/* ── terms ────────────────────────────────────────────────────────── */

.cba-terms[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0.75rem 0;
}

.cba-terms li[b-4dev65fvu4] {
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    overflow-wrap: anywhere;
}

/* ── preview ──────────────────────────────────────────────────────── */

.cba-preview[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cba-preview-days[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cba-preview-day[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.cba-preview-times[b-4dev65fvu4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cba-preview-time[b-4dev65fvu4] {
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .cba-day[b-4dev65fvu4] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cba-day-name[b-4dev65fvu4],
    .cba-day-off[b-4dev65fvu4] {
        padding-top: 0;
    }

    .cba-window-edge[b-4dev65fvu4]  .tod-select {
        width: 7.75rem;
    }
}

@media (hover: none) and (pointer: coarse) {
    .cba-select[b-4dev65fvu4],
    .cba-price[b-4dev65fvu4] {
        min-height: var(--touch-target);
    }

    .cba-check[b-4dev65fvu4] {
        min-height: var(--touch-target);
    }
}

/* ── payouts (#8716 slice 4) ──────────────────────────────────────── */

.cba-payouts[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.cba-payouts .cba-actions[b-4dev65fvu4] {
    margin-top: 0.35rem;
}

/* #9139: the free-first-lesson box takes its own row in the lesson form, so its rule line can wrap at phone width. */
.cba-intro[b-4dev65fvu4] {
    flex: 1 1 100%;
}

/* #9139: the marker beside the coach's free first lesson. A neutral tag, no celebration (Recognition Follows Improvement). */
.cba-lesson-intro[b-4dev65fvu4] {
    flex: 0 0 auto;
    padding: 0.1rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.86);
}

/* R11: a lesson saved below the paid minimum. Its line takes its own row, under the label and the two buttons. */
.cba-lesson-below[b-4dev65fvu4] {
    flex: 1 1 100%;
    order: 3;
}

/* #9141a: the inline link to the profile's calendar card (an inline link in a sentence: WCAG 2.5.8's inline exception). */
.cba-link[b-4dev65fvu4] {
    color: var(--ascend-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(49, 221, 227, 0.45);
    text-underline-offset: 2px;
}

.cba-link:hover[b-4dev65fvu4],
.cba-link:focus-visible[b-4dev65fvu4] {
    text-decoration-color: currentColor;
}

/* #9471 - the lessons page for a coach whose listing students cannot see: the reason, then the listing's own status
   (CoachPageStatusCard) or a plain link to it. */
.cba-listing-gap[b-4dev65fvu4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.cba-listing-link[b-4dev65fvu4] {
    align-self: flex-start;
    color: var(--ascend-accent);
    font-weight: 600;
}
/* /Components/Pages/CoachBridge/CoachBridgeCommentary.razor.rz.scp.css */
/* Mobile-first: single column (thread list above the conversation).
   When the PAGE'S OWN COLUMN is at least 760px wide the list + conversation
   sit side-by-side.

   #8073 - a CONTAINER query, not the old 820px viewport breakpoint (the #8259
   reasoning). From 769px up the nav rail takes ~264-312px, so an 820px screen
   left a 522px column split 256 / 246, and the conversation's message list
   measured 72px wide. 760px of column is what the two tracks need: 16rem of
   list, the gap, and a conversation wide enough for its bubbles. Measured: the
   column is 522px at 820, 696px at 1024 (single column), 846px at 1200 and
   1086px at 1440 (two columns).

   #8073 (CB-FIX-PHONE) B4 - minmax(0, 1fr), NOT 1fr. A 1fr track's minimum is
   its content's min-content, and the previews below are one no-wrap line each
   (731px of text). Measured at 390 before: both cards spanned x=8..820 in a
   390px viewport, previews and timestamps clipped by the page's overflow-x
   clamp. The #7296 grid blowout, the same class #8286 fixed on the dashboard.
   The columns get min-width: 0 for the same reason one level down. */
.cc-page[b-33dfk5ert3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.cc-page-shell[b-33dfk5ert3] {
    container: cc-page / inline-size;
}

@container cc-page (min-width: 760px) {
    .cc-page[b-33dfk5ert3] {
        grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    }
}

.cc-list-col[b-33dfk5ert3],
.cc-detail-col[b-33dfk5ert3] {
    min-width: 0;
}

.cc-thread-list[b-33dfk5ert3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* #8073 B5 - the <li> is a plain list item again; the button inside it is the
   row. The button fills the row and inherits the page's type, so it reads as
   the same row it always was - and the previews' ellipsis has a width to
   measure against (a button is shrink-to-fit by default). */
.cc-thread-item[b-33dfk5ert3] {
    min-width: 0;
}

.cc-thread-select[b-33dfk5ert3] {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.6rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cc-thread-select:hover[b-33dfk5ert3] {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(255, 255, 255, 0.03);
}

/* A keyboard user sees where focus is; a mouse click does not draw it. */
.cc-thread-select:focus-visible[b-33dfk5ert3] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.cc-selected .cc-thread-select[b-33dfk5ert3] {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(212, 175, 55, 0.08);
}

.cc-thread-item-head[b-33dfk5ert3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* The conversation's name may be long ("Sam Whitfield vs hikaru - Aug 3,
   2026") - it wraps inside the row instead of widening it. */
.cc-thread-target[b-33dfk5ert3] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}

.cc-thread-label[b-33dfk5ert3] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cc-thread-target i[b-33dfk5ert3] {
    color: #d4af37;
}

.cc-unread-badge[b-33dfk5ert3] {
    background: #d4af37;
    color: #1a1a1a;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 1rem;
    padding: 0.05rem 0.5rem;
    min-width: 1.4rem;
    text-align: center;
}

.cc-thread-item-meta[b-33dfk5ert3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    opacity: 0.65;
}

/* The opening, now detail rather than the row's name. It sits between the
   person and the date and yields space to both - one line, truncated, never
   competing with the conversation's actual identity above it. */
.cc-thread-opening[b-33dfk5ert3] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-thread-preview[b-33dfk5ert3] {
    display: block;
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #6932 - the student's way from "my coach said this" to the game it is about.
   Sits above the thread so it reads as context for the conversation below. */
.cc-view-game[b-33dfk5ert3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    font-size: 0.85rem;
    color: var(--ascend-accent);
    text-decoration: none;
}

.cc-view-game:hover[b-33dfk5ert3] {
    text-decoration: underline;
}

/* #6934 - the summary line above the list. It answers the nav badge: the badge
   said 3, this says 3, and three rows below carry a count. Same number, one
   source (GetCommentaryInboxQuery). */
.cc-waiting-summary[b-33dfk5ert3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-text-light);
}

/* #6936 - "on 3 moves of this game", the detail under an aggregated row. It is
   deliberately a sub-line and never its own row: one review pass is one entry. */
.cc-thread-moves[b-33dfk5ert3] {
    display: block;
    margin: 0.25rem 0 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-accent);
}

/* #6934 - the coach half's framing line above the "open it" link. */
.cc-help[b-33dfk5ert3] {
    margin: 0 0 0.75rem 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-muted);
}

/* ── #8093 ONE-THREAD: the student's inbox grouped by coach ───────────────────── */
.cc-coach-group[b-33dfk5ert3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.cc-coach-group + .cc-coach-group[b-33dfk5ert3] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-coach-head[b-33dfk5ert3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ascend-text-light);
    min-width: 0;
}

.cc-coach-name[b-33dfk5ert3] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A coach with nothing new is ONE compact row: a real button, 44px tall, that opens the
   coach's conversations in place. */
.cc-coach-quiet[b-33dfk5ert3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--ascend-text-light);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.cc-coach-quiet:focus-visible[b-33dfk5ert3] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

/* Defect #8578 - the name takes the width the note and the chevron leave, and a long one
   is cut at two lines with an ellipsis. It used to be the only part that could shrink and
   it wrapped without limit: at 344 wide it had about 130px, so a long name made the "one
   compact row" four lines tall. Nothing is removed from the markup: the element's text is
   still the whole name (what assistive tech reads), and it is the title as well. */
.cc-coach-quiet .cc-coach-name[b-33dfk5ert3] {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* The chevron keeps its size; the name is the part that gives way. */
.cc-coach-quiet > i[b-33dfk5ert3] {
    flex: none;
}

.cc-coach-quiet-meta[b-33dfk5ert3] {
    margin-left: auto;
    flex: none;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ascend-text-muted);
}

.cc-questions[b-33dfk5ert3] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.cc-questions-label[b-33dfk5ert3] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ascend-text-muted);
}

.cc-questions-list[b-33dfk5ert3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cc-question[b-33dfk5ert3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 0;
}

.cc-question-body[b-33dfk5ert3] {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.cc-question-withdraw[b-33dfk5ert3] {
    flex: none;
    min-height: 44px;
    padding: 0 0.625rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ascend-accent);
    font: inherit;
    font-size: 0.8125rem;
    text-decoration: underline;
    cursor: pointer;
}

.cc-question-withdraw:focus-visible[b-33dfk5ert3] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

/* ── Bug #8382: a game conversation's move threads, one section per move ────── */
.cc-move-threads[b-33dfk5ert3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cc-move-thread[b-33dfk5ert3],
.cc-game-thread[b-33dfk5ert3] {
    min-width: 0;
}

.cc-move-thread + .cc-move-thread[b-33dfk5ert3] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1rem;
}

.cc-move-threads + .cc-game-thread[b-33dfk5ert3] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1rem;
}

.cc-move-head[b-33dfk5ert3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ascend-text-light);
}
/* /Components/Pages/CoachBridge/CoachBridgeDashboard.razor.rz.scp.css */
/* Coach Bridge — coach dashboard (PBI #5398 Phase 1A.8). */

.cb-coach-grid[b-suiso2kfse] {
    overflow-x: auto;
}

/* ---- #8073 (CB-FIX-PHONE) B3: in a narrow column the roster STOPS BEING A TABLE

   Measured at 390 with touch emulation before: 602px of columns inside the
   322px overflow-x scroller above, and the only way into a student, a trailing
   "Open" button, at x=536..611. The page-level overflow check was green for
   the #8054 reason: the scroller held the overflow.

   The #8054 / #8259 pattern: ONE render that re-lays itself out. The student's
   name (the link) is the card's title; the five values wrap beneath it, each
   with the .cell-label key its column header gave it. A CONTAINER query on the
   roster's own column, not a viewport breakpoint (the #8259 reasoning: from
   769px up the nav rail narrows the column, so only the column knows its
   width). The table without the old Open column measured 678px at its
   narrowest with a short name (with the table rules below live - see the note
   on them), and longer names widen it, so it flips below 760px of column. At
   1024 the column is 658px (cards); at 1200 and 1440 it is a table. */
.cb-roster-shell[b-suiso2kfse] {
    container: cb-roster / inline-size;
}

/* The per-cell key is silent while the column headers are doing that job. */
.cb-roster-cards .cell-label[b-suiso2kfse] {
    display: none;
}

/* The name is the way in: it reads as a link AT REST, at every width. It is
   the only way into a student now, and hover never happens on a touch
   screen, so an underline that appears only on hover would leave the card's
   title looking like a label. */
.cb-roster-student-link[b-suiso2kfse] {
    color: var(--ascend-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(49, 221, 227, 0.45);
    text-underline-offset: 0.2em;
    overflow-wrap: anywhere;
}

.cb-roster-student-link:hover[b-suiso2kfse] {
    text-decoration-color: currentColor;
}

/* The touch floor, on EVERY touch screen and not only in card mode. The
   "Open" button this replaced was a small Button, which carries the floor at
   every width; on a tablet whose roster is still a table the name link is the
   only way in. Pointer media, not a width query (app.css: a width query
   misses the landscape phone and the 1024px tablet). */
@media (hover: none) and (pointer: coarse) {
    .cb-roster-student-link[b-suiso2kfse] {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target);
    }
}

.cb-roster-student-link:focus-visible[b-suiso2kfse] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

@container cb-roster (max-width: 760px) {
    /* Nothing left to scroll sideways. Load-bearing for the E2E guard too:
       while the wrapper is a scroller, the overflow probe treats everything in
       it as reachable, which is how 602px of columns measured clean. */
    .cb-coach-grid.cb-roster-cards[b-suiso2kfse] {
        overflow-x: visible;
    }

    .cb-coach-grid.cb-roster-cards[b-suiso2kfse]  table.cb-quickgrid {
        display: block;
        width: 100%;
        min-width: 0;
    }

    /* display: none, not an sr-only clip (the #8054 reasoning): a clipped
       header row stays in the reading order with nothing on screen. Each value
       carries its own key instead. */
    .cb-coach-grid.cb-roster-cards[b-suiso2kfse]  thead {
        display: none;
    }

    .cb-coach-grid.cb-roster-cards[b-suiso2kfse]  tbody {
        display: block;
    }

    /* Only student rows become cards (RowClass = cb-roster-row). */
    .cb-coach-grid.cb-roster-cards[b-suiso2kfse]  tbody tr.cb-roster-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.4rem 1.25rem;
        margin-bottom: 0.75rem;
        padding: 0.85rem 1rem;
        border: 1px solid rgba(49, 221, 227, 0.2);
        border-radius: 12px;
    }

    .cb-coach-grid.cb-roster-cards[b-suiso2kfse]  table.cb-quickgrid tbody tr.cb-roster-row:hover td {
        background: transparent;
    }

    /* Out-specifies the table's own cell rule above (padding, rule lines). */
    .cb-coach-grid.cb-roster-cards[b-suiso2kfse]  table.cb-quickgrid td {
        display: block;
        min-width: 0;
        padding: 0;
        border-bottom: none;
    }

    /* The name owns the first line: it is the card's title and its link. */
    .cb-coach-grid.cb-roster-cards[b-suiso2kfse]  table.cb-quickgrid td.cb-col-student {
        flex: 1 1 100%;
        font-size: 1rem;
    }

    .cb-coach-grid.cb-roster-cards .cell-label[b-suiso2kfse] {
        display: inline;
        margin-right: 0.4rem;
        font-family: var(--ascend-font-primary);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ascend-text-muted);
    }
}

/* #8073 - these four rules were DEAD until now. Written as
   `.cb-quickgrid ::deep table`, they compiled to `.cb-quickgrid[b-..] table`,
   but cb-quickgrid is the class QuickGrid writes on its OWN <table>, which
   never carries this page's scope attribute - so nothing matched and the 1440
   roster table did not fill its card. Re-anchored on .cb-coach-grid, which is
   in this page's markup (the ScopedCssChildComponentClassTests reasoning). */
.cb-coach-grid[b-suiso2kfse]  table.cb-quickgrid {
    width: 100%;
    border-collapse: collapse;
}

.cb-coach-grid[b-suiso2kfse]  table.cb-quickgrid thead th {
    text-align: left;
    padding: 0.75rem 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(49, 221, 227, 0.15);
}

.cb-coach-grid[b-suiso2kfse]  table.cb-quickgrid tbody td {
    padding: 0.75rem 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cb-coach-grid[b-suiso2kfse]  table.cb-quickgrid tbody tr:hover td {
    background: rgba(49, 221, 227, 0.04);
}

.cb-coach-unread[b-suiso2kfse] {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(184, 133, 54, 0.18);
    color: var(--ascend-secondary-light);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
}

.cb-coach-muted[b-suiso2kfse] {
    color: rgba(255, 255, 255, 0.35);
}

/* #6934 - replies waiting ON the coach. Cyan, where the nudge badge beside it is
   gold: the two count opposite directions (nudges the student hasn't opened vs
   the student's words the coach hasn't read) and must not read as one number.
   Cyan is also the "action is yours" accent used elsewhere. */
.cb-coach-replies[b-suiso2kfse] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(49, 221, 227, 0.15);
    color: var(--ascend-accent);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* The at-a-glance answer to "is anyone waiting on me". Renders only when the
   count is non-zero - there is no caught-up state to habituate past. */
.cb-replies-banner[b-suiso2kfse] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.08);
    color: var(--ascend-text-light);
    font-size: 0.9rem;
}

.cb-replies-banner i[b-suiso2kfse] {
    color: var(--ascend-accent);
}

.cb-replies-banner strong[b-suiso2kfse] {
    color: var(--ascend-accent);
}

/* Last-active column tinting (PBI #5398 §Phase 2 at-a-glance state).
   Stale (gold) draws the eye to students who haven't been active in a
   week — likely candidates for a nudge. Fresh (cyan) reinforces that
   recently-active students don't need attention. Neutral for the
   1-7 day range. */
.cb-coach-stale[b-suiso2kfse] {
    color: #B88536;
    font-weight: 600;
}

.cb-coach-fresh[b-suiso2kfse] {
    color: #31DDE3;
}

/* ── First-time-coach welcome panel (PBI #5850) ──────────────────────── */

.cb-welcome-panel[b-suiso2kfse] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    align-items: start;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.08), rgba(10, 22, 40, 0.6));
    border: 1px solid rgba(49, 221, 227, 0.3);
}

.cb-welcome-icon[b-suiso2kfse] {
    font-size: 2rem;
    color: #31DDE3;
    line-height: 1;
    padding-top: 0.25rem;
}

.cb-welcome-body[b-suiso2kfse] {
    min-width: 0;
}

.cb-welcome-title[b-suiso2kfse] {
    margin: 0 0 0.5rem;
    color: #ffffff;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
}

.cb-welcome-text[b-suiso2kfse] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-size: 0.9375rem;
}

@media (max-width: 32rem) {
    .cb-welcome-panel[b-suiso2kfse] {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cb-welcome-icon[b-suiso2kfse] { padding-top: 0; }
}

/* #8091 LESSON-BRIEF - the roster as a triage list. One card-like row per student at
   every width (no columns to squeeze at 344), the name first, then plain counts. What
   the coach owes reads brighter; nothing is celebrated. */
.cb-triage-list[b-suiso2kfse] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cb-triage-row[b-suiso2kfse] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.cb-triage-name[b-suiso2kfse] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* #8551 - a chip can carry a whole sentence ("Resumes when their plan includes Coach
   Bridge"), which is wider than the row at 344 and 390. The row of chips wraps and may
   shrink with its card; each chip is capped to the row and breaks its own text. The card
   clips overflow, so no page-level check sees a chip that fails this.
   Pinned by CoachTriageChipWrapContractTests. */
.cb-triage-facts[b-suiso2kfse] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}

.cb-triage-fact[b-suiso2kfse] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.cb-triage-waiting[b-suiso2kfse] {
    color: #ffffff;
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(49, 221, 227, 0.08);
}

.cb-triage-paused .cb-triage-name[b-suiso2kfse] {
    color: rgba(255, 255, 255, 0.6);
}

/* #8097 COACH-INVITE - the "Invite a student" call to action under the empty state,
   rendered only while coach-v2 is live for this coach account. */
.cb-invite-cta[b-suiso2kfse] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* #9104 - the coach page card on the Coach Studio home, spaced like the cards above it. */
.cb-coach-page[b-suiso2kfse] {
    margin-bottom: 1.5rem;
    max-width: 760px;
}
/* /Components/Pages/CoachBridge/CoachBridgePausedCoaches.razor.rz.scp.css */
/* #8099 CB-CONTINUITY - the student's paused coach relationships, after the share page's tier gate (outside it)
   and on /access-ended. */

.cb-paused[b-z8tfn08pqx] {
    margin-bottom: 1.5rem;
}

.cb-paused-list[b-z8tfn08pqx] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cb-paused-row[b-z8tfn08pqx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cb-paused-main[b-z8tfn08pqx] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
}

.cb-paused-main strong[b-z8tfn08pqx] {
    color: var(--ascend-text-light);
    font-weight: 600;
}

.cb-paused-state[b-z8tfn08pqx] {
    color: var(--ascend-text-muted);
    font-size: 0.875rem;
}

.cb-paused-text[b-z8tfn08pqx] {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-style: normal;
    line-height: 1.6;
}

.cb-paused-actions[b-z8tfn08pqx] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Review round 1 - the card's own word after Stop sharing. Upright like .cb-paused-text (the
   global paragraph style is italic), and flush with the body when no paused row is left. */
.cb-paused-status[b-z8tfn08pqx] {
    margin: 0;
    color: var(--ascend-text-light);
    font-size: 0.875rem;
    font-style: normal;
}

.cb-paused-list + .cb-paused-status[b-z8tfn08pqx] {
    margin-top: 0.75rem;
}
/* /Components/Pages/CoachBridge/CoachBridgeProfile.razor.rz.scp.css */
/* #5868 - coach profile editor; #9104 - Your coach page: the listing status, the profile card,
   the listing section, the calendar card and account deletion, one column. */
.cbp-page[b-g0c9bwhzx4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 760px;
}

/* An in-page link target: land with the heading clear of the sticky header (the phone header is
   two rows, about 110px, so it needs more room there; measured at 344 and 390). */
.cbp-section[b-g0c9bwhzx4] {
    scroll-margin-top: 5rem;
}

@media (max-width: 768px) {
    .cbp-section[b-g0c9bwhzx4] {
        scroll-margin-top: 8rem;
    }
}

.cbp-form[b-g0c9bwhzx4] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.cbp-listing-section[b-g0c9bwhzx4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cbp-grid[b-g0c9bwhzx4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.cbp-field[b-g0c9bwhzx4] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cbp-field label[b-g0c9bwhzx4] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
}

/* #7266: the whole dark treatment here - fill, border, radius, colour,
   padding and the focus border - was a private copy of the global .form-input
   in app.css (#7258). This page has no sizing delta of its own, so the local
   rules are gone entirely. */
.cbp-area[b-g0c9bwhzx4] {
    resize: vertical;
}

.cbp-actions[b-g0c9bwhzx4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.4rem;
}

.cbp-saved[b-g0c9bwhzx4] {
    color: #10b981;
    margin: 0;
}

.cbp-error[b-g0c9bwhzx4] {
    color: #ef4444;
    margin: 0;
}

.cbp-hidden[b-g0c9bwhzx4] {
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 700px) {
    .cbp-grid[b-g0c9bwhzx4] {
        grid-template-columns: 1fr;
    }
}

/* #7976 - delete account. Set apart from the profile form under a red-tinted
   divider, the same treatment as the player /profile deletion section. */
.cbp-delete[b-g0c9bwhzx4] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(239, 68, 68, 0.25);
}

.cbp-delete-title[b-g0c9bwhzx4] {
    font-family: var(--ascend-font-primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.cbp-delete-error[b-g0c9bwhzx4] {
    margin-top: 0.75rem;
}

/* #9104 - the line under the profile fields saying the listing reads them. */
.cbp-listing-text[b-g0c9bwhzx4] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

/* /Components/Pages/CoachBridge/CoachBridgeRedeem.razor.rz.scp.css */
/* Coach Bridge — magic-link redemption landing page (PBI #5398 Phase 1A.6).
   Auth-shell chrome lives in wwwroot/app.css per PBI #5848 dedup. */

.processing-section[b-tn8jau33a4],
.success-section[b-tn8jau33a4],
.error-section[b-tn8jau33a4] {
    text-align: center;
    padding: 0 2rem 3rem;
}

.icon-circle[b-tn8jau33a4] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(49, 221, 227, 0.4);
    margin-bottom: 2rem;
    animation: scaleIn-b-tn8jau33a4 0.5s ease;
}

/* Bug #8382 - the glyph's size lives HERE and nowhere else. Every status icon on
   this page used to carry an inline style="font-size: 40px", which beats any rule
   in this file, so on a phone the X stayed 40px inside the 60px circle and sat
   off-center over its edge. line-height 1 and a block box take Bootstrap Icons'
   baseline nudge (vertical-align -.125em) out of the centering. */
.icon-circle[b-tn8jau33a4]  i {
    display: block;
    font-size: 40px;
    line-height: 1;
}

.icon-circle[b-tn8jau33a4]  i::before {
    display: block;
    vertical-align: 0;
}

.icon-circle.success[b-tn8jau33a4] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(16, 185, 129, 0.2));
    border-color: rgba(49, 221, 227, 0.4);
}

.icon-circle.error[b-tn8jau33a4] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border-color: rgba(239, 68, 68, 0.4);
}

@keyframes scaleIn-b-tn8jau33a4 {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.callback-card h1[b-tn8jau33a4] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 2rem 1rem;
    padding: 0;
    line-height: 1.2;
    text-align: center;
}

.subtitle[b-tn8jau33a4] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 2rem 1rem;
    text-align: center;
}

/* #8837 - a section with two or more buttons also carries the shared
   .action-row action-row--center (see the markup), so on a phone its buttons
   stack at one width instead of wrapping one per line at their own label
   widths. This rule keeps the spacing and centers a single button. */
.action-section[b-tn8jau33a4] {
    margin-top: 2rem;
    padding: 0 2rem 3rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .callback-card h1[b-tn8jau33a4] { font-size: 1.75rem; }
    .icon-circle[b-tn8jau33a4] { width: 60px; height: 60px; }
    .icon-circle[b-tn8jau33a4]  i { font-size: 30px; }
}

/* ── Coach Bridge invite-specific bits ───────────────────────────────── */

.cb-redeem-scope[b-tn8jau33a4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 2rem 1.5rem;
}

.cb-redeem-scope-label[b-tn8jau33a4] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cb-redeem-chip[b-tn8jau33a4] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: #31DDE3;
    font-size: 0.8125rem;
    font-weight: 600;
}

.cb-redeem-error[b-tn8jau33a4] {
    margin: 1rem 2rem 0;
    padding: 0.625rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
    border-radius: 6px;
    color: #fca5a5;
    text-align: left;
}

/* #8074 (CB-AGE): the decision-33 refusal sits where the buttons would be. */
.cb-redeem-age[b-tn8jau33a4] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* #8074 (CB-AGE): the one-time "I am 18 or older" row inside the accept modal. */
.cb-modal-age-row[b-tn8jau33a4] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.cb-modal-age-row input[type="checkbox"][b-tn8jau33a4] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: #31DDE3;
    cursor: pointer;
}

/* #8308 (under #8074): the label wraps the box, so on a finger the label row
   is the target and it takes the 44px floor (border-box, so the row's own
   0.75rem top padding counts toward it, as it does for taps). The 2.0.3 dev
   walk measured it at 291x39 (390) and 249x39 (344) on a coarse pointer.
   Desktop is unchanged. Pinned by ConditionalSurfaceTouchTargetTests: the row
   lives inside the accept modal, which no route walk opens. */
@media (hover: none) and (pointer: coarse) {
    .cb-modal-age-row[b-tn8jau33a4] {
        min-height: var(--touch-target);
    }
}

.cb-modal-age-hint[b-tn8jau33a4] {
    margin: 0.375rem 0 0 1.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ── Confirmation modal body (PBI #5850 — kept here so merge with the
   onboarding PR doesn't drop these classes if dedup lands second) ───── */

.cb-modal-body[b-tn8jau33a4] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.6;
}

.cb-modal-scope[b-tn8jau33a4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cb-modal-scope-label[b-tn8jau33a4] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* /Components/Pages/CoachBridge/CoachBridgeRegister.razor.rz.scp.css */
/* Coach Bridge — coach signup page (PBI #5398 Phase 1A.7).
   Auth-shell chrome lives in wwwroot/app.css per PBI #5848 dedup. */

.register-card[b-2lfa1me30u] {
    padding-bottom: 2rem;
}

.register-card h1[b-2lfa1me30u] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.2;
}

.subtitle[b-2lfa1me30u] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 1rem 0 2rem;
    padding: 0 2rem;
}

.alert[b-2lfa1me30u] {
    margin: 0 2rem 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

.alert-error[b-2lfa1me30u] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.validation-summary[b-2lfa1me30u] {
    margin: 0 2rem 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #fca5a5;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

.validation-summary ul[b-2lfa1me30u] {
    margin: 0;
    padding-left: 1.5rem;
}

[b-2lfa1me30u] form {
    padding: 0 2rem;
}

.form-row[b-2lfa1me30u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.form-group[b-2lfa1me30u] {
    margin-bottom: 1.25rem;
}

.form-group label[b-2lfa1me30u] {
    display: block;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

/* #7266: everything but the width/box-sizing was a copy of the global
   .form-input in app.css (#7258) - including a raw 'tablet-gothic' font
   literal, a focus ring at a weaker 10% glow than the global 25%, and a
   placeholder DRIFTED DOWN to 0.4 white against the global 0.5. The global
   values win. ::deep stays because InputText renders the <input>. */
[b-2lfa1me30u] .form-input {
    width: 100%;
    box-sizing: border-box;
}

.form-hint[b-2lfa1me30u] {
    display: block;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

/* #8074 (CB-AGE): the "I am 18 or older" row - same shape as Login's remember-me. */
.checkbox-group label[b-2lfa1me30u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0;
}

[b-2lfa1me30u] .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #31DDE3;
}

.checkbox-group span[b-2lfa1me30u] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* #8308 (under #8074): on a finger the whole label row is the box's target -
   a tap anywhere on it toggles the box, so growing the row is an honest 44px
   (the .radio-option precedent in PositionSetup). The 2.0.3 dev walk measured
   this label at 308x24 (390) and 262x24 (344) on a coarse pointer. Inside the
   pointer query only, so desktop keeps its compact 24px row. Pinned by
   ConditionalSurfaceTouchTargetTests: this page is not on the live gate's
   route list. */
@media (hover: none) and (pointer: coarse) {
    .age-confirm-row[b-2lfa1me30u] {
        min-height: var(--touch-target);
    }
}

[b-2lfa1me30u] .btn-primary {
    width: 100%;
    margin-top: 0.5rem;
}

.register-footer[b-2lfa1me30u] {
    padding: 1.5rem 2rem 0;
    text-align: center;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    margin-top: 1.5rem;
    margin-left: 2rem;
    margin-right: 2rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.register-footer a[b-2lfa1me30u] {
    color: #31DDE3;
    text-decoration: none;
    font-weight: 600;
}

.register-footer a:hover[b-2lfa1me30u] {
    color: #42e8ed;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .register-card h1[b-2lfa1me30u] { font-size: 1.75rem; }
    .form-row[b-2lfa1me30u] { grid-template-columns: 1fr; }
    .alert[b-2lfa1me30u], .validation-summary[b-2lfa1me30u] { margin-left: 1.5rem; margin-right: 1.5rem; }
    [b-2lfa1me30u] form { padding: 0 1.5rem; }
}

/* #8418 - the commitment excerpt (Shared/CoachCommitment) sits in the card's 2rem
   content gutter, like the subtitle and the alert. */
.register-card[b-2lfa1me30u]  .coach-commitment-excerpt {
    margin: 0 2rem 1.75rem;
}

@media (max-width: 768px) {
    .register-card[b-2lfa1me30u]  .coach-commitment-excerpt { margin-left: 1.5rem; margin-right: 1.5rem; }
}
/* /Components/Pages/CoachBridge/CoachBridgeShare.razor.rz.scp.css */
/* Coach Bridge — player-side share page (PBI #5398 Phase 1A.5). */

.cb-grid[b-lz1hzai0sq] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cb-help[b-lz1hzai0sq] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
}

/* ── Coach email + personal note (Phase 1B) ──────────────────────────── */

.cb-email-group[b-lz1hzai0sq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cb-email-label[b-lz1hzai0sq],
.cb-email-note-label[b-lz1hzai0sq] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.5rem;
}

.cb-email-note-label[b-lz1hzai0sq] {
    margin-top: 0.75rem;
}

.cb-email-input[b-lz1hzai0sq] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: #ffffff;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
    resize: vertical;
}

.cb-email-input:focus[b-lz1hzai0sq] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
}

.cb-email-input[b-lz1hzai0sq]::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

/* ── Scope toggle group ──────────────────────────────────────────────── */

.cb-scope-fieldset[b-lz1hzai0sq] {
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 0 0 1rem;
    background: rgba(255, 255, 255, 0.02);
}

.cb-scope-legend[b-lz1hzai0sq] {
    padding: 0 0.5rem;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cb-scope-row[b-lz1hzai0sq] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    column-gap: 0.75rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

.cb-scope-row input[type="checkbox"][b-lz1hzai0sq] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: #31DDE3;
    cursor: pointer;
}

/* #8074 (CB-AGE): the one-time "I am 18 or older" row, set apart from the scope picker. */
.cb-age-row[b-lz1hzai0sq] {
    margin-bottom: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
}

/* #8074 (CB-AGE): the decision-33 refusal, in place of the form. */
.cb-age-blocked[b-lz1hzai0sq] {
    margin: 0;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
    border-radius: 6px;
}

.cb-scope-label[b-lz1hzai0sq] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.cb-scope-hint[b-lz1hzai0sq] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
}

.cb-scope-rationale[b-lz1hzai0sq] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
    line-height: 1.5;
    font-style: italic;
}

/* ── Lists (relationships + share links) ─────────────────────────────── */

.cb-list[b-lz1hzai0sq] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cb-list-row[b-lz1hzai0sq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cb-row-main[b-lz1hzai0sq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
}

.cb-row-meta[b-lz1hzai0sq] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
}

.cb-row-scope[b-lz1hzai0sq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cb-chip[b-lz1hzai0sq] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: #31DDE3;
    font-size: 0.75rem;
    font-weight: 600;
}

/* #8844 - the two-button rows (Edit what they see / Stop sharing, Save / Cancel)
   also carry .action-row .action-row--start, so on a phone both buttons are one
   width (they were 167px over 226px at 344). This rule still lays out the
   one-button row (Revoke). */
.cb-row-actions[b-lz1hzai0sq] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Inline scope editor expanded under a relationship row */
.cb-row-edit[b-lz1hzai0sq] {
    grid-column: 1 / -1;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(49, 221, 227, 0.15);
}

.cb-row-edit-help[b-lz1hzai0sq] {
    margin-bottom: 0.5rem;
}

/* #8844 - Create share link / Email this to my coach sit on the shared
   .action-row .action-row--start (one width on a phone; 168px over 214px
   before), so there is no row rule here any more. */

/* ── #8071 done state: the link just made, directly under its button ─── */

.cb-ready[b-lz1hzai0sq] {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid #31DDE3;
    border-radius: 6px;
}

.cb-ready-lead[b-lz1hzai0sq] {
    margin: 0;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.5;
}

.cb-ready-lead i[b-lz1hzai0sq] {
    color: #31DDE3;
}

.cb-ready-help[b-lz1hzai0sq],
.cb-ready-copied[b-lz1hzai0sq] {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* #8844 - Done / New link for another coach: on .action-row .action-row--start. */

/* Create / email status sits next to those actions, not at the page foot. */
.cb-generate-status[b-lz1hzai0sq] {
    margin-top: 0.75rem;
}

/* ── Share-link copy row ─────────────────────────────────────────────── */

.cb-link-row[b-lz1hzai0sq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
}

.cb-link-input[b-lz1hzai0sq] {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    font-family: monospace;
    font-size: 0.8125rem;
    min-width: 0;
}

/* ── State pills on share-link rows ──────────────────────────────────── */

.cb-state[b-lz1hzai0sq] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cb-state-pending[b-lz1hzai0sq] {
    background: rgba(184, 133, 54, 0.15);
    color: #B88536;
}

.cb-state-revoked[b-lz1hzai0sq],
.cb-state-expired[b-lz1hzai0sq] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

/* ── Toast (transient feedback) ──────────────────────────────────────── */

.cb-toast[b-lz1hzai0sq] {
    margin: 0;
    padding: 0.625rem 1rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid #31DDE3;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
}

/* Mobile bracket — share-link input collapses gracefully */
@media (max-width: 32rem) {
    .cb-link-row[b-lz1hzai0sq] {
        flex-direction: column;
        align-items: stretch;
    }

    .cb-row-main[b-lz1hzai0sq] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* #5868 - coach credentials on relationship rows */
.cb-row-creds[b-lz1hzai0sq] {
    display: block;
    font-size: 0.8rem;
    color: #B88536;
    margin-top: 0.15rem;
}

.cb-row-bio[b-lz1hzai0sq] {
    display: block;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0.2rem;
}

/* #8721 - the paused-coaching card and the block panel sit after the page, outside the tier
   gate. Space them off the content above. */
.cb-outside-gate[b-lz1hzai0sq] {
    margin-top: 1.5rem;
}
/* /Components/Pages/CoachBridge/CoachBridgeStudentView.razor.rz.scp.css */
/* Coach Bridge - the student view's own cards (nudge, private notes, the general
   commentary marker). #8417: the student's data cards moved to
   CoachStudentPanel.razor.css with the markup; .cb-help and .cb-stu-replies are
   in both files because both components render them. */

.cb-help[b-ycd99412j2] {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ── Nudge composer ──────────────────────────────────────────────────── */

.cb-stu-nudge-input[b-ycd99412j2] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.75rem 0.875rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    resize: vertical;
    box-sizing: border-box;
}

.cb-stu-nudge-input:focus[b-ycd99412j2] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
}

.cb-stu-nudge-input[b-ycd99412j2]::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.cb-stu-nudge-foot[b-ycd99412j2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.cb-stu-nudge-count[b-ycd99412j2] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    font-family: monospace;
}

.cb-stu-nudge-count.warn[b-ycd99412j2] {
    color: #B88536;
}

/* Reuse toast from CoachBridgeShare via the page-level class; redefine
   here so this page is self-contained when rendered standalone. */
.cb-toast[b-ycd99412j2] {
    margin: 0.75rem 0 0;
    padding: 0.625rem 1rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid #31DDE3;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
}

/* ── Private notes (coach-only) ──────────────────────────────────────── */

.cb-stu-note-input[b-ycd99412j2] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(184, 133, 54, 0.25);  /* gold tint = coach-only */
    border-radius: 12px;
    color: #ffffff;
    padding: 0.75rem 0.875rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    resize: vertical;
    box-sizing: border-box;
}

.cb-stu-note-input:focus[b-ycd99412j2] {
    outline: none;
    border-color: #B88536;
    background: rgba(255, 255, 255, 0.08);
}

.cb-stu-note-input[b-ycd99412j2]::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.cb-stu-note-foot[b-ycd99412j2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.cb-stu-note-count[b-ycd99412j2] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    font-family: monospace;
}

.cb-stu-note-count.warn[b-ycd99412j2] {
    color: #B88536;
}

.cb-stu-note-list[b-ycd99412j2] {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cb-stu-note-item[b-ycd99412j2] {
    padding: 0.75rem 0.875rem;
    background: rgba(184, 133, 54, 0.04);
    border-left: 3px solid rgba(184, 133, 54, 0.35);
    border-radius: 6px;
}

.cb-stu-note-meta[b-ycd99412j2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.cb-stu-note-date[b-ycd99412j2] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
    font-family: monospace;
}

.cb-stu-note-delete[b-ycd99412j2] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.12s ease;
}

.cb-stu-note-delete:hover:not(:disabled)[b-ycd99412j2] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.1);
}

.cb-stu-note-delete:disabled[b-ycd99412j2] {
    opacity: 0.4;
    cursor: not-allowed;
}

.cb-stu-note-body[b-ycd99412j2] {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    line-height: 1.6;
    white-space: pre-wrap;  /* preserve coach's paragraph breaks */
}

/* ── Sent-nudge history inline under composer ───────────────────────── */

.cb-stu-nudge-history[b-ycd99412j2] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.cb-stu-nudge-history-label[b-ycd99412j2] {
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cb-stu-nudge-history-list[b-ycd99412j2] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cb-stu-nudge-history-item[b-ycd99412j2] {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.cb-stu-nudge-history-meta[b-ycd99412j2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.cb-stu-nudge-history-date[b-ycd99412j2] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-family: monospace;
}

.cb-stu-nudge-status[b-ycd99412j2] {
    font-size: 0.75rem;
    font-family: monospace;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.cb-stu-nudge-status-pending[b-ycd99412j2] {
    background: rgba(184, 133, 54, 0.15);
    color: #B88536;
}

.cb-stu-nudge-status-read[b-ycd99412j2] {
    background: rgba(49, 221, 227, 0.12);
    color: #31DDE3;
}

.cb-stu-nudge-status-dismissed[b-ycd99412j2] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

.cb-stu-nudge-history-body[b-ycd99412j2] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* #6934 - replies waiting on the coach, on a game row or the general thread.
   Same cyan "action is yours" treatment as the dashboard badge so the two read
   as one signal across the two pages. */
.cb-stu-replies[b-ycd99412j2] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-right: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(49, 221, 227, 0.15);
    color: var(--ascend-accent);
    font-size: 0.78rem;
    font-weight: 700;
}

.cb-stu-replies-note[b-ycd99412j2] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--ascend-text-light);
}
/* /Components/Pages/CoachBridge/CoachCalendarCard.razor.rz.scp.css */
/* #8713 (8713b) - the teacher's calendar connection on /coach-bridge/profile. Plain and calm:
   what is connected, what we read, where lessons go, and the way out. */
.ccal[b-msgdtsjdnm] {
    margin-top: 1.5rem;
    /* The connect callback and the bell land here by fragment (#calendar). The mobile header is
       FIXED over the top edge, so keep the heading out from under it (the .cwq convention). */
    scroll-margin-top: calc(var(--app-content-top, 0px) + var(--space-md, 1rem));
    /* The provider buttons stack by the card's own width, not the viewport's. */
    container-type: inline-size;
    min-width: 0;
}

.ccal-text[b-msgdtsjdnm],
.ccal-help[b-msgdtsjdnm],
.ccal-meta[b-msgdtsjdnm] {
    margin: 0 0 0.75rem;
    line-height: 1.6;
    font-style: normal;
    overflow-wrap: anywhere;
}

.ccal-text[b-msgdtsjdnm] {
    color: rgba(255, 255, 255, 0.9);
}

.ccal-help[b-msgdtsjdnm],
.ccal-meta[b-msgdtsjdnm] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.875rem;
}

.ccal-warn[b-msgdtsjdnm] {
    padding: 0.625rem 1rem;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    background-color: rgb(32, 28, 22);
}

.ccal-notice[b-msgdtsjdnm] {
    margin: 0 0 1rem;
    padding: 0.625rem 1rem;
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    background-color: rgb(14, 34, 52);
}

.ccal-notice .ccal-text[b-msgdtsjdnm] {
    margin: 0;
}

.ccal-links[b-msgdtsjdnm] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.ccal-links a[b-msgdtsjdnm] {
    color: var(--ascend-accent);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

/* One column by default; two side by side once the card is wide enough for both labels. */
.ccal-providers[b-msgdtsjdnm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@container (min-width: 36rem) {
    .ccal-providers[b-msgdtsjdnm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

.ccal-provider[b-msgdtsjdnm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.ccal-provider .ccal-help[b-msgdtsjdnm] {
    margin: 0;
}

.ccal-age[b-msgdtsjdnm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ccal-age .ccal-help[b-msgdtsjdnm] {
    margin: 0 0 0.25rem 1.75rem;
}

.ccal-age-row[b-msgdtsjdnm] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.ccal-age-row input[type="checkbox"][b-msgdtsjdnm] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ascend-accent);
    cursor: pointer;
}

.ccal-actions[b-msgdtsjdnm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* A Microsoft row left mid-disconnect shows Disconnect above the connect body: keep them apart. */
.ccal-actions:not(:last-child)[b-msgdtsjdnm] {
    margin-bottom: 1.25rem;
}

@media (hover: none) and (pointer: coarse) {
    .ccal-age-row[b-msgdtsjdnm] {
        min-height: var(--touch-target);
    }

    .ccal[b-msgdtsjdnm]  .ascend-btn,
    .ccal-links a[b-msgdtsjdnm] {
        min-height: var(--touch-target);
    }

    .ccal-links a[b-msgdtsjdnm] {
        display: inline-flex;
        align-items: center;
    }
}
/* /Components/Pages/CoachBridge/CoachDirectoryCards.razor.rz.scp.css */
/* #8105 - the coaches listed on ASCENDCHESS, on Find a Coach. Brand tokens only.
   Solid card background on purpose: text on a gradient is undecidable for axe. */
.cdir[b-91rjrzgrj3] {
    margin-bottom: 1.5rem;
    min-width: 0;
}

/* Inside the section the section's own bottom margin is the gap. */
.cdir[b-91rjrzgrj3]  .cwl {
    margin-bottom: 0;
}

.cdir-heading[b-91rjrzgrj3] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0.5rem;
}

.cdir-intro[b-91rjrzgrj3],
.cdir-note[b-91rjrzgrj3],
.cdir-empty[b-91rjrzgrj3],
.cdir-fact[b-91rjrzgrj3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.cdir-intro[b-91rjrzgrj3],
.cdir-note[b-91rjrzgrj3] {
    margin: 0 0 0.75rem;
}

.cdir-empty[b-91rjrzgrj3] {
    margin: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
}

.cdir-list[b-91rjrzgrj3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cdir-card[b-91rjrzgrj3] {
    padding: 1.25rem;
    background-color: rgb(10, 22, 40);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    min-width: 0;
}

.cdir-fact[b-91rjrzgrj3] {
    margin: 0.9rem 0 0;
}

.cdir-actions[b-91rjrzgrj3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    min-width: 0;
}

@media (max-width: 480px) {
    .cdir-card[b-91rjrzgrj3] {
        padding: 1rem;
    }
}
/* /Components/Pages/CoachBridge/CoachFlagClaim.razor.rz.scp.css */
/* #8101 COACH-TO-SME - the "Flag this for review" dialog on the game review in coach
   mode: what the review says about one move, one quiet card each. No celebration
   styling: a flag is a report, not an achievement. Everything wraps, so the dialog never
   scrolls sideways at 344. */

.cfc[b-83tmmujhdo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.cfc-lead[b-83tmmujhdo],
.cfc-empty[b-83tmmujhdo],
.cfc-note[b-83tmmujhdo] {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.cfc-note[b-83tmmujhdo] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.875rem;
}

.cfc-list[b-83tmmujhdo] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.cfc-item[b-83tmmujhdo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
}

.cfc-head[b-83tmmujhdo] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    min-width: 0;
    width: 100%;
}

.cfc-kind[b-83tmmujhdo] {
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cfc-label[b-83tmmujhdo] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
}

.cfc-text[b-83tmmujhdo] {
    margin: 0;
    color: #ffffff;
    font-size: 0.9375rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Owner decision 134 - the optional note under a claim: a plain text box, its hint and
   its count. Full width so it never pushes the dialog sideways at 344. */
.cfc-note-field[b-83tmmujhdo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
}

.cfc-note-label[b-83tmmujhdo] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cfc-note-input[b-83tmmujhdo] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.5rem 0.625rem;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    color: #ffffff;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    resize: vertical;
}

.cfc-note-input:focus-visible[b-83tmmujhdo] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 1px;
}

.cfc-note-meta[b-83tmmujhdo] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.125rem 0.75rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
}

.cfc-note-hint[b-83tmmujhdo] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cfc-note-count[b-83tmmujhdo] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cfc-sent[b-83tmmujhdo] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    min-width: 0;
}

.cfc-error[b-83tmmujhdo] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

/* A finger needs the whole control: 44px on a coarse pointer (the #8098 rule). */
@media (pointer: coarse) {
    .cfc-item[b-83tmmujhdo]  button {
        min-height: 44px;
    }
}
/* /Components/Pages/CoachBridge/CoachHomeworkCard.razor.rz.scp.css */
/* #6018 ASSIGN - the coach's homework card on the student page. Plain facts, no
   celebration styling (Recognition Follows Improvement). */

.cb-help[b-65hmklknit] {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.cb-hw-form[b-65hmklknit] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cb-hw-label[b-65hmklknit] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.35rem;
}

.cb-hw-select[b-65hmklknit],
.cb-hw-minutes[b-65hmklknit],
.cb-hw-note[b-65hmklknit] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.9375rem;
}

/* The open list of a dark select: dark surface, light text, on every platform. */
.cb-hw-select option[b-65hmklknit] {
    background: #0a1628;
    color: #ffffff;
}

.cb-hw-note[b-65hmklknit] {
    resize: vertical;
}

.cb-hw-select:focus[b-65hmklknit],
.cb-hw-minutes:focus[b-65hmklknit],
.cb-hw-note:focus[b-65hmklknit] {
    outline: none;
    border-color: var(--ascend-accent);
}

.cb-hw-line[b-65hmklknit],
.cb-hw-item-line[b-65hmklknit] {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.cb-hw-foot[b-65hmklknit] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.cb-hw-count[b-65hmklknit] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    font-family: monospace;
}

.cb-toast[b-65hmklknit] {
    margin: 0.75rem 0 0;
    padding: 0.625rem 1rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
}

.cb-hw-list[b-65hmklknit] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cb-hw-item[b-65hmklknit] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
}

.cb-hw-item-head[b-65hmklknit] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.cb-hw-item-title[b-65hmklknit] {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cb-hw-status[b-65hmklknit] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.cb-hw-item-facts[b-65hmklknit] {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.9);
}

.cb-hw-item-note[b-65hmklknit] {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    overflow-wrap: anywhere;
}

.cb-hw-item-actions[b-65hmklknit] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* #6018 slice 2 - the coach's time for the item: a short number field, and the
   minutes beside each listed item's finish line. */
.cb-hw-minutes[b-65hmklknit] {
    max-width: 8rem;
}

.cb-hw-item-minutes[b-65hmklknit] {
    margin-left: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

/* #8100 ASSIGN-EVIDENCE - the pattern picker and the observation a pattern assignment
   tracks. A quoted Mirror sentence and a plain label: no celebration styling. */
.cb-hw-pattern[b-65hmklknit],
.cb-hw-pattern-help[b-65hmklknit] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cb-hw-evidence[b-65hmklknit] {
    margin: 0.35rem 0 0;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid rgba(49, 221, 227, 0.35);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    min-width: 0;
}

.cb-hw-evidence-kind[b-65hmklknit] {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
}

.cb-hw-evidence-statement[b-65hmklknit] {
    margin: 0.2rem 0 0;
    color: rgba(255, 255, 255, 0.9);
    overflow-wrap: anywhere;
}

/* May wrap: at 344 the label is wider than the card. */
.cb-hw-unseen[b-65hmklknit] {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    white-space: normal;
}
/* /Components/Pages/CoachBridge/CoachHowToCard.razor.rz.scp.css */
/* #8614 - the coach's "Send a how-to" card on the student page. The same shapes as the plan
   suggestion card beside it; plain facts, no celebration styling. */

.cb-help[b-5gbukb4w3z] {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.cb-ht-form[b-5gbukb4w3z] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cb-ht-label[b-5gbukb4w3z] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.35rem;
}

.cb-ht-input[b-5gbukb4w3z] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.9375rem;
}

/* #9472 - the task picker. A radio group whose labels wrap, so a whole-sentence task
   stays inside the card at any width (a native select's open list could not). */
.cb-ht-pick[b-5gbukb4w3z] {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cb-ht-pick legend[b-5gbukb4w3z] {
    padding: 0;
    margin-bottom: 0.25rem;
}

.cb-ht-option[b-5gbukb4w3z] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 0.9375rem;
    line-height: 1.35;
    cursor: pointer;
}

.cb-ht-option input[b-5gbukb4w3z] {
    flex: none;
    margin: 0.2rem 0 0;
    accent-color: var(--ascend-accent);
}

.cb-ht-option:has(input:checked)[b-5gbukb4w3z] {
    border-color: var(--ascend-accent);
    background-color: rgba(49, 221, 227, 0.08);
}

.cb-ht-option:has(input:focus-visible)[b-5gbukb4w3z] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.cb-ht-note[b-5gbukb4w3z] {
    resize: vertical;
}

.cb-ht-input:focus[b-5gbukb4w3z] {
    outline: none;
    border-color: var(--ascend-accent);
}

.cb-ht-opens[b-5gbukb4w3z] {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
}

.cb-ht-foot[b-5gbukb4w3z] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.cb-ht-count[b-5gbukb4w3z] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    font-family: monospace;
}

.cb-toast[b-5gbukb4w3z] {
    margin: 0.75rem 0 0;
    padding: 0.625rem 1rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
}
/* /Components/Pages/CoachBridge/CoachInviteAccept.razor.rz.scp.css */
/* #8097 COACH-INVITE - the student's accept landing. Auth-shell chrome (callback-page,
   callback-card, logo-section) lives in wwwroot/app.css; everything here is cbia-*. */

.processing-section[b-q915erokuk],
.success-section[b-q915erokuk],
.error-section[b-q915erokuk] {
    text-align: center;
    padding: 0 2rem 3rem;
}

.icon-circle[b-q915erokuk]  i {
    font-size: 40px;
}

.callback-card h1[b-q915erokuk] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 1.5rem 1rem;
    padding: 0;
    line-height: 1.2;
    text-align: center;
}

.subtitle[b-q915erokuk] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 1.5rem 1rem;
    text-align: center;
}

/* #8837 - a section with two or more buttons also carries the shared
   .action-row action-row--center (see the markup), so on a phone its buttons
   stack at one width instead of wrapping one per line at their own label
   widths. This rule keeps the spacing and centers a single button. */
.action-section[b-q915erokuk] {
    margin-top: 1.5rem;
    padding: 0 1.5rem 2.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── The two terms, before anything else ────────────────────────────── */

.cbia-terms[b-q915erokuk] {
    list-style: none;
    margin: 0 1.5rem 1.25rem;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 10px;
    text-align: left;
}

.cbia-terms li[b-q915erokuk] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.cbia-terms i[b-q915erokuk] {
    color: var(--ascend-accent);
    flex: 0 0 auto;
    margin-top: 0.125rem;
}

/* ── The coach's note, as text ──────────────────────────────────────── */

.cbia-note[b-q915erokuk] {
    margin: 0 1.5rem 1.25rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
    border-radius: 6px;
    text-align: left;
}

.cbia-note p[b-q915erokuk] {
    margin: 0 0 0.375rem;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cbia-note footer[b-q915erokuk] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

/* #8104: the report control sits under the note it is about, at the note's own left edge.
   The note's bottom margin is taken back so the two read as one block. */
.cbia-note-report[b-q915erokuk] {
    margin: -1rem 1.5rem 1rem;
    text-align: left;
}

/* #8104: the block control, quiet and last on the card, apart from the accept buttons. */
.cbia-block[b-q915erokuk] {
    display: flex;
    justify-content: center;
    padding: 0 1.5rem 1.5rem;
}

.cbia-block-status[b-q915erokuk] {
    margin: 0 1.5rem 0.75rem;
    color: var(--ascend-text-light);
    font-weight: 600;
    text-align: left;
}

/* ── Scope picker: every box starts off ─────────────────────────────── */

.cbia-choose[b-q915erokuk] {
    margin: 0 1.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    text-align: left;
    font-size: 0.9375rem;
}

.cbia-scope-fieldset[b-q915erokuk] {
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin: 0 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    text-align: left;
}

.cbia-scope-legend[b-q915erokuk] {
    padding: 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cbia-scope-row[b-q915erokuk] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    column-gap: 0.75rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

.cbia-scope-row input[type="checkbox"][b-q915erokuk] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ascend-accent);
    cursor: pointer;
}

.cbia-scope-label[b-q915erokuk] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.cbia-scope-hint[b-q915erokuk] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
}

.cbia-suggested[b-q915erokuk] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background: rgba(184, 133, 54, 0.15);
    border: 1px solid rgba(184, 133, 54, 0.4);
    color: #d6a654;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* #8074 (CB-AGE): the one-time "I am 18 or older" row. The label wraps the box, so on a
   finger the row is the target and takes the 44px floor (#8308). */
.cbia-age-row[b-q915erokuk] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1rem 1.5rem 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    text-align: left;
}

.cbia-age-row input[type="checkbox"][b-q915erokuk] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ascend-accent);
    cursor: pointer;
}

@media (hover: none) and (pointer: coarse) {
    .cbia-age-row[b-q915erokuk] {
        min-height: var(--touch-target);
    }

    .cbia-scope-row[b-q915erokuk] {
        min-height: var(--touch-target);
        align-items: center;
    }
}

.cbia-age-hint[b-q915erokuk] {
    margin: 0.375rem 1.5rem 0 3.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    text-align: left;
}

.cbia-error[b-q915erokuk] {
    margin: 1rem 1.5rem 0;
    padding: 0.625rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .callback-card h1[b-q915erokuk] { font-size: 1.5rem; }
    .icon-circle[b-q915erokuk] { width: 60px; height: 60px; }
}

/* #8896 - the inviting coach's invite deal, stated to the student before the scopes. */
.cbia-deal[b-q915erokuk] {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    text-align: left;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 12px;
}

.cbia-deal-line[b-q915erokuk] {
    margin: 0 0 0.35rem;
    color: #fff;
    line-height: 1.55;
}

.cbia-deal-help[b-q915erokuk] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Pages/CoachBridge/CoachInviteDealCard.razor.rz.scp.css */
/* #8896 - the coach's invite deal card. Page-local classes only (cid-*); the shared Card,
   Button and PromoterDisclosureLine own their chrome. */

.cid-body[b-vrqbzeiygr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cid-deal[b-vrqbzeiygr],
.cid-state[b-vrqbzeiygr],
.cid-hint[b-vrqbzeiygr] {
    margin: 0;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.cid-deal[b-vrqbzeiygr] {
    color: rgba(255, 255, 255, 0.92);
}

.cid-state[b-vrqbzeiygr] {
    color: rgba(255, 255, 255, 0.85);
}

.cid-hint[b-vrqbzeiygr] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

.cid-link-block[b-vrqbzeiygr] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cid-label[b-vrqbzeiygr] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
}

.cid-link-row[b-vrqbzeiygr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.cid-link-input[b-vrqbzeiygr] {
    flex: 1 1 260px;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 8px;
}

.cid-status[b-vrqbzeiygr] {
    min-height: 1.2em;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.cid-actions[b-vrqbzeiygr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* /Components/Pages/CoachBridge/CoachInviteSend.razor.rz.scp.css */
/* #8097 COACH-INVITE - the coach's invite page. Page-local classes only (cbi-*);
   the Card chrome is the shared component's. */

.cbi-grid[b-o00inqludl] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cbi-help[b-o00inqludl] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
}

.cbi-blocked[b-o00inqludl] {
    margin: 0;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
    border-radius: 6px;
}

/* ── Proposed scope ─────────────────────────────────────────────────── */

.cbi-scope-fieldset[b-o00inqludl] {
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 0 0 1rem;
    background: rgba(255, 255, 255, 0.02);
}

.cbi-scope-legend[b-o00inqludl] {
    padding: 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cbi-scope-note[b-o00inqludl] {
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
    font-style: italic;
}

.cbi-scope-row[b-o00inqludl] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    column-gap: 0.75rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

.cbi-scope-row input[type="checkbox"][b-o00inqludl] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ascend-accent);
    cursor: pointer;
}

.cbi-scope-label[b-o00inqludl] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.cbi-scope-hint[b-o00inqludl] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
}

/* #8074 (CB-AGE): the one-time "I am 18 or older" row. The label wraps the box, so on a
   finger the row is the target and takes the 44px floor (#8308). */
.cbi-age-row[b-o00inqludl] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.cbi-age-row input[type="checkbox"][b-o00inqludl] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ascend-accent);
    cursor: pointer;
}

@media (hover: none) and (pointer: coarse) {
    .cbi-age-row[b-o00inqludl] {
        min-height: var(--touch-target);
    }
}

.cbi-age-hint[b-o00inqludl] {
    margin: 0 0 1rem 1.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ── Fields ─────────────────────────────────────────────────────────── */

.cbi-field-group[b-o00inqludl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cbi-email-group[b-o00inqludl] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(49, 221, 227, 0.15);
}

.cbi-field-label[b-o00inqludl] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.cbi-input[b-o00inqludl] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    box-sizing: border-box;
    resize: vertical;
}

.cbi-input:focus[b-o00inqludl] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
}

.cbi-input[b-o00inqludl]::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.cbi-actions[b-o00inqludl] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── The link just made ─────────────────────────────────────────────── */

.cbi-ready[b-o00inqludl] {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
}

.cbi-ready-lead[b-o00inqludl] {
    margin: 0;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.5;
}

.cbi-ready-lead i[b-o00inqludl] {
    color: var(--ascend-accent);
}

.cbi-ready-help[b-o00inqludl] {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.cbi-link-row[b-o00inqludl] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.cbi-link-input[b-o00inqludl] {
    flex: 1 1 12rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    font-family: monospace;
    font-size: 0.8125rem;
    min-width: 0;
}

/* ── Email results ──────────────────────────────────────────────────── */

.cbi-results[b-o00inqludl] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cbi-result[b-o00inqludl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: 0.9375rem;
}

.cbi-result-address[b-o00inqludl] {
    color: #ffffff;
    overflow-wrap: anywhere;
}

.cbi-result-outcome[b-o00inqludl] {
    color: rgba(255, 255, 255, 0.65);
}

.cbi-toast[b-o00inqludl] {
    margin: 1rem 0 0;
    padding: 0.625rem 1rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
}

/* ── The coach's invites ────────────────────────────────────────────── */

.cbi-list[b-o00inqludl] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cbi-list-row[b-o00inqludl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cbi-row-main[b-o00inqludl] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
}

.cbi-row-who[b-o00inqludl] {
    color: #ffffff;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cbi-row-meta[b-o00inqludl] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
}

.cbi-row-note[b-o00inqludl] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    font-style: italic;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cbi-state[b-o00inqludl] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cbi-state-pending[b-o00inqludl] {
    background: rgba(184, 133, 54, 0.15);
    /* The lighter gold token: at 12px the brand gold measured 4.25:1 here (axe-core), under the 4.5:1 bar. */
    color: var(--ascend-secondary-light);
}

.cbi-state-accepted[b-o00inqludl] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.cbi-state-ended[b-o00inqludl] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

@media (max-width: 32rem) {
    .cbi-row-main[b-o00inqludl] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/CoachBridge/CoachLessonBriefCard.razor.rz.scp.css */
/* #8091 LESSON-BRIEF - "Since our last lesson". Plain facts and neutral counts: no
   celebration styling, no streak or score treatment (Recognition Follows Improvement). */

.cb-brief-anchor[b-ibe1d0gx5c] {
    scroll-margin-top: 5rem;
}

.cb-brief-guide[b-ibe1d0gx5c] {
    border: 1px solid rgba(49, 221, 227, 0.25);
    background: rgba(49, 221, 227, 0.05);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.cb-brief-guide-lead[b-ibe1d0gx5c] {
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
}

.cb-brief-guide-steps[b-ibe1d0gx5c] {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cb-brief-guide-sound[b-ibe1d0gx5c] {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
}

.cb-brief-guide a[b-ibe1d0gx5c],
.cb-brief-muted a[b-ibe1d0gx5c] {
    color: var(--ascend-accent);
}

.cb-brief-last[b-ibe1d0gx5c] {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

.cb-brief-sec[b-ibe1d0gx5c] {
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cb-brief-sec:first-of-type[b-ibe1d0gx5c] {
    border-top: none;
}

.cb-brief-h[b-ibe1d0gx5c] {
    margin: 0 0 0.4rem;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.cb-brief-line[b-ibe1d0gx5c] {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

.cb-brief-muted[b-ibe1d0gx5c] {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
}

/* #8603 - practice by pillar: a compact, plain list under the days line. */
.cb-brief-pillars-lead[b-ibe1d0gx5c] {
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

.cb-brief-pillars[b-ibe1d0gx5c] {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
}

.cb-brief-pillars li[b-ibe1d0gx5c] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cb-brief-list[b-ibe1d0gx5c] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cb-brief-obs[b-ibe1d0gx5c],
.cb-brief-hw[b-ibe1d0gx5c],
.cb-brief-q[b-ibe1d0gx5c],
.cb-brief-lesson[b-ibe1d0gx5c] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    min-width: 0;
}

.cb-brief-obs-head[b-ibe1d0gx5c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
}

.cb-brief-date[b-ibe1d0gx5c] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
}

.cb-brief-label[b-ibe1d0gx5c] {
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

.cb-brief-label-verified[b-ibe1d0gx5c] {
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
}

.cb-brief-label-plain[b-ibe1d0gx5c] {
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.cb-brief-pillar[b-ibe1d0gx5c] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
}

.cb-brief-statement[b-ibe1d0gx5c],
.cb-brief-q-body[b-ibe1d0gx5c],
.cb-brief-lesson-text[b-ibe1d0gx5c] {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.9);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.cb-brief-cites[b-ibe1d0gx5c] {
    margin: 0.35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.cb-brief-game[b-ibe1d0gx5c] {
    color: var(--ascend-accent);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.cb-brief-hw[b-ibe1d0gx5c] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cb-brief-hw-title[b-ibe1d0gx5c] {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cb-brief-hw-status[b-ibe1d0gx5c] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
}

.cb-brief-hw-facts[b-ibe1d0gx5c] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.cb-brief-form[b-ibe1d0gx5c] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cb-brief-flabel[b-ibe1d0gx5c] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.35rem;
}

.cb-brief-input[b-ibe1d0gx5c] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.9375rem;
    color-scheme: dark;
}

input.cb-brief-input[b-ibe1d0gx5c] {
    max-width: 14rem;
}

/* #8091 - the focus picker. Its own class, and background-color (never the shorthand), so
   the dropdown arrow the global select rule draws is kept. */
.cb-brief-select[b-ibe1d0gx5c] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 2.25rem 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.9375rem;
    min-height: 44px;
    text-overflow: ellipsis;
}

.cb-brief-select:focus[b-ibe1d0gx5c] {
    outline: none;
    border-color: var(--ascend-accent);
}

/* The open list of a dark select: dark surface, light text, on every platform. */
.cb-brief-select option[b-ibe1d0gx5c],
.cb-brief-select optgroup[b-ibe1d0gx5c] {
    background-color: #0a1628;
    color: #ffffff;
}

.cb-brief-focus[b-ibe1d0gx5c] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    overflow-wrap: anywhere;
}

.cb-brief-focus .cb-brief-statement[b-ibe1d0gx5c] {
    margin: 0;
}

.cb-brief-textarea[b-ibe1d0gx5c] {
    resize: vertical;
}

.cb-brief-input:focus[b-ibe1d0gx5c] {
    outline: none;
    border-color: var(--ascend-accent);
}

.cb-brief-hint[b-ibe1d0gx5c] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
}

.cb-brief-qpick[b-ibe1d0gx5c] {
    border: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cb-brief-check[b-ibe1d0gx5c] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.cb-brief-check input[b-ibe1d0gx5c] {
    margin-top: 0.25rem;
    min-width: 1rem;
}

.cb-brief-foot[b-ibe1d0gx5c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.cb-brief-count[b-ibe1d0gx5c] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    font-family: monospace;
}

.cb-toast[b-ibe1d0gx5c] {
    margin: 0.75rem 0 0;
    padding: 0.625rem 1rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
}

/* #8093 - a stored fact attached to a student's question: the engine's verdict on the move,
   or what the Mirror showed them about the game. Quieter than the question itself. */
.cb-brief-q-fact[b-ibe1d0gx5c] {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    overflow-wrap: anywhere;
}
/* /Components/Pages/CoachBridge/CoachLessonCallLine.razor.rz.scp.css */
/* #8715 slice 8715-6 - the call link on a booked lesson. Brand tokens only; the shared Button owns its chrome and
   its 44px touch target. Nothing scrolls sideways at 344px. */
.clc[b-c2gqoxt0x4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.clc-actions[b-c2gqoxt0x4] {
    min-width: 0;
}

.clc[b-c2gqoxt0x4]  .ascend-btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.clc-line[b-c2gqoxt0x4] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
    min-width: 0;
}

.clc-note[b-c2gqoxt0x4] {
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Pages/CoachBridge/CoachLessonRequestsCard.razor.rz.scp.css */
/* #8715 slice 8715-1 - the lesson requests waiting for a coach's answer, on their students page. Plain
   and calm: a statement of what is waiting, not a banner. Nothing scrolls sideways at 344px. */
.clr[b-5ohlxn6ppn] {
    margin-bottom: 1.5rem;
    /* The bell's entry lands here by fragment (/coach-bridge#coach-lesson-requests). The mobile header is
       FIXED over the top edge, so keep the card's heading out from under it (the #8708 convention). */
    scroll-margin-top: calc(var(--app-content-top, 0px) + var(--space-md, 1rem));
}

.clr-text[b-5ohlxn6ppn],
.clr-status[b-5ohlxn6ppn],
.clr-error[b-5ohlxn6ppn] {
    margin: 0 0 0.75rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.clr-status[b-5ohlxn6ppn],
.clr-error[b-5ohlxn6ppn] {
    margin-top: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 6px;
}

.clr-status[b-5ohlxn6ppn] {
    border-left: 3px solid var(--ascend-accent);
    background-color: rgb(14, 34, 52);
}

.clr-error[b-5ohlxn6ppn] {
    border-left: 3px solid #ef4444;
    background-color: rgb(28, 24, 38);
}

.clr-list[b-5ohlxn6ppn] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.clr-row[b-5ohlxn6ppn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background-color: rgb(10, 22, 40);
    border: 1px solid rgba(255, 255, 255, 0.25);
    min-width: 0;
}

.clr-what[b-5ohlxn6ppn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 14rem;
    overflow-wrap: anywhere;
}

.clr-who[b-5ohlxn6ppn] {
    color: var(--ascend-text-light);
}

.clr-line[b-5ohlxn6ppn] {
    color: rgba(255, 255, 255, 0.85);
}

.clr-warn[b-5ohlxn6ppn] {
    color: rgba(255, 255, 255, 0.9);
    padding-left: 0.625rem;
    border-left: 3px solid #f59e0b;
}

/* The buttons sit on the shared .action-row (a full-width column below 480px). */
.clr-buttons[b-5ohlxn6ppn] {
    min-width: 0;
}

/* An answer is being sent: the buttons keep focus (aria-disabled, never disabled). */
.clr[b-5ohlxn6ppn]  .ascend-btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: progress;
}

/* #8074 (CB-AGE): the coach's one-time 18+ confirmation, the #8106 card's shape. The label wraps the box,
   and is the touch target tall on a touch screen. */
.clr-age-row[b-5ohlxn6ppn] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.75rem 0 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(49, 221, 227, 0.2);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.clr-age-row input[type="checkbox"][b-5ohlxn6ppn] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ascend-accent);
    cursor: pointer;
}

.clr-age-hint[b-5ohlxn6ppn] {
    margin: 0 0 0 1.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
}

@media (hover: none) and (pointer: coarse) {
    .clr-age-row[b-5ohlxn6ppn] {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/CoachBridge/CoachLessons.razor.rz.scp.css */
/* #8714 slice 8714-4 - the student's lessons page. Brand tokens only; the shared Button and the
   picker own their chrome. Nothing scrolls sideways at 344px. */
.clp-page[b-783i8egt00] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 760px;
    min-width: 0;
}

.clp-dark[b-783i8egt00],
.clp-empty[b-783i8egt00],
.clp-coach-name[b-783i8egt00] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.clp-dark[b-783i8egt00] {
    color: rgba(255, 255, 255, 0.75);
}

.clp-coach-name[b-783i8egt00] {
    font-family: var(--ascend-font-primary);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.clp-coaches[b-783i8egt00] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

/* #9186: the student's line for a coach they cannot book right now; the empty line's voice, not a warning. */
.clp-not-bookable[b-783i8egt00] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.clp-not-bookable-coach[b-783i8egt00] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.clp-coach[b-783i8egt00] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.clp-coach[b-783i8egt00]  .ascend-btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* #8715 slice 8715-1 - the student's own lessons: Upcoming, Waiting for an answer, Past. */
.clp-zone[b-783i8egt00],
.clp-lesson-line[b-783i8egt00],
.clp-lesson-state[b-783i8egt00],
.clp-status[b-783i8egt00],
.clp-error[b-783i8egt00] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.clp-zone[b-783i8egt00] {
    color: rgba(255, 255, 255, 0.8);
}

.clp-status[b-783i8egt00] {
    padding: 0.625rem 1rem;
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    background-color: rgb(14, 34, 52);
}

.clp-error[b-783i8egt00] {
    padding: 0.625rem 1rem;
    border-left: 3px solid #ef4444;
    border-radius: 6px;
    background-color: rgb(28, 24, 38);
    color: rgba(255, 255, 255, 0.9);
}

.clp-lessons[b-783i8egt00] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.clp-lesson[b-783i8egt00] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.clp-lesson:last-child[b-783i8egt00] {
    padding-bottom: 0;
    border-bottom: 0;
}

.clp-lesson-line[b-783i8egt00] {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.clp-lesson-state[b-783i8egt00] {
    color: rgba(255, 255, 255, 0.8);
}

.clp-lesson[b-783i8egt00]  .ascend-btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.clp-lesson[b-783i8egt00]  .ascend-btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: progress;
}

/* #8715 slice 8715-7 - the coach's new time on a lesson under To answer: the ask, the answer-by time, the new time's
   cancel line, then Accept new time and Keep the original time. A left rule ties it to its lesson. */
.clp-proposal[b-783i8egt00] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border-left: 3px solid var(--ascend-accent);
    min-width: 0;
}
/* /Components/Pages/CoachBridge/CoachListingEditor.razor.rz.scp.css */
/* #8102 - the coach's own listing editor, since #9104 the listing section of Your coach page.
   Brand tokens only; the shared Card and Button own their chrome, and .form-input is the global
   dark input (app.css). */
.cbl-page[b-g3egd28j2d] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 760px;
}

.cbl-state[b-g3egd28j2d],
.cbl-hint[b-g3egd28j2d],
.cbl-note[b-g3egd28j2d],
.cbl-readonly[b-g3egd28j2d] {
    margin: 0;
    overflow-wrap: anywhere;
}

.cbl-message[b-g3egd28j2d] {
    margin: 0;
    color: var(--ascend-success);
}

.cbl-error[b-g3egd28j2d] {
    margin: 0;
    color: var(--ascend-error-light);
}

.cbl-version[b-g3egd28j2d] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cbl-state[b-g3egd28j2d] {
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.cbl-hint[b-g3egd28j2d] {
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

.cbl-note-label[b-g3egd28j2d],
.cbl-label[b-g3egd28j2d] {
    margin: 0;
    padding: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
}

.cbl-note[b-g3egd28j2d] {
    white-space: pre-wrap;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.cbl-form[b-g3egd28j2d] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.cbl-field[b-g3egd28j2d],
.cbl-fieldset[b-g3egd28j2d] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.cbl-field .form-input[b-g3egd28j2d],
.cbl-band-edge .form-input[b-g3egd28j2d] {
    width: 100%;
    box-sizing: border-box;
}

.cbl-area[b-g3egd28j2d] {
    resize: vertical;
}

.cbl-readonly[b-g3egd28j2d] {
    color: rgba(255, 255, 255, 0.92);
}

.cbl-band[b-g3egd28j2d] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 22rem;
}

.cbl-band-edge[b-g3egd28j2d] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.cbl-pillars[b-g3egd28j2d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.25rem 1rem;
}

/* A whole-row label so the tap target is at least 44px tall on a phone. */
.cbl-pillar[b-g3egd28j2d] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
}

.cbl-pillar input[b-g3egd28j2d] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    accent-color: var(--ascend-secondary-light);
}

.cbl-actions[b-g3egd28j2d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
}

/* #8963 - what the coach profile holds, shown read-only above the form, with the one way to
   edit it (the profile). Set apart from the form so nothing in it reads as an input. */
.cbl-profile[b-g3egd28j2d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cbl-profile-title[b-g3egd28j2d] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.92);
}

.cbl-readonly-text[b-g3egd28j2d] {
    white-space: pre-wrap;
    line-height: 1.5;
}

/* A text link with a tap target at least 44px tall on a phone. */
.cbl-profile-link[b-g3egd28j2d] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 44px;
    color: var(--ascend-secondary-light);
    font-weight: 600;
}

.cbl-profile-changed[b-g3egd28j2d] {
    color: var(--ascend-warning);
}

/* #8103 - the one line that says where a version's FIDE check stands, to this coach only. */

.cbl-rating-missing[b-g3egd28j2d] {
    margin: 0;
    line-height: 1.5;
    color: var(--ascend-warning);
    overflow-wrap: anywhere;
}

.cbl-fide[b-g3egd28j2d] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

/* #9104 fix round - what the old "WHERE IT STANDS" card said, now inside the status bar at the top. */
.cbl-standing[b-g3egd28j2d] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cbl-standing .cbl-version:last-of-type[b-g3egd28j2d] {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* A version's fields behind a disclosure; the summary is a 44px tap target. */
.cbl-details[b-g3egd28j2d] {
    margin: 0;
}

.cbl-summary[b-g3egd28j2d] {
    display: flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    color: var(--ascend-secondary-light);
    font-weight: 600;
}

.cbl-details[open] .cbl-summary[b-g3egd28j2d] {
    margin-bottom: 0.5rem;
}

.cbl-rating-missing a[b-g3egd28j2d] {
    color: var(--ascend-secondary-light);
    font-weight: 600;
}
/* /Components/Pages/CoachBridge/CoachPageStatusCard.razor.rz.scp.css */
/* #9104 - the listing status: a card on the Coach Studio home, a bar at the top of Your coach page. */
.cps-card[b-xjmlwlsnya],
.cps-bar[b-xjmlwlsnya] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cps-bar[b-xjmlwlsnya] {
    /* #9104 fix round - an in-page link target ("See why at the top of this page"): land clear of the
       sticky header, which is two rows (about 110px) on a phone. */
    scroll-margin-top: 5rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    background: var(--ascend-bg-card);
    max-width: 760px;
    box-sizing: border-box;
}

.cps-status[b-xjmlwlsnya],
.cps-line[b-xjmlwlsnya],
.cps-reason[b-xjmlwlsnya] {
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cps-status[b-xjmlwlsnya] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cps-status-label[b-xjmlwlsnya] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
}

/* The status word itself, in a neutral chip: a statement of state, not a badge. */
.cps-chip[b-xjmlwlsnya] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    font-weight: 700;
    color: var(--ascend-text-light);
}

.cps-chip[data-status="CannotBeSent"][b-xjmlwlsnya] {
    border-color: var(--ascend-warning);
}

.cps-line[b-xjmlwlsnya] {
    color: rgba(255, 255, 255, 0.88);
}

.cps-reason[b-xjmlwlsnya] {
    color: var(--ascend-warning);
}

/* The button row is the shared .action-row (app.css): full width on a phone, inline above 480px. */
.cps-actions[b-xjmlwlsnya] {
    margin-top: 0.25rem;
}

/* A text link with a tap target at least 44px tall on a phone. */
.cps-jump[b-xjmlwlsnya] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 44px;
    color: var(--ascend-secondary-light);
    font-weight: 600;
}

@media (max-width: 768px) {
    .cps-bar[b-xjmlwlsnya] {
        scroll-margin-top: 8rem;
    }
}

.cps-hint[b-xjmlwlsnya] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.cps-hint a[b-xjmlwlsnya] {
    color: var(--ascend-secondary-light);
    font-weight: 600;
}
/* /Components/Pages/CoachBridge/CoachPlanSuggestionCard.razor.rz.scp.css */
/* #8531 - the coach's plan suggestion card on the student page. Plain facts, no
   celebration styling (Recognition Follows Improvement). Same shapes as the homework
   card beside it. */

.cb-help[b-d5mvj149ux] {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.cb-ps-form[b-d5mvj149ux] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cb-ps-setup[b-d5mvj149ux] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cb-ps-heading[b-d5mvj149ux] {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.cb-ps-row[b-d5mvj149ux] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cb-ps-field[b-d5mvj149ux] {
    flex: 1 1 9rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cb-ps-label[b-d5mvj149ux] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.35rem;
}

.cb-ps-input[b-d5mvj149ux] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.9375rem;
}

/* Room for the dropdown arrow the global select rule draws. */
select.cb-ps-input[b-d5mvj149ux] {
    padding-right: 2.25rem;
}

/* The open list of a dark select: dark surface, light text, on every platform. */
.cb-ps-input option[b-d5mvj149ux] {
    background-color: #0a1628;
    color: #ffffff;
}

.cb-ps-note[b-d5mvj149ux] {
    resize: vertical;
}

.cb-ps-input:focus[b-d5mvj149ux] {
    outline: none;
    border-color: var(--ascend-accent);
}

.cb-ps-foot[b-d5mvj149ux] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.cb-ps-count[b-d5mvj149ux] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    font-family: monospace;
}

.cb-toast[b-d5mvj149ux] {
    margin: 0.75rem 0 0;
    padding: 0.625rem 1rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
}

.cb-ps-list[b-d5mvj149ux] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cb-ps-item[b-d5mvj149ux] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    min-width: 0;
}

.cb-ps-item-head[b-d5mvj149ux] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.cb-ps-item-title[b-d5mvj149ux] {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cb-ps-status[b-d5mvj149ux] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
}

.cb-ps-item-text[b-d5mvj149ux] {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cb-ps-item-line[b-d5mvj149ux] {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
}

.cb-ps-item-actions[b-d5mvj149ux] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
/* /Components/Pages/CoachBridge/CoachReferralConnectPrompt.razor.rz.scp.css */
/* #8416 - the coach-referral connect prompt. The Card owns its own chrome;
   this only spaces the prompt inside the onboarding pages and lays out the body. */

.crp[b-f7z63baa6k] {
    width: 100%;
    max-width: 640px;
    margin: 0 auto 1.25rem;
    box-sizing: border-box;
}

.crp-body[b-f7z63baa6k] {
    margin: 0 0 1rem;
    line-height: 1.6;
}

.crp-actions[b-f7z63baa6k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
/* /Components/Pages/CoachBridge/CoachRemovedContentNotice.razor.rz.scp.css */
/* #8104 CB-TRUST - the coach's "removed by ASCENDCHESS" notice. Plain and calm: a
   statement of what happened, not a warning banner. */

.crn[b-x0n6f941h1] {
    margin-bottom: 1.5rem;
}

.crn-text[b-x0n6f941h1] {
    margin: 0 0 0.75rem;
    font-style: normal;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.crn-list[b-x0n6f941h1] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.crn-row[b-x0n6f941h1] {
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.crn-what[b-x0n6f941h1] {
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.crn-quote[b-x0n6f941h1] {
    margin: 0.5rem 0 0;
    font-style: normal;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Pages/CoachBridge/CoachSlotPicker.razor.rz.scp.css */
/* #8714 slice 8714-4 - the student's open-times picker, inline in a listing card or on /coach-lessons.
   Brand tokens only. Solid backgrounds: text on a gradient is undecidable for axe. Every flex child
   may shrink (min-width: 0) and long words wrap, so nothing scrolls sideways at 344px. */
.csp[b-dma6bnlxq4] {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    background-color: rgb(10, 22, 38);
}

.csp-text[b-dma6bnlxq4],
.csp-zone[b-dma6bnlxq4],
.csp-line[b-dma6bnlxq4],
.csp-status[b-dma6bnlxq4],
.csp-error[b-dma6bnlxq4],
.csp-day-label[b-dma6bnlxq4],
.csp-step[b-dma6bnlxq4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
    margin: 0;
}

.csp-step[b-dma6bnlxq4],
.csp-day-label[b-dma6bnlxq4] {
    font-family: var(--ascend-font-primary);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.csp-line-strong[b-dma6bnlxq4] {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.csp-zone[b-dma6bnlxq4] {
    color: rgba(255, 255, 255, 0.8);
}

.csp-status[b-dma6bnlxq4] {
    padding: 0.625rem 1rem;
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    background-color: rgb(14, 34, 52);
}

/* Review round 6: every step's focus target (a step heading, the review's start line, a first-load fault)
   keeps clear of the FIXED mobile header when focus scrolls it into view (the #8708 convention), and the
   times heading keeps room for "That time was just taken." above it, so a phone shows the line where focus
   lands. 6rem holds the line at three wrapped lines plus the gap. */
.csp [tabindex="-1"][b-dma6bnlxq4] {
    scroll-margin-top: calc(var(--app-content-top, 0px) + var(--space-md, 1rem));
}

.csp-taken + .csp-step[b-dma6bnlxq4] {
    scroll-margin-top: calc(var(--app-content-top, 0px) + var(--space-md, 1rem) + 6rem);
}

.csp-error[b-dma6bnlxq4] {
    padding: 0.625rem 1rem;
    border-left: 3px solid #ef4444;
    border-radius: 6px;
    background-color: rgb(28, 24, 38);
    color: rgba(255, 255, 255, 0.9);
}

.csp-group[b-dma6bnlxq4] {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.csp-group > legend[b-dma6bnlxq4] {
    padding: 0;
    margin-bottom: 0.5rem;
}

.csp-times[b-dma6bnlxq4],
.csp-review[b-dma6bnlxq4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.csp-day[b-dma6bnlxq4] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

/* Time and lesson choices: an even grid, so a wrapped line is the same width as the one above it
   (no uneven stack, #8844). Rows of actions use the shared .action-row. */
.csp-choices[b-dma6bnlxq4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
    gap: 0.5rem;
    min-width: 0;
}

.csp-choices-wide[b-dma6bnlxq4] {
    grid-template-columns: 1fr;
}

/* #9302: a time is ONE line, so a row never mixes one- and two-line buttons. The #9192 pill padding
   (up to 1.625rem a side on .btn-sm) left about 3rem of a 6.25rem column for the label, and the
   proportional digits wrapped "10:00 AM" but not "11:30 AM". A time column now fits its widest label
   plus that padding and the outline's 2px border (CoachSlotPickerTimeGridCssTests), so no label in a row
   of several wraps. min(100%, ...) keeps a column inside its grid: a grid too narrow for two columns
   (a Card-hosted picker on a phone, a raised text size) shows one time per row, and a label wraps only
   when even that one column is narrower than it, alone on its row and never clipped by the Button's
   overflow: hidden. Labels keep the wrapping rule below on purpose: nowrap would clip there instead.
   Lesson choices are sentences and use the shared column. */
.csp-choices-times[b-dma6bnlxq4] {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
}

/* A clock-change date's times carry their offset, "1:00 AM (UTC-6)", up to "12:30 AM (UTC+13:45)",
   so the server marks the date (ClockChange) and it takes a column sized for those. Same rules. */
.csp-choices-times-offset[b-dma6bnlxq4] {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
}

.csp-choices[b-dma6bnlxq4]  .ascend-btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* #9139 review round 3: the coach's free first lesson, marked inside its choice: a neutral tag in
   the button's own color (so it keeps the button's contrast on hover), no celebration. */
.csp-lesson-intro[b-dma6bnlxq4] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.8rem;
    color: inherit;
    white-space: nowrap;
}

/* A step is loading (review round 4): its buttons keep focus, so they carry aria-disabled, never
   disabled, and this is what shows the tap was taken. The shared Button styles only .disabled. */
.csp[b-dma6bnlxq4]  .ascend-btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: progress;
}

.csp-busy[b-dma6bnlxq4] {
    color: rgba(255, 255, 255, 0.8);
}

/* #8715 slice 8715-1 - the request step: the lesson terms, the "I have read" box and the send button.
   The box sits inside its label, which is at least the touch target tall, so the whole line is the tap. */
.csp-terms[b-dma6bnlxq4] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.625rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background-color: rgb(14, 28, 44);
}

.csp-terms-list[b-dma6bnlxq4] {
    margin: 0;
    padding-left: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.csp-terms-list li[b-dma6bnlxq4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.csp-check[b-dma6bnlxq4] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--touch-target, 44px);
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.csp-check input[b-dma6bnlxq4] {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--ascend-accent);
}

/* #8715 slice 8715-5 - a first lesson from a card also asks to work with the coach: the #8106 lines and scope
   rows, in the picker's own frame. The box sits inside its label, so the whole row is the tap. */
.csp-first[b-dma6bnlxq4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.csp-scopes[b-dma6bnlxq4] {
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin: 0;
    min-width: 0;
}

.csp-scope-legend[b-dma6bnlxq4] {
    padding: 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.csp-scope-row[b-dma6bnlxq4] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.5rem 0;
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    cursor: pointer;
}

.csp-scope-row input[type="checkbox"][b-dma6bnlxq4] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--ascend-accent);
    grid-row: 1 / span 2;
}

.csp-scope-label[b-dma6bnlxq4] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    overflow-wrap: anywhere;
}

.csp-scope-hint[b-dma6bnlxq4] {
    grid-column: 2;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

@media (hover: none) and (pointer: coarse) {
    .csp-scope-row[b-dma6bnlxq4] {
        min-height: var(--touch-target, 44px);
    }
}
/* /Components/Pages/CoachBridge/CoachStudentPanel.razor.rz.scp.css */
/* Coach Bridge - the coach's view of one student (PBI #5398 Phase 1A.9).
   #8417: moved here from CoachBridgeStudentView.razor.css with the markup, so
   the real page and the public sample (/for-coaches/sample) share one
   stylesheet. Scoped CSS follows the component that renders the element. */

.cb-stu-grid[b-moiko4jli9] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cb-help[b-moiko4jli9] {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.cb-stu-empty[b-moiko4jli9] {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* ── Chess profile stats ─────────────────────────────────────────────── */

.cb-stu-profile[b-moiko4jli9] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

/* ── Game / insight / list common ────────────────────────────────────── */

.cb-stu-list[b-moiko4jli9] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cb-stu-game[b-moiko4jli9] {
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cb-stu-game-line[b-moiko4jli9] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.cb-stu-game-result[b-moiko4jli9] {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8125rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.cb-stu-game-result.win[b-moiko4jli9] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.cb-stu-game-result.loss[b-moiko4jli9] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.cb-stu-game-result.draw[b-moiko4jli9] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.cb-stu-game-opponent[b-moiko4jli9] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.cb-stu-game-color[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
}

.cb-stu-game-meta[b-moiko4jli9] {
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.cb-stu-eco[b-moiko4jli9] {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    background: rgba(184, 133, 54, 0.15);
    color: var(--ascend-secondary);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
}

/* #8073 - was rgba(255, 255, 255, 0.45): 4.42:1 on the card (axe
   color-contrast, serious), on every row at every width. The phone cards
   brought it on screen at 390, so it is fixed here rather than carried. */
.cb-stu-date[b-moiko4jli9] {
    color: var(--ascend-text-muted);
    font-size: 0.8125rem;
}

/* ── Insight rows ────────────────────────────────────────────────────── */

.cb-stu-insight[b-moiko4jli9] {
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cb-stu-insight-head[b-moiko4jli9] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.625rem;
}

.cb-stu-insight-count[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

.cb-stu-insight-detail[b-moiko4jli9] {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-size: 0.9375rem;
}

/* Phase + trend + severity signal row (#1181). */
.cb-stu-insight-meta[b-moiko4jli9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin-top: 0.4rem;
}

.cb-stu-insight-chip[b-moiko4jli9] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cb-stu-insight-phase[b-moiko4jli9] {
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: var(--ascend-accent);
}

.cb-stu-insight-trend-improving[b-moiko4jli9] {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.cb-stu-insight-trend-worsening[b-moiko4jli9] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.cb-stu-insight-trend-stagnant[b-moiko4jli9],
.cb-stu-insight-trend-cannot-tell[b-moiko4jli9] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.65);
}

.cb-stu-insight-severity[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-family: monospace;
}

.cb-stu-insight-trend-detail[b-moiko4jli9] {
    margin: 0.3rem 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8125rem;
    font-family: monospace;
}

/* ── Plan ────────────────────────────────────────────────────────────── */

.cb-stu-plan-title[b-moiko4jli9] {
    margin: 0 0 0.625rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.0625rem;
}

.cb-stu-plan-steps[b-moiko4jli9] {
    margin: 0;
    padding-left: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

/* Collapsible "current plan" (coach view of the student's real plan). */
.cb-stu-plan-collapse[b-moiko4jli9] {
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.cb-stu-plan-collapse-summary[b-moiko4jli9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9375rem;
    font-weight: 600;
}

.cb-stu-plan-collapse-summary[b-moiko4jli9]::-webkit-details-marker {
    display: none;
}

.cb-stu-plan-chevron[b-moiko4jli9] {
    transition: transform 0.2s ease;
    color: var(--ascend-accent);
    width: 14px;
    height: 14px;
}

.cb-stu-plan-collapse[open] .cb-stu-plan-chevron[b-moiko4jli9] {
    transform: rotate(180deg);
}

.cb-stu-plan-collapse-body[b-moiko4jli9] {
    padding: 0 1rem 0.875rem;
}

/* ── #8531 Slice A: the student's actual plan (Coach v2 canary) ─────── */

.cb-stu-planview[b-moiko4jli9] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

.cb-stu-planview .cb-stu-plan-title[b-moiko4jli9] {
    margin: 0;
}

.cb-stu-planview-week[b-moiko4jli9] {
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cb-stu-planview-state[b-moiko4jli9] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.cb-stu-planview-days[b-moiko4jli9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cb-stu-planview-day[b-moiko4jli9] {
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.625rem 0.875rem;
    min-width: 0;
}

.cb-stu-planview-day-today[b-moiko4jli9] {
    border-color: rgba(49, 221, 227, 0.5);
}

.cb-stu-planview-day-head[b-moiko4jli9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    font-weight: 600;
}

.cb-stu-planview-today[b-moiko4jli9] {
    padding: 0.0625rem 0.5rem;
    border: 1px solid rgba(49, 221, 227, 0.5);
    border-radius: 999px;
    color: var(--ascend-accent-light);
    font-size: 0.75rem;
    font-weight: 600;
}

.cb-stu-planview-acts[b-moiko4jli9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cb-stu-planview-act[b-moiko4jli9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.cb-stu-planview-act-main[b-moiko4jli9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cb-stu-planview-act-title[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.9);
    overflow-wrap: anywhere;
}

.cb-stu-planview-act-meta[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
}

/* Status is a stated fact, not a reward: text first, a quiet tint second. */
.cb-stu-planview-status[b-moiko4jli9] {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.cb-stu-planview-status-done[b-moiko4jli9] {
    color: var(--ascend-accent-light);
}

.cb-stu-planview-status-progress[b-moiko4jli9] {
    color: var(--ascend-secondary-light);
}

.cb-stu-planview-status-skipped[b-moiko4jli9] {
    font-style: italic;
}

.cb-stu-planview-practice[b-moiko4jli9] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.75rem;
}

.cb-stu-planview-subhead[b-moiko4jli9] {
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    font-weight: 600;
}

.cb-stu-planview-note[b-moiko4jli9] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
}

/* ── Repertoire summary list ────────────────────────────────────────── */

.cb-stu-rep-list[b-moiko4jli9] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cb-stu-rep-item[b-moiko4jli9] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.cb-stu-rep-item.open[b-moiko4jli9] {
    border-color: rgba(49, 221, 227, 0.25);
}

/* Clickable book header — carries the original 3-column grid layout, plus a
   trailing chevron that rotates when the book is expanded. */
.cb-stu-rep-summary[b-moiko4jli9] {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.cb-stu-rep-summary:hover[b-moiko4jli9] {
    background: rgba(255, 255, 255, 0.04);
}

.cb-stu-rep-chevron[b-moiko4jli9] {
    transition: transform 0.2s ease;
    color: var(--ascend-accent);
    width: 14px;
    height: 14px;
}

.cb-stu-rep-item.open .cb-stu-rep-chevron[b-moiko4jli9] {
    transform: rotate(180deg);
}

.cb-stu-rep-body[b-moiko4jli9] {
    padding: 0.25rem 0.875rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cb-stu-rep-loading[b-moiko4jli9] {
    margin: 0.625rem 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    font-style: italic;
}

/* #8417 - 0.45 measured 4.39:1 on the book's own surface (an exempted #7291
   failure); now that the panel is on a public page it clears AA instead. */
.cb-stu-rep-cap-note[b-moiko4jli9] {
    margin: 0.5rem 0 0.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
}

.cb-stu-rep-line-list[b-moiko4jli9] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cb-stu-rep-line[b-moiko4jli9] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    padding: 0.4rem 0.625rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.cb-stu-rep-line-moves[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.9);
    font-family: monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* #8417 - the 90% brand gold measured 4.18:1 (an exempted #7291 failure); the
   lighter gold token clears AA on the same surface. */
.cb-stu-rep-line-note[b-moiko4jli9] {
    color: var(--ascend-secondary-light);
    font-size: 0.8125rem;
    font-style: italic;
}

.cb-stu-rep-name[b-moiko4jli9] {
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
}

.cb-stu-rep-color[b-moiko4jli9] {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: monospace;
}

.cb-stu-rep-color-white[b-moiko4jli9] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.cb-stu-rep-color-black[b-moiko4jli9] {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.cb-stu-rep-color-both[b-moiko4jli9] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(49, 221, 227, 0.35);
    color: var(--ascend-accent);
}

.cb-stu-rep-lines[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    font-family: monospace;
}

/* ── Recent reflections (journal entry excerpts) ────────────────────── */

.cb-stu-refl-list[b-moiko4jli9] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cb-stu-refl-item[b-moiko4jli9] {
    padding: 0.75rem 0.875rem;
    background: rgba(49, 221, 227, 0.04);
    border-left: 3px solid rgba(49, 221, 227, 0.4);
    border-radius: 6px;
}

.cb-stu-refl-head[b-moiko4jli9] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}

.cb-stu-refl-title[b-moiko4jli9] {
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
}

.cb-stu-refl-date[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
    font-family: monospace;
    white-space: nowrap;
}

.cb-stu-refl-excerpt[b-moiko4jli9] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ── Game analysis chips on Recent Games (accuracy + blunders) ──────── */

.cb-stu-game-analysis[b-moiko4jli9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    font-family: monospace;
}

/* Analysis cell: space the acc / blunder / mistake chips so they don't jam
   together ("88% acc1 blunder5 mistakes"). Wraps on narrow columns. */
.cb-stu-analysis-cell[b-moiko4jli9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
}

.cb-stu-acc[b-moiko4jli9] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}

.cb-stu-acc-strong[b-moiko4jli9] { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.cb-stu-acc-solid[b-moiko4jli9]  { background: rgba(49, 221, 227, 0.15); color: var(--ascend-accent); }
.cb-stu-acc-shaky[b-moiko4jli9]  { background: rgba(184, 133, 54, 0.18); color: var(--ascend-secondary-light); }
.cb-stu-acc-weak[b-moiko4jli9]   { background: rgba(239, 68, 68, 0.15);  color: var(--ascend-text-light); }

.cb-stu-blunders[b-moiko4jli9] {
    color: #ef4444;
    font-weight: 600;
}

.cb-stu-mistakes[b-moiko4jli9] {
    color: var(--ascend-secondary);
}

.cb-stu-unanalyzed[b-moiko4jli9] {
    /* #9107 - 40% white failed axe here. --ascend-text-muted (#94a3b8) is the
       app's opaque muted-text token, used by 80 other scoped stylesheets, and
       it carries no contrast exemption anywhere. No exemption entry added. */
    color: var(--ascend-text-muted);
    font-style: italic;
}

/* #5867 - in-app analyze link on student games */
.game-analyze-link[b-moiko4jli9] {
    color: var(--ascend-accent);
    font-size: 0.8rem;
    margin-right: 0.5rem;
    text-decoration: none;
}

.game-analyze-link:hover[b-moiko4jli9] {
    text-decoration: underline;
}

/* ── Rating breakdown (#6235) ───────────────────────────────────────── */
/* The headline is a <StatItem Variant="Bare" Size="Large"> (#6347); only its
   spacing stays here. CssClass lands on StatItem's own root, so ::deep. */
[b-moiko4jli9] .cb-stu-rating-headline {
    margin-bottom: 1rem;
}
.cb-stu-rating-groups[b-moiko4jli9] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.cb-stu-rating-group[b-moiko4jli9] {
    flex: 1 1 180px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.75rem 0.875rem;
    background: rgba(0, 0, 0, 0.2);
}
.cb-stu-rating-group-label[b-moiko4jli9] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-secondary);
    margin-bottom: 0.5rem;
}
.cb-stu-rating-cells[b-moiko4jli9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
/* .cb-stu-rating-cell/-value/-label -> <StatItem Variant="Bare" Size="Small"> (#6347). */

/* ── Games grid + filters (#6235) ───────────────────────────────────── */
.cb-stu-games-filters[b-moiko4jli9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.cb-stu-filter-select[b-moiko4jli9] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
}
.cb-stu-filter-select:focus[b-moiko4jli9] {
    outline: none;
    border-color: var(--ascend-accent);
}
.cb-stu-games-grid[b-moiko4jli9] {
    overflow-x: auto;
}
.cb-stu-muted[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.4);
}

/* QuickGrid renders its own <table>; reach into it with ::deep. */
.cb-stu-games-grid[b-moiko4jli9]  table.cb-games-quickgrid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.cb-stu-games-grid[b-moiko4jli9]  table.cb-games-quickgrid th {
    text-align: left;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cb-stu-games-grid[b-moiko4jli9]  table.cb-games-quickgrid td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    vertical-align: middle;
}
.cb-stu-games-grid[b-moiko4jli9]  table.cb-games-quickgrid tbody tr:hover {
    background: rgba(49, 221, 227, 0.05);
}

/* ---- #8073 (CB-FIX-PHONE) B3: in a narrow column the games grid STOPS BEING A TABLE

   Measured at 390 with touch emulation before: 801px of columns in the 322px
   overflow-x scroller above, and every "review" link - the coach's way into a
   game - at x=781..818. The roster's twin (CoachBridgeDashboard.razor.css) and
   the #8054 / #8259 pattern: one render, re-laid out as cards from a container
   query on the grid's own column. The table measured 801px at its narrowest
   at 390 and 830px at 1440 (opening names widen it), so it flips below 900px
   of column and the table keeps its sideways scroller as the fallback above
   that. At 1440 the column is 1022px. A card reads: result and opponent, the
   opening, source / time / played (keyed), the analysis chips, then the reply
   badge and the review link on their own line. */
.cb-stu-games-shell[b-moiko4jli9] {
    container: cb-stu-games / inline-size;
}

/* The per-cell key is silent while the column headers are doing that job. */
.cb-stu-game-cards .cell-label[b-moiko4jli9] {
    display: none;
}

/* The coach's way into a game measured 38x20 as a bare word. On a touch
   screen it gets the touch floor at every width - card or table - by
   pointer media, not width (app.css, #6681). */
@media (hover: none) and (pointer: coarse) {
    .cb-stu-games-grid .game-analyze-link[b-moiko4jli9] {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target);
        padding: 0 0.75rem;
    }
}

@container cb-stu-games (max-width: 900px) {
    /* Nothing left to scroll sideways (load-bearing for the E2E guard too). */
    .cb-stu-games-grid.cb-stu-game-cards[b-moiko4jli9] {
        overflow-x: visible;
    }

    .cb-stu-games-grid.cb-stu-game-cards[b-moiko4jli9]  table.cb-games-quickgrid {
        display: block;
        width: 100%;
        min-width: 0;
    }

    /* display: none, not an sr-only clip (the #8054 reasoning). */
    .cb-stu-games-grid.cb-stu-game-cards[b-moiko4jli9]  thead {
        display: none;
    }

    .cb-stu-games-grid.cb-stu-game-cards[b-moiko4jli9]  tbody {
        display: block;
    }

    /* Only game rows become cards (RowClass = cb-stu-game-row); the pagination
       filler rows stay hidden by the global #7782 rule. */
    .cb-stu-games-grid.cb-stu-game-cards[b-moiko4jli9]  tbody tr.cb-stu-game-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 1rem;
        margin-bottom: 0.75rem;
        padding: 0.75rem 0.85rem;
        border: 1px solid rgba(49, 221, 227, 0.2);
        border-radius: 12px;
    }

    /* No tint on the card: EcoBadge's code chip is translucent, and a 3% white
       card under it measured the gold code at 4.25:1 (axe color-contrast). On
       the plain card it is the same chip the table shows. */
    .cb-stu-games-grid.cb-stu-game-cards[b-moiko4jli9]  tbody tr.cb-stu-game-row:hover {
        background: transparent;
    }

    /* Out-specifies the table's own cell rule above (padding, rule lines), which
       names table.cb-games-quickgrid. */
    .cb-stu-games-grid.cb-stu-game-cards[b-moiko4jli9]  table.cb-games-quickgrid td {
        display: block;
        min-width: 0;
        padding: 0;
        border-bottom: none;
    }

    /* Result and opponent share the first line; the opening, the chips and
       the action line each take a line of their own. */
    .cb-stu-games-grid.cb-stu-game-cards[b-moiko4jli9]  table.cb-games-quickgrid td.cb-col-opponent {
        flex: 1 1 auto;
    }

    .cb-stu-games-grid.cb-stu-game-cards[b-moiko4jli9]  table.cb-games-quickgrid td.cb-col-opening,
    .cb-stu-games-grid.cb-stu-game-cards[b-moiko4jli9]  table.cb-games-quickgrid td.cb-col-analysis {
        flex: 1 1 100%;
    }

    .cb-stu-games-grid.cb-stu-game-cards[b-moiko4jli9]  table.cb-games-quickgrid td.cb-col-review {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cb-stu-games-grid.cb-stu-game-cards .cb-stu-analysis-cell[b-moiko4jli9] {
        flex-wrap: wrap;
    }


    .cb-stu-games-grid.cb-stu-game-cards .cell-label[b-moiko4jli9] {
        display: inline;
        margin-right: 0.35rem;
        font-family: var(--ascend-font-primary);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ascend-text-muted);
    }
}

/* -- Shared studies (#6594): per-student study-share history ------------- */
.cb-stu-studies-grid[b-moiko4jli9] {
    overflow-x: auto;
}
.cb-stu-studies-grid[b-moiko4jli9]  table.cb-studies-quickgrid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.cb-stu-studies-grid[b-moiko4jli9]  table.cb-studies-quickgrid th {
    text-align: left;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cb-stu-studies-grid[b-moiko4jli9]  table.cb-studies-quickgrid td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    vertical-align: middle;
}
.cb-stu-studies-grid[b-moiko4jli9]  table.cb-studies-quickgrid tbody tr:hover {
    background: rgba(49, 221, 227, 0.05);
}
.cb-stu-share-title[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.92);
}
.cb-stu-share-status[b-moiko4jli9] {
    font-size: 0.8125rem;
    white-space: nowrap;
}
.cb-stu-share-status-accepted[b-moiko4jli9] {
    color: var(--ascend-accent-light);
}
.cb-stu-share-status-pending[b-moiko4jli9] {
    color: var(--ascend-secondary-light);
}
.cb-stu-share-status-closed[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.45);
}
.cb-stu-share-pct[b-moiko4jli9] {
    color: var(--ascend-accent);
    font-weight: 600;
    margin-right: 0.4rem;
}
.cb-stu-share-chapters[b-moiko4jli9] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    white-space: nowrap;
}
.cb-stu-studio-link[b-moiko4jli9] {
    color: var(--ascend-accent);
}

/* #6934 - replies waiting on the coach, on a game row or the general thread.
   Same cyan "action is yours" treatment as the dashboard badge so the two read
   as one signal across the two pages. */
.cb-stu-replies[b-moiko4jli9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-right: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(49, 221, 227, 0.15);
    color: var(--ascend-accent);
    font-size: 0.78rem;
    font-weight: 700;
}
/* /Components/Pages/CoachBridge/CoachStudentRepertoireShareCard.razor.rz.scp.css */
/* PBI #8595 - the coach's "share a repertoire with this student" card. */
.cb-rs-help[b-omji1296zq],
.cb-rs-empty[b-omji1296zq] {
    margin: 0 0 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.cb-rs-link[b-omji1296zq] {
    color: var(--ascend-secondary);
    text-decoration: underline;
}

.cb-rs-list[b-omji1296zq] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cb-rs-row[b-omji1296zq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cb-rs-row:last-child[b-omji1296zq] {
    border-bottom: 0;
}

.cb-rs-book[b-omji1296zq] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 12rem;
}

.cb-rs-name[b-omji1296zq] {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cb-rs-meta[b-omji1296zq],
.cb-rs-state[b-omji1296zq] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
}

.cb-rs-result[b-omji1296zq] {
    margin: 0.75rem 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.cb-rs-result-error[b-omji1296zq] {
    color: var(--ascend-error);
}
/* /Components/Pages/CoachBridge/CoachStudio.razor.rz.scp.css */
/* Coach Studies - Coach Studio surface (#6474). Grid styling mirrors the
   sibling coach dashboard's QuickGrid treatment, tokenized per the house
   rule (var(--token), never raw hex). */

.studio-grid[b-da61tos8pq] {
    overflow-x: auto;
}

.studio-quickgrid[b-da61tos8pq]  table {
    width: 100%;
    border-collapse: collapse;
}

.studio-quickgrid[b-da61tos8pq]  thead th {
    text-align: left;
    padding: 0.75rem 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-primary);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(49, 221, 227, 0.15);
}

.studio-quickgrid[b-da61tos8pq]  tbody td {
    padding: 0.75rem 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.studio-quickgrid[b-da61tos8pq]  tbody tr:hover td {
    background: rgba(49, 221, 227, 0.04);
}

.studio-title[b-da61tos8pq] {
    color: var(--ascend-text-light);
    font-weight: 600;
}

.studio-description[b-da61tos8pq] {
    margin-top: 0.125rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
    max-width: 32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-muted[b-da61tos8pq] {
    color: rgba(255, 255, 255, 0.55);
}

/* -- Student roster (#8531): a way from Studio to each student's plan --- */

.studio-roster-wrap[b-da61tos8pq] {
    margin-top: 1.5rem;
}

.studio-roster[b-da61tos8pq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.studio-roster-row[b-da61tos8pq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.studio-roster-row:last-child[b-da61tos8pq] {
    border-bottom: none;
}

.studio-roster-name[b-da61tos8pq] {
    min-width: 0;
    color: rgba(255, 255, 255, 0.9);
    overflow-wrap: anywhere;
}

/* -- Share-status column (#6476) --------------------------------------- */

.studio-share-summary[b-da61tos8pq] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    white-space: nowrap;
}

.studio-share-progress[b-da61tos8pq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}

.studio-share-progress-name[b-da61tos8pq] {
    color: rgba(255, 255, 255, 0.6);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-share-progress-pct[b-da61tos8pq] {
    color: var(--ascend-accent);
    font-weight: 600;
}

/* ── Create-study modal form ─────────────────────────────────────────── */

[b-da61tos8pq] .form-group {
    margin-bottom: 1rem;
}

[b-da61tos8pq] .form-label {
    display: block;
    margin-bottom: 0.375rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
}

[b-da61tos8pq] .label-optional {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8125rem;
}

/* #7266: fill, border, radius, colour, font, padding and the focus ring
   duplicated the global .form-input in app.css (#7258); the placeholder had
   DRIFTED DOWN to 0.4 white against the global 0.5, so the global value wins.
   ::deep is dropped with them - every control on this page is a plain
   <input>/<select>/<textarea> written in CoachStudio.razor, so it carries the
   component's scope attribute and a plain selector reaches it. */
.form-input[b-da61tos8pq] {
    width: 100%;
}

.form-textarea[b-da61tos8pq] {
    min-height: 4.5rem;
    resize: vertical;
}

[b-da61tos8pq] .studio-pgn-textarea {
    min-height: 7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

[b-da61tos8pq] .studio-create-error {
    margin-top: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--ascend-text-light);
    font-size: 0.875rem;
}

/* #7754 - a PARTIAL import: the study exists but some chapters were refused.
   Its own amber treatment because neither of the two states the modal had is
   true - it is not the clean success the old message claimed, and it is not
   the outright failure .studio-create-error means. Named studio-create-partial
   rather than a shared .warning so no scoped file is repainting a class
   app.css owns (#7266 ratchet). */
[b-da61tos8pq] .studio-create-partial {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.4);
    color: var(--ascend-text-light);
    font-size: 0.875rem;
    line-height: 1.45;
}

[b-da61tos8pq] .studio-create-partial i {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: #eab308;
}

/* ── Row actions + Share modal (#6475) ───────────────────────────────── */

.studio-row-actions[b-da61tos8pq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

[b-da61tos8pq] .studio-share-optin-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    cursor: pointer;
}

[b-da61tos8pq] .studio-share-optin-label input[type="checkbox"] {
    accent-color: var(--ascend-accent);
    width: 1rem;
    height: 1rem;
}

[b-da61tos8pq] .studio-share-optin-hint {
    margin: 0.375rem 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    line-height: 1.5;
}

[b-da61tos8pq] .studio-import-hint {
    margin: 0.375rem 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* #6591 - "Choose from my Lichess studies" picker states */
[b-da61tos8pq] .studio-my-studies-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

[b-da61tos8pq] .studio-connect-prompt a,
[b-da61tos8pq] .studio-import-hint a {
    color: var(--ascend-accent);
}

[b-da61tos8pq] .studio-share-warning {
    margin-top: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.4);
    color: var(--ascend-secondary-light);
    font-size: 0.875rem;
}

[b-da61tos8pq] .studio-share-notice {
    margin-top: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: var(--ascend-accent-light);
    font-size: 0.875rem;
}

[b-da61tos8pq] .studio-share-history {
    margin-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.875rem;
}

[b-da61tos8pq] .studio-share-history-title {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-primary);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

[b-da61tos8pq] .studio-share-history-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0;
}

[b-da61tos8pq] .studio-share-history-name {
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-da61tos8pq] .studio-share-history-status {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
}

/* #6594 - active-shares list: the name links to the student's page (where
   full share history lives) and the hint points past-history there too. */
[b-da61tos8pq] a.studio-share-history-name {
    text-decoration: none;
}
[b-da61tos8pq] a.studio-share-history-name:hover {
    color: var(--ascend-accent);
    text-decoration: underline;
}
[b-da61tos8pq] .studio-share-history-hint {
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8125rem;
}

/* #7194 - PGN import shape. The mode choice is a real decision (a chapter is a
   unit of study; a section heading is not), so it reads as a short list of
   options rather than a throwaway toggle. */
.studio-import-mode[b-da61tos8pq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.studio-import-mode-option[b-da61tos8pq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    /* NOT --ascend-text-primary: that token is #0f172a, the same value as
       --ascend-bg-dark, so on this dark modal the label renders invisible -
       exactly what the first browser walk of #7194 showed (two bare radio
       circles with no text beside them). app.css warns about the pairing. */
    color: var(--ascend-text-light);
    cursor: pointer;
}

.studio-import-preview[b-da61tos8pq] {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-secondary);
}

.studio-import-preview li[b-da61tos8pq] {
    margin-bottom: 0.15rem;
}

/* #8530 - "From my repertoire": its own action sits under its own controls,
   so it reads as a separate way to create, not a fourth footer button. */
.studio-repertoire-action[b-da61tos8pq] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.625rem;
}

/* Bug #8649 - the studies grid on a phone. At 344 it held 772px of columns in a 260px
   scroller and the Shares column was cut at the card edge. The markup joins the shared
   .responsive-table.grid-cards utility (app.css), which makes each row a card of
   "label: value" lines; this block is only what is particular to this grid. Every rule
   is inside the phone band, so 1440 is today's table.
   - .studio-grid scrolls sideways at every width (above). Here nothing is left to scroll.
   - The study cell leads the card: its label, then the name and description on their own
     line, left-aligned, instead of squeezed to the right of the label.
   - The description wraps rather than clipping to an ellipsis: a tooltip does not exist on
     a touch screen, so a clipped description would be lost to exactly this reader.
   - The share rows keep to the right edge with the rest of the card's values. */
@media (max-width: 768px) {
    .studio-grid.grid-cards[b-da61tos8pq] {
        overflow-x: visible;
    }

    .studio-grid.grid-cards[b-da61tos8pq]  td.studio-col-study {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        text-align: left;
    }

    .studio-grid.grid-cards .studio-study-cell[b-da61tos8pq] {
        width: 100%;
        min-width: 0;
    }

    .studio-grid.grid-cards .studio-description[b-da61tos8pq] {
        max-width: none;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .studio-grid.grid-cards .studio-share-cell[b-da61tos8pq] {
        min-width: 0;
    }

    /* Up to four buckets ("1 accepted, 1 pending, 1 declined, 1 revoked") is wider than a
       344 card, and the base rule keeps the summary on one line. */
    .studio-grid.grid-cards .studio-share-summary[b-da61tos8pq] {
        white-space: normal;
    }

    .studio-grid.grid-cards .studio-share-progress[b-da61tos8pq] {
        justify-content: flex-end;
    }
}
/* /Components/Pages/CoachBridge/CoachStudioHomeworkForm.razor.rz.scp.css */
/* #6018 slice 3 - the Coach Studio homework form (a chapter, or positions from one).
   The same quiet field styling as the Homework card it sits in. Plain facts, no
   celebration styling (Recognition Follows Improvement). */

.chs-form[b-vwdpb8frd5] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

/* Under the game and pattern forms of the Homework card. */
.chs-divided[b-vwdpb8frd5] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chs-help[b-vwdpb8frd5] {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.7);
}

.chs-label[b-vwdpb8frd5] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.35rem;
}

.chs-select[b-vwdpb8frd5],
.chs-minutes[b-vwdpb8frd5],
.chs-note[b-vwdpb8frd5] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.9375rem;
}

/* Room for the dropdown arrow the global select rule draws (SelectChevronRatchetTests). */
.chs-select[b-vwdpb8frd5] {
    padding-right: 2.25rem;
}

/* The open list of a dark select: dark surface, light text, on every platform. */
.chs-select option[b-vwdpb8frd5] {
    background-color: #0a1628;
    color: #ffffff;
}

.chs-minutes[b-vwdpb8frd5] {
    max-width: 8rem;
}

.chs-note[b-vwdpb8frd5] {
    resize: vertical;
}

.chs-select:focus[b-vwdpb8frd5],
.chs-minutes:focus[b-vwdpb8frd5],
.chs-note:focus[b-vwdpb8frd5] {
    outline: none;
    border-color: var(--ascend-accent);
}

.chs-line[b-vwdpb8frd5] {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.chs-game[b-vwdpb8frd5] {
    margin-top: 0.5rem;
    min-width: 0;
}

.chs-game-label[b-vwdpb8frd5] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

/* Move chips wrap, so a long game never makes the card scroll sideways. */
.chs-moves[b-vwdpb8frd5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.chs-move[b-vwdpb8frd5] {
    min-height: 2.75rem;
    padding: 0.35rem 0.65rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.chs-move:hover[b-vwdpb8frd5] {
    border-color: rgba(49, 221, 227, 0.5);
}

.chs-move:focus-visible[b-vwdpb8frd5] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.chs-move.is-picked[b-vwdpb8frd5] {
    background: rgba(49, 221, 227, 0.16);
    border-color: var(--ascend-accent);
    color: #ffffff;
}

.chs-preview[b-vwdpb8frd5] {
    margin-top: 0.5rem;
}

.chs-board[b-vwdpb8frd5] {
    width: 100%;
    max-width: 320px;
}

.chs-foot[b-vwdpb8frd5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.chs-count[b-vwdpb8frd5] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    font-family: monospace;
}

.chs-toast[b-vwdpb8frd5] {
    margin: 0.75rem 0 0;
    padding: 0.625rem 1rem;
    background: rgba(49, 221, 227, 0.08);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}
/* /Components/Pages/CoachBridge/CoachStudioTabs.razor.rz.scp.css */
/* #9104 - the Coach Studio parts row. One line of four at desktop widths; a two-by-two grid
   below 520px, where four labels do not fit beside each other at 344 (312px of content).
   Every link is at least 44px tall for touch. No horizontal scroll at any width. */
.cst-tabs[b-0rzyjirozz] {
    margin: 0 0 var(--space-lg);
}

.cst-list[b-0rzyjirozz] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, max-content);
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.cst-item[b-0rzyjirozz] {
    min-width: 0;
}

.cst-tab[b-0rzyjirozz] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    background: var(--ascend-bg-card);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.cst-tab:hover[b-0rzyjirozz],
.cst-tab:focus-visible[b-0rzyjirozz] {
    border-color: rgba(49, 221, 227, 0.5);
}

.cst-tab:focus-visible[b-0rzyjirozz] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

/* The open part: a cyan edge and a bold label, never color alone. */
.cst-current[b-0rzyjirozz] {
    border-color: var(--ascend-accent);
    box-shadow: inset 0 -3px 0 var(--ascend-accent);
    font-weight: 700;
}

/* #9236 - the lesson terms notice under the row: a quiet factual note, the PastDueRecoveryBanner
   shape (amber edge, not a red alarm), tokens only. Its one action is a 44px-tall link. */
.cst-terms[b-0rzyjirozz] {
    margin: 0 0 var(--space-lg);
    padding: 1rem 1.25rem 1.1rem;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 3px solid var(--ascend-warning);
    border-radius: var(--radius-md);
    background: rgba(245, 158, 11, 0.08);
    min-width: 0;
}

.cst-terms-heading[b-0rzyjirozz] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ascend-warning);
    overflow-wrap: anywhere;
}

.cst-terms-message[b-0rzyjirozz] {
    margin: 0.5rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.cst-terms-action[b-0rzyjirozz] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.4rem;
    color: var(--ascend-warning);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cst-terms-action:focus-visible[b-0rzyjirozz] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

@media (max-width: 520px) {
    .cst-terms[b-0rzyjirozz] {
        padding: 0.9rem 1rem 1rem;
    }

    .cst-list[b-0rzyjirozz] {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cst-tab[b-0rzyjirozz] {
        padding: 0 var(--space-sm);
    }
}
/* /Components/Pages/CoachBridge/CoachTodayCard.razor.rz.scp.css */
/* #9424 - the new coach's "What you can do today" card. The Card owns its header and body; a plain list
   of links, no counts or progress styling (Recognition Follows Improvement: support, not reward). */
.cb-today[b-n5nzphn03c] {
    margin-bottom: 1rem;
}

.cb-today-list[b-n5nzphn03c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.cb-today-item[b-n5nzphn03c] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cb-today-link[b-n5nzphn03c] {
    font-weight: 600;
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    overflow-wrap: anywhere;
}

.cb-today-detail[b-n5nzphn03c],
.cb-today-note[b-n5nzphn03c] {
    color: var(--ascend-text-secondary);
    line-height: 1.5;
}

.cb-today-note[b-n5nzphn03c] {
    margin: 0 0 0.5rem;
}

.cb-today-error[b-n5nzphn03c] {
    margin: 0;
    color: var(--ascend-error-light);
}
/* /Components/Pages/CoachBridge/CoachUpcomingLessonsCard.razor.rz.scp.css */
/* #8715 slice 8715-1 - the coach's upcoming lessons. A table at desktop; below 600px of its own column
   (a container query, not a viewport breakpoint) each lesson is a card. Nothing scrolls sideways at 344px. */
.cul[b-9vexs75hh9] {
    margin-bottom: 1.5rem;
    scroll-margin-top: calc(var(--app-content-top, 0px) + var(--space-md, 1rem));
}

.cul-zone[b-9vexs75hh9] {
    margin: 0 0 0.75rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    overflow-wrap: anywhere;
}

.cul-shell[b-9vexs75hh9] {
    container: cul-lessons / inline-size;
    min-width: 0;
}

.cul-grid[b-9vexs75hh9] {
    min-width: 0;
}

/* Anchored on .cul-grid, which is in this component's markup: QuickGrid's own table never carries this
   component's scope attribute (the #8073 reasoning). */
.cul-grid[b-9vexs75hh9]  table.cul-quickgrid {
    width: 100%;
    border-collapse: collapse;
}

.cul-grid[b-9vexs75hh9]  table.cul-quickgrid th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(49, 221, 227, 0.25);
}

.cul-grid[b-9vexs75hh9]  table.cul-quickgrid td {
    padding: 0.625rem 0.75rem;
    vertical-align: top;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-wrap: anywhere;
}

.cul-start[b-9vexs75hh9],
.cul-span[b-9vexs75hh9] {
    display: block;
}

.cul-start[b-9vexs75hh9] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.cul-span[b-9vexs75hh9] {
    color: rgba(255, 255, 255, 0.8);
}

/* The per-cell key is silent while the column headers do that job. */
.cul-grid .cell-label[b-9vexs75hh9] {
    display: none;
}

@container cul-lessons (max-width: 600px) {
    .cul-grid[b-9vexs75hh9]  table.cul-quickgrid {
        display: block;
        min-width: 0;
    }

    .cul-grid[b-9vexs75hh9]  thead {
        display: none;
    }

    .cul-grid[b-9vexs75hh9]  tbody {
        display: block;
    }

    .cul-grid[b-9vexs75hh9]  tbody tr.cul-row {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        margin-bottom: 0.75rem;
        padding: 0.85rem 1rem;
        border: 1px solid rgba(49, 221, 227, 0.2);
        border-radius: 12px;
    }

    .cul-grid[b-9vexs75hh9]  table.cul-quickgrid td {
        display: block;
        min-width: 0;
        padding: 0;
        border-bottom: none;
    }

    .cul-grid .cell-label[b-9vexs75hh9] {
        display: block;
        font-family: var(--ascend-font-primary);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ascend-text-muted);
    }
}

/* #8715 slice 8715-2 - the coach's lesson actions, the answer line, and recent lessons. */
.cul-state[b-9vexs75hh9] {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.8);
    overflow-wrap: anywhere;
}

.cul-actions[b-9vexs75hh9] {
    flex-wrap: wrap;
    min-width: 0;
}

.cul-status[b-9vexs75hh9],
.cul-error[b-9vexs75hh9] {
    margin: 0 0 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 6px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    overflow-wrap: anywhere;
    scroll-margin-top: calc(var(--app-content-top, 0px) + var(--space-md, 1rem));
}

.cul-status[b-9vexs75hh9] {
    border-left: 3px solid var(--ascend-accent);
    background-color: rgb(14, 34, 52);
}

.cul-error[b-9vexs75hh9] {
    border-left: 3px solid #ef4444;
    background-color: rgb(28, 24, 38);
}

.cul-recent-heading[b-9vexs75hh9] {
    margin: 1.25rem 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.85);
}

.cul-recent[b-9vexs75hh9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cul-recent-row[b-9vexs75hh9] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    min-width: 0;
}

/* #8715 slice 8715-7 - the coach's "Propose a new time" picker, below the list so the grid's columns keep their widths. */
.cul-propose[b-9vexs75hh9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    min-width: 0;
}
/* /Components/Pages/CoachBridge/CoachWeeklyDigestCard.razor.rz.scp.css */
/* #8602 - the coach's weekly summary card. .form-input is the global input (app.css); the
   Card owns its header and body. Every control is at least the touch target on a coarse pointer. */
.cb-digest[b-4nicm1fbv8] {
    margin-top: 1rem;
}

.cb-digest-text[b-4nicm1fbv8] {
    margin: 0 0 0.75rem;
    color: var(--ascend-text-secondary);
    line-height: 1.5;
}

.cb-digest-day[b-4nicm1fbv8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.cb-digest-day label[b-4nicm1fbv8] {
    font-weight: 600;
}

/* The Day select is the shared WeekdaySelect, which owns its own axe-clean caret. */

.cb-digest-error[b-4nicm1fbv8] {
    margin: 0 0 0.75rem;
    color: var(--ascend-error-light);
}
/* /Components/Pages/CoachBridge/CoachWorkRequestControl.razor.rz.scp.css */
/* #8106 - "Request to work with this coach", inside a listing card on Find a Coach.
   Brand tokens only. Solid backgrounds: text on a gradient is undecidable for axe. */
.cwr[b-o49tzp8s5q] {
    flex: 1 1 100%;
    min-width: 0;
}

.cwr-text[b-o49tzp8s5q],
.cwr-status[b-o49tzp8s5q],
.cwr-error[b-o49tzp8s5q] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
    margin: 0 0 0.75rem;
}

.cwr-status[b-o49tzp8s5q] {
    padding: 0.625rem 1rem;
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    background-color: rgb(14, 34, 52);
}

.cwr-error[b-o49tzp8s5q] {
    padding: 0.625rem 1rem;
    border-left: 3px solid #ef4444;
    border-radius: 6px;
    background-color: rgb(28, 24, 38);
    color: rgba(255, 255, 255, 0.9);
}

.cwr-terms[b-o49tzp8s5q] {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 10px;
}

.cwr-terms li[b-o49tzp8s5q] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cwr-terms i[b-o49tzp8s5q] {
    color: var(--ascend-accent);
    flex: 0 0 auto;
    margin-top: 0.125rem;
}

.cwr-scope-fieldset[b-o49tzp8s5q] {
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    margin: 0 0 0.75rem;
    min-width: 0;
}

.cwr-scope-legend[b-o49tzp8s5q] {
    padding: 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.cwr-scope-row[b-o49tzp8s5q] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.5rem 0;
    cursor: pointer;
    min-width: 0;
}

.cwr-scope-row input[type="checkbox"][b-o49tzp8s5q],
.cwr-age-row input[type="checkbox"][b-o49tzp8s5q] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ascend-accent);
    cursor: pointer;
    grid-row: 1 / span 2;
}

.cwr-scope-label[b-o49tzp8s5q] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.cwr-scope-hint[b-o49tzp8s5q] {
    grid-column: 2;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.cwr-age-row[b-o49tzp8s5q] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(49, 221, 227, 0.2);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    cursor: pointer;
}

.cwr-age-hint[b-o49tzp8s5q] {
    margin: 0 0 0.75rem 1.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
}

.cwr-buttons[b-o49tzp8s5q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-width: 0;
}

@media (hover: none) and (pointer: coarse) {
    .cwr-age-row[b-o49tzp8s5q],
    .cwr-scope-row[b-o49tzp8s5q] {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/CoachBridge/CoachWorkRequestList.razor.rz.scp.css */
/* #8106 - the member's own requests, under the directory on Find a Coach. Brand tokens only. */
.cwl[b-ajy8i292y3] {
    margin-top: 1.25rem;
    /* Standing alone (the directory is not live for the member), it must not touch what follows. */
    margin-bottom: 1.5rem;
    min-width: 0;
}

.cwl-heading[b-ajy8i292y3] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0.5rem;
}

.cwl-text[b-ajy8i292y3],
.cwl-status[b-ajy8i292y3],
.cwl-error[b-ajy8i292y3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
    margin: 0 0 0.75rem;
}

.cwl-status[b-ajy8i292y3],
.cwl-error[b-ajy8i292y3] {
    margin-top: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 6px;
}

.cwl-status[b-ajy8i292y3] {
    border-left: 3px solid var(--ascend-accent);
    background-color: rgb(14, 34, 52);
}

.cwl-error[b-ajy8i292y3] {
    border-left: 3px solid #ef4444;
    background-color: rgb(28, 24, 38);
}

.cwl-list[b-ajy8i292y3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cwl-row[b-ajy8i292y3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background-color: rgb(10, 22, 40);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    min-width: 0;
}

.cwl-what[b-ajy8i292y3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 14rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cwl-who[b-ajy8i292y3] {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/* #8709 - a listed name comes through the listing's own field list (label included, styled by
   that component). Only the name itself is made to read like the fallback above. */
.cwl-what[b-ajy8i292y3]  .clf-value {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.cwl-sent[b-ajy8i292y3],
.cwl-offer[b-ajy8i292y3],
.cwl-state[b-ajy8i292y3] {
    color: rgba(255, 255, 255, 0.85);
}
/* /Components/Pages/CoachBridge/CoachWorkRequestsCard.razor.rz.scp.css */
/* #8106 - the requests waiting for a coach, on their students page. Plain and calm:
   a statement of what is waiting, not a banner. */
.cwq[b-2af0djp82a] {
    margin-bottom: 1.5rem;
    /* #8708 - the bell's entry lands here by fragment (/coach-bridge#coach-work-requests). The
       mobile header is FIXED over the top edge, so keep the card's heading out from under it,
       with the height MainLayout publishes (the .paged-list convention in app.css). */
    scroll-margin-top: calc(var(--app-content-top, 0px) + var(--space-md, 1rem));
}

.cwq-text[b-2af0djp82a],
.cwq-status[b-2af0djp82a],
.cwq-error[b-2af0djp82a] {
    margin: 0 0 0.75rem;
    font-style: normal;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.cwq-status[b-2af0djp82a],
.cwq-error[b-2af0djp82a] {
    margin-top: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 6px;
}

.cwq-status[b-2af0djp82a] {
    border-left: 3px solid var(--ascend-accent);
    background-color: rgb(14, 34, 52);
}

.cwq-error[b-2af0djp82a] {
    border-left: 3px solid #ef4444;
    background-color: rgb(28, 24, 38);
}

.cwq-list[b-2af0djp82a] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cwq-row[b-2af0djp82a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background-color: rgb(10, 22, 40);
    border: 1px solid rgba(255, 255, 255, 0.25);
    min-width: 0;
}

.cwq-what[b-2af0djp82a] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 14rem;
    overflow-wrap: anywhere;
}

.cwq-who[b-2af0djp82a] {
    color: var(--ascend-text-light);
}

.cwq-offer[b-2af0djp82a] {
    color: rgba(255, 255, 255, 0.85);
}

.cwq-buttons[b-2af0djp82a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cwq-age-row[b-2af0djp82a] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.75rem 0 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(49, 221, 227, 0.2);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.cwq-age-row input[type="checkbox"][b-2af0djp82a] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ascend-accent);
    cursor: pointer;
}

.cwq-age-hint[b-2af0djp82a] {
    margin: 0 0 0 1.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
}

@media (hover: none) and (pointer: coarse) {
    .cwq-age-row[b-2af0djp82a] {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/CoachBridge/CommentaryThread.razor.rz.scp.css */
.cc-thread[b-nd0mok676w] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Bug #7181 - the collapsed row moved to CommentaryThreadGroup with the rest of
   the accordion. It could not stay here: collapsing has to fold the TAB STRIP
   away with the thread, and the strip is the group's markup. */

/* Names the other party when a surface lists more than one thread. */
.cc-who[b-nd0mok676w] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.75;
}

.cc-messages[b-nd0mok676w] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 26rem;
    overflow-y: auto;
}

.cc-msg[b-nd0mok676w] {
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
    max-width: 85%;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cc-theirs[b-nd0mok676w] {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.04);
}

.cc-mine[b-nd0mok676w] {
    align-self: flex-end;
    background: rgba(212, 175, 55, 0.10);
    border-color: rgba(212, 175, 55, 0.25);
}

.cc-msg-head[b-nd0mok676w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
}

.cc-msg-author[b-nd0mok676w] {
    font-weight: 600;
}

.cc-msg-role[b-nd0mok676w] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.4rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* #7747 - this badge had no color of its own and dimmed whatever it
       inherited with `opacity: 0.8`. Composited, the coach variant measured
       3.72:1 - the worst of the four failures on these surfaces, and the one
       badge whose whole job is to say "this is your coach speaking". The
       opacity is what broke it, so it is gone; the badge is small uppercase
       text inside a border and needs no extra dimming to read as a chip. */
}

/* #6932 - the coach identifier. A student reading their own game must be able to
   tell at a glance which messages are their coach speaking, so this badge renders
   on every message and the coach's is brand gold. Was a raw #d4af37 that was not
   even the brand gold; now the token. */
.cc-role-coach[b-nd0mok676w] {
    /* #7747 - the lighter gold is the token #7232 repainted every gold chip
       onto; --ascend-secondary itself sits too close to AA on these tints. */
    color: var(--ascend-secondary-light);
    border-color: var(--ascend-secondary);
    font-weight: 700;
}

.cc-msg-time[b-nd0mok676w] {
    margin-left: auto;
    opacity: 0.55;
}

.cc-msg-body[b-nd0mok676w] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
}

/* #8614 - the coach's own view of a how-to they sent: the page's name, no link. */
.cc-msg-howto[b-nd0mok676w] {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    opacity: 0.75;
}

.cc-msg-read[b-nd0mok676w] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    opacity: 0.55;
    text-align: right;
}

.cc-composer[b-nd0mok676w] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cc-composer[b-nd0mok676w]  .cc-input,
.cc-input[b-nd0mok676w] {
    width: 100%;
    resize: vertical;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: inherit;
    font: inherit;
}

.cc-input:focus[b-nd0mok676w] {
    outline: none;
    border-color: rgba(212, 175, 55, 0.6);
}

.cc-composer-foot[b-nd0mok676w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cc-count[b-nd0mok676w] {
    font-size: 0.78rem;
    opacity: 0.6;
}

.cc-count.warn[b-nd0mok676w] {
    color: #e0a030;
    opacity: 1;
}

.cc-error[b-nd0mok676w] {
    margin: 0;
    color: #e06666;
    font-size: 0.85rem;
}

/* #8104 CB-TRUST - the neutral line shown to a student where a message was removed. */
.cc-msg-removed[b-nd0mok676w] {
    font-style: italic;
    opacity: 0.85;
}
/* /Components/Pages/CoachBridge/CommentaryThreadGroup.razor.rz.scp.css */
/* Bug #7181 - the accordion bar and the coach tab strip.

   Quiet chrome on purpose. This sits inside a Card that already has a title, so
   the bar is a CONTROL row, not a second heading: one line, small type, and the
   only loud thing on it is an unread badge - which is the one piece of
   information a student loses by tabbing conversations away. */

.cc-group[b-l54mh8n09r] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* -- the accordion bar ------------------------------------------------- */

.cc-group-bar[b-l54mh8n09r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px dashed color-mix(in srgb, var(--ascend-text-light) 15%, transparent);
    background: color-mix(in srgb, var(--ascend-text-light) 3%, transparent);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.cc-group-bar:hover[b-l54mh8n09r] {
    border-color: var(--ascend-accent);
    background: color-mix(in srgb, var(--ascend-text-light) 6%, transparent);
}

.cc-group-bar:focus-visible[b-l54mh8n09r] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

/* Open, the bar is a live toggle rather than an invitation - solid edge. */
.cc-group-bar.is-open[b-l54mh8n09r] {
    border-style: solid;
}

.cc-group-summary[b-l54mh8n09r] {
    font-weight: 600;
    font-size: 0.8125rem;
}

/* The total that survives collapsing. Nothing this component hides is hidden
   silently, so this badge is the one element allowed to shout. */
.cc-group-unread[b-l54mh8n09r] {
    margin-left: auto;
    flex: none;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.45rem;
    border-radius: 0.75rem;
    color: var(--ascend-bg-dark);
    background: var(--ascend-accent);
}

/* -- the tab strip ----------------------------------------------------- */

.cc-tabs[b-l54mh8n09r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ascend-text-light) 10%, transparent);
    padding-bottom: 0.35rem;
}

.cc-tab[b-l54mh8n09r] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    /* Names wrap rather than push the strip into a horizontal scroll at phone
       width - a tab you cannot see is the thing this whole change is avoiding. */
    max-width: 100%;
}

.cc-tab:hover[b-l54mh8n09r] {
    background: color-mix(in srgb, var(--ascend-text-light) 6%, transparent);
}

.cc-tab:focus-visible[b-l54mh8n09r] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.cc-tab.is-selected[b-l54mh8n09r] {
    font-weight: 700;
    border-color: color-mix(in srgb, var(--ascend-text-light) 12%, transparent);
    background: color-mix(in srgb, var(--ascend-text-light) 6%, transparent);
    box-shadow: inset 0 2px 0 0 var(--ascend-secondary);
}

.cc-tab-name[b-l54mh8n09r] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-tab-unread[b-l54mh8n09r] {
    flex: none;
    min-width: 1.15rem;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 0.75rem;
    color: var(--ascend-bg-dark);
    background: var(--ascend-accent);
}

.cc-tab-count[b-l54mh8n09r] {
    flex: none;
    font-size: 0.68rem;
    opacity: 0.55;
}

.cc-group-panel[b-l54mh8n09r] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

@media (max-width: 480px) {
    .cc-tab[b-l54mh8n09r] {
        /* Three coaches must still fit without a scroller: the names shorten,
           the badges never do. */
        max-width: 9.5rem;
    }
}

/* #7796 - the accordion bar and its tab strip render inside the Game Analysis
   coach console, which #7736's ratchet never walked because
   /games/{id}/analysis is a parameterized route. Measured at 390px on a coarse
   pointer: .cc-group-bar 42px tall, .cc-tab 31px. Both are wide enough
   already, so only the height floor is needed. The tabs are adjacent flex
   items in .cc-tabs, so the box grows rather than gaining an absolutely
   positioned pseudo hit area that would overlap the next tab (#7783). */
@media (hover: none) and (pointer: coarse) {
    .cc-group-bar[b-l54mh8n09r],
    .cc-tab[b-l54mh8n09r] {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/CoachBridge/LessonRoom.razor.rz.scp.css */
/* #8718 - the live lesson room. Brand tokens only; the shared Card, Button and ChessBoard own their
   own chrome and nothing here redefines it. The board column and the aside stack at phone width, so
   nothing scrolls sideways at 344px. */
.lr-room[b-si7tn3th28] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    min-width: 0;
}

.lr-board-side[b-si7tn3th28],
.lr-aside[b-si7tn3th28] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.lr-loading[b-si7tn3th28],
.lr-dark[b-si7tn3th28],
.lr-alone[b-si7tn3th28],
.lr-control[b-si7tn3th28],
.lr-asked[b-si7tn3th28],
.lr-follow-hint[b-si7tn3th28],
.lr-not-following[b-si7tn3th28],
.lr-no-call[b-si7tn3th28],
.lr-call-host[b-si7tn3th28],
.lr-call-note[b-si7tn3th28],
.lr-call-message[b-si7tn3th28],
.lr-notes-hint[b-si7tn3th28],
.lr-notes-read[b-si7tn3th28],
.lr-notes-empty[b-si7tn3th28],
.lr-fen-message[b-si7tn3th28],
.lr-share-hint[b-si7tn3th28],
.lr-share-note[b-si7tn3th28],
.lr-share-message[b-si7tn3th28],
.lr-load-hint[b-si7tn3th28],
.lr-load-empty[b-si7tn3th28],
.lr-shared-from[b-si7tn3th28],
.lr-save-hint[b-si7tn3th28],
.lr-save-again-hint[b-si7tn3th28],
.lr-save-message[b-si7tn3th28],
.lr-save-not-kept[b-si7tn3th28],
.lr-open-again[b-si7tn3th28],
.lr-rejoin-message[b-si7tn3th28],
.lr-saved[b-si7tn3th28],
.lr-no-moves[b-si7tn3th28],
.lr-person[b-si7tn3th28] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.lr-dark[b-si7tn3th28],
.lr-loading[b-si7tn3th28],
.lr-follow-hint[b-si7tn3th28],
.lr-call-note[b-si7tn3th28],
.lr-notes-hint[b-si7tn3th28],
.lr-share-hint[b-si7tn3th28],
.lr-share-note[b-si7tn3th28],
.lr-load-hint[b-si7tn3th28],
.lr-load-empty[b-si7tn3th28],
.lr-save-hint[b-si7tn3th28],
.lr-save-again-hint[b-si7tn3th28] {
    color: rgba(255, 255, 255, 0.75);
}

.lr-control[b-si7tn3th28],
.lr-person[b-si7tn3th28] {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.lr-presence[b-si7tn3th28],
.lr-moves[b-si7tn3th28] {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.lr-moves[b-si7tn3th28] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    max-height: 14rem;
    overflow-y: auto;
}

.lr-move-button[b-si7tn3th28] {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.2;
    /* 44px minimum touch target at phone width. */
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

.lr-move-here .lr-move-button[b-si7tn3th28],
.lr-move-here .lr-move-text[b-si7tn3th28] {
    border-color: var(--ascend-accent);
    color: var(--ascend-accent);
}

/* #8718 review round 7 - the same tile without the click, for a session that has ended: the move
   list is still the record of the lesson, and stepping it would step a room the server no longer
   has. Not a disabled button, because nothing here is waiting to become available again. */
.lr-move-text[b-si7tn3th28] {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.2;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.25rem 0.5rem;
}

/* #8718 review round 7 - what a save will not keep, and the sentence a swept session leaves. Both
   are statements about the member's artifact, so they read as the room's own voice rather than as
   an error: the same size and weight as the other lines, one step brighter than a hint. */
.lr-save-not-kept[b-si7tn3th28],
.lr-ended[b-si7tn3th28],
/* Review round 8: the two lines a way back answers with. Same voice as the sentence they sit
   under - a statement about the room, not an alert and not a celebration. */
.lr-open-again[b-si7tn3th28],
.lr-rejoin-message[b-si7tn3th28] {
    color: rgba(255, 255, 255, 0.9);
}

/* #9387 (owner canary, Stage 5) - the step controls sit UNDER THE BOARD: the board's own width cap
   and centering, so the row's edges are the board's edges at every width. They were the shared
   .action-row action-row--start, which is the whole column pinned left: at 1440 the row began
   left of the centered board and ran past its right edge.

   The cap is ChessBoard's (min(600px, 88dvh), widening to calc(100vw - 4.5rem) below 768px)
   folded into one min(), as StudyBoard's player strips already do; it resolves to the board's
   number in both bands. LessonRoomLayoutContractTests fails if ChessBoard's numbers move.

   The cells are a grid of EQUAL tracks, so every step button is one width: two across under a
   desktop board (each fits "Forward to the last move" on one line), one across under a phone
   board, where four 13rem cells cannot fit. The buttons fill their cells as grid items do, so
   no width is set on a button here. */
.lr-steps[b-si7tn3th28] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0.5rem;
    width: 100%;
    max-width: min(600px, 88dvh, calc(100vw - 4.5rem));
    margin-inline: auto;
}

/* Every button in the room's cards is the shared Button at FullWidth (#9387), so the cards'
   buttons share one width; nothing here sizes a button. The two lines that sit directly under a
   full-width button (the call's host, the coach's library hint) get a little air, or they read as
   jammed against its pill. */
.lr-call-host[b-si7tn3th28],
.lr-load-hint[b-si7tn3th28] {
    margin-top: 0.5rem;
}
.lr-follow[b-si7tn3th28] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    margin-top: 0.5rem;
}

.lr-follow-row[b-si7tn3th28] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 44px minimum touch target. */
    min-height: 2.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.lr-follow-row input[type="checkbox"][b-si7tn3th28] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--ascend-accent);
}

.lr-call-label[b-si7tn3th28],
.lr-notes-label[b-si7tn3th28],
.lr-share-label[b-si7tn3th28],
.lr-fen-label[b-si7tn3th28] {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
}

.lr-call-input[b-si7tn3th28],
.lr-fen-input[b-si7tn3th28],
.lr-notes[b-si7tn3th28] {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* 44px minimum touch target. */
    min-height: 2.75rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.95);
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.4;
}

.lr-notes[b-si7tn3th28] {
    resize: vertical;
}

.lr-call-input:focus-visible[b-si7tn3th28],
.lr-fen-input:focus-visible[b-si7tn3th28],
.lr-share-pick:focus-visible[b-si7tn3th28],
.lr-notes:focus-visible[b-si7tn3th28],
.lr-move-button:focus-visible[b-si7tn3th28] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.lr-saved[b-si7tn3th28],
.lr-asked[b-si7tn3th28] {
    color: var(--ascend-accent);
}

/* #9005 - the picker is a <select>, so it keeps the chevron the global select rule paints: this
   writes background-COLOR, never the shorthand (which would reset the background-image the arrow is
   drawn with while appearance:none leaves the browser drawing none either), and it leaves the
   2.25rem of right padding that arrow sits in. SelectChevronRatchetTests is why this rule is not
   simply folded into the text inputs above. */
.lr-share-pick[b-si7tn3th28] {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* 44px minimum touch target. */
    min-height: 2.75rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 2.25rem 0.5rem 0.625rem;
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.95);
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.4;
}

/* #9005 - the name of what the student put on the board, printed as the library has it and on its
   own line, so a long study title wraps instead of pushing the aside wide at phone width. */
.lr-shared-name[b-si7tn3th28] {
    display: block;
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    overflow-wrap: anywhere;
}

/* The picker is a native select, so its own options are drawn by the browser: the dark page would
   otherwise hand it white-on-white in the browsers that take the field's color and not the list's. */
.lr-share-pick option[b-si7tn3th28],
.lr-share-pick optgroup[b-si7tn3th28] {
    background: #11161d;
    color: rgba(255, 255, 255, 0.95);
}

@media (min-width: 64rem) {
    .lr-room[b-si7tn3th28] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
        align-items: start;
    }
}
/* /Components/Pages/CoachBridge/ShareWithCoachModal.razor.rz.scp.css */
/* PBI #5489 Phase 4 — Share-with-coach modal. Mirrors the scope-picker +
   field styling from CoachBridgeShare.razor.css with an swc- prefix so the
   two surfaces stay visually consistent without sharing scoped CSS. */

.swc-help[b-e6qdkc1wbq] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
}

/* ── Scope toggle group ──────────────────────────────────────────────── */

.swc-scope-fieldset[b-e6qdkc1wbq] {
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 0 0 1rem;
    background: rgba(255, 255, 255, 0.02);
}

.swc-scope-legend[b-e6qdkc1wbq] {
    padding: 0 0.5rem;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.swc-scope-row[b-e6qdkc1wbq] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    column-gap: 0.75rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

.swc-scope-row input[type="checkbox"][b-e6qdkc1wbq] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: #31DDE3;
    cursor: pointer;
}

.swc-scope-label[b-e6qdkc1wbq] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.swc-scope-hint[b-e6qdkc1wbq] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
}

.swc-scope-rationale[b-e6qdkc1wbq] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
    line-height: 1.5;
    font-style: italic;
}

/* ── Note + email fields ─────────────────────────────────────────────── */

.swc-note-group[b-e6qdkc1wbq],
.swc-email-group[b-e6qdkc1wbq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.swc-field-label[b-e6qdkc1wbq] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.swc-input[b-e6qdkc1wbq] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: #ffffff;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
    resize: vertical;
}

.swc-input:focus[b-e6qdkc1wbq] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
}

.swc-input[b-e6qdkc1wbq]::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.swc-error[b-e6qdkc1wbq] {
    margin: 0;
    color: #ef4444;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* #8074 (CB-AGE): the decision-33 refusal, in place of the form. */
.swc-age-blocked[b-e6qdkc1wbq] {
    margin: 0;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    line-height: 1.5;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
    border-radius: 6px;
}

/* #8074 (CB-AGE): the one-time "I am 18 or older" row, set apart from the scope picker. */
.swc-age-row[b-e6qdkc1wbq] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
}

/* Non-blocking note nudge: shown when a personal note is written but the
   optional email box is empty (the bare link can't carry the note). */
.swc-note-nudge:empty[b-e6qdkc1wbq] {
    display: none;
}

.swc-hint[b-e6qdkc1wbq] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
    line-height: 1.5;
    background: rgba(49, 221, 227, 0.08);
    border-left: 2px solid rgba(49, 221, 227, 0.5);
    border-radius: 6px;
}

/* ── Confirmation (link-ready + sent) ────────────────────────────────── */

.swc-confirm[b-e6qdkc1wbq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.875rem;
    padding: 0.5rem 0;
}

.swc-confirm-icon[b-e6qdkc1wbq] {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border: 2px solid rgba(49, 221, 227, 0.4);
}

.swc-confirm-icon[b-e6qdkc1wbq]  i {
    color: var(--ascend-accent);
}

.swc-confirm-icon-sent[b-e6qdkc1wbq] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(16, 185, 129, 0.2));
}

.swc-confirm-icon-sent[b-e6qdkc1wbq]  i {
    color: #10b981;
}

.swc-confirm-lead[b-e6qdkc1wbq] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    max-width: 36rem;
}

/* ── Copyable link row ───────────────────────────────────────────────── */

.swc-link-row[b-e6qdkc1wbq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.swc-link-input[b-e6qdkc1wbq] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    box-sizing: border-box;
}

.swc-toast[b-e6qdkc1wbq] {
    margin: 0;
    color: #31DDE3;
    font-size: 0.875rem;
}

.swc-visually-hidden[b-e6qdkc1wbq] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 480px) {
    .swc-link-row[b-e6qdkc1wbq] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/CoachBridge/StopSharingLessonsDialog.razor.rz.scp.css */
/* #8715 slice 8715-2 - the lesson lines inside the shared confirm dialog (its ChildContent, rendered in this
   component's scope). */
.ssl[b-hzassyopt3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.5rem);
    margin: 0 0 var(--space-md, 1rem);
    text-align: left;
    min-width: 0;
    /* Final review: an explicit color, so the lessons and their refund lines never inherit the host's (the paused
       card hosts this dialog outside the PageContainer, where the inherited color was the dialog's own navy). */
    color: var(--ascend-text-light);
}

.ssl-rule[b-hzassyopt3] {
    margin: 0;
    overflow-wrap: anywhere;
}

.ssl-zone[b-hzassyopt3],
.ssl-sharing[b-hzassyopt3] {
    margin: 0;
    color: var(--ascend-text-secondary);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.ssl-list[b-hzassyopt3] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.5rem);
}

.ssl-list li[b-hzassyopt3] {
    overflow-wrap: anywhere;
}
/* /Components/Pages/CoachHomework.razor.rz.scp.css */
/* #6018 slice 3 - the page a student runs coach homework from. Quiet and factual: the
   finish line in the registry's words, no score card, no celebration (Recognition
   Follows Improvement). Tokens only (ScopedCssBoundaryTests). */

/* No width cap on the page div: DrillShell sizes the board column and the sidebar
   itself (DrillShellConvergenceTests). The summary card caps its own measure. */
.chw-page[b-nakblgj8mv] {
    min-width: 0;
}

.chw-summary[b-nakblgj8mv] {
    max-width: 44rem;
    min-width: 0;
}

.chw-kicker[b-nakblgj8mv],
.chw-progress-kicker[b-nakblgj8mv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.chw-title[b-nakblgj8mv] {
    margin: 0.35rem 0 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.95);
    overflow-wrap: anywhere;
}

.chw-line[b-nakblgj8mv] {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.78);
    overflow-wrap: anywhere;
}

.chw-facts[b-nakblgj8mv] {
    color: rgba(255, 255, 255, 0.92);
}

.chw-note[b-nakblgj8mv] {
    font-style: italic;
}

.chw-error[b-nakblgj8mv] {
    color: rgba(255, 255, 255, 0.92);
    border-left: 3px solid var(--ascend-accent);
    padding-left: 0.6rem;
}

.chw-minutes[b-nakblgj8mv] {
    margin-left: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.chw-actions[b-nakblgj8mv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.chw-progress[b-nakblgj8mv] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
}

.chw-progress-count[b-nakblgj8mv] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.chw-board[b-nakblgj8mv] {
    position: relative;
}

.chw-card[b-nakblgj8mv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.chw-card-title[b-nakblgj8mv] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}
/* /Components/Pages/CoachPage.razor.rz.scp.css */
/* #6128 - Clear-conversation toolbar, right-aligned above the thread. */
.coach-toolbar[b-7tc03n2kb4] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.coach-thread[b-7tc03n2kb4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 240px;
    margin-bottom: 1rem;
}

.coach-empty[b-7tc03n2kb4] {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 2rem 1rem;
}

.coach-empty i[b-7tc03n2kb4] {
    font-size: 1.6rem;
    color: #B88536;
    display: block;
    margin-bottom: 0.5rem;
}

.coach-msg[b-7tc03n2kb4] {
    max-width: 80%;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}

.coach-msg p[b-7tc03n2kb4] { margin: 0; white-space: pre-wrap; }

/* Rendered-markdown coach turns (.coach-md holds raw Markdig output, so every child
   selector needs ::deep). Headings must inherit the bubble's light text - the global
   h1-h6 rule paints them --ascend-text-primary navy, unreadable on this dark panel -
   and stay chat-sized, not document-sized. Mirrors CoachWalkthroughPanel.razor.css
   (the "can't see the headers" canary bug). */
.coach-md[b-7tc03n2kb4]  p {
    margin: 0 0 0.6rem;
    white-space: normal;
}

.coach-md[b-7tc03n2kb4]  p:last-child {
    margin-bottom: 0;
}

.coach-msg .coach-md[b-7tc03n2kb4]  h1,
.coach-msg .coach-md[b-7tc03n2kb4]  h2,
.coach-msg .coach-md[b-7tc03n2kb4]  h3,
.coach-msg .coach-md[b-7tc03n2kb4]  h4,
.coach-msg .coach-md[b-7tc03n2kb4]  h5,
.coach-msg .coach-md[b-7tc03n2kb4]  h6 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff !important;
    margin: 0.6rem 0 0.3rem;
}

.coach-md[b-7tc03n2kb4]  ul,
.coach-md[b-7tc03n2kb4]  ol {
    margin: 0 0 0.6rem;
    padding-left: 1.2rem;
}

.coach-md[b-7tc03n2kb4]  strong {
    color: #ffffff;
}

/* #8794 - links in a coach reply. They were never styled here, so they fell to the global
   `a` color, the brand navy: axe-core read 1.00:1 (#042047 on the reply card's #192033) for
   every link a reply carried. The brand link token, an underline (cyan against the reply's
   white text is under 3:1, so color alone does not mark a link inside a sentence - WCAG
   1.4.1), and a visible keyboard ring. ::deep because the reply is raw Markdig output and
   carries no scope attribute. */
.coach-md[b-7tc03n2kb4]  a {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.coach-md[b-7tc03n2kb4]  a:hover {
    color: var(--ascend-accent-light);
}

.coach-md[b-7tc03n2kb4]  a:focus-visible {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* #8434 - the platform's "Engine check" note under a coach reply (a Markdig custom container,
   "::: engine-check", rendered as div.engine-check). The coach did not write it, so it is set
   apart from the prose: its own flat box, an accent rule on the left, a step down in size. It
   holds the heading line and a short list, one point per claim the engine checked. */
.coach-md[b-7tc03n2kb4]  .engine-check {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
    line-height: 1.45;
}

.coach-md[b-7tc03n2kb4]  .engine-check p {
    margin: 0 0 0.35rem;
}

.coach-md[b-7tc03n2kb4]  .engine-check ul {
    margin: 0;
    padding-left: 1.1rem;
}

.coach-md[b-7tc03n2kb4]  .engine-check li + li {
    margin-top: 0.2rem;
}

.coach-msg-user[b-7tc03n2kb4] {
    align-self: flex-end;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.25);
    color: #fff;
}

.coach-msg-assistant[b-7tc03n2kb4] {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.coach-thinking[b-7tc03n2kb4] { opacity: 0.6; font-style: italic; }

/* #8056 - the streamed waiting line says what the coach is doing (reading the question,
   thinking, looking something up), and a small dot breathes beside it so a long think reads
   as work in progress. The dot is decoration: the words carry the state, the text itself
   never animates (its contrast stays where the old bubble had it), and reduced motion
   stills it. */
.coach-thinking-dot[b-7tc03n2kb4] {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: var(--ascend-accent);
    vertical-align: middle;
    animation: coach-thinking-breathe-b-7tc03n2kb4 1.4s ease-in-out infinite;
}

@keyframes coach-thinking-breathe-b-7tc03n2kb4 {
    0%, 100% { transform: scale(0.7); opacity: 0.45; }
    50% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .coach-thinking-dot[b-7tc03n2kb4] { animation: none; }
}

/* Bug #6821 - the player's own question is now on screen for the whole wait, so
   the two states it can be in have to READ differently from a settled turn.
   Pending: dimmed, still clearly theirs. Failed: the accent drops to the error
   token so "this one did not land" is legible before the label is read. */
.coach-msg-pending[b-7tc03n2kb4] { opacity: 0.65; }

.coach-msg-failed[b-7tc03n2kb4] {
    border-color: var(--ascend-error);
    background: rgba(239, 68, 68, 0.08);
}

.coach-msg-status[b-7tc03n2kb4] {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.55);
}

.coach-msg-failed .coach-msg-status[b-7tc03n2kb4] { color: var(--ascend-error); }

/* #7986 (S4) - a reply the coach is still writing reads as live: the bubble's edge takes
   the accent until the visible answer is complete. */
.coach-msg-streaming[b-7tc03n2kb4] {
    border-color: rgba(49, 221, 227, 0.35);
}

/* #7986 - a streamed reply that was cut off keeps its words; the warning edge and its own
   status line say it is not the whole answer, and the Retry notice sits under it. */
.coach-msg-cut-off[b-7tc03n2kb4] {
    border-color: var(--ascend-warning);
}

.coach-msg-cut-off .coach-msg-status[b-7tc03n2kb4] { color: var(--ascend-warning); }

/* Bug #6821 - the retry sits with the question it belongs to, right-aligned to
   match the player's own bubbles rather than the coach's. */
.coach-send-failed[b-7tc03n2kb4] {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.coach-ask[b-7tc03n2kb4] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.coach-ask-input[b-7tc03n2kb4] {
    flex: 1;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(10, 22, 40, 0.6);
    color: #fff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    outline: none;
}

.coach-ask-input[b-7tc03n2kb4]::placeholder { color: rgba(255, 255, 255, 0.35); }
.coach-ask-input:focus[b-7tc03n2kb4] { border-color: rgba(49, 221, 227, 0.5); }

/* #6601 - SOFT-VERIFIED research provenance on an approved researched answer.
   Copied from StudyPlan.razor.css (scoped CSS does not cross components): the
   gold "sourced, worth something" tier - deliberately NOT a verified treatment,
   only a human SME ruling earns that (#6523). */
.research-chip[b-7tc03n2kb4] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.45);
    background: rgba(184, 133, 54, 0.12);
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    margin-bottom: 0.4rem;
}

/* #6554 - a VERIFIED expert-reviewed answer delivery (the "I'll get back to
   you" follow-up). Cyan = the earned tier: this chip only ever rides a turn the
   ruling pipeline stamped on the strength of a recorded human SME ruling. */
.verified-chip[b-7tc03n2kb4] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-accent-light);
    border: 1px solid rgba(49, 221, 227, 0.45);
    background: rgba(49, 221, 227, 0.1);
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    margin-bottom: 0.4rem;
}

/* #6601 - the sources list under a researched answer. */
.research-citations[b-7tc03n2kb4] {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.research-citations li[b-7tc03n2kb4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
}

.research-citations a[b-7tc03n2kb4] {
    color: var(--ascend-accent);
    text-decoration: none;
}

.research-citations a:hover[b-7tc03n2kb4] {
    text-decoration: underline;
}

/* Bug #6820 - Apply Changes now sits at the tail of the transcript, aligned with
   the coach's bubbles rather than the player's, so it reads as belonging to the
   message that just offered it instead of as page chrome. */
.coach-apply-row[b-7tc03n2kb4] {
    align-self: flex-start;
    margin-top: 0.25rem;
}

/* Bug #6820 - the result of pressing it, in the same place the pressing happened.
   Full width (not a bubble) because it is a status report, not a coach turn. */
.coach-apply-result[b-7tc03n2kb4] {
    align-self: stretch;
}

/* Bug #6812 - the "View your plan" link under the Apply Changes result banner.
   The rebuild happens on the Study Plan page; this is the only pointer to it,
   so it sits directly under the confirmation rather than in the toolbar. */
.coach-apply-link-row[b-7tc03n2kb4] {
    margin: 0.5rem 0 1rem;
    text-align: center;
}

.coach-apply-link-row a[b-7tc03n2kb4] {
    color: var(--ascend-accent);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.coach-apply-link-row a:hover[b-7tc03n2kb4] {
    text-decoration: underline;
}
/* /Components/Pages/CoachSearch.razor.rz.scp.css */
.coach-search-page[b-cfcx4l7fyz] {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
}

.search-header[b-cfcx4l7fyz] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.page-heading[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    margin: 0;
}

.page-subtitle[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.25rem 0 0;
}

.search-form[b-cfcx4l7fyz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

[b-cfcx4l7fyz] .search-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #ffffff;
    resize: vertical;
}

[b-cfcx4l7fyz] .search-input:focus {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

[b-cfcx4l7fyz] .search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.searching-state[b-cfcx4l7fyz] {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.search-hint[b-cfcx4l7fyz] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.25rem;
}

.error-card[b-cfcx4l7fyz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #f87171;
    margin-bottom: 1rem;
}

.results-heading[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1rem;
}

.coach-list[b-cfcx4l7fyz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.coach-card[b-cfcx4l7fyz] {
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    transition: border-color 0.15s ease;
}

.coach-card:hover[b-cfcx4l7fyz] {
    border-color: rgba(49, 221, 227, 0.4);
}

/* #8451 - THE "YOUR COACHES" HEADER COLLIDES AT 380-390px.

   Found in the #8446 walk. This row carried the coach's name plus the
   "ACCEPTS ASCENDCHESS STUDENTS" badge on the left and "coaching you since
   Oct 2026" on the right, as a nowrap flex row with justify-content:
   space-between and NO gap. space-between only separates items while there is
   slack; once the pair wants more than the line, the gap it was providing goes
   to zero and the badge and the date line touch. Measured at 390 the card has
   about 310px of content and the pair wants more, so they were flush against
   each other with no space between the badge's border and the date text.

   The fix is flex-wrap, not a media query, and that choice is deliberate: this
   file had no media query at all, and #7735 is the standing lesson here - a
   breakpoint fixes one band and leaves the next one to fall through (that
   defect was found at 834px, after phones and desktops had both been checked).
   With wrap, the date line drops to its own line at exactly the width where
   the pair stops fitting, whatever that width turns out to be on a given
   coach's name length. The row gap guarantees separation when they DO fit, and
   .coach-name-row wraps internally so a long name plus the badge behave the
   same way one level down.

   1440 is untouched: space-between already pushes the pair to the two edges
   there, so a minimum gap changes nothing and the row never reaches its wrap
   point. */
.coach-card-header[b-cfcx4l7fyz] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
}

.coach-name-row[b-cfcx4l7fyz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.coach-name[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
}

.coach-title-badge[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    background: rgba(184, 133, 54, 0.2);
    border: 1px solid rgba(184, 133, 54, 0.4);
    border-radius: 4px;
    color: var(--ascend-secondary-light);
}

.coach-source[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Bug #7027 - the coach's own description, carried across whole. Line breaks in
   the source are the coach's, so they are preserved rather than reflowed. */
.coach-published-about[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 0.75rem;
    white-space: pre-line;
}

/* Bug #7027 - the attribution line. Every descriptive word on the card came from
   the page this points at, and the reader can go and check it. */
.coach-provenance[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.75rem;
}

.coach-provenance a[b-cfcx4l7fyz] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

.coach-details[b-cfcx4l7fyz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.coach-detail[b-cfcx4l7fyz] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}

/* #6681 - VERIFIED by rendering at 390x844: a saved coach's row carries the
   profile link + "Share my profile" + the draft-message and unsave icon buttons.
   Inside .coach-card (1.25rem) within .coach-search-page (1.5rem) that is ~286px
   of usable width, and unwrapped the "Share my profile" label clips by ~29px
   (still 5px at the widest 374px container). Wrap instead of shrinking. */
.coach-card-actions[b-cfcx4l7fyz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.coach-card-actions > *[b-cfcx4l7fyz] {
    min-width: 0;
}

.favorite-btn[b-cfcx4l7fyz] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    transition: all 0.15s;
}

.favorite-btn:hover[b-cfcx4l7fyz] {
    color: #fbbf24;
}

.draft-msg-btn[b-cfcx4l7fyz] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    transition: all 0.15s;
}

.draft-msg-btn:hover[b-cfcx4l7fyz] {
    color: #31DDE3;
}

.favorite-btn.saved[b-cfcx4l7fyz] {
    color: #fbbf24;
}

/* Saved Coaches Section */
.saved-section[b-cfcx4l7fyz] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(184, 133, 54, 0.2);
    border-radius: 12px;
}

.saved-heading[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.75rem;
}

.saved-list[b-cfcx4l7fyz] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.saved-coach-row[b-cfcx4l7fyz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
}

.saved-coach-info[b-cfcx4l7fyz] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.saved-coach-name[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.saved-coach-detail[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.saved-coach-actions[b-cfcx4l7fyz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.remove-coach-btn[b-cfcx4l7fyz] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.2rem;
    transition: color 0.15s;
}

.remove-coach-btn:hover[b-cfcx4l7fyz] {
    color: #f87171;
}

/* #6895 - the .coach-link / .coach-link-lichess rules moved to
   Components/Shared/CoachProfileLink.razor.css along with the markup. Both the
   results list and the saved list render that component now, so keeping copies
   here would be dead scoped CSS (the component's markup carries the component's
   own scope attribute, not this page's). */

.empty-results[b-cfcx4l7fyz] {
    text-align: center;
    padding: 2.5rem 1rem;
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.55);
}

.empty-results[b-cfcx4l7fyz]  i {
    display: block;
    margin-bottom: 0.75rem;
}

.empty-results h3[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

.empty-results p[b-cfcx4l7fyz] {
    font-size: 0.88rem;
    max-width: 420px;
    margin: 0 auto 1.25rem;
    line-height: 1.5;
}

.spin-icon[b-cfcx4l7fyz] {
    animation: spin-b-cfcx4l7fyz 1s linear infinite;
}

@keyframes spin-b-cfcx4l7fyz {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Draft Message Modal */
.draft-modal[b-cfcx4l7fyz] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

.draft-title[b-cfcx4l7fyz] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 1rem;
}

.drafting-state[b-cfcx4l7fyz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

[b-cfcx4l7fyz] .draft-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    padding: 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #ffffff;
    line-height: 1.6;
    resize: vertical;
}

[b-cfcx4l7fyz] .draft-textarea:focus {
    outline: none;
    border-color: #31DDE3;
}

.draft-actions[b-cfcx4l7fyz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
}

.draft-copy-btn[b-cfcx4l7fyz] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 6px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: #31DDE3;
    cursor: pointer;
    transition: all 0.15s;
}

.draft-copy-btn:hover[b-cfcx4l7fyz] {
    background: rgba(49, 221, 227, 0.2);
}

/* #5489 — coach-voiced discovery framing + your-coaches panel */
.find-coach-framing[b-cfcx4l7fyz] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}

.find-coach-framing .framing-lead[b-cfcx4l7fyz] {
    margin: 0 0 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.find-coach-framing .framing-sub[b-cfcx4l7fyz] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
}

/* #8418 - the link to the shared "Will ASCENDCHESS replace my coach?" FAQ entry. */
.find-coach-framing .framing-faq[b-cfcx4l7fyz] {
    margin: 0.5rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.find-coach-framing .framing-faq a[b-cfcx4l7fyz] {
    display: inline-block;
    padding: 0.35rem 0;
    color: var(--ascend-accent);
    text-decoration: underline;
}

.my-coaches-section[b-cfcx4l7fyz] {
    margin-bottom: 1.5rem;
}

.my-coach-card[b-cfcx4l7fyz] {
    border-color: rgba(49, 221, 227, 0.3);
}

.coach-title-badge.accepts-students[b-cfcx4l7fyz] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}
/* /Components/Pages/CollectionDetail.razor.rz.scp.css */
/* Collection detail — visual parity with StudyDetail.razor.css patterns
   (resources-grid + chapter-row), trimmed for the read-only MVP. */

/* #5977 — drag-reorder visuals (parity with StudyDetail). The drag itself is
   driven by the shared global chapterDragDrop.js; these style the handle + drop
   indicators on this page's rows. */
.chapter-dnd-handle[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 28px;
    margin-right: 0.25rem;
    color: rgba(255, 255, 255, 0.25);
    cursor: grab;
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.chapter-dnd-handle:hover[b-6ghozffd2j] { color: rgba(49, 221, 227, 0.9); }
.chapter-dnd-handle:active[b-6ghozffd2j] { cursor: grabbing; }

.chapter-dnd-item.chapter-dnd-dragging[b-6ghozffd2j] { opacity: 0.4; }

.chapter-dnd-item.chapter-dnd-before .chapter-card[b-6ghozffd2j] { box-shadow: 0 -2px 0 0 #31DDE3; }
.chapter-dnd-item.chapter-dnd-after .chapter-card[b-6ghozffd2j] { box-shadow: 0 2px 0 0 #31DDE3; }
.chapter-dnd-item.chapter-dnd-into .chapter-card[b-6ghozffd2j] {
    border-color: #B88536;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.18) 0%, rgba(184, 133, 54, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(184, 133, 54, 0.6);
}
.chapter-dnd-item.chapter-dnd-invalid .chapter-card[b-6ghozffd2j] {
    border-color: rgba(239, 68, 68, 0.7);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5);
}
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
    .chapter-dnd-handle[b-6ghozffd2j] { color: rgba(49, 221, 227, 0.6); }
}

.study-detail-page[b-6ghozffd2j] {
    max-width: 1100px;
    margin: 0 auto;
}

.detail-container[b-6ghozffd2j] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.detail-header[b-6ghozffd2j] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-6ghozffd2j] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.15s ease;
}

.back-link:hover[b-6ghozffd2j] {
    color: #31DDE3;
}

.title-row[b-6ghozffd2j] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.study-cover-thumb[b-6ghozffd2j] {
    width: 96px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

.title-meta h1[b-6ghozffd2j] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    color: #ffffff;
    margin: 0 0 0.35rem;
    letter-spacing: 0.02em;
}

.byline[b-6ghozffd2j] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
}

.bundle-tagline[b-6ghozffd2j] {
    font-family: var(--ascend-font-secondary);
    color: rgba(49, 221, 227, 0.8);
    font-size: 0.78rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.description[b-6ghozffd2j] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* ── Resources panel (mirror StudyDetail) ───────────────────────────── */
.resources-header[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.resources-header h3[b-6ghozffd2j] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    font-size: 1.05rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.resources-header .resource-count[b-6ghozffd2j] {
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.75rem;
}

.resources-grid[b-6ghozffd2j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.resource-card[b-6ghozffd2j] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.15s ease;
}

.resource-card:hover[b-6ghozffd2j] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(49, 221, 227, 0.3);
}

.resource-card.is-primary[b-6ghozffd2j] {
    border-color: rgba(184, 133, 54, 0.4);
    background: rgba(184, 133, 54, 0.05);
}

.resource-card-link[b-6ghozffd2j] {
    display: flex;
    flex: 1;
    gap: 0.75rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.resource-card-link:hover .resource-title[b-6ghozffd2j] {
    color: #31DDE3;
}

.resource-cover[b-6ghozffd2j], .resource-cover-placeholder[b-6ghozffd2j] {
    width: 50px;
    height: 75px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.resource-cover-placeholder[b-6ghozffd2j] {
    background: rgba(49, 221, 227, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(49, 221, 227, 0.6);
    font-size: 1.5rem;
}

.resource-meta[b-6ghozffd2j] {
    flex: 1;
    min-width: 0;
}

.resource-title[b-6ghozffd2j] {
    color: #ffffff;
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    line-height: 1.2;
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.resource-author[b-6ghozffd2j] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
}

.resource-badges[b-6ghozffd2j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.resource-format-badge[b-6ghozffd2j],
.resource-video-badge[b-6ghozffd2j],
.resource-primary-badge[b-6ghozffd2j] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    background: rgba(49, 221, 227, 0.12);
    color: #31DDE3;
}

.resource-video-badge[b-6ghozffd2j] {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}

.resource-primary-badge[b-6ghozffd2j] {
    background: rgba(184, 133, 54, 0.18);
    color: var(--ascend-secondary-light);
}

/* Bug #6604 — study-backed resource (no linked book) badge. */
.resource-format-badge.study-backed[b-6ghozffd2j] {
    background: rgba(184, 133, 54, 0.18);
    color: var(--ascend-secondary-light);
}

/* Bug #6604/#6607 — collection toolbar. */
.header-actions[b-6ghozffd2j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* ── Chapter section + group headings ───────────────────────────────── */
.chapters-section[b-6ghozffd2j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-header[b-6ghozffd2j] {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.section-header:first-child[b-6ghozffd2j] {
    margin-top: 0;
}

.chapter-group-heading[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.3rem 0 0.4rem 0;
    border: none;
    border-bottom: 1px solid rgba(49, 221, 227, 0.18);
    background: transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: inherit;
    font: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.chapter-group-heading:hover[b-6ghozffd2j] {
    background: rgba(49, 221, 227, 0.04);
    border-bottom-color: rgba(49, 221, 227, 0.45);
}

.chapter-group-heading.merged:hover[b-6ghozffd2j] {
    border-bottom-color: rgba(184, 133, 54, 0.55);
}

.chapter-group-toggle[b-6ghozffd2j] {
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.12s ease;
    flex-shrink: 0;
}

.chapter-group-heading:hover .chapter-group-toggle[b-6ghozffd2j] {
    color: #31DDE3;
}

.chapter-group-heading.merged:hover .chapter-group-toggle[b-6ghozffd2j] {
    color: #B88536;
}

.collapse-controls[b-6ghozffd2j] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.collapse-control-btn[b-6ghozffd2j] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    padding: 0.3rem 0.65rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.12s ease;
}

.collapse-control-btn:hover[b-6ghozffd2j] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

/* Bulk-remove toggle in its active state — visual confirmation the page
   is now in selection mode (per-row checkboxes visible). */
.collapse-control-btn.is-active[b-6ghozffd2j] {
    background: rgba(184, 133, 54, 0.18);
    color: var(--ascend-secondary-light);
    border-color: rgba(184, 133, 54, 0.5);
}

.collapse-control-btn.is-active:hover[b-6ghozffd2j] {
    background: rgba(184, 133, 54, 0.28);
    border-color: #B88536;
    color: #ffffff;
}

/* ── Multi-select + bulk-remove ──────────────────────────────────────
   Checkbox per chapter row + select-all-in-group on each heading +
   floating action bar at the viewport bottom while 1+ items selected. */
.chapter-select-checkbox[b-6ghozffd2j],
.chapter-group-select[b-6ghozffd2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
}

.chapter-select-checkbox input[type="checkbox"][b-6ghozffd2j],
.chapter-group-select input[type="checkbox"][b-6ghozffd2j] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #31DDE3;
}

.chapter-group-heading-wrap[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.resource-remove-btn[b-6ghozffd2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--ascend-text-light);
    border-radius: 50px;
    width: 1.6rem;
    height: 1.6rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.resource-remove-btn:hover[b-6ghozffd2j],
.resource-remove-btn:focus[b-6ghozffd2j] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.6);
    color: var(--ascend-text-light);
    outline: none;
}

.resource-remove-btn[b-6ghozffd2j]  i {
    font-size: 14px;
}

.collection-action-message[b-6ghozffd2j] {
    margin: 0.75rem 0;
}

.chapter-row.is-selected .chapter-card[b-6ghozffd2j] {
    border-color: rgba(49, 221, 227, 0.6);
    background: rgba(49, 221, 227, 0.08);
}

.bulk-action-bar[b-6ghozffd2j] {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.98));
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    z-index: 50;
}

.bulk-action-count[b-6ghozffd2j] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.bulk-action-secondary[b-6ghozffd2j] {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    padding: 0.4rem 0.8rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.12s ease;
}

.bulk-action-secondary:hover[b-6ghozffd2j] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
}

.bulk-action-primary[b-6ghozffd2j] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border: none;
    border-radius: 7px;
    padding: 0.5rem 0.9rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s ease;
}

.bulk-action-primary:hover:not(:disabled)[b-6ghozffd2j] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.bulk-action-primary:disabled[b-6ghozffd2j] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .bulk-action-bar[b-6ghozffd2j] {
        left: 0.5rem;
        right: 0.5rem;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ── Reflection badge (parity port from StudyDetail) ──────────────────
   Inline icon at the end of the chapter title. Green journal-check =
   completed + has reflection. Muted journal-x = completed but no
   reflection (click to add). Both use bi-journal-* font icons. */
.reflection-badge[b-6ghozffd2j] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.375rem;
    vertical-align: middle;
    cursor: pointer;
}

.reflection-badge[b-6ghozffd2j]  i {
    font-size: 0.9rem;
}

.reflection-badge.has-reflection[b-6ghozffd2j]  i {
    color: #10b981;
}

.reflection-badge.no-reflection[b-6ghozffd2j]  i {
    color: rgba(255, 255, 255, 0.25);
}

.reflection-badge:hover[b-6ghozffd2j]  i {
    transform: scale(1.1);
    transition: transform 0.12s ease;
}

.chapter-group-heading.merged[b-6ghozffd2j] {
    border-bottom-color: rgba(184, 133, 54, 0.3);
}

.chapter-group-title[b-6ghozffd2j] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.chapter-group-heading.merged .chapter-group-title[b-6ghozffd2j] {
    color: #B88536;
}

.chapter-group-type[b-6ghozffd2j] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.1rem 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

/* Author byline next to the resource title in the chapter-group heading.
   Reads "by <Name>" — muted gold to differentiate from the title without
   competing for attention. */
.chapter-group-author[b-6ghozffd2j] {
    font-family: var(--ascend-font-secondary);
    font-style: italic;
    font-size: 0.78rem;
    color: rgba(184, 133, 54, 0.85);
}

/* Unattributed bucket — chapters whose SourceStudyId doesn't match any
   CollectionResource. Visually distinct from real book groups so it's
   obvious the chapters aren't from a known source. Heading and rows
   muted; same chevron+collapse interaction as real groups. */
.chapter-group-heading.unattributed[b-6ghozffd2j] {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.chapter-group-heading.unattributed:hover[b-6ghozffd2j] {
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

.chapter-group-heading.unattributed .chapter-group-title[b-6ghozffd2j] {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.chapter-group-count[b-6ghozffd2j] {
    margin-left: auto;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* ── Chapter row + card (mirror StudyDetail) ───────────────────────── */
.chapters-list[b-6ghozffd2j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chapter-row[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chapter-row.chapter-child[b-6ghozffd2j] {
    position: relative;
}

.chapter-row.chapter-child[b-6ghozffd2j]::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.chapter-row.chapter-child .chapter-order[b-6ghozffd2j] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.chapter-complete-btn[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: default;
    color: var(--ascend-text-secondary);
    flex-shrink: 0;
    padding: 0;
    transition: color 0.2s;
}

.chapter-complete-btn.completed[b-6ghozffd2j] {
    color: #10b981;
}

.chapter-card[b-6ghozffd2j] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.chapter-card:hover[b-6ghozffd2j] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.05);
    transform: translateX(4px);
}

.chapter-card.chapter-card-orphan[b-6ghozffd2j] {
    cursor: default;
    opacity: 0.55;
}

.chapter-card.chapter-card-orphan:hover[b-6ghozffd2j] {
    transform: none;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-color: rgba(49, 221, 227, 0.15);
}

.chapter-card:hover .chapter-arrow[b-6ghozffd2j] {
    color: #31DDE3;
}

.chapter-order[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: #31DDE3;
    flex-shrink: 0;
}

.chapter-info[b-6ghozffd2j] {
    flex: 1;
    min-width: 0;
}

.chapter-title[b-6ghozffd2j] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.35;
}

.completed-title[b-6ghozffd2j] {
    color: rgba(255, 255, 255, 0.5) !important;
}

.chapter-arrow[b-6ghozffd2j] {
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

/* ── Chapter row controls (mirror StudyDetail) ──────────────────────── */
.chapter-edit-buttons[b-6ghozffd2j] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.rename-btn[b-6ghozffd2j],
.reorder-btn[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
    /* #7758 - the row ends in a delete, so the whole cluster comes out at rest
       on touch rather than hiding behind a hover that never happens. */
    opacity: var(--hover-reveal-rest, 0);
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.chapter-row:hover .rename-btn[b-6ghozffd2j],
.chapter-row:hover .reorder-btn[b-6ghozffd2j] {
    opacity: 1;
}

.rename-btn:hover[b-6ghozffd2j],
.reorder-btn:hover[b-6ghozffd2j] {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
}

/* #7758 - red at REST, not only on :hover. Seven identical icon buttons in a
   row, the last of them a delete, is a mis-tap waiting to happen once touch
   shows them all at once. Matches StudyDetail, which already did this. */
.delete-chapter-btn[b-6ghozffd2j] {
    color: rgba(239, 68, 68, 0.7);
}

.delete-chapter-btn:hover[b-6ghozffd2j] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
}

/* Inline edit */
.chapter-card.editing[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    flex: 1;
}

.chapter-inline-edit[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    flex-wrap: wrap;
}

.inline-edit-row[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.inline-label[b-6ghozffd2j] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

[b-6ghozffd2j] .inline-input-sm {
    width: 55px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.25rem 0.35rem;
    text-align: center;
}

[b-6ghozffd2j] .inline-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    padding: 0.25rem 0.3rem;
}

[b-6ghozffd2j] .inline-select option {
    background: #0f172a;
    color: #ffffff;
}

.inline-edit-actions[b-6ghozffd2j] {
    display: flex;
    gap: 0.25rem;
}

.inline-save-btn[b-6ghozffd2j], .inline-cancel-btn[b-6ghozffd2j] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.inline-save-btn[b-6ghozffd2j] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.inline-save-btn:hover[b-6ghozffd2j] { background: rgba(16, 185, 129, 0.25); }

.inline-cancel-btn[b-6ghozffd2j] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}

.inline-cancel-btn:hover[b-6ghozffd2j] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
}

/* Rename */
.chapter-card.renaming[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    flex: 1;
}

[b-6ghozffd2j] .chapter-title-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 6px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    padding: 0.25rem 0.5rem;
    flex: 1;
    min-width: 0;
}

[b-6ghozffd2j] .chapter-title-input:focus {
    outline: none;
    border-color: #31DDE3;
    box-shadow: 0 0 0 2px rgba(49, 221, 227, 0.15);
}

.game-count-badge[b-6ghozffd2j] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    background: rgba(49, 221, 227, 0.12);
    color: #31DDE3;
}

.chapter-complete-btn[b-6ghozffd2j] {
    cursor: pointer;
}

/* ── Deferred-items bucket ───────────────────────────────────────────
   Mirrors StudyDetail's PBI #5593 bucket styling — collapsible panel at
   the bottom of the chapters section listing items snoozed from coach
   recommendations, with per-item un-defer action. */
.deferred-bucket[b-6ghozffd2j] {
    margin-top: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.deferred-bucket-toggle[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.65rem 0.9rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}

.deferred-bucket-toggle:hover[b-6ghozffd2j] {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.9);
}

.deferred-bucket-toggle[b-6ghozffd2j]  .bi-moon {
    color: rgba(184, 133, 54, 0.85);
}

.deferred-bucket-list[b-6ghozffd2j] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.4rem 0.4rem 0.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.deferred-item[b-6ghozffd2j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0.55rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.02);
}

.deferred-meta[b-6ghozffd2j] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.deferred-title[b-6ghozffd2j] {
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deferred-reason[b-6ghozffd2j] {
    color: rgba(184, 133, 54, 0.85);
    font-style: italic;
    font-size: 0.78rem;
}

.deferred-when[b-6ghozffd2j] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
}

.undefer-btn[b-6ghozffd2j] {
    flex-shrink: 0;
    background: rgba(49, 221, 227, 0.08);
    color: rgba(49, 221, 227, 0.85);
    border: 1px solid rgba(49, 221, 227, 0.3);
    padding: 0.35rem 0.7rem;
    border-radius: 7px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.undefer-btn:hover[b-6ghozffd2j] {
    border-color: rgba(49, 221, 227, 0.7);
    background: rgba(49, 221, 227, 0.14);
}

/* ── Mobile chapter-row layout fix ───────────────────────────────────
   Joe-flagged 2026-05-23 (docs/mobile-study.jpg): on narrow viewports
   the chapter title was breaking mid-word into single letters per line,
   especially on indented children (4.1, 4.2…). Two root causes:
     1. chapter-card was flex:1 but had no min-width:0, so flex children
        couldn't shrink below their content width.
     2. chapter-title used `word-break: break-word` which Chromium can
        interpret aggressively as break-all inside cramped flex slots.
   Fix: min-width:0 on the card + overflow-wrap:anywhere on the title
   so it wraps at spaces first and only character-breaks unbreakable
   strings (long URLs, code, etc.). Plus the @media (max-width:480px)
   block reduces padding, the order box, the indent margin, and hides
   the chevron so the title actually has room. */
.chapter-card[b-6ghozffd2j] {
    min-width: 0;
}

.chapter-title[b-6ghozffd2j] {
    word-break: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    /* Indented children get half the desktop indent on mobile so the
       chapter-card has more horizontal space. Applied via direct CSS
       since the Razor inline-style sets margin-left: level*24px. */
    .chapter-row.chapter-child[b-6ghozffd2j] {
        margin-left: 12px !important;
    }

    .chapter-card[b-6ghozffd2j] {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }

    .chapter-order[b-6ghozffd2j] {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    .chapter-title[b-6ghozffd2j] {
        font-size: 0.85rem;
    }

    /* Edit buttons wrap to a second row on phones so the chapter-card
       gets the full top row. Mirrors StudyDetail's pattern. */
    .chapter-row[b-6ghozffd2j] {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }
    .chapter-row .chapter-card[b-6ghozffd2j] { flex: 1 1 100%; }
    .chapter-edit-buttons[b-6ghozffd2j] {
        width: 100%;
        justify-content: flex-end;
        gap: 0.15rem;
    }
    .rename-btn[b-6ghozffd2j],
    .reorder-btn[b-6ghozffd2j] {
        width: 36px;
        height: 36px;
        opacity: 1;
    }
}

@media (max-width: 480px) {
    /* Drop the chevron on very-narrow phones — saves ~30px for the
       title, which is the load-bearing column. The chapter-card itself
       is still tappable as a link. */
    .chapter-arrow[b-6ghozffd2j] {
        display: none;
    }
    .chapter-row.chapter-child[b-6ghozffd2j] {
        margin-left: 8px !important;
    }
}

/* Add-chapter modal — the input lives inside <Modal>'s child render tree,
   which Blazor's scoped CSS treats as a deep descendant. Without ::deep,
   the inherited browser default gives black text on the modal's dark
   background — Joe-flagged 2026-06-02. Mirrors BookDetail.razor.css's
   pattern so the look is consistent across pages using shared form
   markup. */
/* #7266: fill, border, radius, colour, font, padding and the focus ring were
   a verbatim copy of the global .form-input in app.css (#7258); the
   placeholder had DRIFTED DOWN to 0.3 white - well under the global 0.5 and
   the lowest of any copy in the repo - so the global value wins. Only the box
   model is left. */
[b-6ghozffd2j] .form-input {
    width: 100%;
    box-sizing: border-box;
}

[b-6ghozffd2j] .form-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    display: block;
}

[b-6ghozffd2j] .form-error {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

/* #7078 - the Answers chip on a collection's chapter card. Visually the same
   affordance as the study page's, but written against the brand tokens rather
   than the raw gold literals that copy still carries (CLAUDE.md: scoped CSS
   references var(--token); the hex is drift tracked under Feature #6303). */
.answers-link[b-6ghozffd2j] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    /* #7905 - the 90% fade measured 4.20:1 on the chip's own 10% gold tint,
       below AA. The token at full strength clears it at 4.86:1, and the hover
       step is kept by brightening to --ascend-secondary-light there. */
    color: var(--ascend-secondary);
    background: color-mix(in srgb, var(--ascend-secondary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-secondary) 25%, transparent);
    border-radius: 50px;
    padding: 0.1rem 0.5rem;
    margin-left: 0.35rem;
    text-decoration: none;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.answers-link:hover[b-6ghozffd2j] {
    background: color-mix(in srgb, var(--ascend-secondary) 20%, transparent);
    border-color: color-mix(in srgb, var(--ascend-secondary) 40%, transparent);
    /* #7905 - plain gold measured 4.18:1 on the hover state's 20% tint, below
       AA: the brighter background eats the gain the rest state gets. The light
       step clears it at 5.07:1 and keeps hover a visible step up from rest. */
    color: var(--ascend-secondary-light);
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard Page - Dark Theme */

.dashboard-page[b-k0xku3ft4t] {
    padding: 2rem;
    max-width: 100%;
    overflow-x: hidden;
}

/* Card Loading Shimmer */
.card-loading[b-k0xku3ft4t] {
    padding: 1.5rem 0;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shimmer[b-k0xku3ft4t] {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(
        90deg,
        rgba(49, 221, 227, 0.03) 0%,
        rgba(49, 221, 227, 0.08) 50%,
        rgba(49, 221, 227, 0.03) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-k0xku3ft4t 1.5s ease-in-out infinite;
}

@keyframes shimmer-b-k0xku3ft4t {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Dashboard Grid */
.dashboard-grid[b-k0xku3ft4t] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

[b-k0xku3ft4t] .training-card,
[b-k0xku3ft4t] .reflections-card,
[b-k0xku3ft4t] .todays-tasks-card,
[b-k0xku3ft4t] .pillar-recommendations,
[b-k0xku3ft4t] .session-brief-card,
/* #6133 - the coach console hero and an active reactivation moment span the
   full dashboard width instead of being boxed in a 2-column slot. */
[b-k0xku3ft4t] .coach-console-card,
[b-k0xku3ft4t] .reactivation-card,
/* #6365 - THE MIRROR reads as a full-width observation, not a half-width tile
   (it was the only single-column item on the page - dev smoke 2026-07-09). */
[b-k0xku3ft4t] .mirror-card,
/* #6635 - the Skill Checkpoint LEAD spans the full dashboard width: it is the
   five-pillar read the page leads with, not a half-width tile. */
[b-k0xku3ft4t] .scv2-lead {
    grid-column: span 2;
}

/* Dashboard card overrides handled by shared Card component */

/* .source-item/-icon/-content/-label/-value -> <StatItem> (#6347). The three
   per-platform icon tints (white / green / blue) become the one shared
   cyan-to-gold icon square; the platform logos come in via IconContent. */

/* Opening Stats by Color */
.openings-by-color[b-k0xku3ft4t] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.opening-section[b-k0xku3ft4t] {
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.opening-section:hover[b-k0xku3ft4t] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(49, 221, 227, 0.3);
}

.opening-section.white .color-indicator[b-k0xku3ft4t] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.4);
}

.opening-section.black .color-indicator[b-k0xku3ft4t] {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.6), rgba(60, 60, 60, 0.5));
    border-color: rgba(100, 100, 100, 0.5);
}

.color-indicator[b-k0xku3ft4t] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 50px;
    border: 1px solid;
    margin-bottom: 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
}

.opening-name[b-k0xku3ft4t] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ascend-accent);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.opening-details[b-k0xku3ft4t] {
    display: flex;
    justify-content: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Sync Button */
.btn-sync[b-k0xku3ft4t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-sync:hover:not(:disabled)[b-k0xku3ft4t] {
    background: rgba(49, 221, 227, 0.15);
    border-color: var(--ascend-accent);
    transform: translateY(-1px);
}

.btn-sync:disabled[b-k0xku3ft4t] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Recent Activity */
.activity-list[b-k0xku3ft4t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item[b-k0xku3ft4t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.activity-item:hover[b-k0xku3ft4t] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(49, 221, 227, 0.3);
    transform: translateX(4px);
}

.activity-icon[b-k0xku3ft4t] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border: 1px solid rgba(49, 221, 227, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-content[b-k0xku3ft4t] {
    flex: 1;
    min-width: 0;
}

.activity-title[b-k0xku3ft4t] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ascend-text-light);
    margin-bottom: 0.25rem;
}

.activity-description[b-k0xku3ft4t] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
}

.activity-timestamp[b-k0xku3ft4t] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.activity-badge[b-k0xku3ft4t] {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.activity-badge.badge-success[b-k0xku3ft4t] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.2));
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.activity-badge.badge-error[b-k0xku3ft4t] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(248, 113, 113, 0.2));
    color: var(--ascend-text-light);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.activity-badge.badge-neutral[b-k0xku3ft4t] {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2), rgba(209, 213, 219, 0.2));
    color: var(--ascend-text-light);
    border: 1px solid rgba(156, 163, 175, 0.3);
}

/* Refreshing Indicator */
.refreshing-indicator[b-k0xku3ft4t] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
}

/* .sync-btn moved to global app.css (P4 cleanup) */

/* Getting Started Card */
[b-k0xku3ft4t] .getting-started-card {
    grid-column: 1 / -1;
}

/* Assistant Header */
.gs-assistant-header[b-k0xku3ft4t] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.gs-assistant-icon[b-k0xku3ft4t] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.2), rgba(49, 221, 227, 0.15));
    border: 1px solid rgba(184, 133, 54, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Progress Bar */
.gs-progress[b-k0xku3ft4t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gs-progress-bar[b-k0xku3ft4t] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.gs-progress-fill[b-k0xku3ft4t] {
    height: 100%;
    background: linear-gradient(90deg, #31DDE3, #10b981);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.gs-progress-label[b-k0xku3ft4t] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    /* #7543 - was rgba(255,255,255,0.45): 4.48:1 measured by axe once the card
       became measurable, a hair under the 4.5:1 AA floor. */
    color: var(--ascend-text-muted);
    white-space: nowrap;
}

/* Steps */
.gs-steps[b-k0xku3ft4t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gs-step[b-k0xku3ft4t] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.gs-step:hover[b-k0xku3ft4t] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(49, 221, 227, 0.3);
}

.gs-step-complete[b-k0xku3ft4t] {
    border-color: rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.03);
}

.gs-step-complete:hover[b-k0xku3ft4t] {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.05);
}

/* Check / Circle */
.gs-step-check[b-k0xku3ft4t] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.gs-step-circle[b-k0xku3ft4t] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: transparent;
}

.gs-step-content[b-k0xku3ft4t] {
    flex: 1;
    min-width: 0;
}

.gs-step-title[b-k0xku3ft4t] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ascend-text-light);
    margin: 0 0 0.25rem 0;
    letter-spacing: 0.02em;
}

.gs-step-title-complete[b-k0xku3ft4t] {
    color: rgba(255, 255, 255, 0.5);
}

.gs-step-status[b-k0xku3ft4t] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: #10b981;
    margin: 0;
}

.gs-step-description[b-k0xku3ft4t] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

/* Path sub-descriptions (e.g., "Opening book?" / "GM game collection?") */
.gs-step-paths[b-k0xku3ft4t] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gs-path[b-k0xku3ft4t] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

.gs-path-label[b-k0xku3ft4t] {
    color: var(--ascend-accent);
    font-weight: 600;
}

.gs-path-text[b-k0xku3ft4t] {
    color: rgba(255, 255, 255, 0.5);
}

.gs-step-actions[b-k0xku3ft4t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.gs-platform-btn[b-k0xku3ft4t] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gs-platform-btn .gs-platform-logo[b-k0xku3ft4t] {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.gs-platform-btn.lichess[b-k0xku3ft4t] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.gs-platform-btn.lichess:hover[b-k0xku3ft4t] {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.gs-platform-btn.chesscom[b-k0xku3ft4t] {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #6ecc7e;
}

.gs-platform-btn.chesscom:hover[b-k0xku3ft4t] {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* #7020 - World Chess. No logo asset exists, so the button carries a Font
   Awesome glyph; FA injects the SVG without the scope attribute, hence ::deep. */
.gs-platform-btn.worldchess[b-k0xku3ft4t] {
    background: color-mix(in srgb, var(--ascend-accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 40%, transparent);
    color: var(--ascend-accent);
}

.gs-platform-btn.worldchess:hover[b-k0xku3ft4t] {
    background: color-mix(in srgb, var(--ascend-accent) 25%, transparent);
    border-color: color-mix(in srgb, var(--ascend-accent) 60%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ascend-accent) 15%, transparent);
}

.gs-platform-btn.worldchess[b-k0xku3ft4t]  i {
    font-size: 18px;
}

.gs-action-btn[b-k0xku3ft4t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
}

.gs-action-btn:hover[b-k0xku3ft4t] {
    background: rgba(49, 221, 227, 0.2);
    border-color: var(--ascend-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.2);
}

.gs-dismiss[b-k0xku3ft4t] {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gs-dismiss-btn[b-k0xku3ft4t] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gs-dismiss-btn:hover[b-k0xku3ft4t] {
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-page[b-k0xku3ft4t] {
        padding: 1rem;
    }

    .dashboard-grid[b-k0xku3ft4t] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    [b-k0xku3ft4t] .activity-card,
    [b-k0xku3ft4t] .training-card,
    [b-k0xku3ft4t] .reflections-card,
    [b-k0xku3ft4t] .todays-tasks-card,
    [b-k0xku3ft4t] .pillar-recommendations,
    [b-k0xku3ft4t] .session-brief-card,
    /* #6133 added these to the desktop span-2 rule but not here; on the
       single-column mobile grid a leftover span-2 forces a phantom implicit
       column, shrinking the card's 1fr track so its content only fills ~half
       the width. Collapse them to one column like the sibling hero cards. */
    [b-k0xku3ft4t] .coach-console-card,
    [b-k0xku3ft4t] .reactivation-card,
    /* #6365 mobile: same phantom-column bug as #6133 above - the Mirror card's
       desktop span-2 must collapse here or every sibling gets squeezed into a
       half-width implicit column (founding badge stretched into a giant empty
       slab, console one-word lines; prod mobile 2026-07-10). Guarded by
       DashboardGridSpanParityTests. */
    [b-k0xku3ft4t] .mirror-card,
    /* #6635 - Skill Checkpoint lead collapses with the other span-2 heroes. */
    [b-k0xku3ft4t] .scv2-lead {
        grid-column: span 1;
    }

    [b-k0xku3ft4t] .ascend-card {
        padding: 1.5rem;
    }

    /* ===== #8016 PHONE TODAY (owner decision 9) =====
       At 768px and below the reading order becomes: the Mirror, one next
       action, the re-activation moment when there is one (#8293), today's
       plan, the Skill Checkpoint, then the Training Assistant. Measured before
       #8016: the dashboard was 213 words and 1.4 screens before its main
       action at 390, and the best Mirror line sat 4.8 screens down.

       #8286 - THAT ORDER IS THE DOM ORDER. #8016 first did it with CSS `order`
       on the grid items, which left the DOM in the desktop order, so keyboard
       focus and a screen reader followed a different page from the one on
       screen (WCAG 2.4.3 / 1.3.2). This file now sets no `order` anywhere
       (PhoneTodayCssContractTests pins that). Dashboard.razor renders a block
       whose place differs by width in both places, in the .pt-phone-only /
       .pt-desktop-only slots defined at the end of this file, and every view
       reads top to bottom in DOM order. */

    /* Today's plan compact: the plan rows carry a full "Method: ... Why: ..."
       paragraph, measured at about 51 words each at 11.2px italic. On a phone
       the first line is what is read; the rest stays reachable by opening the
       task. Clamping, not deleting - the text is still in the DOM for a screen
       reader, and desktop is untouched.

       #8293 - the next action's "why" gets the same treatment. A plan pick
       carries that same "From your current study plan: Method: ... Why: ..."
       paragraph (7 lines at 390), which made the hero 385px tall, so with a
       real Mirror above it the "Start now" button sat at 868-921 at 390x844,
       below the fold. Two lines keep the hero's heading, its reason's first
       sentence and its button in the first screen; Start opens the task, which
       carries the full method. Only the pick branch (.hero-pick) is clamped
       (#8293 F3): the hard recommend's message and the empty state's message,
       the only instruction on that card, are short and must read whole. */
    .dashboard-page.phone-today .dashboard-grid[b-k0xku3ft4t]  .next-action-hero.hero-pick .hero-message,
    .dashboard-page.phone-today .dashboard-grid[b-k0xku3ft4t]  .cc-pick-rationale,
    .dashboard-page.phone-today .dashboard-grid[b-k0xku3ft4t]  .activity-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* The checkpoint as one row: the five pillar tiles wrap to a single
       scrollable band instead of five stacked cards. #8263: a band that
       scrolls must be scrollable from a keyboard, and the tiles hold nothing
       focusable - the Dashboard passes AxesAsScrollingRow so the card makes
       the band itself one named tab stop (kept only while it overflows, by
       /js/keyboard-scroll.js, so desktop gains no dead stop). Since #8286 only
       the phone copy of the card (the .pt-phone-only slot) gets it; the
       desktop copy is a grid and never a stop. Change this rule and that
       parameter together. */
    .dashboard-page.phone-today .dashboard-grid[b-k0xku3ft4t]  .scv2-lead .scv2-axes {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-page.phone-today .dashboard-grid[b-k0xku3ft4t]  .scv2-lead .scv2-axes > * {
        flex: 0 0 auto;
        min-width: 7.5rem;
    }

    .opening-details[b-k0xku3ft4t] {
        flex-direction: row;
        gap: 1rem;
    }

    .opening-section[b-k0xku3ft4t] {
        padding: 1rem;
    }

    .activity-item[b-k0xku3ft4t] {
        flex-wrap: wrap;
    }

    .activity-badge[b-k0xku3ft4t] {
        width: 100%;
        text-align: center;
    }

    .gs-step[b-k0xku3ft4t] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .gs-step-actions[b-k0xku3ft4t] {
        flex-direction: column;
    }

    .gs-platform-btn[b-k0xku3ft4t],
    .gs-action-btn[b-k0xku3ft4t] {
        width: 100%;
        justify-content: center;
    }

    .gs-progress[b-k0xku3ft4t] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .gs-progress-label[b-k0xku3ft4t] {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .dashboard-page[b-k0xku3ft4t] {
        padding: 0.5rem;
    }

    [b-k0xku3ft4t] .ascend-card.dashboard-card {
        padding: 1rem;
        border-radius: 16px;
    }

    .dashboard-grid[b-k0xku3ft4t] {
        gap: 1rem;
    }

    /* Page-owned title sizing at the smallest breakpoint. Targets the
     * Dashboard's own .dashboard-card-title wrapper rather than reaching into
     * the shared Card's reserved .card-title vocabulary. Shared <Card Title=...>
     * cards get their responsive title sizing from Card.razor.css. */
    .dashboard-card-title[b-k0xku3ft4t] {
        font-size: 1.1rem;
    }

    .opening-details[b-k0xku3ft4t] {
        gap: 0.75rem;
    }

    .activity-item[b-k0xku3ft4t] {
        gap: 0.5rem;
    }

    .gs-step[b-k0xku3ft4t] {
        padding: 0.75rem;
    }
}

/* Study Streak Card */
.streak-hero[b-k0xku3ft4t] {
    text-align: center;
    padding: 0.75rem 0 0.25rem;
}

/* Glowing brand ring behind the streak count. */
.streak-ring[b-k0xku3ft4t] {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 0;
}

.streak-ring[b-k0xku3ft4t]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 130px;
    transform: translate(-50%, -48%);
    background: radial-gradient(circle, rgba(49, 221, 227, 0.18), rgba(184, 133, 54, 0.08) 55%, transparent 72%);
    z-index: 0;
    pointer-events: none;
}

.streak-number[b-k0xku3ft4t] {
    position: relative;
    z-index: 1;
    font-family: var(--ascend-font-primary);
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #31DDE3 0%, #B88536 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #31DDE3; /* fallback */
}

.streak-unit[b-k0xku3ft4t] {
    position: relative;
    z-index: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
}

.streak-label[b-k0xku3ft4t] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.15rem;
}

/* Quiet "best run" chip — only rendered when it beats the current streak. */
.streak-best[b-k0xku3ft4t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0.75rem auto 0;
    padding: 0.35rem 0.9rem;
    width: fit-content;
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 50px;
    background: rgba(184, 133, 54, 0.08);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}

.streak-best strong[b-k0xku3ft4t] {
    color: #ffffff;
    font-weight: 600;
}

.streak-heatmap-wrap[b-k0xku3ft4t] {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(49, 221, 227, 0.12);
}

.streak-heatmap-caption[b-k0xku3ft4t] {
    display: block;
    text-align: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.65rem;
}

.streak-heatmap[b-k0xku3ft4t] {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.heatmap-cell[b-k0xku3ft4t] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.heatmap-cell.active[b-k0xku3ft4t] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.8), rgba(49, 221, 227, 0.45));
    box-shadow: 0 0 5px rgba(49, 221, 227, 0.35);
}

/* Today gets a gold marker so the user's eye lands on "now". */
.heatmap-cell.today[b-k0xku3ft4t] {
    outline: 1.5px solid rgba(184, 133, 54, 0.9);
    outline-offset: 1px;
}

.heatmap-cell.today.active[b-k0xku3ft4t] {
    background: linear-gradient(135deg, #31DDE3, #B88536);
    box-shadow: 0 0 7px rgba(184, 133, 54, 0.45);
}

/* #6946 - the span-2 rule for .todays-tasks-card lives in the `::deep` group at
   the top of this file. A duplicate was written here WITHOUT ::deep, so it only
   ever compiled to `.todays-tasks-card[b-xxx]` and matched nothing (the class
   rides on a child <Card>, which never carries this page's scope attribute).
   Deleted rather than ::deep-ed: the live rule above already does exactly this. */

.tasks-header-row[b-k0xku3ft4t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.tasks-day-label[b-k0xku3ft4t] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    font-size: 1rem;
}

.tasks-theme[b-k0xku3ft4t] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    flex: 1;
}

.tasks-progress[b-k0xku3ft4t] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-accent);
    font-size: 0.9rem;
}

.tasks-progress-bar-wrap[b-k0xku3ft4t] {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.tasks-progress-bar[b-k0xku3ft4t] {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #31DDE3);
    transition: width 0.3s ease;
}

.tasks-list[b-k0xku3ft4t] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.task-row[b-k0xku3ft4t] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.task-row:hover[b-k0xku3ft4t] {
    background: rgba(49, 221, 227, 0.04);
}

.task-row.task-done[b-k0xku3ft4t] {
    opacity: 0.5;
}

.task-row.task-done .task-title[b-k0xku3ft4t] {
    text-decoration: line-through;
}

.task-check[b-k0xku3ft4t] {
    background: none;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    transition: color 0.15s;
}

.task-check.checked[b-k0xku3ft4t] {
    color: #10b981;
}

.task-check:hover[b-k0xku3ft4t] {
    color: var(--ascend-accent);
}

.task-info[b-k0xku3ft4t] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.task-title[b-k0xku3ft4t] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-duration[b-k0xku3ft4t] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    flex-shrink: 0;
}

/* #6946 - the mobile span-1 collapse for .todays-tasks-card is already in the
   `::deep` group inside the 768px block above. The duplicate that stood here
   lacked ::deep and never matched; deleted, not revived. */

/* Today's Tasks Hero — top of dashboard, full-width */
.todays-tasks-hero[b-k0xku3ft4t] {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 10px 40px rgba(4, 32, 71, 0.3), 0 0 20px rgba(49, 221, 227, 0.08);
    max-width: 100%;
    overflow: hidden;
}

.tasks-hero-header[b-k0xku3ft4t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.tasks-hero-title[b-k0xku3ft4t] {
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    margin: 0;
}

.tasks-hero-meta[b-k0xku3ft4t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.tasks-hero-day[b-k0xku3ft4t] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-accent);
    font-size: 1rem;
}

.tasks-hero-theme[b-k0xku3ft4t] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
}

.tasks-hero-progress[b-k0xku3ft4t] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-accent);
    font-size: 0.95rem;
    margin-left: auto;
}

.tasks-hero-message[b-k0xku3ft4t] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

.task-hero-row[b-k0xku3ft4t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    transition: all 0.15s ease;
}

.task-hero-row:hover[b-k0xku3ft4t] {
    background: rgba(49, 221, 227, 0.04);
}

.task-hero-row.task-done[b-k0xku3ft4t] {
    opacity: 0.45;
}

.task-hero-row.task-done .task-hero-title[b-k0xku3ft4t] {
    text-decoration: line-through;
}

.task-hero-info[b-k0xku3ft4t] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.task-hero-title[b-k0xku3ft4t] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9rem;
    font-family: var(--ascend-font-primary);
}

.task-hero-desc[b-k0xku3ft4t] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-hero-duration[b-k0xku3ft4t] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.task-skipped .task-hero-title[b-k0xku3ft4t] { text-decoration: line-through; color: rgba(255, 255, 255, 0.35); }

.task-skip-btn[b-k0xku3ft4t] {
    background: none; border: none; color: var(--ascend-text-secondary);
    cursor: pointer; padding: 0.2rem; font-size: 0.85rem; flex-shrink: 0;
    transition: color 0.15s;
}
.task-skip-btn:hover[b-k0xku3ft4t] { color: #fbbf24; }

/* Skip dialog content (rendered inside shared Modal ChildContent/Footer) */
.skip-dialog-hint[b-k0xku3ft4t] {
    font-family: var(--ascend-font-secondary); font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5); margin: 0 0 1rem;
}
.skip-reason-options[b-k0xku3ft4t] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.skip-reason-btn[b-k0xku3ft4t] {
    padding: 0.35rem 0.75rem; font-family: var(--ascend-font-secondary);
    font-size: 0.78rem; border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px; background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: all 0.15s;
}
.skip-reason-btn:hover[b-k0xku3ft4t] { border-color: rgba(49, 221, 227, 0.3); }
.skip-reason-btn.selected[b-k0xku3ft4t] { background: rgba(49, 221, 227, 0.15); border-color: #31DDE3; color: #31DDE3; }
.skip-reason-input[b-k0xku3ft4t] {
    width: 100%; padding: 0.5rem 0.75rem; font-family: var(--ascend-font-secondary);
    font-size: 0.85rem; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
    color: #fff; margin-bottom: 1rem;
}
.skip-reason-input:focus[b-k0xku3ft4t] { outline: none; border-color: rgba(49, 221, 227, 0.4); }
.skip-reason-input[b-k0xku3ft4t]::placeholder { color: rgba(255, 255, 255, 0.3); }
.skip-confirm-btn[b-k0xku3ft4t] {
    padding: 0.5rem 1.5rem; background: #fbbf24; color: #0a1628;
    border: none; border-radius: 50px; font-family: var(--ascend-font-secondary);
    font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.skip-cancel-btn[b-k0xku3ft4t] {
    padding: 0.5rem 1.5rem; background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px; font-family: var(--ascend-font-secondary);
    font-size: 0.85rem; cursor: pointer;
}

/* #5489 — Find-a-Coach discovery card styles moved to
   Components/Dashboard/FindACoachPromoCard.razor.css */


/* #7736 — the Get-Started card's actions measured 212x38 and its dismiss
   203x35. These are the first controls a new member ever taps. */
@media (hover: none) and (pointer: coarse) {
    .gs-action-btn[b-k0xku3ft4t],
    .gs-platform-btn[b-k0xku3ft4t],
    .gs-dismiss-btn[b-k0xku3ft4t] {
        min-height: var(--touch-target);
    }
}

/* ===== #8286 PHONE-TODAY WIDTH SLOTS =====
   A block whose place differs between a phone and a desktop is rendered in
   both places (Dashboard.razor, AtDesktopPlace): one copy in a .pt-phone-only
   slot, one in a .pt-desktop-only slot. Exactly one is shown at any width.
   The hidden one is display:none, which also takes it out of the tab order
   and the accessibility tree, so a keyboard and a screen reader meet the same
   page the eye does. The shown one is display:contents, so the card inside
   stays the grid's item and keeps its own span and gap. The slots exist only
   while phone-today is on; flag off renders no slot at all. The breakpoint is
   the phone-today one (768px). */
.pt-phone-only[b-k0xku3ft4t] {
    display: none;
}

.pt-desktop-only[b-k0xku3ft4t] {
    display: contents;
}

/* The #7296 grid-blowout guard, carried through the slots. app.css gives
   every grid item `min-width: 0` with `.dashboard-grid > *`, but inside a slot
   that `*` is the slot, which has no box, so the card inside it (the grid's
   real item) fell back to `min-width: auto`, a min-content minimum. On a phone
   this grid is a single `1fr` track (the 768px rule above), so one card that
   will not get narrower sizes the track and every card on the page with it.
   Measured in review round 2: with a Skill Checkpoint on the page, its
   scrolling row made every card 685px wide in a 358px grid at 390. html and
   body are overflow-x:hidden, so the right side of every card was cut off
   with no way to scroll to it. Unconditional, because the desktop slot sits
   in the 2-column `1fr` grid down to 769px. PhoneTodayCssContractTests pins
   this rule; PhoneTodayFirstScreenTests measures the result. */
.pt-phone-only[b-k0xku3ft4t] >  *,
.pt-desktop-only[b-k0xku3ft4t] >  * {
    min-width: 0;
}

@media (max-width: 768px) {
    .pt-phone-only[b-k0xku3ft4t] {
        display: contents;
    }

    .pt-desktop-only[b-k0xku3ft4t] {
        display: none;
    }
}
/* /Components/Pages/DeviationDrill.razor.rz.scp.css */
.deviation-drill-page[b-5evrs514aw] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Loading */

/* Setup */
.setup-container[b-5evrs514aw] {
    max-width: 700px;
    margin: 0 auto;
}

.setup-header[b-5evrs514aw] {
    text-align: center;
    margin-bottom: 2rem;
}

.setup-title[b-5evrs514aw] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
}

.setup-subtitle[b-5evrs514aw] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* #6681 - VERIFIED by rendering at 390x844: "Build Repertoire" + "Go to Games"
   (both icon buttons) need 370px side by side but .empty-state-card's 2rem
   padding leaves ~310px on a phone, clipping "Build Repertoire" by ~18px.
   #8844 - the two exits are on the shared .action-row .action-row--center: a
   full-width column on a phone (one width, where the old wrapping row stacked
   them at their own label widths) and a centered row above 480px. This rule
   keeps only the spacing. */
.empty-actions[b-5evrs514aw] {
    margin-top: 1.5rem;
}

.section-heading[b-5evrs514aw] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.section-description[b-5evrs514aw] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
}

/* Deviation preview list */
.deviation-preview-list[b-5evrs514aw] {
    text-align: left;
}

.deviation-preview[b-5evrs514aw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.deviation-move-num[b-5evrs514aw] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    min-width: 55px;
}

.deviation-opening[b-5evrs514aw] {
    color: rgba(255, 255, 255, 0.7);
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deviation-detail[b-5evrs514aw] {
    color: rgba(255, 255, 255, 0.5);
    flex: 1;
}

.deviation-detail .played[b-5evrs514aw] {
    color: #ef4444;
    font-weight: 500;
}

.deviation-detail .expected[b-5evrs514aw] {
    color: #10b981;
    font-weight: 500;
}

.deviation-count[b-5evrs514aw] {
    color: rgba(184, 133, 54, 0.8);
    font-weight: 600;
    font-size: 0.75rem;
}

.deviation-more[b-5evrs514aw] {
    text-align: center;
    padding: 0.5rem;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

.setup-actions[b-5evrs514aw] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Drill active */
.drill-container[b-5evrs514aw] {
    display: grid;
    grid-template-columns: minmax(300px, 600px) 320px;
    gap: 2rem;
    justify-content: center;
}

.board-column[b-5evrs514aw] {
    position: relative;
}

.board-area[b-5evrs514aw] {
    aspect-ratio: 1;
    width: 100%;
    position: relative;
}

/* Feedback overlay */
.feedback-overlay[b-5evrs514aw] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    z-index: 10;
    animation: slideUp-b-5evrs514aw 0.2s ease;
}

@keyframes slideUp-b-5evrs514aw {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.feedback-correct[b-5evrs514aw] {
    background: rgba(16, 185, 129, 0.9);
    color: var(--ascend-primary);
}

.feedback-incorrect[b-5evrs514aw] {
    background: rgba(239, 68, 68, 0.9);
    color: #ffffff;
}

.feedback-icon[b-5evrs514aw] {
    font-size: 1.25rem;
}

/* Sidebar */
.sidebar-column[b-5evrs514aw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.drill-info-card[b-5evrs514aw] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1.25rem;
}

/* Progress */
.progress-header[b-5evrs514aw] {
    margin-bottom: 1.25rem;
}

.progress-label[b-5evrs514aw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 0.5rem;
}

.progress-bar[b-5evrs514aw] {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-5evrs514aw] {
    height: 100%;
    background: linear-gradient(90deg, #31DDE3, #B88536);
    transition: width 0.3s ease;
    border-radius: 2px;
}

/* Position context */
.position-context[b-5evrs514aw] {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.context-opening[b-5evrs514aw] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: #ffffff;
    margin-bottom: 0.35rem;
}

.context-move[b-5evrs514aw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(49, 221, 227, 0.7);
    margin-bottom: 0.35rem;
}

.context-history[b-5evrs514aw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.context-history .played[b-5evrs514aw] {
    color: #ef4444;
    font-weight: 500;
}
.accent-value[b-5evrs514aw] { color: #31DDE3; }

/* Complete */
.complete-container[b-5evrs514aw] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.complete-card[b-5evrs514aw] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 3rem;
    max-width: 550px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    position: relative;
    overflow: hidden;
}

.complete-card[b-5evrs514aw]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
}

.complete-icon[b-5evrs514aw] {
    margin-bottom: 1rem;
}

.complete-title[b-5evrs514aw] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.complete-actions[b-5evrs514aw] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}/* Mobile */
@media (max-width: 768px) {
    .drill-container[b-5evrs514aw] {
        grid-template-columns: 1fr;
    }

    .deviation-preview[b-5evrs514aw] {
        flex-wrap: wrap;
    }

    .deviation-opening[b-5evrs514aw] {
        min-width: auto;
    }
}
/* /Components/Pages/EndgameLessonDetail.razor.rz.scp.css */
.lesson-detail-page[b-knn6l73djh] {
    padding: 2rem;
}

/* #9053 part (b) - the reading cap, one element in from the outer div: a page that
   hosts a DrillShell does not cap its outer div (DrillShellConvergenceTests RULE
   CAP). It caps the lesson's reading width, not the board, which the lesson grid
   and the shell size. */
.lesson-detail-body[b-knn6l73djh] {
    max-width: 1300px;
    margin: 0 auto;
}

.lesson-layout[b-knn6l73djh] {
    display: grid;
    grid-template-columns: minmax(360px, 480px) 1fr;
    gap: 2rem;
    align-items: start;
}

.board-column[b-knn6l73djh] {
    position: sticky;
    top: 1rem;
}

/* #7110 - whose move it is, stated by this page above its own board frame. */
.board-side-line[b-knn6l73djh] {
    display: flex;
    justify-content: center;
    margin-bottom: 0.6rem;
}

/* #9053 part (b) review - above 768px the DrillVerdictChip straddles the frame's top
   edge (half its ~24px height above it), so the side line keeps clear room for that
   half: at 0.6rem the chip covered the pill's lower border at 1440. */
@media (min-width: 768.01px) {
    .board-side-line[b-knn6l73djh] {
        margin-bottom: 1.25rem;
    }
}

/* #9053 part (b) - the board frame is a .drill-canvas (app.css), so it wears the
   shared card (gradient, cyan border, glow) and, while a verdict is up, the shared
   verdict color on that border and glow ([data-verdict] > .drill-canvas). Only the
   page's tighter padding and corner stay here. The always-on cyan practice-mode
   ring this frame used to draw is gone: it out-specified the verdict glow, so the
   frame would never have changed color. */
.board-frame[b-knn6l73djh] {
    padding: 1rem;
    border-radius: 8px;
}

.demo-tabs[b-knn6l73djh] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.demo-tab[b-knn6l73djh] {
    flex: 1;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px 12px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.demo-tab:hover:not(.active)[b-knn6l73djh] {
    background: rgba(49, 221, 227, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.demo-tab.active[b-knn6l73djh] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.18), rgba(49, 221, 227, 0.06));
    border-color: rgba(49, 221, 227, 0.55);
    color: #ffffff;
    box-shadow: inset 0 -2px 0 0 #31DDE3;
}

.board-controls[b-knn6l73djh] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: center;
}

/* Practice-mode framing — sits above the board controls and makes
   three load-bearing facts visible: (1) you're sparring the engine,
   not following a script; (2) the mastery rule and the streak goal;
   (3) the displayed solution is a teaching walkthrough, NOT the line
   the engine will play. Without this panel users mistook the example
   solution for the only correct continuation and were confused when
   the engine deviated. */
.practice-framing[b-knn6l73djh] {
    display: flex;
    flex-direction: column;
    /* #8665 - "the endgame mastery explanation is cramped on a laptop screen".
       Four wrapped two-line statements sat 7px apart in a box with 14px of
       padding, under a column of boxes 12px apart, so the mastery rule read as
       one dense block. The gaps, padding and leading below give each statement
       its own line of sight; the stacked band (max-width: 1024px) also gives
       these panels more width. */
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.15);
}

.practice-framing-line[b-knn6l73djh] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    align-items: start;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.875rem;
    line-height: 1.55;
}

.practice-framing-line[b-knn6l73djh]  i {
    margin-top: 0.15rem;
    color: var(--ascend-accent);
    font-size: 1rem;
}

.practice-framing-line strong[b-knn6l73djh] {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.solution-caveat[b-knn6l73djh] {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.5;
    font-style: italic;
}

.content-column[b-knn6l73djh] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lesson-header[b-knn6l73djh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lesson-tier-badge[b-knn6l73djh],
.lesson-goal-badge[b-knn6l73djh],
.lesson-rules-badge[b-knn6l73djh],
.lesson-time-badge[b-knn6l73djh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lesson-rules-badge[b-knn6l73djh] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.lesson-rules-badge[b-knn6l73djh]  i {
    font-size: 0.85rem;
}

.lesson-tier-badge[b-knn6l73djh] {
    background: rgba(184, 133, 54, 0.15);
    color: var(--ascend-secondary);
    border: 1px solid rgba(184, 133, 54, 0.3);
}

.lesson-goal-badge[b-knn6l73djh] {
    background: rgba(49, 221, 227, 0.1);
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.3);
}

.lesson-time-badge[b-knn6l73djh] {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lesson-section[b-knn6l73djh] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}

.section-heading[b-knn6l73djh] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    color: var(--ascend-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.warning-section[b-knn6l73djh] {
    border-color: rgba(251, 191, 36, 0.25);
}

.warning-section .section-heading[b-knn6l73djh] {
    color: #fbbf24;
}

.solution-section[b-knn6l73djh] {
    border-color: rgba(16, 185, 129, 0.25);
}

.solution-section .section-heading[b-knn6l73djh] {
    color: #10b981;
}

.solution-pgn[b-knn6l73djh] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.03);
    padding: 0.85rem 1rem;
    border-radius: 8px;
    overflow-x: auto;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

.concepts-text[b-knn6l73djh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
}

.concepts-text[b-knn6l73djh]  p {
    margin: 0 0 0.85rem;
}

.concepts-text[b-knn6l73djh]  p:last-child {
    margin-bottom: 0;
}

.concepts-text[b-knn6l73djh]  strong {
    color: #ffffff;
    font-weight: 600;
}

/* Authored lesson markdown can carry headings; the global h1-h6 navy is
   unreadable on this dark panel (same class as the coach-chat canary bug). */
.concepts-text[b-knn6l73djh]  h1,
.concepts-text[b-knn6l73djh]  h2,
.concepts-text[b-knn6l73djh]  h3,
.concepts-text[b-knn6l73djh]  h4,
.concepts-text[b-knn6l73djh]  h5,
.concepts-text[b-knn6l73djh]  h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff !important;
    margin: 0.75rem 0 0.35rem;
}

.concepts-text[b-knn6l73djh]  ol,
.concepts-text[b-knn6l73djh]  ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.concepts-text[b-knn6l73djh]  li {
    margin-bottom: 0.35rem;
}

.mastery-section[b-knn6l73djh] {
    border-color: rgba(184, 133, 54, 0.25);
}

.mastery-prompt[b-knn6l73djh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 0.85rem;
}

.mastery-buttons[b-knn6l73djh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.mastery-btn[b-knn6l73djh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.85rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--ascend-font-secondary);
}

.mastery-btn i[b-knn6l73djh] {
    font-size: 1.4rem;
    margin-bottom: 0.15rem;
}

.mastery-btn span[b-knn6l73djh] {
    font-size: 0.85rem;
    font-weight: 600;
}

.mastery-btn small[b-knn6l73djh] {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
}

.mastery-btn:hover[b-knn6l73djh] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.mastery-btn.active.learning[b-knn6l73djh] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.mastery-btn.active.practicing[b-knn6l73djh] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fbbf24;
}

.mastery-btn.active.mastered[b-knn6l73djh] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.5);
    color: #10b981;
}

.lesson-actions[b-knn6l73djh] {
    display: flex;
    justify-content: flex-start;
}

.back-link[b-knn6l73djh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

.back-link:hover[b-knn6l73djh] {
    color: var(--ascend-accent);
}

/* #6780 — customer-reported horizontal clipping with no way to scroll to the
   clipped content ("Is there a way to scroll over or center the screen on my
   phone?"): the board's g- and h-files, the second goal tab and the "Next
   position" button were all cut at the same vertical line.

   WHAT ACTUALLY FORCED THE WIDTH (measured in headless Chromium against the
   authenticated dev page, not reasoned from this file): `.board-controls`,
   the Reset / "Show example solution" row. It is a non-wrapping flex row and
   the shared Button sets white-space: nowrap, so its min-content is the sum
   of both buttons - 366px, on a 320px viewport. A bare `1fr` track is
   `minmax(AUTO, 1fr)`, and that auto minimum is the column's min-content, so
   the track could not shrink below 366px either. html and body carry
   overflow-x: hidden, so the excess produced no scrollbar - it was simply
   unreachable, which is precisely what the customer described.

   The board was a VICTIM, not the cause: it is width: 100% of a parent that
   had been forced too wide. GameAnalysis hit the identical defect on #6672
   and fixed it there with minmax(0, ...); the lesson learned never reached
   this page. Three changes, because any one alone leaves it broken (verified
   by rendering each in isolation):
     1. minmax(0, 1fr)  - lets the TRACK shrink below its content.
     2. min-width: 0    - lets the grid ITEM shrink; a grid item's default
                          min-width: auto re-imposes the same floor even when
                          the track is free (measured: track went to 272px
                          while the column stayed at 366px and still overflowed).
     3. flex-wrap on the rows (the global .board-controls rule in app.css, and
        .demo-tabs / .position-rotation below) - lets the CONTENT shrink, so
        the min-content that started all of this is ~110px instead of 366px.

   The old `max-width: 480px` here is what the report called out as a mobile
   guard that binds on nothing: it sits below the 1024px breakpoint but above
   every phone width. Restated in rem so it scales with the user's text size,
   and floored by 100% so it can never exceed its column. */
@media (max-width: 1024px) {
    .lesson-layout[b-knn6l73djh] {
        grid-template-columns: minmax(0, 1fr);
    }

    .board-column[b-knn6l73djh] {
        position: static;
        min-width: 0;
        max-width: min(100%, 44rem);
        margin: 0 auto;
    }

    /* #8665 - in the stacked band the 30rem cap belongs to the BOARD, not to
       everything under it. It used to sit on .board-column, so the practice
       banner, the tablebase panel, the mastery explanation and the fresh
       positions panel were all squeezed into the board's 480px in the middle
       of the screen while the lesson text below them ran the full width. The
       member's screenshot (#8665) measured a viewport about 866px wide at
       roughly 2.5x scaling, which is this band. The board and the rows that
       must line up with it keep the 30rem cap; the panels below take the
       column. At phone widths the column is narrower than 30rem anyway, so
       nothing changes there. */
    .demo-tabs[b-knn6l73djh],
    .position-rotation[b-knn6l73djh],
    .board-frame[b-knn6l73djh] {
        max-width: 30rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* #9053 part (b) review round 3/4 - the verdict under the board keeps the 30rem board
       frame's width and center. Where the shell's board column is wider than the frame
       (band D, where DrillShell's VerdictFlowsInBandD gives the board its cap back: 576px
       at 1024x768) the in-flow verdict would otherwise overhang the frame by 48px a side.
       Alignment to this page's own frame only: the band mechanics (the reserve, the
       dock's clip, where the dock sits) are DrillShell's. A fixed dock (bands A and C)
       ignores this box. */
    .lesson-detail-page[b-knn6l73djh]  .drill-shell-below-board {
        width: 100%;
        max-width: 30rem;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .lesson-detail-page[b-knn6l73djh] {
        padding: 1rem;
    }

    .mastery-buttons[b-knn6l73djh] {
        grid-template-columns: 1fr;
    }

    /* The two multi-column rows stacked above the board. The report named the
       goal-tab row as the prime suspect; measurement cleared it on the lesson
       under test (its min-content was not the binding one), but both rows are
       the same shape as the row that DID force the width - fixed-count flex
       rows that cannot reflow - and the customer's screenshot had both on
       screen. Wrapping them removes the whole class rather than the one
       instance that happened to be reproducible. */
    .demo-tabs[b-knn6l73djh],
    .position-rotation[b-knn6l73djh] {
        flex-wrap: wrap;
    }
}

.practice-banner[b-knn6l73djh] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    display: flex;
    /* #8837 - wrap, so the coaching reflection below can take its own line. */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
}

/* #8837 - the CoachingReflection card used to render INSIDE the one-line flex
   banner, which squeezed it to ~110px at 390. Since #9053 part (b) the outcome
   line is the verdict in the dock and the reflection has its own block under the
   board, at the column's full width. */
.practice-reflection[b-knn6l73djh] {
    margin-top: 1rem;
}

/* #9053 part (b) - the graded outcome line inside the shared verdict panel. It
   keeps the .practice-banner class (the #7158 draw E2E reads the result from it)
   but not its card: the overlay's panel is the surface, and its text color is the
   verdict token. */
.practice-banner.practice-outcome[b-knn6l73djh] {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    align-items: flex-start;
}

.practice-outcome i[b-knn6l73djh] {
    font-size: 1.2rem;
    line-height: 1.2;
    flex: 0 0 auto;
}

/* With the banner wrapping, a long status line would drop under its icon
   instead of shrinking beside it; a zero basis keeps it on the icon's line. */
.practice-banner > span:not(.thinking)[b-knn6l73djh] {
    flex: 1 1 0;
    min-width: 0;
}

.practice-banner .thinking[b-knn6l73djh] {
    margin-left: auto;
    color: var(--ascend-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
}

/* Bug #8588 - why a held draw ended the lesson. It sits in the success verdict
   panel, which supplies the color. */
.practice-banner .held-draw-note[b-knn6l73djh] {
    font-weight: 600;
}

.practice-banner .spin[b-knn6l73djh] {
    animation: spin-b-knn6l73djh 1s linear infinite;
}

@keyframes spin-b-knn6l73djh {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* #5962 Phase 2 — position rotation chip above the board */
.position-rotation[b-knn6l73djh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.position-counter[b-knn6l73djh] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
}

.position-next-btn[b-knn6l73djh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.position-next-btn:hover[b-knn6l73djh] {
    border-color: #31DDE3;
    color: #ffffff;
    background: rgba(49, 221, 227, 0.12);
}

/* Bug #7032 - the engine owed this demo its opening move and could not deliver
   it. Warm amber rather than an alarm: the lesson is fine, the setup move just
   has not landed yet, and the user only needs the retry. */
.engine-setup-failed[b-knn6l73djh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 12px;
    background: rgba(184, 133, 54, 0.08);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.engine-setup-failed[b-knn6l73djh]  i {
    font-size: 16px;
    flex-shrink: 0;
}

.engine-setup-retry[b-knn6l73djh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.engine-setup-retry:hover[b-knn6l73djh] {
    border-color: var(--ascend-accent);
    color: #ffffff;
    background: rgba(49, 221, 227, 0.12);
}

/* Bug #7032 - the not-found and load-failure states offer their way out through
   .empty-action, which had no styling at all: the existing link rendered as a
   bare browser link and the new retry control would have rendered as a default
   grey button in the middle of a dark card. One rule so a link and a button
   read identically. */
.empty-action[b-knn6l73djh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    padding: 0.45rem 1.1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.empty-action:hover[b-knn6l73djh] {
    border-color: var(--ascend-accent);
    color: #ffffff;
    background: rgba(49, 221, 227, 0.12);
}

/* #8678 - the tablebase's verdict on the member's last move. Neutral by design
   (Recognition Follows Improvement): no success colour, no trophy, no animation. */
.move-judge[b-knn6l73djh] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--ascend-text-secondary);
    background: var(--ascend-bg-card);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* #9053 part (b) - the result change is the Body of the shared verdict panel,
   which carries the miss color; no parallel border of its own, and no text color
   of its own either (review round 1): the headline, its icon and the detail take
   the panel's verdict token, as the outcome line and the other pages' misses do.
   Only the kept-move .move-judge-line below stays neutral (#8678). */
.move-judge-change[b-knn6l73djh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.move-judge-headline[b-knn6l73djh] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.move-judge-headline i[b-knn6l73djh] {
    font-size: 1.2rem;
    flex: 0 0 auto;
}

.move-judge-detail[b-knn6l73djh],
.move-judge-line[b-knn6l73djh] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.move-judge-line[b-knn6l73djh] {
    color: var(--ascend-text-light);
}

/* #8776 - the footer holds only the grades toggle now (the tablebase sentence lives in
   the practice framing line), so it keeps the toggle where it always sat: the right edge. */
.move-judge-footer[b-knn6l73djh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.move-grade-toggle[b-knn6l73djh] {
    min-height: 2.75rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--ascend-text-secondary);
    background: transparent;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}

.move-grade-toggle:focus-visible[b-knn6l73djh] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.move-grade-toggle[aria-pressed="true"][b-knn6l73djh] {
    border-color: var(--ascend-accent);
}

/* #8683 - the 50-move warning under a kept move: information on the judge's own
   surface, set off by an icon rather than a color change. */
.move-judge-fifty[b-knn6l73djh] {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ascend-text-light);
}

.move-judge-fifty i[b-knn6l73djh] {
    color: var(--ascend-warning);
    margin-top: 0.15rem;
}

/* #8683 - basic mates from fresh starts. A solid surface (like the judge panel) so
   every line's contrast is decidable; neutral, no celebration styling. */
.fresh-mate[b-knn6l73djh] {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--ascend-text-secondary);
    background: var(--ascend-bg-card);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fresh-mate-heading[b-knn6l73djh] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ascend-text-light);
}

.fresh-mate-text[b-knn6l73djh] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ascend-text-light);
}

.fresh-mate-bands[b-knn6l73djh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fresh-mate-band[b-knn6l73djh] {
    min-height: 2.75rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--ascend-text-secondary);
    background: transparent;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.fresh-mate-band[aria-pressed="true"][b-knn6l73djh] {
    border-color: var(--ascend-accent);
    box-shadow: inset 0 0 0 1px var(--ascend-accent);
}

.fresh-mate-band:focus-visible[b-knn6l73djh] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.fresh-mate-band:disabled[b-knn6l73djh] {
    cursor: progress;
}

/* /Components/Pages/Endgames.razor.rz.scp.css */
.endgames-page[b-afch435is8] {
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .endgames-page[b-afch435is8] {
        padding: 2rem;
    }
}

.tier-section[b-afch435is8] {
    margin-bottom: 2.5rem;
}

.tier-header[b-afch435is8] {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.15);
}

.tier-title-row[b-afch435is8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin-bottom: 0.5rem;
}

.tier-name[b-afch435is8] {
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tier-rating[b-afch435is8] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    /* #8726 - was rgba(184, 133, 54, 0.8), which composites to #966f34 over the
       dark page: 3.92:1, below the 4.5:1 AA bar for 12.8px text (axe serious,
       release walk 2026-10-14). The 0.8 alpha was the defect, not the hue - the
       same gold at full strength is the published --ascend-secondary token at
       5.48:1 (docs/design/brand-tokens.md). */
    color: var(--ascend-secondary);
}

.tier-progress-row[b-afch435is8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tier-progress-bar[b-afch435is8] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    max-width: 300px;
}

.tier-progress-fill[b-afch435is8] {
    height: 100%;
    background: linear-gradient(90deg, var(--ascend-accent), #10b981);
    transition: width 0.3s ease;
}

.tier-progress-label[b-afch435is8] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.lessons-grid[b-afch435is8] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 600px) {
    .lessons-grid[b-afch435is8] {
        grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    }
}

.lesson-card[b-afch435is8] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1.25rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 10px 30px rgba(4, 32, 71, 0.3);
    position: relative;
    overflow: hidden;
}

.lesson-card[b-afch435is8]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ascend-accent), var(--ascend-secondary));
}

.lesson-card:hover[b-afch435is8] {
    transform: translateY(-3px);
    border-color: rgba(49, 221, 227, 0.5);
    box-shadow: 0 14px 40px rgba(4, 32, 71, 0.45), 0 0 30px rgba(49, 221, 227, 0.1);
}

.lesson-card.status-mastered[b-afch435is8] {
    border-color: rgba(16, 185, 129, 0.4);
}

.lesson-card.status-mastered[b-afch435is8]::before {
    background: linear-gradient(90deg, #10b981, #06d6a0);
}

.lesson-card.status-practicing[b-afch435is8] {
    border-color: rgba(251, 191, 36, 0.4);
}

.lesson-card.status-learning[b-afch435is8] {
    border-color: rgba(49, 221, 227, 0.4);
}

/* Coming-soon variant — lesson is in the curriculum but unauthored. Mirrors
   .pattern-card-coming-soon in CheckmatePatternsHub: muted styling, no hover,
   no link — beta-honest UX (memory: feedback_disable_at_index_not_at_destination). */
.lesson-card.lesson-card-coming-soon[b-afch435is8] {
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(10, 22, 40, 0.55) 100%);
    cursor: default;
    pointer-events: none;
}

.lesson-card.lesson-card-coming-soon[b-afch435is8]::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

.lesson-card.lesson-card-coming-soon .lesson-title[b-afch435is8],
.lesson-card.lesson-card-coming-soon .lesson-subtitle[b-afch435is8] {
    color: rgba(255, 255, 255, 0.5);
}

.lesson-coming-soon-badge[b-afch435is8] {
    color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.lesson-coming-soon-text[b-afch435is8] {
    color: rgba(255, 255, 255, 0.5) !important;
    font-style: italic;
}

.lesson-card-header[b-afch435is8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.lesson-category[b-afch435is8] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(184, 133, 54, 0.8);
    font-weight: 600;
}

.lesson-status[b-afch435is8] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.lesson-card.status-mastered .lesson-status[b-afch435is8] {
    color: #10b981;
}

.lesson-card.status-practicing .lesson-status[b-afch435is8] {
    color: #fbbf24;
}

.lesson-card.status-learning .lesson-status[b-afch435is8] {
    color: #31DDE3;
}

.lesson-title[b-afch435is8] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: #ffffff;
    margin: 0 0 0.35rem;
    font-weight: 600;
}

.lesson-subtitle[b-afch435is8] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.85rem;
    line-height: 1.45;
    flex: 1;
}

.lesson-footer[b-afch435is8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.lesson-goal[b-afch435is8] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(49, 221, 227, 0.7);
    font-weight: 600;
}

.lesson-time[b-afch435is8] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
}

.review-section[b-afch435is8] {
    margin-bottom: 2rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.08), rgba(49, 221, 227, 0.04));
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 16px;
}

@media (min-width: 768px) {
    .review-section[b-afch435is8] {
        padding: 1.25rem 1.5rem;
    }
}

.review-header[b-afch435is8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.review-header i[b-afch435is8] {
    color: #B88536;
    font-size: 1.2rem;
}

.review-header h2[b-afch435is8] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    font-size: 1.25rem;
    margin: 0;
}

.review-subtitle[b-afch435is8] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    flex-basis: 100%;
}

@media (min-width: 768px) {
    .review-subtitle[b-afch435is8] {
        flex-basis: auto;
        margin-left: auto;
    }
}

.review-list[b-afch435is8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.review-item[b-afch435is8] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

@media (min-width: 480px) {
    .review-item[b-afch435is8] {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

.review-item-main[b-afch435is8] {
    flex: 1;
    min-width: 0;
}

.review-item-title[b-afch435is8] {
    color: #ffffff;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.review-item-meta[b-afch435is8] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.review-tier-pill[b-afch435is8] {
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    background: rgba(184, 133, 54, 0.15);
    color: #B88536;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}

/* The review row's actions are a flex CHILD beside the lesson title, not a
   block-level footer. `.action-row` (app.css) is built for the footer case:
   its base rule is `width: 100%`, and the >=480px breakpoint restores
   intrinsic width to its CHILDREN (`.action-row > *`) but never to the row
   itself. Left at 100% here it claims the whole line, collapsing
   `.review-item-main` to nothing - the lesson title wrapped one word per
   line and the Review button rendered on top of it (owner screenshot,
   prod, 2026-09-01; present since 5c1a5c2d2 on 2026-08-16).

   Scoped rather than changed in app.css on purpose: `width: 100%` is
   correct for every block-level `.action-row`, which is most of them. */
.review-item-actions[b-afch435is8] {
    width: auto;
    flex: 0 0 auto;
}

.review-btn[b-afch435is8] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    color: var(--ascend-accent);
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.review-btn:hover[b-afch435is8] {
    background: rgba(49, 221, 227, 0.2);
    border-color: var(--ascend-accent);
}

/* /Components/Pages/EvaluationDrill.razor.rz.scp.css */
/* Page max-width intentionally NOT set — layout cap lives inside DrillShell. */
.eval-drill-page[b-gj3z595f66] { padding: 0 1rem; }

.drill-intro[b-gj3z595f66] {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
}

.intro-description[b-gj3z595f66] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    margin: 0;
}

/* Mode selection */
.mode-select[b-gj3z595f66] { margin-top: 1.5rem; }
.mode-select-heading[b-gj3z595f66] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin-bottom: 1.25rem;
}
.mode-grid[b-gj3z595f66] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.mode-card[b-gj3z595f66] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(49, 221, 227, 0.25);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    text-align: center;
    transition: all 0.18s;
}
.mode-card:hover[b-gj3z595f66] {
    background: rgba(49, 221, 227, 0.08);
    border-color: #31DDE3;
    transform: translateY(-2px);
}
.mode-icon[b-gj3z595f66] {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(49, 221, 227, 0.12);
}
.mode-icon i[b-gj3z595f66] { font-size: 22px; color: #31DDE3; }
.mode-card h4[b-gj3z595f66] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    /* Explicit — a global h4 rule otherwise wins over the inherited
       white from .mode-card, rendering the title dark-on-dark. */
    color: #ffffff;
    margin: 0;
}
.mode-card p[b-gj3z595f66] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
}

.drill-side-row[b-gj3z595f66] { display: flex; justify-content: center; margin-bottom: 0.5rem; }
.drill-board-area[b-gj3z595f66] { margin-bottom: 0.75rem; }
.position-source[b-gj3z595f66] {
    text-align: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
}

.prompt[b-gj3z595f66] {
    text-align: center;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.85rem;
}

/* Who's Better? verdict row.
   #9060 chunk 2 - three columns at every width. The row rides the idle verdict dock under
   the board, and on a phone the old single column (three ~70px buttons stacked, 640px and
   below) put the last answer more than 200px under the board, so a member answering
   scrolled most of the board out of view. Three across fits at 320px: each label wraps to
   two short lines inside its own button. */
.verdict-row[b-gj3z595f66] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}
.verdict-btn[b-gj3z595f66] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.15s;
}
.verdict-btn:hover[b-gj3z595f66] { background: rgba(49, 221, 227, 0.1); border-color: #31DDE3; }
.verdict-btn i[b-gj3z595f66] { font-size: 1.1rem; }
.verdict-btn span[b-gj3z595f66] { text-align: center; line-height: 1.25; }
.verdict-btn.white:hover[b-gj3z595f66] { border-color: rgba(255, 255, 255, 0.6); }
.verdict-btn.black:hover[b-gj3z595f66] { border-color: rgba(184, 133, 54, 0.6); }

/* Imbalance grid */
.imbalance-grid[b-gj3z595f66] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.imbalance-option[b-gj3z595f66] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    text-align: left;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    transition: all 0.12s;
}
.imbalance-option:hover[b-gj3z595f66] { background: rgba(49, 221, 227, 0.08); border-color: rgba(49, 221, 227, 0.4); }
.imbalance-option.selected[b-gj3z595f66] {
    background: rgba(49, 221, 227, 0.12);
    border-color: #31DDE3;
    color: #ffffff;
}
.imbalance-option i[b-gj3z595f66] { font-size: 1rem; color: rgba(49, 221, 227, 0.8); }
.imbalance-option.selected i[b-gj3z595f66] { color: #31DDE3; }

/* #9060 chunk 2 - after Submit the grid stays, locked, and carries the analyzer's read
   (the marks ImbalanceSpotDrill uses): an imbalance it finds is green, with a check where
   the member picked it and an arrow where they missed it; a pick it does not find is red
   and struck through; the rest are dimmed. */
.imbalance-option:disabled[b-gj3z595f66] { cursor: default; }
.imbalance-option:disabled:hover[b-gj3z595f66] { background: rgba(255, 255, 255, 0.04); border-color: rgba(49, 221, 227, 0.15); }
.imbalance-option.is-truth[b-gj3z595f66],
.imbalance-option.is-truth:disabled:hover[b-gj3z595f66] {
    color: #ffffff;
    font-weight: 600;
    border-color: color-mix(in srgb, var(--ascend-success) 80%, transparent);
    background: color-mix(in srgb, var(--ascend-success) 18%, transparent);
}
.imbalance-option.is-truth i[b-gj3z595f66] { color: var(--ascend-success); }
.imbalance-option.is-missed[b-gj3z595f66] { border-style: dashed; }
.imbalance-option.is-wrong-pick[b-gj3z595f66],
.imbalance-option.is-wrong-pick:disabled:hover[b-gj3z595f66] {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--ascend-error) 70%, transparent);
    background: color-mix(in srgb, var(--ascend-error) 12%, transparent);
    text-decoration: line-through;
}
/* The lighter red: --ascend-error itself is 4.42:1 on this surface (#7291). */
.imbalance-option.is-wrong-pick i[b-gj3z595f66] { color: #f87171; }
.imbalance-option.dimmed[b-gj3z595f66] { opacity: 0.45; }

.submit-row[b-gj3z595f66] { display: flex; justify-content: center; }

/* #9060 chunk 2 - AutoplayToggle rides the dock's Actions half: centered under the answer
   row while answering, beside Next while a verdict waits for it. display: flex overrides the
   UA's [hidden], so [hidden] is restated after it. */
.eval-autoplay[b-gj3z595f66] { display: flex; justify-content: center; align-items: center; }
.eval-autoplay[hidden][b-gj3z595f66] { display: none; }

/* A self-clearing verdict pins nothing: with the toggle hidden for the hold, the Actions
   block would still cost the dock's gap as dead space (DrillVerdictDock drops only an EMPTY
   Actions block). */
.eval-drill-page[b-gj3z595f66]  .drill-advance-row:not(.is-idle) > .drill-advance-actions:has(> .eval-autoplay[hidden]:only-child) {
    display: none;
}
.submit-btn[b-gj3z595f66] {
    padding: 0.7rem 2rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0a1628;
    border: none;
    border-radius: 50px;
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: all 0.18s;
}
.submit-btn:hover[b-gj3z595f66] { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4); }

/* Plan options */
.plan-options[b-gj3z595f66] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.plan-option[b-gj3z595f66] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}
.plan-option:hover[b-gj3z595f66] {
    background: rgba(49, 221, 227, 0.08);
    border-color: #31DDE3;
}
.plan-label[b-gj3z595f66] {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 50%;
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    color: #31DDE3;
}
.plan-text[b-gj3z595f66] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Feedback */
/* #6697 — the feedback panel's chrome (padding / tint / border) moved to
   DrillFeedbackOverlay's Inline placement, which now owns the hold and the
   clock pause with it. Only the BODY styling stays here: the body fragment is
   authored in this file, so it keeps this page's scope id. */

.feedback-header[b-gj3z595f66] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.feedback-header i[b-gj3z595f66] { font-size: 1.2rem; }

.feedback-tags[b-gj3z595f66] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.feedback-tag[b-gj3z595f66] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.feedback-tag.hit[b-gj3z595f66] { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.feedback-tag.miss[b-gj3z595f66] { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }

.feedback-plan[b-gj3z595f66] {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #B88536;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .mode-grid[b-gj3z595f66] { grid-template-columns: 1fr; }
    .imbalance-grid[b-gj3z595f66] { grid-template-columns: 1fr; }
    .verdict-btn[b-gj3z595f66] { padding: 0.6rem 0.4rem; font-size: 0.82rem; }
}

/* #9060 chunk 2 - the answer controls take the shared touch target on a touch screen; the
   dock's 44px thumb rule reaches only a SHOWING dock's direct children. */
@media (hover: none) and (pointer: coarse) {
    .verdict-btn[b-gj3z595f66],
    .plan-option[b-gj3z595f66],
    .imbalance-option[b-gj3z595f66],
    .submit-btn[b-gj3z595f66] {
        min-height: var(--touch-target);
    }

    .eval-autoplay[b-gj3z595f66]  .autoplay-toggle-btn {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/Fide/Lookup.razor.rz.scp.css */
/* ADO #6912 - FIDE rating lookup. Tokens only, no raw brand hex or font names. */

.lookup-content[b-jxojveie2i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.page-header[b-jxojveie2i] {
    text-align: center;
    margin-bottom: var(--space-sm);
}

.page-title[b-jxojveie2i] {
    font-family: var(--ascend-font-primary);
    font-size: var(--fluid-2xl);
    margin: 0 0 var(--space-xs);
}

.page-subtitle[b-jxojveie2i] {
    font-family: var(--ascend-font-secondary);
    color: var(--ascend-text-secondary);
    max-width: 46rem;
    margin: 0 auto;
}

/* ---- search ---- */

.search-form[b-jxojveie2i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.search-input-group[b-jxojveie2i] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.search-input[b-jxojveie2i] {
    flex: 1 1 18rem;
    min-height: var(--touch-target);
    background: rgb(255 255 255 / 5%);
    border: 1px solid var(--ascend-border);
    border-radius: var(--radius-md);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    padding: 0.875rem 1rem;
}

.search-input:focus[b-jxojveie2i] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgb(255 255 255 / 8%);
    box-shadow: 0 0 0 3px rgb(49 221 227 / 10%);
}

.search-input[b-jxojveie2i]::placeholder {
    color: rgb(255 255 255 / 40%);
}

.search-hint[b-jxojveie2i],
.list-provenance[b-jxojveie2i] {
    display: block;
    font-family: var(--ascend-font-secondary);
    color: var(--ascend-text-muted);
    font-size: var(--text-sm);
}

/* The staleness contract, rendered. FIDE publishes monthly, so every rating on this page
   is a snapshot; this line is what stops it reading as a live number. */
.list-provenance[b-jxojveie2i] {
    border-top: 1px solid var(--ascend-border-light);
    padding-top: var(--space-sm);
}

/* ---- results ---- */

.results-header[b-jxojveie2i] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Own class, not .card-title: card chrome belongs to Components/Shared/Card. */
.results-title[b-jxojveie2i] {
    font-family: var(--ascend-font-primary);
    margin: 0;
}

.results-count[b-jxojveie2i] {
    font-family: var(--ascend-font-secondary);
    color: var(--ascend-text-muted);
    font-size: var(--text-sm);
}

.confirm-warning[b-jxojveie2i] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-family: var(--ascend-font-secondary);
    color: var(--ascend-warning);
    margin: 0 0 var(--space-md);
}

.confirm-warning[b-jxojveie2i]  i {
    flex-shrink: 0;
}

.results-grid[b-jxojveie2i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-md);
}

.player-card[b-jxojveie2i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    border: 1px solid var(--ascend-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    background: rgb(255 255 255 / 3%);
}

.player-name[b-jxojveie2i] {
    font-family: var(--ascend-font-primary);
    font-size: var(--text-lg);
    color: var(--ascend-text-light);
}

.player-title[b-jxojveie2i] {
    color: var(--ascend-secondary);
    margin-right: var(--space-xs);
}

.player-id[b-jxojveie2i] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ascend-text-muted);
}

.player-facts[b-jxojveie2i] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-family: var(--ascend-font-secondary);
    font-size: var(--text-sm);
    color: var(--ascend-text-secondary);
}

.player-inactive[b-jxojveie2i] {
    color: var(--ascend-warning);
}

.player-ratings[b-jxojveie2i] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}
/* /Components/Pages/FlashCardReview.razor.rz.scp.css */
.fc-review-page[b-5komiea2gj] {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Empty-state for "no cards due" — kept. The session-complete UI moved to
 * the shared CoachingReflection component (PBI 5567 commit d3c4050) so
 * .fc-complete / .fc-complete-icon / .fc-summary-stats / .fc-stat /
 * .fc-stat-value / .fc-stat-label rules were dead and removed. */
.fc-empty[b-5komiea2gj] {
    text-align: center;
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.fc-empty-icon[b-5komiea2gj] {
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 0.5rem;
}

.fc-empty h2[b-5komiea2gj] {
    font-family: var(--ascend-font-primary);
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.fc-empty p[b-5komiea2gj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    max-width: 400px;
}

/* Header */
.fc-header[b-5komiea2gj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    width: 100%;
}

.fc-progress[b-5komiea2gj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.fc-theme-badge[b-5komiea2gj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 4px;
    color: #a78bfa;
}

.fc-source[b-5komiea2gj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    margin-left: auto;
}

/* Board */
.fc-board-area[b-5komiea2gj] {
    width: 100%;
    max-width: 500px;
    margin-bottom: 1rem;
}

/* Prompt */
.fc-prompt[b-5komiea2gj] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: #31DDE3;
    text-align: center;
    margin-bottom: 1rem;
    font-style: italic;
}

/* Actions */
.fc-actions[b-5komiea2gj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.fc-hint[b-5komiea2gj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    text-align: center;
}

/* Answer */
.fc-answer[b-5komiea2gj] {
    text-align: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    width: 100%;
}

.fc-answer-label[b-5komiea2gj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    display: block;
    margin-bottom: 0.25rem;
}

.fc-answer-moves[b-5komiea2gj] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Auto-graded feedback banner — replaces the old self-grade button row.
   Grade is set automatically based on the user's played move matching
   the expected solution. User just confirms with the Next button. */
.fc-feedback[b-5komiea2gj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-radius: 10px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
}
.fc-feedback.correct[b-5komiea2gj] {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}
.fc-feedback.incorrect[b-5komiea2gj] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
.fc-feedback i[b-5komiea2gj] {
    font-size: 1.25rem;
    flex-shrink: 0;
}
.fc-feedback span[b-5komiea2gj] {
    flex: 1;
    line-height: 1.4;
}
.fc-next-btn[b-5komiea2gj] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: rgba(10, 22, 40, 0.85);
    border: 1px solid rgba(49, 221, 227, 0.55);
    border-radius: 50px;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.fc-next-btn:hover[b-5komiea2gj] {
    background: rgba(49, 221, 227, 0.15);
    border-color: #31DDE3;
    color: #ffffff;
    transform: translateX(2px);
}
.fc-next-btn:focus-visible[b-5komiea2gj] {
    outline: 2px solid #31DDE3;
    outline-offset: 2px;
}

/* "Play out the solution" - secondary to Next card, so it stays quieter. */
.fc-playback-btn[b-5komiea2gj] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(184, 133, 54, 0.5);
    border-radius: 50px;
    color: var(--ascend-secondary-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.fc-playback-btn:hover[b-5komiea2gj] {
    background: rgba(184, 133, 54, 0.16);
    border-color: var(--ascend-secondary-light);
    color: #ffffff;
}
.fc-playback-btn:focus-visible[b-5komiea2gj] {
    outline: 2px solid var(--ascend-secondary-light);
    outline-offset: 2px;
}
/* /Components/Pages/FlashCards.razor.rz.scp.css */
.fc-page[b-3oaqhywimb] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
}

.fc-empty[b-3oaqhywimb] {
    text-align: center;
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.fc-empty h2[b-3oaqhywimb] {
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.fc-empty p[b-3oaqhywimb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    max-width: 400px;
}

/* Card Grid */
.fc-card-grid[b-3oaqhywimb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

.fc-card-item[b-3oaqhywimb] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s;
}

.fc-card-item.due[b-3oaqhywimb] {
    border-color: rgba(49, 221, 227, 0.3);
}

.fc-card-item:hover[b-3oaqhywimb] {
    border-color: rgba(49, 221, 227, 0.2);
}

.fc-card-board-mini[b-3oaqhywimb] {
    height: 160px;
    overflow: hidden;
    pointer-events: none;
}

.fc-card-info[b-3oaqhywimb] {
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fc-card-prompt[b-3oaqhywimb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-card-meta[b-3oaqhywimb] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.fc-card-theme[b-3oaqhywimb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 3px;
    color: #a78bfa;
}

.fc-card-interval[b-3oaqhywimb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

.fc-card-source[b-3oaqhywimb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
}

.fc-card-delete[b-3oaqhywimb] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    /* #7758 - the danger tint is at REST, not only on :hover. Once touch shows
       both buttons at rest they sit 8px apart and looked identical; a red
       delete beside a neutral edit is the difference between a considered tap
       and a mis-tap. */
    color: #f87171;
    cursor: pointer;
    opacity: var(--hover-reveal-rest, 0);
    transition: all 0.15s;
}

.fc-card-item:hover .fc-card-delete[b-3oaqhywimb] {
    opacity: 1;
}

.fc-card-delete:hover[b-3oaqhywimb] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.2);
}

.fc-card-edit[b-3oaqhywimb] {
    position: absolute;
    top: 4px;
    right: 32px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: var(--ascend-text-secondary);
    cursor: pointer;
    opacity: var(--hover-reveal-rest, 0);
    transition: all 0.15s;
}

.fc-card-item:hover .fc-card-edit[b-3oaqhywimb] {
    opacity: 1;
}

.fc-card-edit:hover[b-3oaqhywimb] {
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.2);
}

/* Creator Modal */
.fc-creator-modal[b-3oaqhywimb] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 550px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
}

.fc-creator-form[b-3oaqhywimb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-group[b-3oaqhywimb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-row[b-3oaqhywimb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .form-row[b-3oaqhywimb] {
        grid-template-columns: 1fr;
    }
}

.form-label[b-3oaqhywimb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
}

.label-optional[b-3oaqhywimb] {
    font-weight: 400;
    text-transform: none;
    color: rgba(255, 255, 255, 0.35);
}

/* #7266: fill, border, radius, colour, font, the focus ring and the <option>
   fill all duplicated the global .form-input / `select` rules in app.css
   (#7258); the placeholder had DRIFTED DOWN to 0.3 white against the global
   0.5, so the global value wins. What is left is the genuine delta: the
   filter row runs a smaller, tighter control than a normal form field. */
[b-3oaqhywimb] .form-input {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
}

/* The tighter padding above outranks the global select.form-input, so the
   deck <select> gets its caret room back explicitly. */
[b-3oaqhywimb] select.form-input {
    padding-right: 2.25rem;
}

/* #6838 - honest rejection of an illegal solution, shown beside the footer buttons. */
.fc-save-error[b-3oaqhywimb] {
    color: #ef4444;
    font-size: 0.85rem;
    margin-right: auto;
    align-self: center;
}

/* #6848 - play-on-board solution authoring inside the create/edit modal. */
.fc-solution-hint[b-3oaqhywimb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Honest note when a position edit invalidated the recorded solution. */
.fc-solution-cleared[b-3oaqhywimb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0 0;
}

/* #7110 - whose move it is, stated by the tile in its own info column. The
   column is a flex container, so the pill has to opt out of the default
   stretch or it renders as a full-width bar instead of a pill; it is also
   scaled down to tile size. ::deep - .drill-side-pill is the DrillSidePill
   child component's markup and does not carry this component's scope
   attribute. */
.fc-card-info[b-3oaqhywimb]  .drill-side-pill {
    align-self: flex-start;
    font-size: 0.72rem;
    padding: 0.2rem 0.6rem;
    gap: 0.35rem;
}

.fc-card-info[b-3oaqhywimb]  .drill-side-dot {
    width: 9px;
    height: 9px;
}
/* /Components/Pages/GameAnalysis.razor.rz.scp.css */
/* Analysis Page Layout - mobile-first: tight padding on phones, roomier
   from the tablet breakpoint up. */
.analysis-page[b-aoehpxgdsv] {
    padding: 0.75rem;
    /* #8098 COACH-BOARD - THE ONE VIEWPORT HEIGHT this page budgets against.
       Every board track and rail cap below reads var(--analysis-dvh) instead of a
       literal 100dvh, so a mode that puts a row of chrome above the header can
       subtract that row ONCE, here, and every budget follows. Coach mode is that
       mode: its strip was 106px the budgets never knew about, which put the move
       transport below the fold at 1440x900 and 1366x768 for coaches only.
       GameAnalysisCoachBoardContractTests fails a new 100dvh literal. The name
       keeps the unit on purpose: it IS a dvh length, and
       GameAnalysisCommentaryHeightTests reads a ceiling built from it as the
       viewport expression it is. */
    --analysis-dvh: 100dvh;
    /* The coach strip's block: one 2.75rem row plus its 0.5rem margin. */
    --coach-strip-block: 3.25rem;
    /* #7687 - the page root is now tabindex="0" so it can host the flip-board
       shortcut its own button advertises. It is a key host, never a control, so
       it does not draw a focus ring around the whole page when a click inside
       lands on it. Same rule `.self-review-page` has carried for the same
       reason; every real control inside keeps its own focus styling. */
    outline: none;
}

@media (min-width: 768px) {
    .analysis-page[b-aoehpxgdsv] {
        /* #7151 round 2 - the top padding is board budget; sides keep room. */
        padding: 0.75rem 1.5rem 1.5rem;
    }
}

/* Defect #8483 - waiting for a re-analysis after a move change: a neutral
   pending state, laid out like the loading state, never the error one. */
.reanalysis-pending[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    text-align: center;
}

/* Loading State */
.loading-container[b-aoehpxgdsv],
.error-container[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.loading-spinner i[b-aoehpxgdsv],
.error-icon i[b-aoehpxgdsv] {
    font-size: 3rem;
    color: #31DDE3;
}

.error-icon i[b-aoehpxgdsv] {
    color: #ef4444;
}

@keyframes spin-b-aoehpxgdsv {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Header - ONE THIN ROW (#7151 round 2). The identity line moved onto the
   board's edges (BoardPlayerChrome), so this band carries only back / meta /
   actions and its height budget is a single control row: every pixel here is
   a pixel the board starts lower. */
.analysis-header[b-aoehpxgdsv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
}

.header-left[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.back-button[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-button:hover[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.game-info[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    /* #6157 — let the info row wrap so a multi-phase pawn-structure trail can't
       overrun the header; min-width:0 lets the flex item shrink below content. */
    flex-wrap: wrap;
    min-width: 0;
    gap: 0.25rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
}

/* #7151 round 2 - the identity styling moved to the shared BoardPlayerChrome
   component (owner ruling: player data lives on the board's edges). */
.game-info .date[b-aoehpxgdsv] {
    color: rgba(255, 255, 255, 0.6);
}

.game-info .time-control[b-aoehpxgdsv] {
    color: #31DDE3;
    font-weight: 500;
}

.separator[b-aoehpxgdsv] {
    margin: 0 0.375rem;
    color: rgba(255, 255, 255, 0.2);
}

/* #6164/#6167 pawn structures - a CHIP on the header meta line (#7151 round 2;
   the former full-width band spent ~60px between the top of the page and the
   board). Since #9253 it names only the first segment and folds the rest into
   "+N more" (StructureTrailHeader), and the chip is ONE ROW: icon, first name
   and "+N more" never wrap apart. Wrapping inside the chip is what broke the
   fold. With a 42-character name (Hippopotamus Structure (double fianchetto),
   the longest in the catalog) the old wrapping chip took four lines at
   1366x768 (date row, the icon alone, the name, "+2 more" alone) and ended the
   board controls at 781 of 768. Now the chip as a whole may drop to its own
   line in .game-info, and a name too long for that line ends in an ellipsis
   (its full name is the segment's title). The phone-today touch block below
   overrides these with its own one-line ellipsis (#8287). */
.pawn-structure-chip[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.375rem;
    min-width: 0;
    max-width: 100%;
}

.pawn-structure-chip .psb-icon[b-aoehpxgdsv] {
    flex: none;
    color: var(--ascend-accent);
    opacity: 0.7;
    font-size: 0.75rem;
}

.pawn-structure-chip .psb-single[b-aoehpxgdsv] {
    color: var(--ascend-accent);
    font-size: 0.875rem;
    font-weight: 500;
}

.pawn-structure-chip .psb-trail[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.375rem;
    font-size: 0.875rem;
    min-width: 0;
}

.pawn-structure-chip .trail-segment[b-aoehpxgdsv] {
    color: var(--ascend-accent);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pawn-structure-chip .trail-arrow[b-aoehpxgdsv] {
    flex: none;
    color: var(--ascend-text-muted);
    font-size: 0.75rem;
}

.pawn-structure-chip .trail-more[b-aoehpxgdsv] {
    flex: none;
    color: var(--ascend-text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: default;
}

.result-win[b-aoehpxgdsv] {
    color: #10b981;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.result-loss[b-aoehpxgdsv] {
    color: var(--ascend-text-light);
    font-weight: 600;
    background: rgba(239, 68, 68, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.result-draw[b-aoehpxgdsv] {
    color: #9ca3af;
    font-weight: 600;
    background: rgba(156, 163, 175, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.header-right[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    /* #6164/#6167 — wrap actions onto a second row on narrow widths instead of
       overflowing/squashing; keep each button's own label on one line. */
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* #9253 - on desktop, the ACTIONS row never wraps; the game info beside it does.
   .game-info can already shrink and wrap (#6157), but its parent .header-left could
   not (no min-width: 0), so when a member with a coach got the extra "Bring this to
   {Coach}" button the flex algorithm squeezed the only wrappable thing left, this row,
   and Delete dropped onto a second row. At 1366x768 that took the header from 55px to
   97px and pushed the board controls below the fold (prod, demo@; reproduced here with
   a coach-width button planted in the walk). Now the left side gives up the width and
   its info wraps a line instead: header 71px, controls ending at 732 in a 768px
   viewport. Nothing is truncated.

   Scoped to >=1200px, measured: at 1024x768 a narrower left side wraps the info into
   more lines than the button row costs (controls 775 vs 767 today), so below 1200 the
   existing behavior stays. */
@media (min-width: 1200px) {
    .header-left[b-aoehpxgdsv] {
        min-width: 0;
        flex: 1 1 auto;
    }

    .header-right[b-aoehpxgdsv] {
        flex-shrink: 0;
    }
}

/* #6164/#6167 — shortened, single-line action labels. */
.reanalyze-button[b-aoehpxgdsv],
.studyboard-link[b-aoehpxgdsv],
.external-link[b-aoehpxgdsv],
.delete-game-button[b-aoehpxgdsv] {
    white-space: nowrap;
}

/* Re-analyze Dropdown */
.reanalyze-dropdown-container[b-aoehpxgdsv] {
    position: relative;
    z-index: 10;
}

.dropdown-backdrop[b-aoehpxgdsv] {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: transparent;
}

.reanalyze-button[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    height: 34px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.25));
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(249, 115, 22, 0.4);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.reanalyze-button:hover:not(:disabled)[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(249, 115, 22, 0.35));
    border-color: #f97316;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
}

.reanalyze-button:disabled[b-aoehpxgdsv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.reanalyze-button .spin[b-aoehpxgdsv] {
    animation: spin-b-aoehpxgdsv 1s linear infinite;
}

.reanalyze-button .dropdown-chevron[b-aoehpxgdsv] {
    font-size: 0.625rem;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

/* Where the panel sits (anchor edge, floor, phone cap) is shared with its twin,
   the Games analyze dropdown, in wwwroot/css/anchored-dropdown.css, and the
   edge shift is wwwroot/js/anchored-dropdown.js (#9432). Only the look is here. */
.reanalyze-dropdown[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.98));
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 12px;
    padding: 0.5rem;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(249, 115, 22, 0.1);
    animation: dropdownFadeIn-b-aoehpxgdsv 0.15s ease;
}

/* #6717 - the twin of the Games analyze dropdown carried the same defect:
   right: 0 hung a 220px panel leftward off its button, so on a phone the labels
   ran off the left edge. The two were fixed together and then had to be kept in
   sync by hand, and they drifted (#9393 fixed only Games). #9432 moved the phone
   anchoring into wwwroot/css/anchored-dropdown.css, which names both panels, and
   AnchoredDropdownTwinContractTests fails if it is restated here. */

@keyframes dropdownFadeIn-b-aoehpxgdsv {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reanalyze-dropdown .dropdown-item[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.reanalyze-dropdown .dropdown-item:hover[b-aoehpxgdsv] {
    background: rgba(249, 115, 22, 0.15);
}

.reanalyze-dropdown .dropdown-item i[b-aoehpxgdsv] {
    font-size: 1rem;
    color: #f97316;
    width: 20px;
    text-align: center;
}

.reanalyze-dropdown .dropdown-item-content[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.reanalyze-dropdown .dropdown-item-title[b-aoehpxgdsv] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

.reanalyze-dropdown .dropdown-item-desc[b-aoehpxgdsv] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.external-link[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    height: 34px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.1), rgba(49, 221, 227, 0.15));
    color: #31DDE3;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.external-link:hover[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(49, 221, 227, 0.25));
    border-color: #31DDE3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.2);
}

/* #6161 — open-in-study-board action. Same shape as the external link, gold
   accent to mark it as the in-platform (stay-here) action vs the external one. */
.studyboard-link[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    height: 34px;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.12), rgba(184, 133, 54, 0.18));
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.studyboard-link:hover[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.22), rgba(184, 133, 54, 0.28));
    border-color: #B88536;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184, 133, 54, 0.2);
}

/* Delete action — same shape as the header buttons, muted danger that only
   reads as destructive on hover. (#5870) */
.delete-game-button[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    height: 34px;
    background: rgba(239, 68, 68, 0.08);
    color: rgba(248, 113, 113, 0.85);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.delete-game-button:hover[b-aoehpxgdsv] {
    background: rgba(239, 68, 68, 0.18);
    border-color: #ef4444;
    color: #fca5a5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.delete-game-button[b-aoehpxgdsv]  i {
    font-size: 14px;
}

/* Full-width summary strip — accuracy | mistakes | eval graph. #7151 moved it
   BELOW the board/moves row so the board is the first thing under the header:
   margin-top instead of margin-bottom, nothing else changed. */
.analysis-summary-strip[b-aoehpxgdsv] {
    display: grid;
    /* #6765: the third track now holds the EVAL GRAPH rather than a critical-
       moments count, so it takes the widest share - a chart squeezed into a
       stat-tile track is unreadable, which is half of why it was buried in a
       tab. Accuracy stays compact; mistakes keeps its 3-cell grid. minmax(0,
       ...) lets each tile shrink below its content floor instead of forcing
       overflow. */
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.1fr) minmax(0, 1.8fr);
    gap: 1rem;
    /* In-grid now (#7151 round 3) - the workspace gap provides the spacing,
       and in two-column mode the strip spans the full row below the board. */
    margin-top: 0;
    grid-column: 1 / -1;
    align-items: stretch;
}

.analysis-summary-strip .summary-tile[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    margin: 0;
    /* #7151 round 2 - thinner tiles; all three keep their full content. */
    padding: 0.875rem 1rem;
}

/* Accuracy + critical tiles centre their single stat; mistakes keeps its grid. */
.analysis-summary-strip .accuracy-card[b-aoehpxgdsv] {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.analysis-summary-strip .accuracy-card .accuracy-circle[b-aoehpxgdsv] {
    width: 96px;
    height: 96px;
    margin: 0 auto 0.5rem;
}

.analysis-summary-strip .accuracy-card .accuracy-number[b-aoehpxgdsv] {
    font-size: 1.75rem;
}

/* #7175 - the scope caption under ACCURACY. It has to be legible, not a
   footnote: without it the headline reads as a whole-game verdict. */
.analysis-summary-strip .accuracy-card .accuracy-scope[b-aoehpxgdsv] {
    margin: 0.15rem 0 0;
    /* Balanced so the caption splits evenly instead of leaving one orphan word
       on the second line in the narrow accuracy track. */
    text-wrap: balance;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.55);
}

.analysis-summary-strip .accuracy-card .accuracy-decided[b-aoehpxgdsv] {
    margin: 0.2rem 0 0;
    text-wrap: balance;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ascend-accent);
}

.analysis-summary-strip .critical-moments-value[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.analysis-summary-strip .critical-count[b-aoehpxgdsv] {
    font-family: var(--ascend-font-primary);
    font-size: 2.75rem;
    font-weight: bold;
    line-height: 1;
    color: var(--ascend-accent);
}

.analysis-summary-strip .critical-sublabel[b-aoehpxgdsv] {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Main Content Grid — StudyBoard layout: the board grows in a 1fr track on the
   left while a fixed ~380px tabbed panels column sits on the right (Moves list +
   compact details, plus the relocated Review / Engine / Position panels). */
/* #6929 - this container takes keyboard focus via tabindex=0 so arrow-key move
   navigation works without clicking, and keeps working after a click lands on
   the move list. Suppress the browser's default focus ring: the visible
   affordance is the highlighted current move, not a box round the whole
   working area. */
.analysis-content:focus[b-aoehpxgdsv] {
    outline: none;
}

.analysis-content[b-aoehpxgdsv] {
    display: grid;
    /* #7151 round 3 - the BOARD TRACK carries the height-derived cap, so the
       board sits flush left with the rail adjacent and no dead gap (owner:
       "Board needs to move left. Move list to the right of the board."). The
       round-2 approach capped the board INSIDE a 1fr track, which centered a
       ~650px board in a huge column and left ~150-235px of dead space on each
       side at wide viewports. minmax(18rem, ...) keeps a usable floor; the
       track shrinks below the cap on narrow-but-tall viewports. A fixed
       viewport-derived length - never a percentage against an auto row (the
       2026-08-19 incident shape).

       #7756 - THE HEIGHT-DERIVED CAP HAD NO WIDTH TERM, AND THAT IS THE BUG.
       `calc(100dvh - 21rem)` describes how much VERTICAL room the board has and
       says nothing about how much of the ROW it may take, so a tall-but-narrow
       viewport handed the board its whole height cap and left the rail whatever
       remained. MEASURED on dev, this game, before the fix:

         834 x 1112   board 385   rail  97   -> button.analysis-tab to x=947
         834 x  900   board 385   rail  97   -> same
         1024 x 900   board 480   rail 192   -> button.analysis-tab to x=1042
         1024 x 768   board 432   rail 240   -> no overflow, but the rail is
                                                 240px for content needing 279

       Note the shape: at ONE width the rail was 192px or 240px depending only
       on the viewport's HEIGHT, and the page overflowed at 900 and not at 768.
       No width media query can describe that, which is why this shipped - the
       same finding as #7745, where a fixed-width board rail took its fill first
       and left the content pane the same 184px at 768 and at 1024.

       So the board track takes the SMALLER of its height cap and what the rail
       leaves - the exact form the >=1500px rule below has always used
       (`min(100dvh - 21rem, 100vw - 62rem)`); it was simply missing here. The
       rail's reserve is MEASURED, not chosen: its min-content inline size is
       279px on this page (read off a min-content clone on dev, 2026-09-19), so
       18rem = 288px clears it with 9px to spare. The floor is capped by the
       same expression, because a floor that outgrows the track it sits in is
       just overflow with extra steps.

       Result: the rail is 288px at 1024 REGARDLESS of height, the board is
       384px there (it was 432-480), and nothing at or above 1281px moves - at
       1280x800 and 1440x900 the height cap is still the smaller term, so those
       widths compute exactly what they computed before. */
    --rail-reserve: 18rem;
    --board-track-max: min(calc(var(--analysis-dvh) - 21rem), calc(100% - var(--rail-reserve) - 1rem));
    grid-template-columns:
        minmax(min(18rem, var(--board-track-max)), var(--board-track-max))
        minmax(0, 380px);
    gap: 1rem;
    /* Top-align; the rail is viewport-capped (see below) so it must not be
       stretched to the board column's height. */
    align-items: start;
}

/* The rail + MOVE DETAILS wrapper. Two-column mode: a flex stack in the second
   grid column - rail on top (shortened when details are present, see below),
   details beneath, both viewport-capped, so the composer is on screen the
   moment a move is selected. Three-column mode dissolves it (display:
   contents) so rail and details become independent grid columns. */
.rail-stack[b-aoehpxgdsv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.move-detail-col[b-aoehpxgdsv] {
    min-width: 0;
}

/* #8381 - the deep-dive engine read renders under MOVE DETAILS, in this column; a
   small gap keeps the two cards from touching. ::deep because the panel's root is
   MultiEnginePanel's own element. */
.move-detail-col[b-aoehpxgdsv]  .multi-engine-panel {
    margin-top: 0.5rem;
}

/* --- #7151 round 3: the three-column workspace ------------------------------

   Owner, on the round-2 build: "Board needs to move left. Move list to the
   right of the board. Can we get the stuff at the bottom to the right of the
   move list somehow?" and "Engine details and move details still hidden below
   the fold."

   At >=1600px: board | moves rail | (summary stats over MOVE DETAILS). The
   rail-stack wrapper dissolves so the rail and the details panel are placed
   independently. Everything the review needs - board, controls, every engine
   read, first moves, ACCURACY/MISTAKES/EVALUATION, and the note composer -
   is inside the viewport with zero scrolling.

   The board track takes the SMALLER of the height-derived cap and the width
   the other columns leave over (100vw - 62rem covers the sidebar, page
   padding, gaps, the 380px rail and a 15rem stats column), so a wide-but-
   short viewport never overflows.

   ROUND 4 - the thresholds were 1600px wide AND 1000px tall, and the height
   half was simply wrong. A browser viewport is not a monitor: a 1080p screen
   leaves ~900px of viewport after OS and browser chrome, and any display
   scaling above 100% shrinks the CSS viewport further. The owner's own
   machine reports ~1599x820 CSS px, so it failed BOTH tests and always got
   the two-column fallback - the analysis strip pushed below the board with
   ~270px of dead width to its right, which is exactly what he reported. The
   1000px figure had been verified only at 1680x1050, a size that happened to
   clear it.

   Measured at the new floor instead: 1500px wide = sidebar 336 + gaps 32 +
   rail 380 + stats floor 240 = 988px of fixed chrome, leaving a 512px board -
   still above the ~500px usability floor. 760px tall is the point below which
   the stacked stats column (~562px) plus the header offset (~200px) can no
   longer be reached without scrolling; below that the two-column layout is
   genuinely the better shape. Below 769 the single-column stack. */
@media (min-width: 1500px) and (min-height: 760px) {
    .analysis-content[b-aoehpxgdsv] {
        --board-track: min(calc(var(--analysis-dvh) - 21rem), calc(100vw - 62rem));
        grid-template-columns: minmax(18rem, var(--board-track)) minmax(0, 380px) minmax(15rem, 1fr);
        /* Row 1 sizes to the stats column; row 2 (details) takes the rest.
           Board and rail span both rows, so the shared-row inflation a tall
           board causes lands in row 2, where align-start keeps the details
           panel pinned under the stats. */
        grid-template-rows: auto 1fr;
    }

    /* ROUND 4 - the rail-stack stays a STACK in column 2 here. It used to
       dissolve (display: contents) at every three-column size, which put MOVE
       DETAILS in column 3 under the stats with a fixed `100dvh - 50rem` cap.
       That 50rem is only survivable on a tall viewport: at 820px the stats
       column already ends at y=764, so the cap resolved to 20px and MOVE
       DETAILS was sliced by the fold - the same cut-off box reported on the
       round-3 build. Keeping the stack intact puts MOVE DETAILS directly under
       the move list it belongs to (master over detail) and inside the board's
       own height, so nothing crosses the fold. The dissolve is restored below
       at >=1000px tall, where there is genuinely room for it. */
    .rail-stack[b-aoehpxgdsv] {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
        min-height: 0;
    }

    .analysis-board-section[b-aoehpxgdsv] {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .analysis-summary-strip[b-aoehpxgdsv] {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: start;
        /* The three tiles stack vertically in the stats column. */
        grid-template-columns: minmax(0, 1fr);
    }

    /* Compact tiles for the vertical stats column - same content, less air. */
    .analysis-summary-strip .summary-tile[b-aoehpxgdsv] {
        padding: 0.75rem 1rem;
    }

    .analysis-summary-strip .accuracy-card .accuracy-circle[b-aoehpxgdsv] {
        width: 72px;
        height: 72px;
        margin-bottom: 0.25rem;
    }

    .analysis-summary-strip .accuracy-card .accuracy-number[b-aoehpxgdsv] {
        font-size: 1.4rem;
    }

    .analysis-summary-strip .stat-card h3[b-aoehpxgdsv] {
        margin-bottom: 0.5rem;
    }

    .analysis-summary-strip .eval-chart-card .eval-chart[b-aoehpxgdsv] {
        max-height: 9rem;
    }
}

/* #9252 - the stats column was the one column of the three with no height cap. The
   board column and the rail-stack beside it are both capped to the viewport
   (var(--analysis-dvh) - 14rem below 1000px tall), but the stats column grew with its
   content, so phone-today's Self Review door (#8312, a 104px row at the end of the
   strip) carried it to y 893 in an 820px viewport at 1599x820 (measured), past the
   fold and over the card beneath. It now takes the same cap as its neighbors and
   scrolls its own overflow, so the three columns end flush and the door is reached by
   scrolling the column, not the page. Only this band: at >=1000px tall the stats sit
   above their own MOVE DETAILS row (round 4, below) and that layout has its own room. */
@media (min-width: 1500px) and (min-height: 760px) and (max-height: 999.98px) {
    .analysis-summary-strip[b-aoehpxgdsv] {
        max-height: calc(var(--analysis-dvh) - 14rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ROUND 4 - only at >=1000px tall is there room for MOVE DETAILS to become its
   own column-3 row beneath the stats. Below this the rail-stack above keeps it
   under the move list instead. */
@media (min-width: 1500px) and (min-height: 1000px) {
    .rail-stack[b-aoehpxgdsv] {
        display: contents;
    }

    /* Specificity, not order: the @media (min-width: 769px) rule further down
       the file carries the same 0-1-0 weight and would otherwise win purely
       by being later, which is exactly what silently defeated this cap on
       the first attempt. Qualified by the grid parent to outrank it. */
    .analysis-content .analysis-panels-column[b-aoehpxgdsv] {
        grid-column: 2;
        grid-row: 1 / span 2;
        /* ROUND 5 - track the BOARD's height, not the grid row's. `align-self:
           stretch` was tried first and overshot by ~94px at tall viewports,
           because the row is inflated by column 3 (stacked stats + details),
           not by the board.
           Measured: the board COLUMN is the chessboard + 146px of chrome, and
           the chessboard is the board track minus 67px whenever it is
           width-limited - so the column is `--board-track + 5rem`. Taking the
           min with the height-derived cap covers the short-viewport end where
           that term binds first. Verified equal to the board within 1px at
           1600x760, 1600x820, 1600x900, 1600x1000 and 1680x1050.
           MEASURED AFTER: 1600x760, 1600x820, 1600x900 and 1600x1000 all land
           within 1px of the board. KNOWN GAP: 1680x1050 runs 37px long and
           1920x1064 / 2000x1064 run 94px long, because above roughly 1000px of
           viewport height the chessboard stops being width-limited and is
           capped by a height budget this expression does not model (the board
           column is the chessboard + 146px of chrome; the chessboard is the
           track minus 67px only while width-limited). Named rather than
           papered over: it is a cosmetic overhang with no scrollbar, and
           guessing a second term without measuring what sets that budget is
           exactly how the 2026-08-19 layout break happened. */
        /* The board-track expression is written out rather than read through
           var(--board-track): nesting the custom property inside this min()
           produced an INVALID declaration (computed max-height fell back to the
           bare height term, measured 776px where 688px was intended), so the
           cap silently did nothing. Written literally it resolves. */
        max-height: min(
            calc(var(--analysis-dvh) - 14rem),
            calc(min(calc(var(--analysis-dvh) - 21rem), calc(100vw - 62rem)) + 5rem));
    }

    .analysis-summary-strip[b-aoehpxgdsv] {
        grid-row: 1;
        align-self: stretch;
    }

    .move-detail-col[b-aoehpxgdsv] {
        grid-column: 3;
        grid-row: 2;
        align-self: start;
        /* Fixed length - never a percentage against an auto-sized row. */
        max-height: calc(var(--analysis-dvh) - 50rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Grid ITEMS default to min-width:auto and refuse to shrink below their own
   min-content width - they overflow the track even when it is minmax(0, ...).
   Both halves of the pattern are required, so pin the children too. Without this
   a wide child (move table, assessment panel) pushes the column past the viewport
   on a phone and the board's h-file is clipped off-screen (#6672, Android). */
.analysis-content > *[b-aoehpxgdsv] {
    min-width: 0;
}

/* Right-hand panels column (StudyBoard .panels-column) — the narrow tabbed rail. */
.analysis-panels-column[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Let the column shrink inside its grid track so a panel's content can't
       force the board layout wider than the viewport. */
    min-width: 0;
}

/* --- #7151, the density fix: the RAIL scrolls inside itself ------------------

   The customer report: "scrolling to comment is bothersome and takes out of
   flow" - working the move list / note / conversation scrolled the board off
   the screen. On a wide viewport the rail now gets its own scrollbar, capped
   near the viewport height, so everything in it is reachable without moving
   the board.

   HOW THIS DIFFERS FROM THE REVERTED ATTEMPT (fa89b720e, prod incident
   2026-08-19): that build put `max-height: calc(100dvh - 8rem)` on the GRID
   CONTAINER and `max-height: 100%` + overflow on BOTH columns. A grid row is
   sized by its content, and a child's percentage max-height against an
   auto-sized row is cyclic - the row stayed content-tall, nothing scrolled,
   and the whole workspace painted straight over the summary strip and the
   footer below it. Here the cap is a FIXED length on the rail column ONLY:
   no cap on the container, no percentage heights, no overflow on the board
   column. The grid row is then max(board height, rail cap) and everything
   after it lays out below, exactly as normal flow.

   The allowance covers the header band + page padding above the row - 7rem
   now the header is one thin row (#7151 round 2; was 9rem against the taller
   identity band). dvh, not vh, so mobile-browser chrome is tracked. */
/* #7756 - 769 -> 901: this is the RAIL-BESIDE-THE-BOARD treatment, so it is
   scoped to the widths that actually put the rail beside the board. Below 901
   the grid stacks (see the block further down) and a viewport-height cap with
   `overflow: hidden` on a panel that now sits UNDER a full-width board just
   slices the move list off at 100dvh - 14rem with no scrollbar of its own. */
@media (min-width: 901px) {
    .analysis-panels-column[b-aoehpxgdsv] {
        /* #7151 round 4 - MEASURED, not chosen. The board COLUMN is the board
           track (100dvh - 19rem, a square) plus ~5rem of chrome above and
           below it (identity rows + the control bar), i.e. about
           100dvh - 14rem. The old 11rem allowance made this column 3rem (~48px)
           TALLER than the board beside it, which is exactly what the owner saw
           on the dev build: "the column with move list is slightly taller than
           the board column". Matching the board's own expression keeps the two
           columns flush at every viewport instead of at one. */
        max-height: calc(var(--analysis-dvh) - 14rem);
        /* ROUND 5 - the rail is NOT a scroll container. It used to be
           `overflow-y: auto` while .moves-list inside it was ALSO
           `overflow-y: auto`, so whenever the rail's content exceeded its cap
           the user got two nested scrollbars on the same axis - reproduced at
           1600x760 (rail 536, content 572). Round 4 made that worse by
           shortening the cap from 11rem to 14rem to match the board.
           Now the rail clips, its inner chain flexes, and .moves-list is the
           single scroller - which also keeps the engine read pinned above the
           list instead of scrolling away with it. */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        /* Without this a flex child refuses to shrink below its content. */
        min-height: 0;
        overscroll-behavior: contain;
        /* Room for the scrollbar so panel content is not clipped under it. */
        padding-right: 0.375rem;
    }

    .analysis-panels-column[b-aoehpxgdsv]::-webkit-scrollbar {
        width: 0.5rem;
    }

    .analysis-panels-column[b-aoehpxgdsv]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 0.25rem;
    }

    .analysis-panels-column[b-aoehpxgdsv]::-webkit-scrollbar-thumb:hover {
        background: rgba(49, 221, 227, 0.35);
    }
}

/* --- #7188: the rail budget is DIVIDED, not double-capped -------------------

   THE HISTORY, because it is the whole point of this ticket. Four patches
   (#7151, #7168, #7179, #7188) each retuned the two numbers below and each just
   moved the shortage somewhere else. The pair was:

     .analysis-panels-column  max-height: min(70dvh - 10.5rem, 100dvh - 26rem)
     .move-detail-col         max-height: max(12.5rem, 30dvh - 4.5rem)

   Two independent caps against one shared budget have to be tuned AGAINST EACH
   OTHER, so every fix to one is a regression in the other. #7168 added the
   12.5rem floor so the note composer would stop clipping; MOVES absorbed the
   loss and rendered ONE row (MEASURED 2026-08-22, 1599x820: move list 84px,
   one 43px row visible; at 1366x768, 32px and ZERO rows).

   Both caps are gone, and the 12.5rem floor is DELETED rather than retuned: it
   existed solely to keep the note composer on screen, and that composer no
   longer exists (it moved into the right-click menu, which is position: fixed
   and outside this budget entirely). Deleting a constraint whose reason is gone
   is not another cap tweak; it is the opposite.

   What replaces them is a DIVISION, expressed once:

     .rail-stack             one cap, matching the board column's own height
     .move-detail-col        flex: 0 0 auto - takes its CONTENT height, up to a
                             ceiling that stops a long read from eating the list
     .analysis-panels-column flex: 1 1 0    - takes everything left over

   So MOVE DETAILS asks for what it needs and MOVES gets the remainder, instead
   of two numbers arguing. Turning the engine reads off hands their 157px
   straight to the move list with no CSS change at all, which is exactly what
   the toggle is supposed to buy.

   :has() is supported by every browser we target; without it the rail keeps its
   full cap and the details panel lands below it - degraded, never broken. */
/* #7168's note lived here and is deleted with the rule it documented: it was a
   long argument about how to divide a fixed budget between a note composer and
   the move list, and the composer is gone (right-click menu, #7176/#7188). What
   remains is the division above, which needs no per-viewport tuning.

   The one number left is the CEILING on MOVE DETAILS, and it is derived from
   the panel's own content, not chosen to make a budget balance. The panel is
   now REFERENCE - the move header, the classification, and the engine's line.
   MEASURED at 1599x820 on 2026-08-22, on this game:

     good move          "5. e3   +0.52 -> +0.47 / Good move"                125px
     inaccuracy         "7. g3?! +0.49 -> -0.17 / Inaccuracy /
                         Small inaccuracy / BEST: Nge2"                     180px

   11.5rem (184px) clears the LARGER of the two, so the everyday read never
   scrolls - which was the point of shrinking this panel. Anything beyond it (a
   long engine explanation, a coach's read-only
   note panel) scrolls inside the panel rather than taking rows off the move
   list. If you change what renders in here, re-measure both cases; do not
   nudge this number to buy space for something else.

   Scoped to the SAME range the pair it replaces was scoped to - the two-column
   and short-viewport layouts. At >=1500px wide AND >=1000px tall the rail-stack
   dissolves (display: contents) and rail and details are independent grid
   items placed by the block further up; this division has no meaning there and
   must not reach into it. */
/* #7756 - 769 -> 901 for the same reason as the block above: the division this
   block expresses is between a rail and a details panel sharing ONE column
   beside the board, and below 901 there is no such column. */
@media (min-width: 901px) and (max-height: 999.98px), (min-width: 901px) and (max-width: 1499.98px) {
    /* ONE cap for the pair, matching the board column beside it (the board
       track is 100dvh - 19rem plus ~5rem of chrome), so the two columns end
       flush and neither the rail nor the details panel is sized against a
       percentage of an auto-sized grid row - the 2026-08-19 failure mode. */
    .rail-stack:has(> .move-detail-col)[b-aoehpxgdsv] {
        max-height: calc(var(--analysis-dvh) - 14rem);
        min-height: 0;
    }

    /* The rail is the ONLY shrinkable child, so the whole shortage lands on it
       and MOVE DETAILS always gets its (small, content-derived) height. That is
       the division, and it is expressed by which child can shrink rather than
       by two numbers tuned against each other.

       flex-BASIS stays `auto`, and that is load-bearing in the other direction:
       a basis of 0 makes this column contribute nothing to the stack's own
       content height, and on the two-column layout the stack is auto-height, so
       it collapsed to just the details panel and the move list measured ZERO px
       (reproduced at 1366x768 before this was corrected). Basis auto keeps the
       stack content-tall, the max-height above clamps it, and shrink does the
       dividing. */
    .rail-stack:has(> .move-detail-col) .analysis-panels-column[b-aoehpxgdsv] {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
    }

    /* flex-shrink 0: the read on the selected move is never the thing that gets
       squeezed - it is already only three lines. */
    .move-detail-col[b-aoehpxgdsv] {
        flex: 0 0 auto;
        max-height: 11.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* --- #7763 round 2: the column is CRAMPED, so buy the room from CHROME ------

   ROUND 1 (57b4af2b3) shipped, reached production and was rejected there.
   Owner, walking prod 2026-09-20: "The moves list needed to be expanded but not
   at the full expense of the UX for analysis."

   What round 1 did, re-measured on this tree at 1440x900 with three real
   messages on the move, before touching anything:

                    thread closed     thread open (round 1)
     .analysis-panels-column  476              360
     .moves-list           221.77           105.77   (4 rows -> 2)
     .move-detail-col         184              300
     .cc-messages               -               96   of 542 of content

   It froze the rail at min(22.5rem, 100dvh - 26.5rem) and handed the whole
   remainder to the details column, so opening a thread took 116px straight off
   the move list. At 1024x900 that leaves the list ONE row; at 1920x1080 round 1
   also forced the three-column layout back into a stack, taking the list from
   13 rows to 2. And the conversation did not even get a readable message list
   out of it - .cc-messages sat on its 6rem floor either way, because the
   conversation's own chrome ate the 116px before the messages saw any of it.

   The report this ticket came from names BOTH halves: "the move list is cramped
   vertically... The annotations and commentary boxes become difficult to use
   because the column is cramped". So the column is short for both, and moving
   the line between them cannot fix it in either direction. The height has to
   come from somewhere that is not the other half's content.

   MEASURED, same viewport, thread open, where the 676px stack actually goes:

     rail 360      tab strip 45, gap 16, engine reads 86.4, gap 20,
                   moves-card padding 40, MOVES head 44.8   = 252.2 of CHROME
                   .moves-list                              = 105.8 of CONTENT
     detail 300    read (move header + verdict)             = 104
                   conversation chrome: head 19.2+8, accordion bar 42,
                   gaps 33.6, composer 148.5                = 275.3
                   .cc-messages                             =  96

   70% of the rail and 74% of the details column are chrome. The composer alone
   (148.5px: a rows="3" textarea at 98px over a 42.5px foot) is bigger than the
   message list it exists to add to. That is the room, and none of it is the
   other region's content.

   THE THREE CHANGES, in the order they matter:

   1. RAIL CHROME (unconditional at >=901px, so the move list is longer whether
      or not a thread is ever opened - the "moves list needed to be expanded"
      half of the ruling). The column gap, the tab-content gap and the moves
      card's vertical padding are trimmed: -28px, which is most of a move row,
      and it lands on .moves-list because #7188's division gives it the
      remainder. Horizontal padding is untouched.

   2. CONVERSATION CHROME (whenever the per-move conversation is on screen,
      scoped to .move-detail-col so the GAME-LEVEL card below the board keeps
      the component's own roomier defaults). The textarea drops from three rows
      to two, the stacked gaps come in, and the head's margin halves: -77.6px,
      and every pixel of it lands on .cc-messages, which is the one flexing
      child. `resize: vertical` still works, so a reader writing a long reply
      can drag the composer back up.

   3. THE SHARE, and only now. #7188's division is kept exactly as written - the
      details column asks for what it needs and the rail takes the remainder -
      so the only thing that moves is the CEILING, from 11.5rem to

          max(16.25rem, calc(100dvh - 40rem))

      Both terms are measured. 16.25rem (260px) is the conversation's
      irreducible height after (2): accordion bar 42, one message 96, the
      trimmed composer 104.5, and the gaps between them. 40rem is the rest of
      the stack at its floor: 14rem stack allowance + 1rem gap + the rail's
      224.2px of trimmed chrome + four move rows at 43.39px, which is 39.9rem.

      So the second term holds the MOVE LIST at four rows and gives the
      conversation every pixel of viewport above that, and the max() takes over
      below roughly 900px tall, where four rows and a conversation no longer
      both fit and the conversation is the thing the reader just asked for. One
      expression, no width band, nothing to tune per viewport - the shape that
      caused #7756 and #7761 is not reintroduced.

      Scoped to the SAME media range as the #7188 division it modifies. Round 1
      put its share rule in a bare @media (min-width: 901px) and ALSO forced the
      three-column layout back into a stack; that is what cost 11 move rows at
      1920x1080. The three-column layout has its own room problem and its own
      rule further down - it does not need the stack.

   KEPT FROM ROUND 1, unchanged and deliberately so: the scroll region. Sizing
   .cc-messages from a ZERO flex basis is what stops the column's scroll length
   growing with the thread (measured then: ten messages took the column's
   content from 555px to 1525px). The chain below still carries NO
   `min-height: 0` - round 1's first cut did, and the flex algorithm shrank
   .cc-thread to 9.14px with 264px hanging out of it.

   .cc-* are CommentaryThreadGroup / CommentaryThread markup and need ::deep. */
@media (min-width: 901px) {
    /* (1) RAIL CHROME. Unconditional: a shorter chrome stack is a longer move
       list in every state, because #7188 gives .moves-list the remainder. */
    .analysis-panels-column[b-aoehpxgdsv] {
        gap: 0.75rem;
    }

    .analysis-panels-column .analysis-tab-content[b-aoehpxgdsv] {
        gap: 0.75rem;
    }

    /* Vertical only. The 1.25rem inline padding is what keeps the move rows off
       the card's edge and is not the budget that is short. */
    .analysis-panels-column .moves-card[b-aoehpxgdsv] {
        padding: 0.75rem 1.25rem;
    }

    /* (2) CONVERSATION CHROME. Scoped to the details column: the game-level
       COACH COMMENTARY card below the board (#7176) has the page to grow into
       and keeps the component's own defaults. */
    .move-detail-col .move-commentary[b-aoehpxgdsv] {
        margin: 0.5rem 0 0;
        padding-top: 0.375rem;
    }

    .move-detail-col .move-commentary-head[b-aoehpxgdsv] {
        margin-bottom: 0.25rem;
    }

    /* ...and it goes entirely while the thread is OPEN. "ON THIS MOVE" over an
       accordion bar that reads "With Sarah Kim - 3 messages" names the same
       surface twice, and 27.2px is the difference between the conversation's
       min-content height fitting the 16.25rem floor and overflowing it - which
       is the difference between the composer sitting at the foot of the column
       and being 100px below it. Nothing points at this element (it is a div
       with an icon and a span, not a labeled region), and it is still there,
       doing its discovery job, whenever the thread is CLOSED. */
    .move-detail-col:has(.move-commentary .cc-group-bar.is-open) .move-commentary-head[b-aoehpxgdsv] {
        display: none;
    }

    .move-detail-col .move-commentary[b-aoehpxgdsv]  .cc-group {
        gap: 0.375rem;
    }

    .move-detail-col .move-commentary[b-aoehpxgdsv]  .cc-thread {
        gap: 0.5rem;
    }

    .move-detail-col .move-commentary[b-aoehpxgdsv]  .cc-composer {
        gap: 0.375rem;
    }

    /* Two rows instead of three. `resize: vertical` survives, so this is a
       smaller RESTING size and not a smaller composer. */
    .move-detail-col .move-commentary[b-aoehpxgdsv]  .cc-input {
        height: 3.5rem;
        min-height: 3.5rem;
    }

    /* (KEPT) The chain, so the height the column has actually reaches the
       message list: every link from the column down to .cc-messages has to be a
       flex column that GROWS, or the space stops at the first block box.

       Deliberately NO `min-height: 0` on these links. The conversation has an
       irreducible height - accordion bar, one message, composer - and zeroing
       them lets the flex algorithm shrink straight past it: measured on round
       1's first cut at 1440x900, .cc-thread came out 9.14px tall with 264px of
       content hanging out of it, and 0px at 1024. Their automatic minimum size
       is exactly the floor wanted, so any genuine shortage lands on
       .move-detail-col's own scrollbar instead of on boxes that then lie about
       their height. */
    .move-detail-col:has(.move-commentary .cc-group-bar.is-open) .move-details-card[b-aoehpxgdsv],
    .move-detail-col:has(.move-commentary .cc-group-bar.is-open) .move-details[b-aoehpxgdsv],
    .move-detail-col:has(.move-commentary .cc-group-bar.is-open) .move-commentary[b-aoehpxgdsv] {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .move-detail-col:has(.move-commentary .cc-group-bar.is-open)
    .move-commentary[b-aoehpxgdsv]  .cc-group,
    .move-detail-col:has(.move-commentary .cc-group-bar.is-open)
    .move-commentary[b-aoehpxgdsv]  .cc-group-panel,
    .move-detail-col:has(.move-commentary .cc-group-bar.is-open)
    .move-commentary[b-aoehpxgdsv]  .cc-thread {
        flex: 1 1 auto;
    }

    /* (KEPT) The one scroller, and the reason the column's scroll length stops
       depending on how long the conversation is.

       `max-height: none` retires the component's own 26rem, which is right for
       the game-level card and exactly wrong inside a column that is already
       bounded. flex-BASIS 0, not auto, is the mechanism: a column flex
       container's own auto height is the sum of its items' HYPOTHETICAL main
       sizes, so with basis auto every ancestor inherited the whole thread's
       height. The floor is one message, measured at 95.78px. */
    .move-detail-col:has(.move-commentary .cc-group-bar.is-open)
    .move-commentary[b-aoehpxgdsv]  .cc-messages {
        flex: 1 1 0;
        min-height: 6rem;
        max-height: none;
    }

    /* (KEPT) Pinned at the foot of the column: the reply box is the thing a
       reader came here to reach, so it is never what gets scrolled to. */
    .move-detail-col:has(.move-commentary .cc-group-bar.is-open)
    .move-commentary[b-aoehpxgdsv]  .cc-composer {
        flex: 0 0 auto;
    }
}

/* (3) THE SHARE, in the two-column and short-viewport layouts - the SAME range
   #7188's division is scoped to, and the reason this is a separate block. The
   division itself is untouched: .move-detail-col is still `flex: 0 0 auto` with
   a ceiling and .analysis-panels-column still takes the remainder, so turning
   the engine reads off still hands their band straight to the move list. */
@media (min-width: 901px) and (max-height: 999.98px), (min-width: 901px) and (max-width: 1499.98px) {
    .analysis-content
    .rail-stack:has(> .move-detail-col .move-commentary .cc-group-bar.is-open)
    .move-detail-col[b-aoehpxgdsv] {
        max-height: max(16.25rem, calc(var(--analysis-dvh) - 40rem));
        display: flex;
        flex-direction: column;
    }
}

/* (3b) THE SHARE in the three-column layout, where there is room going spare
   rather than a line to move. MEASURED at 1920x1080 with a thread open: the
   details panel sits in column 3 row 2 under the stats, its top at y=793 and
   the board column's foot at y=1144 - 351px of room - while its own cap
   `100dvh - 50rem` holds it to 280px and the conversation scrolls inside that.
   So the cap goes to 45.5rem, which is that 351px at 1080 and tracks the
   viewport above and below it: the panel fills the room it already has, and
   stops at the board's foot so the page does not grow.

   The rail is a separate grid item in column 2 here, at its full 824px, and is
   NOT touched by this - the move list keeps all THIRTEEN of its rows. Round 1
   forced this layout back into a stack to give the conversation the board's
   height, and that is what took the list to two rows; the room under the stats
   is worth less than a forced stack but it costs nothing at all.

   NAMED AND NOT FIXED HERE: at 1920x1080 the panel STARTS at y=793 because the
   stacked ACCURACY / MISTAKES / EVALUATION column above it is 574.72px, so no
   cap can put the composer above the fold in this layout - the conversation is
   always partly a page scroll away. Moving the details panel above the stats
   in column 3 while a thread is open would fix it outright and cost the move
   list nothing, but it re-orders a layout #7151 placed deliberately and is a
   product call, not a CSS one. */
@media (min-width: 1500px) and (min-height: 1000px) {
    .analysis-content
    .rail-stack:has(> .move-detail-col .move-commentary .cc-group-bar.is-open)
    .move-detail-col[b-aoehpxgdsv] {
        max-height: calc(var(--analysis-dvh) - 45.5rem);
        display: flex;
        flex-direction: column;
    }
}

/* The active tab's stacked panels within the narrow column. */
.analysis-tab-content[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* ROUND 5 - the chain that makes .moves-list the rail's only scroller. Each
   link needs `min-height: 0` or it refuses to shrink below its content and the
   overflow pops back out to an ancestor. */
.analysis-tab-content[b-aoehpxgdsv] {
    flex: 1 1 auto;
    min-height: 0;
}

/* The Review and Position tabs have no move list, so nothing inside them can
   take the scroll - they scroll as a whole instead. :has() is supported across
   every browser we target (same assumption as the rail-stack rule below). */
.analysis-tab-content:not(:has(.moves-list))[b-aoehpxgdsv] {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.moves-card[b-aoehpxgdsv] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Left Column: Board Section.

   #7151 - this used to carry `position: sticky; top: 1rem` to pin the board
   while the rail scrolled, and it NEVER worked: sticky is inert app-wide
   (app.css puts overflow-x: hidden on html and body, which per spec makes BODY
   a scroll container that never scrolls, so every sticky descendant pins to a
   box that does not scroll - measured 2026-08-02, see the #6784 note further
   down). The dead rule is deleted rather than left looking live; the board
   staying in view is now the rail's job - see .analysis-panels-column below,
   which scrolls inside itself on a wide viewport. */
.analysis-board-section[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Grid items default to min-width: auto (content-based), which prevents shrinking
       and causes neighbor overlap when content is wider than the column. */
    min-width: 0;
}

/* Move list column — the second column of the content row, directly beside the board.
   Master-detail: the move list (master) sits on top and scrolls within its bounded
   height; the selected-move MOVE DETAILS pane (detail) stacks below it (#1238). */
.analysis-moves-col[b-aoehpxgdsv] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Secondary panels — the Review / Engine / Position content now lives inside the
   narrow right-hand rail (StudyBoard pattern), so the former two-column grid
   collapses to a single stacked column (game insight over engine over coach). */
.analysis-panels[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
    min-width: 0;
}

.panel-col[b-aoehpxgdsv] {
    min-width: 0;
}

/* Focus tabs — a segmented control that swaps which secondary-panel group shows,
   so only one group is visible at a time and the page reads calm (#UI redesign). */
.analysis-tabs[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.analysis-tabstrip[b-aoehpxgdsv] {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 14px;
}

.analysis-tab[b-aoehpxgdsv] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
}

.analysis-tab i[b-aoehpxgdsv] {
    font-size: 0.95rem;
}

.analysis-tab:hover[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

.analysis-tab.active[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.18), rgba(49, 221, 227, 0.1));
    border-color: rgba(49, 221, 227, 0.45);
    color: var(--ascend-accent);
}

.analysis-tab:focus-visible[b-aoehpxgdsv] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

/* Four tabs (Moves | Review | Engine | Position) share the ~380px rail now, so
   trim the padding/label so they fit on one row without wrapping. */
.analysis-panels-column .analysis-tabstrip[b-aoehpxgdsv] {
    gap: 0.25rem;
    padding: 0.25rem;
}

.analysis-panels-column .analysis-tab[b-aoehpxgdsv] {
    gap: 0.3rem;
    padding: 0.5rem 0.4rem;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.analysis-panels-column .analysis-tab i[b-aoehpxgdsv] {
    font-size: 0.85rem;
}

/* On narrow widths the tab labels can wrap; keep the strip usable and tappable. */
@media (max-width: 480px) {
    .analysis-tab[b-aoehpxgdsv] {
        padding: 0.55rem 0.5rem;
        font-size: 0.72rem;
    }

    .analysis-panels-column .analysis-tab[b-aoehpxgdsv] {
        padding: 0.5rem 0.35rem;
        font-size: 0.64rem;
    }
}

/* Board Card - tight chrome (#7151 round 2): the card's padding, gaps and
   control row all subtract from the height-derived board size below. */
.board-card[b-aoehpxgdsv] {
    flex: 1;
    min-width: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.board-card[b-aoehpxgdsv]  .chessboard-container {
    width: 100%;
    aspect-ratio: 1;
}

.board-card[b-aoehpxgdsv]  .chessboard {
    width: 100% !important;
    height: 100% !important;
}

/* Navigation Controls - one thin icon row (#7151 round 2, Lichess ref). */
.board-controls[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* #7188 - this row does not wrap and was already running to the board's
       right edge at 1366x768 (MEASURED 2026-08-22: last control at x=793
       against a board column ending at x=790), so adding the engine-reads
       toggle pushed it off the edge. It wraps now. Reachability is not
       negotiable, and a control the user cannot see is worse than a second
       row. #7178 owns making the row's targets tell each other apart; this is
       only the overflow. */
    flex-wrap: wrap;
    /* #7178 - the column gap is now the GROUP separator and has to beat the gap
       INSIDE a group (0.125rem in the transport cluster) by enough for the eye
       to read the boundary. That ratio, not the absolute value, is the signal. */
    gap: 0.375rem 0.85rem;
    padding: 0.375rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* #7188 ROUND 2 - THE SECOND ROW *WAS* THE OVERFLOW.

   Round 1 gave this row `flex-wrap: wrap` so the new engine-reads toggle could
   not be pushed off the board's right edge, and that call was right:
   reachability is not negotiable. But a wrapped second row costs ~44px (a 36px
   control plus the row gap), and that is almost exactly what then pushed the
   board's controls past the fold.

   MEASURED, not reasoned - prod E2E against 1.13.17, which already CONTAINS
   round 1: .board-controls bottom sat at 794.9 against a 768px viewport (+26.9)
   and 923.7 against 900 (+23.7), failing the #7151 compactness gate at four
   desktop widths on all three browsers. The gate is the owner's own directive:
   "get the user all the info that they would be interested in without having to
   scroll everywhere". It had been failing since round 1 shipped and nobody read
   it, because the E2E stage is continueOnError and orange stops being a colour
   you look at.

   So on desktop the row is made to FIT one line rather than wrapping onto two.
   Every control shrinks a little; NOTHING is removed and nothing is reordered,
   so #7178 still owns the row's affordance redesign and this does not collide
   with it. `flex-wrap: wrap` deliberately STAYS as the safety net - if a
   viewport is ever narrow enough that one line genuinely cannot hold the row, a
   second row is still better than a control the user cannot see.

   Mobile is untouched and deliberately goes the other way: the <=480px block
   below takes these to 44px, because a phone needs a bigger target, not a
   smaller one, and a phone is not fighting for vertical space in the same way. */
@media (min-width: 769px) {
    .board-controls[b-aoehpxgdsv] {
        /* #7178 - the column gap stays generous where the groups are: this is
           the separator, and compacting it to 0.3rem would spend the whole
           point of the change to buy back 2px. The row has four fewer controls
           now, so it can afford it. */
        gap: 0.25rem 0.75rem;
        padding: 0.25rem;
    }

    .board-controls .nav-btn[b-aoehpxgdsv] {
        width: 32px;
        height: 32px;
    }
}

/* ...and on a SHORT desktop viewport, buy back the last few pixels.

   MEASURED on the running app, chromium + firefox, one analyzed game:
   at 1366x768 the board column is only 385px wide (the board sizes on
   min(w,h), so a short viewport yields a NARROW column) while this row needs
   485.8px. It is over by 101px and CANNOT be made to fit one line - twelve
   controls do not go into 385px. Two rows is the floor here, and #7178, which
   owns splitting transport from actions, is the ticket that can actually
   change that.

   So the rule above lands the wrapped row inside the viewport, but only by
   5.3px (chromium) / 5.2px (firefox). That is a real pass and too thin a one
   to trust across three engines - webkit is in the CI matrix and could not be
   launched here to check. These few pixels roughly double the margin, and they
   are spent only where the budget actually binds (<=850px tall), so the roomy
   viewports keep the larger targets. */
@media (min-width: 769px) and (max-height: 850px) {
    .board-controls[b-aoehpxgdsv] {
        /* MEASURED at 1366x768 with the groups in: the board column is 380px and
           the row came to 376px of content against 373.6px of content box, so it
           wrapped the ACTIONS group onto a second line by about 2px. #7188 could
           not fix that at any button size because the row was 485.8px; with four
           controls gone it is worth the last few pixels. Trimmed here only, where
           the vertical budget actually binds. */
        gap: 0.2rem 0.45rem;
        padding: 0.2rem;
    }

    .control-group-actions[b-aoehpxgdsv] {
        padding-left: 0.4rem;
    }

    /* The move label reserves 80px for "12. Nxd5"; on the short viewport the
       longest label this game can show still fits 68px, and those 12px are what
       put the row on one line. */
    .move-indicator[b-aoehpxgdsv] {
        min-width: 68px;
        padding: 0 0.35rem;
    }

    .board-controls .nav-btn[b-aoehpxgdsv] {
        width: 30px;
        height: 30px;
    }
}

/* #8624 - A TOUCH TABLET IS NOT A DESKTOP.

   The two rules above size the row for a mouse on every pointer, so on a touch
   tablet above 768px the transport and the position-actions button were 30px at
   1024x768 and 32px at 820x1180 (measured in the #8098 coach walk, both views),
   while the 44px phone size stops at 480px. A finger gets the touch target here.
   This has to come AFTER both rules: same specificity, and 1024x768 also matches
   the short-viewport rule, so an earlier position would lose to its 30px. The row
   keeps `flex-wrap: wrap` as its safety net if the bigger targets need a second
   line. */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) {
    .board-controls .nav-btn[b-aoehpxgdsv] {
        width: var(--touch-target);
        height: var(--touch-target);
    }
}

.nav-btn[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.nav-btn:hover:not(:disabled)[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.nav-btn:disabled[b-aoehpxgdsv] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* #7178 - the 1rem margin that used to separate flip board from the transport
   buttons is gone: the gap between .control-group elements says it now, once,
   for every control on both sides of the boundary instead of on this one
   button. */

/* --- #7188: the ENGINE READS toggle in the control bar ----------------------

   #7178 has this row down as "eleven identical targets - transport and actions
   are indistinguishable". This is deliberately not a twelfth identical one.

   It is a STATE control, not an action, and it reads as one: a separator rule
   puts it after the actions rather than among them, it is lit in brand accent
   while the reads are showing, and it goes hollow and muted when they are
   hidden. aria-pressed carries the same state to a screen reader, so the
   distinction is not purely visual. #7178 owns the wider affordance work on
   this row - a competing partial redesign here would collide with it, so this
   makes the ONE new control legible on its own terms and leaves the row alone.
   The width is deliberately unchanged so the row's rhythm still holds. */
/* #7178 - the margin and the ::after rule that used to hang off this ONE button
   to close the VIEW group are gone. The group is a real element now and
   .control-group-actions draws the boundary, so the statement is made once at
   the boundary rather than by whichever control happens to sit last. Only the
   state chrome below - lit when on, hollow when off - is still this button's
   own, because that is genuinely about this control and not about the row. */
/* --- #7178: THE CONTROL ROW IS THREE GROUPS ---------------------------------

   The defect was not "too many buttons", it was that every button looked the
   same, so nothing in the row separated "move through the game" from "do
   something to the game". These rules are the whole answer to that, and they
   are deliberately cheap: no colour changes, no new foreground/background
   pairs, nothing that can move a contrast ratio. Only spacing, one container
   ring and one divider.

   The groups sit in the flex row that .board-controls already was, so the
   existing wrap safety net, the desktop compaction block and the phone block
   all keep working on them unchanged. */
.control-group[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
}

/* TRANSPORT reads as ONE object.

   This is the rule the acceptance criterion turns on. Five equal targets with
   the same gap as everything else were five things; pulled tight inside a ring
   with a shared inset, they are one transport cluster - the same trick a media
   player uses, and the reason the eye can now find "next move" without first
   rejecting the actions.

   The inset is a BLACK wash, not a light one: on this dark card it makes the
   area behind the glyphs very slightly darker, so every icon's contrast against
   its backdrop can only go up. The .nav-btn colours themselves are untouched. */
.control-group-transport[b-aoehpxgdsv] {
    gap: 0.125rem;
    padding: 0.125rem 0.25rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
}

/* The two VIEW controls keep the row's ordinary rhythm - they are two, they do
   not need to be bound together, and the gap to either side is what says they
   are their own pair. */
.control-group-view[b-aoehpxgdsv] {
    gap: 0.25rem;
}

/* ACTIONS carries the boundary rule that used to hang off .view-toggle::after.
   Drawn on the group's leading edge, so it marks the VIEW/ACTIONS boundary
   itself instead of the last control that happened to precede it. */
.control-group-actions[b-aoehpxgdsv] {
    gap: 0.375rem;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* The overflow trigger. Same .nav-btn chrome as its neighbours by design - it
   IS a button in the row - but it holds the pressed look while its menu is
   open, which is how a menu button says the menu belongs to it. */
.board-actions-btn.is-open[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.16);
    border-color: rgba(49, 221, 227, 0.45);
    color: var(--ascend-accent);
}

/* --- #7178: the POSITION ACTIONS menu --------------------------------------

   Everything visual is inherited from #7176's .move-context-menu - this is the
   same popup pattern, not a second one. Only the width differs: 14rem wrapped
   the longest label onto a second line, and a menu item that wraps reads as two
   items. MEASURED in the browser at all three viewports: every item is one line
   at 16rem. The inline left clamp is calc(100vw - 17rem) to match. */
.board-actions-menu[b-aoehpxgdsv] {
    width: 16rem;
}

/* The two capture affordances are shared components with their own button
   chrome (a filled accent pill sized for a toolbar). Inside a menu that chrome
   is wrong twice over - it is louder than the real menu items beside it, and it
   is not full width - so it is restyled to .move-context-item here. ::deep
   because the markup belongs to the child components; the rules are scoped to
   this menu, so AddToSparringButton and AddToFlashCardsButton look exactly as
   they always have on every other surface. */
.board-actions-menu[b-aoehpxgdsv]  .add-to-sparring-btn,
.board-actions-menu[b-aoehpxgdsv]  .add-to-flashcards-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.board-actions-menu[b-aoehpxgdsv]  .add-to-sparring-btn:hover:not(.is-disabled):not(:disabled),
.board-actions-menu[b-aoehpxgdsv]  .add-to-sparring-btn:focus-visible,
.board-actions-menu[b-aoehpxgdsv]  .add-to-flashcards-btn:hover:not(.is-disabled):not(:disabled),
.board-actions-menu[b-aoehpxgdsv]  .add-to-flashcards-btn:focus-visible {
    background: rgba(49, 221, 227, 0.12);
    border-color: transparent;
    outline: none;
}

/* NO icon-colour rule here, deliberately. #7176's .move-context-item i tints a
   menu item's icon with the brand accent, and the obvious thing to do was match
   it. The inherited-contrast ratchet (#7291) refuses, and it is right to: a
   selector whose last compound is a bare `i` sitting behind a ::deep crossing
   cannot be resolved to one real surface, so the analyzer composites it against
   every <i> it could reach - here the accent-gradient .move-comment-save spinner
   in the sibling menu, giving accent-on-accent at 1.00:1. Three entries in
   InheritedContrastRatchetExemptions.txt are exactly this shape
   (.move-context-item i among them) and that list is frozen and may only shrink,
   so the answer is not a fourth entry.

   So the icons simply inherit the row's own colour, which is the same
   rgba(255, 255, 255, 0.9) as the label beside them and is unambiguously AA on
   this menu. The two copy rows keep the accent tint they inherit from
   .move-context-item i; these two are white. That is the whole visual cost of
   not widening a frozen exemption list, and it is worth paying. */

/* PHONE - the row must not end up TIGHTER here than on desktop.

   The <=480px block further down takes .nav-btn to 44px (a phone needs a bigger
   target) and used to squeeze .board-controls to gap: 0.25rem to pay for it,
   which is the ticket's trap: the smallest screen got the MOST crowded row.
   Folding four actions into the overflow is what buys that back. Six targets at
   44px plus the group gaps fit a 390px viewport, so the phone now gets a LARGER
   group separation than the desktop's 0.85rem, not a smaller one - the groups
   are the thing a small screen most needs to be able to tell apart. */
@media (max-width: 480px) {
    .board-controls[b-aoehpxgdsv] {
        gap: 0.375rem 1rem;
    }

    .control-group-transport[b-aoehpxgdsv] {
        gap: 0.125rem;
        padding: 0.125rem 0.2rem;
    }

    .control-group-actions[b-aoehpxgdsv] {
        padding-left: 0.7rem;
    }

    /* #9077 - THE TRANSPORT CLUSTER TAKES TWO LINES HERE.

       The row wrapped between groups, but a group never wrapped inside itself,
       and at 44px the transport cluster is 272px on one line: four buttons
       (176), the move label (80), the gaps, padding and ring. MEASURED with
       touch emulation on an analyzed game:

                .board-controls          transport ring
         344    scrollWidth 254 > 236    272 wide in a 224 content box
         390    scrollWidth 282 = 282    272 in 270, buttons squeezed to 43.5

       So the ring stuck out of the card on both sides at 344, and at 390 it
       only fit by shrinking the 44px targets. On a phone the ring is now a
       two-line grid: the move label across the top, the four buttons under it
       in their own 44px tracks. That is about 190px wide, so it fits the
       narrowest phone row with room to spare and no button is squeezed.

       A GRID, not `flex-wrap: wrap`: wrapping would leave the line break to the
       browser (ColumnButtonContainerRatchetTests refuses a wrapping row of
       buttons for exactly that, #8844), where the grid says where every button
       goes. Nothing is clipped or hidden, the buttons keep their order, and the
       cluster is still one ring, so #7178's "transport reads as ONE object"
       holds.

       Deliberately NOT a container query: size containment on .board-controls
       drops the row out of the board card's intrinsic width, and the card at
       390 then shrank the BOARD from 282px to 268px (measured). Without it the
       row's max-content still exceeds the card's room on every phone, so the
       board is exactly as large as before. Desktop (the >=769px rules above,
       and the round 1 fold measurements they carry) is untouched: this lives in
       the <=480px block only. */
    .control-group-transport[b-aoehpxgdsv] {
        display: grid;
        grid-template-columns: repeat(4, auto);
        justify-content: center;
    }

    .control-group-transport .move-indicator[b-aoehpxgdsv] {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}

.nav-btn.view-toggle.is-on[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.16);
    border-color: rgba(49, 221, 227, 0.45);
    color: var(--ascend-accent);
}

.nav-btn.view-toggle.is-off[b-aoehpxgdsv] {
    background: transparent;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--ascend-text-secondary);
}

/* --- #7188: the ENGINE READS strip -----------------------------------------

   Owner: "There is no reason the engines need to take up that much real estate.
   They should be able to be fit better, side by side."

   Before, three full-width blocks stacked above the move list - the stored
   readout, the live SF row, the live Lc0 row - with a 1.25rem tab-content gap
   between each. MEASURED at 1599x820 on 2026-08-22: the band ran from y=263 to
   y=420, 157px of a 404px rail, and the gaps were more than a third of that.

   Now one band: the stored read (which carries the continuation, so it gets the
   wider track) beside the two live rows. Two engine reads are one glanceable
   line of reference, not two bands of chrome. The band owns the separator rule
   under it - EngineLinePanel used to draw its own, which in a two-column strip
   would be a line through half the band. */
.engine-reads[b-aoehpxgdsv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 10.5rem);
    align-items: start;
    gap: 0.5rem 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.18);
    flex: 0 0 auto;
    min-width: 0;
}

.engine-reads-live[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* #8955 - with the shared engine-lines panel the band is one column: three lines
   need the rail's full width (a 12-ply line in the old 1fr track wrapped to four
   rows), and the two live rows sit above them as one row, the engine header
   Lichess puts over its lines. */
.engine-reads.has-engine-lines[b-aoehpxgdsv] {
    grid-template-columns: minmax(0, 1fr);
}

/* #9251 - the band above is flex 0 0 auto, so with three engine lines (~206px) in
   the capped rail the move list was the only shrinkable thing left, and at 1366x768
   with a move selected it measured 0px: MOVE DETAILS sat over it.

   The ORDER of shrinking is the fix. The move list shrinks FIRST, down to a two-row
   floor (2 x ~43px: the selected move and the next one); only after that does the
   band give anything, down to the live row plus one line, scrolling its own
   overflow. So a screen with room keeps all three lines (1920x1080, 1440x900), and
   the shortest laptop still keeps a move list a member can navigate.

   The order comes from flex-shrink WEIGHT, not from tuned heights: shrink is
   distributed by shrink x basis, and the moves card's basis is its whole move list,
   so at equal weights a 30-move game squeezed the band to its floor even at
   1920x1080 (measured, first cut). The moves card's weight of 1000 makes it absorb
   the shortage until it hits its floor; the band's 1 only matters after that. */
.engine-reads.has-engine-lines[b-aoehpxgdsv] {
    flex: 0 1 auto;
    min-height: 4.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.analysis-tab-content:has(> .engine-reads.has-engine-lines) > .moves-card[b-aoehpxgdsv] {
    flex-shrink: 1000;
    /* The floor has to live on the CARD: its base rule's min-height: 0 lets it shrink
       below the list's own floor and clip it (measured 9px at 1366x768 without this).
       min-content does NOT work here - a scroll container's min-content is its whole
       content, so the card stopped shrinking at all. So it is spelled out: the MOVES
       head (2.8rem, measured 44.8px) + the card's 0.75rem x 2 vertical padding at
       >=901px + the list's 5.5rem two-row floor. */
    min-height: calc(2.8rem + 1.5rem + 5.5rem);
}

.analysis-tab-content:has(> .engine-reads.has-engine-lines) .moves-list[b-aoehpxgdsv] {
    min-height: 5.5rem;
}

.engine-reads.has-engine-lines .engine-reads-live[b-aoehpxgdsv] {
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 1rem;
}

/* The live rows are child-component markup, so they need ::deep to reach. Their
   own vertical padding was sized for standalone full-width rows; inside the
   band they are two lines of one readout. */
.engine-reads-live[b-aoehpxgdsv]  .engine-row {
    padding: 0.0625rem 0;
}

/* Below the three-column breakpoint the rail is the same 380px, so the split
   holds; on a phone the rail is full-width and the two tracks would each get
   half a screen for content that is one line each - stack them there. */
@media (max-width: 768.98px) {
    .engine-reads[b-aoehpxgdsv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .engine-reads-live[b-aoehpxgdsv] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 1rem;
    }
}

.move-indicator[b-aoehpxgdsv] {
    min-width: 80px;
    text-align: center;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 0.5rem;
}

/* Board with Eval Bar — the thin eval bar sits flush against the board's left
   edge and stretches to match the board card's height instead of floating at its
   own fixed 400px. Scoped ::deep override so EvalBar's default min-height is only
   relaxed on this page (other pages keep the 400px floor). */
.board-with-eval[b-aoehpxgdsv] {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}

/* #7151 rounds 2+3: the board is HEIGHT-constrained on desktop. The cap
   (100dvh - 19rem: site top bar + page padding + thin header + the card's own
   chrome) lives on the GRID TRACK above, and the board row simply fills its
   track - one source of truth, no centering margins, no dead gap beside the
   board. */
@media (min-width: 769px) {
    .board-with-eval[b-aoehpxgdsv] {
        width: 100%;
    }
}

.board-with-eval[b-aoehpxgdsv]  .eval-bar {
    min-height: 0;
    align-self: stretch;
}

/* Stat Cards */
.stat-card[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
    /* Belt for the minmax(0, 1fr) above — ensures the card itself
       respects its grid-track allotment and doesn't push neighbors. */
    min-width: 0;
}

.stat-card h3[b-aoehpxgdsv] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #31DDE3;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

/* Accuracy Card */
.accuracy-card[b-aoehpxgdsv] {
    text-align: center;
}

.stats-row .accuracy-card .accuracy-circle[b-aoehpxgdsv] {
    width: 100px;
    height: 100px;
}

.stats-row .accuracy-card .accuracy-number[b-aoehpxgdsv] {
    font-size: 1.75rem;
}

.accuracy-circle[b-aoehpxgdsv] {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 0.5rem;
}

.accuracy-circle svg[b-aoehpxgdsv] {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.accuracy-bg[b-aoehpxgdsv] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
}

.accuracy-progress[b-aoehpxgdsv] {
    fill: none;
    stroke: #31DDE3;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.accuracy-value[b-aoehpxgdsv] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.accuracy-number[b-aoehpxgdsv] {
    font-family: 'condor', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
}

.accuracy-percent[b-aoehpxgdsv] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Mistakes Card.

   #7188 - all three labels hyphen-broke mid-word at every viewport tested:
   "INACCU RACIES", "MISTAK ES", "BLUNDE RS". The cause was `overflow-wrap:
   anywhere` on the label inside a three-across grid. MEASURED 2026-08-22: on
   the wide layout the stats column is 279px, so each of the three cells gets
   about 61px of content width, and "INACCURACIES" at 0.6875rem uppercase with
   0.5px tracking needs roughly 90px. Three across does not fit at any font
   size a person can read - `overflow-wrap: anywhere` was not causing the
   problem, it was hiding an impossible layout by breaking words instead.

   So the tile stops trying to be three across. Each count sits on ONE line
   beside its label, the way a stat line reads, and the label can never break
   because it is never asked to fit in a third of a narrow column. */
.mistakes-grid[b-aoehpxgdsv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.mistake-item[b-aoehpxgdsv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.mistake-count[b-aoehpxgdsv] {
    font-family: 'condor', sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.2;
    order: 2;
}

.mistake-label[b-aoehpxgdsv] {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Single words. They must never be split mid-word - if a viewport is ever
       narrow enough that one does not fit, the honest outcome is the label
       running to the edge of its own row, not "INACCU RACIES". */
    overflow-wrap: normal;
    word-break: keep-all;
    order: 1;
}

.mistake-item.inaccuracy .mistake-count[b-aoehpxgdsv] { color: #fbbf24; }
.mistake-item.mistake .mistake-count[b-aoehpxgdsv] { color: #f97316; }
.mistake-item.blunder .mistake-count[b-aoehpxgdsv] { color: #ef4444; }

.avg-cpl[b-aoehpxgdsv] {
    display: flex;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.875rem;
}

.cpl-label[b-aoehpxgdsv] {
    color: rgba(255, 255, 255, 0.6);
}

.cpl-value[b-aoehpxgdsv] {
    color: #fff;
    font-weight: 600;
}

/* Info Card */
.info-grid[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-item[b-aoehpxgdsv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
}

.info-label[b-aoehpxgdsv] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

.info-value[b-aoehpxgdsv] {
    font-size: 0.875rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* #6633 - the opening line renders through the shared EcoBadge, which owns the
   name/code styling; the local .eco-code rule is gone. */

/* Main Content */
.analysis-main[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Grid items default to min-width: auto (content-based), which prevents shrinking
       and causes neighbor overlap when content is wider than the column. */
    min-width: 0;
}

/* Eval Chart Card */
.eval-chart-card[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
}

.eval-chart-card h3[b-aoehpxgdsv] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #31DDE3;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.eval-chart[b-aoehpxgdsv] {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.chart-labels.left-labels[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.25rem 0;
    min-width: 40px;
    text-align: right;
}

.chart-labels .chart-label.center[b-aoehpxgdsv] {
    color: rgba(255, 255, 255, 0.3);
}

.chart-container[b-aoehpxgdsv] {
    flex: 1;
    height: 160px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: crosshair;
}

.eval-svg[b-aoehpxgdsv] {
    width: 100%;
    height: 100%;
    display: block;
}

/* Background colors for advantage zones */
.white-advantage-bg[b-aoehpxgdsv] {
    fill: rgba(255, 255, 255, 0.03);
}

.black-advantage-bg[b-aoehpxgdsv] {
    fill: rgba(0, 0, 0, 0.15);
}

/* Center line (equal position) */
.center-line[b-aoehpxgdsv] {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

/* White advantage area */
.white-area[b-aoehpxgdsv] {
    fill: rgba(255, 255, 255, 0.35);
}

/* Black advantage area */
.black-area[b-aoehpxgdsv] {
    fill: rgba(0, 0, 0, 0.5);
}

/* Evaluation line */
.eval-line[b-aoehpxgdsv] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

/* Mistake markers */
.mistake-marker[b-aoehpxgdsv] {
    stroke: #1a1a2e;
    stroke-width: 2;
    cursor: pointer;
    transition: r 0.15s ease;
}

.mistake-marker.inaccuracy[b-aoehpxgdsv] {
    fill: #fbbf24;
}

.mistake-marker.mistake[b-aoehpxgdsv] {
    fill: #f97316;
}

.mistake-marker.blunder[b-aoehpxgdsv] {
    fill: #ef4444;
}

.mistake-marker:hover[b-aoehpxgdsv] {
    r: 8;
}

/* Selected move indicator */
.selected-line[b-aoehpxgdsv] {
    stroke: #31DDE3;
    stroke-width: 2;
    stroke-dasharray: 4 2;
    opacity: 0.6;
}

.selected-marker[b-aoehpxgdsv] {
    fill: #31DDE3;
    stroke: #0f172a;
    stroke-width: 2;
}

/* Hover overlay for click detection */
.chart-hover-overlay[b-aoehpxgdsv] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

.hover-zone[b-aoehpxgdsv] {
    height: 100%;
    position: absolute;
    cursor: pointer;
}

.hover-zone:hover[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.1);
}

/* Move number labels below chart */
.chart-move-labels[b-aoehpxgdsv] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0 0;
    margin-left: 48px; /* Align with chart (40px labels + 8px gap) */
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.3);
}

.move-label[b-aoehpxgdsv] {
    font-family: 'SF Mono', 'Consolas', monospace;
}

/* Moves Card — now lives beside the board at the top of the right rail, so it is
   in view immediately (no more scrolling to the bottom of the page to find it). */
.moves-card[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
}

.moves-card h3[b-aoehpxgdsv] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #31DDE3;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.moves-list[b-aoehpxgdsv] {
    /* Scroll independently beside the board; cap well below the board's height
       so the MOVE DETAILS card stacked under it (note editor, eval before→after,
       best-move / mistake box) is on screen while the user is looking at the
       board, instead of being pushed below the fold by a tall move list.
       Owner call 2026-07-25: roughly a third shorter than the previous
       clamp(18.75rem, 56vh, 38.75rem). Relative units only — no px (#6678).
       The list still scrolls, and auto-scroll keeps the current move in view. */
    /* ROUND 5 - was `max-height: clamp(12.5rem, 37vh, 26rem)`, a second cap
       inside an already-capped rail, which is what produced the nested
       scrollbars. The list now takes exactly the space the rail has left after
       the engine read, so the 2026-07-25 intent (the mistake box stays on
       screen, the list scrolls) is preserved by layout rather than by a
       guessed clamp. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
}

/* #8788 - THE MOVE LIST'S TRACKS, at every width.

   The "..." menu trigger sat ON the eval: reported at 390 and 344, and measured
   in review on 78 of 79 cells in the 240px desktop rail at 901-1280px on a touch
   screen, and on 11 with a mouse at 1024. The cause was the same everywhere.
   .move-cell was a content-sized flex row of two siblings, the activate button
   (SAN, markers, eval) and the trigger. When two such cells did not fit their
   row, flex shrank them, and .move-activate carries `min-width: 0` (it must, or
   the row overflows), so its box shrank below its content and the content, the
   eval last, spilled out of the box and under the trigger beside it. Flex items
   cannot overlap; their overflowing content can. The condition is a NARROW MOVE
   LIST, not a phone, so the fix is the list's layout rather than a phone
   override, and GameAnalysisMoveListPhoneTrackTests fails if any width-scoped
   rule takes these tracks away again:
   - the row is a grid of the number and two EQUAL move columns, so neither move
     is squeezed to make room for a longer neighbor (and Black's moves line up
     down the list);
   - the cell is a grid of [activate | trigger], the trigger's track sized to the
     trigger itself, so it is never laid over anything;
   - the activate button WRAPS instead of overflowing, so an eval that does not
     fit beside the SAN drops to its own line, still right-aligned by its
     `margin-left: auto`, and "White winning" (#8777) wraps inside that line;
   - SAN and eval break inside their track as a last resort (`overflow-wrap:
     anywhere`): a broken word is legible, text under the trigger is not. */
.move-row[b-aoehpxgdsv] {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.move-number[b-aoehpxgdsv] {
    width: 2rem;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

/* Issue #9641 - holds White's column when a set-up game opens on Black's ply. */
.move-placeholder[b-aoehpxgdsv] {
    padding: 0 0.25rem;
    color: var(--ascend-text-muted);
}

/* #8788 - a grid of [activate | trigger]; see .move-row above. The side padding
   is 0.25rem (it was 0.5rem) because in the 240px rail and at 344 every pixel of
   the activate track is the difference between "Nxf7 +0.4" on one line and two.
   `min-width: 0` replaces the old 80px floor, which only ever made the cell
   overflow its column instead of the content fitting it. */
.move-cell[b-aoehpxgdsv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.25rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
    min-width: 0;
}

.move-cell:hover[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.1);
}

/* #8788 - the ring is an OUTLINE drawn inside the cell, not a border: a border
   takes 2px of width from the selected cell alone, which in the 240px touch rail
   was the difference between "winning" whole and "winnin" / "g" on exactly the
   move being read (and it shifted the cell's content 1px on every selection). */
.move-cell.selected[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.2);
    outline: 1px solid rgba(49, 221, 227, 0.5);
    outline-offset: -1px;
}

.move-san[b-aoehpxgdsv] {
    color: #fff;
}

.mistake-indicator[b-aoehpxgdsv] {
    font-weight: bold;
}

.move-cell.inaccuracy .mistake-indicator[b-aoehpxgdsv] { color: #fbbf24; }
.move-cell.mistake .mistake-indicator[b-aoehpxgdsv] { color: #f97316; }
.move-cell.blunder .mistake-indicator[b-aoehpxgdsv] { color: #ef4444; }

.deviation-marker[b-aoehpxgdsv] {
    color: #fbbf24;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    margin-left: 0.15rem;
}

.deviation-marker[b-aoehpxgdsv]  i {
    font-size: 0.65rem;
}

/* #5444 — phase-boundary move marker + cell edge. */
.phase-transition-marker[b-aoehpxgdsv] {
    color: var(--ascend-accent);
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    margin-left: 0.15rem;
}

.phase-transition-marker[b-aoehpxgdsv]  i {
    font-size: 0.65rem;
}

.move-cell.phase-transition[b-aoehpxgdsv] {
    border-top: 2px solid rgba(49, 221, 227, 0.55);
}

.move-eval[b-aoehpxgdsv] {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* #8788 - the last-resort break, scoped to the move list (the selected-move
   panel's .move-san has room and must not break). */
.move-activate .move-san[b-aoehpxgdsv],
.move-activate .move-eval[b-aoehpxgdsv] {
    overflow-wrap: anywhere;
}

/* #4542 — per-move clock remaining + time-pressure tint (move-clock-times flag). */
.move-clock[b-aoehpxgdsv] {
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}
.move-clock.clock-warn[b-aoehpxgdsv] { color: #fbbf24; }       /* < 5 min */
.move-clock.clock-low[b-aoehpxgdsv] { color: #f97316; }         /* < 2 min */
.move-clock.clock-critical[b-aoehpxgdsv] {                       /* < 30 s */
    color: #ef4444;
    font-weight: 600;
}

/* Comment chat-bubble in the move grid: now the shared MoveCommentBubble
   component (#6374), which owns its own styling. Nothing to declare here.
   Not to be confused with .move-commentary-marker further down - see the note
   there; they are different signals and must not read as one. */

/* #7031 - the user's OWN mark on the move, beside their note and above the
   engine's read. Deliberately quiet chrome: this is a self-assessment control,
   not a scoreboard, and nothing here is a reward. */
/* #7188 - the .move-mark* container/readout rules are DELETED with the block
   they styled (the glyph picker, the theory row, "Theory, or new? Your call.",
   the your-mark-vs-engine line). Only .move-mark-btn survives, because the
   right-click move menu reuses that button chrome for its own glyph rows - see
   the .move-context-glyphs note near the foot of this file. */

.move-mark-btn[b-aoehpxgdsv] {
    min-width: 2.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.move-mark-btn:hover:not(:disabled)[b-aoehpxgdsv] {
    border-color: var(--ascend-accent);
}

.move-mark-btn.active[b-aoehpxgdsv] {
    border-color: var(--ascend-secondary);
    background: rgba(184, 133, 54, 0.18);
    color: var(--ascend-secondary-light);
    font-weight: 700;
}

.move-mark-btn.theory[b-aoehpxgdsv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.move-mark-btn:disabled[b-aoehpxgdsv] {
    opacity: 0.45;
    cursor: default;
}

/* The coach's read of a student's mark, under their note. */
.move-annotation-marks[b-aoehpxgdsv] {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ascend-text-muted, rgba(255, 255, 255, 0.65));
}

/* #7188 - the .move-comment-* rules moved WITH the composer into the right-click
   move menu (position: fixed at page level, so it costs the rail nothing). They
   are not orphans: .move-comment-editor / -label / -textarea / -actions / -save
   / -cancel / -saved all still render, inside .move-context-menu. */
/* Move-comment editor in the detail panel (read+write). */
.move-comment-editor[b-aoehpxgdsv] {
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
}
.move-comment-label[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}
.move-comment-label[b-aoehpxgdsv]  i {
    font-size: 14px;
}
.move-comment-textarea[b-aoehpxgdsv] {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary, inherit);
    font-size: 0.85rem;
    padding: 0.6rem 0.75rem;
    outline: none;
}
.move-comment-textarea:focus[b-aoehpxgdsv] {
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}
.move-comment-textarea[b-aoehpxgdsv]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
.move-comment-actions[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.move-comment-save[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 50px;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.move-comment-save:hover:not(:disabled)[b-aoehpxgdsv] {
    box-shadow: 0 4px 14px rgba(49, 221, 227, 0.35);
    transform: translateY(-1px);
}
.move-comment-save:disabled[b-aoehpxgdsv] {
    opacity: 0.6;
    cursor: default;
}
.move-comment-save[b-aoehpxgdsv]  i {
    font-size: 14px;
}
/* #7188 - the composer now opens INSIDE the move menu, so it needs a way back
   to the menu's other actions that is not "press Escape and guess". */
.move-comment-cancel[b-aoehpxgdsv] {
    background: none;
    border: none;
    padding: 0.4rem 0.25rem;
    font-family: var(--ascend-font-secondary, inherit);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}
.move-comment-cancel:hover[b-aoehpxgdsv] {
    color: rgba(255, 255, 255, 0.85);
}
.move-comment-saved[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #10b981;
}
.move-comment-saved[b-aoehpxgdsv]  i {
    font-size: 14px;
}

/* Key Moments card — promoted from AI panel */
.key-moments-card[b-aoehpxgdsv] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.key-moments-card h3[b-aoehpxgdsv] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.key-moments-card h3[b-aoehpxgdsv]  i { color: #fbbf24; }

.key-moments-list[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* #UI redesign — no inner scroll box; the deep-dive band is full width now
       and the whole page shares one scroll. */
}

.key-moment-row[b-aoehpxgdsv] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.key-moment-row:hover[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.06);
}

.km-move[b-aoehpxgdsv] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fbbf24;
}

.km-body[b-aoehpxgdsv] {
    flex: 1;
    min-width: 0;
}

.km-type[b-aoehpxgdsv] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.km-desc[b-aoehpxgdsv] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.km-eval[b-aoehpxgdsv] {
    flex-shrink: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
}

.km-eval.positive[b-aoehpxgdsv] { color: #31DDE3; }
.km-eval.negative[b-aoehpxgdsv] { color: #f87171; }

/* Move Details Card */
.move-details-card[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
}

.move-details-card h3[b-aoehpxgdsv] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #31DDE3;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

/* Compact move-details — the owner asked for the move detail to read as a small
   section at the FOOT of the move list inside the narrow rail, not the big card it
   was. Same content (eval before/after, note editor, best/mistake/good indicator)
   at reduced padding + type. */
.move-details-compact[b-aoehpxgdsv] {
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
}

/* #7188 - no h3 rule any more: the panel's heading is gone. "MOVE DETAILS" over
   a row that already reads "5. O-O   +0.19 -> +0.15" was a label repeating its
   own content, and this panel is now REFERENCE the reader glances at, not a
   surface they work in. Owner: "just make sure that engine commentary I
   mentioned lives in that space and minimized." */
.move-details-compact .move-details[b-aoehpxgdsv] {
    gap: 0.4rem;
}

.move-details-compact .detail-row[b-aoehpxgdsv] {
    padding: 0.4rem 0.5rem;
}

.move-details-compact .detail-row.move-played[b-aoehpxgdsv] {
    padding: 0.5rem;
}

.move-details-compact .move-notation .move-san[b-aoehpxgdsv] {
    font-size: 1rem;
}

.move-details-compact .annotation-box[b-aoehpxgdsv],
.move-details-compact .good-move-box[b-aoehpxgdsv] {
    padding: 0.7rem;
}

/* #7763 round 2 - "Why did you play this?" at the TOP of MOVE DETAILS.

   The picker is the first thing under the move header now (see the markup), so
   the 0.75rem it carries on itself for the surfaces where it follows a block of
   prose is a gap against nothing here - .move-details already separates its
   children with its own 0.4rem flex gap. Removing it is worth 12px at 1440x900,
   which is the difference between the picker's last chip row peeking above the
   panel's fold and being cut in half by it.

   ::deep and scoped to .move-detail-col on purpose: MoveHabitPicker is SHARED
   (Self-Review and the drill surfaces render it too, where it does follow prose
   and does want that margin), so its own stylesheet is not touched. The
   game-level commentary card below the board (#7176) is not inside
   .move-detail-col either, so it is unaffected.

   NOTHING is capped here and no height is asserted: the panel's own 11.5rem
   ceiling and its own scrollbar (#7188) stay the single place the shortage is
   expressed, and at <901px, where that ceiling does not apply, the picker
   renders in full exactly as it did before. A nested scroller inside the panel
   would have been a second answer to the same question. */
.move-detail-col .move-habit-lead[b-aoehpxgdsv]  .habit-picker {
    margin-top: 0;
}

.move-details-compact .best-move-suggestion[b-aoehpxgdsv] {
    padding: 0.55rem;
}

.move-details-compact .move-explanation[b-aoehpxgdsv] {
    font-size: 0.78rem;
}

.move-details[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row[b-aoehpxgdsv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}

.mistake-row.inaccuracy[b-aoehpxgdsv] {
    background: rgba(251, 191, 36, 0.1);
    border-left: 3px solid var(--ascend-warning);
}

.mistake-row.mistake[b-aoehpxgdsv] {
    background: rgba(249, 115, 22, 0.1);
    border-left: 3px solid #f97316;
}

.mistake-row.blunder[b-aoehpxgdsv] {
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
}

.best-move-row[b-aoehpxgdsv] {
    background: rgba(16, 185, 129, 0.1);
    border-left: 3px solid #10b981;
}
/* Responsive - consolidated */
@media (max-width: 768px) {
    .analysis-header[b-aoehpxgdsv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-right[b-aoehpxgdsv] {
        width: 100%;
    }

    /* #7151 round 2 - the actions are icon-only now, so they share ONE row on
       mobile (five stacked full-width bars of a single icon each read as
       noise). flex: 1 keeps them equal-width and tappable; wrap catches the
       narrowest screens. */
    .external-link[b-aoehpxgdsv],
    .studyboard-link[b-aoehpxgdsv],
    .reanalyze-button[b-aoehpxgdsv],
    .delete-game-button[b-aoehpxgdsv] {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* #7188 - this used to force three across on a phone, which is where the
       labels broke worst. The single-column stat-line form above is what a
       narrow screen wants anyway, so there is nothing left to override. */

    .nav-btn[b-aoehpxgdsv] {
        width: 44px;
        height: 44px;
    }

    /* #7178 - this used to be gap: 0.25rem, i.e. the SMALLEST screen got the
       MOST crowded row, which is the trap the ticket calls out by name. The
       phone's group gap now lives in the #7178 block above and is LARGER than
       the desktop's, not smaller. */
}

/* Move Details - Move Played Row */
.detail-row.move-played[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.05);
    padding: 0.75rem;
}

.move-notation[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.move-notation .move-num[b-aoehpxgdsv] {
    color: rgba(255, 255, 255, 0.4);
}

.move-notation .move-san[b-aoehpxgdsv] {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
}

.mistake-badge[b-aoehpxgdsv] {
    font-size: 0.875rem;
    font-weight: bold;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

.mistake-badge.inaccuracy[b-aoehpxgdsv] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.mistake-badge.mistake[b-aoehpxgdsv] {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.mistake-badge.blunder[b-aoehpxgdsv] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--ascend-text-light);
}

.eval-change[b-aoehpxgdsv] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Annotation Box for Mistakes */
.annotation-box[b-aoehpxgdsv] {
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0.5rem;
}

.annotation-box.inaccuracy[b-aoehpxgdsv] {
    background: rgba(251, 191, 36, 0.1);
    border-left: 3px solid var(--ascend-warning);
}

.annotation-box.mistake[b-aoehpxgdsv] {
    background: rgba(249, 115, 22, 0.1);
    border-left: 3px solid #f97316;
}

.annotation-box.blunder[b-aoehpxgdsv] {
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
}

/* #8671 - an expert found this claim's words wrong. One neutral line in their place:
   no severity color (the classification is one of the words that went), no icon, and
   the same text weight as the words it replaces so it reads as a plain note. Wraps
   inside narrow rows instead of pushing them wider. */
.annotation-box.claim-ruled-wrong-box[b-aoehpxgdsv] {
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid rgba(255, 255, 255, 0.25);
}

/* #8671 (review-claim-labels) - an expert confirmed this claim. The Mirror's verified
   chip in miniature: the accent color, a thin border, no icon. Inline so it sits beside
   the claim's type without taking a row of its own. */
.claim-label-attested[b-aoehpxgdsv] {
    display: inline-block;
    /* The rows it sits in are flex columns: without these it stretches to the row's width. */
    align-self: flex-start;
    width: fit-content;
    margin: 0.15rem 0.35rem 0.15rem 0;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
}

.claim-ruled-wrong[b-aoehpxgdsv] {
    display: block;
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
    overflow-wrap: anywhere;
}

.annotation-header[b-aoehpxgdsv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.annotation-type[b-aoehpxgdsv] {
    font-weight: 600;
    font-size: 0.875rem;
}

.annotation-box.inaccuracy .annotation-type[b-aoehpxgdsv] { color: #fbbf24; }
.annotation-box.mistake .annotation-type[b-aoehpxgdsv] { color: #f97316; }
.annotation-box.blunder .annotation-type[b-aoehpxgdsv] { color: #ef4444; }

.cp-loss[b-aoehpxgdsv] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Best Move Suggestion */
.best-move-suggestion[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 6px;
}

.best-label[b-aoehpxgdsv] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(16, 185, 129, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.best-move[b-aoehpxgdsv] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.9375rem;
    color: #10b981;
    font-weight: 600;
}

.show-best-btn[b-aoehpxgdsv] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
    color: #10b981;
    cursor: pointer;
    transition: all 0.15s ease;
}

.show-best-btn:hover[b-aoehpxgdsv] {
    background: rgba(16, 185, 129, 0.3);
    border-color: #10b981;
}

/* Good Move Box */
.good-move-box[b-aoehpxgdsv] {
    padding: 1rem;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.08);
    border-left: 3px solid #10b981;
    margin-top: 0.5rem;
}

.good-label[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #10b981;
    font-size: 0.875rem;
    font-weight: 500;
}

.good-label i[b-aoehpxgdsv] {
    font-size: 1rem;
}

/* Move Explanation */
.move-explanation[b-aoehpxgdsv] {
    margin: 0.75rem 0 0;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
}

.annotation-box .move-explanation[b-aoehpxgdsv] {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.good-move-box .move-explanation[b-aoehpxgdsv] {
    margin-top: 0.5rem;
    color: rgba(16, 185, 129, 0.8);
}

/* Right Sidebar - Multi-Engine Analysis */
/* #6164/#6167 — standalone Position Character card intro copy. The card chrome
   comes from the shared Card component; this only styles the passed-in body text. */
.position-character-intro[b-aoehpxgdsv] {
    margin: 0 0 0.75rem 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.analysis-sidebar[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Grid items default to min-width: auto (content-based), which prevents shrinking
       and causes neighbor overlap when content is wider than the column. */
    min-width: 0;
}

/* AI Enrichment Panel */
.enrichment-card[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    overflow: hidden;
}

.enrichment-header[b-aoehpxgdsv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.enrichment-header:hover[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.05);
}

.enrichment-header-left[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.enrichment-title[b-aoehpxgdsv] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #a855f7;
    text-transform: uppercase;
}

.enrichment-header-right[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.enrichment-status-badge[b-aoehpxgdsv] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.enrichment-status-badge.loading[b-aoehpxgdsv] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.enrichment-status-badge.available[b-aoehpxgdsv] {
    background: rgba(168, 85, 247, 0.15);
    color: var(--ascend-text-light);
}

/* #7319 - the enrichment row exists but carries no written analysis (the AI
   reply truncated, so only the engine-derived findings survived). Amber, not
   the "available" purple and not an error red: the panel still has real
   content to show, it just is not coaching. */
.enrichment-status-badge.incomplete[b-aoehpxgdsv] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.enrichment-chevron[b-aoehpxgdsv] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease;
}

.re-enrich-btn[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.75rem;
}

.re-enrich-btn:hover[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.enrichment-body[b-aoehpxgdsv] {
    padding: 0 1rem 1rem;
    /* #UI redesign — no inner scroll box; the deep-dive band is full width now so
       the insights expand inline and the whole page shares one scroll. */
}

/* Subtle in-card scrollbar matching the dark theme. */
.enrichment-body[b-aoehpxgdsv]::-webkit-scrollbar {
    width: 8px;
}

.enrichment-body[b-aoehpxgdsv]::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.35);
    border-radius: 4px;
}

.enrichment-body[b-aoehpxgdsv]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

.enrichment-loading[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

.enrichment-empty[b-aoehpxgdsv] {
    padding: 0.75rem 0;
}

/* #7319 - stated inside the panel when the coach's written analysis is missing
   but the engine findings are not. Sits ABOVE those findings so the reader
   learns what is absent before reading what remains. */
/* #7291 ratchet: the amber tint that used to sit here lightened the composited
   surface to rgb(33.88,36.44,41.52), which dropped var(--ascend-error) text to
   4.11:1 against a 4.5:1 requirement. The left border carries the same signal
   without touching the surface the error text is read on, so the notice keeps
   its meaning and the text stays legible. Do NOT reintroduce a background tint
   here without re-running InheritedContrastRatchetTests. */
.enrichment-incomplete-notice[b-aoehpxgdsv] {
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--ascend-warning);
    border-radius: 0 4px 4px 0;
}

.enrichment-incomplete-notice .enrichment-incomplete-text[b-aoehpxgdsv] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
    margin: 0 0 0.625rem 0;
}

.enrichment-incomplete-notice .enrichment-error[b-aoehpxgdsv] {
    color: var(--ascend-error);
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
}

/* #7138 (S1) - the stated reason the last coaching-analysis attempt returned
   nothing (tier, quota, or failure), beside the button that triggered it. */
.enrichment-empty .enrichment-error[b-aoehpxgdsv] {
    color: var(--ascend-error);
    font-size: 0.8rem;
    margin: 0.25rem 0 0.5rem;
}

.enrichment-empty p[b-aoehpxgdsv] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    margin: 0 0 0.75rem 0;
    font-style: normal;
}

.enrichment-section[b-aoehpxgdsv] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.enrichment-section:first-child[b-aoehpxgdsv] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.enrichment-section-title[b-aoehpxgdsv] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #31DDE3;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.narrative-text[b-aoehpxgdsv] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* #9229 - the standing line under the AI coach's narrative. */
.enrichment-standing-line[b-aoehpxgdsv] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    margin: 0.5rem 0 0;
}

.phase-badge[b-aoehpxgdsv] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: rgba(184, 133, 54, 0.2);
    color: var(--ascend-secondary-light);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* #6863 — mechanical evidence line under the deterministic WEAKEST PHASE badge. */
.phase-evidence[b-aoehpxgdsv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.375rem 0 0;
}

.key-moment-item[b-aoehpxgdsv],
.theme-item[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: 0.25rem;
}

.key-moment-item:hover[b-aoehpxgdsv],
.theme-item:hover[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.08);
}

.moment-move[b-aoehpxgdsv],
.theme-move[b-aoehpxgdsv] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.75rem;
    color: #31DDE3;
    font-weight: 600;
}

.moment-type[b-aoehpxgdsv] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #a855f7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.moment-desc[b-aoehpxgdsv],
.theme-desc[b-aoehpxgdsv] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

.moment-eval[b-aoehpxgdsv] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.4);
}

.theme-pattern[b-aoehpxgdsv] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #ef4444;
}

.enrichment-body .move-played[b-aoehpxgdsv] {
    color: #ef4444;
    font-weight: 600;
}

.enrichment-body .move-expected[b-aoehpxgdsv] {
    color: #10b981;
    font-weight: 600;
}

/* #7188 ROUND 3 - THE RESERVE WAS 2rem SHORT, MEASURED AGAINST PRODUCTION.

   The board sizes on `100dvh - <reserve>`, where the reserve is everything that
   is NOT board: site chrome, the page header, the identity strips, the control
   row. At 19rem (304px) that reserve was ~9px too small, so `.board-controls`
   sat BELOW THE FOLD at 1366x768 and 1599x820 - failing the #7151 compactness
   gate on all three browsers.

   WHY ROUNDS 1 AND 2 BOTH MISSED IT. Both were tuned against a LOCAL instance,
   whose `header.main-header` is shorter than production's 96px - a ~19px
   difference. Round 2 measured 758.2 locally at 1366x768 and called it a pass
   with 9.8px to spare; the same build in prod measured 777.2 and failed by 9.2.
   A layout budget cannot be verified anywhere but the environment whose chrome
   it is budgeting for.

   AND THE RESPONSE IS NOT MONOTONIC, which is why shaving guesses kept failing:
   changing the reserve flips which branch of the min() wins and the control row
   reflows. Probed against PROD (chromium, one analyzed game, CSS injected
   read-only), `.board-controls` bottom vs the viewport limit:

              1366x768   1599x820   1440x900
     19rem      +9.2 X     +9.2 X     -22.3
     20rem      -6.8       -6.8       -1.5   <- WORSE at 1440 than 19rem
     21rem     -22.8      -22.8      -17.5   <- chosen
     22rem     -38.8      -38.8      -33.5

   21rem is the smallest value that clears every size with a margin worth
   trusting; 20rem passes 1440x900 by 1.5px, which is noise. The cost is real
   and deliberate: the squares go from ~416px to 384px at 1366x768, ~8% smaller,
   which is the trade for the owner's own directive - everything a review needs,
   with no scrolling. */

/* Responsive adjustments */
@media (max-width: 1280px) {
    /* Narrow the panels rail a touch so the board keeps room. #7756 - carries
       the same width-capped board track as the base rule; only the rail's
       CEILING changes here (380 -> 340), never its floor. */
    .analysis-content[b-aoehpxgdsv] {
        grid-template-columns:
            minmax(min(18rem, var(--board-track-max)), var(--board-track-max))
            minmax(0, 340px);
    }
}

/* #7756 - THE TWO-COLUMN LAYOUT DOES NOT FIT BELOW ~912px, AND USED TO TRY.

   The stack breakpoint was 768px here while Self-Review's has been 900px since
   the 2026-06 mobile sweep, and that 132px of disagreement is the whole of the
   834px bug. Two columns need the board's 18rem floor plus the rail's 18rem
   reserve plus the 1rem gap = 592px of content box; at 834px the shell leaves
   498px (834 - 240px sidebar - 96px page padding), so the rail was crushed to
   97px and its tab row laid out to x=947 against a 834px viewport - the worst
   number measured anywhere in this ticket, on the width the ticket did not
   even name. 768px is fine BECAUSE it already stacks; 834 was the hole between
   the two pages' breakpoints.

   So: same breakpoint as Self-Review, and the two portrait-tablet widths now
   get the same single-column reading order the phone gets, with a 498px board
   instead of a 385px one. The rail's desktop height caps come off with it
   (below) - a rail stacked under the board has no "rest of the viewport" to be
   capped against, which is the same reasoning #7179 wrote for Self-Review's
   .sidebar-column. */
/* Defect #9378 phone follow-up - the structure-change line has two placements
   (StructureChangeAtMove, rendered twice by the page) and exactly one shows at any
   width. Above the stacking breakpoint the rail sits beside the board, so the line
   stays in MOVE DETAILS exactly as before and the under-board copy is hidden. ::deep
   because the region's root is the child component's own element. */
.analysis-board-section[b-aoehpxgdsv]  .structure-change-at-move.at-under-board {
    display: none;
}

@media (max-width: 900px) {
    .analysis-content[b-aoehpxgdsv] {
        /* minmax(0, ...) NOT bare 1fr - see the note in the phone block below;
           an auto minimum refuses to shrink under its widest child. */
        grid-template-columns: minmax(0, 1fr);
    }

    /* #9378 phone follow-up - stacked, MOVE DETAILS is below the whole move list
       (measured at 344 and 390: off screen while stepping), so the line moves to the
       slot directly under the board's step controls. That slot follows the board, so
       showing a line there never moves the board; the move list below it moves down by
       the line's height at a change move only. display: none takes the MOVE DETAILS
       copy out of the accessibility tree as well, so nothing is read twice. */
    .analysis-board-section[b-aoehpxgdsv]  .structure-change-at-move.at-under-board {
        display: block;
    }

    .move-details[b-aoehpxgdsv]  .structure-change-at-move.at-move-details {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Narrow / mobile: stack in reading order — summary tiles stack, then the
       board, then the tabbed panels column below it (single column). */
    .analysis-content[b-aoehpxgdsv] {
        /* minmax(0, ...) NOT bare 1fr: a bare `1fr` is minmax(AUTO, 1fr), and the
           auto minimum refuses to shrink below the widest child's min-content
           width - so on a phone the single column is forced wider than the
           viewport and the board, sized 100%% of it, renders past the right edge
           with the h-file cut off (customer-reported on Android, #6672). The
           desktop rule above already used minmax(0, ...) for exactly this reason;
           these overrides were dropping the protection. */
        grid-template-columns: minmax(0, 1fr);
    }

    .analysis-summary-strip[b-aoehpxgdsv] {
        grid-template-columns: 1fr;
    }

    .analysis-board-section[b-aoehpxgdsv] {
        max-width: 100%;
        margin: 0 auto;
    }

    /* #6784 (owner follow-up 2026-08-02): "This also creates a problem in
       reviewing one's games since annotations and comments live below the
       board on mobile too."

       A drill and a game review fail differently and get DIFFERENT treatments.
       On a drill the thing below the fold is a Continue button — one scroll per
       rep, mechanical — so the drill surfaces pin the ACTION to the viewport
       (see DrillSolutionReview.razor.css). Here the thing below the fold is the
       long-form text the user came to read, and they move between board and
       text on every move of the game, so the board wants to stay put while the
       text scrolls. That is what `position: sticky` on .analysis-board-section
       was for — and it NEVER worked, on any viewport. #7151 deleted that dead
       rule; on desktop the rail scrolling inside itself now does the job.

       MEASURED, not inferred: app.css sets `overflow-x: hidden` on html and
       body. Per spec that forces the used overflow-y to `auto`, which makes
       BODY a scroll container while the document still scrolls on <html> — so
       every `position: sticky` descendant sticks to a box that does not scroll
       and never engages. A control sticky element injected into the live page
       stayed at -91px after a 1744px scroll (0 == working); with `html, body
       { overflow-x: clip }` the same element pinned at exactly 0. Sticky is
       dead app-wide, which also means the desktop pins on .analysis-board-
       section, .analysis-moves-col and EndgameLessonDetail's .board-column are
       dead CSS today.

       `clip` instead of `hidden` fixes it in one line, but that would switch on
       every sticky rule in the app at once, on every page and both breakpoints
       — a sitewide layout change that needs the owner's eyes and a flag, not a
       silent rider on a mobile bug fix. Raised separately.

       What IS safe here and helps now: bound the board on SHORT phones so more
       of the annotation shares the screen with it. dvh so it tracks browser
       chrome; min() so it is inert wherever the board is already narrower —
       measured no change at 390x844 or 412x915 (board stays 320w / 342w) and
       250w -> 220w at 320x568, 290w -> 247w at 360x640. */
    .analysis-board-section[b-aoehpxgdsv]  .chessboard-container {
        max-width: min(100%, 38dvh);
    }
}

/* Self-Review Summary Card */
.self-review-summary[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.08), rgba(10, 22, 40, 0.5));
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.summary-title[b-aoehpxgdsv] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    color: #B88536;
    margin: 0 0 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.summary-stats[b-aoehpxgdsv] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* User annotation glyph in move list */
.user-glyph[b-aoehpxgdsv] {
    font-size: 0.75rem;
    color: #B88536;
    margin-left: 2px;
}

/* Position-context badges — surface tabiya (theory anchor) and pawn
   structure (strategic skeleton) for the move under review. Mirrors the
   pattern in RepertoireBuildPanel so the visual language is consistent
   between repertoire build and full game review. */
.position-context-card[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.position-tabiya-badge[b-aoehpxgdsv],
.position-structure-badge[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.position-tabiya-badge[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.15), rgba(49, 221, 227, 0.1));
    border: 1px solid rgba(184, 133, 54, 0.45);
}

.position-tabiya-badge:hover[b-aoehpxgdsv] {
    border-color: rgba(184, 133, 54, 0.85);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(184, 133, 54, 0.18);
}

.position-tabiya-badge .bi-bullseye[b-aoehpxgdsv] {
    color: rgba(184, 133, 54, 0.95);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.position-structure-badge[b-aoehpxgdsv] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.14), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(49, 221, 227, 0.45);
}

.position-structure-badge:hover[b-aoehpxgdsv] {
    border-color: rgba(49, 221, 227, 0.85);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(49, 221, 227, 0.18);
}

.position-structure-badge .bi-grid-3x3[b-aoehpxgdsv] {
    color: rgba(49, 221, 227, 0.95);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.position-tabiya-badge .badge-label[b-aoehpxgdsv],
.position-structure-badge .badge-label[b-aoehpxgdsv] {
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.position-tabiya-badge .badge-label[b-aoehpxgdsv] {
    color: rgba(184, 133, 54, 0.95);
}

.position-structure-badge .badge-label[b-aoehpxgdsv] {
    color: rgba(49, 221, 227, 0.95);
}

.position-tabiya-badge .badge-name[b-aoehpxgdsv],
.position-structure-badge .badge-name[b-aoehpxgdsv] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.position-tabiya-badge .badge-go[b-aoehpxgdsv],
.position-structure-badge .badge-go[b-aoehpxgdsv] {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.position-tabiya-badge .badge-go[b-aoehpxgdsv] {
    color: rgba(49, 221, 227, 0.7);
}

.position-tabiya-badge:hover .badge-go[b-aoehpxgdsv] {
    color: var(--ascend-accent);
}

.position-structure-badge .badge-go[b-aoehpxgdsv] {
    color: rgba(184, 133, 54, 0.7);
}

.position-structure-badge:hover .badge-go[b-aoehpxgdsv] {
    color: rgba(184, 133, 54, 1);
}

/* Pawn structure plans modal — same shape as the one in RepertoireBuildPanel. */
.structure-modal-body[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.structure-modal-meta[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.structure-modal-family[b-aoehpxgdsv] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(184, 133, 54, 0.95);
}

.structure-modal-confidence[b-aoehpxgdsv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.structure-modal-description[b-aoehpxgdsv] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

.structure-modal-grid[b-aoehpxgdsv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.structure-plan-card[b-aoehpxgdsv] {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(49, 221, 227, 0.18);
}

.structure-plan-card h4[b-aoehpxgdsv] {
    margin: 0 0 0.55rem 0;
    font-family: var(--ascend-font-primary);
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    letter-spacing: 0.02em;
}

.structure-plan-white h4[b-aoehpxgdsv]  i {
    color: rgba(255, 255, 255, 0.92);
}

.structure-plan-black h4[b-aoehpxgdsv]  i {
    color: var(--ascend-text-primary);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 3px;
    padding: 1px;
}

.plan-block[b-aoehpxgdsv] {
    margin-top: 0.55rem;
}

.plan-block:first-of-type[b-aoehpxgdsv] {
    margin-top: 0;
}

.plan-block-label[b-aoehpxgdsv] {
    display: block;
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(49, 221, 227, 0.85);
    margin-bottom: 0.25rem;
}

.plan-block p[b-aoehpxgdsv] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.plan-empty[b-aoehpxgdsv] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.structure-modal-link[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.structure-modal-link:hover[b-aoehpxgdsv] {
    border-color: rgba(49, 221, 227, 0.55);
    background: rgba(49, 221, 227, 0.1);
}

.structure-modal-close[b-aoehpxgdsv] {
    padding: 0.55rem 1.4rem;
    border-radius: 50px;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.structure-modal-close:hover[b-aoehpxgdsv] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(49, 221, 227, 0.3);
}

@media (max-width: 640px) {
    .structure-modal-grid[b-aoehpxgdsv] {
        grid-template-columns: 1fr;
    }
}

/* ===== Player Diagnostic section (PBI #5838) =====
   Wraps Imbalances + Weakest Phase + Key Moments + Deviations inside the
   COACH INSIGHTS card under one coach-voiced header so the four panels
   read as a single diagnostic surface rather than four orphaned blocks. */
.player-diagnostic-section[b-aoehpxgdsv] {
    margin-top: 1rem;
    padding: 0.875rem 0.875rem 0.625rem;
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.04), rgba(184, 133, 54, 0.03));
}

.player-diagnostic-header[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    color: #31DDE3;
}

.player-diagnostic-header[b-aoehpxgdsv]  i {
    font-size: 1rem;
}

.player-diagnostic-title[b-aoehpxgdsv] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.player-diagnostic-intro[b-aoehpxgdsv] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 0.875rem;
    font-style: italic;
}

.diagnostic-subsection[b-aoehpxgdsv] {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px dashed rgba(49, 221, 227, 0.15);
}

.diagnostic-subsection:first-of-type[b-aoehpxgdsv] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* #6159 — the PositionalDiagnosticPanel lives in the narrow (340px /
   300px) analysis sidebar where its default label + value columns
   crowd the gauge track down to a sliver. Reach into the shared
   component via ::deep (container boundary only) and reclaim track
   width by trimming its side columns. The board sits above ~1024px;
   below that the sidebar already spans full width, so these only bite
   in the cramped desktop rail.

   #7030 — this is now a VARIABLE override, not a width override. The
   panel derives its gauge columns AND the offset that centres the
   OPPONENT/BALANCED/YOU header on the track from these three values,
   so setting the widths directly used to leave the header pointing at
   the untrimmed geometry. The header's own padding override is gone
   with it: re-imposing fixed gutters here is what squeezed the three
   labels into each other in this exact sidebar. */
.diagnostic-subsection[b-aoehpxgdsv]  .pdc-panel {
    --pdc-label-w: 3.6rem;
    --pdc-value-w: 3.5rem;
    --pdc-gauge-gap: 0.4rem;
    padding: 0.75rem;
}

.diagnostic-subsection[b-aoehpxgdsv]  .gauge-label {
    font-size: 0.66rem;
}

.diagnostic-subsection[b-aoehpxgdsv]  .gauge-value {
    font-size: 0.66rem;
}

/* First-time educational banner for Silman's seven imbalances.
   Per-user dismissal via ApplicationUser.PdcEducationDismissedAt — one
   acknowledgment kills it across all Player Diagnostic surfaces. */
.pdc-education-banner[b-aoehpxgdsv] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    margin-bottom: 0.875rem;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.12), rgba(184, 133, 54, 0.04));
    border: 1px solid rgba(184, 133, 54, 0.3);
}

.pdc-education-icon[b-aoehpxgdsv] {
    flex-shrink: 0;
    color: #B88536;
    margin-top: 0.125rem;
}

.pdc-education-icon[b-aoehpxgdsv]  i {
    font-size: 1.125rem;
}

.pdc-education-body[b-aoehpxgdsv] {
    flex: 1;
    min-width: 0;
}

.pdc-education-title[b-aoehpxgdsv] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #B88536;
    margin: 0 0 0.375rem;
}

.pdc-education-text[b-aoehpxgdsv] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 0.625rem;
}

.pdc-education-text strong[b-aoehpxgdsv] {
    color: #31DDE3;
    font-weight: 600;
}

.pdc-education-dismiss[b-aoehpxgdsv] {
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    background: rgba(184, 133, 54, 0.2);
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.4);
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.pdc-education-dismiss:hover[b-aoehpxgdsv] {
    background: rgba(184, 133, 54, 0.3);
    transform: translateY(-1px);
}

/* Deviations panel (new under Player Diagnostic). Renders repertoire
   deviations as a per-move expected→played list. The same data also
   surfaces as a book icon in the move list — the panel is the summary,
   the markers are in-context. */
.deviation-intro[b-aoehpxgdsv] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 0.5rem;
}

.deviation-item[b-aoehpxgdsv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: 0.25rem;
}

.deviation-item:hover[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.08);
}

.deviation-move[b-aoehpxgdsv] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.75rem;
    color: #31DDE3;
    font-weight: 600;
}

.deviation-expected[b-aoehpxgdsv] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.8125rem;
    color: #10b981;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.deviation-arrow[b-aoehpxgdsv] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.875rem;
}

.deviation-played[b-aoehpxgdsv] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.8125rem;
    color: #ef4444;
    font-weight: 600;
}

.deviation-book[b-aoehpxgdsv] {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    margin-left: auto;
}

@media (max-width: 640px) {
    .player-diagnostic-section[b-aoehpxgdsv] {
        padding: 0.75rem 0.625rem 0.5rem;
    }

    .pdc-education-banner[b-aoehpxgdsv] {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .deviation-item[b-aoehpxgdsv] {
        gap: 0.375rem;
    }

    .deviation-book[b-aoehpxgdsv] {
        margin-left: 0;
        width: 100%;
    }
}

/* #5867 - coach-mode read-only banner */
/* ---- #8098 COACH-BOARD: the coach strip ------------------------------------

   One row: who and what the coach is reviewing, the game's identity, the way
   back, and (in the coach v2 canary) "Set as homework". It replaces a banner row
   plus a homework row, and --analysis-dvh above is shortened by exactly this row
   so the board, the transport and the move list still fit one screen.

   NOT STICKY, and that is deliberate. `position: sticky` is inert in this app:
   html and body both set overflow, so body is the sticky container and it never
   scrolls (measured: .main-header, which declares sticky, scrolls away too). On a
   desktop the strip is on screen anyway while the coach works; on a phone the
   identity is repeated on the board card (.coach-board-identity).

   OPAQUE and flat: the gold wash is rgba(184, 133, 54, 0.15) over the card color,
   flattened, so axe-core can resolve a background for the text on it. */
.analysis-page.coach-mode[b-aoehpxgdsv] {
    --analysis-dvh: calc(100dvh - var(--coach-strip-block));
}

.coach-strip[b-aoehpxgdsv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    min-height: 2.75rem;
    margin-bottom: 0.5rem;
}

.coach-strip[b-aoehpxgdsv]  .cag {
    margin: 0;
}

/* ONE ROW, by construction, wherever the board budget is a viewport budget.
   --coach-strip-block is a constant (this row plus its margin), so the strip has
   to BE that row whatever is in it. It was not: once homework was assigned, the
   status and its confirmation were wider than the row, the strip wrapped to two
   rows for the rest of the page's life (the component never clears the
   confirmation), and the board sat 29px lower at 1366 and 1440 with the control
   row under the fold again. So above 768px: nothing wraps, every piece of text
   truncates on its line, the height is fixed, and the confirmation is out of
   the flow and leaves by itself. Below 768px the page scrolls and the strip is
   three short rows on purpose. */
@media (min-width: 769px) {
    .coach-strip[b-aoehpxgdsv] {
        flex-wrap: nowrap;
        height: 2.75rem;
    }

    /* WHAT GIVES WAY, IN ORDER, when the row is short (measured at 1024x768 and
       820x1180 before this: the sentence read "Revie..." and the date was cut to
       "Oct 10, 2(" with no ellipsis, so the strip no longer said whose game it
       was). First the game's identity, which the header band directly below
       repeats; then the homework status; the sentence naming the student is last. */
    .coach-mode-text[b-aoehpxgdsv] {
        flex: 0 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The identity takes what the sentence leaves (flex-basis 0). It is a wrapping
       row exactly one line tall: a part that does not fit moves to a second line
       that is never painted, so it leaves WHOLE instead of being cut mid-word. The
       opponent's name is the one part that may shorten to an ellipsis first. */
    .coach-mode-identity[b-aoehpxgdsv] {
        flex: 1 1 0;
        flex-wrap: wrap;
        align-content: flex-start;
        height: 1.3em;
    }

    .coach-mode-identity .cmi-opponent[b-aoehpxgdsv] {
        flex: 1 1 4.5rem;
        max-width: max-content;
        min-width: 0;
    }

    .coach-strip[b-aoehpxgdsv]  .cag {
        position: relative;
        flex: 0 1000 auto;
        flex-wrap: nowrap;
        max-width: 45%;
    }

    .coach-strip[b-aoehpxgdsv]  .cag-status {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The confirmation: a small note hung under the control that produced it,
       over the header band, gone after a few seconds. It stays in the DOM (it is
       a role="status" and was announced when it arrived); only the paint leaves. */
    .coach-strip[b-aoehpxgdsv]  .cag-toast {
        position: absolute;
        top: calc(100% + 0.25rem);
        right: 0;
        z-index: 5;
        width: max-content;
        max-width: min(24rem, 60vw);
        padding: 0.4rem 0.7rem;
        background-color: #201f26;
        border: 1px solid rgba(184, 133, 54, 0.4);
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.9);
        animation: coach-strip-toast-leave-b-aoehpxgdsv 0.4s ease 6s forwards;
    }
}

/* app.css zeroes every animation delay for a member who asked for reduced motion,
   which ended this animation the moment it began: the confirmation was never
   painted. Waiting is not motion. Keep the six seconds; the global rule still
   takes the fade down to nothing. */
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    .coach-strip[b-aoehpxgdsv]  .cag-toast {
        animation-delay: 6s !important;
    }
}

@keyframes coach-strip-toast-leave-b-aoehpxgdsv {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.coach-mode-banner[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.25rem 0.6rem;
    flex: 1 1 24rem;
    min-width: 0;
    min-height: 2.75rem;
    box-sizing: border-box;
    background-color: #201f26;
    border: 1px solid rgba(184, 133, 54, 0.4);
    border-radius: 12px;
    padding: 0.3rem 1rem;
    color: #B88536;
    font-size: 0.9rem;
    line-height: 1.3;
}

.coach-mode-banner[b-aoehpxgdsv]  i {
    font-size: 14px;
    flex-shrink: 0;
}

.coach-mode-text[b-aoehpxgdsv] {
    min-width: 0;
}

/* The game's identity: opponent, date, time control, result. One line that
   truncates the opponent's name rather than wrapping, so the strip keeps its
   one-row height. */
.coach-mode-identity[b-aoehpxgdsv],
.coach-board-identity[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
}

.coach-mode-identity .cmi-part[b-aoehpxgdsv],
.coach-board-identity .cmi-part[b-aoehpxgdsv] {
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.coach-mode-identity .cmi-opponent[b-aoehpxgdsv] {
    font-weight: 600;
    color: #ffffff;
    flex-shrink: 1;
}

.coach-mode-identity .cmi-sep[b-aoehpxgdsv],
.coach-board-identity .cmi-sep[b-aoehpxgdsv] {
    color: rgba(255, 255, 255, 0.6);
    margin-right: 0.4rem;
}

/* On the board card: phone widths only. Above 768px the strip and the board share
   a screen, and a second copy would be noise. */
.coach-board-identity[b-aoehpxgdsv] {
    display: none;
    margin: 0 0 0.35rem;
    padding: 0 0.25rem;
    font-size: 0.8rem;
    font-style: normal;
}

.coach-mode-banner a[b-aoehpxgdsv] {
    margin-left: auto;
    color: #31DDE3;
    text-decoration: none;
    font-size: 0.85rem;
    /* Measured at 390 before this: a 33px-wide link wrapped over three lines and
       clipped to "Back / to / stude". */
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    /* A standalone link, not a word in a sentence: 24px is the WCAG 2.5.8 floor
       for a fine pointer (it measured 17.7px). The coarse-pointer rule below
       takes it to the full touch target. */
    min-height: 1.5rem;
}

@media (hover: none) and (pointer: coarse) {
    .coach-mode-banner a[b-aoehpxgdsv] {
        min-height: var(--touch-target);
        padding: 0 0.25rem;
    }
}

/* A touch tablet: the 44px link plus the banner's own padding and border made a
   56px banner in a 44px strip (measured at 1024x768 and 820x1180 with touch). The
   link is the banner's height there; it overlaps the 1px border top and bottom. */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) {
    .coach-mode-banner[b-aoehpxgdsv] {
        padding-block: 0;
    }

    .coach-mode-banner a[b-aoehpxgdsv] {
        margin-block: -1px;
    }
}

/* 769px to 900px: the page is one scrolling column here (.analysis-content, see
   the max-width: 900px rule), and with the sidebar the strip is about 480px, too
   narrow for the sentence and the homework status side by side. Nothing depends
   on the board budget in a scrolling column, so the homework control takes its
   own row. Above 900px the strip is one row, always. This block has to come AFTER
   the base .coach-mode-banner rule: same specificity, later wins. */
@media (min-width: 769px) and (max-width: 900px) {
    .coach-strip[b-aoehpxgdsv] {
        flex-wrap: wrap;
        height: auto;
    }

    .coach-mode-banner[b-aoehpxgdsv] {
        flex-basis: 100%;
    }

    .coach-strip[b-aoehpxgdsv]  .cag {
        max-width: 100%;
    }

    /* The control is at the row's left edge here, so the confirmation hangs from
       its left (hung from the right it ran 36px off the page at 800 and 900). */
    .coach-strip[b-aoehpxgdsv]  .cag-toast {
        left: 0;
        right: auto;
    }
}

/* Short of a full-width desktop the row is too narrow for the long promise, the
   identity and the homework trigger together. The promise is the part with a
   second home (the hint by the board says it again), so it folds first. */
@media (max-width: 1500px) {
    .coach-mode-note[b-aoehpxgdsv] {
        display: none;
    }
}

/* Phone: two short lines - whose game and the way back, then the identity - and
   the homework row beneath. */
@media (max-width: 768px) {
    .coach-mode-banner[b-aoehpxgdsv] {
        flex-wrap: wrap;
        flex-basis: 100%;
        padding: 0.15rem 0.75rem 0.35rem;
    }

    .coach-mode-text[b-aoehpxgdsv] {
        flex: 1 1 0;
    }

    .coach-mode-identity[b-aoehpxgdsv] {
        order: 3;
        flex: 1 1 100%;
        font-size: 0.8rem;
    }

    .coach-board-identity[b-aoehpxgdsv] {
        display: flex;
    }
}

/* #6932 - coach commentary beside the board. Card chrome comes from the shared
   Card component; this styles only the intro copy and gives the thread a bounded
   height so a long conversation scrolls internally instead of pushing the engine
   panels off the bottom of the sidebar. */
.coach-commentary-intro[b-aoehpxgdsv] {
    margin: 0 0 0.75rem 0;
    color: var(--ascend-text-muted, rgba(255, 255, 255, 0.6));
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Names the other party, rendered only when a player has more than one coach and
   so has more than one thread on this game. */
.coach-commentary-who[b-aoehpxgdsv] {
    margin: 0.75rem 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ascend-secondary);
}

/* ::deep reaches CommentaryThread's own markup - it carries the child
   component's scope attribute, not this page's. */
/* #6932/#7176 - the commentary card now lives BELOW THE BOARD, as the last
   child of .analysis-board-section (owner, 2026-08-20: coach commentary is
   about the GAME and belongs under the board; per-move comments moved to the
   right-click menu on the move list). The old first-child-of-the-rail markup
   position and its `order: 99` flex reorder are gone WITH each other - if the
   card ever moves again, remember the two properties the markup comment in
   GameAnalysis.razor names: outside every toggling @if/else, never unmounted
   by tab or move-selection changes. */
/* ::deep IS REQUIRED on both rules below, and the reason is easy to get wrong.

   Blazor appends the scope attribute to the LAST simple selector in a rule.
   `.analysis-board-section .coach-commentary-card` therefore compiles to
   `.analysis-board-section .coach-commentary-card[b-xxx]` - and `Card.razor`
   does NOT splat unmatched attributes onto its root div, so that div never
   carries b-xxx and the rule matches NOTHING. Written without ::deep on
   2026-08-10, shipped, and the card stayed at the top of the column.

   With ::deep the scope lands on .analysis-board-section instead (which IS in
   this component's own markup, so it has the attribute) and the descendant
   part matches the child component freely. */
.analysis-board-section[b-aoehpxgdsv]  .coach-commentary-card {
    margin-top: 0.5rem;
}

.analysis-board-section[b-aoehpxgdsv]  .coach-commentary-card .cc-messages {
    max-height: 22rem;
    overflow-y: auto;
}

/* Copy-FEN affordance (ADO #1085) — reuses .nav-btn chrome; the feedback
   toast mirrors the StudyBoard "FEN copied" pattern. */
.copy-fen-feedback[b-aoehpxgdsv] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #10b981;
    letter-spacing: 0.04em;
    animation: copyFenFade-b-aoehpxgdsv 0.2s ease;
}

@keyframes copyFenFade-b-aoehpxgdsv {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---- Bug 2: variation exploration affordance ---------------------------- */
/* #7151 round 2 - two renderings of ONE hint. On <=768px the full sentence
   shows below the board (touch has no hover, and vertical space there is
   free). On >=769px the sentence is demoted to the info icon inside the
   controls row (.variation-hint-inline) - the separate line was costing
   ~40px of height-budgeted board size (Lichess ref: controls are one thin
   icon row with no hint line beneath). */
.variation-hint[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    /* #7747 - was rgba(255, 255, 255, 0.45), measured 4.45:1. Same dim-white
       family, same #7232 token. The icon and the >=769px icon-only rendering
       of this ONE hint carried the matching dimmed-cyan defect (1.00:1 and
       4.10:1 in the #7291 register), so they are repainted with it: splitting
       them would leave one half of the same affordance failing. */
    color: var(--ascend-text-secondary);
    letter-spacing: 0.02em;
}

.variation-hint i[b-aoehpxgdsv] {
    color: var(--ascend-accent);
}

.variation-hint-inline[b-aoehpxgdsv] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--ascend-accent);
    cursor: help;
}

.variation-hint-inline:focus-visible[b-aoehpxgdsv] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (min-width: 769px) {
    .variation-hint[b-aoehpxgdsv] {
        display: none;
    }

    .variation-hint-inline[b-aoehpxgdsv] {
        display: inline-flex;
    }
}

.variation-strip[b-aoehpxgdsv] {
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.08), rgba(184, 133, 54, 0.06));
    box-shadow: 0 0 0 1px rgba(49, 221, 227, 0.05) inset;
    animation: copyFenFade-b-aoehpxgdsv 0.2s ease;
}

.variation-strip-header[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* #7152 - the coach's strip carries a third control (Share this line), so
       the header wraps instead of squeezing the buttons. */
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

/* #7152 - hand the open line to the student. Gold rather than cyan: it is the
   one control here that leaves the coach's own screen and reaches another
   person, and it must not read as another navigation button. */
.variation-share-btn[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    margin-left: auto;
    border: 1px solid var(--ascend-secondary);
    border-radius: 50px;
    background: rgba(184, 133, 54, 0.15);
    color: var(--ascend-secondary-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.variation-share-btn:hover:not(:disabled)[b-aoehpxgdsv] {
    background: rgba(184, 133, 54, 0.28);
    box-shadow: 0 0.125rem 0.625rem rgba(184, 133, 54, 0.25);
    transform: translateY(-0.0625rem);
}

.variation-share-btn:disabled[b-aoehpxgdsv] {
    opacity: 0.6;
    cursor: default;
}

.variation-share-btn[b-aoehpxgdsv]  i {
    font-size: 0.875rem;
}

.variation-share-feedback[b-aoehpxgdsv] {
    margin: 0.5rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-secondary-light);
}

.variation-strip-label[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #31DDE3;
}

.variation-return-btn[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 50px;
    background: rgba(49, 221, 227, 0.1);
    color: #31DDE3;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.variation-return-btn:hover[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.2);
    box-shadow: 0 2px 10px rgba(49, 221, 227, 0.25);
    transform: translateY(-1px);
}

.variation-breadcrumb[b-aoehpxgdsv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.variation-ply[b-aoehpxgdsv] {
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.variation-back-btn[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 0.15rem;
    border: 1px solid rgba(184, 133, 54, 0.45);
    border-radius: 8px;
    background: rgba(184, 133, 54, 0.12);
    color: #B88536;
    cursor: pointer;
    transition: all 0.2s ease;
}

.variation-back-btn:hover[b-aoehpxgdsv] {
    background: rgba(184, 133, 54, 0.25);
    transform: translateY(-1px);
}

/* ------------------------------------------------- #6765: eval graph in the
   top-of-page slot the Critical Moments count tile used to occupy. The card
   markup is unchanged - it was lifted verbatim out of the retired Engine tab -
   so only its placement is styled here. */

.analysis-summary-strip .eval-chart-card[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin: 0;
}

.analysis-summary-strip .eval-chart-card .eval-chart[b-aoehpxgdsv],
.analysis-summary-strip .eval-chart-card .chart-container[b-aoehpxgdsv] {
    min-width: 0;
}

.analysis-summary-strip .eval-chart-card .chart-container[b-aoehpxgdsv] {
    height: 110px;
}

.analysis-summary-strip .eval-chart-card .eval-svg[b-aoehpxgdsv] {
    height: 110px;
}

@media (max-width: 1100px) {
    /* Below this the three-track strip stops being readable at all; the graph
       takes a full row of its own rather than being crushed. */
    .analysis-summary-strip[b-aoehpxgdsv] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    }

    .analysis-summary-strip .eval-chart-card[b-aoehpxgdsv] {
        grid-column: 1 / -1;
    }
}

/* #6936 — move-level commentary.
   The move-list marker: quiet when the conversation is merely present, accent
   when something is waiting to be read. Deliberately distinct from
   .move-comment-bubble, which marks the student's own ANNOTATION — the two are
   different things and must not read as one. */
.move-commentary-marker[b-aoehpxgdsv] {
    color: var(--ascend-text-muted);
    font-size: 0.7rem;
    margin-left: 0.15rem;
}

.move-commentary-marker.unread[b-aoehpxgdsv] {
    color: var(--ascend-accent);
}

/* The student's annotation, as a real panel instead of a native `title`
   tooltip. Readable on touch, styleable, and it sits directly above the thread
   that replies to it. Read-only for both parties here: the student edits it in
   the editor below, the coach never edits it at all. */
.move-annotation-panel[b-aoehpxgdsv] {
    margin: 0.75rem 0;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--ascend-secondary);
}

.move-annotation-head[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-text-muted);
}

.move-annotation-head[b-aoehpxgdsv]  i {
    font-size: 14px;
}

.move-annotation-glyph[b-aoehpxgdsv] {
    color: var(--ascend-secondary);
    font-weight: 700;
}

.move-annotation-body[b-aoehpxgdsv] {
    margin: 0.4rem 0 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-text-light);
    white-space: pre-wrap;
}

/* The per-move thread. Same component and same read model as the game-level
   thread — this is one commentary system, not a second one. */
.move-commentary[b-aoehpxgdsv] {
    margin: 0.75rem 0;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.move-commentary-head[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-accent);
}

/* ---- #7176: the move context menu (right-click a move, Lichess-style) ------

   position: fixed, rendered at PAGE level in the markup - never inside the
   move list. The rail chain is .analysis-panels-column { overflow: hidden }
   over .moves-list { overflow-y: auto } (#7151 round 5); a popup inside that
   chain gets clipped at the column edge or dragged by the scroll. Fixed at
   page level escapes it entirely (same mechanism as .dropdown-backdrop above),
   and the inline-style min() clamps keep the menu inside the viewport when the
   move sits near the right or bottom edge. */
.move-context-backdrop[b-aoehpxgdsv] {
    position: fixed;
    inset: 0;
    z-index: 9290; /* above the floating feedback FAB (9000-9200), below Modal (9999) */
    background: transparent;
}

.move-context-menu[b-aoehpxgdsv] {
    position: fixed;
    z-index: 9300; /* above the floating feedback FAB (9000-9200), below Modal (9999) */
    width: 14rem;
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.98));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(49, 221, 227, 0.1);
    animation: dropdownFadeIn-b-aoehpxgdsv 0.15s ease;
}

.move-context-menu:focus[b-aoehpxgdsv] {
    outline: none;
}

/* #7188 - the note composer opens inside this menu. 14rem is right for a list
   of menu items and cramped for a textarea, so the menu widens for that one
   state. The inline `left` clamp is calc(100vw - 15rem), which still keeps this
   inside the viewport at the right edge. */
.move-context-menu:has(.move-comment-editor)[b-aoehpxgdsv] {
    width: 18rem;
}

.move-context-menu .move-comment-editor[b-aoehpxgdsv] {
    margin: 0;
    padding: 0.25rem;
}

.move-context-menu .move-comment-textarea[b-aoehpxgdsv] {
    min-height: 56px;
    font-size: 0.8rem;
    padding: 0.5rem 0.6rem;
}

.move-context-title[b-aoehpxgdsv] {
    padding: 0.25rem 0.5rem 0.4rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ascend-accent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.35rem;
}

.move-context-item[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.move-context-item:hover[b-aoehpxgdsv],
.move-context-item:focus-visible[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.12);
    outline: none;
}

.move-context-item i[b-aoehpxgdsv] {
    color: rgba(49, 221, 227, 0.7);
}

/* The glyph rows reuse .move-mark-btn (the MOVE DETAILS picker chrome) so the
   two surfaces look like the one vocabulary they are. */
.move-context-glyphs[b-aoehpxgdsv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
}

.move-context-glyphs + .move-context-glyphs[b-aoehpxgdsv] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* The one-line discoverability hint (#7164: an undiscoverable feature is a
   feature nobody has). #7188 moved it from a paragraph BELOW the list onto the
   MOVES heading row: it was costing 46px of the same budget the move list was
   starving in, and a hint that buys its visibility with move rows is a bad
   trade. Same sentence, same visibility, no rows.

   Hidden where hover does not exist - touch has no right-click; there, tapping
   a move and reading MOVE DETAILS is the path, and this line would be a lie. */
.moves-card-head[b-aoehpxgdsv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.moves-card-head h3[b-aoehpxgdsv] {
    margin: 0 0 0.5rem;
}

.moves-context-hint[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.02em;
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
}

.moves-context-hint i[b-aoehpxgdsv] {
    color: rgba(49, 221, 227, 0.5);
}

@media (hover: none) {
    .moves-context-hint[b-aoehpxgdsv] {
        display: none;
    }
}

/* ==========================================================================
   #7189 - keyboard reach for the move list, and the attributed per-move
   comment thread.
   ========================================================================== */

/* #7750 - the move's ACTIVATOR. The row was a role="button" div wrapping the
   menu trigger, which is a button inside a button: axe `nested-interactive`,
   serious, and a control a screen reader announces and then cannot reach
   predictably. The row is now a plain container and this is the real button
   inside it, with the menu trigger as its SIBLING.

   It has to look like nothing - the row's padding, background, radius and
   selected / mistake states all still belong to .move-cell - so every button
   default is stripped and the flex layout the row used to own is reproduced
   here, gap included, so .move-san, .move-eval and the markers sit exactly
   where they sat. `flex: 1` makes it fill the row, which is what keeps the
   focus ring row-sized and keeps `.move-eval { margin-left: auto }` pushing the
   eval to the right edge. */
.move-activate[b-aoehpxgdsv] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    /* #8788 - wrap, never spill under the trigger (see .move-row). */
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* A move has a roving tabindex, so it needs a focus ring. Without one, keyboard
   users can move between moves and have no way to tell which one they are on -
   the whole point of making them focusable. The outline is on the button rather
   than the row because the button IS the thing that holds focus; it spans the
   row minus the menu trigger. The row tints with it so the whole move reads as
   the current one. */
.move-activate:focus-visible[b-aoehpxgdsv] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 1px;
}

.move-cell:has(.move-activate:focus-visible)[b-aoehpxgdsv] {
    background: rgba(49, 221, 227, 0.12);
}

/* The visible affordance, on EVERY move (#7763 round 2 - it used to render only
   on the move holding the roving tab stop, which is the move you are already
   on, so there was nothing to click on any OTHER move and the owner reported
   commenting as right-click-only). Revealed by :hover AND :focus-within - never
   hover alone, which is the trap #7189 calls out: a control only a pointer can
   summon is a control a keyboard user does not have. opacity rather than
   display so the button keeps its box and the move row does not reflow when it
   appears, and so that tabbing to it works (focusing it makes :focus-within
   true, which shows it). The tab ORDER is unchanged - every trigger but the
   current move's carries tabindex="-1". */
.move-menu-trigger[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* #8788 - its own grid track in .move-cell; no auto margin to push with. */
    margin-left: 0;
    padding: 0 0.2rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    /* #7758 - :focus-within covered the keyboard user; it never covered the
       finger, which has neither hover nor focus. */
    opacity: var(--hover-reveal-rest, 0);
    transition: opacity 0.12s ease, color 0.12s ease;
}

.move-cell:hover .move-menu-trigger[b-aoehpxgdsv],
.move-cell:focus-within .move-menu-trigger[b-aoehpxgdsv],
.move-menu-trigger:focus-visible[b-aoehpxgdsv] {
    opacity: 1;
}

.move-menu-trigger:hover[b-aoehpxgdsv],
.move-menu-trigger:focus-visible[b-aoehpxgdsv] {
    color: var(--ascend-accent);
    outline: 2px solid var(--ascend-accent);
    outline-offset: 1px;
}

/* Which moves carry an attributed thread. The count is in the move's aria-label
   too - this is a second reading of the same fact, never the only one. */
.move-comment-count[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.65rem;
    color: rgba(49, 221, 227, 0.75);
}

/* A menu opened with no pointer has no cursor to sit at. Centring it is
   deterministic, never clipped, and needs no measurement of where the move is
   on screen - which the server cannot know. The pointer path keeps its inline
   left/top and is untouched by this rule. */
.move-context-menu.keyboard-anchored[b-aoehpxgdsv] {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: min(30rem, calc(100vh - 2rem));
}

/* #8098 COACH-BOARD - the comment box opened FROM THE BOARD, on a phone.

   Centered (the rule above), it sat on top of the board it was opened to talk
   about. Below 768px it docks to the bottom of the screen instead, so the board,
   the move and the comment are on one screen: at 390x844 the board ends near
   y=470 once the page has brought it under the header, and a 20rem-wide box of
   about 250-330px sits below that. The box opened from a row in the move list
   keeps its own placement; the list is what that user is looking at. */
/* Above 768px the same box sits at the right edge, over the rail, for the same
   reason: measured centered at 1440 it covered the right half of the board
   (board x 377-833, box x 560-880). The rail is what it may cover. */
@media (min-width: 769px) {
    .move-context-menu.from-board[b-aoehpxgdsv] {
        left: auto;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (max-width: 768px) {
    .move-context-menu.from-board[b-aoehpxgdsv] {
        top: auto;
        /* --from-board-inset: the on-screen keyboard. A fixed box lives in the
           layout viewport, which the keyboard does not shrink, so without it the
           box that just took focus sits underneath the keyboard. */
        bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px) + var(--from-board-inset, 0px));
        left: 50%;
        transform: translateX(-50%);
        /* --from-board-max: the room under the board, measured by
           board-into-view.js when the box opens and whenever the visible area
           changes. A fixed share of the screen (45vh) was right for 844px and an
           empty thread only: with one comment the box was 348px and covered the
           transport, and on a 664px screen it covered the board. The fallback is
           what applies for the one frame before the measurement lands. The width
           is the thread's own (20rem, below). */
        max-height: var(--from-board-max, min(22rem, 45dvh));
    }

    /* The docked box is as tall as the room under the board and no taller, so
       the comments are the part that gives: the list takes what is left and
       scrolls, and the composer under it is always on screen. A coach opens this
       box to write. */
    .move-context-menu.from-board[b-aoehpxgdsv] {
        display: flex;
        flex-direction: column;
    }

    .move-context-menu.from-board .move-context-title[b-aoehpxgdsv],
    .move-context-menu.from-board .move-comment-thread > *[b-aoehpxgdsv] {
        flex-shrink: 0;
    }

    .move-context-menu.from-board .move-comment-thread[b-aoehpxgdsv] {
        flex: 1 1 auto;
        min-height: 0;
    }

    .move-context-menu.from-board .move-comment-thread > .move-comment-list[b-aoehpxgdsv] {
        flex: 1 1 auto;
        min-height: 2.5rem;
        max-height: none;
        overflow-y: auto;
    }

    /* Short of room for the whole box (board-into-view.js marks the root). First
       the title and the headings fold: the board is showing the move and the
       dialog is named for it. With room for the composer alone, which is every
       phone with its keyboard up, the comments fold too and are back as soon as
       the keyboard goes. */
    :root[data-from-board-fit] .move-context-menu.from-board .move-context-title[b-aoehpxgdsv],
    :root[data-from-board-fit] .move-context-menu.from-board .move-comment-thread-head[b-aoehpxgdsv],
    :root[data-from-board-fit] .move-context-menu.from-board .move-comment-thread-empty[b-aoehpxgdsv],
    :root[data-from-board-fit="composer"] .move-context-menu.from-board .move-comment-thread > .move-comment-list[b-aoehpxgdsv] {
        display: none;
    }

    /* Keeps the board card clear of the fixed app header when the page brings it
       into view for the docked comment box. */
    .board-card[b-aoehpxgdsv] {
        scroll-margin-top: var(--app-content-top, 0px);
    }
}

/* #8098 - measured at 390 and 344 with touch emulation: "Post comment" 120x28,
   "Done" 37x30, the menu's own item 206x34, "Delete" under 30. These are the
   controls a coach on a phone comments with. */
@media (hover: none) and (pointer: coarse) {
    .move-context-item[b-aoehpxgdsv],
    .move-comment-save[b-aoehpxgdsv],
    .move-comment-cancel[b-aoehpxgdsv],
    .move-comment-delete[b-aoehpxgdsv] {
        min-height: var(--touch-target);
    }

    .move-comment-cancel[b-aoehpxgdsv] {
        min-width: var(--touch-target);
    }
}

/* The thread is the tallest thing the menu renders, so it gets the wider box
   the composer already earns and a cap with its own scroll - a fifteen-comment
   conversation must not push Post under the fold. */
.move-context-menu:has(.move-comment-thread)[b-aoehpxgdsv] {
    width: 20rem;
}

.move-comment-thread[b-aoehpxgdsv] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.25rem;
}

.move-comment-thread-head[b-aoehpxgdsv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(49, 221, 227, 0.85);
}

.move-comment-thread-empty[b-aoehpxgdsv] {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.move-comment-list[b-aoehpxgdsv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 14rem;
    overflow-y: auto;
}

.move-comment-item[b-aoehpxgdsv] {
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid rgba(49, 221, 227, 0.35);
    border-radius: 6px;
}

.move-comment-item.removed[b-aoehpxgdsv] {
    border-left-color: rgba(255, 255, 255, 0.15);
}

.move-comment-byline[b-aoehpxgdsv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

/* "Comments are identified by who wrote them" is the model, so the author is
   never a subtle secondary detail. */
.move-comment-author[b-aoehpxgdsv] {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

.move-comment-when[b-aoehpxgdsv] {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.move-comment-body[b-aoehpxgdsv] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.move-comment-body.removed[b-aoehpxgdsv] {
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
}

/* In the flow, always rendered, never hover-revealed: a hover-only delete means
   a keyboard or screen-reader user cannot moderate their own game. */
.move-comment-delete[b-aoehpxgdsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.15rem 0.4rem;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 6px;
    color: rgba(248, 113, 113, 0.9);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    cursor: pointer;
}

.move-comment-delete:hover:not(:disabled)[b-aoehpxgdsv],
.move-comment-delete:focus-visible[b-aoehpxgdsv] {
    background: rgba(239, 68, 68, 0.12);
    outline: 2px solid rgba(248, 113, 113, 0.6);
    outline-offset: 1px;
}

.move-comment-delete:disabled[b-aoehpxgdsv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.move-comment-error[b-aoehpxgdsv] {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(248, 113, 113, 0.95);
}

/* ==========================================================================
   #7796 - THE TOUCH FLOOR FOR GAME ANALYSIS.

   This page was never walked by #7736's ratchet: TouchTargetRegister.Routes
   held eight STATIC paths, and /games/{id}/analysis needs a game id to reach,
   so every touch-target regression here has been invisible to CI since the
   ratchet landed. Measured on dev as demo@ with a genuinely coarse pointer
   (Playwright isMobile + hasTouch; setEmulatedMedia alone does NOT work in
   this headless build and silently reports desktop density) the page carried
   80 controls under 44x44 at both 390px and 344px - the worst surface in the
   app by a wide margin.

   Every floor below is inside the pointer query, so desktop density is
   untouched: verified at 1440 before and after, where the same controls keep
   their 34-36px sizing.

   Nothing here fakes a hit area with an absolutely positioned pseudo-element.
   The header actions sit side by side in .header-right and the move list's
   activate button and menu trigger are SIBLINGS inside .move-cell (flex items
   in the header; grid tracks in the move cell since #8788), so an invisible
   44px box on any of them would overlap the control beside it and the one on
   top would silently eat its neighbor's taps - including DELETE. Flex and grid
   items cannot overlap, so growing the boxes is the safe mechanism here and
   the pseudo-element is not an option at all (#7783, #7758). */
@media (hover: none) and (pointer: coarse) {
    /* Icon-only, so it needs the WIDTH floor as much as the height one - and
       flex-shrink has to be turned off with it. .header-left is a flex row and
       this button was already being SQUEEZED below its declared 36px width
       there (measured 27px at 390 and 28px at 344 before this block existed),
       so a wider declaration alone just gets squeezed too. .game-info beside it
       wraps and carries min-width: 0, so it is the one that gives. */
    .back-button[b-aoehpxgdsv] {
        flex: 0 0 auto;
        width: var(--touch-target);
        height: var(--touch-target);
    }

    /* `height: 34px` is a fixed height, so min-height alone would lose to it -
       the height has to be released before the floor can apply. The width
       floor matters because #7151 made these icon-only under 768px. */
    .reanalyze-button[b-aoehpxgdsv],
    .studyboard-link[b-aoehpxgdsv],
    .external-link[b-aoehpxgdsv],
    .delete-game-button[b-aoehpxgdsv] {
        height: auto;
        min-height: var(--touch-target);
        min-width: var(--touch-target);
    }

    .analysis-tab[b-aoehpxgdsv] {
        min-height: var(--touch-target);
    }

    /* THE MOVE LIST - 64 of the 80 findings on this page were .move-activate
       at 22px tall, which is under WCAG 2.2 AA 2.5.8's 24px floor, not merely
       under the app's 44px one. A move is not "a target in a sentence": it is
       a cell in a grid, so the footer's inline exception does not reach it.

       The floor is paid for out of the padding rather than added on top of it.
       A move row is 42px today (a 22px button inside 12px of cell padding
       inside 8px of row padding), so dropping the two paddings on touch makes
       the row exactly 44px - a 2px change to the list's height instead of the
       52% it would grow by if 44px were stacked on the existing padding. The
       hover / selected tint now fills the row, which reads better on a phone
       than a tinted band floating inside it. */
    .move-row[b-aoehpxgdsv] {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* #8788 - and no right padding or column gap beside the trigger: its 44px
       box (below) centers a 12px glyph, so the box itself is the visual gap.
       Paying for both took the width "winning" and a 7-character SAN need at
       344 and in the 240px desktop rail. */
    .move-cell[b-aoehpxgdsv] {
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0;
        column-gap: 0;
    }

    .move-activate[b-aoehpxgdsv] {
        min-height: var(--touch-target);
    }

    /* 18x13 at rest, and #7758 already makes it VISIBLE on a touch device
       (--hover-reveal-rest), so it is a control a finger can see and could not
       hit. #7763 round 2 renders one per MOVE rather than one per list, so on a
       touch device every row now carries a visible target - which is the point:
       a finger has no hover to reveal it with. It has its own grid track
       beside .move-activate (#8788), which narrows to make room. */
    .move-menu-trigger[b-aoehpxgdsv] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}

/* ==========================================================================
   #8017 PHONE-TODAY — the game page leads with the evidence.

   Measured before this (ux-walk 2026-09-26, F6): at 390 the member's own
   truth — 67% accuracy, "Decided at move 24", 7 inaccuracies / 6 mistakes /
   4 blunders and the eval graph — sat about 2.8 screens down, below the board
   and the full 32-row move list. The top of the page was engine jargon.

   The fix is order, not deletion: .analysis-summary-strip already holds all
   four of those facts as one block, so on a coarse pointer it moves above the
   board. Everything that was on the page is still on the page.

   Scoped to `.analysis-page.phone-today` inside a coarse-pointer query, so a
   mouse at any width — including 1440 — gets today's page untouched. Note
   this needs real touch emulation to observe: setEmulatedMedia alone does not
   satisfy `pointer: coarse`.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* The strip is a CHILD OF .analysis-content, alongside the board section
       and the move rail — measured in the browser, not assumed: an earlier cut
       of this rule targeted `.analysis-page > .analysis-summary-strip` and did
       nothing at all, while the sibling rules below still fired, so the page
       looked changed and the order had not moved a pixel.

       .analysis-content is already a grid (one column at phone widths), and
       `order` applies to grid items, so no display change is needed. */
    .analysis-page.phone-today .analysis-content > .analysis-summary-strip[b-aoehpxgdsv] {
        order: -1;
        margin-top: 0;
    }

    .analysis-page.phone-today .analysis-content > .analysis-board-section[b-aoehpxgdsv] {
        order: 0;
    }

    .analysis-page.phone-today .analysis-content > .rail-stack[b-aoehpxgdsv] {
        order: 1;
    }

    /* #8287 - THE FIRST SCREEN HAS TO HOLD THE SENTENCE TOO. The first cut of
       this block stacked the three tiles in one column, which on the prod
       canary (2026-10-01, demo@'s analyzed game) put the strip at 307-903 at
       390x844: the eval graph 59px past the fold, and at 344x882 the same.
       Then the mirror-v2 canary added the per-game sentence band above the
       strip - 208-252px tall - and the verdict counts fell below the fold too.

       So the strip is laid out for the budget that is actually left. Measured
       on the worst real header (a pawn-structure chip wraps the meta line, so
       the card is 183px at both widths) with the longest approved sentence,
       what remains above the fold is about 295px at 390x844 and 311px at
       344x882. The stacked strip needed 597px; this one needs about 270:

       - ACCURACY and MISTAKES side by side, the graph full width beneath. Each
         tile keeps every line it had - the score, "while the game was alive",
         "Decided at move N", all three counts and the average error - only the
         donut and the spacing shrink. MISTAKES keeps its one-count-per-line
         form (#7188): a half-width column at 344 is still 130px, and
         "INACCURACIES" needs about 90 of them.
       - The graph is 64px. It is a trend line read for shape at this width,
         not a data table, and its mistake markers still read at 64.

       Nothing here applies to a mouse, at any width: 1440 is untouched. */
    .analysis-page.phone-today .analysis-summary-strip[b-aoehpxgdsv] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem;
    }

    .analysis-page.phone-today .analysis-summary-strip .eval-chart-card[b-aoehpxgdsv] {
        grid-column: 1 / -1;
    }

    .analysis-page.phone-today .analysis-summary-strip .summary-tile[b-aoehpxgdsv],
    .analysis-page.phone-today .analysis-summary-strip .eval-chart-card[b-aoehpxgdsv] {
        padding: 0.5rem 0.75rem;
    }

    .analysis-page.phone-today .analysis-summary-strip .stat-card h3[b-aoehpxgdsv],
    .analysis-page.phone-today .analysis-summary-strip .eval-chart-card h3[b-aoehpxgdsv] {
        margin-bottom: 0.3rem;
    }

    .analysis-page.phone-today .analysis-summary-strip .accuracy-card .accuracy-circle[b-aoehpxgdsv] {
        width: 52px;
        height: 52px;
        margin: 0 auto 0.25rem;
    }

    /* One line inside the ring. At this size the "%" otherwise wraps under the
       number and the pair overflows the top of the ring. Sized so the widest
       score, "100 %" (about 40px), still clears the stroke: the ring's inside
       is about 43px across at 52px. */
    .analysis-page.phone-today .analysis-summary-strip .accuracy-card .accuracy-value[b-aoehpxgdsv] {
        white-space: nowrap;
        line-height: 1;
    }

    .analysis-page.phone-today .analysis-summary-strip .accuracy-card .accuracy-number[b-aoehpxgdsv] {
        font-size: 0.95rem;
    }

    .analysis-page.phone-today .analysis-summary-strip .accuracy-card .accuracy-percent[b-aoehpxgdsv] {
        font-size: 0.6rem;
    }

    /* The ACCURACY heading sits under the donut, so it takes no bottom margin
       of its own; the scope caption under it already carries one. */
    .analysis-page.phone-today .analysis-summary-strip .accuracy-card h3[b-aoehpxgdsv] {
        margin-bottom: 0;
    }

    /* "while the game was alive" wraps to two lines in a half-width column;
       a tighter line box keeps the tile no taller than MISTAKES beside it. */
    .analysis-page.phone-today .analysis-summary-strip .accuracy-card .accuracy-scope[b-aoehpxgdsv],
    .analysis-page.phone-today .analysis-summary-strip .accuracy-card .accuracy-decided[b-aoehpxgdsv] {
        line-height: 1.25;
    }

    .analysis-page.phone-today .analysis-summary-strip .mistakes-grid[b-aoehpxgdsv] {
        gap: 0.2rem;
        margin-bottom: 0.3rem;
    }

    .analysis-page.phone-today .analysis-summary-strip .mistake-item[b-aoehpxgdsv] {
        padding: 0.15rem 0.5rem;
    }

    .analysis-page.phone-today .analysis-summary-strip .mistake-count[b-aoehpxgdsv] {
        font-size: 1.1rem;
        line-height: 1.1;
    }

    .analysis-page.phone-today .analysis-summary-strip .avg-cpl[b-aoehpxgdsv] {
        padding-top: 0.3rem;
        font-size: 0.8rem;
    }

    .analysis-page.phone-today .analysis-summary-strip .eval-chart[b-aoehpxgdsv] {
        min-height: 0;
        height: auto;
    }

    .analysis-page.phone-today .analysis-summary-strip .eval-chart-card .chart-container[b-aoehpxgdsv],
    .analysis-page.phone-today .analysis-summary-strip .eval-chart-card .eval-svg[b-aoehpxgdsv] {
        height: 4rem;
    }

    .analysis-page.phone-today .analysis-summary-strip .chart-move-labels[b-aoehpxgdsv] {
        padding-top: 0.15rem;
        font-size: 0.625rem;
        line-height: 1.2;
    }

    /* The header card stacks on a phone (meta line, then the actions), and the
       1rem between them is 8px the first screen needs more. */
    .analysis-page.phone-today .analysis-header[b-aoehpxgdsv] {
        gap: 0.5rem;
    }

    /* Engine depth labels: "Depth 24" is a statement about the SEARCH, not
       about the game, and it is the first thing a phone reader met. It is
       reference for someone comparing engine runs, and that is a desk task.

       #8287 - the prod canary still found "d25" on a coarse pointer: the live
       Stockfish row in the engine reads (StockfishBrowserPanel's compact
       .engine-stat) is a different component from EngineLinePanel's
       .elp-depth, and this rule only knew the second. The search-statistics
       family is hidden as a whole now, so the next engine panel added to the
       page does not need its own line here: the live rows' .engine-stat (SF's
       depth, Lc0's node count), the full panel's .sf-depth, and the deep-dive
       panel's .engine-stats row (depth / nodes / time). The evaluations and
       the best moves stay - those ARE about the game. */
    .analysis-page.phone-today[b-aoehpxgdsv]  .elp-depth,
    .analysis-page.phone-today[b-aoehpxgdsv]  .elp-source,
    .analysis-page.phone-today[b-aoehpxgdsv]  .el-depth,
    .analysis-page.phone-today[b-aoehpxgdsv]  .el-source,
    .analysis-page.phone-today[b-aoehpxgdsv]  .engine-stat,
    .analysis-page.phone-today[b-aoehpxgdsv]  .sf-depth,
    .analysis-page.phone-today[b-aoehpxgdsv]  .engine-stats {
        display: none;
    }

    /* #8955 review round 3 - with .el-depth hidden above, the lines' 2rem depth
       track stayed in the grid as an empty column: 28px plus a gap taken from the
       moves at 344px, which cost each line a fourth row. The track goes with the
       depth; .el-moves is pinned to the last track, so it takes the space.
       Review round 4: only the depth track goes. The eval keeps the component's
       own width (EngineLines.razor.css: 3.75rem, 3.25rem at 400px and below);
       this selector outranks the component's narrow rule, so that rule is
       repeated in the block below. */
    .analysis-page.phone-today[b-aoehpxgdsv]  .el-line {
        grid-template-columns: 3.75rem minmax(0, 1fr);
    }
}

@media (hover: none) and (pointer: coarse) and (max-width: 400px) {
    .analysis-page.phone-today[b-aoehpxgdsv]  .el-line {
        grid-template-columns: 3.25rem minmax(0, 1fr);
    }
}

/* #8287 review round - THE HEADER IS PART OF THE BUDGET. The first screen
   above was budgeted on a 183px header, where the meta line wrapped once onto
   a short structure chip ("Carlsbad"). Nothing held it there: the chip and the
   transposition trail (#6157) wrap freely. With a real catalog name ("Benko
   Declined Structure (returned pawn)") or a multi-phase trail, the header was
   249-338px at 344x882, and with a sentence band on the page the eval graph
   ended up to 126px below the fold.

   So on a phone the chip is ONE line. It shares the line the result sits on
   and takes what is left of that line (it gets a line of its own only when
   less than 7rem is left), and the name or the trail ends in an ellipsis
   instead of wrapping. Whatever the names, the chip adds at most one line to
   the header. Nothing is removed: every name is still in the markup, so a
   screen reader reads the whole trail, the tooltips are unchanged, and the
   Position tab still names the structure of the position on the board.

   Phones only: the header stacks at 768px and below, and that is where the
   first-screen budget lives. A coarse-pointer tablet keeps the wrapping trail,
   and a mouse at any width is untouched. */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) {
    /* The card's width, not its content's. The header stacks into a column
       here with align-items: flex-start, so .header-left is sized to fit its
       content, and it cannot go below its min-content width. A one-line
       chip's min-content is the WHOLE name or trail, so without this the meta
       line ran off the card (measured: the trail ended at x=1183 at 344)
       instead of ending in an ellipsis. Stretched, .header-left is exactly
       the card's width, and .game-info (min-width: 0) shrinks inside it. */
    .analysis-page.phone-today .header-left[b-aoehpxgdsv] {
        align-self: stretch;
        min-width: 0;
    }

    .analysis-page.phone-today .pawn-structure-chip[b-aoehpxgdsv] {
        flex: 1 1 7rem;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .analysis-page.phone-today .pawn-structure-chip .psb-icon[b-aoehpxgdsv] {
        flex: none;
    }

    /* Block, not inline-flex: text-overflow ellipsizes only the inline
       content of a block container, so the one-line trail flows as text. */
    .analysis-page.phone-today .pawn-structure-chip .psb-single[b-aoehpxgdsv],
    .analysis-page.phone-today .pawn-structure-chip .psb-trail[b-aoehpxgdsv] {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Inline text has no flex gap, so the arrows and "+N more" carry it. */
    .analysis-page.phone-today .pawn-structure-chip .trail-arrow[b-aoehpxgdsv] {
        margin: 0 0.375rem;
    }

    .analysis-page.phone-today .pawn-structure-chip .trail-more[b-aoehpxgdsv] {
        margin-left: 0.375rem;
    }
}

/* #8287 headroom - THE WORST CASE WAS 1px OVER THE FOLD. Every prod main run
   from 2026-10-07 measured it at 390x844: a long structure name (or a
   four-structure trail) plus the longest approved sentence put the eval graph
   card at 729-845, one pixel past the 844px fold. Nothing had regressed; the
   gate had simply never run against an analyzed game on prod before, and the
   budget above was spent to the last pixel.

   So the first screen gets real headroom, paid for out of spacing only: no
   text gets smaller, nothing is hidden, every control keeps its 44px target,
   and the strip keeps its two-tile shape. Phones on a coarse pointer only: a
   mouse at any width, 1440 included, is untouched. */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) {
    /* 12px under the app bar was more air than the card needs; 6px still
       separates them. */
    .analysis-page.phone-today[b-aoehpxgdsv] {
        padding-top: 0.375rem;
    }

    /* The header stacks into the meta line, then one or two rows of 44px
       actions. 6px between those rows, and between the meta line and the
       actions, still reads as a gap between targets. */
    .analysis-page.phone-today .analysis-header[b-aoehpxgdsv] {
        gap: 0.375rem;
    }

    .analysis-page.phone-today .header-right[b-aoehpxgdsv] {
        row-gap: 0.375rem;
    }

    /* The per-game sentence band (PerGameSentence, a child component, so
       ::deep): 8px padding and 4px between its lines instead of ~10 and ~6. */
    .analysis-page.phone-today[b-aoehpxgdsv]  .pergame-header {
        padding: 0.5rem 0.9rem;
        gap: 0.25rem;
    }

    .analysis-page.phone-today[b-aoehpxgdsv]  .pergame-header .pergame-meta {
        row-gap: 0.25rem;
    }

    /* "Train this" keeps its full 44px touch target; only the empty part of it
       below the text stops taking layout space, and reaches into the band's
       bottom padding instead. Nothing interactive sits there, so the target
       overlaps no other control. */
    .analysis-page.phone-today[b-aoehpxgdsv]  .pergame-header .pergame-train {
        margin-bottom: -0.5rem;
    }

    /* MISTAKES sets the strip row's height (ACCURACY beside it is shorter), so
       its three count rows and the average-error line sit a little closer.
       The counts and labels keep their sizes. */
    .analysis-page.phone-today .analysis-summary-strip .mistake-item[b-aoehpxgdsv] {
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }

    .analysis-page.phone-today .analysis-summary-strip .avg-cpl[b-aoehpxgdsv] {
        line-height: 1.25;
    }
}

/* ==========================================================================
   #8312 - THE DOOR INTO SELF REVIEW (phone-today only; the markup renders
   nothing with the flag off, so these rules match nothing there).

   A full-width row at the end of the evidence strip, whatever the strip's
   track count at this width: three tracks at 1440, two below 1100 and on a
   phone-today phone, one in the >=1500 stats column. The text gives way to
   the button, and wraps above it when the row is too narrow for both.
   ========================================================================== */
.analysis-summary-strip .self-review-door[b-aoehpxgdsv] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 10px;
}

.self-review-door-text[b-aoehpxgdsv] {
    flex: 1 1 14rem;
    margin: 0;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* The shared Button already floors itself on a coarse pointer. The door says
   so in its own stylesheet as well because it renders only with phone-today on
   (Disabled by default) and only for a game not yet self-reviewed, so the live
   touch-target ratchet cannot see it; ConditionalSurfaceTouchTargetTests pins
   this line. */
@media (hover: none) and (pointer: coarse) {
    .self-review-door[b-aoehpxgdsv]  .self-review-door-btn {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/GamePages/AddGame.razor.rz.scp.css */
.add-game-page[b-h2ucxx35d6] {
    max-width: 40rem;
    margin: 0 auto;
}

.game-form-card[b-h2ucxx35d6] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 1rem 1.25rem;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
}

.form-section[b-h2ucxx35d6] {
    margin-bottom: 1.5rem;
}

.section-label[b-h2ucxx35d6] {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem;
}

/* Mobile-first: single column; widen to two columns when there is room. */
.form-grid[b-h2ucxx35d6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 1rem;
}

@media (min-width: 480px) {
    .form-grid[b-h2ucxx35d6] {
        grid-template-columns: 1fr 1fr;
    }
}

[b-h2ucxx35d6] .form-label {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.25rem;
}

/* #7266: fill, radius, colour, font and the focus ring duplicated the global
   .form-input in app.css (#7258), and the border had DRIFTED to 15% accent
   against the global 20% - a fainter box than the design system draws. The
   global values win. What stays is the genuine delta: this is a dense
   many-field game-entry form, so the control is smaller than standard. */
[b-h2ucxx35d6] .form-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
}

/* The tighter padding above outranks the global select.form-input, so the
   result / colour <select>s get their caret room back explicitly. */
[b-h2ucxx35d6] select.form-input {
    padding-right: 2.25rem;
}

/* "Unrated" is an answer, not an empty box — give it a visible control. */
.unrated-check[b-h2ucxx35d6] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.unrated-check input[b-h2ucxx35d6] {
    accent-color: var(--ascend-accent);
    width: 0.85rem;
    height: 0.85rem;
    cursor: pointer;
}

.time-control-row[b-h2ucxx35d6] {
    display: flex;
    gap: 0.3rem;
}

/* #6946 - a `.tc-input { width: 4.375rem !important }` rule stood here and never
   applied: .tc-input rides on the inner <input> of a child <NumberInput>. It is
   NOT simply ::deep-ed, because sizing that inner input is the wrong target -
   NumberInput positions its +/- spinner buttons against .number-input-wrapper,
   which would stay at its flex width and leave the carets floating off the
   field's right edge. The width belongs on the wrapper. */
.time-control-row[b-h2ucxx35d6]  .number-input-wrapper {
    flex: 0 0 auto;
    width: 4.375rem;
}
.tc-type[b-h2ucxx35d6] { width: 3.125rem !important; }

.enter-moves-toggle[b-h2ucxx35d6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.enter-moves-toggle input[type="checkbox"][b-h2ucxx35d6] {
    accent-color: #31DDE3;
    width: 1rem;
    height: 1rem;
}

.validation-errors[b-h2ucxx35d6] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.error-msg[b-h2ucxx35d6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: #f87171;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

@media (min-width: 640px) {
    .game-form-card[b-h2ucxx35d6] { padding: 1.5rem 2rem; }
}

/* #8576 - "Enter a game" / "Import a PGN file" switch, shown only when the
   pgn-file-import flag is on for the member. Two equal halves that wrap to a
   stack below 360px so neither label truncates on a phone. */
.add-mode-switch[b-h2ucxx35d6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.add-mode-btn[b-h2ucxx35d6] {
    flex: 1 1 9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.85rem;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.add-mode-btn.active[b-h2ucxx35d6] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.12);
    color: #ffffff;
}

.add-mode-btn:focus-visible[b-h2ucxx35d6] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}
/* /Components/Pages/GamePages/LichessStudyImport.razor.rz.scp.css */
.study-import-page[b-h4wmlga3hv] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.step-header[b-h4wmlga3hv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.step-num[b-h4wmlga3hv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.25), rgba(184, 133, 54, 0.2));
    border: 1px solid rgba(49, 221, 227, 0.4);
    color: var(--ascend-accent);
    font-family: var(--ascend-font-primary);
    font-weight: 800;
    font-size: 0.95rem;
}

.step-label[b-h4wmlga3hv] {
    font-family: var(--ascend-font-primary);
    font-size: var(--fluid-base);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.url-row[b-h4wmlga3hv] {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    flex-wrap: wrap;
    min-width: 0;
}

.url-input[b-h4wmlga3hv] {
    flex: 1 1 100%;
    /* Mobile-first: no fixed floor so the input never overflows a 320px
       viewport. Re-introduce a comfortable typing width once there is room. */
    min-width: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    color: #fff;
    padding: 0.7rem 0.9rem;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .url-input[b-h4wmlga3hv] {
        flex: 1;
        min-width: 17.5rem;
        width: auto;
    }
}

.url-input:focus[b-h4wmlga3hv] {
    outline: none;
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.message[b-h4wmlga3hv] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.message.success[b-h4wmlga3hv] {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.message.error[b-h4wmlga3hv] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--ascend-text-light);
}

.default-color-row[b-h4wmlga3hv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.default-color-row label[b-h4wmlga3hv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
}

.default-color-row .hint[b-h4wmlga3hv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    flex-basis: 100%;
}

.summary-row[b-h4wmlga3hv] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid rgba(49, 221, 227, 0.15);
}

.chapter-list[b-h4wmlga3hv] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.chapter-row[b-h4wmlga3hv] {
    /* Mobile-first: a single stacked column so name/meta/select never
       crush together on a narrow phone. */
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

/* Wider screens: lay name | meta | color-select out side by side. */
@media (min-width: 768px) {
    .chapter-row[b-h4wmlga3hv] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 8.125rem;
        gap: 0.75rem;
    }
}

.chapter-row:hover[b-h4wmlga3hv] {
    border-color: rgba(49, 221, 227, 0.2);
}

.chapter-row.already-imported[b-h4wmlga3hv] {
    opacity: 0.55;
}

.chapter-name[b-h4wmlga3hv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge.imported[b-h4wmlga3hv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.chapter-meta[b-h4wmlga3hv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.chapter-meta .meta-sep[b-h4wmlga3hv] {
    color: rgba(255, 255, 255, 0.25);
}

.chapter-color[b-h4wmlga3hv] {
    width: 100%;
}

/* Layout (stack on phone, right-aligned row >=480px) comes from the shared
   .action-row primitive; this only adds the top spacing. */
.commit-row[b-h4wmlga3hv] {
    margin-top: 1.25rem;
}

/* "My Lichess studies" picker */
.my-studies-loading[b-h4wmlga3hv],
.my-studies-empty[b-h4wmlga3hv] {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.my-studies-loading[b-h4wmlga3hv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.my-studies-empty a[b-h4wmlga3hv] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

/* #8705 - the callout's "go to Studies" link sits inside a sentence in a <span>, which
   the app.css running-text underline does not reach. */
.import-mode-callout a[b-h4wmlga3hv] {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.my-studies-list[b-h4wmlga3hv] {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.my-study-row[b-h4wmlga3hv] {
    text-align: left;
    background: rgba(10, 22, 40, 0.55);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.92);
}

.my-study-row:hover:not(:disabled)[b-h4wmlga3hv] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.5);
    transform: translateY(-1px);
}

.my-study-row:disabled[b-h4wmlga3hv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.my-study-row.imported[b-h4wmlga3hv] {
    border-color: rgba(184, 133, 54, 0.35);
    background: rgba(20, 14, 5, 0.55);
}

.my-study-main[b-h4wmlga3hv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.my-study-name[b-h4wmlga3hv] {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    color: #ffffff;
    flex: 1;
}

.my-study-badge[b-h4wmlga3hv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.my-study-badge.imported[b-h4wmlga3hv] {
    background: rgba(184, 133, 54, 0.18);
    border-color: rgba(184, 133, 54, 0.5);
    color: #f4a83b;
}

.my-study-badge.private[b-h4wmlga3hv] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.55);
}

.my-study-meta[b-h4wmlga3hv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.my-study-meta .meta-sep[b-h4wmlga3hv] {
    color: rgba(255, 255, 255, 0.25);
}
/* /Components/Pages/GamePages/PgnFileImportPanel.razor.rz.scp.css */
/* #8576 - PGN file import panel on /games/add. Mobile first: one column, every
   control at least 44px tall, long names and reasons wrap instead of widening
   the page. */
.pgn-import[b-4d914w0hzs] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pgn-section[b-4d914w0hzs] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.pgn-section-label[b-4d914w0hzs] {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.pgn-hint[b-4d914w0hzs] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    overflow-wrap: anywhere;
}

.pgn-file-row[b-4d914w0hzs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* The native file input stays in the DOM (keyboard and screen readers reach
   it through the label) but is visually replaced by the label. */
[b-4d914w0hzs] .pgn-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pgn-file-picker[b-4d914w0hzs] {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0.6rem 0.85rem;
    border: 2px dashed rgba(49, 221, 227, 0.45);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.05);
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.pgn-file-picker:hover[b-4d914w0hzs] {
    background: rgba(49, 221, 227, 0.1);
}

.pgn-file-picker:focus-within[b-4d914w0hzs] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.pgn-file-picker i[b-4d914w0hzs] {
    font-size: 1.2rem;
    color: var(--ascend-accent);
}

.pgn-file-name[b-4d914w0hzs] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pgn-file-clear[b-4d914w0hzs] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}

.pgn-paste-label[b-4d914w0hzs] {
    margin-top: 0.25rem;
}

[b-4d914w0hzs] .pgn-paste {
    width: 100%;
    min-height: 9rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.4;
}

.pgn-name-picker[b-4d914w0hzs] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border: 0;
    margin: 0;
    padding: 0;
}

.pgn-name-option[b-4d914w0hzs] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.pgn-name-option.selected[b-4d914w0hzs] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.1);
}

.pgn-name-option input[b-4d914w0hzs] {
    accent-color: var(--ascend-accent);
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

.pgn-skipped-heading[b-4d914w0hzs] {
    margin-top: 0.5rem;
}

.pgn-skipped-list[b-4d914w0hzs] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pgn-skipped-item[b-4d914w0hzs] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.75rem;
    border-left: 3px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 8px 8px 0;
    min-width: 0;
}

.pgn-skipped-label[b-4d914w0hzs] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
}

.pgn-skipped-reason[b-4d914w0hzs] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    overflow-wrap: anywhere;
}

/* Name picker: a filter field above a list of every name in the file. */
.pgn-name-filter-label[b-4d914w0hzs] {
    margin-bottom: -0.35rem;
}

[b-4d914w0hzs] .pgn-name-filter {
    width: 100%;
    min-height: 2.75rem;
}

.pgn-name-picker[b-4d914w0hzs] {
    max-height: 22rem;
    overflow-y: auto;
}

.pgn-also-me[b-4d914w0hzs] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* The games the member did not play in collapse into one line. */
.pgn-not-yours[b-4d914w0hzs] {
    border-left: 3px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.02);
}

.pgn-not-yours-summary[b-4d914w0hzs] {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.pgn-not-yours-list[b-4d914w0hzs] {
    padding: 0 0.5rem 0.5rem;
}

/* The single-game details step: one column on a phone, two when there is room,
   the same rhythm as the manual entry form beside it. */
.pgn-details-grid[b-4d914w0hzs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem 1rem;
}

@media (min-width: 480px) {
    .pgn-details-grid[b-4d914w0hzs] {
        grid-template-columns: 1fr 1fr;
    }
}

.pgn-details-field[b-4d914w0hzs] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pgn-details-field[b-4d914w0hzs]  .form-input {
    min-height: 2.75rem;
}
/* /Components/Pages/Games.razor.rz.scp.css */
/* Dashboard Page Container - mobile-first: tight padding on phones,
   roomier from the tablet breakpoint up. */
.dashboard-page[b-uhp0yne2kw] {
    padding: 0.75rem;
}

@media (min-width: 768px) {
    .dashboard-page[b-uhp0yne2kw] {
        padding: 2rem;
    }
}

/* Dashboard Grid */
.dashboard-grid[b-uhp0yne2kw] {
    display: grid;
    gap: 1.5rem;
}

.empty-state-compact[b-uhp0yne2kw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.empty-state-compact[b-uhp0yne2kw]  i {
    color: rgba(49, 221, 227, 0.55);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.empty-state-compact span[b-uhp0yne2kw] {
    flex: 1;
    min-width: min(11.25rem, 100%);
}

.btn-link-inline[b-uhp0yne2kw] {
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.4);
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-link-inline:hover[b-uhp0yne2kw] {
    background: rgba(49, 221, 227, 0.22);
    border-color: rgba(49, 221, 227, 0.65);
}

/* Games Page Header */
.games-page-header[b-uhp0yne2kw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
}

.header-title h1[b-uhp0yne2kw] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.05em;
}

.header-title .subtitle[b-uhp0yne2kw] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
}

/* Import / Add-Game actions, relocated into the Recent Games card (#1113).
   #8837 - the layout is the shared .action-row (app.css): stacked at one width
   on a phone ("Import from Lichess Study" 264px sat over "Add Game" 147px at
   390 when this was a hand-rolled wrapping row), right-aligned row above 480px.
   Only the spacing under it is this page's. #8593 - one button now: the Lichess
   study import moved onto the /games/add chooser. */
.games-actions[b-uhp0yne2kw] {
    margin-bottom: 1.25rem;
}

.add-game-btn[b-uhp0yne2kw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    /* Solid, not a gradient: axe cannot measure text contrast over a gradient, and the
       frozen undecidable register (#7312) refuses a new entry. Same brand cyan. */
    background: var(--ascend-accent);
    border: none;
    border-radius: 50px;
    color: #042047;
    font-family: var(--ascend-font-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.add-game-btn:hover[b-uhp0yne2kw] {
    background: var(--ascend-accent-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15), 0 2px 4px -1px rgb(0 0 0 / 0.1);
}

.add-game-btn[b-uhp0yne2kw]  i {
    font-size: 16px;
}

/* Full Width Card */
[b-uhp0yne2kw] .full-width-card {
    grid-column: 1 / -1;
}

/* #7260 - THE GAMES CARD MUST NOT CLIP THE OPEN ANALYZE DROPDOWN.
   Card.razor.css sets overflow: hidden on .ascend-card so the card's ::before
   wash stays inside the 24px radius, and that clip also sliced the open
   dropdown off at the card's bottom edge: on the last row of the table the
   panel hangs about 100px past the card, so "Upgrade to Deep" vanished
   outright and the line above it was cut in half. That is the second and
   entirely independent way this surface produced the reported "the text on the
   dropdown is hidden" (the first is the Actions-cell rule further down).
   Neither is a z-index problem, which is why raising z-index - already at
   9999 - never helped either one.

   .ascend-card IS IN THE SELECTOR FOR SPECIFICITY, NOT FOR RESTYLING. The
   shared rule compiles to .ascend-card[b-card] and this one to
   [b-games] .full-width-card: both weigh (0,2,0), and the scoped-CSS bundle
   emits Components/Shared AFTER Components/Pages, so the tie went to the
   shared rule and a plain .full-width-card override was silently inert -
   verified in a browser before and after. Qualifying with the class the card
   already carries takes it to (0,3,0) and makes it win on merit rather than on
   file order. Only this page's card is affected; the shared component's own
   clipping is untouched. */
[b-uhp0yne2kw] .ascend-card.full-width-card {
    overflow: visible;
}

/* #7999 - ON A PHONE THE PRIMARY ACTION MUST NOT SIT BEHIND THE STATS CARD.
   Measured on dev at 390x844 with touch emulation: the first interactive control
   on this page, the "Add games" link, rendered at top=853px - NINE pixels past the
   844px fold - and at 344 it stayed at 853. What sat above it was the page header
   (92px plus a 48px bottom margin) and then the GAME STATS card at 443px with ZERO
   controls in it. So this was never nine pixels of slop to trim; it was 443px of
   read-only content ahead of the first thing a member can touch, which happened to
   land just over the line.

   Ordering the action card first brings the control to roughly 410px, comfortably
   inside the first viewport, and it is the right reading order anyway: the games
   and the way to add them are the point of this page, the stats are context for
   them. DESKTOP IS UNCHANGED - the grid keeps source order at 769px and above,
   where all of it is visible at once and stats-then-games reads correctly.

   .ascend-card is in the selector for SPECIFICITY, for the reason recorded above:
   a plain .full-width-card override ties with the shared .ascend-card[b-card] rule
   and loses on file order. */
@media (max-width: 768px) {
    .dashboard-grid[b-uhp0yne2kw] {
        display: grid;
    }

    [b-uhp0yne2kw] .ascend-card.full-width-card {
        order: -1;
    }
}

/* The wash keeps its rounded corners now that the card no longer clips it. */
[b-uhp0yne2kw] .ascend-card.full-width-card::before {
    border-radius: inherit;
}

/* #8492 - AN OPEN ANALYZE PANEL PAINTS ABOVE THE SHELL FOOTER.
   With the clip gone (above), the panel on the LAST card of a phone page hangs
   past the card, over the pager and into the shell footer, and the footer's
   Terms / Privacy / Accessibility links were painted ON TOP of it: "Thorough
   (~8-15s/move)" under "Accessibility", "Deep" beside "Terms". Seen in all
   three engines at 390x844; webkit and firefox failed the E2E on it, and
   chromium passed only because the center of each line of text happened to
   fall between two links.

   The panel's z-index: 9999 cannot win this, because it never leaves the card.
   .ascend-card carries backdrop-filter (Card.razor.css), which makes the card a
   stacking context, so everything inside it, the panel included, is painted
   as ONE layer at the card's own level: z-index auto, in document order. Every
   <a> in the app is position: relative (app.css, "Professional Links"), so the
   footer links are painted at that same level, LATER in the document, which is
   over the whole card. The footer's own background is not positioned, so it
   stays underneath and only its links come through.

   So the card that holds an OPEN panel takes a z-index above that level, and
   only while one is open: a closed card keeps its normal place in the page.
   What legitimately sits above the page (the fixed shell header and drawer at
   --z-sticky and up, the feedback button, dialogs) is far above 1. Raising the
   panel's own z-index again would change nothing, as the #7260 note above
   already found. */
[b-uhp0yne2kw] .ascend-card.full-width-card:has(.analyze-dropdown) {
    z-index: 1;
}

/* #6756 - the first-run Self Review hint spans the grid like a banner. */
[b-uhp0yne2kw] .first-run-hint {
    grid-column: 1 / -1;
}

/* Desktop table wrapper.

   #7734 — THIS IS A HORIZONTAL SCROLL CONTAINER. Read before making it
   `overflow: visible` again.

   The grid has a hard content floor. Measured on dev at 834/1024/1280 with
   the commentary column present, every column is already at its own
   min-content and none of them move: game 102, coach 109, result 114,
   rating 113, score 108, analysis 129, actions 251 — 926px of table. The
   content column it has to live in is 414px at an 834px viewport, 604px at
   1024 and 804px at 1280. `width: 100%` on a table is a REQUEST; a table
   never renders narrower than its min-content, so the table laid out at
   925px and its right edge landed at 1255px (834 and 1024) and 1303px
   (1280). 1440px was clean because 964px of column finally covered the
   floor, which is why this reads as a tablet-and-small-laptop defect and
   not as "the grid is too wide".

   Nothing was clipped in a recoverable way: app.css clamps html/body with
   `overflow-x: hidden` (#7296), so the 231-479px past the edge were hidden,
   unscrollable AND unzoomable. Analysis and Actions — View, the upgrade
   menu, open-on-board, and DELETE — were simply not reachable on a tablet.

   Making it scroll, rather than dropping columns or stacking to cards, is
   the option that keeps every action reachable without inventing a second
   /games information design for a 600px-wide band: QuickGrid stays the
   house table component (CLAUDE.md) and is made responsive around itself.
   The E2E overflow probe already understands this — content inside an
   opt-in horizontal scroller is reachable by design and is not counted as
   overflow (MobileResponsivenessTests, same rule the master-games grid
   relies on).

   THE SCROLL HINT MAY NOT BE A BACKGROUND IMAGE. Read this before reaching
   for a gradient again — it was one, and it broke the axe gate on develop
   build 10882.

   The first version of this affordance used the two-layer local/scroll
   background trick: a `scroll`-attached cyan gradient at the right edge and
   a `local`-attached cover that traveled with the content and parked over
   it at the end of the scroll. Honest, and completely undecidable. The
   wrapper is an ANCESTOR of every cell, so axe-core walks the row text's
   background stack straight into it, finds `background-image` that is not
   `none`, and returns 'incomplete' — neither a pass nor a failure — for the
   text painted above it. 146 nodes across 10 element kinds on /games went
   undecidable the moment it landed (.game-cell-opponent, .game-cell-date,
   .game-cell-opening, .tag-add, .rating-cell, .score-value,
   .score-accuracy, .tier-label, .col-title-text, .game-cell-structure), and
   the frozen register (#7312) correctly refused to absorb them.

   The rule this leaves behind is mechanical, not aesthetic: axe reads
   `background-image` and `background-color`; it does NOT read `box-shadow`.
   So the affordance is a SHADOW, and every cell's effective background
   stays the flat card underneath it, which axe can and does resolve.
   Position and size are irrelevant to that check — ANY background-image on
   this element makes every cell inside it undecidable, including one
   painted in a 2rem strip nobody's text sits on. Do not try to place a
   gradient "out of the way"; there is no out of the way.

   IT STILL TELLS THE TRUTH, which was the point of the original trick. The
   edge shading is driven by a scroll-driven animation over this element's
   own inline scroll axis: full at scrollLeft 0, gone at the end. A scroll
   timeline on a box with nothing to scroll is INACTIVE, so at 1440 — where
   the table already fits — the animation does not apply and the base style
   (no shadow) renders. No standing lie about the one width that is fine,
   and no JavaScript. Where scroll timelines are unsupported the base style
   renders too, so the failure mode is "no edge shading", never a false one.

   The styled scrollbar is the second half of the affordance and carries it
   on its own if the animation never runs: `scrollbar-color` gives the rail
   a visible brand thumb whose length and position are themselves the "there
   is more to the right" signal. Below 769px this wrapper is display:none
   and the card list renders instead, so a hidden overlay scrollbar on a
   phone is not a case here. */
.games-table-wrapper[b-uhp0yne2kw] {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(49, 221, 227, 0.55) rgba(255, 255, 255, 0.06);
    /* ascend-scroll-edge and the reasoning behind it live in app.css, next to
       .responsive-table - it is the house cue, shared with the played-openings
       grid on /opening-hub. Longhands on purpose: `auto` is ambiguous with
       animation-name inside the `animation` shorthand, and the shorthand also
       resets animation-timeline. */
    animation-name: ascend-scroll-edge;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(self inline);
}

/* #7260 / #7734 — THE ANALYZE MENU MUST NOT BE CLIPPED BY THE SCROLLER.

   `overflow-x: auto` computes `overflow-y` to `auto` as well (CSS Overflow 3
   — the two axes cannot disagree once one of them is non-visible), so the
   wrapper became a clip boundary for the absolutely-positioned
   .analyze-dropdown that `td.col-actions { overflow: visible }` exists to
   let escape. On the last row of the grid that menu hangs below the table
   and would have been sliced off at the wrapper's edge — the exact symptom
   a customer reported as "the text on the dropdown is hidden" (#7260), re-
   created by the fix for a different bug.

   THE FIX IS NOT HERE ANY MORE, AND THIS IS THE THING TO READ BEFORE PUTTING
   IT BACK. Between build 10882 and 10885 this wrapper carried
   `:has(.analyze-dropdown) { padding-bottom: 14rem; margin-bottom: -14rem }`
   to RESERVE a strip for the open menu. That is arithmetic, and the
   arithmetic never closed. Measured on the last row at 1440x900 and 1366x768
   in both engines: the panel needs 230px below the table in chromium and
   239px in webkit, against 224px reserved — SHORT IN BOTH. Chromium passed CI
   on those six pixels, because the center of the last line of text still
   landed inside the clip; webkit failed on its fifteen, because webkit lays
   this panel out 265px tall where chromium makes it 256px. A rem reserve
   cannot track a box whose height the text engine decides, so a bigger number
   only moves the coin-flip. The strip also gave the wrapper a vertical scroll
   range and a second scrollbar for as long as a menu was open.

   The panel LEAVES the clip instead. Games.razor.js promotes it into the TOP
   LAYER while it is open — see .analyze-dropdown.is-floating below, and the
   long note at the head of that module for why `position: fixed` on its own
   is not enough here. Flipping the wrapper back to `overflow: visible` while
   the menu is open is the other rejected move: it resets scrollLeft to 0 at
   the moment of the click, so the button the user just scrolled across to
   reach jumps out of view and takes the open menu with it. */

/* Mobile card list — hidden on desktop */
/* Filter bar */
.filter-bar[b-uhp0yne2kw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
    justify-content: space-between;
}

.filter-group[b-uhp0yne2kw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.filter-select[b-uhp0yne2kw],
.filter-input[b-uhp0yne2kw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    /* Height + padding match .page-btn and ::deep .game-link so every
       utility control on this page (filter, pagination, action) shares the
       same 2rem baseline. Joe-flagged 2026-04-29: "btn sizes all over". */
    min-height: 2rem;
    padding: 0 0.6rem;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.filter-select:focus[b-uhp0yne2kw],
.filter-input:focus[b-uhp0yne2kw] {
    border-color: rgba(49, 221, 227, 0.5);
}

.filter-select option[b-uhp0yne2kw] {
    background: #0f172a;
    color: #ffffff;
}

.filter-input[b-uhp0yne2kw] {
    width: 8.75rem;
}

/* Pagination */
.pagination-bar[b-uhp0yne2kw] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
}

.page-btn[b-uhp0yne2kw] {
    /* Same 2rem baseline as .filter-select and ::deep .game-link so the
       pagination row visually aligns with filter row and action column. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    min-width: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    padding: 0 0.75rem;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled)[b-uhp0yne2kw] {
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.page-btn:disabled[b-uhp0yne2kw] {
    opacity: 0.3;
    cursor: default;
}

.page-info[b-uhp0yne2kw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.games-card-list[b-uhp0yne2kw] {
    display: none;
}

.game-card[b-uhp0yne2kw] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.875rem;
    margin-bottom: 0.5rem;
    transition: background 0.15s ease;
}

.game-card.needs-deep[b-uhp0yne2kw] {
    border-color: rgba(184, 133, 54, 0.3);
}

.game-card:active[b-uhp0yne2kw] {
    background: rgba(49, 221, 227, 0.05);
}

.game-card-top[b-uhp0yne2kw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.game-card-color[b-uhp0yne2kw] {
    flex-shrink: 0;
}

.game-card-opponent[b-uhp0yne2kw] {
    flex: 1;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 600;
}

.game-card-details[b-uhp0yne2kw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.game-card-meta[b-uhp0yne2kw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.game-card-badge[b-uhp0yne2kw] {
    display: inline-flex;
    align-items: center;
}

.game-card-badge.analyzed[b-uhp0yne2kw] {
    color: #10b981;
    font-size: 0.8rem;
}

/* Self-review completed badge — green check + "Reviewed" pill. The earlier
 * icon-only cyan version was too subtle; users couldn't scan and tell
 * which games had been reviewed. Green here = "complete," matching the
 * mental model of done-work and distinguishing it from the cyan
 * tier/enrichment badges. */
.game-card-badge.self-reviewed[b-uhp0yne2kw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 999px;
    color: #10b981;
    font-size: 0.65rem;
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.game-card-badge.self-reviewed[b-uhp0yne2kw]  i {
    font-size: 0.85rem;
}

/* #6210 — neutral "in progress" resume marker. Deliberately the brand cyan, NOT the
   green "reviewed" achievement colour: it's a resume affordance, not a reward. */
.game-card-badge.walkthrough-in-progress[b-uhp0yne2kw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 999px;
    color: #31DDE3;
    font-size: 0.65rem;
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.game-card-badge.walkthrough-in-progress[b-uhp0yne2kw]  i {
    font-size: 0.85rem;
}

.self-reviewed-label[b-uhp0yne2kw] {
    /* Hide on very narrow cards but keep the icon — saves horizontal
     * space when the card already has tier bars + brain badges. */
    display: inline;
}

@media (max-width: 480px) {
    .self-reviewed-label[b-uhp0yne2kw] {
        display: none;
    }

    /* On phones the filter bar wraps; let each control take the full row so
       the selects/text input are comfortable tap targets instead of a
       cramped 140px box wedged against the edge. (Mobile sweep 2026-06.) */
    .filter-group[b-uhp0yne2kw] {
        width: 100%;
    }

    .filter-select[b-uhp0yne2kw],
    .filter-input[b-uhp0yne2kw] {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    /* Viewport containment for the analyze dropdown is owned by the
       max-width: 768px block (#6717) - position AND width together, so the two
       halves cannot drift apart. Nothing to add here. */
}

.game-card-opening[b-uhp0yne2kw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-card-structure[b-uhp0yne2kw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    /* #7747 - was rgba(49, 221, 227, 0.6), measured 4.46:1. The accent token at
       full strength is the #7232 repaint for every dimmed-cyan label. */
    color: var(--ascend-accent);
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-card-insight[b-uhp0yne2kw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    /* #9401 - axe 4.42:1 at 0.45 white on the card at 390 and 344. */
    color: var(--ascend-text-secondary);
    font-style: italic;
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #8012 - the per-game Mirror sentence on the card. It wraps: a sentence cut
   to one line with an ellipsis would drop the count, which is the point. */
.game-card-pergame[b-uhp0yne2kw] {
    margin-bottom: 0.5rem;
    white-space: normal;
}

/* Four actions (Analysis / Upgrade / Open book / Delete) in one unbreakable row
   overflowed the card on a phone - the owner's screenshot showed "Open book" and
   "Delete" sliced to "pen b" and "D". Wrapping fixed that; min-width:0 stops a long
   button label from forcing the card wider than the viewport.

   #8837 - but a WRAPPING ROW sizes each action to its own label, so the one that
   wrapped sat alone under the others at a different width ("Analysis" 90px over
   "Delete" 79px on every card at 390). Equal grid tracks keep the wrap and give
   every action the same width: as many 7.5rem-or-wider columns as the card holds
   (two at 390, one at 344, more on a tablet), each action filling its track. The
   card list only renders below 769px; the desktop table has its own action strip. */
.game-card-actions[b-uhp0yne2kw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
    align-items: stretch;
    gap: 0.5rem;
    min-width: 0;
}

.game-card-actions > *[b-uhp0yne2kw] {
    min-width: 0;
}

.game-card-actions[b-uhp0yne2kw]  .game-link {
    width: 100%;
}

/* #8837 review - the "Analysis in progress" / "Analysis unavailable" status is
   not an action, and it is nowrap: squeezed into a button-width track at 390 it
   ran 10px past its 122px track onto "Open board". It takes its own full row
   above the actions instead, and may wrap there on the narrowest card. */
.game-card-actions[b-uhp0yne2kw]  .analysis-pending-status {
    grid-column: 1 / -1;
    min-width: 0;
    white-space: normal;
}

/* QuickGrid Styling — content-flex, no horizontal scroll.
   QuickGrid applies Class="games-grid" to the <table> ELEMENT itself (targeting BOTH
   the element and any descendant table covers QuickGrid's internal markup). Rather than
   hardcoded percentage tracks (which squeezed the Actions buttons into a fixed slice
   until they overflowed), we use table-layout:auto and let each column size to ITS
   content: the compact columns take only what they need, and the Game column (the only
   long free-text column) is greedy + truncated so it absorbs the slack without blowing
   the table past the viewport. */
[b-uhp0yne2kw] .games-grid,
[b-uhp0yne2kw] .games-grid table {
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

[b-uhp0yne2kw] .games-grid {
    background: transparent;
    border: none;
}

[b-uhp0yne2kw] .games-grid thead {
    background: rgba(49, 221, 227, 0.1);
    border-bottom: 2px solid rgba(49, 221, 227, 0.3);
}

[b-uhp0yne2kw] .games-grid th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #31DDE3;
    border-bottom: 2px solid rgba(49, 221, 227, 0.3);
    cursor: default;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Content-flex columns - no hardcoded tracks. The Game column is greedy and absorbs
   leftover space; width:100% + max-width:0 lets its inner spans truncate with an
   ellipsis (they already carry min-width:0 + text-overflow) instead of pushing the
   table wider. The compact columns shrink to their own content (width:1% + nowrap =
   "as narrow as the content allows"), so Actions is exactly as wide as its buttons
   and can never overflow. Analysis is left auto and bounded by its pills' wrap
   ceiling (.analysis-cell max-width) rather than a fixed column width.

   #7276 - these were nth-child rules and they addressed the WRONG COLUMN for any
   user who has the commentary flag, because the Coach column renders conditionally
   and shifts every column behind it by one. That is not hypothetical: the same
   mechanism, one rule further down, clipped the analyze dropdown for a real
   customer (#7260). Every column now carries its own class from Games.razor, so a
   column added or removed can no longer silently retarget a rule. */
[b-uhp0yne2kw] .games-grid td.col-game {
    width: 100%;
    max-width: 0;
}

/* #8562 - THE GAME COLUMN'S READABLE FLOOR HOLDS AT EVERY TABLE WIDTH.

   `width: 100%; max-width: 0` makes the Game column absorb slack, and it
   collapses to nothing the moment there is no slack to absorb. #7734 gave it a
   12rem floor, but only between 769 and 1399px, on the theory that above 1400
   the grid always fits. It does not: a 1920 screen at 125% scaling is 1536 CSS
   px, and with the sidebar open the other columns filled the row, the Game
   column collapsed, and a member's tag chips were cut off by the cell edge.
   The floor is therefore unconditional. min-width beats max-width in the
   cascade, and when the floor costs more room than the row has, the
   .games-table-wrapper scroller takes it, which is the same trade #7734 made
   for the narrower band. Below 769px the table is hidden and the cards render,
   so the floor never applies there. */
[b-uhp0yne2kw] .games-grid th.col-game,
[b-uhp0yne2kw] .games-grid td.col-game {
    min-width: 12rem;
}

[b-uhp0yne2kw] .games-grid th.col-result,
[b-uhp0yne2kw] .games-grid td.col-result,
[b-uhp0yne2kw] .games-grid th.col-rating,
[b-uhp0yne2kw] .games-grid td.col-rating,
[b-uhp0yne2kw] .games-grid th.col-score,
[b-uhp0yne2kw] .games-grid td.col-score,
[b-uhp0yne2kw] .games-grid th.col-actions,
[b-uhp0yne2kw] .games-grid td.col-actions {
    width: 1%;
    white-space: nowrap;
}

[b-uhp0yne2kw] .games-grid .col-title {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: default;
}

[b-uhp0yne2kw] .games-grid .col-title-text {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #31DDE3;
}

[b-uhp0yne2kw] .games-grid tbody tr {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

[b-uhp0yne2kw] .games-grid tbody tr:hover {
    background: rgba(49, 221, 227, 0.05);
}

[b-uhp0yne2kw] .games-grid td {
    padding: 0.625rem 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #7260 / #7276 - THE ACTIONS CELL IS SELECTED BY WHAT IT IS, NEVER BY INDEX.
   The Actions cell hosts the absolutely-positioned analyze dropdown, and the
   generic td overflow:hidden (the ellipsis for TEXT columns) clips it at the
   cell edge. Buttons never need truncation, so this one cell must overflow.

   This rule used to read td:nth-child(6), which was correct only for the
   six-column grid. The Coach column (Games.razor) renders behind the
   commentary flag, and for any user who HAS that flag the Actions cell is the
   seventh child - so the rule silently retargeted the Analysis column, the
   Actions cell fell back to the generic overflow:hidden, and the open dropdown
   was clipped to a ~20px sliver of empty panel below the button. That is the
   defect a customer reported as "the text on the dropdown is hidden", and it
   is why it never reproduced on an account without the flag. A positional
   selector cannot survive a conditional column; identity can.

   Keyed on the column class rather than on :has(.action-buttons) so it matches
   the five sibling column rules, and because GamesColumnIdentityTests pins
   col-actions - the class cannot silently disappear the way an index could. */
[b-uhp0yne2kw] .games-grid td.col-actions {
    overflow: visible;
}

/* #7734 — in the band where the grid has to scroll (769px up to the ~1400px
   where it fits outright), buy back horizontal room by halving the cell
   gutters. Every one of the seven columns is at its min-content there, so
   0.5rem off each side of each cell is ~112px less table to scroll past —
   about an eighth of the grid — for a gutter change nobody reads as a
   redesign. Above 1400 the roomier desktop gutters are kept: there is no
   scroll to shorten.

   Placed AFTER the th/td rules above on purpose: those set `padding` as a
   SHORTHAND, which resets padding-left/right, and a media query carries no
   extra specificity. Source order is the whole of what makes this win. */
@media (min-width: 769px) and (max-width: 1399px) {
    [b-uhp0yne2kw] .games-grid th {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    [b-uhp0yne2kw] .games-grid td {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* #7734 gave the Game column a 12rem floor here, inside the scroller
       band only. #8562 moved that floor to the base rules above so it holds
       at every table width; see the note there. */
}

/* Game cell (merged color + opponent + date) */
[b-uhp0yne2kw] .game-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

[b-uhp0yne2kw] .game-cell-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[b-uhp0yne2kw] .game-cell-opponent {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    color: #ffffff;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-uhp0yne2kw] .game-cell-date {
    font-size: 0.7rem;
    /* #7543 - was rgba(255,255,255,0.4): 3.77:1 measured by axe once the grid's
       card became measurable. */
    color: var(--ascend-text-muted);
}

[b-uhp0yne2kw] .game-cell-opening {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

[b-uhp0yne2kw] .game-cell-structure {
    font-size: 0.65rem;
    /* #7543 - was rgba(49,221,227,0.55): 4.02:1 measured by axe. */
    color: var(--ascend-accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #8012 - the per-game Mirror sentence in the Game column. */
[b-uhp0yne2kw] .game-cell-pergame {
    margin-top: 0.35rem;
    max-width: 36rem;
    white-space: normal;
}

/* Rating cell */
[b-uhp0yne2kw] .rating-cell {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

/* Score cell */
[b-uhp0yne2kw] .score-cell {
    display: flex;
    flex-direction: column;
}

[b-uhp0yne2kw] .score-value {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    color: #31DDE3;
}

[b-uhp0yne2kw] .score-accuracy {
    font-size: 0.7rem;
    /* #7543 - was rgba(255,255,255,0.45): 4.45:1 measured by axe. */
    color: var(--ascend-text-muted);
}

[b-uhp0yne2kw] .score-cell-empty {
    color: rgba(255, 255, 255, 0.3);
}

[b-uhp0yne2kw] .score-cell.needs-deep {
    position: relative;
}

[b-uhp0yne2kw] .deep-flag {
    color: #B88536;
    font-size: 0.65rem;
    margin-left: 0.25rem;
}

[b-uhp0yne2kw] .deep-flag i {
    font-size: 10px;
}

/* Analysis cell (tier + AI badge) */
[b-uhp0yne2kw] .analysis-cell {
    display: flex;
    align-items: center;
    /* WRAP the badges (tier + enriched + "Reviewed" + "In progress" pills). The
       max-width is a soft ceiling the pills wrap WITHIN (they pair up 2-across and
       spill to a second row only when needed) — it sizes this column without a fixed
       track, so the greedy Game column absorbs whatever the pills don't use. */
    flex-wrap: wrap;
    gap: 0.375rem;
    max-width: 13rem;
}

/* Result Badge */
[b-uhp0yne2kw] .result-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[b-uhp0yne2kw] .result-badge.result-win {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.3));
    color: var(--ascend-text-light);
    border: 1px solid rgba(16, 185, 129, 0.4);
}

[b-uhp0yne2kw] .result-badge.result-loss {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.3));
    color: var(--ascend-text-light);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

[b-uhp0yne2kw] .result-badge.result-draw {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2), rgba(156, 163, 175, 0.3));
    color: var(--ascend-text-light);
    border: 1px solid rgba(156, 163, 175, 0.4);
}

[b-uhp0yne2kw] .result-badge.result-abandoned {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.3));
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

/* Game Link — utility-control baseline. min-height 2rem matches
   .filter-select / .page-btn / .action-buttons so every interactive
   control on this page shares one height (Joe-flagged 2026-04-29:
   inconsistent button sizes across the games list). */
[b-uhp0yne2kw] .game-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 2rem;
    padding: 0 0.75rem;
    background: rgba(49, 221, 227, 0.1);
    color: #31DDE3;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    box-sizing: border-box;
    transition: all 0.2s ease;
    white-space: nowrap;
}

[b-uhp0yne2kw] .game-link:hover {
    background: rgba(49, 221, 227, 0.2);
    border-color: #31DDE3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.2);
}

[b-uhp0yne2kw] .game-link i {
    font-size: 12px;
}

/* Delete action — muted danger that only reads as destructive on hover so
   it never competes with the primary Analysis/Open actions. (#5870) */
[b-uhp0yne2kw] .game-link.delete-link {
    background: rgba(239, 68, 68, 0.08);
    color: rgba(248, 113, 113, 0.85);
    border-color: rgba(239, 68, 68, 0.25);
}

[b-uhp0yne2kw] .game-link.delete-link:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: #ef4444;
    color: #fca5a5;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

/* Non-sortable columns */
[b-uhp0yne2kw] .games-grid th:not([aria-sort]) {
    cursor: default;
}

[b-uhp0yne2kw] .games-grid th:not([aria-sort]) .col-title {
    cursor: default;
}

[b-uhp0yne2kw] .games-grid .col-header-content {
    cursor: default;
}

/* Analysis Tier Indicator */
[b-uhp0yne2kw] .analysis-tier {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

[b-uhp0yne2kw] .analysis-tier.tier-none {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
}

[b-uhp0yne2kw] .analysis-tier.tier-quick {
    color: #31DDE3;
}

[b-uhp0yne2kw] .analysis-tier.tier-normal {
    color: #31DDE3;
}

[b-uhp0yne2kw] .analysis-tier.tier-deep {
    color: #B88536;
}

[b-uhp0yne2kw] .tier-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

[b-uhp0yne2kw] .tier-bar {
    display: inline-block;
    width: 4px;
    border-radius: 1px;
}

[b-uhp0yne2kw] .tier-quick .tier-bar {
    height: 6px;
    background: #31DDE3;
}

[b-uhp0yne2kw] .tier-normal .tier-bar:nth-child(1) {
    height: 6px;
    background: #31DDE3;
}

[b-uhp0yne2kw] .tier-normal .tier-bar:nth-child(2) {
    height: 10px;
    background: #31DDE3;
}

[b-uhp0yne2kw] .tier-deep .tier-bar:nth-child(1) {
    height: 6px;
    background: #B88536;
}

[b-uhp0yne2kw] .tier-deep .tier-bar:nth-child(2) {
    height: 10px;
    background: #B88536;
}

[b-uhp0yne2kw] .tier-deep .tier-bar:nth-child(3) {
    height: 14px;
    background: #B88536;
}

[b-uhp0yne2kw] .tier-label {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

/* Enrichment Badge */
[b-uhp0yne2kw] .enrichment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

[b-uhp0yne2kw] .enrichment-badge.enriched {
    color: #a855f7;
}

[b-uhp0yne2kw] .enrichment-badge.pending {
    color: rgba(255, 255, 255, 0.3);
}

/* Self-review badge in the analysis cell — pill (icon + text) so the user
   can read "Reviewed" at a glance while scanning the table. Width auto so
   the pill grows around its label, overriding the round 24x24 base. */
[b-uhp0yne2kw] .enrichment-badge.self-reviewed-cell {
    width: auto;
    height: auto;
    padding: 0.15rem 0.45rem;
    gap: 0.25rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

[b-uhp0yne2kw] .enrichment-badge.self-reviewed-cell i {
    font-size: 0.75rem;
}

/* #6210 — neutral "in progress" resume marker (grid view). Brand cyan, not green. */
[b-uhp0yne2kw] .enrichment-badge.walkthrough-in-progress-cell {
    width: auto;
    height: auto;
    padding: 0.15rem 0.45rem;
    gap: 0.25rem;
    border-radius: 999px;
    background: rgba(49, 221, 227, 0.12);
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(49, 221, 227, 0.4);
}

[b-uhp0yne2kw] .enrichment-badge.walkthrough-in-progress-cell i {
    font-size: 0.75rem;
}

@media (max-width: 640px) {
    [b-uhp0yne2kw] .self-reviewed-cell-label {
        display: none;
    }
}

/* Action Buttons Container */
[b-uhp0yne2kw] .action-buttons {
    display: flex;
    gap: 0.375rem;
    align-items: stretch;
}

/* Force every action-button child to the same height regardless of whether
   it carries text + icon (View) or icon only (lichess-link). Without this,
   the icon-only links render with a smaller content line-box than the
   text-bearing buttons, leaving the lichess-link visibly taller (square)
   relative to the others. align-items:stretch on the container plus a fixed
   min-height makes them all the same box. 2rem matches .filter-select and
   .page-btn so all utility controls on this page share one baseline. */
[b-uhp0yne2kw] .action-buttons .game-link {
    min-height: 2rem;
    line-height: 1;
    box-sizing: border-box;
}

/* #8320 - A TABLE ROW THAT CARRIES THE SELF REVIEW DOOR TAKES TWO ROWS OF
   ACTIONS, so the door can never widen the games table.

   The 2.0.4 dev walk measured the door (#8312) as one more labeled action in a
   single nowrap row: .games-table-wrapper scrolled sideways at 1440 (scrollWidth
   1034 against clientWidth 954), and on a row that also had the Upgrade dropdown
   "Open board" and Delete sat past the wrapper's edge until the member scrolled.
   With phone-today off it was 954 = 954.

   Chosen over the alternatives, and why:
   - An overflow menu would bury Open board and Delete behind a click on EVERY
     door row, and the Upgrade menu already has its own top-layer machinery
     (Games.razor.js); a second menu beside it is a second popover to keep right.
   - An icon-only door narrows the row by about 70px against an overflow of 80px
     on one account and 18px on another: arithmetic that only holds for the
     accounts it was measured on.
   - Tightening the other columns takes room from cells that are already at
     their content width (width: 1% + nowrap, above).
   The two-row grid holds by STRUCTURE instead. Row one is the two ways into the
   game - View (the analysis) and Self Review; row two is the utilities. The
   cell is as wide as its wider row, View + Self Review. Measured in Chromium
   (#8320 walk, padding included): the two-row cell is 209.8px, the one-row
   cell every row WITHOUT the door already has (View + Upgrade + Open board +
   Delete) is 248.3px, and the single-row strip with the door was 359.8px. So
   whenever the table fits without the door, a skipper's table fits too.

   Rows WITHOUT the door never get this class (Games.razor), so their markup and
   layout are exactly what they were, and with phone-today off nothing here
   matches anything. max-content tracks, never fr: an fr track would stretch the
   cell to its column and undo the point. */
[b-uhp0yne2kw] .action-buttons.with-self-review-door {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    align-items: stretch;
    justify-content: start;
}

[b-uhp0yne2kw] .action-buttons.with-self-review-door > .analysis-link {
    grid-row: 1;
    grid-column: 1;
}

[b-uhp0yne2kw] .action-buttons.with-self-review-door > .self-review-link {
    grid-row: 1;
    grid-column: 2 / span 2;
}

/* Analysis Link Button.
   develop run 11076 - a FLAT tint, not the 0.15 -> 0.25 gradient it had. axe cannot
   resolve the background under text painted on a gradient, so every Analysis button
   was an undecidable contrast node rather than a pass or a fail. With one page of rows
   axe named it `.analysis-link.game-link` (registered); with the CI account's 50-row
   page it names it `.analysis-link`, an unregistered kind, and the gate refused it.
   The flat tint is the gradient's midpoint, so the button looks the same, and axe now
   judges its contrast instead of shrugging. */
[b-uhp0yne2kw] .analysis-link {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

/* #9457 - #10b981 on the hover tint read 4.22:1 (axe, on #0e4547); the lighter
   emerald keeps the hue and clears 4.5:1 while hovered. */
[b-uhp0yne2kw] .analysis-link:hover {
    background: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
    border-color: #10b981 !important;
}

/* #9497 - a hovered ROW tints the surface under the link too: with the pointer on the
   row but off the link, axe read #10b981 on #0e4547 = 4.22:1 on every row. The link
   takes the same lighter emerald whenever its row is hovered. Text color only, so the
   link's own :hover tint and border still mark which control is under the pointer;
   !important because the resting .analysis-link color above carries it. */
[b-uhp0yne2kw] .games-grid tbody tr:hover .analysis-link {
    color: #34d399 !important;
}

/* Analyze Button */
[b-uhp0yne2kw] .analyze-btn {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.15), rgba(184, 133, 54, 0.25)) !important;
    color: #B88536 !important;
    border-color: rgba(184, 133, 54, 0.4) !important;
}

[b-uhp0yne2kw] .analyze-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.25), rgba(184, 133, 54, 0.35)) !important;
    border-color: #B88536 !important;
}

[b-uhp0yne2kw] .analyze-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* Lichess Link (smaller, icon only) */
[b-uhp0yne2kw] .lichess-link {
    padding: 0.375rem !important;
    min-width: auto !important;
}

/* Spin animation for loading */
[b-uhp0yne2kw] .spin {
    animation: spin-b-uhp0yne2kw 1s linear infinite;
}

@keyframes spin-b-uhp0yne2kw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Analyze Dropdown */
[b-uhp0yne2kw] .analyze-dropdown-container {
    position: relative;
}

/* #7260 - .games-grid tr { position: relative } was removed here. It was added
   in 345765b6e as "positioning context for the dropdown", but the dropdown's
   containing block is .analyze-dropdown-container, which already carries
   position: relative and sits INSIDE the cell - so the row rule never
   participated in anchoring anything. Nothing else in this stylesheet is
   absolutely positioned, and no component rendered inside a row positions
   itself against it. Positioned table rows are also under-specified and
   inconsistent across engines, so a dead rule of that kind is a trap for the
   next reader: the reopened diagnosis on #7260 blamed it for a stacking-context
   trap it does not actually create (position: relative with z-index: auto
   establishes no stacking context, and a real browser confirms the panel paints
   over every following row without it). Removed rather than left as scenery. */

[b-uhp0yne2kw] .analyze-btn .dropdown-chevron {
    font-size: 0.625rem;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

/* Where the panel sits (anchor edge, floor, phone cap) is shared with its twin,
   the GameAnalysis re-analyze dropdown, in wwwroot/css/anchored-dropdown.css
   (#9432); only the look and this twin's own states (.drop-up, .is-floating)
   are here. */
[b-uhp0yne2kw] .analyze-dropdown {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.98));
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 12px;
    padding: 0.5rem;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(184, 133, 54, 0.1);
    animation: dropdownFadeIn-b-uhp0yne2kw 0.15s ease;
}

@keyframes dropdownFadeIn-b-uhp0yne2kw {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* #7281 - OPEN UPWARD WHEN THE PANEL DOES NOT FIT BELOW THE TRIGGER.
   The panel always opened downward, and on the LAST row that is unreachable
   rather than awkward: there is no table under it to scroll into and the page
   is already at maximum scroll, so the bottom of the panel cannot be brought on
   screen at any scroll position (29px lost at 1366x768, three lines of text at
   390x844). This is not a clip - #7260 fixed both of those and they stay fixed;
   the panel is painted correctly, just past the end of the scrollable page.

   Which side is decided at open time by Games.razor.js, because a stylesheet
   cannot know where the trigger sits in the viewport. Only the anchor edge and
   the direction the fade comes from change here; everything else is shared with
   the downward panel, so the two can never drift apart.

   Rejected, for the next reader: a positional `:last-child` rule flips
   unconditionally and would push the panel off the TOP of a short table, which
   is this same defect mirrored; CSS anchor positioning
   (position-try-fallbacks: flip-block) expresses exactly this but ships in
   Chromium only; and padding the container by the panel height buys
   reachability with permanent dead whitespace under every games table, for a
   case that affects one row. */
[b-uhp0yne2kw] .analyze-dropdown.drop-up {
    top: auto;
    bottom: calc(100% + 4px);
    animation-name: dropdownFadeInUp-b-uhp0yne2kw;
}

@keyframes dropdownFadeInUp-b-uhp0yne2kw {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* #7260 THIRD ACT — THE OPEN PANEL LIVES IN THE TOP LAYER.

   Added by Games.razor.js, together with `popover="manual"`, whenever
   something between this panel and the body would clip it — which on this page
   means the .games-table-wrapper scroller above. `showPopover()` then paints
   the panel above every ancestor's overflow at every width, with the VIEWPORT
   as its containing block, while the element stays exactly where it is in the
   DOM. Staying in the DOM is the point: a portal that moved the node would
   take the outside-click handling, Blazor's ownership of the node and the E2E
   suite's own panel lookup with it.

   This rule only has to undo the UA stylesheet for [popover], which sets
   `inset: 0`, `margin: auto` and `overflow: auto` — with our `top`/`right`
   that would have stretched the panel across the viewport and given it its own
   scrollbar. `left` and `top` are measured, so Games.razor.js sets them inline;
   so is `width`, because the top layer resolves the panel's fit-content width
   against the viewport instead of the cell (measured: the same panel is 220px
   wide in the row and 523px wide in the top layer, which re-wraps every label).

   It is declared after .drop-up on purpose — both weigh (0,2,0), and the
   inline `top` is what positions the panel in either direction. */
[b-uhp0yne2kw] .analyze-dropdown.is-floating {
    position: fixed;
    inset: auto;
    margin: 0;
    overflow: visible;
}

[b-uhp0yne2kw] .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

[b-uhp0yne2kw] .dropdown-item:hover {
    background: rgba(184, 133, 54, 0.15);
}

[b-uhp0yne2kw] .dropdown-item i {
    font-size: 16px;
    flex-shrink: 0;
}

[b-uhp0yne2kw] .dropdown-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

[b-uhp0yne2kw] .dropdown-item-title {
    font-family: var(--ascend-font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

[b-uhp0yne2kw] .dropdown-item-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* #7263 - non-actionable status for a queued/pending game: analysis is
   automatic, so the row states a fact instead of inviting a click. Sits on
   the action row at the action links' scale, but deliberately carries none
   of their border, background, or hover affordances. */
[b-uhp0yne2kw] .analysis-pending-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    cursor: default;
}

/* #7263 - the manual trigger survives only for games outside the automatic
   analysis window; this note inside its dropdown says why the button exists. */
[b-uhp0yne2kw] .dropdown-note {
    padding: 0.25rem 0.5rem 0.5rem;
    margin-bottom: 0.375rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.55);
    white-space: normal;
}

/* Responsive */
@media (max-width: 768px) {
    .games-table-wrapper[b-uhp0yne2kw] {
        display: none;
    }

    .games-card-list[b-uhp0yne2kw] {
        display: block;
    }

    /* #6717 - the phone anchoring of the analyze dropdown (its LEFT edge on
       its button) moved to wwwroot/css/anchored-dropdown.css with its twin's
       (#9432). */

    .games-page-header[b-uhp0yne2kw] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
}

@media (min-width: 769px) {
    .games-card-list[b-uhp0yne2kw] {
        display: none;
    }
}

/* Mobile tier badge */
.game-card-badge.tier-badge[b-uhp0yne2kw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
}

.game-card-badge.tier-quick[b-uhp0yne2kw] {
    color: #31DDE3;
}

.game-card-badge.tier-normal[b-uhp0yne2kw] {
    color: #31DDE3;
}

.game-card-badge.tier-deep[b-uhp0yne2kw] {
    color: #B88536;
}

/* Upgrade Button */
[b-uhp0yne2kw] .upgrade-btn {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.1), rgba(49, 221, 227, 0.2)) !important;
    color: #31DDE3 !important;
    border-color: rgba(49, 221, 227, 0.3) !important;
}

[b-uhp0yne2kw] .upgrade-btn:hover {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(49, 221, 227, 0.3)) !important;
    border-color: #31DDE3 !important;
}

[b-uhp0yne2kw] .upgrade-btn .dropdown-chevron {
    font-size: 0.625rem;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

/* #6939 - conversation markers. Two states, visually distinct so a glance
   separates "we talked about this" from "your coach is waiting on you". */
.games-convo[b-uhp0yne2kw] {
    color: var(--ascend-text-muted);
    font-size: 0.9rem;
}

.games-convo-waiting[b-uhp0yne2kw] {
    color: var(--ascend-accent);
}

.games-convo-count[b-uhp0yne2kw] {
    margin: 0 0 0.5rem 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-muted);
}

/* #7130 - analysis-backlog banner (flag-gated) */
.analysis-backlog-banner[b-uhp0yne2kw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Owner-reported 2026-08-20 on the AdminOnly canary: the banner sat flush
       against the filter row beneath it, reading as one welded block. It is a
       distinct notice and needs air on both sides of it. */
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 8px;
    background: rgba(49, 221, 227, 0.08);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    flex-wrap: wrap;
}

.analysis-backlog-icon[b-uhp0yne2kw] {
    color: rgba(49, 221, 227, 0.7);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.analysis-backlog-text[b-uhp0yne2kw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: min(13rem, 100%);
}

.analysis-backlog-text strong[b-uhp0yne2kw] {
    color: #31DDE3;
}

.analysis-backlog-older[b-uhp0yne2kw] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}

.analysis-backlog-result[b-uhp0yne2kw] {
    color: rgba(49, 221, 227, 0.85);
    font-size: 0.78rem;
}


/* #7736 — touch-target floor for the /games row actions and filters.

   These are the highest-stakes controls in the audit: .game-link.delete-link
   is DESTRUCTIVE and measured 80x32 at 390px and only 39px WIDE at 1024px.
   They are grown rather than given pseudo-element hit areas on purpose — the
   buttons sit a few px apart inside .action-buttons, and invisible 44px areas
   on adjacent controls overlap, which would let "open board" swallow taps
   meant for delete (or the reverse). .action-buttons already wraps on phones,
   so the extra width costs a second line, never a clipped label.

   The 2rem baseline in the rules above is the DESKTOP shape and is kept: this
   block only applies on a coarse pointer. */
@media (hover: none) and (pointer: coarse) {
    /* BOTH selectors, and the second one is why this rule works at all.
       `::deep .action-buttons .game-link { min-height: 2rem }` further up is
       (0,3,0) and out-specifies a bare `::deep .game-link` (0,2,0), so the
       first version of this block set min-WIDTH successfully and had its
       min-HEIGHT silently discarded - measured 44x32, which looks like a fix
       and is not one. The phone card list hid it (the desktop table is
       display:none below 769px), so it surfaced only on a COARSE-POINTER walk
       at 834 and 1024 - a tablet, where the table renders and the finger is
       still a finger. That is the same band #7734 is about, and the same
       reason #6681 chose pointer media over a width query. */
    [b-uhp0yne2kw] .game-link,
    [b-uhp0yne2kw] .action-buttons .game-link {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
    }

    /* #8312 - the Self Review door is a .game-link, so the rule above already
       floors it. It is named on its own as well because it renders only with
       phone-today on (Disabled by default), only for a member whose "Skip
       self-review" setting is on (#8323) and only for a game not yet
       self-reviewed, so the live ratchet cannot see it;
       ConditionalSurfaceTouchTargetTests pins this line, and it survives the
       door ever losing the .game-link class. */
    [b-uhp0yne2kw] .self-review-link {
        min-height: var(--touch-target);
    }

    .filter-select[b-uhp0yne2kw],
    .filter-input[b-uhp0yne2kw],
    .page-btn[b-uhp0yne2kw] {
        min-height: var(--touch-target);
    }

    /* The pagination chevrons are icon-only: one glyph plus 0.75rem of padding
       a side is 39px wide, so a height floor alone left a 39x44 target. Develop
       build 11076 measured all four that way - the first run where the CI
       account had more than one page of games (50 a page), because both bars
       are `@if (_totalPages > 1)` and the live ratchet only measures what
       renders. They sit 1rem from the page counter with nothing else in the
       row, so the box grows; no pseudo-element hit area is needed. */
    .page-btn[b-uhp0yne2kw] {
        min-width: var(--touch-target);
    }
}
/* /Components/Pages/GuidedPath.razor.rz.scp.css */
/* #6687 Guided first path. Tokens only - no raw brand hex, no font literals. */

.guided-path-page[b-fcic0nabt6] {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
}

.gp-loading[b-fcic0nabt6] {
    display: flex;
    justify-content: center;
    padding: 6rem 0;
    color: var(--ascend-accent);
}

.gp-loading[b-fcic0nabt6]  i {
    font-size: 24px;
}

/* ---- progress rail ---------------------------------------------------- */

.gp-rail[b-fcic0nabt6] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    flex-wrap: wrap;
}

.gp-rail-step[b-fcic0nabt6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 5rem;
    opacity: 0.45;
}

.gp-rail-step.active[b-fcic0nabt6],
.gp-rail-step.done[b-fcic0nabt6] {
    opacity: 1;
}

.gp-rail-marker[b-fcic0nabt6] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
}

.gp-rail-step.active .gp-rail-marker[b-fcic0nabt6] {
    border-color: var(--ascend-accent);
    color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.12);
}

.gp-rail-step.done .gp-rail-marker[b-fcic0nabt6] {
    border-color: var(--ascend-success);
    color: var(--ascend-success);
}

.gp-rail-marker[b-fcic0nabt6]  i {
    font-size: 14px;
}

.gp-rail-label[b-fcic0nabt6] {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

/* ---- step body -------------------------------------------------------- */

.gp-step[b-fcic0nabt6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}

/* DELIBERATE EXCEPTION to the accent-heading convention (owner ruling
   2026-08-19). App-wide, accent headings are ALL CAPS - ACCURACY, COACH,
   A NOTE FROM YOUR ASSISTANT - and app.css carries the uppercase rule.
   Every heading on this page is sentence case instead, and that is intended:
   the guided path is the one surface written as the coach SPEAKING to the
   player ("What do you want to work on first?", "Connect where you play."),
   and shouting a conversational question reads wrong. The split
   accent-white / accent-gold spans are still the standard treatment, and
   they carry no space between them by design - that is the wordmark rule,
   not a typo.

   So: do NOT add text-transform: uppercase here, and do not "fix" the
   sentence casing on the eight gp-heading instances. It was queried and
   confirmed as correct. */
.gp-heading[b-fcic0nabt6] {
    font-family: var(--ascend-font-primary);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin: 0;
}

.gp-sub[b-fcic0nabt6] {
    margin: 0;
    max-width: 34rem;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

.gp-note[b-fcic0nabt6] {
    margin: 0;
    max-width: 32rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}

/* ---- one obvious next action ------------------------------------------ */

.gp-actions[b-fcic0nabt6] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.gp-primary[b-fcic0nabt6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-width: 14rem;
    padding: 0.9rem 2rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    /* Owner canary 2026-07-31: white text on the cyan gradient - not enough
       contrast. Every other cyan-gradient button in the app pairs it with the
       dark background token (NextActionHero .hero-cta, FirstPathEscort,
       GuidedPathPrompt, the orientation tour); these two had drifted. */
    color: var(--ascend-bg-dark);
    -webkit-text-fill-color: var(--ascend-bg-dark);
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gp-primary:hover:not(:disabled)[b-fcic0nabt6] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
}

.gp-primary:disabled[b-fcic0nabt6] {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.gp-primary[b-fcic0nabt6]  i {
    font-size: 16px;
}

/* The escape hatches. Deliberately quiet: they are answers, not competing
   calls to action. .gp-branch continues the path having skipped only the
   connect step; .gp-skip is the single genuinely optional step. */
.gp-branch[b-fcic0nabt6],
.gp-skip[b-fcic0nabt6],
.gp-back[b-fcic0nabt6],
.gp-focus-hatch[b-fcic0nabt6],
.gp-book-change[b-fcic0nabt6] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    padding: 0.3rem 0.5rem;
}

.gp-branch:hover:not(:disabled)[b-fcic0nabt6],
.gp-skip:hover:not(:disabled)[b-fcic0nabt6],
.gp-back:hover:not(:disabled)[b-fcic0nabt6],
.gp-focus-hatch:hover:not(:disabled)[b-fcic0nabt6],
.gp-book-change:hover:not(:disabled)[b-fcic0nabt6] {
    color: var(--ascend-accent);
}

.gp-back[b-fcic0nabt6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

.gp-back[b-fcic0nabt6]  i {
    font-size: 14px;
}

/* ---- connect step ----------------------------------------------------- */

.gp-connect-options[b-fcic0nabt6] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.gp-connect-option[b-fcic0nabt6] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: var(--ascend-text-light);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.gp-connect-option:hover[b-fcic0nabt6] {
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.1);
}

.gp-connect-logo[b-fcic0nabt6] {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
}

.gp-connect-option[b-fcic0nabt6]  i {
    font-size: 1.25rem;
}

/* #7048 - the inline id entry takes the whole row when it opens: it is a form,
   not a third pill, and squeezing it beside the two OAuth buttons would make
   the field the smallest thing on the step where it is the only thing to do. */
.gp-connect-inline[b-fcic0nabt6] {
    flex: 1 1 100%;
    max-width: 34rem;
    margin: 0 auto;
    text-align: left;
}

.gp-connected[b-fcic0nabt6] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.4rem;
    border-radius: 50px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid var(--ascend-success);
    color: var(--ascend-success);
    font-size: 0.95rem;
}

.gp-connected[b-fcic0nabt6]  i {
    font-size: 20px;
}

/* ---- material step (#6762: books only, real book) ---------------------- */

.gp-book-find[b-fcic0nabt6] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.75rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: var(--ascend-text-light);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.gp-book-find:hover:not(:disabled)[b-fcic0nabt6] {
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.1);
}

.gp-book-find[b-fcic0nabt6]  i {
    font-size: 18px;
}

.gp-book-chosen[b-fcic0nabt6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 30rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    text-align: left;
    background: rgba(49, 221, 227, 0.07);
    border: 1px solid rgba(49, 221, 227, 0.3);
}

.gp-book-cover[b-fcic0nabt6] {
    width: 3rem;
    height: 4.5rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
}

.gp-book-cover-empty[b-fcic0nabt6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ascend-accent);
}

.gp-book-cover-empty[b-fcic0nabt6]  i {
    font-size: 20px;
}

.gp-book-meta[b-fcic0nabt6] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gp-book-title[b-fcic0nabt6] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
}

.gp-book-author[b-fcic0nabt6] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.gp-book-category[b-fcic0nabt6] {
    align-self: flex-start;
    margin-top: 0.15rem;
    padding: 0.05rem 0.6rem;
    border-radius: 50px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.35);
}

/* ---- focus step (#6761: the struggle taxonomy) ------------------------- */

/* The step body is centered; the chips are a left-reading list, so the wrapper
   restores the alignment the shared component expects. */
.gp-struggles[b-fcic0nabt6] {
    width: 100%;
    text-align: left;
}

/* ---- study plan step -------------------------------------------------- */

.gp-summary[b-fcic0nabt6] {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gp-summary-row[b-fcic0nabt6] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.gp-summary-key[b-fcic0nabt6] {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.gp-summary-value[b-fcic0nabt6] {
    font-size: 0.95rem;
    text-align: right;
}

/* Thin-sample / no-sample copy (#6763). Informational only - it never disables
   the primary. Renders as a <p> for the zero-games empty state and as a <div>
   wrapping the copy plus the shared ThinSampleNotice below the threshold. */
.gp-thin-data[b-fcic0nabt6] {
    margin: 0;
    max-width: 32rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.35);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.88rem;
    line-height: 1.6;
}

.gp-thin-data-copy[b-fcic0nabt6] {
    margin: 0;
}

/* ---- Parthenon orientation (#6756) ------------------------------------ */
/* One small panel, one sentence per element. Deliberately compact - the map
   reduces overwhelm only while it stays small. */

.gp-orient-list[b-fcic0nabt6] {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gp-orient-item[b-fcic0nabt6] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.gp-orient-foundation[b-fcic0nabt6],
.gp-orient-coaching[b-fcic0nabt6] {
    border-color: rgba(184, 133, 54, 0.35);
    background: rgba(184, 133, 54, 0.08);
}

.gp-orient-name[b-fcic0nabt6] {
    flex-shrink: 0;
    min-width: 8.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.gp-orient-foundation .gp-orient-name[b-fcic0nabt6],
.gp-orient-coaching .gp-orient-name[b-fcic0nabt6] {
    color: var(--ascend-secondary-light);
}

.gp-orient-line[b-fcic0nabt6] {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.gp-orient-close[b-fcic0nabt6] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    color: var(--ascend-text-light);
}

.gp-orient-skip[b-fcic0nabt6],
.gp-firstwin-skip[b-fcic0nabt6] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    padding: 0.3rem 0.5rem;
}

.gp-orient-skip:hover:not(:disabled)[b-fcic0nabt6],
.gp-firstwin-skip:hover:not(:disabled)[b-fcic0nabt6] {
    color: var(--ascend-accent);
}

@media (max-width: 30rem) {
    .gp-orient-item[b-fcic0nabt6] {
        flex-direction: column;
        gap: 0.15rem;
    }
}

/* ---- the first win (#6756) -------------------------------------------- */

.gp-rep-card[b-fcic0nabt6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    max-width: 30rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: rgba(49, 221, 227, 0.07);
    border: 1px solid rgba(49, 221, 227, 0.3);
}

.gp-rep-icon[b-fcic0nabt6] {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ascend-accent);
}

.gp-rep-title[b-fcic0nabt6] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
}

.gp-rep-why[b-fcic0nabt6] {
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.gp-rep-minutes[b-fcic0nabt6] {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.gp-error[b-fcic0nabt6] {
    max-width: 32rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--ascend-error);
    color: var(--ascend-text-light);
    font-size: 0.88rem;
}

@media (max-width: 30rem) {
    .gp-rail[b-fcic0nabt6] {
        gap: 0.75rem;
    }

    .gp-rail-step[b-fcic0nabt6] {
        min-width: 4rem;
    }

    .gp-summary-row[b-fcic0nabt6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .gp-summary-value[b-fcic0nabt6] {
        text-align: left;
    }
}

/* The "what is still missing" line under a disabled Continue. Quiet, not an
   error - nothing has gone wrong, the step is simply incomplete. */
.gp-need[b-fcic0nabt6] {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* #6981 - the rating offer's per-federation sections. USCF renders
   unconditionally; the FIDE section joins it when onboarding-fide-capture is
   on. The lookup panels themselves carry their own component-scoped styles
   (UscfLookupInline / FideLookupInline); these rules only stack and label
   the two halves. */
.gp-federation[b-fcic0nabt6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto 1.25rem;
    text-align: left;
}

.gp-federation-label[b-fcic0nabt6] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ascend-secondary-light);
    text-transform: uppercase;
}

.gp-federation-pitch[b-fcic0nabt6] {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ===================================================================
   #9391 RECEIPTS - the landing page (owner pick 2026-11-03).

   A proof ledger: PAPER bands where a member speaks (navy text on
   --ascend-bg-light, 15.4:1) alternate with NAVY bands where the product
   works, and a thin gold source line joins each member's cite to the proof
   under it. Every surface is a FLAT color, so axe can judge every line of
   text on it (#7312: the old page gradient made whole sections undecidable).
   Band heights vary on purpose; a uniform rhythm is the template tell.

   Rules carried over verbatim from the previous page: the h1 and its
   gradient (owner ruling 2026-11-03: keep it exactly as live), the value
   line and its wordmark, and the mailing-list form. Everything else here is
   new, and the rules it replaced (the hero screenshot, the card grids, the
   comparison table, the knight background, the old section rhythm) are gone.
   =================================================================== */

/* Auth-check placeholder - occupies a full viewport while we decide
   whether to redirect, so no flash of unstyled content. */
.auth-checking-placeholder[b-3etv8jur6c] {
    min-height: 100vh;
    min-height: 100dvh;
}

.coming-soon-page[b-3etv8jur6c] {
    --lp-pad: 64px;
    --lp-navy: var(--ascend-primary);
    --lp-navy-d: var(--ascend-primary-dark);
    --lp-paper: var(--ascend-bg-light);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: clip;
    background-color: var(--ascend-primary);
}

.lp-wrap[b-3etv8jur6c] {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--lp-pad);
    position: relative;
}

.lp-band[b-3etv8jur6c] {
    position: relative;
}

.lp-navy[b-3etv8jur6c] {
    background-color: var(--lp-navy);
}

.lp-navy-d[b-3etv8jur6c] {
    background-color: var(--lp-navy-d);
}

/* Two columns: a heading on the left, its words on the right. */
.lp-split[b-3etv8jur6c] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 72px;
    align-items: start;
}

.lp-split-end[b-3etv8jur6c] {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
}

.lp-split.lp-split-even[b-3etv8jur6c] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* --- headings: two-tone, only the LAST TWO words jammed --------------- */

/* Every heading below the h1 is the brand two-tone: the final word gold, the
   word before it white, jammed with no space (owner 2026-11-02). The two
   halves are the app.css .title-white / .title-gold spans, inside .lp-jam,
   which keeps the pair on one line so a phone breaks BEFORE the pair rather
   than between its halves. The heading carries an aria-label with the
   spaced words, so a screen reader never hears the jam.
   HomeHeadingTwoToneRatchetTests checks every rendered heading. */
.lp-h2[b-3etv8jur6c],
.lp-h3[b-3etv8jur6c] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
}

.lp-h2[b-3etv8jur6c] {
    font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.6rem);
    line-height: 0.98;
    letter-spacing: -0.012em;
}

.lp-h3[b-3etv8jur6c] {
    font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
    line-height: 1.1;
}

.lp-jam[b-3etv8jur6c] {
    white-space: nowrap;
}

.lp-body-l[b-3etv8jur6c] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
    line-height: 1.55;
    color: #cbd5e1;
}

.lp-body-l p[b-3etv8jur6c] {
    margin: 0;
}

.lp-body-l p + p[b-3etv8jur6c] {
    margin-top: 22px;
}

.lp-label[b-3etv8jur6c] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* --- hero ---------------------------------------------------------------- */

.main-content[b-3etv8jur6c] {
    text-align: left;
}

.lp-hero[b-3etv8jur6c] {
    padding: 120px 0 56px;
}

.lp-hero-grid[b-3etv8jur6c] {
    display: grid;
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    column-gap: 72px;
    align-items: start;
}

.lp-hero-copy[b-3etv8jur6c] {
    min-width: 0;
    padding-top: 18px;
}

.lp-hero-card[b-3etv8jur6c] {
    min-width: 0;
    margin-top: 14px;
}

@keyframes fadeInUp-b-3etv8jur6c {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- the h1: kept EXACTLY as live (owner ruling 2026-11-03) ---------------
   Its text, its two lines, its fluid size and the animated cyan-gold gradient
   on "every day." are unchanged; it is the one heading on the page that is
   not two-tone. Only its column moved. */
.main-title[b-3etv8jur6c] {
    /* Fluid hero scaling — clamp(min, preferred, max) avoids stepped
       font-size jumps at breakpoints. Min = phone portrait readable,
       max = desktop readable. */
    font-size: var(--fluid-hero);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-xl);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.title-line-1[b-3etv8jur6c] {
    animation: fadeInUp-b-3etv8jur6c 0.8s ease-out 0.3s both;
}

.title-line-2[b-3etv8jur6c] {
    animation: fadeInUp-b-3etv8jur6c 0.8s ease-out 0.4s both;
}

.title-line-3[b-3etv8jur6c] {
    animation: fadeInUp-b-3etv8jur6c 0.8s ease-out 0.5s both;
}

.gradient-text[b-3etv8jur6c] {
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-secondary) 50%, var(--ascend-accent) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift-b-3etv8jur6c 4s ease-in-out infinite;
}

@keyframes gradientShift-b-3etv8jur6c {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}


.main-description[b-3etv8jur6c] {
    font-size: 1.375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-3xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp-b-3etv8jur6c 0.8s ease-out 0.6s both;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.brand-name[b-3etv8jur6c] {
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.brand-primary[b-3etv8jur6c] {
    color: #ffffff;
    /* letter-spacing trails after every glyph (incl. the last letter of
       "ASCEND"), rendering as a gap before "CHESS". Cancel the trailing track
       so the two-tone wordmark sits flush (#6193). */
    margin-right: -0.05em;
}

.brand-secondary[b-3etv8jur6c] {
    color: var(--ascend-secondary);
}



/* The value line sits in the hero's left column, anchored left. */
.lp-hero-copy .main-description[b-3etv8jur6c] {
    margin: 0;
    max-width: 38ch;
}


/* The hero's CTA row: the primary button, then the quiet text link. The
   .waitlist-section wrapper here holds only the row (the form's card look is
   the mailing list's, at the foot of the page). */
.lp-hero-copy .waitlist-section[b-3etv8jur6c] {
    margin: 0;
    padding: 0;
}

.lp-hero-cta[b-3etv8jur6c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin: 34px 0 0;
}

/* The secondary ask: a text link with a cyan rule, 44px tall to touch. Not a
   .btn, so no shared button skin is overridden (#7258). */
.lp-text-link[b-3etv8jur6c] {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 1.125rem;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: var(--ascend-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}

.lp-text-link:hover[b-3etv8jur6c] {
    color: var(--ascend-accent);
}

.lp-hero-fine .waitlist-subtitle[b-3etv8jur6c] {
    margin: 24px 0 0;
    max-width: 53ch;
    font-size: 1rem;
    line-height: 1.55;
    color: #94a3b8;
}

/* --- the problem ----------------------------------------------------------- */

.lp-problem-band[b-3etv8jur6c] {
    padding: 112px 0 100px;
}

.lp-pivot-band[b-3etv8jur6c] {
    padding: 76px 0 88px;
}

.lp-pivot[b-3etv8jur6c] {
    margin: 0;
    max-width: 38ch;
    font-family: var(--ascend-font-secondary);
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
    line-height: 1.3;
    color: #cbd5e1;
}

/* --- how it works: a ledger ------------------------------------------------ */

.lp-promise[b-3etv8jur6c] {
    padding: 104px 0;
}

.lp-ledger[b-3etv8jur6c] {
    list-style: none;
    margin: 72px 0 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.lp-lg[b-3etv8jur6c] {
    display: grid;
    grid-template-columns: 72px minmax(0, 4fr) minmax(0, 7fr);
    column-gap: 48px;
    padding: 34px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    align-items: start;
}

.lp-lg-big[b-3etv8jur6c] {
    padding: 40px 0 44px;
}

.lp-lg-n[b-3etv8jur6c] {
    padding-top: 8px;
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
}

.lp-lg-t p[b-3etv8jur6c] {
    margin: 14px 0 0;
    max-width: 40ch;
    font-size: 1.125rem;
    line-height: 1.55;
    color: #cbd5e1;
}

.lp-lg-text .lp-lg-t[b-3etv8jur6c] {
    display: contents;
}

.lp-lg-text .lp-lg-t p[b-3etv8jur6c] {
    grid-column: 3;
    margin: 2px 0 0;
    max-width: 52ch;
}

.lp-lg-brief[b-3etv8jur6c] {
    grid-column: 3;
    margin: 14px 0 0;
    max-width: 40ch;
    font-family: var(--ascend-font-primary);
    font-style: normal;
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.35;
    color: #ffffff;
}

.lp-fr[b-3etv8jur6c] {
    padding: 26px 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
}

.lp-fr[b-3etv8jur6c] {
    background-color: var(--lp-navy-d);
}

.lp-ph[b-3etv8jur6c] {
    display: grid;
    grid-template-columns: 0.9fr 1.35fr 1.05fr 1.35fr 0.9fr;
    gap: 6px;
}

.lp-ph-s[b-3etv8jur6c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-ph-b[b-3etv8jur6c] {
    display: block;
    height: 10px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.16);
}

.lp-ph-on .lp-ph-b[b-3etv8jur6c] {
    background-color: var(--ascend-accent);
}

.lp-ph-l[b-3etv8jur6c] {
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    color: #94a3b8;
}

.lp-ph-on .lp-ph-l[b-3etv8jur6c] {
    color: #ffffff;
}

.lp-promise-example[b-3etv8jur6c],
.lp-fr-line[b-3etv8jur6c] {
    margin: 26px 0 0;
    font-family: var(--ascend-font-primary);
    font-style: normal;
    font-weight: 700;
    font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
    line-height: 1.24;
    letter-spacing: -0.01em;
    color: #ffffff;
}

/* The approved example's lead, set as a label above its line (the text is unchanged). */
.lp-ex-lead[b-3etv8jur6c] {
    display: block;
    margin-bottom: 12px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.lp-fr-q[b-3etv8jur6c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.lp-fr-line[b-3etv8jur6c] {
    margin-top: 22px;
    font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem);
}

.lp-lg-total[b-3etv8jur6c] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: -1px;
    padding: 26px 0 0;
    border-top: 3px double rgba(255, 255, 255, 0.28);
}

.lp-lg-total svg[b-3etv8jur6c] {
    flex: none;
    fill: none;
    stroke: var(--ascend-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-lg-total p[b-3etv8jur6c] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-style: normal;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: #ffffff;
}

/* --- the method: the Parthenon --------------------------------------------- */

.lp-pillars[b-3etv8jur6c] {
    padding: 104px 0 120px;
}

.lp-parth[b-3etv8jur6c] {
    margin-top: 80px;
    position: relative;
}

.lp-ped[b-3etv8jur6c] {
    display: block;
    width: 100%;
    height: 96px;
    margin-bottom: -1px;
}

.lp-ped polygon[b-3etv8jur6c] {
    fill: none;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.lp-ped-a[b-3etv8jur6c] {
    stroke: rgba(255, 255, 255, 0.4);
}

.lp-ped-b[b-3etv8jur6c] {
    stroke: rgba(255, 255, 255, 0.16);
}

.lp-entab[b-3etv8jur6c] {
    position: relative;
    padding: 14px 24px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.lp-frieze[b-3etv8jur6c] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #cbd5e1;
}

.lp-cols[b-3etv8jur6c] {
    list-style: none;
    margin: 0;
    padding: 0 26px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 44px;
}

.lp-col[b-3etv8jur6c] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.lp-shaft[b-3etv8jur6c] {
    display: none;
}

.lp-cap[b-3etv8jur6c],
.lp-cbase[b-3etv8jur6c] {
    position: relative;
    margin: 0 -33px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.lp-cap[b-3etv8jur6c] {
    height: 14px;
    border-top: 0;
}

.lp-cbase[b-3etv8jur6c] {
    height: 12px;
    margin-top: auto;
    border-bottom: 0;
}

.lp-cap[b-3etv8jur6c],
.lp-cbase[b-3etv8jur6c],
.lp-slab[b-3etv8jur6c] {
    background-color: var(--lp-navy-d);
}

.lp-col .lp-h3[b-3etv8jur6c] {
    margin-top: 34px;
    font-size: clamp(1.15rem, 0.9rem + 0.5vw, 1.45rem);
}

.lp-col .lp-label[b-3etv8jur6c] {
    margin-top: 12px;
    font-size: 0.75rem;
    letter-spacing: 0.09em;
}

.lp-col p[b-3etv8jur6c] {
    margin: 16px 0 40px;
    font-size: 0.97rem;
    line-height: 1.55;
    color: #cbd5e1;
}

.lp-slab[b-3etv8jur6c] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 48px;
    align-items: center;
    padding: 30px 40px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.lp-slab .lp-label[b-3etv8jur6c] {
    margin-top: 10px;
}

.lp-slab p[b-3etv8jur6c] {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.55;
    color: #cbd5e1;
}

.lp-stair[b-3etv8jur6c] {
    height: 12px;
    margin: 0 -18px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-top: 0;
}

.lp-stair-2[b-3etv8jur6c] {
    margin: 0 -36px;
    border-color: rgba(255, 255, 255, 0.18);
}

/* --- who this is for -------------------------------------------------------- */

.lp-audience[b-3etv8jur6c] {
    padding: 96px 0 100px;
}

.lp-audience .lp-hero-positioning[b-3etv8jur6c] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.375rem);
    line-height: 1.55;
    color: #cbd5e1;
}

/* #9447 - the one short under-800 line beside the positioning. A step down from the
   positioning paragraph, in the gold accent so it reads as an aside for one kind of player. */
.lp-audience .lp-under-800[b-3etv8jur6c] {
    margin: 16px 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    line-height: 1.55;
    color: #cbd5e1;
}

.lp-audience .lp-under-800 a[b-3etv8jur6c] {
    color: var(--ascend-secondary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp-range[b-3etv8jur6c] {
    margin-top: 40px;
}

.lp-rg-track[b-3etv8jur6c] {
    position: relative;
    height: 44px;
}

.lp-rg-line[b-3etv8jur6c],
.lp-rg-near[b-3etv8jur6c],
.lp-rg-core[b-3etv8jur6c] {
    position: absolute;
}

.lp-rg-line[b-3etv8jur6c] {
    left: 0;
    right: 0;
    top: 21px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.16);
}

.lp-rg-near[b-3etv8jur6c] {
    left: 10%;
    right: 10%;
    top: 20px;
    height: 4px;
    border-top: 2px dashed rgba(255, 255, 255, 0.45);
}

.lp-rg-core[b-3etv8jur6c] {
    left: 22%;
    right: 22%;
    top: 17px;
    height: 10px;
    border-radius: 2px;
    background-color: #ffffff;
}

.lp-rg-lbls[b-3etv8jur6c] {
    position: relative;
    height: 22px;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
}

.lp-rg-lbls span[b-3etv8jur6c] {
    position: absolute;
    transform: translateX(-50%);
}

.lp-rg-lo[b-3etv8jur6c] {
    left: 22%;
}

.lp-rg-hi[b-3etv8jur6c] {
    left: 78%;
}

/* --- FAQ ---------------------------------------------------------------------- */

.lp-faq[b-3etv8jur6c] {
    padding: 104px 0 112px;
}

.lp-faq-grid > *[b-3etv8jur6c] {
    min-width: 0;
}

/* FaqList owns the rows (#8418); on this page they sit as flat ruled lines in
   the ledger's style instead of cards. Its markup carries its own scope, so ::deep. */
.lp-faq[b-3etv8jur6c]  .faq-list-landing {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.lp-faq[b-3etv8jur6c]  .faq-list-landing .faq-item {
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    background: none;
}

.lp-faq[b-3etv8jur6c]  .faq-list-landing .faq-item summary {
    padding: 22px 48px 22px 0;
    font-size: 1.25rem;
    color: #ffffff;
}

.lp-faq[b-3etv8jur6c]  .faq-list-landing .faq-item summary::after {
    right: 8px;
}

.lp-faq[b-3etv8jur6c]  .faq-list-landing .faq-item p {
    padding: 0 48px 26px 0;
    font-size: 1.05rem;
    color: #cbd5e1;
}

/* --- the closing ask ---------------------------------------------------------- */

.lp-final-cta[b-3etv8jur6c] {
    padding: 120px 0 128px;
}

.lp-fc[b-3etv8jur6c] {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: 88px;
    align-items: start;
}

.lp-fc-solo[b-3etv8jur6c] {
    grid-template-columns: minmax(0, 1fr);
}

.lp-fc-solo .lp-fc-copy[b-3etv8jur6c] {
    max-width: 760px;
}

.lp-fc-copy[b-3etv8jur6c] {
    padding-top: 34px;
}

/* #9391 round 5 (owner ruling 2026-11-03, only matching pairs): no source line runs from the
   member's card into the ask beside it. Her words and the product claim sit side by side,
   unjoined; the card's own rule stays inside the quote (HomeMemberQuote.razor.css). */

.lp-final-cta .lp-section-lede[b-3etv8jur6c] {
    margin: 28px 0 0;
    max-width: 42ch;
    font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem);
    line-height: 1.55;
    color: #cbd5e1;
}

.lp-final-cta .lp-hero-cta[b-3etv8jur6c] {
    margin-top: 36px;
}

/* --- mailing list -------------------------------------------------------------- */

.waitlist-section.lp-marketing-card[b-3etv8jur6c] {
    padding: 96px 0 104px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-ml .lp-h2[b-3etv8jur6c] {
    font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
}

.lp-ml .waitlist-subtitle[b-3etv8jur6c] {
    margin: 20px 0 0;
    font-size: 1.125rem;
    line-height: 1.6;
    color: #cbd5e1;
}

.lp-ml .waitlist-form[b-3etv8jur6c] {
    margin: 0;
    max-width: none;
}

.lp-ml .form-group[b-3etv8jur6c] {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

.lp-ml .heard-about-group[b-3etv8jur6c] {
    flex-direction: column;
}

.lp-ml .heard-about-label[b-3etv8jur6c] {
    text-align: left;
}

/* --- the mailing-list form (unchanged plumbing, #6851 #6880 #6792) --- */

/* Waitlist Form - Premium Design */
.waitlist-form[b-3etv8jur6c] {
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
}

.form-group[b-3etv8jur6c] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* #7258: color, background, border color, font-family and the placeholder
   all come from the global .form-input in app.css now. What is left is what
   makes THIS input the hero subscribe field: it grows to fill the row and sits
   noticeably larger than a normal form control.
   #7977: the `backdrop-filter: blur(10px)` that used to be here went with the
   glass. The global rule is an OPAQUE background now (axe-core could not
   measure the field's contrast through a 5% wash over the hero gradient, and
   reported it as an undecidable kind the frozen register does not list), and a
   backdrop blur behind an opaque fill paints nothing while still forcing a
   compositing layer. */
.form-input[b-3etv8jur6c] {
    flex: 1;
    min-width: 280px;
    padding: 1.25rem 1.75rem;
    font-size: 1.125rem;
    border-width: 2px;
    border-radius: var(--radius-xl);
}

.form-input:focus[b-3etv8jur6c] {
    /* A wider ring and the lift, on top of the global focus treatment. */
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ascend-accent) 15%, transparent);
    transform: translateY(-2px);
}

/* Form Message */
.form-message[b-3etv8jur6c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    margin-top: var(--space-lg);
    animation: slideDown-b-3etv8jur6c 0.4s ease-out;
    font-size: 1rem;
    font-weight: 500;
}

@keyframes slideDown-b-3etv8jur6c {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-message.success[b-3etv8jur6c] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(49, 221, 227, 0.15));
    color: var(--ascend-success);
    border: 2px solid var(--ascend-success);
}

.form-message.error[b-3etv8jur6c] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
    color: var(--ascend-text-light);
    border: 2px solid var(--ascend-error);
}

.form-message i[b-3etv8jur6c] {
    font-size: 1.5rem;
}

/* SECONDARY by design. The primary ask on this page is "See plans & pricing"
   in the card above; the mailing list is the catch on the way out. A ghost
   cyan submit sized to its own content reads as the quieter of the two,
   which is the whole point of the placement decision.

   #7748 - "sized to its own content" used to need an explicit `width: auto`
   to survive the global `@media (max-width: 480px) { .btn { width: 100% } }`
   in css/SharedPages.css. That rule is opt-in now (.btn-block, which the six
   hero/CTA anchors on this page carry and this submit deliberately does
   not), so the override is gone and the intent is expressed once, here. */
.waitlist-submit[b-3etv8jur6c] {
    flex: 0 0 auto;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--ascend-font-secondary);
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.45);
    border-radius: var(--radius-xl);
    box-shadow: none;
    justify-content: center;
}

.waitlist-submit:hover:not(:disabled)[b-3etv8jur6c] {
    background: rgba(49, 221, 227, 0.16);
    border-color: var(--ascend-accent);
    transform: none;
}

.waitlist-submit:disabled[b-3etv8jur6c] {
    opacity: 0.65;
    cursor: default;
}


/* #6792 - the optional "how did you hear about us?" question. Deliberately
   quieter than the email row above it: this is a nice-to-have signal on a form
   whose only job is to capture an email, and it must never read as a second
   thing being asked of the visitor before they can subscribe. Stacks below the
   email row and inherits .form-input, so it matches without redefining it. */
.heard-about-group[b-3etv8jur6c] {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-md);
}

.heard-about-label[b-3etv8jur6c] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.heard-about-optional[b-3etv8jur6c] {
    color: rgba(255, 255, 255, 0.6);
}

.heard-about-select[b-3etv8jur6c],
.heard-about-detail[b-3etv8jur6c] {
    min-width: 0;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
}

.heard-about-select[b-3etv8jur6c] {
    /* The native control renders its own list; only the closed state is ours. */
    appearance: none;
    cursor: pointer;
}

.heard-about-select option[b-3etv8jur6c] {
    background: var(--ascend-bg-dark);
    color: #ffffff;
}


/* Status badge: the PRE-LAUNCH page's one status line (#6204). */
.status-badge[b-3etv8jur6c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.status-badge[b-3etv8jur6c] {
    background-color: var(--ascend-primary-dark);
}

.status-badge i[b-3etv8jur6c] {
    font-size: 0.5rem;
    color: var(--ascend-secondary);
}

/* --- tablet ------------------------------------------------------------------ */

@media (max-width: 1180px) {
    .coming-soon-page[b-3etv8jur6c] {
        --lp-pad: 40px;
    }

    .lp-hero-grid[b-3etv8jur6c] {
        column-gap: 40px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .lp-split[b-3etv8jur6c],
    .lp-split-end[b-3etv8jur6c] {
        column-gap: 40px;
    }

    .lp-cols[b-3etv8jur6c] {
        column-gap: 28px;
        padding: 0 10px;
    }

    .lp-col[b-3etv8jur6c] {
        padding: 0 14px;
    }

    .lp-lg[b-3etv8jur6c] {
        grid-template-columns: 56px minmax(0, 4fr) minmax(0, 6fr);
        column-gap: 32px;
    }
}

/* The header stops overlaying the page below 768px (#7731), so the hero
   needs no reservation for it. */
@media (max-width: 768px) {
    .lp-hero[b-3etv8jur6c] {
        padding-top: 6px;
    }
}

/* --- phone ------------------------------------------------------------------- */

@media (max-width: 900px) {
    .lp-hero-grid[b-3etv8jur6c] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-hero-card[b-3etv8jur6c] {
        margin-top: 28px;
    }
}

@media (max-width: 760px) {
    .coming-soon-page[b-3etv8jur6c] {
        --lp-pad: 20px;
    }

    .lp-hero[b-3etv8jur6c] {
        padding-bottom: 48px;
    }

    .lp-hero-copy[b-3etv8jur6c] {
        padding-top: 8px;
    }

    .main-title[b-3etv8jur6c] {
        margin-bottom: var(--space-lg);
    }

    .lp-hero-cta[b-3etv8jur6c] {
        margin-top: 24px;
        gap: 4px 24px;
    }

    .lp-hero-copy .lp-hero-cta .btn-primary[b-3etv8jur6c] {
        width: 100%;
    }

    .lp-hero-fine .waitlist-subtitle[b-3etv8jur6c] {
        margin-top: 14px;
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .lp-split[b-3etv8jur6c],
    .lp-split-end[b-3etv8jur6c],
    .lp-split.lp-split-even[b-3etv8jur6c] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 20px;
    }

    .lp-problem-band[b-3etv8jur6c] {
        padding: 60px 0 54px;
    }

    .lp-pivot-band[b-3etv8jur6c] {
        padding: 52px 0 54px;
    }

    .lp-promise[b-3etv8jur6c] {
        padding: 56px 0 60px;
    }

    .lp-ledger[b-3etv8jur6c] {
        margin-top: 36px;
    }

    .lp-lg[b-3etv8jur6c],
    .lp-lg-big[b-3etv8jur6c] {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 0;
        padding: 24px 0;
    }

    .lp-lg-n[b-3etv8jur6c] {
        padding-top: 5px;
        font-size: 0.875rem;
    }

    .lp-lg-t[b-3etv8jur6c] {
        grid-column: 2;
    }

    .lp-lg-t p[b-3etv8jur6c] {
        margin-top: 10px;
        font-size: 1rem;
    }

    .lp-lg-text .lp-lg-t[b-3etv8jur6c] {
        display: block;
    }

    .lp-lg-text .lp-lg-t p[b-3etv8jur6c] {
        margin-top: 10px;
    }

    .lp-lg-brief[b-3etv8jur6c] {
        grid-column: 2;
        margin-top: 12px;
        font-size: 1.125rem;
    }

    .lp-fr[b-3etv8jur6c] {
        grid-column: 1 / span 2;
        margin-top: 18px;
        padding: 18px 16px;
    }

    /* #9467: five real phase names do not fit side by side on a phone, so the strip reads as a
       list, a short bar beside each name (the Insights phase rows' shape). */
    .lp-ph[b-3etv8jur6c] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .lp-ph-s[b-3etv8jur6c] {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .lp-ph-b[b-3etv8jur6c] {
        flex: none;
        width: 44px;
    }

    .lp-ph-l[b-3etv8jur6c] {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .lp-fr-q[b-3etv8jur6c] {
        gap: 10px;
    }

    .lp-lg-total[b-3etv8jur6c] {
        gap: 12px;
        padding-top: 20px;
    }

    .lp-lg-total p[b-3etv8jur6c] {
        font-size: 1.125rem;
    }

    .lp-pillars[b-3etv8jur6c] {
        padding: 56px 0 64px;
    }

    .lp-parth[b-3etv8jur6c] {
        margin-top: 40px;
    }

    .lp-ped[b-3etv8jur6c] {
        height: 44px;
    }

    .lp-entab[b-3etv8jur6c] {
        padding: 10px 8px;
    }

    .lp-frieze[b-3etv8jur6c] {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
    }

    /* The columns stack: a small capital and base drawn at the left of each. */
    .lp-cols[b-3etv8jur6c] {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
    }

    .lp-col[b-3etv8jur6c] {
        display: block;
        padding: 20px 0 0 58px;
        border: 0;
    }

    /* The column's shaft: a real element, not ::before/::after, because axe cannot decide the
       contrast of text whose ancestor carries a sized pseudo-element (measured on this walk). */
    .lp-shaft[b-3etv8jur6c] {
        display: block;
        position: absolute;
        left: 9px;
        top: 34px;
        bottom: 12px;
        width: 23px;
        border-left: 1px solid rgba(255, 255, 255, 0.4);
        border-right: 1px solid rgba(255, 255, 255, 0.4);
    }

    .lp-cap[b-3etv8jur6c] {
        position: absolute;
        left: 0;
        top: 20px;
        width: 42px;
        height: 12px;
        margin: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.4);
    }

    .lp-cbase[b-3etv8jur6c] {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 42px;
        height: 10px;
        margin: 0;
    }

    .lp-col .lp-h3[b-3etv8jur6c] {
        margin-top: 0;
    }

    .lp-col p[b-3etv8jur6c] {
        margin: 10px 0 0;
        padding-bottom: 30px;
    }

    .lp-slab[b-3etv8jur6c] {
        margin-top: 24px;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
        padding: 22px 20px;
    }

    .lp-slab p[b-3etv8jur6c] {
        font-size: 1rem;
    }

    .lp-stair[b-3etv8jur6c] {
        margin: 0 -8px;
    }

    .lp-stair-2[b-3etv8jur6c] {
        margin: 0 -16px;
    }

    .lp-audience[b-3etv8jur6c] {
        padding: 52px 0 60px;
    }

    .lp-range[b-3etv8jur6c] {
        margin-top: 28px;
    }

    .lp-faq[b-3etv8jur6c] {
        padding: 60px 0 64px;
    }

    .lp-faq[b-3etv8jur6c]  .faq-list-landing .faq-item summary {
        font-size: 1.125rem;
        padding-right: 40px;
    }

    .lp-faq[b-3etv8jur6c]  .faq-list-landing .faq-item p {
        padding-right: 0;
        font-size: 1rem;
    }

    .lp-final-cta[b-3etv8jur6c] {
        padding: 60px 0 72px;
    }

    .lp-fc[b-3etv8jur6c] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-fc-copy[b-3etv8jur6c] {
        padding-top: 32px;
    }

    .lp-fc-solo .lp-fc-copy[b-3etv8jur6c] {
        padding-top: 0;
    }

    .lp-final-cta .lp-hero-cta .btn-primary[b-3etv8jur6c] {
        width: 100%;
    }

    .waitlist-section.lp-marketing-card[b-3etv8jur6c] {
        padding: 56px 0 60px;
    }

    .lp-ml .waitlist-subtitle[b-3etv8jur6c] {
        font-size: 1rem;
    }

    .lp-ml .form-group[b-3etv8jur6c] {
        flex-direction: column;
    }

    .lp-ml .form-input[b-3etv8jur6c] {
        min-width: 0;
    }

    /* The value line keeps its words; on a phone it reads at body size, as it did live. */
    .lp-hero-copy .main-description[b-3etv8jur6c] {
        font-size: 1.0625rem;
        line-height: 1.6;
    }
}

/* Below 380px the jammed pair may itself wrap rather than overflow a 320px
   screen (the halves are inline-blocks, so it breaks AT the seam, #8324). */
@media (max-width: 380px) {
    .lp-jam[b-3etv8jur6c] {
        white-space: normal;
    }
}
/* /Components/Pages/HomeMemberQuote.razor.rz.scp.css */
/* #9391 RECEIPTS - a member band: paper, flat, the member's words large on the right and the
   cite (with the #9167 disclosure under it) at the foot of the left margin. Cites on paper are
   navy and slate, never gold: gold text on light passes only at 24px and up. */

.lp-member[b-5hcoe224e1] {
    position: relative;
    z-index: 2;
    padding: 104px 0 92px;
    color: var(--ascend-text-primary);
}

.lp-member[b-5hcoe224e1] {
    background-color: var(--ascend-bg-light);
}

.mq-wrap[b-5hcoe224e1] {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--lp-pad, 64px);
    position: relative;
}

.mq[b-5hcoe224e1] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    grid-template-rows: auto 1fr;
    column-gap: 72px;
}

.mq-qm[b-5hcoe224e1] {
    grid-column: 1;
    grid-row: 1;
    display: block;
    margin-left: -6px;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 150px;
    line-height: 0.7;
    color: var(--ascend-secondary);
}

.mq blockquote[b-5hcoe224e1] {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
}

.mq blockquote p[b-5hcoe224e1] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-style: normal;
    font-weight: 700;
    color: var(--ascend-primary);
}

.mq-cite[b-5hcoe224e1] {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    margin: 24px 0 0;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: 1rem;
    line-height: 1.45;
}

.mq-cn[b-5hcoe224e1] {
    display: block;
    font-weight: 600;
    color: var(--ascend-text-primary);
}

/* #9167 - the disclosure at the cite's weight, directly under it. It follows the figure (it is
   not part of one member's caption), so on the two-column layout it takes the cite column's
   width: the figure's 3fr of 12 after its 72px gap. The cite sits at the figure's foot
   (align-self: end in the last row), so the line lands right under it. */
[b-5hcoe224e1] .mq-disclosure {
    width: calc((100% - 72px) / 4);
    margin: 6px 0 0;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ascend-text-primary);
}

/* Type by length (HomeMemberQuote.SizeClass): the words decide, nobody picks per member. */
.mq-xl blockquote p[b-5hcoe224e1] {
    font-size: clamp(3.25rem, 1.2rem + 6.4vw, 8rem);
    line-height: 0.96;
    letter-spacing: -0.03em;
    max-width: 11.5ch;
}

.mq-lg blockquote p[b-5hcoe224e1] {
    font-size: clamp(1.85rem, 1.2rem + 2vw, 2.9rem);
    line-height: 1.14;
    letter-spacing: -0.016em;
    max-width: 24ch;
}

.mq-md blockquote p[b-5hcoe224e1] {
    font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.014em;
}

.mq-sm blockquote p[b-5hcoe224e1] {
    font-weight: 500;
    font-size: clamp(1.35rem, 1.05rem + 0.95vw, 2.1rem);
    line-height: 1.32;
    letter-spacing: -0.012em;
}

/* "card": the closing call to action's small paper card, beside the ask. */
.lp-member-card[b-5hcoe224e1] {
    padding: 0;
}

.lp-member-card[b-5hcoe224e1] {
    background-color: transparent;
}

.lp-member-card .mq[b-5hcoe224e1] {
    display: block;
}

/* The paper slip is the wrap, not the figure, so the disclosure (the figure's sibling) sits
   inside the slip under the cite. */
.lp-member-card .mq-wrap[b-5hcoe224e1] {
    padding: 40px 44px 34px 84px;
    border: 1px solid rgba(4, 32, 71, 0.18);
    border-radius: 6px;
}

.lp-member-card .mq-wrap[b-5hcoe224e1] {
    background-color: var(--ascend-bg-light);
}

.lp-member-card .mq-qm[b-5hcoe224e1] {
    position: absolute;
    left: 28px;
    top: 26px;
    margin: 0;
    font-size: 72px;
    line-height: 1;
}

.lp-member-card .mq-wrap[b-5hcoe224e1]::before {
    content: "";
    position: absolute;
    left: 41px;
    top: 84px;
    bottom: 34px;
    width: 2px;
    background-color: var(--ascend-secondary);
}

.lp-member-card .mq blockquote p[b-5hcoe224e1] {
    font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.012em;
    max-width: none;
}

.lp-member-card .mq-cite[b-5hcoe224e1] {
    margin-top: 16px;
    font-size: 0.875rem;
}

.lp-member-card[b-5hcoe224e1]  .mq-disclosure {
    width: auto;
    font-size: 0.875rem;
}

@media (max-width: 760px) {
    .lp-member[b-5hcoe224e1] {
        padding: 52px 0 56px;
    }

    .mq[b-5hcoe224e1] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        row-gap: 0;
    }

    .mq-qm[b-5hcoe224e1] {
        grid-row: auto;
        height: 46px;
        margin: 0 0 -6px -4px;
        font-size: 92px;
    }

    .mq blockquote[b-5hcoe224e1] {
        grid-column: 1;
        grid-row: auto;
    }

    .mq-cite[b-5hcoe224e1] {
        grid-row: auto;
        margin-top: 20px;
        font-size: 0.875rem;
    }

    [b-5hcoe224e1] .mq-disclosure {
        width: auto;
        font-size: 0.875rem;
    }

    .mq-xl blockquote p[b-5hcoe224e1] {
        font-size: clamp(2.6rem, 1rem + 8vw, 3.5rem);
        line-height: 0.98;
    }

    .mq-lg blockquote p[b-5hcoe224e1] {
        font-size: 1.85rem;
    }

    .mq-md blockquote p[b-5hcoe224e1] {
        font-size: 1.65rem;
        line-height: 1.24;
    }

    .mq-sm blockquote p[b-5hcoe224e1] {
        font-size: 1.35rem;
        line-height: 1.4;
    }

    .lp-member-card .mq-wrap[b-5hcoe224e1] {
        padding: 26px 20px 24px 52px;
    }

    .lp-member-card .mq-qm[b-5hcoe224e1] {
        left: 14px;
        top: 16px;
        font-size: 52px;
    }

    /* Ends inside the slip (its bottom padding), as on desktop: it used to run to the card's
       edge to meet a line into the ask, which the only-matching-pairs ruling removed. */
    .lp-member-card .mq-wrap[b-5hcoe224e1]::before {
        left: 22px;
        top: 58px;
        bottom: 24px;
    }
}
/* /Components/Pages/HomeReceiptCard.razor.rz.scp.css */
/* #9391 RECEIPTS - the hero's receipt card: a paper slip, flat, no glow, a 1px navy-tint border.

   Everything below the motion block is the END state, which is what static SSR, no-JS and
   prefers-reduced-motion all show. Motion is opt-in: only an enhanced card (.rc-ready, set by
   /js/home-receipts.js) under prefers-reduced-motion: no-preference animates, and only with
   transform and opacity, so nothing it does can shift the layout. */

.rc-card[b-9em2kkwtug] {
    position: relative;
    border: 1px solid rgba(4, 32, 71, 0.18);
    border-radius: 6px;
    color: var(--ascend-text-primary);
}

.rc-card[b-9em2kkwtug] {
    background-color: var(--ascend-bg-light);
}

/* #9167 - the owner's disclosure, outside the rotating stack, at the cite's weight. A
   QuoteDisclosure child, so ::deep. */
[b-9em2kkwtug] .rc-disclosure {
    margin: 0;
    padding: 16px 36px 0 84px;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ascend-text-primary);
}

/* All receipts in ONE grid cell: the card is as tall as the tallest from the first paint. */
.rc-stack[b-9em2kkwtug] {
    display: grid;
}

.rc-slide[b-9em2kkwtug] {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.rc-slide.is-off[b-9em2kkwtug] {
    opacity: 0;
    visibility: hidden;
}

.rc-slide.is-on[b-9em2kkwtug] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease 0.05s, visibility 0s;
}

/* --- the member's words -------------------------------------------------- */

.rc-quote[b-9em2kkwtug] {
    position: relative;
    margin: 0;
    padding: 18px 36px 22px 84px;
}

.rc-qm[b-9em2kkwtug] {
    position: absolute;
    left: 28px;
    top: 6px;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 72px;
    line-height: 1;
    color: var(--ascend-secondary);
}

/* The gold source line: from the quote mark down into its example. It renders only on a quote an
   admin tied to this example (PairedExampleKey, owner ruling 2026-11-03: only matching pairs). */
.rc-quote[b-9em2kkwtug]::before {
    content: "";
    position: absolute;
    left: 41px;
    top: 62px;
    bottom: 0;
    width: 2px;
    background-color: var(--ascend-secondary);
}

.rc-quote blockquote[b-9em2kkwtug] {
    margin: 0;
}

.rc-quote blockquote p[b-9em2kkwtug] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-style: normal;
    font-weight: 700;
    font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    color: var(--ascend-primary);
}

.rc-quote blockquote.rc-q-long p[b-9em2kkwtug] {
    font-size: clamp(1.3rem, 1rem + 0.7vw, 1.65rem);
}

.rc-cite[b-9em2kkwtug] {
    display: block;
    margin-top: 14px;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ascend-text-primary);
}

/* --- the product example ------------------------------------------------- */

.rc-inset[b-9em2kkwtug] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 16px 16px;
    padding: 16px 20px 20px 60px;
    border-radius: 4px;
    color: #ffffff;
}

.rc-inset[b-9em2kkwtug] {
    background-color: var(--ascend-primary-dark);
}

.rc-inset-solo[b-9em2kkwtug] {
    margin-top: 16px;
    padding-left: 20px;
}

/* The source line's foot: an elbow and a dot where the quote meets its proof. */
.rc-inset:not(.rc-inset-solo)[b-9em2kkwtug]::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 0;
    width: 24px;
    height: 41px;
    border-left: 2px solid var(--ascend-secondary);
    border-bottom: 2px solid var(--ascend-secondary);
    border-bottom-left-radius: 8px;
}

.rc-inset:not(.rc-inset-solo)[b-9em2kkwtug]::after {
    content: "";
    position: absolute;
    left: 45px;
    top: 35px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--ascend-secondary);
}

.rc-head[b-9em2kkwtug] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    min-width: 0;
}

.rc-head-t[b-9em2kkwtug] {
    min-width: 0;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
}

/* "Example": every board and plan here is composed, and says so. */
.rc-example[b-9em2kkwtug] {
    margin-left: auto;
    flex: none;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 3px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #cbd5e1;
}

.rc-go[b-9em2kkwtug] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    padding: 0 16px;
    border: 1.5px solid var(--ascend-accent);
    border-radius: 4px;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    color: #ffffff;
}

/* Boards: StaticBoardDiagram, sized by its box. Its markup is a child component's, so ::deep. */
.rc-root[b-9em2kkwtug]  .sbd-board {
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.rc-ov[b-9em2kkwtug] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* r1: a weakness from your games becomes a drill */
.v1[b-9em2kkwtug] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "row go" "why why" "body body";
    column-gap: 16px;
    row-gap: 14px;
    align-items: center;
}

.v1-row[b-9em2kkwtug] {
    grid-area: row;
}

.v1-go[b-9em2kkwtug] {
    grid-area: go;
}

/* #9467: the dashboard pick's icon tile (CoachSessionBriefCard.razor.css .pick-icon: the accent
   glyph on its 10% tint, as the real "Tactical drill: Fork" row renders in the audit shot
   dashboard-demo-1440, sampled 49,221,227) and its evidence line, the diagnosis. */
.v1-ico[b-9em2kkwtug] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 18px;
    color: var(--ascend-accent);
}

.v1-ico[b-9em2kkwtug] {
    background-color: rgba(49, 221, 227, 0.1);
}

.v1-why[b-9em2kkwtug] {
    grid-area: why;
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.4;
    color: #cbd5e1;
}

.v1-body[b-9em2kkwtug] {
    grid-area: body;
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
}

/* #9465: the drill's own sidebar (PuzzleDrillSurface + ThemeDrill): the side-to-move pill, then
   the Score and Puzzle readout, in place of the queued minis. */
.v1-side[b-9em2kkwtug] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.v1-stat[b-9em2kkwtug] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.v1-stat-l[b-9em2kkwtug] {
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.v1-stat-v[b-9em2kkwtug] {
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 1.15rem;
    color: #ffffff;
}

.v1-main[b-9em2kkwtug] {
    position: relative;
}

/* Receipt 1's Example label sits on the board's empty bottom-left corner (a1, b1), on its own
   flat navy so axe can judge it over the squares. */
.v1-example[b-9em2kkwtug] {
    position: absolute;
    left: 6px;
    bottom: 6px;
    margin-left: 0;
}

.v1-example[b-9em2kkwtug] {
    background-color: var(--ascend-primary-dark);
}

/* r2: one study-plan day card (#9465), in the plan's own vocabulary: StudyPlan.razor.css's day
   card (today's left rule and tint, the "Today" chip, the day's minutes) and StudyTaskList.razor.css's
   row (checkbox, type badge, title, method chip, minutes). */
.v2[b-9em2kkwtug] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* The card fills the inset and its three rows share the height, so the stack's height (the
   tallest receipt's) leaves no dead band under the day. */
.v2-card[b-9em2kkwtug] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 4px 16px 6px;
    border-left: 3px solid var(--ascend-accent);
    border-radius: 3px;
}

/* Today's tint, rgba(49, 221, 227, 0.04) over the inset's navy, flattened so axe can judge it. */
.v2-card[b-9em2kkwtug] {
    background-color: #051f3c;
}

.v2-head[b-9em2kkwtug] {
    gap: 10px;
}

.v2-day-label[b-9em2kkwtug] {
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.15;
    color: #ffffff;
}

.v2-today[b-9em2kkwtug] {
    flex: none;
    padding: 2px 8px;
    border: 1px solid rgba(49, 221, 227, 0.45);
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
}

.v2-today[b-9em2kkwtug] {
    background-color: #09324d;
}

.v2-day-min[b-9em2kkwtug] {
    margin-left: auto;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
    color: #cbd5e1;
}

.v2-head .rc-example[b-9em2kkwtug] {
    margin-left: 4px;
}

.v2-tasks[b-9em2kkwtug] {
    flex: 1;
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.v2-task[b-9em2kkwtug] {
    flex: 1;
    display: grid;
    grid-template-columns: 20px 34px minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* An empty circle, as an unstarted task's checkbox (bi-circle). Drawn, not a control. */
.v2-check[b-9em2kkwtug] {
    width: 18px;
    height: 18px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
}

.v2-ico[b-9em2kkwtug] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    font-size: 1.05rem;
    line-height: 1;
}

.v2-ico[b-9em2kkwtug] {
    background-color: rgba(49, 221, 227, 0.1);
}

.v2-ico-drill[b-9em2kkwtug] {
    border-color: rgba(251, 191, 36, 0.2);
}

.v2-ico-drill[b-9em2kkwtug] {
    background-color: rgba(251, 191, 36, 0.1);
}

.v2-it[b-9em2kkwtug] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
}

.v2-title[b-9em2kkwtug] {
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--ascend-accent);
}

.v2-method[b-9em2kkwtug] {
    flex: none;
    padding: 1px 9px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: #cbd5e1;
}

.v2-method.core[b-9em2kkwtug] {
    border-color: rgba(49, 221, 227, 0.45);
    color: var(--ascend-accent);
}

.v2-min[b-9em2kkwtug] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
    color: #cbd5e1;
}

/* r3: a move and the reason */
.v3[b-9em2kkwtug] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.v3-head[b-9em2kkwtug] {
    gap: 24px;
    flex-wrap: wrap;
}

.v3-k[b-9em2kkwtug] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 1.15rem;
    color: #ffffff;
}

.v3-ring[b-9em2kkwtug] {
    flex: none;
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.v3-ring-d[b-9em2kkwtug] {
    border: 3px dashed #cbd5e1;
}

.v3-ring-s[b-9em2kkwtug] {
    border: 3px solid #cbd5e1;
}

.v3-body[b-9em2kkwtug] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: 22px;
    align-items: center;
    margin-top: 16px;
}

.v3-why[b-9em2kkwtug] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* #9465: the review's KEY MOMENTS card (GameAnalysis.razor.css .key-moments-card): the bolt, the
   amber move number, the verdict in upper case and the swing in the accent. */
.v3-km-h[b-9em2kkwtug] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: #e2e8f0;
}

.v3-km-i[b-9em2kkwtug] {
    flex: none;
    width: 16px;
    height: 16px;
    fill: #fbbf24;
}

.v3-km[b-9em2kkwtug] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
}

/* The row's rgba(255, 255, 255, 0.03), flattened over the inset's navy. */
.v3-km[b-9em2kkwtug] {
    background-color: #0b1e3b;
}

.v3-km-move[b-9em2kkwtug] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 0.85rem;
    color: #fbbf24;
}

.v3-km-move[b-9em2kkwtug] {
    background-color: #2f3638;
}

.v3-km-body[b-9em2kkwtug] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v3-km-type[b-9em2kkwtug] {
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e2e8f0;
}

.v3-km-eval[b-9em2kkwtug] {
    flex: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-accent);
}

.v3-line[b-9em2kkwtug] {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.45;
    color: #ffffff;
}

.v3-s2[b-9em2kkwtug] {
    color: #cbd5e1;
}

/* #9465: the moment's words sit inside the KEY MOMENTS row, a narrower box than the column. */
.v3-km .v3-line[b-9em2kkwtug] {
    font-size: 1rem;
    line-height: 1.4;
}

.v3-arw[b-9em2kkwtug] {
    stroke: #063a37;
    stroke-width: 0.24;
    stroke-linecap: round;
    opacity: 0.85;
}

.v3-ah[b-9em2kkwtug] {
    fill: #063a37;
    opacity: 0.85;
}

/* r4 (#9467): the Insights Phase Transitions card, labeled Example. Its parts in the card's own
   vocabulary: PhaseTransitionsCard.razor.css's split row and boundary rows (label, an 8px
   rounded track, the grade, and its bar tokens), and MirrorCard.razor.css's
   next-action pill for the trainer. */
.v4[b-9em2kkwtug] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 16px;
}

.v4-t[b-9em2kkwtug] {
    min-width: 0;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.v4-split[b-9em2kkwtug] {
    display: flex;
    justify-content: space-around;
    gap: 12px;
}

.v4-split[b-9em2kkwtug]  .stat-value {
    font-size: 1.75rem;
}

.v4-bars[b-9em2kkwtug] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v4-row[b-9em2kkwtug] {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
}

.v4-row-l[b-9em2kkwtug] {
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #cbd5e1;
}

.v4-track[b-9em2kkwtug] {
    display: block;
    height: 8px;
    border-radius: 50px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.08);
}

.v4-bar[b-9em2kkwtug] {
    display: block;
    height: 100%;
    border-radius: 50px;
}

.v4-bar.phase-good[b-9em2kkwtug] {
    background-color: var(--ascend-success);
}

.v4-bar.phase-ok[b-9em2kkwtug] {
    background-color: var(--ascend-secondary);
}

.v4-bar.phase-weak[b-9em2kkwtug] {
    background-color: var(--ascend-error);
}

.v4-row-v[b-9em2kkwtug] {
    text-align: right;
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

/* Part of the drawn example, not a control: a span in the Mirror's next-action pill, in its
   "Train this:" words (owner final ruling 2026-11-04 "e"). */
.v4-next[b-9em2kkwtug] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    padding: 0 16px;
    border: 1px solid rgba(49, 221, 227, 0.55);
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: var(--ascend-accent);
}

.v4-next[b-9em2kkwtug] {
    background-color: var(--ascend-primary-dark);
}

/* --- the controls: Pause first, then Previous, the picks, Next ------------- */

/* The bar comes FIRST in the markup so Pause is the first tab stop (APG carousel); on screen
   it stays under the card. Order only moves the box, so tab order still follows the markup. */
.rc-root[b-9em2kkwtug] {
    display: flex;
    flex-direction: column;
}

.rc-bar[b-9em2kkwtug] {
    order: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
}

/* Invisible until the script takes the card, but always in the layout, so revealing it
   moves nothing (CLS). Without the script there is nothing for them to do. */
.rc-root:not(.rc-ready) .rc-bar[b-9em2kkwtug] {
    visibility: hidden;
}

.rc-btn[b-9em2kkwtug],
.rc-pick[b-9em2kkwtug] {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.rc-btn[b-9em2kkwtug] {
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    color: #ffffff;
}

.rc-btn[b-9em2kkwtug],
.rc-pick[b-9em2kkwtug] {
    background-color: transparent;
}

.rc-btn:hover[b-9em2kkwtug] {
    border-color: var(--ascend-accent);
    color: var(--ascend-accent);
}

.rc-btn:focus-visible[b-9em2kkwtug],
.rc-pick:focus-visible[b-9em2kkwtug] {
    outline: 3px solid var(--ascend-accent);
    outline-offset: 3px;
}

.rc-btn svg[b-9em2kkwtug] {
    grid-area: 1 / 1;
    fill: currentColor;
}

.rc-chev[b-9em2kkwtug] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rc-pause[b-9em2kkwtug] {
    margin-right: 6px;
}

/* Pause while the pass runs, Play otherwise. */
.rc-pause .rc-i-pause[b-9em2kkwtug] {
    display: none;
}

.rc-pause.is-playing .rc-i-pause[b-9em2kkwtug] {
    display: block;
}

.rc-pause.is-playing .rc-i-play[b-9em2kkwtug] {
    display: none;
}

/* Before the script runs (and with it, before the pass starts) the label says Pause. */
.rc-root:not(.rc-ready) .rc-pause .rc-i-pause[b-9em2kkwtug] {
    display: block;
}

.rc-root:not(.rc-ready) .rc-pause .rc-i-play[b-9em2kkwtug] {
    display: none;
}

.rc-picks[b-9em2kkwtug] {
    display: flex;
}

.rc-pick[b-9em2kkwtug] {
    border: 0;
}

.rc-tk[b-9em2kkwtug] {
    display: block;
    width: 32px;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
}

/* WCAG 1.4.11: the track is the only visible part of a pick, so it must reach 3:1 over the
   hero navy. 0.45 is 4.25:1 (0.28 was 2.45:1); HomeReceiptsTests measures it. */
.rc-tk[b-9em2kkwtug] {
    background-color: rgba(255, 255, 255, 0.45);
}

.rc-pick:hover .rc-tk[b-9em2kkwtug] {
    background-color: rgba(255, 255, 255, 0.7);
}

.rc-tk-f[b-9em2kkwtug] {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
}

.rc-tk-f[b-9em2kkwtug] {
    background-color: var(--ascend-accent);
}

.rc-pick[aria-current="true"] .rc-tk-f[b-9em2kkwtug] {
    transform: none;
}

/* --- motion: one pass per receipt, opt-in -------------------------------- */

@keyframes rcFadeUp-b-9em2kkwtug { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rcFade-b-9em2kkwtug { from { opacity: 0; } to { opacity: 1; } }
@keyframes rcLift-b-9em2kkwtug { 0% { opacity: 0; transform: translateY(10px); } 60% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 1; transform: none; } }
@keyframes rcGrowY-b-9em2kkwtug { from { transform: scaleY(0); } to { transform: none; } }
@keyframes rcProg-b-9em2kkwtug { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
    .rc-ready .is-run .v1-row[b-9em2kkwtug] { animation: rcLift-b-9em2kkwtug 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    /* #9467: the diagnosis line follows its header, never shows before it. */
    .rc-ready .is-run .v1-why[b-9em2kkwtug] { animation: rcFadeUp-b-9em2kkwtug 0.45s ease 0.3s both; }
    .rc-ready .is-run .v1-main[b-9em2kkwtug] { animation: rcFadeUp-b-9em2kkwtug 0.55s ease 0.45s both; }
    .rc-ready .is-run .v1-side[b-9em2kkwtug] { animation: rcFadeUp-b-9em2kkwtug 0.5s ease 0.85s both; }
    .rc-ready .is-run .v1-go[b-9em2kkwtug] { animation: rcFadeUp-b-9em2kkwtug 0.45s ease 1.25s both; }

    .rc-ready .is-run .v2-head[b-9em2kkwtug] { animation: rcFade-b-9em2kkwtug 0.4s ease both; }
    .rc-ready .is-run .v2-task[b-9em2kkwtug] { animation: rcFadeUp-b-9em2kkwtug 0.45s ease both; }
    .rc-ready .is-run .v2-task:nth-child(1)[b-9em2kkwtug] { animation-delay: 0.45s; }
    .rc-ready .is-run .v2-task:nth-child(2)[b-9em2kkwtug] { animation-delay: 0.8s; }
    .rc-ready .is-run .v2-task:nth-child(3)[b-9em2kkwtug] { animation-delay: 1.15s; }

    .rc-ready .is-run .v3-head[b-9em2kkwtug] { animation: rcFade-b-9em2kkwtug 0.4s ease both; }
    .rc-ready .is-run .v3-board[b-9em2kkwtug] { animation: rcFadeUp-b-9em2kkwtug 0.5s ease 0.2s both; }
    .rc-ready .is-run .v3-arw[b-9em2kkwtug] { transform-box: fill-box; transform-origin: 50% 100%; animation: rcGrowY-b-9em2kkwtug 0.5s cubic-bezier(0.3, 0.7, 0.2, 1) 1.1s both; }
    .rc-ready .is-run .v3-ah[b-9em2kkwtug] { animation: rcFade-b-9em2kkwtug 0.2s ease 1.55s both; }
    .rc-ready .is-run .v3-km-h[b-9em2kkwtug] { animation: rcFade-b-9em2kkwtug 0.4s ease 1.4s both; }
    .rc-ready .is-run .v3-km-type[b-9em2kkwtug],
    .rc-ready .is-run .v3-km-eval[b-9em2kkwtug] { animation: rcFade-b-9em2kkwtug 0.4s ease 1.65s both; }
    .rc-ready .is-run .v3-s1[b-9em2kkwtug] { animation: rcFade-b-9em2kkwtug 0.4s ease 1.9s both; }
    .rc-ready .is-run .v3-s2[b-9em2kkwtug] { animation: rcFade-b-9em2kkwtug 0.4s ease 2.25s both; }

    /* #9467: the Phase Transitions card in reading order: title, the two figures, the two
       transition bars, then the next action (the counted sentence left the card, owner final
       ruling 2026-11-04 "d", so the next action takes its slot in the sequence). */
    .rc-ready .is-run .v4-head[b-9em2kkwtug] { animation: rcFade-b-9em2kkwtug 0.4s ease both; }
    .rc-ready .is-run .v4-split[b-9em2kkwtug] { animation: rcFadeUp-b-9em2kkwtug 0.45s ease 0.3s both; }
    .rc-ready .is-run .v4-bars[b-9em2kkwtug] { animation: rcFadeUp-b-9em2kkwtug 0.45s ease 0.65s both; }
    .rc-ready .is-run .v4-next[b-9em2kkwtug] { animation: rcFadeUp-b-9em2kkwtug 0.45s ease 1s both; }

    /* The active pick fills over the dwell while the pass runs. */
    .rc-rotating .rc-pick[aria-current="true"] .rc-tk-f[b-9em2kkwtug] { animation: rcProg-b-9em2kkwtug 8.5s linear both; }
    .rc-paused .rc-pick[aria-current="true"] .rc-tk-f[b-9em2kkwtug] { animation: rcProg-b-9em2kkwtug 8.5s linear both; animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
    .rc-slide[b-9em2kkwtug],
    .rc-slide.is-on[b-9em2kkwtug],
    .rc-slide.is-off[b-9em2kkwtug] {
        transition: none;
    }

    /* Reduced motion never rotates, so there is nothing to pause. */
    .rc-pause[b-9em2kkwtug] {
        display: none;
    }
}

/* --- phone ------------------------------------------------------------------ */

@media (max-width: 760px) {
    [b-9em2kkwtug] .rc-disclosure {
        padding: 14px 18px 0 52px;
        font-size: 0.875rem;
    }

    .rc-quote[b-9em2kkwtug] {
        padding: 14px 18px 18px 52px;
    }

    .rc-qm[b-9em2kkwtug] {
        left: 12px;
        top: 4px;
        font-size: 58px;
    }

    .rc-quote[b-9em2kkwtug]::before {
        left: 22px;
        top: 52px;
    }

    .rc-cite[b-9em2kkwtug] {
        font-size: 0.875rem;
    }

    .rc-inset[b-9em2kkwtug] {
        margin: 0 10px 10px;
        padding: 12px 12px 14px 34px;
    }

    .rc-inset-solo[b-9em2kkwtug] {
        padding-left: 12px;
    }

    .rc-inset:not(.rc-inset-solo)[b-9em2kkwtug]::before {
        left: 12px;
        width: 15px;
        height: 37px;
    }

    .rc-inset:not(.rc-inset-solo)[b-9em2kkwtug]::after {
        left: 22px;
        top: 31px;
        width: 9px;
        height: 9px;
    }

    .rc-head[b-9em2kkwtug] {
        min-height: 44px;
        gap: 8px;
    }

    .rc-head-t[b-9em2kkwtug] {
        font-size: 1.05rem;
    }

    .rc-bar[b-9em2kkwtug] {
        gap: 2px;
    }

    .rc-pause[b-9em2kkwtug] {
        margin-right: 4px;
    }

    /* #9465: the drill's sidebar left, "Start now" right (the base columns: minmax(0, 1fr)
       then auto). The sidebar gives way to the button, never the reverse. */
    .v1[b-9em2kkwtug] {
        grid-template-areas: "row row" "why why" "main main" "side go";
        row-gap: 12px;
        column-gap: 12px;
        align-items: end;
    }

    .v1-body[b-9em2kkwtug] {
        display: contents;
    }

    .v1-main[b-9em2kkwtug] {
        grid-area: main;
    }

    .v1-side[b-9em2kkwtug] {
        grid-area: side;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
    }

    .v1-stat-v[b-9em2kkwtug] {
        font-size: 1rem;
    }

    .v1-ico[b-9em2kkwtug] {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .v1-why[b-9em2kkwtug] {
        font-size: 0.9rem;
    }

    .v1-go[b-9em2kkwtug] {
        grid-area: go;
        justify-self: end;
    }

    .v2-card[b-9em2kkwtug] {
        padding: 2px 10px 6px;
    }

    .v2-day-label[b-9em2kkwtug] {
        font-size: 1.05rem;
    }

    /* The day's minutes drop under the day so the Example chip keeps the first line at 320. */
    .v2-head[b-9em2kkwtug] {
        flex-wrap: wrap;
        gap: 4px 8px;
        padding-top: 6px;
    }

    .v2-head .rc-example[b-9em2kkwtug] {
        margin-left: auto;
    }

    .v2-day-min[b-9em2kkwtug] {
        order: 1;
        flex-basis: 100%;
        margin-left: 0;
    }

    .v2-task[b-9em2kkwtug] {
        grid-template-columns: 18px 30px minmax(0, 1fr) auto;
        column-gap: 9px;
        padding: 10px 0;
    }

    .v2-check[b-9em2kkwtug] {
        width: 16px;
        height: 16px;
    }

    .v2-ico[b-9em2kkwtug] {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    .v2-title[b-9em2kkwtug] {
        font-size: 0.9rem;
    }

    .v2-method[b-9em2kkwtug] {
        font-size: 0.7rem;
    }

    .v2-min[b-9em2kkwtug],
    .v2-day-min[b-9em2kkwtug] {
        font-size: 0.8rem;
    }

    .v3-head[b-9em2kkwtug] {
        gap: 14px;
    }

    .v3-k[b-9em2kkwtug] {
        font-size: 0.95rem;
        gap: 7px;
    }

    .v3-ring[b-9em2kkwtug] {
        width: 17px;
        height: 17px;
    }

    .v3-body[b-9em2kkwtug] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 14px;
    }

    .v3-board[b-9em2kkwtug] {
        max-width: 200px;
    }

    .v3-line[b-9em2kkwtug],
    .v3-km .v3-line[b-9em2kkwtug] {
        font-size: 0.95rem;
    }

    .v3-km[b-9em2kkwtug] {
        padding: 8px;
    }

    .v4[b-9em2kkwtug] {
        gap: 12px;
    }

    .v4-t[b-9em2kkwtug] {
        font-size: 1.05rem;
    }

    .v4-split[b-9em2kkwtug]  .stat-value {
        font-size: 1.5rem;
    }

    .v4-row[b-9em2kkwtug] {
        grid-template-columns: 128px minmax(0, 1fr) 36px;
        gap: 8px;
    }

    .v4-row-l[b-9em2kkwtug] {
        font-size: 0.78rem;
    }
}
/* /Components/Pages/ImbalanceSpotDrill.razor.rz.scp.css */
.imbalance-spot-page[b-bdgi61qpgg] {
    padding-bottom: 2rem;
}

.drill-intro[b-bdgi61qpgg] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
}

.intro-description[b-bdgi61qpgg] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.intro-description em[b-bdgi61qpgg] {
    color: #31DDE3;
    font-style: italic;
}

.position-source[b-bdgi61qpgg] {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    font-size: 0.85rem;
    margin: 0.5rem 0 1rem 0;
}

.axis-list[b-bdgi61qpgg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    container-type: inline-size;
}

.axis-row[b-bdgi61qpgg] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.12);
    border-radius: 12px;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
}

/* #9060 round 2 - THE ROW STAYS INLINE ON A PHONE (claude1, 2026-10-23): label column, then
   the three sides on the same line. The label takes what the sides leave and wraps inside
   its own column ("Control of key squares" is two lines at 344); its floor is the widest
   single word, "Development", measured at 88.2px in condor 0.95rem, so 5.6rem (89.6px).
   break-word is only a guard for a fallback font: no word breaks in the brand font. */
.axis-label[b-bdgi61qpgg] {
    flex: 1 1 0;
    min-width: 5.6rem;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'condor', sans-serif;
    font-size: 0.95rem;
}

/* The sides share the group equally and give up WIDTH, never height, as the column narrows:
   14rem (the pre-#9060 three 70px buttons) where there is room, down to 11.75rem = three
   3.75rem buttons plus two 0.25rem gaps. 3.75rem (60px) is the narrowest readable side: the
   widest word, "Neither", is 48.8px at the 600 weight a selected or truth-marked button
   takes (measured), plus the 1px borders and a 0.25rem inset each side. */
.verdict-group[b-bdgi61qpgg] {
    display: flex;
    gap: 0.25rem;
    flex: 0 1 14rem;
    min-width: 11.75rem;
}

.verdict-btn[b-bdgi61qpgg] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.4rem 0.25rem;
    border-radius: 8px;
    font-family: 'condor', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}

/* #9060 - STACK ONLY WHERE THE INLINE ROW CANNOT FIT. The narrowest inline row is
   5.6rem label + 0.4rem gap + 11.75rem sides + 1.25rem row padding = 19rem, plus the 2px
   border: 306px at a 16px root, confirmed by a live sweep of the grid's width with this
   block removed (305px overruns, 306px fits; handoff "Chunk 1 round 2"). So the label takes
   its own line only in a container narrower than 19.25rem (308px): a 320px phone (288px
   grid) and the narrowest beside-the-board column. A 344px phone (312px grid), 390px
   (358px) and the 1440 column (320px) stay inline. Every term but the border is in rem, so a larger root
   font moves the threshold with the content.
   SOURCE ORDER IS LOAD-BEARING: a container query adds no specificity, so this block
   must come AFTER the base .axis-row / .axis-label / .verdict-group rules or they win
   every property both set (review round 1). ImbalanceSpotDrillDockTests pins the order
   and the threshold. */
@container (width < 19.25rem) {
    .axis-row[b-bdgi61qpgg] {
        flex-wrap: wrap;
        gap: 0.4rem 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .axis-label[b-bdgi61qpgg] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .verdict-group[b-bdgi61qpgg] {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* #9060 - the marks flip at verdict time, so the button's transition is verdict motion
   and runs only for members who allow motion (#8993 item 13). */
@media (prefers-reduced-motion: no-preference) {
    .verdict-btn[b-bdgi61qpgg] {
        transition: all 0.15s ease;
    }
}

.verdict-btn:hover[b-bdgi61qpgg] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.4);
    color: rgba(255, 255, 255, 0.95);
}

.verdict-btn.selected[b-bdgi61qpgg] {
    color: #ffffff;
    font-weight: 600;
}

.verdict-btn.selected.white[b-bdgi61qpgg] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}

.verdict-btn.selected.black[b-bdgi61qpgg] {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
}

.verdict-btn.selected.neither[b-bdgi61qpgg] {
    background: rgba(184, 133, 54, 0.25);
    border-color: #B88536;
}

.reveal-panel[b-bdgi61qpgg] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
}

.panel-wrap[b-bdgi61qpgg] {
    margin: 0.75rem 0;
}

.reveal-annotation[b-bdgi61qpgg] {
    margin-top: 0.5rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

.submit-btn[b-bdgi61qpgg] {
    margin-top: 1rem;
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 50px;
    padding: 0.875rem 1.25rem;
    font-family: 'condor', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.submit-btn:hover:not(:disabled)[b-bdgi61qpgg] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
}

.submit-btn:disabled[b-bdgi61qpgg] {
    opacity: 0.7;
    cursor: not-allowed;
}

.submit-btn[b-bdgi61qpgg]  i {
    font-size: 16px;
}

/* #9060 - Next is the dock's pinned button row: the dock's own gap spaces it, so the
   submit button's top margin would only add dead height to the clipped phone dock. */
.submit-btn.imbalance-next[b-bdgi61qpgg] {
    margin-top: 0;
}

/* #9060 - THE GRID CARRIES THE TRUTH once the read is in (see the page markup): the
   analyzer's side is marked on every row, the member's pick is marked against it where
   it differs, and the third side steps back. The marks speak the shared verdict colors
   (--ascend-success / --ascend-error, the tokens the overlay panel and the board frame
   use), the Pattern Recognition drill's choice marking, so a right row is never cyan
   under a green frame. */
.axis-row.is-right[b-bdgi61qpgg] {
    border-color: color-mix(in srgb, var(--ascend-success) 45%, transparent);
}

.axis-row.is-wrong[b-bdgi61qpgg] {
    border-color: color-mix(in srgb, var(--ascend-error) 45%, transparent);
}

.axis-mark[b-bdgi61qpgg] {
    margin-left: 0.35rem;
    font-size: 0.85rem;
}

.axis-row.is-right .axis-mark[b-bdgi61qpgg] {
    color: var(--ascend-success);
}

/* The lighter red: --ascend-error itself is 4.42:1 on the row's surface (#7291). */
.axis-row.is-wrong .axis-mark[b-bdgi61qpgg] {
    color: #f87171;
}

.verdict-btn:disabled[b-bdgi61qpgg] {
    cursor: default;
}

.verdict-btn:disabled:hover[b-bdgi61qpgg] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.verdict-btn.is-truth[b-bdgi61qpgg],
.verdict-btn.is-truth:disabled:hover[b-bdgi61qpgg] {
    color: #ffffff;
    font-weight: 600;
    border-color: color-mix(in srgb, var(--ascend-success) 80%, transparent);
    background: color-mix(in srgb, var(--ascend-success) 18%, transparent);
}

.verdict-btn.is-wrong-pick[b-bdgi61qpgg],
.verdict-btn.is-wrong-pick:disabled:hover[b-bdgi61qpgg] {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--ascend-error) 70%, transparent);
    background: color-mix(in srgb, var(--ascend-error) 12%, transparent);
    text-decoration: line-through;
}

.verdict-btn.dimmed[b-bdgi61qpgg] {
    opacity: 0.45;
}

/* #9060 - the axis grid's buttons are the drill's answer controls, and the dock's
   44px thumb rule reaches only its direct children (and only while a verdict is up),
   so the buttons themselves take the shared touch target on a touch screen. Pointer
   media, not width (app.css: a 1024px tablet is a touch device too). */
@media (hover: none) and (pointer: coarse) {
    .verdict-btn[b-bdgi61qpgg] {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/Journal.razor.rz.scp.css */
.journal-page[b-0a3zi77yju] {
    max-width: 900px;
    margin: 0 auto;
}

/* Compose section */
.compose-section[b-0a3zi77yju] {
    margin-bottom: 1.5rem;
}

.compose-trigger[b-0a3zi77yju] {
    width: 100%;
    padding: 1rem 1.25rem;
    background: rgba(49, 221, 227, 0.05);
    border: 1px dashed rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.15s ease;
    text-align: left;
}

.compose-trigger:hover[b-0a3zi77yju] {
    background: rgba(49, 221, 227, 0.1);
    border-color: var(--ascend-accent);
    color: rgba(255, 255, 255, 0.9);
}

.compose-form[b-0a3zi77yju] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.compose-title[b-0a3zi77yju] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: #ffffff;
    padding: 0.65rem 0.85rem;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
}

.compose-content[b-0a3zi77yju] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: #ffffff;
    padding: 0.65rem 0.85rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    resize: vertical;
}

.compose-meta-row[b-0a3zi77yju] {
    display: flex;
    gap: 0.75rem;
}

.compose-select[b-0a3zi77yju], .compose-tags[b-0a3zi77yju] {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    /* Tell the browser to render native dropdown widgets (open <select>) in dark
       mode. Without this the dropdown panel gets the OS default (white on white
       in some browsers) even though the closed <select> renders correctly. */
    color-scheme: dark;
}

/* Option rows in the opened dropdown — not every browser honors styling here,
   but Chromium + Firefox both do. Keeps readable contrast for the pillar list. */
.compose-select option[b-0a3zi77yju] {
    background: #0f172a;
    color: rgba(255, 255, 255, 0.9);
}

.compose-actions[b-0a3zi77yju] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Filter bar */
.journal-filters[b-0a3zi77yju] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-pill[b-0a3zi77yju] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-pill:hover[b-0a3zi77yju] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
}

.filter-pill.active[b-0a3zi77yju] {
    background: rgba(49, 221, 227, 0.18);
    border-color: var(--ascend-accent);
    color: #ffffff;
}

.filter-search-wrap[b-0a3zi77yju] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.filter-search[b-0a3zi77yju] {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 0.8rem;
    width: 140px;
    outline: none;
}

/* Feed */
.journal-feed[b-0a3zi77yju] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.journal-entry[b-0a3zi77yju] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.15s ease;
}

.journal-entry:hover[b-0a3zi77yju] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(49, 221, 227, 0.2);
}

.journal-entry.pinned[b-0a3zi77yju] {
    border-color: rgba(184, 133, 54, 0.4);
    background: rgba(184, 133, 54, 0.04);
}

.entry-icon[b-0a3zi77yju] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1rem;
}

.type-manual .entry-icon[b-0a3zi77yju] { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.type-reflection .entry-icon[b-0a3zi77yju] { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.type-selfreview .entry-icon[b-0a3zi77yju] { background: rgba(49, 221, 227, 0.15); color: var(--ascend-accent); }
.type-weaknessdetected .entry-icon[b-0a3zi77yju] { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.type-weaknessresolved .entry-icon[b-0a3zi77yju] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.type-milestonechapter .entry-icon[b-0a3zi77yju] { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.type-patterndetected .entry-icon[b-0a3zi77yju] { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.entry-body[b-0a3zi77yju] {
    flex: 1;
    min-width: 0;
}

.entry-header[b-0a3zi77yju] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.entry-title[b-0a3zi77yju] {
    color: #ffffff;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    flex: 1;
}

.entry-date[b-0a3zi77yju] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    flex-shrink: 0;
}

.entry-content[b-0a3zi77yju] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.4rem;
}

.entry-tags[b-0a3zi77yju] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.entry-tag[b-0a3zi77yju] {
    background: rgba(49, 221, 227, 0.1);
    color: var(--ascend-accent);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    text-transform: lowercase;
}

.entry-actions[b-0a3zi77yju] {
    display: flex;
    gap: 0.3rem;
    /* #7758 - the cluster holds a delete. Revealed on hover for a pointer,
       present at rest on a finger. */
    opacity: var(--hover-reveal-rest, 0);
    transition: opacity 0.15s;
}

.journal-entry:hover .entry-actions[b-0a3zi77yju] {
    opacity: 1;
}

.entry-action-btn[b-0a3zi77yju] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    transition: all 0.15s;
}

.entry-action-btn:hover[b-0a3zi77yju] {
    background: rgba(49, 221, 227, 0.15);
    color: var(--ascend-accent);
}

/* #7758 - red at REST. Pin and delete are the same 26px square; on touch they
   appear together with no hover to tell them apart. */
.entry-action-btn.danger[b-0a3zi77yju] {
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.entry-action-btn.danger:hover[b-0a3zi77yju] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--ascend-text-light);
}

/* Empty state */
.journal-empty[b-0a3zi77yju] {
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.journal-empty h3[b-0a3zi77yju] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    margin: 1rem 0 0.5rem;
}

.load-more[b-0a3zi77yju] {
    text-align: center;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .compose-meta-row[b-0a3zi77yju] {
        flex-direction: column;
    }

    .filter-search-wrap[b-0a3zi77yju] {
        margin-left: 0;
        width: 100%;
        margin-top: 0.5rem;
    }

    .filter-search[b-0a3zi77yju] {
        width: 100%;
    }
}
/* /Components/Pages/KnightVision.razor.rz.scp.css */
/* #7858 - NO page-level max-width and NO page grid. The drill rides the shared
   DrillShell, which owns the board column (600px cap) and the sidebar; a cap or
   a grid here is exactly what built the 648px board column that put pieces off
   their squares. See DrillShell.razor.css and DrillShellConvergenceTests. */

/* Shared with Board Vision — mode picker, HUD, question area */
.mode-override[b-54iqu7ijzw] { margin-top: 1.5rem; }
.mode-override-label[b-54iqu7ijzw] {
    display: flex; align-items: center; gap: 0.4rem;
    font-family: var(--ascend-font-secondary); font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55); letter-spacing: 0.5px;
    text-transform: uppercase; margin-bottom: 0.5rem;
}
.mode-override-label[b-54iqu7ijzw]  i { color: var(--ascend-accent); font-size: 0.9rem; }

.mode-grid[b-54iqu7ijzw] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
}
.mode-card[b-54iqu7ijzw] {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.8rem 0.5rem; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15); border-radius: 10px;
    cursor: pointer; text-align: center; color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary); transition: all 0.15s;
}
.mode-card:hover[b-54iqu7ijzw] { background: rgba(49, 221, 227, 0.06); border-color: rgba(49, 221, 227, 0.3); }
.mode-card.selected[b-54iqu7ijzw] { background: rgba(49, 221, 227, 0.12); border-color: #31DDE3; color: #fff; }
.mode-card[b-54iqu7ijzw]  i { font-size: 1.5rem; color: var(--ascend-accent); }
.mode-name[b-54iqu7ijzw] { font-weight: 600; font-size: 0.85rem; }
.mode-desc[b-54iqu7ijzw] { font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); }

/* #9084 - the miss teaching is no longer a full-screen overlay (the old teach overlay was
   position: fixed; inset: 0 over the board, the board-flood shape #8710 / #8991 ban).
   It is the shared VisionTeachPanel now, styled in its own stylesheet. */

/* Bug #6696 - the clock is genuinely stopped while the miss teaching is up, so the
   HUD says so instead of leaving a frozen number looking like a glitch. */
/* 0,4,0 so it outranks DrillShell's own chip value color (0,3,0). */
.shell-chip .shell-chip-value.clock-paused[b-54iqu7ijzw] { color: rgba(255, 255, 255, 0.6); }

.question-prompt[b-54iqu7ijzw] {
    font-family: var(--ascend-font-primary); font-size: 1.35rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.95); margin: 0; text-align: center;
}

/* #7914 - the named target list under the Fork Spotter prompt. The drill asks for
   a square that forks THESE pieces, so it has to say which ones; the board ring is
   the visual index and this is the channel that survives color blindness and a
   screenshot without the board. */
.fork-targets[b-54iqu7ijzw] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 0.4rem; margin-top: 0.5rem;
    font-family: var(--ascend-font-secondary);
}
.fork-targets-label[b-54iqu7ijzw] {
    font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.fork-target-chip[b-54iqu7ijzw] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.55rem; border-radius: 999px;
    background: rgba(184, 133, 54, 0.14);
    border: 1px solid rgba(184, 133, 54, 0.55);
    color: rgba(255, 255, 255, 0.92); font-size: 0.85rem; font-weight: 600;
}
.fork-target-glyph[b-54iqu7ijzw] { font-size: 1rem; line-height: 1; color: var(--ascend-secondary); }

/* Shown on a correct answer when the puzzle had more than one fork square, so
   finding a different one never reads as luck. */
.fork-also[b-54iqu7ijzw] {
    margin-top: 0.4rem; text-align: center;
    font-family: var(--ascend-font-secondary); font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.62);
}

.answer-buttons[b-54iqu7ijzw] { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.answer-btn[b-54iqu7ijzw] {
    min-width: 56px; padding: 0.8rem 1.2rem; font-family: var(--ascend-font-primary);
    font-size: 1.1rem; font-weight: 700; border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.9);
    cursor: pointer; transition: all 0.15s;
}
.answer-btn:hover:not(:disabled)[b-54iqu7ijzw] { background: rgba(49, 221, 227, 0.1); border-color: #31DDE3; }
.answer-btn.correct[b-54iqu7ijzw] { background: rgba(16, 185, 129, 0.2); border-color: #34d399; color: #34d399; }
.answer-btn.wrong[b-54iqu7ijzw] { background: rgba(239, 68, 68, 0.2); border-color: #f87171; color: #f87171; }

/* DrillShell's question panel is a stretch column, so single buttons opt out
   of full width and sit centered under the prompt. */
.submit-sight-btn[b-54iqu7ijzw], .hint-btn[b-54iqu7ijzw] { align-self: center; }
.submit-sight-btn[b-54iqu7ijzw] {
    margin-top: 0.75rem; padding: 0.6rem 2rem;
    background: linear-gradient(135deg, #31DDE3, #42e8ed);
    color: #0a1628; border: none; border-radius: 50px;
    font-family: var(--ascend-font-secondary); font-size: 0.9rem; font-weight: 700;
    cursor: pointer; box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: all 0.18s;
}
.submit-sight-btn:hover:not(:disabled)[b-54iqu7ijzw] { box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4); transform: translateY(-1px); }
.submit-sight-btn:disabled[b-54iqu7ijzw] { opacity: 0.5; cursor: not-allowed; }

.tour-success[b-54iqu7ijzw] { color: #34d399 !important; }
.hint-btn[b-54iqu7ijzw] {
    margin-top: 0.75rem; padding: 0.5rem 1.5rem;
    background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px; color: rgba(251, 191, 36, 0.8);
    font-family: var(--ascend-font-secondary); font-size: 0.8rem;
    cursor: pointer; transition: all 0.15s;
}
.hint-btn:hover:not(:disabled)[b-54iqu7ijzw] { background: rgba(251, 191, 36, 0.2); border-color: rgba(251, 191, 36, 0.5); }
.hint-btn:disabled[b-54iqu7ijzw] { opacity: 0.5; cursor: not-allowed; }
.hint-btn[b-54iqu7ijzw]  i { margin-right: 0.3rem; }

.minefield-fail[b-54iqu7ijzw] { color: #f87171 !important; }

@media (max-width: 768px) {
    .question-prompt[b-54iqu7ijzw] { font-size: 1.2rem; }
}

/* #7190 - slot for the icon + word verdict chip under the answer area. */
.answer-result-slot[b-54iqu7ijzw] {
    min-height: 2rem;
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
}
/* /Components/Pages/ListOfMistakes.razor.rz.scp.css */
.lom-page[b-s60gkrani0] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
}

.lom-toolbar[b-s60gkrani0] {
    display: flex;
    justify-content: flex-end;
}

.lom-toggle[b-s60gkrani0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}

.lom-toggle input[b-s60gkrani0] {
    accent-color: #31DDE3;
    width: 16px;
    height: 16px;
}

.lom-list[b-s60gkrani0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lom-card.resolved[b-s60gkrani0] {
    opacity: 0.65;
}

.lom-card-top[b-s60gkrani0] {
    margin-bottom: 0.6rem;
}

.lom-tags[b-s60gkrani0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lom-tag[b-s60gkrani0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.lom-tag.taxonomy[b-s60gkrani0] {
    background: rgba(49, 221, 227, 0.14);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.lom-tag.theme[b-s60gkrani0] {
    background: rgba(255, 255, 255, 0.05);
}

.lom-tag.clock[b-s60gkrani0] {
    background: rgba(184, 133, 54, 0.15);
    border-color: rgba(184, 133, 54, 0.4);
    color: #B88536;
}

.lom-tag.resurfaced[b-s60gkrani0] {
    background: rgba(184, 133, 54, 0.18);
    border-color: rgba(184, 133, 54, 0.5);
    color: var(--ascend-secondary-light);
}

.lom-tag.done[b-s60gkrani0] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

.lom-lesson[b-s60gkrani0] {
    margin: 0 0 0.6rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

.lom-meta[b-s60gkrani0] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
}
/* /Components/Pages/MaiaTraining.razor.rz.scp.css */
.maia-training-page[b-ulykaso3wv] {
    background: radial-gradient(circle at top, rgba(49, 221, 227, 0.08), transparent 50%),
                linear-gradient(180deg, #0f172a 0%, #0a1628 100%);
    padding: 2rem;
}

/* Loading */

/* ===================== */
/* Abandon Prompt        */
/* ===================== */
.abandon-prompt-container[b-ulykaso3wv] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.abandon-card[b-ulykaso3wv] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 24px;
    padding: 3rem;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
}

.abandon-title[b-ulykaso3wv] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 1.5rem 0 1rem;
}

.abandon-description[b-ulykaso3wv] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

.abandon-actions[b-ulykaso3wv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

/* ===================== */
/* Setup Phase           */
/* ===================== */
.setup-container[b-ulykaso3wv] {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.setup-card[b-ulykaso3wv] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    position: relative;
    overflow: hidden;
}

.setup-card[b-ulykaso3wv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
}

.section-heading[b-ulykaso3wv] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.section-description[b-ulykaso3wv] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.5rem;
}

/* Rating Grid */
.rating-grid[b-ulykaso3wv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.rating-card[b-ulykaso3wv] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rating-card:hover[b-ulykaso3wv] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.05);
}

.rating-card.selected[b-ulykaso3wv] {
    border-color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
    box-shadow: 0 0 20px rgba(49, 221, 227, 0.15);
}

.rating-number[b-ulykaso3wv] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.rating-card.selected .rating-number[b-ulykaso3wv] {
    color: #31DDE3;
}

.rating-label[b-ulykaso3wv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Color Selector */
.color-selector[b-ulykaso3wv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.color-card[b-ulykaso3wv] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.color-card:hover[b-ulykaso3wv] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.05);
}

.color-card.selected[b-ulykaso3wv] {
    border-color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
    box-shadow: 0 0 20px rgba(49, 221, 227, 0.15);
}

.piece-icon[b-ulykaso3wv] {
    font-size: 3rem;
    line-height: 1;
    color: #ffffff;
}

/* Black-color card uses the solid black king (♚) so the visual matches
   the label. On the dark theme the solid character would render
   invisible — text-shadow gives it a white edge so it reads as
   "the dark king with a contrast outline" rather than fading out. */
.black-color-card .piece-icon[b-ulykaso3wv] {
    color: #0f172a;
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.8),
         1px -1px 0 rgba(255, 255, 255, 0.8),
        -1px  1px 0 rgba(255, 255, 255, 0.8),
         1px  1px 0 rgba(255, 255, 255, 0.8);
}

/* Random card: gold die reads as "either side" and sets it apart from the
   two solid-color picks. */
.random-color-card .piece-icon[b-ulykaso3wv] {
    color: var(--ascend-secondary-light);
}

.color-label[b-ulykaso3wv] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
}

/* Opening Picker (PBI #5613) */
.opening-selector[b-ulykaso3wv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.opening-chip[b-ulykaso3wv] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 0.5rem 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.opening-chip:hover[b-ulykaso3wv] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.06);
    color: #ffffff;
}

.opening-chip.selected[b-ulykaso3wv] {
    border-color: #31DDE3;
    background: rgba(49, 221, 227, 0.15);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(49, 221, 227, 0.18);
}

/* Setup Actions */
.setup-actions[b-ulykaso3wv] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* Branch selector — PBI #5772 */
.setup-card-header[b-ulykaso3wv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.setup-card-footer[b-ulykaso3wv] {
    margin-top: 1rem;
    text-align: right;
}

.manage-library-link[b-ulykaso3wv] {
    color: #31DDE3;
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.manage-library-link:hover[b-ulykaso3wv] { text-decoration: underline; }

.branch-grid[b-ulykaso3wv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.branch-card[b-ulykaso3wv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.branch-card:hover[b-ulykaso3wv] {
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(49, 221, 227, 0.08);
    transform: translateY(-2px);
}

.branch-icon[b-ulykaso3wv] {
    font-size: 2rem;
    color: #31DDE3;
}

.branch-label[b-ulykaso3wv] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.branch-desc[b-ulykaso3wv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Saved-position picker */
.saved-positions-list[b-ulykaso3wv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.saved-position-row[b-ulykaso3wv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
}

.saved-position-row:hover[b-ulykaso3wv] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.06);
}

.saved-position-meta[b-ulykaso3wv] { flex: 1; min-width: 0; }

.saved-position-title[b-ulykaso3wv] {
    color: #ffffff;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.saved-position-sub[b-ulykaso3wv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

.saved-position-source[b-ulykaso3wv] {
    padding: 0.05rem 0.4rem;
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Captured-position summary card */
.captured-position-card .captured-fen[b-ulykaso3wv] {
    display: block;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    word-break: break-all;
}

/* ===================== */
/* Playing Phase         */
/* ===================== */
.playing-container[b-ulykaso3wv] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(300px, 600px) 320px;
    gap: 2rem;
    justify-content: center;
}

.board-column[b-ulykaso3wv] {
    display: flex;
    flex-direction: column;
    position: relative;
}

.board-area[b-ulykaso3wv] {
    aspect-ratio: 1;
    width: 100%;
}

/* Prescribed-opening banner (PBI #5613) */
.opening-banner[b-ulykaso3wv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.1) 0%, rgba(184, 133, 54, 0.1) 100%);
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
}

.opening-banner[b-ulykaso3wv]  i {
    flex-shrink: 0;
}

.opening-banner strong[b-ulykaso3wv] {
    color: #ffffff;
    font-weight: 600;
}

.sidebar-column[b-ulykaso3wv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.game-info-card[b-ulykaso3wv] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow: hidden;
    position: relative;
}

.game-info-card[b-ulykaso3wv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
}

.maia-badge[b-ulykaso3wv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(184, 133, 54, 0.15));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    padding: 0.5rem 1rem;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: #31DDE3;
    align-self: flex-start;
}

.game-stats[b-ulykaso3wv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* #6347 — these are a horizontal label-left / value-right info row, NOT the
   shared StatItem stacked tile, so they no longer squat on the reserved
   .stat-label / .stat-value vocabulary owned by Components/Shared/StatItem.
   font-weight / margin-bottom / line-height below were previously inherited
   from the global .stat-* block in app.css; they are declared explicitly so
   the rename is pixel-identical. */
.maia-info-row[b-ulykaso3wv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.maia-info-label[b-ulykaso3wv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-xs);
}

.maia-info-value[b-ulykaso3wv] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
}

/* "Maia is thinking..." affordance — shown while the engine computes its
   reply so the wait is visible instead of a frozen board. */
.maia-thinking[b-ulykaso3wv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(49, 221, 227, 0.85);
}

.maia-thinking[b-ulykaso3wv]  i {
    font-size: 16px;
}

/* Moves display */
.moves-display[b-ulykaso3wv] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.moves-display h4[b-ulykaso3wv] {
    font-family: var(--ascend-font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.75rem;
}

/* Bug #7180 - flex/wrap/gap on .moves-list and the whole .move-pair rule moved
   into LinearMoveList.razor.css, which owns the list's layout. The height budget
   and the gutter that keeps moves clear of the scrollbar are this panel's own
   decisions, so they stay here. */
[b-ulykaso3wv] .moves-list {
    max-height: 300px;
    padding-right: 0.5rem;
}

[b-ulykaso3wv] .move-number {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

[b-ulykaso3wv] .move {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ===================== */
/* Game Over Overlay     */
/* ===================== */
.gameover-overlay[b-ulykaso3wv] {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 8px;
    z-index: 10;
    animation: fadeIn-b-ulykaso3wv 0.3s ease;
}

@keyframes fadeIn-b-ulykaso3wv {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gameover-modal[b-ulykaso3wv] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.4);
    border-radius: 24px;
    padding: 2rem;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.6), 0 0 40px rgba(49, 221, 227, 0.15);
    position: relative;
    overflow: hidden;
}

.gameover-modal[b-ulykaso3wv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
}

.result-icon[b-ulykaso3wv] {
    margin-bottom: 0.75rem;
}

.result-title[b-ulykaso3wv] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.result-win[b-ulykaso3wv] {
    color: #10b981;
}

.result-loss[b-ulykaso3wv] {
    color: #ef4444;
}

.result-draw[b-ulykaso3wv] {
    color: #B88536;
}

.result-abandoned[b-ulykaso3wv] {
    color: rgba(255, 255, 255, 0.6);
}

.gameover-actions[b-ulykaso3wv] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-resign[b-ulykaso3wv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(239, 68, 68, 0.1);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-resign:hover:not(:disabled)[b-ulykaso3wv] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

.btn-resign:disabled[b-ulykaso3wv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-resign[b-ulykaso3wv]  i {
    font-size: 16px;
}

/* ===================== */
/* Responsive            */
/* ===================== */
@media (max-width: 768px) {
    .playing-container[b-ulykaso3wv] {
        grid-template-columns: 1fr;
        max-width: 600px;
    }

    .sidebar-column[b-ulykaso3wv] {
        order: 2;
    }

    .board-column[b-ulykaso3wv] {
        order: 1;
    }

    .maia-training-page[b-ulykaso3wv] {
        padding: 1rem;
    }

    .rating-grid[b-ulykaso3wv] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .rating-card[b-ulykaso3wv] {
        padding: 1rem;
    }

    .rating-number[b-ulykaso3wv] {
        font-size: 1.5rem;
    }

    .color-selector[b-ulykaso3wv] {
        gap: 0.75rem;
    }

    /* Three cards now share the row (White / Random / Black) — trim the
       padding and icon so they fit a phone without clipping. */
    .color-card[b-ulykaso3wv] {
        padding: 1rem 0.5rem;
    }

    .piece-icon[b-ulykaso3wv] {
        font-size: 2.25rem;
    }

    .color-label[b-ulykaso3wv] {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .rating-grid[b-ulykaso3wv] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* #5930 — tournament-prep time control picker */
.tc-grid[b-ulykaso3wv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tc-chip[b-ulykaso3wv] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 0.5rem 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tc-chip:hover[b-ulykaso3wv] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
}

.tc-chip.selected[b-ulykaso3wv] {
    border-color: #31DDE3;
    background: rgba(49, 221, 227, 0.15);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(49, 221, 227, 0.18);
}

.tc-custom[b-ulykaso3wv] {
    display: flex;
    gap: 1rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}

.tc-field[b-ulykaso3wv] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}

.tc-field input[b-ulykaso3wv] {
    width: 6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
}

.tc-field input:focus[b-ulykaso3wv] {
    outline: none;
    border-color: #31DDE3;
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

/* #6804 - catalog-driven tabiya picker (flag-gated) */
.tabiya-pick-list[b-ulykaso3wv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    max-height: 22rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.tabiya-pick-list > .opening-chip[b-ulykaso3wv] {
    align-self: flex-start;
}

.tabiya-pick-row[b-ulykaso3wv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.65rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tabiya-pick-row:hover[b-ulykaso3wv] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.06);
}

.tabiya-pick-row.selected[b-ulykaso3wv] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.12);
    box-shadow: 0 0 12px rgba(49, 221, 227, 0.18);
}

.tabiya-pick-name[b-ulykaso3wv] {
    font-weight: 600;
}

.tabiya-pick-meta[b-ulykaso3wv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.tabiya-pick-color[b-ulykaso3wv] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
}

.tabiya-preview[b-ulykaso3wv] {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.tabiya-preview-board[b-ulykaso3wv] {
    flex: 0 1 20rem;
    max-width: 20rem;
    min-width: 14rem;
}

.tabiya-preview-side[b-ulykaso3wv] {
    flex: 1 1 14rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tabiya-side-note[b-ulykaso3wv] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    line-height: 1.5;
}

.tabiya-side-note.off-primary[b-ulykaso3wv] {
    background: rgba(184, 133, 54, 0.1);
    border-color: rgba(184, 133, 54, 0.4);
}

.tabiya-line-note[b-ulykaso3wv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.tabiya-preview-controls[b-ulykaso3wv] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.classic-openings-toggle[b-ulykaso3wv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
}

.classic-openings-toggle .section-heading[b-ulykaso3wv] {
    margin: 0;
}

.classic-openings-toggle i[b-ulykaso3wv] {
    color: rgba(49, 221, 227, 0.85);
}

.color-card:disabled[b-ulykaso3wv] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* /Components/Pages/Marketing/AudienceSegments.razor.rz.scp.css */
.segments-tab[b-9eserfe5f4] {
    width: 100%;
}

.segments-grid[b-9eserfe5f4] {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.5rem;
}

@media (max-width: 980px) {
    .segments-grid[b-9eserfe5f4] {
        grid-template-columns: 1fr;
    }
}

/* --- Segment list --- */

.segment-rows[b-9eserfe5f4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.segment-row[b-9eserfe5f4] {
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
}

.segment-row.editing[b-9eserfe5f4] {
    border-color: var(--ascend-accent);
}

.segment-main[b-9eserfe5f4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.segment-name[b-9eserfe5f4] {
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
}

.segment-badge[b-9eserfe5f4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.segment-badge.system[b-9eserfe5f4] {
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.5);
}

.segment-badge.priority[b-9eserfe5f4] {
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.segment-desc[b-9eserfe5f4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.35rem 0 0;
    line-height: 1.5;
}

.segment-actions[b-9eserfe5f4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.segment-count[b-9eserfe5f4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ascend-accent);
}

.link-btn[b-9eserfe5f4] {
    background: transparent;
    border: none;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.link-btn:hover[b-9eserfe5f4] {
    text-decoration: underline;
}

.link-btn.danger[b-9eserfe5f4] {
    color: var(--ascend-error);
}

.sep[b-9eserfe5f4] {
    color: rgba(255, 255, 255, 0.3);
}

.list-footer[b-9eserfe5f4] {
    margin-top: 1rem;
}

/* --- Editor form (matches the sibling ContactsEmail field chrome) --- */

.field[b-9eserfe5f4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.field-row[b-9eserfe5f4] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 560px) {
    .field-row[b-9eserfe5f4] {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

/* DIRECT child only (#6693). As a descendant selector this also matched the
   .check-inline labels nested in .check-row, and at (0,1,1) it outranked
   .check-inline (0,1,0) - so every tier/role NAME rendered in the field-caption
   treatment: uppercase, 700, letter-spaced. Verified by rendering at
   1920/1440/1280/1024/768. */
.field > label[b-9eserfe5f4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
}

/* DIRECT children only, same reason (#6693): as a descendant selector the
   width: 100% below also hit the checkboxes nested in .check-row, stretching a
   box to the full width of its row (measured: a two-word label blew the box out
   to 55.7px and wrapped the name). Every control that WANTS this chrome is a
   direct child of .field. */
.field > input[b-9eserfe5f4],
.field > select[b-9eserfe5f4] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: var(--ascend-text-light);
    padding: 0.6rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.field > input:focus[b-9eserfe5f4],
.field > select:focus[b-9eserfe5f4] {
    outline: none;
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.clause-heading[b-9eserfe5f4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.85);
    margin: 1.25rem 0 0.75rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    padding-top: 1rem;
}

.check-row[b-9eserfe5f4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* A checkbox ROW: box first, name beside it. The explicit caption resets are
   deliberate - this label sits inside .field, a magnet for caption styling
   leaking down (#6693). */
.check-inline[b-9eserfe5f4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

/* Sized by the platform widget, never by a stray width from field chrome. */
.check-inline input[type="checkbox"][b-9eserfe5f4] {
    flex: 0 0 auto;
    width: auto;
    height: auto;
}

.hint[b-9eserfe5f4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
}

.hint code[b-9eserfe5f4] {
    color: var(--ascend-accent);
    font-size: 0.72rem;
}

/* --- Preview + messages --- */

.preview-box[b-9eserfe5f4] {
    margin-top: 1rem;
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    text-align: center;
}

.big-count[b-9eserfe5f4] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: var(--ascend-accent);
    margin: 0;
}

.sample[b-9eserfe5f4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.sample-email[b-9eserfe5f4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.message[b-9eserfe5f4] {
    margin-top: 1rem;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.message.success[b-9eserfe5f4] {
    color: var(--ascend-success);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.message.error[b-9eserfe5f4] {
    color: var(--ascend-error);
    border: 1px solid rgba(239, 68, 68, 0.35);
}
/* /Components/Pages/Marketing/CampaignConsole.razor.rz.scp.css */
.console[b-tm4f43p0ju] {
    width: 100%;
}

/* --- Preset launchers --- */

.preset-row[b-tm4f43p0ju] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.preset-card[b-tm4f43p0ju] {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.15s ease;
}

.preset-card:hover[b-tm4f43p0ju] {
    border-color: var(--ascend-accent);
}

.preset-name[b-tm4f43p0ju] {
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

.preset-desc[b-tm4f43p0ju] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

/* --- Campaign history rows --- */

.camp-rows[b-tm4f43p0ju] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.camp-row[b-tm4f43p0ju] {
    border: 1px solid rgba(49, 221, 227, 0.12);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
}

.camp-main[b-tm4f43p0ju] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.camp-name[b-tm4f43p0ju] {
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

.camp-badge[b-tm4f43p0ju] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.camp-badge.status.sent[b-tm4f43p0ju],
.camp-badge.status.sending[b-tm4f43p0ju] {
    color: var(--ascend-accent);
    border-color: rgba(49, 221, 227, 0.5);
}

.camp-badge.status.canceled[b-tm4f43p0ju] {
    color: var(--ascend-error);
    border-color: rgba(239, 68, 68, 0.4);
}

.camp-when[b-tm4f43p0ju] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

.camp-funnel[b-tm4f43p0ju] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
}

.camp-actions[b-tm4f43p0ju] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* --- Editor --- */

.editor-head[b-tm4f43p0ju] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.editor-head h3[b-tm4f43p0ju] {
    font-family: var(--ascend-font-primary);
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.editor-grid[b-tm4f43p0ju] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 980px) {
    .editor-grid[b-tm4f43p0ju] {
        grid-template-columns: 1fr;
    }
}

.seg-list[b-tm4f43p0ju] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.4rem;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.6rem;
}

/* --- Shared field chrome (mirrors the Segments editor) --- */

.field[b-tm4f43p0ju] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

/* DIRECT child only. As a descendant selector this also styled the nested
   .check-inline labels inside .seg-list - and at (0,1,1) it outranked
   .check-inline (0,1,0), so every segment NAME rendered in the field-caption
   treatment: uppercase, 700, letter-spaced. Long names ("Trial non-converters")
   then wrapped to two lines and the rows fell out of alignment. */
.field > label[b-tm4f43p0ju] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
}

/* DIRECT children only, for the same reason .field > label is. As a descendant
   selector this ALSO matched the segment checkboxes nested in .seg-list, and the
   width: 100% below stretched each checkbox to the full width of its row: the box
   painted mid-row, the name span was squeezed to zero width and shoved past the
   right edge, and .seg-list grew a horizontal scrollbar (its overflow-y: auto
   makes overflow-x compute to auto, so the overflow is scrollable, not clipped).
   Measured at 1920/1440/1280/1024/768: checkbox width == row width, 76px of
   horizontal overflow at every viewport. Every input/textarea that WANTS this
   chrome is a direct child of .field, so the child combinator loses nothing. */
.field > input[b-tm4f43p0ju],
.field > textarea[b-tm4f43p0ju] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: var(--ascend-text-light);
    padding: 0.6rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.body-input[b-tm4f43p0ju] {
    resize: vertical;
    line-height: 1.5;
}

.field > input:focus[b-tm4f43p0ju],
.field > textarea:focus[b-tm4f43p0ju] {
    outline: none;
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

/* A checkbox ROW: box first, name beside it, both hard-left. The explicit
   text-transform/weight/letter-spacing/align resets are deliberate - this label
   sits inside .field, so it is a magnet for any caption styling that leaks down.
   Without them the row inherits right-alignment from an ancestor and the boxes
   stagger horizontally as each name wraps to a different width. */
.check-inline[b-tm4f43p0ju] {
    display: flex;
    align-items: center;
    align-self: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

/* Never let the box shrink or wrap away from its name, and never let a width
   leak in from field chrome again (see #6693 above) - the box is sized by the
   platform widget, not by the row. */
.check-inline input[type="checkbox"][b-tm4f43p0ju] {
    flex: 0 0 auto;
    margin: 0;
    width: auto;
    height: auto;
}

.check-inline span[b-tm4f43p0ju] {
    flex: 1 1 auto;
    min-width: 0;
}

.link-btn[b-tm4f43p0ju] {
    background: transparent;
    border: none;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.link-btn:hover[b-tm4f43p0ju] {
    text-decoration: underline;
}

.link-btn.danger[b-tm4f43p0ju] {
    color: var(--ascend-error);
}

.sep[b-tm4f43p0ju] {
    color: rgba(255, 255, 255, 0.3);
}

.action-row[b-tm4f43p0ju],
.send-bar[b-tm4f43p0ju] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1rem;
}

.hint[b-tm4f43p0ju] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
}

/* --- Preview + messages --- */

.preview-box[b-tm4f43p0ju] {
    margin-top: 1rem;
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    text-align: center;
}

.big-count[b-tm4f43p0ju] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: var(--ascend-accent);
    margin: 0;
}

.sample[b-tm4f43p0ju] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.sample-email[b-tm4f43p0ju] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.message[b-tm4f43p0ju] {
    margin-top: 1rem;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.message.success[b-tm4f43p0ju] {
    color: var(--ascend-success);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.message.error[b-tm4f43p0ju] {
    color: var(--ascend-error);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

/* --- Results funnel + recipient drill --- */

.funnel-tiles[b-tm4f43p0ju] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.tile[b-tm4f43p0ju] {
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.9rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.03);
}

.tile-num[b-tm4f43p0ju] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ascend-accent);
}

.tile-label[b-tm4f43p0ju] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.6);
}

.recip-table[b-tm4f43p0ju] {
    display: flex;
    flex-direction: column;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
}

.recip-head[b-tm4f43p0ju],
.recip-row[b-tm4f43p0ju] {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr 1.2fr 1.2fr;
    gap: 0.5rem;
    padding: 0.5rem 0.4rem;
    align-items: center;
}

.recip-head[b-tm4f43p0ju] {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.recip-row[b-tm4f43p0ju] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.75);
}

.recip-email[b-tm4f43p0ju] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recip-status[b-tm4f43p0ju] {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.recip-status.opened[b-tm4f43p0ju],
.recip-status.clicked[b-tm4f43p0ju],
.recip-status.sent[b-tm4f43p0ju] {
    color: var(--ascend-accent);
}

.recip-status.bounced[b-tm4f43p0ju],
.recip-status.failed[b-tm4f43p0ju] {
    color: var(--ascend-error);
}

/* --- #7201 Event early access preset (one paste, no membership routing) --- */

.event-days[b-tm4f43p0ju] {
    max-width: 8rem;
}

.event-split[b-tm4f43p0ju] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* --- #7205 One screen: unified list + audience built while composing --- */

/*
   An honest blank rather than a confident zero. A campaign with no per-recipient
   rows never measured opens or clicks, so its funnel is not "0% opened" - it is
   not a funnel at all, and the row says so in muted type.
*/
.untracked[b-tm4f43p0ju] {
    font-style: italic;
    color: var(--ascend-text-muted);
}

.fail-count[b-tm4f43p0ju] {
    color: var(--ascend-error);
}

/* The segment editor, opened in place inside the composer's AUDIENCE card.
   Set off by spacing rather than a rule: the editor brings its own Card chrome,
   and a divider on top of that reads as a box inside a box. */
.inline-audience[b-tm4f43p0ju] {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* --- #7228 lifecycle, carried in from the folded Campaign History screen ---
   Terminal-but-unsuccessful states keep the tinted-pill treatment they had
   there: an abort or an interruption is supposed to stand out from the quiet
   badge idiom around it. */

.camp-badge.status.aborted[b-tm4f43p0ju] {
    /* NOT var(--ascend-error) (#ef4444). That token on its own 12% tint composites
       to 4.27:1 over the dark page - just under the 4.5:1 AA bar - and the #7222
       contrast ratchet fails the build on it. One step lighter gives 5.81:1 with no
       change to the hue. This is the SAME pattern #7232 records at ~51 other sites
       (error red on its own tint, 4.13-4.36:1); when that item lands a corrected
       on-tint error token, this literal should be replaced by it. */
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}

.camp-badge.status.interrupted[b-tm4f43p0ju] {
    color: var(--ascend-secondary);
    background: rgba(184, 133, 54, 0.12);
    border-color: rgba(184, 133, 54, 0.35);
}

.camp-badge.status.partial[b-tm4f43p0ju] {
    color: var(--ascend-secondary);
    background: rgba(184, 133, 54, 0.12);
    border-color: rgba(184, 133, 54, 0.3);
}

/* Reason line under an Aborted/Interrupted row. Clamped so a long log-grade
   reason never blows up the row; the full text rides the title tooltip. */
.status-reason[b-tm4f43p0ju] {
    margin-top: 0.35rem;
    max-width: 34rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[b-tm4f43p0ju] .resume-button {
    margin-left: 0.5rem;
}

/* Audience pills - which population(s) a contacts-email send reached. Carried
   from the folded history screen so the fold does not erase the answer. */
.aud-pill[b-tm4f43p0ju] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}

.aud-pill.aud-mailing-list[b-tm4f43p0ju] {
    color: rgba(49, 221, 227, 0.95);
    background: rgba(49, 221, 227, 0.12);
    border-color: rgba(49, 221, 227, 0.4);
}

.aud-pill.aud-users[b-tm4f43p0ju] {
    /* The history screen's rgba(184, 133, 54, 0.95) measured 4.41:1 on its own
       tint - it sat in the #7222 exemption list. Moving the rule is the moment
       to fix it, not re-grandfather it: the lighter gold token clears AA at
       5.73:1 on the same tint. */
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.12);
    border-color: rgba(184, 133, 54, 0.4);
}

.aud-pill.aud-mixed[b-tm4f43p0ju] {
    color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(184, 133, 54, 0.15));
    border-color: rgba(255, 255, 255, 0.3);
}

/* #7280 - the audience SCOPE, stated next to the count. The two states are
   deliberately not the same object: reaching the entire list is a different act
   from reaching a slice of it, and the screen has to say which one is loaded
   before the send button is reachable. Mirrors the #7229 treatment on
   ContactsEmail so the two send screens read the same way. */
.audience-scope[b-tm4f43p0ju] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
}

.audience-scope-full[b-tm4f43p0ju] {
    color: var(--ascend-warning);
    background: color-mix(in srgb, var(--ascend-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-warning) 45%, transparent);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.audience-scope-targeted[b-tm4f43p0ju] {
    color: var(--ascend-text-light);
    background: color-mix(in srgb, var(--ascend-text-light) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-text-light) 10%, transparent);
}

/* #7280 - body of the full-list type-to-confirm gate. The shared Modal owns the
   chrome; this is only the copy and the input the operator has to type into. */
.confirm-content p[b-tm4f43p0ju] {
    font-family: var(--ascend-font-secondary);
    margin: 0 0 0.75rem;
}

.confirm-content input[b-tm4f43p0ju] {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    background: color-mix(in srgb, var(--ascend-text-light) 5%, transparent);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
}

.confirm-content input:focus[b-tm4f43p0ju] {
    outline: none;
    border-color: var(--ascend-accent);
}

/* #9260 - the approval status beside the send buttons (approvers only). */
.approval-status[b-tm4f43p0ju] {
    flex: 1 1 16rem;
    min-width: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    overflow-wrap: anywhere;
}

.approval-status.approved[b-tm4f43p0ju] {
    color: var(--ascend-accent);
}
/* /Components/Pages/Marketing/Communications.razor.rz.scp.css */
/* Consolidated communications surface — tab bar above the active screen. */
.comms-shell[b-hcybmcetf9] { display: flex; flex-direction: column; }

.comms-tabs[b-hcybmcetf9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 1rem 1.5rem 0;
    border-bottom: 1px solid rgba(49, 221, 227, 0.2);
}

.comms-tab[b-hcybmcetf9] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: 12px 12px 0 0;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.9rem;
    border: 1px solid transparent;
    border-bottom: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.comms-tab:hover[b-hcybmcetf9] { color: #fff; background: rgba(255, 255, 255, 0.04); }

.comms-tab.active[b-hcybmcetf9] {
    color: var(--ascend-accent);
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border-color: rgba(49, 221, 227, 0.3);
}

.comms-body[b-hcybmcetf9] { padding-top: 0.5rem; }
/* /Components/Pages/Marketing/ContactsEmail.razor.rz.scp.css */
.contacts-email-page[b-cmldcm57cw] {
    width: 100%;
}

.compose-grid[b-cmldcm57cw] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .compose-grid[b-cmldcm57cw] {
        grid-template-columns: 1fr;
    }
}

/* #8439 - the mailing-list suppression panel, full width below the compose grid. */
.suppression-section[b-cmldcm57cw] {
    margin-top: 1.5rem;
    min-width: 0;
}

.field[b-cmldcm57cw] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

/* Mobile-first: single column; two-up once there's room (>=480px). */
.field-row[b-cmldcm57cw] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 480px) {
    .field-row[b-cmldcm57cw] {
        grid-template-columns: 1fr 1fr;
    }
}

/* DIRECT children only (#6693). As a descendant selector this also matched the
   .audience-toggle and .multi-row labels nested inside .field, and at (0,1,1) it
   outranked them - so "Mailing list", "App users" and every recipient
   row rendered in the field-caption treatment: uppercase, 700, letter-spaced.
   Verified by rendering at 1920/1440/1280/1024/768. .multi-header > label IS a
   field caption (it just shares its line with the select-all actions), so it
   keeps the treatment explicitly. */
.field > label[b-cmldcm57cw],
.multi-header > label[b-cmldcm57cw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
}

/* DIRECT children only, same reason (#6693): as a descendant selector the
   width: 100% below reached the checkboxes nested in .audience-row/.multi-list.
   Every control that WANTS this chrome - including .multi-search - is a direct
   child of .field. */
.field > input[b-cmldcm57cw],
.field > select[b-cmldcm57cw],
.field > textarea[b-cmldcm57cw] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: #fff;
    padding: 0.6rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.field > input:focus[b-cmldcm57cw],
.field > select:focus[b-cmldcm57cw],
.field > textarea:focus[b-cmldcm57cw] {
    outline: none;
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.field > textarea[b-cmldcm57cw] {
    font-family: 'Consolas', 'Courier New', monospace;
    resize: vertical;
}

/* Bug #7800 - was rgba(255,255,255,0.45), which axe-core 4.10.2 measures at
   4.48:1 against the #0a1628 card surface: a rounding-margin miss of the 4.5:1
   AA floor for text this small. 0.6 measures 7.05:1 and is the value the
   preview pane already uses, so the two hint families now match instead of
   drifting a hair apart for no reason. */
.field .hint[b-cmldcm57cw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Bug #7800 - links inside a hint. Without this they inherit the GLOBAL
   `a { color: var(--ascend-primary) }` from app.css, which is #042047 deep
   navy - the brand color, chosen for light chrome, and effectively invisible
   on a dark card (measured 1.12:1 on the "View sent campaigns" link, against
   a 4.5:1 requirement). Every other page in the app that puts a link inside
   hint-class copy already declares this same override locally
   (Profile `.form-hint a`, SocialCompose `.compose-hint a`, CoachStudio
   `.studio-import-hint a`, the unsubscribe cards' `.unsub-card a`); this file
   was the one that never did. The accent measures 10.86:1 here.
   Scoped CSS appends the b-* attribute to the LAST compound selector, so this
   compiles to `.hint a[b-...]` - the anchor is authored in this component, so
   it carries the scope and the rule matches. Specificity 0-2-1 also out-ranks
   the global `a:hover` (0-1-1), which is why the hover color is restated
   rather than left to the global rule. */
.hint a[b-cmldcm57cw] {
    color: var(--ascend-accent);
    /* #8705 - the link sits inside a sentence: an underline, not just color (WCAG 1.4.1). */
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.hint a:hover[b-cmldcm57cw] {
    color: var(--ascend-accent-light);
    text-decoration: underline;
}

/* .action-row chrome comes from the shared primitive in app.css
   (mobile-first stack -> horizontal wrap >=480px). */

/* Multiselect picker for specific-emails mode */
.multi-header[b-cmldcm57cw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.multi-actions[b-cmldcm57cw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
}

.link-btn[b-cmldcm57cw] {
    background: transparent;
    border: none;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.link-btn:hover[b-cmldcm57cw] {
    text-decoration: underline;
}

.multi-actions .sep[b-cmldcm57cw] {
    color: rgba(255, 255, 255, 0.3);
}

.multi-search[b-cmldcm57cw] {
    margin-top: 0.4rem;
}

.multi-list[b-cmldcm57cw] {
    margin-top: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 8px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.multi-row[b-cmldcm57cw] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.multi-row:hover[b-cmldcm57cw] {
    background: rgba(49, 221, 227, 0.06);
}

.multi-row.picked[b-cmldcm57cw] {
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.25);
    padding: calc(0.45rem - 1px) calc(0.6rem - 1px);
}

.multi-row input[type="checkbox"][b-cmldcm57cw] {
    accent-color: var(--ascend-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.multi-email[b-cmldcm57cw] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-meta[b-cmldcm57cw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.multi-source[b-cmldcm57cw] {
    background: rgba(184, 133, 54, 0.15);
    color: var(--ascend-secondary);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Bug #7800 - the third rgba(255,255,255,0.45) in this file, and the same
   4.48:1 miss as the two above. Renders only in "Specific emails" mode with no
   matches, which is why no scan had met it. */
.multi-empty[b-cmldcm57cw] {
    padding: 1rem;
    text-align: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.message[b-cmldcm57cw] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.message.success[b-cmldcm57cw] {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.message.error[b-cmldcm57cw] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--ascend-text-light);
}

.preview-pane h3[b-cmldcm57cw] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.5rem 0;
}

.big-count[b-cmldcm57cw] {
    font-family: var(--ascend-font-primary);
    font-size: 3rem;
    font-weight: 800;
    color: var(--ascend-accent);
    margin: 0.5rem 0 0;
    line-height: 1;
}

.preview-pane .hint[b-cmldcm57cw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

/* #7229 - the audience SCOPE, stated next to the count. The two states are
   deliberately not the same object: reaching the entire list is a different act
   from reaching a slice of it, and the screen has to say which one is loaded
   before the send button is reachable. */
.audience-scope[b-cmldcm57cw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
}

.audience-scope-full[b-cmldcm57cw] {
    color: var(--ascend-warning);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.45);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.audience-scope-targeted[b-cmldcm57cw] {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Bug #7800 - was rgba(255,255,255,0.4) = 3.79:1, a genuine AA failure that
   the release walk's axe run never reported because none of the three muted
   lines (dual-audience split, unsubscribe count, suppression result) were
   rendering at the time. An axe run that finds nothing because nothing
   rendered is not a clean run. 0.55 measures 6.09:1 and still reads a step
   quieter than the 0.6 base hint above. */
.preview-pane .hint.muted[b-cmldcm57cw] {
    color: rgba(255, 255, 255, 0.55);
}

.preview-pane hr[b-cmldcm57cw] {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 1rem 0;
}

.sample[b-cmldcm57cw] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Bug #7800 - measured 4.48:1 by axe once the preview actually returned sample
   addresses. Same 0.45 alpha, same miss; it only renders when the recipient
   query comes back non-empty, so the release walk's scan never saw it either. */
.sample-label[b-cmldcm57cw] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sample-email[b-cmldcm57cw] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    width: fit-content;
}

/* Confirm modal — #6347: .confirm-overlay and the .confirm-modal card (plus its
   own <h3> title and the .action-row button row) are gone. The shared <Modal>
   owns the overlay, dialog card, title and footer. Only the body content styling
   remains. <ConfirmDialog> was NOT the right shared component here: it has no
   input slot, and this gate is type-to-confirm. */
.confirm-content p[b-cmldcm57cw] {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.confirm-content input[b-cmldcm57cw] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    color: #fff;
    padding: 0.6rem 0.75rem;
    font-family: 'Consolas', monospace;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    margin: 0.75rem 0 0;
}

/* Audience selector — multiselect checkboxes for which population(s) the
   campaign targets. Default is mailing-list-only, matching the page's
   original behavior; checking App users unions in confirmed-email users. */
.audience-row[b-cmldcm57cw] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 0.5rem;
}

.audience-toggle[b-cmldcm57cw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.audience-toggle input[type="checkbox"][b-cmldcm57cw] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--ascend-accent);
    cursor: pointer;
}

.audience-hint[b-cmldcm57cw] {
    margin: 0.65rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.45;
}
/* /Components/Pages/Marketing/DemoPipeline.razor.rz.scp.css */
/* #9258: the layout is the shared .action-row (full-width stack on a phone, a row above 480px) now that the
   toolbar holds two buttons; this rule only spaces it from the board. */
.dp-toolbar[b-wh2dzha5vq] {
    margin-bottom: 1.25rem;
}

.dp-error[b-wh2dzha5vq] {
    color: #fca5a5;
    font-size: 0.9rem;
}

.dp-dim[b-wh2dzha5vq] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}

.dp-hint[b-wh2dzha5vq] {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

/* ── Board ─────────────────────────────────────────────────────── */

/* Columns == statuses (#6381): eight fixed-width columns that scroll horizontally
   rather than shrinking to nothing. The board owns the horizontal scroll; the page
   body never scrolls sideways. */
.dp-board[b-wh2dzha5vq] {
    display: flex;
    gap: 1rem;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 0.85rem;
    scroll-snap-type: x proximity;
}

.dp-board[b-wh2dzha5vq]::-webkit-scrollbar {
    height: 10px;
}

.dp-board[b-wh2dzha5vq]::-webkit-scrollbar-thumb {
    background: rgba(49, 221, 227, 0.25);
    border-radius: 50px;
}

.dp-column[b-wh2dzha5vq] {
    flex: 0 0 clamp(220px, 20vw, 280px);
    scroll-snap-align: start;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(10, 22, 40, 0.5));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 0.75rem;
    min-height: 120px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* Column highlighted while a card from another column is dragged over it. */
.dp-drop-target[b-wh2dzha5vq] {
    border-color: #31DDE3;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.12), rgba(10, 22, 40, 0.5));
    box-shadow: 0 0 0 1px rgba(49, 221, 227, 0.4), 0 0 24px rgba(49, 221, 227, 0.15) inset;
}

.dp-column-head[b-wh2dzha5vq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.75rem;
}

.dp-column-title[b-wh2dzha5vq] {
    font-family: 'condor', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #31DDE3;
    font-size: 0.95rem;
}

.dp-column-count[b-wh2dzha5vq] {
    background: rgba(49, 221, 227, 0.12);
    color: #31DDE3;
    border-radius: 50px;
    padding: 0.1rem 0.6rem;
    font-size: 0.8rem;
}

.dp-column-body[b-wh2dzha5vq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dp-column-empty[b-wh2dzha5vq] {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    padding: 0.5rem;
    text-align: center;
}

/* ── Card ──────────────────────────────────────────────────────── */

.dp-card[b-wh2dzha5vq] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    cursor: grab;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.dp-card:active[b-wh2dzha5vq] {
    cursor: grabbing;
}

/* The card currently being dragged. */
.dp-dragging[b-wh2dzha5vq] {
    opacity: 0.4;
    border-color: rgba(49, 221, 227, 0.5);
}

.dp-grip[b-wh2dzha5vq] {
    color: rgba(255, 255, 255, 0.3);
    cursor: grab;
    display: inline-flex;
    align-items: center;
}

.dp-grip[b-wh2dzha5vq]  i {
    font-size: 12px;
}

.dp-card-top[b-wh2dzha5vq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dp-state[b-wh2dzha5vq] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    border: 1px solid rgba(49, 221, 227, 0.35);
    color: #9be9ec;
    background: rgba(49, 221, 227, 0.08);
    white-space: nowrap;
}

.dp-state-Published[b-wh2dzha5vq] {
    border-color: rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.1);
}

.dp-state-Archived[b-wh2dzha5vq] {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.04);
}

.dp-card-title[b-wh2dzha5vq] {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.35;
    margin-bottom: 0.6rem;
}

.dp-star[b-wh2dzha5vq] {
    color: #B88536;
    margin-right: 0.25rem;
}

.dp-chips[b-wh2dzha5vq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.dp-chip[b-wh2dzha5vq] {
    font-size: 0.7rem;
    padding: 0.12rem 0.45rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.dp-chip-priority[b-wh2dzha5vq] {
    border-color: rgba(184, 133, 54, 0.5);
    color: #d8a860;
    background: rgba(184, 133, 54, 0.1);
}

.dp-chip-value[b-wh2dzha5vq] {
    border-color: rgba(49, 221, 227, 0.35);
    color: #9be9ec;
    background: rgba(49, 221, 227, 0.08);
}

.dp-chip-gate[b-wh2dzha5vq] {
    border-color: rgba(255, 255, 255, 0.15);
}

/* #9257 - the kind leads the chip row, so a mixed backlog scans by kind. */
.dp-chip-kind[b-wh2dzha5vq] {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
}

/* #9257 - the plain label under the member question. */
.dp-working-name[b-wh2dzha5vq] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin: -0.25rem 0 0.5rem;
}

/* #9257 - a non-demo item's reasoning reads like a demo's features line. */
.dp-features[b-wh2dzha5vq],
.dp-rationale[b-wh2dzha5vq] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.dp-label[b-wh2dzha5vq] {
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.dp-youtube[b-wh2dzha5vq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #6ee7b7;
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.dp-youtube:hover[b-wh2dzha5vq] {
    text-decoration: underline;
}

.dp-card-actions[b-wh2dzha5vq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dp-link[b-wh2dzha5vq] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.15rem 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.15s ease;
}

.dp-link:hover[b-wh2dzha5vq] {
    color: #31DDE3;
}

.dp-link-primary[b-wh2dzha5vq] {
    color: #31DDE3;
}

.dp-danger:hover[b-wh2dzha5vq] {
    color: #f87171;
}

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

.dp-form[b-wh2dzha5vq] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.dp-form label[b-wh2dzha5vq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.dp-form-row[b-wh2dzha5vq] {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.dp-form-row > label[b-wh2dzha5vq] {
    flex: 1;
    min-width: 140px;
}

/* #9620 - the placement route and its page context share a row where both fit, and stack on a phone: below two 240px
   halves (the 390 walk measured 144px each, with the context label clipped) each takes the full width. */
.dp-placement > label[b-wh2dzha5vq] {
    min-width: 240px;
}

.dp-check[b-wh2dzha5vq] {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem !important;
    align-self: flex-end;
}

.dp-input[b-wh2dzha5vq] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.65rem 0.8rem;
    font-family: inherit;
    font-size: 0.9rem;
    width: 100%;
}

.dp-input[b-wh2dzha5vq]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.dp-input:focus[b-wh2dzha5vq] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

textarea.dp-input[b-wh2dzha5vq] {
    resize: vertical;
}

/* ── YouTube copy panel ────────────────────────────────────────── */

.dp-count[b-wh2dzha5vq] {
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

.dp-copyrow[b-wh2dzha5vq] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.dp-copyrow > .dp-input[b-wh2dzha5vq] {
    flex: 1;
    min-width: 0;
}

.dp-copybtn[b-wh2dzha5vq] {
    flex: 0 0 auto;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 12px;
    color: #31DDE3;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.55rem 0.9rem;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dp-copybtn:hover[b-wh2dzha5vq] {
    background: rgba(49, 221, 227, 0.18);
    border-color: #31DDE3;
}

.dp-mono[b-wh2dzha5vq] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* #9193 - the Publish dialog shows the card members will see before anyone publishes it. */
.dp-publish-preview[b-wh2dzha5vq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
    overflow-wrap: anywhere;
}

.dp-publish-label[b-wh2dzha5vq] {
    margin: 0;
    color: var(--ascend-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dp-publish-title[b-wh2dzha5vq] {
    margin: 0;
    color: #ffffff;
    font-weight: 600;
}


/* #9258 - the import preview: one row per captured item, the reason in full on a rejected row. */
.dp-status[b-wh2dzha5vq] {
    font-size: 0.85rem;
    color: var(--ascend-accent);
}

.dp-import-text[b-wh2dzha5vq] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
}

.dp-import-summary[b-wh2dzha5vq] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
}

.dp-import-problems[b-wh2dzha5vq],
.dp-import-rows[b-wh2dzha5vq] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dp-import-row[b-wh2dzha5vq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.8rem;
}

.dp-import-where[b-wh2dzha5vq] {
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.dp-import-title[b-wh2dzha5vq] {
    flex: 1 1 14rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dp-import-outcome[b-wh2dzha5vq] {
    flex: 1 1 100%;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.dp-import-Rejected[b-wh2dzha5vq] {
    border-color: rgba(239, 68, 68, 0.5);
}

.dp-import-AlreadyOnBoard .dp-import-outcome[b-wh2dzha5vq] {
    color: rgba(255, 255, 255, 0.7);
}

/* ── #9619: filter chips ───────────────────────────────────────── */

.dp-filters[b-wh2dzha5vq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.dp-filter-row[b-wh2dzha5vq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dp-filter-chip[b-wh2dzha5vq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.dp-filter-chip:hover[b-wh2dzha5vq] {
    border-color: rgba(49, 221, 227, 0.6);
}

.dp-filter-chip:focus-visible[b-wh2dzha5vq] {
    outline: 2px solid #31DDE3;
    outline-offset: 2px;
}

.dp-filter-on[b-wh2dzha5vq] {
    border-color: #31DDE3;
    background: rgba(49, 221, 227, 0.15);
    color: #ffffff;
}

.dp-filter-count[b-wh2dzha5vq] {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.7);
}

.dp-filter-on .dp-filter-count[b-wh2dzha5vq] {
    color: #9be9ec;
}

/* #9619 - the board takes focus for keyboard scrolling; show where it is. */
.dp-board:focus-visible[b-wh2dzha5vq] {
    outline: 2px solid #31DDE3;
    outline-offset: 4px;
    border-radius: 16px;
}

/* #9619 - a card opens on click or Enter/Space: a visible focus ring for keyboard users. */
.dp-card:focus-visible[b-wh2dzha5vq] {
    outline: 2px solid #31DDE3;
    outline-offset: 2px;
    border-color: rgba(49, 221, 227, 0.6);
}

.dp-card-tags[b-wh2dzha5vq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.dp-card-tag[b-wh2dzha5vq] {
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 50px;
    border: 1px dashed rgba(184, 133, 54, 0.6);
    color: #e0b878;
    background: rgba(184, 133, 54, 0.08);
    overflow-wrap: anywhere;
}

/* ── #9619: tags in the editor and the tag manager ─────────────── */

.dp-tags-field[b-wh2dzha5vq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dp-tag-entry[b-wh2dzha5vq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.dp-tag-entry > .dp-input[b-wh2dzha5vq] {
    flex: 1 1 12rem;
    min-width: 0;
}

.dp-form-tags[b-wh2dzha5vq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dp-form-tag[b-wh2dzha5vq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.25rem 0.15rem 0.65rem;
    border-radius: 50px;
    border: 1px solid rgba(184, 133, 54, 0.6);
    background: rgba(184, 133, 54, 0.1);
    color: #e0b878;
    font-size: 0.8rem;
    max-width: 100%;
}

.dp-form-tag-name[b-wh2dzha5vq] {
    overflow-wrap: anywhere;
}

.dp-form-tag-remove[b-wh2dzha5vq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: none;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}

.dp-form-tag-remove:hover[b-wh2dzha5vq],
.dp-form-tag-remove:focus-visible[b-wh2dzha5vq] {
    color: #f87171;
    background: rgba(255, 255, 255, 0.06);
}

.dp-manage-tags[b-wh2dzha5vq] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dp-manage-tag[b-wh2dzha5vq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.dp-manage-tag > .dp-input[b-wh2dzha5vq] {
    flex: 1 1 12rem;
    min-width: 0;
}

.dp-manage-tag-count[b-wh2dzha5vq] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    white-space: nowrap;
}

.dp-manage-tag-actions[b-wh2dzha5vq] {
    display: flex;
    gap: 0.4rem;
}
/* /Components/Pages/Marketing/MailingListSuppressionPanel.razor.rz.scp.css */
/* MailingListSuppressionPanel (#8439). Admin screen; tokens only. */
.suppression-panel[b-g92mgzx8fi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    max-width: 100%;
}

.suppression-filters[b-g92mgzx8fi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.suppression-bulk[b-g92mgzx8fi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.suppression-grid[b-g92mgzx8fi] {
    overflow-x: auto;
    max-width: 100%;
}

/* The panel owns its own field, hint and link styles (scoped CSS does not reach a child component). */
.sp-field[b-g92mgzx8fi] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.sp-field > label[b-g92mgzx8fi] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-text-muted);
}

.sp-field > input[b-g92mgzx8fi] {
    background: transparent;
    border: 1px solid var(--ascend-border);
    border-radius: 8px;
    color: var(--ascend-text-light);
    padding: 0.5rem 0.65rem;
    font-family: var(--ascend-font-secondary);
    max-width: 100%;
}

.sp-field > input:focus[b-g92mgzx8fi] {
    outline: none;
    border-color: var(--ascend-accent);
}

.sp-check[b-g92mgzx8fi] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-light);
}

.sp-hint[b-g92mgzx8fi] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: var(--ascend-text-muted);
    margin: 0;
}

.sp-error[b-g92mgzx8fi] {
    color: var(--ascend-error-light);
}

.sp-link[b-g92mgzx8fi] {
    background: transparent;
    border: none;
    padding: 0.25rem 0;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.sp-link:hover:not(:disabled)[b-g92mgzx8fi] {
    text-decoration: underline;
}

.sp-link:disabled[b-g92mgzx8fi] {
    color: var(--ascend-text-muted);
    cursor: not-allowed;
}
/* /Components/Pages/Marketing/MarketingHub.razor.rz.scp.css */
.marketing-hub-page[b-pd4faoafpt] {
    width: 100%;
}
/* /Components/Pages/Marketing/NewMembers.razor.rz.scp.css */
/* #8569 - the New members list. Chrome only: Card, StatsRow, StatItem,
   EmptyState and Button own their own styling, and .card-header /
   .card-title / .card-body are the shared Card's and are never redefined
   here. */

.nm-page[b-1rbd3lz8oy] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.nm-filters[b-1rbd3lz8oy] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.nm-field[b-1rbd3lz8oy] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
}

.nm-input[b-1rbd3lz8oy] {
    /* background-color, never the shorthand: the shorthand would erase the
       chevron the global select rule draws (SelectChevronRatchetTests). */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    padding: 0.5rem 0.75rem;
}

.nm-select[b-1rbd3lz8oy] {
    padding-right: 2.25rem;
}

.nm-select option[b-1rbd3lz8oy] {
    background: var(--ascend-bg-dark);
    color: var(--ascend-text-light);
}

.nm-input:focus[b-1rbd3lz8oy] {
    outline: none;
    border-color: var(--ascend-accent);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

.nm-presets[b-1rbd3lz8oy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nm-preset[b-1rbd3lz8oy] {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 35%, transparent);
    border-radius: 50px;
    color: var(--ascend-accent);
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    min-height: 44px;
    padding: 0.35rem 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.nm-preset:hover[b-1rbd3lz8oy] {
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
    border-color: var(--ascend-accent);
}

.nm-note[b-1rbd3lz8oy] {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    margin: 0.75rem 0 0;
}

/* #8580 - a reload that failed says so beside the dates that caused it. */
.nm-note.nm-error[b-1rbd3lz8oy] {
    color: var(--ascend-error);
}

.nm-actions[b-1rbd3lz8oy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.nm-source[b-1rbd3lz8oy] {
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    white-space: nowrap;
}

.nm-detail[b-1rbd3lz8oy] {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
}

[b-1rbd3lz8oy] .nm-table td {
    vertical-align: top;
}

[b-1rbd3lz8oy] td.nm-when {
    white-space: nowrap;
}
/* /Components/Pages/Marketing/Offers.razor.rz.scp.css */
/* #7206 - the Offers screen. Sibling styling to the other marketing/admin form
   pages (MarketingQuotes/CampaignConsole): brand tokens, no raw brand hex. */

.offers-form[b-g0mew5hk2v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.offers-form label[b-g0mew5hk2v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--ascend-text-muted);
    flex: 1;
    min-width: 12rem;
}

.offers-row[b-g0mew5hk2v] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    align-items: flex-end;
}

.offers-input[b-g0mew5hk2v] {
    background: var(--ascend-surface-raised, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--ascend-border, rgba(255, 255, 255, 0.15));
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
}

.offers-input:focus[b-g0mew5hk2v] {
    outline: 2px solid var(--ascend-gold);
    outline-offset: 1px;
}

.offers-code-input[b-g0mew5hk2v] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.offers-num[b-g0mew5hk2v] {
    max-width: 8rem;
}

.offers-error[b-g0mew5hk2v] {
    margin: 0;
    color: var(--ascend-error, #e4574f);
    font-size: 0.9375rem;
}

.offers-success[b-g0mew5hk2v] {
    margin: 0;
    color: var(--ascend-success, #3ec98e);
    font-size: 0.9375rem;
}

.offers-preview[b-g0mew5hk2v] {
    border: 1px dashed var(--ascend-border, rgba(255, 255, 255, 0.2));
    border-radius: 12px;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.offers-preview-heading[b-g0mew5hk2v] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-gold);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.offers-preview ul[b-g0mew5hk2v] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    color: var(--ascend-text-light);
}

.offers-dim[b-g0mew5hk2v] {
    color: var(--ascend-text-muted);
    font-size: 0.8125rem;
    margin: 0;
}

.offers-note[b-g0mew5hk2v] {
    max-width: 60ch;
}

.offers-link-tier[b-g0mew5hk2v] {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--space-sm) var(--space-md);
}

.offers-link-tier label[b-g0mew5hk2v] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--ascend-text-muted);
}

/* Wide-content rule: the grid scrolls inside its own container. */
.offers-grid[b-g0mew5hk2v] {
    overflow-x: auto;
    padding: 0 var(--space-md) var(--space-md);
}

.offers-grid[b-g0mew5hk2v]  table {
    width: 100%;
    border-collapse: collapse;
}

.offers-grid[b-g0mew5hk2v]  th,
.offers-grid[b-g0mew5hk2v]  td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ascend-border, rgba(255, 255, 255, 0.1));
    font-size: 0.875rem;
    color: var(--ascend-text-light);
    white-space: nowrap;
}

.offers-perks[b-g0mew5hk2v] {
    white-space: normal;
}

.offers-status[b-g0mew5hk2v] {
    font-size: 0.8125rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--ascend-border, rgba(255, 255, 255, 0.2));
}

.offers-status.is-active[b-g0mew5hk2v] {
    color: var(--ascend-success, #3ec98e);
    border-color: currentColor;
}

.offers-status.is-retired[b-g0mew5hk2v] {
    color: var(--ascend-text-muted);
}

.offers-status.is-ended[b-g0mew5hk2v] {
    color: var(--ascend-warning, #e0a83a);
    border-color: currentColor;
}

.offers-actions[b-g0mew5hk2v] {
    display: flex;
    gap: var(--space-sm);
}

.offers-link-btn[b-g0mew5hk2v] {
    background: none;
    border: none;
    padding: 0;
    color: var(--ascend-gold);
    cursor: pointer;
    font-size: 0.875rem;
    text-decoration: underline;
}

.offers-link-btn:hover[b-g0mew5hk2v] {
    filter: brightness(1.15);
}

.offers-danger[b-g0mew5hk2v] {
    color: var(--ascend-error, #e4574f);
}

/* #7338 - the edit dialog. Same tokens as the create form; the extra classes
   are all for the parts that EXPLAIN the edit rather than collect it, because
   what an admin needs here is not another form but an honest account of which
   fields can still move once a code is in the world. */

.offers-edit[b-g0mew5hk2v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.offers-edit label[b-g0mew5hk2v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--ascend-text-muted);
    flex: 1;
    min-width: 12rem;
}

.offers-edit-fixed[b-g0mew5hk2v] {
    border: 1px solid var(--ascend-border, rgba(255, 255, 255, 0.15));
    border-radius: 12px;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.offers-edit-fixed p[b-g0mew5hk2v] {
    margin: 0;
    max-width: 60ch;
    color: var(--ascend-text-light);
    font-size: 0.875rem;
}

.offers-edit-code[b-g0mew5hk2v] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-gold);
    font-size: 1.125rem;
    letter-spacing: 0.08em;
}

.offers-edit-heading[b-g0mew5hk2v] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-gold);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.offers-edit-reach[b-g0mew5hk2v] {
    margin: 0;
    max-width: 60ch;
    color: var(--ascend-text-light);
    font-size: 0.875rem;
}

.offers-edit-warning[b-g0mew5hk2v] {
    margin: 0;
    max-width: 60ch;
    color: var(--ascend-warning, #e0a83a);
    font-size: 0.875rem;
}

.offers-history[b-g0mew5hk2v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.offers-history ul[b-g0mew5hk2v] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    color: var(--ascend-text-light);
    font-size: 0.8125rem;
}

.offers-history-field[b-g0mew5hk2v] {
    color: var(--ascend-gold);
    margin-right: 0.375rem;
}

/* #7401 - the "Attributed to" cell; wraps a long referrer name instead of widening the grid. */
.offers-owner[b-g0mew5hk2v] {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* #8419 - disclosure lines for attributed offers (promoter-disclosure). */
.offers-disclosures[b-g0mew5hk2v] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.offers-disclosure-row[b-g0mew5hk2v] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.offers-disclosure-for[b-g0mew5hk2v] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}
/* /Components/Pages/Marketing/SocialAnalyticsPanel.razor.rz.scp.css */
.analytics-panel[b-v60ybkltl2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.metric-grid[b-v60ybkltl2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* #6347: the tiles are <StatItem>s now, so their floor width lives with the
   grid that lays them out (SocialMetricTile has no element of its own to
   scope a rule to). ::deep reaches the child component's root. */
.metric-grid[b-v60ybkltl2]  .metric-tile {
    min-width: 6rem;
}

.analytics-extras-label[b-v60ybkltl2] {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* /Components/Pages/Marketing/SocialCalendar.razor.rz.scp.css */
.calendar-filters[b-lsdby2gcze] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.filter-field[b-lsdby2gcze] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 10rem;
}

.filter-label[b-lsdby2gcze] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.calendar-notice[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    color: var(--ascend-accent);
    margin: 0 0 1rem;
}

.calendar-notice[b-lsdby2gcze]  i {
    font-size: 14px;
    flex-shrink: 0;
}

.calendar-grid[b-lsdby2gcze] {
    overflow-x: auto;
}

.calendar-grid[b-lsdby2gcze]  table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ascend-font-secondary);
}

.calendar-grid[b-lsdby2gcze]  th {
    text-align: left;
    /* Bug #7360: 0.75rem -> 0.5rem side padding. The actions column gained a
       Retry control, and the reclaimed width keeps the whole action set on the
       card at more viewport sizes before .calendar-grid's overflow-x kicks in. */
    padding: 0.6rem 0.5rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(49, 221, 227, 0.2);
}

.calendar-grid[b-lsdby2gcze]  td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    vertical-align: middle;
}

.post-when[b-lsdby2gcze] {
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.7);
}

.post-brand[b-lsdby2gcze] {
    white-space: nowrap;
}

.post-snippet[b-lsdby2gcze] {
    display: inline-block;
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.post-platforms[b-lsdby2gcze] {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

/* Font Awesome replaces the <i> with an <i> carrying the same classes, so
   each rule targets both forms (::deep because the i loses the scope attr). */
.post-platforms[b-lsdby2gcze]  i {
    font-size: 14px;
}

.post-actions[b-lsdby2gcze] {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    /* Bug #7360: the row stays on ONE line. .calendar-grid is already
       overflow-x: auto, so a narrow viewport scrolls the table rather than
       stacking every action control into a four-line cell. */
    white-space: nowrap;
    justify-content: flex-end;
}

.calendar-pager[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.pager-line[b-lsdby2gcze] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.detail-head[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.detail-stamp[b-lsdby2gcze] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.detail-error[b-lsdby2gcze] {
    color: #ef4444;
    font-family: var(--ascend-font-secondary);
}

.detail-platforms[b-lsdby2gcze] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-platform-row[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.1);
}

.detail-link[b-lsdby2gcze] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-decoration: none;
}

.detail-link:hover[b-lsdby2gcze] {
    text-decoration: underline;
}

.detail-platform-error[b-lsdby2gcze] {
    color: #ef4444;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

/* PBI #6652: terminal informative outcome (platform posting limit reached) -
   deliberately NOT the error red; it is information, not a retryable failure. */
.detail-platform-limit[b-lsdby2gcze] {
    color: var(--ascend-secondary-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

/* #6598/#6599 engagement surface on the published-post detail */
.engagement-section[b-lsdby2gcze] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.engagement-head[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.engagement-title[b-lsdby2gcze] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    color: var(--ascend-secondary);
    font-size: 1rem;
}

.engagement-scope[b-lsdby2gcze] {
    max-width: 12rem;
}

/* PBI #6652 v2: honest read-window caveat over an old X post's replies. */
.comments-window-note[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.comment[b-lsdby2gcze] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.comment-head[b-lsdby2gcze] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.comment-author[b-lsdby2gcze] {
    font-family: var(--ascend-font-secondary);
    color: #ffffff;
    font-weight: 600;
}

.comment-handle[b-lsdby2gcze] {
    color: var(--ascend-accent);
    font-size: 0.85rem;
}

.comment-time[b-lsdby2gcze] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}

.comment-text[b-lsdby2gcze] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
}

.comment-replies[b-lsdby2gcze] {
    list-style: none;
    margin: 0.4rem 0 0 1rem;
    padding: 0 0 0 0.75rem;
    border-left: 2px solid rgba(49, 221, 227, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.comment-actions[b-lsdby2gcze] {
    display: flex;
    justify-content: flex-start;
}

/* ---------------------------------------------------------------- PBI #6649 edit modal */

.edit-form[b-lsdby2gcze] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.edit-field[b-lsdby2gcze] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.edit-label[b-lsdby2gcze] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.edit-text[b-lsdby2gcze] {
    resize: vertical;
    min-height: 6rem;
}

/* #6694: the optional first comment - shorter than the body, still growable
   (mirrors the composer's .compose-first-comment). */
.edit-first-comment[b-lsdby2gcze] {
    resize: vertical;
    min-height: 3.5rem;
}

/* #6694: the first comment's own reply-limit counter - counted independently
   of the post body, warns without ever blocking the save. */
.char-counter[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

.char-counter.over .char-count[b-lsdby2gcze] {
    color: var(--ascend-warning);
}

.char-scope[b-lsdby2gcze] {
    color: rgba(255, 255, 255, 0.4);
}

.char-warning[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.15rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-warning);
}

.char-warning[b-lsdby2gcze]  i {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.edit-hint[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}

.edit-hint[b-lsdby2gcze]  i {
    font-size: 12px;
    flex-shrink: 0;
}

.edit-target-list[b-lsdby2gcze] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.edit-target-row[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.1);
    cursor: pointer;
}

.edit-target-row.target-unusable[b-lsdby2gcze] {
    opacity: 0.5;
    cursor: default;
}

.edit-error[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--ascend-font-secondary);
    color: #ef4444;
}

.edit-error[b-lsdby2gcze]  i {
    font-size: 14px;
    flex-shrink: 0;
}

/* #6733: media on the post detail - alt text visible + copyable. */
.detail-media[b-lsdby2gcze] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-media-title[b-lsdby2gcze] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 0.6rem;
}

.detail-media-list[b-lsdby2gcze] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-media-row[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.1);
}

.detail-media-alt[b-lsdby2gcze] {
    flex: 1 1 12rem;
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    overflow-wrap: anywhere;
}

.detail-media-alt-empty[b-lsdby2gcze] {
    color: rgba(255, 255, 255, 0.4);
}

/* #6733: the edit modal's media rows - same shapes as the composer's, scoped
   here because .razor.css never leaks across components. */
.media-row[b-lsdby2gcze] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.media-url[b-lsdby2gcze] {
    flex: 2 1 12rem;
    min-width: 0;
}

.media-alt[b-lsdby2gcze] {
    flex: 1 1 8rem;
    min-width: 0;
    /* #6668 (Mallie): multi-line so long alt text is easier to edit. */
    resize: vertical;
    font-family: inherit;
}

.media-upload[b-lsdby2gcze] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

/* The native input stays functional but invisible - the styled span is the button. */
.media-upload[b-lsdby2gcze]  .media-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.media-upload-button[b-lsdby2gcze] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1.1rem;
    border-radius: 50px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.12);
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.media-upload:hover .media-upload-button:not(.disabled)[b-lsdby2gcze] {
    background: rgba(49, 221, 227, 0.25);
}

.media-upload-button.disabled[b-lsdby2gcze] {
    opacity: 0.5;
}

.media-upload-button[b-lsdby2gcze]  i {
    font-size: 14px;
}

.media-upload-hint[b-lsdby2gcze] {
    color: rgba(255, 255, 255, 0.5);
}

.media-uploading[b-lsdby2gcze] {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--ascend-accent);
}

.media-upload-error[b-lsdby2gcze] {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--ascend-error);
}
/* /Components/Pages/Marketing/SocialCompose.razor.rz.scp.css */
.compose-layout[b-jo0ri6o69j] {
    max-width: 52rem;
}

.compose-field[b-jo0ri6o69j] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.compose-label[b-jo0ri6o69j] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.compose-text[b-jo0ri6o69j] {
    resize: vertical;
    min-height: 8rem;
}

/* #6694: the optional first comment - shorter than the body, still growable. */
.compose-first-comment[b-jo0ri6o69j] {
    resize: vertical;
    min-height: 3.5rem;
}

.compose-hint[b-jo0ri6o69j] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.compose-hint a[b-jo0ri6o69j] {
    color: var(--ascend-accent);
}

.target-list[b-jo0ri6o69j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.target-row[b-jo0ri6o69j] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.1);
    cursor: pointer;
}

.target-row.target-unusable[b-jo0ri6o69j] {
    opacity: 0.5;
    cursor: default;
}

.target-hint[b-jo0ri6o69j] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: #f59e0b;
}

.media-row[b-jo0ri6o69j] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.media-url[b-jo0ri6o69j] {
    flex: 2 1 12rem;
    min-width: 0;
}

.media-alt[b-jo0ri6o69j] {
    flex: 1 1 8rem;
    min-width: 0;
    /* #6668 (Mallie): multi-line so long alt text is easier to edit. */
    resize: vertical;
    font-family: inherit;
}

.schedule-toggle[b-jo0ri6o69j] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.schedule-when[b-jo0ri6o69j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.action-row[b-jo0ri6o69j] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.result-head[b-jo0ri6o69j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.result-title[b-jo0ri6o69j] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    margin: 0;
}

.result-line[b-jo0ri6o69j] {
    color: rgba(255, 255, 255, 0.7);
}

.result-platforms[b-jo0ri6o69j] {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.result-platform-row[b-jo0ri6o69j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.1);
}

.result-link[b-jo0ri6o69j] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-decoration: none;
}

.result-link:hover[b-jo0ri6o69j] {
    text-decoration: underline;
}

.result-link[b-jo0ri6o69j]  i {
    font-size: 12px;
}

.result-error[b-jo0ri6o69j] {
    color: #ef4444;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

/* PBI #6652: terminal informative outcome (platform posting limit reached) -
   deliberately NOT the error red; it is information, not a retryable failure. */
.result-limit[b-jo0ri6o69j] {
    color: var(--ascend-secondary-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

/* PBI #6652: tightest-limit character counter under the composer text. */
.char-counter[b-jo0ri6o69j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

.char-counter.over .char-count[b-jo0ri6o69j] {
    color: #f59e0b;
}

.char-scope[b-jo0ri6o69j] {
    color: rgba(255, 255, 255, 0.4);
}

.char-warning[b-jo0ri6o69j] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.15rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #f59e0b;
}

.char-warning[b-jo0ri6o69j]  i {
    font-size: 14px;
    flex-shrink: 0;
}

/* Owner 2026-07-17: direct file upload into the media list. */
.media-upload[b-jo0ri6o69j] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.media-upload[b-jo0ri6o69j] {
    cursor: pointer;
}

/* The native input stays functional but invisible - the styled span is the button. */
.media-upload[b-jo0ri6o69j]  .media-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.media-upload-button[b-jo0ri6o69j] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1.1rem;
    border-radius: 50px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.12);
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.media-upload:hover .media-upload-button:not(.disabled)[b-jo0ri6o69j] {
    background: rgba(49, 221, 227, 0.25);
}

.media-upload-button.disabled[b-jo0ri6o69j] {
    opacity: 0.5;
}

.media-upload-button[b-jo0ri6o69j]  i {
    font-size: 14px;
}

.media-upload-hint[b-jo0ri6o69j] {
    color: rgba(255, 255, 255, 0.5);
}

.media-uploading[b-jo0ri6o69j] {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--ascend-accent);
}

.media-upload-error[b-jo0ri6o69j] {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--ascend-error);
}

/* #6733: duplicate/reuse notice - the form was pre-filled from an existing post. */
.duplicate-note[b-jo0ri6o69j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    color: var(--ascend-accent);
}

.duplicate-note[b-jo0ri6o69j]  i {
    font-size: 14px;
    flex-shrink: 0;
}

/* #6790: link tagging. The campaign is the only input here - source and medium
   are derived and applied at publish, never typed - so this block reads as a
   statement of what will happen with one small refinement, not as a form. */
/* #7258: was display: block wrapping three INLINE children - the label span,
   the input and the helper span - so they flowed as one paragraph with the
   Campaign box jammed mid-sentence. Same column rhythm as .compose-field, so
   a subfield reads as a smaller version of the field above it rather than as
   a different kind of thing. */
.compose-subfield[b-jo0ri6o69j] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

/* #7258: .compose-campaign used to share this rule. Its parent
   (.compose-subfield) is a flex column with its own gap now, so the margin
   only double-spaced it. .compose-native-target keeps it - its parent is
   .compose-field and the extra separation there is deliberate. */
.compose-native-target[b-jo0ri6o69j] {
    margin: 0.35rem 0;
}

/* #7252: the LinkedIn document-carousel title - same rhythm as the other
   single-line optional inputs above. */
.compose-document-title[b-jo0ri6o69j] {
    margin: 0.35rem 0;
}

/* One pre-tagged URL per platform, readonly so it can be selected and copied
   but never edited into an untagged link. */
/* #7258: the same inline-children break as .compose-subfield - the platform
   label and its readonly URL ran together on one line. */
.native-link-row[b-jo0ri6o69j] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    margin-top: 0.5rem;
}

.native-link-url[b-jo0ri6o69j] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.75);
    cursor: text;
}

/* #6768: detected-mention chips - the panel that tells the truth about
   where a typed @handle resolves on publish. Warning lines reuse
   .char-warning; the confirmation line reuses .compose-hint. */
.mention-chips[b-jo0ri6o69j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mention-chip[b-jo0ri6o69j] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
}

.compose-hint[b-jo0ri6o69j]  i {
    font-size: 14px;
    flex-shrink: 0;
    vertical-align: -2px;
}
/* /Components/Pages/Marketing/SocialHub.razor.rz.scp.css */
.brand-list[b-w8eo4jyfke] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

.brand-identity[b-w8eo4jyfke] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.brand-dot[b-w8eo4jyfke] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    align-self: center;
    flex-shrink: 0;
}

.brand-name[b-w8eo4jyfke] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: #ffffff;
}

.brand-desc[b-w8eo4jyfke] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

.conn-list[b-w8eo4jyfke] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.conn-row[b-w8eo4jyfke] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.1);
}

.conn-row.needs-reauth[b-w8eo4jyfke] {
    border-color: rgba(245, 158, 11, 0.35);
}

.conn-type[b-w8eo4jyfke] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.conn-badge[b-w8eo4jyfke] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 50px;
}

.conn-inactive[b-w8eo4jyfke] {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
}

.conn-reauth[b-w8eo4jyfke] {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

/* #6573: a Page target that is currently NOT a selected publish target
   (never renders for page-less 1:1 connections). */
.conn-unselected[b-w8eo4jyfke] {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.25);
}

/* #6569: the disconnect action sits at the row's far edge, visually apart
   from the health badges. */
.conn-row[b-w8eo4jyfke]  .conn-disconnect {
    margin-left: auto;
}

/* #6573: the connection's granted Pages - one indented target row per Page
   with its selected state and toggle. */
.page-target-hint[b-w8eo4jyfke] {
    flex-basis: 100%;
    margin: 0.6rem 0 0.1rem 1.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

.page-target-list[b-w8eo4jyfke] {
    flex-basis: 100%;
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0 0 0 1.25rem;
    border-left: 1px solid rgba(49, 221, 227, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.page-target-row[b-w8eo4jyfke] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.page-target-row:hover[b-w8eo4jyfke] {
    background: rgba(255, 255, 255, 0.03);
}

/* Native checkbox toggle - no Font Awesome, no double-glyph (#6582). */
.page-toggle[b-w8eo4jyfke] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.page-toggle input[type="checkbox"][b-w8eo4jyfke] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--ascend-accent);
    cursor: pointer;
    flex-shrink: 0;
}

.page-toggle input[type="checkbox"]:disabled[b-w8eo4jyfke] {
    cursor: default;
    opacity: 0.5;
}

.page-name[b-w8eo4jyfke] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-state[b-w8eo4jyfke] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.page-state.on[b-w8eo4jyfke] {
    color: var(--ascend-accent);
}

.page-state.off[b-w8eo4jyfke] {
    color: rgba(255, 255, 255, 0.35);
}

.conn-expiry[b-w8eo4jyfke] {
    margin-left: auto;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.conn-expiry.expired[b-w8eo4jyfke] {
    color: #ef4444;
}

.conn-empty[b-w8eo4jyfke],
.conn-error[b-w8eo4jyfke] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.conn-error[b-w8eo4jyfke] {
    color: #ef4444;
}

.connect-brand-line[b-w8eo4jyfke] {
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 1rem;
}

.platform-picker[b-w8eo4jyfke] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
}

.platform-option[b-w8eo4jyfke] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.platform-option:hover:not(:disabled)[b-w8eo4jyfke] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
}

.platform-option:disabled[b-w8eo4jyfke] {
    opacity: 0.6;
    cursor: default;
}

.platform-option[b-w8eo4jyfke]  i {
    font-size: 22px;
}

.connect-redirecting[b-w8eo4jyfke] {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
}

/* Owner-flagged 2026-07-17: platform-truth note in the connect modal. */
.connect-platform-note[b-w8eo4jyfke] {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    padding-top: 0.75rem;
}

.connect-platform-note strong[b-w8eo4jyfke] {
    color: var(--ascend-secondary-light);
}

/* #6573: the Safe Browsing interstitial note reads as a continuation of the
   platform note above it - same muted family, no second divider. */
.connect-interstitial-note[b-w8eo4jyfke] {
    border-top: none;
    padding-top: 0;
    margin-top: 0.5rem;
}

/* #6569: irreversible delete-my-data danger zone. Deliberately muted red so it
   reads as a serious, separate destructive surface - not a Bootstrap alert. */
/* #6946 - ::deep: the class rides on a child <Card>, so this never applied and
   the irreversible-delete card has been rendering with the ordinary cyan card
   border, visually identical to the benign cards above it. The muted red border
   is the affordance that marks it as destructive - restored deliberately. */
[b-w8eo4jyfke] .danger-zone {
    margin-top: 2rem;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.danger-title[b-w8eo4jyfke] {
    margin: 0 0 0.5rem;
    font-family: var(--ascend-font-primary);
    color: #ef4444;
}

.danger-copy[b-w8eo4jyfke] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    line-height: 1.6;
    max-width: 60ch;
}

.danger-copy strong[b-w8eo4jyfke] {
    color: #f87171;
}

.danger-confirm-label[b-w8eo4jyfke] {
    display: block;
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
}

.danger-confirm-label strong[b-w8eo4jyfke] {
    color: var(--ascend-secondary-light);
    letter-spacing: 0.04em;
}

.danger-confirm-input[b-w8eo4jyfke] {
    display: block;
    width: 100%;
    max-width: 22rem;
    margin: 0 0 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.75rem 1rem;
    font-family: var(--ascend-font-secondary);
}

.danger-confirm-input:focus[b-w8eo4jyfke] {
    outline: none;
    border-color: #ef4444;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.danger-done[b-w8eo4jyfke] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
}

/* #6597/#6599 brand management + connection analytics */
.brand-head-actions[b-w8eo4jyfke] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.brand-field[b-w8eo4jyfke] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.brand-field-label[b-w8eo4jyfke] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.brand-color-input[b-w8eo4jyfke] {
    width: 4rem;
    height: 2.5rem;
    padding: 0.2rem;
    cursor: pointer;
}

.manage-brand-line[b-w8eo4jyfke],
.manage-empty[b-w8eo4jyfke] {
    margin: 0 0 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--ascend-font-secondary);
}

.manage-list[b-w8eo4jyfke],
.manage-page-list[b-w8eo4jyfke] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.manage-conn[b-w8eo4jyfke] {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.manage-page-list[b-w8eo4jyfke] {
    margin: 0.4rem 0 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.manage-toggle[b-w8eo4jyfke] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.manage-page-name[b-w8eo4jyfke] {
    color: rgba(255, 255, 255, 0.85);
}

.analytics-scope[b-w8eo4jyfke] {
    margin: 0 0 0.85rem;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
}
/* /Components/Pages/Marketing/SocialMessages.razor.rz.scp.css */
.dm-layout[b-fj5fjhn5h8] {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 1.3fr) minmax(16rem, 2fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 60rem) {
    .dm-layout[b-fj5fjhn5h8] {
        grid-template-columns: 1fr;
    }
}

.dm-col-title[b-fj5fjhn5h8] {
    margin: 0 0 0.75rem;
    font-family: var(--ascend-font-primary);
    color: var(--ascend-secondary);
    font-size: 1rem;
}

.dm-hint[b-fj5fjhn5h8] {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
}

.dm-conn-list[b-fj5fjhn5h8],
.dm-convo-list[b-fj5fjhn5h8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dm-conn-btn[b-fj5fjhn5h8],
.dm-convo-btn[b-fj5fjhn5h8] {
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dm-conn-btn:hover[b-fj5fjhn5h8],
.dm-convo-btn:hover[b-fj5fjhn5h8] {
    border-color: rgba(49, 221, 227, 0.4);
}

.dm-conn-row.active .dm-conn-btn[b-fj5fjhn5h8],
.dm-convo-row.active .dm-convo-btn[b-fj5fjhn5h8] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
}

.dm-convo-row.unread .dm-convo-name[b-fj5fjhn5h8] {
    font-weight: 700;
}

.dm-convo-name[b-fj5fjhn5h8] {
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
}

.dm-convo-preview[b-fj5fjhn5h8] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-convo-time[b-fj5fjhn5h8] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.dm-reconnect[b-fj5fjhn5h8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(184, 133, 54, 0.35);
    background: rgba(184, 133, 54, 0.08);
}

.dm-reconnect h4[b-fj5fjhn5h8] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    color: #ffffff;
}

.dm-reconnect p[b-fj5fjhn5h8] {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--ascend-font-secondary);
}

.dm-bubble[b-fj5fjhn5h8] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    max-width: 85%;
}

.dm-bubble.from-them[b-fj5fjhn5h8] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    align-self: flex-start;
    margin-right: auto;
}

.dm-bubble.from-me[b-fj5fjhn5h8] {
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.3);
    align-self: flex-end;
    margin-left: auto;
}

.dm-bubble-text[b-fj5fjhn5h8] {
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
}

.dm-bubble-meta[b-fj5fjhn5h8] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
}
/* /Components/Pages/Marketing/SocialPlatformChip.razor.rz.scp.css */
.platform-chip[b-c6j2f1idua] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.platform-chip[b-c6j2f1idua]  i {
    font-size: 14px;
}

.platform-handle[b-c6j2f1idua] {
    color: var(--ascend-secondary-light);
}
/* /Components/Pages/Marketing/SocialPostStatusChip.razor.rz.scp.css */
.status-chip[b-0r0cw0kvyx] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-chip.status-ok[b-0r0cw0kvyx] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
}

.status-chip.status-pending[b-0r0cw0kvyx] {
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.12);
    border-color: rgba(184, 133, 54, 0.35);
}

.status-chip.status-active[b-0r0cw0kvyx] {
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.12);
    border-color: rgba(49, 221, 227, 0.35);
}

.status-chip.status-warn[b-0r0cw0kvyx] {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}

.status-chip.status-error[b-0r0cw0kvyx] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}

.status-chip.status-muted[b-0r0cw0kvyx] {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}
/* /Components/Pages/Marketing/SocialReplyBox.razor.rz.scp.css */
.social-reply-box[b-r0n78ag8ut] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* #7258: was `.social-reply-box ::deep .reply-input`. The textarea is written
   in this component's own markup, so it carries the scope attribute and the
   plain descendant selector reaches it - ::deep is for child-component or
   JS-injected markup only. Colour comes from the global .form-input. */
.social-reply-box .reply-input[b-r0n78ag8ut] {
    width: 100%;
    resize: vertical;
    min-height: 2.75rem;
}

.reply-error[b-r0n78ag8ut] {
    margin: 0;
    color: var(--ascend-danger, #ef4444);
    font-size: 0.85rem;
}

.reply-actions[b-r0n78ag8ut] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Pages/Marketing/SocialReturn.razor.rz.scp.css */
.return-panel[b-r45opn8avf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 24px;
}

.return-icon[b-r45opn8avf] {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(16, 185, 129, 0.2));
    border: 2px solid rgba(49, 221, 227, 0.4);
    animation: return-scale-in-b-r45opn8avf 0.5s ease;
}

@keyframes return-scale-in-b-r45opn8avf {
    0% {
        transform: scale(0);
        opacity: 0;
    }

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

.return-title[b-r45opn8avf] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    margin: 0;
}

.return-line[b-r45opn8avf] {
    color: rgba(255, 255, 255, 0.7);
    max-width: 44rem;
    margin: 0;
}

.return-empty[b-r45opn8avf] {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    margin: 0;
}

.return-conn-list[b-r45opn8avf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 34rem;
}

.return-conn-row[b-r45opn8avf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.1);
}

.return-active[b-r45opn8avf] {
    color: #10b981;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.return-reauth[b-r45opn8avf] {
    color: #f59e0b;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.action-row[b-r45opn8avf] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}
/* /Components/Pages/Marketing/SocialSurfaceGate.razor.rz.scp.css */
.social-gated[b-t8mqmt9ap4] {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    padding: 1rem 0;
}

.social-gated code[b-t8mqmt9ap4] {
    color: var(--ascend-accent);
}

.social-not-configured[b-t8mqmt9ap4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 24px;
}

.social-not-configured .snc-icon[b-t8mqmt9ap4] {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(184, 133, 54, 0.15));
    border: 2px solid rgba(49, 221, 227, 0.3);
}

.social-not-configured h3[b-t8mqmt9ap4] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    margin: 0;
}

.social-not-configured p[b-t8mqmt9ap4] {
    color: rgba(255, 255, 255, 0.65);
    max-width: 44rem;
    margin: 0;
}

.social-not-configured code[b-t8mqmt9ap4] {
    color: var(--ascend-accent);
}
/* /Components/Pages/Marketing/SocialThread.razor.rz.scp.css */
.social-thread[b-ziw0nnbrby] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.thread-list[b-ziw0nnbrby] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 26rem;
    overflow-y: auto;
}

.thread-item[b-ziw0nnbrby] {
    margin: 0;
}

.thread-more[b-ziw0nnbrby] {
    display: flex;
    justify-content: center;
    padding-top: 0.25rem;
}
/* /Components/Pages/MasterGameBrowse.razor.rz.scp.css */
.master-games-page[b-ws3wis2d4f] {
    padding: 1rem 0;
}

.browse-container[b-ws3wis2d4f] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 75rem;
    margin: 0 auto;
}

/* Hero */
.hero-section[b-ws3wis2d4f] {
    text-align: center;
    padding: 2rem 1.25rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px color-mix(in srgb, var(--ascend-accent) 10%, transparent);
    position: relative;
    overflow: hidden;
}

.hero-section[b-ws3wis2d4f]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
}

.hero-title[b-ws3wis2d4f] {
    font-family: var(--ascend-font-primary);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.hero-subtitle[b-ws3wis2d4f] {
    font-family: var(--ascend-font-secondary);
    font-size: clamp(1.25rem, 3.5vw, 1.5rem);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

.hero-description[b-ws3wis2d4f] {
    font-family: var(--ascend-font-secondary);
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    max-width: min(800px, 100%);
    margin: 0 auto;
}

/* Filters */
.filter-row[b-ws3wis2d4f] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.filter-group[b-ws3wis2d4f] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1 1 12.5rem;
    min-width: 0;
}

.filter-group--narrow[b-ws3wis2d4f] {
    flex: 0 1 8.125rem;
}

.filter-label[b-ws3wis2d4f] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
}

.filter-input[b-ws3wis2d4f] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    padding: 0.625rem 0.875rem;
    width: 100%;
}

.filter-input:focus[b-ws3wis2d4f] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ascend-accent) 10%, transparent);
}

.filter-input[b-ws3wis2d4f]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

select.filter-input option[b-ws3wis2d4f] {
    background: var(--ascend-bg-dark);
    color: var(--ascend-text-light);
}

.filter-actions[b-ws3wis2d4f] {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

/* Results meta + pagination */
.results-meta[b-ws3wis2d4f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.results-count[b-ws3wis2d4f] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.7);
}

.pagination-bar[b-ws3wis2d4f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-btn[b-ws3wis2d4f] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 25%, transparent);
    border-radius: 10px;
    color: var(--ascend-accent);
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-ws3wis2d4f] {
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

.page-btn:disabled[b-ws3wis2d4f] {
    opacity: 0.35;
    cursor: default;
}

.page-info[b-ws3wis2d4f] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

/* Results grid */
.games-table-wrapper[b-ws3wis2d4f] {
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 15%, transparent);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
}

.games-table-wrapper[b-ws3wis2d4f]  .master-games-grid {
    width: 100%;
    border-collapse: collapse;
}

.games-table-wrapper[b-ws3wis2d4f]  .master-games-grid th {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
}

.games-table-wrapper[b-ws3wis2d4f]  .master-games-grid td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

.games-table-wrapper[b-ws3wis2d4f]  .master-games-grid tr:last-child td {
    border-bottom: none;
}

.players-cell[b-ws3wis2d4f] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    font-family: var(--ascend-font-secondary);
    min-width: 14rem;
}

.player-white[b-ws3wis2d4f] {
    color: var(--ascend-text-light);
    font-weight: 600;
}

.player-vs[b-ws3wis2d4f] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.player-black[b-ws3wis2d4f] {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.result-chip[b-ws3wis2d4f] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-secondary-light);
    border: 1px solid color-mix(in srgb, var(--ascend-secondary) 40%, transparent);
    border-radius: 8px;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
}

.event-cell[b-ws3wis2d4f] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-family: var(--ascend-font-secondary);
    max-width: 16rem;
}

.event-name[b-ws3wis2d4f] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-year[b-ws3wis2d4f] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}

.row-actions[b-ws3wis2d4f] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .filter-actions[b-ws3wis2d4f] {
        width: 100%;
        justify-content: flex-end;
    }

    .results-meta[b-ws3wis2d4f] {
        justify-content: center;
    }
}

/* #8311 - THE MASTER-GAME PAGER HAD NO TOUCH FLOOR, AND THE LIVE RATCHET
   COULD NOT HAVE TOLD US.

   `.pagination-bar` is `@if (TotalPages > 1)`, so the two chevrons are not in
   the DOM on the first page of a result set - and the #7736 gate measures one
   page load per route and nothing else. That is the same blind spot that let
   the /games chevrons sit at 39x44 until develop build 11076 happened to seed
   the CI account past 50 games. Measured here from the box: a chevron glyph
   plus 0.375rem of vertical and 0.75rem of horizontal padding and a 1px border
   is about 42x38 on a coarse pointer - under the floor on BOTH axes.

   Both axes are declared because the content is a single icon: a height-only
   floor is exactly how /games ended up 39 wide and 44 tall, which looks like a
   fix and is not one. The box grows rather than a pseudo-element hit area:
   these two sit 0.75rem apart with only the page counter between them, so an
   invisible target larger than the visual would overlap its neighbor and the
   one painted on top would silently eat the other's taps (app.css's neighbor
   rule, and the trap #7758 hit on the Opening Hub).

   Inside the pointer query, never unconditionally - desktop density is the
   thing #6681 established and #7736 re-learned. ConditionalSurfaceTouchTargetTests
   pins this, and PagerTouchTargetContractTests reaches it from the markup, so
   neither depends on CI's data to see it. */
@media (hover: none) and (pointer: coarse) {
    .page-btn[b-ws3wis2d4f] {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
    }
}

/* #9437 - the page's TWIC games as one PGN download. */
.download-row[b-ws3wis2d4f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
}

.download-note[b-ws3wis2d4f],
.download-message[b-ws3wis2d4f] {
    margin: 0;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    min-width: 0;
}
/* /Components/Pages/MasterGameLibrary.razor.rz.scp.css */
.study-library-page[b-0cqrf5vezu] {
    background: radial-gradient(circle at top, rgba(49, 221, 227, 0.08), transparent 50%),
                linear-gradient(180deg, #0f172a 0%, #0a1628 100%);
    padding: 1rem;
}

@media (min-width: 768px) {
    .study-library-page[b-0cqrf5vezu] {
        padding: 2rem;
    }
}

.study-container[b-0cqrf5vezu] {
    max-width: 75rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .study-container[b-0cqrf5vezu] {
        gap: 2rem;
    }
}

/* Hero Section */
.hero-section[b-0cqrf5vezu] {
    text-align: center;
    padding: 2rem 1.25rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .hero-section[b-0cqrf5vezu] {
        padding: 3rem 2rem;
    }
}

.hero-section[b-0cqrf5vezu]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
}

.hero-title[b-0cqrf5vezu] {
    font-family: var(--ascend-font-primary);
    /* #9457 - the jammed MASTERGAMES needed 276px at 32px and the 344 box gives 236px,
       so it clipped; 7.5vw puts 344 near 26px and still reaches 3rem by 640px. */
    font-size: clamp(1.5rem, 7.5vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.hero-subtitle[b-0cqrf5vezu] {
    font-family: var(--ascend-font-secondary);
    font-size: clamp(1.25rem, 3.5vw, 1.5rem);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.hero-description[b-0cqrf5vezu] {
    font-family: var(--ascend-font-secondary);
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    max-width: min(800px, 100%);
    margin: 0 auto;
}

/* Card styling is now handled by shared Card component */

/* Active Session Card */
.session-info[b-0cqrf5vezu] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.game-players[b-0cqrf5vezu] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    font-weight: 600;
    color: #31DDE3;
}

.session-stats[b-0cqrf5vezu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
    gap: 1rem;
}

@media (min-width: 480px) {
    .session-stats[b-0cqrf5vezu] {
        gap: 1.5rem;
    }
}

/* Renamed from .stat-item to .session-stat — the original name collided
 * with the global .stat-item rule (icon + label + value flex-row), but
 * this surface uses a label-only column shape. Renaming sidesteps the
 * cross-page inconsistency. */

/* Owner walkthrough 2026-07-22: the Continue Studying action row sat flush
   against the stats row (global .action-row carries no top margin) and the
   button crowded the "plies" value. session-actions gives the card the same
   vertical rhythm as the MASTER LIBRARY card's desc -> action-row spacing. */
.session-actions[b-0cqrf5vezu] {
    margin-top: 1.25rem;
}

/* #8349 - Continue Studying as a list (master games from the Study Board on):
   every in-progress session, each row the same block the single card draws,
   separated by a rule. */
.in-progress-list[b-0cqrf5vezu] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.in-progress-row[b-0cqrf5vezu] {
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.in-progress-row:first-child[b-0cqrf5vezu] {
    padding-top: 0;
    border-top: none;
}

.in-progress-row .game-players[b-0cqrf5vezu] {
    overflow-wrap: anywhere;
}

.in-progress-row .session-actions[b-0cqrf5vezu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.in-progress-error[b-0cqrf5vezu] {
    margin: 0.75rem 0 0 0;
    color: #fca5a5;
}

.in-progress-notice[b-0cqrf5vezu] {
    margin: 0.75rem 0 0 0;
    color: rgba(255, 255, 255, 0.85);
}

/* #6631 Key Games From Your Books (grouped per repertoire book) */
.book-sections[b-0cqrf5vezu] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.book-section-header[b-0cqrf5vezu] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}

.book-section-name[b-0cqrf5vezu] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ascend-accent);
}

.book-section-opening[b-0cqrf5vezu] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: var(--ascend-secondary-light);
}

.book-section-count[b-0cqrf5vezu] {
    margin-left: auto;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-text-muted); /* #9457 - was rgba(255,255,255,0.4), 3.80:1 */
}

/* #7144 - a book whose pool is still resolving. The label pulses in the brand
   accent so a pending section reads as work in progress at a glance, next to
   sibling sections that already carry their game count. */
.book-section-count--pending[b-0cqrf5vezu] {
    color: var(--ascend-accent);
    animation: keyGamesPendingPulse-b-0cqrf5vezu 1.4s ease-in-out infinite;
}

@keyframes keyGamesPendingPulse-b-0cqrf5vezu {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

/* Holds the shared LoadingSpinner at the height of roughly one key-game row,
   so books filling in do not make the card jump as each one lands. */
.book-section-pending[b-0cqrf5vezu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(49, 221, 227, 0.18);
    border-radius: 10px;
}

.book-section-empty[b-0cqrf5vezu] {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}

.key-game-list[b-0cqrf5vezu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.key-game-item[b-0cqrf5vezu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: background 0.15s ease;
}

@media (min-width: 640px) {
    .key-game-item[b-0cqrf5vezu] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
}

.key-game-item:hover[b-0cqrf5vezu] {
    background: rgba(49, 221, 227, 0.04);
}

/* The folded-in Recommended row: one game across all books carries the
   highlight (replaces the old standalone Recommended Game card). */
.key-game-item--recommended[b-0cqrf5vezu] {
    border-color: rgba(184, 133, 54, 0.45);
    background: rgba(184, 133, 54, 0.06);
}

.recommended-chip[b-0cqrf5vezu] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.18);
    border: 1px solid rgba(184, 133, 54, 0.4);
    padding: 0.125rem 0.5rem;
    border-radius: 50px;
}

.key-game-info[b-0cqrf5vezu] {
    flex: 1;
    min-width: 0;
}

.key-game-players[b-0cqrf5vezu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
}

.kg-white[b-0cqrf5vezu] {
    color: #ffffff;
    font-weight: 600;
}

.kg-vs[b-0cqrf5vezu] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

.kg-black[b-0cqrf5vezu] {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.kg-year[b-0cqrf5vezu] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

.kg-result[b-0cqrf5vezu] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.key-game-meta[b-0cqrf5vezu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.375rem;
}

.key-game-actions[b-0cqrf5vezu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* #6830 - the per-card "Not interested" dismiss stays quiet next to
   View/Study; the shared Button markup does not carry this component's
   scope attribute, hence ::deep. */
.key-game-actions[b-0cqrf5vezu]  .kg-dismiss {
    color: rgba(255, 255, 255, 0.45);
}

.key-game-actions[b-0cqrf5vezu]  .kg-dismiss:hover:not(.disabled) {
    color: rgba(255, 255, 255, 0.85);
}

/* #6830 - "Show more games" sits below the book sections with the same
   vertical beat the section headers carry. */
.show-more-row[b-0cqrf5vezu] {
    margin-top: 1rem;
}

/* Study History */
.history-list[b-0cqrf5vezu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-row[b-0cqrf5vezu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.history-row:hover[b-0cqrf5vezu] {
    background: rgba(49, 221, 227, 0.05);
    border-color: rgba(49, 221, 227, 0.2);
}

.history-players[b-0cqrf5vezu] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.history-meta[b-0cqrf5vezu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.history-year[b-0cqrf5vezu] {
    color: rgba(255, 255, 255, 0.4);
}

.history-accuracy[b-0cqrf5vezu] {
    color: #31DDE3;
    font-weight: 600;
}

.history-date[b-0cqrf5vezu] {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .session-stats[b-0cqrf5vezu] {
        grid-template-columns: 1fr 1fr;
    }

    .history-row[b-0cqrf5vezu] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* #6618 Master Library entry card (flag-gated) */
.corpus-desc[b-0cqrf5vezu] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 1rem;
    text-align: center;
}

/* #6830 owner canary 2026-08-04 - the Show-more busy icon must visibly
   animate; a static "Loading..." over a multi-second recompute reads as a
   hang. bi-arrow-repeat only renders while busy, so this animates only then. */
.show-more-row[b-0cqrf5vezu]  .bi-arrow-repeat {
    display: inline-block;
    animation: keygames-spin-b-0cqrf5vezu 1s linear infinite;
}

@keyframes keygames-spin-b-0cqrf5vezu {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/MasterGameView.razor.rz.scp.css */
.master-game-view-page[b-tnj4cqw0h5] {
    padding: 1rem 0;
}

.view-container[b-tnj4cqw0h5] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 75rem;
    margin: 0 auto;
}

/* Header */
.view-header[b-tnj4cqw0h5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.back-link[b-tnj4cqw0h5] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-accent);
    text-decoration: none;
    width: fit-content;
}

.back-link:hover[b-tnj4cqw0h5] {
    color: var(--ascend-accent-light);
}

/* #7153/#7159 - the WhitePlayer-vs-BlackPlayer page heading is gone: player
   identity renders as BoardPlayerChrome on the board's edges (owner ruling
   2026-08-19). The header band keeps only the back link + one thin meta row. */
.game-meta-row[b-tnj4cqw0h5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.6);
}

.meta-result[b-tnj4cqw0h5] {
    color: var(--ascend-secondary-light);
    border: 1px solid color-mix(in srgb, var(--ascend-secondary) 40%, transparent);
    border-radius: 8px;
    padding: 0.125rem 0.5rem;
    font-size: 0.9rem;
}

.meta-event[b-tnj4cqw0h5],
.meta-site[b-tnj4cqw0h5],
.meta-year[b-tnj4cqw0h5],
.meta-elo[b-tnj4cqw0h5] {
    font-size: 0.9rem;
}

/* Board + sidebar */
/* #6929 - this container takes keyboard focus via tabindex=0 so arrow-key move
   navigation works without clicking, and keeps working after a click lands on
   the move list. Suppress the browser's default focus ring: the visible
   affordance is the highlighted current move, not a box round the whole
   working area. */
.view-content:focus[b-tnj4cqw0h5] {
    outline: none;
}

.view-content[b-tnj4cqw0h5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .view-content[b-tnj4cqw0h5] {
        grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
        align-items: start;
    }
}

.board-column[b-tnj4cqw0h5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.board-area[b-tnj4cqw0h5] {
    /* #7159 - a board is sized min(available width, available height): the
       height-derived cap keeps the square board's BOTTOM edge above the fold
       on short viewports (measured 2026-08-20: at 1600x820 the uncapped 600px
       board ran 71px below the fold). A fixed viewport-derived length, never
       a percentage against an auto-sized row (the 2026-08-19 incident shape).
       21rem = content above the board (~16rem) plus the bottom identity strip
       and nav controls (~5rem). 18rem floor keeps the board usable on short-
       and-narrow viewports. */
    max-width: min(600px, 100%, max(18rem, calc(100dvh - 21rem)));
    margin: 0 auto;
    width: 100%;
}

.board-controls[b-tnj4cqw0h5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.nav-btn[b-tnj4cqw0h5] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 25%, transparent);
    border-radius: 10px;
    color: var(--ascend-accent);
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn:hover:not(:disabled)[b-tnj4cqw0h5] {
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

.nav-btn:disabled[b-tnj4cqw0h5] {
    opacity: 0.35;
    cursor: default;
}

.move-indicator[b-tnj4cqw0h5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    min-width: 6rem;
    text-align: center;
}

.sidebar-column[b-tnj4cqw0h5] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.moves-card[b-tnj4cqw0h5],
.actions-card[b-tnj4cqw0h5] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 15%, transparent);
    border-radius: 16px;
    padding: 1.25rem;
}

.moves-card h3[b-tnj4cqw0h5],
.actions-card h3[b-tnj4cqw0h5] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--ascend-accent);
    margin: 0 0 0.75rem;
}

/* Bug #7180 - the move list's LAYOUT is LinearMoveList's, and this panel asks
   it for the ROW layout (Layout="MoveListLayout.Rows"): one row per move
   number, 36px number gutter, White and Black in aligned columns. The first
   fix only added spacing, which turned "1. e4c52. Nf3d6" into a legible but
   still WRAPPING PARAGRAPH; the model is the Study Board move tree, and this
   panel now presents the same way.

   What is left here is this page's share: the panel's height budget, and the
   THEMING the component deliberately does not impose. The values below are
   the Study Board's (StudyBoard.razor.css ::deep .move-number / .move-cell /
   .move-san) expressed in this page's accent token, so the two surfaces read
   as one product rather than as two move lists that happen to look similar. */
.moves-card[b-tnj4cqw0h5]  .moves-list {
    max-height: 20rem;
}

.moves-card[b-tnj4cqw0h5]  .move-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.moves-card[b-tnj4cqw0h5]  .move-number {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
}

.moves-card[b-tnj4cqw0h5]  .move {
    padding: 2px 6px;
    border-radius: 5px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    transition: background 0.15s ease;
}

.moves-card[b-tnj4cqw0h5]  .move:hover {
    background: color-mix(in srgb, var(--ascend-accent) 10%, transparent);
}

/* This page IS clickable and DOES track a selected ply, so the current move has
   to be findable at a glance while stepping through the game. Cyan fill plus
   cyan text, exactly as the Study Board marks its selected move. */
.moves-card[b-tnj4cqw0h5]  .move.selected {
    background: color-mix(in srgb, var(--ascend-accent) 25%, transparent);
    color: var(--ascend-accent);
}

.actions-desc[b-tnj4cqw0h5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1rem;
}

.actions-stack[b-tnj4cqw0h5] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
/* /Components/Pages/MiniPhaseDrill.razor.rz.scp.css */
/* Page max-width intentionally NOT set — layout cap lives inside DrillShell. */
.mini-phase-drill-page[b-zf8uo2brwg] { padding: 0 1rem; }

.drill-intro[b-zf8uo2brwg] {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
}

.intro-description[b-zf8uo2brwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.phase-legend[b-zf8uo2brwg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}

.phase-chip[b-zf8uo2brwg] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    background: rgba(184, 133, 54, 0.05);
    border: 1px solid rgba(184, 133, 54, 0.15);
    border-radius: 8px;
}

.phase-name[b-zf8uo2brwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.phase-range[b-zf8uo2brwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.68rem;
    color: rgba(184, 133, 54, 0.8);
}

.drill-side-row[b-zf8uo2brwg] { display: flex; justify-content: center; margin-bottom: 0.5rem; }

.drill-board-area[b-zf8uo2brwg] {
    position: relative;
    margin-bottom: 1rem;
}

.phase-prompt[b-zf8uo2brwg] {
    text-align: center;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.75rem;
}

.phase-options[b-zf8uo2brwg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.phase-option[b-zf8uo2brwg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}

.phase-option:hover[b-zf8uo2brwg] {
    background: rgba(49, 221, 227, 0.1);
    border-color: #31DDE3;
}

.option-label[b-zf8uo2brwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}

.option-range[b-zf8uo2brwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 640px) {
    .phase-options[b-zf8uo2brwg] { grid-template-columns: 1fr; }
}
/* /Components/Pages/MixedMotifDrill.razor.rz.scp.css */
.mixed-motif-page[b-ltuhpnk8zm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Pre-reveal placeholder: the withheld motif is a deliberate absence, styled
   as muted so it reads as "not yet" rather than missing data. */
.motif-hidden[b-ltuhpnk8zm] {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

/* Post-attempt reveal: names the motif, links its home drill. */
.motif-reveal[b-ltuhpnk8zm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
}

.motif-reveal-lead[b-ltuhpnk8zm] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.motif-reveal-name[b-ltuhpnk8zm] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    color: var(--ascend-accent);
}

.motif-reveal-link[b-ltuhpnk8zm] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-secondary-light);
    text-decoration: none;
}

.motif-reveal-link:hover[b-ltuhpnk8zm] {
    text-decoration: underline;
}

/* End-of-session per-motif identification accuracy. */
.motif-breakdown[b-ltuhpnk8zm] {
    max-width: 32rem;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.motif-breakdown-title[b-ltuhpnk8zm] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0.5rem;
}

.motif-breakdown-list[b-ltuhpnk8zm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.motif-breakdown-row[b-ltuhpnk8zm] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.motif-breakdown-name[b-ltuhpnk8zm] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-accent);
    text-decoration: none;
}

.motif-breakdown-name:hover[b-ltuhpnk8zm] {
    text-decoration: underline;
}

.motif-breakdown-score[b-ltuhpnk8zm] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.motif-breakdown-note[b-ltuhpnk8zm] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.6rem 0 0;
}

/* #9031 review round 1 - the start-screen sentence that explains the capture, read
   before the first item at the member's own pace. */
.mixed-motif-instinct-framing[b-ltuhpnk8zm] {
    margin: 0 auto;
    max-width: 650px;
    text-align: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}
/* /Components/Pages/MoveHabitsDrill.razor.rz.scp.css */
/* Page max-width intentionally NOT set — layout cap lives inside DrillShell. */
.move-habits-drill-page[b-x4qjj9f454] { padding: 0 1rem; }

/* Sin Profile Section */
.habit-profile-section[b-x4qjj9f454] { margin-top: 1.5rem; }

.habit-section-title[b-x4qjj9f454] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 0.75rem;
}

.habit-list[b-x4qjj9f454] { display: flex; flex-direction: column; gap: 0.5rem; }

.habit-card[b-x4qjj9f454] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: rgba(184, 133, 54, 0.05);
    border: 1px solid rgba(184, 133, 54, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
    color: inherit;
}

.habit-card:hover[b-x4qjj9f454] { background: rgba(184, 133, 54, 0.1); border-color: rgba(184, 133, 54, 0.3); }
.habit-card.selected[b-x4qjj9f454] { background: rgba(184, 133, 54, 0.15); border-color: #B88536; }

.habit-emoji[b-x4qjj9f454] { font-size: 1.3rem; flex-shrink: 0; }
.habit-info[b-x4qjj9f454] { flex: 1; min-width: 0; }
.habit-name[b-x4qjj9f454] { display: block; font-family: var(--ascend-font-secondary); font-size: 0.85rem; font-weight: 600; color: #fff; }
.habit-count[b-x4qjj9f454] { display: block; font-family: var(--ascend-font-secondary); font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); }

/* #7046 - a habit without enough of the player's own material to drill. It
   stays visible and readable (it is their progress toward unlocking, not an
   error state) but is plainly not pressable. */
.habit-card.locked[b-x4qjj9f454] { cursor: not-allowed; opacity: 0.55; }
.habit-card.locked:hover[b-x4qjj9f454] { background: rgba(184, 133, 54, 0.05); border-color: rgba(184, 133, 54, 0.15); }

.habit-locked-note[b-x4qjj9f454] {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.habit-lock-icon[b-x4qjj9f454] { color: #B88536; flex-shrink: 0; margin-top: 0.15rem; }
.habit-locked-note p[b-x4qjj9f454] { margin: 0 0 0.25rem; }
.habit-locked-note p:last-child[b-x4qjj9f454] { margin-bottom: 0; }

.habit-unlock-rule[b-x4qjj9f454] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.62);
}

.habit-trend[b-x4qjj9f454] { font-size: 0.9rem; flex-shrink: 0; }

.show-more-btn[b-x4qjj9f454] {
    display: block;
    margin: 0.5rem auto 0;
    background: none;
    border: none;
    color: rgba(49, 221, 227, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    cursor: pointer;
}

.show-more-btn:hover[b-x4qjj9f454] { color: #31DDE3; }

.habit-detail-panel[b-x4qjj9f454] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.habit-detail-panel p[b-x4qjj9f454] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0 0 0.5rem;
}

.habit-detail-panel p:last-child[b-x4qjj9f454] { margin: 0; }

.no-habit-data[b-x4qjj9f454] {
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
}

.no-habit-data[b-x4qjj9f454]  i { font-size: 2rem; color: rgba(255, 255, 255, 0.3); display: block; margin-bottom: 0.75rem; }

/* Board */
.drill-side-row[b-x4qjj9f454] { display: flex; justify-content: center; margin-bottom: 0.5rem; }

.drill-board-area[b-x4qjj9f454] {
    position: relative;
    margin-bottom: 1rem;
}

/* #8730 - .drill-advance-row is now the shared verdict dock: DrillShell.razor.css
   owns its layout and its four viewport bands, reached with ::deep, so a
   page-level `display: flex` here would only fight it. */

.drill-next-btn[b-x4qjj9f454] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
}

.drill-next-btn:hover[b-x4qjj9f454] { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(49, 221, 227, 0.35); }
/* /Components/Pages/MyReports.razor.rz.scp.css */
.mr-list[b-0op57gwckm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 52rem;
}

.mr-item[b-0op57gwckm] {
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 15%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ascend-primary-dark) 60%, transparent);
    padding: 1rem 1.25rem;
}

.mr-item-head[b-0op57gwckm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mr-status[b-0op57gwckm] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid;
}

.mr-status.received[b-0op57gwckm] {
    /* #7905 - was var(--ascend-info): 4.20:1 on its own 12% tint, below AA.
       The light step clears it at 5.79:1, matching how .accepted already
       reaches for --ascend-secondary-light. */
    color: var(--ascend-info-light);
    border-color: color-mix(in srgb, var(--ascend-info-light) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-info-light) 12%, transparent);
}

/* #7391 - accepted: triaged and taken on, not yet started. Brand gold, the
   one colour on this card already proven to read on this surface (it is the
   update block's label colour), and clearly distinct from received (blue),
   being worked (cyan), fixed (green) and not planned (muted). */
.mr-status.accepted[b-0op57gwckm] {
    color: var(--ascend-secondary-light);
    border-color: color-mix(in srgb, var(--ascend-secondary-light) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-secondary-light) 12%, transparent);
}

.mr-status.working[b-0op57gwckm] {
    color: var(--ascend-accent);
    border-color: color-mix(in srgb, var(--ascend-accent) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

.mr-status.fixed[b-0op57gwckm],
.mr-status.answered[b-0op57gwckm] {
    color: var(--ascend-success);
    border-color: color-mix(in srgb, var(--ascend-success) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-success) 12%, transparent);
}

.mr-status.not-planned[b-0op57gwckm] {
    color: var(--ascend-text-muted);
    border-color: color-mix(in srgb, var(--ascend-text-muted) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-text-muted) 12%, transparent);
}

.mr-meta[b-0op57gwckm] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.mr-title[b-0op57gwckm] {
    margin: 0.6rem 0 0.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ascend-text-light);
}

.mr-text[b-0op57gwckm] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-text-secondary);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.mr-unavailable[b-0op57gwckm] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 52rem;
    border: 1px solid color-mix(in srgb, var(--ascend-warning) 40%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ascend-warning) 8%, transparent);
    padding: 1.25rem 1.5rem;
}

.mr-unavailable > i[b-0op57gwckm] {
    font-size: 1.5rem;
    color: var(--ascend-warning);
}

.mr-unavailable-body h3[b-0op57gwckm] {
    margin: 0 0 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ascend-text-light);
}

.mr-unavailable-body p[b-0op57gwckm] {
    margin: 0 0 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-text-secondary);
}

.mr-retry[b-0op57gwckm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ascend-accent);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 45%, transparent);
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
}

.mr-retry:hover[b-0op57gwckm] {
    border-color: var(--ascend-accent);
    background: color-mix(in srgb, var(--ascend-accent) 10%, transparent);
}

.mr-reply-open-row[b-0op57gwckm] {
    margin-top: 0.85rem;
}

.mr-reply-sent[b-0op57gwckm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-success);
}

.mr-reply-block[b-0op57gwckm] {
    margin-top: 0.85rem;
}

/* ::deep - EditForm renders the <form> itself, so the scoped attribute lands
   on the wrapper above it, not on the form. */
.mr-reply-block[b-0op57gwckm]  .mr-reply-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mr-reply-form-label[b-0op57gwckm] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-text-secondary);
}

/* ::deep - the textarea is rendered by InputTextArea, so scoped-CSS
   attributes land on the component boundary rather than on the element. */
.mr-reply-block[b-0op57gwckm]  .mr-reply-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 5.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
    background: color-mix(in srgb, var(--ascend-primary-dark) 75%, transparent);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}

.mr-reply-block[b-0op57gwckm]  .mr-reply-input:focus-visible {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 1px;
}

.mr-reply-block[b-0op57gwckm]  .validation-message {
    /* #7258 discipline: app.css owns .validation-message's COLOUR (it already
       sets the identical var(--ascend-error)). A private copy here would have
       nothing keeping it in step with the global rule, so it drifts and every
       page that never wrote one becomes the odd one out. Only this block's own
       geometry and type scale live here. */
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
}

.mr-reply-error[b-0op57gwckm] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-warning);
}

.mr-reply-actions[b-0op57gwckm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mr-reply-count[b-0op57gwckm] {
    margin-right: auto;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-text-muted);
}

/* #8118 - the read-only line under a report kept from the previous tracker. */
.mr-archived-note[b-0op57gwckm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-muted);
}
/* /Components/Pages/Onboarding.razor.rz.scp.css */
/* === Onboarding Page === */
.onboarding-page[b-vgctbrusil] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem 6rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    animation: fadeIn-b-vgctbrusil 0.4s ease;
}

@keyframes fadeIn-b-vgctbrusil {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Progress Indicator === */
.progress-indicator[b-vgctbrusil] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 3rem;
    padding-top: 1rem;
}

.progress-step[b-vgctbrusil] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.step-circle[b-vgctbrusil] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: var(--ascend-text-secondary);
    transition: all 0.3s ease;
}

.progress-step.active .step-circle[b-vgctbrusil] {
    background: rgba(49, 221, 227, 0.15);
    border-color: #31DDE3;
    color: #31DDE3;
    box-shadow: 0 0 20px rgba(49, 221, 227, 0.3);
}

.progress-step.completed .step-circle[b-vgctbrusil] {
    background: linear-gradient(135deg, #31DDE3, #42e8ed);
    border-color: #31DDE3;
    color: #0f172a;
}

.step-label[b-vgctbrusil] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.progress-step.active .step-label[b-vgctbrusil] {
    color: #31DDE3;
}

.progress-step.completed .step-label[b-vgctbrusil] {
    color: rgba(49, 221, 227, 0.7);
}

.progress-connector[b-vgctbrusil] {
    width: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 0.75rem;
    margin-bottom: 1.5rem;
    transition: background 0.3s ease;
}

.progress-connector.completed[b-vgctbrusil] {
    background: linear-gradient(90deg, #31DDE3, rgba(49, 221, 227, 0.4));
}

/* === Step Content === */
.step-content[b-vgctbrusil] {
    flex: 1;
    animation: fadeIn-b-vgctbrusil 0.4s ease;
}

/* === Step 1: Welcome === */
.logo-section[b-vgctbrusil] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.logo[b-vgctbrusil] {
    width: 80px;
    height: auto;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 0 20px rgba(49, 221, 227, 0.3));
}

.brand-name[b-vgctbrusil] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.brand-white[b-vgctbrusil] {
    color: #ffffff;
    /* letter-spacing adds trailing space after every glyph, including the
       last letter of "ASCEND", which renders as a gap before "CHESS".
       Cancel the trailing track so the two-tone segments sit flush (#6193). */
    margin-right: -0.1em;
}

.brand-gold[b-vgctbrusil] {
    color: #B88536;
}

.welcome-heading[b-vgctbrusil] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-bottom: 0.75rem;
}

.accent-cyan[b-vgctbrusil] {
    color: #31DDE3;
}

.welcome-subtitle[b-vgctbrusil] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: 2.5rem;
}

.features-grid[b-vgctbrusil] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.feature-card[b-vgctbrusil] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
}

.feature-card[b-vgctbrusil]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
    opacity: 1;
}

.feature-card:hover[b-vgctbrusil] {
    border-color: rgba(49, 221, 227, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 24px 70px rgba(4, 32, 71, 0.5), 0 0 50px rgba(49, 221, 227, 0.15);
}

.feature-icon[b-vgctbrusil] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.25), rgba(49, 221, 227, 0.08));
    border: 2px solid rgba(49, 221, 227, 0.4);
    margin-bottom: 1.25rem;
    box-shadow: 0 0 30px rgba(49, 221, 227, 0.15);
    color: #31DDE3;
}

.feature-icon[b-vgctbrusil]  i {
    font-size: 32px;
}

.feature-icon.maia[b-vgctbrusil] {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.25), rgba(184, 133, 54, 0.08));
    border-color: rgba(184, 133, 54, 0.4);
    box-shadow: 0 0 30px rgba(184, 133, 54, 0.15);
    color: var(--ascend-secondary-light);
}

.feature-icon.coaching[b-vgctbrusil] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.08));
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.15);
    color: var(--ascend-text-light);
}

.feature-title[b-vgctbrusil] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.coming-soon-badge[b-vgctbrusil] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #B88536;
    background: rgba(184, 133, 54, 0.15);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 50px;
    padding: 0.15rem 0.5rem;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.feature-description[b-vgctbrusil] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

/* === Step 2: Connect & Start === */
.step-heading[b-vgctbrusil] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-bottom: 1rem;
}

.connect-subtitle[b-vgctbrusil] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: 2.5rem;
}

.action-cards[b-vgctbrusil] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.action-card[b-vgctbrusil] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.08);
    transition: all 0.3s ease;
}

.action-card[b-vgctbrusil]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
    opacity: 1;
}

.action-card:hover[b-vgctbrusil] {
    transform: translateY(-4px);
    box-shadow: 0 24px 70px rgba(4, 32, 71, 0.5), 0 0 50px rgba(49, 221, 227, 0.12);
}

.action-card.highlight[b-vgctbrusil] {
    border-color: rgba(49, 221, 227, 0.4);
}

.action-icon[b-vgctbrusil] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border: 2px solid rgba(49, 221, 227, 0.4);
    margin-bottom: 1.25rem;
    box-shadow: 0 0 30px rgba(49, 221, 227, 0.15);
    color: #31DDE3;
}

.action-icon.training[b-vgctbrusil] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.3), rgba(49, 221, 227, 0.08));
    border-color: rgba(49, 221, 227, 0.5);
    box-shadow: 0 0 35px rgba(49, 221, 227, 0.2);
}

.action-title[b-vgctbrusil] {
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.action-description[b-vgctbrusil] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    flex: 1;
}

.connect-buttons[b-vgctbrusil] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.connect-btn[b-vgctbrusil] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.connect-logo[b-vgctbrusil] {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.connect-btn.lichess[b-vgctbrusil] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.connect-btn.lichess:hover[b-vgctbrusil] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.1);
}

.connect-btn.chesscom[b-vgctbrusil] {
    background: rgba(118, 150, 86, 0.15);
    color: #a3c64a;
    border: 1px solid rgba(118, 150, 86, 0.3);
}

.connect-btn.chesscom:hover[b-vgctbrusil] {
    background: rgba(118, 150, 86, 0.25);
    border-color: rgba(118, 150, 86, 0.4);
    box-shadow: 0 2px 12px rgba(118, 150, 86, 0.15);
}

.connected-badge[b-vgctbrusil] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

/* connected-badge inherits color: #10b981 from parent */

/* #6981 - the merged Rating step: both federations on the one page, each in
   its own labeled section, both lookup forms open with no reveal click. */
.step-rating .federation-section[b-vgctbrusil] {
    margin-top: 1.75rem;
    width: 100%;
}

/* Bug #6943 - why the connected badge is showing no number. */
.step-rating .federation-note[b-vgctbrusil] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.5rem 0 0;
    text-align: left;
}

.step-rating .federation-label[b-vgctbrusil] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ascend-secondary-light);
    margin: 0 0 0.75rem;
    text-align: left;
}

/* USCF Connect Button */
.connect-btn.uscf[b-vgctbrusil] {
    background: rgba(184, 133, 54, 0.15);
    color: #d4a44a;
    border: 1px solid rgba(184, 133, 54, 0.3);
}

.connect-btn.uscf:hover[b-vgctbrusil] {
    background: rgba(184, 133, 54, 0.25);
    border-color: rgba(184, 133, 54, 0.4);
    box-shadow: 0 2px 12px rgba(184, 133, 54, 0.15);
}

/* World Chess (#7020). No logo asset exists, so the button carries a Font
   Awesome glyph; FA injects the SVG without the scope attribute, hence ::deep. */
.connect-btn.worldchess[b-vgctbrusil] {
    background: color-mix(in srgb, var(--ascend-accent) 15%, transparent);
    color: var(--ascend-accent);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
}

.connect-btn.worldchess:hover[b-vgctbrusil] {
    background: color-mix(in srgb, var(--ascend-accent) 25%, transparent);
    border-color: color-mix(in srgb, var(--ascend-accent) 40%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--ascend-accent) 15%, transparent);
}

.connect-btn.worldchess[b-vgctbrusil]  i {
    font-size: 20px;
}

/* The inline lookup panel stands in for the OAuth round trip the other two
   platforms take; same frame as the FIDE seam below. */
.worldchess-connect-form[b-vgctbrusil] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* FIDE Inline Form (#6912 seam - see FideLookupForm in Onboarding.razor).
   Mirrors .uscf-connect-form (now in UscfLookupInline.razor.css) so the real
   search/select/confirm markup can drop in without a second layout. */
.fide-connect-form[b-vgctbrusil] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* The seam's "add it on my profile" affordance is an anchor styled as the
   existing pill button; strip the link underline it would otherwise inherit. */
.fide-connect-form .step-otb-btn[b-vgctbrusil] {
    text-decoration: none;
}

/* USCF Inline Form: extracted to the shared UscfLookupInline component
   (#6981) - its .uscf-* rules live in UscfLookupInline.razor.css now, next to
   the markup they style (page-scoped rules cannot reach child components). */

.start-training-btn[b-vgctbrusil] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.start-training-btn:hover[b-vgctbrusil] {
    background: linear-gradient(135deg, #42e8ed 0%, #31DDE3 100%);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

/* start-training-btn icon inherits color: #0f172a from parent */

/* === Navigation Bar === */
.nav-bar[b-vgctbrusil] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.95) 30%);
    backdrop-filter: blur(10px);
    z-index: 100;
}

.nav-left[b-vgctbrusil],
.nav-center[b-vgctbrusil],
.nav-right[b-vgctbrusil] {
    flex: 1;
    display: flex;
}

.nav-left[b-vgctbrusil] {
    justify-content: flex-start;
}

.nav-center[b-vgctbrusil] {
    justify-content: center;
}

.nav-right[b-vgctbrusil] {
    justify-content: flex-end;
}

.nav-btn[b-vgctbrusil] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

/* nav-btn icons inherit color from parent */

.back-btn[b-vgctbrusil] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.back-btn:hover[b-vgctbrusil] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* back-btn icon inherits color from parent */

.skip-btn[b-vgctbrusil] {
    background: transparent;
    color: var(--ascend-text-secondary);
    border: none;
    padding: 0.75rem 1rem;
}

.skip-btn:hover[b-vgctbrusil] {
    color: rgba(255, 255, 255, 0.7);
}

.skip-btn:disabled[b-vgctbrusil] {
    opacity: 0.5;
    cursor: not-allowed;
}

.continue-btn[b-vgctbrusil] {
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.continue-btn:hover:not(:disabled)[b-vgctbrusil] {
    background: linear-gradient(135deg, #42e8ed 0%, #31DDE3 100%);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

.continue-btn:disabled[b-vgctbrusil] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* continue-btn icon inherits color: #0f172a from parent */

/* === Mobile Responsive === */
@media (max-width: 768px) {
    .onboarding-page[b-vgctbrusil] {
        padding: 1.5rem 1rem 5rem;
    }

    .progress-connector[b-vgctbrusil] {
        width: 40px;
    }

    .step-label[b-vgctbrusil] {
        font-size: 0.65rem;
    }

    .welcome-heading[b-vgctbrusil],
    .step-heading[b-vgctbrusil] {
        font-size: 1.5rem;
    }

    .features-grid[b-vgctbrusil] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .feature-card[b-vgctbrusil] {
        padding: 1.5rem 1.25rem;
    }

    .action-cards[b-vgctbrusil] {
        grid-template-columns: 1fr;
    }

    .nav-bar[b-vgctbrusil] {
        padding: 0.75rem 1rem;
    }

    .nav-btn[b-vgctbrusil] {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .step-circle[b-vgctbrusil] {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .progress-connector[b-vgctbrusil] {
        width: 24px;
    }
}

/* PBI #5519 — 4-step layout additions. Step 2 (USCF) and step 3 (Connect)
   reuse most of the existing .step-* and .uscf-* / .connect-btn styles
   from the old combined step 2; we only add the variants below. Step 4
   (Focus pick) is new — focus-grid + focus-card pattern, adapted from
   PillarRecommendations card style for visual consistency. */

.step-subtitle[b-vgctbrusil] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    max-width: 36rem;
    margin: 0 auto 2rem;
    text-align: center;
}

.connect-btn.large[b-vgctbrusil],
.connected-badge.large[b-vgctbrusil],
.connect-btn.uscf.large[b-vgctbrusil] {
    width: 100%;
    max-width: 22rem;
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
}

.connect-buttons.large[b-vgctbrusil] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.step-otb-note[b-vgctbrusil] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    line-height: 1.6;
    max-width: 36rem;
    margin: 1.5rem auto 0.75rem;
    font-size: 0.95rem;
}

.step-otb-btn[b-vgctbrusil] {
    /* #8003 (Sonar css:S4656) - `display: inline-flex` also sat here and was
       overridden by the `display: flex` below, so it never applied. */
    align-items: center;
    gap: 0.5rem;
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.4);
    color: var(--ascend-secondary);
    border-radius: 999px;
    padding: 0.625rem 1.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin: 0 auto;
    display: flex;
    width: fit-content;
}

.step-otb-btn:hover[b-vgctbrusil] {
    background: rgba(184, 133, 54, 0.22);
    border-color: var(--ascend-secondary);
}

.focus-grid[b-vgctbrusil] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    max-width: 56rem;
    margin: 0 auto 1.5rem;
}

.focus-card[b-vgctbrusil] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.95), rgba(15, 23, 42, 0.9));
    border: 2px solid rgba(49, 221, 227, 0.25);
    border-radius: 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.focus-card:hover[b-vgctbrusil] {
    transform: translateY(-2px);
    border-color: rgba(49, 221, 227, 0.5);
    box-shadow: 0 8px 24px rgba(49, 221, 227, 0.12);
}

.focus-card.selected[b-vgctbrusil] {
    border-color: var(--ascend-accent);
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.16), rgba(15, 23, 42, 0.9));
    box-shadow: 0 0 0 2px rgba(49, 221, 227, 0.25), 0 12px 32px rgba(49, 221, 227, 0.18);
}

.focus-icon[b-vgctbrusil] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ascend-accent);
    font-size: 1.75rem;
}

.focus-label[b-vgctbrusil] {
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    font-size: 1rem;
    text-transform: uppercase;
}

.focus-phrase[b-vgctbrusil] {
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.step-focus-skip[b-vgctbrusil] {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 1rem;
}
/* /Components/Pages/OpeningDrill.razor.rz.scp.css */
/* Opening Drill Page */
.drill-page[b-zh68vk23ca] {
    padding: 1rem 2rem 2rem;
}

.loading-container[b-zh68vk23ca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

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

.btn-back[b-zh68vk23ca] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    color: #31DDE3;
    text-decoration: none;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: all 0.2s ease;
}

.btn-back:hover[b-zh68vk23ca] {
    background: rgba(49, 221, 227, 0.25);
}

/* Drill Header */
.drill-header[b-zh68vk23ca] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
}

.back-link[b-zh68vk23ca] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
}

.back-link:hover[b-zh68vk23ca] {
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
}

.drill-title-info[b-zh68vk23ca] {
    flex: 1;
}

.drill-title[b-zh68vk23ca] {
    font-family: 'condor', sans-serif;
    font-size: 1.1rem;
    margin: 0;
    letter-spacing: 0.05em;
}

.drill-opening[b-zh68vk23ca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* #6633 - the drill header's opening identity is the shared EcoBadge now; its
   own scoped CSS owns the name/code styling, so the local .eco-badge and
   .opening-name rules are gone. */

.header-right[b-zh68vk23ca] {
    display: flex;
    gap: 0.5rem;
}

.header-btn[b-zh68vk23ca] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-btn:hover[b-zh68vk23ca] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

/* Layout: BOTH phases now get their board+sidebar grid from the shared
   DrillShell, so this file owns no page-level layout at all.

   What used to be here was a two-phase hazard. `.setup-content,` was left
   with its trailing comma when the DrillShell sweep (7e09cf62) deleted the
   shared grid declaration, which silently grouped it with `.board-column`
   and gave the setup screen `flex-direction: column` - board stacked above
   a sidebar pushed below the fold. Valid CSS, wrong layout, and the comment
   sitting in the middle of the selector list claimed setup still worked.
   Removing the rule is the fix; do not reintroduce a page-level grid here. */

.board-area[b-zh68vk23ca] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

/* Setup Card */
.setup-card[b-zh68vk23ca] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
}

.setup-card h3[b-zh68vk23ca] {
    font-family: 'condor', sans-serif;
    color: #ffffff;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.setup-desc[b-zh68vk23ca] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-family: 'tablet-gothic', sans-serif;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.deviation-note[b-zh68vk23ca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 8px;
    color: #B88536;
    font-size: 0.8rem;
    font-family: 'tablet-gothic', sans-serif;
    margin-bottom: 1rem;
}

.side-buttons[b-zh68vk23ca] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.side-btn[b-zh68vk23ca] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid;
    cursor: pointer;
    font-family: 'tablet-gothic', sans-serif;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.white-btn[b-zh68vk23ca] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.white-btn:hover[b-zh68vk23ca] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.black-btn[b-zh68vk23ca] {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.black-btn:hover[b-zh68vk23ca] {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.piece-icon[b-zh68vk23ca] {
    font-size: 1.5rem;
}

/* Side-pill row above the board */
/* .drill-side-row removed — DrillShell auto-renders the side pill. */

/* Score Bar */
.score-bar[b-zh68vk23ca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-family: 'tablet-gothic', sans-serif;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.score-main[b-zh68vk23ca] {
    color: #10b981;
}

.score-alt[b-zh68vk23ca] {
    color: #B88536;
}

.score-dev[b-zh68vk23ca] {
    color: #ef4444;
}

.score-divider[b-zh68vk23ca] {
    color: rgba(255, 255, 255, 0.2);
}

.score-total[b-zh68vk23ca] {
    color: rgba(255, 255, 255, 0.4);
    margin-left: auto;
}

/* Line-complete panel (Bug #6907) - shown once the last move of the line has
   landed. The board is untouched, so this panel is the only thing that changes
   when the line ends; the summary arrives on the click, never on a timer.

   #8810 review - the finished-line copy is the dock's reading half now
   (DrillVerdictDock's Verdict), and "See your result" is its pinned Actions half,
   so the bar is a plain column: the dock's own split and its ".drill-advance-scroll
   > * + *" rule own the button's placement and the spacing above this block, which
   is why it sets no margin. It used to be an in-flow row under the board, with the
   button on its right, and above 1100px wide that row started below the fold. */
.line-complete-bar[b-zh68vk23ca] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.75rem 1rem;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 12px;
}

.line-complete-title[b-zh68vk23ca] {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--ascend-secondary-light);
}

.line-complete-sub[b-zh68vk23ca] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-text-muted);
}

/* Moves Card */
.moves-card[b-zh68vk23ca],
.review-card[b-zh68vk23ca] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1rem;
}

.moves-card h3[b-zh68vk23ca],
.review-card h3[b-zh68vk23ca] {
    font-family: 'condor', sans-serif;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
}

/* Bug #7180 - flex/wrap/gap on .moves-list and the whole .move-pair rule moved
   into LinearMoveList.razor.css, which owns the list's layout. Only the panel's
   own height budget is a page decision, so only that is left here. */
[b-zh68vk23ca] .moves-list {
    max-height: 200px;
}

[b-zh68vk23ca] .move-number {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
    font-family: 'tablet-gothic', monospace;
    min-width: 1.5rem;
}

[b-zh68vk23ca] .move {
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-family: 'tablet-gothic', monospace;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: default;
}

[b-zh68vk23ca] .move-correct {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

[b-zh68vk23ca] .move-alternative {
    background: rgba(184, 133, 54, 0.2);
    color: var(--ascend-secondary-light);
}

[b-zh68vk23ca] .move-incorrect {
    background: rgba(239, 68, 68, 0.2);
    color: var(--ascend-text-light);
}

[b-zh68vk23ca] .move-opponent {
    color: rgba(255, 255, 255, 0.5);
}

/* Explorer Context Card */
.explorer-context-card[b-zh68vk23ca] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1rem;
}

.explorer-context-card h3[b-zh68vk23ca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'condor', sans-serif;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
}

.context-info[b-zh68vk23ca] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.context-row[b-zh68vk23ca] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.context-label[b-zh68vk23ca] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    font-family: 'tablet-gothic', sans-serif;
}

.context-value[b-zh68vk23ca] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-family: 'tablet-gothic', sans-serif;
}

.context-value.move-san[b-zh68vk23ca] {
    color: #31DDE3;
    font-weight: 600;
}

.context-alternatives[b-zh68vk23ca] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.alt-move[b-zh68vk23ca] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    font-family: 'tablet-gothic', monospace;
    padding-left: 0.5rem;
}

.context-loading[b-zh68vk23ca],
.context-empty[b-zh68vk23ca] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.82rem;
    font-family: 'tablet-gothic', sans-serif;
    text-align: center;
    padding: 0.5rem;
}

.context-loading[b-zh68vk23ca] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.spin[b-zh68vk23ca] {
    animation: spin-b-zh68vk23ca 1s linear infinite;
}

/* Deviations Card */
.deviations-card[b-zh68vk23ca] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 16px;
    padding: 1rem;
}

.deviations-card h3[b-zh68vk23ca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'condor', sans-serif;
    color: rgba(184, 133, 54, 0.7);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
}

.deviations-list[b-zh68vk23ca] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
}

.deviation-row[b-zh68vk23ca] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.deviation-row.active[b-zh68vk23ca] {
    background: rgba(184, 133, 54, 0.1);
    border-color: rgba(184, 133, 54, 0.3);
}

.dev-theory[b-zh68vk23ca] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    font-family: 'tablet-gothic', sans-serif;
}

.dev-user[b-zh68vk23ca] {
    color: #B88536;
    font-size: 0.78rem;
    font-family: 'tablet-gothic', sans-serif;
}

/* Session Info Card */
.session-info-card[b-zh68vk23ca] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1rem;
}

.session-info-card h3[b-zh68vk23ca] {
    font-family: 'condor', sans-serif;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
}

.info-rows[b-zh68vk23ca] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-row[b-zh68vk23ca] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label[b-zh68vk23ca] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.82rem;
    font-family: 'tablet-gothic', sans-serif;
}

.info-value[b-zh68vk23ca] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-family: 'tablet-gothic', sans-serif;
}

/* Completion Phase */
.completion-content[b-zh68vk23ca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

.completion-card[b-zh68vk23ca] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
    width: 100%;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    position: relative;
    overflow: hidden;
}

.completion-card[b-zh68vk23ca]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
}

.completion-icon[b-zh68vk23ca] {
    margin-bottom: 1rem;
}

/* Bug #9053 follow-up 3: a neutral completion receipt, not a reward. The 64px size moved
   here from an inline style; --ascend-success (the same green as the Main Line count
   below) replaces the inline reward gold (#B88536). */
.completion-icon i[b-zh68vk23ca] {
    font-size: 64px;
    color: var(--ascend-success);
}

.completion-heading[b-zh68vk23ca] {
    font-family: 'condor', sans-serif;
    color: #ffffff;
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
    letter-spacing: 0.03em;
}

.completion-stats[b-zh68vk23ca] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

/* Completion stat tiles migrated to the shared StatItem (#6433). */

.completion-summary[b-zh68vk23ca] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.summary-positions[b-zh68vk23ca] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-family: 'tablet-gothic', sans-serif;
}

.summary-accuracy[b-zh68vk23ca] {
    color: #31DDE3;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'tablet-gothic', sans-serif;
}

/* #6681 - VERIFIED by rendering at 390x844: "Drill Again" + "Back to the Opening
   Hub" need 395px side by side. .completion-card keeps its 2.5rem padding on a
   phone, so the row only gets ~278px and the second label clips by 38px (6px
   even at the widest 374px container). Wrap so both labels stay readable. */
.completion-actions[b-zh68vk23ca] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 0;
}

.completion-actions > *[b-zh68vk23ca] {
    min-width: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .drill-page[b-zh68vk23ca] {
        padding: 1rem;
    }

    /* .setup-content / .drill-content collapse rules removed with the elements
       themselves - both phases are DrillShell now, which wraps on its own. */

    .completion-stats[b-zh68vk23ca] {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .drill-page[b-zh68vk23ca] {
        padding: 0.5rem;
    }
}
/* /Components/Pages/OpeningHub.razor.rz.scp.css */
/* Opening Hub Page
   Mobile-first: tight padding on phones, enhanced up at >=480px / >=768px. */
.opening-hub-page[b-4n2hl8dfzh] {
    padding: 0.5rem;
    max-width: 75rem;
    margin: 0 auto;
}

.header-link[b-4n2hl8dfzh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.header-link:hover[b-4n2hl8dfzh] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

/* Summary stats migrated to the shared StatsRow/StatItem (#6433); only the
   page-level spacing below the row stays here. */
[b-4n2hl8dfzh] .oh-summary-stats {
    margin-bottom: 2rem;
}

/* Sections */
.section[b-4n2hl8dfzh] {
    margin-bottom: 2rem;
}

.section-title[b-4n2hl8dfzh] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.section-header[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.section-header .section-title[b-4n2hl8dfzh] {
    margin: 0;
}

.sort-control[b-4n2hl8dfzh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* #7248 - axe reported a SERIOUS color-contrast violation on this <label>.
   Measured in chromium against the real composited surface: white at 0.45
   alpha paints #7b7f8a on the #0f172a page background = 4.48:1, just under
   the 4.5:1 AA floor for normal text (0.7rem, so the 3:1 large-text
   allowance does not apply). --ascend-text-secondary is the token
   .explorer-move-hint below already uses for muted-but-legible copy on this
   background, and it measures 5.85:1 here.

   CI could not see this. The sort control renders only once the account owns
   more than one repertoire book, and the e2e service account owned none, so
   the scanner never met the element - see RoleVerificationFixtureSeeder for
   the seeded content that closes that blind spot. */
.sort-label[b-4n2hl8dfzh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-text-secondary);
}

[b-4n2hl8dfzh] .sort-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
}

[b-4n2hl8dfzh] .sort-select:focus {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
}

[b-4n2hl8dfzh] .sort-select option {
    background: #0f172a;
    color: #ffffff;
}

/* Books Grid */
.books-grid[b-4n2hl8dfzh] {
    display: grid;
    /* minmax(min(320px, 100%), 1fr): the floor collapses to the viewport width
       on phones so a single card never forces horizontal overflow below 320px,
       while wider screens still tile at the 320px floor. */
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    /* 1fr rows make every row the same height as the tallest row in the
       grid — uniform card heights regardless of content density (some
       books have 2 stats, others have 6). Combined with height:100% on
       the card and margin-top:auto on the drill badge, action buttons
       align to a single visual baseline across the whole grid. */
    grid-auto-rows: 1fr;
    gap: 1.25rem;
}

.book-card-link[b-4n2hl8dfzh] {
    /* Stretch the link to fill its grid cell so the card inside can also
       reach full height. Without this, align-items:stretch (the grid
       default) only stretches block-level grid items — and our link
       wrapper would otherwise size to content. */
    height: 100%;
}

.book-card[b-4n2hl8dfzh] {
    display: flex;
    /* #7758 - the containing block for .card-pause-btn / .card-delete-btn.
       Without it those `position: absolute` controls resolved against
       .app-layout instead, and MEASURED IN THE BROWSER all eight of them (two
       per book) stacked in one 44px pile at the very bottom-right of the PAGE,
       3,000px below the cards they belong to. Hover-only reveal is what hid it:
       a pointer showed one at a time, briefly, far from where the eye was. Once
       touch shows them at rest they pile up in plain sight, and a tap on the
       pile hits whichever book happens to be on top - which for a DELETE is a
       data-loss bug, not a layout one. */
    position: relative;
    /* Fill the wrapper so margin-top:auto on the drill badge has somewhere
       to push to. Without it, cards size to content and look ragged in
       the grid. */
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(4, 32, 71, 0.3), 0 0 20px rgba(49, 221, 227, 0.05);
    transition: all 0.2s ease;
}

.book-card:hover[b-4n2hl8dfzh] {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(4, 32, 71, 0.4), 0 0 30px rgba(49, 221, 227, 0.1);
}

.card-accent[b-4n2hl8dfzh] {
    width: 4px;
    flex-shrink: 0;
}

.bar-white[b-4n2hl8dfzh] {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.5) 100%);
}

.bar-black[b-4n2hl8dfzh] {
    background: linear-gradient(180deg, #555 0%, #222 100%);
}

.bar-both[b-4n2hl8dfzh] {
    background: linear-gradient(180deg, #31DDE3 0%, #B88536 100%);
}

.card-cover[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    padding: 0.75rem 0 0.75rem 0.75rem;
    flex-shrink: 0;
}

.card-cover img[b-4n2hl8dfzh] {
    width: 52px;
    height: auto;
    border-radius: 4px;
}

.card-body-inner[b-4n2hl8dfzh] {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.card-top[b-4n2hl8dfzh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.card-title-group[b-4n2hl8dfzh] {
    min-width: 0;
    flex: 1;
}

.book-name[b-4n2hl8dfzh] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    font-size: 1rem;
    margin: 0;
    letter-spacing: 0.02em;
}

.book-author[b-4n2hl8dfzh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-secondary);
    display: block;
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.color-badge[b-4n2hl8dfzh] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--ascend-font-secondary);
    text-transform: capitalize;
    flex-shrink: 0;
}

.badge-white[b-4n2hl8dfzh] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.badge-black[b-4n2hl8dfzh] {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.badge-both[b-4n2hl8dfzh] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

/* Book Stats */
.book-stats[b-4n2hl8dfzh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.book-stat[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-family: var(--ascend-font-secondary);
}

.book-stat.due[b-4n2hl8dfzh] {
    color: #B88536;
}

.book-stat.caught-up[b-4n2hl8dfzh] {
    color: #10b981;
}

.book-stat.incomplete[b-4n2hl8dfzh] {
    color: #f97316;
}

.book-stat.uncovered[b-4n2hl8dfzh] {
    color: #ef4444;
}

.book-stat.tabiya[b-4n2hl8dfzh] {
    color: rgba(184, 133, 54, 0.95);
    cursor: help;
}

/* #6544 - SR paused on this book (clock-stop). Neutral accent tone, not a
   warning: pausing is a deliberate choice, never something to scold. */
.book-stat.sr-paused[b-4n2hl8dfzh] {
    color: var(--ascend-accent);
    cursor: help;
}

/* #9325 - the member is trialing this book. A neutral tone, a deliberate
   choice, never a warning; the same blue as its control. */
.book-stat.trialing[b-4n2hl8dfzh] {
    color: var(--ascend-info-light);
    cursor: help;
}

/* #6544 - every book paused: plain inline note where drilling is launched. */
.all-paused-note[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
}

.all-paused-note[b-4n2hl8dfzh]  i {
    flex-shrink: 0;
}

.stat-empty[b-4n2hl8dfzh] {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

/* Review Bar */
.review-bar-container[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-bar[b-4n2hl8dfzh] {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.review-bar-fill[b-4n2hl8dfzh] {
    height: 100%;
    background: linear-gradient(90deg, #31DDE3, #10b981);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* #7248 - same finding, and worse: white at 0.35 alpha paints #636875 on the
   #0f172a page background = 3.21:1 against a 4.5:1 floor. It renders only for
   a book with a target depth and at least one line, so it was invisible to
   the scanner for the same reason .sort-label was. */
.review-bar-label[b-4n2hl8dfzh] {
    color: var(--ascend-text-secondary);
    font-size: 0.7rem;
    font-family: var(--ascend-font-secondary);
    white-space: nowrap;
}

/* Clickable Card Link
   Rendered as a div (not <a>) with @onclick navigation — nesting a <button>
   inside an <a> is invalid HTML and Chromium fires the anchor navigation even
   when the button calls stopPropagation. See OpeningHub.razor for details. */
.book-card-link[b-4n2hl8dfzh] {
    text-decoration: none;
    color: inherit;
    display: block;
    border-radius: 16px;
    outline: none;
    cursor: pointer;
}

.book-card-link:focus-visible[b-4n2hl8dfzh] {
    outline: 2px solid #31DDE3;
    outline-offset: 2px;
    border-radius: 16px;
}

/* Drill Badge */
.card-drill-badge[b-4n2hl8dfzh] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    margin-top: auto;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 8px;
    color: #B88536;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.card-drill-badge:hover[b-4n2hl8dfzh] {
    background: rgba(184, 133, 54, 0.2);
    border-color: rgba(184, 133, 54, 0.5);
}

/* has-due — lines are scheduled for spaced-rep review NOW. Promote the badge
   from gold (always-available CTA) to cyan (act-now CTA) so users can spot
   which books need attention at a glance. */
.card-drill-badge.has-due[b-4n2hl8dfzh] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.45);
    color: #31DDE3;
}

.card-drill-badge.has-due:hover[b-4n2hl8dfzh] {
    background: rgba(49, 221, 227, 0.25);
    border-color: #31DDE3;
}

/* Quick Access Nav Grid */
.nav-grid[b-4n2hl8dfzh] {
    display: grid;
    /* min(260px, 100%) floor so a card shrinks with the viewport instead of
       overflowing on narrow phones. */
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1rem;
}

.nav-card[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.12);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-card:hover[b-4n2hl8dfzh] {
    border-color: rgba(49, 221, 227, 0.3);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(4, 32, 71, 0.3);
}

.nav-card-icon[b-4n2hl8dfzh] {
    color: #31DDE3;
    flex-shrink: 0;
}

.nav-card-icon[b-4n2hl8dfzh]  i {
    font-size: 24px;
}

.nav-card-content h3[b-4n2hl8dfzh] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    font-size: 0.9rem;
    margin: 0;
    letter-spacing: 0.02em;
}

.nav-card-content p[b-4n2hl8dfzh] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.78rem;
    font-family: var(--ascend-font-secondary);
    margin: 0.2rem 0 0;
}

/* Responsive - mobile-first: the base rules above target phones; these
   media queries enhance the layout UP for larger viewports. */
@media (min-width: 768px) {
    .opening-hub-page[b-4n2hl8dfzh] {
        padding: 1rem 2rem 2rem;
    }

}

/* ===== Create form (moved from RepertoireList) ===== */
.create-form-card[b-4n2hl8dfzh] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
}

.create-form-card .accent-line[b-4n2hl8dfzh] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
}

.create-form-card h3[b-4n2hl8dfzh] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
}

/* Mobile-first: stack Name + Color; row them up at >=480px. */
.form-fields[b-4n2hl8dfzh] { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }

/* Build settings (shared RepertoireSettingsFields) on the create form. Separated from
   the name/color fields so the card reads as "what is it" then "how should it build".
   The controls own their styling — do not restate it here with ::deep. */
.create-settings[b-4n2hl8dfzh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.form-group[b-4n2hl8dfzh] { flex: 1; min-width: 0; }

@media (min-width: 480px) {
    .form-fields[b-4n2hl8dfzh] { flex-direction: row; }
}

.form-group label[b-4n2hl8dfzh] {
    display: block;
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* #7258: this was a verbatim copy of the treatment that now lives globally in
   app.css - fill, border, radius, colour, padding, font and the focus ring
   were all identical. Only the sizing this page needs is left; the :focus
   block and the two ::deep select rules were pure duplicates and are gone. */
.form-input[b-4n2hl8dfzh] {
    width: 100%;
    box-sizing: border-box;
}

.name-input-row[b-4n2hl8dfzh] { display: flex; gap: 0.5rem; }
.name-input-row .form-input[b-4n2hl8dfzh] { flex: 1; }

.btn-scan[b-4n2hl8dfzh] {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(184, 133, 54, 0.15);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 12px;
    color: var(--ascend-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-scan:hover[b-4n2hl8dfzh] {
    background: rgba(184, 133, 54, 0.25);
    border-color: rgba(184, 133, 54, 0.5);
}

.scanned-preview[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    position: relative;
}

.scanned-cover[b-4n2hl8dfzh] { width: 48px; height: auto; border-radius: 4px; flex-shrink: 0; }
.scanned-info[b-4n2hl8dfzh] { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.scanned-author[b-4n2hl8dfzh] { font-family: var(--ascend-font-secondary); font-size: 0.85rem; color: var(--ascend-secondary); }
.scanned-meta[b-4n2hl8dfzh] { font-family: var(--ascend-font-secondary); font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }

.btn-clear-scan[b-4n2hl8dfzh] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 4px;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-clear-scan:hover[b-4n2hl8dfzh] { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); }

/* ===== Delete button on book card =====
   Positioned bottom-right so it doesn't overlap the color badge in the
   top-right of the card header. z-index + pointer-events ensure hover/click
   always reach the delete button even over sibling stats. */
.card-delete-btn[b-4n2hl8dfzh] {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 6px;
    color: var(--ascend-text-light);
    cursor: pointer;
    /* #7758 - 0 on a pointer device (the hover rule below reveals it), 1 on a
       finger, where there is no hover to reveal it with. This is a DELETE
       button: invisible and tappable is the worst of both. */
    opacity: var(--hover-reveal-rest, 0);
    transition: all 0.2s ease;
    z-index: 10;
}

.book-card:hover .card-delete-btn[b-4n2hl8dfzh] {
    opacity: 1;
}

.card-delete-btn:hover[b-4n2hl8dfzh] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

/* #8595 - "Share with a student" on a coach's own book. Sits left of the pause
   button. Always visible (it renders only for a coach with a student to share
   with): the gold tint keeps it apart from pause (cyan) and delete (red). */
.card-share-btn[b-4n2hl8dfzh] {
    position: absolute;
    bottom: 0.75rem;
    right: 5.75rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(184, 133, 54, 0.15);
    border: 1px solid rgba(184, 133, 54, 0.45);
    border-radius: 6px;
    color: var(--ascend-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.card-share-btn:hover[b-4n2hl8dfzh] {
    background: rgba(184, 133, 54, 0.3);
    border-color: rgba(184, 133, 54, 0.7);
}

/* #6544 - pause/resume SR toggle. Sits left of the delete button with the
   same reveal-on-hover treatment; a PAUSED book keeps its resume button
   visible so the state (and the way back) is always discoverable. */
.card-pause-btn[b-4n2hl8dfzh] {
    position: absolute;
    bottom: 0.75rem;
    right: 3.25rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 6px;
    color: var(--ascend-accent);
    cursor: pointer;
    /* #7758 - see .card-delete-btn. The accent tint (cyan) against delete's red
       is what keeps the two apart once BOTH are visible at rest on touch. */
    opacity: var(--hover-reveal-rest, 0);
    transition: all 0.2s ease;
    z-index: 10;
}

.book-card:hover .card-pause-btn[b-4n2hl8dfzh],
.card-pause-btn.is-paused[b-4n2hl8dfzh] {
    opacity: 1;
}

.card-pause-btn:hover:not(:disabled)[b-4n2hl8dfzh] {
    background: rgba(49, 221, 227, 0.2);
    border-color: rgba(49, 221, 227, 0.45);
}

.card-pause-btn:disabled[b-4n2hl8dfzh] {
    cursor: default;
    opacity: 0.5;
}

/* #9325 - mark or clear Trialing. Same 2.5rem stride as the row it joins:
   left of pause, or left of share when a coach's share button is there. A
   Trialing book keeps it visible at rest, like a paused book's resume.
   Review round 1 (finding 13): its own blue tint, so it never reads as the
   cyan pause button beside it, and a FILLED face when pressed, so the state
   shows on a touch screen where every control is already at full opacity. */
.card-trial-btn[b-4n2hl8dfzh] {
    position: absolute;
    bottom: 0.75rem;
    right: 5.75rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.45);
    border-radius: 6px;
    color: var(--ascend-info-light);
    cursor: pointer;
    opacity: var(--hover-reveal-rest, 0);
    transition: all 0.2s ease;
    z-index: 10;
}

.card-trial-btn.beside-share[b-4n2hl8dfzh] {
    right: 8.25rem;
}

.book-card:hover .card-trial-btn[b-4n2hl8dfzh],
.card-trial-btn:focus-visible[b-4n2hl8dfzh],
.card-trial-btn.is-trialing[b-4n2hl8dfzh] {
    opacity: 1;
}

/* A deeper blue than --ascend-info, so the white icon clears AA (5.2:1). */
.card-trial-btn.is-trialing[b-4n2hl8dfzh] {
    background: rgb(37, 99, 235);
    border-color: var(--ascend-info-light);
    color: var(--ascend-text-light);
}

.card-trial-btn:hover:not([aria-disabled="true"])[b-4n2hl8dfzh] {
    background: rgba(59, 130, 246, 0.24);
    border-color: var(--ascend-info-light);
}

.card-trial-btn.is-trialing:hover:not([aria-disabled="true"])[b-4n2hl8dfzh] {
    background: rgb(29, 78, 216);
}

.card-trial-btn[aria-disabled="true"][b-4n2hl8dfzh] {
    cursor: default;
    opacity: 0.5;
}

/* Review round 1 (finding 10) - with the Trialing control the action row is
   up to four buttons wide, and it reached the Drill/Rehearse badge at the
   bottom left: on touch at 344/390, and on a desktop card with a cover once
   the label widens ("Drill (120)", seen in the 1440 walk). While the control
   renders, the card body keeps the row's height clear below its content, so
   the badge sits above the row and a tap or click on it can never land on a
   card button. 32px row + its 0.75rem inset + a gap on a pointer device. */
.card-body-inner.has-trial-row[b-4n2hl8dfzh] {
    padding-bottom: calc(2rem + 1.5rem);
}

@media (hover: none) and (pointer: coarse), (max-width: 480px) {
    .card-body-inner.has-trial-row[b-4n2hl8dfzh] {
        padding-bottom: calc(var(--touch-target, 2.75rem) + 1rem);
    }
}

/* ===== Openings You Play (repertoire-openings-you-play) ===== */
.section-description[b-4n2hl8dfzh] {
    margin: -0.25rem 0 1rem;
    font-family: 'tablet-gothic', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
}

.played-color-section[b-4n2hl8dfzh] {
    margin-bottom: 1.75rem;
}

.played-color-header[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.color-label[b-4n2hl8dfzh] {
    font-family: 'condor', sans-serif;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #B88536;
    margin: 0;
}

/* ----- Filter preset chips ----- */
.filter-chips[b-4n2hl8dfzh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.filter-chip[b-4n2hl8dfzh] {
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'tablet-gothic', sans-serif;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.filter-chip:hover[b-4n2hl8dfzh] {
    border-color: rgba(49, 221, 227, 0.4);
    color: #ffffff;
}

.filter-chip.active[b-4n2hl8dfzh] {
    background: rgba(49, 221, 227, 0.14);
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.filter-empty[b-4n2hl8dfzh] {
    font-family: 'tablet-gothic', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    padding: 0.75rem 0.25rem;
}

/* ----- Played-openings QuickGrid ----- */
[b-4n2hl8dfzh] .played-grid {
    width: 100%;
    background: transparent;
    border: none;
}

[b-4n2hl8dfzh] .played-grid table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

[b-4n2hl8dfzh] .played-grid thead {
    background: rgba(49, 221, 227, 0.08);
}

[b-4n2hl8dfzh] .played-grid th {
    padding: 0.6rem 0.85rem;
    text-align: left;
    font-family: 'condor', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 2px solid rgba(49, 221, 227, 0.25);
    white-space: nowrap;
}

/* Fix 2: sortable QuickGrid headers render the title as a <button.col-title>
   (with an inner .col-title-text span). The button defaults to a near-black
   UA color and does NOT inherit the th color, so every sortable header read as
   invisible on the dark theme - only the non-sortable "Prep" plain-text header
   showed. Color the button + its text explicitly. */
[b-4n2hl8dfzh] .played-grid th .col-title,
[b-4n2hl8dfzh] .played-grid th .col-title-text {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'condor', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[b-4n2hl8dfzh] .played-grid th .col-title {
    background: transparent;
    border: none;
    cursor: pointer;
}

[b-4n2hl8dfzh] .played-grid th .col-title:hover,
[b-4n2hl8dfzh] .played-grid th .col-title:hover .col-title-text {
    color: #ffffff;
}

/* Keep the active-sort indicator (QuickGrid toggles col-sort-asc/desc on the
   th) visible in brand cyan so the sortable affordance still reads. */
[b-4n2hl8dfzh] .played-grid th.col-sort-asc .col-title,
[b-4n2hl8dfzh] .played-grid th.col-sort-asc .col-title-text,
[b-4n2hl8dfzh] .played-grid th.col-sort-desc .col-title,
[b-4n2hl8dfzh] .played-grid th.col-sort-desc .col-title-text {
    color: #31DDE3;
}

[b-4n2hl8dfzh] .played-grid th .col-title::after,
[b-4n2hl8dfzh] .played-grid th.col-sort-asc .col-title::after,
[b-4n2hl8dfzh] .played-grid th.col-sort-desc .col-title::after {
    color: #31DDE3;
    opacity: 0.9;
}

[b-4n2hl8dfzh] .played-grid td {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

[b-4n2hl8dfzh] .played-grid tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

[b-4n2hl8dfzh] .played-grid .col-num {
    text-align: right;
    white-space: nowrap;
}

[b-4n2hl8dfzh] .played-grid .col-eco {
    width: 64px;
}

[b-4n2hl8dfzh] .played-grid .col-prep {
    text-align: right;
}

.po-eco[b-4n2hl8dfzh] {
    font-family: 'condor', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #B88536;
    letter-spacing: 0.04em;
}

.po-names[b-4n2hl8dfzh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* #8664 - rows name the deepest line played, so the variation can run to
       "Austrian Attack, Weiss Variation" and longer. Capping the cell and
       letting the variation wrap keeps the grid from widening past the
       Prep column at desktop width. */
    max-width: 15rem;
}

.po-name[b-4n2hl8dfzh] {
    font-family: 'condor', sans-serif;
    color: #ffffff;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.po-variation[b-4n2hl8dfzh] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    /* #8664 - wraps instead of widening the column (see .po-names). */
    white-space: normal;
    line-height: 1.3;
}

.po-winrate[b-4n2hl8dfzh] {
    color: #31DDE3;
    font-size: 0.88rem;
}

/* Elo impact - signed + colored. Negative = red (drag), positive = cyan
   (gain), zero = neutral. The whole point: the worst-first sort is finally
   visible. #9365 - the estimate sits over its likely range (EloImpactInterval,
   stacked); the range keeps the shared component's size and color, so only the
   estimate takes the tone, and the tone is neutral unless the games support a
   direction. #9384 - the visible range became a certainty word. #9453 (owner ruling) -
   the word is gone and the tone follows the estimate's sign again (EloImpactTone), so
   the cell is one signed, colored number; the range and certainty are in its tooltip.
   inline-block so the cell sits right-aligned in td.col-num. */
.po-elo[b-4n2hl8dfzh] {
    display: inline-block;
    font-family: 'condor', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
}

.po-elo.neg[b-4n2hl8dfzh] {
    color: #ef4444;
}

.po-elo.pos[b-4n2hl8dfzh] {
    color: #31DDE3;
}

.po-elo.zero[b-4n2hl8dfzh] {
    color: rgba(255, 255, 255, 0.55);
}

/* #9453 - every negative estimate is red again, so the red meets the hovered row: #ef4444
   is 4.74:1 on the resting row but 4.17:1 on the hovered row (axe, #9453 walk at 1440). The
   hovered cell takes the brand's light error token, the one for error text on a lighter
   surface (docs/design/brand-tokens.md); the resting cell keeps the original red. */
[b-4n2hl8dfzh] .played-grid tbody tr:hover .po-elo.neg {
    color: var(--ascend-error-light);
}


/* ----- Add-to-book picker ----- */
.add-to-book[b-4n2hl8dfzh] {
    position: relative;
    display: inline-block;
}

/* Off-book "Add to book" trigger and the in-book badge share one fixed width so
   the Prep column lines up whichever state a row is in. */
.in-book-badge[b-4n2hl8dfzh],
.add-book-btn[b-4n2hl8dfzh] {
    width: 10rem;
    box-sizing: border-box;
    justify-content: center;
    max-width: none;
}

.in-book-badge span[b-4n2hl8dfzh],
.add-book-btn span:not(.chevron)[b-4n2hl8dfzh] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Full-viewport transparent catcher: a click anywhere outside the open menu
   closes it. Sits just below the menu (z 20) and above the grid. */
.add-book-backdrop[b-4n2hl8dfzh] {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: transparent;
}

.add-book-btn[b-4n2hl8dfzh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.35);
    color: #B88536;
    font-family: 'tablet-gothic', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.add-book-btn:hover:not(:disabled)[b-4n2hl8dfzh] {
    background: rgba(184, 133, 54, 0.18);
    border-color: rgba(184, 133, 54, 0.55);
    color: #d9a857;
}

.add-book-btn:disabled[b-4n2hl8dfzh] {
    opacity: 0.6;
    cursor: default;
}

.add-book-btn .chevron[b-4n2hl8dfzh] {
    font-size: 0.7rem;
}

.add-book-menu[b-4n2hl8dfzh] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 20;
    min-width: min(220px, 90vw);
    max-width: min(280px, 90vw);
    padding: 0.35rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.96));
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.add-book-option[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'tablet-gothic', sans-serif;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.add-book-option span[b-4n2hl8dfzh] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-book-option:hover[b-4n2hl8dfzh] {
    background: rgba(49, 221, 227, 0.12);
    color: #ffffff;
}

.add-book-option.new-book[b-4n2hl8dfzh] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0.2rem;
    padding-top: 0.6rem;
    color: #31DDE3;
}

/* Bug #6540: game-derived lines can't be woven into a book - explain why
   in place of the book options. Gold + italic matches the game-line
   provenance styling used by OpeningPreviewModal. */
.add-book-note[b-4n2hl8dfzh] {
    display: block;
    padding: 0.5rem 0.65rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-style: italic;
    color: var(--ascend-secondary-light);
    line-height: 1.35;
}

/* ----- Loading skeleton ----- */
.played-skeleton[b-4n2hl8dfzh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-row[b-4n2hl8dfzh] {
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
    background-size: 200% 100%;
    animation: shimmer-b-4n2hl8dfzh 1.4s ease-in-out infinite;
}

@keyframes shimmer-b-4n2hl8dfzh {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.in-book-badge[b-4n2hl8dfzh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 50px;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: #31DDE3;
    font-size: 0.8rem;
    text-decoration: none;
    max-width: 13.75rem;
    transition: all 0.2s ease;
}

.in-book-badge span[b-4n2hl8dfzh] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.in-book-badge:hover[b-4n2hl8dfzh] {
    background: rgba(49, 221, 227, 0.18);
    border-color: rgba(49, 221, 227, 0.5);
}

.in-book-badge[b-4n2hl8dfzh]  i {
    font-size: 14px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .played-color-header[b-4n2hl8dfzh] {
        align-items: flex-start;
        flex-direction: column;
    }
    [b-4n2hl8dfzh] .played-grid .col-eco {
        display: none;
    }
    .add-book-menu[b-4n2hl8dfzh] {
        right: auto;
        left: 0;
    }
}

/* ===== Opening line preview (Fix 3) ===== */
.po-opening-cell[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.po-preview-btn[b-4n2hl8dfzh] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.35);
    color: #31DDE3;
    cursor: pointer;
    transition: all 0.16s ease;
}

.po-preview-btn:hover[b-4n2hl8dfzh] {
    background: rgba(49, 221, 227, 0.2);
    border-color: #31DDE3;
    transform: scale(1.05);
}

.po-preview-btn[b-4n2hl8dfzh]  i {
    font-size: 11px;
}

/* #6347 — .preview-backdrop, the .preview-modal card and the hand-rolled
   .preview-close button are gone; the shared <Modal> (Size=Small) owns the
   overlay, dialog card, scroll cap and close button. Only the preview's own
   content styling remains, hung off .preview-content. */
.preview-content .accent-line[b-4n2hl8dfzh] {
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ascend-accent), var(--ascend-secondary));
    margin: -0.25rem -0.25rem 1rem;
}

.preview-header[b-4n2hl8dfzh] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    margin: 0 2rem 1rem 0;
}

.preview-title[b-4n2hl8dfzh] {
    font-family: 'condor', sans-serif;
    font-size: 1.05rem;
    color: #ffffff;
    margin: 0;
}

.preview-variation[b-4n2hl8dfzh] {
    font-family: 'tablet-gothic', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.preview-eco[b-4n2hl8dfzh] {
    font-family: 'condor', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: #B88536;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border: 1px solid rgba(184, 133, 54, 0.4);
    border-radius: 8px;
}

/* Bug #6540 (hub path): provenance label for a line sourced from the user's
   own games (no ECO row) - gold + italic, visually distinct from theory,
   consistent with OpeningPreviewModal's game-line-label. */
.preview-line-source[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: -0.4rem 0 0.8rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-style: italic;
    color: var(--ascend-secondary-light);
}

.preview-line-source[b-4n2hl8dfzh]  i {
    font-size: 12px;
    flex-shrink: 0;
}

.preview-board[b-4n2hl8dfzh] {
    width: min(100%, 340px);
    margin: 0 auto 1rem;
}

.preview-controls[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-bottom: 0.85rem;
}

.preview-step-btn[b-4n2hl8dfzh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    border: none;
    color: #0f172a;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(49, 221, 227, 0.28);
    transition: all 0.16s ease;
}

.preview-step-btn:hover:not(:disabled)[b-4n2hl8dfzh] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(49, 221, 227, 0.4);
}

.preview-step-btn:disabled[b-4n2hl8dfzh] {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.preview-step-btn[b-4n2hl8dfzh]  i {
    font-size: 14px;
}

.preview-step-label[b-4n2hl8dfzh] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 7.5rem;
    justify-content: center;
    font-family: 'tablet-gothic', sans-serif;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
}

.preview-move-no[b-4n2hl8dfzh] {
    color: rgba(255, 255, 255, 0.45);
}

.preview-move-san[b-4n2hl8dfzh] {
    font-family: 'condor', sans-serif;
    color: #ffffff;
    font-size: 0.95rem;
}

.preview-step-count[b-4n2hl8dfzh] {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
}

.preview-movelist[b-4n2hl8dfzh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.35rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.preview-ml-no[b-4n2hl8dfzh] {
    font-family: 'condor', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 0.25rem;
}

.preview-ml-no:first-child[b-4n2hl8dfzh] {
    margin-left: 0;
}

.preview-ml-san[b-4n2hl8dfzh] {
    font-family: 'condor', sans-serif;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 0.1rem 0.3rem;
    cursor: pointer;
    transition: all 0.14s ease;
}

.preview-ml-san:hover[b-4n2hl8dfzh] {
    color: #ffffff;
    background: rgba(49, 221, 227, 0.12);
}

.preview-ml-san.current[b-4n2hl8dfzh] {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.18);
    font-weight: 600;
}

.preview-empty[b-4n2hl8dfzh] {
    font-family: 'tablet-gothic', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin: 0;
}

/* #6618 - Drill column on the played-openings grid (affordance ported from
   the retired /study openings-you-play tiles) */
[b-4n2hl8dfzh] .played-grid .col-drill {
    white-space: nowrap;
}

.drill-cell[b-4n2hl8dfzh] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.drill-link[b-4n2hl8dfzh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--ascend-secondary);
    background: rgba(184, 133, 54, 0.1);
    transition: all 0.15s ease;
    width: fit-content;
}

.drill-link:hover[b-4n2hl8dfzh] {
    background: rgba(184, 133, 54, 0.2);
}

.drill-stat-line[b-4n2hl8dfzh] {
    font-size: 0.7rem;
    /* #8228 review round 3 walk: 0.4 measured 3.8:1 on the hub's #0f172a (axe color-contrast,
       serious) once the line carried the main-line count and interval; 0.65 clears 4.5:1. */
    color: rgba(255, 255, 255, 0.65);
}

.drill-none[b-4n2hl8dfzh] {
    color: rgba(255, 255, 255, 0.25);
}

/* #6618 - Opening Explorer section (the panel's single verified home) */
/* #6637 - the 40rem cap predated the board pairing; board (26rem basis) +
   move list need the full section width to sit side by side. flex-wrap
   stacks them on narrow viewports. */
.explorer-section[b-4n2hl8dfzh] {
    max-width: none;
}

/* #6637 - explorer paired with a live board */
/* #6929 - this container takes keyboard focus via tabindex=0 so arrow-key move
   navigation works without clicking, and keeps working after a click lands on
   the move list. Suppress the browser's default focus ring: the visible
   affordance is the highlighted current move, not a box round the whole
   working area. */
.explorer-layout:focus[b-4n2hl8dfzh] {
    outline: none;
}

.explorer-layout[b-4n2hl8dfzh] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.explorer-board-col[b-4n2hl8dfzh] {
    flex: 0 1 26.25rem;
    min-width: min(18.75rem, 100%);
}

/* #6794 - no focus ring here any more: navigation moved to the shared
   ChessBoard's OnScrollBack/OnScrollForward, whose .js binds the wheel and
   document-level arrows scoped to the hovered board. The layout no longer
   takes focus, so a focus-visible rule on it would never fire. */

.explorer-board-actions[b-4n2hl8dfzh] {
    margin-top: 0.6rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* #6794 - a failed move used to be silent. Say so instead. */
.explorer-move-error[b-4n2hl8dfzh] {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--ascend-error) 35%, transparent);
    background: color-mix(in srgb, var(--ascend-error) 8%, transparent);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8125rem;
}

.explorer-move-error i[b-4n2hl8dfzh] {
    color: var(--ascend-error);
    flex-shrink: 0;
}

/* #6794 - the walked line, every ply one click away. */
.explorer-move-list[b-4n2hl8dfzh] {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.35rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
}

.explorer-move-number[b-4n2hl8dfzh] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8125rem;
}

.explorer-ply[b-4n2hl8dfzh] {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    padding: 0.15rem 0.4rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.explorer-ply:hover[b-4n2hl8dfzh],
.explorer-ply:focus-visible[b-4n2hl8dfzh] {
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
    color: var(--ascend-accent);
}

.explorer-ply.current[b-4n2hl8dfzh] {
    background: color-mix(in srgb, var(--ascend-accent) 18%, transparent);
    border-color: var(--ascend-accent);
    color: var(--ascend-accent);
}

/* Plies ahead of the cursor - stepped back but not thrown away. */
.explorer-ply.ahead[b-4n2hl8dfzh] {
    color: rgba(255, 255, 255, 0.4);
}

.explorer-ply-start[b-4n2hl8dfzh] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

/* #6885 - axe color-contrast: rgba(255,255,255,0.45) measured 4.38:1 against
   the composited .explorer-move-list panel background, below the 4.5:1 AA
   floor for normal text. --ascend-text-secondary (#8595ab) is the existing,
   ratcheted (BrandTokenContrastTests) token for muted-but-legible copy on the
   dark panel - 5.45:1 against the actual panel background here. */
.explorer-move-hint[b-4n2hl8dfzh] {
    color: var(--ascend-text-secondary);
    font-size: 0.8125rem;
}

.explorer-panel-col[b-4n2hl8dfzh] {
    flex: 1 1 22.5rem;
    min-width: min(18.75rem, 100%);
}


/* #7736 — /opening-hub. .card-delete-btn is destructive and was 32x32, which
   is the pattern this sweep prioritises. .explorer-ply measured 44x24: wide
   enough already, so only the height moves. */
@media (hover: none) and (pointer: coarse) {
    .card-share-btn[b-4n2hl8dfzh],
    .card-pause-btn[b-4n2hl8dfzh],
    .card-trial-btn[b-4n2hl8dfzh],
    .card-delete-btn[b-4n2hl8dfzh] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }

    /* #9325 - the same 8px gap at the 44px touch size, one stride left of
       pause, or of share when it is there. */
    .card-trial-btn[b-4n2hl8dfzh] {
        right: 7.25rem;
    }

    .card-trial-btn.beside-share[b-4n2hl8dfzh] {
        right: 10.5rem;
    }

    /* #8595 - the same 8px gap at the 44px touch size (see .card-pause-btn below). */
    .card-share-btn[b-4n2hl8dfzh] {
        right: 7.25rem;
    }

    /* #7758 - and move the pause button out of the delete button's way. The
       two offsets (0.75rem / 3.25rem) were set for 32px controls and leave a
       2.5rem stride; at the 44px touch size that is a 4px OVERLAP, and app.css
       already records where that ends up - the top control silently eats its
       neighbor's taps, and here the top one is DELETE. 4rem restores the same
       8px gap the pointer sizing has. */
    .card-pause-btn[b-4n2hl8dfzh] {
        right: 4rem;
    }

    /* A <span role="button" tabindex="0"> is an interactive control whatever
       tag it uses, and it measured 79x35. */
    .card-drill-badge[b-4n2hl8dfzh] {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target);
    }

    .sort-select[b-4n2hl8dfzh] {
        min-height: var(--touch-target);
    }

    /* 44x24 measured: wide enough already, only the height moves. min-width too,
       because a single-ply chip ("e4") is narrower than the rest. */
    .explorer-ply[b-4n2hl8dfzh] {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
    }
}


/* ======================================================================
   #7734 follow-on — THE PLAYED-OPENINGS GRID NEEDS ITS OWN SCROLLER.

   Develop build 10882 failed the tablet-band overflow guard on /opening-hub
   at all three widths: 431px past the edge at 834, 241px at 1024 and 33px at
   1280, with body.scrollWidth at 1265px (1313 at 1280, where the content
   column starts further right). The probe named `body` as the culprit rather
   than an element because it seeds its widest value FROM body.scrollWidth,
   and the grid's right edge lands on that same number rather than past it.

   The cause is the shared wrapper, not this page's columns. `.responsive-table`
   in app.css is only a horizontal-scroll container inside
   `@media (max-width: 768px)`; above that it is `width: 100%` and nothing
   else, so a grid whose min-content exceeds the content column simply runs
   off the right edge — and html/body carry `overflow-x: hidden` (#7296), so
   that remainder is hidden, unscrollable and unzoomable rather than merely
   off-screen. Seven columns with Prep pinned at a fixed 10rem put this grid's
   floor around 1265px against a content column of 414px at 834, 604 at 1024
   and 804 at 1280. It is #7734's bug on a second grid, in the same band.

   WHY IT WAS NOT SEEN BEFORE. The whole section renders under
   `@if (openings.Count > 0)`, and the CI account (e2e@ascendchess.com) has
   played-opening rows where the demo account does not. #7248 recorded exactly
   this shape for the axe gate on this same page: an empty state is not the
   page, and a check that measures an empty state reports the same green as a
   check that measured everything and found nothing wrong.

   FIXED HERE, NOT IN app.css. Making `.responsive-table` scroll at every
   width would fix ~20 other grids the same way, and it should — but it also
   makes every one of them a clip boundary on BOTH axes (CSS Overflow 3: the
   two axes cannot disagree once one is non-visible), which is how #7260's
   clipped dropdown was recreated on /games. That sweep needs each surface
   looked at; it is recorded in the handoff rather than done blind here.

   NO GRADIENT HINT. The obvious edge-fade is what broke the axe gate on
   /games in the same build - see Games.razor.css. A background-image on a
   wrapper makes every cell inside it undecidable for axe-core. The cue is the
   house one instead: ascend-scroll-edge (a box-shadow on a scroll timeline,
   defined and explained in app.css beside .responsive-table), plus a brand
   scrollbar rail whose thumb says the same thing. */
.played-table-wrapper[b-4n2hl8dfzh] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(49, 221, 227, 0.55) rgba(255, 255, 255, 0.06);
    animation-name: ascend-scroll-edge;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(self inline);
}

/* #7260's lesson applied before it can bite: `overflow-x: auto` computes
   overflow-y to `auto` too, so the absolutely positioned "Add to book" menu
   would be sliced off at the wrapper's bottom edge on the last row. The strip
   is RESERVED while a menu is open and canceled again by the negative margin,
   so nothing below the grid moves; flipping the wrapper back to
   `overflow: visible` instead would reset scrollLeft at the moment of the
   click and take the open menu off-screen with it.

   The menu is bounded first, because a reserve can only be a guarantee against
   a known height: a player with a dozen matching books would otherwise open a
   menu taller than any strip reserved for it. 15rem is about six options. */
.add-book-menu[b-4n2hl8dfzh] {
    max-height: 15rem;
    overflow-y: auto;
}

.played-table-wrapper:has(.add-book-menu)[b-4n2hl8dfzh] {
    padding-bottom: 16rem;
    margin-bottom: -16rem;
}


/* #7736 follow-on — the played-openings controls. Every one of these renders
   only for an account that HAS played openings, which is why the sweep that
   measured this page as demo@ reported it clean and CI (e2e@) found five kinds
   under the line: .filter-chip 72x29, .filter-chip.active 40x29, .drill-link
   93x26, .add-book-btn 160x32, .po-preview-btn 26x26.

   All grown, none given a pseudo hit area: the filter chips sit 0.4rem apart
   in a wrapping row and the preview button sits 0.55rem from the opening name,
   so invisible 44px areas would overlap and let one control eat its
   neighbor's taps. The chips' row already wraps, and the grid now scrolls, so
   there is room to grow into. */
@media (hover: none) and (pointer: coarse) {
    .filter-chip[b-4n2hl8dfzh] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-target);
        /* "All" is the narrow one - 40px measured - so the width floor is
           needed as well as the height. */
        min-width: var(--touch-target);
    }

    .drill-link[b-4n2hl8dfzh] {
        min-height: var(--touch-target);
    }

    .add-book-btn[b-4n2hl8dfzh] {
        min-height: var(--touch-target);
    }

    .po-preview-btn[b-4n2hl8dfzh] {
        width: var(--touch-target);
        height: var(--touch-target);
    }

    .po-preview-btn[b-4n2hl8dfzh]  i {
        font-size: 15px;
    }
}

/* ===== #9108 - per-row hide + restore on the played-openings grid =====
   The same control, the same store and the same hidden list as the Insights
   Opening Performance card (#9075); the styling is repeated rather than shared
   because scoped CSS does not cross a component boundary. The colours are the
   card's, value for value: these translucent white tints have no token (the
   --ascend-* set has no translucent surface) and they are already proven for
   contrast on this same dark surface by the Insights card's stylesheet. */
[b-4n2hl8dfzh] .played-grid .col-hide {
    width: 48px;
    text-align: right;
    white-space: nowrap;
}

/* #9397 - the eye is the shared Button with a 14px glyph and no label, so its
   box was the glyph plus this padding: 28.4 x 23.6 at 1440, under WCAG 2.2 AA
   2.5.8's 24px floor, which applies to a mouse as well as a finger. The floor
   is a MINIMUM: the glyph keeps its size, the hit area grows around it (the
   flex Button centers it), and the coarse-pointer block below still raises it
   to the full 44px. */
.played-color-section[b-4n2hl8dfzh]  .row-hide {
    padding: 0.3rem 0.45rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

/* #9397 - the 24px floor above must not LOWER the shared Button's phone floor.
   That rule compiles to (0,3,0) and beats the Button's scoped `.btn-sm` (0,2,0),
   whose `@media (max-width: 768px)` block holds a small button at 2.5rem (40px)
   on every pointer. Without this, a narrow screen that is not
   `(hover: none) and (pointer: coarse)` drew the eye 24px tall instead of 40px.
   It sits before the coarse block below, which still wins with the full 44px. */
@media (max-width: 768px) {
    .played-color-section[b-4n2hl8dfzh]  .row-hide {
        min-height: 2.5rem;
    }
}

.hidden-rows[b-4n2hl8dfzh] {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hidden-rows-list[b-4n2hl8dfzh] {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hidden-row[b-4n2hl8dfzh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.hidden-row-name[b-4n2hl8dfzh] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.hidden-row-opening[b-4n2hl8dfzh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    overflow-wrap: anywhere;
}

.hidden-row-variation[b-4n2hl8dfzh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    overflow-wrap: anywhere;
}

/* The ECO code beside a hidden line, so two lines with the same name in
   different families (Modern Defense A41 and B06) read apart. */
.hidden-row-eco[b-4n2hl8dfzh] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.hidden-row[b-4n2hl8dfzh]  .hidden-row-restore {
    flex-shrink: 0;
}

/* The toggle's chevron points the way the list will move. */
.hidden-rows[b-4n2hl8dfzh]  .hidden-rows-chevron {
    margin-left: 0.35rem;
}

.hidden-rows-note[b-4n2hl8dfzh] {
    margin: 0.5rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

/* At phone width a long opening name beside Restore collapses into a tall
   sliver, so the name takes its own line (same fix as the Insights card). */
@media (max-width: 400px) {
    .hidden-row[b-4n2hl8dfzh] {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .hidden-row[b-4n2hl8dfzh]  .hidden-row-restore {
        margin-left: auto;
    }
}

@media (hover: none) and (pointer: coarse) {
    .played-color-section[b-4n2hl8dfzh]  .row-hide {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }

    .hidden-rows[b-4n2hl8dfzh]  .hidden-rows-toggle,
    .hidden-row[b-4n2hl8dfzh]  .hidden-row-restore {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/PawnStructureDetail.razor.rz.scp.css */
.structure-detail[b-4rdtyurx8e] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.detail-top[b-4rdtyurx8e] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* #6951 — the pawn skeleton card sits above the description. The board sizes
   itself; this only supplies the vertical rhythm the sibling cards use. */
.detail-board[b-4rdtyurx8e] {
    margin-bottom: 1.25rem;
}

.section-heading[b-4rdtyurx8e] {
    font-family: var(--ascend-font-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-accent);
    margin: 0 0 0.55rem;
}

.section-heading + .section-heading[b-4rdtyurx8e] {
    margin-top: 1.25rem;
}

.section-body[b-4rdtyurx8e] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    margin: 0;
}

/* #6633 - one named opening per related ECO code (Benoni spans A60-A79, so the
   list is long); each row is a shared EcoBadge. */
.eco-codes[b-4rdtyurx8e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-wrap: anywhere;
}

.source-line[b-4rdtyurx8e] {
    margin-top: 1.1rem;
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    font-style: italic;
}

.plans-row[b-4rdtyurx8e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .plans-row[b-4rdtyurx8e] {
        grid-template-columns: 1fr;
    }
}

.plan-heading[b-4rdtyurx8e] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.85rem;
    letter-spacing: 0.04em;
}

.plan-card.plan-white .plan-heading[b-4rdtyurx8e] {
    color: #ffffff;
}

.plan-card.plan-black .plan-heading[b-4rdtyurx8e] {
    color: rgba(255, 255, 255, 0.9);
}

.plan-body[b-4rdtyurx8e] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
    margin: 0;
    white-space: pre-line;
}

.empty-inline[b-4rdtyurx8e] {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin: 0;
    font-size: 0.85rem;
}

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

.chip-row[b-4rdtyurx8e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip[b-4rdtyurx8e] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    color: rgba(49, 221, 227, 0.9);
    background: rgba(49, 221, 227, 0.08);
}

.related-tabiyas[b-4rdtyurx8e] {
    display: block;
}

.tabiya-list[b-4rdtyurx8e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.tabiya-list a[b-4rdtyurx8e] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--ascend-font-secondary);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tabiya-list a:hover[b-4rdtyurx8e] {
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(49, 221, 227, 0.06);
    color: #ffffff;
}

.tabiya-name[b-4rdtyurx8e] {
    font-weight: 600;
    color: #ffffff;
}

.tabiya-opening[b-4rdtyurx8e] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

/* #6633 - the shared EcoBadge owns the opening identity in this row; keep the
   row's own muted treatment on the name it renders. */
.tabiya-opening[b-4rdtyurx8e]  .eco-name {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
}

.detail-actions[b-4rdtyurx8e] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* #7776 - the side switch: one page, both rows of a reversed-color pair. The
   tabs carry the two rows' own names (which color "owns" a structure is not a
   fact the schema holds, so the labels never claim one). */
.side-switch[b-4rdtyurx8e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.side-tab[b-4rdtyurx8e] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.45rem 0.9rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}

.side-tab:hover[b-4rdtyurx8e] {
    border-color: rgba(49, 221, 227, 0.4);
    color: rgba(255, 255, 255, 0.9);
}

.side-tab.active[b-4rdtyurx8e] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.5);
    color: var(--ascend-accent);
}

.side-note[b-4rdtyurx8e] {
    margin: 0.5rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

.back-link[b-4rdtyurx8e] {
    color: rgba(49, 221, 227, 0.85);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.back-link:hover[b-4rdtyurx8e] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

/* #6952 - inline outcome of the review request; replaces the button so the
   door cannot be pressed twice from one page view. */
.loading-text[b-4rdtyurx8e],
.empty-text[b-4rdtyurx8e] {
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 1.5rem 0;
}

/* #6623 - sub-labels grouping true pawn breaks vs plans/maneuvers */
.chip-group-label[b-4rdtyurx8e] {
    font-family: var(--ascend-font-primary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.9rem 0 0.4rem;
}

.chip-group-label:first-of-type[b-4rdtyurx8e] {
    margin-top: 0;
}
/* /Components/Pages/PawnStructures.razor.rz.scp.css */
.structures-page[b-erirafbqlf] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Loading / Empty */
.loading-state[b-erirafbqlf] {
    text-align: center;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
}

.spin[b-erirafbqlf] {
    animation: spin-b-erirafbqlf 1s linear infinite;
}

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

/* Filter bar */
.filter-bar[b-erirafbqlf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.filter-chip[b-erirafbqlf] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-chip:hover[b-erirafbqlf] {
    border-color: rgba(49, 221, 227, 0.4);
    color: rgba(255, 255, 255, 0.85);
}

.filter-chip.active[b-erirafbqlf] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.5);
    color: var(--ascend-accent);
}

/* Structure grid */
.structures-grid[b-erirafbqlf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1rem;
}

/* Structure card */
.structure-card[b-erirafbqlf] {
    /* #7323 - a bare 1fr grid track (the mobile layout below) has an AUTO
       minimum, so one card whose min-content is wide - an EcoBadge naming
       "Dutch Defense: Leningrad Variation, Warsaw Variation" is one unbreakable
       nowrap run - silently grew the single column to 507px against a 390px
       viewport, pushing every card past the right edge with overflow-x hidden
       making the excess unreachable. min-width: 0 releases the grid item's
       min-content floor; the EcoBadge's own min-width: 0 + flex-wrap +
       text-overflow: ellipsis rules then engage exactly as designed. */
    min-width: 0;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.structure-card:hover[b-erirafbqlf] {
    border-color: rgba(49, 221, 227, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.structure-card.clickable[b-erirafbqlf] {
    cursor: pointer;
}

.structure-card.clickable:focus-visible[b-erirafbqlf] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.structure-card.has-games[b-erirafbqlf] {
    border-color: rgba(49, 221, 227, 0.2);
}

/* Header */
.structure-header[b-erirafbqlf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

/* #6951 — the pawn skeleton thumbnail. The board is pointer-inert so a click
   anywhere on the card still opens the structure rather than being swallowed
   by the board surface. */
.structure-skeleton[b-erirafbqlf] {
    margin: 0 0 0.85rem;
    pointer-events: none;
}

.structure-name[b-erirafbqlf] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: #ffffff;
    font-weight: 500;
}

.structure-family[b-erirafbqlf] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(184, 133, 54, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* #7776 - the card holds the structure AND its color-reversed counterpart. */
.structure-sides-chip[b-erirafbqlf] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    padding: 0.1rem 0.5rem;
    margin-left: 0.5rem;
    border-radius: 50px;
    border: 1px solid rgba(49, 221, 227, 0.45);
    color: var(--ascend-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    vertical-align: middle;
}

/* Description */
.structure-description[b-erirafbqlf] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

/* Meta */
.structure-meta[b-erirafbqlf] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
}

.meta-label[b-erirafbqlf] {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* #6633 - the ECO row lists named openings (shared EcoBadge), so it wraps as a
   badge row rather than as a run of text. */
.eco-meta[b-erirafbqlf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.eco-more[b-erirafbqlf] {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

/* Plans / breaks */
.structure-plans[b-erirafbqlf] {
    margin: 0.75rem 0;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.plan-row[b-erirafbqlf],
.goal-row[b-erirafbqlf] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
}

.plan-label[b-erirafbqlf],
.goal-label[b-erirafbqlf] {
    flex-shrink: 0;
    font-weight: 500;
}

.white-label[b-erirafbqlf] {
    color: rgba(255, 255, 255, 0.7);
}

.black-label[b-erirafbqlf] {
    color: rgba(150, 150, 150, 0.8);
}

.plan-value[b-erirafbqlf],
.goal-value[b-erirafbqlf] {
    color: rgba(255, 255, 255, 0.5);
}

/* Goals */
.structure-goals[b-erirafbqlf] {
    margin: 0.5rem 0;
    font-size: 0.75rem;
}

/* Stats */
/* #8340 - performance sits directly under the board, above the prose, so a
   member sees how they score without scrolling past the description. The
   separator therefore divides the stats from the TEXT BELOW them, not from
   the card above: top border/padding flipped to bottom. */
.structure-stats[b-erirafbqlf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.15);
}

.stat[b-erirafbqlf] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
}

.stat.win[b-erirafbqlf] {
    color: #10b981;
}

.stat.loss[b-erirafbqlf] {
    color: #ef4444;
}

.stat.draw[b-erirafbqlf] {
    color: rgba(255, 255, 255, 0.5);
}

.stat.accuracy[b-erirafbqlf] {
    color: var(--ascend-accent);
}/* Mobile */
@media (max-width: 768px) {
    .structures-page[b-erirafbqlf] {
        padding: 1rem;
    }

    .structures-grid[b-erirafbqlf] {
        grid-template-columns: 1fr;
    }

    .filter-bar[b-erirafbqlf] {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}
/* /Components/Pages/PreEngineReview.razor.rz.scp.css */
.per-page[b-rns2a2f53n] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 980px;
    margin: 0 auto;
}

.per-lead[b-rns2a2f53n] {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.per-section-title[b-rns2a2f53n] {
    margin: 1rem 0 0;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.25rem;
    color: #31DDE3;
    letter-spacing: 0.02em;
}

.per-grid[b-rns2a2f53n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.per-card-title[b-rns2a2f53n] {
    margin: 0 0 0.5rem;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    color: #ffffff;
}

.per-card-body[b-rns2a2f53n] {
    margin: 0 0 0.75rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.8);
}

.per-card-body:last-child[b-rns2a2f53n] {
    margin-bottom: 0;
}

.per-list[b-rns2a2f53n] {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

.per-list li[b-rns2a2f53n] {
    margin-bottom: 0.4rem;
}

.per-list strong[b-rns2a2f53n] {
    color: #ffffff;
}

/* Rung ladder */
.per-rungs[b-rns2a2f53n] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.per-rung[b-rns2a2f53n] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
}

.per-rung-index[b-rns2a2f53n] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border: 2px solid rgba(49, 221, 227, 0.4);
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.1rem;
    color: #31DDE3;
}

.per-rung-body[b-rns2a2f53n] {
    flex: 1;
}

.per-rung-head[b-rns2a2f53n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.3rem;
}

.per-rung-name[b-rns2a2f53n] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    color: #ffffff;
}

.per-rung-band[b-rns2a2f53n] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    background: rgba(184, 133, 54, 0.18);
    border: 1px solid rgba(184, 133, 54, 0.4);
    color: var(--ascend-secondary-light);
}

.per-rung-skill[b-rns2a2f53n] {
    margin: 0;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Pages/PreEngineReviewWalkthrough.razor.rz.scp.css */
.cwh-page[b-zgzvvxyfil] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1080px;
    margin: 0 auto;
}

.cwh-lead[b-zgzvvxyfil] {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.cwh-pick-title[b-zgzvvxyfil] {
    margin: 0;
    font-family: 'condor', sans-serif;
    font-size: 1.25rem;
    color: #ffffff;
}

.cwh-pick-sub[b-zgzvvxyfil] {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.cwh-game-list[b-zgzvvxyfil] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cwh-game-btn[b-zgzvvxyfil] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.18);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cwh-game-btn:hover[b-zgzvvxyfil] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.5);
    transform: translateY(-1px);
}

.cwh-game-main[b-zgzvvxyfil] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 0;
}

.cwh-game-vs[b-zgzvvxyfil] {
    font-weight: 600;
    font-size: 1rem;
}

.cwh-game-meta[b-zgzvvxyfil] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.cwh-game-date[b-zgzvvxyfil] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.cwh-game-arrow[b-zgzvvxyfil] {
    color: #31DDE3;
    flex-shrink: 0;
}

.cwh-pick-foot[b-zgzvvxyfil] {
    display: flex;
    justify-content: center;
}

/* #7137 - the lifetime coached-walkthrough standing line at the game picker. */
.cwh-allowance[b-zgzvvxyfil] {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.cwh-allowance strong[b-zgzvvxyfil] {
    color: var(--ascend-accent);
}

.cwh-allowance.exhausted[b-zgzvvxyfil] {
    border-color: rgba(184, 133, 54, 0.35);
    background: rgba(184, 133, 54, 0.08);
}

.cwh-allowance a[b-zgzvvxyfil] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.cwh-allowance a:hover[b-zgzvvxyfil] {
    text-decoration: underline;
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* Profile Page - Dark Cards on Light Background */

.page-container[b-l0kx3481yo] {
    width: 100%;
}

/* Profile Content - Responsive Grid Layout */
.profile-content[b-l0kx3481yo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
    gap: 2rem;
    width: 100%;
}

/* Alerts */
.alert[b-l0kx3481yo] {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    animation: slideIn-b-l0kx3481yo 0.3s ease;
    border: 2px solid;
    backdrop-filter: blur(10px);
    grid-column: 1 / -1; /* Span full width */
}

@keyframes slideIn-b-l0kx3481yo {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert[b-l0kx3481yo]  i {
    font-size: 18px;
    flex-shrink: 0;
}

.alert-success[b-l0kx3481yo] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border-color: var(--ascend-success);
    color: #34d399;
}

.alert-error[b-l0kx3481yo] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border-color: var(--ascend-error);
    color: #fca5a5;
}

/* Profile card styling handled by shared Card component */
[b-l0kx3481yo] .profile-card {
    width: 100%;
}

/* Make profile overview and personal information cards span full width */
[b-l0kx3481yo] .profile-overview-card {
    grid-column: 1 / -1;
}

/* Profile Overview Card Layout */
.profile-overview-content[b-l0kx3481yo] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 1rem;
}

.profile-photo-upload[b-l0kx3481yo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Accessibility — text-scale picker. Each option shows an "Aa" sample at
   the actual scale factor (independent of the user's current choice) so
   the comparison is visible. PBI #293. */
.accessibility-lede[b-l0kx3481yo] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
    line-height: 1.5;
}

.data-export-lede[b-l0kx3481yo] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
    line-height: 1.5;
}

.data-export-error[b-l0kx3481yo] {
    margin: 0.75rem 0 0;
    color: #fca5a5;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* #5564 — inline status for email-export request + account deletion. */
.data-export-status[b-l0kx3481yo] {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.data-export-status.success[b-l0kx3481yo] {
    color: var(--ascend-accent);
}

.data-export-status.error[b-l0kx3481yo] {
    color: #fca5a5;
}

/* #5564 — account deletion sits under a divider inside the Data & Privacy card. */
.account-deletion-section[b-l0kx3481yo] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(239, 68, 68, 0.25);
}

/* #7976 - the three-bucket erasure disclosure (.deletion-disclosure) moved to the
   shared DeletionDisclosurePanel with its markup. */

.text-scale-options[b-l0kx3481yo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem;
}

.text-scale-option[b-l0kx3481yo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(49, 221, 227, 0.18);
    border-radius: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.text-scale-option:hover[b-l0kx3481yo] {
    background: rgba(49, 221, 227, 0.06);
    border-color: rgba(49, 221, 227, 0.4);
}

.text-scale-option.active[b-l0kx3481yo] {
    background: rgba(49, 221, 227, 0.12);
    border-color: var(--ascend-accent);
    color: #ffffff;
}

/* Sample sizes are absolute (px) on purpose: the picker should preview each
   scale relative to a fixed baseline regardless of the user's current
   selection. Keeping these out of the rem cascade is intentional. */
.text-scale-sample[b-l0kx3481yo] {
    line-height: 1;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    color: var(--ascend-accent);
}

.text-scale-sample.small[b-l0kx3481yo]   { font-size: 0.875rem; }
.text-scale-sample.default[b-l0kx3481yo] { font-size: 1.125rem; }
.text-scale-sample.large[b-l0kx3481yo]   { font-size: 1.375rem; }
.text-scale-sample.xlarge[b-l0kx3481yo]  { font-size: 1.625rem; }

.text-scale-label[b-l0kx3481yo] {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.account-info-section[b-l0kx3481yo] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.info-item-compact[b-l0kx3481yo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: var(--radius-md);
}

/* Card title logo for ratings cards */
[b-l0kx3481yo] .card-title-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 0.35rem;
}

/* Profile Avatar Section */
.profile-avatar-section[b-l0kx3481yo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.profile-avatar-large[b-l0kx3481yo] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border: 3px solid var(--ascend-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(49, 221, 227, 0.3);
}

.profile-avatar-large img[b-l0kx3481yo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-large[b-l0kx3481yo]  i {
    font-size: 48px;
}

.text-muted[b-l0kx3481yo] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0 0 0.75rem 0;
}

.text-muted[b-l0kx3481yo]  i {
    font-size: 14px;
}

/* Personal Information card is full page width — the form has too many
   rows to live in a 2-up grid cell (it stretches sibling cards taller
   than they need to be). Full-width means the form's own .form-row
   children also collapse to single column (otherwise inputs become
   uselessly wide). */
[b-l0kx3481yo] .profile-personal-card {
    grid-column: 1 / -1;
}

[b-l0kx3481yo] .profile-personal-card .form-row {
    grid-template-columns: 1fr;
}

/* Form Styles */
.form-row[b-l0kx3481yo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group[b-l0kx3481yo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-l0kx3481yo] {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.02em;
}

/* #7258: this page carried the dark input treatment TWICE - once behind
   ::deep for the Blazor Input* components and once plainly for the page's own
   <input>/<textarea> - every declaration marked !important. All of it is now
   the global .form-input / .form-textarea in app.css, which reaches both
   (global CSS carries no scope attribute, so ::deep is irrelevant to it).
   What is left is the sizing this page wants: a slightly larger control on a
   heavier border, full-width in its form column.
   The ::deep pair still has to exist because a plain scoped selector cannot
   reach markup rendered by InputText/InputTextArea. */
[b-l0kx3481yo] .form-input,
[b-l0kx3481yo] .form-textarea,
.form-input[b-l0kx3481yo],
.form-textarea[b-l0kx3481yo] {
    width: 100%;
    font-size: 0.95rem;
    border-width: 2px;
}

[b-l0kx3481yo] .form-textarea,
.form-textarea[b-l0kx3481yo] {
    resize: vertical;
    min-height: 100px;
}

.form-hint[b-l0kx3481yo] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
}

.form-hint a[b-l0kx3481yo] {
    color: var(--ascend-accent);
    text-decoration: underline;
    font-weight: 600;
    transition: all 0.2s ease;
}

.form-hint a:hover[b-l0kx3481yo] {
    color: var(--ascend-accent-light);
    text-decoration: none;
}

/* Bug #6943 - a rating that is no longer official. Legible, not alarming: the
   number is still the last one FIDE published, it just cannot be called current. */
.warning-hint[b-l0kx3481yo] {
    color: var(--ascend-secondary-light);
}

.form-input.no-longer-official[b-l0kx3481yo] {
    border-color: rgba(184, 133, 54, 0.45);
}

.validation-summary[b-l0kx3481yo] {
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid var(--ascend-error);
    border-radius: var(--radius-md);
    padding: 1rem;
    color: #fca5a5;
    margin-bottom: 1.5rem;
}

/* Two-tone titles rendered by the shared Wordmark component (#6356), which
   owns the flush-seam rule and the default 0.05em tracking. */
.section-title[b-l0kx3481yo] {
    font-family: var(--ascend-font-primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(49, 221, 227, 0.2);
    text-transform: uppercase;
}

.section-title:first-of-type[b-l0kx3481yo] {
    margin-top: 1rem;
    padding-top: 1rem;
}

.checkbox-group[b-l0kx3481yo] {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.checkbox-group label[b-l0kx3481yo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

[b-l0kx3481yo] .checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    /* Bug #8649 - the label is a flex row, and at 344 a long label squeezed the box to 13px. */
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--ascend-accent);
}

/* Form Actions */
.form-actions[b-l0kx3481yo] {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(49, 221, 227, 0.2);
}

/* OAuth Connections Section */
.oauth-connections[b-l0kx3481yo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.oauth-connection-item[b-l0kx3481yo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.75rem;
    column-gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.oauth-connection-item:hover[b-l0kx3481yo] {
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 24px rgba(49, 221, 227, 0.2);
    transform: translateX(4px);
}

.oauth-icon[b-l0kx3481yo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border-radius: var(--radius-lg);
    border: 2px solid var(--ascend-accent);
    color: var(--ascend-accent);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.3);
}

.oauth-icon[b-l0kx3481yo]  i,
.oauth-icon .oauth-logo[b-l0kx3481yo] {
    max-width: 40px;
    max-height: 40px;
    font-size: auto;
    object-fit: contain;
}

.oauth-icon img[b-l0kx3481yo] {
    max-width: 36px;
    max-height: 36px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.oauth-info[b-l0kx3481yo] {
    flex: 1 1 220px;
    min-width: 0;
}

/* World Chess (#7018). The row reuses .oauth-connection-item wholesale; only
   the two things World Chess needs that the OAuth providers do not are new:
   the numeric player id shown beside the name, and the inline lookup panel
   that stands in for an OAuth redirect. */
.oauth-secondary-id[b-l0kx3481yo] {
    margin-left: 0.5rem;
    color: color-mix(in srgb, var(--ascend-text-light) 50%, transparent);
}

.oauth-inline-panel[b-l0kx3481yo] {
    margin: -0.25rem 0 0.5rem 0;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--ascend-accent) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 22%, transparent);
    border-radius: var(--radius-lg);
}

/* Provider name uses the platform's white+gold brand pattern via the shared
   Wordmark component (#6356). The old 0.35rem margin between the halves broke
   the brand flush-seam rule (#6355 worst offender) - the wordmark renders as
   ONE word, the color change alone marking the split. */
/* #7036 - a flex row so an integration's beta chip can sit beside the wordmark
   without disturbing the rows that (correctly) have no chip: Lichess and
   Chess.com render a single child and lay out exactly as before. */
.oauth-provider-name[b-l0kx3481yo] {
    font-family: var(--ascend-font-primary);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.oauth-status[b-l0kx3481yo] {
    margin: 0.25rem 0;
}

.oauth-username[b-l0kx3481yo] {
    margin: 0.5rem 0 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Courier New', monospace;
    background: rgba(49, 221, 227, 0.1);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    display: inline-block;
    border: 1px solid rgba(49, 221, 227, 0.3);
}

.oauth-actions[b-l0kx3481yo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    /* Auto-margin pushes Disconnect/Connect to the right edge so the
       column-gap between it and the pill is always visible. Combined with
       flex-wrap on the parent, the button drops to its own row when the
       info column gets squeezed. */
    margin-left: auto;
}

.status-badge[b-l0kx3481yo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px solid;
}

.status-badge[b-l0kx3481yo]  i {
    font-size: 14px;
}

.status-success[b-l0kx3481yo] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: var(--ascend-success);
}

.status-neutral[b-l0kx3481yo] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Button Styles */
.btn[b-l0kx3481yo] {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    border: 2px solid;
    cursor: pointer;
    font-family: var(--ascend-font-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-sm[b-l0kx3481yo] {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

.btn-sm[b-l0kx3481yo]  i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.btn-outline[b-l0kx3481yo] {
    background: transparent;
    border-color: rgba(49, 221, 227, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

.btn-outline:hover:not(:disabled)[b-l0kx3481yo] {
    background: rgba(49, 221, 227, 0.1);
    border-color: var(--ascend-accent);
    color: var(--ascend-text-light);
}

.btn-outline:disabled[b-l0kx3481yo] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Account Information */
.info-grid[b-l0kx3481yo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.info-item[b-l0kx3481yo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: var(--radius-md);
}

.info-label[b-l0kx3481yo] {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-l0kx3481yo] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ascend-accent);
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-container[b-l0kx3481yo] {
        padding: 1rem;
    }

    .page-title[b-l0kx3481yo] {
        font-size: 2rem;
    }

    [b-l0kx3481yo] .profile-card {
        padding: 1.5rem;
    }

    .form-row[b-l0kx3481yo] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .profile-overview-content[b-l0kx3481yo] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* #8324 - THE PHOTO COLUMN REFUSED TO SHRINK, so it stood 10px past the
       card at 344. A grid item's min-width defaults to MIN-CONTENT, and this
       column's min-content is 190px: "Upload a new profile photo" and
       "Max 5MB, JPG/PNG/GIF/WebP" both measure exactly that. The grid track is
       1fr - 180px of content at 344 - so the item simply overhung it.

       Both declarations are needed, measured at 344: min-width: 0 alone lets
       the section take the track's 180px but leaves 5px of spill INSIDE it,
       because "JPG/PNG/GIF/WebP" is one token that no space can break. The
       break hint on the hint line takes that last 5px to 0. */
    .profile-avatar-section[b-l0kx3481yo] {
        flex-direction: column;
        align-items: center;
        min-width: 0;
    }

    .profile-photo-upload .form-hint[b-l0kx3481yo] {
        overflow-wrap: anywhere;
    }

    .oauth-connection-item[b-l0kx3481yo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .oauth-icon[b-l0kx3481yo] {
        width: 56px;
        height: 56px;
    }

    .oauth-actions[b-l0kx3481yo] {
        width: 100%;
    }

    .btn-sm[b-l0kx3481yo] {
        width: 100%;
    }

    .form-actions[b-l0kx3481yo] {
        justify-content: stretch;
    }
}

/* Lichess Ratings Section */
.sync-timestamp[b-l0kx3481yo] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: -0.5rem 0 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ratings-grid[b-l0kx3481yo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

/* The min(280px, 100%) floor above is not enough on its own (#7296). Each
   .rating-card is a flex row, so it defaults to min-width: auto - its
   min-content - and Chrome sized this track to 360px inside a 242px container
   on a 390px phone, putting every rating card 44px past the right edge where
   html/body's overflow-x: hidden made it unreachable and unzoomable. Letting
   the cards shrink is what makes the floor mean anything. */
.ratings-grid > *[b-l0kx3481yo] {
    min-width: 0;
}

.rating-card[b-l0kx3481yo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.rating-card:hover[b-l0kx3481yo] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(49, 221, 227, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.1);
}

.rating-icon[b-l0kx3481yo] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.rating-icon[b-l0kx3481yo]  i {
    font-size: 24px;
}

.rating-card:hover .rating-icon[b-l0kx3481yo] {
    transform: scale(1.1);
}

.rating-icon.bullet[b-l0kx3481yo] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.rating-icon.blitz[b-l0kx3481yo] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(248, 113, 113, 0.2));
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.rating-icon.rapid[b-l0kx3481yo] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.2));
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.rating-icon.classical[b-l0kx3481yo] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.2));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.rating-icon.correspondence[b-l0kx3481yo] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(167, 139, 250, 0.2));
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.rating-icon.puzzle[b-l0kx3481yo] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(244, 114, 182, 0.2));
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.rating-info[b-l0kx3481yo] {
    flex: 1;
    min-width: 0;
}

.rating-title[b-l0kx3481yo] {
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.rating-subtitle[b-l0kx3481yo] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.rating-value[b-l0kx3481yo] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ascend-accent);
    text-align: right;
    min-width: 80px;
    flex-shrink: 0;
}

/* Recover Lichess Games */

.recover-section[b-l0kx3481yo] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.recover-link[b-l0kx3481yo] {
    background: none;
    border: none;
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.2s ease;
}

.recover-link:hover[b-l0kx3481yo] {
    color: var(--ascend-accent);
}

.recover-link[b-l0kx3481yo]  i {
    font-size: 14px;
}

.recover-description[b-l0kx3481yo] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.75rem 0;
}

.recover-controls[b-l0kx3481yo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.recover-label[b-l0kx3481yo] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.recover-date-input[b-l0kx3481yo] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
}

[b-l0kx3481yo] .recover-date-input:focus {
    outline: none;
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.recover-result[b-l0kx3481yo] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    margin: 0.75rem 0 0 0;
}

.recover-result.success[b-l0kx3481yo] {
    color: #10b981;
}

.recover-result.error[b-l0kx3481yo] {
    color: #ef4444;
}

@media (max-width: 768px) {
    .ratings-grid[b-l0kx3481yo] {
        grid-template-columns: 1fr;
    }

    .rating-card[b-l0kx3481yo] {
        padding: 1rem;
    }

    .rating-value[b-l0kx3481yo] {
        font-size: 1.5rem;
        min-width: 60px;
    }
}

/* USCF Section Styles */
.uscf-status-row[b-l0kx3481yo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.status-warning[b-l0kx3481yo] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: #f59e0b;
}

.expiration-date[b-l0kx3481yo] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* USCF Connect Card */
/* #6946 - a `.uscf-connect-card { text-align: center }` rule stood here and never
   applied (the class rides on a child <Card>). It is NOT simply ::deep-ed: this
   Card carries Title/TitleGold/Subtitle, so centering at the card level would
   center the shared card chrome too, leaving this one card's header centered
   while every sibling profile card stays left-aligned. The intent - centered
   prompt copy - is retargeted onto .uscf-connect-info below, which is this
   page's own markup and needs no ::deep. */

.uscf-connect-prompt[b-l0kx3481yo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
}

.uscf-icon[b-l0kx3481yo] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uscf-connect-info[b-l0kx3481yo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    /* #6946 - centers the prompt copy inside its 400px measure, matching the
       already-centered icon and button. Replaces the dead card-level rule. */
    text-align: center;
}

.uscf-connect-info p[b-l0kx3481yo] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0;
    max-width: 400px;
}

.rating-icon.daily[b-l0kx3481yo] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
    border: 1px solid rgba(245, 158, 11, 0.3);
}

@media (max-width: 768px) {
    .uscf-status-row[b-l0kx3481yo] {
        flex-direction: column;
        align-items: flex-start;
    }

    .uscf-connect-prompt[b-l0kx3481yo] {
        padding: 1.5rem 1rem;
    }
}

/* #7021 - World Chess ratings card.

   The note is not decoration. FIDE Online Arena is a separate rating system
   sharing a card with three World Chess pools, and a user who reads its number
   as "my FIDE rating" - or lines it up against the pools beside it - has been
   misled by the layout. The sentence is what stops that. */
.worldchess-ratings-note[b-l0kx3481yo] {
    margin-top: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

/* Bug #8649 - the Profile cards on a small phone. Measured at 344, five gutters were nested
   around every setting: the layout's 16px, this page container's own 16px (a second gutter,
   added only on phones), the profile card's 24px, the shared Card body's 24px and the setting
   box's 20px. The setting box was 180px wide and "Show AI coach lifecycle nudges" a 104px
   column, six lines. Here the page container drops its second gutter, and the profile card and
   the setting box pad 0.75rem; the Card body keeps its own padding (it belongs to the shared
   Card). The label column grows to 176px at 344. Above 480px nothing changes. */
@media (max-width: 480px) {
    .page-container[b-l0kx3481yo] {
        padding: 0;
    }

    [b-l0kx3481yo] .profile-card {
        padding: 0.75rem;
    }

    .checkbox-group[b-l0kx3481yo] {
        padding: 0.75rem;
    }
}

/* #7999 - the profile in SECTIONS. Each section spans the page grid and lays its own cards
   out on the same two-up grid the page used before, so a desktop row still pairs two cards.
   The heading is the hub section header (HubSection.razor.css): white keyword, gold period,
   a quiet rule under it. scroll-margin-top keeps a jumped-to heading clear of the sticky
   app header. */
.profile-section[b-l0kx3481yo] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
    gap: 2rem;
    /* Each card keeps its own height: a short card beside a tall one is not stretched into
       a mostly empty box (BILLING beside the photo card, MIRROR EDITIONS beside TRAINING). */
    align-items: start;
    scroll-margin-top: 8rem;
}

/* A card that would sit alone in half a row spans the row instead (BILLING after the two
   full-width ACCOUNT cards, INSTALL APP as PREFERENCES' fifth card, DATA PRIVACY alone in
   YOUR DATA). Spanning, the delete-account disclosure also stops being squeezed into a
   half-width column; its prose keeps a readable measure. */
[b-l0kx3481yo] .profile-card--wide,
.profile-section[b-l0kx3481yo]  .pwa-install-card {
    grid-column: 1 / -1;
}

[b-l0kx3481yo] .profile-data-card p {
    max-width: 75ch;
}

/* A jumped-to section heading takes focus (tabindex="-1") but is not a control. */
.profile-section-title:focus[b-l0kx3481yo] {
    outline: none;
}

.profile-section-title:focus-visible[b-l0kx3481yo] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 4px;
}

/* #7999 - the outcome of a Save, beside the button that was pressed. */
.form-save-status[b-l0kx3481yo] {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
}

.form-save-status:empty[b-l0kx3481yo] {
    margin: 0;
}

.form-save-listing[b-l0kx3481yo] {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.form-save-listing:empty[b-l0kx3481yo] {
    margin: 0;
}

.form-save-listing.is-ok[b-l0kx3481yo] {
    color: #34d399;
}

.form-save-listing.is-error[b-l0kx3481yo] {
    color: #fca5a5;
}

.form-save-status.is-ok[b-l0kx3481yo] {
    color: #34d399;
}

.form-save-status.is-error[b-l0kx3481yo] {
    color: #fca5a5;
}

/* EMAIL PREFERENCES follows the training switches in its card, so it keeps the divider the
   first sub-heading of a form drops (.section-title:first-of-type above). */
.section-title.section-title--after-content[b-l0kx3481yo] {
    margin-top: 2rem;
    padding-top: 2rem;
}

.profile-section-title[b-l0kx3481yo] {
    grid-column: 1 / -1;
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* The heading sits closer to its first card than the cards sit to each other. */
    margin: 0 0 -0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ascend-accent) 18%, transparent);
}

/* The section index: the page's first control. Wrapping chips, each a 44px touch target. */
.profile-section-nav[b-l0kx3481yo] {
    grid-column: 1 / -1;
}

.profile-section-nav ul[b-l0kx3481yo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-section-nav a[b-l0kx3481yo] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 40%, transparent);
    border-radius: 999px;
    color: var(--ascend-accent);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.profile-section-nav a:hover[b-l0kx3481yo],
.profile-section-nav a:focus-visible[b-l0kx3481yo] {
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

/* #7999 - on a phone each rating was a tall tile (the 768px rule above): six of them for
   Lichess alone, about 1,060px. Here a tile is a compact row, the time control and its
   clock on the left and the number on the right, with the icon left out (decoration: the
   title already names the time control). Still one rating per row, so a long label such as
   CORRESPONDENCE never has to squeeze into half a phone. */
@media (max-width: 480px) {
    .profile-section[b-l0kx3481yo] {
        gap: 1.25rem;
    }

    .ratings-grid[b-l0kx3481yo] {
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .rating-card[b-l0kx3481yo] {
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-radius: 12px;
    }

    .rating-icon[b-l0kx3481yo] {
        display: none;
    }

    /* CORRESPONDENCE is the longest label; at 0.85rem with no tracking it fits beside its
       number at 344 without breaking mid-word. */
    .rating-title[b-l0kx3481yo] {
        font-size: 0.85rem;
        letter-spacing: 0;
        margin: 0;
    }

    .rating-value[b-l0kx3481yo] {
        min-width: 0;
        font-size: 1.25rem;
    }
    /* #7999 - the connected-account rows, about 490px each at 390: a 56px tile over the name
       over the status over a full-width button. Now the tile sits beside the name and status,
       and the button keeps its full width on the row below (still a whole-width touch target). */
    .oauth-connection-item[b-l0kx3481yo] {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.5rem;
        padding: 0.75rem;
    }

    .oauth-icon[b-l0kx3481yo] {
        width: 40px;
        height: 40px;
    }

    .oauth-icon img[b-l0kx3481yo],
    .oauth-icon .oauth-logo[b-l0kx3481yo] {
        max-width: 24px;
        max-height: 24px;
    }

    .oauth-actions[b-l0kx3481yo] {
        grid-column: 1 / -1;
    }

    .oauth-provider-name[b-l0kx3481yo] {
        font-size: 1rem;
        margin: 0 0 0.25rem 0;
    }

    /* #7999 - the photo and account card: a 120px avatar over its upload controls, ruled off
       with about 130px of air (the global rule in SharedPages.css: 3xl of padding and 3xl of
       margin). The avatar shrinks and the air goes. It stays ABOVE the controls rather than
       beside them: beside them, CHOOSE PHOTO ran past the card at 344 (#8324's overhang). */
    .profile-overview-content[b-l0kx3481yo] {
        gap: 1.25rem;
    }

    .profile-avatar-section[b-l0kx3481yo] {
        gap: 0.75rem;
        padding-bottom: 1rem;
        margin-bottom: 0;
    }

    .profile-avatar-large[b-l0kx3481yo] {
        width: 72px;
        height: 72px;
    }

    .profile-avatar-large[b-l0kx3481yo]  i {
        font-size: 32px;
    }

    .account-info-section[b-l0kx3481yo] {
        gap: 0.75rem;
    }

    .info-item-compact[b-l0kx3481yo] {
        padding: 0.625rem 0.875rem;
    }
}
/* /Components/Pages/Public/CoachAccuracy.razor.rz.scp.css */
/* #9142 - the public AI accuracy page. Brand tokens only; prose styling comes from PublicPageShell. */

.ca-no-figure[b-dszwixcqik] {
    border-left: 4px solid var(--ascend-accent);
    padding: var(--space-md) var(--space-lg);
    background: rgba(49, 221, 227, 0.06);
    border-radius: var(--radius-md);
}

.ca-weaknesses[b-dszwixcqik] {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    padding-left: var(--space-lg);
}
/* /Components/Pages/Public/CoachReferralLanding.razor.rz.scp.css */
/* #8416 - the coach-referral landing. Same public-page design system as the
   offer landing (OfferLanding.razor.css): 24px card, cyan and gold accents,
   dark gradient. */

.coach-landing[b-s588f9y2ug] {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem 4rem;
}

.coach-landing-card[b-s588f9y2ug] {
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 2.25rem 2rem;
}

.coach-kicker[b-s588f9y2ug] {
    margin: 0 0 0.5rem;
    color: var(--ascend-secondary);
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
}

.coach-landing-card h1[b-s588f9y2ug] {
    margin: 0 0 1rem;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1.25;
    text-align: center;
}

.coach-lede[b-s588f9y2ug] {
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

.coach-faq[b-s588f9y2ug] {
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Specific enough to beat the public shell's heading margins (.public-content h2). */
.coach-landing-card .coach-faq h2[b-s588f9y2ug] {
    margin: 0 0 0.5rem;
    color: var(--ascend-accent);
    font-size: 1.05rem;
    line-height: 1.4;
}

.coach-faq p[b-s588f9y2ug] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.6;
}

.coach-connect[b-s588f9y2ug] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 1.75rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
}

.coach-connect i[b-s588f9y2ug] {
    color: var(--ascend-accent);
    flex-shrink: 0;
}

.coach-cta[b-s588f9y2ug] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.coach-signin[b-s588f9y2ug] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.coach-signin a[b-s588f9y2ug] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .coach-landing[b-s588f9y2ug] {
        padding: 1.5rem 0.75rem 2.5rem;
    }

    .coach-landing-card[b-s588f9y2ug] {
        padding: 1.75rem 1.25rem;
    }

    .coach-landing-card h1[b-s588f9y2ug] {
        font-size: 1.4rem;
    }

    .coach-faq[b-s588f9y2ug] {
        padding: 1rem;
    }
}

/* #8418 - the link under the FAQ answer to the same entry on /for-coaches. */
.coach-faq .coach-faq-more[b-s588f9y2ug] {
    margin: 0.6rem 0 0;
}

.coach-faq .coach-faq-more a[b-s588f9y2ug] {
    display: inline-block;
    padding: 0.35rem 0;
    color: var(--ascend-accent);
    text-decoration: underline;
}
/* /Components/Pages/Public/Contact.razor.rz.scp.css */
.contact-form[b-52ylhjw3l7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 560px;
    margin: var(--space-xl) 0;
}

.form-row[b-52ylhjw3l7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-row label[b-52ylhjw3l7] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* #7266: fill, border, radius, colour and the focus ring duplicated the
   global .form-input in app.css (#7258), and the padding had drifted to
   0.875rem against the global 0.75rem. All of it is gone. The textarea keeps
   its genuine delta - a tall message box that the visitor can drag - but not
   `font-family: inherit`, which would have overridden the global secondary
   font with whatever the page happened to be using. ::deep stays because
   InputText / InputTextArea render the controls. */
.contact-form[b-52ylhjw3l7]  .form-textarea {
    resize: vertical;
    min-height: 140px;
}

/* Honeypot: removed from layout and pointer flow, still submittable by bots */
.hp-row[b-52ylhjw3l7] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* #7458 - the Turnstile widget's slot. Reserved at the Managed widget's
   documented height so the submit button does not jump when the widget lands
   a beat after the page. The iframe Cloudflare injects sizes itself. */
.challenge-row[b-52ylhjw3l7] {
    min-height: 65px;
}

.btn-submit[b-52ylhjw3l7] {
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #042047;
    border: none;
    border-radius: 50px;
    padding: 1rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.btn-submit:hover:not(:disabled)[b-52ylhjw3l7] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
}

.btn-submit:disabled[b-52ylhjw3l7] {
    opacity: 0.6;
    cursor: default;
}

.contact-result[b-52ylhjw3l7] {
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.contact-result p[b-52ylhjw3l7] {
    margin: 0;
}

.contact-result.success[b-52ylhjw3l7] {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.contact-result.error[b-52ylhjw3l7] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.contact-alt[b-52ylhjw3l7] {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.6);
}
/* /Components/Pages/Public/ForCoaches.razor.rz.scp.css */
/* Coach Bridge "what you see" cards (mirrors the Methodology pillar pattern). */
.coach-grid[b-qo9olkhbm9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.coach-card[b-qo9olkhbm9] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
}

.coach-card[b-qo9olkhbm9]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent), var(--ascend-secondary));
}

.coach-card h3[b-qo9olkhbm9] {
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ascend-accent);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.coach-card p[b-qo9olkhbm9] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Pull-quote callout for the Coach Bridge differentiator. */
.coach-callout[b-qo9olkhbm9] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.08), rgba(184, 133, 54, 0.08));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin: var(--space-xl) 0;
}

.coach-callout p[b-qo9olkhbm9] {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ascend-text-light);
    margin: 0;
}

/* "Getting set up" path cards: reuse the coach-card look but push a CTA to the bottom. */
.coach-path[b-qo9olkhbm9] {
    display: flex;
    flex-direction: column;
}

.coach-path p[b-qo9olkhbm9] {
    flex: 1 1 auto;
}

/* #7303: these two CTAs are the shared <Button> component, NOT bespoke anchors.
   They used to be <a class="coach-cta coach-cta-primary"> with a private copy of
   the primary-button treatment. That private copy resolved byte-identical to
   .btn-primary once its tokens were expanded, and buying nothing it cost the
   page a live defect: PublicPageShell's `.public-content ::deep a:not(.ascend-btn)`
   forces cyan onto every public anchor that is not on the shared button system,
   and at (0,3,1) it out-specified the scoped (0,2,0) rule - so the cyan-gradient
   CTA rendered cyan text on cyan. The `:not(.ascend-btn)` opt-out is what the
   shared Button carries by construction, so adopting the component IS the fix.
   Only geometry lives here now; the treatment belongs to Button.razor.css. */
.coach-path[b-qo9olkhbm9]  .ascend-btn {
    align-self: flex-start;
    margin-top: var(--space-lg);
}


/* #8417 - "See the coach view": live excerpts of the sample student. Each
   excerpt sits in a framed figure so it reads as a picture of the product,
   not as part of this page's prose. The cards inside are the coach page's own
   (CoachStudentPanel) and carry their own scoped styles. */
.coach-sample[b-qo9olkhbm9] {
    margin: var(--space-xl) 0;
}

.coach-sample-figure[b-qo9olkhbm9] {
    margin: 0 0 var(--space-xl);
}

.coach-sample-frame[b-qo9olkhbm9] {
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.2);
    min-width: 0;
}

.coach-sample-figure figcaption[b-qo9olkhbm9] {
    margin-top: var(--space-sm);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ascend-text-light);
}

/* On a phone the frame's own border and padding cost the cards 34px of an
   already narrow column (walked at 344 and 390: the games pager wrapped onto
   two lines inside the frame but not on the full sample page). The cards
   carry their own borders, so the frame steps aside there. */
@media (max-width: 480px) {
    .coach-sample-frame[b-qo9olkhbm9] {
        padding: 0;
        border: none;
        background: none;
    }
}

/* #8418 - the shared FAQ on /for-coaches (rows owned by Shared/FaqList). */
.coach-faq[b-qo9olkhbm9] {
    margin: 2.5rem 0;
}
/* /Components/Pages/Public/ForCoachesSample.razor.rz.scp.css */
/* #8417 - the public Coach Bridge sample page. The cards are the coach page's
   own (CoachStudentPanel) and carry their own scoped styles; only the frame
   around them lives here. */
.sample-banner[b-922w2vw3jr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0 0 var(--space-lg);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid rgba(184, 133, 54, 0.5);
    border-radius: 999px;
    color: var(--ascend-secondary-light);
    font-size: 0.875rem;
    font-weight: 600;
}

.sample-frame[b-922w2vw3jr] {
    min-width: 0;
}

.sample-cta[b-922w2vw3jr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}
/* /Components/Pages/Public/HowItWorks.razor.rz.scp.css */
/* Step cards for the coaching-loop sequence. */
.hiw-loop[b-mhks1j2pzd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.hiw-step[b-mhks1j2pzd] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
}

.hiw-step[b-mhks1j2pzd]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent), var(--ascend-secondary));
}

.hiw-step-num[b-mhks1j2pzd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border: 2px solid rgba(49, 221, 227, 0.4);
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    color: var(--ascend-accent);
    margin-bottom: var(--space-sm);
}

.hiw-step h3[b-mhks1j2pzd] {
    font-family: var(--ascend-font-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ascend-text-light);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hiw-step p[b-mhks1j2pzd] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Five-pillar grid (mirrors the Methodology page card pattern). */
.pillar-grid[b-mhks1j2pzd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.pillar-card[b-mhks1j2pzd] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
}

.pillar-card[b-mhks1j2pzd]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent), var(--ascend-secondary));
}

.pillar-card h3[b-mhks1j2pzd] {
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ascend-accent);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pillar-card p[b-mhks1j2pzd] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.pillar-card .pillar-formal[b-mhks1j2pzd] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #B88536;
    margin: -0.35rem 0 0.6rem;
}
/* /Components/Pages/Public/Legal/LegalDocument.razor.rz.scp.css */
/* #8523 - /terms and /privacy. PublicPageShell owns the page frame and the base
   heading, paragraph and link typography (through its own ::deep rules); this file
   only adds what a long legal text needs: the operator block, the opening note, a
   list, the closing note and the revision history. The sections themselves are
   rendered by the PAGE (ChildContent), so they carry the page's scope, not this
   component's - every rule that reaches them goes through ::deep. */

.legal-document[b-2bj1zsahfx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    /* Long words (an email address) wrap instead of widening a 344px screen. */
    overflow-wrap: anywhere;
}

/* The operator block reads as three short lines, as in the PDF's header. */
.legal-meta[b-2bj1zsahfx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.legal-meta-line[b-2bj1zsahfx] {
    display: block;
}

.legal-text[b-2bj1zsahfx]  h2 {
    scroll-margin-top: var(--space-2xl);
}

.legal-text[b-2bj1zsahfx]  strong {
    color: var(--ascend-text-light);
}

/* The opening note is a block quote in the PDF. */
.legal-text[b-2bj1zsahfx]  blockquote.legal-intro {
    margin: var(--space-lg) 0;
    padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
    border-left: 3px solid var(--ascend-secondary);
}

.legal-text[b-2bj1zsahfx]  blockquote.legal-intro p {
    margin-bottom: 0;
}

.legal-text[b-2bj1zsahfx]  ul {
    margin: 0 0 var(--space-md);
    padding-left: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* #8953 - a list nested in a list item (the Privacy Policy's calendar Disconnecting point). */
.legal-text[b-2bj1zsahfx]  li > ul {
    margin: var(--space-sm) 0 0;
}

.legal-text[b-2bj1zsahfx]  li {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ascend-text-muted);
}

.legal-rule[b-2bj1zsahfx] {
    border: 0;
    border-top: 1px solid var(--ascend-text-secondary);
    margin: var(--space-2xl) 0 var(--space-lg);
    opacity: 0.5;
}

/* The revision history is page chrome on the shared Card; only its spacing and
   list are set here. The heading is an h2 so the outline reads h1 > h2. */
.legal-revisions[b-2bj1zsahfx]  .legal-revisions-title {
    margin: 0;
}

.legal-revision-list[b-2bj1zsahfx] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    color: var(--ascend-text-muted);
}

.legal-revision-list time[b-2bj1zsahfx] {
    color: var(--ascend-text-light);
    font-weight: 600;
}

/* Print: the site chrome is hidden and the document's text turns dark for paper
   in app.css (the #8523 print block), next to the rest of the print rules; only
   the page-break hints live here. */
@media print {
    .legal-document[b-2bj1zsahfx] {
        gap: var(--space-lg);
    }

    .legal-text[b-2bj1zsahfx]  h2 {
        break-after: avoid;
    }

    .legal-text[b-2bj1zsahfx]  p,
    .legal-text[b-2bj1zsahfx]  li {
        break-inside: avoid;
    }

    .legal-text[b-2bj1zsahfx]  a {
        text-decoration: underline;
    }
}
/* /Components/Pages/Public/Licenses.razor.rz.scp.css */
/* #9055 - /licenses. PublicPageShell owns the page frame and the base heading, paragraph and
   link typography; the shared Card owns each entry's frame. This file only lays out what a
   license list needs: the entry list, the facts table inside each card, and the license texts.
   Everything inside a Card is rendered in the Card's scope, so those rules go through ::deep. */

.licenses[b-2sqd5rtazo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    /* Long tokens (a commit id, a URL, a file path) wrap instead of widening a 344px screen. */
    overflow-wrap: anywhere;
}

.licenses-list[b-2sqd5rtazo] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.licenses-entry[b-2sqd5rtazo]  .licenses-entry-name {
    margin: 0;
    font-size: 1.125rem;
    color: var(--ascend-text-light);
}

/* Label above value on a phone; a two-column table from tablet width up. */
.licenses-entry[b-2sqd5rtazo]  .licenses-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xs) var(--space-md);
    margin: 0 0 var(--space-md);
}

.licenses-entry[b-2sqd5rtazo]  .licenses-facts dt {
    font-weight: 600;
    color: var(--ascend-text-light);
}

.licenses-entry[b-2sqd5rtazo]  .licenses-facts dd {
    margin: 0 0 var(--space-sm);
    color: var(--ascend-text-muted);
    min-width: 0;
}

@media (min-width: 640px) {
    .licenses-entry[b-2sqd5rtazo]  .licenses-facts {
        grid-template-columns: max-content 1fr;
    }

    .licenses-entry[b-2sqd5rtazo]  .licenses-facts dd {
        margin-bottom: 0;
    }
}

.licenses-entry[b-2sqd5rtazo]  .licenses-paths {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
}

.licenses-entry[b-2sqd5rtazo]  code {
    font-size: 0.875rem;
    color: var(--ascend-text-light);
}

/* A file name or a build flag in prose, and each term of an SPDX expression, stays on one
   line: overflow-wrap: anywhere would otherwise split "-Dgtest=false" after its leading hyphen
   or "BSD-3-Clause" after "BSD-3-", which reads as a dash. The expression still wraps between
   its terms. */
.licenses-entry[b-2sqd5rtazo]  .licenses-code,
.licenses-entry[b-2sqd5rtazo]  .licenses-spdx-term {
    white-space: nowrap;
}

.licenses-entry[b-2sqd5rtazo]  .licenses-corresponding,
.licenses-entry[b-2sqd5rtazo]  .licenses-note,
.licenses-entry[b-2sqd5rtazo]  .licenses-text-link {
    margin: 0 0 var(--space-sm);
}

.licenses-entry[b-2sqd5rtazo]  .licenses-source-files {
    margin: 0 0 var(--space-sm);
    padding-left: var(--space-lg);
}

/* A "License text" link jumps here. Signed in, MainLayout's sticky header covers the top of the
   viewport, and MainLayout publishes its height plus the content padding as --app-content-top
   (#7911), so the heading lands below it in every band. Signed out that variable is not set,
   and max() keeps the original margin. */
.licenses-text[b-2sqd5rtazo] {
    margin-top: var(--space-lg);
    scroll-margin-top: max(var(--space-2xl), calc(var(--app-content-top, 0px) + var(--space-md)));
}

.licenses-text-title[b-2sqd5rtazo] {
    margin: 0 0 var(--space-sm);
    font-size: 1.125rem;
    color: var(--ascend-text-light);
}

/* The license texts are reproduced exactly, line breaks included, so they are preformatted;
   pre-wrap lets the 72-column lines wrap on a phone instead of scrolling sideways. */
.licenses-text-body[b-2sqd5rtazo] {
    margin: 0;
    padding: var(--space-md);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ascend-text-muted);
    background: var(--ascend-bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
}

@media print {
    .licenses-text-body[b-2sqd5rtazo] {
        border-color: #999;
    }
}
/* /Components/Pages/Public/Methodology.razor.rz.scp.css */
.pillar-grid[b-m87l1kyjli] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.pillar-card[b-m87l1kyjli] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
}

.pillar-card[b-m87l1kyjli]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent), var(--ascend-secondary));
}

.pillar-card h3[b-m87l1kyjli] {
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ascend-accent);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pillar-card p[b-m87l1kyjli] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* copy-rework v1 3.2 - formal pillar names under the phrase headings */
.pillar-card .pillar-formal[b-m87l1kyjli] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #B88536;
    margin: -0.35rem 0 0.6rem;
}
/* /Components/Pages/Public/OfferLanding.razor.rz.scp.css */
/* #7207 - public offer landing. Follows the public-page design system:
   24px cards, cyan/gold accents, dark gradients (see Pricing.razor.css). */

.offer-landing[b-yacp7rqdfh] {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem 4rem;
}

.offer-landing-card[b-yacp7rqdfh] {
    max-width: 560px;
    width: 100%;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 2.25rem 2rem;
    text-align: center;
}

.offer-kicker[b-yacp7rqdfh] {
    margin: 0 0 0.5rem;
    color: var(--ascend-secondary);
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.offer-landing-card h1[b-yacp7rqdfh] {
    margin: 0 0 1rem;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1.25;
}

.offer-lede[b-yacp7rqdfh] {
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.6;
}

.offer-lede strong[b-yacp7rqdfh] {
    color: var(--ascend-accent);
    letter-spacing: 0.04em;
}

.offer-perks[b-yacp7rqdfh] {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: left;
}

.offer-perks li[b-yacp7rqdfh] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.5;
}

.offer-perks i[b-yacp7rqdfh] {
    color: var(--ascend-accent);
    flex-shrink: 0;
}

.offer-cta[b-yacp7rqdfh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.offer-signin[b-yacp7rqdfh] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.offer-signin a[b-yacp7rqdfh] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

.offer-fineprint[b-yacp7rqdfh] {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .offer-landing[b-yacp7rqdfh] {
        padding: 1.5rem 0.75rem 2.5rem;
    }

    .offer-landing-card[b-yacp7rqdfh] {
        padding: 1.75rem 1.25rem;
    }

    .offer-landing-card h1[b-yacp7rqdfh] {
        font-size: 1.4rem;
    }
}
/* /Components/Pages/Public/Pricing.razor.rz.scp.css */
/* Pricing page (v9.1 three-tier launch ladder). Follows the public-page
   design system: 24px cards, cyan/gold accents, dark gradients. */

.pricing-soon[b-svh13lctmq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.12), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(184, 133, 54, 0.4);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0 2rem;
}

.pricing-soon-badge[b-svh13lctmq] {
    flex-shrink: 0;
    background: #B88536;
    color: #0f172a;
    font-family: 'condor', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 50px;
    padding: 0.35rem 0.9rem;
}

.pricing-soon p[b-svh13lctmq] {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.pricing-grid[b-svh13lctmq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 1rem 0 1.25rem;
}

.pricing-card[b-svh13lctmq] {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
}

.pricing-card-featured[b-svh13lctmq] {
    border-color: rgba(49, 221, 227, 0.55);
    box-shadow: 0 12px 40px rgba(49, 221, 227, 0.12);
}

.pricing-badge[b-svh13lctmq] {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    font-family: 'condor', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 50px;
    padding: 0.3rem 1rem;
    white-space: nowrap;
}

/* #7746 - the three bespoke h2 sizes below were flat (or floored) values
   chosen against an H1 that could not go below 2rem. That floor is now 1.3rem
   (PublicPageShell.razor.css: "METHODOLOGY" and "ACCESSIBILITY" are single
   unbreakable words wider than a 320px or 344px viewport at 32px), so a flat
   1.4rem plan name rendered LARGER than the page title on a folded Fold. Each
   one now tracks down with the same 5vw the H1 uses and reaches its designed
   size by 480px, where the H1 is 24px and clear of all three again. */
.pricing-card h2[b-svh13lctmq] {
    font-family: 'condor', sans-serif;
    font-size: clamp(1.05rem, 4.66vw, 1.4rem);
    color: #ffffff;
    margin: 0 0 0.4rem;
}

.pricing-amount[b-svh13lctmq] {
    font-family: 'condor', sans-serif;
    font-size: 2.2rem;
    color: #31DDE3;
    margin: 0;
    line-height: 1;
}

.pricing-cadence[b-svh13lctmq] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
}

.pricing-annual[b-svh13lctmq] {
    font-size: 0.85rem;
    color: #B88536;
    margin: 0.35rem 0 0.75rem;
}

/* #7936 - a plan whose Stripe Price could not be read shows where the price
   is instead of a figure. Sits where the amount would, at body size. */
.pricing-amount-pending[b-svh13lctmq] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.75rem;
}

.pricing-tagline[b-svh13lctmq] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 0.75rem;
}

.pricing-card ul[b-svh13lctmq] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    flex-grow: 1;
}

.pricing-card li[b-svh13lctmq] {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.55rem;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

.pricing-card li[b-svh13lctmq]::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #31DDE3;
}

/* The plan's closing note (was .pricing-addon while a paid add-on lived here; #7936). */
.pricing-plan-note[b-svh13lctmq] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.85rem;
    margin: 0;
}

.pricing-note[b-svh13lctmq] {
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2.5rem;
}

.pricing-founding[b-svh13lctmq],
.pricing-coachbridge[b-svh13lctmq] {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.1), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 24px;
    padding: 1.75rem;
    margin: 2rem 0;
}

.pricing-founding h2[b-svh13lctmq],
.pricing-coachbridge h2[b-svh13lctmq] {
    margin-top: 0;
    color: #B88536;
}

.pricing-faq[b-svh13lctmq] {
    margin: 2.5rem 0;
}

/* FAQ rows: owned by the shared FaqList (Components/Shared/FaqList.razor.css, #8418). */

.pricing-cta[b-svh13lctmq] {
    text-align: center;
    margin: 3rem 0 1rem;
}

.pricing-cta p[b-svh13lctmq] {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1rem;
}

/* PR3 (#5451): per-card Subscribe block, shown only when the stripe-checkout
   flag is on. Sits at the bottom of each pricing card. */
.pricing-subscribe[b-svh13lctmq] {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.pricing-subscribe-annual[b-svh13lctmq] {
    font-size: 0.85rem;
    color: #31DDE3;
    text-decoration: none;
}

.pricing-subscribe-annual:hover[b-svh13lctmq] {
    text-decoration: underline;
}

.pricing-subscribe-soon[b-svh13lctmq] {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 900px) {
    .pricing-grid[b-svh13lctmq] {
        grid-template-columns: 1fr;
    }

    .pricing-card-featured[b-svh13lctmq] {
        order: -1;
    }
}

/* #6213 — promo entry moved to the per-plan /subscribe/{tier} page (cadence +
   promo + confirm). The old inline "Have a code?" form on this page was removed. */

/* #6924 — the walled-account explainer. Sits above the page's own H1 because it
   is addressed to a DIFFERENT reader than the rest of the page: someone who
   already has an account and is asking why the product is closed. Deliberately
   calm — a bordered panel in the brand cyan, not a warning colour. This account
   is not in an error state; it just has one step left. New rules here reference
   the tokens (the raw hex above this line is pre-token drift, Feature #6303 —
   do not copy it). */
.pricing-walled[b-svh13lctmq],
.pricing-manage[b-svh13lctmq] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 45%, transparent);
    border-left: 3px solid var(--ascend-accent);
    border-radius: var(--radius-2xl);
    padding: 1.5rem 1.75rem;
    margin: 0 0 2.5rem;
}

.pricing-walled h2[b-svh13lctmq],
.pricing-manage h2[b-svh13lctmq] {
    font-family: var(--ascend-font-primary);
    font-style: normal;
    /* #7746 - see the note on .pricing-card h2 above. */
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
    line-height: 1.3;
    color: var(--ascend-text-light);
    margin: 0 0 0.75rem;
}

.pricing-walled p[b-svh13lctmq],
.pricing-manage p[b-svh13lctmq] {
    margin: 0 0 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.98rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--ascend-text-light) 85%, transparent);
}

.pricing-walled p:last-child[b-svh13lctmq],
.pricing-manage p:last-child[b-svh13lctmq] {
    margin-bottom: 0;
}

.pricing-walled .pricing-walled-aside[b-svh13lctmq] {
    font-size: 0.9rem;
    color: var(--ascend-text-muted);
}

@media (max-width: 600px) {
    .pricing-walled[b-svh13lctmq],
    .pricing-manage[b-svh13lctmq] {
        padding: 1.25rem 1.1rem;
    }
}

/* #7721 - the per-card line that replaces the plan button for an access-holder
   (or a checkout being activated). A plain link, deliberately not a button:
   there is nothing to buy on this card for this viewer. */
.pricing-subscribe-manage[b-svh13lctmq] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-text-muted);
}

.pricing-subscribe-manage a[b-svh13lctmq] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.pricing-manage .ascend-btn[b-svh13lctmq],
.pricing-manage a.ascend-btn[b-svh13lctmq] {
    margin-top: 0.5rem;
}

/* #7720 - the trial band. The call to action of the page: one bordered block
   between the H1 and the lede, centered, spanning the grid width, in the brand
   accent. Above the lede on purpose - the lede is four lines and would push the
   band below the fold at phone width. Tokens only (the raw hex near the top of
   this file is pre-token drift, Feature #6303 - do not copy it). */
.pricing-trial[b-svh13lctmq] {
    text-align: center;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ascend-bg-dark) 95%, transparent),
        color-mix(in srgb, var(--ascend-bg-card) 90%, transparent));
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 55%, transparent);
    border-radius: var(--radius-2xl);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--ascend-accent) 12%, transparent);
    padding: 1.5rem 1.75rem 1.65rem;
    margin: 0 0 1.5rem;
}

/* Visibly larger than a plan name, smaller than the H1 - a relationship now
   carried by matching clamps rather than by two fixed numbers, because the
   H1's floor moved (#7746). Element-qualified so it outranks the shell's
   ::deep h2 rule at equal class count instead of depending on bundle order. */
section.pricing-trial > h2[b-svh13lctmq] {
    font-family: var(--ascend-font-primary);
    /* #7746 - see the note on .pricing-card h2 above; the 1.7rem floor was set
       against an H1 that could not fall below 2rem and now outranked it. */
    font-size: clamp(1.15rem, 4.9vw, 1.9rem);
    line-height: 1.2;
    color: var(--ascend-text-light);
    margin: 0 0 0.6rem;
}

.pricing-trial-terms[b-svh13lctmq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--ascend-text-light) 82%, transparent);
    max-width: 44rem;
    margin: 0 auto 1rem;
}

/* The line under an anonymous viewer's plan button: small and muted, the same
   register as the card's add-on note. */
.pricing-subscribe-next[b-svh13lctmq] {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: center;
    color: var(--ascend-text-muted);
}

/* The charged-today line inside the walled block reads at full weight: it is
   the sentence that stops a plan being picked under a wrong belief. */
.pricing-walled .pricing-walled-charged[b-svh13lctmq] {
    color: var(--ascend-text-light);
}

@media (max-width: 600px) {
    .pricing-trial[b-svh13lctmq] {
        padding: 1.15rem 1rem 1.25rem;
    }

    /* The shared Button is a child component, so its anchor does not carry
       this file's scope attribute: ::deep, per the house rule. */
    .pricing-trial[b-svh13lctmq]  .ascend-btn {
        width: 100%;
    }
}

/* #7721 re-review N1 - granted-access holders keep the plan buttons; their
   block is informational, so it takes the gold accent rather than the cyan
   call-to-action edge. */
.pricing-manage.pricing-granted[b-svh13lctmq] {
    border-color: color-mix(in srgb, var(--ascend-secondary) 45%, transparent);
    border-left-color: var(--ascend-secondary);
}

/* #9447 - the under-800 callout between the lede and the tier cards. Informational,
   so it takes the gold accent (like the granted-access block) rather than the cyan
   call-to-action edge of the trial band. Tokens only. The fill is OPAQUE and flat on
   purpose: axe cannot measure text over a gradient (bgGradient), and this block's
   contrast is measured, not assumed. */
.pricing-under-800[b-svh13lctmq] {
    background: color-mix(in srgb, var(--ascend-secondary) 8%, var(--ascend-bg-dark));
    border: 1px solid color-mix(in srgb, var(--ascend-secondary) 40%, transparent);
    border-left: 4px solid var(--ascend-secondary);
    border-radius: var(--radius-xl);
    padding: 1.15rem 1.5rem 1.2rem;
    margin: 0 0 1.75rem;
}

/* Element-qualified so it outranks the shell's ::deep h2 margin at equal class count. */
section.pricing-under-800 > h2[b-svh13lctmq] {
    margin: 0 0 0.4rem;
}

section.pricing-under-800 > p[b-svh13lctmq] {
    margin: 0;
    max-width: 52rem;
}

/* #9447 - the Foundation card's "Best for players under 800" marker. It sits on the
   card's top edge where the Recommended badge sits on Apprentice's, so the three plan
   names stay level, but it is an outline in gold, not the filled cyan badge: a pointer
   for one kind of player, not a second "Recommended" (Apprentice stays the one featured
   plan, #8429). The fill is opaque so the pill hides the border behind it and axe can
   measure the text (the card behind it is a gradient). */
.pricing-card .pricing-marker[b-svh13lctmq] {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ascend-bg-dark);
    border: 1px solid var(--ascend-secondary);
    border-radius: 50px;
    padding: 0.25rem 0.9rem;
    font-family: 'condor', sans-serif;
    font-size: 0.72rem;
    font-style: normal;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: var(--ascend-secondary);
}

@media (max-width: 600px) {
    .pricing-under-800[b-svh13lctmq] {
        padding: 1rem 1rem 1.05rem;
    }
}
/* /Components/Pages/PuzzleHistory.razor.rz.scp.css */
/* #6124 Puzzle History */
.ph-filters[b-91h8xx2f67] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.ph-filter[b-91h8xx2f67] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    border: 1px solid rgba(49, 221, 227, 0.25);
    background: rgba(49, 221, 227, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ph-filter:hover[b-91h8xx2f67] { border-color: #31DDE3; color: #31DDE3; }

.ph-filter.active[b-91h8xx2f67] {
    background: rgba(49, 221, 227, 0.15);
    border-color: #31DDE3;
    color: #31DDE3;
    font-weight: 600;
}

.ph-list[b-91h8xx2f67] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 760px;
}

.ph-item[b-91h8xx2f67] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.6), rgba(15, 23, 42, 0.5));
}

.ph-result[b-91h8xx2f67] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    width: 92px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.ph-result.solved[b-91h8xx2f67] { color: #10b981; }
.ph-result.missed[b-91h8xx2f67] { color: #ef4444; }

.ph-item-body[b-91h8xx2f67] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ph-themes[b-91h8xx2f67] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ph-theme[b-91h8xx2f67] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    padding: 0.12rem 0.5rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}

.ph-meta[b-91h8xx2f67] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
}

.ph-replay-btn[b-91h8xx2f67] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.5rem 0.9rem;
    border-radius: 50px;
    border: 1px solid rgba(49, 221, 227, 0.3);
    background: rgba(49, 221, 227, 0.08);
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ph-replay-btn:hover[b-91h8xx2f67] {
    border-color: #31DDE3;
    background: rgba(49, 221, 227, 0.15);
}

.ph-back[b-91h8xx2f67] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.75rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.ph-back:hover[b-91h8xx2f67] { color: #31DDE3; }

.ph-replay-note[b-91h8xx2f67] {
    margin-top: 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

@media (max-width: 560px) {
    .ph-item[b-91h8xx2f67] { flex-wrap: wrap; }
    .ph-replay-btn[b-91h8xx2f67] { width: 100%; justify-content: center; }
}
/* /Components/Pages/ReadThenRateDrill.razor.rz.scp.css */
.read-then-rate-page[b-q8p38oh02b] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.drill-intro[b-q8p38oh02b] {
    text-align: center;
    margin-bottom: 1rem;
}

.intro-description[b-q8p38oh02b] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    max-width: 650px;
    margin: 0 auto;
}

.intro-description em[b-q8p38oh02b] {
    color: #31DDE3;
    font-style: italic;
}

.position-source[b-q8p38oh02b] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.prompt[b-q8p38oh02b] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.prompt strong[b-q8p38oh02b] {
    color: #31DDE3;
}

/* Three-way verdict buttons — Worse / Equal / Better */
.verdict-row[b-q8p38oh02b] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.verdict-btn[b-q8p38oh02b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.verdict-btn[b-q8p38oh02b]  i {
    font-size: 1.1rem;
}

.verdict-btn:hover[b-q8p38oh02b] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.35);
    color: rgba(255, 255, 255, 0.95);
}

.verdict-btn.selected[b-q8p38oh02b] {
    background: rgba(49, 221, 227, 0.18);
    border-color: #31DDE3;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(49, 221, 227, 0.2);
}

.verdict-btn.worse[b-q8p38oh02b]  i { color: #f87171; }
.verdict-btn.equal[b-q8p38oh02b]  i { color: rgba(255, 255, 255, 0.55); }
.verdict-btn.better[b-q8p38oh02b]  i { color: var(--ascend-accent); }

/* Reason picker - one tile per PDC axis the analyzer computes (#6719: nine, was six).
   Nine divides evenly 3-up, so the desktop grid is exactly three rows. */
.reason-grid[b-q8p38oh02b] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.reason-btn[b-q8p38oh02b] {
    /* Flex-centred rather than text-aligned: the tile now has a min-height on
       touch devices, and two-word labels ("Piece activity") must sit centred in
       it whether they take one line or two. */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.55rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
}

/* #9060 chunk 1 - the marks below flip at verdict time, so these transitions are verdict
   motion and run only for members who allow motion (#8993 item 13). */
@media (prefers-reduced-motion: no-preference) {
    .verdict-btn[b-q8p38oh02b] {
        transition: all 0.15s ease;
    }

    .reason-btn[b-q8p38oh02b] {
        transition: all 0.12s ease;
    }
}

.reason-btn:hover[b-q8p38oh02b] {
    background: rgba(184, 133, 54, 0.1);
    border-color: #B88536;
    color: rgba(255, 255, 255, 0.95);
}

.reason-btn.selected[b-q8p38oh02b] {
    background: rgba(184, 133, 54, 0.22);
    border-color: #B88536;
    color: #ffffff;
}

/* #6716/#6719 - nine tiles is a lot of taps, so on a touch-primary device every
   one of them clears the 44px floor instead of relying on text height (0.55rem
   padding round a 12px label lands at ~32px, well under it). Gated on pointer
   coarseness, not viewport width, per the --touch-target contract: a 1024px
   tablet is a touch device no width query reaches, and a mouse does not need
   the extra height. */
@media (hover: none) and (pointer: coarse) {
    .reason-btn[b-q8p38oh02b] {
        min-height: var(--touch-target);
    }
}

.submit-btn[b-q8p38oh02b] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 10px;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s ease;
}

.submit-btn:hover:not(:disabled)[b-q8p38oh02b] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.submit-btn:disabled[b-q8p38oh02b] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

/* #9060 chunk 1 - THE CONTROLS CARRY THE ENGINE'S READ once the verdict is in: its verdict
   and reason are marked, the member's differing picks are marked against them, the rest
   step back. The marks speak the shared verdict colors (--ascend-success / --ascend-error,
   the tokens the overlay panel and the board frame use), the Pattern Recognition drill's
   choice marking. Locked controls lose their hover. */
.verdict-btn:disabled[b-q8p38oh02b],
.reason-btn:disabled[b-q8p38oh02b] {
    cursor: default;
}

.verdict-btn:disabled:hover[b-q8p38oh02b] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
}

.reason-btn:disabled:hover[b-q8p38oh02b] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(184, 133, 54, 0.25);
    color: rgba(255, 255, 255, 0.7);
}

.verdict-btn.is-truth[b-q8p38oh02b],
.verdict-btn.is-truth:disabled:hover[b-q8p38oh02b],
.reason-btn.is-truth[b-q8p38oh02b],
.reason-btn.is-truth:disabled:hover[b-q8p38oh02b] {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--ascend-success) 80%, transparent);
    background: color-mix(in srgb, var(--ascend-success) 18%, transparent);
}

.verdict-btn.is-wrong-pick[b-q8p38oh02b],
.verdict-btn.is-wrong-pick:disabled:hover[b-q8p38oh02b],
.reason-btn.is-wrong-pick[b-q8p38oh02b],
.reason-btn.is-wrong-pick:disabled:hover[b-q8p38oh02b] {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--ascend-error) 70%, transparent);
    background: color-mix(in srgb, var(--ascend-error) 12%, transparent);
    text-decoration: line-through;
}

.verdict-btn.dimmed[b-q8p38oh02b],
.reason-btn.dimmed[b-q8p38oh02b] {
    opacity: 0.45;
}

/* Next is the dock's pinned button row. */
.submit-btn.rtr-next[b-q8p38oh02b] {
    margin: 0;
}

/* #9060 chunk 1 - both reads and the score, in the dock's Verdict half under the word. */
.reveal-row[b-q8p38oh02b] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    align-items: start;
}

.reveal-col[b-q8p38oh02b] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.reveal-label[b-q8p38oh02b] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
}

.reveal-value[b-q8p38oh02b] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.reveal-col.reveal-score .reveal-value[b-q8p38oh02b] {
    font-family: var(--ascend-font-primary);
    font-size: 1.4rem;
    font-weight: 700;
}

.reveal-value.score-strong[b-q8p38oh02b] { color: #31DDE3; }
.reveal-value.score-modest[b-q8p38oh02b] { color: #B88536; }
.reveal-value.score-weak[b-q8p38oh02b] { color: #f87171; }

.reveal-annotation[b-q8p38oh02b] {
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid #B88536;
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

/* Timer-urgency chip override (works with DrillShell's chip styles) */
.shell-chip-urgent[b-q8p38oh02b]  .shell-chip-value {
    color: #f87171;
    font-weight: 700;
}

/* #5460 — phone widths: PDC reason tiles go 2-up (longer vocabulary words
   don't fit 3-up at 360px); reveal columns stack. */
@media (max-width: 480px) {
    .reason-grid[b-q8p38oh02b] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* #6719 - an odd tile count 2-up leaves a lone half-width button on the last
       row. Let it take the full row instead: no dead cell, and the widest touch
       target lands on the tile a thumb reaches for last. Guarded on :nth-child(odd)
       so it does nothing if the axis list ever becomes even again. */
    .reason-btn:nth-child(odd):last-child[b-q8p38oh02b] {
        grid-column: 1 / -1;
    }

    /* #9060 chunk 1 - NOT stacked any more: the reveal rides the phone dock, whose room is
       clipped, and stacked it put the engine's verdict below the fold of the dock's own
       scroll box (walked at 344x740). Three narrow columns keep both reads and the score
       on the first screen of the dock. */
    .reveal-row[b-q8p38oh02b] {
        grid-template-columns: 1fr 1fr auto;
        gap: 0.5rem;
    }

    .reveal-col.reveal-score .reveal-value[b-q8p38oh02b] {
        font-size: 1.15rem;
    }

    /* #9060 review - a two-word reason wrapped mid-phrase in a ~100px column and its
       second line fell below the dock's fold ("Worse · King", walked at 344x740). The
       reason takes its own line, and the row is tightened by the height that line costs
       (walked: the reveal row was 8px over the dock's 160px verdict box at 344 and 390), so
       both reads, both reasons and the score sit on the dock's first screen. */
    .reveal-col[b-q8p38oh02b] {
        gap: 0;
    }

    /* The dock spaces the blocks of its verdict half 0.6rem apart. Two classes, so this
       outranks the dock's one-class sibling rule. */
    .drill-shell-below-board .reveal-row[b-q8p38oh02b] {
        margin-top: 0.15rem;
    }

    .reveal-label[b-q8p38oh02b] {
        font-size: 0.6rem;
        line-height: 1.2;
    }

    .reveal-value[b-q8p38oh02b] {
        font-size: 0.8rem;
        line-height: 1.15;
    }

    .reveal-reason[b-q8p38oh02b] {
        display: block;
        font-size: 0.72rem;
    }

    .reveal-sep[b-q8p38oh02b] {
        display: none;
    }
}
/* /Components/Pages/ReadThePositionDrill.razor.rz.scp.css */
.rtp-page[b-finkqz4oxh] {
    padding-bottom: 2rem;
}

.drill-intro[b-finkqz4oxh] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
}

.intro-description[b-finkqz4oxh] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.intro-description em[b-finkqz4oxh] {
    color: var(--ascend-accent);
    font-style: italic;
}

.rtp-dip-note[b-finkqz4oxh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 1rem 0 0;
    padding-top: 1rem;
}

.rtp-locked[b-finkqz4oxh] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 640px;
    margin: 0 auto;
}

.rtp-locked-title[b-finkqz4oxh] {
    font-family: var(--ascend-font-primary);
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.75rem;
}

.rtp-locked-badge[b-finkqz4oxh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ascend-secondary);
    border: 1px solid rgba(184, 133, 54, 0.4);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.rtp-locked-copy[b-finkqz4oxh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1rem;
}

.rtp-locked-link[b-finkqz4oxh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ascend-accent);
    text-decoration: none;
    font-size: 0.95rem;
}

.rtp-locked-link:hover[b-finkqz4oxh] {
    color: var(--ascend-accent-light);
}

/* #9060 chunk 3 - the question, the move preview and Lock ride the idle verdict dock's Actions
   half, a plain column with its own 0.75rem gap, so they carry no vertical margins of their
   own. tabindex="-1" makes the question a focus target (a keyboard Next or Change lands here). */
.prompt[b-finkqz4oxh] {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin: 0;
}

.move-preview[b-finkqz4oxh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.move-label[b-finkqz4oxh] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
}

.move-value[b-finkqz4oxh] {
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    color: var(--ascend-accent);
    font-weight: 600;
}

.move-clear[b-finkqz4oxh] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.move-clear:hover[b-finkqz4oxh] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.45);
}

/* #9060 chunk 3 - the reveal rides the verdict dock's Verdict half: the phone's width at the
   bottom of the screen, 20rem beside the board above 1100px. The dock is the panel now, so the
   reveal drops its own box and stays compact (BestProphylacticMoveDrill's shape): what does not
   fit scrolls inside the dock while Next stays pinned. One flex column (the reveal row, then the
   kind of moment with its home-drill link), so the phone rule at the end can put the why first
   with `order`; its children carry no margins of their own. */
.reveal-stack[b-finkqz4oxh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reveal-row[b-finkqz4oxh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: start;
}

.reveal-col[b-finkqz4oxh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    text-align: center;
}

/* One line wherever the reveal shows (chunk 2 review: a wrapped label knocks its value out of
   line with its neighbor). */
.reveal-label[b-finkqz4oxh] {
    font-size: 0.6rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.5);
}

.reveal-value[b-finkqz4oxh] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
}

/* #9053 - .rtp-verdict-correct / .rtp-verdict-missed are gone with the panel's
   Verdict column: the shared DrillFeedbackOverlay owns the green / red treatment
   now, and it publishes it to the board frame and the DrillVerdictChip too. */

.rtp-mode-reveal[b-finkqz4oxh] {
    padding: 0.75rem 1rem;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rtp-mode-label[b-finkqz4oxh] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
}

.rtp-mode-label strong[b-finkqz4oxh] {
    color: var(--ascend-secondary-light);
}

.rtp-mode-explanation[b-finkqz4oxh] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.rtp-mode-link[b-finkqz4oxh] {
    color: var(--ascend-accent);
    text-decoration: none;
    font-size: 0.9rem;
}

.rtp-mode-link:hover[b-finkqz4oxh] {
    color: var(--ascend-accent-light);
}

.submit-btn[b-finkqz4oxh] {
    margin-top: 0;
    display: block;
    width: 100%;
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-bg-dark);
    border: none;
    border-radius: 50px;
    padding: 0.875rem 1.25rem;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.submit-btn:hover[b-finkqz4oxh] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
}

.rtp-summary[b-finkqz4oxh] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1rem auto 0;
    max-width: 640px;
}

.rtp-summary-title[b-finkqz4oxh] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.5rem;
}

.rtp-summary-badge[b-finkqz4oxh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.rtp-summary-copy[b-finkqz4oxh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* #9060 chunk 3 - Change is an answer control: the shared touch target on a touch screen
   (Lock and Next are already 49px). */
@media (hover: none) and (pointer: coarse) {
    .move-clear[b-finkqz4oxh] {
        min-height: var(--touch-target);
    }
}

/* #9060 chunk 3 - a phone's dock is about 240px tall, so the WHY comes first: the kind of moment
   and its explanation follow the verdict, and the reveal row goes last (the chip at the board
   already names the best move). The reading half scrolls, with its bottom-edge cue, for whatever
   does not fit. Visual order only; the DOM keeps the desktop order. */
@media (max-width: 480px) {
    .reveal-stack > .reveal-row[b-finkqz4oxh] {
        order: 1;
    }

    .reveal-col[b-finkqz4oxh] {
        gap: 0.1rem;
    }

    .reveal-value[b-finkqz4oxh] {
        font-size: 0.9rem;
        line-height: 1.15;
    }
}
/* /Components/Pages/Reflections.razor.rz.scp.css */
.reflections-page[b-1g6oqs0w2y] {
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Due reviews section */
.due-reviews-section[b-1g6oqs0w2y] {
    margin-bottom: 2rem;
}

.due-reviews-header[b-1g6oqs0w2y] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0 0.25rem;
}

.due-reviews-header i[b-1g6oqs0w2y] {
    color: #B88536;
}

.due-title[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 600;
}

.due-subtitle[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.review-card[b-1g6oqs0w2y] {
    background: linear-gradient(135deg, rgba(20, 14, 5, 0.98) 0%, rgba(30, 22, 8, 0.95) 100%);
    border: 2px solid rgba(184, 133, 54, 0.4);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(184, 133, 54, 0.15);
    position: relative;
    overflow: hidden;
}

.review-card[b-1g6oqs0w2y]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-secondary) 0%, #f4a83b 100%);
}

.review-card-header[b-1g6oqs0w2y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.review-meta[b-1g6oqs0w2y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
}

.review-stage[b-1g6oqs0w2y] {
    color: var(--ascend-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
}

.review-divider[b-1g6oqs0w2y] { color: rgba(255, 255, 255, 0.2); }

.review-chapter[b-1g6oqs0w2y] {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

.review-chapter:hover[b-1g6oqs0w2y] { color: #31DDE3; }

.review-study[b-1g6oqs0w2y] { color: rgba(255, 255, 255, 0.5); }

.review-original[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

.review-original-content[b-1g6oqs0w2y] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.review-prompt[b-1g6oqs0w2y] {
    padding-top: 1rem;
    border-top: 1px dashed rgba(184, 133, 54, 0.25);
}

.prompt-text[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 0.85rem;
    font-style: italic;
}

.confidence-update[b-1g6oqs0w2y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.confidence-label[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

.confidence-buttons[b-1g6oqs0w2y] {
    display: flex;
    gap: 0.35rem;
}

.confidence-btn[b-1g6oqs0w2y] {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.confidence-btn:hover[b-1g6oqs0w2y] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.confidence-btn.active[b-1g6oqs0w2y] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.review-notes-input[b-1g6oqs0w2y] {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.65rem 0.85rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 0.75rem;
}

.review-notes-input:focus[b-1g6oqs0w2y] {
    outline: none;
    border-color: rgba(184, 133, 54, 0.5);
}

.review-actions[b-1g6oqs0w2y] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-skip-review[b-1g6oqs0w2y] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.55);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}

.btn-skip-review:hover[b-1g6oqs0w2y] { background: rgba(255, 255, 255, 0.04); color: #ffffff; }

.btn-complete-review[b-1g6oqs0w2y] {
    background: linear-gradient(135deg, var(--ascend-secondary) 0%, #f4a83b 100%);
    color: #1a1006;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(184, 133, 54, 0.3);
}

.btn-complete-review:hover:not(:disabled)[b-1g6oqs0w2y] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(184, 133, 54, 0.4);
}

.btn-complete-review:disabled[b-1g6oqs0w2y] { opacity: 0.6; cursor: not-allowed; }

/* Header / search */
.reflections-header[b-1g6oqs0w2y] {
    margin-bottom: 1.5rem;
}

.search-row[b-1g6oqs0w2y] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.search-input-wrap[b-1g6oqs0w2y] {
    position: relative;
    flex: 1;
}

.search-icon[b-1g6oqs0w2y] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.reflections-search[b-1g6oqs0w2y] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.75rem 2.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    box-sizing: border-box;
}

.reflections-search:focus[b-1g6oqs0w2y] {
    outline: none;
    border-color: #31DDE3;
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.reflections-search[b-1g6oqs0w2y]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.search-clear[b-1g6oqs0w2y] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    border-radius: 4px;
}

.search-clear:hover[b-1g6oqs0w2y] { color: #ffffff; background: rgba(255, 255, 255, 0.06); }

.filter-row[b-1g6oqs0w2y] {
    display: flex;
    gap: 0.5rem;
}

.filter-select[b-1g6oqs0w2y] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.75rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

[b-1g6oqs0w2y] .filter-select option {
    background: #0f172a;
    color: #ffffff;
}

/* Summary */
.reflections-summary[b-1g6oqs0w2y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.25rem;
    margin-bottom: 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.summary-confidence[b-1g6oqs0w2y] {
    color: rgba(49, 221, 227, 0.7);
}

.empty-action[b-1g6oqs0w2y] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.empty-action:hover[b-1g6oqs0w2y] {
    transform: translateY(-1px);
}

.no-matches[b-1g6oqs0w2y] {
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--ascend-font-secondary);
}

/* Feed */
.reflections-feed[b-1g6oqs0w2y] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.month-section[b-1g6oqs0w2y] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.month-heading[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    color: rgba(49, 221, 227, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 0.25rem 0.25rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.15);
    padding-bottom: 0.5rem;
}

.reflection-card[b-1g6oqs0w2y] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    position: relative;
    overflow: hidden;
}

.reflection-card[b-1g6oqs0w2y]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
}

.reflection-header[b-1g6oqs0w2y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.reflection-meta[b-1g6oqs0w2y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    min-width: 0;
}

.reflection-study[b-1g6oqs0w2y] {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.reflection-study:hover[b-1g6oqs0w2y] {
    color: rgba(255, 255, 255, 0.8);
}

.reflection-divider[b-1g6oqs0w2y] {
    color: rgba(255, 255, 255, 0.25);
}

.reflection-chapter[b-1g6oqs0w2y] {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

.reflection-chapter:hover[b-1g6oqs0w2y] {
    color: #31DDE3;
}

.reflection-date-row[b-1g6oqs0w2y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.reflection-date[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

.confidence-badge[b-1g6oqs0w2y] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid;
}

.confidence-1[b-1g6oqs0w2y], .confidence-2[b-1g6oqs0w2y] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.confidence-3[b-1g6oqs0w2y] {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}

.confidence-4[b-1g6oqs0w2y], .confidence-5[b-1g6oqs0w2y] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.reflection-book[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(184, 133, 54, 0.7);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.reflection-body[b-1g6oqs0w2y] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.reflection-field[b-1g6oqs0w2y] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field-label[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(49, 221, 227, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.field-value[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .reflections-page[b-1g6oqs0w2y] {
        padding: 1rem;
    }

    .search-row[b-1g6oqs0w2y] {
        flex-direction: column;
        align-items: stretch;
    }

    .reflection-header[b-1g6oqs0w2y] {
        flex-direction: column;
        align-items: flex-start;
    }
}

.unreflected-toggle[b-1g6oqs0w2y] {
    margin-left: auto;
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.3);
    color: #B88536;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.15s ease;
}

.unreflected-toggle:hover[b-1g6oqs0w2y] {
    background: rgba(184, 133, 54, 0.2);
    border-color: #B88536;
}

.unreflected-section[b-1g6oqs0w2y] {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.06), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.unreflected-hint[b-1g6oqs0w2y] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0 0 0.75rem 0;
}

.unreflected-list[b-1g6oqs0w2y] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.unreflected-row[b-1g6oqs0w2y] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.85rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}

.unreflected-row:hover[b-1g6oqs0w2y] {
    background: rgba(184, 133, 54, 0.08);
    border-color: rgba(184, 133, 54, 0.35);
}

.unreflected-main[b-1g6oqs0w2y] {
    flex: 1;
    min-width: 0;
}

.unreflected-title[b-1g6oqs0w2y] {
    color: #ffffff;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
}

.unreflected-sub[b-1g6oqs0w2y] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.unreflected-date[b-1g6oqs0w2y] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Caught-up panel — shown when 0 due but reflections exist */
.caught-up-panel[b-1g6oqs0w2y] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.85) 0%, rgba(15, 23, 42, 0.78) 100%);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 16px;
}

.caught-up-panel > i[b-1g6oqs0w2y] {
    color: var(--ascend-accent);
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.caught-up-text[b-1g6oqs0w2y] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.caught-up-title[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
}

.caught-up-sub[b-1g6oqs0w2y] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    line-height: 1.4;
}

.caught-up-sub strong[b-1g6oqs0w2y] {
    color: var(--ascend-accent);
    font-weight: 600;
}

/* Per-row SM-2 badge in the reflection card date row */
.sm2-badge[b-1g6oqs0w2y] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.2;
}

.sm2-badge i[b-1g6oqs0w2y] {
    font-size: 0.75rem;
}

.sm2-scheduled[b-1g6oqs0w2y] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.25);
    color: rgba(49, 221, 227, 0.9);
}

.sm2-due[b-1g6oqs0w2y] {
    background: rgba(184, 133, 54, 0.18);
    border-color: rgba(184, 133, 54, 0.5);
    color: #f4a83b;
    font-weight: 600;
}

.sm2-retired[b-1g6oqs0w2y] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--ascend-text-secondary);
}
/* /Components/Pages/RepertoireDeclare.razor.rz.scp.css */
.declare-page[b-iujjxbh4td] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.section[b-iujjxbh4td] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-title[b-iujjxbh4td] {
    font-family: 'condor', sans-serif;
    font-size: 1.35rem;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.5px;
}

/* ---- Summary stat row ---- */

/* ---- Declared openings ---- */
.declared-color-block[b-iujjxbh4td] {
    margin-bottom: 1.25rem;
}

.declared-color-label[b-iujjxbh4td] {
    font-family: 'condor', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.declared-grid[b-iujjxbh4td] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
}

.declared-card[b-iujjxbh4td] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid rgba(184, 133, 54, 0.6);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.declared-card.built[b-iujjxbh4td] {
    border-left-color: #10b981;
}

.declared-card-top[b-iujjxbh4td] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.declared-names[b-iujjxbh4td] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* #6633 - the shared EcoBadge renders the declared opening's identity; keep the
   card's own name treatment on the name it renders. */
.declared-names[b-iujjxbh4td]  .eco-name {
    font-family: var(--ascend-font-primary);
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

.declared-remove[b-iujjxbh4td] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.declared-remove:hover[b-iujjxbh4td] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.1);
}

.declared-status[b-iujjxbh4td] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    text-decoration: none;
}

.declared-status.built[b-iujjxbh4td] {
    color: #10b981;
}

/* #9200 - the gap row's "Build this line" action. The shared Button is a
   child component, so its root is reached with ::deep. */
.declared-card[b-iujjxbh4td]  .declared-build,
.declared-card[b-iujjxbh4td]  .declared-continue {
    align-self: flex-start;
}

.declared-build-error[b-iujjxbh4td] {
    font-size: 0.78rem;
    color: #fca5a5;
}

.declared-note[b-iujjxbh4td] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* ---- Add-opening catalog ---- */
.declare-color-toggle[b-iujjxbh4td] {
    display: inline-flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50px;
    padding: 0.3rem;
    width: fit-content;
}

.color-toggle-btn[b-iujjxbh4td] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.5rem 1.25rem;
    min-height: 44px; /* #9199 - a phone touch target */
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.color-toggle-btn.active[b-iujjxbh4td] {
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    font-weight: 600;
}

.catalog-family[b-iujjxbh4td] {
    margin-top: 1rem;
}

.catalog-family-label[b-iujjxbh4td] {
    font-family: 'condor', sans-serif;
    font-size: 0.95rem;
    color: rgba(49, 221, 227, 0.85);
    margin: 0 0 0.6rem;
    letter-spacing: 0.5px;
}

.catalog-grid[b-iujjxbh4td] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.catalog-card[b-iujjxbh4td] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    transition: all 0.18s ease;
    color: #ffffff;
}

.catalog-card:hover:not(:disabled)[b-iujjxbh4td] {
    border-color: #31DDE3;
    background: rgba(49, 221, 227, 0.07);
    transform: translateY(-1px);
}

.catalog-card:disabled[b-iujjxbh4td] {
    cursor: default;
}

.catalog-card.declared[b-iujjxbh4td] {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.06);
    opacity: 0.85;
}

.catalog-card-main[b-iujjxbh4td] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.catalog-name[b-iujjxbh4td] {
    font-family: 'condor', sans-serif;
    font-size: 0.98rem;
}

/* #6633 - the badge carries name + code together inside .catalog-name. */
.catalog-name[b-iujjxbh4td]  .eco-name {
    font-family: var(--ascend-font-primary);
    font-size: 0.98rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    white-space: normal;
}

.catalog-line[b-iujjxbh4td] {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.5);
}

.catalog-card-side[b-iujjxbh4td] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.catalog-check[b-iujjxbh4td] {
    color: #10b981;
}

.catalog-card.declared[b-iujjxbh4td]  .catalog-check {
    color: #10b981;
}

/* ---- #9199 two-level picker ---- */
.declare-degraded[b-iujjxbh4td] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.picker-group[b-iujjxbh4td] {
    margin-top: 1.25rem;
}

.picker-families[b-iujjxbh4td] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.picker-family[b-iujjxbh4td] {
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.picker-family.open[b-iujjxbh4td] {
    border-color: rgba(49, 221, 227, 0.4);
}

.picker-family-row[b-iujjxbh4td] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    min-width: 0;
}

.picker-family-toggle[b-iujjxbh4td] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

.picker-family-toggle.static[b-iujjxbh4td] {
    cursor: default;
}

.picker-family-toggle:hover:not(.static)[b-iujjxbh4td] {
    background: rgba(49, 221, 227, 0.07);
}

.picker-family-name[b-iujjxbh4td] {
    font-family: var(--ascend-font-primary);
    font-size: 0.98rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.picker-family-count[b-iujjxbh4td] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.picker-family-declare[b-iujjxbh4td] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    border: 1px solid rgba(49, 221, 227, 0.35);
    background: transparent;
    color: #31DDE3;
    font-size: 0.85rem;
    cursor: pointer;
}

.picker-family-declare:hover:not(:disabled)[b-iujjxbh4td] {
    background: rgba(49, 221, 227, 0.08);
}

.picker-family-declare.declared[b-iujjxbh4td] {
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
    cursor: default;
}

.picker-variations[b-iujjxbh4td] {
    padding: 0.25rem 0.75rem 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* ---- Footer nav ---- */
.declare-footer-nav[b-iujjxbh4td] {
    padding-top: 0.5rem;
}

.declare-back-link[b-iujjxbh4td] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s ease;
}

.declare-back-link:hover[b-iujjxbh4td] {
    color: #31DDE3;
}

/* Summary tiles migrated to the shared StatsRow/StatItem (#6433). */

/* #9199 review: a refused or failed declaration says so under the color toggle. */
.declare-error[b-iujjxbh4td] {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: #fca5a5;
}
/* /Components/Pages/RepertoireDrill.razor.rz.scp.css */
/* Repertoire Drill Page */
.drill-page[b-ujxufqdqm5] {
    /* Mobile-first padding; opened up at wider breakpoints below. */
    padding: 0.5rem;
}

@media (min-width: 480px) {
    .drill-page[b-ujxufqdqm5] {
        padding: 1rem;
    }
}

@media (min-width: 768px) {
    .drill-page[b-ujxufqdqm5] {
        padding: 1rem 2rem 2rem;
    }
}

.loading-container[b-ujxufqdqm5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
}

.btn-back[b-ujxufqdqm5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    color: #31DDE3;
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    transition: all 0.2s ease;
}

.btn-back:hover[b-ujxufqdqm5] {
    background: rgba(49, 221, 227, 0.25);
}

/* Drill Header */
.drill-header[b-ujxufqdqm5] {
    display: flex;
    align-items: center;
    /* Mobile-first: wrap so the title block and the right-side controls can
       drop to a second line instead of crushing on a narrow phone. */
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
}

@media (min-width: 480px) {
    .drill-header[b-ujxufqdqm5] {
        gap: 1rem;
    }
}

.back-link[b-ujxufqdqm5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
}

.back-link:hover[b-ujxufqdqm5] {
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
}

.drill-title-info[b-ujxufqdqm5] {
    flex: 1;
}

.drill-title[b-ujxufqdqm5] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    margin: 0;
    letter-spacing: 0.05em;
}

.drill-opening[b-ujxufqdqm5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.book-name[b-ujxufqdqm5] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
}

.book-color-badge[b-ujxufqdqm5] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--ascend-font-secondary);
    text-transform: capitalize;
}

.book-color-badge.white[b-ujxufqdqm5] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.book-color-badge.black[b-ujxufqdqm5] {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.book-color-badge.both[b-ujxufqdqm5] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.header-right[b-ujxufqdqm5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.line-progress[b-ujxufqdqm5] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
}

.practice-badge[b-ujxufqdqm5] {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(184, 133, 54, 0.15);
    border: 1px solid rgba(184, 133, 54, 0.45);
    color: #B88536;
    font-size: 0.7rem;
    font-family: var(--ascend-font-secondary);
    letter-spacing: 0.08em;
    font-weight: 600;
}

.header-btn[b-ujxufqdqm5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-btn:hover[b-ujxufqdqm5] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

/* Setup-phase layout. The Active phase grid is now provided by shared
   DrillShell — .drill-content is no longer emitted. */
.setup-content[b-ujxufqdqm5] {
    display: grid;
    /* Mobile-first: single column so the board + sidebar stack on a phone.
       The two minmax floors (300px + 280px) would otherwise force a
       horizontal scroll on any viewport under ~600px. The board|sidebar
       split is restored at >=768px below. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    justify-content: center;
}

@media (min-width: 768px) {
    .setup-content[b-ujxufqdqm5] {
        grid-template-columns: minmax(0, 37.5rem) minmax(0, 22.5rem);
    }
}

.board-column[b-ujxufqdqm5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.board-area[b-ujxufqdqm5] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.sidebar-column[b-ujxufqdqm5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Setup Card */
.setup-card[b-ujxufqdqm5] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
}

.setup-card h3[b-ujxufqdqm5] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.setup-desc[b-ujxufqdqm5] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.due-note[b-ujxufqdqm5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 8px;
    color: #B88536;
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
    margin-bottom: 1rem;
}

/* #9410 - today's share of the repertoire review budget, with the book's full due
   count under it as a plain second line. */
.due-note-headline[b-ujxufqdqm5] {
    display: block;
    font-weight: 600;
}

.due-note-secondary[b-ujxufqdqm5] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.78);
}

.due-note.all-caught-up[b-ujxufqdqm5] {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    color: #10b981;
}

/* #6544 - SR paused on this book. Neutral accent tone (not a warning):
   pausing is deliberate experimentation, and practice remains available. */
.due-note.sr-paused[b-ujxufqdqm5] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.25);
    color: var(--ascend-accent);
}

/* #6526 - active line-tag filter chip. Mirrors the shared TagChips family
   (.tag-chip / .tag-remove) so the drill's filter marker reads as the same
   object the Lines tab uses; scoped copy because .razor.css can't reach the
   TagChips component's scoped classes. */
.active-tag-filter[b-ujxufqdqm5] {
    margin-bottom: 1rem;
}

.active-tag-chip[b-ujxufqdqm5] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-family: var(--ascend-font-secondary), sans-serif;
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    white-space: nowrap;
}

.active-tag-label[b-ujxufqdqm5] {
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
}

.active-tag-name[b-ujxufqdqm5] {
    line-height: 1.2;
}

.active-tag-remove[b-ujxufqdqm5] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    color: rgba(49, 221, 227, 0.7);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}

.active-tag-remove:hover[b-ujxufqdqm5] {
    color: #ef4444;
}

.drill-set-size[b-ujxufqdqm5] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.drill-set-size label[b-ujxufqdqm5] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* #7266: fill, border, radius, colour, font and the focus ring duplicated the
   global .form-input in app.css (#7258). The set-size control keeps its
   genuine delta - it is a small inline control above the board, not a form
   field - and now spells out the right-hand caret room, because this selector
   outranks the global select.form-input padding-right. ::deep stays because
   InputSelect renders the <select>. */
[b-ujxufqdqm5] .drill-set-size .form-input {
    padding: 0.55rem 2.25rem 0.55rem 0.75rem;
    font-size: 0.85rem;
}

/* Layout comes from the shared .action-row primitive; this only adds the
   top spacing above the start button. */
.setup-actions[b-ujxufqdqm5] {
    margin-top: 0.5rem;
}

/* Side-pill row above the board */
/* .drill-side-row removed — DrillShell auto-renders the side pill. */

/* Score card (sidebar) */
.score-card[b-ujxufqdqm5] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1rem;
}

.score-card h3[b-ujxufqdqm5] {
    font-family: var(--ascend-font-primary);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
}

.score-bar[b-ujxufqdqm5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.line-progress-row[b-ujxufqdqm5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(49, 221, 227, 0.85);
}

.line-progress-row i[b-ujxufqdqm5] {
    font-size: 0.75rem;
    color: rgba(49, 221, 227, 0.6);
}

.score-correct[b-ujxufqdqm5] {
    color: #10b981;
}

.score-divider[b-ujxufqdqm5] {
    color: rgba(255, 255, 255, 0.2);
}

.score-total[b-ujxufqdqm5] {
    color: rgba(255, 255, 255, 0.4);
}

.score-accuracy[b-ujxufqdqm5] {
    color: #31DDE3;
    margin-left: auto;
}

/* Line Info Card */
.line-card[b-ujxufqdqm5] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1rem;
}

.line-card h3[b-ujxufqdqm5] {
    font-family: var(--ascend-font-primary);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
}

.line-meta[b-ujxufqdqm5] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.meta-item[b-ujxufqdqm5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.78rem;
    font-family: var(--ascend-font-secondary);
}

/* Moves Card */
.moves-card[b-ujxufqdqm5] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1rem;
}

.moves-card h3[b-ujxufqdqm5] {
    font-family: var(--ascend-font-primary);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
}

/* Bug #7180 - flex/wrap/gap on .moves-list and the whole .move-pair rule moved
   into LinearMoveList.razor.css, which owns the list's layout. Only the panel's
   own height budget is a page decision, so only that is left here. */
[b-ujxufqdqm5] .moves-list {
    max-height: 200px;
}

[b-ujxufqdqm5] .move-number {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
    font-family: var(--ascend-font-secondary);
    min-width: 1.5rem;
}

[b-ujxufqdqm5] .move {
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: default;
}

[b-ujxufqdqm5] .move-correct {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

[b-ujxufqdqm5] .move-incorrect {
    background: rgba(239, 68, 68, 0.2);
    color: var(--ascend-text-light);
}

[b-ujxufqdqm5] .move-opponent {
    color: rgba(255, 255, 255, 0.5);
}

/* Completion Phase — bespoke completion-card / stat-block / completion-stats
 * etc. removed when this drill migrated to the shared CoachingReflection
 * component (PBI 5567 commit b99785d). The wrapper below is the only
 * page-scoped rule still needed; CoachingReflection owns everything inside. */
.completion-content[b-ujxufqdqm5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive: board/sidebar stacking and page padding are handled
   mobile-first above; nothing further needed here. */
/* /Components/Pages/RepertoireEditor.razor.rz.scp.css */
/* #5964/#6542 — the transposition badge moved into the shared
   TranspositionBanner component (Components/Shared) when it grew
   per-occurrence rows + the transpose-and-graft action; its styles live in
   TranspositionBanner.razor.css. */

/* #5964 — conflicting-move warning under the board. */
.conflict-warning[b-ctbab0end3] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.6rem 0 0.2rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 0.6rem;
    background: rgba(239, 68, 68, 0.08);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.88);
}

.conflict-warning[b-ctbab0end3] >  i { color: #fca5a5; margin-top: 0.1rem; }
.conflict-warning .cw-text[b-ctbab0end3] { flex: 1; }
.conflict-warning .cw-actions[b-ctbab0end3] { display: flex; gap: 0.4rem; flex-shrink: 0; }
.conflict-warning .cw-confirm[b-ctbab0end3],
.conflict-warning .cw-cancel[b-ctbab0end3] {
    border: none;
    border-radius: 0.4rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
}
.conflict-warning .cw-confirm[b-ctbab0end3] {
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
}
.conflict-warning .cw-confirm:hover[b-ctbab0end3] { background: #ef4444; }
.conflict-warning .cw-cancel[b-ctbab0end3] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}
.conflict-warning .cw-cancel:hover[b-ctbab0end3] { background: rgba(255, 255, 255, 0.18); }

/* #5964 — opponent-ending audit list. */
.opp-ending-list[b-ctbab0end3] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.opp-ending-row[b-ctbab0end3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.8rem;
}
.opp-ending-path[b-ctbab0end3] { font-family: var(--ascend-font-mono, monospace); color: rgba(255, 255, 255, 0.8); }
.opp-ending-del[b-ctbab0end3] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.1rem 0.3rem;
}
.opp-ending-del:hover[b-ctbab0end3] { color: #fca5a5; }

/* #5964 — per-line delete in the Lines tab grid. */
[b-ctbab0end3] .line-delete-btn {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    margin-left: 0.4rem;
}
[b-ctbab0end3] .line-delete-btn:hover { color: #fca5a5; }

/* #6589 — archived-lines restore/purge surface */
[b-ctbab0end3] .line-restore-btn {
    background: transparent;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    color: var(--ascend-accent);
    cursor: pointer;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
[b-ctbab0end3] .line-restore-btn:hover {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
}
[b-ctbab0end3] .archived-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    white-space: nowrap;
}
.archived-message[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
    font-style: normal;
}

/* #5956 — make-main-line action on the Lines tab */
[b-ctbab0end3] .line-mainline-btn {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    margin-left: 0.4rem;
}
[b-ctbab0end3] .line-mainline-btn:hover { color: #B88536; }

/* Bug #7197 - swap-the-fork action. Deliberately NOT another star: it sits
   beside the variation star on the same row, and two identical stars with
   near-identical titles is what made the two operations indistinguishable.
   Accent-cyan on hover against the star's gold. */
[b-ctbab0end3] .line-fork-swap-btn {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    margin-left: 0.4rem;
}
[b-ctbab0end3] .line-fork-swap-btn:hover { color: var(--ascend-accent); }

.repertoire-editor[b-ctbab0end3] {
    /* Mobile-first: tight padding so the editor content keeps its width on a
       narrow phone; opened up at >=480px. */
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

@media (min-width: 480px) {
    .repertoire-editor[b-ctbab0end3] {
        padding: 1rem 1.5rem;
    }
}

/* Header */
.editor-header[b-ctbab0end3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Mobile-first: allow the title block and the action cluster to wrap onto
       separate lines instead of squeezing on a narrow phone. */
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* #7745 - .editor-header wraps, but .header-left did not, so the whole title
   cluster stayed on ONE line and reported a min-content width of 403px at
   EVERY phone viewport (measured on dev at 320, 344 and 390 - always 403,
   because the number is the cluster's own intrinsic width, not a share of the
   viewport). With html/body at overflow-x: hidden (#7296) the excess is
   hidden and unreachable, not scrollable. The single widest contributor is
   .depth-label, which is white-space: nowrap and can read "Navigate to track
   coverage (max depth 8)". Wrapping here plus min-width: 0 lets the cluster
   use a second line instead of a second viewport. */
.header-left[b-ctbab0end3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 0.75rem;
}

.back-link[b-ctbab0end3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.2s ease;
}

.back-link:hover[b-ctbab0end3] {
    background: rgba(255, 255, 255, 0.08);
    color: #31DDE3;
}

.title-group[b-ctbab0end3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.book-title[b-ctbab0end3] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.15s ease;
}

.book-title:hover[b-ctbab0end3] {
    color: #31DDE3;
}

.book-title-edit-hint[b-ctbab0end3] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.15s ease;
}

.book-title:hover .book-title-edit-hint[b-ctbab0end3] {
    color: #31DDE3;
}

.book-title-edit[b-ctbab0end3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.book-title-input[b-ctbab0end3] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 12px;
    padding: 0.3rem 0.6rem;
    /* Mobile-first: no fixed floor so the rename input never overflows a
       320px viewport; widen to a comfortable size once there's room. */
    min-width: 0;
    width: 100%;
    max-width: 16.25rem;
    outline: none;
}

.book-title-input:focus[b-ctbab0end3] {
    border-color: #31DDE3;
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.15);
}

.btn-inline-save[b-ctbab0end3],
.btn-inline-cancel[b-ctbab0end3] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-inline-save:hover:not(:disabled)[b-ctbab0end3] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.btn-inline-cancel:hover:not(:disabled)[b-ctbab0end3] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.btn-inline-save:disabled[b-ctbab0end3],
.btn-inline-cancel:disabled[b-ctbab0end3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.book-author-header[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-secondary);
    margin-top: 0.1rem;
}

/* Coach banner */
.coach-banner[b-ctbab0end3] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.06) 0%, rgba(49, 221, 227, 0.06) 100%);
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}

.coach-banner[b-ctbab0end3]  i {
    font-size: 16px;
    flex-shrink: 0;
}

.color-badge[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
}

.badge-white[b-ctbab0end3] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.badge-black[b-ctbab0end3] {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

.badge-both[b-ctbab0end3] {
    background: rgba(49, 221, 227, 0.1);
    color: #31DDE3;
}

/* #7745 - min-width: 0 so this chip can be squeezed by its wrapping parent
   rather than setting the cluster's floor. Paired with .depth-label below. */
.depth-completion[b-ctbab0end3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
    min-width: 0;
}

.depth-bar[b-ctbab0end3] {
    flex-shrink: 0;
    width: 3.75rem;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.depth-fill[b-ctbab0end3] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #31DDE3, #10b981);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.depth-label[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.setting-hint[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 0.25rem;
}

/* #7745 - measured on dev at 320: this row reached x=339 (and the mortarboard
   glyph inside it x=328) because the tool cluster never wrapped. Wrapping is
   the only honest answer - the buttons are already at the 44px touch floor, so
   there is nothing left to shrink. */
.header-actions[b-ctbab0end3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    gap: 0.5rem;
}

.mode-toggle[b-ctbab0end3] {
    display: flex;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 0.25rem;
}

.mode-btn[b-ctbab0end3] {
    flex: 1;
    padding: 0.4rem 0.85rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.mode-btn:hover:not(.active)[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.7);
}

.mode-btn.active[b-ctbab0end3] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.btn-tool[b-ctbab0end3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tool:hover[b-ctbab0end3] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.btn-tool.active[b-ctbab0end3] {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.3);
}

/* Drill CTA — primary action that lives next to the icon-only tool buttons.
   Labeled, not just an icon, so the "head to Drill when you're ready" coach
   copy has a tangible target. has-due bumps it to a primary cyan gradient
   when there are lines due for spaced-rep review. */
.btn-drill[b-ctbab0end3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 0.85rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-drill:hover[b-ctbab0end3] {
    background: rgba(49, 221, 227, 0.1);
    border-color: #31DDE3;
    color: #31DDE3;
}

.btn-drill.has-due[b-ctbab0end3] {
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    border-color: transparent;
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(49, 221, 227, 0.3);
}

.btn-drill.has-due:hover[b-ctbab0end3] {
    color: #0f172a;
    box-shadow: 0 6px 18px rgba(49, 221, 227, 0.45);
}

.btn-drill .drill-due-count[b-ctbab0end3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.4rem;
    background: rgba(15, 23, 42, 0.18);
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Audit feedback toast — shows result after clicking the audit button */
.audit-toast[b-ctbab0end3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    animation: audit-toast-in-b-ctbab0end3 0.2s ease;
}

.audit-toast.success[b-ctbab0end3] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #10b981;
}

.audit-toast.error[b-ctbab0end3] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--ascend-text-light);
}

@keyframes audit-toast-in-b-ctbab0end3 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Content layout */
/* #6929 - this container takes keyboard focus via tabindex=0 so arrow-key move
   navigation works without clicking, and keeps working after a click lands on
   the move list. Suppress the browser's default focus ring: the visible
   affordance is the highlighted current move, not a box round the whole
   working area. */
.editor-content:focus[b-ctbab0end3] {
    outline: none;
}

.editor-content[b-ctbab0end3] {
    display: grid;
    /* Mobile-first: board stacks above the tree as a single column so the
       fixed 480px board rail never forces a horizontal scroll on a phone.
       The 2-col board|tree layout is restored at >=768px below. */
    grid-template-columns: 1fr;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
}

@media (min-width: 768px) {
    /* #7745 - the pane column used to be minmax(0, 1fr), which meant the board
       rail took its full 30rem first and handed the pane whatever was left.
       MEASURED on dev at 768 AND 1024: .editor-content is 688px wide at both,
       so the pane got 688 - 24(gap) - 480(board) = 184px - and the build
       panel's candidate table needs 233px there, so .ch-results laid out to
       x=779 against a 768 viewport and to x=1056 against a 1024 one. It is not
       a scroll: .build-panel is overflow: hidden, so the win-rate column was
       clipped and unreachable. (This is the container bug the #7689 comment in
       RepertoireBuildPanel.razor.css points at.)

       A floor on the PANE, not a cap on the board: the board rail is
       minmax(0, 30rem) and can shrink, so at 768 the board becomes 392px -
       still larger than the board a phone shows - and the pane gets 272px,
       which its own container queries can lay out. Above ~1150px there is
       room for both and nothing changes. */
    .editor-content[b-ctbab0end3] {
        grid-template-columns: minmax(0, 30rem) minmax(17rem, 1fr);
    }
}

/* #6999 (owner ruling) - the board never hides: the v1.12.7 lines-expanded
   board-hiding rules are gone. Every pane surface (Explorer, Tree, Lines,
   Archived) inherits the pane column's width; the Lines tab reflows via its
   own container query below when the pane runs narrow. */

.board-column[b-ctbab0end3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.board-wrapper[b-ctbab0end3] {
    /* Never exceed the column; cap at the design board size when there's room. */
    width: min(30rem, 100%);
    max-width: 100%;
    aspect-ratio: 1;
}

[b-ctbab0end3] .board-wrapper cg-board {
    border-radius: 4px;
}

.board-controls[b-ctbab0end3] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.btn-nav[b-ctbab0end3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-nav:hover[b-ctbab0end3] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

/* Tree panel */
.tree-column[b-ctbab0end3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    overflow: hidden;
}

.tree-panel[b-ctbab0end3] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.tree-panel.collapsed[b-ctbab0end3] {
    flex: 0 0 auto;
    min-height: auto;
}

.tree-header[b-ctbab0end3] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    user-select: none;
}

.tree-header:hover[b-ctbab0end3] {
    background: rgba(255, 255, 255, 0.03);
}

.tree-panel.collapsed .tree-header[b-ctbab0end3] {
    border-bottom: none;
}

.tree-header h3[b-ctbab0end3] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tree-breadcrumb[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-number[b-ctbab0end3] {
    margin-left: 4px;
    color: rgba(255, 255, 255, 0.25);
}

.breadcrumb-number:first-child[b-ctbab0end3] {
    margin-left: 0;
}

.breadcrumb-move[b-ctbab0end3] {
    margin-left: 3px;
    color: rgba(255, 255, 255, 0.45);
}

.tree-content[b-ctbab0end3] {
    padding: 0.75rem;
    overflow-y: auto;
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.tree-empty[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 2rem 1rem;
}

.tree-empty p[b-ctbab0end3] {
    margin: 0 0 0.4rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
}

.tree-empty-subtitle[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.82rem !important;
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto !important;
}

/* Tab strip — legacy Advanced View (Tree vs Lines, inside .tree-content so
   it scrolls with the panel body) and, via .pane-tabs, the #6999 consolidated
   pane's primary nav (Explorer | Tree | Lines | Archived). */
.advanced-tabs[b-ctbab0end3] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.75rem;
}

/* #6999 - the consolidated pane's tab strip sits at the top of the pane
   column (outside any card), so it carries its own footprint and wraps on
   narrow panes instead of overflowing. */
.pane-tabs[b-ctbab0end3] {
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* #6999 - Tree/Lines/Archived hosted directly in the pane: same card chrome
   as the legacy tree-panel, no collapse header. */
.pane-panel[b-ctbab0end3] {
    min-height: 0;
}

.pane-breadcrumb[b-ctbab0end3] {
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.advanced-tab[b-ctbab0end3] {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.advanced-tab:hover[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.85);
}

.advanced-tab.active[b-ctbab0end3] {
    color: #31DDE3;
    border-bottom-color: #31DDE3;
}

.lines-tab[b-ctbab0end3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Finding 2 - the reflow below keys off the PANEL's width (a half-page
       column on a wide screen must reflow like a phone), not the viewport. */
    container-type: inline-size;
}

/* #7024 - a board-driven re-derivation is in flight. The grid keeps its
   current content (never a blank pane mid-move); the dim is the only signal
   that a newer one is on its way. Non-interactive so a stale row cannot be
   clicked into a mismatched action. */
.lines-tab.lines-refreshing[b-ctbab0end3] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* #6482 - Lines-tab tag filter row (flag-gated). Select mirrors the Games
   filter idiom in the panel's compact scale. */
.lines-tag-filter[b-ctbab0end3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.lines-tag-select[b-ctbab0end3] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}

.lines-tag-select:focus[b-ctbab0end3] {
    outline: none;
    border-color: var(--ascend-accent);
}

.lines-tag-select option[b-ctbab0end3] {
    background: var(--ascend-bg-dark);
    color: rgba(255, 255, 255, 0.85);
}

.lines-tag-count[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* #6482 - tag chips column. Chips wrap inside the cell; keep the column from
   crowding out the move path. */
[b-ctbab0end3] .col-line-tags {
    max-width: 16rem;
}

/* Per-line drill/rehearse badge — mirrors OpeningHub's .card-drill-badge
   semantics so the visual language stays consistent across surfaces.
   Gold (Rehearse) = always-available CTA; cyan (Drill) = due-now CTA. */
[b-ctbab0end3] .line-drill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Consistent width across both labels: "Drill" (due) vs the longer
       "Rehearse" (not due) otherwise render at different widths (2026-06-28). */
    min-width: 6.75rem;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 8px;
    color: #B88536;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

[b-ctbab0end3] .line-drill-badge:hover,
[b-ctbab0end3] .line-drill-badge:focus-visible {
    background: rgba(184, 133, 54, 0.22);
    border-color: rgba(184, 133, 54, 0.55);
    color: var(--ascend-secondary-light);
}

[b-ctbab0end3] .line-drill-badge.has-due {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.45);
    color: #31DDE3;
}

[b-ctbab0end3] .line-drill-badge.has-due:hover,
[b-ctbab0end3] .line-drill-badge.has-due:focus-visible {
    background: rgba(49, 221, 227, 0.28);
    border-color: #31DDE3;
    color: #31DDE3;
}

[b-ctbab0end3] .line-drill-badge:focus-visible {
    outline: 2px solid #31DDE3;
    outline-offset: 2px;
}

/* #1095 - dubious-line marker. Warm gold (not red): this is a prep-improvement
   nudge, not an error. Reads as "worth a look", never as a failure/trophy. */
[b-ctbab0end3] .line-dubious-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    background: rgba(184, 133, 54, 0.15);
    border: 1px solid rgba(184, 133, 54, 0.45);
    color: #d6a45a;
    cursor: default;
}

[b-ctbab0end3] .line-dubious-badge i {
    font-size: 12px;
}

[b-ctbab0end3] .col-line-dubious {
    width: 1%;
    white-space: nowrap;
}

[b-ctbab0end3] .lines-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

[b-ctbab0end3] .lines-grid th,
[b-ctbab0end3] .lines-grid td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

[b-ctbab0end3] .lines-grid th {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* #6729 canary rework (Finding 2): the Line column owns the table's spare
   width and renders the SAN sequence as flowing inline text that wraps at
   token boundaries, book-style - never one squeezed move per row. The
   min-width keeps the neighboring content-sized columns (chips, tags,
   actions) from crushing it to its narrowest token. */
[b-ctbab0end3] .lines-grid th.col-line,
[b-ctbab0end3] .lines-grid td.col-line {
    width: 100%;
    min-width: 16rem;
}

[b-ctbab0end3] .lines-grid td.col-line {
    color: rgba(255, 255, 255, 0.85);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.6;
}

[b-ctbab0end3] .lines-grid td.col-line-action {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

/* Finding 2 - at narrow panel widths the table reflows to stacked rows: the
   SAN text keeps the full width and WRAPS (never horizontal scroll - a page-
   level horizontal scroll is never acceptable), and the chips/tags/actions
   reflow BELOW the line text. Container query so a half-page column on a
   wide screen reflows the same way a phone does. */
@container (max-width: 40rem) {
    [b-ctbab0end3] .lines-grid thead {
        display: none;
    }

    [b-ctbab0end3] .lines-grid,
    [b-ctbab0end3] .lines-grid tbody {
        display: block;
        width: 100%;
    }

    [b-ctbab0end3] .lines-grid tr {
        display: block;
        padding: 0.45rem 0.35rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    [b-ctbab0end3] .lines-grid td {
        display: inline-block;
        border-bottom: none;
        padding: 0.1rem 0.35rem;
        vertical-align: middle;
    }

    [b-ctbab0end3] .lines-grid td.col-line {
        display: block;
        width: 100%;
        min-width: 0;
    }

    /* #8994 - the dubious cell gets the SAME override as the action cell. Left
       at the table-mode width: 1% it shrank to ~29px as an inline-block and the
       76px badge spilled over the next cell's "+ tag" button (owner feedback
       #8990, every laptop width: the Lines pane is under 40rem there). Pinned by
       LinesGridReflowRatchetTests. */
    [b-ctbab0end3] .lines-grid td.col-line-dubious,
    [b-ctbab0end3] .lines-grid td.col-line-action {
        width: auto;
        text-align: left;
        white-space: normal;
    }

    /* #8994 review - a row with no Dubious badge (or no Alt chip) left an
       EMPTY inline-block behind: ~29px of QuickGrid cell padding that pushed
       "+ tag" right on some rows and not others, and opened a ~58px gap after
       the badge. In this reflow the cells are a chip row, not columns (the Alt
       chip and the tag count already vary per row), so an empty cell simply
       takes no room and every row's chips start at its left edge. Table mode
       keeps the cells: there they are columns. */
    [b-ctbab0end3] .lines-grid td.col-line-dubious:empty,
    [b-ctbab0end3] .lines-grid td.col-line-system-chips:empty {
        display: none;
    }
}

/* #6584 - board-reactive highlight: the row(s) whose line continues through
   the current board position get an accent bar + subtle tint, so the user can
   spot the line to tag without scanning the whole list. */
[b-ctbab0end3] .lines-grid tbody tr.line-passes-through {
    background: color-mix(in srgb, var(--ascend-accent) 10%, transparent);
    box-shadow: inset 3px 0 0 0 var(--ascend-accent);
}

[b-ctbab0end3] .lines-grid tbody tr.line-passes-through td.col-line {
    color: var(--ascend-accent-light);
    font-weight: 600;
}

/* #6729 - variation group headers (flag-gated, repertoire-lines-organization).
   A quiet section divider: name (renamable), line count, scoped drill. */
.variation-group-header[b-ctbab0end3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.9rem 0 0.35rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ascend-accent) 25%, transparent);
}

.variation-group-header:first-of-type[b-ctbab0end3] {
    margin-top: 0.25rem;
}

/* Finding 2 addendum (owner) - the group's shared trunk, rendered ONCE under
   the header; every row below shows only its continuation. Wraps like the
   rows - never a source of horizontal scroll. */
.group-trunk[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
    margin: 0 0 0.35rem;
    padding: 0 0.5rem;
    white-space: normal;
    overflow-wrap: break-word;
}

.group-name[b-ctbab0end3] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.group-name-static[b-ctbab0end3] {
    cursor: default;
}

.group-name-edit-hint[b-ctbab0end3] {
    font-size: 0.7rem;
    /* #7814 - this one needed more than the shared token. The rest opacity and
       the glyph's own alpha MULTIPLY, and at the old 0.35 the composed value
       came out around 0.19 - a pencil that is technically painted and
       practically not there, which is the very thing this bug is about. Every
       other consumer starts from 0.5-1.0 and lands in the 0.28-0.55 band; this
       raises the base so it lands in that band too instead of a third of it.
       The shared token is untouched, so hover and touch still resolve exactly
       as they do on every other surface. */
    color: rgba(255, 255, 255, 0.6);
    /* #7758 - a "click to rename" affordance nobody on a phone could see. */
    opacity: var(--hover-reveal-rest, 0);
    transition: opacity 0.15s ease;
}

.group-name:hover .group-name-edit-hint[b-ctbab0end3] {
    opacity: 1;
}

.group-name-edit[b-ctbab0end3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.group-name-input[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 40%, transparent);
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    min-width: 0;
    max-width: 14rem;
    outline: none;
}

.group-name-input:focus[b-ctbab0end3] {
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ascend-accent) 15%, transparent);
}

.group-line-count[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    white-space: nowrap;
}

/* #6727 - facing roll-up on the group header ("faced x7"). */
[b-ctbab0end3] .group-drill-badge {
    margin-left: auto;
}

/* #6729 - the group's designated main line leads its section. */
[b-ctbab0end3] .lines-grid tbody tr.line-group-main td.col-line {
    color: var(--ascend-secondary-light);
    font-weight: 600;
}

/* #6727 - faced-set drill handoff row. */
.lines-faced-row[b-ctbab0end3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.lines-faced-hint[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
}

/* #7025 - the board-position filter banner. The filter has to announce
   itself: a shorter list with no explanation reads as lost lines. */
.lines-position-filter[b-ctbab0end3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.6rem;
    border-left: 2px solid var(--ascend-accent);
    background: rgba(49, 221, 227, 0.06);
    border-radius: 0 8px 8px 0;
}

.lines-position-hint[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
}

.lines-position-clear[b-ctbab0end3] {
    background: transparent;
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 50px;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    padding: 0.2rem 0.7rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.lines-position-clear:hover[b-ctbab0end3] {
    background: rgba(49, 221, 227, 0.12);
    border-color: var(--ascend-accent);
}

/* #7025 - the honest empty state when the board sits off every prepared
   line. The shared Button component owns its own chrome; only spacing here. */
.lines-position-empty[b-ctbab0end3]  .btn {
    margin-top: 0.75rem;
}

/* #6727 - SYSTEM chips, visibly distinct from user tag chips (outlined,
   brand-token colors per the owner's Chessable reference: Priority -> accent
   cyan, Alternative -> secondary gold; no raw hex). */
[b-ctbab0end3] .line-system-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 50px;
    padding: 0.1rem 0.55rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    white-space: nowrap;
    margin-right: 0.3rem;
}

[b-ctbab0end3] .line-system-chip.chip-alternative {
    color: var(--ascend-secondary-light);
    border: 1px solid color-mix(in srgb, var(--ascend-secondary) 55%, transparent);
    background: color-mix(in srgb, var(--ascend-secondary) 12%, transparent);
}

/* Move tree — row-based notation layout */
/* ::deep required because tree is built via RenderTreeBuilder (no isolation attrs on children) */
.move-tree[b-ctbab0end3] {
    display: flex;
    flex-direction: column;
}

[b-ctbab0end3] .move-row {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 28px;
}

[b-ctbab0end3] .move-number {
    width: 36px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 6px;
    color: rgba(255, 255, 255, 0.35);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    user-select: none;
}

[b-ctbab0end3] .move-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    padding: 2px 6px;
    border-radius: 5px;
    min-width: 0;
    transition: background 0.15s ease;
    cursor: pointer;
}

[b-ctbab0end3] .move-cell:hover {
    background: rgba(49, 221, 227, 0.1);
}

[b-ctbab0end3] .move-cell.selected {
    background: rgba(49, 221, 227, 0.25);
}

[b-ctbab0end3] .move-cell.selected .move-san {
    color: #31DDE3;
    font-weight: 600;
}

[b-ctbab0end3] .move-cell-empty {
    flex: 1;
    padding: 2px 6px;
    cursor: default;
}

[b-ctbab0end3] .move-san {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    white-space: nowrap;
}

/* Per-branch collapse toggle — small chevron prefix on move cells whose
   nodes have children. Click toggles _collapsedNodes membership in the
   editor; the tree renderer short-circuits below collapsed nodes. */
[b-ctbab0end3] .tree-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 0.25rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    transition: color 0.15s ease;
}

[b-ctbab0end3] .tree-collapse-toggle:hover {
    color: var(--ascend-accent, #31DDE3);
}

/* NAG glyph inline with move in tree */
[b-ctbab0end3] .tree-nag {
    font-weight: 700;
    margin-left: 0.15rem;
    font-size: 0.8rem;
}

[b-ctbab0end3] .tree-nag.nag-good { color: #10b981; }
[b-ctbab0end3] .tree-nag.nag-brilliant { color: #06d6a0; }
[b-ctbab0end3] .tree-nag.nag-interesting { color: #31DDE3; }
[b-ctbab0end3] .tree-nag.nag-dubious { color: #fbbf24; }
[b-ctbab0end3] .tree-nag.nag-mistake { color: #f97316; }
[b-ctbab0end3] .tree-nag.nag-blunder { color: #ef4444; }
[b-ctbab0end3] .tree-nag.nag-book { color: #a78bfa; }
/* #7039 - novelty, in the same brand gold the game annotations use for it. */
[b-ctbab0end3] .tree-nag.nag-novelty { color: var(--ascend-secondary-light); }

/* Tabiya marker inline with move — reference-position indicator. */
[b-ctbab0end3] .tree-tabiya-marker {
    display: inline-flex;
    align-items: center;
    margin-left: 0.3rem;
    color: rgba(184, 133, 54, 0.85);
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

[b-ctbab0end3] .tree-tabiya-marker:hover {
    color: #B88536;
    transform: scale(1.15);
}

[b-ctbab0end3] .tree-tabiya-marker i {
    font-size: 0.75rem;
}

/* Comment icon inline with move */
[b-ctbab0end3] .move-comment-icon {
    cursor: pointer;
    color: rgba(184, 133, 54, 0.6);
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
}

[b-ctbab0end3] .move-comment-icon:hover {
    color: #B88536;
}

/* Action buttons revealed on cell hover */
[b-ctbab0end3] .move-actions {
    display: inline-flex;
    gap: 2px;
    /* #7758 - the cluster ends in "Delete from here", which removes a whole
       subtree. Hidden behind a hover the finger cannot perform, it was both
       undiscoverable and, at 22px, mis-tappable by accident. */
    opacity: var(--hover-reveal-rest, 0);
    transition: opacity 0.15s ease;
    margin-left: auto;
}

[b-ctbab0end3] .move-cell:hover .move-actions,
[b-ctbab0end3] .move-cell.selected .move-actions,
[b-ctbab0end3] .move-cell.hidden-move .move-actions {
    opacity: 1;
}

[b-ctbab0end3] .btn-micro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

[b-ctbab0end3] .btn-micro:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

[b-ctbab0end3] .btn-micro-comment:hover {
    color: #B88536;
    background: rgba(184, 133, 54, 0.1);
}

/* #7758 - red at REST. Four 22px icon buttons two pixels apart, the last one
   destructive, all the same gray until you hover: on touch they are all
   revealed together and nothing said which was which. */
[b-ctbab0end3] .btn-micro-danger {
    color: rgba(239, 68, 68, 0.75);
}

[b-ctbab0end3] .btn-micro-danger:hover {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.1);
}

/* #5956 — make-main-line action: cyan accent on hover. */
[b-ctbab0end3] .btn-micro-mainline:hover {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
}

/* Comment text below move row */
[b-ctbab0end3] .move-comment-text {
    color: rgba(184, 133, 54, 0.7);
    font-size: 0.8rem;
    font-style: italic;
    padding: 0.1rem 0 0.2rem 6px;
    margin: 0.1rem 0 0.15rem 36px;
    border-left: 2px solid rgba(184, 133, 54, 0.2);
    line-height: 1.4;
}

/* Variation blocks with left-border hierarchy */
[b-ctbab0end3] .variation-block {
    padding-left: 12px;
    margin: 2px 0 2px 36px;
    border-left: 2px solid rgba(49, 221, 227, 0.15);
}

[b-ctbab0end3] .variation-block .move-san {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

[b-ctbab0end3] .variation-block .move-number {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.82rem;
}

/* Nested variation — dimmer border */
[b-ctbab0end3] .variation-block .variation-block {
    border-left-color: rgba(255, 255, 255, 0.08);
    margin-left: 0;
}

/* Comment editor */

@keyframes fadeIn-b-ctbab0end3 { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn-b-ctbab0end3 {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.comment-modal-hint[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0.5rem 0 0;
}

.comment-input[b-ctbab0end3] {
    width: 100%;
    min-height: 140px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

.comment-input:focus[b-ctbab0end3] {
    outline: none;
    border-color: rgba(184, 133, 54, 0.4);
}

.comment-actions[b-ctbab0end3] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Import panel — #6347: .import-overlay, the .import-panel card and the
   .import-header (h3 + close button) are gone. The shared <Modal> (Size=Medium,
   the same 560px max-width the panel had) owns the overlay, dialog card, title
   and close button. Only the panel's CONTENT rules remain below. */
.import-tabs[b-ctbab0end3] {
    display: flex;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 0.25rem;
    margin-bottom: 1rem;
}

.tab-btn[b-ctbab0end3] {
    flex: 1;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tab-btn.active[b-ctbab0end3] {
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
}

.tab-btn:hover:not(.active)[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.7);
}

.import-content[b-ctbab0end3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.import-content label[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.label-required[b-ctbab0end3] {
    color: rgba(49, 221, 227, 0.6);
    text-transform: none;
    font-size: 0.75rem;
}

.label-optional[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.3);
    text-transform: none;
    font-size: 0.75rem;
}

.import-textarea[b-ctbab0end3] {
    width: 100%;
    min-height: 120px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.75rem;
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
    resize: vertical;
    box-sizing: border-box;
}

.import-textarea:focus[b-ctbab0end3] {
    outline: none;
    border-color: rgba(49, 221, 227, 0.3);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.08);
}

.import-textarea-sm[b-ctbab0end3] {
    min-height: 80px;
}

.import-hint[b-ctbab0end3] {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 0;
}

.import-result[b-ctbab0end3] {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.result-success[b-ctbab0end3] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.result-error[b-ctbab0end3] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--ascend-text-light);
}

.import-warnings[b-ctbab0end3] {
    padding: 0.75rem 1rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    color: rgba(245, 158, 11, 0.9);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.import-warnings ul[b-ctbab0end3] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
}

.import-warnings li[b-ctbab0end3] {
    margin-bottom: 0.25rem;
}

/* .btn-icon was the import panel's own close button; it went away with
   .import-header (#6347) and the page has no other .btn-icon markup. */

/* Settings dialog chrome comes from the shared Modal (#6433); the page owns
   only the content layout below. */

.settings-content[b-ctbab0end3] {
    /* The shared Modal's body supplies the outer padding. */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.setting-group[b-ctbab0end3] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.setting-group label[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* The Coverage goal / Target Depth / Explorer Source / Speed / Rating-range rules moved
   to Components/Shared/RepertoireSettingsFields.razor.css with the markup. Nothing here
   may redefine them: a parent ::deep rule reaches into the child component and would
   silently fight the shared definition. */

.setting-actions[b-ctbab0end3] {
    padding-top: 0.5rem;
}

.setting-hint[b-ctbab0end3] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

.setting-trim-section[b-ctbab0end3] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* #7802 - the five trim buttons must agree on a width once their labels wrap.
   #7757 let a capped label take a second line (Button.razor.css), which stopped
   the silent clipping but left each button sized to its OWN wrapped label:
   five different label lengths, five different widths, a ragged stack.

   The fix belongs HERE, at the container, not in the shared Button - that
   component is used by 168 files and a width rule there would resize every
   button in the app. A flex column stretches each section's single button to
   the section width, and every section is the modal's width, so all five agree.

   The breakpoint is measured, not guessed. Raggedness is only a DEFECT where a
   label wraps; where every label still fits on one line, five content-sized
   buttons are exactly what the desktop modal renders and what #7802 says must
   not change. The longest label ("Find below-threshold branches") measures
   277px intrinsic at the touch font size, and the section is roughly the
   viewport minus 121px of modal chrome, so wrapping begins just under 400px -
   every phone portrait width, nothing above it. 480px is this file's existing
   phone breakpoint and clears that threshold with room for a larger root font.

   Deliberately NOT scoped to the two blocks that cap the button in
   Button.razor.css (<= 768px viewport, and coarse pointer). Those reach a
   tablet and a narrow desktop window, where no label wraps and there is no
   ragged stack to fix - measured there, stretching only turns "Rebuild
   coverage" into a 732px pill, which is a new change, not a repair. */
@media (max-width: 480px) {
    .setting-trim-section[b-ctbab0end3] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
}

.setting-trim-heading[b-ctbab0end3] {
    font-family: var(--ascend-font-primary);
    font-size: 0.78rem;
    color: #B88536;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
}

.setting-trim-hint[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0 0 0.85rem;
}

.setting-trim-message[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: #31DDE3;
    margin: 0.75rem 0 0;
}

/* #7754 - a trim that was REFUSED. All three trim messages shared this one
   cyan treatment, so "Trimmed 0 moves from your book." read as a clean run
   that found nothing to do rather than as a failure. Own modifier name (not a
   shared .error) so this scoped file is not repainting a class app.css owns -
   the #7266 shared-class ownership ratchet. */
.setting-trim-message.trim-refused[b-ctbab0end3] {
    color: #F87171;
}

.trim-empty[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    padding: 0.5rem 0;
}

.trim-summary[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 1rem;
}

.trim-summary strong[b-ctbab0end3] {
    color: #B88536;
}

/* #6545 - section header inside the combined width+depth trim modal, so the
   two passes read as distinct lists under one confirm. */
.trim-pass-heading[b-ctbab0end3] {
    font-family: var(--ascend-font-primary);
    font-size: 0.74rem;
    color: var(--ascend-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 1.1rem 0 0.5rem;
}

.trim-pass-heading:first-child[b-ctbab0end3] {
    margin-top: 0;
}

.trim-list[b-ctbab0end3] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.25rem 0;
    max-height: 240px;
    overflow-y: auto;
}

/* #7086 - the branch scope is now a two-line block (root above, context
   below), so the row aligns to the TOP and the impact count stays level with
   the move the deletion starts at rather than floating mid-paragraph. */
.trim-branch-row[b-ctbab0end3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.trim-branch-row:last-child[b-ctbab0end3] {
    border-bottom: none;
}

.trim-branch-count[b-ctbab0end3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex-shrink: 0;
    text-align: right;
    font-family: var(--ascend-font-primary);
}

/* #6263 — honest trim preview: the move + its rarity above, and the real
   deletion impact (this move + its prep) below, so a short line no longer
   shows a bare "70 moves" that reads like the line itself is 70 moves. */
.trim-branch-rarity[b-ctbab0end3] {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
}

.trim-branch-impact[b-ctbab0end3] {
    font-size: 0.74rem;
    color: rgba(184, 133, 54, 0.9);
}

/* Scope rules */
.scopes-section[b-ctbab0end3] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.75rem;
}

.scope-row[b-ctbab0end3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.scope-type[b-ctbab0end3] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.scope-included[b-ctbab0end3] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.scope-excluded[b-ctbab0end3] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--ascend-text-light);
}

.scope-move[b-ctbab0end3] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Loading & error */
.loading-state[b-ctbab0end3],
.error-state[b-ctbab0end3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.5);
    gap: 1rem;
    flex: 1;
}

/* Responsive: board nav controls get a comfortable touch target on phones
   (mobile-first base above stacks the board over the tree already). */
@media (max-width: 768px) {
    .board-controls[b-ctbab0end3] {
        justify-content: center;
    }

    .board-controls button[b-ctbab0end3] {
        min-height: 44px;
        min-width: 44px;
    }

    /* #7745 - the coverage label is the header cluster's widest single item
       and it is nowrap by default, which is right on a desktop rail where it
       shares a line with the title. On a phone it is the whole reason the
       cluster measured 403px: the longest string it renders is "Navigate to
       track coverage (max depth 8)", wider than a 320px viewport on its own.
       Below the tablet break it wraps instead. */
    .depth-label[b-ctbab0end3] {
        white-space: normal;
    }
}

.hidden-move[b-ctbab0end3] {
    opacity: 0.35;
}

.hidden-move .move-san[b-ctbab0end3] {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.4);
}

.btn-micro-active[b-ctbab0end3] {
    color: var(--ascend-accent) !important;
}

/* Tie-in #4 (PBI #5864). "Reaches" panel — canonical tabiyas the current
   line passes through. Sits above the main build panel in .tree-column
   so it's the first thing a player sees in the side rail when their line
   crosses a structural landmark. */
.reaches-panel[b-ctbab0end3] {
    background: rgba(184, 133, 54, 0.06);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
    font-family: var(--ascend-font-secondary);
}

.reaches-heading[b-ctbab0end3] {
    margin: 0 0 0.55rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(184, 133, 54, 0.95);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.reaches-list[b-ctbab0end3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.reaches-list a[b-ctbab0end3] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.reaches-list a:hover[b-ctbab0end3] {
    border-color: rgba(184, 133, 54, 0.65);
    background: rgba(184, 133, 54, 0.1);
}

.reaches-name[b-ctbab0end3] {
    font-weight: 600;
    color: #ffffff;
}

.reaches-structure[b-ctbab0end3] {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(49, 221, 227, 0.85);
    text-transform: capitalize;
}

/* #5956 follow-up — numbered Lines tab */
[b-ctbab0end3] .col-line-num { width: 2.5rem; text-align: right; }
[b-ctbab0end3] .line-num {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

/* #7055 - the variation's faced count, in the SAME chip shape the build panel
   uses for a faced opponent move (RepertoireBuildPanel.razor.css .faced-badge).
   Duplicated rather than shared because Blazor scoped CSS does not cross
   components - but the shape is deliberately identical so "faced" reads the
   same wherever the owner meets it. Written against the brand tokens; the
   build panel's copy still carries raw hex (drift tracked under #6303). */
.faced-badge[b-ctbab0end3] {
    display: inline-flex;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--ascend-accent);
    background: color-mix(in srgb, var(--ascend-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 8px;
    padding: 0.1rem 0.4rem;
    margin-left: 0.3rem;
    white-space: nowrap;
    cursor: help;
}

.faced-badge .faced-count[b-ctbab0end3] {
    margin-left: 0.2rem;
}
/* /Components/Pages/SelfReview.razor.rz.scp.css */
/* Self-Review Page Layout - mobile-first: tight padding on phones,
   roomier from the tablet breakpoint up. */
.self-review-page[b-au47nvfi2a] {
    padding: 1rem;
    /* #1226 — was 75rem (1200px), which squeezed the board + sidebar into a narrow
       centered strip on wide monitors and forced the sidebar to its 380px floor.
       Widened so the review body can breathe on large screens. */
    max-width: 88rem;
    margin: 0 auto;
    outline: none;
}

@media (min-width: 768px) {
    .self-review-page[b-au47nvfi2a] {
        padding: 1.5rem;
    }
}

/* Loading & Error States */
.loading-container[b-au47nvfi2a],
.error-container[b-au47nvfi2a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.loading-spinner i[b-au47nvfi2a],
.error-icon i[b-au47nvfi2a] {
    font-size: 3rem;
    color: #31DDE3;
}

.error-icon i[b-au47nvfi2a] {
    color: #ef4444;
}

@keyframes spin-b-au47nvfi2a {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Header */
.review-header[b-au47nvfi2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* #7153 - ONE THIN ROW, matching the sibling GameAnalysis header exactly:
       the identity moved onto the board's edges, so what remains must not
       spend the board's vertical budget (measured 2026-08-20: the old
       1rem/1.5rem padding+margin put the nav controls 42px below the fold at
       1600x820 while GameAnalysis kept everything inside the viewport). */
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
}

.header-left[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.back-button[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-button:hover[b-au47nvfi2a] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.header-title[b-au47nvfi2a] {
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    color: #31DDE3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.game-info[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
}

.game-info .opponent[b-au47nvfi2a] {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 1rem;
    color: #ffffff;
}


.result-win[b-au47nvfi2a] {
    color: #10b981;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.result-loss[b-au47nvfi2a] {
    color: var(--ascend-text-light);
    font-weight: 600;
    background: rgba(239, 68, 68, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.result-draw[b-au47nvfi2a] {
    color: #9ca3af;
    font-weight: 600;
    background: rgba(156, 163, 175, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

/* Main Content Grid */
.review-content[b-au47nvfi2a] {
    display: grid;
    /* minmax(0, ...) lets the board column shrink below its intrinsic
       content width so the grid never overflows in the 670-900px band
       before the single-column breakpoint. (Mobile sweep 2026-06.) */
    /* #1226 — sidebar floor raised 380 -> 440 so the move table + assessment
       panel aren't cramped; align-items:start lets the board column stay its
       own height while the taller sidebar scrolls. */
    /* #7159 - the board TRACK carries a height-derived cap so the square
       board's bottom edge stays above the fold (measured 2026-08-20: the
       uncapped 1fr track put the board 44px below the fold at 1600x820).
       min(1fr-equivalent, viewport cap) via minmax: a fixed viewport-derived
       length, never a percentage against an auto row (the 2026-08-19 incident
       shape). 22rem = header + edge strips + nav controls around the board.

       #7756 - THE HEIGHT CAP HAD NO WIDTH TERM, WHICH IS WHY 1024 BROKE.
       `calc(100dvh - 22rem)` says how much VERTICAL room the board has and
       nothing about how much of the ROW it may take, so the board claimed its
       whole height cap first and the sidebar got the remainder. A TALLER
       viewport therefore produced a NARROWER sidebar at the same width.
       MEASURED on dev, this game, before the fix:

         1024 x 768   board 416   sidebar 248   no page overflow, but
                                                "Grading, coaching, and..."
                                                truncated to 69px
         1024 x 900   board 548   sidebar 116   button.ptb-row to x=1111;
                                                "Compare with Engine" clipped
                                                (needs 89, has 82); "How this
                                                works" clipped (needs 164, has
                                                114); "Assessment" past the
                                                right edge at x=1061

       One width, two heights, 132px of difference in the pane - which is why no
       media query could see it, and the same shape #7745 found in the
       repertoire editor. The 1024x900 case is the one screenshotted on #7751
       and reported on this bug.

       So the board takes the SMALLER of its height cap and what the sidebar
       leaves. The sidebar's reserve is MEASURED, not chosen: the widest thing
       that actually OVERFLOWED at 116px was `button.ptb-row`, needing 251px
       from the pane's left edge, so 18rem = 288px clears it with 37px to spare
       and matches the reserve Game Analysis uses - the two pages should not
       disagree about how wide this column has to be. The floor is capped by the
       same expression, because a floor that outgrows its own track is overflow
       with extra steps.

       Nothing at or above 1280px moves: there the height cap is still the
       smaller term, so 1280x800 computes 448/416 and 1280x900 computes 548/316
       exactly as before. */
    --pane-reserve: 18rem;
    --board-track-max: min(
        max(18rem, calc(100dvh - 22rem)),
        calc(100% - var(--pane-reserve) - 1.5rem));
    grid-template-columns:
        minmax(min(18rem, var(--board-track-max)), var(--board-track-max))
        minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* Grid ITEMS default to min-width:auto and refuse to shrink below their own
   min-content width - they overflow the track even when it is minmax(0, ...).
   Both halves of the pattern are required, so pin the children too. Without this
   a wide child (move table, assessment panel) pushes the column past the viewport
   on a phone and the board's h-file is clipped off-screen (#6672, Android). */
.review-content > *[b-au47nvfi2a] {
    min-width: 0;
}

/* Board Column */
.board-column[b-au47nvfi2a] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* #7153 - the #1226 `position: sticky` here was DEAD, same as the one
       GameAnalysis deleted under #7151: app.css sets overflow-x:hidden on
       html/body, which per spec makes BODY a scroll container the document
       does not scroll, so sticky descendants never engage (measured
       2026-08-02, written up in GameAnalysis.razor.css). The height-capped
       board track above now keeps the board in view instead. */
    align-self: start;
}

/* Board Card */
.board-card[b-au47nvfi2a] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.board-card[b-au47nvfi2a]  .chessboard-container {
    width: 100%;
    aspect-ratio: 1;
}

.board-card[b-au47nvfi2a]  .chessboard {
    width: 100% !important;
    height: 100% !important;
}

/* Navigation Controls */
.board-controls[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* #7688 - the column gap is the GROUP separator now and has to beat the gap
       INSIDE the transport cluster (0.125rem) by enough for the eye to read the
       boundary. That RATIO, not the absolute value, is the signal. Same shape as
       #7178 used on Game Review. */
    gap: 0.375rem 0.85rem;
    padding: 0.375rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    /* #7688 - the safety net, and it was MISSING here. Without it flex shrink
       answered an over-wide row by squeezing the buttons: MEASURED at 1366x768
       on this branch's base, six 40px buttons rendered 27px wide and 40px tall,
       because the row's content needed 393px in a 382px box. A wrapped second
       row is worse than one line but far better than six distorted targets, and
       the desktop compaction below means it is only ever reached on a phone. */
    flex-wrap: wrap;
}

/* --- #7688: DESKTOP - make the row FIT one line instead of squeezing ---------

   MEASURED at 1366x768: the board track is `calc(100dvh - 22rem)` = 416px, the
   card's padding leaves 384px, and the row's content came to 393px. Eleven
   pixels. #7188 could not close a gap like this on Game Review because that row
   was 105px over and needed the overflow menu; this one closes on button size
   alone, which is why this page gets the grouping WITHOUT an overflow.

   Mobile deliberately goes the other way - see the <=768px block further down,
   where the targets get BIGGER, not smaller. */
@media (min-width: 769px) {
    .board-controls[b-au47nvfi2a] {
        gap: 0.25rem 0.75rem;
        padding: 0.25rem;
    }

    .board-controls .nav-btn[b-au47nvfi2a] {
        width: 32px;
        height: 32px;
    }
}

/* ...and on a SHORT desktop viewport, where the board track is derived from the
   viewport HEIGHT, buy back the last few pixels the same way #7178 did. At
   1366x768 this is what puts the row on one line with its buttons still square
   rather than flex-squeezed. */
@media (min-width: 769px) and (max-height: 850px) {
    .board-controls[b-au47nvfi2a] {
        gap: 0.2rem 0.45rem;
        padding: 0.2rem;
    }

    .control-group-actions[b-au47nvfi2a] {
        padding-left: 0.4rem;
    }

    /* The move label reserves 80px for "12. Nxd5"; 68px still fits the longest
       label this page shows, and those 12px are part of the one-line budget. */
    .move-indicator[b-au47nvfi2a] {
        min-width: 68px;
        padding: 0 0.35rem;
    }

    .board-controls .nav-btn[b-au47nvfi2a] {
        width: 30px;
        height: 30px;
    }
}

.nav-btn[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* #7688 - a flex item's default min-width is auto, which is what let this
       row squeeze its buttons out of square rather than wrap. Pinning the basis
       and refusing to shrink makes the button a fixed object; the row wraps when
       it must. */
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.nav-btn:hover:not(:disabled)[b-au47nvfi2a] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.nav-btn:disabled[b-au47nvfi2a] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- #7688: THE CONTROL ROW IS THREE GROUPS ---------------------------------

   #7178's rules, applied to this page's smaller row. The defect is not "too
   many buttons", it is that every button looked the same, so nothing separated
   "move through the game" from "do something to the position". These rules are
   the whole answer and they are deliberately cheap: no color changes, no new
   foreground/background pairs, nothing that can move a contrast ratio. Spacing,
   one container ring, one divider.

   The groups sit inside the flex row .board-controls already was, so the wrap
   safety net, the desktop compaction and the phone block all keep working on
   them unchanged. */
.control-group[b-au47nvfi2a] {
    display: flex;
    align-items: center;
}

/* TRANSPORT reads as ONE object. Four equal targets and a label with the row's
   ordinary gap were six things; pulled tight inside a ring with a shared inset
   they are one transport cluster. The inset is a BLACK wash, not a light one:
   on this dark card it makes the area behind the glyphs slightly darker, so
   every icon's contrast against its backdrop can only go up. The .nav-btn
   colors themselves are untouched. */
.control-group-transport[b-au47nvfi2a] {
    gap: 0.125rem;
    padding: 0.125rem 0.25rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
}

/* VIEW keeps the row's ordinary rhythm - the gap either side is what says it is
   its own thing. */
.control-group-view[b-au47nvfi2a] {
    gap: 0.25rem;
}

/* ACTIONS carries the boundary rule. Drawn on the group's leading edge, so it
   marks the VIEW/ACTIONS boundary itself rather than hanging off whichever
   control happens to sit last - which is what `.nav-btn.flip-btn { margin-left:
   1rem }` used to do here, and why that rule is gone. */
.control-group-actions[b-au47nvfi2a] {
    gap: 0.375rem;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* The two capture affordances are shared components carrying their own button
   chrome - a filled accent pill sized for a toolbar, 40x33 next to 40x40 nav
   buttons, in two different brand colors. In a row whose whole problem was
   that nothing told the groups apart, two of the loudest pixels belonging to
   the RAREST controls is backwards. #7178 solved the same thing by restyling
   them inside its menu; there is no menu here, so they take .nav-btn chrome and
   the row gets ONE button size. ::deep because the markup belongs to the child
   components, and the rules are scoped to this group, so both components look
   exactly as they always have on every other surface. */
.control-group-actions[b-au47nvfi2a]  .add-to-sparring-btn,
.control-group-actions[b-au47nvfi2a]  .add-to-flashcards-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

.control-group-actions[b-au47nvfi2a]  .add-to-sparring-btn:hover:not(.is-disabled):not(:disabled),
.control-group-actions[b-au47nvfi2a]  .add-to-flashcards-btn:hover:not(.is-disabled):not(:disabled) {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

@media (min-width: 769px) {
    .control-group-actions[b-au47nvfi2a]  .add-to-sparring-btn,
    .control-group-actions[b-au47nvfi2a]  .add-to-flashcards-btn {
        width: 32px;
        height: 32px;
    }
}

@media (min-width: 769px) and (max-height: 850px) {
    .control-group-actions[b-au47nvfi2a]  .add-to-sparring-btn,
    .control-group-actions[b-au47nvfi2a]  .add-to-flashcards-btn {
        width: 30px;
        height: 30px;
    }
}

.move-indicator[b-au47nvfi2a] {
    min-width: 80px;
    text-align: center;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 0.5rem;
}

/* Game Info Card */
.game-info-card[b-au47nvfi2a] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
}

.info-grid[b-au47nvfi2a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-item[b-au47nvfi2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
}

.info-label[b-au47nvfi2a] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
}

.info-value[b-au47nvfi2a] {
    font-size: 0.875rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* #6633 - the opening line renders through the shared EcoBadge, which owns the
   name/code styling; the local .eco-code rule is gone. */

/* Sidebar Column */
.sidebar-column[b-au47nvfi2a] {
    display: flex;
    flex-direction: column;
    /* #7764 - 10px, not 16px. There are four gaps in this column, so the
       separation between blocks was costing 64px of a 688px budget - more than
       the tab bar and the review-guide row put together. 10px still reads as
       separate cards (each block carries its own border and background) and
       hands 24px back to the move list. */
    gap: 0.625rem;

    /* #7179 - THE MOVE LIST SCROLLS, NOT THE PAGE.
       This column had no height, so `.tab-content { flex: 1; overflow-y: auto }`
       and `.compare-footer { position: sticky; bottom: 0 }` were both DEAD: with
       an auto-height flex container there is no free space to flex into and no
       scrollport to stick to, so the move list simply grew to its full 1315px
       and pushed everything below it off the document. Measured on the parent
       commit IN PRODUCTION at 1599x820: document height 2303px,
       "Compare with Engine" at y=2066, and the move list itself only 17px
       inside the viewport.
       Capping the column at the viewport turns all three rules back on. The
       cap is a fixed viewport-derived LENGTH, never a percentage against an
       auto row - same rule the board track above follows.
       13.25rem = 212px, and that number is a PRODUCTION measurement, not an
       arithmetic guess: prod's header.main-header is 96px (a local instance's
       is shorter, which is exactly how #7188 shipped a budget that failed by
       9.2px), and 96 + 56 page padding + 52 .review-header + 8 margin = 212.
       Measured in Chromium against ascendchess.com at 1600x900, 1599x820 and
       1366x768 - the column's document top was 212px in all three.
       The 24rem floor keeps a very short viewport usable rather than squeezing
       the list to nothing.
       `height`, NOT `max-height`: flex-grow only distributes FREE space, and a
       max-height leaves the container content-sized with no free space at all.
       Measured with max-height and the guide collapsed at 1599x820, the column
       came out 451px and the move list stayed pinned at its 8rem floor instead
       of taking the 157px the guide had just given back. */
    height: calc(100dvh - 13.25rem);
    min-height: 24rem;
}

/* The small fixed furniture never shrinks - squeezing a 43px tab bar or the
   Compare button only clips them. The review guide DOES shrink (it scrolls
   inside itself), because it is the block that must yield when the column is
   short: the move list is the working surface and gets the floor, not the
   explanation of it.
   .phase-transitions-banner is PhaseTransitionBanner's OWN root element, so it
   carries that component's scope attribute and not this page's - a plain
   selector compiles to `.phase-transitions-banner[b-selfreview]` and matches
   nothing (verified against the live DOM 2026-08-24: the banner root carries
   b-vliij2i5ll while this page is b-au47nvfi2a). ::deep is required, and only
   for that one child; .tab-bar and .compare-footer are this page's own markup. */
.sidebar-column[b-au47nvfi2a]  .phase-transitions-banner {
    flex-shrink: 0;
}

.sidebar-column > .tab-bar[b-au47nvfi2a],
.sidebar-column > .compare-footer[b-au47nvfi2a] {
    flex-shrink: 0;
}

/* #7179 - the review guide: grading rubric + coach framing + the phase
   nudge, behind one disclosure. Collapsed it is a single ~44px row; open it
   restores every word that used to hold permanent tenancy above the list. */
.review-guide[b-au47nvfi2a] {
    display: flex;
    flex-direction: column;
    /* Shrinkable, and min-height:0 so the shrink can actually bite - without it
       the flex item refuses to go below its content height and the move list is
       the one that gets crushed instead. Opened on a short viewport the guide
       gives up height and scrolls inside .rg-body; the summary row stays put. */
    flex: 0 1 auto;
    min-height: 0;
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.05);
    overflow: hidden;
}

.rg-summary[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    flex: 0 0 auto;
    padding: 0.6rem 0.85rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.rg-summary:hover[b-au47nvfi2a] {
    background: rgba(49, 221, 227, 0.08);
}

.rg-icon[b-au47nvfi2a],
.rg-chevron[b-au47nvfi2a] {
    color: var(--ascend-accent);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.rg-chevron[b-au47nvfi2a] {
    margin-left: auto;
}

.rg-label[b-au47nvfi2a] {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
}

/* The hint names what is inside so the collapsed row is not a mystery box.
   It is the first thing to go when the column is narrow. */
.rg-hint[b-au47nvfi2a] {
    /* #7747 - was rgba(255, 255, 255, 0.45), measured 4.35:1 on the real
       composited surface, and 33 of these render at 390px. Repainted onto the
       token #7232 established for every dim-white label; no new color. */
    color: var(--ascend-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Deliberately `display: block`, not a flex column. As a flex column its
   children became flex items and SHRANK when the guide was squeezed - measured
   at 1599x820 the coach framing rendered 44px tall against its natural 99px,
   with its own text clipped. Block layout keeps every child at its natural
   height and lets the overflow scroll, which is the behavior wanted: the
   guide gives up HEIGHT, never WORDS. */
.rg-body[b-au47nvfi2a] {
    display: block;
    padding: 0 0.85rem 0.85rem;
    /* The guide can be taller than the room the column can spare; it scrolls
       inside itself rather than shoving the move list out of the viewport. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.rg-nudge[b-au47nvfi2a] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    /* .rg-body is block layout, so separation is margins, not a gap. The block
       above this one is .coaching-framing, which brings its own 1.5rem
       margin-bottom, so this top margin only has to clear the rubric spacing. */
    margin: 0.75rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* Plain selector, no ::deep: this <i> is written in SelfReview's own markup and
   already carries the page's scope attribute. */
.rg-nudge i[b-au47nvfi2a] {
    color: var(--ascend-secondary);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Coaching Banner */
.coaching-banner[b-au47nvfi2a] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.08), rgba(184, 133, 54, 0.04));
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 12px;
}

.coaching-banner .banner-icon[b-au47nvfi2a] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(184, 133, 54, 0.15);
    border-radius: 8px;
    color: #B88536;
    font-size: 1.125rem;
}

.coaching-banner p[b-au47nvfi2a] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
}

/* Tab Bar */
.tab-bar[b-au47nvfi2a] {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 3px;
}

.tab-btn[b-au47nvfi2a] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.tab-btn:hover[b-au47nvfi2a] { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.04); }
.tab-btn.active[b-au47nvfi2a] { color: #31DDE3; background: rgba(49, 221, 227, 0.1); }
.tab-btn[b-au47nvfi2a]  i { font-size: 0.85rem; }

/* The move list / assessment body is the ONE part of the sidebar that flexes:
   it takes whatever the capped column has left and scrolls inside itself.
   #7179 - the rules were already here and were inert until .sidebar-column
   got a height. `scrollbar-gutter` keeps the move rows from shifting sideways
   when the scrollbar appears. */
.tab-content[b-au47nvfi2a] {
    flex: 1 1 0;
    /* THE FLOOR. This is the whole point of #7179: whatever else is on the
       page, the working surface keeps a working amount of it. 8rem = 128px is
       about three move rows, and it is what the OPEN guide leaves at 1599x820
       and 1366x768 - the guide scrolls inside itself instead of taking the
       list's last pixels. Measured in prod, guide COLLAPSED (the default): 349
       / 269 / 217px of list at 1600x900 / 1599x820 / 1366x768. Without a
       min-height the flex negotiation hands the list 0px the moment the guide
       is opened - that exact zero was measured before this line existed.
       Paired with `flex: 1 1 0`: a zero basis puts ALL the shrink on the guide,
       so the block that yields on a short viewport is the explanation, not the
       work. With `flex-basis: auto` the shrink is split by content size and the
       list is the one crushed (measured: 74px at 1599x820, footer off-screen). */
    min-height: 8rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* #7750 - the panel is a tab stop now (it scrolls, and nothing inside the Moves
   tab is focusable), so it has to SHOW that it has focus. Inset so the ring is
   not clipped by its own scrollport. */
.tab-content:focus-visible[b-au47nvfi2a] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: -2px;
}

.no-move-selected[b-au47nvfi2a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    gap: 0.75rem;
}

.no-move-selected[b-au47nvfi2a]  i { font-size: 1.5rem; }

/* Moves Card (inside tab) */
.moves-card[b-au47nvfi2a] {
    padding: 0.5rem 0;
}

/* Move Table (with variations) */
.move-table[b-au47nvfi2a] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.85rem;
}

/* #7764 - the row gutter, halved horizontally and cut to 1.6px vertically. The
   chip inside owns the padding that makes a move hittable (see `.move-node`), so
   this padding was buying nothing but height: it added 8px to every row, and a
   32-move game pays it 32 times. The horizontal half is what puts the two plies
   the same distance apart Game Analysis puts them. */
.move-table .move-row td[b-au47nvfi2a] {
    padding: 0.1rem 0.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.move-num-cell[b-au47nvfi2a] {
    /* #7747 - was rgba(255, 255, 255, 0.35); axe-core 4.13.0 measured 3.20:1,
       32 nodes at 390px - the largest single failure on this page. Same
       dim-white family, same #7232 token. */
    color: var(--ascend-text-secondary);
    width: 40px;
    text-align: right;
    font-weight: 600;
}

/* #7765 - the ply columns are sized by their CONTENT, and `.move-slack-td`
   swallows everything left over. `width: 1%` is the table idiom for
   "shrink-to-fit": auto layout clamps it up to the column's max-content width
   and the slack column, asking for 100%, takes the remainder - so the two plies
   sit side by side at the left of the panel instead of being flung to opposite
   edges by a pair of half-the-table columns.
   Content-sized COLUMNS, not content-sized cells: a table column is as wide as
   the widest cell in it across every row, so the chips still line up all the way
   down and a row carrying a clock or a glyph widens the whole column rather than
   stepping out of line. `min-width` on the chip keeps a bare `e4` from making a
   column too narrow to read as a column, the same job Game Analysis's
   `.move-cell { min-width: 80px }` does. */
.move-cell-td[b-au47nvfi2a] { width: 1%; }

.move-slack-td[b-au47nvfi2a] { width: 100%; }

.move-node[b-au47nvfi2a] {
    /* Fills its cell rather than hugging the SAN (#7765): the selected state
       has to read as a SELECTED CELL from across the panel, which a chip shrunk
       to two characters cannot. `flex` (not inline-flex) is what makes the box
       the width of the column; the variation chips below opt back out, because
       they flow as a wrapping run inside one wide cell. */
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 4rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
    /* #7764 - the chip is the row's height, and the row's height is how many
       moves fit. A 1.6 line box on 13.6px monospace made every row 37px tall;
       1.4 makes it 30px and the list shows five more moves in the same column.
       `min-height` is the floor that keeps the chip a legitimate pointer target
       whatever the font metrics turn out to be - 24.8px against WCAG 2.5.8's
       24px minimum - so the density can never be bought at the tap target's
       expense. */
    line-height: 1.4;
    min-height: 1.55rem;
}

.move-node:hover[b-au47nvfi2a] { background: rgba(49, 221, 227, 0.1); }

/* #7765 - the selected move now reads at a glance. It carried a 20% cyan wash
   and cyan TEXT on a chip the width of the SAN, and no border at all
   (`border-width: 0px`, measured); beside its neighbors that is a tint, which is
   why the owner read the highlight as absent. This is Game Analysis's
   `.move-cell.selected` treatment, not a third invention: the same 20% cyan
   fill, the same 1px cyan border, and white text against the neighbors'
   85%-white - a fill, an outline and a color step rather than a wash alone.
   The border is declared transparent on the base rule above so selecting a move
   cannot shift the row by a pixel. */
.move-node.selected[b-au47nvfi2a] {
    background: rgba(49, 221, 227, 0.2);
    border-color: rgba(49, 221, 227, 0.5);
    color: #fff;
    font-weight: 600;
}

.move-node.flagged[b-au47nvfi2a] {
    border-left: 2px solid #B88536;
    padding-left: 0.4rem;
}

/* #5444 — phase-boundary move marker (pre-marked suggestion; the user's own
   flag is still the glyph). Cyan top edge so it composes with .flagged's gold
   left edge when the same move carries both. */
.move-node.phase-transition[b-au47nvfi2a] {
    border-top: 2px solid rgba(49, 221, 227, 0.55);
}

.phase-transition-marker[b-au47nvfi2a] {
    margin-left: 0.25rem;
    color: var(--ascend-accent);
    font-size: 0.7rem;
    vertical-align: 1px;
}

/* Variation moves flow as a wrapping RUN inside one wide cell, so they opt back
   out of the mainline chip's fill-the-cell box (#7765): as flex items each one
   would take a line of its own and a three-move sideline would become three
   rows. */
.move-node.variation[b-au47nvfi2a] {
    display: inline-flex;
    min-width: 0;
    min-height: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    padding: 0 0.3rem;
    line-height: 1.55;
}

.move-node.variation:hover[b-au47nvfi2a] { color: rgba(255, 255, 255, 0.85); }

.move-node.variation.selected[b-au47nvfi2a] {
    background: rgba(184, 133, 54, 0.2);
    border-color: rgba(184, 133, 54, 0.5);
    color: var(--ascend-secondary-light);
}

.variation-row td[b-au47nvfi2a] {
    padding: 0.15rem 0.5rem 0.15rem 2.5rem !important;
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.5);
    border-left: 2px solid rgba(184, 133, 54, 0.3) !important;
}

.variation-bracket[b-au47nvfi2a] {
    color: rgba(184, 133, 54, 0.6);
    margin: 0 0.15rem;
    font-size: 0.78rem;
}

/* #7765 - THE LEGACY "MOVE GRID" BLOCK IS GONE, AND DELETING IT IS HALF THE FIX.
   A `.move-grid` presentation was superseded by the `.move-table` above, but its
   rules stayed behind, and one of them was never dead: `.move-row` is the class
   on the REAL `<tr>`, so a rule reading

       `.move-row` -> `display: grid` + `grid-template-columns: 2.5rem 1fr 1fr`

   was turning every table row into a grid box. The `<td>`s blockified into grid
   items, each `1fr` track came out 208px wide at 1440, and `.move-cell-td`'s
   `width: 50%` - written for a table column, where it means half the TABLE -
   then resolved against the 208px TRACK instead. Measured on dev at 1440, demo@,
   before this change: track 208px, cell 104px, so every ply chip sat at the left
   edge of its track with 104px of dead space behind it and 175.6px of empty
   panel between `c4` and `f5`. The eye had to cross the panel to read one pair.
   Game Analysis, the house pattern, puts its two plies 0px apart.
   `.move-grid`, `.move-number` and the `.move-cell*` family had no markup left
   at all. `.move-san` below is still live - the assessment panel's
   current-move label uses it. */

.move-san[b-au47nvfi2a] {
    color: #fff;
}

/* User Glyph Badges */
.user-glyph[b-au47nvfi2a] {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.0625rem 0.25rem;
    border-radius: 3px;
    line-height: 1;
}

/* #4542 — per-move time taken / clock-pressure tint on the self-review board. */
.move-clock[b-au47nvfi2a] {
    margin-left: 0.3rem;
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.4);
}
.move-clock.clock-warn[b-au47nvfi2a] { color: #fbbf24; }
.move-clock.clock-low[b-au47nvfi2a] { color: #f97316; }
.move-clock.clock-critical[b-au47nvfi2a] { color: #ef4444; font-weight: 600; }

.user-glyph.good[b-au47nvfi2a] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.user-glyph.brilliant[b-au47nvfi2a] {
    color: #06d6a0;
    background: rgba(6, 214, 160, 0.15);
}

.user-glyph.interesting[b-au47nvfi2a] {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.15);
}

.user-glyph.dubious[b-au47nvfi2a] {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
}

.user-glyph.mistake[b-au47nvfi2a] {
    color: #f97316;
    background: rgba(249, 115, 22, 0.15);
}

.user-glyph.blunder[b-au47nvfi2a] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.15);
}

.user-glyph.book[b-au47nvfi2a] {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.15);
}

/* Novelty is the complement of book on the same axis, so it reads as its own
   color rather than a shade of the quality glyphs. */
.user-glyph.novelty[b-au47nvfi2a] {
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.18);
}

/* Annotation Panel */
.annotation-panel[b-au47nvfi2a] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
}

.annotation-panel h3[b-au47nvfi2a] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #31DDE3;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}

.current-move-label[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: rgba(49, 221, 227, 0.05);
    border-radius: 6px;
}

.current-move-label .move-num[b-au47nvfi2a] {
    color: rgba(255, 255, 255, 0.4);
}

.current-move-label .move-dots[b-au47nvfi2a] {
    color: rgba(255, 255, 255, 0.4);
}

.current-move-label .move-san[b-au47nvfi2a] {
    color: #fff;
    font-weight: 600;
}

/* Glyph Buttons */
.glyph-row[b-au47nvfi2a] {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.glyph-btn[b-au47nvfi2a] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;
    min-height: 38px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.glyph-btn:hover[b-au47nvfi2a] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.glyph-btn.good.active[b-au47nvfi2a] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.5);
    color: #10b981;
}

.glyph-btn.brilliant.active[b-au47nvfi2a] {
    background: rgba(6, 214, 160, 0.15);
    border-color: rgba(6, 214, 160, 0.5);
    color: #06d6a0;
}

.glyph-btn.interesting.active[b-au47nvfi2a] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.glyph-btn.dubious.active[b-au47nvfi2a] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fbbf24;
}

.glyph-btn.mistake.active[b-au47nvfi2a] {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.5);
    color: #f97316;
}

.glyph-btn.blunder.active[b-au47nvfi2a] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    color: var(--ascend-text-light);
}

.glyph-btn.book.active[b-au47nvfi2a] {
    background: rgba(167, 139, 250, 0.15);
    border-color: rgba(167, 139, 250, 0.5);
    color: #a78bfa;
}

.glyph-btn.novelty.active[b-au47nvfi2a] {
    background: rgba(184, 133, 54, 0.18);
    border-color: var(--ascend-secondary);
    color: var(--ascend-secondary-light);
}

.glyph-btn.clear.active[b-au47nvfi2a] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

/* Flag Toggle */
.flag-toggle[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
}

.flag-toggle input[type="checkbox"][b-au47nvfi2a] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.flag-toggle input[type="checkbox"]:checked[b-au47nvfi2a] {
    background: rgba(184, 133, 54, 0.2);
    border-color: #B88536;
}

.flag-toggle input[type="checkbox"]:checked[b-au47nvfi2a]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid #B88536;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.flag-label[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
}

.flag-label i[b-au47nvfi2a] {
    color: #B88536;
    font-size: 0.8125rem;
}

/* Comment Input */
.comment-input[b-au47nvfi2a] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.625rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    resize: vertical;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.comment-input:focus[b-au47nvfi2a] {
    outline: none;
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.08);
}

.comment-input[b-au47nvfi2a]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Compare Footer */
.compare-footer[b-au47nvfi2a] {
    position: sticky;
    bottom: 0;
    /* #7764 - 10px, was 16px. The footer is a frame around one button; the
       button's own padding is what makes it hittable, and the frame around it
       was costing 12px of move list on every review. */
    padding: 0.625rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    margin-top: auto;
}

.compare-btn[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    /* #7764 - 0.65rem vertical, was 0.875rem. The button stays a full-width
       48px target (10.4px + 10.4px around a 19px line, plus the footer frame),
       comfortably past the 24px minimum, and returns 8px to the move list. */
    padding: 0.65rem 1.5rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 50px;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.compare-btn:hover:not(:disabled)[b-au47nvfi2a] {
    background: linear-gradient(135deg, #42e8ed 0%, #31DDE3 100%);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

.compare-btn:disabled[b-au47nvfi2a] {
    opacity: 0.6;
    cursor: not-allowed;
}

.compare-btn .spin[b-au47nvfi2a] {
    animation: spin-b-au47nvfi2a 1s linear infinite;
}

/* Responsive */
@media (max-width: 900px) {
    .review-content[b-au47nvfi2a] {
        /* minmax(0, ...) NOT bare 1fr: a bare `1fr` is minmax(AUTO, 1fr), and the
           auto minimum refuses to shrink below the widest child's min-content
           width - so on a phone the single column is forced wider than the
           viewport and the board, sized 100%% of it, renders past the right edge
           with the h-file cut off (customer-reported on Android, #6672). The
           desktop rule above already used minmax(0, ...) for exactly this reason;
           these overrides were dropping the protection. */
        grid-template-columns: minmax(0, 1fr);
    }

    /* #1226 — single column: don't pin the (now full-width) board; it would eat
       most of the viewport while the sidebar scrolls beneath it. */
    .board-column[b-au47nvfi2a] {
        position: static;
    }

    /* #7179 - lift the viewport cap in the single-column layout. Stacked under
       a full-width board there is no "rest of the viewport" left to hand the
       move list, and a capped column would put a second scrollbar inside a page
       that is already scrolling. The page scroll is the right one on a phone;
       what the collapsed review guide buys there is that the list starts near
       the top of its own section instead of ~750px down it. */
    .sidebar-column[b-au47nvfi2a] {
        height: auto;
        min-height: 0;
    }

    .tab-content[b-au47nvfi2a] {
        /* `flex: 1 1 0` above is a DESKTOP rule and must not survive here: with
           a zero basis in an auto-height column the move list has no free space
           to grow into, and 32 rows collapse to nothing. Back to content-sized. */
        flex: 0 0 auto;
        overflow-y: visible;
        min-height: 0;
        scrollbar-gutter: auto;
    }

    .board-card[b-au47nvfi2a]  .chessboard-container {
        max-width: 26.25rem;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .review-header[b-au47nvfi2a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        /* The header stacks, but its rows were still unbreakable: a long opponent name
           ("Self-Review vs esteghlali2153") pushed .header-left past the viewport and
           sliced the result badge to "Lo" on a phone (owner screenshot, #6672). */
        max-width: 100%;
    }

    .header-left[b-au47nvfi2a] {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }

    .header-left > *[b-au47nvfi2a] {
        min-width: 0;
    }

    .review-content[b-au47nvfi2a] {
        /* minmax(0, ...) NOT bare 1fr: a bare `1fr` is minmax(AUTO, 1fr), and the
           auto minimum refuses to shrink below the widest child's min-content
           width - so on a phone the single column is forced wider than the
           viewport and the board, sized 100%% of it, renders past the right edge
           with the h-file cut off (customer-reported on Android, #6672). The
           desktop rule above already used minmax(0, ...) for exactly this reason;
           these overrides were dropping the protection. */
        grid-template-columns: minmax(0, 1fr);
    }

    .nav-btn[b-au47nvfi2a] {
        width: 44px;
        height: 44px;
    }

    /* The two capture components follow the nav buttons up to a phone target -
       they are the same object in this row now, so they are the same size. */
    .control-group-actions[b-au47nvfi2a]  .add-to-sparring-btn,
    .control-group-actions[b-au47nvfi2a]  .add-to-flashcards-btn {
        width: 44px;
        height: 44px;
    }

    /* #7688 - the row must not end up TIGHTER here than on desktop.

       `gap: 0.25rem` was this page's copy of the trap #7178 named on Game
       Review: the targets go UP to 44px for a phone and the row paid for it by
       squeezing every gap, so the SMALLEST screen got the MOST crowded row and
       the groups were hardest to tell apart exactly where that matters most.
       The row wraps to two lines at 390 either way; what it gets back is a
       group separation LARGER than the desktop's 0.85rem, not smaller. */
    .board-controls[b-au47nvfi2a] {
        gap: 0.375rem 1rem;
    }

    .control-group-transport[b-au47nvfi2a] {
        gap: 0.125rem;
        padding: 0.125rem 0.2rem;
    }

    .control-group-actions[b-au47nvfi2a] {
        padding-left: 0.7rem;
    }

    .glyph-row[b-au47nvfi2a] {
        flex-wrap: wrap;
    }

    .glyph-btn[b-au47nvfi2a] {
        min-width: 42px;
    }
}

/* MoveHabit picker CSS moved to Components/Shared/MoveHabitPicker.razor.css */

/* Self-review results — #6347: .review-results-overlay and the
   .review-results-card chrome are gone. The shared <Modal> (Size=Medium) owns
   the backdrop, the dialog card and the scroll cap (max-height: 85vh with the
   scroll on .modal-body), which is what the hand-rolled
   `max-height: calc(100vh - 2rem); overflow-y: auto` was doing here. Only the
   centered text alignment stays with the content. */
.review-results-content[b-au47nvfi2a] {
    text-align: center;
}

.results-header h2[b-au47nvfi2a] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
}

.results-accuracy[b-au47nvfi2a] {
    margin-bottom: 1.5rem;
}

/* Two-axis score panel — detection on the left, severity calibration on
 * the right. Side-by-side at desktop, stacked under 540px. */
.results-scores[b-au47nvfi2a] {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.score-block[b-au47nvfi2a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: min(10rem, 100%);
}

.accuracy-ring[b-au47nvfi2a] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(16, 185, 129, 0.15));
    border: 3px solid var(--ascend-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.accuracy-ring.secondary[b-au47nvfi2a] {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.15), rgba(49, 221, 227, 0.1));
    border-color: var(--ascend-secondary);
}

.accuracy-ring.secondary .accuracy-value[b-au47nvfi2a] {
    color: var(--ascend-secondary);
}

.accuracy-value[b-au47nvfi2a] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    color: var(--ascend-accent);
}

.accuracy-label[b-au47nvfi2a] {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-family: var(--ascend-font-primary);
    font-weight: 600;
}

.accuracy-sublabel[b-au47nvfi2a] {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    font-style: italic;
    margin-top: 0.15rem;
}

/* Severity breakdown — three rows: Exact / Adjacent / Far. Surfaces below
 * the calibration ring so the user sees how the score decomposed. */
.severity-breakdown[b-au47nvfi2a] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    background: rgba(184, 133, 54, 0.05);
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 12px;
}

.severity-row[b-au47nvfi2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.severity-label[b-au47nvfi2a] {
    color: rgba(255, 255, 255, 0.7);
}

.severity-label.exact[b-au47nvfi2a] { color: #10b981; }
.severity-label.adjacent[b-au47nvfi2a] { color: var(--ascend-secondary); }
.severity-label.far[b-au47nvfi2a] { color: rgba(239, 68, 68, 0.8); }

.severity-count[b-au47nvfi2a] {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

/* Grading-criteria callout. #7179 moved it inside the collapsible review guide
 * as the FIRST block in .rg-body, which is block layout - so its own
 * margin-bottom came off and .coaching-framing's 1.5rem margin-bottom (its own
 * scoped rule) provides the separation below it. It is one labeled click away
 * on every review. What is measured stays stated; it just stopped outranking
 * the move list it explains. */
.grading-criteria[b-au47nvfi2a] {
    padding: 0.85rem 1rem;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
}

.grading-criteria .grading-title[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.grading-list[b-au47nvfi2a] {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
    line-height: 1.5;
}

.grading-list li + li[b-au47nvfi2a] {
    margin-top: 0.35rem;
}

.grading-list strong[b-au47nvfi2a] {
    color: rgba(255, 255, 255, 0.95);
}

.results-stats[b-au47nvfi2a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.results-habits[b-au47nvfi2a] {
    margin-bottom: 1.5rem;
    text-align: left;
}

.results-habits h3[b-au47nvfi2a] {
    font-family: var(--ascend-font-primary);
    color: #B88536;
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

.habit-breakdown[b-au47nvfi2a] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.habit-breakdown-row[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(184, 133, 54, 0.06);
    border: 1px solid rgba(184, 133, 54, 0.15);
    border-radius: 8px;
    font-size: 0.85rem;
}

.habit-breakdown-emoji[b-au47nvfi2a] {
    flex-shrink: 0;
}

.habit-breakdown-name[b-au47nvfi2a] {
    flex: 1;
    color: rgba(255, 255, 255, 0.9);
}

.habit-breakdown-count[b-au47nvfi2a] {
    color: #B88536;
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
}

.results-actions[b-au47nvfi2a] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* #5446 (AC#6) — coach prompt when the player left their prep at a tabiya. */
.tabiya-deviation-note[b-au47nvfi2a] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.35);
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

.tabiya-deviation-note > i[b-au47nvfi2a] {
    color: #B88536;
    font-size: 1rem;
    line-height: 1.2;
    flex-shrink: 0;
}

/* Copy-FEN affordance (ADO #1085) — reuses .nav-btn chrome; the feedback
   toast mirrors the StudyBoard "FEN copied" pattern. */
.copy-fen-feedback[b-au47nvfi2a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    color: #10b981;
    letter-spacing: 0.04em;
    animation: copyFenFade-b-au47nvfi2a 0.2s ease;
}

@keyframes copyFenFade-b-au47nvfi2a {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* #1226 — compact toolbar controls in the header (replaces the two full-width
   .coached-review-callout / .predict-mode-bar banners). The coached-review entry
   (#6206) and the predict toggle (#6401) sit on the right of the header row; their
   former descriptions are now tooltips, so the review body starts higher. */
.header-right[b-au47nvfi2a] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.toolbar-cta[b-au47nvfi2a] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 50px;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.4);
    color: var(--ascend-secondary-light);
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.toolbar-cta:hover[b-au47nvfi2a] {
    background: rgba(184, 133, 54, 0.18);
    border-color: var(--ascend-secondary);
    color: #fff;
}

/* ── #6401 — predict-before-reveal toggle (compact, in the toolbar) ─────── */
.header-right .pm-toggle[b-au47nvfi2a] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-right .pm-toggle:hover[b-au47nvfi2a] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
}

.header-right .pm-track[b-au47nvfi2a] {
    display: inline-flex;
    align-items: center;
    width: 36px;
    height: 18px;
    padding: 2px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.2s ease;
}

.header-right .pm-thumb[b-au47nvfi2a] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    transition: transform 0.2s ease, background 0.2s ease;
}

.header-right .pm-toggle.on[b-au47nvfi2a] {
    color: var(--ascend-accent);
    border-color: rgba(49, 221, 227, 0.5);
}

.header-right .pm-toggle.on .pm-track[b-au47nvfi2a] {
    background: rgba(49, 221, 227, 0.35);
}

.header-right .pm-toggle.on .pm-thumb[b-au47nvfi2a] {
    transform: translateX(18px);
    background: var(--ascend-accent);
}

.predict-mode-panel[b-au47nvfi2a] {
    margin-bottom: 1.5rem;
}

.predict-mode-notice[b-au47nvfi2a] {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
}

.predict-outcome-note[b-au47nvfi2a] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.2);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

.predict-outcome-note i[b-au47nvfi2a] {
    flex-shrink: 0;
    color: var(--ascend-accent);
    font-size: 1rem;
}

@media (max-width: 768px) {
    .predict-mode-bar[b-au47nvfi2a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .predict-mode-bar .pm-toggle[b-au47nvfi2a] {
        align-self: stretch;
        justify-content: center;
    }
}

/* ==========================================================================
   #7796 - THE TOUCH FLOOR FOR SELF-REVIEW.

   Same gap as Game Analysis: /games/{id}/review is parameterized, so #7736's
   ratchet never walked it. Measured on dev as demo@ with a coarse pointer it
   carried 11 controls under 44x44 at 390px and at 344px; the three that are
   not fixed here are the shared footer's inline text links, which #7736
   measured and accepted under WCAG 2.5.8's in-a-block-of-text exemption.

   Inside the pointer query so desktop density is unchanged - verified at 1440
   before and after. Boxes are grown rather than padded out with an absolutely
   positioned pseudo-element: .toolbar-cta and .pm-toggle sit next to each
   other in .header-right, and the tab strip's buttons are adjacent, so an
   invisible hit area would overlap a neighbor and take its taps (#7783). */
@media (hover: none) and (pointer: coarse) {
    /* Icon-only - the width floor is not optional. */
    .back-button[b-au47nvfi2a] {
        width: var(--touch-target);
        height: var(--touch-target);
    }

    .tab-btn[b-au47nvfi2a],
    .rg-summary[b-au47nvfi2a],
    .compare-btn[b-au47nvfi2a],
    .toolbar-cta[b-au47nvfi2a],
    .header-right .pm-toggle[b-au47nvfi2a] {
        min-height: var(--touch-target);
    }

    /* #8323 - "Skip to engine analysis" is the shared Button, which already
       floors .btn-sm on a coarse pointer. It is named here as well because it
       renders only with phone-today on (Disabled by default) and /review is a
       parameterized route the live touch-target ratchet never walks;
       ConditionalSurfaceTouchTargetTests pins this line. */
    .header-right[b-au47nvfi2a]  .skip-to-analysis-btn {
        min-height: var(--touch-target);
    }
}

/* #8017 — "nothing marked yet": the dialog an untouched self-review gets
   instead of a 0% grade. Plain prose and two doors, no score ring, no stat
   row, no reflection block — nothing was measured, so nothing is claimed. */
.results-nothing-scored[b-au47nvfi2a] {
    padding: 0 0 1rem;
}

.results-nothing-scored p[b-au47nvfi2a] {
    margin: 0 0 0.75rem;
    color: var(--ascend-text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}

.results-nothing-scored p:last-child[b-au47nvfi2a] {
    margin-bottom: 0;
}

/* The glyphs (?!, ? and ??) stand out from the secondary prose in the white text
   token, like the dialog's own heading. Not --ascend-text-primary: that is the
   dark #0f172a paired with the light body surface, and on this dark dialog it
   measured 1.24:1 (#7291's inherited-contrast ratchet; wave 3 integration). */
.results-nothing-scored strong[b-au47nvfi2a] {
    color: var(--ascend-text-light);
}

.results-nothing-scored-actions[b-au47nvfi2a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* #8844 review round 1 - where the header stacks (768px and below), its right-hand row
   wrapped its three controls onto three lines at three widths: "Coach me through this"
   186px over the Predict switch 165px over "Skip to engine analysis" 222px at 344. The
   row now spans the header and each control grows to fill its line, so every line is the
   row's width (the game analysis header's shape). Not .action-row: the row holds a
   switch, not only actions. Above 768px it stays the compact right-hand toolbar.
   ::deep because "Skip to engine analysis" is rendered by the Button component. */
@media (max-width: 768px) {
    .header-right[b-au47nvfi2a] {
        width: 100%;
    }

    .header-right > *[b-au47nvfi2a],
    .header-right[b-au47nvfi2a]  .ascend-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}
/* /Components/Pages/SimplifyTheWinDrill.razor.rz.scp.css */
.conversion-page[b-cqszwor5wd] {
    padding-bottom: 2rem;
}

.drill-intro[b-cqszwor5wd] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
}

.intro-description[b-cqszwor5wd] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.intro-description em[b-cqszwor5wd] {
    color: #31DDE3;
    font-style: italic;
}

.position-source[b-cqszwor5wd] {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    font-size: 0.85rem;
    margin: 0.5rem 0 1rem 0;
}

/* #9060 chunk 2 - the question, the move preview and Lock ride the idle verdict dock's Actions
   half, a plain column with its own 0.75rem gap, so they carry no vertical margins of their
   own. tabindex="-1" makes the question a focus target (a keyboard Next or Change lands here). */
.prompt[b-cqszwor5wd] {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin: 0;
}

.eval-chip[b-cqszwor5wd] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
}

.eval-chip .shell-chip-value[b-cqszwor5wd] {
    color: #10b981;
}

.move-preview[b-cqszwor5wd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.move-label[b-cqszwor5wd] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
}

.move-value[b-cqszwor5wd] {
    font-family: 'condor', monospace;
    font-size: 1.2rem;
    color: #31DDE3;
    font-weight: 600;
}

.move-clear[b-cqszwor5wd] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.move-clear:hover[b-cqszwor5wd] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.45);
}

/* #9060 chunk 2 - the reveal rides the verdict dock's Verdict half: the phone's width at the
   bottom of the screen, 20rem beside the board above 1100px. The dock is the panel now, so the
   reveal drops its own box and stays compact (TenSecondsDrill's shape): what does not fit
   scrolls inside the dock while Next stays pinned.

   Review round 1 - one flex column (the reveal row, the why, the annotation), so the phone rule
   at the end can put the why first with `order`; its children carry no margins of their own. */
.reveal-stack[b-cqszwor5wd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reveal-row[b-cqszwor5wd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: start;
}

.reveal-col[b-cqszwor5wd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    text-align: center;
}

/* Review round 1 - one line wherever the reveal shows, and it only ever shows in the dock: a
   two-line "CANONICAL BEST" (the 20rem desktop dock, and 344px phones) knocked its value out of
   line with the other two. */
.reveal-label[b-cqszwor5wd] {
    font-size: 0.6rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.5);
}

.reveal-value[b-cqszwor5wd] {
    font-family: 'condor', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
}

.reveal-score .reveal-value[b-cqszwor5wd] {
    font-size: 1.15rem;
}

.score-strong[b-cqszwor5wd] {
    color: #10b981;
}

.score-modest[b-cqszwor5wd] {
    color: #B88536;
}

.score-weak[b-cqszwor5wd] {
    color: #ef4444;
}

.reveal-meta[b-cqszwor5wd] {
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.reveal-drift[b-cqszwor5wd] {
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    text-align: center;
}

.reveal-drift-label[b-cqszwor5wd] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ef4444;
    margin-bottom: 0.25rem;
}

.reveal-drift-value[b-cqszwor5wd] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
}

/* #9315 - a note, not a caution: "What the line achieves" explains the verified line on every
   outcome, and "Where the line ends" sits beside an Acceptable verdict whose move counted. Red is
   kept for the left-line and if-you-don't-simplify blocks only. */
.reveal-note[b-cqszwor5wd] {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    text-align: center;
}

.reveal-note-label[b-cqszwor5wd] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.25rem;
}

/* The modest band, the same gold the Acceptable verdict and its score tile wear. */
.reveal-note-accepted[b-cqszwor5wd] {
    background: rgba(184, 133, 54, 0.08);
    border-color: rgba(184, 133, 54, 0.35);
}

.reveal-note-accepted .reveal-note-label[b-cqszwor5wd] {
    color: var(--ascend-secondary-light);
}

.reveal-annotation[b-cqszwor5wd] {
    font-style: italic;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

.submit-btn[b-cqszwor5wd] {
    margin-top: 0;
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 50px;
    padding: 0.875rem 1.25rem;
    font-family: 'condor', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.submit-btn:hover[b-cqszwor5wd] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
}

/* ── #6738 line mode — play the verified trade-down, not one move ── */
.line-hint[b-cqszwor5wd] {
    margin: 0;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.line-so-far[b-cqszwor5wd] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.line-so-far-label[b-cqszwor5wd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.line-so-far-moves[b-cqszwor5wd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ascend-accent);
    overflow-wrap: anywhere;
}

.reveal-line[b-cqszwor5wd] {
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--ascend-secondary);
    border-radius: 4px;
}

.reveal-line-label[b-cqszwor5wd] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* #9315 walk - 0.4 measured 3.75:1 on the dock (axe color-contrast); 0.6 clears 4.5:1. */
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
}

.reveal-line-moves[b-cqszwor5wd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

/* #9060 chunk 2 - Change is an answer control: the shared touch target on a touch screen
   (Lock and Next are already 49px). */
@media (hover: none) and (pointer: coarse) {
    .move-clear[b-cqszwor5wd] {
        min-height: var(--touch-target);
    }
}

/* #9060 chunk 2 - a phone's dock is about 240px tall. Tighter values keep the reveal row
   compact (the labels are one line at every width, above).

   Review round 1 - and the WHY comes first: with the verdict and the reveal row on top, the
   threat / drift prose sat under the dock's fold and the annotation in flow behind the fixed
   dock, so a phone showed the score but not the reason. The why now follows the verdict, then
   the annotation, and the reveal row goes last (the chip at the board already names the best
   move); the reading half scrolls, with its bottom-edge cue, for whatever does not fit. Visual
   order only; the DOM keeps the desktop order. */
@media (max-width: 480px) {
    .reveal-stack > .reveal-row[b-cqszwor5wd] {
        order: 1;
    }

    .reveal-col[b-cqszwor5wd] {
        gap: 0.1rem;
    }

    .reveal-value[b-cqszwor5wd] {
        font-size: 0.9rem;
        line-height: 1.15;
    }

    .reveal-score .reveal-value[b-cqszwor5wd] {
        font-size: 0.95rem;
    }
}
/* /Components/Pages/Sme/BulkTabiyaProposalIntake.razor.rz.scp.css */
.bulk-intake[b-uh7rbll07t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.bulk-intake h3[b-uh7rbll07t] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    color: var(--ascend-text-light);
}

.bulk-hint[b-uh7rbll07t] {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.bulk-hint code[b-uh7rbll07t] {
    color: var(--ascend-text-light);
}

.bulk-label[b-uh7rbll07t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}

.bulk-text[b-uh7rbll07t] {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.625rem 0.875rem;
    font-family: var(--ascend-font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
    resize: vertical;
}

/* #8086 - bulk mode's own rationale box: prose, so not the monospace list box. */
.bulk-rationale[b-uh7rbll07t] {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.625rem 0.875rem;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    resize: vertical;
}

.bulk-rationale:focus-visible[b-uh7rbll07t],
.bulk-text:focus-visible[b-uh7rbll07t] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.bulk-actions[b-uh7rbll07t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

/* #8086 - the error summary sits beside Submit (report D: it was about 2,300 px above it). */
.submit-beside[b-uh7rbll07t] {
    flex: 1 1 14rem;
    min-width: 0;
}

.submit-beside-error[b-uh7rbll07t] {
    margin: 0;
    font-size: 0.875rem;
    /* The light step, as .bulk-chip.bad (#7905): the plain error color is below AA on this ground. */
    color: var(--ascend-error-light);
}

.bulk-ticket-link[b-uh7rbll07t] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* #8087 review round 1 - the Draft mode's links to the drafting lists are 44px touch targets. */
@media (pointer: coarse) {
    .draft-nav-link[b-uh7rbll07t] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

.bulk-status[b-uh7rbll07t] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.bulk-summary[b-uh7rbll07t] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ascend-text-light);
}

.bulk-grid-wrap[b-uh7rbll07t] {
    overflow-x: auto;
}

.bulk-grid-wrap[b-uh7rbll07t]  .bulk-grid {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.bulk-grid-wrap[b-uh7rbll07t]  .bulk-grid th,
.bulk-grid-wrap[b-uh7rbll07t]  .bulk-grid td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bulk-grid-wrap[b-uh7rbll07t]  .bulk-grid th {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    white-space: nowrap;
}

.bulk-grid-wrap[b-uh7rbll07t]  .col-line {
    width: 3.5rem;
    white-space: nowrap;
}

.bulk-grid-wrap[b-uh7rbll07t]  .col-result {
    white-space: nowrap;
}

.bulk-chip[b-uh7rbll07t] {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.bulk-chip.ok[b-uh7rbll07t] {
    background: color-mix(in srgb, var(--ascend-accent) 18%, transparent);
    color: var(--ascend-accent);
}

.bulk-chip.bad[b-uh7rbll07t] {
    background: color-mix(in srgb, var(--ascend-error) 18%, transparent);
    /* #7905 - was var(--ascend-error): 3.98:1 on its own 18% tint, below AA.
       The light step clears it at 5.42:1. */
    color: var(--ascend-error-light);
}

.bulk-notes[b-uh7rbll07t] {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
}

@media (max-width: 480px) {
    .bulk-intake[b-uh7rbll07t] {
        padding: var(--space-sm);
    }

    .bulk-actions[b-uh7rbll07t]  button {
        flex: 1 1 100%;
    }
}

/* #8089 SME-MOBILE - live, on a phone the one-per-line list wraps INSIDE its box. Unwrapped
   (white-space: pre), each "Name - FEN - moves" line ran 945px in a 242px box at 344, so a line
   was read by panning the box sideways. Wrapping changes only the drawing: the text, its line
   breaks and the per-line report's line numbers are the same. Dark there is no
   .bulk-text-wraps, so the box is today's. */
/* #8089 SME-MOBILE - the live check report: one card per checked line on a phone. As a table
   (min-width 32rem) it held 700px of columns in a 290px sideways scroller at 390, so Result and
   Detail were off screen while the page measured clean (the #8054 class). The #8054 pattern: one
   render, the header row goes, each cell carries its own .cell-label, and the line number rides on
   the name's label instead of a column of its own. Only the live branch carries .bulk-cards. */
.cell-label[b-uh7rbll07t] {
    display: none;
}

@media (max-width: 768px) {
    .bulk-text.bulk-text-wraps[b-uh7rbll07t] {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        overflow-x: hidden;
    }

    .bulk-grid-wrap.bulk-cards[b-uh7rbll07t] {
        overflow-x: visible;
    }

    .bulk-grid-wrap.bulk-cards[b-uh7rbll07t]  .bulk-grid {
        display: block;
        min-width: 0;
    }

    .bulk-grid-wrap.bulk-cards[b-uh7rbll07t]  thead {
        display: none;
    }

    .bulk-grid-wrap.bulk-cards[b-uh7rbll07t]  tbody {
        display: block;
    }

    /* Bug #8490 - data rows only (RowClass = bulk-row), never QuickGrid's pagination
       filler rows: a bare `tbody tr` here out-ranks the global filler-row hide in
       SharedPages.css the moment this grid pages (QuickGridBlankRowRatchetTests). */
    .bulk-grid-wrap.bulk-cards[b-uh7rbll07t]  tbody tr.bulk-row {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid rgba(49, 221, 227, 0.2);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
    }

    .bulk-grid-wrap.bulk-cards[b-uh7rbll07t]  tbody td {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 0;
        border-bottom: none;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .bulk-grid-wrap.bulk-cards[b-uh7rbll07t]  td.col-line {
        display: none;
    }

    .bulk-grid-wrap.bulk-cards .cell-label[b-uh7rbll07t] {
        display: block;
        margin-bottom: 0.15rem;
        color: var(--ascend-accent);
        font-family: var(--ascend-font-secondary);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}
/* /Components/Pages/Sme/ContentFieldEditor.razor.rz.scp.css */
.content-field-editor[b-iipv8wxcxh] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.field-row[b-iipv8wxcxh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.content-field-editor label[b-iipv8wxcxh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 0.5rem;
}

.content-field-editor .field-input[b-iipv8wxcxh] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
    resize: vertical;
}

.content-field-editor .field-input:focus[b-iipv8wxcxh] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.content-field-editor .field-input.field-mono[b-iipv8wxcxh] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.82rem;
}

/* ------------------------------------------------ #6640 board editors */

.field-board-editor[b-iipv8wxcxh] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.35rem 0;
}

.board-cell[b-iipv8wxcxh] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 16rem;
    max-width: 22rem;
    min-width: 0;
}

.board-cell-label[b-iipv8wxcxh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}

.fen-line-nav[b-iipv8wxcxh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.fen-nav-button[b-iipv8wxcxh] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fen-nav-button:hover:not(:disabled)[b-iipv8wxcxh] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.1);
}

.fen-nav-button:disabled[b-iipv8wxcxh] {
    opacity: 0.4;
    cursor: default;
}

/* -------------------------------------- #7088 position rows + vocabulary */

.fen-line-actions[b-iipv8wxcxh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.2rem 0 0.35rem;
}

.field-position-error[b-iipv8wxcxh] {
    margin: 0.35rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.76rem;
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
}

.content-field-editor .field-input.field-choice[b-iipv8wxcxh] {
    appearance: none;
    cursor: pointer;
    padding-right: 2rem;
}

.field-choice-new[b-iipv8wxcxh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.field-choice-hint[b-iipv8wxcxh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------ #6640 diff rendering */

/* Unchanged: compact and muted - present but out of the way. */
/* Dim the text chrome only - an unchanged POSITION still renders its board
   at full strength (it is the ruling context, not a diff detail). */
.field-row.diff-unchanged label[b-iipv8wxcxh],
.field-row.diff-unchanged .field-input[b-iipv8wxcxh] {
    opacity: 0.55;
}

.field-row.diff-unchanged label[b-iipv8wxcxh] {
    margin-top: 0.2rem;
    font-size: 0.72rem;
}

.field-row.diff-unchanged .field-input[b-iipv8wxcxh] {
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    max-height: 3.6rem;
}

/* Changed: highlighted old -> new. */
.field-row.diff-changed[b-iipv8wxcxh] {
    border-left: 3px solid var(--ascend-secondary);
    border-radius: 4px;
    padding-left: 0.65rem;
    background: rgba(184, 133, 54, 0.06);
}

.field-row.diff-changed .field-input[b-iipv8wxcxh] {
    border-color: rgba(184, 133, 54, 0.45);
}

.diff-tag[b-iipv8wxcxh] {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 0.05rem 0.4rem;
}

.diff-tag.proposed-tag[b-iipv8wxcxh] {
    color: var(--ascend-secondary-light);
    border-color: rgba(184, 133, 54, 0.5);
}

.field-old[b-iipv8wxcxh] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.field-old-text[b-iipv8wxcxh] {
    margin: 0;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* #7110 - the baseline board's side to move, stated by this editor next to the
   "Current position" label. .board-cell is a flex column, so the pill opts out
   of the default stretch. ::deep - .drill-side-pill is the child component's
   markup. */
.board-cell[b-iipv8wxcxh]  .drill-side-pill {
    align-self: flex-start;
    font-size: 0.76rem;
    padding: 0.22rem 0.65rem;
}

/* ------------------------------------------- #8086 SME-PROPOSE plain lists */

/* A plain list's name: it labels a group of boxes, not one box, so it is a span with the
   label's look. */
.content-field-editor .field-label[b-iipv8wxcxh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 0.5rem;
}

.plain-list[b-iipv8wxcxh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* One entry: its boxes side by side where there is room, stacked on a phone. */
.plain-list-row[b-iipv8wxcxh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    align-items: end;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.02);
}

.plain-list-cell[b-iipv8wxcxh] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.content-field-editor .plain-list-cell label[b-iipv8wxcxh] {
    margin-top: 0;
}

.plain-list-remove[b-iipv8wxcxh],
.plain-list-add[b-iipv8wxcxh] {
    justify-self: start;
    align-self: flex-start;
}

.plain-list-empty[b-iipv8wxcxh] {
    margin: 0;
    font-style: normal;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.plain-list-notice[b-iipv8wxcxh] {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Pages/Sme/CustomTaskConsole.razor.rz.scp.css */
/* PBI #6698 - admin custom-task console. Tokens only - never raw brand hex. */

.custom-task-console[b-kjsej1hrb7] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.console-heading[b-kjsej1hrb7] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-secondary-light);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.console-hint[b-kjsej1hrb7] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    margin: 0;
}

.console-error[b-kjsej1hrb7] {
    color: #ef4444;
    font-size: 0.9rem;
    margin: 0;
}

.author-form[b-kjsej1hrb7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.03);
}

.author-form label[b-kjsej1hrb7],
.assignee-set legend[b-kjsej1hrb7] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.console-input[b-kjsej1hrb7] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.85rem;
    font-family: var(--ascend-font-secondary);
    width: 100%;
}

.console-input:focus[b-kjsej1hrb7] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.form-row[b-kjsej1hrb7] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-cell[b-kjsej1hrb7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 12rem;
}

.estimate-price[b-kjsej1hrb7] {
    color: var(--ascend-secondary-light);
    font-size: 0.85rem;
}

.assignee-set[b-kjsej1hrb7] {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.assignee-option[b-kjsej1hrb7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.console-actions[b-kjsej1hrb7] {
    display: flex;
    gap: 0.6rem;
}

.task-table-wrap[b-kjsej1hrb7] {
    overflow-x: auto;
}

.task-table[b-kjsej1hrb7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.task-table th[b-kjsej1hrb7] {
    text-align: left;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.task-table td[b-kjsej1hrb7] {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    vertical-align: top;
}

.task-row-line[b-kjsej1hrb7] {
    cursor: pointer;
}

.task-row-line:hover[b-kjsej1hrb7],
.task-row-line.open[b-kjsej1hrb7] {
    background: rgba(49, 221, 227, 0.06);
}

.cell-title[b-kjsej1hrb7] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.status-chip[b-kjsej1hrb7] {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 0.1rem 0.6rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.status-chip.status-assigned[b-kjsej1hrb7],
.status-chip.status-inprogress[b-kjsej1hrb7] {
    border-color: rgba(49, 221, 227, 0.5);
    color: var(--ascend-accent-light);
}

.status-chip.status-submitted[b-kjsej1hrb7],
.status-chip.status-returned[b-kjsej1hrb7] {
    border-color: rgba(184, 133, 54, 0.6);
    color: var(--ascend-secondary-light);
}

.status-chip.status-accepted[b-kjsej1hrb7] {
    border-color: rgba(16, 185, 129, 0.6);
    color: #10b981;
}

.console-detail[b-kjsej1hrb7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.4rem 0.2rem 0.6rem;
}

.detail-heading[b-kjsej1hrb7] {
    font-family: var(--ascend-font-primary);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin: 0;
}

.detail-text[b-kjsej1hrb7] {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.detail-note[b-kjsej1hrb7] {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.review-actions[b-kjsej1hrb7] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.return-lane[b-kjsej1hrb7] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 16rem;
}

.return-input[b-kjsej1hrb7] {
    flex: 1;
    min-width: 12rem;
}

@media (max-width: 640px) {
    .form-cell[b-kjsej1hrb7] {
        min-width: 100%;
    }
}
/* /Components/Pages/Sme/CustomTaskSection.razor.rz.scp.css */
/* PBI #6698 - "My assigned tasks" workbench section. Deliberately distinct
   from the content-ticket surface: gold-accented directed work, no board, no
   verdict buttons. Tokens only - never raw hex. */

.custom-task-section[b-tpdzieh2kx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-section-heading[b-tpdzieh2kx] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-secondary-light);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.task-section-hint[b-tpdzieh2kx] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    margin: 0;
}

.task-error[b-tpdzieh2kx] {
    color: #ef4444;
    font-size: 0.9rem;
    margin: 0;
}

.task-list[b-tpdzieh2kx] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-item[b-tpdzieh2kx] {
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.task-item.open[b-tpdzieh2kx] {
    border-color: rgba(184, 133, 54, 0.7);
    background: rgba(255, 255, 255, 0.05);
}

.task-row[b-tpdzieh2kx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    text-align: left;
    font-family: var(--ascend-font-secondary);
}

.task-title[b-tpdzieh2kx] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.task-chips[b-tpdzieh2kx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.task-chip[b-tpdzieh2kx] {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 0.1rem 0.6rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.task-chip.due[b-tpdzieh2kx] {
    border-color: rgba(184, 133, 54, 0.6);
    color: var(--ascend-secondary-light);
}

.task-chip.status-inprogress[b-tpdzieh2kx],
.task-chip.status-assigned[b-tpdzieh2kx] {
    border-color: rgba(49, 221, 227, 0.5);
    color: var(--ascend-accent-light);
}

.task-chip.status-submitted[b-tpdzieh2kx] {
    border-color: rgba(184, 133, 54, 0.6);
    color: var(--ascend-secondary-light);
}

.task-detail[b-tpdzieh2kx] {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.admin-return-banner[b-tpdzieh2kx] {
    border: 1px solid rgba(184, 133, 54, 0.6);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    background: rgba(184, 133, 54, 0.08);
}

.banner-label[b-tpdzieh2kx] {
    display: block;
    font-size: 0.8rem;
    color: var(--ascend-secondary-light);
    margin-bottom: 0.25rem;
}

.banner-reason[b-tpdzieh2kx] {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    white-space: pre-wrap;
}

.detail-heading[b-tpdzieh2kx] {
    font-family: var(--ascend-font-primary);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin: 0;
}

.task-instructions[b-tpdzieh2kx] {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.response-form[b-tpdzieh2kx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.response-form label[b-tpdzieh2kx] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.response-input[b-tpdzieh2kx],
.note-input[b-tpdzieh2kx],
.hours-input[b-tpdzieh2kx] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.85rem;
    font-family: var(--ascend-font-secondary);
    width: 100%;
}

.hours-input[b-tpdzieh2kx] {
    max-width: 10rem;
}

.response-input:focus[b-tpdzieh2kx],
.note-input:focus[b-tpdzieh2kx],
.hours-input:focus[b-tpdzieh2kx] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.hours-row[b-tpdzieh2kx] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.task-actions[b-tpdzieh2kx] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .task-row[b-tpdzieh2kx] {
        flex-direction: column;
        align-items: flex-start;
    }

    .task-chips[b-tpdzieh2kx] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/Sme/Desk/DeskDraftingSection.razor.rz.scp.css */
/* #8087 SME-DRAFT slice 4 - the desk's drafting card. The section, title, hint and count classes are the desk's
   own (SmeDesk.razor.css reaches them with ::deep); only the ready-list rows and the lists link are styled here. */
.desk-drafting-row[b-xudxsxiua6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.5rem 0;
    min-width: 0;
}

.desk-drafting-row .desk-section-hint[b-xudxsxiua6] {
    overflow-wrap: anywhere;
    min-width: 0;
}

.desk-drafting-link[b-xudxsxiua6] {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (pointer: coarse) {
    .desk-drafting-link[b-xudxsxiua6] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}
/* /Components/Pages/Sme/Desk/SmeDesk.razor.rz.scp.css */
/* #8081 SME-DESK - the desk. Tokens only. Every section is its own child component, so
   their classes are reached with ::deep from .desk-page (the page's own markup); a rule
   on a child's class without it would match nothing (ScopedCssChildComponentClassTests). */

.desk-page[b-vnjt0qds44] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.desk-notice[b-vnjt0qds44] {
    color: var(--ascend-accent-light);
    font-size: 0.9rem;
    margin: 0;
}

/* The page's own error line AND the sections' (Daily email, open work): ::deep, or the
   sections' refusals render in the default color (#8083 review round 1). */
.desk-page[b-vnjt0qds44]  .desk-error {
    color: var(--ascend-error-light);
    font-size: 0.9rem;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Two columns from tablet up: the "your turn" groups on the left, and on the right the
   open corrections (withdraw / amend) FIRST, so they are on the first screen at 1440. */
.desk-columns[b-vnjt0qds44] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (min-width: 900px) {
    .desk-columns[b-vnjt0qds44] {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }
}

.desk-column[b-vnjt0qds44] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ---------------------------------------------------------------- summary */

.desk-page[b-vnjt0qds44]  .desk-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.desk-page[b-vnjt0qds44]  .desk-headline {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.15rem;
    color: var(--ascend-text-light);
}

.desk-page[b-vnjt0qds44]  .desk-headline-count {
    font-size: 1.6rem;
    color: var(--ascend-accent);
}

.desk-page[b-vnjt0qds44]  .desk-breakdown {
    margin: 0;
    color: var(--ascend-text-secondary);
    font-size: 0.9rem;
}

/* #8086 - the two acts (review, propose) sit together at the right of the summary; the
   workbench button keeps its own push to the right through its wrapper. */
.desk-page[b-vnjt0qds44]  .desk-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.desk-page[b-vnjt0qds44]  .desk-workbench-button {
    margin-left: auto;
}

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

/* The chrome (surface, border, radius) is the shared Card's; the section is layout only. */
.desk-page[b-vnjt0qds44]  .desk-section {
    min-width: 0;
}

.desk-page[b-vnjt0qds44]  .desk-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.desk-page[b-vnjt0qds44]  .desk-section-count {
    min-width: 1.6rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-align: center;
    letter-spacing: 0;
}

.desk-page[b-vnjt0qds44]  .desk-section-hint,
.desk-page[b-vnjt0qds44]  .desk-section-empty {
    margin: 0 0 0.6rem;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
}

.desk-page[b-vnjt0qds44]  .desk-section-empty {
    margin: 0;
}

.desk-page[b-vnjt0qds44]  .desk-section-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.6rem 0 0;
}

.desk-page[b-vnjt0qds44]  .desk-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.desk-page[b-vnjt0qds44]  .desk-row {
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    min-width: 0;
}

.desk-page[b-vnjt0qds44]  .desk-row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.desk-page[b-vnjt0qds44]  .desk-kind {
    color: var(--ascend-accent-light);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The claim wraps rather than truncating at 390: the whole point of the row is to say
   which item it is. Long unbroken tokens (FENs, keys) break anywhere. */
.desk-page[b-vnjt0qds44]  .desk-claim {
    color: var(--ascend-text-light);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    min-width: 0;
}

.desk-page[b-vnjt0qds44]  .desk-note {
    margin: 0.35rem 0 0;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.desk-page[b-vnjt0qds44]  .desk-note-label {
    color: var(--ascend-text-light);
    font-weight: 600;
    margin-right: 0.25rem;
}

.desk-page[b-vnjt0qds44]  .desk-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.desk-page[b-vnjt0qds44]  .desk-chip {
    padding: 0.05rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: var(--ascend-text-secondary);
    font-size: 0.75rem;
}

.desk-page[b-vnjt0qds44]  .desk-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.desk-page[b-vnjt0qds44]  .desk-link {
    color: var(--ascend-accent);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    /* A 24px tap target on a phone (WCAG 2.5.8). */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.desk-page[b-vnjt0qds44]  .desk-more {
    margin-top: 0.5rem;
    min-height: 32px;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: transparent;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.desk-page[b-vnjt0qds44]  .desk-batch {
    margin: 0 0 0.6rem;
    color: var(--ascend-text-light);
    font-size: 0.95rem;
}

/* ---------------------------------------------------------- withdraw form */

.desk-page[b-vnjt0qds44]  .desk-reason-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.desk-page[b-vnjt0qds44]  .desk-reason-label {
    color: var(--ascend-text-light);
    font-size: 0.85rem;
}

.desk-page[b-vnjt0qds44]  .desk-reason-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--ascend-text-light);
    font: inherit;
    resize: vertical;
}

/* -------------------------------------------------------------- the phone */

/* Summary-first on a phone: each "your turn" group shows its first row until its own
   "Show all" is pressed, so the open corrections (withdraw / amend) are within one screen
   at 390. DOM order is untouched (the reading order is the visual order, #8286). */
.desk-page[b-vnjt0qds44]  .desk-more-narrow-only {
    display: none;
}

@media (max-width: 600px) {
    .desk-page[b-vnjt0qds44]  .desk-section:not(.is-expanded) .desk-row-extra {
        display: none;
    }

    .desk-page[b-vnjt0qds44]  .desk-more-narrow-only {
        display: inline-flex;
        align-items: center;
    }

    /* A long return reason or hand-off note is two lines here; the full text is on the
       ticket in the workbench. */
    .desk-page[b-vnjt0qds44]  .desk-note {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ------------------------------------------------- messages (#8084 SME-THREAD) */

/* A conversation opened in place, under its row (or under the section, for a new one). */
.desk-page[b-vnjt0qds44]  .desk-thread {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
}

.desk-page[b-vnjt0qds44]  .desk-message-email {
    align-self: center;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
}
/* /Components/Pages/Sme/Desk/SmeDeskBanner.razor.rz.scp.css */
/* #8081 SME-DESK - the dashboard line. A full-width link row above the dashboard grid,
   quiet (a to-do pointer, not an alert), with a 44px tap target on a phone. */

.desk-banner[b-feicw6org3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    margin: 0 0 1rem;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 12px;
    background: var(--ascend-bg-card);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    text-decoration: none;
    box-sizing: border-box;
}

.desk-banner:hover[b-feicw6org3],
.desk-banner:focus-visible[b-feicw6org3] {
    border-color: var(--ascend-accent);
}

.desk-banner-text[b-feicw6org3] {
    flex: 1 1 auto;
    min-width: 0;
}

.desk-banner-text strong[b-feicw6org3] {
    color: var(--ascend-accent);
}

.desk-banner-icon[b-feicw6org3] {
    color: var(--ascend-accent);
    flex: 0 0 auto;
}
/* /Components/Pages/Sme/Desk/SmeDraftList.razor.rz.scp.css */
/* #8087 SME-DRAFT - one drafting list's page. Tokens only. QuickGrid renders its own table, so its
   parts are reached with ::deep from the page's wrapper; on a phone each row is a card (the #8054
   pattern the bulk report uses: the header row goes and each cell carries its own .cell-label). */

.draft-page[b-mr8olpz0ue] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.draft-body[b-mr8olpz0ue] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    min-width: 0;
}

.draft-hint[b-mr8olpz0ue] {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.draft-link[b-mr8olpz0ue] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

/* #8087 review round 1 - on a touch screen every standalone link here is a 44px target (the date
   link is the only way into a list from /sme/drafts; the back links, the propose links and a
   staged line's name are the rest). */
@media (pointer: coarse) {
    .draft-link[b-mr8olpz0ue] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

.draft-grid-wrap[b-mr8olpz0ue] {
    overflow-x: auto;
}

.draft-grid-wrap[b-mr8olpz0ue]  .draft-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.draft-grid-wrap[b-mr8olpz0ue]  .draft-grid th,
.draft-grid-wrap[b-mr8olpz0ue]  .draft-grid td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.draft-grid-wrap[b-mr8olpz0ue]  .draft-grid th {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    white-space: nowrap;
}

.draft-grid-wrap[b-mr8olpz0ue]  .col-count {
    white-space: nowrap;
}

.draft-grid-wrap[b-mr8olpz0ue]  .col-line {
    width: 3.5rem;
    white-space: nowrap;
}

.draft-rationale[b-mr8olpz0ue] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.draft-rationale-label[b-mr8olpz0ue] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-accent);
}

.draft-rationale p[b-mr8olpz0ue] {
    margin: 0;
    color: var(--ascend-text-light);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.draft-notice[b-mr8olpz0ue] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ascend-accent-light);
}

.draft-error[b-mr8olpz0ue] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ascend-error-light);
}

.draft-chip[b-mr8olpz0ue] {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ascend-text-light);
}

.draft-chip.ok[b-mr8olpz0ue] {
    background: color-mix(in srgb, var(--ascend-accent) 18%, transparent);
    color: var(--ascend-accent);
}

.draft-chip.bad[b-mr8olpz0ue] {
    background: color-mix(in srgb, var(--ascend-error) 18%, transparent);
    color: var(--ascend-error-light);
}

.draft-chip.muted[b-mr8olpz0ue] {
    color: rgba(255, 255, 255, 0.7);
}

.draft-actions[b-mr8olpz0ue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.cell-label[b-mr8olpz0ue] {
    display: none;
}

@media (max-width: 768px) {
    .draft-body[b-mr8olpz0ue] {
        padding: var(--space-sm);
    }

    .draft-grid-wrap.draft-cards[b-mr8olpz0ue] {
        overflow-x: visible;
    }

    .draft-grid-wrap.draft-cards[b-mr8olpz0ue]  .draft-grid {
        display: block;
    }

    .draft-grid-wrap.draft-cards[b-mr8olpz0ue]  thead {
        display: none;
    }

    .draft-grid-wrap.draft-cards[b-mr8olpz0ue]  tbody {
        display: block;
    }

    /* Bug #8490 - data rows only (RowClass = draft-row), never QuickGrid's pagination
       filler rows: a bare `tbody tr` here out-ranks the global filler-row hide in
       SharedPages.css the moment this grid pages (QuickGridBlankRowRatchetTests). */
    .draft-grid-wrap.draft-cards[b-mr8olpz0ue]  tbody tr.draft-row {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
    }

    .draft-grid-wrap.draft-cards[b-mr8olpz0ue]  tbody td {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 0;
        border-bottom: none;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .draft-actions[b-mr8olpz0ue]  button {
        flex: 1 1 100%;
    }

    .draft-grid-wrap.draft-cards[b-mr8olpz0ue]  td.col-line {
        display: none;
    }

    .draft-grid-wrap.draft-cards .cell-label[b-mr8olpz0ue] {
        display: block;
        margin-bottom: 0.15rem;
        color: var(--ascend-accent);
        font-family: var(--ascend-font-secondary);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}

/* #8087 slice 2 - the line's own verb ("Send without a draft"), under its status. */
.draft-line-action[b-mr8olpz0ue] {
    display: block;
    margin-top: 0.35rem;
}
/* /Components/Pages/Sme/Desk/SmeDraftLists.razor.rz.scp.css */
/* #8087 SME-DRAFT - the drafting lists page. Tokens only. QuickGrid renders its own table, so its
   parts are reached with ::deep from the page's wrapper; on a phone each row is a card (the #8054
   pattern the bulk report uses: the header row goes and each cell carries its own .cell-label). */

.draft-page[b-klitgw6b6g] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.draft-body[b-klitgw6b6g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    min-width: 0;
}

.draft-hint[b-klitgw6b6g] {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.draft-link[b-klitgw6b6g] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

/* #8087 review round 1 - on a touch screen every standalone link here is a 44px target (the list
   link is the only way into a list from /sme/drafts; the back links, the propose links and a
   staged line's name are the rest). */
@media (pointer: coarse) {
    .draft-link[b-klitgw6b6g] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

.draft-grid-wrap[b-klitgw6b6g] {
    overflow-x: auto;
}

.draft-grid-wrap[b-klitgw6b6g]  .draft-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.draft-grid-wrap[b-klitgw6b6g]  .draft-grid th,
.draft-grid-wrap[b-klitgw6b6g]  .draft-grid td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.draft-grid-wrap[b-klitgw6b6g]  .draft-grid th {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    white-space: nowrap;
}

.draft-grid-wrap[b-klitgw6b6g]  .col-count {
    white-space: nowrap;
}

.cell-label[b-klitgw6b6g] {
    display: none;
}

@media (max-width: 768px) {
    .draft-body[b-klitgw6b6g] {
        padding: var(--space-sm);
    }

    .draft-grid-wrap.draft-cards[b-klitgw6b6g] {
        overflow-x: visible;
    }

    .draft-grid-wrap.draft-cards[b-klitgw6b6g]  .draft-grid {
        display: block;
    }

    .draft-grid-wrap.draft-cards[b-klitgw6b6g]  thead {
        display: none;
    }

    .draft-grid-wrap.draft-cards[b-klitgw6b6g]  tbody {
        display: block;
    }

    /* Bug #8490 - data rows only (RowClass = draft-row), never QuickGrid's pagination
       filler rows: a bare `tbody tr` here out-ranks the global filler-row hide in
       SharedPages.css the moment this grid pages (QuickGridBlankRowRatchetTests). */
    .draft-grid-wrap.draft-cards[b-klitgw6b6g]  tbody tr.draft-row {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
    }

    .draft-grid-wrap.draft-cards[b-klitgw6b6g]  tbody td {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 0;
        border-bottom: none;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .draft-grid-wrap.draft-cards[b-klitgw6b6g]  td.col-line {
        display: none;
    }

    .draft-grid-wrap.draft-cards .cell-label[b-klitgw6b6g] {
        display: block;
        margin-bottom: 0.15rem;
        color: var(--ascend-accent);
        font-family: var(--ascend-font-secondary);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}
/* /Components/Pages/Sme/DirectedTicketsPanel.razor.rz.scp.css */
/* Bug #8077 - the owner's list of directed tickets nobody else can see.
   Tokens only - never raw brand hex. One entry per ticket, stacked, so it
   reads the same at 344px as at 1440px: no table to pan. */

.directed-panel[b-s79ongly57] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.directed-heading[b-s79ongly57] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    color: var(--ascend-secondary-light);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.directed-hint[b-s79ongly57] {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.directed-error[b-s79ongly57] {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.directed-notice[b-s79ongly57] {
    margin: 0;
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.directed-list[b-s79ongly57] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.directed-entry[b-s79ongly57] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(184, 133, 54, 0.4);
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.entry-head[b-s79ongly57] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.entry-title[b-s79ongly57] {
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.entry-kind[b-s79ongly57] {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
}

.entry-meta[b-s79ongly57] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.entry-flag[b-s79ongly57] {
    color: var(--ascend-secondary-light);
    font-weight: 600;
}

.entry-note[b-s79ongly57] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.entry-note-label[b-s79ongly57] {
    color: rgba(255, 255, 255, 0.65);
}

.entry-actions[b-s79ongly57] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.entry-label[b-s79ongly57] {
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.entry-select[b-s79ongly57],
.entry-input[b-s79ongly57] {
    width: 100%;
    max-width: 32rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.6rem 0.85rem;
}

.entry-select option[b-s79ongly57] {
    background: var(--ascend-bg-dark);
    color: var(--ascend-text-light);
}

.entry-select:focus[b-s79ongly57],
.entry-input:focus[b-s79ongly57] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.entry-buttons[b-s79ongly57] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.35rem;
}

/* #8084 SME-THREAD - the owner's conversation with the reviewer who has the ticket. */
.directed-thread[b-s79ongly57] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
}

/* Bug #8644 - the waiting block and the "Assigned and in progress" block, one card. */
.directed-section[b-s79ongly57] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.directed-section + .directed-section[b-s79ongly57] {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Every row links to itself: the title is the link, styled as the title. */
a.entry-title[b-s79ongly57] {
    text-decoration: none;
}

a.entry-title:hover[b-s79ongly57],
a.entry-title:focus-visible[b-s79ongly57] {
    text-decoration: underline;
    color: var(--ascend-accent-light);
}

/* In progress: quieter than a ticket waiting on the owner. */
.directed-entry.in-progress[b-s79ongly57] {
    border-color: rgba(255, 255, 255, 0.12);
    gap: 0.35rem;
    padding: 0.75rem 1rem;
}

/* A linked row the browser scrolled to (the workbench's assign confirmation). */
.directed-entry:target[b-s79ongly57] {
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.15);
}

.entry-status[b-s79ongly57] {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

.entry-status.is-taken[b-s79ongly57] {
    border-color: rgba(184, 133, 54, 0.55);
    color: var(--ascend-secondary-light);
}
/* /Components/Pages/Sme/DuplicateSubjectCheck.razor.rz.scp.css */
/* Bug #7082 - the duplicate-ticket check on the SME hub. Deliberately quiet:
   it is a defect list the owner works through, not an alert. */

/* The spacing lives on a wrapper this component OWNS, not on a class handed to
   the shared Card via CssClass. A class passed to a child lands on the child's
   markup, which never carries this component's scope attribute, so the rule
   would match nothing. ::deep would satisfy the ratchet but not fix it: Card is
   this component's ROOT, so there is no scoped ancestor for ::deep to hang off
   either. A real element in our own markup is the only version that applies. */
.duplicate-subject-check[b-uzufvckcka] {
    margin-bottom: 1.5rem;
}

.duplicate-note[b-uzufvckcka] {
    color: var(--ascend-text-secondary);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.duplicate-groups[b-uzufvckcka] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.duplicate-subject[b-uzufvckcka] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.duplicate-subject-label[b-uzufvckcka] {
    font-family: var(--ascend-font-primary);
    color: var(--ascend-accent);
    font-size: 1rem;
    word-break: break-all;
}

.duplicate-match[b-uzufvckcka] {
    color: var(--ascend-text-secondary);
    font-size: 0.8rem;
}

/* Wide table on a narrow screen scrolls its wrapper rather than the page.
   #8755 - the scroller is the wrapper div, not the table, so the shared
   DragScrollArea around it can find it and pan it with a mouse drag. */
.duplicate-table-wrap[b-uzufvckcka] {
    overflow-x: auto;
}

.duplicate-table[b-uzufvckcka] {
    display: block;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.duplicate-table th[b-uzufvckcka],
.duplicate-table td[b-uzufvckcka] {
    text-align: left;
    padding: 0.375rem 0.75rem 0.375rem 0;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.duplicate-table th[b-uzufvckcka] {
    color: var(--ascend-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

.duplicate-id[b-uzufvckcka] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--ascend-text-secondary);
}

/* Bug #7097 - per-row attributed close. The keeper is marked, the rest carry
   the Close button; the dialog itself is the shared SupersedeTicketDialog. */
.duplicate-action[b-uzufvckcka] {
    text-align: right;
}

.duplicate-keep[b-uzufvckcka] {
    color: var(--ascend-accent);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* /Components/Pages/Sme/FlowUndoBar.razor.rz.scp.css */
/* #8085 SME-FLOW - the one-click undo of the last ruling. The same informational register
   as the four-eyes hint: a fact and a choice, never a warning. Tokens only. */
.flow-undo[b-ats4htc61l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(49, 221, 227, 0.35);
    background: rgba(49, 221, 227, 0.07);
}

.flow-undo-text[b-ats4htc61l] {
    flex: 1 1 14rem;
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}
/* /Components/Pages/Sme/MatePatternReviewPane.razor.rz.scp.css */
/* #7913 - the drill-position browser inside the mate-pattern review pane.
   The shared pane vocabulary (.pane-fen-nav, .pane-fen-button, .pane-text...)
   is styled by the HOST pages through ::deep; only the classes this pane
   introduced for drill positions live here, scoped to the pane itself. */

.pane-set-switch[b-i1vlry60r6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pane-set-button[b-i1vlry60r6] {
    min-height: 2.75rem;
    padding: 0.35rem 1rem;
    border-radius: 50px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--ascend-text-muted);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pane-set-button:hover[b-i1vlry60r6] {
    background: rgba(255, 255, 255, 0.08);
}

.pane-set-button[aria-pressed="true"][b-i1vlry60r6] {
    color: var(--ascend-accent);
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.12);
}

.pane-set-button:focus-visible[b-i1vlry60r6] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.pane-drill[b-i1vlry60r6] {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pane-drill-heading[b-i1vlry60r6] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ascend-text-light);
}

.pane-drill-mate[b-i1vlry60r6] {
    font-weight: 400;
    color: var(--ascend-text-muted);
}

.pane-drill-label[b-i1vlry60r6] {
    margin: 0.25rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ascend-text-muted);
}

.pane-drill-line[b-i1vlry60r6] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.15);
    color: var(--ascend-text-light);
    font-family: monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pane-drill-withheld[b-i1vlry60r6] {
    margin: 0.25rem 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}
/* /Components/Pages/Sme/MoveContentPanel.razor.rz.scp.css */
/* PBI #8048 - the "Move to another catalog" panel on the review surface. Quiet by default (one
   small button beside "Raise another item"); the form opens in place in the ruling column. */
.move-panel[b-jyegx4c2vt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    min-width: 0;
}

.move-form[b-jyegx4c2vt] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.move-heading[b-jyegx4c2vt] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: var(--ascend-text-light);
}

.move-hint[b-jyegx4c2vt] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    overflow-wrap: anywhere;
}

.move-refusal[b-jyegx4c2vt] {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.move-form label[b-jyegx4c2vt] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
    margin-top: 0.35rem;
}

.move-destinations[b-jyegx4c2vt] {
    display: flex;
    flex-direction: column;
    margin: 0.25rem 0;
}

.move-form .move-destination[b-jyegx4c2vt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin-top: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.move-destination input[b-jyegx4c2vt] {
    flex: none;
    accent-color: var(--ascend-accent);
    width: 1.1rem;
    height: 1.1rem;
}

.move-input[b-jyegx4c2vt] {
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.7rem 0.9rem;
    min-height: 2.75rem;
    resize: vertical;
}

.move-input:focus[b-jyegx4c2vt] {
    outline: none;
    border-color: var(--ascend-accent);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.move-actions[b-jyegx4c2vt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.move-continue-link[b-jyegx4c2vt] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border-radius: 12px;
    border: 1px solid var(--ascend-accent);
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    text-decoration: none;
}

.move-continue-link:hover[b-jyegx4c2vt],
.move-continue-link:focus-visible[b-jyegx4c2vt] {
    background: rgba(49, 221, 227, 0.12);
    outline: none;
}

.move-error[b-jyegx4c2vt] {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.move-result[b-jyegx4c2vt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-accent-light);
    overflow-wrap: anywhere;
}

.move-ticket-link[b-jyegx4c2vt] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Defect #8772 - the one-step confirm: what comes over, what to check, what is needed. */
.move-plan[b-jyegx4c2vt] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.move-carried[b-jyegx4c2vt] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

/* Label above value: the ruling column is narrow at every width, and a two-column row left the
   value a sliver beside its label (seen at 1440 on the #8772 walk). */
.move-carried-row[b-jyegx4c2vt] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.move-carried dt[b-jyegx4c2vt] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.move-carried dd[b-jyegx4c2vt] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    white-space: pre-line;
    overflow-wrap: anywhere;
    min-width: 0;
}

.move-field-hint[b-jyegx4c2vt],
.move-field-note[b-jyegx4c2vt] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    overflow-wrap: anywhere;
}

.move-field-note[b-jyegx4c2vt] {
    margin-bottom: 0.25rem;
}

/* A value from the original row that is longer than the destination accepts (#8772 review). */
.move-field-note-over[b-jyegx4c2vt] {
    color: var(--ascend-text-light);
    border-left: 3px solid rgba(184, 133, 54, 0.8);
    padding-left: 0.5rem;
}

.move-mono[b-jyegx4c2vt] {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
}
/* /Components/Pages/Sme/MovedFromBanner.razor.rz.scp.css */
/* PBI #8048 - a moved row's ticket: where the content came from and what was ruled there.
   The cyan "history" register of the prior-ruling banner. */
.moved-from-banner[b-7vhvk46oem] {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
}

.moved-from-label[b-7vhvk46oem] {
    display: block;
    color: var(--ascend-accent-light);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.moved-from-sub[b-7vhvk46oem] {
    color: var(--ascend-accent-light);
    font-size: 0.8rem;
}

.moved-from-text[b-7vhvk46oem] {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
}

.moved-from-rulings[b-7vhvk46oem] {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.moved-from-note[b-7vhvk46oem] {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
}
/* /Components/Pages/Sme/Owner/MessageSmesSection.razor.rz.scp.css */
/* PBI #8646 - "Message your SMEs" on the owner console. Tokens only, in the owner-messages
   section's idiom. The shared Button and the rich text editor are child components (::deep
   where reached). */

.sme-broadcast[b-wmw03999ik] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.sme-broadcast-heading[b-wmw03999ik] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.sme-broadcast-subheading[b-wmw03999ik] {
    margin: 0.5rem 0 0;
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ascend-text-light);
}

.sme-broadcast-hint[b-wmw03999ik] {
    margin: 0;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.sme-broadcast-address[b-wmw03999ik] {
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.sme-broadcast-notice[b-wmw03999ik] {
    margin: 0;
    color: var(--ascend-accent-light);
    font-size: 0.9rem;
}

.sme-broadcast-error[b-wmw03999ik] {
    margin: 0;
    color: var(--ascend-secondary);
    font-size: 0.9rem;
}

.sme-broadcast-form[b-wmw03999ik] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.sme-broadcast-recipients[b-wmw03999ik] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.sme-broadcast-label[b-wmw03999ik] {
    padding: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.sme-broadcast-choice[b-wmw03999ik] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    color: var(--ascend-text-light);
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 0;
}

.sme-broadcast-choice input[b-wmw03999ik] {
    accent-color: var(--ascend-accent);
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    flex: 0 0 auto;
}

.sme-broadcast-roster[b-wmw03999ik],
.sme-broadcast-history[b-wmw03999ik],
.sme-broadcast-copies[b-wmw03999ik] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.sme-broadcast-roster[b-wmw03999ik] {
    padding-left: 1.6rem;
}

.sme-broadcast-name[b-wmw03999ik] {
    color: var(--ascend-text-light);
    font-weight: 600;
}

.sme-broadcast-email[b-wmw03999ik],
.sme-broadcast-detail[b-wmw03999ik] {
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
    min-width: 0;
}

.sme-broadcast-chip[b-wmw03999ik],
.sme-broadcast-outcome[b-wmw03999ik] {
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--ascend-secondary);
    border-radius: 999px;
    color: var(--ascend-secondary);
    font-size: 0.75rem;
}

.sme-broadcast-outcome-sent[b-wmw03999ik] {
    border-color: var(--ascend-accent);
    color: var(--ascend-accent);
}

.sme-broadcast-field[b-wmw03999ik] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.sme-broadcast-input[b-wmw03999ik] {
    width: 100%;
    max-width: 40rem;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    padding: 0.7rem 0.9rem;
}

.sme-broadcast-input:focus[b-wmw03999ik] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.sme-broadcast-input[b-wmw03999ik]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.sme-broadcast-count[b-wmw03999ik] {
    margin: 0;
    color: var(--ascend-text-light);
    font-size: 0.9rem;
    font-weight: 600;
}

.sme-broadcast-actions[b-wmw03999ik] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sme-broadcast-preview[b-wmw03999ik],
.sme-broadcast-details[b-wmw03999ik] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

/* The email is shown in a sandboxed frame (no scripts, no same-origin): the light email theme
   renders as the SME will see it, and nothing in it reaches the page. */
.sme-broadcast-frame[b-wmw03999ik] {
    width: 100%;
    height: 32rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: var(--ascend-bg-light);
}

.sme-broadcast-frame-body[b-wmw03999ik] {
    height: 16rem;
}

.sme-broadcast-row[b-wmw03999ik] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    min-width: 0;
}

.sme-broadcast-row .sme-broadcast-details[b-wmw03999ik] {
    align-self: stretch;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sme-broadcast-subject[b-wmw03999ik] {
    color: var(--ascend-text-light);
    font-size: 0.95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    min-width: 0;
}

.sme-broadcast-meta[b-wmw03999ik] {
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
}

.sme-broadcast-copy[b-wmw03999ik] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.5rem;
    min-width: 0;
}
/* /Components/Pages/Sme/Owner/OwnerLaneBar.razor.rz.scp.css */
/* #8082 OWNER-LANE - the head of the owner's apply lane. Tokens only; the shared Button and
   ConfirmDialog are child components (::deep where reached). No celebration styling: the
   nudge is a plain line, not an alert. */

.owner-lane-bar[b-mtkfd912tq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    min-width: 0;
}

.owner-lane-summary[b-mtkfd912tq] {
    margin: 0;
    color: var(--ascend-text-light);
    font-size: 0.95rem;
    font-weight: 600;
}

.owner-lane-nudge[b-mtkfd912tq] {
    margin: 0;
    padding-left: 0.6rem;
    border-left: 3px solid var(--ascend-accent);
    color: var(--ascend-text-light);
    font-size: 0.9rem;
}

.owner-lane-hint[b-mtkfd912tq] {
    margin: 0;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
}

.owner-lane-link[b-mtkfd912tq] {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 0.25rem;
    background: none;
    border: none;
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.owner-lane-link:focus-visible[b-mtkfd912tq] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

/* Bug #8972 review round 1 - a column: the status region (the hint, the selection line, the
   named mix) reads first, then the Keep only actions and the apply and clear actions, each on
   the shared .action-row (one full width column on a phone, a wrapping row above 480px), so a
   wrapped button never sits at its own label width (#8844). */
.owner-lane-bulk[b-mtkfd912tq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.owner-lane-status[b-mtkfd912tq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.owner-lane-selected[b-mtkfd912tq] {
    color: var(--ascend-text-light);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.owner-lane-selected:focus-visible[b-mtkfd912tq] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

/* Bug #8972 - a long kind name wraps inside its Keep only button instead of clipping (the
   shared small Button is 44px on a coarse pointer, Button.razor.css). */
.owner-lane-keep-only[b-mtkfd912tq]  .ascend-btn {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

.owner-lane-error[b-mtkfd912tq] {
    margin: 0;
    color: var(--ascend-error-light);
    font-size: 0.85rem;
}

.owner-lane-results[b-mtkfd912tq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.owner-lane-results-head[b-mtkfd912tq] {
    margin: 0;
    color: var(--ascend-text-light);
    font-size: 0.9rem;
}

.owner-lane-results-list[b-mtkfd912tq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.owner-lane-result[b-mtkfd912tq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    font-size: 0.85rem;
    color: var(--ascend-text-secondary);
    overflow-wrap: anywhere;
    min-width: 0;
}

.owner-lane-result-title[b-mtkfd912tq] {
    color: var(--ascend-text-light);
}

.owner-lane-result.not-applied .owner-lane-result-outcome[b-mtkfd912tq] {
    color: var(--ascend-error-light);
}

.owner-lane-rates-summary[b-mtkfd912tq] {
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--ascend-accent-light);
    font-size: 0.85rem;
    cursor: pointer;
}

.owner-lane-rates-table[b-mtkfd912tq] {
    width: 100%;
    max-width: 32rem;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: var(--ascend-text-light);
}

.owner-lane-rates-table th[b-mtkfd912tq],
.owner-lane-rates-table td[b-mtkfd912tq] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.owner-lane-rates-table thead th[b-mtkfd912tq] {
    color: var(--ascend-text-secondary);
    font-weight: 600;
}

.owner-lane-rates-table tbody th[b-mtkfd912tq] {
    font-weight: 400;
    /* #8087 slice 4 walk: the AI draft column made the table narrower at 390, and "anywhere" then split
       "Tabiya" mid-word; break-word wraps between words and splits a word only when it alone cannot fit. */
    overflow-wrap: break-word;
}

/* #8087 slice 4 - five columns on a phone: tighter cell padding keeps the kind names whole at 344. */
@media (max-width: 480px) {
    .owner-lane-rates-table th[b-mtkfd912tq],
    .owner-lane-rates-table td[b-mtkfd912tq] {
        padding: 0.3rem 0.3rem;
    }
}
/* /Components/Pages/Sme/Owner/OwnerLaneItemTools.razor.rz.scp.css */
/* #8082 OWNER-LANE - the owner's verbs on one standing proposal. Tokens only; the shared
   Button is a child component. */

.owner-lane-tools[b-fuecpdj8oq] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.4rem 0;
    min-width: 0;
}

.owner-lane-tools-row[b-fuecpdj8oq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    min-width: 0;
}

.owner-lane-age[b-fuecpdj8oq] {
    padding: 0.05rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: var(--ascend-text-light);
    font-size: 0.8rem;
}

.owner-lane-age.past[b-fuecpdj8oq] {
    border-color: var(--ascend-accent);
    color: var(--ascend-accent-light);
}

.owner-lane-snoozed[b-fuecpdj8oq] {
    padding: 0.05rem 0.5rem;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    color: var(--ascend-text-secondary);
    font-size: 0.8rem;
}

.owner-lane-select[b-fuecpdj8oq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    color: var(--ascend-text-light);
    font-size: 0.85rem;
    cursor: pointer;
}

.owner-lane-select input[b-fuecpdj8oq] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--ascend-accent);
}

.owner-lane-label[b-fuecpdj8oq] {
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
}

.owner-lane-select-input[b-fuecpdj8oq] {
    min-width: 0;
    max-width: 12rem;
    min-height: 44px;
    /* background-color, never the shorthand: the global select rule paints the chevron as a
       background-image (SelectChevronRatchetTests). */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    padding: 0.4rem 2.25rem 0.4rem 0.75rem;
}

.owner-lane-select-input.wide[b-fuecpdj8oq] {
    flex: 1 1 14rem;
    max-width: 28rem;
}

.owner-lane-select-input option[b-fuecpdj8oq] {
    background: var(--ascend-bg-dark);
    color: var(--ascend-text-light);
}

.owner-lane-select-input:focus[b-fuecpdj8oq] {
    outline: none;
    border-color: var(--ascend-accent);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.owner-lane-duplicate[b-fuecpdj8oq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    min-width: 0;
}

.owner-lane-hint[b-fuecpdj8oq] {
    flex-basis: 100%;
    margin: 0;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
}

.owner-lane-error[b-fuecpdj8oq] {
    margin: 0;
    color: var(--ascend-error-light);
    font-size: 0.85rem;
}
/* /Components/Pages/Sme/Owner/OwnerMessagesSection.razor.rz.scp.css */
/* #8084 SME-THREAD - the owner console's conversations with reviewers. Tokens only. The
   shared Button and the thread panel are child components (::deep where reached). */

.owner-messages[b-be8ireonp9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.owner-messages-heading[b-be8ireonp9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.owner-messages-count[b-be8ireonp9],
.owner-messages-chip[b-be8ireonp9] {
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--ascend-accent);
    border-radius: 999px;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
}

.owner-messages-hint[b-be8ireonp9] {
    margin: 0;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
}

.owner-messages-rows[b-be8ireonp9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.owner-messages-row[b-be8ireonp9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    min-width: 0;
}

.owner-messages-main[b-be8ireonp9] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.owner-messages-who[b-be8ireonp9] {
    color: var(--ascend-accent-light);
    font-size: 0.85rem;
    font-weight: 600;
}

.owner-messages-subject[b-be8ireonp9] {
    color: var(--ascend-text-light);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    min-width: 0;
}

.owner-messages-last[b-be8ireonp9] {
    margin: 0;
    color: var(--ascend-text-secondary);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.owner-messages-label[b-be8ireonp9] {
    color: var(--ascend-text-light);
    font-weight: 600;
    margin-right: 0.25rem;
}

.owner-messages-thread[b-be8ireonp9] {
    align-self: stretch;
    margin-top: 0.25rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
}

/* Review round 1 - "Write to a reviewer": the general thread with a reviewer the owner picks. */
.owner-messages-start[b-be8ireonp9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.owner-messages-start-row[b-be8ireonp9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.owner-messages-start-label[b-be8ireonp9] {
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.owner-messages-select[b-be8ireonp9] {
    flex: 1 1 14rem;
    min-width: 0;
    max-width: 24rem;
    /* background-color, never the shorthand: the global select rule paints the chevron as a
       background-image (SelectChevronRatchetTests), and the right padding keeps option text
       clear of it. */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.6rem 2.25rem 0.6rem 0.85rem;
}

.owner-messages-select option[b-be8ireonp9] {
    background: var(--ascend-bg-dark);
    color: var(--ascend-text-light);
}

.owner-messages-select:focus[b-be8ireonp9] {
    outline: none;
    border-color: var(--ascend-accent);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.owner-messages-start .owner-messages-thread[b-be8ireonp9] {
    width: 100%;
}
/* /Components/Pages/Sme/Owner/TestOriginTicketsPanel.razor.rz.scp.css */
/* PBI #9341 - the admin's list of tickets a test account wrote. Tokens only - never raw brand
   hex. One stacked entry per ticket, so it reads the same at 344px as at 1440px. */

.test-origin-panel[b-8gvcojcdl8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.test-origin-heading[b-8gvcojcdl8] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    color: var(--ascend-secondary-light);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.test-origin-hint[b-8gvcojcdl8] {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.test-origin-error[b-8gvcojcdl8] {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.test-origin-notice[b-8gvcojcdl8] {
    margin: 0;
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.test-origin-list[b-8gvcojcdl8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.test-origin-entry[b-8gvcojcdl8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.entry-head[b-8gvcojcdl8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.test-origin-marker[b-8gvcojcdl8] {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(184, 133, 54, 0.6);
    background: rgba(184, 133, 54, 0.12);
    color: var(--ascend-secondary-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.entry-title[b-8gvcojcdl8] {
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
    min-width: 0;
}

.entry-meta[b-8gvcojcdl8] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}
/* /Components/Pages/Sme/PawnRulesEditor.razor.rz.scp.css */
/* #6955 - the structured pawn-rule editor + live match preview. */

.pawn-rules-editor[b-35833skhkm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
}

.rules-empty[b-35833skhkm],
.preview-note[b-35833skhkm] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0;
}

.rules-error[b-35833skhkm] {
    color: var(--ascend-error, #ef4444);
    font-size: 0.85rem;
    margin: 0;
}

.rules-raw[b-35833skhkm] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

.rule-row[b-35833skhkm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.rule-index[b-35833skhkm] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    min-width: 1.25rem;
}

.rule-select[b-35833skhkm] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: #ffffff;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.rule-select option[b-35833skhkm] {
    background: var(--ascend-bg-dark);
    color: #ffffff;
}

.rule-select:focus[b-35833skhkm] {
    outline: none;
    border-color: var(--ascend-accent);
}

.rule-field-group[b-35833skhkm] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.rule-squares[b-35833skhkm] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.rules-button[b-35833skhkm] {
    align-self: flex-start;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    color: var(--ascend-accent);
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rules-button:hover[b-35833skhkm] {
    background: rgba(49, 221, 227, 0.2);
}

.rules-button-small[b-35833skhkm] {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
}

.rules-icon-button[b-35833skhkm] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.rules-icon-button:hover[b-35833skhkm] {
    color: var(--ascend-error, #ef4444);
    border-color: rgba(239, 68, 68, 0.4);
}

.rule-remove[b-35833skhkm] {
    margin-left: auto;
}

.rules-errors[b-35833skhkm] {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ascend-error, #ef4444);
    font-size: 0.8rem;
}

.rules-preview[b-35833skhkm] {
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    padding-top: 0.6rem;
    margin-top: 0.25rem;
}

.preview-heading[b-35833skhkm] {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-accent);
}

.preview-count[b-35833skhkm] {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.preview-names[b-35833skhkm] {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

.preview-caveat[b-35833skhkm] {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}
/* /Components/Pages/Sme/RaiseFromReviewPanel.razor.rz.scp.css */
/* PBI #8049 - the "Raise another item" panel on the review surface. Quiet by
   default (one small button under the reviewer verbs); the form opens in place
   in the ruling column, in the same register as the hand-back block. */
.raise-panel[b-s8ozyy92xy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
}

.raise-form[b-s8ozyy92xy] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.raise-heading[b-s8ozyy92xy] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: var(--ascend-text-light);
}

.raise-hint[b-s8ozyy92xy] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.raise-form label[b-s8ozyy92xy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
    margin-top: 0.35rem;
}

.raise-modes[b-s8ozyy92xy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.25rem 0;
}

.raise-form .raise-mode[b-s8ozyy92xy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    margin-top: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
}

.raise-mode input[b-s8ozyy92xy] {
    accent-color: var(--ascend-accent);
    width: 1.1rem;
    height: 1.1rem;
}

/* A select keeps the global chevron: background-color, never the shorthand, and
   room on the right for the arrow (SelectChevronRatchetTests). */
.raise-select[b-s8ozyy92xy],
.raise-input[b-s8ozyy92xy] {
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.7rem 0.9rem;
    min-height: 2.75rem;
}

.raise-select[b-s8ozyy92xy] {
    padding-right: 2.25rem;
}

.raise-input[b-s8ozyy92xy] {
    resize: vertical;
}

.raise-select option[b-s8ozyy92xy] {
    background: var(--ascend-bg-dark);
    color: #ffffff;
}

.raise-select:focus[b-s8ozyy92xy],
.raise-input:focus[b-s8ozyy92xy] {
    outline: none;
    border-color: var(--ascend-accent);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.raise-results[b-s8ozyy92xy] {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 16rem;
    overflow-y: auto;
}

.raise-result-row[b-s8ozyy92xy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.raise-result-row:hover[b-s8ozyy92xy],
.raise-result-row:focus-visible[b-s8ozyy92xy] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
    outline: none;
}

.raise-result-detail[b-s8ozyy92xy],
.raise-selected-detail[b-s8ozyy92xy] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.raise-selected[b-s8ozyy92xy] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    margin: 0.25rem 0 0;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
}

.raise-selected-label[b-s8ozyy92xy] {
    color: var(--ascend-accent-light);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.raise-selected-name[b-s8ozyy92xy] {
    font-weight: 600;
}

.raise-link[b-s8ozyy92xy] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.raise-actions[b-s8ozyy92xy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.raise-propose-link[b-s8ozyy92xy] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border-radius: 12px;
    border: 1px solid var(--ascend-accent);
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    text-decoration: none;
}

.raise-propose-link:hover[b-s8ozyy92xy],
.raise-propose-link:focus-visible[b-s8ozyy92xy] {
    background: rgba(49, 221, 227, 0.12);
    outline: none;
}

.raise-error[b-s8ozyy92xy] {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.raise-result[b-s8ozyy92xy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-accent-light);
    overflow-wrap: anywhere;
}

.raise-ticket-link[b-s8ozyy92xy] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* /Components/Pages/Sme/RulingContentPane.razor.rz.scp.css */
/* Bug #6891 - the read-only content view behind a ruling. Tokens only.
   The four review panes are CHILD components, so their markup carries their
   own scope, not this one's: ::deep is required to reach .plan-pane and the
   .pane-* classes they emit (the workbench styles them the same way). */

.ruling-content[b-owujymv7el] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

/* ------------------------------------------------------------- identity */

.content-identity[b-owujymv7el] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.75rem;
    min-width: 0;
}

.identity-kind[b-owujymv7el] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-accent);
}

.identity-name[b-owujymv7el] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    overflow-wrap: anywhere;
}

.identity-key[b-owujymv7el] {
    font-family: monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    overflow-wrap: anywhere;
}

.identity-serving[b-owujymv7el] {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.identity-serving.serving[b-owujymv7el] {
    border-color: rgba(49, 221, 227, 0.4);
    color: var(--ascend-accent-light);
}

.identity-serving.not-serving[b-owujymv7el] {
    border-color: rgba(184, 133, 54, 0.5);
    color: var(--ascend-secondary-light);
}

/* --------------------------------------------------- unresolvable content */

.content-missing[b-owujymv7el] {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

/* ------------------------------------------------- fallback context rows */

.content-context[b-owujymv7el] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
    border-left: 2px solid rgba(49, 221, 227, 0.3);
    padding-left: 0.9rem;
    min-width: 0;
}

.content-context dt[b-owujymv7el] {
    color: var(--ascend-accent-light);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.content-context dd[b-owujymv7el] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.content-board-hint[b-owujymv7el] {
    margin: 0.5rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

/* ------------------------------------------- the child review panes (#6537) */

.ruling-content[b-owujymv7el]  .plan-pane {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.ruling-content[b-owujymv7el]  .pane-heading {
    margin: 0 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.95);
}

.ruling-content[b-owujymv7el]  .pane-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.ruling-content[b-owujymv7el]  .pane-subheading {
    margin: 1rem 0 0.4rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-accent);
}

.ruling-content[b-owujymv7el]  .pane-text {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ruling-content[b-owujymv7el]  .pane-mono {
    font-family: monospace;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.ruling-content[b-owujymv7el]  .pane-bucket-name {
    margin-top: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: capitalize;
    color: var(--ascend-secondary-light);
}

.ruling-content[b-owujymv7el]  .pane-list,
.ruling-content[b-owujymv7el]  .pane-sources {
    margin: 0.25rem 0 0.5rem;
    padding-left: 1.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.ruling-content[b-owujymv7el]  .pane-sources a,
/* #8088 review round 1 - a model game's title, linked by its URL, in the live plain list. */
.ruling-content[b-owujymv7el]  .pane-list a {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.ruling-content[b-owujymv7el]  .pane-source-type,
.ruling-content[b-owujymv7el]  .pane-source-ref {
    color: var(--ascend-text-muted);
    font-size: 0.8rem;
}

.ruling-content[b-owujymv7el]  .pane-empty {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-warning);
}

.ruling-content[b-owujymv7el]  .pane-error {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}
/* /Components/Pages/Sme/RulingDetailsDialog.razor.rz.scp.css */
/* #8754 - a ruled ticket's read-only details. Tokens and the rulings page's chip colors only.
   The content pane is a CHILD component with its own scope; it styles itself. */

.ruling-details[b-d38fvei9y1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.details-readonly[b-d38fvei9y1] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.details-section[b-d38fvei9y1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.details-heading[b-d38fvei9y1] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-accent);
}

.details-facts[b-d38fvei9y1] {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
    gap: 0.35rem 0.9rem;
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.details-facts dt[b-d38fvei9y1] {
    color: rgba(255, 255, 255, 0.7);
}

.details-facts dd[b-d38fvei9y1] {
    margin: 0;
    min-width: 0;
    color: rgba(255, 255, 255, 0.92);
    white-space: pre-wrap;
}

.details-text[b-d38fvei9y1] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    white-space: pre-wrap;
}

.details-muted[b-d38fvei9y1] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.mono[b-d38fvei9y1] {
    font-family: monospace;
    font-size: 0.85rem;
}

.details-record[b-d38fvei9y1],
.details-related[b-d38fvei9y1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
}

.details-record li[b-d38fvei9y1],
.details-related li[b-d38fvei9y1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    min-width: 0;
}

.record-when[b-d38fvei9y1] {
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.record-detail[b-d38fvei9y1] {
    flex-basis: 100%;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre-wrap;
}

.verdict-badge[b-d38fvei9y1] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.verdict-badge.confirm[b-d38fvei9y1] {
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
}

.verdict-badge.correct[b-d38fvei9y1] {
    border: 1px solid rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.1);
    color: var(--ascend-secondary-light);
}

.verdict-badge.retire[b-d38fvei9y1] {
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
}

.admin-chip[b-d38fvei9y1],
.open-chip[b-d38fvei9y1],
.verdict-chip[b-d38fvei9y1] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.admin-chip[b-d38fvei9y1] {
    border: 1px solid rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.12);
    color: var(--ascend-secondary-light);
    text-transform: uppercase;
}

.open-chip[b-d38fvei9y1] {
    border: 1px dashed rgba(49, 221, 227, 0.4);
    color: rgba(255, 255, 255, 0.75);
}

/* The row's four-eyes / waiting-on-the-owner chip, in the rulings page's chip colors. */
.verdict-chip[b-d38fvei9y1] {
    border: 1px solid rgba(49, 221, 227, 0.5);
    background: rgba(49, 221, 227, 0.1);
    color: var(--ascend-accent-light);
}

/* The body is focusable so a keyboard can scroll it; show where focus is. */
.ruling-details:focus-visible[b-d38fvei9y1] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The verdict and its chip wrap as a pair: at 344 the chip is wider than what is left of the row. */
.details-facts dd.details-verdict[b-d38fvei9y1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.4rem;
    white-space: normal;
}

.details-verdict .verdict-chip[b-d38fvei9y1] {
    margin-left: 0;
    max-width: 100%;
    white-space: normal;
}
/* /Components/Pages/Sme/SmeDraftFileTools.razor.rz.scp.css */
/* #8087 SME-DRAFT slice 2 - the Draft mode's template download and file picker. */
.draft-file-tools[b-q9hgjcr38h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm, 0.75rem);
    margin: 0 0 var(--space-sm, 0.75rem);
}

.draft-file-picker[b-q9hgjcr38h] {
    position: relative;
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.85rem;
    border: 2px dashed rgba(49, 221, 227, 0.45);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.05);
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
}

.draft-file-picker:hover[b-q9hgjcr38h] {
    background: rgba(49, 221, 227, 0.1);
}

.draft-file-picker:focus-within[b-q9hgjcr38h] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.draft-file-picker i[b-q9hgjcr38h] {
    font-size: 1.2rem;
    color: var(--ascend-accent);
}

.draft-file-name[b-q9hgjcr38h] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The native input stays in the tab order (the label is the visible control). */
[b-q9hgjcr38h] .draft-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.draft-file-error[b-q9hgjcr38h] {
    margin: 0 0 var(--space-sm, 0.75rem);
    color: var(--ascend-error-light);
}

@media (pointer: coarse) {
    .draft-file-picker[b-q9hgjcr38h] {
        min-height: 44px;
    }
}
/* /Components/Pages/Sme/SmeDraftLabel.razor.rz.scp.css */
/* #8087 SME-DRAFT slice 2 - the AI first draft label. Warm and outlined, so it reads as a caution next
   to the neutral meta chips, never as a status the work has earned. */
.ai-draft-label[b-prxa0u98x9] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ascend-warning) 60%, transparent);
    background: color-mix(in srgb, var(--ascend-warning) 14%, transparent);
    color: var(--ascend-warning);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
/* /Components/Pages/Sme/SmeDraftProvenance.razor.rz.scp.css */
/* #8087 SME-DRAFT slice 2 - the drafting record inside the Tabiya review pane. */
.draft-provenance[b-jau505jcq9] {
    margin-top: var(--space-md, 1rem);
    padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
    border-left: 3px solid color-mix(in srgb, var(--ascend-warning) 60%, transparent);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.5rem;
    overflow-wrap: anywhere;
}

/* A line sent without a draft carries no AI text: a neutral border, not the drafted panel's warning one. */
.draft-provenance.is-sent-without[b-jau505jcq9] {
    border-left-color: rgba(255, 255, 255, 0.25);
}

.dp-heading[b-jau505jcq9] {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    color: var(--ascend-text-light);
}

.dp-subheading[b-jau505jcq9] {
    margin: 0.85rem 0 0.35rem;
    font-size: 0.9rem;
    color: var(--ascend-text-light);
}

.dp-explainer[b-jau505jcq9],
.dp-note[b-jau505jcq9],
.dp-empty[b-jau505jcq9],
.dp-meta[b-jau505jcq9] {
    margin: 0.25rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.dp-sources[b-jau505jcq9],
.dp-removed[b-jau505jcq9],
.dp-claims[b-jau505jcq9] {
    margin: 0;
    padding-left: 1.1rem;
}

.dp-source[b-jau505jcq9] {
    margin-bottom: 0.6rem;
}

.dp-key[b-jau505jcq9] {
    display: inline-block;
    min-width: 2rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.dp-link[b-jau505jcq9] {
    color: var(--ascend-secondary-light);
}

.dp-quote[b-jau505jcq9] {
    margin: 0.3rem 0;
    padding-left: 0.6rem;
    border-left: 2px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

.dp-supports[b-jau505jcq9] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.dp-field[b-jau505jcq9] {
    font-weight: 600;
}

.dp-mark[b-jau505jcq9] {
    color: rgba(255, 255, 255, 0.75);
}

@media (pointer: coarse) {
    .dp-link[b-jau505jcq9] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Round 4 (d) - while the correction form is open the panel sits in a disclosure: open on wide screens,
   collapsed by default at phone widths. One copy per width band; the other is not displayed. */
.dp-disclosure[b-jau505jcq9] {
    margin-top: var(--space-sm, 0.75rem);
}

.dp-disclosure > .draft-provenance[b-jau505jcq9] {
    margin-top: 0.35rem;
}

.dp-summary[b-jau505jcq9] {
    cursor: pointer;
    min-height: 44px;
    padding: 0.65rem 0;
    color: var(--ascend-text-light);
    font-weight: 600;
}

.dp-disclosure-phone[b-jau505jcq9] {
    display: none;
}

@media (max-width: 768px) {
    .dp-disclosure-wide[b-jau505jcq9] {
        display: none;
    }

    .dp-disclosure-phone[b-jau505jcq9] {
        display: block;
    }
}
/* /Components/Pages/Sme/SmeDraftSessionBar.razor.rz.scp.css */
/* #8087 SME-DRAFT slice 4 - the list-scoped review session bar. One quiet row above the review surface; on a
   phone it wraps (position first, then the two moves, then the way back), and every target keeps its 44px. */
.draft-session-bar[b-r2ufa34wtd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ascend-border);
    border-radius: 8px;
}

.draft-session-position[b-r2ufa34wtd] {
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
}

.draft-session-moves[b-r2ufa34wtd] {
    display: inline-flex;
    gap: 0.5rem;
}

.draft-session-back[b-r2ufa34wtd] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: auto;
}

@media (pointer: coarse) {
    .draft-session-back[b-r2ufa34wtd] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}
/* /Components/Pages/Sme/SmeHub.razor.rz.scp.css */
.sme-hub-page[b-7ugs8a3bl5] {
    width: 100%;
}
/* /Components/Pages/Sme/SmeMirrorStructure.razor.rz.scp.css */
.sme-mirror-page[b-45sd8cyses] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mirror-intro[b-45sd8cyses] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mirror-intro h3[b-45sd8cyses] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    color: var(--ascend-text-light);
    margin: 0;
}

.mirror-hint[b-45sd8cyses],
.mirror-rules-note[b-45sd8cyses],
.mirror-board-label[b-45sd8cyses] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
}

.mirror-rules-note[b-45sd8cyses] {
    font-size: 0.85rem;
    color: rgba(49, 221, 227, 0.85);
}

.mirror-boards[b-45sd8cyses] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.mirror-board[b-45sd8cyses] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.mirror-board-label[b-45sd8cyses] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(184, 133, 54, 0.9);
}

.mirror-intro label[b-45sd8cyses] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.mirror-input[b-45sd8cyses] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    resize: vertical;
}

.mirror-input:focus[b-45sd8cyses] {
    outline: none;
    border-color: rgba(49, 221, 227, 0.5);
}

.mirror-error[b-45sd8cyses] {
    margin: 0;
    color: #f87171;
    font-family: var(--ascend-font-secondary);
}

.mirror-success[b-45sd8cyses] {
    margin: 0;
    color: #34d399;
    font-family: var(--ascend-font-secondary);
}

.mirror-empty[b-45sd8cyses] {
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 1.5rem 0;
}

.mirror-back[b-45sd8cyses] {
    color: rgba(49, 221, 227, 0.85);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mirror-back:hover[b-45sd8cyses] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

/* The authoring pane is the review pane; give it the page's rhythm without
   re-styling its internals (mirrors SmeProposals.razor.css). */
.mirror-pane[b-45sd8cyses]  .plan-pane {
    margin: 0;
}

/* ------------------------------------------------ #8086 SME-PROPOSE (live) */

/* The rationale, the last field before Submit, and the error beside Submit. Both are rendered
   inside the pane (a child component) but authored here, so they carry this page's scope. */
.mirror-rationale[b-45sd8cyses] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.mirror-pane.live[b-45sd8cyses]  .correction-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.submit-beside[b-45sd8cyses] {
    flex: 1 1 14rem;
    min-width: 0;
}

.submit-beside-error[b-45sd8cyses] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    color: var(--ascend-error-light);
}

.mirror-ticket-link[b-45sd8cyses] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 0.25rem;
}
/* /Components/Pages/Sme/SmePayReport.razor.rz.scp.css */
.sme-pay-report-page[b-oy8ibkxnh7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.spr-toolbar[b-oy8ibkxnh7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--space-md);
}

.spr-period[b-oy8ibkxnh7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.spr-period-label[b-oy8ibkxnh7] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.spr-period-range[b-oy8ibkxnh7] {
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    color: var(--ascend-text-light);
}

.spr-link[b-oy8ibkxnh7] {
    background: none;
    border: none;
    color: var(--ascend-accent);
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 0;
}

.spr-grid[b-oy8ibkxnh7] {
    padding: var(--space-sm);
}

.spr-grid[b-oy8ibkxnh7]  table {
    width: 100%;
}

.spr-amount[b-oy8ibkxnh7] {
    color: var(--ascend-secondary-light);
    font-weight: 600;
}

.spr-dim[b-oy8ibkxnh7] {
    color: rgba(255, 255, 255, 0.5);
}

/* #6538 - the SME's read-only current-rate line. */
.spr-current-rate[b-oy8ibkxnh7] {
    margin: 0;
    padding: 0 var(--space-md);
    font-size: 0.9375rem;
    color: var(--ascend-text-light);
}

/* #6538 fail-safe - loud, never silent. */
.spr-warn[b-oy8ibkxnh7] {
    color: var(--ascend-warning);
    font-weight: 600;
}

.spr-rate-gap-banner[b-oy8ibkxnh7] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--ascend-warning);
    border-radius: var(--radius-sm);
    color: var(--ascend-warning);
    font-size: 0.875rem;
}

.spr-total[b-oy8ibkxnh7] {
    margin: 0;
    padding: var(--space-sm) var(--space-md) 0;
    font-size: 0.9375rem;
    color: var(--ascend-text-light);
}

.spr-footnote[b-oy8ibkxnh7] {
    padding: 0 var(--space-md) var(--space-md);
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}
/* /Components/Pages/Sme/SmePlainFieldList.razor.rz.scp.css */
/* #8088 SME-PLAIN-PANE - labeled fields, the same rhythm as the workbench context list. */
/* Bug #8974 - the value column keeps at least 60% of the list. A label track that ends in
   max-content grows before a 1fr track gets any space, so without that minimum one long
   top-level label ("Why it belongs in the catalog") took the width of every value nested
   under its neighbors (65px at 901 on an endgame repair ticket). The label's 8rem minimum
   gives way to 40% less the 1rem column gap, so label, gap and value never overflow a
   narrow list (the ruling column, a dialog). Change the gap and the label share together. */
.plain-fields[b-mg7cj622h0] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(min(8rem, 40% - 1rem), max-content) minmax(60%, 1fr);
    gap: 0.35rem 1rem;
    min-width: 0;
}

/* Bug #8974 - a group inside another field is ONE column: its label sits above its value.
   The two-column grid at every level left a 0px value column at depth 3 (an endgame
   repair ticket's replaced lines), one character per line, about 40 screens tall. */
.plain-fields.nested[b-mg7cj622h0] {
    margin-top: 0.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(49, 221, 227, 0.3);
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
}

.plain-fields.nested dd + dt[b-mg7cj622h0] {
    margin-top: 0.4rem;
}

.plain-fields dt[b-mg7cj622h0] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.plain-fields dd[b-mg7cj622h0] {
    margin: 0;
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.plain-items[b-mg7cj622h0] {
    margin: 0;
    padding-left: 1.1rem;
}

.plain-items li + li[b-mg7cj622h0] {
    margin-top: 0.15rem;
}

/* Below 480px every level stacks, the same shape a nested group always has. */
@media (max-width: 480px) {
    .plain-fields[b-mg7cj622h0] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .plain-fields dd + dt[b-mg7cj622h0] {
        margin-top: 0.4rem;
    }
}
/* /Components/Pages/Sme/SmePositionEditor.razor.rz.scp.css */
/* PBI #8377 - the position editor. Mobile first: one column at 344/390, the
   board beside the details from 768px. Every unbroken token (a FEN, a UCI
   line) wraps rather than pushing the card past the 16px phone gutter. */

.position-editor-page[b-tw3juwbjgg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

.pe-intro[b-tw3juwbjgg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.pe-label[b-tw3juwbjgg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}

.pe-input[b-tw3juwbjgg] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    font-family: inherit;
}

.pe-input:focus[b-tw3juwbjgg] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
}

/* #8409: the pattern picker wears the shared .form-input + global select
   (app.css), which own its fill, caret, border and the open list's option
   fill. This page only sizes it; restating paint here is what made the picker
   differ from every other dropdown. */
.pe-picker[b-tw3juwbjgg] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
}

.pe-mono[b-tw3juwbjgg] {
    font-family: monospace;
}

.pe-narrow[b-tw3juwbjgg] {
    max-width: 8rem;
}

.pe-hint[b-tw3juwbjgg],
.pe-field-label[b-tw3juwbjgg] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.pe-field-label[b-tw3juwbjgg] {
    margin-top: var(--space-xs);
}

.pe-notice[b-tw3juwbjgg],
.pe-success[b-tw3juwbjgg],
.pe-check-ok[b-tw3juwbjgg] {
    margin: 0;
    color: var(--ascend-accent-light);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.pe-warn[b-tw3juwbjgg] {
    margin: 0;
    color: #f2b3b3;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.pe-error[b-tw3juwbjgg] {
    margin: 0;
    color: var(--ascend-error);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.pe-heading[b-tw3juwbjgg] {
    margin: var(--space-sm) 0 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.15rem;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.pe-position[b-tw3juwbjgg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

.pe-board[b-tw3juwbjgg] {
    width: 100%;
    max-width: 360px;
    min-width: 0;
}

.pe-details[b-tw3juwbjgg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.pe-position-heading[b-tw3juwbjgg] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    color: var(--ascend-text-light);
}

.pe-mate[b-tw3juwbjgg] {
    color: rgba(255, 255, 255, 0.65);
}

.pe-line[b-tw3juwbjgg],
.pe-fen[b-tw3juwbjgg] {
    margin: 0;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.pe-fen[b-tw3juwbjgg] {
    font-family: monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.pe-form[b-tw3juwbjgg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    min-width: 0;
}

/* Bug #9313 - the Removed drill positions section keeps the page's column rhythm inside its own wrapper. */
.pe-section[b-tw3juwbjgg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

/* #8926 - the admin's sections under the drill positions, and the small marks on a reference position. */
.pe-subheading[b-tw3juwbjgg] {
    margin: var(--space-md) 0 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: var(--ascend-text-light);
}

.pe-tag[b-tw3juwbjgg] {
    display: inline-block;
    margin-left: var(--space-xs);
    padding: 0.125rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 40%, transparent);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--ascend-accent-light);
}

.pe-actions[b-tw3juwbjgg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

@media (min-width: 768px) {
    .pe-position[b-tw3juwbjgg] {
        flex-direction: row;
        align-items: flex-start;
    }

    .pe-board[b-tw3juwbjgg] {
        flex: 0 0 320px;
    }

    .pe-details[b-tw3juwbjgg] {
        flex: 1 1 auto;
    }
}
/* /Components/Pages/Sme/SmeProposals.razor.rz.scp.css */
.sme-proposals-page[b-x3jzxl5sr8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.prop-form[b-x3jzxl5sr8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.prop-form h3[b-x3jzxl5sr8] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    color: var(--ascend-text-light);
}

.prop-hint[b-x3jzxl5sr8] {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.prop-form label[b-x3jzxl5sr8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    flex: 1;
}

.prop-kind-row[b-x3jzxl5sr8] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.prop-kind-option[b-x3jzxl5sr8] {
    flex-direction: row !important;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    flex: 0 1 auto !important;
}

.prop-positions[b-x3jzxl5sr8] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.prop-input[b-x3jzxl5sr8] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
}

.prop-input:focus[b-x3jzxl5sr8] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
}

.prop-mono[b-x3jzxl5sr8] {
    font-family: monospace;
}

.prop-error[b-x3jzxl5sr8] {
    color: var(--ascend-error);
    margin: 0;
}

.prop-success[b-x3jzxl5sr8] {
    color: var(--ascend-accent);
    margin: 0;
}

/* Bug #7076 - the proposals TABLE and its status chips / intake action buttons
   were deleted with the intake gate: this page mints knowledge, and the review
   queue on /sme/rulings shows where a proposal stands. Their styles went with
   them rather than lingering as selectors nothing renders. */

/* #7088 - the content is authored on the review pane, which is a CHILD
   component: its markup carries its own scope attribute, not this page's, so
   reaching it needs ::deep. The workbench styles the identical classes from its
   own review column - these mirror that treatment so an SME meets one look. */

.prop-pane[b-x3jzxl5sr8]  .plan-pane {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.prop-pane[b-x3jzxl5sr8]  .pane-subheading {
    margin: 0 0 0.25rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: var(--ascend-text-light);
}

.prop-pane[b-x3jzxl5sr8]  .pane-text {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
}

.prop-pane[b-x3jzxl5sr8]  .correction-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.prop-pane[b-x3jzxl5sr8]  .pane-rule-errors,
.prop-pane[b-x3jzxl5sr8]  .pane-error {
    color: var(--ascend-error);
    font-size: 0.85rem;
}

.prop-pane[b-x3jzxl5sr8]  .pane-rule-errors {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

/* #7807 - the bulk intake panel is a Card, and a Card's root div carries the
   CARD component's scope, not this page's, so the panel cannot space itself
   off the authoring pane above it. The gap belongs to the parent that places
   it: this wrapper lives in THIS page's markup, so a plain rule reaches it and
   no ::deep is needed. */
.bulk-intake-slot[b-x3jzxl5sr8] {
    margin-top: var(--space-lg);
}

/* ------------------------------------------------ #8086 SME-PROPOSE (live) */

/* The three modes, first on the page: a row of choices that wraps on a phone. */
.prop-mode-row[b-x3jzxl5sr8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.prop-mode-option[b-x3jzxl5sr8] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.55rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 25%, transparent);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    cursor: pointer;
}

.prop-mode-option.selected[b-x3jzxl5sr8] {
    border-color: var(--ascend-accent);
    background-color: color-mix(in srgb, var(--ascend-accent) 14%, transparent);
    color: var(--ascend-text-light);
}

/* #8086 review round 1 - a mode's pane stays mounted once shown and is hidden while another
   mode is chosen. It lays its children out as the page does (the single mode's card and its
   authoring pane keep their gap). The explicit [hidden] rule matters: the display above would
   otherwise beat the browser's own [hidden] { display: none }. */
.prop-mode-pane[b-x3jzxl5sr8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.prop-mode-pane[hidden][b-x3jzxl5sr8] {
    display: none;
}

.prop-mode-option:focus-within[b-x3jzxl5sr8] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

/* One item's rationale, the last field before Submit. Rendered inside the pane (a child
   component) but authored here, so it carries this page's scope: a plain rule reaches it. */
.prop-rationale[b-x3jzxl5sr8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}

/* The error summary, or the result and its link, beside Submit (report D: the error sat about
   2,300 px above Submit). Inside the pane's action row, authored here. */
.submit-beside[b-x3jzxl5sr8] {
    flex: 1 1 14rem;
    min-width: 0;
    align-self: center;
}

.submit-beside-error[b-x3jzxl5sr8] {
    margin: 0;
    font-size: 0.9rem;
    /* The light step (#7905): the plain error color is below AA on this ground. */
    color: var(--ascend-error-light);
}

.prop-ticket-link[b-x3jzxl5sr8] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 0.25rem;
}

/* The mirror picker. A select keeps the global chevron: background-color, never the shorthand,
   and room on the right for the arrow (SelectChevronRatchetTests). */
.prop-select[b-x3jzxl5sr8] {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.625rem 2.25rem 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
    max-width: 100%;
}

.prop-mirror-actions[b-x3jzxl5sr8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* PBI #8049 - the page was opened from inside a review: which one, and the way back. */
.prop-raised-from[b-x3jzxl5sr8] {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

/* PBI #8048 - the page is proposing a MOVE: what is moving, what is still needed, when anything
   changes, and what stays behind. Gold, the register of an action that ends in a row leaving. */
.prop-move[b-x3jzxl5sr8] {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    overflow-wrap: anywhere;
}

.prop-move-lead[b-x3jzxl5sr8] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.prop-move-text[b-x3jzxl5sr8] {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
}

.prop-move-text:last-child[b-x3jzxl5sr8] {
    margin-bottom: 0;
}


/* The link asked for a move and none started: the error register, so it is not read as the
   ordinary move banner. */
.prop-move-refused[b-x3jzxl5sr8] {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}
/* /Components/Pages/Sme/SmeReferrals.razor.rz.scp.css */
.sme-referrals-page[b-kzem3gw9px] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.srf-group[b-kzem3gw9px] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.srf-sme-name[b-kzem3gw9px] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    color: var(--ascend-text-light);
}

.srf-code-block[b-kzem3gw9px] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
}

.srf-label[b-kzem3gw9px] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.srf-link-input[b-kzem3gw9px] {
    width: 100%;
    max-width: 34rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: var(--ascend-accent);
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
}

.srf-link-input:focus[b-kzem3gw9px] {
    outline: none;
    border-color: var(--ascend-accent);
}

.srf-grid[b-kzem3gw9px] {
    padding: var(--space-sm) 0;
}

.srf-grid[b-kzem3gw9px]  table {
    width: 100%;
}

.srf-amount[b-kzem3gw9px] {
    color: var(--ascend-secondary-light);
    font-weight: 600;
}

/* #9102 - the rate each customer's share is computed at, beside the amount. */
.srf-rate[b-kzem3gw9px] {
    margin-left: 0.35rem;
    font-size: 0.85em;
    color: var(--ascend-text-muted);
}

.srf-dim[b-kzem3gw9px] {
    color: rgba(255, 255, 255, 0.5);
}

/* #7318 - the admin retire / reinstate control under the referral link. */
.srf-retire[b-kzem3gw9px] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-start;
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}

.srf-retire .srf-dim[b-kzem3gw9px] {
    margin: 0;
    font-size: 0.8125rem;
}

.srf-error[b-kzem3gw9px] {
    color: var(--ascend-error);
    margin: 0;
}

.srf-totals[b-kzem3gw9px] {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}

/* #8419 - the promoter-agreement step (promoter-disclosure). */
.srf-agreement[b-kzem3gw9px] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.srf-agreement-title[b-kzem3gw9px] {
    font-family: var(--ascend-font-primary);
    font-size: 1.125rem;
    color: #ffffff;
    margin: 0;
}

.srf-agreement-note[b-kzem3gw9px] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    max-width: 640px;
}
/* /Components/Pages/Sme/SmeResearchContext.razor.rz.scp.css */
/* Bug #8639 - the research a member question carries, read as prose and links. Normal wrapping
   throughout: words break only when one word is wider than the column (a long URL), never one
   character per line. */
.research-context[b-yydrd0ky07] {
    margin-top: 0.75rem;
    min-width: 0;
}

.research-label[b-yydrd0ky07] {
    margin: 0.75rem 0 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ascend-text-muted);
}

.research-label:first-child[b-yydrd0ky07] {
    margin-top: 0;
}

.research-answer[b-yydrd0ky07] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ascend-text-light);
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 0;
}

/* The answer is raw Markdig output (a MarkupString), so its children need ::deep. */
/* Bug #8649 - the answer reads upright. The global `p { font-style: italic }` is the brand
   oblique for short paragraph copy; a research answer is pages of reference prose, and in italic
   its own *emphasis* was invisible. Emphasis keeps its italic (em is not touched). */
.research-answer[b-yydrd0ky07]  p,
.research-answer[b-yydrd0ky07]  li {
    font-style: normal;
}

.research-answer[b-yydrd0ky07]  p {
    margin: 0 0 0.6rem;
}

/* Bug #8649 - a Markdown `---` is a light divider, not the browser's 2px inset gray rule, which
   read as a heavy bright bar between every section on the dark card. */
.research-answer[b-yydrd0ky07]  hr {
    height: 0;
    margin: 0.75rem 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.research-answer[b-yydrd0ky07]  p:last-child {
    margin-bottom: 0;
}

.research-answer[b-yydrd0ky07]  ul,
.research-answer[b-yydrd0ky07]  ol {
    margin: 0 0 0.6rem;
    padding-left: 1.2rem;
}

.research-answer[b-yydrd0ky07]  li + li {
    margin-top: 0.2rem;
}

.research-answer[b-yydrd0ky07]  h1,
.research-answer[b-yydrd0ky07]  h2,
.research-answer[b-yydrd0ky07]  h3,
.research-answer[b-yydrd0ky07]  h4,
.research-answer[b-yydrd0ky07]  h5,
.research-answer[b-yydrd0ky07]  h6 {
    margin: 0.6rem 0 0.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ascend-text-light);
}

.research-answer[b-yydrd0ky07]  strong {
    color: var(--ascend-text-light);
}

.research-answer[b-yydrd0ky07]  a {
    color: var(--ascend-accent);
}

.research-sources[b-yydrd0ky07] {
    margin: 0;
    padding-left: 1.1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-light);
}

.research-sources li[b-yydrd0ky07] {
    overflow-wrap: break-word;
    white-space: normal;
}

.research-sources li + li[b-yydrd0ky07] {
    margin-top: 0.3rem;
}

/* Bug #8787 - underlined at rest. Color alone did not mark the title as a link: axe
   (link-in-text-block, decided once the global link pseudo-element was set aside) measured the
   accent against the item's white text at 1.66:1, under the 3:1 it asks for when color is the
   only cue. Hover and focus thicken the line instead of adding it. */
.research-sources a[b-yydrd0ky07] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.research-sources a:hover[b-yydrd0ky07],
.research-sources a:focus-visible[b-yydrd0ky07] {
    text-decoration-thickness: 2px;
}

.research-host[b-yydrd0ky07] {
    margin-left: 0.4rem;
    font-size: 0.75rem;
    color: var(--ascend-text-muted);
}
/* /Components/Pages/Sme/SmeRulings.razor.rz.scp.css */
/* #6621 - the SME queue lifecycle surface. Tokens only (never raw hex). */

.sme-rulings-page[b-zfnccer5y5] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.section-heading[b-zfnccer5y5] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    color: var(--ascend-accent);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-hint[b-zfnccer5y5] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.action-error[b-zfnccer5y5] {
    color: #ef4444;
    font-size: 0.9rem;
    margin: 0;
    /* #7937 - a refusal names positions as FEN keys, one unbroken token each;
       without this they ran out of the card at 344px. */
    overflow-wrap: anywhere;
}

.action-notice[b-zfnccer5y5] {
    color: var(--ascend-accent-light);
    font-size: 0.9rem;
    margin: 0;
}

/* ------------------------------------------------------------- chips */

.totals-row[b-zfnccer5y5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.summary-chip[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(49, 221, 227, 0.25);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.summary-chip strong[b-zfnccer5y5] {
    color: var(--ascend-accent);
}

.summary-chip.warn[b-zfnccer5y5] {
    border-color: rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.1);
}

.summary-chip.warn strong[b-zfnccer5y5] {
    color: var(--ascend-secondary-light);
}

/* ------------------------------------------------------------- filters */

.filter-row[b-zfnccer5y5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.filter-row label[b-zfnccer5y5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-row select[b-zfnccer5y5],
.filter-row input[b-zfnccer5y5] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.45rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    min-width: 9rem;
}

/* Bug #8937 - the search is the widest field: it leads the row and takes a full
   line at phone width, where a 9rem box would cut off what was typed. */
.filter-row .filter-search[b-zfnccer5y5] {
    flex: 1 1 16rem;
    max-width: 28rem;
}

.filter-row .filter-search input[b-zfnccer5y5] {
    width: 100%;
    box-sizing: border-box;
}

.filter-row select:focus[b-zfnccer5y5],
.filter-row input:focus[b-zfnccer5y5] {
    outline: none;
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

/* ------------------------------------------------------------- grid */

.history-grid-wrap[b-zfnccer5y5] {
    overflow-x: auto;
}

.history-grid-wrap[b-zfnccer5y5]  table {
    width: 100%;
    border-collapse: collapse;
}

.history-grid-wrap[b-zfnccer5y5]  th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(49, 221, 227, 0.2);
    white-space: nowrap;
}

.history-grid-wrap[b-zfnccer5y5]  td {
    padding: 0.55rem 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}

.history-grid-wrap[b-zfnccer5y5]  .col-title-text {
    color: var(--ascend-accent);
}


/* ---- Bug #8054: below --bp-md the ruling history STOPS BEING A TABLE ------

   THE BUG, measured on prod at 390px with real touch emulation. The grid held
   1,767px of content inside a 322px overflow-x: auto wrapper. Only "Ruled at"
   and "SME" were on screen - VERDICT, CLAIM, NOTE and CURRENT STATE, every
   column that says what actually happened, needed a sideways scroll. The two
   columns a reader does not need were the two they got.

   AND IT PASSED EVERY CHECK. Page-level scrollWidth == clientWidth == 390, so
   the standing horizontal-overflow assertion was green; the E2E probe goes
   further and deliberately EXEMPTS anything inside an overflow-x scroller as
   "reachable by design", which is true of the master-games grid and was not
   true here. A reader on a phone cannot be asked to scroll a table sideways to
   find out whether a ruling was a Confirm or a Retire.

   THE FIX is the same shape /games already uses for the same problem, arrived
   at from the other side: /games renders a SECOND card list and hides the grid
   below 769px. This grid stays ONE render and re-lays itself out, because the
   history rows carry testids (current-state, reopen-button, suppress-button,
   view-note-button, the badges) that a duplicate DOM would double - and a test
   that reads every [data-testid=current-state] would then read each ruling
   twice. One render, reordered, keeps every existing handle honest.

   THE ORDER IS THE POINT, not merely the reflow: verdict first, current state
   second, claim and note as the body, ruled-at / SME / kind as metadata
   underneath. Reflowing without reordering would still bury the verdict under
   a timestamp.

   THE DESKTOP HALF IS THE MARKUP, NOT THIS BLOCK. Measured at 1440x900 before
   the fix, the table laid out to 1,217px inside a 1,028px content column, so
   Current state ran to x=1453 against a 1440 viewport - off screen at a full
   desktop width, which the item's acceptance names alongside 344 and 390.
   Eight columns of readable width do not fit 1,028px and no stylesheet makes
   them; what was wrong was the ORDER, so the columns were reordered in
   SmeRulings.razor (Verdict and Current state 2nd and 3rd) and the grid keeps
   its scroller for the tail, with the house scroll-edge cue. Two things were
   tried and rejected: `overflow-wrap: anywhere` on the SME and claim cells DID
   make the table fit, by collapsing their min-content so far that the auto
   table algorithm starved them - the email broke one character per line and
   the claim read "The Carls..."; and `table-layout: fixed` pins every column
   to a guess that re-breaks the moment the actions column appears for an admin
   and not for an SME.

   QuickGrid gives a column no attribute hook - only Class, which lands on the
   <th> and the <td> - so the shared .responsive-table.table-cards utility in
   app.css cannot be reused verbatim: its cell keys come from a data-label the
   caller writes onto each <td>, which is impossible here. The column name
   travels in a .cell-label span inside the cell template instead. That is a
   deliberate second variant of the shared pattern, not an oversight; if a
   second QuickGrid needs it, this is what gets lifted into app.css.
   -------------------------------------------------------------------------- */

/* The per-cell key. Silent while the column headers are doing that job. */
.cell-label[b-zfnccer5y5] {
    display: none;
}

@media (max-width: 768px) {
    .history-grid-wrap.history-cards[b-zfnccer5y5] {
        /* Nothing left to scroll sideways - and this line is load-bearing for
           the guard as well as the reader: while the wrapper is a scroller the
           E2E overflow probe treats everything inside it as reachable, which
           is exactly how 1,767px of hidden columns measured clean. */
        overflow-x: visible;
        background: none;
    }

    .history-grid-wrap.history-cards[b-zfnccer5y5]  table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    /* display: none, NOT the sr-only clip the shared .table-cards pattern
       uses. These headers carry QuickGrid's sort buttons, and a clipped button
       is still focusable - keyboard focus would disappear into a 1px box. The
       column names are not lost; they move into .cell-label inside each cell.
       The cost is honest and small: no column sorting at phone width. The
       filter row above still works and the default order is newest first. */
    .history-grid-wrap.history-cards[b-zfnccer5y5]  thead {
        display: none;
    }

    .history-grid-wrap.history-cards[b-zfnccer5y5]  tbody {
        display: block;
    }

    /* Bug #8490 - ruling rows only (RowClass = history-row). A bare `tbody tr`
       here out-ranked the global filler-row hide in SharedPages.css, so a short
       page showed QuickGrid's padding rows as empty cards (18 under 7 rulings at
       344). QuickGridBlankRowRatchetTests now fails on that shape. */
    .history-grid-wrap.history-cards[b-zfnccer5y5]  tbody tr.history-row {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid rgba(49, 221, 227, 0.2);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
    }

    .history-grid-wrap.history-cards[b-zfnccer5y5]  tbody td {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5rem;
        width: 100%;
        min-width: 0;
        padding: 0;
        border-bottom: none;
    }

    /* Verdict and current state first - the outcome of the ruling, which is
       the whole subject of #8054. Everything else is context. */
    .history-grid-wrap.history-cards[b-zfnccer5y5]  td.col-verdict {
        order: 1;
    }

    .history-grid-wrap.history-cards[b-zfnccer5y5]  td.col-state {
        order: 2;
    }

    .history-grid-wrap.history-cards[b-zfnccer5y5]  td.col-claim {
        order: 3;
    }

    .history-grid-wrap.history-cards[b-zfnccer5y5]  td.col-note {
        order: 4;
    }

    .history-grid-wrap.history-cards[b-zfnccer5y5]  td.col-kind {
        order: 5;
    }

    .history-grid-wrap.history-cards[b-zfnccer5y5]  td.col-ruled-at {
        order: 6;
    }

    .history-grid-wrap.history-cards[b-zfnccer5y5]  td.col-sme {
        order: 7;
    }

    .history-grid-wrap.history-cards[b-zfnccer5y5]  td.col-actions {
        order: 8;
    }

    .history-grid-wrap.history-cards .cell-label[b-zfnccer5y5] {
        display: inline-block;
        flex: 0 0 5.25rem;
        color: var(--ascend-accent);
        font-family: var(--ascend-font-secondary);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* The value takes the rest of the row, and drops to its own line rather
       than squeezing to nothing when the row runs out of width. */
    .history-grid-wrap.history-cards .claim-cell[b-zfnccer5y5],
    .history-grid-wrap.history-cards .note-cell[b-zfnccer5y5] {
        flex: 1 1 9rem;
        min-width: 0;
    }

    /* A WRAPPED claim, not a clamped one. The clamp is paired with a title
       attribute, and a tooltip does not exist on a touch screen - so clamping
       here would hide the claim from precisely the reader this bug is about.
       The note keeps its clamp: anything past NoteClampLength offers the
       "view" button, which opens the full text in a modal and works on touch. */
    .history-grid-wrap.history-cards .claim-cell[b-zfnccer5y5] {
        display: block;
        max-width: none;
        overflow: visible;
    }

    .history-grid-wrap.history-cards .note-cell[b-zfnccer5y5] {
        max-width: none;
    }

    /* A card is only as wide as the phone, so an unbroken token - a FEN, a URL
       pasted into a claim, a long address - has nowhere to go and would push
       the card past the viewport. Safe HERE and only here: at desktop widths
       the same rule collapses these columns' min-content and the table
       algorithm starves them (see the note above). */
    .history-grid-wrap.history-cards[b-zfnccer5y5]  td.col-sme,
    .history-grid-wrap.history-cards .claim-cell[b-zfnccer5y5],
    .history-grid-wrap.history-cards .note-cell[b-zfnccer5y5] {
        overflow-wrap: anywhere;
    }

    /* A recorded reason is a paragraph, not a chip - give it the full row. */
    .history-grid-wrap.history-cards .declined-reason[b-zfnccer5y5],
    .history-grid-wrap.history-cards .superseded-reason[b-zfnccer5y5],
    .history-grid-wrap.history-cards .returned-reason[b-zfnccer5y5] {
        flex: 1 1 100%;
        max-width: none;
    }

    .history-grid-wrap.history-cards .action-cell[b-zfnccer5y5] {
        flex: 1 1 100%;
    }
}

/* ---- Bug #8583: the table fits its card at a desktop width ----------------

   Measured at 1440x900 as an admin, before: the table laid out to 1,228px in a
   1,018px card, so the SME and action columns sat behind the sideways scroller
   (and on 2026-10-11 the Note column was cut at the card edge). The 1,228px was
   the sum of the columns' MIN-content widths, not a choice of the table: every
   short value was unbreakable - the timestamp, the column headers, the state and
   content chips, and the email in the SME column - and the note was a one-line
   ellipsis box with a fixed 16.25rem floor. Each of those now wraps, and the
   note reads as up to three lines in a column with a real floor of its own, so
   at 1440 the eight columns fit 1,018px with the note readable and nothing
   behind the scroller. Below ~1,000px of card (the 769-1024 band beside the
   sidebar) the table still scrolls sideways with the scroll-edge cue, and below
   --bp-md the cards above take over. overflow-wrap: anywhere goes on the SME
   column ONLY, with a floor, so the auto layout cannot starve it (the trap the
   #8054 note above describes). */
@media (min-width: 769px) {
    .history-grid-wrap[b-zfnccer5y5]  th {
        white-space: normal;
    }

    .history-grid-wrap .mono-cell[b-zfnccer5y5],
    .history-grid-wrap .kind-badge[b-zfnccer5y5],
    .history-grid-wrap .state-badge[b-zfnccer5y5] {
        white-space: normal;
    }

    /* Bug #9312 - the verdict column's chips wrap like the state chip above. The
       nowrap "verifier overridden" chip alone held the column at 187px. */
    .history-grid-wrap .declined-badge[b-zfnccer5y5],
    .history-grid-wrap .superseded-badge[b-zfnccer5y5],
    .history-grid-wrap .overridden-badge[b-zfnccer5y5],
    .history-grid-wrap .four-eyes-chip[b-zfnccer5y5],
    .history-grid-wrap .waiting-on-owner-chip[b-zfnccer5y5] {
        white-space: normal;
    }

    .history-grid-wrap[b-zfnccer5y5]  td.col-sme {
        overflow-wrap: anywhere;
        min-width: 7rem;
    }

    .history-grid-wrap[b-zfnccer5y5]  td.col-claim {
        min-width: 8rem;
    }

    .history-grid-wrap[b-zfnccer5y5]  td.col-note {
        min-width: 13rem;
    }

    /* Three lines, not one, for a note past NoteClampLength (the only notes
       that clamp; the "view" button opens the whole note). */
    .history-grid-wrap .note-cell[b-zfnccer5y5] {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        white-space: normal;
        max-width: 24rem;
        overflow: hidden;
    }
}

/* qw14 review - a note at or under NoteClampLength has no "view" button, so it
   is never clamped, at any width: how many characters a clamp holds depends on
   the column, the words and any unbroken token, and the title tooltip does not
   exist on touch. break-word (not anywhere) breaks a long token at the edge
   without shrinking the column's min-content, so the #8054 trap stays shut.
   white-space: normal undoes the base .note-cell nowrap, which nothing else
   resets below 769px: without it a short note ran off its phone card on one
   line and body overflow-x: hidden clipped it. */
.history-grid-wrap .note-cell.note-full[b-zfnccer5y5] {
    display: block;
    -webkit-line-clamp: none;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
}

.mono-cell[b-zfnccer5y5] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.claim-cell[b-zfnccer5y5],
.note-cell[b-zfnccer5y5] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 26rem;
}

.kind-badge[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(49, 221, 227, 0.3);
    background: rgba(49, 221, 227, 0.08);
    color: var(--ascend-accent-light);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.verdict-badge[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.verdict-badge.confirm[b-zfnccer5y5] {
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
}

.verdict-badge.correct[b-zfnccer5y5] {
    border: 1px solid rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.1);
    color: var(--ascend-secondary-light);
}

/* PBI #6520 ext - the retirement proposal verdict: the exceptional exit. */
.verdict-badge.retire[b-zfnccer5y5] {
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
}

.state-badge[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.72rem;
    white-space: nowrap;
}

.open-chip[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px dashed rgba(49, 221, 227, 0.4);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    white-space: nowrap;
}

.action-cell[b-zfnccer5y5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.row-action[b-zfnccer5y5] {
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 50px;
    color: var(--ascend-accent-light);
    padding: 0.25rem 0.8rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.row-action:hover:not(:disabled)[b-zfnccer5y5] {
    background: rgba(49, 221, 227, 0.2);
}

.row-action.danger[b-zfnccer5y5] {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
}

.row-action.danger:hover:not(:disabled)[b-zfnccer5y5] {
    background: rgba(239, 68, 68, 0.16);
}

.row-action:disabled[b-zfnccer5y5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.history-paginator[b-zfnccer5y5] {
    margin-top: 0.75rem;
}

/* ------------------------------------------------------------- rework lane */

.rework-lane[b-zfnccer5y5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rework-item[b-zfnccer5y5] {
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem 1.25rem;
}

.rework-meta[b-zfnccer5y5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rework-who[b-zfnccer5y5] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}

.rework-claim[b-zfnccer5y5] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin: 0 0 0.35rem;
}

.rework-note[b-zfnccer5y5] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    margin: 0 0 0.5rem;
}

/* Bug #7040 - an ABSENCE the curator has to notice: no correction body, or no
   stated reason. It reads as a caution, not as body copy, because the alternative
   was rendering nothing at all - which looks identical to a rendering gap. */
.rework-missing[b-zfnccer5y5] {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(184, 133, 54, 0.35);
    background: rgba(184, 133, 54, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
    font-style: normal;
}

/* PBI #6520 ext - the retirement proposal explainer in the rework lane. */
.retire-proposal[b-zfnccer5y5] {
    margin: 0 0 0.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.06);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.85rem;
}

.correction-list[b-zfnccer5y5] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.25rem 1rem;
    margin: 0 0 0.75rem;
    border-left: 2px solid rgba(49, 221, 227, 0.3);
    padding-left: 0.9rem;
}

.correction-list dt[b-zfnccer5y5] {
    color: var(--ascend-accent-light);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.correction-list dd[b-zfnccer5y5] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    margin: 0;
    overflow-wrap: anywhere;
}

/* #6681 - VERIFIED by rendering at 390x844: the ruling row carries up to three
   long-labelled buttons ("Apply as SME's correction" / "Apply my rewrite - send
   for SME confirmation" / "Cancel"). Unwrapped they shrink past their labels and
   .ascend-btn's white-space:nowrap + overflow:hidden CLIPS the text - 106px of
   label gone at the widest phone container (374px), 134px inside the 334px
   .rework-item. Wrapping is the fix; min-width:0 stops one long label forcing
   the card wider than the viewport. */
.rework-actions[b-zfnccer5y5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.rework-actions > *[b-zfnccer5y5] {
    min-width: 0;
}

/* Wrapping alone is not enough here: "Apply my rewrite - send for SME
   confirmation" is wider than a phone content column all by itself, and
   .ascend-btn's white-space:nowrap + overflow:hidden clips it even on its own
   line. ::deep is required - CssClass lands on the Button COMPONENT's element,
   which carries Button's scope attribute, not this page's, so a plain
   descendant selector here would never match. Scoped to this row only. */
.rework-actions[b-zfnccer5y5]  .ascend-btn {
    white-space: normal;
}

/* ------------------------------------------------------------- admin panel */

.admin-panel[b-zfnccer5y5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.snapshot-table-wrap[b-zfnccer5y5] {
    overflow-x: auto;
}

.snapshot-table[b-zfnccer5y5] {
    width: 100%;
    border-collapse: collapse;
}

.snapshot-table th[b-zfnccer5y5] {
    text-align: left;
    padding: 0.4rem 0.75rem;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(49, 221, 227, 0.2);
}

.snapshot-table td[b-zfnccer5y5] {
    padding: 0.4rem 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-links[b-zfnccer5y5] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-links a[b-zfnccer5y5] {
    color: var(--ascend-accent);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.admin-links a:hover[b-zfnccer5y5] {
    color: var(--ascend-accent-light);
    text-decoration: underline;
}

@media (max-width: 720px) {
    .filter-row select[b-zfnccer5y5],
    .filter-row input[b-zfnccer5y5] {
        min-width: 7rem;
    }

    .claim-cell[b-zfnccer5y5],
    .note-cell[b-zfnccer5y5] {
        max-width: 14rem;
    }
}

/* ------------------------------------------------- #6622 apply form */

.apply-form[b-zfnccer5y5] {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.apply-hint[b-zfnccer5y5] {
    margin: 0 0 0.75rem;
    color: var(--ascend-secondary-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

/* #6624 - the AI-transcription pre-fill label / unmappable warning. */
.apply-hint.ai-hint[b-zfnccer5y5] {
    color: var(--ascend-accent-light);
}

.apply-hint.warn-hint[b-zfnccer5y5] {
    color: #f2b3b3;
}

/* #6624 - the "Transcribe prose corrections" admin action row. */
.transcribe-row[b-zfnccer5y5] {
    margin-bottom: 0.75rem;
}

/* #6624 - the shared ContentFieldEditor carries its own scoped styling; the
   apply form only spaces it. */
.apply-form[b-zfnccer5y5]  .content-field-editor {
    margin-bottom: 0.75rem;
}

/* #6621 owner ruling - the decline stamp in history: a declined correction
   leaves the rework lane; the badge + reason keep the rejection visible. */
.declined-badge[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.1);
    color: #f2b3b3;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.declined-reason[b-zfnccer5y5] {
    display: block;
    margin-top: 0.25rem;
    color: #f2b3b3;
    font-size: 0.8rem;
    max-width: 26rem;
}

/* Bug #6787 - "set aside", not "declined": deliberately NOT the red rejection
   treatment. Nothing was rejected on merit and nothing is wrong with the SME's
   work, so it reads as a neutral lifecycle note. */
.superseded-badge[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.superseded-reason[b-zfnccer5y5] {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    max-width: 26rem;
}

/* Bug #7787 - "withdrawn": the author took a standing proposal back. Same
   neutral treatment as "set aside" (nothing rejected, nothing deleted), with
   the brand-gold tint that marks an act the SME took themselves. */
.superseded-badge.withdrawn-badge[b-zfnccer5y5] {
    border-color: rgba(184, 133, 54, 0.45);
    background: rgba(184, 133, 54, 0.1);
    color: var(--ascend-secondary-light);
}

.withdraw-actions[b-zfnccer5y5] {
    margin-top: 0.75rem;
}

/* Bug #7115 - a RETURN is not a rejection: the work was accepted, it went live,
   and it is coming back to be finished. So it takes the brand-gold "still in
   flight" treatment rather than the red decline treatment - the same reasoning
   #6787 applied to "set aside". */
.returned-reason[b-zfnccer5y5] {
    display: block;
    margin-top: 0.25rem;
    color: var(--ascend-secondary-light);
    font-size: 0.8rem;
    max-width: 26rem;
}

.row-action.return-action[b-zfnccer5y5] {
    border-color: rgba(184, 133, 54, 0.45);
    background: rgba(184, 133, 54, 0.1);
    color: var(--ascend-secondary-light);
}

.row-action.return-action:hover:not(:disabled)[b-zfnccer5y5] {
    background: rgba(184, 133, 54, 0.2);
}

/* Bug #6787 - the remediation panel on the admin card. */
.defective-rulings[b-zfnccer5y5] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ascend-border, rgba(255, 255, 255, 0.12));
}

/* #6621 owner ruling - the shared reason modal (re-open / decline). */
.reason-form[b-zfnccer5y5] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.reason-hint[b-zfnccer5y5] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
}

.reason-label[b-zfnccer5y5] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
}

.reason-input[b-zfnccer5y5] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    resize: vertical;
}

.reason-input:focus[b-zfnccer5y5] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.return-toggle[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    cursor: pointer;
}

/* #6627 - long notes never stretch the grid */
.note-cell[b-zfnccer5y5] {
    display: inline-block;
    max-width: 16.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.rework-note[b-zfnccer5y5] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-view-btn[b-zfnccer5y5] {
    background: none;
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 999px;
    color: var(--ascend-accent);
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    margin-left: 0.35rem;
    cursor: pointer;
    vertical-align: middle;
}

.note-view-btn:hover[b-zfnccer5y5] {
    background: rgba(49, 221, 227, 0.1);
}

/* #8754 - opens a ruled ticket's read-only details from its row. */
.details-btn[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 999px;
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding: 0.2rem 0.7rem;
    margin-top: 0.3rem;
    cursor: pointer;
    white-space: nowrap;
}

.details-btn:hover[b-zfnccer5y5] {
    background: rgba(49, 221, 227, 0.2);
}

@media (hover: none) and (pointer: coarse) {
    .details-btn[b-zfnccer5y5] {
        min-height: var(--touch-target);
    }
}

.note-modal-text[b-zfnccer5y5] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 60vh;
    overflow-y: auto;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* #6629 - admin adjudications stay visible in history but are labeled:
   never SME throughput, never totals, never pay. */
.admin-chip[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.12);
    color: var(--ascend-secondary-light);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* #6629 - a ruling whose source row vanished reads as orphaned evidence,
   visually muted so it never scans as live throughput. */
.state-badge.orphaned[b-zfnccer5y5] {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.15);
    background: transparent;
    color: var(--ascend-text-secondary);
    font-style: italic;
}

/* ------------------------------- PBI #6656 staged-intake release console */

.staged-intake[b-zfnccer5y5] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.staged-table td[b-zfnccer5y5] {
    vertical-align: middle;
}

.release-cell[b-zfnccer5y5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* Bug #7106 walk (2026-08-18) - the whole-group verdicts (Release all / Close
   all) side by side on the row where the tickets are counted. */
.group-verdict-cell[b-zfnccer5y5] {
    white-space: nowrap;
}

.group-verdict-cell[b-zfnccer5y5]  button + button {
    margin-left: 0.5rem;
}

.release-count-input[b-zfnccer5y5] {
    width: 5.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: var(--ascend-text, rgba(255, 255, 255, 0.9));
    padding: 0.35rem 0.5rem;
    font-family: var(--ascend-font-secondary);
}

.release-count-input:focus[b-zfnccer5y5] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
}

/* PBI #6655 - the remove-now destructive exit sits after the soft exits. */
.retire-now-button[b-zfnccer5y5] {
    margin-left: auto;
}

/* Owner canary 2026-07-29: prose/manifest groups have no machine-checkable
   items - a quiet label replaces the do-nothing Verify button. */
.verify-na[b-zfnccer5y5] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: normal;
    margin-left: 0.4rem;
    white-space: nowrap;
}

/* Bug #7106 - the per-ticket close list under each staged group. */
.staged-tickets-details[b-zfnccer5y5] {
    margin: 0.5rem 0 0;
}

.staged-tickets-details summary[b-zfnccer5y5] {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.staged-ticket-list[b-zfnccer5y5] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.staged-ticket-list li[b-zfnccer5y5] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.4rem;
}

.staged-ticket-claim[b-zfnccer5y5] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    word-break: break-word;
}

/* Bug #7132 - the required-content gap block on the apply form: the blank
   fields named, plus the return-to-author exit for proposal accepts. */
.required-gap[b-zfnccer5y5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* PBI #8050 - "verifier overridden": a named expert overruled a machine refusal
   on this ruling. Deliberately NOT the red rejection treatment (nothing was
   rejected and the SME did nothing wrong) and deliberately NOT quiet either -
   it is the brand-gold tint that marks an act the expert took themselves, the
   same treatment as a withdrawal, because the one thing it must never be is
   invisible. */
.overridden-badge[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(184, 133, 54, 0.45);
    background: rgba(184, 133, 54, 0.1);
    color: var(--ascend-secondary-light);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.overridden-reason[b-zfnccer5y5] {
    display: block;
    margin-top: 0.25rem;
    color: var(--ascend-secondary-light);
    font-size: 0.8rem;
    max-width: 26rem;
}

/* The refusal that was overruled. Muted beside the expert's reason: it is the
   evidence a later reader weighs, not the headline. */
.overridden-refutation[b-zfnccer5y5] {
    /* Bug #9312 - two wrapped lines, not one nowrap line: as one unbreakable
       26rem line it was the note column's min-content, so at 1440 the table ran
       to 1,306px in a 1,018px card and the note and action columns sat behind
       the card edge. break-word (not anywhere) keeps a long token inside the
       column without shrinking its min-content (the #8054 trap). The title
       carries the whole refusal. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.76rem;
    max-width: 26rem;
    overflow: hidden;
    overflow-wrap: break-word;
}

/* Bug #8078 - a HELD Confirm in the apply lane (decisions 18 and 35): the
   proposer's own Confirm, or one that went through a service account, waiting
   on the owner's second key. Cyan (informational), distinct from the gold
   admin chip and the verifier-overridden badge.
   Bug #8325 - the neutral "waiting on the owner" chip an SME sees on every
   peer row waiting on the owner (decision 44) wears the same shape and color. */
.four-eyes-chip[b-zfnccer5y5],
.waiting-on-owner-chip[b-zfnccer5y5] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(49, 221, 227, 0.5);
    background: rgba(49, 221, 227, 0.1);
    color: var(--ascend-accent-light);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Not clamped like a free-text note: it is one fixed sentence the owner must
   read whole, and at phone width the two-line clamp cut it mid-thought. */
.four-eyes-note[b-zfnccer5y5] {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    color: var(--ascend-accent-light);
}

/* Defect #8512 - the success receipt repeated at the rework-lane landing point.
   The region is plain block flow, so it needs its own gap above the lane. */
.lane-action-notice[b-zfnccer5y5] {
    margin-bottom: 1rem;
}

/* #8081 - the owner console split's two pointers (rendered only while the split is
   live, so the flag-off page is untouched): a link on a dark surface needs the accent. */
.console-pointer a[b-zfnccer5y5] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* #8084 SME-THREAD - the reply thread opened under an apply-lane entry. */
.reply-thread[b-zfnccer5y5] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
}

/* PBI #8048 - a rework-lane proposal that is a move: accepting it also takes the original row out
   of its catalog. Gold, the register of an action that ends in a row leaving. Its OWN class, never
   .rework-note: that one clamps to two lines, and on a phone it cut this sentence off before "in
   the same step" (seen on the 390 walk). What an accept also does is read in full. */
.move-note[b-zfnccer5y5] {
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

/* #8087 SME-DRAFT slice 3 - the apply lane's fail-closed line when the drafting record could not be read:
   the same warm caution as the AI first draft label, as wrapping text (it is a sentence, not a chip). */
.ai-draft-unchecked[b-zfnccer5y5] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.15rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--ascend-warning) 60%, transparent);
    background: color-mix(in srgb, var(--ascend-warning) 14%, transparent);
    color: var(--ascend-warning);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

/* #8926 - the reinstate dialog: the SME's note, the fields, and the drill positions the admin keeps.
   The list scrolls inside the dialog so ten positions with their FENs fit a 344px phone. */
.reinstate-preview[b-zfnccer5y5] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
    margin: 0 0 1rem;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.reinstate-note[b-zfnccer5y5] {
    margin: 0;
}

.reinstate-warn[b-zfnccer5y5] {
    margin: 0;
    color: var(--ascend-warning);
}

.reinstate-label[b-zfnccer5y5] {
    font-weight: 600;
}

.reinstate-drills[b-zfnccer5y5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    max-height: 40vh;
    overflow-y: auto;
}

.reinstate-drill[b-zfnccer5y5] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0;
    cursor: pointer;
}

.reinstate-drill input[type="checkbox"][b-zfnccer5y5] {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

.reinstate-drill.removed[b-zfnccer5y5] {
    cursor: default;
    color: var(--ascend-text-secondary);
}

.reinstate-drill-text[b-zfnccer5y5] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.reinstate-drill-line[b-zfnccer5y5] {
    color: var(--ascend-text-secondary);
}

.reinstate-drill-fen[b-zfnccer5y5] {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--ascend-text-secondary);
}

.reinstate-hint[b-zfnccer5y5] {
    margin: 0;
    color: var(--ascend-text-secondary);
}

/* The value now and the SME's value for each field the correction would change. A list's items are one per line. */
.reinstate-values[b-zfnccer5y5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.reinstate-value[b-zfnccer5y5] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.reinstate-value-text[b-zfnccer5y5] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.reinstate-value-name[b-zfnccer5y5] {
    color: var(--ascend-text-secondary);
}

.reinstate-drill-withheld[b-zfnccer5y5] {
    color: var(--ascend-warning);
}
/* /Components/Pages/Sme/SmeThreadPanel.razor.rz.scp.css */
/* #8084 SME-THREAD - one conversation. Tokens only. The shared Card and Button are child
   components, so their insides are reached with ::deep (ScopedCssChildComponentClassTests). */

.thread[b-4qqjajfcyq] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.thread-heading[b-4qqjajfcyq] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.thread-messages[b-4qqjajfcyq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.thread-message[b-4qqjajfcyq] {
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    min-width: 0;
}

/* The other side's words sit on a faint tint, so whose turn it was reads at a glance. */
.thread-message.theirs[b-4qqjajfcyq] {
    background: rgba(255, 255, 255, 0.04);
}

.thread-meta[b-4qqjajfcyq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    font-size: 0.8rem;
}

.thread-author[b-4qqjajfcyq] {
    color: var(--ascend-text-light);
    font-weight: 600;
}

.thread-time[b-4qqjajfcyq] {
    color: var(--ascend-text-muted);
}

.thread-new[b-4qqjajfcyq] {
    padding: 0 0.45rem;
    border: 1px solid var(--ascend-accent);
    border-radius: 999px;
    color: var(--ascend-accent);
    font-size: 0.72rem;
}

/* The writer's own line breaks, kept; long unbroken tokens (FENs, links) break anywhere. */
.thread-body[b-4qqjajfcyq] {
    margin: 0.3rem 0 0;
    color: var(--ascend-text-light);
    font-size: 0.9rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.thread-composer[b-4qqjajfcyq] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.thread-label[b-4qqjajfcyq] {
    color: var(--ascend-text-light);
    font-size: 0.85rem;
}

.thread-input[b-4qqjajfcyq] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--ascend-text-light);
    font-family: inherit;
    /* 16px keeps a phone from zooming the page when the box takes focus. */
    font-size: 1rem;
    resize: vertical;
}

.thread-input:focus[b-4qqjajfcyq] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 1px;
}

.thread-actions[b-4qqjajfcyq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.thread-hint[b-4qqjajfcyq] {
    margin: 0;
    color: var(--ascend-text-secondary);
    font-size: 0.8rem;
}

.thread-error[b-4qqjajfcyq] {
    margin: 0;
    color: var(--ascend-error-light);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.thread-notice[b-4qqjajfcyq] {
    margin: 0;
    color: var(--ascend-accent-light);
    font-size: 0.85rem;
}
/* /Components/Pages/Sme/SmeTimeLog.razor.rz.scp.css */
.sme-time-log-page[b-ytzmwobjco] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.stl-form[b-ytzmwobjco] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.stl-form h3[b-ytzmwobjco] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    color: var(--ascend-text-light);
}

.stl-form label[b-ytzmwobjco] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    flex: 1;
}

.stl-row[b-ytzmwobjco] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    align-items: flex-end;
}

.stl-input[b-ytzmwobjco] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-family: inherit;
}

.stl-input:focus[b-ytzmwobjco] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
}

.stl-num[b-ytzmwobjco] {
    max-width: 7rem;
}

.stl-error[b-ytzmwobjco] {
    color: var(--ascend-error);
    margin: 0;
}

.stl-grid[b-ytzmwobjco] {
    padding: var(--space-sm);
}

.stl-grid[b-ytzmwobjco]  table {
    width: 100%;
}

.stl-grid[b-ytzmwobjco]  .stl-col-note {
    max-width: 24rem;
}

.stl-link[b-ytzmwobjco] {
    background: none;
    border: none;
    color: var(--ascend-accent);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0 var(--space-xs);
}

.stl-danger[b-ytzmwobjco] {
    color: var(--ascend-error);
}

/* #8089 SME-MOBILE review round 1 - live, on a phone an entry is a card (the shared
   .responsive-table.grid-cards utility in app.css). Edit and Delete become the card's own
   row of actions, and each is a thumb-sized target there rather than a bare text link. */
@media (max-width: 768px) {
    .stl-grid.grid-cards .stl-link[b-ytzmwobjco] {
        min-height: 2.75rem;
        padding: 0 0.75rem;
    }
}
/* /Components/Pages/Sme/SmeWorkbench.razor.rz.scp.css */
/* #6522 SME review workbench - focused review loop styling. Tokens only. */

.sme-workbench-page[b-teuccojb9g] {
    outline: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ------------------------------------------------------------- queue view */

.queue-summary[b-teuccojb9g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.summary-chip[b-teuccojb9g] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(49, 221, 227, 0.25);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.summary-chip strong[b-teuccojb9g] {
    color: var(--ascend-accent);
    font-size: 1rem;
}

.summary-chip.stale[b-teuccojb9g] {
    border-color: rgba(245, 158, 11, 0.5);
}

.summary-chip.stale strong[b-teuccojb9g] {
    color: var(--ascend-warning);
}

.queue-summary[b-teuccojb9g]  .start-button {
    margin-left: auto;
}

.queue-grid-wrap[b-teuccojb9g] {
    overflow-x: auto;
}

/* Bug #8281 - FIXED layout, not content-sized. Under auto layout the table's
   used width is max(100%, its own min-content), so any cell that refuses to
   shrink widens the whole table past the scroller and takes Review with it.
   Measured on this worktree at 1440: a 1365px table inside a 1028px column,
   with the Review button's center resolving to NOTHING under
   document.elementFromPoint. Fixed layout makes 100% mean 100%: the column
   shares below are of THIS table's width, so no cell's content can ever push
   another column past the visible edge. The columns still land at the same x
   on every row, which is what the owner's 2026-08-02 table design is for. */
.queue-grid-wrap[b-teuccojb9g]  table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.85);
}

.queue-grid-wrap[b-teuccojb9g]  th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-text-muted);
    border-bottom: 1px solid rgba(49, 221, 227, 0.2);
}

.queue-grid-wrap[b-teuccojb9g]  td {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

/* The column geometry. The claim still absorbs every spare pixel, and the type
   chip, the age and the Review button still land at the SAME x on every row -
   which is the entire point of the table.

   Bug #8281 - WHAT CHANGED AND WHY. These were `width: 99%` on the claim and
   `width: 1%` + nowrap on the other three: the shrink-to-fit idiom, which sizes
   a column to its own CONTENT. That is what put Review past the edge. Measured
   here on a ticket carrying every qualifier it can earn (directed, own
   proposal, Dynamic, Rework, Sighted n, Returned n): the Type column took 565px
   on one no-wrap line at EVERY width, so Type + Waiting + Review alone came to
   789px inside the 788px column a 1200px window leaves after the nav rail.
   At that point no cap on the claim can help - the claim column could be ZERO
   and the table would still not fit, which is why the filed "cap the claim at
   its column instead of at 38vw" is necessary but not sufficient (it left 180px
   of overflow at 1440 and 329px at 1200 when measured on its own).

   So the shares below are of the TABLE, under `table-layout: fixed`: Waiting
   and Review are given the room their controls actually need in rem, Type takes
   a share and wraps its rare extra chips onto a second line rather than pushing
   its neighbors off the page, and the claim takes what is left. The cost, named
   because it is the owner's 2026-08-02 design it spends: a ticket carrying five
   or more qualifier chips is now two or three lines tall instead of one. The
   ordinary ticket - one type badge - is still a single ~44px line, measured. */
.queue-grid-wrap[b-teuccojb9g]  .col-claim {
    width: auto;
}

.queue-grid-wrap[b-teuccojb9g]  .col-type {
    width: 28%;
}

.queue-grid-wrap[b-teuccojb9g]  .col-waiting {
    width: 5.5rem;
    white-space: nowrap;
}

.queue-grid-wrap[b-teuccojb9g]  .col-review {
    width: 11.5rem;
    white-space: nowrap;
}

.queue-grid-wrap[b-teuccojb9g]  .col-waiting {
    text-align: right;
    /* Equal-width digits: "16d 15h" and "3d 4h" stack into a readable column. */
    font-variant-numeric: tabular-nums;
}

.queue-age.stale[b-teuccojb9g] {
    color: var(--ascend-warning);
}

.take-button[b-teuccojb9g] {
    padding: 0.35rem 1.1rem;
    border-radius: 50px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.12);
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.take-button:hover:not(:disabled)[b-teuccojb9g] {
    background: rgba(49, 221, 227, 0.25);
    transform: translateY(-1px);
}

.take-button:disabled[b-teuccojb9g] {
    opacity: 0.5;
    cursor: default;
}

/* #6536 - hand a held item back to the pool. Quieter than the take action. */
.release-button[b-teuccojb9g] {
    margin-left: 0.5rem;
    padding: 0.35rem 1.1rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.release-button:hover:not(:disabled)[b-teuccojb9g] {
    background: rgba(255, 255, 255, 0.12);
}

.release-button:disabled[b-teuccojb9g] {
    opacity: 0.5;
    cursor: default;
}

/* #6550 - Admin assign control on pending rows.
   Bug #8281 - a select is as wide as its longest option, so one long roster
   name would overhang the Review column. The card layout already capped it;
   the table needs the same cap, and `min-width: 0` is what lets a flex item
   shrink below its content at all. */
.assign-select[b-teuccojb9g] {
    max-width: 100%;
    min-width: 0;
    margin-left: 0.5rem;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.assign-select:disabled[b-teuccojb9g] {
    opacity: 0.5;
    cursor: default;
}

.assign-select:focus[b-teuccojb9g] {
    outline: none;
    border-color: var(--ascend-accent);
}

/* Owner canary 2026-08-02: the actions start at the LEFT of their column so the
   Review button lines up down the page. Right-aligned they did not: a row with
   Release or Assign pushed Review off the column edge.

   Bug #8281 - they no longer stay on one line. Under the fixed layout above the
   column is a known width, so a second control (Release on a held ticket, or an
   admin's Assign) drops BELOW Review instead of overhanging the table. Review
   itself is first, so it keeps its x on every row either way. */
.action-cell[b-teuccojb9g] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
    white-space: nowrap;
}

.action-cell .release-button[b-teuccojb9g],
.action-cell .assign-select[b-teuccojb9g] {
    margin-left: 0;
}

/* Defect #8513 (child of #8281) - an ADMIN's ordinary ticket is one line too.

   The 11.5rem Review column above is room for Review, not for Review plus the
   admin's Assign select. Measured in a worktree as verify-admin@ at 1200,
   1280 and 1440: the select dropped under Review on EVERY pending row, so
   every ordinary ticket was 73px tall against 35px for an SME.

   So when the viewer gets the select (`can-assign`, set from the same
   condition the select renders under), the Review column takes the room
   Review + gap + select need, and that room comes out of the CLAIM column
   (width: auto, it takes whatever is left), never out of Type. Type keeps
   its 28% share for both roles because the most common real ticket carries
   TWO chips: every intake stamps AiClaim, UserQuestion and CustomTask
   Dynamic, so an AI claim is always "AI Claim" + "Dynamic". An admin-only
   24% Type column was tried first and, measured at 1200 with realistic data,
   it put that pair on two lines for an admin (68px) while the SME's 28% held
   it (35px) - the same asymmetry this defect is about, moved to another
   column. The claim pays instead: 232px at 1200 for an admin against 288px
   for an SME, truncated with the full text on its title as before.

   The select is sized by the column, not by its options, because a select is
   as wide as its LONGEST option: one long roster name widened it to 363px. A
   fixed cap is not enough on its own - measured with a 54-character name,
   Review (80px) + gap + a 7.5rem select came to 208px against a 203px cell at
   14.5rem and wrapped again - so the select takes a zero basis and grows into
   what is left (below). The closed select only ever shows "Assign to...",
   and the open list still shows every name in full.

   Table mode only. Below the #8259 container threshold the queue is cards,
   where the actions dropping to their own line is the card's design - and
   these rules would otherwise out-rank the card block's `width: auto`. The
   SME view (no `can-assign`) is untouched at every width. */
@container sme-queue (width > 700px) {
    .queue-grid-wrap[b-teuccojb9g]  table.can-assign .col-review {
        width: 15rem;
    }

    /* A zero flex basis, so the select never decides the line break by its
       longest roster name; it grows into what is left beside Review, up to
       7.5rem, and only a column too narrow for 6.5rem (enough for "Assign
       to...") would ever drop it to a second line. */
    .queue-grid-wrap[b-teuccojb9g]  table.can-assign .assign-select {
        flex: 1 1 0;
        min-width: 6.5rem;
        max-width: 7.5rem;
    }
}

.queue-page-note[b-teuccojb9g] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Paginator theming moved to the GLOBAL owner (#6859): the mask-based
   dark re-skin this page pioneered (canary 2026-07-17, "controls are
   black") now lives in wwwroot/css/SharedPages.css and covers every
   QuickGrid Paginator sitewide. Do not re-theme it here - page rules
   would shadow the shared chrome. */

/* --------------------------------------------------------- review surface */

.review-surface[b-teuccojb9g] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.25rem;
    align-items: start;
}

.review-context-column[b-teuccojb9g] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.review-ruling-column[b-teuccojb9g] {
    min-width: 0;
}

/* The workbench's own board hint and the review panes' (#8083 review round 1: the panes are
   child components, so a bare rule never reached their hint). */
.board-hint[b-teuccojb9g],
[b-teuccojb9g] .board-hint {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.item-meta-row[b-teuccojb9g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.kind-badge[b-teuccojb9g] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(184, 133, 54, 0.5);
    color: var(--ascend-secondary-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* #6536 - static|dynamic check-class badge (page + inside panes). */
.check-badge[b-teuccojb9g],
.review-context-column[b-teuccojb9g]  .check-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.check-badge.static[b-teuccojb9g] {
    border: 1px solid rgba(49, 221, 227, 0.5);
    color: var(--ascend-accent);
}

.check-badge.dynamic[b-teuccojb9g] {
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #c084fc;
}

/* #6547 - spirit sign-off disposition badge (queue grid + review meta row).
   Check-badge silhouette, gold family: backfill provenance work, not a defect. */
.disposition-badge[b-teuccojb9g] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.disposition-badge.spirit[b-teuccojb9g] {
    border: 1px solid rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.1);
    color: var(--ascend-secondary-light);
}

/* #6621 - lifecycle follow-up tickets (applied correction / re-open). */
.disposition-badge.rework[b-teuccojb9g] {
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
    color: var(--ascend-accent-light);
}

/* #6621 - the queue summary's link over to the lifecycle surface. */
a.summary-chip.history-link[b-teuccojb9g] {
    text-decoration: none;
    cursor: pointer;
}

a.summary-chip.history-link:hover[b-teuccojb9g] {
    border-color: rgba(49, 221, 227, 0.5);
    color: var(--ascend-accent-light);
}

.summary-chip.spirit[b-teuccojb9g] {
    border-color: rgba(184, 133, 54, 0.4);
}

.summary-chip.spirit strong[b-teuccojb9g] {
    color: var(--ascend-secondary-light);
}

.meta-chip[b-teuccojb9g] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.claim-heading[b-teuccojb9g] {
    margin: 1rem 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-accent);
}

.claim-heading:first-of-type[b-teuccojb9g] {
    margin-top: 0;
}

.claim-text[b-teuccojb9g] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* #8101, owner decision 134 - a coach's notes on a flagged claim: plain text, line breaks
   kept, long words wrapped so a note never widens the pane. */
.coach-flag[b-teuccojb9g] {
    margin-top: 1rem;
}

.coach-flag-sender[b-teuccojb9g] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.coach-flag-notes[b-teuccojb9g] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.coach-flag-note[b-teuccojb9g] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid rgba(255, 255, 255, 0.28);
    font-family: var(--ascend-font-secondary);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.context-list[b-teuccojb9g] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.35rem 1rem;
}

.context-list dt[b-teuccojb9g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.context-list dd[b-teuccojb9g] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* ------------------------------------------------------------ ruling card */

.ruling-actions[b-teuccojb9g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* PBI #6520 ext - the retirement proposal action: a gold accent so it reads
   as the exceptional exit, never the default verdict. */
.ruling-actions[b-teuccojb9g]  .retire-button {
    border-color: rgba(184, 133, 54, 0.45);
    color: var(--ascend-secondary-light);
}

.ruling-actions[b-teuccojb9g]  .retire-button:hover:not(:disabled) {
    background: rgba(184, 133, 54, 0.12);
}

.note-row[b-teuccojb9g],
.correction-form[b-teuccojb9g] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.note-row label[b-teuccojb9g],
.correction-form label[b-teuccojb9g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.note-input[b-teuccojb9g],
.correction-input[b-teuccojb9g] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.7rem 0.9rem;
    resize: vertical;
}

.note-input:focus[b-teuccojb9g],
.correction-input:focus[b-teuccojb9g] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.correction-form .ruling-actions[b-teuccojb9g] {
    margin: 0.75rem 0 0;
}

/* PBI #8971 - the answer form on a ticket that carries a research answer: what the ruling will
   record the answer as (approved as written, edited, or written by the expert), with a one-tap way
   back to the research answer after an edit, and the store's length limit said at the field. */
.answer-origin-row[b-teuccojb9g] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.answer-origin[b-teuccojb9g] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-muted);
}

.answer-length-error[b-teuccojb9g] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

/* Bug #8764 - unplaceable / unfinished positions in the field correction form.
   Same SHAPE the review panes use for theirs (SmeProposals.razor.css) but a name
   of its own: this list lives in this page's markup, and `.pane-rule-errors` is a
   class the child review panes write on THEIR markup, so a scoped rule here could
   never reach those and the ScopedCssChildComponentClass ratchet rightly refuses
   it. A distinct class is the honest fix - ::deep would reach INTO the children
   and restyle lists this page does not own. */
.correction-form .position-error-list[b-teuccojb9g] {
    color: var(--ascend-error);
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

.action-error[b-teuccojb9g] {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.ruling-footer[b-teuccojb9g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.link-button[b-teuccojb9g] {
    background: none;
    border: none;
    padding: 0;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link-button:hover[b-teuccojb9g] {
    color: var(--ascend-accent-light);
}

.session-count[b-teuccojb9g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.keyboard-hint[b-teuccojb9g] {
    margin: 1rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-text-muted);
}

.keyboard-hint kbd[b-teuccojb9g] {
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    border: 1px solid rgba(49, 221, 227, 0.3);
    background: rgba(255, 255, 255, 0.06);
    color: var(--ascend-accent);
    font-size: 0.7rem;
}

.structured-hint[b-teuccojb9g] {
    margin: 0 0 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-muted);
}

/* --------------------------------------------- per-kind review panes (#6537)
   The panes are child components; ::deep from the context column styles them
   once instead of four duplicated scoped stylesheets. Tokens only. */

.review-context-column[b-teuccojb9g]  .plan-pane {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* #8087 SME-DRAFT slice 2 - the AI first draft label under the Tabiya pane's title. */
.review-context-column[b-teuccojb9g]  .pane-draft-label {
    margin: 0.25rem 0 0.5rem;
}

.review-context-column[b-teuccojb9g]  .pane-heading {
    margin: 0 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.95);
}

.review-context-column[b-teuccojb9g]  .pane-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.review-context-column[b-teuccojb9g]  .pane-subheading {
    margin: 1rem 0 0.4rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-accent);
}

.review-context-column[b-teuccojb9g]  .pane-text {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.review-context-column[b-teuccojb9g]  .pane-mono {
    font-family: monospace;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.review-context-column[b-teuccojb9g]  .pane-bucket-name {
    margin-top: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: capitalize;
    color: var(--ascend-secondary-light);
}

.review-context-column[b-teuccojb9g]  .pane-list {
    margin: 0.25rem 0 0.5rem;
    padding-left: 1.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.review-context-column[b-teuccojb9g]  .pane-sources {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
}

.review-context-column[b-teuccojb9g]  .pane-sources a,
/* #8088 review round 1 - a model game's title, linked by its URL, in the live plain list. */
.review-context-column[b-teuccojb9g]  .pane-list a {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.review-context-column[b-teuccojb9g]  .pane-source-type,
.review-context-column[b-teuccojb9g]  .pane-source-ref {
    color: var(--ascend-text-muted);
    font-size: 0.8rem;
}

.review-context-column[b-teuccojb9g]  .pane-source-ref {
    margin: 0.5rem 0 0;
    font-family: var(--ascend-font-secondary);
}

.review-context-column[b-teuccojb9g]  .pane-empty {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-warning);
}

.review-context-column[b-teuccojb9g]  .pane-error {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.review-context-column[b-teuccojb9g]  .correction-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.review-context-column[b-teuccojb9g]  .correction-form label {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.review-context-column[b-teuccojb9g]  .correction-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.7rem 0.9rem;
    resize: vertical;
}

.review-context-column[b-teuccojb9g]  .correction-form textarea:focus {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.review-context-column[b-teuccojb9g]  .correction-form textarea.pane-mono {
    font-family: monospace;
}

.review-context-column[b-teuccojb9g]  .correction-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.review-context-column[b-teuccojb9g]  .pane-fen-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.review-context-column[b-teuccojb9g]  .pane-fen-button {
    padding: 0.25rem 0.9rem;
    border-radius: 50px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.12);
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}

.review-context-column[b-teuccojb9g]  .pane-fen-button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .review-surface[b-teuccojb9g] {
        grid-template-columns: 1fr;
    }

    .queue-summary[b-teuccojb9g]  .start-button {
        margin-left: 0;
    }
}

/* #8089 SME-MOBILE - THE RULING BAR. Below the tablet band the review surface is one column:
   board, then the claim card, then the content pane, then the ruling card. Measured at 344x800
   and 390x844 with touch emulation, the Confirm button opened 1,110 to 2,417 px down (1.3 to 3
   screens): an SME read the claim, then hunted for the verdict. Live, the verdicts (and the
   own-proposal hint that must be read before them) ride in .ruling-bar, and here it is pinned to
   the bottom of the screen, the BlunderDrill .drill-advance-row precedent: in reach while the
   claim, the board and the content are read, so the item's first screen holds the verdict.
   Dark there is no .ruling-bar, so nothing here applies. DESKTOP IS UNTOUCHED: every rule is
   inside max-width: 768px (at 769-900 the nav rail is on screen, and a viewport-wide fixed bar
   would sit across it).

   - The background is OPAQUE (--ascend-bg-card), not BlunderDrill's gradient: axe cannot decide
     text on a gradient (#7862), and the hint is text.
   - .has-ruling-bar reserves room under the surface's last line, so the bar never covers the
     note, the hand-back or the thread composer at the bottom of the page. With the hint the bar
     is taller, so it reserves more.
   - Fields keep clear of it when the browser scrolls one into view on focus.
   - The feedback button yields to the bar through data-fab-avoid (feedback-fab.js, #8073).
   - scroll-margin-top lands sme-ruling-bar.js's reveal below the fixed mobile header, from the
     header height the layout publishes (--app-content-top), not a number here. */
@media (max-width: 768px) {
    .ruling-bar[b-teuccojb9g] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: flex;
        flex-direction: column;
        max-height: 50vh;
        overflow-y: auto;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: var(--ascend-bg-card);
        border-top: 2px solid rgba(49, 221, 227, 0.3);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.55);
    }

    /* The shared Card carries backdrop-filter, and a backdrop-filter makes its box the containing
       block of every position: fixed descendant: measured, the bar "fixed" itself to the ruling
       card, 1,300px down the page. The Card is opaque since #7543, so the blur draws nothing; it
       is dropped from the ruling card only, only while the bar is in it, only here. */
    /* PBI #8049 (found on its phone walk) - and the card may not TRANSFORM while the bar is in it.
       The global .dashboard-card:hover lifts a card with translateY(-2px); a touch leaves :hover on
       what was tapped; and a transform makes the card the containing block of the fixed bar exactly
       as the backdrop-filter did. Measured at 390x844 with touch emulation: the first tap on
       anything inside the ruling card pulled the bar off the bottom edge into the card between the
       touch and its click, and the click of a tap on "Raise another item" landed on Confirm. */
    .review-surface.has-ruling-bar[b-teuccojb9g]  .ruling-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: none;
    }

    .ruling-bar .ruling-actions[b-teuccojb9g] {
        flex: none;
        gap: 0.5rem;
        margin-bottom: 0;
    }

    /* Review round 1 - the result of the last tap (the Undo of the last ruling, a notice, a
       refusal) rides in the bar, above the hint and the verdicts, so it is on the first screen
       next to the button that produced it. When the bar would run past its max-height, the result
       shrinks and scrolls inside itself: the hint and the verdicts never leave the bar. */
    .ruling-bar .ruling-status[b-teuccojb9g] {
        flex: 0 1 auto;
        min-height: 2.5rem;
        overflow-y: auto;
        margin-bottom: 0.5rem;
    }

    .ruling-bar .ruling-status[b-teuccojb9g]  .flow-undo,
    .ruling-bar .ruling-status .action-notice[b-teuccojb9g],
    .ruling-bar .ruling-status .action-error[b-teuccojb9g] {
        margin: 0 0 0.4rem;
        font-size: 0.8rem;
    }

    .ruling-bar .four-eyes-hint[b-teuccojb9g] {
        flex: none;
    }

    /* Two or three verdicts on a phone: they share rows and wrap, each a real thumb target rather
       than shrunk to fit. Tighter side padding than the shared button's 1.5rem lets Needs
       correction and Propose retirement share the second row at 390 (measured: two rows, a 122px bar
       on an 844px screen). At 344 they need a row each: three rows, a 174px bar on 800. The room
       reserved under the surface (12rem = 192px, 20rem with the hint) covers both. */
    .ruling-bar .ruling-actions[b-teuccojb9g]  .ascend-btn {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }

    .ruling-bar .four-eyes-hint[b-teuccojb9g] {
        margin-bottom: 0.5rem;
        font-size: 0.8rem;
    }

    /* Review round 1 - ONE value, --ruling-bar-room, is both the room under the surface's last
       line and the clearance a focused field keeps from the bar. Two separate numbers drifted: the
       hint raised the padding to 20rem while a focused field still stopped 12rem up, about 93px
       under the 285px hinted bar at 344. Each class raises the value for what makes the bar
       taller; sme-ruling-bar.js (fit) overwrites it on the surface with the bar's measured height,
       so these numbers are only the no-script fallback. */
    .review-surface.has-ruling-bar[b-teuccojb9g] {
        --ruling-bar-room: 12rem;
        padding-bottom: var(--ruling-bar-room, 12rem);
    }

    .review-surface.has-ruling-bar.has-ruling-bar-hint[b-teuccojb9g] {
        --ruling-bar-room: 20rem;
    }

    .review-surface.has-ruling-bar.has-ruling-bar-status[b-teuccojb9g] {
        --ruling-bar-room: 22rem;
    }

    .review-surface.has-ruling-bar.has-ruling-bar-hint.has-ruling-bar-status[b-teuccojb9g] {
        --ruling-bar-room: 30rem;
    }

    .review-surface.has-ruling-bar[b-teuccojb9g]  input,
    .review-surface.has-ruling-bar[b-teuccojb9g]  textarea,
    .review-surface.has-ruling-bar[b-teuccojb9g]  select {
        scroll-margin-bottom: var(--ruling-bar-room, 12rem);
    }

    .review-surface[b-teuccojb9g],
    .review-surface[b-teuccojb9g]  .correction-form,
    .ruling-status[b-teuccojb9g] {
        scroll-margin-top: var(--app-content-top, 4.5rem);
    }
}

/* #6621 owner ruling - the admin's return/decline reason on a returned ticket:
   the first thing the SME sees, above the claim. */
.admin-return-banner[b-teuccojb9g] {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.12);
}

.admin-return-banner .banner-label[b-teuccojb9g] {
    display: block;
    color: var(--ascend-secondary-light);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.admin-return-banner .banner-reason[b-teuccojb9g] {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
}

/* Bug #6972 - prior-ruling note on an explicitly requested re-review. Cyan
   accent (informational history) vs the gold admin-return banner (action). */
.prior-ruling-banner[b-teuccojb9g] {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
}

.prior-ruling-banner .banner-label[b-teuccojb9g] {
    display: block;
    color: var(--ascend-accent-light);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.prior-ruling-banner .banner-reason[b-teuccojb9g] {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
}

/* #6640 re-canary (owner ask) - queue filter bar. Mirrors the Games.razor
   .filter-bar/.filter-select pattern with brand tokens. */
.filter-bar[b-teuccojb9g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
    justify-content: space-between;
}

.filter-group[b-teuccojb9g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.filter-select[b-teuccojb9g],
.filter-input[b-teuccojb9g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    min-height: 2rem;
    padding: 0 0.6rem;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.filter-select:focus[b-teuccojb9g],
.filter-input:focus[b-teuccojb9g] {
    border-color: rgba(49, 221, 227, 0.5);
}

.filter-select option[b-teuccojb9g] {
    background: var(--ascend-bg-dark);
    color: #ffffff;
}

.filter-input[b-teuccojb9g] {
    width: 11rem;
}

.filter-count[b-teuccojb9g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Honest empty-FILTER state - the queue is not clear, the filters just
   exclude everything. */
.filter-empty[b-teuccojb9g] {
    margin: 0.5rem 0 0;
    padding: 1rem;
    border-radius: 12px;
    border: 1px dashed rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    text-align: center;
}

/* #6722 - pre-release gate verdict line, visible on ticket open */
.prerelease-verdict[b-teuccojb9g] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--ascend-secondary);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.prerelease-verdict.advisory[b-teuccojb9g] {
    border-left-color: var(--ascend-accent);
}

.prerelease-label[b-teuccojb9g] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-right: 0.4rem;
}

/* ------------------------------------------------------------------------
   The queue row: ONE TICKET, ONE LINE, FOUR COLUMNS. A subject-grouping layer
   used to nest tickets under a shared-contentKey heading with count chips,
   moot/depends badges and a subject rail; it was removed (owner canary
   2026-08-02), which left every fact crammed into a single Claim cell behind a
   variable-length label - nothing lined up, nothing could be scanned. The facts
   now sit in Claim | Type | Waiting | Review, one ~44px line per ticket.
   ------------------------------------------------------------------------ */

/* The tr carries this from QuickGrid's RowClass, so it lives past ::deep - the
   grid's own markup does not carry this page's scope attribute. */
.queue-grid-wrap[b-teuccojb9g]  tr.queue-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.queue-label[b-teuccojb9g] {
    display: block;
    /* The cap is what keeps the Claim readable rather than a wall of text; it
       truncates and the full text stays on the title attribute.

       Bug #8281 - this was `min(42rem, 38vw)`, a VIEWPORT fraction, and the
       viewport is not the column: from 769px up the nav rail takes ~350px, so
       38vw was 547px of cap inside a 1028px column at 1440 and 456px inside a
       788px column at 1200 - which is why the narrower window overflowed WORSE
       (486px against 337px). `100%` is the column, whatever the rail leaves,
       and under `table-layout: fixed` above it is a real bound rather than a
       hint the table can grow past. The 42rem ceiling stays so the claim does
       not run the full width of a very wide window. */
    max-width: min(42rem, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: var(--ascend-accent-light);
    letter-spacing: 0.02em;
}

/* The raw contentKey is a key, not a title - when nothing readable exists it
   renders as the key it is instead of masquerading as a name. */
.queue-label.is-key[b-teuccojb9g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-muted);
    letter-spacing: 0.04em;
}

/* The Type cell: the varying type chip, then the rare qualifiers.

   Bug #8281 - it WRAPS now. It used to be one line on the reasoning that a
   marker must never push the row taller; the price was that a marker pushed
   Review off the page instead, which costs a paid reviewer the click rather
   than costing the page 35px. A chip is the ticket saying something true about
   itself, so it is never clipped and never hidden - it moves to the next line.
   The type badge is still first and the "For you" chip still second (#8259), so
   the two a reviewer scans for stay on the first line at every width. */
.type-cell[b-teuccojb9g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.queue-age[b-teuccojb9g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
    white-space: nowrap;
}

/* ---- Bug #8259: in a narrow column the queue STOPS BEING A TABLE ----------

   THE BUG, measured on dev in the 2.0 first-deploy walk (2026-09-29). The
   queue held 736px of columns inside a 322px overflow-x: auto wrapper at 390,
   and 721px in 276px at 344. The Type cell was a no-wrap flex row, so every
   chip a ticket earned pushed the row further right - and the #8077 "For you"
   chip, the ONLY sign that a ticket was handed to this reviewer and nobody
   else can take it, was the last chip in that row: off screen, behind a
   sideways pan nobody would think to make. The page-level overflow check was
   green for the #8054 reason: the scroller held the overflow. This replaces
   the old 700px viewport rule, which kept the columns and shrank the claim to
   32vw - "panning is the last resort" - and it was the resort every phone took.

   THE FIX is the #8054 pattern from /sme/rulings: ONE render that re-lays
   itself out, not a second card list beside the grid, because the rows carry
   testids (queue-label, queue-type, directed-chip, take-button, ...) that a
   duplicate DOM would double. The card reads top to bottom as a reviewer
   decides: the claim as its title, the chips (For you among them) wrapping
   under it, then the wait and the Review button sharing the last line.

   A CONTAINER QUERY, NOT A VIEWPORT BREAKPOINT - the one departure from
   #8054, and it is measured. From 769px up the nav rail takes ~350px, so the
   queue's column is NARROWER at 820 (464px) than at 768 (684px). With a 768px
   media query the walk found the chip at x=968 on an 820 screen and x=1046 on
   a 1024 screen, both behind the same scroller. The rule the reader needs is
   "the table does not fit the column it is in", and only the column knows its
   width. 700px clears every phone and tablet width measured (the column is
   684px on a 768 screen, 464 on 820, 668 on 1024). Above it - about 1056px
   and up with the rail - the owner's 2026-08-02 table design is unchanged,
   and the For-you chip, now second in its cell (SmeWorkbench.razor), measured
   inside the table's visible edge at 1200, 1280 and 1440.

   No `order` rules, unlike /sme/rulings: the column order already IS the
   reading order here, and the chips cell is second. Nothing is positional
   (nth-child) either - the admin's Assign control makes the action cell's
   contents conditional, and a positional rule would move with it.

   The Waiting cell is the only one that carries a .cell-label: the claim is
   the title, the chips and the button name themselves, and "16d 15h" alone
   does not say it is a wait.
   -------------------------------------------------------------------------- */

/* The query container: the queue's own column. inline-size containment only -
   the shell's width already comes from the card it sits in, never from the
   table, so containing it changes nothing about how wide it is. */
.queue-grid-shell[b-teuccojb9g] {
    container: sme-queue / inline-size;
}

/* The per-cell key. Silent while the column headers are doing that job. */
.cell-label[b-teuccojb9g] {
    display: none;
}

@container sme-queue (max-width: 700px) {
    /* Nothing left to scroll sideways. Load-bearing for the guard as well as
       the reader: while the wrapper is a scroller, the E2E overflow probe
       treats everything inside it as reachable, which is how 736px of columns
       measured clean. */
    .queue-grid-wrap.queue-cards[b-teuccojb9g] {
        overflow-x: visible;
    }

    .queue-grid-wrap.queue-cards[b-teuccojb9g]  table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    /* display: none, not an sr-only clip - the #8054 reasoning: a clipped
       header row is still in the focus and reading order with nothing on
       screen. The one header whose meaning a value needs travels into its
       cell as .cell-label instead. */
    .queue-grid-wrap.queue-cards[b-teuccojb9g]  thead {
        display: none;
    }

    .queue-grid-wrap.queue-cards[b-teuccojb9g]  tbody {
        display: block;
    }

    /* QuickGrid pads a short last page with EMPTY rows so the paginator does
       not jump (24 tickets on a 25-row page = one blank <tr>). In a table that
       is an invisible spacer; as a card it is an empty bordered box after the
       last ticket. Only ticket rows (RowClass = queue-row) become cards. */
    .queue-grid-wrap.queue-cards[b-teuccojb9g]  tbody tr:not(.queue-row) {
        display: none;
    }

    .queue-grid-wrap.queue-cards[b-teuccojb9g]  tbody tr.queue-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid rgba(49, 221, 227, 0.2);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
    }

    /* Undo the table geometry: the 99% / 1% shrink-to-fit widths and the
       no-wrap cells are what made the row 736px wide. */
    .queue-grid-wrap.queue-cards[b-teuccojb9g]  td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border-bottom: none;
        white-space: normal;
    }

    /* The claim and the chips each own a full line. */
    .queue-grid-wrap.queue-cards[b-teuccojb9g]  td.col-claim,
    .queue-grid-wrap.queue-cards[b-teuccojb9g]  td.col-type {
        flex: 1 1 100%;
    }

    /* The wait and the actions share the last line; the actions drop to a
       line of their own when Resume, Release and an admin's Assign do not
       fit beside it. */
    .queue-grid-wrap.queue-cards[b-teuccojb9g]  td.col-waiting {
        flex: 0 0 auto;
        text-align: left;
    }

    .queue-grid-wrap.queue-cards[b-teuccojb9g]  td.col-review {
        flex: 1 1 auto;
    }

    /* The claim is the card's title: WRAPPED, never cut to a viewport
       fraction. The rest of it rides the title attribute, and a tooltip does
       not exist on a touch screen. An unbroken token (a raw content key, a
       FEN) breaks rather than pushing the card past the phone. */
    .queue-grid-wrap.queue-cards .queue-label[b-teuccojb9g] {
        max-width: none;
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* The row the bug hid the chip in. In a table column a chip row that
       never wraps keeps every Type cell one line tall; in a card it is how a
       chip ends up past the edge. */
    .queue-grid-wrap.queue-cards .type-cell[b-teuccojb9g] {
        flex-wrap: wrap;
    }

    .queue-grid-wrap.queue-cards .action-cell[b-teuccojb9g] {
        flex-wrap: wrap;
        justify-content: flex-end;
        white-space: normal;
    }

    /* A select is as wide as its longest option - one long roster name and
       the Assign control would overhang the card. */
    .queue-grid-wrap.queue-cards .assign-select[b-teuccojb9g] {
        max-width: 100%;
    }

    .queue-grid-wrap.queue-cards .cell-label[b-teuccojb9g] {
        display: inline;
        margin-right: 0.4rem;
        font-family: var(--ascend-font-primary);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ascend-text-muted);
    }
}

/* Bug #8077 - a ticket handed to ONE reviewer carries its own chip, and the
   reviewer holding it always has the hand-back verbs in the ruling column. */
.meta-chip.directed[b-teuccojb9g] {
    border: 1px solid rgba(184, 133, 54, 0.5);
    background: rgba(184, 133, 54, 0.12);
    color: var(--ascend-secondary-light);
}

.hand-back[b-teuccojb9g] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hand-back label[b-teuccojb9g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.hand-back-hint[b-teuccojb9g] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.hand-back .ruling-actions[b-teuccojb9g] {
    margin: 0.5rem 0 0;
}

/* Bug #8077 - the confirmation after a hand-back, on the queue view. */
.action-notice[b-teuccojb9g] {
    margin: 0 0 0.75rem;
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

/* Bug #8644 - the assign confirmation's link to the owner's list: the browser default link
   blue is unreadable on this background, so it takes the notice's own color, underlined. */
.action-notice a[b-teuccojb9g] {
    color: var(--ascend-text-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.action-notice a:hover[b-teuccojb9g],
.action-notice a:focus-visible[b-teuccojb9g] {
    color: var(--ascend-accent);
}

/* Bug #8078 - the four-eyes hint on the SME's own proposal: what a Confirm
   does here, said before the click. Same informational register as the
   hand-back hint; never a warning, the SME did nothing wrong. */
.four-eyes-hint[b-teuccojb9g] {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(49, 221, 227, 0.35);
    background: rgba(49, 221, 227, 0.07);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

/* #8085 SME-FLOW - who holds the open item (a preview holds nothing), and the reviewer
   verbs one click from the pane. Same informational register as the four-eyes hint; the
   verbs wrap on a phone so none of them leaves the column. Tokens only. */
.flow-hold[b-teuccojb9g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.flow-hold-text[b-teuccojb9g] {
    flex: 1 1 14rem;
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

/* The hold line's Take / Release are the shared Button (a child component): ::deep. */
.flow-hold[b-teuccojb9g]  .ascend-btn {
    flex: 0 0 auto;
}

.flow-verbs[b-teuccojb9g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.flow-snooze[b-teuccojb9g] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.flow-snooze-days[b-teuccojb9g] {
    min-height: 2.25rem;
}

/* #8084 SME-THREAD - the conversation about this ticket, under the ruling card. */
.thread-slot[b-teuccojb9g] {
    margin-top: 1.25rem;
    min-width: 0;
}

/* An owner-only account has no thread here: no empty gap under the card. */
.thread-slot:empty[b-teuccojb9g] {
    display: none;
}

/* PBI #8049 - a ticket raised from another review: the back-link in its banner,
   and the notes later raises added. The link is its own line and a full touch target. */
.raised-from-link[b-teuccojb9g] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.raised-observation-list[b-teuccojb9g] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.raised-observation-list li[b-teuccojb9g] {
    display: list-item;
}

.raised-observation-from[b-teuccojb9g] {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

/* Defect #8756 - the owner's read-only preview of a directed ticket: who has it, that nothing
   here changes it, and the two ways out. */
.directed-preview[b-teuccojb9g] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.directed-preview-text[b-teuccojb9g] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-style: normal;
    color: rgba(255, 255, 255, 0.8);
    overflow-wrap: anywhere;
}

.directed-preview-links[b-teuccojb9g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

/* The link reads as the Back to queue button beside it (the page's own link color). */
.directed-preview-links a[b-teuccojb9g] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

.directed-preview-links a:hover[b-teuccojb9g] {
    color: var(--ascend-accent-light);
}

/* #8087 slice 4, fixer round 1 - the review session's own standalone links (the read-only look at a ruled line,
   and the not-found state's only action) get a full touch target on a coarse pointer. Scoped to them, so the
   directed preview's shared link styles stay as they are. */
@media (pointer: coarse) {
    .session-ruled-links a[b-teuccojb9g],
    .session-ruled-links .link-button[b-teuccojb9g],
    .draft-session-not-found-back[b-teuccojb9g] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}
/* /Components/Pages/Sme/SupersedeStagedGroupDialog.razor.rz.scp.css */
/* Bug #7106 - the group-level attributed close dialog. Same visual family as
   the per-ticket SupersedeTicketDialog. The form lives inside the shared Modal's
   body, which is our own ChildContent markup, so plain scoped selectors apply. */
.supersede-form[b-8aqqc68sbn] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.supersede-hint[b-8aqqc68sbn] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
}

.supersede-claim[b-8aqqc68sbn] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    word-break: break-word;
}

.supersede-label[b-8aqqc68sbn] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
}

.supersede-input[b-8aqqc68sbn] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    resize: vertical;
}

.supersede-input:focus[b-8aqqc68sbn] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.supersede-error[b-8aqqc68sbn] {
    color: #ef4444;
    font-size: 0.9rem;
    margin: 0;
}
/* /Components/Pages/Sme/SupersedeTicketDialog.razor.rz.scp.css */
/* Bugs #7097/#7106 - the attributed close dialog. Same visual family as the
   #6621 reason modal on /sme/rulings. The form lives inside the shared Modal's
   body, which is our own ChildContent markup, so plain scoped selectors apply. */
.supersede-form[b-fhuybt81fo] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.supersede-hint[b-fhuybt81fo] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
}

.supersede-claim[b-fhuybt81fo] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    word-break: break-word;
}

.supersede-label[b-fhuybt81fo] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
}

.supersede-input[b-fhuybt81fo] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    resize: vertical;
}

.supersede-input:focus[b-fhuybt81fo] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.supersede-error[b-fhuybt81fo] {
    color: #ef4444;
    font-size: 0.9rem;
    margin: 0;
}
/* /Components/Pages/SparringPositionsLibrary.razor.rz.scp.css */
.sparring-library-page[b-zvs79z8979] {
    max-width: 1100px;
    margin: 0 auto;
}

.library-header[b-zvs79z8979] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.back-link[b-zvs79z8979] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.15s ease;
}

.back-link:hover[b-zvs79z8979] { color: #31DDE3; }

.source-filter[b-zvs79z8979] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.source-filter-label[b-zvs79z8979] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-zvs79z8979] .source-filter-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    padding: 0.35rem 0.55rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

[b-zvs79z8979] .source-filter-select option {
    background: #0f172a;
    color: #ffffff;
}

.positions-grid[b-zvs79z8979] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.position-card[b-zvs79z8979] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    transition: border-color 0.15s;
}

.position-card:hover[b-zvs79z8979] { border-color: rgba(49, 221, 227, 0.35); }

.position-header[b-zvs79z8979] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.position-title[b-zvs79z8979] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: #ffffff;
    flex: 1;
    min-width: 0;
}

[b-zvs79z8979] .position-title-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 6px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    padding: 0.25rem 0.5rem;
}

.position-source-badge[b-zvs79z8979] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.position-meta[b-zvs79z8979] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.position-opening[b-zvs79z8979] {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.25rem;
}

.position-dates[b-zvs79z8979] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.5rem;
}

.position-fen[b-zvs79z8979] {
    display: block;
    padding: 0.4rem 0.55rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    word-break: break-all;
}

.position-actions[b-zvs79z8979] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
/* /Components/Pages/StructureRecognitionDrill.razor.rz.scp.css */
.structure-recognition-page[b-reay4eqrws] {
    padding-bottom: 2rem;
}

.drill-intro[b-reay4eqrws] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
}

.intro-description[b-reay4eqrws] {
    font-family: var(--ascend-font-secondary), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.intro-description em[b-reay4eqrws] {
    color: var(--ascend-accent);
    font-style: italic;
}

.position-source[b-reay4eqrws] {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    font-size: 0.85rem;
    margin: 0.5rem 0 1rem 0;
}

.recognize-prompt[b-reay4eqrws] {
    margin: 0 0 0.6rem;
    font-family: var(--ascend-font-primary), sans-serif;
    font-size: 1rem;
    color: #fff;
}

/* #9060 chunk 2 - the list is QuestionContent now (beside the board on desktop, under it on
   a phone); the question panel's own gap spaces it, so no bottom margin. */
.recognize-choices[b-reay4eqrws] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.recognize-choice[b-reay4eqrws] {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.recognize-choice:hover:not([disabled])[b-reay4eqrws] {
    border-color: rgba(49, 221, 227, 0.6);
    background: rgba(49, 221, 227, 0.08);
}

.recognize-choice.is-correct[b-reay4eqrws] {
    border-color: rgba(49, 221, 227, 0.8);
    background: rgba(49, 221, 227, 0.15);
}

.recognize-choice.is-wrong[b-reay4eqrws] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.1);
}

.recognize-choice.dimmed[b-reay4eqrws] {
    opacity: 0.4;
}

.recognize-choice:disabled[b-reay4eqrws] {
    cursor: default;
}

.recognize-choice-name[b-reay4eqrws] {
    font-family: var(--ascend-font-secondary), sans-serif;
}

.recognize-choice-badge[b-reay4eqrws] {
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    background: rgba(49, 221, 227, 0.2);
    color: var(--ascend-accent);
    white-space: nowrap;
}

.recognize-choice-badge.wrong[b-reay4eqrws] {
    background: rgba(239, 68, 68, 0.2);
    color: #f5a0a0;
}

/* #9053 - the verdict BOX is gone from this stylesheet. The shared
   DrillFeedbackOverlay now owns the chrome (padding, radius, border and the
   green / red tint) because this drill's verdict is Inline and publishes to the
   board frame and the DrillVerdictChip. What stays here is the HEAD's own
   layout, which rides inside the overlay's <Body> and so keeps this page's scope
   id, and the actions row, which is a sibling below the overlay. The wrong-state
   icon color moved onto .drill-feedback-head itself: the old selector hung off
   the removed box, and hanging it off the overlay's internal variant class would
   couple this page to the overlay's markup. */
.drill-feedback-head[b-reay4eqrws] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
}

.feedback-icon[b-reay4eqrws] {
    color: var(--ascend-accent);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.drill-feedback-head.wrong .feedback-icon[b-reay4eqrws] {
    color: #e87a7a;
}

/* #9060 chunk 2 - Next rides the verdict dock's Actions half. The "this looks wrong" door
   (#6952, staff only) stays in flow under the dock, an audited exemption: see the markup. */
.structure-review-door[b-reay4eqrws] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.structure-review-door:empty[b-reay4eqrws] {
    display: none;
}
@media (max-width: 480px) {
    .drill-intro[b-reay4eqrws] {
        padding: 1.1rem 1.25rem;
    }

    .recognize-choice[b-reay4eqrws] {
        padding: 0.6rem 0.75rem;
        font-size: 0.88rem;
    }
}

/* #9060 chunk 2 - the choices are the drill's answer controls: the shared touch target on a
   touch screen. */
@media (hover: none) and (pointer: coarse) {
    .recognize-choice[b-reay4eqrws] {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/StrugglePicker.razor.rz.scp.css */
.focus-loading[b-1ar85f1kp8] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
    color: #31DDE3;
}

.focus-intro[b-1ar85f1kp8] {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    max-width: 60ch;
    margin: 0 0 1rem;
}

/* The chips, their pillar groups and the selection counter moved to
   Components/Shared/StruggleChips.razor.css (#6761) - /focus and the guided
   first path render the same component, so the styling has one owner too. */

/* ---- actions -------------------------------------------------------- */
/* #8844 - all three button pairs ride the shared .action-row .action-row--start:
   one width, full width, on a phone (the old wrapping row stacked "See what your
   games say" 257px over "I'm not sure - help me figure it out" 312px at 344),
   and a left-aligned row above 480px. This rule keeps only the spacing. */
.focus-actions[b-1ar85f1kp8] {
    margin-top: 1.5rem;
}

/* ---- reconciliation ------------------------------------------------- */
/* #6946 - ::deep: the class rides on a child <Card>, so a bare selector never
   matched. .focus-reconcile is plain block flow with no `gap`, so this margin is
   the only thing separating the card from the .focus-actions button row. */
[b-1ar85f1kp8] .focus-recon-card {
    margin-bottom: 1rem;
}

.recon-head[b-1ar85f1kp8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.recon-title[b-1ar85f1kp8] {
    margin: 0;
    font-family: 'condor', sans-serif;
    font-size: 1.1rem;
    color: #ffffff;
}

.recon-lines[b-1ar85f1kp8] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.recon-line[b-1ar85f1kp8] {
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    padding-left: 0.85rem;
}

.recon-line.supported[b-1ar85f1kp8] {
    border-left-color: #31DDE3;
}

.recon-line-head[b-1ar85f1kp8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.recon-line.supported .recon-line-head i[b-1ar85f1kp8] {
    color: #31DDE3;
}

.recon-line.unconfirmed .recon-line-head i[b-1ar85f1kp8] {
    color: rgba(255, 255, 255, 0.45);
}

.recon-label[b-1ar85f1kp8] {
    font-size: 0.95rem;
    color: #ffffff;
}

.recon-tool[b-1ar85f1kp8] {
    font-size: 0.75rem;
    color: #B88536;
    text-decoration: none;
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 50px;
    padding: 0.05rem 0.55rem;
}

.recon-tool:hover[b-1ar85f1kp8] {
    background: rgba(184, 133, 54, 0.12);
}

.recon-detail[b-1ar85f1kp8] {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

.recon-also[b-1ar85f1kp8] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.recon-also-head[b-1ar85f1kp8] {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}

.recon-also-line[b-1ar85f1kp8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.35rem;
}

.recon-also-line i[b-1ar85f1kp8] {
    color: #B88536;
}

.recon-seam-note[b-1ar85f1kp8] {
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.recon-talk[b-1ar85f1kp8] {
    margin-top: 0.85rem;
    display: flex;
}

/* ---- locked --------------------------------------------------------- */
/* #6946 - ::deep: the class rides on a child <Card>. The centering was always
   intended and is already compensated for downstream - .locked-list re-asserts
   `text-align: left` precisely because it expected to inherit centering from
   here. This <Card> has no Title/HeaderContent, so no shared card chrome is
   touched; only the icon, title and sub-copy in the body center up. */
[b-1ar85f1kp8] .focus-locked-card {
    margin-bottom: 1rem;
    text-align: center;
}

.locked-icon[b-1ar85f1kp8] {
    margin-bottom: 0.5rem;
}

.locked-title[b-1ar85f1kp8] {
    margin: 0 0 0.35rem;
    font-family: 'condor', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
}

.locked-sub[b-1ar85f1kp8] {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.locked-list[b-1ar85f1kp8] {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 44ch;
    text-align: left;
}

.locked-list li[b-1ar85f1kp8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.locked-list a[b-1ar85f1kp8] {
    font-size: 0.75rem;
    color: #B88536;
    text-decoration: none;
    white-space: nowrap;
}

.focus-error[b-1ar85f1kp8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #f87171;
    font-size: 0.88rem;
    margin: 0.5rem 0;
}
/* /Components/Pages/StudyBoard.razor.rz.scp.css */
/* Study Board Page */
.study-board-page[b-pk2srimwuy] {
    padding: 1rem 2rem 2rem;
    max-width: 100%;
}

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

.error-state[b-pk2srimwuy] {
    text-align: center;
    padding: 4rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Header */
.board-header[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
}

.header-row[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.header-row-top[b-pk2srimwuy] {
    justify-content: space-between;
}

.header-breadcrumb[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.breadcrumb-sep[b-pk2srimwuy] {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.85rem;
}

.header-row-tabs[b-pk2srimwuy] {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.5rem;
}

.header-row-meta[b-pk2srimwuy] {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    gap: 0.4rem;
}

.meta-players[b-pk2srimwuy] { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.meta-white[b-pk2srimwuy], .meta-black[b-pk2srimwuy] { color: rgba(255, 255, 255, 0.9); }
.meta-elo[b-pk2srimwuy] { color: rgba(255, 255, 255, 0.45); font-weight: 400; margin-left: 0.2rem; font-size: 0.72rem; }
.meta-vs[b-pk2srimwuy] { color: rgba(255, 255, 255, 0.3); margin: 0 0.3rem; }
.meta-sep[b-pk2srimwuy] { color: rgba(255, 255, 255, 0.2); }
.meta-result[b-pk2srimwuy] { font-family: var(--ascend-font-primary); font-weight: 700; color: #31DDE3; }
.meta-termination[b-pk2srimwuy] { color: rgba(255, 255, 255, 0.4); font-size: 0.72rem; margin-left: 0.2rem; }
/* #6633 - the meta strip's opening identity is the shared EcoBadge now, which
   owns the name/code styling; .meta-eco and .meta-opening are gone. */
.meta-event[b-pk2srimwuy] { color: rgba(255, 255, 255, 0.5); font-style: italic; }
.meta-round[b-pk2srimwuy] { color: rgba(255, 255, 255, 0.45); }

/* Floating Pieces Toolbar (Set Position mode) */
.board-area.with-pieces-toolbar[b-pk2srimwuy] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.pieces-toolbar[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.25rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    flex-shrink: 0;
    width: 56px;
    box-sizing: border-box;
}

.pieces-group[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pieces-divider[b-pk2srimwuy] {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.2rem 0;
}

.piece-tool[b-pk2srimwuy] {
    width: 46px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.12s;
    padding: 0;
}

.piece-tool:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.3);
}

.piece-tool.selected[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.15);
    border-color: #31DDE3;
    color: #31DDE3;
}

/* Piece color scheme mirrors a real chess set: cream "white" pieces
   and slate "black" pieces. Both sit on the same dark button
   background so users read color from the glyph itself — never
   confusing a light-backgrounded button for a white piece.
   Solid fill keeps the pieces readable at the 32px toolbar size
   without relying on thin outlines. */
.piece-tool.white[b-pk2srimwuy] {
    color: #f0d9b5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.piece-tool.black[b-pk2srimwuy] {
    color: #475569;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.35);
}
.piece-tool.black.selected[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.15);
    border-color: #31DDE3;
    color: #94a3b8;
}
.piece-tool.white.selected[b-pk2srimwuy] {
    color: #fff5e0;
}

.piece-tool.tool-btn[b-pk2srimwuy] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.55);
}

.piece-tool.apply-btn[b-pk2srimwuy] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
    font-size: 1rem;
}

.piece-tool.apply-btn:hover[b-pk2srimwuy] {
    background: rgba(16, 185, 129, 0.25);
}

.piece-tool.cancel-btn[b-pk2srimwuy] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
    font-size: 0.95rem;
}

.piece-tool.cancel-btn:hover[b-pk2srimwuy] {
    background: rgba(239, 68, 68, 0.2);
}

/* Scan button — visually distinct from the piece-selection tools.
   Gold accent, icon + "Scan" label stacked so it reads as a primary
   action, not another piece picker. */
.piece-tool.scan-tool[b-pk2srimwuy] {
    flex-direction: column;
    gap: 1px;
    height: 42px;
    background: rgba(184, 133, 54, 0.15);
    border-color: rgba(184, 133, 54, 0.45);
    color: #d4a04c;
    font-size: 0.95rem;
}
.piece-tool.scan-tool:hover[b-pk2srimwuy] {
    background: rgba(184, 133, 54, 0.25);
    border-color: #B88536;
    color: #e8b85c;
}
.piece-tool.scan-tool .scan-label[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

/* Side-to-move group — labeled so the W/B buttons aren't cryptic.
   Width fixed to match the piece-tool column (46px) so it doesn't
   escape the 56px toolbar column like the default flex-width
   <button> elements were doing. */
.side-toggle-group[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    width: 46px;
}
.side-toggle-label[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}
.side-toggle[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    width: 46px;
    box-sizing: border-box;
}

/* Scope toolbar side-btn under .side-toggle parent. A second .side-btn
   rule exists later in this file for a different context (the player-
   color-selection panel, min-width:130px) — without the parent scope
   that rule wins cascade and my 46px column buttons blow out the
   toolbar column. */
.side-toggle .side-btn[b-pk2srimwuy] {
    width: 100%;
    min-width: 0;
    padding: 0.3rem 0.2rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    box-sizing: border-box;
    display: block;
    flex-direction: row;
    gap: 0;
}
.side-toggle .side-btn:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.08);
    color: rgba(255, 255, 255, 0.8);
    transform: none;
    box-shadow: none;
}
.side-toggle .side-btn.active[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.2);
    color: #31DDE3;
    font-weight: 700;
}

/* Mobile set-position layout — full-width rows below the board, big
   tap targets (44px+), one clear primary action per row. The desktop
   vertical column (56px wide) doesn't work on phones where vertical
   space is precious and horizontal space is the natural flow. */
@media (max-width: 768px) {
    .board-area.with-pieces-toolbar[b-pk2srimwuy] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    /* Toolbar becomes a flex-wrap row on mobile. Items that need their own
       row (piece groups, dividers, side-toggle group) get flex: 1 1 100%
       to claim the full width. Everything else (tool buttons, scan, apply,
       cancel) stays inline and packs horizontally. Without this, every
       child of a flex-column toolbar stacks vertically — which made the
       eraser, clear, scan, apply, and cancel buttons each consume their
       own full row and blew the container height to 800+ pixels. */
    .pieces-toolbar[b-pk2srimwuy] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 0.4rem;
        padding: 0.5rem;
    }

    /* Piece rows: full-width, horizontally arranged pieces */
    .pieces-group[b-pk2srimwuy] {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.3rem;
    }

    /* Dividers break to their own row */
    .pieces-divider[b-pk2srimwuy] {
        flex: 1 1 100%;
        height: 1px;
        margin: 0.1rem 0;
    }

    .piece-tool[b-pk2srimwuy] {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
        flex: 0 0 auto;
    }

    /* Tool buttons (eraser, clear) sit inline alongside the scan button */
    .piece-tool.tool-btn[b-pk2srimwuy] {
        width: 44px;
        flex: 0 0 auto;
    }

    /* Scan: flexes to take remaining row space alongside the two tool buttons */
    .piece-tool.scan-tool[b-pk2srimwuy] {
        width: auto;
        height: 44px;
        flex-direction: row;
        flex: 1 1 120px;
        padding: 0 1rem;
        gap: 0.5rem;
    }
    .piece-tool.scan-tool .scan-label[b-pk2srimwuy] {
        font-size: 0.85rem;
    }

    /* Side-toggle group: full row with wide horizontal pills */
    .side-toggle-group[b-pk2srimwuy] {
        flex: 1 1 100%;
    }
    .side-toggle[b-pk2srimwuy] {
        flex-direction: row;
        width: 100%;
    }
    .side-toggle .side-btn[b-pk2srimwuy] {
        font-size: 0.85rem;
        padding: 0.6rem 0.5rem;
    }
    .side-toggle-label[b-pk2srimwuy] {
        font-size: 0.65rem;
    }

    /* Apply / Cancel — side-by-side on the same row, each splitting the width */
    .piece-tool.apply-btn[b-pk2srimwuy],
    .piece-tool.cancel-btn[b-pk2srimwuy] {
        flex: 1 1 0;
        width: auto;
        height: 44px;
    }
}

.back-link[b-pk2srimwuy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    transition: color 0.15s ease;
}

.back-link:hover[b-pk2srimwuy] {
    color: #31DDE3;
}

.chapter-title[b-pk2srimwuy] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.chapter-title:hover[b-pk2srimwuy] {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}

.chapter-title-input[b-pk2srimwuy] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 6px;
    color: #31DDE3;
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.5rem;
    margin: 0.25rem 0 0;
    width: 100%;
    max-width: 25rem;
}

.chapter-title-input:focus[b-pk2srimwuy] {
    outline: none;
    border-color: #31DDE3;
    box-shadow: 0 0 0 2px rgba(49, 221, 227, 0.15);
}

/* Game Selector */
.game-selector[b-pk2srimwuy] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.game-tab[b-pk2srimwuy] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 0.3rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.game-tab:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

.game-tab.active[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.game-tab.add-game-tab[b-pk2srimwuy] {
    padding: 0.3rem 0.5rem;
    border-style: dashed;
}

/* Game Metadata */
.game-metadata[b-pk2srimwuy] {
    margin-top: 0.375rem;
}

.header-actions[b-pk2srimwuy] {
    display: flex;
    /* #7761 - the row wraps at EVERY width, not only below 769px.
       `flex-wrap: wrap` used to live in the max-width: 768px block alone, so
       the band from 769px up laid ~11 nowrap buttons out as one unbreakable
       line. `.header-row` wrapping does not help: it can move this whole block
       onto its own line but cannot break the line itself, and a flex item's
       default `min-width: auto` refuses to shrink below max-content, so the
       block simply escaped `.board-header` to the right. Measured on dev at
       1024x900 before the fix - `.header-actions` reached 1119px against a
       1014px content width, which sliced "Flash Card" at the viewport edge and
       put the red Delete button entirely off-screen; with html/body at
       overflow-x: hidden (#7296) a destructive action was unreachable rather
       than scrollable-to. `min-width: 0` is what actually lets it shrink. */
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    gap: 0.5rem;
}

.header-btn[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 36px;
    padding: 0 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-label[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

.header-btn:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.header-btn.active[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.header-btn:disabled[b-pk2srimwuy] {
    opacity: 0.3;
    cursor: not-allowed;
}

.header-btn.complete-active[b-pk2srimwuy] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

/* Destructive header action (Delete Game) — promoted out of the overflow menu. */
.header-btn.danger[b-pk2srimwuy] {
    color: rgba(248, 113, 113, 0.85);
}

.header-btn.danger:hover[b-pk2srimwuy] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.save-btn:not(:disabled)[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

/* Passive auto-save status (replaces the old manual Save button). Not a button —
   no hover/click affordance; just tells the user their moves are persisting. */
.autosave-status[b-pk2srimwuy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    user-select: none;
    transition: color 0.2s ease;
}

.autosave-status.saved[b-pk2srimwuy] {
    color: rgba(16, 185, 129, 0.85);
}

.autosave-status.saving[b-pk2srimwuy] {
    color: rgba(255, 255, 255, 0.5);
}

/* #7450 - the failure state the chip never had. It stays up until a save
   actually lands (unlike the transient toast), because the moves on screen
   really are unsaved until then. Red rather than the muted grey of .saving:
   the whole defect was that failure looked like progress. */
.autosave-status.unsaved[b-pk2srimwuy] {
    color: #ef4444;
}

.autosave-status[b-pk2srimwuy]  i {
    font-size: 14px;
}

/* Transient save notice (#7445). Replaces the dead `.save-indicator` rule left
   behind when e1f5c8509 deleted the inline span next to the old Save button -
   that span reflowed the toolbar on every autosave, so this one is fixed to the
   viewport and pushes nothing. Colour comes from <AccessibleAlert>, which is
   where success / info / error are actually told apart; this rule only places
   it. z-index sits above the board's own overlays (max 100) and below the
   shared Modal (9999) - a scan message renders inside that modal instead. */
.save-toast[b-pk2srimwuy] {
    position: fixed;
    /* Bottom-RIGHT, clear of two things: the board (which is the content of
       this page and must not be covered while a failure sits there for eight
       seconds) and the Send Feedback button parked in the corner. */
    right: 1.5rem;
    bottom: 5.5rem;
    z-index: 500;
    max-width: min(28rem, calc(100vw - 3rem));
    pointer-events: none;
    animation: fadeIn-b-pk2srimwuy 0.2s ease;
    /* Opaque plate UNDER the alert. AccessibleAlert paints a 10%-alpha
       severity tint, and over arbitrary page content that tint is what tells
       success from failure, so it needs a solid backdrop rather than an
       override. The wrapper only renders when there IS a message, so this
       plate is never visible on its own. */
    background: var(--ascend-background);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Narrow viewports have no room beside the board, so the notice spans the
   foot of the screen instead - still above the feedback button. */
@media (max-width: 768px) {
    .save-toast[b-pk2srimwuy] {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

@keyframes fadeIn-b-pk2srimwuy {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Header divider between action groups */
.header-divider[b-pk2srimwuy] {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    align-self: center;
    flex-shrink: 0;
}

/* Overflow dot indicator when an overflow item is active */
.header-btn.has-active[b-pk2srimwuy] {
    position: relative;
}

.header-btn.has-active[b-pk2srimwuy]::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: #31DDE3;
    border-radius: 50%;
}

/* Overflow menu */
.overflow-menu-container[b-pk2srimwuy] {
    position: relative;
}

.overflow-backdrop[b-pk2srimwuy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

.overflow-dropdown[b-pk2srimwuy] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 11.25rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    padding: 0.35rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(49, 221, 227, 0.08);
    z-index: 100;
    animation: dropIn-b-pk2srimwuy 0.15s ease;
}

@keyframes dropIn-b-pk2srimwuy {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.overflow-item[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: none;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.overflow-item:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.1);
    color: #31DDE3;
}

.overflow-item.active[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.12);
    color: #31DDE3;
}

.overflow-item.complete-active[b-pk2srimwuy] {
    color: #10b981;
}

.overflow-item.complete-active:hover[b-pk2srimwuy] {
    background: rgba(16, 185, 129, 0.1);
}

.overflow-item:disabled[b-pk2srimwuy] {
    opacity: 0.3;
    cursor: not-allowed;
}

.overflow-item.danger[b-pk2srimwuy] {
    color: #ef4444;
}

.overflow-item.danger:hover[b-pk2srimwuy] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ascend-text-light);
}

.overflow-divider[b-pk2srimwuy] {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

/* Main Layout */
/* #6929 - this container takes keyboard focus via tabindex=0 so arrow-key move
   navigation works without clicking, and keeps working after a click lands on
   the move list. Suppress the browser's default focus ring: the visible
   affordance is the highlighted current move, not a box round the whole
   working area. */
.board-content:focus[b-pk2srimwuy] {
    outline: none;
}

.board-content[b-pk2srimwuy] {
    display: grid;
    /* minmax(0, ...) on the board track so it shrinks below the 400px floor
       instead of forcing horizontal overflow in the 768-1100px band before
       the single-column breakpoint; side panel track is shrink-safe too. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px) auto;
    gap: 0.5rem;
    align-items: start;
}

@media (max-width: 768px) {
    .board-content[b-pk2srimwuy] {
        grid-template-columns: 1fr;
    }

    /* #6140 — the board column and panels stack in one column on narrow
       screens; both must be allowed to shrink to the viewport so neither
       forces a horizontal scrollbar. */
    .board-column[b-pk2srimwuy],
    .panels-column[b-pk2srimwuy] {
        min-width: 0;
    }

    .study-board-page[b-pk2srimwuy] {
        padding: 0.75rem 0.75rem 3.5rem;
        /* #6140 — final guard: the study board never drives horizontal page
           scroll on mobile. Clip (not hidden) so it creates no scroll context
           and leaves fixed overlays / dropdowns unaffected. */
        overflow-x: clip;
    }

    .board-header[b-pk2srimwuy] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .header-left[b-pk2srimwuy] {
        min-width: 0;
    }

    /* #6140 — a long chapter title truncates instead of widening the header. */
    .header-breadcrumb[b-pk2srimwuy] {
        min-width: 0;
    }

    .chapter-title[b-pk2srimwuy] {
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* #6140 — the action buttons WRAP to additional rows on mobile rather than
       overrunning the right edge (there are up to ~11 of them). #7761 moved
       `flex-wrap: wrap` to the base rule, where it belongs; what is left here
       is the tighter mobile gap. */
    .header-actions[b-pk2srimwuy] {
        gap: 0.375rem;
        justify-content: flex-start;
    }

    .header-btn[b-pk2srimwuy] {
        height: 32px;
        padding: 0 0.5rem;
    }

    .btn-label[b-pk2srimwuy] {
        display: none;
    }

    .header-divider[b-pk2srimwuy] {
        display: none;
    }

    .game-tab[b-pk2srimwuy] {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    .game-metadata[b-pk2srimwuy] {
        font-size: 0.7rem;
    }

    [b-pk2srimwuy] .meta-players-row {
        font-size: 0.75rem;
    }

    [b-pk2srimwuy] .meta-tag {
        font-size: 0.65rem;
    }

    .board-area[b-pk2srimwuy] {
        border-radius: 16px;
        padding: 0.5rem;
    }

    .side-card[b-pk2srimwuy] {
        max-width: 90vw;
        padding: 1.5rem 1.25rem;
    }

    .move-tree-panel[b-pk2srimwuy] {
        max-height: 320px;
    }

    .tab-bar[b-pk2srimwuy] {
        gap: 0.125rem;
        padding: 0.2rem;
    }

    .tab-btn[b-pk2srimwuy] {
        height: 32px;
        padding: 0 0.375rem;
        font-size: 0.65rem;
    }

    .tab-btn span[b-pk2srimwuy] {
        display: none;
    }

    .panel-header[b-pk2srimwuy] {
        padding: 0.5rem 0.75rem;
    }

    .board-controls[b-pk2srimwuy] {
        gap: 0.375rem;
    }

    .btn-nav[b-pk2srimwuy] {
        width: 38px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .study-board-page[b-pk2srimwuy] {
        padding: 0.375rem 0.375rem 1rem;
    }

    .board-header[b-pk2srimwuy] {
        padding: 0.375rem 0.5rem;
        gap: 0.375rem;
    }

    .chapter-title[b-pk2srimwuy] {
        font-size: 0.75rem;
    }

    .chapter-title-input[b-pk2srimwuy] {
        max-width: 100%;
        font-size: 0.75rem;
    }

    .header-btn[b-pk2srimwuy] {
        height: 28px;
        padding: 0 0.375rem;
        font-size: 0.7rem;
    }

    .header-actions[b-pk2srimwuy] {
        gap: 0.25rem;
    }

    .board-area[b-pk2srimwuy] {
        padding: 0.375rem;
        border-radius: 12px;
    }

    .btn-nav[b-pk2srimwuy] {
        width: 32px;
        height: 28px;
    }

    .board-controls[b-pk2srimwuy] {
        gap: 0.25rem;
    }

    .move-tree-panel[b-pk2srimwuy] {
        max-height: 220px;
    }

    .tab-btn[b-pk2srimwuy] {
        height: 28px;
        padding: 0 0.25rem;
    }

    .side-card[b-pk2srimwuy] {
        padding: 1.25rem 1rem;
    }

    .panel-header[b-pk2srimwuy] {
        padding: 0.375rem 0.5rem;
    }

    .game-metadata[b-pk2srimwuy] {
        font-size: 0.65rem;
    }
}

/* Board Column */
.board-column[b-pk2srimwuy] {
    min-width: 0;
}

.board-area[b-pk2srimwuy] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 0.75rem;
    position: relative;
    overflow: hidden;
}

.board-area[b-pk2srimwuy]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
}

[b-pk2srimwuy] .board-area .chessboard-container {
    width: 100%;
    aspect-ratio: 1;
}

/* #7153 rule 1 / #7159 - the board-edge player identity strips. ::deep because
   BoardPlayerChrome renders its own markup, which carries ITS scope attribute
   and not this page's.

   The strips must hug the SQUARE BOARD's edges, not the card's - a name floating
   in the card gutter 77px left of the board reads as a caption, and the whole
   point of the ruling is that each opponent shows on THEIR SIDE OF THE BOARD. So
   they take the same width cap and centering the .chessboard itself takes
   (ChessBoard.razor.css: min(600px, 88dvh) widening to calc(100vw - 4.5rem) on
   phones - folded into one min() here, which resolves to the same number in both
   bands). Same approach StudySession already uses for its strips. They stay
   plain block siblings, so
   nothing horizontal is taken from the board (#6672), and BoardPlayerChrome caps
   itself at one nowrap ellipsised line, so a long name cannot grow a second row
   and push the board down on a 390px phone. */
.board-area[b-pk2srimwuy]  .board-player-chrome {
    width: 100%;
    max-width: min(600px, 88dvh, calc(100vw - 4.5rem));
    margin-left: auto;
    margin-right: auto;
}

/* Set-Position mode turns .board-area into a horizontal flex row (pieces
   toolbar beside the board), where block strips would become row items pinned
   to the board's LEFT and RIGHT - visually wrong, and a position you are
   hand-building is not a game between those two players anyway. They stand
   down until the position is applied and normal flow returns. */
.board-area.with-pieces-toolbar[b-pk2srimwuy]  .board-player-chrome {
    display: none;
}

/* Board Controls */
.board-controls[b-pk2srimwuy] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.btn-nav[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-nav:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.btn-nav.btn-delete-move[b-pk2srimwuy] {
    margin-left: auto;
}

/* #8955 - the engine toggle is a STATE control: lit when on, hollow when off,
   the way Game Review's engine-reads toggle reads. */
.btn-nav.engine-toggle.is-on[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.14);
    border-color: rgba(49, 221, 227, 0.45);
    color: var(--ascend-accent-light);
}

.btn-nav.engine-toggle.is-off[b-pk2srimwuy] {
    background: transparent;
}

.btn-nav.btn-delete-move:hover:not(:disabled)[b-pk2srimwuy] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--ascend-text-light);
}

/* Panels Column */
.panels-column[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* #6140 — let the column shrink inside its grid track so a panel's
       content can't force the board layout wider than the viewport. */
    min-width: 0;
}

/* Tab Bar */
.tab-bar[b-pk2srimwuy] {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
}

.tab-btn[b-pk2srimwuy] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 36px;
    padding: 0 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-btn:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.tab-btn.active[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.tab-btn[b-pk2srimwuy]  i {
    font-size: 14px;
    flex-shrink: 0;
}

/* #9327 - a crowded bar (five tabs or more, TabBarCrowded) cannot fit every icon and label in
   the 380px desktop side panel: measured 451px for five. Phones already drop the labels
   (icon-only, below); on desktop the decorative icons go instead and the padding tightens,
   so every tab keeps its visible label (and its aria-label, #9279). */
@media (min-width: 769px) {
    .tab-bar--crowded[b-pk2srimwuy] {
        gap: 0.125rem;
    }

    .tab-bar--crowded .tab-btn[b-pk2srimwuy] {
        padding: 0 0.3rem;
    }

    .tab-bar--crowded .tab-btn[b-pk2srimwuy]  i {
        display: none;
    }
}

.tab-content[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Generic Panel */
.panel[b-pk2srimwuy] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.panel-header[b-pk2srimwuy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.1);
}

.panel-header h3[b-pk2srimwuy] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(49, 221, 227, 0.8);
    margin: 0;
}

.notation-toggle[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    border: 1px solid rgba(49, 221, 227, 0.25);
    background: rgba(49, 221, 227, 0.08);
    color: rgba(49, 221, 227, 0.7);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s;
}

.notation-toggle:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.panel-description[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    padding: 0.75rem 1rem 0;
    line-height: 1.4;
}

/* FEN / PGN export buttons (Moves panel header) */
.fen-pgn-actions[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.fen-pgn-btn[b-pk2srimwuy] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(49, 221, 227, 0.25);
    background: rgba(49, 221, 227, 0.08);
    color: rgba(49, 221, 227, 0.7);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s;
}

.fen-pgn-btn:hover:not(:disabled)[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.fen-pgn-btn:disabled[b-pk2srimwuy] {
    opacity: 0.35;
    cursor: not-allowed;
}

.fen-pgn-btn[b-pk2srimwuy]  i {
    font-size: 14px;
}

.fen-pgn-feedback[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 600;
    color: #10b981;
    letter-spacing: 0.04em;
    animation: fenPgnFade-b-pk2srimwuy 0.2s ease;
}

@keyframes fenPgnFade-b-pk2srimwuy {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Move Tree Panel */
.move-tree-panel[b-pk2srimwuy] {
    max-height: 500px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tree-content[b-pk2srimwuy] {
    padding: 0.75rem 1rem;
    overflow-y: auto;
    flex: 1;
}

/* Recovered-draft banner — surfaces unsaved moves pulled from local storage
   after a circuit drop. Cyan accent to read as "action needed", not an error. */
.draft-restore[b-pk2srimwuy] {
    border: 1px solid rgba(49, 221, 227, 0.4);
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.1), rgba(49, 221, 227, 0.04));
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}

.draft-restore-title[b-pk2srimwuy] {
    margin: 0 0 0.3rem;
    color: #31DDE3;
    font-weight: 600;
    font-size: 0.92rem;
}

.draft-restore-sub[b-pk2srimwuy] {
    margin: 0 0 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    line-height: 1.45;
}

.draft-restore-actions[b-pk2srimwuy] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.draft-restore-btn[b-pk2srimwuy] {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.draft-restore-btn:hover[b-pk2srimwuy] {
    background: rgba(255, 255, 255, 0.14);
}

.draft-restore-btn.primary[b-pk2srimwuy] {
    border: none;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(49, 221, 227, 0.3);
}

.draft-restore-btn.primary:hover[b-pk2srimwuy] {
    background: linear-gradient(135deg, #42e8ed 0%, #31DDE3 100%);
}

.tree-empty[b-pk2srimwuy] {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    text-align: center;
    padding: 1.5rem 0.75rem;
}

.tree-empty p[b-pk2srimwuy] {
    margin: 0 0 0.4rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
}

.tree-empty-subtitle[b-pk2srimwuy] {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.8rem !important;
    line-height: 1.5;
    max-width: 16.25rem;
    margin: 0 auto !important;
}

/* Move tree — div-based flex layout modeled on RepertoireEditor's
   Advanced View (PBI #5714). Mainline rows use bold weight; variations
   share the same row structure but render lighter so the eye can
   distinguish the principal line at a glance. */
.move-tree[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.85);
}

[b-pk2srimwuy] .move-row {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 26px;
}

[b-pk2srimwuy] .move-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

[b-pk2srimwuy] .move-number {
    width: 36px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 6px;
    color: rgba(255, 255, 255, 0.35);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    user-select: none;
}

[b-pk2srimwuy] .move-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding: 2px 6px;
    border-radius: 5px;
    transition: background 0.15s ease;
    cursor: pointer;
}

[b-pk2srimwuy] .move-cell:hover {
    background: rgba(49, 221, 227, 0.1);
}

[b-pk2srimwuy] .move-cell.selected {
    background: rgba(49, 221, 227, 0.25);
}

[b-pk2srimwuy] .move-cell.selected .move-san {
    color: #31DDE3;
    font-weight: 700;
}

[b-pk2srimwuy] .move-cell-empty {
    flex: 1;
    padding: 2px 6px;
    cursor: default;
}

/* Mainline SAN — bold + slightly larger so it reads as the principal
   line. Variation SANs (.variation-block .move-san below) override
   this with a lighter weight + dim color. */
[b-pk2srimwuy] .move-san {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    white-space: nowrap;
}

[b-pk2srimwuy] .tree-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 0.25rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    transition: color 0.15s ease;
}

[b-pk2srimwuy] .tree-collapse-toggle:hover {
    color: #31DDE3;
}

[b-pk2srimwuy] .tree-nag {
    font-weight: 700;
    margin-left: 0.15rem;
    font-size: 0.85rem;
    color: rgba(184, 133, 54, 0.85);
}

/* Comment surfaced below the move row — subtle gold so it doesn't
   compete with the move text but stays readable. */
[b-pk2srimwuy] .move-tree-comment {
    color: rgba(184, 133, 54, 0.75);
    font-style: italic;
    font-size: 0.78rem;
    margin: 0 0 0.2rem 36px;
    line-height: 1.45;
}

/* Variation blocks: same row structure as the mainline, just dimmer
   and indented. Border-left with cyan accent ties each branch back
   to its parent row visually. Nested variations get a dimmer border
   so the visual depth reads correctly. */
[b-pk2srimwuy] .variation-block {
    padding-left: 12px;
    margin: 2px 0 2px 36px;
    border-left: 2px solid rgba(49, 221, 227, 0.18);
}

[b-pk2srimwuy] .variation-block .move-san {
    font-weight: 400;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

[b-pk2srimwuy] .variation-block .move-cell.selected .move-san {
    font-weight: 600;
    color: #31DDE3;
}

[b-pk2srimwuy] .variation-block .move-number {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.25);
}

[b-pk2srimwuy] .variation-block .tree-nag {
    font-size: 0.78rem;
}

[b-pk2srimwuy] .variation-block .move-tree-comment {
    font-size: 0.72rem;
}

[b-pk2srimwuy] .variation-block .variation-block {
    border-left-color: rgba(255, 255, 255, 0.08);
    margin-left: 0;
}

/* NAG Buttons (shared) */
.nag-btn[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'SF Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.nag-btn:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.nag-btn.active[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.2);
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

/* NAG Sidebar — desktop vertical strip */
.nag-sidebar[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.25rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    align-self: start;
    position: sticky;
    top: 1rem;
}

/* NAG Mobile Bar — hidden on desktop */
.nag-mobile-bar[b-pk2srimwuy] {
    display: none;
}

@media (max-width: 768px) {
    .nag-sidebar[b-pk2srimwuy] {
        display: none;
    }

    .nag-mobile-bar[b-pk2srimwuy] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        padding: 0.5rem 0.75rem;
        background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
        border-top: 1px solid rgba(49, 221, 227, 0.2);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        justify-content: center;
    }
}

/* Notation Toggle in Move List Header */
/* notation-toggle-btn removed — replaced by .notation-toggle 3-way group */

/* Comment Panel */
[b-pk2srimwuy] .comment-textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-top: none;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

[b-pk2srimwuy] .comment-textarea:focus {
    background: rgba(255, 255, 255, 0.05);
}

/* #4542 — per-move clock entry (OTB) */
[b-pk2srimwuy] .clock-entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.75rem;
}
[b-pk2srimwuy] .clock-entry label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}
[b-pk2srimwuy] .clock-input {
    width: 7rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    outline: none;
}
[b-pk2srimwuy] .clock-input:focus { border-color: #31DDE3; }

/* #4542 (OTB input) - compact per-move clock-remaining H/M/S fields rendered
   inline in each move cell. Small + unobtrusive so the move list stays
   readable; cyan accent on focus, gold-ish dim separators. */
[b-pk2srimwuy] .move-clock-inputs {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-left: 6px;
    flex-shrink: 0;
}
[b-pk2srimwuy] .move-clock-input {
    width: 2.1rem;
    padding: 1px 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.18);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    outline: none;
    -moz-appearance: textfield;
}
[b-pk2srimwuy] .move-clock-input::-webkit-outer-spin-button,
[b-pk2srimwuy] .move-clock-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
[b-pk2srimwuy] .move-clock-input:focus {
    border-color: #31DDE3;
    background: rgba(49, 221, 227, 0.08);
}
[b-pk2srimwuy] .move-clock-input::placeholder {
    color: rgba(184, 133, 54, 0.5);
}
[b-pk2srimwuy] .move-clock-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
    user-select: none;
}

/* Comment chat-bubble in the move list: now the shared MoveCommentBubble
   component (#6374), which owns its own styling. Nothing to declare here. */

[b-pk2srimwuy] .comment-textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* Import Panel */
.import-toggle[b-pk2srimwuy] {
    display: flex;
    padding: 0.75rem 1rem 0;
    gap: 0.5rem;
}

.toggle-btn[b-pk2srimwuy] {
    flex: 1;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toggle-btn.active[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

[b-pk2srimwuy] .import-textarea {
    /* #8003 (Sonar css:S4656) - `width: 100%` also sat here and was overridden
       by the `width: calc(100% - 2rem)` below, so it never applied. */
    min-height: 100px;
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    font-family: 'SF Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    margin-left: 1rem;
    margin-right: 1rem;
    width: calc(100% - 2rem);
}

[b-pk2srimwuy] .import-textarea:focus {
    border-color: rgba(49, 221, 227, 0.3);
}

[b-pk2srimwuy] .import-textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.import-message[b-pk2srimwuy] {
    padding: 0.5rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.import-message.success[b-pk2srimwuy] {
    color: #10b981;
}

.import-message.error[b-pk2srimwuy] {
    color: #ef4444;
}

.vision-metadata-hint[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-accent);
}

.import-errors[b-pk2srimwuy] {
    padding: 0.5rem 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.import-error-item[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
}

.error-move-num[b-pk2srimwuy] {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'SF Mono', monospace;
    font-size: 0.7rem;
}

.error-token[b-pk2srimwuy] {
    color: var(--ascend-text-light);
    font-family: 'SF Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.1);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.error-desc[b-pk2srimwuy] {
    color: rgba(255, 255, 255, 0.4);
}

/* Tags Panel */
.tags-grid[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
}

.tag-row[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tag-label[b-pk2srimwuy] {
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    width: 4.375rem;
    flex-shrink: 0;
}

[b-pk2srimwuy] .tag-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.375rem 0.5rem;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

[b-pk2srimwuy] .tag-input:focus {
    outline: none;
    border-color: #31DDE3;
}

[b-pk2srimwuy] .tag-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

[b-pk2srimwuy] select.tag-input option {
    background: #1a2332;
    color: #ffffff;
}

/* The user's own player tag on an OTB game is their profile display name,
   not a per-game field — show it, but don't pretend it's editable here. */
[b-pk2srimwuy] .tag-input[readonly] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    cursor: default;
}

.tag-note[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    padding-left: 4.875rem;
    margin-top: -0.125rem;
}

.tag-swap-row[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0;
}

.tag-swap-hint[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

.tag-swap-hint strong[b-pk2srimwuy] {
    color: var(--ascend-accent);
    font-weight: 600;
}

.tag-swap-btn[b-pk2srimwuy] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tag-swap-btn:hover:not(:disabled)[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.16);
    border-color: var(--ascend-accent);
}

.tag-swap-btn:disabled[b-pk2srimwuy] {
    opacity: 0.5;
    cursor: default;
}

.btn-block[b-pk2srimwuy] {
    width: calc(100% - 2rem);
    margin: 0 1rem 0.75rem;
}

.btn-icon-sm[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon-sm:hover[b-pk2srimwuy] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

/* Typed Move Input Bar */
.move-input-bar[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
}

.notation-toggle[b-pk2srimwuy] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.notation-opt[b-pk2srimwuy] {
    padding: 0.3rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-primary);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notation-opt:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.notation-opt.active[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

[b-pk2srimwuy] .move-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #ffffff;
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    outline: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

[b-pk2srimwuy] .move-input:focus {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 2px rgba(49, 221, 227, 0.08);
}

[b-pk2srimwuy] .move-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.move-input-error[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: #ef4444;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Enrichment Panel */
.enrichment-results[b-pk2srimwuy] {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.enrichment-stat[b-pk2srimwuy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.enrichment-themes[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.theme-tags[b-pk2srimwuy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.theme-tag[b-pk2srimwuy] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 50px;
    padding: 0.2rem 0.6rem;
}

/* OTB Game Banner */
.otb-banner[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: var(--ascend-secondary-light);
}

.otb-banner[b-pk2srimwuy]  i { font-size: 0.85rem; }

/* === Chapter tags row (PBI #5635 Phase 4 manual override) === */

.chapter-tags-row[b-pk2srimwuy] {
    margin-bottom: 0.5rem;
}

.tags-toggle[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.tags-toggle:hover[b-pk2srimwuy] {
    border-color: rgba(49, 221, 227, 0.35);
}

.tags-toggle[b-pk2srimwuy]  i.bi-tags { color: var(--ascend-accent); }
.tags-toggle[b-pk2srimwuy]  i.bi-chevron-up,
.tags-toggle[b-pk2srimwuy]  i.bi-chevron-down {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.tags-label[b-pk2srimwuy] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: rgba(49, 221, 227, 0.85);
    font-size: 0.7rem;
}

.tags-summary[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* #9395 - 0.4 measured 3.75:1 under axe-core on the tags toggle, below 4.5:1.
   The empty-tags hint is what sits beside the structure suggestion on an
   untagged chapter, so the walk of that row caught it. */
.tags-empty[b-pk2srimwuy] {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.tag-chip[b-pk2srimwuy] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* #6633 - the opening/ECO pair in the tag summary is the shared EcoBadge now;
   the .tag-chip.eco and .tag-chip.opening variants are gone. Topic tags keep
   the chip language below. */

.tag-chip.topic[b-pk2srimwuy] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-weight: 500;
}

.tags-editor[b-pk2srimwuy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
}

.tags-editor-hint[b-pk2srimwuy] {
    flex-basis: 100%;
    margin: 0 0 0.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

.tags-field[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    flex: 1 1 12rem;
    gap: 0.25rem;
}

.tags-field-eco[b-pk2srimwuy] { flex: 0 0 5rem; }
.tags-field-topic[b-pk2srimwuy] { flex: 1 1 18rem; }

.tags-field label[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.55);
}

.tags-input[b-pk2srimwuy] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 6px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    padding: 0.4rem 0.55rem;
    outline: none;
}

.tags-input:focus[b-pk2srimwuy] {
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.07);
}

.tags-input-eco[b-pk2srimwuy] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tags-actions[b-pk2srimwuy] {
    display: flex;
    gap: 0.5rem;
    flex: 1 1 100%;
    margin-top: 0.25rem;
}

.tags-save-btn[b-pk2srimwuy] {
    background: linear-gradient(135deg, var(--ascend-accent) 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.tags-save-btn:disabled[b-pk2srimwuy] {
    opacity: 0.6;
    cursor: wait;
}

.tags-cancel-btn[b-pk2srimwuy] {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
}

.tags-error[b-pk2srimwuy] {
    flex: 1 1 100%;
    color: #ef4444;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
}

.tags-error[b-pk2srimwuy]  i { margin-right: 0.3rem; }

/* Guess-the-Move: Side Selection Overlay */
.guess-side-selection[b-pk2srimwuy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
}

.side-card[b-pk2srimwuy] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 2rem 2.5rem;
    text-align: center;
    max-width: 25rem;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
}

.side-card h3[b-pk2srimwuy] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    color: #31DDE3;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.side-card p[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 1.5rem;
}

.side-buttons[b-pk2srimwuy] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.side-btn[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 8.125rem;
}

.side-btn:hover[b-pk2srimwuy] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.side-btn .piece-icon[b-pk2srimwuy] {
    font-size: 2rem;
    line-height: 1;
}

.side-btn.white-btn:hover[b-pk2srimwuy] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.side-btn.black-btn:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.btn-cancel[b-pk2srimwuy] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: color 0.15s ease;
}

.btn-cancel:hover[b-pk2srimwuy] {
    color: rgba(255, 255, 255, 0.7);
}

/* Scan Review Bar */
/* #9074 - the shared board's material balance strip shares the row the quick edit
   button (below) floats over, bottom-right of the board area; keep the strip's text
   clear of it. */
.board-area[b-pk2srimwuy]  .chessboard-material {
    padding-right: 2.25rem;
    box-sizing: border-box;
}

/* #9074 review round 1 - with named players the balance sits in the bottom player strip, on
   that same row; keep the strip's name and balance clear of the button too. */
.board-area[b-pk2srimwuy]  .board-chrome-bottom {
    padding-right: 2.25rem;
}

/* Quick Edit Button */
.board-edit-btn[b-pk2srimwuy] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 22, 40, 0.85);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 6px;
    color: rgba(49, 221, 227, 0.7);
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s;
}

.board-edit-btn:hover:not(:disabled)[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.board-edit-btn:disabled[b-pk2srimwuy] {
    opacity: 0.2;
    cursor: default;
}

/* Inline Position Editor (sidebar panel) */
.editor-panel-body[b-pk2srimwuy] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.editor-piece-rows[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.editor-piece-row[b-pk2srimwuy] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.editor-piece-btn[b-pk2srimwuy] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.editor-piece-btn:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
}

.editor-piece-btn.selected[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.2);
    border-color: #31DDE3;
}

.editor-piece-btn.erase[b-pk2srimwuy] {
    color: #ef4444;
}

.editor-piece-btn.clear-board[b-pk2srimwuy] {
    color: rgba(255, 255, 255, 0.5);
}

.editor-piece-btn.clear-board:hover[b-pk2srimwuy] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.piece-icon[b-pk2srimwuy] {
    font-size: 1.2rem;
    line-height: 1;
}

.piece-icon.white[b-pk2srimwuy] { color: #ffffff; }
.piece-icon.black[b-pk2srimwuy] { color: #666; }

.editor-side-select[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.editor-label[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.editor-actions[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editor-scan-btn[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    border-radius: 8px;
    border: 1px dashed rgba(49, 221, 227, 0.3);
    background: rgba(49, 221, 227, 0.05);
    color: rgba(49, 221, 227, 0.8);
    cursor: pointer;
    transition: all 0.2s;
}

.editor-scan-btn:hover[b-pk2srimwuy] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.5);
}

.editor-hint[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    margin: 0;
}

.editor-select[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
}

.editor-select option[b-pk2srimwuy] {
    background: #0f172a;
}

/* #9418 - the AI-check suggestions sit under the board while the scan waits for Apply. */
.scan-suggestions-slot[b-pk2srimwuy] {
    margin-top: 0.75rem;
    min-width: 0;
}

.scan-review-bar[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.1), rgba(184, 133, 54, 0.05));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    margin-top: 0.5rem;
    gap: 0.5rem;
}

.scan-review-text[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.scan-review-actions[b-pk2srimwuy] {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.scan-review-btn[b-pk2srimwuy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid;
}

.scan-review-btn.accept[b-pk2srimwuy] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

.scan-review-btn.accept:hover[b-pk2srimwuy] {
    background: rgba(16, 185, 129, 0.25);
}

.scan-review-btn.discard[b-pk2srimwuy] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--ascend-text-light);
}

.scan-review-btn.discard:hover[b-pk2srimwuy] {
    background: rgba(239, 68, 68, 0.2);
}

/* Camera viewfinder CSS extracted to CameraCaptureModal.razor.css */
/* Corner Editor CSS extracted to CornerEditorOverlay.razor.css */

/* Scan Progress Modal — #6347: .scan-progress-overlay and the
   .scan-progress-modal card are gone; the shared <Modal> (Size=Small) owns the
   backdrop and the dialog card. Only the content remains, on
   .scan-progress-content, which also carries the complete/failed state class
   that used to sit on the card. */
.scan-progress-content[b-pk2srimwuy] {
    text-align: center;
}

.scan-progress-icon[b-pk2srimwuy] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(49, 221, 227, 0.05));
    border: 2px solid rgba(49, 221, 227, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: #31DDE3;
}

.scan-progress-content.complete .scan-progress-icon[b-pk2srimwuy] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

.scan-progress-content.failed .scan-progress-icon[b-pk2srimwuy] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--ascend-text-light);
}

.scan-progress-title[b-pk2srimwuy] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.75rem;
}

.scan-progress-steps[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}

.scan-progress-step[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    padding: 0.2rem 0;
}

.scan-progress-step.active[b-pk2srimwuy] {
    color: #31DDE3;
}

.scan-progress-step.done[b-pk2srimwuy] {
    color: #10b981;
}

.step-indicator[b-pk2srimwuy] {
    width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spin-icon[b-pk2srimwuy] {
    animation: spin-b-pk2srimwuy 1s linear infinite;
}

@keyframes spin-b-pk2srimwuy {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.scan-fail-hint[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-text-light);
    line-height: 1.5;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    background: rgba(239, 68, 68, 0.06);
    border-radius: 8px;
}

/* Guess-the-Move: Feedback Overlay */
.feedback-overlay[b-pk2srimwuy] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 50px;
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    z-index: 10;
    pointer-events: none;
    animation: feedbackFadeIn-b-pk2srimwuy 0.2s ease;
}

.feedback-overlay.correct[b-pk2srimwuy] {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #10b981;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
}

.feedback-overlay.incorrect[b-pk2srimwuy] {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: var(--ascend-text-light);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
}

.feedback-icon[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}

.feedback-text[b-pk2srimwuy] {
    white-space: nowrap;
}

@keyframes feedbackFadeIn-b-pk2srimwuy {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Guess-the-Move: Score Bar */
.score-bar[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.score-correct[b-pk2srimwuy] {
    color: #10b981;
    font-weight: 600;
}

.score-divider[b-pk2srimwuy] {
    color: rgba(255, 255, 255, 0.2);
}

.score-total[b-pk2srimwuy] {
    color: rgba(255, 255, 255, 0.5);
}

.score-accuracy[b-pk2srimwuy] {
    color: #31DDE3;
    font-weight: 600;
}

/* Send to Repertoire Panel */
.repertoire-send-panel[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
}

[b-pk2srimwuy] .form-select {
    width: calc(100% - 2rem);
    margin: 0.75rem 1rem 0;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    outline: none;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

[b-pk2srimwuy] .form-select:focus {
    border-color: rgba(49, 221, 227, 0.4);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(49, 221, 227, 0.08);
}

[b-pk2srimwuy] .form-select option {
    background: #0f172a;
    color: #ffffff;
}

/* Guess-the-Move: Completion Overlay */
.guess-completed-overlay[b-pk2srimwuy] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.5rem 2rem;
    background: rgba(10, 22, 40, 0.95);
    border: 2px solid rgba(184, 133, 54, 0.5);
    border-radius: 16px;
    z-index: 10;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    animation: feedbackFadeIn-b-pk2srimwuy 0.3s ease;
    text-align: center;
}

/* Bug #9053 follow-up 2: a neutral completion receipt, not a reward. --ascend-success
   is the green of the guess feedback's correct check and the shared verdict's check;
   the reward gold (#B88536) is kept off this icon. */
.guess-completed-overlay i[b-pk2srimwuy] {
    color: var(--ascend-success);
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.completed-title[b-pk2srimwuy] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.completed-score[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Book Position Drill */

.header-btn.drill-active[b-pk2srimwuy] {
    color: #31DDE3;
}

/* #6347 — the whole `.modal-backdrop` / `.drill-modal*` / `.drill-position-info`
   / `.drill-field` / `.drill-modal-footer` block that used to live here was
   DEAD, for the same reason the `.drill-btn` system before it was: StudyBoard's
   own markup uses none of those classes, and the only consumer was
   <PositionDrillModal>, a child component whose markup never carries this page's
   CSS-isolation scope attribute. The overlay + dialog chrome now comes from the
   shared <Modal>; the content rules moved to the component that owns the markup,
   Components/Shared/PositionDrillModal.razor.css. `.header-btn.drill-active`
   above stays — that one IS StudyBoard's own markup. */

/* ── Chapter sections (#7058) ───────────────────────────────────────────────
   Headings that group a chapter's games. Deliberately quieter than a chapter
   title and quieter than an active game tab: a section is an organizational
   label, and styling it like a unit of study would teach the reader the exact
   thing this feature exists to stop implying.

   COLOR NOTE: every surface here is DARK, so --ascend-text-light / -secondary /
   -muted are the readable tokens. --ascend-text-primary is #0f172a, the SAME
   value as --ascend-bg-dark - it is the text color for the light-surface pair
   and is literally invisible here. app.css warns about exactly this trap; the
   first browser walk of this feature caught a control that had fallen into
   it. */

.chapter-section-row[b-pk2srimwuy] {
    display: flex;
    flex-direction: column;
    /* .header-row's align-items:center would center the heading and its games
       over the page while the ungrouped strip above stays left-aligned, which
       reads as two unrelated controls rather than one list. */
    align-items: flex-start;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.chapter-section-heading[b-pk2srimwuy] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.5rem;
}

.chapter-section-title[b-pk2srimwuy] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ascend-text-secondary);
}

.chapter-section-btn[b-pk2srimwuy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ascend-text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.chapter-section-btn:hover:not(:disabled)[b-pk2srimwuy] {
    color: var(--ascend-accent);
    border-color: color-mix(in srgb, var(--ascend-accent) 40%, transparent);
}

.chapter-section-btn:disabled[b-pk2srimwuy] {
    opacity: 0.4;
    cursor: default;
}

.chapter-section-input[b-pk2srimwuy] {
    /* align-items:flex-start on the row shrinks a flex:auto input to its
       content, which truncated a real book section name mid-word while the
       author was typing it. Give the field a width of its own. */
    width: min(24rem, 60vw);
    padding: 0.2rem 0.45rem;
    background: var(--ascend-bg-dark);
    border: 1px solid color-mix(in srgb, var(--ascend-text-light) 16%, transparent);
    border-radius: 6px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
}

.chapter-section-input:focus[b-pk2srimwuy] {
    outline: none;
    border-color: var(--ascend-accent);
}

.chapter-section-empty[b-pk2srimwuy] {
    align-self: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-style: italic;
    color: var(--ascend-text-secondary);
}

.chapter-section-error[b-pk2srimwuy] {
    margin-top: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-error);
}

.game-tab.add-section-tab[b-pk2srimwuy] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-style: dashed;
}

/* #7194 - the chapter's content type in the tag summary. Reads as a statement
   about the chapter rather than one more free-form tag, so it takes the accent
   the topic chips deliberately do not. */
.tag-chip.content-type[b-pk2srimwuy] {
    background: color-mix(in srgb, var(--ascend-accent) 14%, transparent);
    color: var(--ascend-accent);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 34%, transparent);
}

/* #9212 - the pawn structure the member linked this chapter to. Neutral like
   the topic chips (it is the member's own reading, not a classification), with
   the accent border so it reads as a link to the catalog. */
.tag-chip.structure[b-pk2srimwuy] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 34%, transparent);
}
/* /Components/Pages/StudyDetail.razor.rz.scp.css */
.study-detail-page[b-wexz8iyo93] {
    background: radial-gradient(circle at top, rgba(49, 221, 227, 0.08), transparent 50%),
                linear-gradient(180deg, #0f172a 0%, #0a1628 100%);
    padding: 2rem;
    overflow-x: hidden;
}

.loading-container[b-wexz8iyo93] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.spinner[b-wexz8iyo93] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(49, 221, 227, 0.2);
    border-top-color: #31DDE3;
    border-radius: 50%;
    animation: spin-b-wexz8iyo93 1s linear infinite;
}

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

.error-state[b-wexz8iyo93] {
    text-align: center;
    padding: 4rem;
    color: rgba(255, 255, 255, 0.6);
}

.detail-container[b-wexz8iyo93] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Header */
.detail-header[b-wexz8iyo93] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.header-left[b-wexz8iyo93] {
    min-width: 0;
    width: 100%;
}

.back-link[b-wexz8iyo93] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    transition: color 0.15s ease;
}

.back-link:hover[b-wexz8iyo93] {
    color: #31DDE3;
}

.title-row[b-wexz8iyo93] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.study-cover-thumb[b-wexz8iyo93] {
    width: 64px;
    height: auto;
    max-height: 96px;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    object-fit: cover;
}

/* Editable cover slot (blank studies only) — wraps the thumb so we can
   overlay a "Replace" affordance on hover without breaking the layout
   for book-derived studies that show the bare image. */
.cover-slot[b-wexz8iyo93] {
    position: relative;
    flex-shrink: 0;
}

.cover-slot-editable[b-wexz8iyo93] {
    cursor: pointer;
}

.cover-replace-overlay[b-wexz8iyo93] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: pointer;
}

.cover-slot-editable:hover .cover-replace-overlay[b-wexz8iyo93],
.cover-replace-overlay:focus-within[b-wexz8iyo93] {
    opacity: 1;
}

/* #7758 - this one is a full-bleed scrim, not a small button, so the shared
   --hover-reveal-rest token is deliberately NOT used on it: showing it at rest
   would black out the 64px cover it sits on and every study would display a
   dark "Replace" tile instead of its own artwork. The honest touch shape is a
   caption bar along the bottom edge - visible at rest, so the affordance
   exists, while the cover stays readable above it. */
@media (hover: none) and (pointer: coarse) {
    .cover-slot-editable .cover-replace-overlay[b-wexz8iyo93] {
        inset: auto 0 0 0;
        opacity: 1;
        border-radius: 0 0 6px 6px;
        padding: 0.2rem 0;
        font-size: 0.65rem;
    }
}

/* "Upload cover" placeholder shown when a blank study has no cover yet. */
.cover-upload-empty[b-wexz8iyo93] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 64px;
    height: 96px;
    flex-shrink: 0;
    border: 1px dashed rgba(49, 221, 227, 0.35);
    border-radius: 6px;
    background: rgba(49, 221, 227, 0.05);
    color: rgba(49, 221, 227, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cover-upload-empty:hover[b-wexz8iyo93] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.55);
}

.cover-upload-empty .bi-image[b-wexz8iyo93] {
    font-size: 1.25rem;
}

.title-content[b-wexz8iyo93] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.title-section[b-wexz8iyo93] {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    min-width: 0;
}

.study-title[b-wexz8iyo93] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    cursor: pointer;
    word-break: break-word;
    flex: 1 1 100%;
}

.study-title:hover[b-wexz8iyo93] {
    color: #31DDE3;
}

.title-input[b-wexz8iyo93] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 12px;
    padding: 0.25rem 0.5rem;
    outline: none;
}

.type-badge[b-wexz8iyo93] {
    display: inline-block;
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    padding: 0.3rem 0.75rem;
}

.type-badge.type-clickable[b-wexz8iyo93] {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.type-badge.type-clickable:hover[b-wexz8iyo93],
.type-badge.type-clickable:focus[b-wexz8iyo93] {
    background: rgba(49, 221, 227, 0.18);
    border-color: rgba(49, 221, 227, 0.55);
    outline: none;
}

.type-badge.type-edit[b-wexz8iyo93] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    cursor: pointer;
    color: #31DDE3;
    padding-right: 1.75rem;
}

.type-badge.type-edit:focus[b-wexz8iyo93] {
    outline: 2px solid rgba(49, 221, 227, 0.6);
    outline-offset: 1px;
}

.study-meta[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    color: rgba(184, 133, 54, 0.8);
    margin: 0.5rem 0 0;
    line-height: 1.5;
    font-style: italic;
}

.study-meta .book-title-text[b-wexz8iyo93] {
    font-style: italic;
}

.study-meta .subject-player[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
}

.study-meta .study-author-editable[b-wexz8iyo93] {
    cursor: pointer;
    border-bottom: 1px dashed rgba(184, 133, 54, 0.4);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.study-meta .study-author-editable:hover[b-wexz8iyo93],
.study-meta .study-author-editable:focus[b-wexz8iyo93] {
    color: var(--ascend-secondary-light);
    border-color: rgba(184, 133, 54, 0.7);
    outline: none;
}

.study-meta .study-author-empty[b-wexz8iyo93] {
    cursor: pointer;
    font-style: normal;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 0.1rem 0.6rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.study-meta .study-author-empty:hover[b-wexz8iyo93],
.study-meta .study-author-empty:focus[b-wexz8iyo93] {
    color: var(--ascend-accent);
    border-color: rgba(49, 221, 227, 0.5);
    outline: none;
}

.study-meta .author-input[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    font-style: italic;
    font-size: 1rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 12px;
    padding: 0.2rem 0.5rem;
    outline: none;
}

/* #7786 - the linked book's level chip under the byline. */
.study-book-level[b-wexz8iyo93] {
    margin: 0.25rem 0 0.5rem;
}

.study-description[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.6);
    margin: 0.5rem 0 0;
    line-height: 1.5;
}

.header-actions[b-wexz8iyo93] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.header-actions[b-wexz8iyo93]  .toc-scan-wrapper {
    padding: 0;
}

.header-actions[b-wexz8iyo93]  .toc-scan-wrapper label {
    padding: 0.5rem 1rem;
}

/* Chapters List */
.empty-chapters[b-wexz8iyo93] {
    text-align: center;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.15);
    border-radius: 24px;
}

.empty-chapters-title[b-wexz8iyo93] {
    font-family: var(--ascend-font-primary);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.empty-chapters-hint[b-wexz8iyo93] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    line-height: 1.5;
}

/* Workbook Summary */
.workbook-summary-card[b-wexz8iyo93] {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.wb-stats-row[b-wexz8iyo93] {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

/* #8228 sweep - the card's one visible statement of the interval's level. */
.wb-legend[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: var(--ascend-text-secondary);
    text-align: center;
    line-height: 1.4;
    margin: 0 0 0.6rem;
}

.wb-progress-bar[b-wexz8iyo93] {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.wb-progress-fill[b-wexz8iyo93] {
    height: 100%;
    background: linear-gradient(90deg, #31DDE3, #42e8ed);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.wb-progress-text[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.25rem;
    display: block;
    text-align: center;
}

.wb-woodpecker-controls[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.wb-cycle-badge[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    background: rgba(184, 133, 54, 0.15);
    border: 1px solid rgba(184, 133, 54, 0.4);
    border-radius: 50px;
    color: #B88536;
}

.wb-repetition-cta[b-wexz8iyo93] {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
}

.chapters-list[b-wexz8iyo93] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Multi-Collection picker (PBI #5829) ─────────────────────────────
   Shown at the top of a bare Study page when 2+ Collections reference
   this Study (via PrimaryStudyId OR any CollectionResource.SourceStudyId).
   User clicks a link to enter the Collection. Single-match path
   auto-redirects in LoadStudy and never paints this. */
.hosting-collections-picker[b-wexz8iyo93] {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 10px;
}

.picker-header[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.6rem;
}

.picker-header[b-wexz8iyo93]  i {
    color: var(--ascend-accent);
}

.picker-list[b-wexz8iyo93] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.picker-link[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.12s ease;
}

.picker-link:hover[b-wexz8iyo93] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.4);
    transform: translateX(3px);
}

.picker-link-title[b-wexz8iyo93] {
    flex: 1;
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.92);
}

.picker-link-meta[b-wexz8iyo93] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

.picker-badge[b-wexz8iyo93] {
    background: rgba(184, 133, 54, 0.18);
    color: var(--ascend-secondary-light);
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.picker-link[b-wexz8iyo93]  .bi-arrow-right {
    color: rgba(255, 255, 255, 0.4);
}

.picker-link:hover[b-wexz8iyo93]  .bi-arrow-right {
    color: var(--ascend-accent);
}

.chapter-card[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* min-width:0 — see note above the .chapter-title rule; required so
       the card can shrink inside the flex chapter-row on narrow viewports. */
    min-width: 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    cursor: pointer;
}

.chapter-card:hover[b-wexz8iyo93] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.05);
    transform: translateX(4px);
}

/* #7405 - a Reading study's chapter opens nothing, so its card must not behave
   like something you can click into. No pointer cursor, no hover lift, no slide.
   It still reads as a chapter: the completion toggle and the reflection badge sit
   outside this element and are untouched. */
.chapter-card-static[b-wexz8iyo93] {
    cursor: default;
}

.chapter-card-static:hover[b-wexz8iyo93] {
    border-color: rgba(49, 221, 227, 0.15);
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    transform: none;
}

.chapter-order[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: #31DDE3;
    flex-shrink: 0;
}

.chapter-info[b-wexz8iyo93] {
    flex: 1;
    min-width: 0;
}

.chapter-title[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: #ffffff;
    /* Long chapter titles (common with workbook chapters like
       "Chapter 12: The Queen's Gambit Declined, Orthodox Defense —
       Exchange Variation") wrap up to 2 lines with ellipsis instead
       of truncating mid-word or pushing the edit buttons off-screen. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* overflow-wrap:anywhere wraps at word boundaries first and only
       character-breaks unbreakable strings. `word-break: break-word`
       (the prior value) Chromium can interpret as break-all inside
       cramped flex slots — producing the single-letter-per-line
       layout Joe flagged on the indented children in docs/mobile-
       study.jpg (2026-05-23). */
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Section Headers */
.section-header[b-wexz8iyo93] {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.section-header:first-child[b-wexz8iyo93] {
    margin-top: 0;
}

.section-name[b-wexz8iyo93] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-secondary);
}

/* Game Count Badge */
.game-count-badge[b-wexz8iyo93] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(49, 221, 227, 0.8);
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 50px;
    padding: 0.1rem 0.5rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.delete-chapter-btn[b-wexz8iyo93] {
    color: rgba(239, 68, 68, 0.6) !important;
}

.delete-chapter-btn:hover[b-wexz8iyo93] {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

.answers-link[b-wexz8iyo93] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 50px;
    padding: 0.1rem 0.5rem;
    margin-left: 0.35rem;
    text-decoration: none;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.answers-link:hover[b-wexz8iyo93] {
    background: rgba(184, 133, 54, 0.2);
    border-color: rgba(184, 133, 54, 0.4);
    color: var(--ascend-secondary-light);
}

.chapter-arrow[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.chapter-card:hover .chapter-arrow[b-wexz8iyo93] {
    color: #31DDE3;
}

/* Chapter Completion Toggle */
.chapter-row[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Child chapters — indented with hierarchical numbering and tree line */
.chapter-row.chapter-child[b-wexz8iyo93] {
    position: relative;
}

.chapter-row.chapter-child[b-wexz8iyo93]::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.chapter-row.chapter-child .chapter-order[b-wexz8iyo93] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.chapter-complete-btn[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ascend-text-secondary);
    flex-shrink: 0;
    padding: 0;
    transition: color 0.2s;
}

.chapter-complete-btn:hover[b-wexz8iyo93] {
    color: rgba(16, 185, 129, 0.7);
}

.chapter-complete-btn.completed[b-wexz8iyo93] {
    color: #10b981;
}

.completed-title[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.5) !important;
}

.reflection-badge[b-wexz8iyo93] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.375rem;
    vertical-align: middle;
}

.chapter-row .chapter-card[b-wexz8iyo93] {
    flex: 1;
    min-width: 0;
}

/* Completion Summary */
.study-completion-summary[b-wexz8iyo93] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.completion-fill[b-wexz8iyo93] {
    background: linear-gradient(90deg, #10b981, #34d399) !important;
}

/* btn-icon removed — using shared Button component */

/* Modal text used inside shared Modal ChildContent */
.modal-text[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* Bug #6604 — Include/create feedback line inside the picker modals. */
.modal-text.include-feedback[b-wexz8iyo93] {
    color: #f0a44a;
    margin-top: 0.5rem;
}

/* Form Elements */
.form-group[b-wexz8iyo93] {
    margin-bottom: 1.25rem;
}

.form-label[b-wexz8iyo93] {
    display: block;
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.label-optional[b-wexz8iyo93] {
    font-weight: 400;
    text-transform: none;
    color: rgba(255, 255, 255, 0.4);
}

/* #7266: fill, border, radius, colour, font, padding and the focus ring were
   a verbatim copy of the global .form-input in app.css (#7258). Only the box
   model is left. */
[b-wexz8iyo93] .form-input {
    width: 100%;
    box-sizing: border-box;
}

/* #7266: the private caret, the option fill and the select cursor all
   duplicated app.css - the global `select` rule already draws a cyan chevron
   and paints <option>, and select.form-input already restores the caret room.
   The <optgroup> treatment was the one thing app.css did NOT own, so it moved
   there (global `select optgroup`) rather than staying private here. */

.form-textarea[b-wexz8iyo93] {
    min-height: 100px;
    resize: vertical;
}

.bulk-toggle[b-wexz8iyo93] {
    margin-bottom: 0.75rem;
}

.bulk-toggle-btn[b-wexz8iyo93] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.bulk-toggle-btn:hover[b-wexz8iyo93] {
    border-color: rgba(49, 221, 227, 0.4);
    color: rgba(255, 255, 255, 0.7);
}

.bulk-toggle-btn.active[b-wexz8iyo93] {
    background: rgba(49, 221, 227, 0.1);
    border-color: #31DDE3;
    color: #31DDE3;
}

.bulk-textarea[b-wexz8iyo93] {
    min-height: 180px;
    font-size: 0.85rem;
    line-height: 1.6;
}

.bulk-count[b-wexz8iyo93] {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: #31DDE3;
}

/* Continue Button */
/* btn-continue removed — using shared Button Accent variant */
/* toc-scan-btn removed — using shared Button Secondary variant */

/* Study Progress Summary */
.study-progress-summary[b-wexz8iyo93] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.progress-header[b-wexz8iyo93] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.progress-label[b-wexz8iyo93] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}

.progress-value[b-wexz8iyo93] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: #31DDE3;
}

.progress-bar-track[b-wexz8iyo93] {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill[b-wexz8iyo93] {
    height: 100%;
    background: linear-gradient(90deg, #31DDE3, #42e8ed);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.progress-detail[b-wexz8iyo93] {
    display: block;
    margin-top: 0.375rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

/* Chapter Progress Bar */
.chapter-progress[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

.chapter-progress-track[b-wexz8iyo93] {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    max-width: 120px;
}

.chapter-progress-fill[b-wexz8iyo93] {
    height: 100%;
    background: rgba(49, 221, 227, 0.6);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.chapter-progress-fill.complete[b-wexz8iyo93] {
    background: #10b981;
}

.chapter-progress-text[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.chapter-score[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.25);
}

/* Push Message */
.push-message[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.5rem 0;
}

.push-message.success[b-wexz8iyo93] {
    color: #10b981;
}

.push-message.error[b-wexz8iyo93] {
    color: #ef4444;
}

/* #8530 - push into a new book or an existing one */
.push-target-choice[b-wexz8iyo93] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.push-target-option[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.push-new-book-link[b-wexz8iyo93] {
    color: var(--ascend-accent);
}

/* toc-scan-btn styles removed — using shared Button */

@media (max-width: 768px) {
    .study-detail-page[b-wexz8iyo93] {
        padding: 1rem;
        overflow-x: hidden;
    }

    .detail-container[b-wexz8iyo93] {
        max-width: 100%;
        overflow: hidden;
    }

    .detail-header[b-wexz8iyo93] {
        gap: 1rem;
    }

    .study-title[b-wexz8iyo93] {
        font-size: 1.25rem;
    }

    .title-row[b-wexz8iyo93] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .title-content[b-wexz8iyo93] {
        width: 100%;
    }

    .study-cover-thumb[b-wexz8iyo93] {
        width: 48px;
    }

    .chapter-card[b-wexz8iyo93] {
        padding: 0.75rem 1rem;
    }

    .header-actions[b-wexz8iyo93] {
        gap: 0.375rem;
        width: 100%;
        justify-content: flex-start;
    }

    .empty-chapters[b-wexz8iyo93] {
        padding: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .study-detail-page[b-wexz8iyo93] {
        padding: 0.5rem;
    }

    .detail-container[b-wexz8iyo93] {
        gap: 1rem;
    }

    .study-title[b-wexz8iyo93] {
        font-size: 1.1rem;
    }

    .title-input[b-wexz8iyo93] {
        font-size: 1.1rem;
    }

    .chapter-card[b-wexz8iyo93] {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }

    .chapter-order[b-wexz8iyo93] {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    .chapter-title[b-wexz8iyo93] {
        font-size: 0.85rem;
    }

    .chapter-progress-track[b-wexz8iyo93] {
        max-width: 80px;
    }

    /* Chapter rows on mobile — edit buttons always visible (no hover
       state on touch), bigger tap targets, less-critical buttons
       hidden to save horizontal space for the title. Row wraps to a
       second line if needed so nothing gets cut off. */
    .chapter-row[b-wexz8iyo93] {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }
    .chapter-row .chapter-card[b-wexz8iyo93] { flex: 1 1 100%; }
    .chapter-edit-buttons[b-wexz8iyo93] {
        width: 100%;
        justify-content: flex-end;
        gap: 0.15rem;
    }
    .rename-btn[b-wexz8iyo93],
    .reorder-btn[b-wexz8iyo93] {
        width: 36px;
        height: 36px;
        opacity: 1;  /* always visible — no hover on touch */
    }
    .rename-btn[b-wexz8iyo93]  i,
    .reorder-btn[b-wexz8iyo93]  i {
        font-size: 1rem;
    }
    /* Hide less-critical actions on phones — keep rename, unnest,
       delete. "Edit puzzles/theme" and "Add child chapter" are
       secondary and can live behind a kebab later; drop them for
       now so the primary actions are tappable. */
    .chapter-edit-buttons .chapter-btn-mobile-hide[b-wexz8iyo93] {
        display: none;
    }
    .chapter-dnd-handle[b-wexz8iyo93] {
        width: 28px;
        height: 36px;
    }
    .chapter-complete-btn[b-wexz8iyo93] {
        width: 36px;
        height: 36px;
    }

    /* Indented children get half the desktop indent on mobile so the
       chapter-card has more horizontal space for the title. The Razor
       template stamps `margin-left: level*24px` inline, so override
       with !important. Joe-flagged 2026-05-23 (docs/mobile-study.jpg)
       where indented children were title-wrapping into vertical letters. */
    .chapter-row.chapter-child[b-wexz8iyo93] {
        margin-left: 8px !important;
    }

    /* Hide the chevron arrow on very-narrow phones — saves ~30px for
       the title. Card is still tappable as a link without the visual. */
    .chapter-arrow[b-wexz8iyo93] {
        display: none;
    }

    .header-actions[b-wexz8iyo93] {
        gap: 0.25rem;
    }

    .empty-chapters[b-wexz8iyo93] {
        padding: 1.5rem 0.75rem;
        border-radius: 16px;
    }

    .study-progress-summary[b-wexz8iyo93],
    .study-completion-summary[b-wexz8iyo93] {
        padding: 0.75rem;
    }
}

/* Position Setup Toggle & Container */
.position-toggle[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    padding: 0.3rem 0;
    transition: color 0.15s;
}

.position-toggle:hover[b-wexz8iyo93] {
    color: #31DDE3;
}

.custom-badge[b-wexz8iyo93] {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 4px;
    color: #31DDE3;
    margin-left: 0.3rem;
}

.position-setup-container[b-wexz8iyo93] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(49, 221, 227, 0.1);
    border-radius: 8px;
}

/* Chapter Rename */
.rename-btn[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
    /* #7758 - see CollectionDetail; this row is its twin and ends in the same
       delete. .delete-chapter-btn above is already red at rest. */
    opacity: var(--hover-reveal-rest, 0);
    transition: opacity 0.15s, color 0.15s;
}

.section-header:hover .rename-btn[b-wexz8iyo93],
.chapter-row:hover .rename-btn[b-wexz8iyo93] {
    opacity: 1;
}

.rename-btn:hover[b-wexz8iyo93] {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
}

.chapter-edit-buttons[b-wexz8iyo93] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.reorder-btn[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.reorder-btn:hover[b-wexz8iyo93] {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
}

/* Inline chapter edit */
.chapter-card.editing[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
}

.chapter-inline-edit[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    flex-wrap: wrap;
}

.inline-edit-row[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.inline-label[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

[b-wexz8iyo93] .inline-input-sm {
    width: 55px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.25rem 0.35rem;
    text-align: center;
}

[b-wexz8iyo93] .inline-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    padding: 0.25rem 0.3rem;
}

[b-wexz8iyo93] .inline-select option {
    background: #0f172a;
    color: #ffffff;
}

.inline-edit-actions[b-wexz8iyo93] {
    display: flex;
    gap: 0.25rem;
}

.inline-save-btn[b-wexz8iyo93], .inline-cancel-btn[b-wexz8iyo93] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.inline-save-btn[b-wexz8iyo93] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.inline-save-btn:hover[b-wexz8iyo93] {
    background: rgba(16, 185, 129, 0.25);
}

.inline-cancel-btn[b-wexz8iyo93] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}

.inline-cancel-btn:hover[b-wexz8iyo93] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
}

.section-header[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.section-name-input[b-wexz8iyo93],
.chapter-title-input[b-wexz8iyo93] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 6px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    padding: 0.25rem 0.5rem;
    flex: 1;
    min-width: 0;
}

.section-name-input[b-wexz8iyo93] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.section-name-input:focus[b-wexz8iyo93],
.chapter-title-input:focus[b-wexz8iyo93] {
    outline: none;
    border-color: #31DDE3;
    box-shadow: 0 0 0 2px rgba(49, 221, 227, 0.15);
}

.chapter-card.renaming[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    flex: 1;
}

/* Book Drill Due Banner */

.drill-due-banner[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 10px;
    margin-bottom: 16px;
}

.drill-due-info[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.drill-due-info i[b-wexz8iyo93] {
    color: #31DDE3;
    font-size: 1.1rem;
}

.drill-due-btn[b-wexz8iyo93] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.drill-due-btn:hover[b-wexz8iyo93] {
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.3);
}

.study-resources-panel[b-wexz8iyo93] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.resources-header[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.resources-header h2[b-wexz8iyo93] {
    font-family: var(--ascend-font-primary);
    color: #ffffff;
    font-size: 1.05rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.resources-header .resource-count[b-wexz8iyo93] {
    background: rgba(49, 221, 227, 0.15);
    color: var(--ascend-accent);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.75rem;
}

.resources-grid[b-wexz8iyo93] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.resource-card[b-wexz8iyo93] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.15s ease;
}

.resource-card:hover[b-wexz8iyo93] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(49, 221, 227, 0.3);
}

.resource-card-link[b-wexz8iyo93] {
    display: flex;
    flex: 1;
    gap: 0.75rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.resource-card-link:hover .resource-title[b-wexz8iyo93] {
    color: var(--ascend-accent);
}

.resources-pagination[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.resources-page-btn[b-wexz8iyo93] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.resources-page-btn:hover:not(:disabled)[b-wexz8iyo93] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.4);
    color: var(--ascend-accent);
}

.resources-page-btn:disabled[b-wexz8iyo93] {
    opacity: 0.35;
    cursor: not-allowed;
}

.resources-page-status[b-wexz8iyo93] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
}

.resource-card.is-primary[b-wexz8iyo93] {
    border-color: rgba(184, 133, 54, 0.4);
    background: rgba(184, 133, 54, 0.05);
}

.resource-cover[b-wexz8iyo93], .resource-cover-placeholder[b-wexz8iyo93] {
    width: 50px;
    height: 75px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.resource-cover-placeholder[b-wexz8iyo93] {
    background: rgba(49, 221, 227, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(49, 221, 227, 0.6);
    font-size: 1.5rem;
}

.resource-meta[b-wexz8iyo93] {
    flex: 1;
    min-width: 0;
}

.resource-title[b-wexz8iyo93] {
    color: #ffffff;
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    line-height: 1.2;
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.resource-author[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
}

.resource-badges[b-wexz8iyo93] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.resource-format-badge[b-wexz8iyo93],
.resource-video-badge[b-wexz8iyo93],
.resource-primary-badge[b-wexz8iyo93] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    background: rgba(49, 221, 227, 0.12);
    color: var(--ascend-accent);
}

.resource-video-badge[b-wexz8iyo93] {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}

.resource-primary-badge[b-wexz8iyo93] {
    background: rgba(184, 133, 54, 0.18);
    color: var(--ascend-secondary-light);
}

.resource-actions[b-wexz8iyo93] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.resource-action-btn[b-wexz8iyo93] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.resource-action-btn:hover[b-wexz8iyo93] {
    background: rgba(49, 221, 227, 0.15);
    border-color: var(--ascend-accent);
    color: var(--ascend-accent);
}

.resource-action-btn.danger:hover[b-wexz8iyo93] {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: var(--ascend-text-light);
}

.resources-empty[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-style: italic;
}

.link-resource-list[b-wexz8iyo93] {
    flex: 1;
    overflow-y: auto;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 50vh;
}

.link-resource-row[b-wexz8iyo93] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: all 0.15s ease;
}

.link-resource-row:hover[b-wexz8iyo93] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.3);
}

.link-resource-cover[b-wexz8iyo93], .link-resource-cover-placeholder[b-wexz8iyo93] {
    width: 36px;
    height: 54px;
    border-radius: 3px;
    object-fit: cover;
}

.link-resource-cover-placeholder[b-wexz8iyo93] {
    background: rgba(49, 221, 227, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ascend-accent);
}

.link-resource-meta[b-wexz8iyo93] {
    flex: 1;
    min-width: 0;
}

.link-resource-title[b-wexz8iyo93] {
    color: #ffffff;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-resource-sub[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
}

.merged-from-badge[b-wexz8iyo93] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    padding: 0.1rem 0.5rem;
    border-radius: 8px;
    font-size: 0.65rem;
    margin-left: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chapter-group-heading[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    margin: 1rem 0 0.5rem;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.18);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
}

.chapter-group-heading.merged[b-wexz8iyo93] {
    background: rgba(168, 85, 247, 0.06);
    border-color: rgba(168, 85, 247, 0.25);
    color: #c084fc;
}

.chapter-group-heading i[b-wexz8iyo93] {
    flex-shrink: 0;
}

.chapter-group-heading .chapter-group-count[b-wexz8iyo93] {
    margin-left: auto;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chapter-group-heading .chapter-group-type[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(49, 221, 227, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 999px;
}

.chapter-group-heading .chapter-group-author[b-wexz8iyo93] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* =======================================================================
   Drag-and-drop chapter reordering / re-parenting (chapterDragDrop.js)
   ======================================================================= */

/* Drag handle — six-dots icon inside the chapter row. Only visible on hover
   (desktop) or always on touch. Gives an unambiguous grab target that doesn't
   conflict with tap-to-open the chapter. */
.chapter-dnd-handle[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 28px;
    margin-right: 0.25rem;
    color: rgba(255, 255, 255, 0.25);
    cursor: grab;
    touch-action: none; /* hold-and-drag gesture shouldn't scroll */
    user-select: none;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.chapter-dnd-handle:hover[b-wexz8iyo93] { color: rgba(49, 221, 227, 0.9); }
.chapter-dnd-handle:active[b-wexz8iyo93] { cursor: grabbing; }

/* While a drag is active, dim the original row so the ghost reads as the
   moving element. */
.chapter-dnd-item.chapter-dnd-dragging[b-wexz8iyo93] {
    opacity: 0.4;
}

/* Body state applied by JS while dragging — disables text selection everywhere
   and lets touchmove prevent default without the page scrolling. */
body.chapter-dnd-active[b-wexz8iyo93] {
    user-select: none;
    -webkit-user-select: none;
    cursor: grabbing;
}
body.chapter-dnd-active .chapter-dnd-item[b-wexz8iyo93] { cursor: grabbing; }

/* Drop indicators. Apply to the inner .chapter-card (the visible
   rectangle) rather than the outer .chapter-dnd-item row so the
   indicator doesn't engulf the edit-button row on mobile where the
   row wraps to 2 lines. */
.chapter-dnd-item.chapter-dnd-before .chapter-card[b-wexz8iyo93] {
    box-shadow: 0 -2px 0 0 #31DDE3;
}
.chapter-dnd-item.chapter-dnd-after .chapter-card[b-wexz8iyo93] {
    box-shadow: 0 2px 0 0 #31DDE3;
}
.chapter-dnd-item.chapter-dnd-into .chapter-card[b-wexz8iyo93] {
    border-color: #B88536;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.18) 0%, rgba(184, 133, 54, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(184, 133, 54, 0.6);
}
.chapter-dnd-item.chapter-dnd-invalid .chapter-card[b-wexz8iyo93] {
    border-color: rgba(239, 68, 68, 0.7);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5);
}

/* Mobile / touch: the chevron up/down reorder buttons are cramped and
   redundant next to drag-drop. Hide them and rely on the drag handle for
   reordering. Rename / edit / add-child / delete stay. */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
    .chapter-btn-desktop-only[b-wexz8iyo93] {
        display: none;
    }
    .chapter-dnd-handle[b-wexz8iyo93] {
        color: rgba(49, 221, 227, 0.6); /* always visible on touch — no hover */
    }
}

/* Floating ghost that follows the pointer. */
.chapter-dnd-ghost[b-wexz8iyo93] {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    padding: 0.45rem 0.9rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(49, 221, 227, 0.5);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 12px rgba(49, 221, 227, 0.25);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    pointer-events: none;
    z-index: 10000;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bundled study merge dialog (PBI #5545) */
.bundle-cover-grid[b-wexz8iyo93] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.bundle-cover-option[b-wexz8iyo93] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.bundle-cover-option:hover[b-wexz8iyo93] {
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.bundle-cover-option.selected[b-wexz8iyo93] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
}

.bundle-cover-option img[b-wexz8iyo93] {
    width: 70px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}

.bundle-cover-placeholder[b-wexz8iyo93] {
    width: 70px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.75rem;
}

.bundle-cover-label[b-wexz8iyo93] {
    font-size: 0.75rem;
    text-align: center;
}

.bundle-hint[b-wexz8iyo93] {
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: rgba(49, 221, 227, 0.05);
    border-left: 3px solid var(--ascend-accent);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.required-marker[b-wexz8iyo93] {
    color: var(--ascend-secondary);
    margin-left: 0.15rem;
}

.bundle-marker[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
}

/* Include chapter picker (PBI #5546 Phase F) */
.picker-row[b-wexz8iyo93] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.12);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 0.35rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.picker-row:hover:not(.disabled)[b-wexz8iyo93] {
    border-color: rgba(49, 221, 227, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.picker-row.checked[b-wexz8iyo93] {
    border-color: rgba(49, 221, 227, 0.6);
    background: rgba(49, 221, 227, 0.08);
}

.picker-row.disabled[b-wexz8iyo93] {
    opacity: 0.5;
    cursor: not-allowed;
}

.picker-row input[type="checkbox"][b-wexz8iyo93] {
    margin-top: 0.2rem;
    accent-color: var(--ascend-accent);
}

.picker-meta[b-wexz8iyo93] {
    flex: 1;
    min-width: 0;
}

.picker-breadcrumb[b-wexz8iyo93] {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.15rem;
}

.picker-study[b-wexz8iyo93] {
    color: rgba(49, 221, 227, 0.7);
    font-weight: 500;
}

.picker-sep[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.25);
}

.picker-crumb[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.6);
}

.picker-title[b-wexz8iyo93] {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
}

.picker-subtree-note[b-wexz8iyo93] {
    color: rgba(184, 133, 54, 0.85);
    font-size: 0.8rem;
    font-style: italic;
}

.picker-subtree-toggle[b-wexz8iyo93] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 8px;
    color: rgba(184, 133, 54, 0.95);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.picker-subtree-toggle:hover[b-wexz8iyo93] {
    background: rgba(184, 133, 54, 0.18);
    border-color: rgba(184, 133, 54, 0.5);
}

.picker-subtree-list[b-wexz8iyo93] {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid rgba(184, 133, 54, 0.3);
    border-radius: 0 6px 6px 0;
}

.picker-subtree-item[b-wexz8iyo93] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    line-height: 1.5;
}

.picker-subtree-bullet[b-wexz8iyo93] {
    color: rgba(184, 133, 54, 0.6);
    font-weight: 600;
}

.picker-subtree-more[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-style: italic;
    margin-top: 0.3rem;
    padding-left: 0.4rem;
}

/* Deferred-chapter bucket (PBI #5593) — collapsed by default, only renders when N > 0. */
.deferred-bucket[b-wexz8iyo93] {
    margin-top: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.deferred-bucket-toggle[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.65rem 0.9rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}

.deferred-bucket-toggle:hover[b-wexz8iyo93] {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.9);
}

.deferred-bucket-toggle .bi-moon[b-wexz8iyo93] {
    color: rgba(184, 133, 54, 0.85);
}

.deferred-bucket-list[b-wexz8iyo93] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.4rem 0.4rem 0.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.deferred-item[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0.55rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.02);
}

.deferred-meta[b-wexz8iyo93] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.deferred-title[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deferred-reason[b-wexz8iyo93] {
    color: rgba(184, 133, 54, 0.85);
    font-style: italic;
    font-size: 0.78rem;
}

.deferred-when[b-wexz8iyo93] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
}

.undefer-btn[b-wexz8iyo93] {
    flex-shrink: 0;
    background: rgba(49, 221, 227, 0.08);
    color: rgba(49, 221, 227, 0.85);
    border: 1px solid rgba(49, 221, 227, 0.3);
    padding: 0.35rem 0.7rem;
    border-radius: 7px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.undefer-btn:hover[b-wexz8iyo93] {
    border-color: rgba(49, 221, 227, 0.7);
    background: rgba(49, 221, 227, 0.14);
}

/* #6476 Coach Studies - provenance header on coach-shared copies (gold, to
   match the library's "From your coach" chip: provenance, not lifecycle). */
.coach-provenance-header[b-wexz8iyo93] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.65rem 1rem;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 10px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
}

.coach-provenance-header i[b-wexz8iyo93] {
    color: var(--ascend-secondary-light);
    font-size: 1rem;
}

.coach-provenance-header strong[b-wexz8iyo93] {
    color: var(--ascend-secondary-light);
    font-weight: 600;
}

/* #7257 - marks a study whose source book is not a chess work. Deliberately a
   different hue from .type-badge (the chess study-type chip) so the two read as
   different kinds of statement at a glance: the type chip says which chess study
   this is, this one says it is not a chess study at all. Uses the brand secondary
   token rather than a new hard-coded color. */
.reading-form-badge[b-wexz8iyo93] {
    display: inline-block;
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-secondary-light);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ascend-secondary);
    border-radius: 50px;
    padding: 0.3rem 0.75rem;
    margin-left: 0.4rem;
    white-space: nowrap;
}

.reading-form-badge i[b-wexz8iyo93] {
    margin-right: 0.25rem;
}

/* #8311 - THE STUDY RESOURCES PAGER HAD NO TOUCH FLOOR.

   `.resources-pagination` is `@if (totalResourcePages > 1)` and the panel
   paginates at 8 per study, so on every study with eight or fewer linked
   resources these two buttons do not exist. The live #7736 gate does not walk
   /studies/{studyId} at all (it is parameterized, the same reason #7796 had to
   add the two game surfaces by hand), and even on a run that did, whether it
   saw this pager would be a property of CI's data rather than of the code.
   That is the whole case for a source-level pin: PagerTouchTargetContractTests
   finds this control from the MARKUP, so it is reached whatever the data says.

   Measured from the box: 0.35rem of vertical padding around 0.8rem text plus a
   1px border is about 30px tall on a coarse pointer, 14px under the floor.

   Height only. Unlike the /games and master-game chevrons these buttons carry
   a text label ("Prev" / "Next") beside the icon, so they are already well
   over 44px wide - adding a width floor would assert something the box does
   not need and would hide a later change that stripped the label. */
@media (hover: none) and (pointer: coarse) {
    .resources-page-btn[b-wexz8iyo93] {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/StudyLibrary.razor.rz.scp.css */
.studies-page[b-8jludi7o3h] {
    background: radial-gradient(circle at top, rgba(49, 221, 227, 0.08), transparent 50%),
                linear-gradient(180deg, #0f172a 0%, #0a1628 100%);
    /* Mobile-first: tight padding on phones, opened up at wider breakpoints. */
    padding: 0.5rem;
}

@media (min-width: 480px) {
    .studies-page[b-8jludi7o3h] {
        padding: 1rem;
    }
}

@media (min-width: 768px) {
    .studies-page[b-8jludi7o3h] {
        padding: 2rem;
    }
}

.loading-container[b-8jludi7o3h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.spinner[b-8jludi7o3h] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(49, 221, 227, 0.2);
    border-top-color: #31DDE3;
    border-radius: 50%;
    animation: spin-b-8jludi7o3h 1s linear infinite;
}

@keyframes spin-b-8jludi7o3h {
    to { transform: rotate(360deg); }
}

.studies-container[b-8jludi7o3h] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* gap scales up at >=768px below */
}

/* Studies Grid / Table */
/* #7817 - OPAQUE and FLAT, like the shared Card since #7543. This was a
   translucent 0.98 -> 0.95 navy gradient over the layout's own gradient, and
   axe-core cannot resolve a background through a gradient or a translucent
   layer: every cell in the grid came back 'incomplete' (neither passed nor
   failed). When #7803 un-hid the Type / Chapters / Accessed columns, those
   cells joined that pile as NEW undecidable kinds and the frozen register
   (#7312, AxeUndecidableRegister.txt) correctly refused them. The flat card
   token is what the gradient rendered as; the grid content is now measured. */
.studies-grid[b-8jludi7o3h] {
    background: var(--ascend-bg-card);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    /* Mobile-first padding; the shared .responsive-table primitive supplies
       the horizontal-scroll affordance below --bp-md, so the wide QuickGrid
       reflows into a scroller instead of pushing the page wider than 320px. */
    padding: 0.75rem;
    position: relative;
}

@media (min-width: 480px) {
    .studies-grid[b-8jludi7o3h] {
        padding: 1rem;
    }
}

@media (min-width: 768px) {
    .studies-grid[b-8jludi7o3h] {
        border-radius: 24px;
        padding: 1.5rem;
        /* No horizontal scroll needed at this width; clip the accent line
           back to the rounded corners. */
        overflow: hidden;
    }
}

/* #7817 - the accent line is drawn with border-image, NOT a background
   (same fix as Card.razor.css, #7543). axe-core treats any ancestor
   pseudo-element that HAS a background as an overlay and compares its absolute
   area with the text node's: a 4px line across a 1200px grid out-weighs a line
   of table text, so every cell was 'undecidable due to a pseudo element' on
   account of a line that never touches it. A pseudo with no background is
   ignored by that check. Same 4px, same gradient. */
.studies-grid[b-8jludi7o3h]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%) 1;
}

/* QuickGrid table styles are in SharedPages.css (global) because
   scoped ::deep cannot reach QuickGrid's internal elements */

.cover-link[b-8jludi7o3h] {
    display: block;
    text-decoration: none;
}

.study-cover-thumb[b-8jludi7o3h] {
    width: 3.25rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.study-cover-placeholder[b-8jludi7o3h] {
    width: 3.25rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ascend-text-secondary);
}

.study-link[b-8jludi7o3h] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
}

.study-title[b-8jludi7o3h] {
    color: #ffffff;
    font-weight: 600;
}

.study-link:hover .study-title[b-8jludi7o3h] {
    color: #31DDE3;
}

.study-description[b-8jludi7o3h] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    /* Mobile-first: wrap instead of nowrap+ellipsis so a long title/meta
       never forces the row wider than a narrow phone. */
    overflow-wrap: anywhere;
}

.study-meta[b-8jludi7o3h] {
    font-size: 0.8rem;
    /* #7817 - was rgba(184, 133, 54, 0.7). Undecidable while the grid was a
       translucent gradient; once the grid went opaque axe measured it at
       3.32:1 on the card navy (needs 4.5:1 at 12.8px). Same gold family,
       opaque and one step lighter. */
    color: var(--ascend-secondary-light);
    font-style: italic;
    overflow-wrap: anywhere;
}/* Once there's room, single-line ellipsis keeps the table tidy. */
@media (min-width: 768px) {
    .study-description[b-8jludi7o3h],
    .study-meta[b-8jludi7o3h] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 25rem;
    }
}

.btn-icon-sm[b-8jludi7o3h] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-sm:hover[b-8jludi7o3h] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--ascend-text-light);
}

.btn-icon-sm.paused[b-8jludi7o3h] {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.btn-icon-sm.paused:hover[b-8jludi7o3h] {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

/* #7803 — wrap is the SAFETY NET, not the layout.

   SharedPages.css sizes td.col-actions to hold two 44px touch targets side by
   side at <=640px, so in practice nothing wraps until a row renders three
   controls (Pause + Hide + Delete, the hidden-vs-paused split). When it does,
   the third one drops to a second line and the row gets taller. That is the
   whole point: a flex row that cannot wrap resolves an impossible demand by
   crushing a child to 0x0, which is invisible and unrecoverable, and that is
   how the Hide button went missing on a phone. A taller row is visible and
   recoverable. Wrapping costs nothing on desktop, where there is room. */
.action-btns[b-8jludi7o3h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: flex-end;
}

.study-link.paused[b-8jludi7o3h] {
    opacity: 0.6;
}

.paused-badge[b-8jludi7o3h] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* HIDDEN vs PAUSED split — organizational declutter badge (slate/muted, to
   read as "off the list" rather than the amber "deliberately paused"). */
.hidden-badge[b-8jludi7o3h] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(148, 163, 184, 0.95);
    background: rgba(148, 163, 184, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* #6476 Coach Studies - "From your coach" provenance chip (gold, so coach
   material reads as provenance rather than a lifecycle state; tooltip
   carries the coach's name). */
.coach-chip[b-8jludi7o3h] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: help;
}

.coach-chip i[b-8jludi7o3h] { font-size: 0.8rem; }

/* PBI #5595 Phase 4 — per-row lifecycle pills */
.lifecycle-pill[b-8jludi7o3h] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: help;
}

.lifecycle-pill i[b-8jludi7o3h] { font-size: 0.85rem; }

.lifecycle-pill-start[b-8jludi7o3h] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.lifecycle-pill-pause[b-8jludi7o3h] {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.lifecycle-pill-resume[b-8jludi7o3h] {
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.3);
}

/* #7792 - the nudge row sits under the title link (outside it) so it can hold
   a real "No thanks" button. The Button is the shared component, so its class
   is reached through ::deep. Its coarse-pointer 44px floor comes from the
   shared Button stylesheet (--touch-target), not from here. */
.lifecycle-nudge[b-8jludi7o3h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.lifecycle-nudge .lifecycle-pill[b-8jludi7o3h] { margin-left: 0; }

.lifecycle-nudge[b-8jludi7o3h]  .lifecycle-nudge-dismiss {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}

/* Compact only for a fine pointer on a wide screen, so it sits with the pill.
   Touch devices and phones keep the shared Button's own sizing - its 44px
   floor and its legible mobile font - untouched. */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    .lifecycle-nudge[b-8jludi7o3h]  .lifecycle-nudge-dismiss {
        padding: 0.125rem 0.625rem;
        font-size: 0.75rem;
    }
}

/* Modal text used inside shared Modal ChildContent */
.modal-text[b-8jludi7o3h] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

/* Form Elements */
.form-group[b-8jludi7o3h] {
    margin-bottom: 1.25rem;
}

.form-label[b-8jludi7o3h] {
    display: block;
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.label-optional[b-8jludi7o3h] {
    font-weight: 400;
    text-transform: none;
    color: rgba(255, 255, 255, 0.4);
}

/* #7266: fill, border, radius, colour, font, padding and the focus ring were
   a verbatim copy of the global .form-input in app.css (#7258); the
   placeholder had DRIFTED DOWN to 0.3 white - well under the global 0.5 and
   the lowest of any copy in the repo - so the global value wins. Only the box
   model is left. */
[b-8jludi7o3h] .form-input {
    width: 100%;
    box-sizing: border-box;
}

.form-textarea[b-8jludi7o3h] {
    min-height: 80px;
    resize: vertical;
}

.error-message[b-8jludi7o3h] {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

/* Scanner integration */
.title-input-row[b-8jludi7o3h] {
    display: flex;
    gap: 0.5rem;
}

.title-input-row .form-input[b-8jludi7o3h] {
    flex: 1;
}

.btn-scan[b-8jludi7o3h] {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(184, 133, 54, 0.15);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 12px;
    color: var(--ascend-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-scan:hover[b-8jludi7o3h] {
    background: rgba(184, 133, 54, 0.25);
    border-color: rgba(184, 133, 54, 0.5);
}

.scanned-preview[b-8jludi7o3h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 10px;
    padding: 0.625rem 0.75rem;
    margin-bottom: 1.25rem;
    position: relative;
}

.scanned-cover[b-8jludi7o3h] {
    width: 48px;
    height: auto;
    border-radius: 4px;
    flex-shrink: 0;
}

.scanned-info[b-8jludi7o3h] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.scanned-author[b-8jludi7o3h] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-secondary);
}

.scanned-meta[b-8jludi7o3h] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.scanned-isbn[b-8jludi7o3h] {
    font-family: monospace;
    font-size: 0.7rem;
    color: rgba(49, 221, 227, 0.6);
}

.btn-clear-scan[b-8jludi7o3h] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-clear-scan:hover[b-8jludi7o3h] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* TOC Scan in create modal */
.btn-toc-scan[b-8jludi7o3h] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(184, 133, 54, 0.15);
    color: var(--ascend-secondary);
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.8rem;
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 50px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-toc-scan:hover[b-8jludi7o3h] {
    background: rgba(184, 133, 54, 0.25);
    border-color: rgba(184, 133, 54, 0.5);
}

.toc-preview[b-8jludi7o3h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 10px;
    padding: 0.625rem 0.75rem;
}

.toc-preview-count[b-8jludi7o3h] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #31DDE3;
}

.btn-toc-edit[b-8jludi7o3h] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-toc-edit:hover[b-8jludi7o3h] {
    background: rgba(255, 255, 255, 0.12);
}

.btn-toc-clear[b-8jludi7o3h] {
    background: transparent;
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-toc-clear:hover[b-8jludi7o3h] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--ascend-text-light);
}

.studies-container[b-8jludi7o3h] {
    gap: 1rem;
}

@media (min-width: 768px) {
    .studies-container[b-8jludi7o3h] {
        gap: 2rem;
    }
}

/* Book Picker */
.book-picker-loading[b-8jludi7o3h] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.book-picker-list[b-8jludi7o3h] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.book-picker-item[b-8jludi7o3h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    color: inherit;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
}

.book-picker-item:hover[b-8jludi7o3h] {
    background: rgba(49, 221, 227, 0.05);
    border-color: rgba(49, 221, 227, 0.2);
}

.book-picker-cover[b-8jludi7o3h] {
    width: 36px;
    height: 54px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.book-picker-cover-placeholder[b-8jludi7o3h] {
    width: 36px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 4px;
    /* #7232: 0.15 read 1.56:1 - the "no cover" book mark was not visible at all. */
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.book-picker-info[b-8jludi7o3h] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.book-picker-title[b-8jludi7o3h] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-picker-author[b-8jludi7o3h] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.book-picker-chevron[b-8jludi7o3h] {
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.studies-filter-bar[b-8jludi7o3h] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* #7862 - OPAQUE, for the same reason the grid above is (#7817) and the shared
   Card is (#7543). A 4%-white wash is a TRANSLUCENT layer, so axe-core resolved
   the pill's background by falling through to .studies-page, which is painted
   with a radial + a linear gradient - and a gradient has no single color, so
   axe returned "incomplete" for the pill AND for the .count badge inside it.
   The badges were the worse half: axe reports a ONE-CHARACTER element that
   FAILS contrast as incomplete rather than as a violation (color-contrast
   evaluate, messageKey shortTextContent), so a real failure on a "1" or a "0"
   could never have surfaced as one. color-mix states the same 4% wash against
   an opaque token, so the pill composites here instead of over the page
   gradient. Measured in Chrome: the pill rendered rgb(26,39,57) before and
   rgb(25,32,51) after; axe now measures the label at 10.72:1 and the badge at
   9.18:1, where both were previously unjudged. */
.filter-pill[b-8jludi7o3h] {
    background: color-mix(in srgb, var(--ascend-text-light) 4%, var(--ascend-background));
    border: 1px solid rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.filter-pill:hover[b-8jludi7o3h] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
}

/* #7862 - the selected pill is opaque for the same reason. Same 18% accent
   wash, stated against the page token instead of whatever the gradient happened
   to be under it. Measured: rgb(21,66,81) before, rgb(21,59,75) after. */
.filter-pill.active[b-8jludi7o3h] {
    background: color-mix(in srgb, var(--ascend-accent) 18%, var(--ascend-background));
    border-color: var(--ascend-accent);
    color: #ffffff;
}

.filter-pill .count[b-8jludi7o3h] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 0.05rem 0.5rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
}

.filter-pill.active .count[b-8jludi7o3h] {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.filter-divider[b-8jludi7o3h] {
    width: 1px;
    background: rgba(49, 221, 227, 0.18);
    margin: 0 0.25rem;
}

/* Status badges per row (PBI #5594 Phase 6) */
.status-badge[b-8jludi7o3h] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid transparent;
    line-height: 1.2;
}

.status-badge.status-notstarted[b-8jludi7o3h] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.6);
}

.status-badge.status-inprogress[b-8jludi7o3h] {
    background: rgba(49, 221, 227, 0.12);
    border-color: rgba(49, 221, 227, 0.45);
    color: #31DDE3;
}

.status-badge.status-completed[b-8jludi7o3h] {
    background: rgba(184, 133, 54, 0.18);
    border-color: rgba(184, 133, 54, 0.5);
    color: #f4a83b;
}

.resource-link-badge[b-8jludi7o3h] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: rgba(184, 133, 54, 0.15);
    color: #B88536;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    font-size: 0.7rem;
    margin-left: 0.4rem;
}

.merged-badge[b-8jludi7o3h] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    padding: 0.1rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    margin-left: 0.4rem;
}

.unmerge-btn[b-8jludi7o3h] {
    margin-left: 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #c084fc;
    border-radius: 6px;
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.unmerge-btn:hover[b-8jludi7o3h] {
    background: rgba(168, 85, 247, 0.15);
    border-color: #c084fc;
}

/* Repertoire-connected master games (PBI #5263) */
/* #6946 - ::deep: the class rides on a child <Card>, so a bare selector never
   matched. The surrounding column is plain block flow, so this margin is the
   only separation between this card and the content stacked after it. */
[b-8jludi7o3h] .connected-games-card {
    margin-bottom: 1.5rem;
}

.connected-game-list[b-8jludi7o3h] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.connected-game-item[b-8jludi7o3h] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.connected-game-item:hover[b-8jludi7o3h] {
    border-color: rgba(49, 221, 227, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.connected-game-info[b-8jludi7o3h] {
    flex: 1;
    min-width: 0;
}

.connected-game-players[b-8jludi7o3h] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
}

.cg-white[b-8jludi7o3h] {
    color: #ffffff;
    font-weight: 600;
}

.cg-vs[b-8jludi7o3h] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

.cg-black[b-8jludi7o3h] {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.cg-year[b-8jludi7o3h] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 0.25rem;
}

.cg-result[b-8jludi7o3h] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 0.25rem;
}

.cg-coach-line[b-8jludi7o3h] {
    margin: 0.35rem 0 0.35rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
}

.connected-game-meta[b-8jludi7o3h] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
}

.cg-opening[b-8jludi7o3h] {
    color: #31DDE3;
}

.cg-depth[b-8jludi7o3h] {
    color: rgba(255, 255, 255, 0.3);
}

/* Search row — sits above the filter pills and chunk-narrows the list by
   title / book title / author / subject player. Clear button appears once
   text exists so a stray query never gets stuck behind a filter pill.

   #7862 - OPAQUE. The row was a 55%-alpha navy over .studies-page's gradient,
   and the <input> inside it paints its own background transparent, so axe-core
   walked the whole chain to that gradient and declined to judge the search
   field at all. --ascend-bg-card is the flat form of that same navy (it IS
   rgb(10,22,40), the 55% stop's own color), and it is a plain token rather than
   a color-mix ON PURPOSE: #7291's static resolver parses hex, rgb/hsl and var()
   and returns null for anything else, so a color-mix here would have made
   .studies-search-input::placeholder unmeasurable to that ratchet - the ratchet
   said so, by reporting its exemption as stale. An axe fix that blinds the
   static sweep is not a fix. Measured: the row rendered rgb(13,29,46) before
   and rgb(10,22,40) after; axe measures the field's white text at 18.1:1. */
.studies-search-row[b-8jludi7o3h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    background: var(--ascend-bg-card);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    transition: border-color 0.15s ease;
}

.studies-search-row:focus-within[b-8jludi7o3h] {
    border-color: var(--ascend-accent);
    /* #7862 - left as a translucent tint on purpose: the row underneath is
       opaque now, so axe composites this over it instead of falling through to
       the page gradient, and rgba stays parseable by #7291's resolver. */
    background: rgba(49, 221, 227, 0.05);
}

.studies-search-row > i[b-8jludi7o3h] {
    color: rgba(49, 221, 227, 0.7);
    font-size: 1rem;
}

.studies-search-input[b-8jludi7o3h] {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    outline: none;
}

.studies-search-input[b-8jludi7o3h]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.studies-search-clear[b-8jludi7o3h] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.studies-search-clear:hover[b-8jludi7o3h] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Custom paginator (replaces stock Microsoft Paginator) — used when the
   studies list grows beyond a page. Custom buttons because the stock
   Paginator's icons depend on a font we don't load. */
.paginator-row[b-8jludi7o3h] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
}

.paginator-btn[b-8jludi7o3h] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    min-width: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    font-size: 0.95rem;
    line-height: 1;
}

.paginator-btn:hover:not(:disabled)[b-8jludi7o3h] {
    background: rgba(49, 221, 227, 0.1);
    border-color: var(--ascend-accent);
    color: var(--ascend-accent);
}

.paginator-btn:disabled[b-8jludi7o3h] {
    opacity: 0.3;
    cursor: not-allowed;
}

.paginator-btn i[b-8jludi7o3h] {
    font-size: 1rem;
    line-height: 1;
}

.paginator-status[b-8jludi7o3h] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    padding: 0 0.6rem;
    min-width: 7rem;
    text-align: center;
}

/* ── Collections section (Collection architecture 2026-05-18) ────────── */
.collections-section[b-8jludi7o3h] {
    margin-bottom: 2rem;
}

.section-heading[b-8jludi7o3h] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: #ffffff;
    margin: 0 0 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.section-heading .count[b-8jludi7o3h] {
    color: rgba(49, 221, 227, 0.7);
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.collection-card-grid[b-8jludi7o3h] {
    display: grid;
    /* Mobile-first: one column so a card never demands a 280px floor on a
       320px screen. Multi-column auto-fill kicks in once there is room. */
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 480px) {
    .collection-card-grid[b-8jludi7o3h] {
        grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    }
}

.collection-card[b-8jludi7o3h] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}

.collection-card:hover[b-8jludi7o3h] {
    border-color: rgba(49, 221, 227, 0.5);
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.15);
    transform: translateY(-1px);
}

.collection-card.paused[b-8jludi7o3h] {
    opacity: 0.6;
}

.collection-thumb[b-8jludi7o3h],
.collection-thumb-placeholder[b-8jludi7o3h] {
    width: 3.5rem;
    height: 5rem;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
}

.collection-thumb-placeholder[b-8jludi7o3h] {
    background: rgba(49, 221, 227, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(49, 221, 227, 0.5);
    font-size: 1.5rem;
}

.collection-card-body[b-8jludi7o3h] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.collection-card-title[b-8jludi7o3h] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.25;
}

.collection-card-author[b-8jludi7o3h] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.collection-card-meta[b-8jludi7o3h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: auto;
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    align-items: center;
}

.collection-card-meta i[b-8jludi7o3h] {
    margin-right: 0.1875rem;
}

.collection-progress[b-8jludi7o3h] {
    color: #31DDE3;
    font-weight: 700;
}

/* #6618 - Quick Study card (single verified home, moved off master games) */
.pgn-input-row[b-8jludi7o3h] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[b-8jludi7o3h] .pgn-textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.8125rem;
    resize: vertical;
}

[b-8jludi7o3h] .pgn-textarea:focus {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

[b-8jludi7o3h] .pgn-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}


/* #7736 — /studies, found by the live gate rather than by the first sweep: the
   local walk measured this page clean only because the study list happened to be
   empty, so none of its row controls existed to be measured. An empty surface is
   not a passing surface, and that is the whole reason the ratchet runs against a
   populated account.

   .btn-icon-sm is a 2rem square (27x32 as laid out), .cover-link wraps a
   3.25rem-wide cover thumbnail, and the filter pills were 33px tall. */
@media (hover: none) and (pointer: coarse) {
    .btn-icon-sm[b-8jludi7o3h] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }

    .cover-link[b-8jludi7o3h] {
        min-width: var(--touch-target);
    }

    .filter-pill[b-8jludi7o3h] {
        min-height: var(--touch-target);
    }

    /* #8311 - THE /studies PAGER, found by the ratchet this bug added rather
       than by eye. `.paginator-row` is `@if (visibleCount > ItemsPerPage)` with
       20 studies a page, so an account with 20 or fewer studies never renders
       it - and the live gate walks /studies on every run, so this is precisely
       the shape of hole #8311 is about: a route the gate DOES visit, carrying
       controls it structurally cannot see.

       From the box: 0.35rem of vertical padding on 0.95rem text with a 1px
       border is about 27px tall, and `min-width: 2.25rem` is 36 - under the
       floor on both axes. All five buttons are a single chevron glyph, so the
       width floor is as load-bearing as the height one (the /games lesson:
       39x44 looks like a fix and is not one). They sit in a row with the page
       counter between the two halves and no overlap risk, so the box grows
       rather than a pseudo-element hit area. */
    .paginator-btn[b-8jludi7o3h] {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
    }
}
/* /Components/Pages/StudyPages/LichessStudyImportAsStudy.razor.rz.scp.css */
/* #8705 - both links on this page sit inside a sentence (the callout's <span> and the
   "Connect Lichess on your profile" empty state, whose text is directly in a <div>).
   The app.css running-text underline only reaches p, li, dd, td, blockquote and
   figcaption, so without this they were cyan with no underline: color alone does not
   mark a link against body text (WCAG 1.4.1). */
.import-mode-callout a[b-2kvrzjs1jd],
.my-studies-empty a[b-2kvrzjs1jd] {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
/* /Components/Pages/StudyPlan.razor.rz.scp.css */
.study-plan-page[b-izclfpu5yx] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

/* Setup */
.plan-setup[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2rem;
}

/* Coaching Memory Card */
.coaching-memory-card[b-izclfpu5yx] {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.08), rgba(184, 133, 54, 0.04));
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    max-width: 640px;
    width: 100%;
}

.memory-header[b-izclfpu5yx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.memory-header[b-izclfpu5yx]  i { color: var(--ascend-secondary); font-size: 1.1rem; }
/* #7999 - h2, not h3: the notes card is a sibling of the plan builder ("Plan the week ahead",
   an h2), not a part of it. The look is the h3's: the size, tracking and margin below are
   explicit, so the global h2 rule changes nothing. */
.memory-header .memory-title[b-izclfpu5yx] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    font-weight: 700;
    color: #B88536;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 1;
}

.memory-edit-btn[b-izclfpu5yx] {
    background: none;
    border: none;
    color: var(--ascend-secondary-light);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 6px;
}

.memory-edit-btn:hover[b-izclfpu5yx] { color: #B88536; background: rgba(184, 133, 54, 0.1); }

/* #8604 - the notes list (was the raw .memory-text <pre>) lives in Shared/CoachingNotesList. */

.memory-textarea[b-izclfpu5yx] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 12px;
    color: #fff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}

.memory-textarea:focus[b-izclfpu5yx] {
    outline: none;
    border-color: #B88536;
}

.memory-actions[b-izclfpu5yx] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

.memory-hint[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0.6rem 0 0;
    font-style: italic;
}

.memory-empty[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.5;
}

.memory-context-input[b-izclfpu5yx] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.context-label[b-izclfpu5yx] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.4rem;
}

.coaching-memory-empty[b-izclfpu5yx] {
    max-width: 640px;
    width: 100%;
}

.seed-memory-btn[b-izclfpu5yx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(184, 133, 54, 0.05);
    border: 1px dashed rgba(184, 133, 54, 0.3);
    border-radius: 10px;
    color: var(--ascend-secondary-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.seed-memory-btn:hover[b-izclfpu5yx] {
    background: rgba(184, 133, 54, 0.1);
    color: #B88536;
    border-color: #B88536;
}

.setup-card[b-izclfpu5yx] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: 100%;
}

.setup-title[b-izclfpu5yx] {
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.5rem;
}

.setup-desc[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.setup-options[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.option-row[b-izclfpu5yx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* #6099 - per-weekday editor row stacks full-width instead of the
   label/control split the other rows use. */
.option-row--full[b-izclfpu5yx] {
    display: block;
}

.option-row label[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

/* #7266: fill, border, radius, colour and font duplicated the global
   .form-input in app.css (#7258); the private chevron, the <option> fill and
   the select cursor duplicated the global `select` rule; and
   `textarea.form-input { cursor: text }` was defending against a cursor
   nothing sets any more. What is left is the genuine delta - these are narrow
   inline selects in a settings row, and the right-hand caret room is spelled
   out because this selector outranks the global select.form-input padding. */
.option-row .form-input[b-izclfpu5yx] {
    width: 140px;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.8rem;
}

.goals-row[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.goals-row label[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

/* #7266: fill, border, radius, colour, font and padding duplicated the global
   .form-input in app.css (#7258). The goals box keeps its own type size and
   the drag handle. */
.goals-row .form-input[b-izclfpu5yx] {
    width: 100%;
    font-size: 0.8rem;
    resize: vertical;
}

.error-msg[b-izclfpu5yx] {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: var(--ascend-text-light);
    font-size: 0.8rem;
}

/* Plan Header */
.plan-settings[b-izclfpu5yx] {
    background: rgba(49, 221, 227, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 8px;
}

.settings-row[b-izclfpu5yx] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-field[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-field label[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}

/* #7266: colour, fill and border duplicated the global .form-input in
   app.css (#7258). The tight geometry stays. */
.settings-field[b-izclfpu5yx]  .form-input {
    padding: 6px 10px;
    font-size: 0.8rem;
    min-width: 100px;
    border-radius: 6px;
}

.plan-header[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.plan-actions[b-izclfpu5yx] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* #8844 review round 1 - a TOOLBAR, not a stack: six small buttons and the coach pair
   wrap several to a line. On a phone the lines came out ragged (each button at its own
   label width, so every line ended somewhere else) and the coach pair sat on lines of
   its own at two widths. Here each button grows to fill its line, so every line spans
   the row (the game analysis header's shape). Phone only: above 480px the row is one or
   two lines of natural-width buttons, and growing would stretch them across the page.
   ::deep because the buttons are rendered by the Button component. */
@media (max-width: 480px) {
    .plan-actions[b-izclfpu5yx]  .ascend-btn {
        flex: 1 1 auto;
    }
}

.plan-summary[b-izclfpu5yx] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.1), rgba(10, 22, 40, 0.5));
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    flex: 1;
    position: relative;
}

.plan-summary.collapsed .plan-summary-md[b-izclfpu5yx] {
    max-height: 4.2rem; /* ~3 lines at 1.4rem line-height */
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.plan-summary.expanded .plan-summary-md[b-izclfpu5yx] {
    max-height: none;
}

.summary-toggle[b-izclfpu5yx] {
    position: absolute;
    bottom: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: #B88536;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    transition: color 0.15s;
}

.summary-toggle:hover[b-izclfpu5yx] {
    color: #d4a44a;
}

.plan-summary p[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
}

/* #1155 — the summary paragraphs are rendered from MarkupString (Markdig output)
   inside .plan-summary-md, so the scoped .plan-summary p rule above never reaches
   them. ::deep gives the reflowed paragraphs vertical rhythm so the overview reads
   as paragraphs instead of one wall of text. */
.plan-summary-md[b-izclfpu5yx]  p {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0 0 0.6rem;
}

.plan-summary-md[b-izclfpu5yx]  p:last-child {
    margin-bottom: 0;
}

/* Weeks */
.plan-weeks[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.week-card[b-izclfpu5yx] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.week-header[b-izclfpu5yx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.1);
}

.week-title[b-izclfpu5yx] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: #31DDE3;
    margin: 0;
}

.week-theme[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(184, 133, 54, 0.8);
    font-style: italic;
}

.week-days[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
}

/* Overflow / Extra Time section */
.overflow-section[b-izclfpu5yx] {
    padding: 0.75rem 1.5rem 1rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.overflow-header[b-izclfpu5yx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.5rem;
}

.overflow-activities[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.overflow-row[b-izclfpu5yx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    opacity: 0.7;
}

.overflow-row:hover[b-izclfpu5yx] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.04);
}

/* Days */
.day-card[b-izclfpu5yx] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* #6800 - now that every day carries a real date, the reader's own day is worth
   marking and the days already behind them are worth stepping back. Both are
   states of the SAME list, not a new surface: no colour is invented, the past
   day simply recedes and today gets a left rule. The dimming matches the
   existing .overflow-row treatment so the page keeps one vocabulary for
   "secondary". */
.day-card.day-today[b-izclfpu5yx] {
    border-left: 3px solid #31DDE3;
    background: rgba(49, 221, 227, 0.04);
}

.day-card.day-past[b-izclfpu5yx] {
    opacity: 0.7;
}

.day-card.day-past:hover[b-izclfpu5yx] {
    opacity: 1;
}

/* Sits next to the date rather than replacing it: the date is the fact, "Today"
   is where the reader stands in it. margin-right:auto keeps the pair together
   under the header's space-between. */
.day-today-chip[b-izclfpu5yx] {
    margin-right: auto;
    padding: 0.1rem 0.45rem;
    border: 1px solid rgba(49, 221, 227, 0.45);
    border-radius: 999px;
    background: rgba(49, 221, 227, 0.1);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.day-card:last-child[b-izclfpu5yx] {
    border-bottom: none;
}

.day-header[b-izclfpu5yx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.day-label[b-izclfpu5yx] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.day-duration[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Activities */
.day-activities[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Toggle for the collapsed completed/skipped entries. Sits flush with the
   pending list above it; expand reveals the completed activities inline. */
.completed-toggle[b-izclfpu5yx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.3rem 0.6rem;
    margin-top: 0.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.completed-toggle:hover[b-izclfpu5yx] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

.completed-toggle i[b-izclfpu5yx] {
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}

.activity-type-badge[b-izclfpu5yx] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.2);
}

.activity-type-badge.book[b-izclfpu5yx] { background: rgba(49, 221, 227, 0.1); border-color: rgba(49, 221, 227, 0.2); }
.activity-type-badge.tactics[b-izclfpu5yx] { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); }
.activity-type-badge.gameanalysis[b-izclfpu5yx] { background: rgba(184, 133, 54, 0.1); border-color: rgba(184, 133, 54, 0.2); }
.activity-type-badge.repertoire[b-izclfpu5yx] { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); }
.activity-type-badge.drill[b-izclfpu5yx] { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.2); }
.activity-type-badge.review[b-izclfpu5yx] { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.2); }

.activity-info[b-izclfpu5yx] {
    flex: 1;
    min-width: 0;
}

.activity-title[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: block;
}

.activity-title a[b-izclfpu5yx] {
    color: #31DDE3;
    text-decoration: none;
}

.activity-title a:hover[b-izclfpu5yx] {
    text-decoration: underline;
}

.activity-desc[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    display: block;
    margin-top: 0.15rem;
    line-height: 1.4;
}

/* "Why this" — shown only when the coach pulled in a non-active book or a
   paused-study resume. Gold accent marks it as the deliberate exception the
   player should read, not routine chrome. */
.activity-justification[b-izclfpu5yx] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.35rem;
    padding: 0.35rem 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--ascend-secondary-light);
    background: rgba(184, 133, 54, 0.08);
    border-left: 2px solid var(--ascend-secondary);
    border-radius: 6px;
}

.activity-justification[b-izclfpu5yx]  i {
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.activity-justification strong[b-izclfpu5yx] {
    font-weight: 600;
    color: var(--ascend-secondary);
}

.activity-duration[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Recommendation badge */
.activity-type-badge.recommendation[b-izclfpu5yx] { background: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.3); }

/* Refine section */
.refine-section[b-izclfpu5yx] {
    margin-top: 2rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    /* Buffer the bottom of the section so when the sticky CTA scrolls the
       user here, the chat input isn't slammed against the FAB. */
    scroll-margin-top: 1rem;
}

/* "Refine with coach" sticky CTA — appears bottom-right while a plan is
   visible. Smooth-scrolls to the refine section and focuses the chat input.
   Plan stays the focal artifact above; this is just the discoverability hook
   for the iteration tool below. */
/* Stacked above the Beta Feedback FAB, which sits at right:1rem;
   bottom:1rem (44px tall) — or right:1rem; bottom:~4.5rem on mobile.
   We sit one button-height + gap above it on each breakpoint so the
   two FABs share a column instead of overlapping in the corner. */
.refine-cta[b-izclfpu5yx] {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + 44px + 0.75rem + env(safe-area-inset-bottom, 0));
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0a1428;
    border: none;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 30px rgba(49, 221, 227, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 100;
}

.refine-cta i[b-izclfpu5yx] {
    font-size: 1rem;
}

.refine-cta:hover[b-izclfpu5yx] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 40px rgba(49, 221, 227, 0.45);
}

.refine-cta:focus-visible[b-izclfpu5yx] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* On mobile, collapse to an icon-only 44px circle that matches the
   Beta Feedback FAB's footprint. The text label was eating ~180px of
   horizontal space and hiding content behind it. The title attribute
   keeps the affordance discoverable on long-press / hover. */
@media (max-width: 600px) {
    .refine-cta[b-izclfpu5yx] {
        padding: 0;
        width: 44px;
        height: 44px;
        justify-content: center;
        bottom: calc(4.5rem + 44px + 0.5rem + env(safe-area-inset-bottom, 0));
    }
    .refine-cta i[b-izclfpu5yx] {
        font-size: 1.1rem;
    }
    .refine-cta span[b-izclfpu5yx] {
        display: none;
    }
}

/* #7125 - tool-plan mode: the one gate-at-offer card that replaces the chat.
   Mirrors .refine-section so the page reads as the same surface, one honest
   difference. */
.tool-plan-offer[b-izclfpu5yx] {
    margin-top: 2rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    scroll-margin-top: 1rem;
}

.refine-title[b-izclfpu5yx] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    color: rgba(49, 221, 227, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.25rem;
}

.refine-desc[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.apply-changes-row[b-izclfpu5yx] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.chat-messages[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.chat-msg[b-izclfpu5yx] {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    max-width: 85%;
}

/* Defect #8122 - a notice in the chat column that is not a chat turn: what the
   coach could not keep of the conversation just applied. No role label and no
   role tint (the coach's gold, the member's cyan), so it never reads as something
   the coach said. It carries a neutral tint of its own, like the bubbles do, so
   its text is measured against the surface it actually sits on (#7222/#7291). */
.chat-notice[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
    line-height: 1.5;
    padding: 0.75rem 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 12px;
}

.chat-msg.user[b-izclfpu5yx] {
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.2);
    align-self: flex-end;
}

.chat-msg.assistant[b-izclfpu5yx] {
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.2);
    align-self: flex-start;
}

/* #8295 - the coach's status line before its first word ("Thinking it through...").
   Same color as the reply text, so contrast is the reply's; only the slant says it is
   not part of the answer. */
.chat-text.chat-status[b-izclfpu5yx] {
    font-style: italic;
}

.chat-role[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
    display: block;
    margin-bottom: 0.25rem;
}

.chat-msg p[b-izclfpu5yx],
.chat-text[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin: 0;
}

.chat-text[b-izclfpu5yx]  p {
    margin: 0 0 0.4rem;
}

.chat-text[b-izclfpu5yx]  p:last-child {
    margin-bottom: 0;
}

.chat-text[b-izclfpu5yx]  strong {
    color: #ffffff;
    font-weight: 600;
}

/* #8794 - links in a coach reply in the study-plan chat: the same fix as CoachPage's
   .coach-md, for the same Markdig output. Unstyled, they fell to the global `a` color, the
   brand navy, on the dark bubble. The link token, an underline (WCAG 1.4.1: color alone
   does not mark a link inside a sentence) and a visible keyboard ring. */
.chat-text[b-izclfpu5yx]  a {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.chat-text[b-izclfpu5yx]  a:hover {
    color: var(--ascend-accent-light);
}

.chat-text[b-izclfpu5yx]  a:focus-visible {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The coach writes markdown and sometimes emits headings; the global h1-h6 rule
   paints them --ascend-text-primary navy - unreadable on these dark bubbles.
   Inherit the bubble's light text and stay chat-sized (mirrors CoachPage +
   CoachWalkthroughPanel, the "can't see the headers" canary bug). */
.chat-text[b-izclfpu5yx]  h1,
.chat-text[b-izclfpu5yx]  h2,
.chat-text[b-izclfpu5yx]  h3,
.chat-text[b-izclfpu5yx]  h4,
.chat-text[b-izclfpu5yx]  h5,
.chat-text[b-izclfpu5yx]  h6 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff !important;
    margin: 0.5rem 0 0.25rem;
}

/* Branded "LOCKEDIN" glyph for the coach-voice "Locked In" phrase —
   LOCKED in white, IN in brand gold, no space (mirrors the
   ASCEND/CHESS logo treatment). Injected by BrandifyChatHtml after
   markdown rendering, so the markup is generated, not authored.
   Display: inline-block keeps the two halves on one line even if the
   surrounding prose wraps mid-phrase. */
.chat-text[b-izclfpu5yx]  .lockedin-brand {
    display: inline-block;
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.chat-text[b-izclfpu5yx]  .lockedin-locked {
    color: #ffffff;
}

.chat-text[b-izclfpu5yx]  .lockedin-in {
    color: #B88536;
}

.chat-text[b-izclfpu5yx]  em {
    color: rgba(255, 255, 255, 0.9);
}

/* #8434 - the platform's "Engine check" note under a coach reply (a Markdig custom container,
   "::: engine-check", rendered as div.engine-check). Set apart from the coach's prose: its own
   flat box with an accent rule on the left (mirrors CoachPage). */
.chat-text[b-izclfpu5yx]  .engine-check {
    margin-top: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    line-height: 1.45;
}

.chat-text[b-izclfpu5yx]  .engine-check p {
    margin: 0 0 0.3rem;
}

.chat-text[b-izclfpu5yx]  .engine-check ul {
    margin: 0;
    padding-left: 1rem;
}

.chat-text[b-izclfpu5yx]  .engine-check li + li {
    margin-top: 0.15rem;
}

.chat-text[b-izclfpu5yx]  ul,
.chat-text[b-izclfpu5yx]  ol {
    margin: 0.3rem 0;
    padding-left: 1.25rem;
}

.chat-text[b-izclfpu5yx]  li {
    margin-bottom: 0.15rem;
}

/* Markdown headers in coach replies (## Bottom Line, etc.) had no scoped rule,
   so they inherited a near-black-blue global default — unreadable on the dark
   bubble. Brand cyan + chat-scale sizing so sections read as headers. */
.chat-text[b-izclfpu5yx]  h1,
.chat-text[b-izclfpu5yx]  h2,
.chat-text[b-izclfpu5yx]  h3,
.chat-text[b-izclfpu5yx]  h4,
.chat-text[b-izclfpu5yx]  h5,
.chat-text[b-izclfpu5yx]  h6 {
    font-family: var(--ascend-font-primary);
    color: #31DDE3;
    line-height: 1.3;
    margin: 0.6rem 0 0.3rem;
}

.chat-text[b-izclfpu5yx]  h1 { font-size: 0.95rem; }
.chat-text[b-izclfpu5yx]  h2 { font-size: 0.9rem; }
.chat-text[b-izclfpu5yx]  h3 { font-size: 0.85rem; }
.chat-text[b-izclfpu5yx]  h4,
.chat-text[b-izclfpu5yx]  h5,
.chat-text[b-izclfpu5yx]  h6 { font-size: 0.8rem; }

.chat-text[b-izclfpu5yx]  h1:first-child,
.chat-text[b-izclfpu5yx]  h2:first-child,
.chat-text[b-izclfpu5yx]  h3:first-child,
.chat-text[b-izclfpu5yx]  h4:first-child {
    margin-top: 0;
}

/* #6558 - the SOFT-VERIFIED chip on a web-researched coach answer. Gold accent
   family (the "sourced, worth something" tier) - deliberately NOT a verified
   treatment: only a human SME ruling earns that (#6523). */
.research-chip[b-izclfpu5yx] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.45);
    background: rgba(184, 133, 54, 0.12);
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    margin-bottom: 0.4rem;
}

/* #6558 - the sources list under a researched answer. */
.research-citations[b-izclfpu5yx] {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.research-citations li[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
}

.research-citations a[b-izclfpu5yx] {
    color: var(--ascend-accent);
    text-decoration: none;
}

.research-citations a:hover[b-izclfpu5yx] {
    text-decoration: underline;
}

.chat-input-row[b-izclfpu5yx] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.chat-input[b-izclfpu5yx] {
    flex: 1;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #fff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    resize: none;
}

.chat-input:focus[b-izclfpu5yx] {
    outline: none;
    border-color: #31DDE3;
}

/* Print */
@media print {
    .plan-actions[b-izclfpu5yx], .refine-section[b-izclfpu5yx], .plan-header[b-izclfpu5yx]  > button { display: none !important; }
    .study-plan-page[b-izclfpu5yx] { padding: 0; max-width: 100%; }
    .week-card[b-izclfpu5yx] { border: 1px solid #ccc; break-inside: avoid; }
    .day-card[b-izclfpu5yx] { break-inside: avoid; }
    /* #6800 - a printed plan is a reference sheet; nothing recedes on paper. */
    .day-card.day-past[b-izclfpu5yx] { opacity: 1 !important; }
    .plan-summary[b-izclfpu5yx] { border: 1px solid #999; }
    *[b-izclfpu5yx] { color: #000 !important; background: #fff !important; border-color: #ccc !important; }
    .week-title[b-izclfpu5yx] { color: #333 !important; }
    .week-theme[b-izclfpu5yx] { color: #666 !important; }
    .activity-type-badge[b-izclfpu5yx] { border: 1px solid #999 !important; }
}

/* Mobile */
/* Generation progress modal */

/* #6347 — .gen-modal-backdrop and the .gen-modal card are gone; the shared
   <Modal> (Size=Small) owns the overlay, dialog card and shadow. What remains is
   the content: the centered icon/title/step list that sits inside .modal-body.
   The `failed` state class moved from the card onto .gen-modal-content. */
.gen-modal-content[b-izclfpu5yx] {
    text-align: center;
}

.gen-modal-icon[b-izclfpu5yx] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(49, 221, 227, 0.05));
    border: 2px solid rgba(49, 221, 227, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: #31DDE3;
    font-size: 1.4rem;
}

.gen-modal-content.failed .gen-modal-icon[b-izclfpu5yx] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--ascend-text-light);
}

.gen-modal-title[b-izclfpu5yx] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 1rem;
}

.gen-steps[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

.gen-step[b-izclfpu5yx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.25rem 0;
}

.gen-step.active[b-izclfpu5yx] {
    color: #31DDE3;
}

.gen-step.done[b-izclfpu5yx] {
    color: #10b981;
}

.gen-step-indicator[b-izclfpu5yx] {
    width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spin-icon[b-izclfpu5yx] {
    animation: spin-b-izclfpu5yx 1s linear infinite;
}

@keyframes spin-b-izclfpu5yx {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.gen-hint[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0.5rem 0 0;
    line-height: 1.5;
    text-align: center;
}

.gen-fail-hint[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 1rem 0 0;
    line-height: 1.5;
}

.gen-close-btn[b-izclfpu5yx] {
    margin-top: 0.75rem;
    padding: 6px 20px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.gen-close-btn:hover[b-izclfpu5yx] {
    background: rgba(255, 255, 255, 0.12);
}

/* Day progress */

.day-progress[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 1px 6px;
    border-radius: 8px;
}

/* Week progress */

.week-progress-bar[b-izclfpu5yx] {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    flex: 1;
    max-width: 200px;
}

.week-progress-fill[b-izclfpu5yx] {
    height: 100%;
    background: linear-gradient(90deg, #31DDE3, #10b981);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.week-progress-label[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Version history */

.version-history-section[b-izclfpu5yx] {
    margin-top: 2rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 0.5rem 1rem;
}

.version-history-section.expanded[b-izclfpu5yx] {
    padding: 0.5rem 1rem 1rem;
}

/* Collapsed by default — the toggle is the entire header row so the whole
   section stays compact until the user asks for it. */
.version-history-toggle[b-izclfpu5yx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.75rem 0.25rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    text-align: left;
}

.version-history-toggle:hover[b-izclfpu5yx] {
    color: #31DDE3;
}

.version-history-toggle .refine-title[b-izclfpu5yx] {
    margin: 0;
    flex: 0 0 auto;
}

.version-history-toggle .version-history-meta[b-izclfpu5yx] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.version-history-toggle i[b-izclfpu5yx] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.15s ease;
}

.version-history-toggle:hover i[b-izclfpu5yx] {
    color: #31DDE3;
}

.version-timeline[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.25rem;
}

.version-item[b-izclfpu5yx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
    padding-left: 16px;
    position: relative;
}

.version-item.current[b-izclfpu5yx] {
    border-left-color: #31DDE3;
}

.version-dot[b-izclfpu5yx] {
    position: absolute;
    left: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.version-item.current .version-dot[b-izclfpu5yx] {
    background: #31DDE3;
    box-shadow: 0 0 6px rgba(49, 221, 227, 0.4);
}

.version-info[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.version-label[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.version-date[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.version-current-badge[b-izclfpu5yx] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
    padding: 2px 8px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .study-plan-page[b-izclfpu5yx] { padding: 1rem; }
    .plan-header[b-izclfpu5yx] { flex-direction: column; }
    .week-header[b-izclfpu5yx] { flex-direction: column; gap: 0.25rem; align-items: flex-start; }
    .option-row[b-izclfpu5yx] { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .option-row .form-input[b-izclfpu5yx] { width: 100%; }

    /* Overflow ("extra time") rows: stack so the description flows full-width
       instead of a thin column beside the icon + minutes. Matches the shared
       StudyTaskList mobile treatment. */
    .overflow-row[b-izclfpu5yx] {
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.25rem;
    }
    .overflow-row .activity-type-badge[b-izclfpu5yx] { order: 1; }
    .overflow-row .activity-duration[b-izclfpu5yx] { order: 2; margin-left: auto; }
    .overflow-row .activity-info[b-izclfpu5yx] { order: 3; flex-basis: 100%; min-width: 0; }
}

/* PBI #5610 — coaching balance dial */
.balance-row[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
}

.balance-label[b-izclfpu5yx] {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.02em;
}

.balance-control[b-izclfpu5yx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.balance-slider[b-izclfpu5yx] {
    flex: 1 1 240px;
    min-width: 200px;
    accent-color: var(--ascend-accent);
    height: 6px;
    cursor: pointer;
}

.balance-readout[b-izclfpu5yx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    min-width: 240px;
}

.balance-readout strong[b-izclfpu5yx] {
    color: var(--ascend-accent);
    font-weight: 700;
}

.balance-hint[b-izclfpu5yx] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
}

.settings-field-wide[b-izclfpu5yx] {
    flex: 1 1 100%;
}

/* Mark-complete nudge modal — fires after marking a linked activity Done,
   so the user can flip the chapter's own complete flag and keep state
   consistent between plan and study. */
.complete-prompt-body[b-izclfpu5yx] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.complete-prompt-primary[b-izclfpu5yx] {
    padding: 0.55rem 1.4rem;
    border-radius: 50px;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.complete-prompt-primary:hover[b-izclfpu5yx] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(49, 221, 227, 0.3);
}

.complete-prompt-secondary[b-izclfpu5yx] {
    padding: 0.55rem 1.2rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.complete-prompt-secondary:hover[b-izclfpu5yx] {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

/* #6099 — pre-generate notice that per-day overrides will carry into the plan. */
.override-notice[b-izclfpu5yx] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(184, 133, 54, 0.4);
    border-radius: 12px;
    background: rgba(184, 133, 54, 0.07);
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

.override-notice[b-izclfpu5yx] >  i {
    color: var(--ascend-secondary);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.override-clear-link[b-izclfpu5yx] {
    border: none;
    background: none;
    padding: 0;
    margin-left: 0.25rem;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}

.override-clear-link:hover[b-izclfpu5yx] { color: #42e8ed; }

/* Tournament-awareness input (flag-gated). Chip toggles for day(s) + format(s). */
.tournament-block[b-izclfpu5yx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.tournament-label[b-izclfpu5yx] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: #fff;
}

.tournament-hint[b-izclfpu5yx] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.45;
}

.tw-chips[b-izclfpu5yx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tw-chip[b-izclfpu5yx] {
    padding: 0.35rem 0.8rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tw-chip:hover[b-izclfpu5yx] { border-color: rgba(49, 221, 227, 0.5); color: #fff; }

.tw-chip.on[b-izclfpu5yx] {
    border-color: #31DDE3;
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
    font-weight: 600;
}

/* End-of-plan transition note: shown above the generator when last week's plan's
   window has elapsed, so landing on the create-a-new-plan view is explained
   rather than feeling like the old plan just vanished. Neutral, no praise. */
.plan-ended-note[b-izclfpu5yx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.plan-ended-note[b-izclfpu5yx]  i,
.plan-ended-note i[b-izclfpu5yx] {
    color: var(--ascend-accent);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* #6988 - in-page notice that a build is still running behind a dismissed
   progress dialog. Mirrors .plan-ended-note's chrome; the trailing button
   pulls the step list back up. */
.gen-inline-status[b-izclfpu5yx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.gen-inline-status[b-izclfpu5yx]  i,
.gen-inline-status i[b-izclfpu5yx] {
    color: var(--ascend-accent);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.gen-inline-status span[b-izclfpu5yx] {
    flex: 1 1 12rem;
}

.gen-inline-view[b-izclfpu5yx] {
    flex-shrink: 0;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 50px;
    background: transparent;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gen-inline-view:hover[b-izclfpu5yx] {
    background: rgba(49, 221, 227, 0.12);
    border-color: var(--ascend-accent);
}


/* #7736 — touch-target floor for the study-plan chips. Ten .tw-chip
   tournament-window chips measured 43-77 x 30 at 390px; they live in a
   wrapping chip row with real gaps, so growing them costs nothing but a
   slightly taller row. */
@media (hover: none) and (pointer: coarse) {
    /* min-WIDTH as well as height: the narrowest chip measured 43px wide
       after the height fix, which is a 44x44 miss in the other axis. */
    .tw-chip[b-izclfpu5yx] {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
    }

    .option-row .form-input[b-izclfpu5yx] {
        min-height: var(--touch-target);
    }

    .gen-inline-view[b-izclfpu5yx] {
        min-height: var(--touch-target);
    }
}
/* /Components/Pages/StudySession.razor.rz.scp.css */
/* Study Session Page */
.study-page[b-t5vdyjwlp9] {
    padding: 1rem 2rem 2rem;
}

.loading-container[b-t5vdyjwlp9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.btn-back[b-t5vdyjwlp9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    color: #31DDE3;
    text-decoration: none;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: all 0.2s ease;
}

.btn-back:hover[b-t5vdyjwlp9] {
    background: rgba(49, 221, 227, 0.25);
}

/* Game Header */
.game-header[b-t5vdyjwlp9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
}

.header-left[b-t5vdyjwlp9] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.back-link[b-t5vdyjwlp9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.2s ease;
}

.back-link:hover[b-t5vdyjwlp9] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

[b-t5vdyjwlp9] .game-meta-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

[b-t5vdyjwlp9] .meta-players {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}

[b-t5vdyjwlp9] .meta-tag {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.125rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

[b-t5vdyjwlp9] .meta-tag.result {
    color: #B88536;
    background: rgba(184, 133, 54, 0.15);
}

.header-right[b-t5vdyjwlp9] {
    display: flex;
    gap: 0.5rem;
}

.header-btn[b-t5vdyjwlp9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-btn:hover[b-t5vdyjwlp9] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.header-btn.active[b-t5vdyjwlp9] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

/* Main Content Layout */
/* #6929 - this container takes keyboard focus via tabindex=0 so arrow-key move
   navigation works without clicking, and keeps working after a click lands on
   the move list. Suppress the browser's default focus ring: the visible
   affordance is the highlighted current move, not a box round the whole
   working area. */
.study-content:focus[b-t5vdyjwlp9] {
    outline: none;
}

.study-content[b-t5vdyjwlp9] {
    display: grid;
    grid-template-columns: minmax(400px, 1fr) 340px;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 768px) {
    .study-content[b-t5vdyjwlp9] {
        grid-template-columns: 1fr;
    }
}

/* Board Column */
.board-column[b-t5vdyjwlp9] {
    min-width: 0;
}

.board-with-eval[b-t5vdyjwlp9] {
    display: flex;
    gap: 0.5rem;
}

/* #9053 part (b) - in Active and Review the board lives in a DrillShell (the
   verdict host). The shell is this row's flexible item, so the review EvalBar
   keeps its place beside it. */
.board-with-eval[b-t5vdyjwlp9]  .drill-shell {
    flex: 1 1 auto;
    min-width: 0;
}

/* The board card wears the shared .drill-canvas (app.css), the frame every drill
   board wears: its border and glow are what take the verdict color in a
   DrillShell (#8993), so the card's own background, border, radius and top bar
   are no longer restated here. Only its padding is this page's. */
.board-area[b-t5vdyjwlp9] {
    flex: 1;
    min-width: 0;
    padding: 0.75rem;
}

[b-t5vdyjwlp9] .board-area .chessboard-container {
    max-width: 100%;
    width: 100%;
}

/* #7153/#7159 - board sized min(available width, available height): the
   component's own 88dvh cap still left the board's bottom edge 37px below
   the fold at 1600x820 (measured 2026-08-20) because ~16rem of chrome sits
   above the board. A fixed viewport-derived length, never a percentage
   against an auto-sized row. */
[b-t5vdyjwlp9] .board-area .chessboard {
    max-width: min(600px, max(18rem, calc(100dvh - 21rem)));
}

/* The identity strips hug the SQUARE BOARD's edges, not the full-width card:
   same width cap + centering as the .chessboard they border. ::deep because
   BoardPlayerChrome markup does not carry this page's scope attribute. */
.board-area[b-t5vdyjwlp9]  .board-player-chrome {
    width: 100%;
    max-width: min(600px, max(18rem, calc(100dvh - 21rem)));
    margin: 0 auto;
}

/* Score Bar */
.score-bar[b-t5vdyjwlp9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
}

.score-correct[b-t5vdyjwlp9] {
    color: var(--ascend-success);
}

.score-divider[b-t5vdyjwlp9] {
    color: rgba(255, 255, 255, 0.3);
}

.score-total[b-t5vdyjwlp9] {
    color: rgba(255, 255, 255, 0.6);
}

.score-accuracy[b-t5vdyjwlp9] {
    color: #31DDE3;
    font-weight: 600;
}

/* Navigation Controls */
.board-controls[b-t5vdyjwlp9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.nav-btn[b-t5vdyjwlp9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.nav-btn:hover:not(:disabled)[b-t5vdyjwlp9] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.nav-btn:disabled[b-t5vdyjwlp9] {
    opacity: 0.3;
    cursor: not-allowed;
}

.move-indicator[b-t5vdyjwlp9] {
    min-width: 80px;
    text-align: center;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 0.5rem;
}

/* Sidebar Column */
.sidebar-column[b-t5vdyjwlp9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Moves Card */
.moves-card[b-t5vdyjwlp9] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
}

.moves-card h3[b-t5vdyjwlp9] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #31DDE3;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

/* Bug #7180 - flex/wrap/gap for .moves-list and the whole .move-pair rule moved
   into LinearMoveList.razor.css. Only the panel's own height budget is a page
   decision, so only that is left here. */
[b-t5vdyjwlp9] .moves-list {
    max-height: 300px;
}

[b-t5vdyjwlp9] .move-number {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

[b-t5vdyjwlp9] .move {
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    /* cursor removed with #7180: LinearMoveList sets pointer on .move.clickable,
       which it applies only when a click actually navigates (#6931). Declaring it
       here too would re-assert the affordance even if this page stopped passing a
       handler - the exact drift #6931 centralized away. */
    transition: all 0.15s ease;
    background: rgba(255, 255, 255, 0.05);
}

[b-t5vdyjwlp9] .move:hover {
    background: rgba(255, 255, 255, 0.15);
}

[b-t5vdyjwlp9] .move.selected {
    background: rgba(49, 221, 227, 0.3);
    border: 1px solid #31DDE3;
    color: #ffffff;
}

/* Move color-coding. #9053 part (b) review round 2 - an answered guess is marked in the
   same render as the verdict, so it speaks the verdict's tokens, never a parallel raw
   green and red beside the token frame and chip (the same values, now one source). */
[b-t5vdyjwlp9] .move.move-correct {
    background: color-mix(in srgb, var(--ascend-success) 20%, transparent);
    color: var(--ascend-success);
}

[b-t5vdyjwlp9] .move.move-incorrect {
    background: color-mix(in srgb, var(--ascend-error) 20%, transparent);
    color: var(--ascend-text-light);
}

[b-t5vdyjwlp9] .move.move-opponent {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}

[b-t5vdyjwlp9] .move.move-pending {
    background: rgba(255, 255, 255, 0.03);
    color: var(--ascend-text-secondary);
}

/* Session Info Card */
.session-info-card[b-t5vdyjwlp9] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
}

.session-info-card h3[b-t5vdyjwlp9] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #31DDE3;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.info-rows[b-t5vdyjwlp9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-row[b-t5vdyjwlp9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label[b-t5vdyjwlp9] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

.info-value[b-t5vdyjwlp9] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

.completed-badge[b-t5vdyjwlp9] {
    color: #10b981 !important;
    font-weight: 600;
}

/* #9191 - Start over, under the session rows */
.start-over-row[b-t5vdyjwlp9] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Completion Section */
.completion-section[b-t5vdyjwlp9] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.completion-summary[b-t5vdyjwlp9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
}

/* Bug #9053 follow-up: a neutral completion receipt, not a reward. --ascend-success
   is the same green as the "Completed" status beside it and the shared verdict's
   correct check; the reward gold (#B88536) is kept off this surface. */
.completion-icon[b-t5vdyjwlp9] {
    color: var(--ascend-success);
}

.completion-text[b-t5vdyjwlp9] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
}

.completion-actions[b-t5vdyjwlp9] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.btn-review[b-t5vdyjwlp9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    color: #31DDE3;
    cursor: pointer;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.btn-review:hover[b-t5vdyjwlp9] {
    background: rgba(49, 221, 227, 0.25);
    border-color: #31DDE3;
}

.btn-back-small[b-t5vdyjwlp9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.btn-back-small:hover[b-t5vdyjwlp9] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Side Selection */
.side-selection-card[b-t5vdyjwlp9] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
}

.side-selection-card h3[b-t5vdyjwlp9] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem;
}

.selection-desc[b-t5vdyjwlp9] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2rem;
}

.side-buttons[b-t5vdyjwlp9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.side-btn[b-t5vdyjwlp9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-radius: 16px;
    cursor: pointer;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.side-btn .piece-icon[b-t5vdyjwlp9] {
    font-size: 2rem;
}

.white-btn[b-t5vdyjwlp9] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.white-btn:hover[b-t5vdyjwlp9] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.1);
}

.black-btn[b-t5vdyjwlp9] {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.black-btn:hover[b-t5vdyjwlp9] {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
/* Responsive */
@media (max-width: 768px) {
    .study-page[b-t5vdyjwlp9] {
        padding: 0.5rem;
    }

    .game-header[b-t5vdyjwlp9] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .side-buttons[b-t5vdyjwlp9] {
        flex-direction: column;
    }
}

/* Task #968 - mode 2 entry: open in Study Board */
.mode-divider[b-t5vdyjwlp9] {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    margin: 1.1rem 0 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.studyboard-btn[b-t5vdyjwlp9] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.45);
    border-radius: 12px;
    color: #B88536;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.studyboard-btn:hover:not(:disabled)[b-t5vdyjwlp9] {
    background: rgba(184, 133, 54, 0.2);
}

.studyboard-btn[b-t5vdyjwlp9]  i {
    font-size: 16px;
}

.studyboard-desc[b-t5vdyjwlp9] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0.6rem 0 0;
    text-align: center;
}

/* #9266 - the CC BY-SA credit of a broadcast game, under the meta banner (BroadcastCreditLine owns its look). */
.game-info[b-t5vdyjwlp9]  .session-credit {
    margin-top: 0.25rem;
}
/* /Components/Pages/Subscribe/AccountBilling.razor.rz.scp.css */
/* Manage-subscription surface (#5451 PR3). Reuses the shared auth-shell chrome
   (.callback-page / .callback-card / .accent-line / .logo-section) from app.css;
   this file carries only the billing-detail layout extras. */

.billing-body[b-p5v7ijgmzu] {
    text-align: center;
    padding: 0 2rem 3rem;
}

.billing-card h1[b-p5v7ijgmzu] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1.5rem;
    line-height: 1.2;
}

.subtitle[b-p5v7ijgmzu] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.billing-detail[b-p5v7ijgmzu] {
    margin: 0 0 1rem;
    text-align: left;
}

.billing-row[b-p5v7ijgmzu] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(49, 221, 227, 0.12);
}

.billing-row dt[b-p5v7ijgmzu] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.billing-row dd[b-p5v7ijgmzu] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    color: #ffffff;
    margin: 0;
    text-align: right;
}

.billing-founding dd[b-p5v7ijgmzu] {
    color: #B88536;
}

.billing-lock[b-p5v7ijgmzu] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
}

.billing-error[b-p5v7ijgmzu] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    color: #ef4444;
    margin: 0.5rem 0 0;
}

.billing-pending-cancel[b-p5v7ijgmzu] {
    margin: 0.5rem 0 0;
    padding: 1rem 1.25rem;
    text-align: left;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.12), rgba(49, 221, 227, 0.06));
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 12px;
}

.billing-pending-cancel p[b-p5v7ijgmzu] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.billing-pending-cancel strong[b-p5v7ijgmzu] {
    color: #B88536;
    font-weight: 600;
}

/* #8837 - the two multi-button sections are the shared .action-stack
   action-stack--center (see the markup), so their buttons share one width. The
   single View Plans button is centered by .billing-body's text-align. Only the
   spacing stays here; the old hand-rolled column sized each button to its label. */
.action-section[b-p5v7ijgmzu] {
    margin-top: 2rem;
}

.icon-circle[b-p5v7ijgmzu] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(49, 221, 227, 0.4);
    margin-bottom: 2rem;
}

.icon-circle[b-p5v7ijgmzu]  i {
    font-size: 40px;
}

/* #7721 - a checkout was refused (already subscribed / activation pending) and
   the buyer was sent here. Same shell as the pending-cancel banner so the two
   status notices read as one family. */
.billing-notice[b-p5v7ijgmzu] {
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    text-align: left;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: var(--radius-md);
}

.billing-notice p[b-p5v7ijgmzu] {
    font-family: var(--ascend-font-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* #7721 - how a plan change actually happens today (support), under the actions. */
.billing-plan-change[b-p5v7ijgmzu] {
    font-family: var(--ascend-font-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.75rem 0 0;
}

.billing-plan-change a[b-p5v7ijgmzu] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* #8430 - the 30-day refund section, under the actions. Same banner family as
   the notices above so it reads as information, not a sales block. */
.billing-refund[b-p5v7ijgmzu] {
    margin: 2rem 0 0;
    padding: 1rem 1.25rem;
    text-align: left;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.billing-refund h2[b-p5v7ijgmzu] {
    font-family: var(--ascend-font-secondary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    margin: 0;
}

.billing-refund p[b-p5v7ijgmzu] {
    font-family: var(--ascend-font-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.billing-refund strong[b-p5v7ijgmzu] {
    color: #B88536;
    font-weight: 600;
}
/* /Components/Pages/Subscribe/SubscribeCallback.razor.rz.scp.css */
/* Stripe Checkout success landing (#5451 PR3). Reuses the shared auth-shell
   chrome from app.css; this file carries icon-circle + section styling. */

.processing-section[b-z5sb6ig3s3],
.success-section[b-z5sb6ig3s3] {
    text-align: center;
    padding: 0 2rem 3rem;
}

.icon-circle[b-z5sb6ig3s3] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(49, 221, 227, 0.4);
    margin-bottom: 2rem;
    animation: scaleIn-b-z5sb6ig3s3 0.5s ease;
}

.icon-circle[b-z5sb6ig3s3]  i {
    font-size: 40px;
}

.icon-circle.success[b-z5sb6ig3s3] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(16, 185, 129, 0.2));
    border-color: rgba(49, 221, 227, 0.4);
}

@keyframes scaleIn-b-z5sb6ig3s3 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.callback-card h1[b-z5sb6ig3s3] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.subtitle[b-z5sb6ig3s3] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.action-section[b-z5sb6ig3s3] {
    margin-top: 2rem;
}
/* /Components/Pages/Subscribe/SubscribePlan.razor.rz.scp.css */
/* Per-plan subscribe page (#6213). Public-funnel design system: 24px cards,
   cyan/gold accents, dark gradients. Buttons come from the shared <Button>. */

.subscribe-plan-page[b-g7ho4lpupr] {
    min-height: 70vh;
    padding: 2.5rem 1rem 4rem;
}

.subscribe-plan-container[b-g7ho4lpupr] {
    max-width: 560px;
    margin: 0 auto;
}

.subscribe-back[b-g7ho4lpupr] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    transition: color 0.2s ease;
}

.subscribe-back:hover[b-g7ho4lpupr] {
    color: #31DDE3;
}

[b-g7ho4lpupr] .subscribe-plan-card {
    border-radius: 24px;
}

/* #8429 - the featured plan (Apprentice): the same emphasis the /pricing grid
   gives it, a brighter accent border and a soft glow, plus its badge. The Card
   root is rendered by the shared Card component, hence ::deep. */
[b-g7ho4lpupr] .subscribe-plan-featured {
    border-color: color-mix(in srgb, var(--ascend-accent) 55%, transparent);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

.subscribe-featured[b-g7ho4lpupr] {
    display: inline-block;
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-bg-dark);
    font-family: var(--ascend-font-primary);
    font-style: normal;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--radius-full);
    padding: 0.3rem 1rem;
    margin: 0 0 var(--space-md);
}

/* Cadence segmented toggle */
.cadence-toggle[b-g7ho4lpupr] {
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 0.4rem;
    margin: 0.5rem 0 1.5rem;
}

.cadence-option[b-g7ho4lpupr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.7rem 0.5rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'condor', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cadence-option:hover:not(:disabled):not(.active)[b-g7ho4lpupr] {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.cadence-option.active[b-g7ho4lpupr] {
    /* #7543 - flat accent, like the shared Button: a gradient cannot be
       measured for contrast by axe or by the inherited-contrast ratchet. */
    background: var(--ascend-accent);
    color: #042047;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.cadence-option:disabled[b-g7ho4lpupr] {
    opacity: 0.35;
    cursor: not-allowed;
}

.cadence-save[b-g7ho4lpupr] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #B88536;
    font-family: 'tablet-gothic', sans-serif;
}

.cadence-option.active .cadence-save[b-g7ho4lpupr] {
    /* #7543 - the surface is declared here as well as on the button: .active is
       a dynamic class, so the inherited-contrast ratchet cannot see the
       button's accent under this span and read navy-on-card (1.02:1). The same
       accent on the span is invisible (it matches the button) and puts the
       measurement where it belongs - navy on cyan. */
    background: var(--ascend-accent);
    color: var(--ascend-primary);
    font-weight: 700;
}

/* Price */
.subscribe-price[b-g7ho4lpupr] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.price-amount[b-g7ho4lpupr] {
    font-family: 'condor', sans-serif;
    font-size: 3rem;
    color: #31DDE3;
    line-height: 1;
}

.price-cadence[b-g7ho4lpupr] {
    color: rgba(255, 255, 255, 0.55);
    margin-left: 0.4rem;
}

.price-sub[b-g7ho4lpupr] {
    margin: 0.6rem 0 0;
    color: #B88536;
    font-size: 0.9rem;
}

/* #7936 - the Price could not be read just now: say where the figure is. */
.price-pending[b-g7ho4lpupr] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

/* Features */
.subscribe-features[b-g7ho4lpupr] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.subscribe-features li[b-g7ho4lpupr] {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.subscribe-features li[b-g7ho4lpupr]::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #31DDE3;
}

/* The plan's closing note (was .subscribe-addon; the Coach Bridge add-on
   opt-in that sat here was retired by #7936). */
.subscribe-note[b-g7ho4lpupr] {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.85rem;
    margin: 0 0 1.5rem;
}

/* Promo */
.subscribe-promo[b-g7ho4lpupr] {
    margin-bottom: 1.5rem;
}

.subscribe-promo label[b-g7ho4lpupr] {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.5rem;
    font-family: 'tablet-gothic', sans-serif;
}

.subscribe-promo-row[b-g7ho4lpupr] {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
}

.subscribe-promo-input[b-g7ho4lpupr] {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.625rem 1rem;
}

.subscribe-promo-input:focus[b-g7ho4lpupr] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.subscribe-promo-input[b-g7ho4lpupr]::placeholder {
    /* #7543 - was rgba(255,255,255,0.4): 3.72:1 on the now-opaque card. */
    color: var(--ascend-text-muted);
}

.subscribe-promo-msg[b-g7ho4lpupr] {
    margin: 0.65rem 0 0;
    font-size: 0.9rem;
}

.subscribe-promo-msg.ok[b-g7ho4lpupr] {
    color: #31DDE3;
}

.subscribe-promo-msg.warn[b-g7ho4lpupr] {
    color: #B88536;
}

/* Confirm */
.subscribe-confirm[b-g7ho4lpupr] {
    margin-top: 0.5rem;
}

.subscribe-fineprint[b-g7ho4lpupr] {
    text-align: center;
    font-size: 0.82rem;
    /* #7543 - was rgba(255,255,255,0.45): 4.48:1 on the now-opaque card. */
    color: var(--ascend-text-muted);
    margin: 0.85rem 0 0;
}

/* #7720 - the trial note moved ABOVE the checkout button (the promise must be
   read before the click), so it spaces itself from the button below instead of
   from the button above. The fineprint under the button is unchanged. */
.subscribe-confirm .subscribe-trial-note[b-g7ho4lpupr] {
    margin: 0.25rem 0 0.85rem;
}

.subscribe-soon[b-g7ho4lpupr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 16px;
    padding: 1rem 1.25rem;
}

/* #8705 - "See the other plans" sits inside the sentence; the span is not running
   text the app.css underline reaches, so the link states its own non-color cue. */
.subscribe-soon a[b-g7ho4lpupr] {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
/* /Components/Pages/Subscribe/SubscribeRedirect.razor.rz.scp.css */
/* Subscribe entry redirect (#5451 PR3). Reuses the shared auth-shell chrome
   (.callback-page / .callback-card / .accent-line / .logo-section) from app.css;
   this file carries the icon-circle + section styling shared with the callback. */

.processing-section[b-saqm5r99mq],
.error-section[b-saqm5r99mq] {
    text-align: center;
    padding: 0 2rem 3rem;
}

.icon-circle[b-saqm5r99mq] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(49, 221, 227, 0.4);
    margin-bottom: 2rem;
    animation: scaleIn-b-saqm5r99mq 0.5s ease;
}

.icon-circle[b-saqm5r99mq]  i {
    font-size: 40px;
}

.icon-circle.error[b-saqm5r99mq] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border-color: rgba(239, 68, 68, 0.4);
}

@keyframes scaleIn-b-saqm5r99mq {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.callback-card h1[b-saqm5r99mq] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.subtitle[b-saqm5r99mq] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.action-section[b-saqm5r99mq] {
    margin-top: 2rem;
}
/* /Components/Pages/TabiyaDetail.razor.rz.scp.css */
.tabiya-detail[b-l7kfjrf18g] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Root receives keyboard focus via tabindex=0 so arrow-key walk-through
   works without clicking. Suppress the browser's default focus outline —
   the visible affordance is the highlighted nav buttons + move list. */
.tabiya-detail:focus[b-l7kfjrf18g] {
    outline: none;
}

.detail-top[b-l7kfjrf18g] {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(320px, 1.2fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .detail-top[b-l7kfjrf18g] {
        grid-template-columns: 1fr;
    }
}

/* Walk-through controls (PBI #5855). Sit between the board and the
   meta strip so the visual flow is: board → controls → move list → meta. */
.walkthrough-controls[b-l7kfjrf18g] {
    display: flex;
    /* Bug #9014 - THE ROW WRAPS, AT EVERY WIDTH. Measured in headless Chrome
       with real touch emulation on 2026-10-21: at a 344px viewport this row's
       min-content was 413px (five 36px nav buttons + a 43.91px ply counter +
       a 141.06px DrillSidePill, which carries white-space: nowrap, + six 8px
       gaps). A grid item defaults to min-width: auto, so that 413px floor
       became the width of .detail-top's single `1fr` track and the whole board
       card measured 465px against a 312px content box - 136.97px past the
       viewport at 344 and 90.97px at 390. The shared ChessBoard was never the
       problem: it sized itself correctly to 272px via its own
       `calc(100vw - 4.5rem)` cap and was simply centered inside the blown-out
       card, which is why the board looked clipped.

       Wrapping, rather than a phone media query, because the row's min-content
       then collapses to its widest single item and nothing in this file has to
       agree with a viewport number nobody measures (the #7689/#7731 lesson in
       NarrowViewportLayoutContractTests). At desktop widths the row fits on one
       line, so this is a no-op there. Pinned by
       TabiyaDetailBoardCardPhoneWidthContractTests.

       The items that wrap are .nav-group blocks and the two status items, never
       a loose button - see the markup note in TabiyaDetail.razor and
       ColumnButtonContainerRatchetTests, which failed the first attempt at this
       fix because it wrapped the buttons individually. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

/* Bug #9014 - a run of nav buttons that wraps as ONE unit. Repeats the row's own
   0.5rem gap and adds nothing else, so the desktop line is pixel-identical to
   what it was before the groups existed. Deliberately does NOT wrap: an icon
   button must never be the thing that lands alone on a line. */
.nav-group[b-l7kfjrf18g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-btn[b-l7kfjrf18g] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 8px;
    color: rgba(49, 221, 227, 0.9);
    cursor: pointer;
    transition: all 0.15s ease;
}

.nav-btn:hover:not(:disabled)[b-l7kfjrf18g] {
    background: rgba(49, 221, 227, 0.15);
    border-color: #31DDE3;
    color: #31DDE3;
}

.nav-btn:disabled[b-l7kfjrf18g] {
    opacity: 0.3;
    cursor: not-allowed;
}

.nav-btn-emphasis[b-l7kfjrf18g] {
    border-color: rgba(184, 133, 54, 0.45);
    color: rgba(184, 133, 54, 0.95);
}

.nav-btn-emphasis:hover:not(:disabled)[b-l7kfjrf18g] {
    background: rgba(184, 133, 54, 0.18);
    border-color: #B88536;
    color: var(--ascend-secondary-light);
}

.ply-position[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    min-width: 5ch;
    text-align: center;
}

.walkthrough-moves[b-l7kfjrf18g] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    margin-top: 0.85rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

.walkthrough-moves .move-number[b-l7kfjrf18g] {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    margin-left: 0.35rem;
}

.walkthrough-moves .move-number:first-child[b-l7kfjrf18g] {
    margin-left: 0;
}

.move-cell[b-l7kfjrf18g] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.15rem 0.45rem;
    cursor: pointer;
    transition: all 0.12s ease;
}

.move-cell:hover[b-l7kfjrf18g] {
    background: rgba(49, 221, 227, 0.1);
    color: #ffffff;
}

.move-cell.is-current[b-l7kfjrf18g] {
    background: rgba(49, 221, 227, 0.18);
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
    font-weight: 600;
}

.walkthrough-unavailable[b-l7kfjrf18g] {
    margin: 0.85rem 0 0;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
}

.board-meta[b-l7kfjrf18g] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: 0.85rem;
}

.meta-name[b-l7kfjrf18g] {
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    color: #ffffff;
    font-size: 0.95rem;
}

/* #6633 - the opening NAME leads the board meta line; the ECO codes trail it. */
.meta-opening[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 500;
}

/* The shared EcoBadge renders the opening identity inside .meta-opening; keep
   the meta line's own type treatment on the name it renders. */
.meta-opening[b-l7kfjrf18g]  .eco-name {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 500;
}

.board-fen[b-l7kfjrf18g] {
    margin-top: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    word-break: break-all;
}

.section-heading[b-l7kfjrf18g] {
    font-family: var(--ascend-font-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-accent);
    margin: 0 0 0.55rem;
}

.section-heading + .section-heading[b-l7kfjrf18g] {
    margin-top: 1.25rem;
}

/* #6775 - the outpost definition, stated on the card. The category is only
   useful to an improver if the page says what it means. */
.section-note[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    font-style: italic;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
    margin: -0.2rem 0 0.7rem;
}

.section-body[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    margin: 0;
}

.source-line[b-l7kfjrf18g] {
    margin-top: 1.1rem;
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    font-style: italic;
}

.plans-row[b-l7kfjrf18g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .plans-row[b-l7kfjrf18g] {
        grid-template-columns: 1fr;
    }
}

.plan-heading[b-l7kfjrf18g] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.85rem;
    letter-spacing: 0.04em;
}

.plan-card.plan-white .plan-heading[b-l7kfjrf18g] {
    color: #ffffff;
}

.plan-card.plan-black .plan-heading[b-l7kfjrf18g] {
    color: rgba(255, 255, 255, 0.9);
}

.plan-list[b-l7kfjrf18g] {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--ascend-font-secondary);
    line-height: 1.7;
}

.plan-list li[b-l7kfjrf18g] {
    margin-bottom: 0.4rem;
}

.empty-inline[b-l7kfjrf18g] {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin: 0;
    font-size: 0.85rem;
}

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

.chip-row[b-l7kfjrf18g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip[b-l7kfjrf18g] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    color: rgba(49, 221, 227, 0.9);
    background: rgba(49, 221, 227, 0.08);
}

.structure-link[b-l7kfjrf18g] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    color: rgba(49, 221, 227, 0.9);
    text-decoration: none;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.3);
    transition: border-color 0.2s ease;
}

.structure-link:hover[b-l7kfjrf18g] {
    border-color: rgba(49, 221, 227, 0.7);
}

/* Tie-in #3 (PBI #5864). "In your repertoire" card — same look as the
   structure-detail tabiya list, kept local so the two pages stay
   independent and one can restyle without dragging the other. */
.repertoire-usage-list[b-l7kfjrf18g] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.repertoire-usage-list a[b-l7kfjrf18g] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--ascend-font-secondary);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.repertoire-usage-list a:hover[b-l7kfjrf18g] {
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(49, 221, 227, 0.06);
    color: #ffffff;
}

.usage-name[b-l7kfjrf18g] {
    font-weight: 600;
    color: #ffffff;
}

.usage-meta[b-l7kfjrf18g] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: capitalize;
}

.game-list[b-l7kfjrf18g] {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--ascend-font-secondary);
    line-height: 1.7;
}

.game-list a[b-l7kfjrf18g] {
    color: rgba(49, 221, 227, 0.9);
    text-decoration: none;
}

.game-list a:hover[b-l7kfjrf18g] {
    text-decoration: underline;
}

.detail-actions[b-l7kfjrf18g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.back-link[b-l7kfjrf18g] {
    color: rgba(49, 221, 227, 0.85);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.back-link:hover[b-l7kfjrf18g] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

.loading-text[b-l7kfjrf18g],
.empty-text[b-l7kfjrf18g] {
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 1.5rem 0;
}

/* Task #968 - demoted provenance link next to in-app model games */
.game-list .game-source[b-l7kfjrf18g] {
    margin-left: 0.6rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

/* #5446 — tabiya mastery panel */
.mastery-row[b-l7kfjrf18g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.mastery-badge[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.7rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.mastery-badge.mastered[b-l7kfjrf18g] {
    border-color: rgba(49, 221, 227, 0.6);
    color: #31DDE3;
}

.mastery-badge.practicing[b-l7kfjrf18g] {
    border-color: rgba(184, 133, 54, 0.6);
    color: #B88536;
}

.mastery-badge.familiar[b-l7kfjrf18g] {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

.mastery-badge.notstarted[b-l7kfjrf18g] {
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.45);
}

.mastery-due[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

.mastery-prompt[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.75rem;
}

/* #6775 - says which answer key the exercise is grading against when it is not
   the real one yet. Quiet: it qualifies the exercise, it is not the exercise. */
.mastery-note[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    font-style: italic;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    margin: -0.4rem 0 0.75rem;
}

.mastery-actions[b-l7kfjrf18g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mastery-btn[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mastery-btn:hover:not(:disabled)[b-l7kfjrf18g] {
    transform: translateY(-1px);
}

.mastery-btn:disabled[b-l7kfjrf18g] {
    opacity: 0.5;
    cursor: default;
}

.mastery-btn.knew:hover:not(:disabled)[b-l7kfjrf18g] {
    border-color: #31DDE3;
    color: #31DDE3;
}

.mastery-btn.hesitated:hover:not(:disabled)[b-l7kfjrf18g] {
    border-color: #B88536;
    color: #B88536;
}

.mastery-btn.missed:hover:not(:disabled)[b-l7kfjrf18g] {
    border-color: #ef4444;
    color: #ef4444;
}

.mastery-message[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.75rem 0 0;
}

/* #5446 (AC#3) — structured mastery exercise chooser + exercise panels. */
.exercise-chooser[b-l7kfjrf18g] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.exercise-option[b-l7kfjrf18g] {
    display: grid;
    /* Fixed icon column (was `auto`, which let the icon cell expand and scrunch the
       text). Explicit cell placement on the icon + spans below keeps it deterministic. */
    grid-template-columns: 1.75rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    align-items: center;
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(49, 221, 227, 0.18);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
}

.exercise-option:hover[b-l7kfjrf18g] {
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(49, 221, 227, 0.06);
    transform: translateY(-1px);
}

.exercise-option[b-l7kfjrf18g] >  i {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: center;
    align-self: center;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--ascend-accent);
}

.exercise-option-quick[b-l7kfjrf18g] >  i {
    color: var(--ascend-secondary);
}

.exercise-title[b-l7kfjrf18g] {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
}

.exercise-sub[b-l7kfjrf18g] {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

.exercise-back[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    padding: 0.45rem 0.9rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.exercise-back:hover[b-l7kfjrf18g] {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.plan-answer[b-l7kfjrf18g] {
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    resize: vertical;
}

.plan-answer:focus[b-l7kfjrf18g] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.plan-answer[b-l7kfjrf18g]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.key-square-picks[b-l7kfjrf18g] {
    margin: 0.75rem 0;
}

.model-game-choices[b-l7kfjrf18g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.model-game-choice[b-l7kfjrf18g] {
    text-align: left;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.model-game-choice:hover:not(:disabled)[b-l7kfjrf18g] {
    border-color: #31DDE3;
    color: #31DDE3;
    transform: translateY(-1px);
}

.model-game-choice:disabled[b-l7kfjrf18g] {
    opacity: 0.5;
    cursor: default;
}

/* #5446 (AC#7 bridges) — jump links into the training surfaces this
   Tabiya feeds. */
.bridges-intro[b-l7kfjrf18g] {
    margin: 0 0 0.85rem;
}

.bridge-links[b-l7kfjrf18g] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bridge-link[b-l7kfjrf18g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    text-decoration: none;
    /* Foreground set on the anchor so the icon inherits a visible color at rest.
       Without this the icon falls through to the global `a { color: --ascend-primary }`
       (dark navy, invisible on the card) and only appeared on hover via `a:hover`. */
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.bridge-link:hover[b-l7kfjrf18g] {
    border-color: rgba(49, 221, 227, 0.7);
    background: rgba(49, 221, 227, 0.12);
}

.bridge-link[b-l7kfjrf18g] >  i {
    font-size: 1.25rem;
    line-height: 1;
    color: rgba(49, 221, 227, 0.9);
    flex-shrink: 0;
}

.bridge-text[b-l7kfjrf18g] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.bridge-title[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
}

.bridge-sub[b-l7kfjrf18g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

/* #6623 - sub-labels grouping true pawn breaks vs plans/maneuvers */
.chip-group-label[b-l7kfjrf18g] {
    font-family: var(--ascend-font-primary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.9rem 0 0.4rem;
}

.chip-group-label:first-of-type[b-l7kfjrf18g] {
    margin-top: 0;
}
/* /Components/Pages/TabiyasIndex.razor.rz.scp.css */
.tabiyas-index[b-pa720tz3by] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.intro-blurb[b-pa720tz3by] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 1rem;
    line-height: 1.6;
}

/* Filter controls moved to the shared TabiyaFilterBar component (#6804). */

.loading-text[b-pa720tz3by],
.empty-text[b-pa720tz3by] {
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 1.5rem 0;
}

.tabiya-grid[b-pa720tz3by] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.tabiya-card[b-pa720tz3by] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.15rem 1.25rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tabiya-card:hover[b-pa720tz3by] {
    border-color: rgba(49, 221, 227, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(4, 32, 71, 0.4), 0 0 16px rgba(49, 221, 227, 0.12);
}

.card-head[b-pa720tz3by] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.tabiya-tile-title[b-pa720tz3by] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.card-opening[b-pa720tz3by] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(49, 221, 227, 0.85);
    font-style: italic;
}

/* #6633 - the shared EcoBadge carries the opening identity here; keep the
   card's own opening-name treatment on the name it renders. */
.card-opening[b-pa720tz3by]  .eco-name {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(49, 221, 227, 0.85);
    font-style: italic;
    font-weight: 500;
}

.card-blurb[b-pa720tz3by] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin: 0;
}

.card-foot[b-pa720tz3by] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
}

.color-badge[b-pa720tz3by] {
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
}

.color-badge.color-white[b-pa720tz3by] {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.color-badge.color-black[b-pa720tz3by] {
    background: rgba(15, 23, 42, 0.9);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(49, 221, 227, 0.4);
}

.color-badge.color-both[b-pa720tz3by] {
    background: rgba(49, 221, 227, 0.12);
    color: rgba(49, 221, 227, 0.9);
    border-color: rgba(49, 221, 227, 0.4);
}

.go-arrow[b-pa720tz3by] {
    color: rgba(49, 221, 227, 0.55);
    font-size: 1rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.tabiya-card:hover .go-arrow[b-pa720tz3by] {
    color: var(--ascend-accent);
    transform: translateX(3px);
}
/* /Components/Pages/TacticalCircuits.razor.rz.scp.css */
/* Tactical Circuits Training Page Styles - ASCENDCHESS Design System */

.tactical-circuits-training-page[b-6ppkskoz9a] {
    padding: 2rem;
}

/* Loading State */
.loading-section[b-6ppkskoz9a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.icon-circle[b-6ppkskoz9a] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(49, 221, 227, 0.4);
    animation: scaleIn-b-6ppkskoz9a 0.5s ease;
}

.icon-circle[b-6ppkskoz9a]  i {
    font-size: 40px;
}

.icon-circle.success[b-6ppkskoz9a] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(16, 185, 129, 0.2));
    border-color: rgba(49, 221, 227, 0.4);
}

/* Bug #9053 follow-up 3: the cycle-complete check is a neutral completion receipt, not a
   reward. --ascend-success matches the circle's green tint; size stays the 40px the
   .icon-circle rule above already sets. */
.cycle-complete-check[b-6ppkskoz9a] {
    color: var(--ascend-success);
}

@keyframes scaleIn-b-6ppkskoz9a {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* No Active Set State */
.no-set-section[b-6ppkskoz9a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
    text-align: center;
}

.no-set-section h2[b-6ppkskoz9a] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    color: #ffffff;
    margin: 0;
}

.no-set-section p[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 500px;
}

/* Cycle Complete State */
.cycle-complete-section[b-6ppkskoz9a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.cycle-complete-section h1[b-6ppkskoz9a] {
    font-family: var(--ascend-font-primary);
    font-size: 2.5rem;
    color: #ffffff;
    text-align: center;
    margin: 0;
}

/* Cycle-complete stat tiles migrated to the shared StatsRow/StatItem
   (#6433); the row just needs to span the celebration section. */
[b-6ppkskoz9a] .cycle-stats {
    width: 100%;
}

/* Cycle trend chart */
.cycle-trend[b-6ppkskoz9a] {
    margin-top: 2rem;
    width: 100%;
    max-width: 600px;
}

.cycle-trend-title[b-6ppkskoz9a] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-bottom: 1rem;
}

/* Restructured cycle-trend chart with explicit grid layout that prevents jumbling
   regardless of cycle count or text width. Each bar group has reserved vertical
   slots for the bar, time, label, and accuracy — no flex height collisions. */
.cycle-trend-bars[b-6ppkskoz9a] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(60px, 1fr);
    align-items: end;
    gap: 1rem;
    padding: 0 1rem;
}

.cycle-bar-group[b-6ppkskoz9a] {
    display: grid;
    grid-template-rows: 110px auto auto auto;
    align-items: end;
    justify-items: center;
    row-gap: 0.3rem;
}

.cycle-bar-container[b-6ppkskoz9a] {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.cycle-bar[b-6ppkskoz9a] {
    width: 70%;
    max-width: 48px;
    background: linear-gradient(180deg, #31DDE3, rgba(49, 221, 227, 0.4));
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.5s ease;
}

.cycle-bar-time[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    color: #31DDE3;
    white-space: nowrap;
    text-align: center;
}

.cycle-bar-label[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
}

.cycle-bar-acc[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    text-align: center;
}

/* Mastery trend chart variant — uses a different bar color so it's visually
   distinct from the speed chart while reusing the same layout. PBI #5496. */
.mastery-trend[b-6ppkskoz9a] {
    margin-top: 1.5rem;
}

.mastery-trend .trend-subtitle[b-6ppkskoz9a] {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    margin: -0.5rem 0 0.85rem 0;
    font-style: italic;
}

.cycle-bar.mastery-bar[b-6ppkskoz9a] {
    background: linear-gradient(180deg, #B88536, rgba(184, 133, 54, 0.4));
}

/* Honest progress: four-state breakdown — PBI #5496 */
.honest-progress[b-6ppkskoz9a] {
    margin-top: 2rem;
    width: 100%;
    max-width: 600px;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(10, 22, 40, 0.4));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
}

.honest-progress-title[b-6ppkskoz9a] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    margin: 0 0 1rem 0;
}

/* .progress-buckets is now the <StatsRow> root (StatsRow's scope attribute, not
   this page's - hence ::deep). The four .bucket dialects and their per-state
   value colors are <StatItem Tone=...>: Success / Accent / Warning / Danger. */
[b-6ppkskoz9a] .progress-buckets {
    margin-bottom: 1.25rem;
}

.net-mastery-badge[b-6ppkskoz9a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 0.85rem;
}

.net-mastery-badge[b-6ppkskoz9a]  i {
    font-size: 18px;
    flex-shrink: 0;
}

.net-mastery-badge.net-positive[b-6ppkskoz9a] {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #10b981;
}

.net-mastery-badge.net-negative[b-6ppkskoz9a] {
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.35);
    color: #f97316;
}

.net-mastery-badge.net-flat[b-6ppkskoz9a] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.total-mastered[b-6ppkskoz9a] {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.total-mastered strong[b-6ppkskoz9a] {
    color: #B88536;
    font-weight: 700;
}

.regressed-puzzles[b-6ppkskoz9a] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.regressed-title[b-6ppkskoz9a] {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    color: rgba(249, 115, 22, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.6rem 0;
}

.regressed-list[b-6ppkskoz9a] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.regressed-item[b-6ppkskoz9a] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.65rem;
    background: rgba(249, 115, 22, 0.06);
    border-left: 2px solid rgba(249, 115, 22, 0.4);
    border-radius: 4px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.regressed-rank[b-6ppkskoz9a] {
    font-family: monospace;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    width: 32px;
}

.regressed-themes[b-6ppkskoz9a] {
    flex: 1;
}

.regressed-rating[b-6ppkskoz9a] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    flex-shrink: 0;
}

.regressed-more[b-6ppkskoz9a] {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    font-style: italic;
}

/* The 600px 4-up -> 2-up collapse is now StatsRow's auto-fit at MinTileWidth. */

/* #8837 - the actions are the shared .action-row action-row--center (see the
   markup): a hand-rolled wrapping row wrapped at 344 and 390 into "Start New
   Circuit" 170px over "Back to Training" 165px. Only the spacing stays here. */
.action-section[b-6ppkskoz9a] {
    margin-top: 1rem;
}

.subtitle[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

/* Training Container */
.training-container[b-6ppkskoz9a] {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Header */
.training-header[b-6ppkskoz9a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    position: relative;
    overflow: hidden;
}

.training-header[b-6ppkskoz9a]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
}

.set-info h2[b-6ppkskoz9a] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.progress-info[b-6ppkskoz9a] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cycle-badge[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    padding: 0.375rem 0.875rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
}

.puzzle-count[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    background: rgba(184, 133, 54, 0.2);
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.4);
    padding: 0.375rem 0.875rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* #8063 - the block's own progress chip, beside the set's puzzle count. Neutral
   (no brand gold): it is a position in a short session, not an achievement. */
.block-badge[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    background: rgba(49, 221, 227, 0.12);
    color: var(--ascend-accent-light);
    border: 1px solid rgba(49, 221, 227, 0.4);
    padding: 0.375rem 0.875rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* #8063 - says what a re-served position is while it is on the board. */
.reserve-note[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: var(--ascend-text-muted);
    margin: 0.5rem 0 0 0;
}

/* Sidebar timer chip — matches .sidebar-value baseline but with the cyan
   accent so the running clock reads as the surface's primary live state. */
[b-6ppkskoz9a] .sidebar-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #31DDE3;
    font-variant-numeric: tabular-nums;
}

/* Board Section */
.board-layout[b-6ppkskoz9a] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.board-section[b-6ppkskoz9a] {
    flex: 1;
    min-width: 0;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    position: relative;
}

.board-section[b-6ppkskoz9a]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(49, 221, 227, 0.1), transparent);
    pointer-events: none;
}

/* Feedback overlay on top of board */
.feedback-overlay[b-6ppkskoz9a] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 24px;
    z-index: 10;
    animation: fadeIn-b-6ppkskoz9a 0.2s ease;
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.feedback-overlay.correct[b-6ppkskoz9a] {
    background: rgba(16, 185, 129, 0.85);
    color: var(--ascend-primary);
}

.feedback-overlay.incorrect[b-6ppkskoz9a] {
    background: rgba(239, 68, 68, 0.85);
    color: #ffffff;
}

@keyframes fadeIn-b-6ppkskoz9a {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Puzzle Info */
/* Puzzle Sidebar */
.puzzle-sidebar[b-6ppkskoz9a] {
    width: 200px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-item[b-6ppkskoz9a] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sidebar-label[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
}

.sidebar-value[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
}

.sidebar-detail[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
}

.sidebar-themes[b-6ppkskoz9a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.hint-reveal-btn[b-6ppkskoz9a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    color: rgba(49, 221, 227, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.hint-reveal-btn:hover:not(:disabled)[b-6ppkskoz9a] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.hint-reveal-btn:disabled[b-6ppkskoz9a] {
    opacity: 0.4;
    cursor: not-allowed;
}

.hint-nudge[b-6ppkskoz9a] {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    padding: 0.5rem 0.6rem;
    background: rgba(251, 191, 36, 0.06);
    border-left: 2px solid rgba(251, 191, 36, 0.4);
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(251, 191, 36, 0.85);
    line-height: 1.4;
}

.sidebar-actions[b-6ppkskoz9a] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: auto;
}

@media (max-width: 768px) {
    .board-layout[b-6ppkskoz9a] {
        flex-direction: column;
    }

    .puzzle-sidebar[b-6ppkskoz9a] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .sidebar-actions[b-6ppkskoz9a] {
        flex-direction: row;
        margin-top: 0;
    }
}

/* Old feedback section removed — now uses .feedback-overlay on top of board */

/* Review Mode */
.review-section[b-6ppkskoz9a] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1.25rem;
    animation: slideIn 0.3s ease;
}

.review-header[b-6ppkskoz9a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.review-label[b-6ppkskoz9a] {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    color: #31DDE3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.review-themes[b-6ppkskoz9a] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.theme-badge[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: rgba(184, 133, 54, 0.15);
    color: #B88536;
    text-transform: capitalize;
}

.review-moves[b-6ppkskoz9a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.review-move-pair[b-6ppkskoz9a] {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.review-move-num[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
}

.review-move[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.review-move.played[b-6ppkskoz9a] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.review-move.pending[b-6ppkskoz9a] {
    color: rgba(255, 255, 255, 0.3);
}

.review-controls[b-6ppkskoz9a] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.review-btn[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(49, 221, 227, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s;
}

.review-btn:hover:not(:disabled)[b-6ppkskoz9a] {
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.review-btn:disabled[b-6ppkskoz9a] {
    opacity: 0.3;
    cursor: default;
}

.review-step[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.review-actions[b-6ppkskoz9a] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* Training Controls */
.training-controls[b-6ppkskoz9a] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-control[b-6ppkskoz9a] {
    font-family: var(--ascend-font-secondary);
    background: rgba(49, 221, 227, 0.1);
    color: #31DDE3;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-control:hover[b-6ppkskoz9a] {
    background: rgba(49, 221, 227, 0.2);
    border-color: rgba(49, 221, 227, 0.5);
}

/* Responsive Design */
@media (max-width: 768px) {
    .tactical-circuits-training-page[b-6ppkskoz9a] {
        padding: 1rem;
    }

    .training-header[b-6ppkskoz9a] {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .set-info h2[b-6ppkskoz9a] {
        font-size: 1.5rem;
    }

    .progress-info[b-6ppkskoz9a] {
        justify-content: center;
    }

    .training-controls[b-6ppkskoz9a] {
        flex-direction: column;
    }

    .btn-control[b-6ppkskoz9a] {
        width: 100%;
        justify-content: center;
    }
}

/* #6173 Blindfold Mode toggle — mirrors the Autoplay pill for consistency.
   Quiet/cyan when off (default); gold when on (you've opted into study mode). */
.blindfold-toggle-btn[b-6ppkskoz9a] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--ascend-font-secondary, 'tablet-gothic', sans-serif);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.7);
}

.blindfold-toggle-btn:hover[b-6ppkskoz9a] {
    border-color: rgba(49, 221, 227, 0.55);
    color: #ffffff;
}

.blindfold-toggle-btn strong[b-6ppkskoz9a] { font-weight: 700; }

/* Off = default flow; quiet cyan. */
.blindfold-toggle-btn.off[b-6ppkskoz9a]  i,
.blindfold-toggle-btn.off strong[b-6ppkskoz9a] {
    color: #31DDE3;
}

/* On = "study mode" opted in — gold, so it reads as a deliberate choice. */
.blindfold-toggle-btn.on[b-6ppkskoz9a] {
    border-color: rgba(184, 133, 54, 0.45);
    background: rgba(184, 133, 54, 0.08);
}

.blindfold-toggle-btn.on[b-6ppkskoz9a]  i,
.blindfold-toggle-btn.on strong[b-6ppkskoz9a] {
    color: var(--ascend-secondary);
}
/* /Components/Pages/TacticalCircuitsStart.razor.rz.scp.css */
/* Tactical Circuits Start Page Styles - ASCENDCHESS Design System */

.tactical-circuits-start-page[b-se7q8jwe1s] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.start-container[b-se7q8jwe1s] {
    max-width: 700px;
    width: 100%;
}

.start-card[b-se7q8jwe1s] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    position: relative;
}

.start-card[b-se7q8jwe1s]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(49, 221, 227, 0.1), transparent);
    pointer-events: none;
}

.accent-line[b-se7q8jwe1s] {
    height: 4px;
    background: linear-gradient(90deg, #31DDE3, #B88536);
    border-radius: 2px;
    margin-bottom: 2rem;
}

/* Icon Circle */
.icon-circle[b-se7q8jwe1s] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(49, 221, 227, 0.4);
    margin-bottom: 1.5rem;
    animation: scaleIn-b-se7q8jwe1s 0.5s ease;
}

.icon-circle[b-se7q8jwe1s]  i {
    font-size: 40px;
}

.icon-circle.error[b-se7q8jwe1s] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border-color: rgba(239, 68, 68, 0.4);
}

@keyframes scaleIn-b-se7q8jwe1s {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Section Styles */
.processing-section[b-se7q8jwe1s],
.active-set-section[b-se7q8jwe1s],
.error-section[b-se7q8jwe1s],
.info-section[b-se7q8jwe1s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

h1[b-se7q8jwe1s] {
    font-family: var(--ascend-font-primary);
    font-size: 2.25rem;
    color: #ffffff;
    margin: 0 0 1rem 0;
}

h3[b-se7q8jwe1s] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    color: #31DDE3;
    margin: 0 0 1rem 0;
}

.subtitle[b-se7q8jwe1s] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

/* #7433 - names the ?focus= pattern on a focused circuit. Plain text, no badge. */
.focus-label[b-se7q8jwe1s] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 1rem 0;
}

.description[b-se7q8jwe1s] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
    text-align: left;
}

/* Rating Info */
.rating-info[b-se7q8jwe1s] {
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}

.info-row[b-se7q8jwe1s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}

.info-row:not(:last-child)[b-se7q8jwe1s] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-label[b-se7q8jwe1s] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-se7q8jwe1s] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: #31DDE3;
    font-weight: 600;
}

/* Methodology Selector */
.methodology-selector[b-se7q8jwe1s] {
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
    text-align: left;
}

.method-options[b-se7q8jwe1s] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.method-option[b-se7q8jwe1s] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.method-option:hover[b-se7q8jwe1s] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(49, 221, 227, 0.3);
}

.method-option.selected[b-se7q8jwe1s] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.5);
}

.method-radio[b-se7q8jwe1s] {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

.method-option.selected .method-radio[b-se7q8jwe1s] {
    border-color: #31DDE3;
}

.radio-dot[b-se7q8jwe1s] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s ease;
}

.radio-dot.active[b-se7q8jwe1s] {
    background: #31DDE3;
}

.method-info[b-se7q8jwe1s] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.method-name[b-se7q8jwe1s] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: 600;
}

.method-desc[b-se7q8jwe1s] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Puzzle Breakdown */
.puzzle-breakdown[b-se7q8jwe1s] {
    background: rgba(184, 133, 54, 0.05);
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
    text-align: left;
}

.puzzle-breakdown p[b-se7q8jwe1s] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1rem;
}

.puzzle-breakdown ul[b-se7q8jwe1s] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.puzzle-breakdown li[b-se7q8jwe1s] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.puzzle-breakdown li[b-se7q8jwe1s]::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #B88536;
    font-weight: bold;
}

/* Action Section. #8837 - the shared .action-row action-row--center (see the
   markup) replaces the hand-rolled wrapping row and its 768px column: one width
   stacked on a phone, a centered row above 480px. Only the spacing stays here. */
.action-section[b-se7q8jwe1s] {
    margin-top: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tactical-circuits-start-page[b-se7q8jwe1s] {
        padding: 1rem;
    }

    .start-card[b-se7q8jwe1s] {
        padding: 2rem 1.5rem;
    }

    h1[b-se7q8jwe1s] {
        font-size: 1.75rem;
    }

}
/* /Components/Pages/TacticalStats.razor.rz.scp.css */
.stats-page[b-40gzg66mdj] {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Hero */
.hero-card[b-40gzg66mdj] {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
}

.hero-value[b-40gzg66mdj] {
    font-family: var(--ascend-font-primary);
    font-size: 4rem;
    font-weight: 700;
    color: #31DDE3;
    line-height: 1;
}

.hero-label[b-40gzg66mdj] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
}

.hero-detail[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.5rem;
}

/* #8228 sweep - the page's one visible statement of the interval's level. */
.hero-legend[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: var(--ascend-text-secondary);
    line-height: 1.4;
    margin: 0.6rem 0 0;
}

/* Insight Cards */
.insight-card[b-40gzg66mdj] {
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
}

.card-heading[b-40gzg66mdj] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* card-subtitle styling is now handled by shared Card component */

/* Thinking comparison */
.thinking-comparison[b-40gzg66mdj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

/* .thinking-stat / -value / -label -> <StatItem Variant="Bare" Size="Large"> (#6347). */

.thinking-vs[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
}

/* #9032: the selection caveat. Neutral, never green: it is a limitation, not a verdict. */
.time-accuracy-caveat[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    line-height: 1.45;
    margin: 0;
}


/* #8228 sweep - the counts when the two figures cannot stand side by side, or when they
   are within chance of each other. Neutral, like the caveat. */
.time-accuracy-chance[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    line-height: 1.45;
    margin: 0 0 0.5rem;
}

/* Contextual note bridging the "accuracy by time spent" / "Woodpecker speed" contradiction.
   First-exposure context here, repeat-cycle context on TacticalCircuits cycle complete. */
.thinking-context-note[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.85rem 0 0;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(184, 133, 54, 0.3);
    border-radius: 4px;
    line-height: 1.45;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.thinking-context-note[b-40gzg66mdj]  i {
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Theme grid */
.mastered-section[b-40gzg66mdj] {
    margin-bottom: 0.75rem;
}

.mastered-label[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #34d399;
    letter-spacing: 0.05em;
}

.mastered-tags[b-40gzg66mdj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.mastered-tag[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    color: #34d399;
}

.theme-grid[b-40gzg66mdj] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.theme-row[b-40gzg66mdj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-row-link[b-40gzg66mdj] {
    text-decoration: none;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    transition: background 0.15s ease;
    cursor: pointer;
}
.theme-row-link:hover[b-40gzg66mdj] { background: rgba(49, 221, 227, 0.06); }
.theme-row-link:hover .theme-name[b-40gzg66mdj] { color: #31DDE3; }
.theme-row-arrow[b-40gzg66mdj] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    margin-left: 0.25rem;
    transition: color 0.15s ease, transform 0.15s ease;
}
.theme-row-link:hover .theme-row-arrow[b-40gzg66mdj] { color: #31DDE3; transform: translateX(2px); }

.theme-hub-link[b-40gzg66mdj] {
    margin-top: 1rem;
    text-align: right;
}
.theme-hub-link a[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #31DDE3;
    text-decoration: none;
}
.theme-hub-link a:hover[b-40gzg66mdj] { text-decoration: underline; }

.theme-name[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    width: 130px;
    flex-shrink: 0;
}

.theme-bar-track[b-40gzg66mdj] {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.theme-bar-fill[b-40gzg66mdj] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.theme-bar-fill.high[b-40gzg66mdj] { background: #34d399; }
.theme-bar-fill.mid[b-40gzg66mdj] { background: #fbbf24; }
.theme-bar-fill.low[b-40gzg66mdj] { background: #f87171; }

/* #8228 sweep - the rate over its 80% interval (RateInterval, Stacked), so the column
   is as wide as "likely 100% to 100%", not a fixed 35px. */
.theme-acc[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    text-align: right;
}

/* #8228 sweep - the count the rate beside it was read from: part of the claim now, so it
   reads at AA (was rgba(255, 255, 255, 0.3), 2.68:1) and sizes to its digits. */
.theme-count[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: var(--ascend-text-secondary);
    min-width: 30px;
}

/* Streaks: .streaks-row -> <StatsRow>, .streak-card/-value/-label -> <StatItem>,
   .improved -> Tone="Success" (#6347). */

/* Set history */
.set-list[b-40gzg66mdj] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.set-row[b-40gzg66mdj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}

.set-name[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}

.set-meta[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    display: block;
}

.set-stats[b-40gzg66mdj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.set-acc[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    color: #31DDE3;
    text-align: right;
}

/* #8228 sweep - the count under a set's cycle 1 accuracy and its interval. */
.set-acc-count[b-40gzg66mdj] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--ascend-text-secondary);
}

.set-badge[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.set-badge.complete[b-40gzg66mdj] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.set-badge.active[b-40gzg66mdj] {
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
}

/* Honest Progress card (PBI #5496 follow-up — persistent progress tracking) */
/* .honest-totals is now the <StatsRow> root, so it carries StatsRow's scope
   attribute, not this page's - ::deep is required to reach it. The grid itself
   (and its responsive collapse) is the component's. .total-tile/-value/-label/
   -detail -> <StatItem SubLabel> with Tone Gold/Success/Danger (#6347). */
[b-40gzg66mdj] .honest-totals {
    margin-bottom: 1rem;
}

.honest-breakdown[b-40gzg66mdj] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.breakdown-row[b-40gzg66mdj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border-left: 2px solid transparent;
}

.breakdown-row.learned[b-40gzg66mdj] {
    border-left-color: rgba(16, 185, 129, 0.5);
}

.breakdown-row.slipped[b-40gzg66mdj] {
    border-left-color: rgba(239, 68, 68, 0.5);
}

.breakdown-row[b-40gzg66mdj]  i {
    font-size: 16px;
    flex-shrink: 0;
}

.breakdown-text[b-40gzg66mdj] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex: 1;
}

.breakdown-value[b-40gzg66mdj] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.breakdown-label[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.honest-coach-note[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(16, 185, 129, 0.9);
    text-align: center;
    margin: 0;
    padding: 0.7rem 0.9rem;
    background: rgba(16, 185, 129, 0.06);
    border-radius: 8px;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.45;
}

.honest-coach-note[b-40gzg66mdj]  i {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.honest-coach-note.neutral[b-40gzg66mdj] {
    color: rgba(251, 191, 36, 0.9);
    background: rgba(251, 191, 36, 0.06);
}

.honest-coach-note.caution[b-40gzg66mdj] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.06);
}

/* Per-set progression line in set history */
.set-info[b-40gzg66mdj] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.set-progression[b-40gzg66mdj] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
    margin-top: 0.1rem;
}

.prog-mastered[b-40gzg66mdj] {
    color: #B88536;
    font-weight: 600;
}

.prog-learned[b-40gzg66mdj] {
    color: #34d399;
    font-weight: 600;
}

.prog-slipped[b-40gzg66mdj] {
    color: #f87171;
    font-weight: 600;
}

.prog-hint[b-40gzg66mdj] {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

/* #8228 sweep - on a phone the theme and band rows put the name on its own line, so the bar,
   the rate with its interval and the count share the next one without squeezing the bar. */
@media (max-width: 480px) {
    .theme-row[b-40gzg66mdj] {
        flex-wrap: wrap;
    }

    .theme-name[b-40gzg66mdj] {
        width: 100%;
    }

    /* A set's cycle 1 accuracy, its interval and its count drop under the set's name: the
       name takes the whole first line (its flex-basis of 0 never wrapped, walk 2026-10-31). */
    .set-row[b-40gzg66mdj] {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .set-info[b-40gzg66mdj] {
        flex-basis: 100%;
    }

    .set-stats[b-40gzg66mdj] {
        margin-left: auto;
    }
}
/* /Components/Pages/TacticsMotifHub.razor.rz.scp.css */
.hub-footnote[b-w2citrfb5b] {
    max-width: 56.25rem;
    margin: 2rem auto 0;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    text-align: center;
}

.hub-footnote a[b-w2citrfb5b] {
    color: #31DDE3;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.hub-footnote a:hover[b-w2citrfb5b] {
    text-decoration: underline;
}
/* /Components/Pages/TenSecondsDrill.razor.rz.scp.css */
.tenseconds-page[b-apc593cbup] {
    padding-bottom: 2rem;
}

.drill-intro[b-apc593cbup] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
}

.intro-description[b-apc593cbup] {
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.intro-description em[b-apc593cbup] {
    color: #31DDE3;
    font-style: italic;
}

.position-source[b-apc593cbup] {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    font-size: 0.85rem;
    margin: 0.5rem 0 1rem 0;
}

.prompt[b-apc593cbup] {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin: 0.25rem 0 1rem 0;
}

.proposed-move[b-apc593cbup] {
    color: #31DDE3;
    font-family: 'condor', monospace;
    font-size: 1.15rem;
    padding: 0 0.25rem;
}

.acclimation-hint[b-apc593cbup] {
    text-align: center;
    color: var(--ascend-accent);
    font-style: italic;
    font-size: 0.9rem;
    margin: 0 0 0.75rem 0;
}

.decide-row[b-apc593cbup] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.decide-btn[b-apc593cbup] {
    flex: 1 1 220px;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: #ffffff;
    font-family: 'condor', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.decide-btn:hover[b-apc593cbup] {
    background: rgba(49, 221, 227, 0.12);
    border-color: #31DDE3;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.2);
}

.confirm-btn[b-apc593cbup] {
    border-color: rgba(16, 185, 129, 0.4);
}

.confirm-btn:hover[b-apc593cbup] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
}

.hold-btn[b-apc593cbup] {
    border-color: rgba(184, 133, 54, 0.4);
}

.hold-btn:hover[b-apc593cbup] {
    border-color: #B88536;
    background: rgba(184, 133, 54, 0.12);
    box-shadow: 0 4px 16px rgba(184, 133, 54, 0.2);
}

.timer-chip[b-apc593cbup] {
    transition: all 0.15s ease;
}

/* Bug #6619 - the acclimation (read) clock. Visually distinct from the
   decision clock so the two windows never read as one continuous timer:
   this one is calm accent, the decision one warms and pulses as it runs out. */
.acclimate-chip[b-apc593cbup] {
    transition: all 0.15s ease;
    border-color: var(--ascend-accent) !important;
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent) !important;
}

.acclimate-chip .shell-chip-value[b-apc593cbup] {
    color: var(--ascend-accent) !important;
}

.timer-chip.warn[b-apc593cbup] {
    /* Same values as the rgba(239, 68, 68, ...) literals these replace - the
       brand token IS #ef4444 - now readable by the contrast sweep (#7905). */
    background: color-mix(in srgb, var(--ascend-error) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ascend-error) 50%, transparent) !important;
    animation: pulse-b-apc593cbup 0.6s ease-in-out infinite alternate;
}

.timer-chip.warn .shell-chip-value[b-apc593cbup] {
    /* #7905 - was the raw #ef4444: 3.71:1 on the chip surface the resolver
       actually reaches, and 3.98:1 even on this rule's own red tint, both
       below AA. The light step clears both (5.04:1 / 5.42:1). */
    color: var(--ascend-error-light) !important;
}

@keyframes pulse-b-apc593cbup {
    0%   { transform: scale(1); }
    100% { transform: scale(1.05); }
}

/* #9060 chunk 1 - the reveal rides the verdict dock's Verdict half (the page markup), which
   is the phone's width at the bottom of the screen and 20rem beside the board above 1100px.
   The dock is the panel now, so the reveal drops its own box and stays compact: the dock's
   room is clipped, and what does not fit scrolls inside it while Next stays pinned. */
.reveal-row[b-apc593cbup] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
    gap: 0.5rem;
    align-items: start;
}

.reveal-col[b-apc593cbup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    text-align: center;
}

.reveal-label[b-apc593cbup] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
}

.reveal-value[b-apc593cbup] {
    font-family: 'condor', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
}

.reveal-value.safe[b-apc593cbup] {
    color: #10b981;
}

.reveal-value.refuted[b-apc593cbup] {
    color: #ef4444;
}

.reveal-score .reveal-value[b-apc593cbup] {
    font-size: 1.25rem;
}

.score-strong[b-apc593cbup] {
    color: #10b981;
}

.score-modest[b-apc593cbup] {
    color: #B88536;
}

.score-weak[b-apc593cbup] {
    color: #ef4444;
}

.reveal-meta[b-apc593cbup] {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.reveal-annotation[b-apc593cbup] {
    margin-top: 0.5rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

/* Next is the dock's pinned button row; the dock's own gap spaces it. */
.submit-btn[b-apc593cbup] {
    margin-top: 0;
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 50px;
    padding: 0.875rem 1.25rem;
    font-family: 'condor', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.submit-btn:hover[b-apc593cbup] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
}
/* /Components/Pages/TheirBestMoveDrill.razor.rz.scp.css */
.their-best-move-page[b-ler3uz5mob] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.drill-intro[b-ler3uz5mob] {
    text-align: center;
    margin-bottom: 1rem;
}

.intro-description[b-ler3uz5mob] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    max-width: 650px;
    margin: 0 auto;
}

.intro-description em[b-ler3uz5mob] {
    color: #31DDE3;
    font-style: italic;
}

.position-source[b-ler3uz5mob] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.prompt[b-ler3uz5mob] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    /* #9060 chunk 3 - the question rides the idle verdict dock's Actions half, a plain column
       with its own 0.75rem gap, so it carries no vertical margins of its own. tabindex="-1"
       makes it a focus target (a keyboard Next or Change lands here). */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.prompt strong[b-ler3uz5mob] {
    color: #31DDE3;
}

.prompt em[b-ler3uz5mob] {
    color: #B88536;
    font-style: italic;
    text-transform: none;
}

/* #6737 setup step — the played move differed from the position's plan */
.setup-nudge[b-ler3uz5mob] {
    margin: 0;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--ascend-secondary);
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

.setup-nudge strong[b-ler3uz5mob] {
    color: var(--ascend-secondary-light);
}

/* Three candidate slots — 1, 2, 3 visualized as a row */
.candidate-row[b-ler3uz5mob] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.candidate-slot[b-ler3uz5mob] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    min-height: 2.6rem;
    transition: all 0.15s ease;
}

.candidate-slot.filled[b-ler3uz5mob] {
    background: rgba(49, 221, 227, 0.1);
    border-style: solid;
    border-color: rgba(49, 221, 227, 0.45);
}

.slot-number[b-ler3uz5mob] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ascend-text-secondary);
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
}

.candidate-slot.filled .slot-number[b-ler3uz5mob] {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.18);
}

.slot-move[b-ler3uz5mob] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

.candidate-slot.empty .slot-move[b-ler3uz5mob] {
    color: rgba(255, 255, 255, 0.25);
}

.slot-clear[b-ler3uz5mob] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.12s ease;
}

.slot-clear:hover[b-ler3uz5mob] {
    color: #f87171;
}

/* #6728: a dead `.slot-clear :global(i)` rule stood here. Deleted, not
   revived: TheirBestMoveDrill.razor renders no `.slot-clear` markup at all
   (the block was copied from ThreeMoveSlateDrill), so the rule could never
   have matched anything even with valid syntax. */

/* Pick row — choose which of the three to play */
.pick-row[b-ler3uz5mob] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pick-btn[b-ler3uz5mob] {
    padding: 0.65rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pick-btn:hover[b-ler3uz5mob] {
    background: rgba(184, 133, 54, 0.12);
    border-color: #B88536;
}

.pick-btn.selected[b-ler3uz5mob] {
    background: rgba(184, 133, 54, 0.22);
    border-color: #B88536;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(184, 133, 54, 0.2);
}

.submit-btn[b-ler3uz5mob] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 10px;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s ease;
}

.submit-btn:hover:not(:disabled)[b-ler3uz5mob] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.submit-btn:disabled[b-ler3uz5mob] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

/* #9060 chunk 3 - the reveal rides the verdict dock's Verdict half: the phone's width at the
   bottom of the screen, 20rem beside the board above 1100px. The dock is the panel now, so the
   reveal drops its own box (BestProphylacticMoveDrill's shape): what does not fit scrolls inside
   the dock while Next stays pinned. One flex column (the reveal row, the timing, the annotation),
   so the phone rule at the end can put the why first with `order`; its children carry no margins
   of their own.

   Four values in a dock that is never wider than a phone or 20rem: two by two at every width, so
   each one-line label has half the dock (four across left about 70px a label at 344px, under
   "YOU PREDICTED"). */
.reveal-stack[b-ler3uz5mob] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reveal-row[b-ler3uz5mob] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: start;
}

.reveal-col[b-ler3uz5mob] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* One line wherever the reveal shows (chunk 2 review: a wrapped label knocks its value out of
   line with its neighbor). */
.reveal-label[b-ler3uz5mob] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.4);
}

.reveal-value[b-ler3uz5mob] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.reveal-col.reveal-score .reveal-value[b-ler3uz5mob] {
    font-family: var(--ascend-font-primary);
    font-size: 1.4rem;
    font-weight: 700;
}

.reveal-value.score-strong[b-ler3uz5mob] { color: #31DDE3; }
.reveal-value.score-modest[b-ler3uz5mob] { color: #B88536; }
.reveal-value.score-weak[b-ler3uz5mob] { color: #f87171; }

.reveal-annotation[b-ler3uz5mob] {
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid #B88536;
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

.shell-chip-urgent[b-ler3uz5mob]  .shell-chip-value {
    color: #f87171;
    font-weight: 700;
}

/* ── Predict-phase chrome — single prediction slot (vs Three-Move Slate's 3 candidates) ── */
.prediction-preview[b-ler3uz5mob] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
}
.prediction-label[b-ler3uz5mob] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.prediction-value[b-ler3uz5mob] {
    color: #31DDE3;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    flex: 1;
}
.prediction-clear[b-ler3uz5mob] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.prediction-clear:hover[b-ler3uz5mob] {
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.reveal-meta[b-ler3uz5mob] {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* #9060 chunk 3 - Change is an answer control: the shared touch target on a touch screen
   (Lock and Next are already taller). */
@media (hover: none) and (pointer: coarse) {
    .prediction-clear[b-ler3uz5mob] {
        min-height: var(--touch-target);
    }
}

/* #5460 — phone widths: stack the three-across candidate/pick buttons so
   each keeps a full-width tap target.

   #9060 chunk 3 - the reveal no longer stacks to one column here (it is two by two in the dock
   at every width, above). A phone's dock is about 240px tall, so the WHY comes first: the timing
   and the annotation follow the verdict, and the reveal row goes last (the chip at the board
   already names the engine's best). The reading half scrolls, with its bottom-edge cue, for
   whatever does not fit. Visual order only; the DOM keeps the desktop order. */
@media (max-width: 480px) {
    .candidate-row[b-ler3uz5mob],
    .pick-row[b-ler3uz5mob] {
        grid-template-columns: 1fr;
    }

    .reveal-stack > .reveal-row[b-ler3uz5mob] {
        order: 1;
    }

    .reveal-col.reveal-score .reveal-value[b-ler3uz5mob] {
        font-size: 1.1rem;
    }
}
/* /Components/Pages/ThemeDrill.razor.rz.scp.css */
/* PBI #5627 — widened from 700 so the converged ~560px board has room. */
.theme-drill-page[b-27y7ptxoi3] { max-width: 760px; margin: 0 auto; }

.drill-board-area[b-27y7ptxoi3] { position: relative; margin-bottom: 1rem; }
/* PBI #5627 — board size converged toward the shared drill standard (~560px
   desktop); 480px was below the accessibility-friendly floor Joe flagged. */
.board-wrapper[b-27y7ptxoi3] { max-width: 560px; margin: 0 auto; }

.feedback-overlay[b-27y7ptxoi3] {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem;
    border-radius: 12px; font-family: var(--ascend-font-primary); font-size: 1.25rem;
    font-weight: 700; z-index: 10;
    /* The overlay itself passes pointer events through to the board below so
       the user can still inspect the position after feedback appears. But the
       Next button inside it needs clicks — re-enable pointer-events on it
       (see .drill-next-btn below) or the button is silently dead. */
    pointer-events: none;
}
.feedback-overlay.correct[b-27y7ptxoi3] { background: rgba(16, 185, 129, 0.9); color: var(--ascend-primary); }
.feedback-overlay.incorrect[b-27y7ptxoi3] { background: rgba(239, 68, 68, 0.9); color: #fff; }

.drill-next-btn[b-27y7ptxoi3] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-left: 0.75rem;
    padding: 0.4rem 0.9rem;
    background: rgba(255, 255, 255, 0.95); color: #0a1628;
    border: none; border-radius: 999px;
    font-family: var(--ascend-font-secondary); font-size: 0.88rem; font-weight: 700;
    cursor: pointer; pointer-events: auto; /* opt back in — see parent overlay comment */
    transition: background 0.15s ease;
}
.drill-next-btn:hover[b-27y7ptxoi3] { background: #ffffff; }

.drill-actions[b-27y7ptxoi3] {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
}

.hint-btn[b-27y7ptxoi3] {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(49, 221, 227, 0.3);
    border-radius: 8px; color: rgba(49, 221, 227, 0.7); font-family: var(--ascend-font-secondary);
    font-size: 0.78rem; cursor: pointer; transition: all 0.15s;
}
.hint-btn:hover[b-27y7ptxoi3] { background: rgba(49, 221, 227, 0.08); color: #31DDE3; }

.hint-info[b-27y7ptxoi3] {
    font-family: var(--ascend-font-secondary); font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.skip-btn[b-27y7ptxoi3] {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; color: rgba(255, 255, 255, 0.5); font-family: var(--ascend-font-secondary);
    font-size: 0.78rem; cursor: pointer; transition: all 0.15s;
}
.skip-btn:hover:not(:disabled)[b-27y7ptxoi3] { color: rgba(255, 255, 255, 0.8); }
.skip-btn:disabled[b-27y7ptxoi3] { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 640px) {
    .board-wrapper[b-27y7ptxoi3] { max-width: 100%; }
}
/* /Components/Pages/TheoryExitDrill.razor.rz.scp.css */
/* Merged progressive Theory Exit drill (#6499; formerly #6393 Theory Exit +
   #6394 Plan Formation). Tokens only - no raw brand hex, no font literals
   (ScopedCssBoundaryTests ratchet). Setup title accent classes
   (.accent-white/.accent-gold) are owned globally by the wordmark styles. */

.theory-exit-page[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* -- Setup phase ------------------------------------------------------- */

.setup-container[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.setup-header[b-840kuq1gmp] {
    text-align: center;
}

.setup-title[b-840kuq1gmp] {
    font-family: var(--ascend-font-primary);
    font-size: 2.2rem;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
}

.setup-subtitle[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.empty-actions[b-840kuq1gmp] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

/* -- Start block (single readiness surface, line-ends only) ------------ */

.start-block[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 2rem;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.18);
}

.start-icon[b-840kuq1gmp] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border: 1px solid rgba(49, 221, 227, 0.35);
}

.start-icon i[b-840kuq1gmp] {
    font-size: 24px;
    color: var(--ascend-accent);
}

.start-block h3[b-840kuq1gmp] {
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.start-block p[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 52ch;
    margin: 0;
}

.start-count[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: var(--ascend-accent-light);
    margin-bottom: 0.35rem;
}

/* -- Active phase: sidebar context ------------------------------------- */

.exit-context[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.context-item[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.context-label[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.context-value[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.context-sub[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

/* -- The dock (#9060 chunk 4): the move prompt rides its idle Actions half, the move reveal its
   reading half; the plan's answers and reveal are QuestionContent ------------------------------ */

.commit-prompt[b-840kuq1gmp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(49, 221, 227, 0.35);
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
}

.commit-prompt i[b-840kuq1gmp] {
    color: var(--ascend-accent);
    flex-shrink: 0;
}

/* tabindex="-1" makes the move prompt a focus target (a keyboard Next lands here); a
   programmatic focus draws no ring around prose. */
.commit-prompt:focus[b-840kuq1gmp] {
    outline: none;
}

/* #9060 chunk 4 - the move reveal rides the dock's reading half (the phone's width at the bottom
   of the screen, 20rem beside the board above 1100px); the dock is its panel, so it keeps only its
   own column. What does not fit scrolls inside the dock while Continue or Next stays pinned. */
.move-reveal[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reveal-panel[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* Orientation block: engine-grounded, NOT a right/wrong verdict. State
   classes tint the left border only - held (balance), slight (small give),
   concede (notable), neutral (no eval). */
.orientation[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-left-width: 3px;
}

.orientation.held[b-840kuq1gmp] {
    border-left-color: rgba(16, 185, 129, 0.7);
}

.orientation.slight[b-840kuq1gmp] {
    border-left-color: rgba(184, 133, 54, 0.7);
}

.orientation.concede[b-840kuq1gmp] {
    border-left-color: rgba(239, 68, 68, 0.6);
}

.orientation.neutral[b-840kuq1gmp] {
    border-left-color: rgba(49, 221, 227, 0.5);
}

.orientation-lead[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.committed-move[b-840kuq1gmp] {
    font-weight: 700;
    color: var(--ascend-accent-light);
}

.engine-line[b-840kuq1gmp] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.engine-label[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.engine-move[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ascend-secondary-light);
}

.engine-eval[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.plan-block[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(10, 22, 40, 0.85));
    border: 1px solid rgba(184, 133, 54, 0.3);
}

.plan-heading[b-840kuq1gmp] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: var(--ascend-secondary-light);
}

.plan-row[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.plan-label[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.plan-text[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

/* -- Move reveal -> plan phase bridge (#6499) --------------------------- */

.phase-bridge[b-840kuq1gmp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(184, 133, 54, 0.08);
    border: 1px dashed rgba(184, 133, 54, 0.45);
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.78);
}

.phase-bridge i[b-840kuq1gmp] {
    color: var(--ascend-secondary-light);
    flex-shrink: 0;
}

/* -- Plan phase: commit form (#6499, from the Plan Formation drill) ----- */

.commit-form[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.part-heading[b-840kuq1gmp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.98rem;
    color: rgba(255, 255, 255, 0.92);
    margin: 0.35rem 0 0;
}

.part-number[b-840kuq1gmp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.45);
    color: var(--ascend-accent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    flex-shrink: 0;
}

.answer-choices[b-840kuq1gmp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.answer-choice[b-840kuq1gmp] {
    padding: 0.6rem 0.95rem;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.answer-choice:hover:not([disabled])[b-840kuq1gmp] {
    border-color: rgba(49, 221, 227, 0.6);
    background: rgba(49, 221, 227, 0.08);
}

.answer-choice.selected[b-840kuq1gmp] {
    border-color: rgba(49, 221, 227, 0.85);
    background: rgba(49, 221, 227, 0.15);
}

.answer-choice.break[b-840kuq1gmp] {
    min-width: 4.5rem;
    text-align: center;
}

/* #9060 chunk 4 - AFTER THE COMMIT THE CHOICES STAY, LOCKED AND MARKED (the Candidate Moves
   marks): the truth in the success color with a check, the member's other pick struck through in
   red, the rest dimmed by COLOR, never opacity (axe measured an opacity dim at 4.02:1 on Candidate
   Moves). Words for a screen reader ride in a visually-hidden span. Not buttons: a locked choice
   carries no handler, and the hover states are named so nothing re-tints. */
.answer-choice.is-locked[b-840kuq1gmp],
.answer-choice.is-locked:hover:not([disabled])[b-840kuq1gmp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: default;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.16);
}

.answer-choice.is-locked.is-truth[b-840kuq1gmp],
.answer-choice.is-locked.is-truth:hover:not([disabled])[b-840kuq1gmp] {
    font-weight: 600;
    border-color: color-mix(in srgb, var(--ascend-success) 80%, transparent);
    background: color-mix(in srgb, var(--ascend-success) 18%, transparent);
}

.answer-choice.is-locked.is-wrong-pick[b-840kuq1gmp],
.answer-choice.is-locked.is-wrong-pick:hover:not([disabled])[b-840kuq1gmp] {
    border-color: color-mix(in srgb, var(--ascend-error) 70%, transparent);
    background: color-mix(in srgb, var(--ascend-error) 12%, transparent);
}

.answer-choice.is-wrong-pick .choice-text[b-840kuq1gmp] { text-decoration: line-through; }

.answer-choice.is-locked.dimmed[b-840kuq1gmp],
.answer-choice.is-locked.dimmed:hover:not([disabled])[b-840kuq1gmp] {
    color: var(--ascend-text-muted);
    background: rgba(255, 255, 255, 0.03);
}

.answer-choice .truth-mark[b-840kuq1gmp] { color: var(--ascend-success); font-size: 0.9rem; }

/* #9060 chunk 4 review - the member's pick carries a mark of its own, not a color alone (WCAG
   1.4.1). #9082 - that mark is the neutral YourPickTag ("You", outlined), as on Candidate Moves and
   Three-Move Slate, never a check: on an unscored break a check would claim a grade nobody gave. */

.placement-input[b-840kuq1gmp] {
    width: 100%;
    resize: vertical;
    min-height: 4.5rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}

.placement-input:focus[b-840kuq1gmp] {
    outline: none;
    border-color: rgba(49, 221, 227, 0.7);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.placement-input[b-840kuq1gmp]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.commit-row[b-840kuq1gmp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.commit-hint[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

/* -- Plan phase: reveal ------------------------------------------------- */

/* #9053 - the GRADED .drill-feedback.correct / .incorrect boxes are gone: the
   structure and break verdicts are now the shared DrillFeedbackOverlay's <Body>,
   so the overlay owns the tint and the border AND publishes the state to the
   board frame and the DrillVerdictChip, which these boxes could not do. Each
   verdict line keeps its own flex row below (.plan-verdict-line). The
   RETROSPECTIVE box stays here and stays OUT of the overlay, because a
   retrospective break is explained and never graded. */

.plan-verdict-line[b-840kuq1gmp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
}

.plan-verdict-line + .plan-verdict-line[b-840kuq1gmp] {
    margin-top: 0.5rem;
}

.drill-feedback[b-840kuq1gmp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
}

.drill-feedback.retrospective[b-840kuq1gmp] {
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

.drill-feedback.retrospective i[b-840kuq1gmp] {
    color: var(--ascend-accent);
    flex-shrink: 0;
}

/* Pre-commit retrospective context (the break already happened). */
.break-retrospective[b-840kuq1gmp] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.25);
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.78);
}

.break-retrospective i[b-840kuq1gmp] {
    color: var(--ascend-accent);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.placement-echo[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.2);
}

.placement-echo-label[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.placement-echo-text[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: pre-wrap;
}

.placement-echo-note[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

/* #6395 - verified-grounded coach feedback on the placement answer. */
.placement-feedback[b-840kuq1gmp] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.3);
}

.placement-feedback-label[b-840kuq1gmp] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-accent);
}

.placement-feedback-text[b-840kuq1gmp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: pre-wrap;
}

/* #9060 chunk 4 - the plan's answer controls take the shared touch target on a touch screen. */
@media (hover: none) and (pointer: coarse) {
    .answer-choice[b-840kuq1gmp] {
        min-height: var(--touch-target);
    }
}

@media (max-width: 640px) {
    .setup-title[b-840kuq1gmp] {
        font-size: 1.7rem;
    }

    .answer-choices[b-840kuq1gmp] {
        flex-direction: column;
    }

    .answer-choice.break[b-840kuq1gmp] {
        text-align: left;
    }
}
/* /Components/Pages/ThreeMoveSlateDrill.razor.rz.scp.css */
.three-move-slate-page[b-255irlz718] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* #9082 - THE DOCK'S ROOM BESIDE THE BOARD, for this drill (ReserveDockRoomBesideBoard reads it
       above 1100px; 16rem is the shell's default). The reveal is the verdict, the annotation and
       five values: 208-255px of reading for the DB bank's Lichess positions, 271-316px for the
       compiled bank's, in a 20rem dock; 16rem showed 15-27% of the compiled ones at 1440x900. It is
       a clamp on the window's height because the question panel starts under the room, so Lock and
       Submit move down with it. Review round 1: the headroom is sized for the TALLEST question panel
       a served position gives, walked: 280px to Lock's bottom with a one-line source, +19px when
       the source wraps to two lines (the DB bank's "Lichess game (puzzle ..., corpus projection)"),
       +31px with a LastMoveNote (the Queen's Gambit position), 330px with both. A source line can
       wrap on any position, so the room always leaves room for two lines; the note is known, so a
       position with one takes 2rem less (the rule below). Either way Lock ends at least 10px above
       the fold wherever the room is over 16rem (at 1440x900: 23.75rem, or 21.75rem with the note);
       a window under about 776px tall gets the 16rem default, as before #9082. The cost: while
       answering, the question panel starts this far under the board top even though the dock is
       idle (at 1440x900, 124px more than at 16rem). The board is not touched: the room is the side
       column's first row. */
    --drill-dock-room-beside-size: clamp(16rem, 100svh - 32.5rem, 25rem);
}

/* #9082 review round 1 - a position that names the previous move (LastMoveNote, 31px at the head
   of the question panel) leaves room for it under the fold. */
.three-move-slate-page:has(.last-move-note)[b-255irlz718] {
    --drill-dock-room-beside-size: clamp(16rem, 100svh - 34.5rem, 25rem);
}

/* #9082 review round 1 - while the #9031 instinct prompt shows (all through listing, about 95px at
   the head of the question panel) the room is the shell's 16rem, so Lock stays above the fold.
   After the :has rule on purpose: the same specificity, so source order makes this one win. */
.three-move-slate-page.instinct-open[b-255irlz718] {
    --drill-dock-room-beside-size: 16rem;
}

.drill-intro[b-255irlz718] {
    text-align: center;
    margin-bottom: 1rem;
}

.intro-description[b-255irlz718] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    max-width: 650px;
    margin: 0 auto;
}

.intro-description em[b-255irlz718] {
    color: #31DDE3;
    font-style: italic;
}

/* #9060 chunk 4 - the question and its list are QuestionContent now (beside the board on desktop,
   under it on a phone): a flex column with its own 1rem gap, so the blocks in it carry no outer
   margins of their own. */
.slate-context[b-255irlz718] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.position-source[b-255irlz718] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    /* #8726 - was rgba(255, 255, 255, 0.4), which composites to #6f747f over the
       dark page: 3.80:1, below AA (axe serious, release walk 2026-10-14). The
       published muted-text token is the same neutral family one step lighter:
       --ascend-text-muted #94a3b8 at 6.96:1 (docs/design/brand-tokens.md). */
    color: var(--ascend-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.prompt[b-255irlz718] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* tabindex="-1" makes the question a focus target (a keyboard Next lands here); a programmatic
   focus draws no ring around prose. */
.prompt:focus[b-255irlz718] {
    outline: none;
}

.prompt strong[b-255irlz718] {
    color: #31DDE3;
}

.prompt em[b-255irlz718] {
    color: #B88536;
    font-style: italic;
    text-transform: none;
}

/* Three candidate slots — 1, 2, 3 visualized as a row */
.candidate-row[b-255irlz718] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.candidate-slot[b-255irlz718] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    min-height: 2.6rem;
    transition: all 0.15s ease;
}

.candidate-slot.filled[b-255irlz718] {
    background: rgba(49, 221, 227, 0.1);
    border-style: solid;
    border-color: rgba(49, 221, 227, 0.45);
}

.slot-number[b-255irlz718] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ascend-text-secondary);
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
}

.candidate-slot.filled .slot-number[b-255irlz718] {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.18);
}

.slot-move[b-255irlz718] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

.candidate-slot.empty .slot-move[b-255irlz718] {
    color: rgba(255, 255, 255, 0.25);
}

.slot-clear[b-255irlz718] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.12s ease;
}

.slot-clear:hover[b-255irlz718] {
    color: #f87171;
}

/* #6728: was `.slot-clear :global(i)` (dead). No ::deep needed - the <i> is in
   this component's own markup so it carries the scope attribute. VISIBLE
   CHANGE: the clear "x" glyph now renders at 16px instead of the UA button
   default (~13.3px), which is what the rule always intended. */
.slot-clear i[b-255irlz718] {
    font-size: 1rem;
}

/* Pick row — choose which of the three to play */
.pick-row[b-255irlz718] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.pick-btn[b-255irlz718] {
    padding: 0.65rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pick-btn:hover[b-255irlz718] {
    background: rgba(184, 133, 54, 0.12);
    border-color: #B88536;
}

.pick-btn.selected[b-255irlz718] {
    background: rgba(184, 133, 54, 0.22);
    border-color: #B88536;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(184, 133, 54, 0.2);
}

.submit-btn[b-255irlz718] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 10px;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s ease;
}

.submit-btn:hover:not(:disabled)[b-255irlz718] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.submit-btn:disabled[b-255irlz718] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

/* #9060 chunk 4 - AFTER THE GRADE THE THREE STAY, LOCKED AND MARKED (the Candidate Moves marks):
   each candidate in the engine's top three in the success color with a check, the one played
   struck through in red when it was not the engine's best, the rest dimmed by COLOR (axe measured
   an opacity dim at 4.02:1 on Candidate Moves). Words for a screen reader ride in a visually-hidden
   span. Not buttons: a locked candidate carries no handler. */
.pick-btn.is-locked[b-255irlz718],
.pick-btn.is-locked:hover[b-255irlz718] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: default;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.16);
}

.pick-btn.is-locked.is-truth[b-255irlz718],
.pick-btn.is-locked.is-truth:hover[b-255irlz718] {
    border-color: color-mix(in srgb, var(--ascend-success) 80%, transparent);
    background: color-mix(in srgb, var(--ascend-success) 18%, transparent);
}

.pick-btn.is-locked.is-wrong-pick[b-255irlz718],
.pick-btn.is-locked.is-wrong-pick:hover[b-255irlz718] {
    border-color: color-mix(in srgb, var(--ascend-error) 70%, transparent);
    background: color-mix(in srgb, var(--ascend-error) 12%, transparent);
}

.pick-btn.is-wrong-pick .pick-san[b-255irlz718] { text-decoration: line-through; }

.pick-btn.is-locked.dimmed[b-255irlz718],
.pick-btn.is-locked.dimmed:hover[b-255irlz718] {
    color: var(--ascend-text-muted);
    background: rgba(255, 255, 255, 0.03);
}

/* The check is the truth's alone; the move played carries the neutral YourPickTag (#9082). */
.truth-mark[b-255irlz718] { color: var(--ascend-success); font-size: 0.9rem; }

/* #9060 chunk 4 - the reveal rides the verdict dock's Verdict half (the phone's width at the bottom
   of the screen, 20rem beside the board above 1100px), so it drops its own panel box: what does not
   fit scrolls inside the dock while Next stays pinned. One flex column (the values, then the
   annotation), so the rule further down can put the why first with `order` at every width. */
.reveal-stack[b-255irlz718] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* THE WHY COMES FIRST wherever the reveal shows (the Candidate Moves rule, chunk 3 review): the
   dock is never roomy (about 240px on a phone, and beside the board above 1100px capped at this
   drill's room, ReserveDockRoomBesideBoard, 16-24rem with the window's height), and the chip at the board plus the marked list already carry the
   engine's best and the overlap. Visual order only; the DOM keeps the values first. */
.reveal-stack > .reveal-row[b-255irlz718] {
    order: 1;
}

/* Five short values in three columns, two rows, at every width (#9082: auto-fit at 5.5rem gave
   the 20rem dock only two columns, three rows, 47px taller, and review round 1 found minmax(5rem)
   gave a 390 phone four plus one). minmax(0) lets a long top-3 list wrap inside its column. */
.reveal-row[b-255irlz718] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem 0.75rem;
    align-items: start;
}

.reveal-row.shortlist-row[b-255irlz718] {
    grid-template-columns: 1fr;
}

.reveal-col[b-255irlz718] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* One line at every width (the chunk 2 review rule for reveal labels in the dock); the muted
   token, not a 40% white (3.80:1). */
.reveal-label[b-255irlz718] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: var(--ascend-text-muted);
}

.reveal-value[b-255irlz718] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    /* A long top-3 list wraps at its commas inside a third of the row, never past it. */
    overflow-wrap: anywhere;
}

.reveal-col.reveal-score .reveal-value[b-255irlz718] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.reveal-value.score-strong[b-255irlz718] { color: #31DDE3; }
.reveal-value.score-modest[b-255irlz718] { color: #B88536; }
.reveal-value.score-weak[b-255irlz718] { color: #f87171; }

.reveal-annotation[b-255irlz718] {
    /* #9082 - a little tighter (was 0.6rem, line-height 1.5) so the values fit the 25rem room. */
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid #B88536;
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
}

.shell-chip-urgent[b-255irlz718]  .shell-chip-value {
    color: #f87171;
    font-weight: 700;
}

/* #5460 — phone widths: stack the three-across candidate/pick buttons so
   each keeps a full-width tap target. #9060 chunk 4: the reveal values no longer stack (they
   ride the dock, where five stacked rows would push the annotation out of sight). */
@media (max-width: 480px) {
    .candidate-row[b-255irlz718],
    .pick-row[b-255irlz718] {
        grid-template-columns: 1fr;
    }
}

/* #9060 chunk 4 - the answer controls take the shared touch target on a touch screen: the slot's
   remove button was a bare 16px glyph, the pick buttons about 42px. */
@media (hover: none) and (pointer: coarse) {
    .slot-clear[b-255irlz718] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--touch-target);
        height: var(--touch-target);
        margin: -0.65rem -0.75rem -0.65rem 0;
    }

    .pick-btn[b-255irlz718] {
        min-height: var(--touch-target);
    }
}

/* #9031 review round 1 - the start-screen sentence that explains the capture. */
.intro-instinct[b-255irlz718] {
    margin-top: 0.75rem;
}
/* /Components/Pages/TimeManagementDrill.razor.rz.scp.css */
/* Page max-width intentionally NOT set — layout cap lives inside DrillShell. */
.time-drill-page[b-vdpkbxf38t] { padding: 0 1rem; }

/* Intro card */
.drill-intro[b-vdpkbxf38t] {
    margin-top: 1.5rem;
    display: flex;
    gap: 1.5rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* .intro-stat/-label/-value/-unit -> <StatItem Variant="Bare" Size="Large"
   LabelFirst>, with the unit as StatItem's own .stat-sub run (#6347). */

.intro-description[b-vdpkbxf38t] {
    flex: 1;
    min-width: 240px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin: 0;
}

/* HUD */
.drill-hud[b-vdpkbxf38t] {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: rgba(10, 22, 40, 0.9);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.hud-item[b-vdpkbxf38t] { text-align: center; }
.hud-label[b-vdpkbxf38t] { display: block; font-family: var(--ascend-font-secondary); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.45); }
.hud-value[b-vdpkbxf38t] { display: block; font-family: var(--ascend-font-primary); font-size: 1.5rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); }
.hud-value .unit[b-vdpkbxf38t] { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); margin-left: 0.1rem; }

.hud-item.timer .hud-value[b-vdpkbxf38t] { color: #31DDE3; transition: color 0.2s; }
.hud-item.timer.warning .hud-value[b-vdpkbxf38t] { color: #fbbf24; }
.hud-item.timer.critical .hud-value[b-vdpkbxf38t] {
    color: #f87171;
    animation: pulse-b-vdpkbxf38t 0.5s ease-in-out infinite alternate;
}

@keyframes pulse-b-vdpkbxf38t {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* Board + side pill */
.drill-side-row[b-vdpkbxf38t] { display: flex; justify-content: center; margin-bottom: 0.5rem; }

.drill-board-area[b-vdpkbxf38t] {
    position: relative;
    margin-bottom: 1rem;
}

/* #8730 - .drill-advance-row is now the shared verdict dock: DrillShell.razor.css
   owns its layout and its four viewport bands, reached with ::deep, so a
   page-level `display: flex` here would only fight it. */

.drill-next-btn[b-vdpkbxf38t] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
}

.drill-next-btn:hover[b-vdpkbxf38t] { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(49, 221, 227, 0.35); }

@media (max-width: 640px) {
    .drill-hud[b-vdpkbxf38t] { gap: 1rem; padding: 0.5rem 1rem; }
    .hud-value[b-vdpkbxf38t] { font-size: 1.2rem; }
    /* The intro value's phone step-down is now StatSize.Large's own clamp(). */
}
/* /Components/Pages/Tools/EndgameChecker.razor.rz.scp.css */
/* #8992 - the endgame checker. Brand tokens only; the shell (PublicPageShell) owns the page
   typography, the global .form-input owns the field look. Paragraph rules carry two classes
   plus the scope attribute (0,3,0) so they beat the shell's (0,2,1) paragraph rule, the same
   reason the rating converter's do. */

.ec-results[b-digeqwj81g] {
    margin-top: var(--space-xl);
}

.ec-results .ec-verdict-sentence[b-digeqwj81g] {
    font-size: 1.125rem;
    color: var(--ascend-text-light);
}

.ec-results .ec-refusal[b-digeqwj81g] {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ascend-text-light);
}

.ec-results .ec-subheading[b-digeqwj81g] {
    margin: var(--space-lg) 0 var(--space-sm);
    font-family: var(--ascend-font-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ascend-text-light);
}

.ec-distances[b-digeqwj81g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin: 0;
}

.ec-distance[b-digeqwj81g] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    min-width: 0;
}

.ec-distance dt[b-digeqwj81g] {
    font-weight: 600;
    color: var(--ascend-text-light);
}

.ec-distance dd[b-digeqwj81g] {
    margin: var(--space-xs) 0 0;
}

.ec-distance .ec-distance-value[b-digeqwj81g] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ascend-accent);
    font-variant-numeric: tabular-nums;
}

.ec-distance .ec-distance-note[b-digeqwj81g] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ascend-text-muted);
}

.ec-results .ec-line-summary[b-digeqwj81g] {
    color: rgba(255, 255, 255, 0.85);
}

.ec-island[b-digeqwj81g] {
    margin: var(--space-md) 0;
}

.ec-results .ec-meta[b-digeqwj81g],
.ec-input .ec-meta[b-digeqwj81g] {
    font-size: 0.9375rem;
    color: var(--ascend-text-muted);
}

.ec-input[b-digeqwj81g] {
    margin-top: var(--space-xl);
}

.ec-form[b-digeqwj81g] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: end;
    margin: var(--space-md) 0;
}

.ec-field[b-digeqwj81g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.ec-field label[b-digeqwj81g] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.ec-fen[b-digeqwj81g] {
    width: 100%;
    min-height: 44px;
    font-family: ui-monospace, monospace;
}

.ec-form[b-digeqwj81g]  .ec-submit {
    min-height: 44px;
}

.ec-input .ec-example a[b-digeqwj81g] {
    overflow-wrap: anywhere;
}

.ec-about[b-digeqwj81g] {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ec-next[b-digeqwj81g] {
    margin-top: var(--space-lg);
}

@media (max-width: 640px) {
    .ec-distances[b-digeqwj81g] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ec-form[b-digeqwj81g] {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }
}
/* /Components/Pages/Tools/EndgameCheckerBoard.razor.rz.scp.css */
/* #8992 - the endgame checker's board island. The setup board and the line player are shared
   components with their own stylesheets; this file only lays them out on a public page. */

.ec-board[b-ahpp4qmjkr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 24rem;
}

.ec-setup-note[b-ahpp4qmjkr] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ascend-text-muted);
}

/* The action buttons sit on the shared .action-row (app.css): full width and stacked on a
   phone, side by side from 480px. */
.ec-board[b-ahpp4qmjkr]  .action-row .ascend-btn {
    min-height: 44px;
}

/* The setup palette's piece buttons are 1.9rem in the author's editor; a visitor on a phone
   places pieces with a finger, so they get a 44px target on a coarse pointer. */
@media (pointer: coarse) {
    .ec-board[b-ahpp4qmjkr]  .piece-tool {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.4rem;
    }

    .ec-board[b-ahpp4qmjkr]  .side-btn {
        min-height: 44px;
    }
}

/* The Black row's light chip lives in BoardFenEditor.razor.css (fix round 4), so every host of
   the shared editor gets readable Black pieces, not only this page. */
/* /Components/Pages/Tools/MirrorLite.razor.rz.scp.css */
/* #8428 - Mirror Lite. Brand tokens only; the shell (PublicPageShell) owns the page typography,
   the global .form-input owns the field look. Paragraph rules carry two classes plus the scope
   attribute (0,3,0) so they win over the shell's paragraph rule (0,2,1), as on the opening prep
   page. The <form> and the submit button are rendered by EditForm and Button, so they are reached
   through ::deep from the page's own wrapper. The form wraps rather than using fixed columns: it
   has two or three fields depending on whether the Chess.com half is on. */

.ml-form-wrap[b-su0qeqrp04]  .ml-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: flex-end;
    margin: var(--space-xl) 0 var(--space-sm);
}

.ml-field[b-su0qeqrp04] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1 1 14rem;
    min-width: 0;
}

.ml-field label[b-su0qeqrp04] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.ml-field[b-su0qeqrp04]  .ml-select,
.ml-field[b-su0qeqrp04]  .ml-input {
    width: 100%;
    min-height: 44px;
}

.ml-challenge[b-su0qeqrp04] {
    flex: 1 1 100%;
}

.ml-form-wrap[b-su0qeqrp04]  .ml-submit {
    min-height: 44px;
}

.public-content .ml-message[b-su0qeqrp04] {
    margin: var(--space-md) 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ascend-error-light);
}

.ml-source[b-su0qeqrp04] {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ml-source .ml-meta[b-su0qeqrp04] {
    margin: var(--space-xs) 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ascend-text-muted);
}

.ml-next[b-su0qeqrp04] {
    margin-top: var(--space-lg);
}

@media (max-width: 720px) {
    /* One column, in DOM order, so the visual order is the focus order. */
    .ml-form-wrap[b-su0qeqrp04]  .ml-form {
        flex-direction: column;
        align-items: stretch;
    }

    .ml-field[b-su0qeqrp04] {
        flex: 0 0 auto;
    }
}
/* /Components/Pages/Tools/MirrorLiteLookup.razor.rz.scp.css */
/* #8428 - one streamed Mirror Lite lookup: progress, the outcome and the report. Split out of
   MirrorLite.razor.css with the markup (review round 1 of G); the rules are unchanged. Paragraph
   rules carry two classes plus the scope attribute so they win over the shell's paragraph rule. */

.ml-live[b-jxdflg64xn] {
    min-height: 1.5rem;
}

.public-content .ml-progress[b-jxdflg64xn] {
    margin: var(--space-md) 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.public-content .ml-message[b-jxdflg64xn] {
    margin: var(--space-md) 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ascend-error-light);
}

.ml-report[b-jxdflg64xn] {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ml-report h2[b-jxdflg64xn] {
    overflow-wrap: anywhere;
}

.ml-report .ml-meta[b-jxdflg64xn] {
    margin: var(--space-xs) 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ascend-text-muted);
}

.ml-report .ml-intro[b-jxdflg64xn],
.ml-report .ml-empty[b-jxdflg64xn] {
    margin: var(--space-lg) 0 var(--space-md);
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.ml-list[b-jxdflg64xn] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-md);
}

.ml-item[b-jxdflg64xn] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    min-width: 0;
}

.ml-item .ml-line[b-jxdflg64xn],
.ml-item .ml-study[b-jxdflg64xn] {
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ml-item .ml-line[b-jxdflg64xn] {
    font-weight: 600;
    color: var(--ascend-text-light);
}

.ml-item .ml-study[b-jxdflg64xn] {
    margin-top: var(--space-md);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
}

.ml-report .ml-attribution[b-jxdflg64xn] {
    margin-top: var(--space-md);
}

/* #9328 - the one next step, under the result once a lookup has finished. */
.ml-next[b-jxdflg64xn] {
    margin-top: var(--space-lg);
}

.public-content .ml-next-lead[b-jxdflg64xn] {
    margin: 0 0 var(--space-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.ml-next[b-jxdflg64xn]  .ml-cta {
    min-height: 44px;
}
/* /Components/Pages/Tools/MirrorLiteMomentView.razor.rz.scp.css */
/* #9328 - one Mirror Lite moment: the board beside its text on a wide screen, above it on a phone. */
.mlm[b-sdj81ir5hb] {
    margin: var(--space-md) 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.mlm-board[b-sdj81ir5hb] {
    width: 100%;
    max-width: 320px;
}

@media (min-width: 720px) {
    .mlm[b-sdj81ir5hb] {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    }
}

.mlm-text[b-sdj81ir5hb] {
    min-width: 0;
}

/* #9328 review round 1 - the shell's own paragraph and link rules score (0,2,1) and (0,3,1) and come
   later in the bundle, so these carry .public-content to win: (0,3,1) for a line, (0,4,0) for the
   classed lines and the link. */
.public-content .mlm-text p[b-sdj81ir5hb] {
    margin: 0 0 var(--space-xs);
    line-height: 1.5;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.85);
}

.public-content .mlm-text .mlm-where[b-sdj81ir5hb] {
    color: var(--ascend-text-muted);
    font-size: 0.9375rem;
}

.mlm-move[b-sdj81ir5hb] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* The key beside each move line matches its ring on the board by SHAPE: dashed for the move played,
   solid for the engine's. Both are light here, because the key sits on the dark card, not on a
   square (the walk showed a colored key read as a third mark). */
.mlm-key[b-sdj81ir5hb] {
    flex: 0 0 auto;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
}

.mlm-key-played[b-sdj81ir5hb] {
    border: 2px dashed rgba(255, 255, 255, 0.85);
}

.mlm-key-engine[b-sdj81ir5hb] {
    border: 2px solid rgba(255, 255, 255, 0.85);
}

.public-content .mlm-text .mlm-motif[b-sdj81ir5hb] {
    font-weight: 600;
    color: var(--ascend-text-light);
}

.public-content .mlm-link .mlm-anchor[b-sdj81ir5hb] {
    color: var(--ascend-secondary-light);
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}
/* /Components/Pages/Tools/OpeningPrep.razor.rz.scp.css */
/* #9000 - the opening prep report. Brand tokens only; the shell (PublicPageShell) owns the page
   typography, the global .form-input owns the field look. Paragraph rules carry two classes plus
   the scope attribute (0,3,0) so they win over the shell's paragraph rule (0,2,1), as on the
   rating converter. The <form> and the submit button are rendered by EditForm and Button, so
   they are reached through ::deep from the page's own wrapper. The tree rows live in
   OpeningPrepTreeNode.razor.css. */

.op-form-wrap[b-0dnt6xlucj]  .op-form {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) minmax(0, 8rem) auto;
    gap: var(--space-md);
    align-items: end;
    margin: var(--space-xl) 0 var(--space-sm);
}

.op-field[b-0dnt6xlucj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.op-field label[b-0dnt6xlucj] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.op-field[b-0dnt6xlucj]  .op-select,
.op-field[b-0dnt6xlucj]  .op-input {
    width: 100%;
    min-height: 44px;
}

.op-form-wrap[b-0dnt6xlucj]  .op-submit {
    min-height: 44px;
}

.public-content .op-hint[b-0dnt6xlucj] {
    margin: 0 0 var(--space-md);
    font-size: 0.9375rem;
    color: var(--ascend-text-muted);
}

.public-content .op-message[b-0dnt6xlucj] {
    margin: var(--space-md) 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ascend-error-light);
}

.op-report[b-0dnt6xlucj] {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.op-report h2[b-0dnt6xlucj] {
    overflow-wrap: anywhere;
}

.op-report .op-meta[b-0dnt6xlucj],
.op-source .op-meta[b-0dnt6xlucj] {
    margin: var(--space-xs) 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ascend-text-muted);
}

.op-block[b-0dnt6xlucj] {
    margin-top: var(--space-xl);
}

/* The shell styles no h3, so without this the section headings inherited a near-invisible
   color on the dark page (walk finding, 2026-10-20). */
.op-block h3[b-0dnt6xlucj] {
    margin: 0;
    color: var(--ascend-text-light);
}

.op-block .op-intro[b-0dnt6xlucj],
.op-block .op-empty[b-0dnt6xlucj] {
    margin: var(--space-xs) 0 var(--space-md);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.op-root[b-0dnt6xlucj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: baseline;
    padding: var(--space-sm) 0;
    font-weight: 600;
}

.op-root .op-stats[b-0dnt6xlucj] {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.op-tree[b-0dnt6xlucj] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.op-list[b-0dnt6xlucj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-md);
}

.op-item[b-0dnt6xlucj] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    min-width: 0;
}

.op-item .op-line[b-0dnt6xlucj],
.op-item .op-item-name[b-0dnt6xlucj],
.op-item .op-detail[b-0dnt6xlucj] {
    margin: 0;
    line-height: 1.5;
    font-style: normal;
    overflow-wrap: anywhere;
}

.op-item .op-line[b-0dnt6xlucj] {
    font-weight: 600;
    color: var(--ascend-text-light);
}

.op-item .op-item-name[b-0dnt6xlucj] {
    margin-top: var(--space-xs);
}

.op-item .op-detail[b-0dnt6xlucj] {
    margin-top: var(--space-xs);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
}

.op-move[b-0dnt6xlucj] {
    font-weight: 600;
    color: var(--ascend-text-light);
}

.op-move-player[b-0dnt6xlucj] {
    color: var(--ascend-secondary-light);
}

.op-node[b-0dnt6xlucj] {
    margin: 0;
    padding: 0;
}

.op-tree[b-0dnt6xlucj]  .op-other {
    font-size: 0.875rem;
    color: var(--ascend-text-muted);
    padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
}

.op-source[b-0dnt6xlucj],
.op-faq[b-0dnt6xlucj] {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.op-next[b-0dnt6xlucj] {
    margin-top: var(--space-lg);
}

@media (max-width: 720px) {
    /* One column, in DOM order, so the visual order is the focus order. */
    .op-form-wrap[b-0dnt6xlucj]  .op-form {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }
}
/* /Components/Pages/Tools/OpeningPrepTreeNode.razor.rz.scp.css */
/* #9000 - one tree line. Nested lines indent with a guide rule; a row wraps at phone widths
   instead of scrolling sideways. */

.op-node[b-hbtd9yn421] {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.op-node details > summary[b-hbtd9yn421] {
    cursor: pointer;
    list-style: none;
}

.op-node details > summary[b-hbtd9yn421]::-webkit-details-marker {
    display: none;
}

.op-node details > summary[b-hbtd9yn421]::before {
    content: "+";
    display: inline-block;
    width: 1.25rem;
    color: var(--ascend-accent);
    font-weight: 700;
}

.op-node details[open] > summary[b-hbtd9yn421]::before {
    content: "-";
}

.op-row[b-hbtd9yn421] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    min-height: 44px;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.op-leaf[b-hbtd9yn421] {
    padding-left: 1.25rem;
}

.op-children[b-hbtd9yn421] {
    list-style: none;
    margin: 0 0 0 0.5rem;
    padding: 0 0 0 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.op-move[b-hbtd9yn421] {
    font-weight: 600;
    color: var(--ascend-text-light);
    min-width: 4.5rem;
}

.op-move-player[b-hbtd9yn421] {
    color: var(--ascend-secondary-light);
}

.op-stats[b-hbtd9yn421] {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Shrinks with the row: a deep line at 344px leaves less than 6rem, and a fixed basis
   ran the bar past the gutter. */
.op-bar[b-hbtd9yn421] {
    flex: 0 1 6rem;
    min-width: 0;
    max-width: 100%;
}

.op-name[b-hbtd9yn421] {
    flex: 1 1 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
}

.op-other[b-hbtd9yn421] {
    font-size: 0.875rem;
    color: var(--ascend-text-muted);
    padding: var(--space-xs) 0 var(--space-xs) 1.25rem;
}
/* /Components/Pages/Tools/PhotoToPosition.razor.rz.scp.css */
/* #9012 - the photo to position tool. Brand tokens only; the shell (PublicPageShell) owns the page
   typography, the global .form-input owns the field look. Paragraph rules carry two classes plus
   the scope attribute (0,3,0) so they win over the shell's paragraph rule (0,2,1), as on the other
   free tools. The <form> elements and the shared Button are rendered by EditForm and Button, so
   they are reached through ::deep from the page's own wrapper. */

.ptp-step[b-t25zi6fnmm] {
    margin-top: var(--space-xl);
}

.ptp-step h2[b-t25zi6fnmm],
.ptp-info h2[b-t25zi6fnmm] {
    overflow-wrap: anywhere;
}

.ptp-form-wrap[b-t25zi6fnmm]  .ptp-photo-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
    margin: var(--space-md) 0 var(--space-sm);
}

.ptp-inputs[b-t25zi6fnmm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    flex: 1 1 28rem;
    min-width: 0;
}

.ptp-file[b-t25zi6fnmm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    padding: var(--space-md);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

/* #9012 review - a desktop ignores capture="environment", so there the camera choice would be a
   second identical file picker. It is shown only where the primary pointer is not a mouse. */
@media (hover: hover) and (pointer: fine) {
    .ptp-file-camera[b-t25zi6fnmm] {
        display: none;
    }

    .ptp-inputs[b-t25zi6fnmm] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ptp-file-label[b-t25zi6fnmm] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ascend-text-light);
}

.ptp-file input[type="file"][b-t25zi6fnmm] {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    font-size: 0.875rem;
    color: var(--ascend-text-muted);
}

.ptp-file input[type="file"][b-t25zi6fnmm]::file-selector-button {
    min-height: 40px;
    margin-right: var(--space-sm);
    padding: 0 var(--space-md);
    border: 1px solid var(--ascend-accent);
    border-radius: 6px;
    background: transparent;
    color: var(--ascend-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ptp-form-wrap[b-t25zi6fnmm]  .ptp-submit {
    min-height: 44px;
}

/* #9012 follow-up - the Turnstile widget takes its own row above the submit button; the reserved
   height keeps the button from jumping when Cloudflare's iframe arrives (as /contact's challenge-row). */
.ptp-challenge[b-t25zi6fnmm] {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 65px;
}

.public-content .ptp-hint[b-t25zi6fnmm],
.public-content .ptp-intro[b-t25zi6fnmm],
.public-content .ptp-meta[b-t25zi6fnmm] {
    margin: var(--space-xs) 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ascend-text-muted);
}

.public-content .ptp-message[b-t25zi6fnmm] {
    margin: var(--space-md) 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ascend-error-light);
}

/* ---- the board and the palette ---------------------------------------------------------- */

.ptp-form-wrap[b-t25zi6fnmm]  .ptp-confirm-form {
    margin-top: var(--space-md);
}

.ptp-board-area[b-t25zi6fnmm] {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
    scroll-margin-top: var(--space-lg);
}

.ptp-board[b-t25zi6fnmm] {
    min-width: 0;
}

.ptp-board-bar[b-t25zi6fnmm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.ptp-link-button[b-t25zi6fnmm] {
    min-height: 44px;
    padding: 0 var(--space-sm);
    border: 0;
    background: transparent;
    color: var(--ascend-accent);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.ptp-palette[b-t25zi6fnmm],
.ptp-choice[b-t25zi6fnmm] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ptp-palette legend[b-t25zi6fnmm],
.ptp-choice legend[b-t25zi6fnmm] {
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ascend-text-light);
}

.ptp-palette-grid[b-t25zi6fnmm] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    max-width: 22rem;
}

.ptp-tool[b-t25zi6fnmm] {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

.ptp-tool input[b-t25zi6fnmm] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.ptp-tool-face[b-t25zi6fnmm] {
    display: block;
    aspect-ratio: 1 / 1;
    min-height: 40px;
    border: 2px solid transparent;
    border-radius: 6px;
    background-color: #f0d9b5;
}

.ptp-tool input:checked + .ptp-tool-face[b-t25zi6fnmm] {
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 2px var(--ascend-accent);
}

.ptp-tool input:focus-visible + .ptp-tool-face[b-t25zi6fnmm] {
    outline: 3px solid var(--ascend-secondary);
    outline-offset: 2px;
}

.ptp-tool-empty[b-t25zi6fnmm] {
    display: block;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, transparent calc(50% - 1.5px), var(--ascend-error) calc(50% - 1.5px), var(--ascend-error) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}

.ptp-sr[b-t25zi6fnmm] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- side to move, castling, the check ---------------------------------------------------- */

.ptp-choice[b-t25zi6fnmm] {
    margin-top: var(--space-lg);
}

.ptp-option[b-t25zi6fnmm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
    margin-right: var(--space-lg);
    color: var(--ascend-text-light);
    cursor: pointer;
}

.ptp-option input[b-t25zi6fnmm] {
    width: 20px;
    height: 20px;
    accent-color: var(--ascend-accent);
}

.ptp-check[b-t25zi6fnmm] {
    margin-top: var(--space-lg);
    min-height: 48px;
    padding: 0 var(--space-xl);
    border: 0;
    border-radius: 8px;
    background: var(--ascend-accent);
    color: var(--ascend-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ptp-check:focus-visible[b-t25zi6fnmm] {
    outline: 3px solid var(--ascend-secondary);
    outline-offset: 2px;
}

.ptp-form-wrap[b-t25zi6fnmm]  .ptp-fen-form {
    margin-top: var(--space-lg);
}

.ptp-fen-label[b-t25zi6fnmm] {
    display: block;
    margin-bottom: var(--space-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.ptp-fen-row[b-t25zi6fnmm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.ptp-fen-row .ptp-fen-input[b-t25zi6fnmm] {
    flex: 1 1 16rem;
    min-width: 0;
    min-height: 44px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ptp-fen-row[b-t25zi6fnmm]  .ptp-fen-apply {
    min-height: 44px;
}

/* ---- the engine read ---------------------------------------------------------------------- */

.ptp-result[b-t25zi6fnmm] {
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    scroll-margin-top: var(--space-lg);
}

.public-content .ptp-eval[b-t25zi6fnmm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm);
    margin: var(--space-sm) 0 0;
    font-size: 1.125rem;
    color: var(--ascend-text-light);
}

.ptp-eval-words[b-t25zi6fnmm] {
    font-size: 0.9375rem;
    color: var(--ascend-text-muted);
}

.public-content .ptp-line[b-t25zi6fnmm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    margin: var(--space-md) 0 0;
    font-size: 1rem;
    color: var(--ascend-text-light);
}

.ptp-line-label[b-t25zi6fnmm] {
    font-weight: 600;
}

.public-content .ptp-caution[b-t25zi6fnmm] {
    margin: var(--space-md) 0 0;
    font-size: 0.9375rem;
    color: var(--ascend-secondary-light);
}

.ptp-fen-out code[b-t25zi6fnmm] {
    overflow-wrap: anywhere;
    color: var(--ascend-text-light);
}

/* #9012 follow-up - a member's one next step, under the engine read. */
.public-content .ptp-next-member[b-t25zi6fnmm] {
    margin: var(--space-md) 0 0;
    font-size: 1rem;
}

/* ---- the info sections -------------------------------------------------------------------- */

.ptp-info[b-t25zi6fnmm] {
    margin-top: var(--space-xl);
}

.ptp-tips[b-t25zi6fnmm] {
    margin: var(--space-sm) 0 0;
    padding-left: 1.25rem;
    color: var(--ascend-text-muted);
    line-height: 1.6;
}

.public-content .ptp-next p[b-t25zi6fnmm] {
    margin-top: var(--space-xl);
    font-size: 1rem;
}

@media (max-width: 720px) {
    .ptp-inputs[b-t25zi6fnmm] {
        grid-template-columns: minmax(0, 1fr);
        flex-basis: 100%;
    }

    .ptp-board-area[b-t25zi6fnmm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ptp-palette-grid[b-t25zi6fnmm] {
        max-width: none;
    }

    .ptp-option[b-t25zi6fnmm] {
        display: flex;
        margin-right: 0;
    }
}
/* /Components/Pages/Tools/RatingConverter.razor.rz.scp.css */
/* #8988 - the rating converter. Brand tokens only; the shell (PublicPageShell) owns the page
   typography, the global .form-input owns the field look. */

.rc-form[b-p62vuflvp6] {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: end;
    margin: var(--space-xl) 0 var(--space-md);
}

.rc-field[b-p62vuflvp6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.rc-field label[b-p62vuflvp6] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.rc-rating[b-p62vuflvp6],
.rc-select[b-p62vuflvp6] {
    width: 100%;
    min-height: 44px;
}

.rc-form[b-p62vuflvp6]  .rc-submit {
    min-height: 44px;
}

/* Specificity: the shell's paragraph rule (.public-content ::deep p:not(...)) compiles to
   (0,2,1), so a bare .rc-error (0,2,0) lost to it and rendered in the shell's light white.
   Every paragraph rule here carries two classes plus the scope attribute: (0,3,0). */
.rc-field .rc-error[b-p62vuflvp6] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ascend-error-light);
}

.rc-results[b-p62vuflvp6] {
    margin-top: var(--space-xl);
}

.rc-list[b-p62vuflvp6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.rc-item[b-p62vuflvp6] {
    --rc-estimate-size: 1.75rem;
    /* The body line-height, stated so a card with no number can hold the same line. */
    --rc-estimate-leading: 1.6;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    min-width: 0;
}

.rc-item-head[b-p62vuflvp6] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
}

/* #9018 review round 2: a card with no number holds an empty line the size of the number, so
   the pool name sits on the same baseline and the label lands at the same height as on a card
   that has one. The space is hidden from assistive technology (empty alt text). */
.rc-item-outside .rc-item-head[b-p62vuflvp6]::after {
    content: "\00a0";
    content: "\00a0" / "";
    font-family: var(--ascend-font-primary);
    font-size: var(--rc-estimate-size);
    line-height: var(--rc-estimate-leading);
}

.rc-pool[b-p62vuflvp6] {
    font-weight: 600;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.rc-estimate[b-p62vuflvp6] {
    font-family: var(--ascend-font-primary);
    font-size: var(--rc-estimate-size);
    line-height: var(--rc-estimate-leading);
    font-weight: 700;
    color: var(--ascend-accent);
    font-variant-numeric: tabular-nums;
}

.rc-results .rc-source[b-p62vuflvp6] {
    margin: var(--space-xs) 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.rc-results .rc-source[b-p62vuflvp6] {
    color: var(--ascend-text-muted);
}

.rc-item-outside .rc-source[b-p62vuflvp6] {
    color: rgba(255, 255, 255, 0.75);
}

.rc-results .rc-note[b-p62vuflvp6] {
    margin-top: var(--space-md);
}

.rc-results .rc-note[b-p62vuflvp6],
.rc-datasets .rc-meta[b-p62vuflvp6] {
    font-size: 0.9375rem;
    color: var(--ascend-text-muted);
}

.rc-datasets[b-p62vuflvp6] {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rc-next[b-p62vuflvp6] {
    margin-top: var(--space-lg);
}

@media (max-width: 640px) {
    .rc-form[b-p62vuflvp6] {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .rc-list[b-p62vuflvp6] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Tools/RatingConverterMethod.razor.rz.scp.css */
/* #8988 / #9018 - the rating converter's method page. Brand tokens only. Since #9018 the page is
   prose only (the survey and member-pair tables are no longer shown). */

.rcm-limits[b-r8tu4nudbp] {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    padding-left: var(--space-lg);
}
/* /Components/Pages/Tools/ToolEmailGate.razor.rz.scp.css */
/* #9469 - the free tools' email gate. Sits where the tool's form would, on the public tool
   pages' dark shell; the same field rhythm as the tools' own forms (44px targets, one column
   at phone width in DOM order). */

.tg-gate[b-i90ulmh6x1] {
    margin: var(--space-xl) 0;
    padding: var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
}

/* Two classes, so this outranks the public shell's h2 rule (.public-content ::deep h2, a 2xl top
   margin meant for page sections) inside the gate's own box. */
.tg-gate .tg-heading[b-i90ulmh6x1] {
    margin: 0 0 var(--space-sm);
    font-size: 1.25rem;
    text-wrap: balance;
}

.tg-lede[b-i90ulmh6x1] {
    margin: 0 0 var(--space-md);
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.tg-gate[b-i90ulmh6x1]  .tg-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.tg-row[b-i90ulmh6x1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: flex-end;
}

.tg-field[b-i90ulmh6x1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1 1 16rem;
    min-width: 0;
}

.tg-field label[b-i90ulmh6x1],
.tg-heard label[b-i90ulmh6x1] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.tg-input[b-i90ulmh6x1],
.tg-select[b-i90ulmh6x1] {
    width: 100%;
    min-height: 44px;
}

.tg-gate[b-i90ulmh6x1]  .tg-submit {
    min-height: 44px;
}

.tg-message[b-i90ulmh6x1] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ascend-error-light);
}

.tg-consent[b-i90ulmh6x1] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ascend-text-muted);
}

.tg-heard[b-i90ulmh6x1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 32rem;
}

.tg-optional[b-i90ulmh6x1] {
    font-weight: 400;
    color: var(--ascend-text-muted);
}

@media (max-width: 720px) {
    .tg-gate[b-i90ulmh6x1] {
        padding: var(--space-md);
    }

    /* One column, in DOM order, so the visual order is the focus order. */
    .tg-row[b-i90ulmh6x1] {
        flex-direction: column;
        align-items: stretch;
    }

    .tg-field[b-i90ulmh6x1] {
        flex: 0 0 auto;
    }
}
/* /Components/Pages/Tracking.razor.rz.scp.css */
/* Tracking — tab switcher chrome. Tab body styling lives in
   ProgressTab.razor.css and InsightsTab.razor.css. */

.tracking-tabs[b-bteck44x2w] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.15);
    margin-bottom: 1.5rem;
    padding-bottom: 0;
}

.tracking-tab[b-bteck44x2w] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
    border-radius: 6px 6px 0 0;
}

.tracking-tab:hover[b-bteck44x2w] {
    color: rgba(255, 255, 255, 0.85);
}

.tracking-tab.active[b-bteck44x2w] {
    color: #31DDE3;
    border-bottom-color: #31DDE3;
}

.tracking-tab i[b-bteck44x2w] {
    font-size: 1rem;
}

@media (max-width: 640px) {
    .tracking-tab[b-bteck44x2w] {
        flex: 1;
        justify-content: center;
        padding: 0.65rem 0.5rem;
        font-size: 0.85rem;
    }
}
/* /Components/Pages/TrackingTabs/InsightsTab.razor.rz.scp.css */
/* Insights Page */
.insights-page[b-88onu1xei4] {
    padding: 2rem;
}

/* Grid */
.insights-grid[b-88onu1xei4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
}

[b-88onu1xei4] .full-width {
    grid-column: 1 / -1;
}

/* Card base styling handled by shared Card component — insights-card used as CssClass */
[b-88onu1xei4] .insights-card {
    padding: 1.5rem;
}

/* #6170 — uniform card layout. Grid cells already stretch each card to the row's
   height; making the card a flex column and letting the body absorb the slack keeps
   every card's chrome identical and pins trailing content (links/CTAs) to a
   consistent baseline instead of leaving a ragged white gap next to a taller card. */
[b-88onu1xei4] .insights-card {
    display: flex;
    flex-direction: column;
}

/* Stretch the card's content to absorb the row-height slack. Expressed against
   the page-owned .insights-card wrapper's direct child rather than reaching into
   the shared Card's reserved .card-body class. These insight cards render only
   BodyContent (no header), so the body is the sole direct child. */
[b-88onu1xei4] .insights-card > * {
    flex: 1 1 auto;
}

/* Time window selector */
.time-window-selector[b-88onu1xei4] {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.tw-btn[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s;
}

.tw-btn.active[b-88onu1xei4] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

/* Trend summary bar */
.trend-summary-bar[b-88onu1xei4] {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.trend-item[b-88onu1xei4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* #9393 - the label names WHAT each trend figure is, so it reads at AA. It was
   rgba(255, 255, 255, 0.4): axe 3.78:1 on the trend bar (#727782 on #141c2e) at
   344, 390 and 1440. The brand secondary-text token is the one
   docs/design/brand-tokens.md names for labels at any size. */
.trend-metric[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: var(--ascend-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.trend-value[b-88onu1xei4] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.trend-arrow[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.trend-up[b-88onu1xei4] { color: #10b981; }
.trend-down[b-88onu1xei4] { color: #ef4444; }
/* #9405 - was 0.3 white, axe 2.7:1 on prod; the secondary-text token clears AA here (#9393). */
.trend-stable[b-88onu1xei4] { color: var(--ascend-text-secondary); }
/* #8013 - a figure with no direction claimed (mirror-v2): neutral, but readable,
   because the figure itself is the information. */
.trend-unstated[b-88onu1xei4] { color: rgba(255, 255, 255, 0.7); }

.trend-games[b-88onu1xei4] {
    margin-left: auto;
}

/* #9393 - the window's game count is the sample the three figures rest on (axe 3.78:1
   at 0.4 white), so it reads at AA like the labels beside it. */
.trend-games .trend-value[b-88onu1xei4] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ascend-text-secondary);
}

/* #6763 - the shared confidence disclaimer lives INSIDE the trend bar, not
   under it: it qualifies the three numbers in this bar and has to read as part
   of them. ::deep because ThinSampleNotice is a child component and its markup
   carries its own scope attribute, not this page's. Full basis so it takes the
   row below the metrics rather than squeezing in beside them; the bar already
   wraps. All type/colour comes from the component itself - nothing is restyled
   here. */
.trend-summary-bar[b-88onu1xei4]  .thin-sample-notice {
    flex: 1 0 100%;
    margin-top: 0.25rem;
}

/* card-subtitle styling handled by shared Card component */

/* ===== WEAKNESS CARD ===== */
.weakness-list[b-88onu1xei4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.weakness-item[b-88onu1xei4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

/* #8224 - the severity badge and the critical/moderate/mild edge color are gone:
   severity has no shared unit, so it only orders the list. The trend arrow moved
   into the title row. */
.weakness-trend[b-88onu1xei4] {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
}

.weakness-trend.trend-improving[b-88onu1xei4] { color: #10b981; }
.weakness-trend.trend-worsening[b-88onu1xei4] { color: #ef4444; }
.weakness-trend.trend-stagnant[b-88onu1xei4] { color: rgba(255, 255, 255, 0.4); }
/* #8228 review round 4 (M2) - words, not an arrow, so they read at AA like the counts beside them. */
.weakness-trend.trend-cannot-tell[b-88onu1xei4] { color: var(--ascend-text-secondary); font-weight: 600; white-space: nowrap; }

/* #8228 sweep - the counts a rate or a trend was read from: part of the claim, so they
   read at AA (was rgba(255, 255, 255, 0.4), 3.8:1; walk 2026-10-31, axe). */
.weakness-trend-detail[b-88onu1xei4] {
    font-size: 0.7rem;
    color: var(--ascend-text-secondary);
}

.weakness-content[b-88onu1xei4] {
    flex: 1;
    min-width: 0;
}

.weakness-title-row[b-88onu1xei4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.weakness-title[b-88onu1xei4] {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    color: #ffffff;
}

.weakness-category[b-88onu1xei4] {
    font-size: 0.65rem;
    padding: 0.125rem 0.5rem;
    background: rgba(49, 221, 227, 0.1);
    color: rgba(49, 221, 227, 0.7);
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.weakness-description[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.825rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin: 0 0 0.5rem 0;
}

/* #8228 review round 4 walk - the meta line holds the counts a "cannot tell yet" read rests on
   (occurrences, and the two windows' counts), so it reads at AA (was rgba(255, 255, 255, 0.3),
   2.69:1; axe, walk 2026-10-31). */
.weakness-meta[b-88onu1xei4] {
    display: flex;
    gap: 1rem;
    font-size: 0.7rem;
    color: var(--ascend-text-secondary);
}

/* ===== PHASE ACCURACY ===== */
.phase-list[b-88onu1xei4] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* ===== RATING BOUNDS CARD ===== */
.bounds-visual[b-88onu1xei4] {
    margin-bottom: 1.5rem;
}

.bounds-range-bar[b-88onu1xei4] {
    position: relative;
    height: 24px;
    margin-bottom: 0.5rem;
}

.range-track[b-88onu1xei4] {
    position: absolute;
    inset: 8px 0;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

.range-fill[b-88onu1xei4] {
    position: absolute;
    top: 8px;
    height: 8px;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.6), rgba(49, 221, 227, 0.4), rgba(16, 185, 129, 0.6));
    border-radius: 4px;
}

.range-marker[b-88onu1xei4] {
    position: absolute;
    top: 4px;
    width: 3px;
    height: 16px;
    background: #ffffff;
    border-radius: 2px;
    transform: translateX(-1px);
}

.bounds-labels[b-88onu1xei4] {
    display: flex;
    justify-content: space-between;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
}

.floor-label[b-88onu1xei4] { color: #ef4444; }
.median-label[b-88onu1xei4] { color: rgba(255, 255, 255, 0.5); }
.ceiling-label[b-88onu1xei4] { color: #10b981; }

/* Tile internals migrated to the shared StatItem (#6433); the page keeps
   only the row layout. */
.bounds-stats[b-88onu1xei4] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.phase-item[b-88onu1xei4] {
    display: grid;
    grid-template-columns: 180px 1fr 40px 28px;
    align-items: center;
    gap: 0.75rem;
}

.phase-label[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    min-width: 0;
}

.phase-bar-container[b-88onu1xei4] {
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50px;
    overflow: hidden;
}

.phase-bar[b-88onu1xei4] {
    height: 100%;
    border-radius: 50px;
    transition: width 0.3s ease;
}

.phase-bar.phase-good[b-88onu1xei4] {
    background: #10b981;
}

.phase-bar.phase-ok[b-88onu1xei4] {
    background: #B88536;
}

.phase-bar.phase-weak[b-88onu1xei4] {
    background: #ef4444;
}

.imbalance-narrative[b-88onu1xei4] {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    font-style: italic;
}

/* First-time educational banner for the seven imbalances (PBI #5838 Phase 3).
   Per-user dismissal lives on ApplicationUser.PdcEducationDismissedAt — one
   acknowledgment kills it on both Insights and Game Analysis surfaces. */
.imbalance-card .pdc-education-banner[b-88onu1xei4] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    margin-bottom: 1rem;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.12), rgba(184, 133, 54, 0.04));
    border: 1px solid rgba(184, 133, 54, 0.3);
}

.imbalance-card .pdc-education-icon[b-88onu1xei4] {
    flex-shrink: 0;
    color: #B88536;
    margin-top: 0.125rem;
}

.imbalance-card .pdc-education-icon[b-88onu1xei4]  i {
    font-size: 1.125rem;
}

.imbalance-card .pdc-education-body[b-88onu1xei4] {
    flex: 1;
    min-width: 0;
}

.imbalance-card .pdc-education-title[b-88onu1xei4] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    color: #B88536;
    margin: 0 0 0.4rem;
}

.imbalance-card .pdc-education-text[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 0.65rem;
}

.imbalance-card .pdc-education-text strong[b-88onu1xei4] {
    color: #31DDE3;
    font-weight: 600;
}

.imbalance-card .pdc-education-dismiss[b-88onu1xei4] {
    padding: 0.32rem 0.85rem;
    border-radius: 50px;
    background: rgba(184, 133, 54, 0.2);
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.4);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.imbalance-card .pdc-education-dismiss:hover[b-88onu1xei4] {
    background: rgba(184, 133, 54, 0.3);
    transform: translateY(-1px);
}

/* Pawn Structure Library CTA — only renders when AvgPawnStructure < -0.15
   (i.e., pawn structure is one of the player's recurring weak axes). */
.imbalance-cta[b-88onu1xei4] {
    margin-top: 1rem;
}

.imbalance-cta-link[b-88onu1xei4] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.08), rgba(49, 221, 227, 0.04));
    border: 1px solid rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.imbalance-cta-link:hover[b-88onu1xei4] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(49, 221, 227, 0.08));
    border-color: rgba(49, 221, 227, 0.5);
    transform: translateY(-1px);
}

.imbalance-cta-link > i:first-child[b-88onu1xei4] {
    color: #31DDE3;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.imbalance-cta-link > i:last-child[b-88onu1xei4] {
    color: #31DDE3;
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .imbalance-card .pdc-education-banner[b-88onu1xei4] {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .imbalance-cta-link[b-88onu1xei4] {
        padding: 0.65rem;
        font-size: 0.78rem;
    }
}

/* Tilt card: .tilt-stats -> <StatsRow> (its root, hence ::deep),
   .tilt-stat/-label/-value -> <StatItem LabelFirst Size="Small">, and
   .good/.warning -> Tone Success/Warning (#6347). */
[b-88onu1xei4] .tilt-stats {
    padding: 0.5rem 0;
}

.tilt-narrative[b-88onu1xei4] {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.tilt-insufficient[b-88onu1xei4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}
.tilt-insufficient p[b-88onu1xei4] { margin: 0; line-height: 1.5; }

/* ===== Tilt Signature ===== */
.tilt-signature-header[b-88onu1xei4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.tilt-signature-badge[b-88onu1xei4] {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.4);
    background: rgba(148, 163, 184, 0.1);
    color: rgba(203, 213, 225, 0.95);
}
.tilt-sig-resilient[b-88onu1xei4] { border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.1); color: #34d399; }
.tilt-sig-losscascade[b-88onu1xei4] { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.1); color: #f87171; }
.tilt-sig-deepspiral[b-88onu1xei4] { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); color: #f87171; }
.tilt-sig-qualityslide[b-88onu1xei4] { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.1); color: #fbbf24; }
.tilt-sig-sessioncreep[b-88onu1xei4] { border-color: rgba(184, 133, 54, 0.5); background: rgba(184, 133, 54, 0.1); color: #B88536; }
.tilt-sig-nightslide[b-88onu1xei4] { border-color: rgba(139, 92, 246, 0.5); background: rgba(139, 92, 246, 0.1); color: #a78bfa; }
.tilt-sig-tiltprone[b-88onu1xei4] { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.1); color: #fbbf24; }

.tilt-signature-rate[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

.tilt-signals[b-88onu1xei4] {
    margin-top: 1rem;
    padding: 0.75rem 0.85rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}
.tilt-signals-label[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}
.tilt-signal-bars[b-88onu1xei4] { display: flex; flex-direction: column; gap: 0.4rem; }
.tilt-signal-row[b-88onu1xei4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}
.tilt-signal-name[b-88onu1xei4] { width: 115px; flex-shrink: 0; }
.tilt-signal-bar-track[b-88onu1xei4] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.tilt-signal-bar-fill[b-88onu1xei4] {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f87171);
    border-radius: 3px;
}
.tilt-signal-count[b-88onu1xei4] {
    width: 70px;
    text-align: right;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

.tilt-legacy-stats[b-88onu1xei4] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}
/* #9405 - was 0.4 white (3.80:1). */
.tilt-legacy-label[b-88onu1xei4] { color: var(--ascend-text-secondary); margin-right: 0.3rem; }
.tilt-legacy-value[b-88onu1xei4] { color: rgba(255, 255, 255, 0.75); }

/* ===== Time of Day Card ===== */
.tod-header[b-88onu1xei4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.tod-badge[b-88onu1xei4] {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    border-radius: 999px;
    border: 2px solid rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
    color: #31DDE3;
}
.tod-sig-morningplayer[b-88onu1xei4] { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.1); color: #fbbf24; }
.tod-sig-afternoonplayer[b-88onu1xei4] { border-color: rgba(184, 133, 54, 0.5); background: rgba(184, 133, 54, 0.1); color: #B88536; }
.tod-sig-eveningplayer[b-88onu1xei4] { border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.1); color: #c084fc; }
.tod-sig-nightowl[b-88onu1xei4] { border-color: rgba(99, 102, 241, 0.5); background: rgba(99, 102, 241, 0.12); color: #818cf8; }
.tod-sig-flat[b-88onu1xei4] { border-color: rgba(148, 163, 184, 0.4); background: rgba(148, 163, 184, 0.1); color: rgba(203, 213, 225, 0.9); }

.tod-peak-callout[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
}
.tod-peak-callout strong[b-88onu1xei4] { color: #ffffff; font-weight: 700; }

.tod-narrative[b-88onu1xei4] {
    margin: 0.25rem 0 1rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

.tod-curve[b-88onu1xei4] {
    display: grid;
    /* minmax(0, 1fr) instead of 1fr so labeled columns (every 6th hour
       has white-space: nowrap text) can't expand past 1/24 of the row.
       Default 1fr resolves to minmax(auto, 1fr) and lets nowrap labels
       force the 4 labeled columns wider than the other 20. */
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 3px;
    padding: 0.5rem 0 0;
}

.tod-bar-wrap[b-88onu1xei4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.tod-bar-track[b-88onu1xei4] {
    position: relative;
    width: 100%;
    height: 110px;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 3px;
    display: flex;
    align-items: flex-end;
}

.tod-bar-fill[b-88onu1xei4] {
    width: 100%;
    background: linear-gradient(180deg, #31DDE3 0%, rgba(49, 221, 227, 0.4) 100%);
    border-radius: 3px 3px 0 0;
    transition: height 0.3s ease;
}
.tod-bar-fill.peak[b-88onu1xei4] {
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}
.tod-bar-fill.trough[b-88onu1xei4] {
    background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
    opacity: 0.85;
}

/* #9393 - the hour labels under the When You Play Best bars (axe 3.79:1 at 0.4 white,
   #6c737e on #0a1628, on the full-page Insights run). */
.tod-bar-label[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: var(--ascend-text-secondary);
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0;
}

.phase-value[b-88onu1xei4] {
    text-align: right;
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* ===== TACTICAL PATTERNS ===== */
.gap-list[b-88onu1xei4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gap-item[b-88onu1xei4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* #8228 sweep - the counted line ("8 of 12 found in the last 30 days") is longer than the
   old "8/12 found (last 30d)", so on a phone it wraps under the pattern name with a gap
   instead of running into it (walk 2026-10-31, 344px). */
.gap-header[b-88onu1xei4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
}

.gap-pattern[b-88onu1xei4] {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.85rem;
    color: #ffffff;
}

/* #8228 sweep - the counts a rate or a trend was read from: part of the claim, so they
   read at AA (was rgba(255, 255, 255, 0.4), 3.8:1; walk 2026-10-31, axe). */
.gap-stats[b-88onu1xei4] {
    font-size: 0.7rem;
    color: var(--ascend-text-secondary);
}

.gap-bar-container[b-88onu1xei4] {
    display: flex;
    height: 8px;
    border-radius: 50px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.gap-bar-hit[b-88onu1xei4] {
    background: #10b981;
    height: 100%;
}

.gap-bar-miss[b-88onu1xei4] {
    background: #ef4444;
    height: 100%;
}

.gap-labels[b-88onu1xei4] {
    display: flex;
    justify-content: space-between;
    /* #8228 sweep - the find rate's interval and the trend's counted detail are longer
       now, so the two wrap onto their own lines on a phone instead of squeezing. */
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
    font-size: 0.65rem;
}

.gap-hit-label[b-88onu1xei4] {
    color: #10b981;
}

/* ===== OPENING DEVIATIONS ===== */
.deviation-list[b-88onu1xei4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.deviation-item[b-88onu1xei4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.deviation-item:hover[b-88onu1xei4] {
    background: rgba(49, 221, 227, 0.05);
}

.deviation-opening[b-88onu1xei4] {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.8rem;
    color: #ffffff;
    flex-shrink: 0;
}

.deviation-detail[b-88onu1xei4] {
    flex: 1;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.move-played[b-88onu1xei4] {
    color: #ef4444;
    font-weight: 600;
}

.move-expected[b-88onu1xei4] {
    color: #10b981;
    font-weight: 600;
}

.deviation-date[b-88onu1xei4] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.deviation-drill-cta[b-88onu1xei4] {
    margin-top: 1rem;
    text-align: center;
}

/* Drill action buttons */
.drill-action-btn[b-88onu1xei4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(49, 221, 227, 0.1);
    color: #31DDE3;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.2s;
}

.drill-action-btn:hover[b-88onu1xei4] {
    background: rgba(49, 221, 227, 0.2);
    transform: scale(1.1);
}

/* #5489 — per-weakness "find a coach" bridge, stacked with the drill button. */
.weakness-actions[b-88onu1xei4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
}

.find-coach-action-btn[b-88onu1xei4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(184, 133, 54, 0.12);
    color: #B88536;
    text-decoration: none;
    transition: all 0.2s;
}

.find-coach-action-btn:hover[b-88onu1xei4] {
    background: rgba(184, 133, 54, 0.22);
    transform: scale(1.1);
}

.drill-action-btn-inline[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: #31DDE3;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(49, 221, 227, 0.08);
    margin-top: 0.35rem;
    transition: all 0.2s;
}

.drill-action-btn-inline:hover[b-88onu1xei4] {
    background: rgba(49, 221, 227, 0.15);
}

.drill-action-btn-sm[b-88onu1xei4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--ascend-text-light);
    text-decoration: none;
    flex-shrink: 0;
    margin-left: 0.5rem;
    transition: all 0.2s;
}

.drill-action-btn-sm:hover[b-88onu1xei4] {
    background: rgba(239, 68, 68, 0.2);
}

/* Recurring mistakes card */
.recurring-list[b-88onu1xei4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recurring-item[b-88onu1xei4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 8px;
    border-left: 3px solid #ef4444;
}

.recurring-info[b-88onu1xei4] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.recurring-title[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

/* #9401 - the pattern's count line: axe 3.77:1 at 0.4 white at phone widths. */
.recurring-meta[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: var(--ascend-text-secondary);
}

.drill-link[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: #31DDE3;
    text-decoration: none;
    padding: 0.5rem 1.25rem;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.drill-link:hover[b-88onu1xei4] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.5);
}

/* ===== STATUS CARD (footer) ===== */
[b-88onu1xei4] .status-card {
    padding: 0.75rem 1.5rem;
    border: 1px solid rgba(49, 221, 227, 0.15);
}

[b-88onu1xei4] .status-card::before {
    display: none;
}

.status-row[b-88onu1xei4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* #9393 - the analysis status line (games analyzed, AI enriched, estimated rating,
   last updated): axe 3.79:1 at 0.4 white on the full-page Insights run. */
.status-label[b-88onu1xei4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-text-secondary);
}

.status-separator[b-88onu1xei4] {
    color: rgba(255, 255, 255, 0.2);
}

.deviation-summary-header[b-88onu1xei4] {
    display: flex;
    /* #8228 - the rate now carries its interval, so the two halves wrap on a phone
       instead of squeezing each other. */
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.deviation-rate[b-88onu1xei4] {
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 1.1rem;
    color: #B88536;
}

.deviation-count[b-88onu1xei4] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.deviation-section-title[b-88onu1xei4] {
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.35);
    margin: 0.75rem 0 0.5rem;
}

/* Bug #8751 - the honest form of a deviation whose opening nothing can name.
   Quiet by design: it is a footnote on the list above, not a finding. The alpha
   matches .deviation-detail (0.5 = 5.25:1 on this card's rgb(10,22,40)), not the
   0.35 of .deviation-section-title: at 0.7rem this is normal text and needs 4.5:1.
   InheritedContrastRatchetTests caught 0.35 at 3.20:1. */
.deviation-note[b-88onu1xei4] {
    font-size: 0.7rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.5rem;
}

.deviation-count-badge[b-88onu1xei4] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.375rem;
    background: rgba(184, 133, 54, 0.15);
    color: #B88536;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 0.375rem;
}

.empty-state-compact[b-88onu1xei4] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    flex-wrap: wrap;
}
.empty-state-compact[b-88onu1xei4]  i {
    color: rgba(49, 221, 227, 0.55);
    font-size: 1.1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}
/* #9388 - the floor gives way to the box. A fixed 220px was wider than the compact empty
   state's 148px content box on a 344px phone (and its 194px at 390), so the text ran past
   the card and the card clipped it. The floor itself stays 220px (13.75rem) so the desktop
   layout is unchanged (text on its own line, CTA under it); min(..., 100%) is the same form
   Games.razor.css's compact empty state uses. */
.empty-state-compact span[b-88onu1xei4] { flex: 1; min-width: min(13.75rem, 100%); }

/* Small pill CTA inline inside a compact empty-state card.
   Shared pattern (see Dashboard's .empty-state-cta for the larger variant). */
.empty-state-cta-compact[b-88onu1xei4] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 50px;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.empty-state-cta-compact:hover[b-88onu1xei4] {
    background: rgba(49, 221, 227, 0.22);
    border-color: #31DDE3;
    color: #ffffff;
}

.card-loading[b-88onu1xei4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.5);
}/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .insights-page[b-88onu1xei4] {
        padding: 1rem;
    }

    .insights-grid[b-88onu1xei4] {
        grid-template-columns: 1fr;
    }

    /* #5460 — 4-up tilt stats don't fit a phone; the 2x2 collapse is now
       StatsRow's auto-fit at MinTileWidth="7rem". */

    .phase-item[b-88onu1xei4] {
        grid-template-columns: 120px 1fr 40px 28px;
    }

    .phase-label[b-88onu1xei4] {
        font-size: 0.7rem;
    }

    .weakness-item[b-88onu1xei4] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .weakness-title-row[b-88onu1xei4] {
        flex-wrap: wrap;
    }

    /* #8313 - THE OCCURRENCES LINE STACKS AT PHONE WIDTH.

       Owner report, prod 2.0.3 on a phone: the Focus Areas occurrences line is
       cramped. It is a three-part flex ROW - "N occurrences", the trend detail
       ("worse over the last 10 games"), and "Detected 3 days ago" - with 1rem
       between the parts, and the card hands it about 196px of content at 344px
       (the Insights cards lose a lot of width to nested padding). Three
       sentence fragments cannot share 196px: they wrapped inside their own
       spans and interleaved, so the count no longer read as belonging to the
       count. The fix the owner asked for is to stack it.

       Two parts of the three are OPTIONAL (TrendDetail is `@if`), so the row
       is between two and three items wide depending on the weakness - which is
       why this is a direction change rather than a width tuned to a part count.

       The gap drops to 0.25rem with the direction: 1rem between stacked lines
       would read as three separate meta blocks instead of one line, and the
       row it replaces is 0.7rem type. It rides in the same 768px block that
       already turns .weakness-item into a column, because that is the width at
       which the row stops having a second column to spend. */
    .weakness-meta[b-88onu1xei4] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .deviation-item[b-88onu1xei4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* Move Habits card */
.habit-profile-list[b-88onu1xei4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.habit-profile-row[b-88onu1xei4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: rgba(184, 133, 54, 0.05);
    border: 1px solid rgba(184, 133, 54, 0.15);
    border-radius: 10px;
}

.habit-profile-emoji[b-88onu1xei4] {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.habit-profile-info[b-88onu1xei4] {
    flex: 1;
    min-width: 0;
}

.habit-profile-name[b-88onu1xei4] {
    display: block;
    color: #ffffff;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
}

.habit-profile-desc[b-88onu1xei4] {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.habit-profile-stats[b-88onu1xei4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.habit-profile-count[b-88onu1xei4] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: #B88536;
}


/* #6153 - Position Character tendency view (replaces the cancelling tilt gauge). */
.pdc-tendencies[b-88onu1xei4] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.pdc-tendency-row[b-88onu1xei4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.pdc-tendency-axis[b-88onu1xei4] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.pdc-tendency-verdict[b-88onu1xei4] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}

.pdc-tendency-verdict.tendency-you[b-88onu1xei4] { color: #31DDE3; }
.pdc-tendency-verdict.tendency-opp[b-88onu1xei4] { color: #B88536; }
/* #8228 review round 3 walk: an axis whose two frequencies do not differ beyond chance is now
   drawn "even", so more rows carry this color; 0.45 measured 4.42:1 on the card's #111d2e
   (axe color-contrast, serious). 0.6 clears 4.5:1. */
.pdc-tendency-verdict.tendency-even[b-88onu1xei4] { color: rgba(255, 255, 255, 0.6); }

.pdc-tag-list[b-88onu1xei4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.pdc-tag-chip[b-88onu1xei4] {
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.2);
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Pages/TrackingTabs/ProgressTab.razor.rz.scp.css */
.progress-page[b-8f73kn0uh6] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

/* Loading / Empty */
.loading-state[b-8f73kn0uh6] {
    text-align: center;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
}

.spin[b-8f73kn0uh6] { animation: spin-b-8f73kn0uh6 1s linear infinite; }
@keyframes spin-b-8f73kn0uh6 { to { transform: rotate(360deg); } }

/* Narrative */
.narrative-card[b-8f73kn0uh6] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

.narrative-body[b-8f73kn0uh6] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex: 1;
}

.narrative-card p[b-8f73kn0uh6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
}

.narrative-ask[b-8f73kn0uh6] {
    display: flex;
}

/* Charts grid */
.charts-grid[b-8f73kn0uh6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.chart-card[b-8f73kn0uh6] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1.25rem;
    overflow: hidden;
    /* #6171 - flex column so the sparkline can pin to the bottom and the three
       cards in a row stay vertically uniform. */
    display: flex;
    flex-direction: column;
}

/* #6171 - the sparkline sits at the bottom of every card regardless of how tall
   the coach read above it is, so the charts (and their min/max labels) align. */
.chart-spark[b-8f73kn0uh6] {
    margin-top: auto;
}

.chart-title[b-8f73kn0uh6] {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.15rem;
}

.chart-subtitle[b-8f73kn0uh6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0 0 0.75rem;
    /* #6171 - reserve two lines so a one-line subtitle and the wrapping Game Rating
       caption reserve the same height, keeping the 7/30/90 readout row aligned. */
    min-height: 2.1em;
}

/* Trend Deterministic Read (rework area C). The read is the headline; the
   sparkline below it is the supporting visual. */
.trend-read[b-8f73kn0uh6] {
    margin: 0.4rem 0 0.6rem;
    padding-left: 0.6rem;
    border-left: 3px solid rgba(255, 255, 255, 0.18);
}

/* #6905 - keyed on the read's VERDICT (improving / steady / worsening), never on
   its raw up/down movement. Blunder rate is higher-is-worse, so keying on raw
   direction painted a climbing blunder rate green. */
.trend-read.trend-improving[b-8f73kn0uh6] { border-left-color: #10b981; }
.trend-read.trend-worsening[b-8f73kn0uh6] { border-left-color: #f59e0b; }
.trend-read.trend-steady[b-8f73kn0uh6] { border-left-color: rgba(255, 255, 255, 0.25); }

.trend-read-text[b-8f73kn0uh6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.trend-read-action[b-8f73kn0uh6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #31DDE3;
    text-decoration: none;
}

.trend-read-action:hover[b-8f73kn0uh6] { text-decoration: underline; }

/* #6131 - trailing 7/30/90-day window averages + direction. The real-direction
   gauge that replaced the noisy per-game rolling read. */
.window-trend[b-8f73kn0uh6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0.7rem;
}

.wt-vals[b-8f73kn0uh6] {
    display: inline-flex;
    gap: 0.85rem;
}

.wt-val[b-8f73kn0uh6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
}

.wt-val strong[b-8f73kn0uh6] {
    margin-left: 0.2rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
    text-transform: none;
    letter-spacing: 0;
}

.wt-dir[b-8f73kn0uh6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.55rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: capitalize;
}

.wt-dir[b-8f73kn0uh6]  i { font-size: 0.78rem; }

.wt-improving[b-8f73kn0uh6] { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.wt-worsening[b-8f73kn0uh6] { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.wt-steady[b-8f73kn0uh6] { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.5); }

/* Input lens (rework area D) — the leading-indicator "on track" read. Sits at
   the top of the tab; strength tints the left edge. */
.input-lens[b-8f73kn0uh6] {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-left: 4px solid rgba(255, 255, 255, 0.2);
}

.input-lens.input-strong[b-8f73kn0uh6] { border-left-color: #10b981; }
.input-lens.input-moderate[b-8f73kn0uh6] { border-left-color: #31DDE3; }
.input-lens.input-light[b-8f73kn0uh6] { border-left-color: #f59e0b; }
.input-lens.input-idle[b-8f73kn0uh6] { border-left-color: rgba(255, 255, 255, 0.3); }

.input-lens-head[b-8f73kn0uh6] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
}

.input-lens-head i[b-8f73kn0uh6] { color: #B88536; font-size: 0.95rem; }

.input-lens-label[b-8f73kn0uh6] {
    font-family: 'condor', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.input-lens-text[b-8f73kn0uh6] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}

.input-lens-assoc[b-8f73kn0uh6] {
    margin: 0.4rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
}

.input-lens-action[b-8f73kn0uh6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #31DDE3;
    text-decoration: none;
}

.input-lens-action:hover[b-8f73kn0uh6] { text-decoration: underline; }

/* Activity stat tiles migrated to the shared StatsRow/StatItem (#6433);
   only the page-level spacing below the row stays here. */
[b-8f73kn0uh6] .pt-activity-stats {
    margin-bottom: 2rem;
}

/* Actions */
/* Woodpecker Speed Section */
.woodpecker-section[b-8f73kn0uh6] {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
}

.section-title[b-8f73kn0uh6] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
    text-align: center;
}

.section-subtitle[b-8f73kn0uh6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin: 0 0 1.25rem;
}

.woodpecker-bars[b-8f73kn0uh6] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 0 1rem;
}

.wp-bar-group[b-8f73kn0uh6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex: 1;
    max-width: 100px;
}

.wp-bar-container[b-8f73kn0uh6] {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: flex-end;
}

.wp-bar[b-8f73kn0uh6] {
    width: 100%;
    background: linear-gradient(180deg, rgba(49, 221, 227, 0.6), rgba(49, 221, 227, 0.2));
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.5s ease;
}

.wp-bar.latest[b-8f73kn0uh6] {
    background: linear-gradient(180deg, #31DDE3, rgba(49, 221, 227, 0.5));
    box-shadow: 0 0 12px rgba(49, 221, 227, 0.3);
}

.wp-bar-time[b-8f73kn0uh6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    color: #31DDE3;
    margin-top: 0.25rem;
}

.wp-bar-label[b-8f73kn0uh6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.wp-bar-acc[b-8f73kn0uh6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

.wp-bar-avg[b-8f73kn0uh6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
}

/* Parthenon — 5 pillars + foundation */
.pillars-section[b-8f73kn0uh6] {
    margin-top: 2rem;
}

.pillars-grid[b-8f73kn0uh6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.pillar-card[b-8f73kn0uh6] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.pillar-card:hover[b-8f73kn0uh6] {
    border-color: rgba(49, 221, 227, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(4, 32, 71, 0.4), 0 0 20px rgba(49, 221, 227, 0.08);
}

.pillar-header[b-8f73kn0uh6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pillar-icon[b-8f73kn0uh6] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(184, 133, 54, 0.15));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 10px;
    color: #31DDE3;
    flex-shrink: 0;
}

.pillar-title-group[b-8f73kn0uh6] {
    flex: 1;
    min-width: 0;
}

.pillar-name[b-8f73kn0uh6] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    line-height: 1.2;
}

.pillar-author[b-8f73kn0uh6] {
    font-size: 0.65rem;
    color: rgba(184, 133, 54, 0.8);
    font-style: italic;
}

/* Recent-form chip — a qualitative word (Sharp/Steady/Rusty), not a
   0-100 number. The calibrated skill number lives in the Skill Checkpoint. */
.pillar-form[b-8f73kn0uh6] {
    font-family: var(--ascend-font-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
}

.pillar-form.score-good[b-8f73kn0uh6] { color: #34d399; }
.pillar-form.score-ok[b-8f73kn0uh6] { color: #fbbf24; }
.pillar-form.score-low[b-8f73kn0uh6] { color: #ef4444; }
.pillar-form.score-none[b-8f73kn0uh6] { color: rgba(255, 255, 255, 0.3); }

.pillar-stats[b-8f73kn0uh6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pillar-stat-row[b-8f73kn0uh6] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.75rem;
}

/* #8264: a value WRAPS inside its card. It was white-space: nowrap, so the
   longest value set the min-content width of the one-column phone grid and every
   pillar card grew to it: with honest-consistency on, the Study Methods empty
   state is a full sentence and the cards measured 563px at 344 and 390, cutting
   off every status line at the viewport edge (flag off, 344 already overflowed
   to 371px).
   Neither item overrides its flex minimum size (its longest word). A value that
   carries data is a short token that cannot break ("3/10", "DiscoveredAttack"):
   with min-width: 0 on the value and flex-shrink: 0 on the label it was squeezed
   below its own text at 344 and ran into the sub-label ("3/10self-reviewed").
   So the label wraps at its own spaces instead, a sentence value wraps at its
   spaces, right-aligned, and the one-word "Status" label keeps its word. Pinned
   by NarrowViewportLayoutContractTests. */
.pillar-stat-label[b-8f73kn0uh6] {
    color: rgba(255, 255, 255, 0.5);
}

.pillar-stat-value[b-8f73kn0uh6] {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    margin-left: auto;
    text-align: right;
}

.pillar-stat-sub[b-8f73kn0uh6] {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.65rem;
}

.progress-actions[b-8f73kn0uh6] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}/* Mobile */
@media (max-width: 768px) {
    .progress-page[b-8f73kn0uh6] { padding: 1rem; }
    .charts-grid[b-8f73kn0uh6] { grid-template-columns: 1fr; }
    .pillars-grid[b-8f73kn0uh6] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Training.razor.rz.scp.css */
.training-page[b-sctjeg27yd] {
    background: radial-gradient(circle at top, rgba(49, 221, 227, 0.08), transparent 50%),
                linear-gradient(180deg, #0f172a 0%, #0a1628 100%);
    padding: 2rem;
    min-height: 100%;
}

.training-container[b-sctjeg27yd] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ===== Pre-Foundation Welcome ===== */

.pre-foundation-hero[b-sctjeg27yd] {
    max-width: 720px;
    margin: 3rem auto;
    padding: 3rem 2.5rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.45), 0 0 40px rgba(49, 221, 227, 0.1);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
}

.pre-foundation-icon[b-sctjeg27yd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px; height: 84px;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border: 2px solid rgba(49, 221, 227, 0.4);
    color: #31DDE3;
    font-size: 2.2rem;
}

.pre-foundation-title[b-sctjeg27yd] {
    margin: 0 0 1.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: 1px;
}
.pre-foundation-title .accent-white[b-sctjeg27yd] { color: #ffffff; }
.pre-foundation-title .accent-gold[b-sctjeg27yd] { color: #B88536; }

.pre-foundation-body[b-sctjeg27yd] {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 1rem;
}
.pre-foundation-body em[b-sctjeg27yd] { color: #31DDE3; font-style: italic; }
.pre-foundation-body strong[b-sctjeg27yd] { color: #ffffff; }

.pre-foundation-quiet[b-sctjeg27yd] { color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; }

.pre-foundation-actions[b-sctjeg27yd] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* ===== Foundation Hero ===== */

.foundation-hero[b-sctjeg27yd] {
    text-align: center;
    padding: 2rem 1rem 0;
}
.foundation-title[b-sctjeg27yd] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 2.5rem;
    letter-spacing: 1.5px;
}
.foundation-title .accent-white[b-sctjeg27yd] { color: #ffffff; }
.foundation-title .accent-gold[b-sctjeg27yd] { color: #B88536; }
.foundation-subtitle[b-sctjeg27yd] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.65);
    font-size: 1rem;
    margin-top: 0.5rem;
}

/* ===== Recommendation Card ===== */

.recommendation-card[b-sctjeg27yd] {
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.12) 0%, rgba(184, 133, 54, 0.08) 100%);
    border: 2px solid rgba(49, 221, 227, 0.4);
    border-radius: 20px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(4, 32, 71, 0.4);
}
.recommendation-card[b-sctjeg27yd]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent, #31DDE3) 0%, var(--ascend-secondary, #B88536) 100%);
}

.recommendation-card.rec-start[b-sctjeg27yd] { border-color: rgba(49, 221, 227, 0.5); }
.recommendation-card.rec-momentum[b-sctjeg27yd] { border-color: rgba(16, 185, 129, 0.5); }
.recommendation-card.rec-finish[b-sctjeg27yd] { border-color: rgba(184, 133, 54, 0.5); }
.recommendation-card.rec-maintain[b-sctjeg27yd] { border-color: rgba(148, 163, 184, 0.5); }

.recommendation-badge[b-sctjeg27yd] {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0.75rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    background: rgba(49, 221, 227, 0.18);
    color: #31DDE3;
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 999px;
}

.recommendation-headline[b-sctjeg27yd] {
    margin: 0 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    color: #ffffff;
    line-height: 1.2;
}

.recommendation-rationale[b-sctjeg27yd] {
    margin: 0 0 1.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
}

/* ===== Foundation Grid ===== */

.foundation-grid[b-sctjeg27yd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.foundation-element[b-sctjeg27yd] {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.25);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.foundation-element:hover[b-sctjeg27yd] { transform: translateY(-2px); border-color: rgba(49, 221, 227, 0.5); }

.foundation-element.untouched[b-sctjeg27yd] { border-color: rgba(148, 163, 184, 0.35); }
.foundation-element.learning[b-sctjeg27yd] { border-color: rgba(49, 221, 227, 0.45); }
.foundation-element.practicing[b-sctjeg27yd] { border-color: rgba(184, 133, 54, 0.45); }
.foundation-element.mastered[b-sctjeg27yd] { border-color: rgba(16, 185, 129, 0.5); }

.element-header[b-sctjeg27yd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.element-label[b-sctjeg27yd] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    color: #ffffff;
}

.element-subtitle[b-sctjeg27yd] {
    margin: 0.15rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

.tier-badge[b-sctjeg27yd] {
    padding: 3px 10px;
    font-family: var(--ascend-font-primary);
    font-size: 0.68rem;
    letter-spacing: 1px;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: uppercase;
}
/* #7906 / #7977 - the four tier chips paint OPAQUE backgrounds, deliberately.
   Each used to be a translucent wash (rgba(..., 0.15-0.18)) sitting on
   .foundation-element's gradient, so axe-core fell through the chip to the
   gradient and returned "incomplete" instead of a verdict. Three different
   runs reported three different chips, because WHICH chip renders depends on
   the member's own progress: dev CI build 10973 on prod-shaped data reported
   .tier-practicing and .tier-untouched, #7906's clean-develop run reported
   .tier-learning and .tier-untouched, and a local scan as the seeded fixture
   reports .tier-badge.tier-untouched - a different axe selector again, which
   is why the frozen register's /foundation .tier-learning and
   .tier-untouched.tier-badge lines never matched what CI actually saw. An
   opaque chip ends the whole family: axe stops at the chip and decides it,
   whatever the member's tier and whatever the card behind it does.
   Each value is its old wash composited over --ascend-bg-card, the surface
   .foundation-element renders as, so the chips look the same. Measured with
   axe-core after the change: untouched 8.07:1, learning 7.30:1,
   practicing 5.35:1, mastered 5.34:1 - all clear WCAG 2.2 AA for the chip's
   10.9px text. Do not put a gradient or a translucent wash back here. */
.tier-untouched[b-sctjeg27yd] { background: #1f2b3e; color: rgba(203, 213, 225, 0.9); border: 1px solid rgba(148, 163, 184, 0.3); }
.tier-learning[b-sctjeg27yd] { background: #113a4a; color: #31DDE3; border: 1px solid rgba(49, 221, 227, 0.4); }
.tier-practicing[b-sctjeg27yd] { background: #292a2b; color: var(--ascend-secondary-light); border: 1px solid rgba(184, 133, 54, 0.4); }
.tier-mastered[b-sctjeg27yd] { background: #0b3338; color: #10b981; border: 1px solid rgba(16, 185, 129, 0.4); }

.element-progress[b-sctjeg27yd] {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.element-progress-fill[b-sctjeg27yd] {
    height: 100%;
    background: linear-gradient(90deg, #31DDE3, #B88536);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.element-drills[b-sctjeg27yd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.element-drill[b-sctjeg27yd] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    background: color-mix(in srgb, var(--ascend-text-light) 3%, var(--ascend-bg-dark));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
/* #8793 - the drill row is OPAQUE, deliberately, for the same reason the tier
   chips above are (#7906 / #7977). It used to be a 3% white wash over
   .foundation-element's gradient, so axe fell through the row to the gradient
   and returned "incomplete" for every line of text in it. "No score yet" was
   the line that broke develop (builds 11253 and 11254) once #8753 / #8760 put
   most of the e2e account's drills into that state, but the attempts, last-
   attempt, name and score lines sat on the same wash. An opaque row stops axe
   at the row and gives each of them a verdict. The values are the old washes
   mixed into --ascend-bg-dark, the color the card's gradient ends on, so the
   rows look the same. Pinned by AxeDecidableTextSurfaceTests. Do not put a
   translucent wash or a gradient back here. */
.element-drill:hover[b-sctjeg27yd] { background: color-mix(in srgb, var(--ascend-accent) 7%, var(--ascend-bg-dark)); border-color: rgba(49, 221, 227, 0.3); }

.element-drill.mastered[b-sctjeg27yd] { border-color: rgba(16, 185, 129, 0.3); }
.element-drill.practicing[b-sctjeg27yd] { border-color: rgba(184, 133, 54, 0.25); }
.element-drill.learning[b-sctjeg27yd] { border-color: rgba(49, 221, 227, 0.25); }

.drill-name[b-sctjeg27yd] { font-weight: 500; color: #ffffff; grid-column: 1; grid-row: 1 / span 2; }
.drill-meta[b-sctjeg27yd] { display: flex; gap: 0.5rem; font-size: 0.78rem; grid-column: 2; grid-row: 1; justify-self: end; align-items: center; }
.drill-score[b-sctjeg27yd] { font-weight: 600; color: #31DDE3; }
/* #8793 - the three quiet meta lines share one token. They were raw 30%, 50%
   and 40% white, which nobody could measure while the row was a wash: axe
   abstained on all of them. Once the row went opaque, axe-core measured the
   old 40% "last attempt" line at 3.75:1 - a real AA failure that had been
   hiding as "incomplete". On the opaque row axe-core measures
   --ascend-text-secondary at 5.45:1 (attempts was 5.13:1 at 50% white), so
   "No score yet", the attempts count and the last attempt all clear AA and
   read as one level, quieter than the name and the cyan score. */
.drill-score-empty[b-sctjeg27yd] { color: var(--ascend-text-secondary); }
.drill-attempts[b-sctjeg27yd] { color: var(--ascend-text-secondary); }
.drill-last[b-sctjeg27yd] { grid-column: 2 / span 2; grid-row: 2; justify-self: end; font-size: 0.72rem; color: var(--ascend-text-secondary); }

/* ===== Per-Element Secondary Link ===== */

.element-secondary[b-sctjeg27yd] {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.element-secondary-link[b-sctjeg27yd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.15s ease;
}
.element-secondary-link:hover[b-sctjeg27yd] { color: #31DDE3; }
.element-secondary-link i[b-sctjeg27yd] { font-size: 0.9rem; }

/* ===== Beyond-Foundation Note ===== */

.beyond-foundation-note[b-sctjeg27yd] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
}
.beyond-foundation-note[b-sctjeg27yd]  i { color: rgba(49, 221, 227, 0.6); flex-shrink: 0; margin-top: 2px; }
.beyond-foundation-note a[b-sctjeg27yd] { color: #31DDE3; text-decoration: underline; text-underline-offset: 0.15em; }
.beyond-foundation-note a:hover[b-sctjeg27yd] { text-decoration: underline; }

/* ===== Responsive ===== */

@media (max-width: 820px) {
    .foundation-grid[b-sctjeg27yd] { grid-template-columns: 1fr; }
    .foundation-title[b-sctjeg27yd] { font-size: 2rem; }
    .recommendation-headline[b-sctjeg27yd] { font-size: 1.25rem; }
    .element-drill[b-sctjeg27yd] { grid-template-columns: 1fr auto; }
    .drill-meta[b-sctjeg27yd], .drill-last[b-sctjeg27yd] { grid-column: 2; justify-self: end; }
}
/* /Components/Pages/Uscf/Lookup.razor.rz.scp.css */
/* USCF Lookup Page Styles */

/* Ensure CSS variables have fallbacks */
.page-container[b-k23pea5h86] {
    --ascend-accent: var(--ascend-accent);
    --ascend-accent-light: var(--ascend-accent-light);
    --ascend-secondary: var(--ascend-secondary);
    --ascend-primary: var(--ascend-bg-dark);
    --ascend-text-light: #ffffff;
    --ascend-font-primary: var(--ascend-font-primary);
    --ascend-font-secondary: var(--ascend-font-secondary);
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 50px;
    --transition-base: 0.2s ease;

    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #0a1628 0%, var(--ascend-bg-dark) 100%);
}

.lookup-content[b-k23pea5h86] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Page Header */
.page-header[b-k23pea5h86] {
    text-align: center;
    margin-bottom: 2rem;
}

/* Two-tone title rendered by the shared Wordmark component (#6356), which
   owns the flush-seam rule and the default 0.05em tracking. */
.page-title[b-k23pea5h86] {
    font-family: var(--ascend-font-primary);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
}

.page-subtitle[b-k23pea5h86] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Alerts */
.alert[b-k23pea5h86] {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    animation: slideIn-b-k23pea5h86 0.3s ease;
    border: 2px solid;
    backdrop-filter: blur(10px);
    margin-bottom: 1.5rem;
}

@keyframes slideIn-b-k23pea5h86 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert[b-k23pea5h86]  i {
    font-size: 18px;
    flex-shrink: 0;
}

.alert-success[b-k23pea5h86] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border-color: #10b981;
    color: #34d399;
}

.alert-success[b-k23pea5h86]  i {
    color: #10b981;
}

.alert-error[b-k23pea5h86] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border-color: #ef4444;
    color: #fca5a5;
}

.alert-error[b-k23pea5h86]  i {
    color: #ef4444;
}

/* Cards — card infrastructure styling handled by shared Card component.
   .no-results-card lives with the rest of the no-results block below. */
/* #6946 - ::deep on BOTH selectors: each class rides on a child <Card>, and in a
   comma group the scope attribute is appended to every selector, so neither half
   matched. .lookup-content is plain block flow with no `gap`, so without this the
   search card and the results card render flush against each other. */
[b-k23pea5h86] .lookup-card,
[b-k23pea5h86] .results-card {
    margin-bottom: 2rem;
}

/* Card title/subtitle styling is now handled by shared Card component */

/* Search Section */
.search-form[b-k23pea5h86] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.search-input-group[b-k23pea5h86] {
    display: flex;
    gap: 1rem;
}

[b-k23pea5h86] .search-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: var(--radius-lg);
    color: #ffffff;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-family: var(--ascend-font-secondary);
    transition: all var(--transition-base);
}

[b-k23pea5h86] .search-input:focus {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(49, 221, 227, 0.15);
}

[b-k23pea5h86] .search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-button[b-k23pea5h86] {
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-bg-dark);
    border: none;
    border-radius: var(--radius-lg);
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(49, 221, 227, 0.4);
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.search-button:hover:not(:disabled)[b-k23pea5h86] {
    background: linear-gradient(135deg, var(--ascend-accent-light) 0%, var(--ascend-accent) 100%);
    box-shadow: 0 12px 32px rgba(49, 221, 227, 0.5);
    transform: translateY(-2px);
}

.search-button:disabled[b-k23pea5h86] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.search-button[b-k23pea5h86]  i {
    font-size: 20px;
}

.search-hint[b-k23pea5h86] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Results Header */
.results-header[b-k23pea5h86] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.results-count[b-k23pea5h86] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1rem;
    background: rgba(49, 221, 227, 0.1);
    border-radius: var(--radius);
    border: 1px solid rgba(49, 221, 227, 0.3);
}

/* Results Grid */
.results-grid[b-k23pea5h86] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

/* Member Card */
.member-card[b-k23pea5h86] {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    transition: all var(--transition-base);
}

.member-card:hover[b-k23pea5h86] {
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 24px rgba(49, 221, 227, 0.2);
    transform: translateY(-2px);
}

.member-card.expired[b-k23pea5h86] {
    border-color: rgba(255, 255, 255, 0.1);
}

.member-card.expired:hover[b-k23pea5h86] {
    border-color: rgba(255, 255, 255, 0.2);
}

.member-header[b-k23pea5h86] {
    margin-bottom: 1rem;
}

.member-name[b-k23pea5h86] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ascend-text-light);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}

.member-id[b-k23pea5h86] {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.member-status[b-k23pea5h86] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.status-badge[b-k23pea5h86] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
}

.status-badge[b-k23pea5h86]  i {
    font-size: 14px;
}

.status-active[b-k23pea5h86] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: var(--ascend-success);
}

.status-expired[b-k23pea5h86] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: #f59e0b;
}

.state-badge[b-k23pea5h86] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Member Ratings */
.member-ratings[b-k23pea5h86] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
}

.rating-item[b-k23pea5h86] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 80px;
}

.rating-label[b-k23pea5h86] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rating-value[b-k23pea5h86] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ascend-accent);
}

/* Member Actions */
.member-actions[b-k23pea5h86] {
    display: flex;
    justify-content: flex-end;
}

.connect-button[b-k23pea5h86] {
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-primary);
    border: none;
    border-radius: var(--radius-full);
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.3);
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.connect-button:hover:not(:disabled)[b-k23pea5h86] {
    background: linear-gradient(135deg, var(--ascend-accent-light) 0%, var(--ascend-accent) 100%);
    box-shadow: 0 6px 16px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

.connect-button:disabled[b-k23pea5h86] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.connect-button[b-k23pea5h86]  i {
    font-size: 16px;
}

/* More Results Notice */
.more-results-notice[b-k23pea5h86] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    margin-top: 1.5rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.more-results-notice[b-k23pea5h86]  i {
    flex-shrink: 0;
}

/* No Results — single home for the card chrome + layout. The chrome used to
   be declared in a second .no-results-card block up in the Cards section whose
   padding this block already overrode; folded together, same computed style. */
.no-results-card[b-k23pea5h86] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: var(--radius-2xl);
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    margin-bottom: 2rem;
    text-align: center;
    padding: 3rem 2rem;
}

.no-results-icon[b-k23pea5h86] {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-results-card h3[b-k23pea5h86] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    color: var(--ascend-text-light);
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.no-results-card p[b-k23pea5h86] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0;
}

/* Back Link */
.back-link[b-k23pea5h86] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .lookup-content[b-k23pea5h86] {
        padding: 1rem;
    }

    .page-title[b-k23pea5h86] {
        font-size: 2rem;
    }

    .search-input-group[b-k23pea5h86] {
        flex-direction: column;
    }

    .search-button[b-k23pea5h86] {
        width: 100%;
        justify-content: center;
    }

    .results-header[b-k23pea5h86] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .results-grid[b-k23pea5h86] {
        grid-template-columns: 1fr;
    }

    .member-ratings[b-k23pea5h86] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .member-actions[b-k23pea5h86] {
        justify-content: stretch;
    }

    .connect-button[b-k23pea5h86] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Verified.razor.rz.scp.css */
.verified-page[b-u522cxv64l] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a1628 0%, #0f172a 50%, #1e293b 100%);
    padding: var(--space-xl);
}

.verified-container[b-u522cxv64l] {
    max-width: 600px;
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border-radius: var(--radius-2xl);
    padding: var(--space-3xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    position: relative;
    overflow: hidden;
}

.verified-container[b-u522cxv64l]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
}

.success-icon[b-u522cxv64l] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-2xl);
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(49, 221, 227, 0.4);
    animation: scaleIn-b-u522cxv64l 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes scaleIn-b-u522cxv64l {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.success-icon[b-u522cxv64l]  i {
    font-size: 48px;
}

.verified-title[b-u522cxv64l] {
    font-family: var(--ascend-font-primary);
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--space-lg);
    animation: fadeInUp-b-u522cxv64l 0.6s ease-out 0.2s both;
}

.verified-message[b-u522cxv64l] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.25rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-md);
    animation: fadeInUp-b-u522cxv64l 0.6s ease-out 0.3s both;
}

.verified-submessage[b-u522cxv64l] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-2xl);
    animation: fadeInUp-b-u522cxv64l 0.6s ease-out 0.4s both;
}

@keyframes fadeInUp-b-u522cxv64l {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.brand-name[b-u522cxv64l] {
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.brand-primary[b-u522cxv64l] {
    color: #ffffff;
    /* letter-spacing trails after every glyph (incl. the last letter of
       "ASCEND"), rendering as a gap before "CHESS". Cancel the trailing track
       so the two-tone wordmark sits flush (#6193). */
    margin-right: -0.05em;
}

.brand-secondary[b-u522cxv64l] {
    color: var(--ascend-secondary);
}

.btn-home[b-u522cxv64l] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--ascend-accent) 0%, #42e8ed 100%);
    color: var(--ascend-primary);
    font-family: var(--ascend-font-secondary);
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: all var(--transition-smooth);
    animation: fadeInUp-b-u522cxv64l 0.6s ease-out 0.5s both;
}

.btn-home:hover[b-u522cxv64l] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(49, 221, 227, 0.5);
    background: linear-gradient(135deg, #42e8ed 0%, var(--ascend-accent) 100%);
}

.btn-home[b-u522cxv64l]  i {
    font-size: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .verified-container[b-u522cxv64l] {
        padding: var(--space-2xl);
    }

    .verified-title[b-u522cxv64l] {
        font-size: 2rem;
    }

    .verified-message[b-u522cxv64l] {
        font-size: 1.125rem;
    }

    .success-icon[b-u522cxv64l] {
        width: 100px;
        height: 100px;
    }

    .success-icon[b-u522cxv64l]  i {
        font-size: 40px;
    }
}
/* /Components/Pages/VerifyEmail.razor.rz.scp.css */
.verified-page[b-7w2jm4yeev] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a1628 0%, #0f172a 50%, #1e293b 100%);
    padding: 2rem;
}

.verified-container[b-7w2jm4yeev] {
    max-width: 600px;
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    position: relative;
    overflow: hidden;
}

.verified-container[b-7w2jm4yeev]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
}

.spinner-icon[b-7w2jm4yeev] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner[b-7w2jm4yeev] {
    width: 80px;
    height: 80px;
    border: 4px solid rgba(49, 221, 227, 0.2);
    border-top-color: var(--ascend-accent);
    border-radius: 50%;
    animation: spin-b-7w2jm4yeev 1s linear infinite;
}

@keyframes spin-b-7w2jm4yeev {
    to {
        transform: rotate(360deg);
    }
}

.error-icon[b-7w2jm4yeev] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-2xl);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(239, 68, 68, 0.4);
    animation: scaleIn-b-7w2jm4yeev 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes scaleIn-b-7w2jm4yeev {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.error-icon[b-7w2jm4yeev]  i {
    font-size: 48px;
}

.verified-title[b-7w2jm4yeev] {
    font-family: var(--ascend-font-primary);
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--space-lg);
    animation: fadeInUp-b-7w2jm4yeev 0.6s ease-out 0.2s both;
}

.verified-message[b-7w2jm4yeev] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.25rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-md);
    animation: fadeInUp-b-7w2jm4yeev 0.6s ease-out 0.3s both;
}

.verified-message.error[b-7w2jm4yeev] {
    color: #fca5a5;
}

@keyframes fadeInUp-b-7w2jm4yeev {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-home[b-7w2jm4yeev] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--ascend-accent) 0%, #42e8ed 100%);
    color: var(--ascend-primary);
    font-family: var(--ascend-font-secondary);
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: all var(--transition-smooth);
    animation: fadeInUp-b-7w2jm4yeev 0.6s ease-out 0.5s both;
}

.btn-home:hover[b-7w2jm4yeev] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(49, 221, 227, 0.5);
    background: linear-gradient(135deg, #42e8ed 0%, var(--ascend-accent) 100%);
}

.btn-home[b-7w2jm4yeev]  i {
    font-size: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .verified-container[b-7w2jm4yeev] {
        padding: var(--space-2xl);
    }

    .verified-title[b-7w2jm4yeev] {
        font-size: 2rem;
    }

    .verified-message[b-7w2jm4yeev] {
        font-size: 1.125rem;
    }

    .spinner-icon[b-7w2jm4yeev],
    .error-icon[b-7w2jm4yeev] {
        width: 100px;
        height: 100px;
    }

    .spinner[b-7w2jm4yeev] {
        width: 60px;
        height: 60px;
    }

    .error-icon[b-7w2jm4yeev]  i {
        font-size: 40px;
    }
}
/* /Components/Pages/WorkbookChapter.razor.rz.scp.css */
.workbook-page[b-4ugwm0kztx] {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
}

.workbook-header[b-4ugwm0kztx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.back-link[b-4ugwm0kztx] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    margin-bottom: 0.25rem;
}

.back-link:hover[b-4ugwm0kztx] {
    color: #31DDE3;
}

.page-heading[b-4ugwm0kztx] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.page-subtitle[b-4ugwm0kztx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.25rem 0 0;
}

.dot-sep[b-4ugwm0kztx] {
    margin: 0 0.3rem;
    color: rgba(255, 255, 255, 0.25);
}

.header-right[b-4ugwm0kztx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .workbook-header[b-4ugwm0kztx] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .header-right[b-4ugwm0kztx] {
        width: 100%;
        justify-content: space-between;
    }

    .answer-row[b-4ugwm0kztx] {
        flex-wrap: wrap;
    }

    [b-4ugwm0kztx] .answer-input {
        min-width: 0;
    }
}

[b-4ugwm0kztx] .chapter-theme-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.4rem 0.6rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

[b-4ugwm0kztx] .chapter-theme-select option {
    background: #0f172a;
    color: #ffffff;
}

.mode-toggle[b-4ugwm0kztx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    color: #31DDE3;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mode-toggle:hover[b-4ugwm0kztx] {
    background: rgba(49, 221, 227, 0.2);
}

.mode-toggle.active[b-4ugwm0kztx] {
    background: rgba(184, 133, 54, 0.15);
    border-color: rgba(184, 133, 54, 0.4);
    color: #B88536;
}

/* Answer Grid */
.answer-grid[b-4ugwm0kztx] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.answer-row[b-4ugwm0kztx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.answer-row.graded-correct[b-4ugwm0kztx] {
    border-color: rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.03);
}

.answer-row.graded-incorrect[b-4ugwm0kztx] {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.03);
}

.answer-row.graded-partial[b-4ugwm0kztx] {
    border-color: rgba(245, 158, 11, 0.2);
    background: rgba(245, 158, 11, 0.03);
}

.puzzle-num[b-4ugwm0kztx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

[b-4ugwm0kztx] .answer-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #ffffff;
}

[b-4ugwm0kztx] .answer-input:focus {
    outline: none;
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

[b-4ugwm0kztx] .answer-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.grade-badge[b-4ugwm0kztx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.grade-badge.correct[b-4ugwm0kztx] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.grade-badge.incorrect[b-4ugwm0kztx] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.grade-badge.partial[b-4ugwm0kztx] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

/* Quick Entry */
/* Grading Mode */
.grading-header[b-4ugwm0kztx] {
    margin-bottom: 0.75rem;
}

.grading-count[b-4ugwm0kztx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.grading-grid[b-4ugwm0kztx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.grading-row[b-4ugwm0kztx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.grading-row.correct[b-4ugwm0kztx] {
    border-color: rgba(16, 185, 129, 0.2);
}

.grading-row.incorrect[b-4ugwm0kztx] {
    border-color: rgba(239, 68, 68, 0.2);
}

.grading-row.partial[b-4ugwm0kztx] {
    border-color: rgba(245, 158, 11, 0.2);
}

.grading-answer[b-4ugwm0kztx] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.grade-buttons[b-4ugwm0kztx] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.grade-btn[b-4ugwm0kztx] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--ascend-text-secondary);
}

.grade-btn:hover[b-4ugwm0kztx] {
    border-color: rgba(255, 255, 255, 0.3);
}

.grade-btn.correct:hover[b-4ugwm0kztx], .grade-btn.correct.selected[b-4ugwm0kztx] {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
    color: #34d399;
}

.grade-btn.incorrect:hover[b-4ugwm0kztx], .grade-btn.incorrect.selected[b-4ugwm0kztx] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}

.grade-btn.partial:hover[b-4ugwm0kztx], .grade-btn.partial.selected[b-4ugwm0kztx] {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}

.grade-btn.flashcard[b-4ugwm0kztx] {
    margin-left: 0.4rem;
    border-color: rgba(49, 221, 227, 0.3);
    color: rgba(49, 221, 227, 0.7);
}

.grade-btn.flashcard:hover[b-4ugwm0kztx] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.6);
    color: #31DDE3;
}

.grading-actions[b-4ugwm0kztx] {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.section-label[b-4ugwm0kztx] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 1.5rem 0 0.5rem;
}

.graded[b-4ugwm0kztx] {
    opacity: 0.7;
}

.spin-icon[b-4ugwm0kztx] {
    animation: spin-b-4ugwm0kztx 1s linear infinite;
}

@keyframes spin-b-4ugwm0kztx {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Flash-card creation modal */
.fc-modal-form[b-4ugwm0kztx] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.fc-modal-context[b-4ugwm0kztx] {
    margin: 0;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(49, 221, 227, 0.4);
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.fc-modal-wrong-answer[b-4ugwm0kztx] {
    color: #f87171;
}

.fc-modal-form .form-group[b-4ugwm0kztx] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.fc-modal-form label[b-4ugwm0kztx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}

/* #7266: radius, colour, font, font-size and the focus ring duplicated the
   global .form-input in app.css (#7258), and the fill had DRIFTED DOWN to
   0.04 white against the global 0.05 - a fainter box than the design system
   draws. The global values win. The tighter padding stays: this is a compact
   flash-card modal, not a page form. */
.fc-modal-form .form-input[b-4ugwm0kztx] {
    padding: 0.55rem 0.75rem;
}

.fc-modal-form .form-hint[b-4ugwm0kztx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.fc-modal-error[b-4ugwm0kztx] {
    padding: 0.5rem 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #f87171;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

/* Solution-phase board + move list + phase actions */
.fc-solution-board[b-4ugwm0kztx] {
    width: 100%;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(49, 221, 227, 0.2);
}

.fc-solution-moves[b-4ugwm0kztx] {
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(49, 221, 227, 0.4);
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fc-solution-label[b-4ugwm0kztx] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}

.fc-solution-list[b-4ugwm0kztx] {
    color: #fff;
    font-weight: 600;
    word-break: break-word;
}

.fc-solution-empty[b-4ugwm0kztx] {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.fc-phase-actions[b-4ugwm0kztx] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

/* Toast confirmation after a flash card is saved */
.fc-toast[b-4ugwm0kztx] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(16, 185, 129, 0.85));
    border: 1px solid rgba(16, 185, 129, 1);
    border-radius: 8px;
    color: var(--ascend-primary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fc-toast-in-b-4ugwm0kztx 0.2s ease-out;
}

/* #7754 - the toast for a grade that was REFUSED. The success toast is green,
   so reusing it for a failure would be the same lie in a different place. Own
   modifier name rather than a shared .error, so this scoped file is not
   repainting a class app.css owns (#7266 ratchet). */
/* Solid, and a whole step darker than the obvious #EF4444: white over that red
   composites to 4.08:1 against the real page and the #7222 contrast ratchet
   rejects it. #B91C1C carries white at 6.5:1. */
.fc-toast.fc-toast-refused[b-4ugwm0kztx] {
    background: #B91C1C;
    border-color: #7F1D1D;
    color: #FFFFFF;
    bottom: 5rem;
}

@keyframes fc-toast-in-b-4ugwm0kztx {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* #7087 - the answer key states an unset puzzle count instead of inventing
   one. Informational, not an error: nothing is broken, the chapter is just
   unconfigured, so this reads as a note rather than an alarm. */
.puzzle-count-unset[b-4ugwm0kztx] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

.puzzle-count-unset[b-4ugwm0kztx]  i,
.puzzle-count-unset i[b-4ugwm0kztx] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--ascend-accent);
}

.puzzle-count-unset a[b-4ugwm0kztx] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

.puzzle-count-unset a:hover[b-4ugwm0kztx] {
    color: var(--ascend-accent-light);
}

/* #7110 - whose move the solution is played from. The modal's .form-group is a
   flex column, so the pill opts out of the default stretch. ::deep -
   .drill-side-pill is the DrillSidePill child component's markup. */
.fc-modal-form .form-group[b-4ugwm0kztx]  .drill-side-pill {
    align-self: flex-start;
}
/* /Components/Pages/WorkbookRepetition.razor.rz.scp.css */
.repetition-page[b-3nifvha1dc] {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
}

.start-section[b-3nifvha1dc] {
    text-align: center;
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.start-section h1[b-3nifvha1dc] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.subtitle[b-3nifvha1dc] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    max-width: 400px;
}

.icon-circle[b-3nifvha1dc] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(184, 133, 54, 0.15));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #31DDE3;
}

.back-link[b-3nifvha1dc] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.back-link:hover[b-3nifvha1dc] { color: #31DDE3; }

.rep-header[b-3nifvha1dc] {
    margin-bottom: 1.5rem;
}

.page-heading[b-3nifvha1dc] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0.25rem 0 0;
}

.page-subtitle[b-3nifvha1dc] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.25rem 0 0;
}

.dot-sep[b-3nifvha1dc] {
    margin: 0 0.3rem;
    color: rgba(255, 255, 255, 0.25);
}

.error-text[b-3nifvha1dc] { color: #f87171; }
.success-text[b-3nifvha1dc] { color: #34d399; font-weight: 600; }

/* Cycle complete card */
.cycle-complete-card[b-3nifvha1dc] {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(184, 133, 54, 0.3);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Bug #9053 follow-up 3: a neutral completion receipt, not a reward. The 32px size moved
   here from an inline style; --ascend-success replaces the inline reward gold (#B88536). */
.cycle-complete-check[b-3nifvha1dc] {
    font-size: 32px;
    color: var(--ascend-success);
}

.cycle-complete-card h2[b-3nifvha1dc] {
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.cycle-complete-card p[b-3nifvha1dc] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Repetition items */
.rep-items[b-3nifvha1dc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rep-item[b-3nifvha1dc] {
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.rep-item.correct[b-3nifvha1dc] { border-color: rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.03); }
.rep-item.incorrect[b-3nifvha1dc] { border-color: rgba(239, 68, 68, 0.2); background: rgba(239, 68, 68, 0.03); }
.rep-item.partial[b-3nifvha1dc] { border-color: rgba(245, 158, 11, 0.2); background: rgba(245, 158, 11, 0.03); }

.rep-item-header[b-3nifvha1dc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.puzzle-ref[b-3nifvha1dc] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.grade-badge[b-3nifvha1dc] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.grade-badge.correct[b-3nifvha1dc] { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.grade-badge.incorrect[b-3nifvha1dc] { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.grade-badge.partial[b-3nifvha1dc] { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

.rep-item-original[b-3nifvha1dc] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.rep-item-original .label[b-3nifvha1dc] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
}

.rep-item-reattempt[b-3nifvha1dc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

[b-3nifvha1dc] .answer-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #ffffff;
}

[b-3nifvha1dc] .answer-input:focus {
    outline: none;
    border-color: rgba(49, 221, 227, 0.4);
}

[b-3nifvha1dc] .answer-input::placeholder { color: rgba(255, 255, 255, 0.25); }

.grade-buttons[b-3nifvha1dc] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.grade-btn[b-3nifvha1dc] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--ascend-text-secondary);
}

.grade-btn.correct:hover[b-3nifvha1dc] { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.5); color: #34d399; }
.grade-btn.incorrect:hover[b-3nifvha1dc] { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); color: #f87171; }
.grade-btn.partial:hover[b-3nifvha1dc] { background: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.5); color: #fbbf24; }

.spin-icon[b-3nifvha1dc] {
    animation: spin-b-3nifvha1dc 1s linear infinite;
}

@keyframes spin-b-3nifvha1dc {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Pages/WorldChessConnect.razor.rz.scp.css */
/* WorldChessConnect (#7020) - a narrow single-card page; the lookup panel
   brings its own styling, so this only sets the page frame. Tokens only. */

.connect-content[b-esw3bkkbfp] {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page-header[b-esw3bkkbfp] {
    text-align: center;
}

/* #7036 - the beta chip sits inline with the wordmark, so the title becomes a
   centred flex row. It is allowed to wrap: on a narrow phone the chip drops to
   its own line rather than shrinking the wordmark. */
.page-title[b-esw3bkkbfp] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* #7036 - the disclosure as prose. Quieter than the subtitle above it: a user
   should read it, not be stopped by it. */
.connect-beta-note[b-esw3bkkbfp] {
    font-family: var(--ascend-font-secondary);
    font-style: italic;
    font-size: 0.82rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--ascend-text-light) 50%, transparent);
    margin: 0.75rem auto 0 auto;
    max-width: 34rem;
}

.page-subtitle[b-esw3bkkbfp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--ascend-text-light) 65%, transparent);
    margin: 0;
}

.connect-footnote[b-esw3bkkbfp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--ascend-text-light) 50%, transparent);
    text-align: center;
    margin: 0;
}
/* /Components/Shared/AccessibleAlert.razor.rz.scp.css */
/* Accessible alert banner — replicates the established per-page `.alert-error`
   look (PBI #5853 follow-up) so adopting the shared component is visually
   identical. Outer margin comes from the caller's inline Style. */
.accessible-alert[b-skn1s09sra] {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.accessible-alert[b-skn1s09sra]  i {
    font-size: 16px;
    flex-shrink: 0;
}

.accessible-alert-error[b-skn1s09sra] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.accessible-alert-success[b-skn1s09sra] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.accessible-alert-info[b-skn1s09sra] {
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: #9becf0;
}
/* /Components/Shared/AddToFlashCardsButton.razor.rz.scp.css */
.add-to-flashcards-btn[b-kw0hnfkvrq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 8px;
    color: var(--ascend-secondary-light);
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.add-to-flashcards-btn:hover:not(.is-disabled):not(:disabled)[b-kw0hnfkvrq] {
    background: rgba(184, 133, 54, 0.2);
    border-color: rgba(184, 133, 54, 0.55);
}

.add-to-flashcards-btn.is-disabled[b-kw0hnfkvrq],
.add-to-flashcards-btn:disabled[b-kw0hnfkvrq] {
    opacity: 0.4;
    cursor: not-allowed;
}

.add-to-flashcards-form[b-kw0hnfkvrq] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.add-to-flashcards-form .modal-text[b-kw0hnfkvrq] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

.add-to-flashcards-form .modal-text a[b-kw0hnfkvrq] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.add-to-flashcards-form .modal-text a:hover[b-kw0hnfkvrq] {
    text-decoration: underline;
}

.fc-mode-group[b-kw0hnfkvrq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fc-mode-option[b-kw0hnfkvrq] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fc-mode-option:hover[b-kw0hnfkvrq] {
    border-color: rgba(49, 221, 227, 0.35);
    background: rgba(255, 255, 255, 0.07);
}

.fc-mode-option.is-selected[b-kw0hnfkvrq] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.1);
}

.fc-mode-name[b-kw0hnfkvrq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: #ffffff;
}

.fc-mode-option.is-selected .fc-mode-name[b-kw0hnfkvrq] {
    color: var(--ascend-accent);
}

.fc-mode-desc[b-kw0hnfkvrq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.62);
}

.fc-mode-note[b-kw0hnfkvrq] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.45);
}

.add-to-flashcards-form .form-group[b-kw0hnfkvrq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.add-to-flashcards-form .form-label[b-kw0hnfkvrq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* #7266: fill, border, colour, font, font-size and the focus border
   duplicated the global .form-input in app.css (#7258). What is left is the
   genuine delta - this is a tight inline popover, so the control is smaller
   and squarer than a page form field. */
.add-to-flashcards-form .form-input[b-kw0hnfkvrq] {
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}

.add-to-flashcards-form .source-summary[b-kw0hnfkvrq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.add-to-flashcards-form .source-summary-label[b-kw0hnfkvrq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.add-to-flashcards-form .source-summary-badge[b-kw0hnfkvrq] {
    padding: 0.15rem 0.55rem;
    background: rgba(184, 133, 54, 0.18);
    color: var(--ascend-secondary-light);
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
}

.add-to-flashcards-form .form-error[b-kw0hnfkvrq] {
    color: #f87171;
    font-size: 0.85rem;
    margin: 0;
}
/* /Components/Shared/AddToSparringButton.razor.rz.scp.css */
.add-to-sparring-btn[b-r2g4w9yh3l] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    color: #31DDE3;
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.add-to-sparring-btn:hover:not(.is-disabled):not(:disabled)[b-r2g4w9yh3l] {
    background: rgba(49, 221, 227, 0.18);
    border-color: rgba(49, 221, 227, 0.5);
}

.add-to-sparring-btn.is-disabled[b-r2g4w9yh3l],
.add-to-sparring-btn:disabled[b-r2g4w9yh3l] {
    opacity: 0.4;
    cursor: not-allowed;
}

.add-to-sparring-form[b-r2g4w9yh3l] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.add-to-sparring-form .modal-text[b-r2g4w9yh3l] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.add-to-sparring-form .modal-text a[b-r2g4w9yh3l] {
    color: #31DDE3;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.add-to-sparring-form .modal-text a:hover[b-r2g4w9yh3l] {
    text-decoration: underline;
}

.add-to-sparring-form .form-group[b-r2g4w9yh3l] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.add-to-sparring-form .form-label[b-r2g4w9yh3l] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* #7266: fill, border, colour, font, font-size and the focus border
   duplicated the global .form-input in app.css (#7258). What is left is the
   genuine delta - this is a tight inline popover, so the control is smaller
   and squarer than a page form field. */
.add-to-sparring-form .form-input[b-r2g4w9yh3l] {
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}

.source-summary[b-r2g4w9yh3l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.source-summary-label[b-r2g4w9yh3l] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.source-summary-badge[b-r2g4w9yh3l] {
    padding: 0.15rem 0.55rem;
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-error[b-r2g4w9yh3l] {
    color: #f87171;
    font-size: 0.85rem;
    margin: 0;
}
/* /Components/Shared/AnswerResultChip.razor.rz.scp.css */
/* #7190 - icon + word verdict chip for the rapid vision drills. Color
   reinforces; the glyph and the word carry. */
.answer-result-chip[b-h841xmkydu] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
}

.answer-result-chip.correct[b-h841xmkydu] {
    color: var(--ascend-success);
    background: rgba(16, 185, 129, 0.15);
}

.answer-result-chip.wrong[b-h841xmkydu] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.15);
}
/* /Components/Shared/AskCoachButton.razor.rz.scp.css */
/* #8093 ASK-MY-COACH - the "Ask {Coach} next lesson" entry point and its inline panel. */
.ask-coach[b-3g86b6b5xl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    min-width: 0;
}

.ask-coach-panel[b-3g86b6b5xl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.ask-coach-which[b-3g86b6b5xl] {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ask-coach-legend[b-3g86b6b5xl],
.ask-coach-label[b-3g86b6b5xl] {
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ascend-text-light);
}

/* Each coach is a full-width row at least 44px tall, so it can be tapped on a phone. */
.ask-coach-option[b-3g86b6b5xl] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 44px;
    color: var(--ascend-text-light);
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.ask-coach-option input[b-3g86b6b5xl] {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    accent-color: var(--ascend-accent);
}

/* #8633 - what the question is about ("About move 3. Bb5"), on game review only. */
.ask-coach-about[b-3g86b6b5xl] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.ask-coach-input[b-3g86b6b5xl] {
    width: 100%;
    box-sizing: border-box;
    min-height: 4.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: var(--ascend-bg-card);
    color: var(--ascend-text-light);
    font: inherit;
    /* 16px keeps iOS from zooming the page when the field takes focus. */
    font-size: 1rem;
    resize: vertical;
}

.ask-coach-input:focus-visible[b-3g86b6b5xl] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.ask-coach-foot[b-3g86b6b5xl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.ask-coach-count[b-3g86b6b5xl] {
    margin-right: auto;
    font-size: 0.75rem;
    color: var(--ascend-text-muted);
}

.ask-coach-status[b-3g86b6b5xl] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.ask-coach-status-error[b-3g86b6b5xl] {
    color: var(--ascend-error-light);
}

@media (pointer: coarse) {
    .ask-coach[b-3g86b6b5xl]  .ascend-btn {
        min-height: 44px;
    }
}
/* /Components/Shared/AuthMessageCard.razor.rz.scp.css */
/* AuthMessageCard (#8725) - owns every class its markup uses.

   The bug this file closes: the auth-card class names were split across app.css
   (outer chrome) and eight separate page stylesheets (inner layout and colors).
   A page that used the names without writing its own sibling stylesheet got the
   chrome and nothing else - a near-black heading on a near-black card, a status
   icon pinned to the left edge, and the actions row collapsed into the corner.
   Everything below is painted here, so a caller cannot half-inherit it.

   Tokens only - no raw brand hex (ScopedCssBoundaryTests). */

.auth-message-page[b-iv6ipj84qi] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    /* Flat and opaque, like .callback-page (#7543): axe declines to measure text
       under a content-bearing overlay, so the center glow is a layer of the
       page's own background rather than a pseudo-element painted over it. */
    background:
        radial-gradient(circle at 50% 50%, rgba(49, 221, 227, 0.1) 0%, transparent 50%),
        var(--ascend-bg-dark);
}

.auth-message-container[b-iv6ipj84qi] {
    width: 100%;
    max-width: 550px;
}

.auth-message-card[b-iv6ipj84qi] {
    /* Opaque (#7543) - the text inside is measured against this, never through it. */
    background: var(--ascend-bg-dark);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(49, 221, 227, 0.1) inset;
    overflow: hidden;
}

.auth-message-accent[b-iv6ipj84qi] {
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
}

/* One centering container for everything inside the card. The missing
   equivalent of this rule is why the icon and the buttons sat on the left. */
.auth-message-body[b-iv6ipj84qi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem;
}

.auth-message-logo[b-iv6ipj84qi] {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}

.auth-message-brand[b-iv6ipj84qi] {
    font-family: var(--ascend-font-primary);
    font-size: 28px;
    font-weight: 700;
}

.auth-message-icon[b-iv6ipj84qi] {
    width: 80px;
    height: 80px;
    margin: 2rem 0 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.auth-message-icon.tone-neutral[b-iv6ipj84qi] {
    background: rgba(49, 221, 227, 0.1);
    border: 2px solid rgba(49, 221, 227, 0.3);
    color: var(--ascend-accent);
}

.auth-message-icon.tone-error[b-iv6ipj84qi] {
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.3);
    color: var(--ascend-error-light);
}

.auth-message-icon.tone-success[b-iv6ipj84qi] {
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid rgba(16, 185, 129, 0.3);
    color: var(--ascend-success);
}

/* The heading the page used to lose. app.css paints every h1
   --ascend-text-primary, which is the DARK text of the light-surface pair; on
   this dark card that is the same color as the card. Stated explicitly here so
   the card is never at the mercy of a global meant for a light surface. */
.auth-message-heading[b-iv6ipj84qi] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ascend-text-light);
    margin: 0 0 1rem;
}

.auth-message-copy[b-iv6ipj84qi] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ascend-text-secondary);
    margin: 0;
    max-width: 42ch;
}

.auth-message-details[b-iv6ipj84qi] {
    width: 100%;
    margin-top: 1.5rem;
}

.auth-message-actions[b-iv6ipj84qi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
    width: 100%;
}

@media (max-width: 768px) {
    .auth-message-body[b-iv6ipj84qi] {
        padding: 2rem 1.25rem;
    }

    .auth-message-logo[b-iv6ipj84qi] {
        width: 60px;
        height: 60px;
    }

    .auth-message-brand[b-iv6ipj84qi] {
        font-size: 24px;
    }

    .auth-message-heading[b-iv6ipj84qi] {
        font-size: 1.75rem;
    }

    .auth-message-icon[b-iv6ipj84qi] {
        width: 60px;
        height: 60px;
        font-size: 30px;
        margin: 1.5rem 0 1.25rem;
    }
}

/* 344px - the narrowest phone the release walk measures. Buttons stack rather
   than squeezing side by side, so neither label wraps mid-word. */
@media (max-width: 400px) {
    .auth-message-page[b-iv6ipj84qi] {
        padding: 1.5rem 0.75rem;
    }

    .auth-message-body[b-iv6ipj84qi] {
        padding: 1.75rem 1rem;
    }

    .auth-message-actions[b-iv6ipj84qi] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Shared/AutoplayToggle.razor.rz.scp.css */
/* #5970 drill autoplay toggle — on-brand pill, quiet when on, gold when off. */
.autoplay-toggle-btn[b-qqyv5mure6] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--ascend-font-secondary, 'tablet-gothic', sans-serif);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.7);
}

.autoplay-toggle-btn:hover[b-qqyv5mure6] {
    border-color: rgba(49, 221, 227, 0.55);
    color: #ffffff;
}

.autoplay-toggle-btn strong[b-qqyv5mure6] {
    font-weight: 700;
}

/* On = the default flow; keep it cyan/quiet. */
.autoplay-toggle-btn.on[b-qqyv5mure6] {
    color: rgba(255, 255, 255, 0.7);
}

.autoplay-toggle-btn.on[b-qqyv5mure6]  i {
    color: var(--ascend-accent);
}

.autoplay-toggle-btn.on strong[b-qqyv5mure6] {
    color: #31DDE3;
}

/* Off = "study mode" — gold so the user can see they've opted into pausing. */
.autoplay-toggle-btn.off[b-qqyv5mure6] {
    border-color: rgba(184, 133, 54, 0.45);
    background: rgba(184, 133, 54, 0.08);
}

.autoplay-toggle-btn.off[b-qqyv5mure6]  i,
.autoplay-toggle-btn.off strong[b-qqyv5mure6] {
    color: var(--ascend-secondary);
}
/* /Components/Shared/BackSoonCard.razor.rz.scp.css */
/* Issue #8699 - shaped like the hub cards it sits among (.lesson-card on
   Endgames, .pattern-card on the pattern library): same radius, padding and
   header row, so the grid keeps its rhythm. Grayed with the neutral text tokens
   on the dark surface; no opacity on text, no hover lift, no pointer. */
.back-soon-card[b-5z390kijen] {
    display: flex;
    flex-direction: column;
    background: var(--ascend-bg-dark);
    border: 2px dashed rgba(148, 163, 184, 0.35);
    border-radius: 16px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.back-soon-card-header[b-5z390kijen] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.back-soon-kicker[b-5z390kijen] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ascend-text-secondary);
    font-weight: 600;
}

.back-soon-label[b-5z390kijen] {
    margin-left: auto;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--ascend-text-muted);
    background: rgba(148, 163, 184, 0.12);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.back-soon-title[b-5z390kijen] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: var(--ascend-text-muted);
    margin: 0 0 0.35rem;
    font-weight: 600;
}

.back-soon-subline[b-5z390kijen] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: var(--ascend-text-secondary);
    margin: 0;
    line-height: 1.45;
}
/* /Components/Shared/BadgeGallerySection.razor.rz.scp.css */
.badge-gallery-section[b-63ebv8z4fd] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2rem;
    /* Separate from the SkillCheckpoint section that follows on /tracking?tab=progress. */
    margin-bottom: 2rem;
}

/* Two-tone title rendered by the shared Wordmark component (#6356), which
   owns the flush-seam rule. Tracking goes through --wordmark-tracking so the
   component's seam cancel follows it (a razor comment here previously made
   the CSS parser drop the rule after it - #6355; only CSS comments in CSS). */
.badge-section-title[b-63ebv8z4fd] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    --wordmark-tracking: 0.08em;
    margin: 0;
}

.badge-group[b-63ebv8z4fd] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.badge-group-title[b-63ebv8z4fd] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.badge-grid[b-63ebv8z4fd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.625rem;
}

/* ── Tile: per-badge accent driven by inline --badge-color variable ──
   The renderer sets `--badge-color: #XXXXXX` on each tile (from the
   category palette in BadgeDefinitions.ColorForCategory). All visual
   accents below reference that variable, so per-category identity
   surfaces consistently across border, icon circle, and tier glow. */
.badge-tile[b-63ebv8z4fd] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 35%, transparent);
    border-radius: 12px;
    padding: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: help;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    position: relative;
}

.badge-tile:hover[b-63ebv8z4fd] {
    border-color: var(--badge-color, var(--ascend-secondary));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 25%, transparent);
}

/* Icon circle — gradient seeded from --badge-color so each category
   reads at a glance. Replaces the old flat gold-icon-on-dark look. */
.badge-icon-wrap[b-63ebv8z4fd] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* #7905 - the fill stops were 28%/8%. At 28% the circle lifts the surface
       far enough that the icon drawn in the SAME colour measured 3.64:1 against
       it (gold fallback), below AA - and every other category colour sits at or
       under that: indigo 2.87:1, purple 3.18:1, blue 3.29:1, red 3.46:1. The
       stops are now 10%/4%, which puts the gold fallback at 4.86:1 and lifts
       every category by the same amount. Category identity is unchanged: it is
       carried by the 40% border ring and by the icon colour itself, neither of
       which this touches. */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 10%, transparent),
        color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 4%, transparent));
    border: 1px solid color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 40%, transparent);
}

.badge-tile[b-63ebv8z4fd]  .badge-icon {
    color: var(--badge-color, var(--ascend-secondary));
    font-size: 1.4rem;
}

.badge-meta[b-63ebv8z4fd] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.badge-name[b-63ebv8z4fd] {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-date[b-63ebv8z4fd] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
}

/* ── Tier flair ──────────────────────────────────────────────────────
   Foundation: matte, no glow. Achievement: subtle accent border.
   Mastery: animated shimmer pulse on the icon circle. Stretch: stronger
   pulse + a thin outer ring (the "legendary" treatment).
*/

.badge-tile.tier-foundation[b-63ebv8z4fd] {
    /* baseline — no extra flair */
}

.badge-tile.tier-achievement[b-63ebv8z4fd] {
    border-width: 1px;
    border-color: color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 55%, transparent);
}

.badge-tile.tier-mastery .badge-icon-wrap[b-63ebv8z4fd] {
    animation: badge-mastery-shimmer-b-63ebv8z4fd 3.2s ease-in-out infinite;
}

.badge-tile.tier-stretch[b-63ebv8z4fd] {
    border-width: 1.5px;
    border-color: color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 70%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 18%, transparent);
}

.badge-tile.tier-stretch .badge-icon-wrap[b-63ebv8z4fd] {
    animation: badge-stretch-pulse-b-63ebv8z4fd 2.4s ease-in-out infinite;
}

@keyframes badge-mastery-shimmer-b-63ebv8z4fd {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 0%, transparent); }
    50%      { box-shadow: 0 0 12px 1px color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 35%, transparent); }
}

@keyframes badge-stretch-pulse-b-63ebv8z4fd {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 0%, transparent);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 18px 2px color-mix(in srgb, var(--badge-color, var(--ascend-secondary)) 50%, transparent);
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .badge-tile.tier-mastery .badge-icon-wrap[b-63ebv8z4fd],
    .badge-tile.tier-stretch .badge-icon-wrap[b-63ebv8z4fd] {
        animation: none;
    }
}
/* /Components/Shared/BarcodeScanner.razor.rz.scp.css */
.barcode-scanner-modal[b-urv9e54erv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    transition: opacity 0.2s, visibility 0.2s;
}

.barcode-scanner-modal.hidden[b-urv9e54erv] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.barcode-scanner-modal.visible[b-urv9e54erv] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.scanner-container[b-urv9e54erv] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
}

.scanner-header[b-urv9e54erv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem 0.75rem;
}

.scanner-header h3[b-urv9e54erv] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.btn-close[b-urv9e54erv] {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-close:hover[b-urv9e54erv] {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
}

.btn-close[b-urv9e54erv]  i {
    font-size: 16px;
}

/* Tab bar */
.scanner-tabs[b-urv9e54erv] {
    display: flex;
    gap: 0.25rem;
    padding: 0 1.5rem 0.75rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.15);
}

.tab-btn[b-urv9e54erv] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover[b-urv9e54erv] {
    background: rgba(49, 221, 227, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

.tab-btn.active[b-urv9e54erv] {
    background: rgba(49, 221, 227, 0.12);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.tab-btn[b-urv9e54erv]  i {
    font-size: 14px;
}

.scanner-body[b-urv9e54erv] {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* Icon circles */
.icon-circle[b-urv9e54erv] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(184, 133, 54, 0.15));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(49, 221, 227, 0.3);
    margin-bottom: 1rem;
}

.icon-circle[b-urv9e54erv]  i {
    font-size: 32px;
}

.icon-circle.success[b-urv9e54erv] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(16, 185, 129, 0.2));
    border-color: rgba(16, 185, 129, 0.4);
}

/* Instructions */
.scanner-instructions[b-urv9e54erv] {
    text-align: center;
    max-width: 360px;
}

.scanner-instructions h4[b-urv9e54erv] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0.5rem 0;
}

.scanner-instructions p[b-urv9e54erv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

.scanner-instructions .hint[b-urv9e54erv] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.5rem;
}

.permission-notice[b-urv9e54erv] {
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

.permission-text[b-urv9e54erv] {
    font-weight: 600;
    color: var(--ascend-secondary) !important;
    margin: 0 0 0.25rem 0 !important;
    font-size: 0.85rem !important;
}

.permission-hint[b-urv9e54erv] {
    font-size: 0.8rem !important;
    color: rgba(184, 133, 54, 0.7) !important;
    margin: 0 !important;
}

.btn-start-scan[b-urv9e54erv] {
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.btn-start-scan:hover[b-urv9e54erv] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
}

.btn-start-scan[b-urv9e54erv]  i {
    font-size: 16px;
}

/* Manual ISBN Entry & Title Search */
.manual-entry[b-urv9e54erv],
.title-search[b-urv9e54erv] {
    text-align: center;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.entry-label[b-urv9e54erv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1rem;
}

.entry-row[b-urv9e54erv] {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.entry-input[b-urv9e54erv] {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    transition: all 0.2s;
    min-width: 0;
}

.entry-input:focus[b-urv9e54erv] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.entry-input[b-urv9e54erv]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.btn-lookup[b-urv9e54erv] {
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.2);
}

.btn-lookup:hover:not(:disabled)[b-urv9e54erv] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(49, 221, 227, 0.3);
}

.btn-lookup:disabled[b-urv9e54erv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-lookup[b-urv9e54erv]  i {
    font-size: 14px;
}

.hint[b-urv9e54erv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0.25rem 0 0;
}

.no-results[b-urv9e54erv] {
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Search Results */
.search-results[b-urv9e54erv] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.search-result-item[b-urv9e54erv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
    color: inherit;
    font: inherit;
}

.search-result-item:hover[b-urv9e54erv] {
    background: rgba(49, 221, 227, 0.06);
    border-color: rgba(49, 221, 227, 0.3);
}

.result-cover[b-urv9e54erv] {
    width: 40px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.result-cover-placeholder[b-urv9e54erv] {
    width: 40px;
    height: 56px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.result-cover-placeholder[b-urv9e54erv]  i {
    font-size: 20px;
}

.result-info[b-urv9e54erv] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.result-title[b-urv9e54erv] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-author[b-urv9e54erv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-secondary);
}

.result-year[b-urv9e54erv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Video Container */
.video-container[b-urv9e54erv] {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.scanner-overlay[b-urv9e54erv] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scanner-frame[b-urv9e54erv] {
    width: 80%;
    height: 40%;
    border: 3px solid #31DDE3;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 20px rgba(49, 221, 227, 0.3);
}

.scanner-status[b-urv9e54erv] {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    border: 1px solid rgba(49, 221, 227, 0.2);
}

/* Scanner Actions */
.scanner-actions[b-urv9e54erv] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
}

.btn-stop[b-urv9e54erv],
.btn-switch[b-urv9e54erv] {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.btn-stop[b-urv9e54erv] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--ascend-text-light);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-stop:hover[b-urv9e54erv] {
    background: rgba(239, 68, 68, 0.25);
}

.btn-switch[b-urv9e54erv] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-switch:hover:not(:disabled)[b-urv9e54erv] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.btn-switch:disabled[b-urv9e54erv] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Error */
.scanner-error[b-urv9e54erv] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    color: var(--ascend-text-light);
    width: 100%;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.scanner-error[b-urv9e54erv]  i {
    font-size: 16px;
    flex-shrink: 0;
}

.error-instructions[b-urv9e54erv] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.error-instructions p[b-urv9e54erv] {
    margin: 0;
}

.btn-retry[b-urv9e54erv] {
    background: rgba(49, 221, 227, 0.15);
    color: #31DDE3;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-retry:hover[b-urv9e54erv] {
    background: rgba(49, 221, 227, 0.25);
}

/* Result */
.scanner-result[b-urv9e54erv] {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scanner-result h4[b-urv9e54erv] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.75rem 0;
}

.scanner-result .hint[b-urv9e54erv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.5rem 0 1rem;
}

.result-code[b-urv9e54erv] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: #31DDE3;
    margin-bottom: 1rem;
}

/* Book preview */
.book-preview[b-urv9e54erv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    width: 100%;
    text-align: left;
}

.preview-cover[b-urv9e54erv] {
    width: 60px;
    height: auto;
    border-radius: 4px;
    flex-shrink: 0;
}

.preview-info[b-urv9e54erv] {
    min-width: 0;
}

.preview-title[b-urv9e54erv] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.25rem;
}

.preview-author[b-urv9e54erv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-secondary);
}

.preview-year[b-urv9e54erv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.15rem;
}

.result-actions[b-urv9e54erv] {
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.btn-use[b-urv9e54erv],
.btn-scan-again[b-urv9e54erv] {
    flex: 1;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-use[b-urv9e54erv] {
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.3);
}

.btn-use:hover[b-urv9e54erv] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(49, 221, 227, 0.4);
}

.btn-scan-again[b-urv9e54erv] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.btn-scan-again:hover[b-urv9e54erv] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

/* Footer */
.scanner-footer[b-urv9e54erv] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(49, 221, 227, 0.1);
}

.btn-cancel[b-urv9e54erv] {
    flex: 1;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
}

.btn-cancel:hover[b-urv9e54erv] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive */
@media (max-width: 480px) {
    .scanner-container[b-urv9e54erv] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .scanner-tabs[b-urv9e54erv] {
        padding: 0 0.75rem 0.75rem;
        gap: 0.15rem;
    }

    .tab-btn[b-urv9e54erv] {
        padding: 0.4rem 0.25rem;
        font-size: 0.65rem;
        gap: 0.25rem;
    }

    .scanner-actions[b-urv9e54erv],
    .result-actions[b-urv9e54erv],
    .scanner-footer[b-urv9e54erv] {
        flex-direction: column;
    }

    .entry-row[b-urv9e54erv] {
        flex-direction: column;
    }
}


/* #7736 — .btn-close measured 24x24, exactly on the WCAG 2.5.8 line and well
   under a finger. It is already a centered flex box, so only the box grows. */
@media (hover: none) and (pointer: coarse) {
    .btn-close[b-urv9e54erv] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/BetaChip.razor.rz.scp.css */
/* BetaChip (#7036). Deliberately quiet: this is a disclosure a user reads once
   and then works around, not a reward and not an alarm.

   Gold-light on a low-alpha gold ground is the vocabulary this codebase already
   uses for matter-of-fact caution (.wc-confirm-warning on the World Chess
   confirm panel), so the chip reads as the same voice rather than a new one.
   NOT --ascend-warning: amber-on-dark reads as an error state and would tell a
   user something is wrong when nothing is. NOT the accent cyan or a gradient:
   those are interactive and reward affordances here, and a risk disclosure
   dressed as an achievement is the exact misread to avoid.

   Flat, no glow, no gradient, no animation. All translucency is derived from
   the brand tokens with color-mix rather than re-typed hex. */

.beta-chip[b-g7yzgvkmtr] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    background: color-mix(in srgb, var(--ascend-secondary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-secondary) 40%, transparent);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    /* Upright UI chrome, per the judicious-oblique rule - a label, not prose. */
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ascend-secondary-light);
    white-space: nowrap;
    /* The chip answers a question on hover, so say so. */
    cursor: help;
}

/* The disclosure is body prose, so it takes the oblique and the muted weight of
   the help text it sits among - it must not compete with the chip or with the
   control the user came to use. */
.beta-chip-disclosure[b-g7yzgvkmtr] {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-style: italic;
    font-size: 0.72rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--ascend-text-light) 55%, transparent);
}
/* /Components/Shared/BoardFenEditor.razor.rz.scp.css */
.board-fen-editor[b-lzrijntoj9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 22rem;
}

.editor-palette[b-lzrijntoj9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
}

.palette-group[b-lzrijntoj9] {
    display: flex;
    gap: 0.15rem;
}

.piece-tool[b-lzrijntoj9] {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.piece-tool.white[b-lzrijntoj9] {
    color: #ffffff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

/* #8992 fix round 4 - the palette draws SOLID glyphs (PieceChar, U+265A..265F), so the CSS
   color fills the piece. Black's row used to be the page's own dark color with a thin white
   halo, which nearly vanished on every host (all of them are dark pages). Each Black piece now
   sits on a light chip, the pair the light-surface tokens are made for (--ascend-text-primary on
   --ascend-bg-light): a solid dark piece on light, like the board's Black pieces, beside the
   White row's solid white piece on the page. Moved here from EndgameCheckerBoard.razor.css so
   the author hosts (SME position editor, content field editor, admin content edit) get it too. */
.piece-tool.black[b-lzrijntoj9] {
    color: var(--ascend-text-primary);
    background: var(--ascend-bg-light);
    text-shadow: none;
}

.piece-tool.tool[b-lzrijntoj9] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.piece-tool:hover[b-lzrijntoj9] {
    background: rgba(49, 221, 227, 0.12);
    border-color: rgba(49, 221, 227, 0.3);
}

.piece-tool.selected[b-lzrijntoj9] {
    background: rgba(49, 221, 227, 0.2);
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 2px rgba(49, 221, 227, 0.15);
}

/* The light chip keeps its background on hover and when selected (the shared tints above are
   near-transparent and would turn the chip dark); the accent border carries the state. */
.piece-tool.black:hover[b-lzrijntoj9],
.piece-tool.black.selected[b-lzrijntoj9] {
    background: var(--ascend-bg-light);
    border-color: var(--ascend-accent);
}

.side-toggle[b-lzrijntoj9] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.side-btn[b-lzrijntoj9] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.side-btn:hover[b-lzrijntoj9] {
    background: rgba(255, 255, 255, 0.08);
}

.side-btn.active[b-lzrijntoj9] {
    color: var(--ascend-accent);
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.12);
}

.editor-hint[b-lzrijntoj9] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    /* PBI #8377 - 0.45 failed axe color-contrast on the card background
       (found on the /sme/positions walk); 0.65 is the hint alpha that passes. */
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* Bug #8764 - the fields that are not on the board. Deliberately as
   prominent as the palette: they were invisible before, which is why a wrong
   side to move survived two months on prod. 0.65 is the alpha that passes axe
   color-contrast on the card background (same finding as .editor-hint). */
.position-details[b-lzrijntoj9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
}

.details-side-words[b-lzrijntoj9] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ascend-accent);
    margin: 0;
}

.details-fields[b-lzrijntoj9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.details-field[b-lzrijntoj9] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
}

.details-input[b-lzrijntoj9] {
    font-family: var(--font-mono, monospace);
    font-size: 0.74rem;
    width: 5.5rem;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    padding: 0.2rem 0.35rem;
}

.details-input:focus[b-lzrijntoj9] {
    outline: none;
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 2px rgba(49, 221, 227, 0.15);
}

.details-claim[b-lzrijntoj9] {
    align-self: flex-start;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

.details-claim:hover[b-lzrijntoj9] {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--ascend-accent);
}

/* Adversarial review 2026-10-15 - the castling guidance, shown only while that
   field is outstanding. Same 0.65 alpha the hints use (the alpha #8377 found
   passes axe color-contrast on the card background); no wider than the details
   block, so it wraps rather than pushing the layout at phone width. */
.details-note[b-lzrijntoj9] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.details-unresolved[b-lzrijntoj9] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: var(--ascend-warning);
    margin: 0;
}
/* /Components/Shared/BoardPlayerChrome.razor.rz.scp.css */
/* BoardPlayerChrome - a THIN strip. Its entire reason to exist (#7151/#7153)
   is reclaiming the vertical space a page-level identity band spends, so the
   strip stays one short line and never wraps taller: the name truncates with
   an ellipsis rather than pushing the board down (390px phones included). */
.board-player-chrome[b-wo6z4zldki] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.25rem 0.25rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
}

/* #7727 - the disc itself is PlayerColorDot's; this strip only places it. */
[b-wo6z4zldki] .bpc-dot {
    align-self: center;
}

.bpc-name[b-wo6z4zldki] {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ascend-text-light);
    letter-spacing: 0.01em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpc-rating[b-wo6z4zldki] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: var(--ascend-accent);
    flex: 0 0 auto;
}

.bpc-extra[b-wo6z4zldki] {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* #9074 - the side's material surplus next to the name (Lichess layout). Never shrinks or wraps:
   the name truncates first. Sized with the rating so the strip stays one thin line. */
.bpc-material[b-wo6z4zldki] {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: var(--ascend-text-muted);
}
/* /Components/Shared/BoardScanSuggestionList.razor.rz.scp.css */
/* #9418 - the AI-check suggestions after a scan. Shared by the Study Board and PositionSetup. */
.scan-suggestions[b-v0kns334gw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    /* A lighter shade of the board's ring blue (BoardScanSuggestionMarks), visible on the panel. */
    border: 1px solid rgba(96, 165, 250, 0.6);
    border-radius: 8px;
    /* Opaque, so the text's contrast is the same over every host's background, gradients and
       images included, and axe can decide it. */
    background: #1d2126;
    color: var(--ascend-text-light);
    min-width: 0;
}

.scan-suggestions-title[b-v0kns334gw] {
    margin: 0;
    font-weight: 600;
    font-size: var(--text-base);
}

.scan-suggestions-lead[b-v0kns334gw] {
    margin: 0;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
}

.scan-suggestions-list[b-v0kns334gw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.scan-suggestion[b-v0kns334gw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 0;
}

.scan-suggestion:first-child[b-v0kns334gw] {
    border-top: none;
}

/* The shared PieceGlyph fills this tile. */
.scan-suggestion-piece[b-v0kns334gw] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-block;
    border-radius: 6px;
    /* A light board square under the piece art, so both colors read as they do on the board,
       edged in the ring color that marks the square on the board (BoardScanSuggestionMarks). */
    background: #f0d9b5;
    border: 3px solid #1e40af;
    box-sizing: border-box;
    overflow: hidden;
}

.scan-suggestion-text[b-v0kns334gw] {
    flex: 1 1 10rem;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-sm);
    row-gap: 0;
    min-width: 0;
    font-size: var(--text-sm);
}

.scan-suggestion-square[b-v0kns334gw] {
    font-family: var(--font-mono);
}

.scan-suggestion-board[b-v0kns334gw] {
    flex-basis: 100%;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--text-xs);
}

.scan-suggestion-actions[b-v0kns334gw] {
    display: flex;
    gap: var(--space-xs);
    flex: 0 0 auto;
}

/* The shared Button raises itself to --touch-target under a coarse pointer; held here too so the
   two answers stay 44px tall and wide whatever the button's own rules become. */
@media (pointer: coarse) {
    .scan-suggestion-actions[b-v0kns334gw]  .ascend-btn {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
    }
}

.scan-suggestions-done[b-v0kns334gw] {
    margin: 0;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
}
/* /Components/Shared/BookChapterEditor.razor.rz.scp.css */
.book-chapter-editor[b-cw9zvp96ae] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.editor-toolbar[b-cw9zvp96ae] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chapter-edit-list[b-cw9zvp96ae] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chapter-edit-sublist[b-cw9zvp96ae] {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(49, 221, 227, 0.15);
}

.chapter-edit-row[b-cw9zvp96ae] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chapter-edit-main[b-cw9zvp96ae] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
}

.chapter-edit-number[b-cw9zvp96ae] {
    flex-shrink: 0;
    min-width: 2rem;
    font-family: var(--ascend-font-primary);
    color: var(--ascend-accent);
    font-size: 0.9rem;
    text-align: center;
}

.chapter-edit-title[b-cw9zvp96ae] {
    flex: 1;
    color: rgba(255, 255, 255, 0.9);
    overflow-wrap: anywhere;
}

.chapter-edit-input[b-cw9zvp96ae] {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ascend-accent);
    border-radius: 8px;
    color: #ffffff;
    padding: 0.4rem 0.6rem;
    font-family: var(--ascend-font-secondary);
}

.chapter-edit-input:focus[b-cw9zvp96ae] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.15);
}

.chapter-edit-actions[b-cw9zvp96ae] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.chapter-edit-btn[b-cw9zvp96ae] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: all 0.15s ease;
}

.chapter-edit-btn:hover[b-cw9zvp96ae] {
    color: var(--ascend-accent);
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.08);
}

.chapter-edit-btn-danger:hover[b-cw9zvp96ae] {
    color: var(--ascend-text-light);
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}

.editor-scanning[b-cw9zvp96ae] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    color: rgba(255, 255, 255, 0.8);
}

.editor-scanning .spin-icon[b-cw9zvp96ae] {
    font-size: 1.5rem;
    color: var(--ascend-accent);
    animation: bce-spin-b-cw9zvp96ae 1s linear infinite;
}

.editor-error-text[b-cw9zvp96ae] {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

@keyframes bce-spin-b-cw9zvp96ae {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Blazor input styling reaches the bound <select>/<input> in modal content
   via ::deep since those elements are owned by the shared Modal fragment. */
/* #7266: fill, border, radius, colour, padding and the focus ring duplicated
   the global .form-input in app.css (#7258). Only the width is left. */
[b-cw9zvp96ae] .form-input {
    width: 100%;
}
/* /Components/Shared/BookLevelBadge.razor.rz.scp.css */
/* BookLevelBadge (#7786). A difficulty descriptor, not a reward: neutral text
   tokens only - no accent cyan (interactive), no gold (recognition), no
   gradient, no glow. An unconfirmed AI suggestion gets a DASHED border plus the
   word "suggested", so the distinction never rests on color. */

.book-level[b-c4n67lnxt1] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 0.3rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--ascend-text-light) 30%, transparent);
    background: color-mix(in srgb, var(--ascend-text-light) 6%, transparent);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: 0.7rem;
    line-height: 1.4;
    white-space: normal;
    max-width: 100%;
    cursor: help;
}

.book-level.suggested[b-c4n67lnxt1] {
    border-style: dashed;
    background: transparent;
}

/* #8047 - the chip must never be able to lose a word.

   It sits in `.book-badges`, a flex row that is narrower than the chip's own
   text: measured on dev, 159.2px at 1440 and 130px at 344 against a chip whose
   `nowrap` min-content is 163.5px. A flex item defaults to `min-width: auto`,
   so with `nowrap` the chip CANNOT shrink - it just overflows. On a wide card
   the spill lands harmlessly in `.book-info`'s padding, but `.book-card` is
   `overflow-x: hidden`, so on a narrow card it is cut: at 344px 15.5px of the
   word "suggested" disappeared, and at 768px 16px did.

   That is the one word a reader must see - it separates an unconfirmed reading
   from a settled level, and "LEVEL up to 1400" with the qualifier shorn off
   states the opposite of what it means.

   The trigger is the CARD's width, not the viewport's (768px clips while 390px
   does not, because the grid's column count changes), so a viewport media query
   cannot express it and is not used. Instead the chip is simply made capable of
   fitting: `min-width: 0` on the wrapper lets it shrink, `white-space: normal`
   lets it wrap when shrunk, and the wrapper becomes a wrapping flex row so the
   break does not depend on whitespace - Razor trims the whitespace-only nodes
   between the spans (see the margin note below), so there is no text break
   opportunity to rely on.

   The tightened padding above (0.45rem -> 0.3rem) buys the 4.3px that keeps the
   widest variant on ONE line at desktop, where it previously only "fit" by
   overflowing into a neighbor's padding. Verified on dev: 1440px one line,
   card overflow 0; 768px and 344px wrap to two lines, card overflow 0.
   If a future string is wider still, it wraps - it does not truncate. */
.book-level > span[aria-hidden="true"][b-c4n67lnxt1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    min-width: 0;
}

.book-level-label[b-c4n67lnxt1] {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.62rem;
    color: color-mix(in srgb, var(--ascend-text-light) 70%, transparent);
}

/* The label, range and "suggested" spans sit inside the aria-hidden wrapper, so
   `.book-level`'s own `gap` never reaches them - its only in-flow flex child is
   that wrapper (the visually-hidden span is position:absolute). Razor also trims
   the whitespace-only nodes between them, so without an explicit margin the chip
   renders "LEVEL1400-2100". Margins rather than a gap on the wrapper: they hold
   even if the wrapper's display changes. */
.book-level-range[b-c4n67lnxt1] {
    margin-left: 0.3rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.book-level-suggested[b-c4n67lnxt1] {
    margin-left: 0.3rem;
    font-style: italic;
    color: color-mix(in srgb, var(--ascend-text-light) 70%, transparent);
}

.book-level-source[b-c4n67lnxt1] {
    display: inline-block;
    margin-left: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-style: italic;
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--ascend-text-light) 60%, transparent);
}
/* /Components/Shared/BookLevelPanel.razor.rz.scp.css */
/* BookLevelPanel (#7786). Body only - the host page owns the panel chrome. */

.level-body p[b-y1y7ax8x8s] {
    margin: 0 0 0.5rem;
}

.level-empty[b-y1y7ax8x8s],
.level-explain[b-y1y7ax8x8s],
.level-citation[b-y1y7ax8x8s],
.level-status[b-y1y7ax8x8s] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--ascend-text-light) 75%, transparent);
}

.level-citation[b-y1y7ax8x8s] {
    font-style: italic;
    overflow-wrap: anywhere;
}

.level-actions[b-y1y7ax8x8s],
.level-edit[b-y1y7ax8x8s] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.level-field[b-y1y7ax8x8s] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--ascend-text-light) 70%, transparent);
}

.level-field input[b-y1y7ax8x8s] {
    width: 6.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--ascend-text-light) 25%, transparent);
    background: color-mix(in srgb, var(--ascend-text-light) 4%, transparent);
    color: var(--ascend-text-light);
    font-size: 0.9rem;
}
/* /Components/Shared/BookMediumPicker.razor.rz.scp.css */
/* #9069 - segmented "Your copy" picker, styled like the wizard's status options. */
.medium-picker[b-ma7dfnuqc3] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.medium-picker-legend[b-ma7dfnuqc3] {
    display: block;
    padding: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* In the book editor the neighbors are .form-label (BookDetail.razor.css); match them. */
.form-label-style .medium-picker-legend[b-ma7dfnuqc3] {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.medium-options[b-ma7dfnuqc3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.medium-option[b-ma7dfnuqc3] {
    position: relative;
    flex: 1 1 0;
    /* Three across down to a 344px phone inside the wizard (about 224px of content). */
    min-width: 4rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.medium-option:hover[b-ma7dfnuqc3] {
    background: rgba(49, 221, 227, 0.06);
    border-color: rgba(49, 221, 227, 0.25);
    color: #ffffff;
}

.medium-option.selected[b-ma7dfnuqc3] {
    background: rgba(49, 221, 227, 0.12);
    border-color: var(--ascend-accent);
    color: #ffffff;
}

/* The radio stays in the accessibility tree and keyboard order; only its dot is hidden. */
.medium-radio[b-ma7dfnuqc3] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.medium-option:has(.medium-radio:focus-visible)[b-ma7dfnuqc3] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}
/* /Components/Shared/BookWizard.razor.rz.scp.css */
.wizard-overlay[b-8ifeseicrw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.wizard-card[b-8ifeseicrw] {
    width: min(560px, 95vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.6), 0 0 40px rgba(49, 221, 227, 0.1);
    overflow: hidden;
}

/* Step Progress */
.wizard-progress[b-8ifeseicrw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.25rem 2rem 0;
}

.step-indicator[b-8ifeseicrw] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ascend-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
}

.step-indicator.active[b-8ifeseicrw] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.2), rgba(184, 133, 54, 0.15));
    color: var(--ascend-accent);
    border-color: rgba(49, 221, 227, 0.4);
}

.step-line[b-8ifeseicrw] {
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.3s;
}

.step-line.active[b-8ifeseicrw] {
    background: linear-gradient(90deg, var(--ascend-accent), var(--ascend-secondary));
}

/* Header */
.wizard-header[b-8ifeseicrw] {
    padding: 1.25rem 2rem 0;
}

.wizard-title[b-8ifeseicrw] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.25rem;
}

.wizard-subtitle[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.825rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* #6991 - the bring-your-own-book register. Sits under the subtitle as a quiet
   statement of fact, not a disclaimer: same size, a touch of the accent on the
   left edge so it reads as ours rather than as fine print. */
.wizard-own-copy[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.825rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.6rem 0 0;
    padding-left: 0.625rem;
    border-left: 2px solid var(--ascend-accent);
}

/* Body */
.wizard-body[b-8ifeseicrw] {
    flex: 1;
    padding: 1.25rem 2rem;
    overflow-y: auto;
}

/* Footer */
.wizard-footer[b-8ifeseicrw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-right[b-8ifeseicrw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-skip[b-8ifeseicrw] {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-skip:hover[b-8ifeseicrw] {
    color: rgba(255, 255, 255, 0.7);
}

/* Step 1: Book Identification */
.book-preview[b-8ifeseicrw] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(184, 133, 54, 0.06);
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 12px;
    position: relative;
}

.book-cover[b-8ifeseicrw] {
    width: 80px;
    height: 110px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.book-info[b-8ifeseicrw] {
    flex: 1;
    min-width: 0;
}

.book-title[b-8ifeseicrw] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.25rem;
}

.book-author[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-secondary);
    margin-bottom: 0.25rem;
}

.book-publisher[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.book-clear[b-8ifeseicrw] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.book-clear:hover[b-8ifeseicrw] {
    opacity: 1;
}

.book-actions[b-8ifeseicrw] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.book-action-btn[b-8ifeseicrw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 2rem;
    background: rgba(49, 221, 227, 0.04);
    border: 1px dashed rgba(49, 221, 227, 0.25);
    border-radius: 16px;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: all 0.2s;
    width: 100%;
}

.book-action-btn:hover[b-8ifeseicrw] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.4);
}

.book-action-btn span[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.manual-entry[b-8ifeseicrw] {
    margin-top: 1rem;
}

/* Bug #7002 - step-1 title search: input + its own Search action on one row,
   so the field reads as a lookup instead of silent manual entry. */
.book-search[b-8ifeseicrw] {
    margin-bottom: 1.25rem;
}

/* #9254 - the ISBN kept with "Use ISBN" after a Google Books miss. The tint sits on
   the row and the text colors on the spans, so no rule pairs a color with a
   background. */
.scanned-isbn[b-8ifeseicrw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    background: rgba(184, 133, 54, 0.06);
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 8px;
}

.scanned-isbn-label[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* #9278 - an ISBN reads as one token: it never breaks at a hyphen (at 344 px the last digit
   used to land alone on a second line). When the row is too narrow the chip wraps as a whole
   instead (flex-wrap above, and no shrinking below the ISBN's own width). */
.scanned-isbn-code[b-8ifeseicrw] {
    flex: 1 0 auto;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
}

/* #9278 - on a phone the full row (icon, label, ISBN, remove) needs about 250px and the chip
   has about 220 at 344 (one row still fits at 390). Rather than let the remove button fall alone onto a second line, the
   narrow layout is two deliberate rows: "ISBN" with the remove button on the right, then the
   ISBN on its own line. The barcode icon is decorative and is dropped. */
@media (max-width: 380px) {
    .scanned-isbn > .bi-upc-scan[b-8ifeseicrw] {
        display: none;
    }

    .scanned-isbn-code[b-8ifeseicrw] {
        order: 3;
        flex-basis: 100%;
    }

    .scanned-isbn-clear[b-8ifeseicrw] {
        margin-left: auto;
    }
}

.scanned-isbn-clear[b-8ifeseicrw] {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.entry-row[b-8ifeseicrw] {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.entry-row .entry-input[b-8ifeseicrw] {
    flex: 1;
    min-width: 0;
}

.btn-title-search[b-8ifeseicrw] {
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-bg-dark);
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.2);
}

.btn-title-search:hover:not(:disabled)[b-8ifeseicrw] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(49, 221, 227, 0.3);
}

.btn-title-search:disabled[b-8ifeseicrw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-title-search[b-8ifeseicrw]  i {
    font-size: 14px;
}

.field-label[b-8ifeseicrw] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-charcount[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
    margin-top: 0.25rem;
}

.entry-input[b-8ifeseicrw] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    transition: all 0.2s;
    box-sizing: border-box;
    resize: vertical;
}

.entry-input:focus[b-8ifeseicrw] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

[b-8ifeseicrw] .entry-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Book Search Results */
.book-results[b-8ifeseicrw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.book-result-card[b-8ifeseicrw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    color: inherit;
    font: inherit;
    width: 100%;
}

.book-result-card:hover[b-8ifeseicrw] {
    background: rgba(49, 221, 227, 0.06);
    border-color: rgba(49, 221, 227, 0.35);
}

.book-result-cover[b-8ifeseicrw] {
    width: 48px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.book-result-cover-placeholder[b-8ifeseicrw] {
    width: 48px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    flex-shrink: 0;
}

.book-result-info[b-8ifeseicrw] {
    flex: 1;
    min-width: 0;
}

.book-result-title[b-8ifeseicrw] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.15rem;
}

.book-result-author[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-secondary);
    margin-bottom: 0.1rem;
}

.book-result-publisher[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
}

.no-results-text[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    padding: 1.5rem 0;
}

/* #6989 - upstream search outage. Reads a shade brighter than .no-results-text
   because it is a state the user should notice and retry, not a dead end. */
.search-unavailable-text[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 1.5rem 0;
}

/* Step 2: Classification */
.classify-grid[b-8ifeseicrw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.classify-card[b-8ifeseicrw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    color: inherit;
    font: inherit;
}

.classify-card:hover[b-8ifeseicrw] {
    background: rgba(49, 221, 227, 0.04);
    border-color: rgba(49, 221, 227, 0.25);
}

.classify-card.selected[b-8ifeseicrw] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.45);
}

.classify-icon[b-8ifeseicrw] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(49, 221, 227, 0.08);
    border-radius: 12px;
    flex-shrink: 0;
}

.classify-card.selected .classify-icon[b-8ifeseicrw] {
    background: rgba(49, 221, 227, 0.15);
}

.classify-title[b-8ifeseicrw] {
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.15rem;
}

.classify-desc[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

/* Reading-status picker — three pills (Library / Wishlist / Ordered)
   shown in BookOnly Step 2 to fold the old "Find a Book" quick-add
   modal into the wizard. */
.status-picker[b-8ifeseicrw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-options[b-8ifeseicrw] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.status-option[b-8ifeseicrw] {
    flex: 1 1 0;
    min-width: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.status-option:hover[b-8ifeseicrw] {
    background: rgba(49, 221, 227, 0.06);
    border-color: rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.95);
}

.status-option.selected[b-8ifeseicrw] {
    background: rgba(49, 221, 227, 0.12);
    border-color: var(--ascend-accent);
    color: #ffffff;
}

.status-option[b-8ifeseicrw]  i {
    color: rgba(49, 221, 227, 0.85);
}

/* Also Create Study Toggle */
.also-study-toggle[b-8ifeseicrw] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(49, 221, 227, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
}

.toggle-label[b-8ifeseicrw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.toggle-label input[type="checkbox"][b-8ifeseicrw] {
    width: 18px;
    height: 18px;
    accent-color: #31DDE3;
    cursor: pointer;
}

/* Step 3: TOC */
.toc-preview[b-8ifeseicrw] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    overflow: hidden;
}

.toc-header[b-8ifeseicrw] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.toc-count[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-accent);
}

.toc-list[b-8ifeseicrw] {
    max-height: 250px;
    overflow-y: auto;
}

.toc-item[b-8ifeseicrw] {
    padding: 0.5rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.toc-item:last-child[b-8ifeseicrw] {
    border-bottom: none;
}

.toc-item-row[b-8ifeseicrw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.toc-item-row:last-child[b-8ifeseicrw] {
    border-bottom: none;
}

.toc-item-title[b-8ifeseicrw] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-8ifeseicrw] .toc-theme-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.2rem 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    width: 95px;
    flex-shrink: 0;
}

[b-8ifeseicrw] .toc-theme-select option {
    background: #0f172a;
    color: #ffffff;
}

.toc-actions[b-8ifeseicrw] {
    display: flex;
    justify-content: center;
}

/* TOC Searching */
.toc-searching[b-8ifeseicrw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
}

.toc-searching-spinner[b-8ifeseicrw] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(49, 221, 227, 0.2);
    border-top-color: #31DDE3;
    border-radius: 50%;
    animation: toc-spin-b-8ifeseicrw 1s linear infinite;
}

@keyframes toc-spin-b-8ifeseicrw {
    to { transform: rotate(360deg); }
}

.toc-searching-text[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* TOC Source Badge */
.toc-source-badge[b-8ifeseicrw] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    margin-left: 0.5rem;
}

/* TOC Edit Actions */
.toc-edit-actions[b-8ifeseicrw] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/* #6946 - a `.toc-edit-btn { padding/font-size/gap }` rule stood here and never
   applied (the class rides on a child <Button>). Rather than ::deep-ing a
   hand-rolled shrink, the button now asks for Size="ButtonSize.Small", which is
   the shared Button's own API for exactly this and keeps the small-button
   metrics owned by Button.razor.css instead of drifting per page. */

/* TOC Search Error */
.toc-search-error[b-8ifeseicrw] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin-bottom: 1rem;
}

/* Find Cover Prompt */
.find-cover-prompt[b-8ifeseicrw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-secondary);
}

.find-cover-link[b-8ifeseicrw] {
    background: none;
    border: none;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.find-cover-link:hover[b-8ifeseicrw] {
    color: #42e8ed;
}

/* Blank-study cover upload (step 2, Study mode, no _bookDetails) */
.blank-cover-upload[b-8ifeseicrw] {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.blank-cover-row[b-8ifeseicrw] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.blank-cover-preview[b-8ifeseicrw] {
    width: 4rem;
    height: 5.5rem;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.blank-cover-preview.blank-cover-empty[b-8ifeseicrw] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: 1.4rem;
    border-style: dashed;
}

.blank-cover-controls[b-8ifeseicrw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.blank-cover-controls .upload-btn[b-8ifeseicrw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.blank-cover-controls .upload-btn:hover[b-8ifeseicrw] {
    background: rgba(49, 221, 227, 0.14);
    border-color: rgba(49, 221, 227, 0.5);
}

.blank-cover-error[b-8ifeseicrw] {
    margin: 0.5rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: #ef4444;
}

/* /Components/Shared/BringToCoachButton.razor.rz.scp.css */
/* #8095 - the pair's own wrapping row. Side by side where both fit; stacked, each on
   one line, where they do not (phone width). inline-flex so a host that lays the
   launcher out inline keeps doing so; min-width 0 so a flex host can shrink the row
   and make it wrap instead of crushing the two labels. */
.two-coaches[b-qw32yd921g] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    min-width: 0;
    max-width: 100%;
}

/* #8844 - when the pair wraps (a phone, or a narrow host), each button grows to fill
   its line, so the two stacked buttons share ONE width: the row's. Without this, "Bring
   this to {coach}" (273px) sat over "Ask your AI coach about ..." (261 to 296px) on the
   hubs at 344 and 390. On one line the row is only as wide as its content (inline-flex,
   shrink to fit), so nothing grows and the pair is unchanged where it fits. Not the
   shared .action-row: that row is width 100% and right-aligned, and this pair must keep
   its host's alignment (centered on the hubs, start on the cards, end on the offer).
   ::deep because both buttons are rendered by the Button component. */
.two-coaches[b-qw32yd921g]  .ascend-btn {
    flex: 1 1 auto;
}

/* The test hook is not a box: the human coach's button is a direct child of the row. */
.bring-to-coach[b-qw32yd921g] {
    display: contents;
}

/* #8862 - the new message "Bring this to {Coach}" opens. One column at every width; every
   tap target is at least 44px tall. */
.btc[b-qw32yd921g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    min-width: 0;
}

.btc-label[b-qw32yd921g] {
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ascend-text-light);
}

.btc-which[b-qw32yd921g] {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    min-width: 0;
}

.btc-option[b-qw32yd921g] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: var(--ascend-bg-card);
    color: var(--ascend-text-light);
    font: inherit;
    font-size: 0.9375rem;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.btc-option:hover[b-qw32yd921g],
.btc-option:focus-visible[b-qw32yd921g] {
    border-color: var(--ascend-accent);
}

.btc-attached[b-qw32yd921g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.btc-attached-head[b-qw32yd921g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
}

.btc-anchor[b-qw32yd921g] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.btc-input[b-qw32yd921g] {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: var(--ascend-bg-card);
    color: var(--ascend-text-light);
    font: inherit;
    /* 16px keeps iOS from zooming the page when the field takes focus. */
    font-size: 1rem;
}

.btc-message[b-qw32yd921g] {
    min-height: 6rem;
    resize: vertical;
}

.btc-sent[b-qw32yd921g],
.btc-error[b-qw32yd921g] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--ascend-text-light);
}

.btc-error[b-qw32yd921g] {
    color: var(--ascend-error-light);
}

/* The footer is the shared .action-row (wwwroot/app.css): a full-width column on a
   phone, a right-aligned row above 480px. Only the tap height is added here. */
.btc-foot[b-qw32yd921g]  .ascend-btn {
    min-height: 44px;
}
/* /Components/Shared/BroadcastCreditLine.razor.rz.scp.css */
/* #9266 - the credit under a broadcast game. A small upright label, like the Wikibooks credit
   (#8368): the links take the label's color and are told apart by their underline, and a link
   wraps as a whole so "CC BY-SA 4.0" never breaks at its hyphen. Upright even inside an italic
   host (the session banner and the coach card set italic), so it reads as a label. */
.broadcast-credit[b-67go4xjn18] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ascend-text-muted);
    overflow-wrap: anywhere;
}

.broadcast-credit-link[b-67go4xjn18] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    white-space: nowrap;
}

.broadcast-credit-link:hover[b-67go4xjn18],
.broadcast-credit-link:focus-visible[b-67go4xjn18] {
    color: var(--ascend-accent);
}

.broadcast-credit-link:focus-visible[b-67go4xjn18] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* A finger needs 44px, wherever the pointer is coarse or the screen is phone-sized; a mouse row
   is unchanged. The line gives some of that height back by overlapping its own padding, never
   another control. */
@media (max-width: 768px), (pointer: coarse) {
    .broadcast-credit-link[b-67go4xjn18] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
    }
}
/* /Components/Shared/Button.razor.rz.scp.css */
/* Professional Button Component - AscendChess Dark Theme */

.ascend-btn[b-kwpybbng84] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* #9192 - a PILL needs more horizontal padding than its cap radius, or the curved
       end eats the breathing room and the label reads as jammed against it (owner,
       2026-10-28: "cramped within the pill", worst on "Send to my coach" with its
       icon). Each size's padding is its cap radius (half its height: 2 x vertical
       padding + 1.5 x font-size) plus a deliberate ~0.5rem gap, so it is NOT a round
       number to tidy back. Base: height ~2.66rem, cap ~1.33rem -> 1.875rem. */
    padding: 0.625rem 1.875rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.ascend-btn:hover:not(.disabled)[b-kwpybbng84] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15), 0 2px 4px -1px rgb(0 0 0 / 0.1);
}

.ascend-btn:active:not(.disabled)[b-kwpybbng84] {
    transform: scale(0.98) translateY(0);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.ascend-btn:focus-visible[b-kwpybbng84] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.ascend-btn.disabled[b-kwpybbng84] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* #7543 - every filled variant below is a FLAT token colour. They were
   two-stop gradients between a colour and its own light/dark shade, and
   axe-core cannot measure text over any gradient, so every filled button in
   the app was 'undecidable' for contrast (Bug #7543, register #7312). The
   hover state now takes the shade the far gradient stop used to carry. */

/* Variant: Primary (Cyan - main CTA) */
.btn-primary[b-kwpybbng84] {
    background: var(--ascend-accent);
    color: var(--ascend-primary);
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.btn-primary:hover:not(.disabled)[b-kwpybbng84] {
    background: var(--ascend-accent-light);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
}

/* Variant: Secondary (Ghost/Glass style) */
.btn-secondary[b-kwpybbng84] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

.btn-secondary:hover:not(.disabled)[b-kwpybbng84] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Variant: Accent (Navy/Gold - rare emphasis) */
.btn-accent[b-kwpybbng84] {
    background: var(--ascend-secondary);
    color: var(--ascend-primary);
}

.btn-accent:hover:not(.disabled)[b-kwpybbng84] {
    background: var(--ascend-secondary-light);
    box-shadow: 0 6px 20px rgba(184, 133, 54, 0.3);
}

/* Variant: Success */
.btn-success[b-kwpybbng84] {
    background: var(--ascend-success);
    color: var(--ascend-primary-dark);
}

.btn-success:hover:not(.disabled)[b-kwpybbng84] {
    background: var(--ascend-success-dark);
}

/* Variant: Danger */
.btn-danger[b-kwpybbng84] {
    /* #7543 - the darker red is the resting shade: white on --ascend-error
       measured 3.76:1 once the button was flat, under the 4.5:1 AA floor. */
    background: var(--ascend-error-dark);
    color: var(--ascend-text-light);
}

.btn-danger:hover:not(.disabled)[b-kwpybbng84] {
    background: var(--ascend-error);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

/* Variant: Warning */
.btn-warning[b-kwpybbng84] {
    background: var(--ascend-warning);
    color: var(--ascend-primary);
}

.btn-warning:hover:not(.disabled)[b-kwpybbng84] {
    background: var(--ascend-warning-dark);
}

/* Variant: Outline */
.btn-outline[b-kwpybbng84] {
    background: transparent;
    border: 2px solid rgba(49, 221, 227, 0.4);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: none;
}

.btn-outline:hover:not(.disabled)[b-kwpybbng84] {
    border-color: var(--ascend-accent);
    color: white;
    background: rgba(49, 221, 227, 0.1);
}

/* Variant: Ghost */
.btn-ghost[b-kwpybbng84] {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

.btn-ghost:hover:not(.disabled)[b-kwpybbng84] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Sizes */
.btn-sm[b-kwpybbng84] {
    /* #9192: height ~2.22rem, cap ~1.11rem, +0.5rem gap. */
    padding: 0.5rem 1.625rem;
    font-size: 0.8125rem;
}

.btn-lg[b-kwpybbng84] {
    /* #9192: height ~3.25rem, cap ~1.63rem, +0.5rem gap. */
    padding: 0.875rem 2.125rem;
    font-size: 1rem;
}

/* Full Width */
.full-width[b-kwpybbng84] {
    width: 100%;
    margin-top: 1rem;
}

/* Icon Styling */
.ascend-btn i[b-kwpybbng84] {
    font-size: 1.1em;
    line-height: 1;
    width: 1.1em;
    height: 1.1em;
}

.btn-sm i[b-kwpybbng84] {
    width: 14px;
    height: 14px;
}

/* --- Mobile legibility + touch targets -------------------------------------
   This component had NO media query at all: every button rendered at its desktop
   size on a phone. .btn-sm at 0.8125rem is ~13px, which the owner reported as
   buttons being "incredibly small and you can't read the text" (2026-07-26), and
   it is well under the 44px touch target the accessibility work targets
   (WCAG 2.2 AA, Feature #6292).

   Sizes go UP on small screens rather than down - a phone has less room but a
   blunter pointer, so the constraint is the finger, not the pixels. min-height
   is what guarantees the target; the font-size bump is what makes the label
   readable. rem throughout - NEVER hardcoded px - so the whole control scales
   with the user's own text-size setting instead of pinning them to ours.
   2.75rem == the 44px touch target at default root size.                        */
@media (max-width: 768px) {
    .ascend-btn[b-kwpybbng84] {
        font-size: 1rem;
        min-height: 2.75rem;
        /* #9192: a phone keeps a smaller ~0.25rem gap than desktop, because width is
           scarce and nowrap labels must still fit their card - but it no longer drops
           BELOW the cap radius (~1.44rem here), which is what made it tightest of all. */
        padding: 0.6875rem 1.6875rem;
    }

    .btn-sm[b-kwpybbng84] {
        font-size: 0.9375rem;
        min-height: 2.5rem;
        /* #9192: cap ~1.25rem (min-height 2.5rem), +0.25rem. */
        padding: 0.5rem 1.5rem;
    }

    .btn-lg[b-kwpybbng84] {
        font-size: 1.0625rem;
        min-height: 3rem;
        /* #9192: cap ~1.66rem, +0.25rem. */
        padding: 0.875rem 1.9375rem;
    }

    /* Long labels must shrink the button, never overflow the card it sits in
       (this is what sliced "Open book" to "pen b" in the games list).

       #7757 - and having shrunk it, the label must be allowed to take a second
       line. The base rule is white-space: nowrap over overflow: hidden, so a
       capped button does not overflow visibly, it CLIPS - silently, and because
       the content is centered it clips the leading icon as well as the trailing
       text. Measured on the repertoire settings modal at 344px: "Find
       below-threshold branches" wanted 250px of label inside a 225px box and
       rendered as "Find below-threshold branche" with half a scissors glyph.
       Wrapping is what makes the cap honest. */
    .ascend-btn[b-kwpybbng84] {
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
        text-align: center;
    }
}

/* #6681 - the block above is a VIEWPORT query, and that is not the same
   question as "is this a finger". Measured in Chromium with a coarse pointer:
     390x844 portrait  -> .ascend-btn 46px, .btn-sm 41px  (block applies)
     1024x1366 tablet  -> .ascend-btn 43px, .btn-sm 38px @ 13px text (MISSES)
   The same phone turned LANDSCAPE is 844px wide, so it misses there too - which
   is the most likely reading of the owner's "buttons are incredibly small and
   you can't read the text" (2026-07-26), since the 2026-07-26 fix demonstrably
   does not reach either device. Pointer media is the honest test: it is true on
   every touch device at every width, and false for every mouse, so this cannot
   regress desktop. --touch-target (2.75rem = 44px) is the iOS HIG minimum and
   WCAG 2.5.5; .btn-sm gets it too - 2.5rem was already under the line. */
@media (hover: none) and (pointer: coarse) {
    /* #7757 - white-space/overflow-wrap/text-align travel with max-width for
       the reason spelled out in the 768px block above: a width cap without a
       wrap is a silent truncation, and this query reaches devices that one
       misses (a coarse pointer at 1024px, a phone in landscape at 844px). */
    .ascend-btn[b-kwpybbng84],
    .btn-sm[b-kwpybbng84],
    .btn-lg[b-kwpybbng84] {
        min-height: var(--touch-target);
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
        text-align: center;
    }

    .ascend-btn[b-kwpybbng84] {
        font-size: 1rem;
        /* #9192: same as the 768px block - cap radius plus ~0.25rem. */
        padding: 0.6875rem 1.6875rem;
    }

    .btn-sm[b-kwpybbng84] {
        font-size: 0.9375rem;
        padding: 0.5rem 1.5rem;
    }

    .btn-lg[b-kwpybbng84] {
        font-size: 1.0625rem;
        min-height: 3rem;
        padding: 0.875rem 1.9375rem;
    }
}
/* /Components/Shared/CameraCaptureModal.razor.rz.scp.css */
/* In-browser Camera Viewfinder — fullscreen mobile camera UX. The <video>
   fills the entire viewport with object-fit: cover; action buttons float on
   top in a translucent bottom bar so the user uses the full screen for
   framing. dvh/dvw so the action bar lands above the browser address bar
   and Android nav, not behind them. */
.camera-viewfinder-overlay[b-wjxnjz12ue] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background: #000;
    z-index: 9999;
    overflow: hidden;
}

.camera-viewfinder-content[b-wjxnjz12ue] {
    position: relative;
    width: 100%;
    height: 100%;
}

.camera-viewfinder-video[b-wjxnjz12ue] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    display: block;
}

.camera-viewfinder-actions[b-wjxnjz12ue] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.camera-capture-btn[b-wjxnjz12ue] {
    min-width: 200px;
    padding: 0.85rem 1.5rem;
    border-radius: 50px;
    border: none;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: var(--ascend-primary);
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.45);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.camera-capture-btn:not(:disabled):active[b-wjxnjz12ue] {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(49, 221, 227, 0.5);
}

.camera-capture-btn:disabled[b-wjxnjz12ue] {
    opacity: 0.55;
    cursor: not-allowed;
}

.camera-capture-btn[b-wjxnjz12ue]  i {
    font-size: 16px;
}

.camera-cancel-btn[b-wjxnjz12ue] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 50px;
    padding: 0.55rem 1.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.camera-cancel-btn:active[b-wjxnjz12ue] {
    background: rgba(255, 255, 255, 0.1);
}

.camera-error-banner[b-wjxnjz12ue] {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top, 0));
    left: 0.75rem;
    right: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: rgba(239, 68, 68, 0.92);
    color: #fff;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-align: center;
}

/* #6404 - touch pass. This viewfinder is only ever reached from "Scan Board
   Photo", so it is always driven by a finger, and the #6716 pass reached the
   corner editor next door but never this file. Computed from its own box:
   Capture is 0.85rem padding + 1rem type = about 46px and already clears the
   floor; CANCEL is 0.55rem padding + 0.85rem type + 1px border = about 36px,
   under the 44px minimum at every viewport, phone included, because nothing
   here is viewport- or pointer-conditional. Keyed on the pointer so the mouse
   case is unchanged. */
@media (hover: none) and (pointer: coarse) {
    .camera-capture-btn[b-wjxnjz12ue],
    .camera-cancel-btn[b-wjxnjz12ue] {
        min-height: var(--touch-target);
    }

    .camera-cancel-btn[b-wjxnjz12ue] {
        padding: 0.55rem 1.75rem;
        font-size: 0.95rem;
    }
}

/* #9208 - the live board lock. The overlay canvas sits exactly over the video's box (the region
   the capture takes) and never takes a touch: the buttons below stay reachable. The status line
   names what to change; it sits at the top, clear of the hand holding the phone. The lock green
   is one custom property, read by the JS for the quad and used here for the status line, so the
   two agree; the tracking amber is the quad's alone (the line stays dark until the lock). */
.camera-viewfinder-content[b-wjxnjz12ue] {
    --lock-tracking: var(--ascend-warning, #f59e0b);
    --lock-locked: var(--ascend-success, #22c55e);
}

.camera-lock-overlay[b-wjxnjz12ue] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.camera-lock-status[b-wjxnjz12ue] {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top, 0));
    left: 0.75rem;
    right: 0.75rem;
    padding: 0.6rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    text-align: center;
    pointer-events: none;
}

.camera-lock-status.locked[b-wjxnjz12ue] {
    background: var(--lock-locked);
    color: #04210f;
}

.camera-lock-stuck[b-wjxnjz12ue] {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* #9023 - the "choose a photo" fallback: a quiet secondary action under the shutter row. The
   input is visually hidden; the label is the tap target (44px tall). */
.camera-file-pick[b-wjxnjz12ue] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    color: var(--ascend-text-light);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.camera-file-pick:focus-within[b-wjxnjz12ue] {
    outline: 2px solid var(--ascend-secondary-light);
    outline-offset: 2px;
}

.camera-file-input[b-wjxnjz12ue] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
/* /Components/Shared/CancelReasonQuestion.razor.rz.scp.css */
/* PBI #8425 - the optional cancel-reason question inside the shared ConfirmDialog.
   Sits between the dialog's message and its buttons, left-aligned like the
   dialog's own #6949 reason field, and quiet: it must read as optional. */
.cancel-reason[b-u6ns7aht3p] {
    margin: 0 0 1.5rem 0;
    text-align: left;
}

.cancel-reason-label[b-u6ns7aht3p] {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ascend-text-light);
}

.cancel-reason-hint[b-u6ns7aht3p] {
    margin: 0 0 0.5rem 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--ascend-text-secondary);
}

/* background-COLOR, never the background shorthand: the global select rule in
   wwwroot/app.css draws the dropdown chevron as a background-image, and the
   shorthand would reset it to none (appearance is none, so the browser draws no
   arrow either). The right padding is the room that chevron sits in. Enforced by
   SelectChevronRatchetTests. */
.cancel-reason-select[b-u6ns7aht3p] {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0.875rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0.5rem 2.25rem 0.5rem 0.875rem;
    cursor: pointer;
}

.cancel-reason-select option[b-u6ns7aht3p] {
    background: var(--ascend-bg-dark);
    color: var(--ascend-text-light);
}

.cancel-reason-select:focus[b-u6ns7aht3p] {
    outline: none;
    border-color: var(--ascend-accent);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.cancel-reason-note-label[b-u6ns7aht3p] {
    display: block;
    margin-bottom: 0.375rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-secondary);
}

.cancel-reason-note[b-u6ns7aht3p] {
    box-sizing: border-box;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0.5rem 0.875rem;
}

.cancel-reason-note:focus[b-u6ns7aht3p] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

/* Touch floor (#6681 / #7736 / #7783). These controls render only inside the
   cancel dialog, only for a member with a live paid subscription, and only while
   the cancel-reason-question flag is on - CI's account is none of those, so the
   live touch-target ratchet cannot measure them. Both are full-width and
   stacked, with no neighbor beside them. */
@media (hover: none) and (pointer: coarse) {
    .cancel-reason-select[b-u6ns7aht3p] {
        min-height: var(--touch-target);
    }

    .cancel-reason-note[b-u6ns7aht3p] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/CandidatePlanDifferenceList.razor.rz.scp.css */
/* #8429 - the Candidate difference. Tokens only; a calm bordered panel, no
   celebration styling. Stacks label over value so it reads at 344px inside a
   pricing card as well as on the billing page. */

.candidate-diff[b-7i2g1i33y5] {
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-sm) 0 var(--space-md);
    text-align: left;
}

.candidate-diff-title[b-7i2g1i33y5] {
    font-family: var(--ascend-font-primary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ascend-accent);
    margin: 0 0 var(--space-xs);
}

.candidate-diff-list[b-7i2g1i33y5] {
    margin: 0;
}

.candidate-diff-row[b-7i2g1i33y5] {
    padding: var(--space-xs) 0;
}

.candidate-diff-row + .candidate-diff-row[b-7i2g1i33y5] {
    border-top: 1px solid color-mix(in srgb, var(--ascend-text-light) 10%, transparent);
}

.candidate-diff-row dt[b-7i2g1i33y5] {
    font-family: var(--ascend-font-secondary);
    font-size: var(--text-sm);
    color: var(--ascend-text-muted);
    margin: 0;
}

.candidate-diff-row dd[b-7i2g1i33y5] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-sm);
}

.candidate-diff-value[b-7i2g1i33y5] {
    font-family: var(--ascend-font-secondary);
    font-size: var(--text-base);
    color: var(--ascend-text-light);
}

.candidate-diff-compare[b-7i2g1i33y5] {
    font-family: var(--ascend-font-secondary);
    font-size: var(--text-sm);
    color: var(--ascend-text-muted);
}

/* Keep a model name on one line ("Claude Sonnet 5" must not orphan its "5");
   the break, when one is needed, falls after "Apprentice:". */
.candidate-diff-name[b-7i2g1i33y5] {
    white-space: nowrap;
}

/* #8429 - the fair-use note under the rows: plain, muted, no figure. Doubled
   class so it outranks PublicPageShell's `.public-content ::deep p` (italic,
   lede-sized) and reads at the same size on /pricing as everywhere else. */
.candidate-diff .candidate-diff-fairuse[b-7i2g1i33y5] {
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--ascend-text-muted);
    border-top: 1px solid color-mix(in srgb, var(--ascend-text-light) 10%, transparent);
    padding-top: var(--space-xs);
    margin: var(--space-xs) 0 0;
}
/* /Components/Shared/Card.razor.rz.scp.css */
/* Professional Card Component - AscendChess Dark Theme */

.ascend-card[b-ygjzs45y8e] {
    /* #7543 - OPAQUE and FLAT, deliberately. This was a translucent 0.98 -> 0.95
       navy gradient over the layout's own gradient. axe-core cannot resolve a
       background through a gradient or a translucent layer, so every text node
       inside every card was 'incomplete' - neither passed nor failed - and sat
       in the frozen undecidable register (AxeUndecidableRegister.txt). A solid
       card makes its content MEASURABLE: the layout gradient behind it stays,
       the card just no longer lets it through. The two gradient stops differed
       by five units of blue at 95%+ alpha over near-identical navy; the flat
       token is what that rendered as. */
    background: var(--ascend-bg-card);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
}

/* Gradient accent line - always visible.
   #7543 - drawn with border-image, NOT a background. axe-core's color-contrast
   check treats any ancestor pseudo-element that has a background as an overlay
   and compares its ABSOLUTE area with 25% of the text node's own area: a 4px
   line across a 600px card is 2400px^2, more than a whole line of small text,
   so every caption inside every card was 'undecidable' on account of a line
   that never touches it. A pseudo with no background is ignored by that check,
   and the text is measured against the card. Same 4px, same gradient. */
.ascend-card[b-ygjzs45y8e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%) 1;
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ascend-card.hoverable:hover[b-ygjzs45y8e] {
    transform: translateY(-4px);
    box-shadow: 0 24px 70px rgba(4, 32, 71, 0.5), 0 0 50px rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.5);
}

/* Card Header */
.card-header[b-ygjzs45y8e] {
    padding: 1.5rem 2rem;
    background: transparent;
    color: white;
}

.card-title[b-ygjzs45y8e] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
}

.title-white[b-ygjzs45y8e] {
    color: #ffffff;
}

.title-gold[b-ygjzs45y8e] {
    color: #B88536;
}

.card-subtitle[b-ygjzs45y8e] {
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Card Body */
.card-body[b-ygjzs45y8e] {
    padding: 2rem;
}

/* Card Footer */
.card-footer[b-ygjzs45y8e] {
    padding: 1.5rem 2rem;
    background: transparent;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
}

/* Variant: Flat */
.card-flat[b-ygjzs45y8e] {
    box-shadow: none;
    border-color: rgba(49, 221, 227, 0.15);
}

.card-flat:hover[b-ygjzs45y8e] {
    border-color: rgba(49, 221, 227, 0.3);
}

/* Variant: Elevated */
.card-elevated[b-ygjzs45y8e] {
    box-shadow: 0 24px 70px rgba(4, 32, 71, 0.5), 0 0 50px rgba(49, 221, 227, 0.15);
}

.card-elevated.hoverable:hover[b-ygjzs45y8e] {
    box-shadow: 0 30px 80px rgba(4, 32, 71, 0.6), 0 0 60px rgba(49, 221, 227, 0.2);
}

/* Variant: Glass (Glassmorphism) */
.card-glass[b-ygjzs45y8e] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(49, 221, 227, 0.2);
    box-shadow: 0 8px 32px 0 rgba(4, 32, 71, 0.3);
}

.card-glass .card-header[b-ygjzs45y8e] {
    background: transparent;
    backdrop-filter: blur(10px);
}

.card-glass .card-footer[b-ygjzs45y8e] {
    background: transparent;
    backdrop-filter: blur(10px);
}

/* Variant: Dashboard (matches existing dashboard-card style) */
.dashboard-card[b-ygjzs45y8e] {
    backdrop-filter: blur(20px);
}

/* #7543 - the Dashboard variant used to stretch ::before into a full-card
   radial cyan glow (8% alpha, top right). A background-bearing overlay over the
   whole card is precisely what makes axe decline to measure every text node
   under it (see .ascend-card::before), and unlike the accent line a fill cannot
   be redrawn without a background, so the glow is gone. The variant keeps its
   blur and inherits the accent line. */

.dashboard-card .card-header[b-ygjzs45y8e] {
    position: relative;
    z-index: 1;
}

.dashboard-card .card-body[b-ygjzs45y8e] {
    position: relative;
    z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .card-header[b-ygjzs45y8e] {
        padding: 1.25rem 1.5rem;
    }

    .card-body[b-ygjzs45y8e] {
        padding: 1.5rem;
    }

    .card-footer[b-ygjzs45y8e] {
        padding: 1.25rem 1.5rem;
    }

    .card-title[b-ygjzs45y8e] {
        font-size: 1.125rem;
    }
}

/* #8721 - a card title rendered as h2 (HeadingLevel="2") must look exactly like the h3 one:
   the global h2 rule adds a negative letter-spacing that the h3 rule does not. */
h2.card-title[b-ygjzs45y8e] {
    letter-spacing: inherit;
}
/* /Components/Shared/ChapterCreateFailedAlert.razor.rz.scp.css */
/* Bug #9289 / #9297 - the study was created but its chapters did not save. */
.chapter-create-error[b-er888ewlzb] {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ascend-error);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--ascend-error-light);
}
/* /Components/Shared/ChapterReflectionModal.razor.rz.scp.css */
.reflection-overlay[b-mpb58z10jx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-mpb58z10jx 0.2s ease;
}

/* Related reflections panel */
.related-reflections-panel[b-mpb58z10jx] {
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    margin: 0.75rem 0 1rem;
    padding: 0.5rem 0.75rem;
}

.related-toggle[b-mpb58z10jx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: none;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.35rem 0;
    text-align: left;
}

.related-toggle:hover[b-mpb58z10jx] { color: #42e8ed; }

.related-list[b-mpb58z10jx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(49, 221, 227, 0.15);
    max-height: 220px;
    overflow-y: auto;
}

.related-item[b-mpb58z10jx] {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.related-item-header[b-mpb58z10jx] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.related-item-chapter[b-mpb58z10jx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: #ffffff;
    font-weight: 600;
}

.related-item-reason[b-mpb58z10jx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(49, 221, 227, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.related-item-key[b-mpb58z10jx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
}

@keyframes fadeIn-b-mpb58z10jx {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reflection-dialog[b-mpb58z10jx] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 2rem;
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(16, 185, 129, 0.1);
    animation: slideIn-b-mpb58z10jx 0.3s ease;
}

@keyframes slideIn-b-mpb58z10jx {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.reflection-icon[b-mpb58z10jx] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    border: 2px solid rgba(16, 185, 129, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn-b-mpb58z10jx 0.4s ease;
    color: #10b981;
    font-size: 1.5rem;
}

@keyframes scaleIn-b-mpb58z10jx {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.reflection-title[b-mpb58z10jx] {
    font-family: var(--ascend-font-primary);
    font-size: 1.3rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    margin: 0 0 0.25rem;
}

.reflection-subtitle[b-mpb58z10jx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin: 0 0 1.25rem;
}

/* Step Indicators */
.step-indicators[b-mpb58z10jx] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.step-dot[b-mpb58z10jx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
}

.step-dot.active[b-mpb58z10jx] {
    background: #31DDE3;
    box-shadow: 0 0 8px rgba(49, 221, 227, 0.4);
}

.step-dot.done[b-mpb58z10jx] {
    background: #10b981;
}

/* Step Content */
.step-label[b-mpb58z10jx] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    margin-bottom: 0.25rem;
}

.step-hint[b-mpb58z10jx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    margin: 0 0 0.75rem;
    line-height: 1.4;
}

.reflection-textarea[b-mpb58z10jx] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.75rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

.reflection-textarea:focus[b-mpb58z10jx] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.reflection-textarea[b-mpb58z10jx]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Dual rating block (applicability + understanding) */
.dual-rating[b-mpb58z10jx] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rating-block[b-mpb58z10jx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rating-question[b-mpb58z10jx] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

.rating-hint[b-mpb58z10jx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.5rem;
}

/* Confidence Rating */
.confidence-row[b-mpb58z10jx] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.confidence-btn[b-mpb58z10jx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    min-width: 70px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
}

.confidence-btn:hover[b-mpb58z10jx] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.2);
}

.confidence-btn.active[b-mpb58z10jx] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.confidence-num[b-mpb58z10jx] {
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.confidence-label[b-mpb58z10jx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Actions */
/* #6681 - VERIFIED by rendering at 390x844: on a single-prompt reflection the
   row carries Skip + "Not applicable" + "Save Reflection" at once. The dialog is
   90vw with 1.5rem padding on a phone (~303px of usable width), and unwrapped
   those three buttons clip "Save Reflection" by ~25px (10px even at the widest
   374px container). Wrap so each label keeps its full width. */
.reflection-actions[b-mpb58z10jx] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.reflection-actions > *[b-mpb58z10jx] {
    min-width: 0;
}

@media (max-width: 768px) {
    .reflection-dialog[b-mpb58z10jx] {
        padding: 1.5rem;
    }

    .confidence-row[b-mpb58z10jx] {
        flex-wrap: wrap;
    }

    .confidence-btn[b-mpb58z10jx] {
        min-width: 56px;
        padding: 0.5rem 0.35rem;
    }
}
/* /Components/Shared/ChapterStructureSuggestion.razor.rz.scp.css */
/* PBI #9213 - same teal lane as the pawn structure badge, with a DASHED border:
   a proposal, not a saved link. Wraps at phone widths so the button never
   pushes the panel sideways.
   #9395 - it sits in the chapter tags row, under the tags toggle, because it is
   about the whole chapter rather than the game on the board. */
.structure-suggestion[b-jrdbxb6zo9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.4rem;
    padding: 0.5rem 0.85rem;
    border: 1px dashed rgba(49, 221, 227, 0.55);
    border-radius: 10px;
    background: rgba(49, 221, 227, 0.06);
}

.structure-suggestion-text[b-jrdbxb6zo9] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
    flex: 1 1 12rem;
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.structure-suggestion-text .bi-grid-3x3[b-jrdbxb6zo9] {
    color: rgba(49, 221, 227, 0.95);
}

.structure-suggestion-name[b-jrdbxb6zo9] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    overflow-wrap: anywhere;
}

/* #9395 - the game the proposal mostly comes from, quieter than the name. */
.structure-suggestion-source[b-jrdbxb6zo9] {
    color: rgba(255, 255, 255, 0.72);
    overflow-wrap: anywhere;
}

.structure-suggestion-error[b-jrdbxb6zo9] {
    flex-basis: 100%;
    font-size: 0.8rem;
    color: #fca5a5;
}
/* /Components/Shared/ChessBoard.razor.rz.scp.css */
/* ChessBoard Component - ASCENDCHESS Dark Theme */

.chessboard-container[b-b9ynrsxw9u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    /* #6126 — the board is a width-driven 1:1 square, so on a SHORT viewport
       (landscape phone, small laptop window) it can run taller than the screen
       and the bottom rank + file coordinates get clipped. Cap the width by the
       viewport height too. min() makes this a no-op on normal tall screens
       (600px wins when 88dvh > 600px, i.e. viewport taller than ~682px). */
    max-width: min(600px, 88dvh);
    margin: 0 auto;
}

/* Main chessboard element */
.chessboard[b-b9ynrsxw9u] {
    width: 100%;
    max-width: min(600px, 88dvh);
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(49, 221, 227, 0.15);
    border: 2px solid rgba(49, 221, 227, 0.3);
    position: relative;
}

/* #9074 - the material balance strip, in flow under the board. The container's
   1.5rem flex gap is for the controls row; the strip belongs to the board, so it
   sits closer (0.5rem effective). Same width as the board so its text starts at
   the board's left edge. */
.chessboard-material[b-b9ynrsxw9u] {
    width: 100%;
    max-width: min(600px, 88dvh);
    margin-top: -1rem;
}

/* Chessground base styles (override library defaults).

   #6725 follow-up — the ASCENDCHESS board theme below was dead CSS since it
   was written, for TWO stacked reasons:
   1. Every rule used :global(), which the Blazor scoped-CSS compiler doesn't
      understand — it emitted invalid selectors the browser dropped, so the
      board silently fell back to chessground's stock lichess-brown theme.
      Fixed by converting to ::deep (compiles to ".chessboard[b-...] X").
   2. The original square.light / square.dark rules could NEVER color the
      board even with working selectors: chessground does not render 64
      square elements. The checker comes from a background-image on cg-board
      (chessground.brown.css paints a translucent SVG grid over a base
      background-color); <square> elements exist only transiently for
      highlights (last-move / selected / move-dest / check). Verified by
      rendered DOM inspection: 0 square elements on an idle board. The
      branded checker is therefore drawn on cg-board itself — a 2x2-square
      conic-gradient tile repeated 4x4 (background-size 25%) gives exact
      token colors for both square sets with a8 light, matching the stock
      board's parity. */
/* BOARD THEME: deliberately absent (owner call, 2026-07-28). The branded
   gold/navy checker above briefly shipped and the owner rejected it on
   sight - the dark squares are the page background color, so the board
   dissolves into the page ("Nope this looks terrible"). The board serves
   chessground's stock lichess-brown theme, which is what every user has
   known since launch. A branded theme is a DESIGN-PASS item: it needs
   owner-approved tones (dark squares must be distinct from
   --ascend-bg-dark) and must ship behind a flag for canary, never
   un-flagged sitewide. Do not re-add square/checker or highlight color
   rules here without that. */

/* Piece being dragged */
.chessboard[b-b9ynrsxw9u]  cg-board piece.dragging {
    opacity: 0.6;
    cursor: grabbing !important;
}

/* Piece hover */
.chessboard[b-b9ynrsxw9u]  cg-board piece:hover {
    cursor: grab;
}

/* Ghost piece (drag preview) */
.chessboard[b-b9ynrsxw9u]  cg-board piece.ghost {
    opacity: 0.3;
}

/* Coordinates — Lichess-style corner labels.
   Ranks (1-8): top-left corner of each leftmost-column square.
   Files (a-h): bottom-right corner of each bottommost-row square.
   Both stay inside the board (no extra layout space taken) and don't
   collide with pieces because they're tucked into the corners that
   chessground reserves for them.

   #6725 — these rules MUST use ::deep, not :global(). :global() is
   Vue/webpack syntax; the Blazor scoped-CSS compiler doesn't know it and
   emits ":global(coords.files)[b-...]", an invalid selector the browser
   drops WHOLESALE. Every coords rule here was dead CSS in prod: the board
   fell back to chessground.base.css ("coords.files { left: 24px;
   text-align: center; bottom: -4px }" — a gutter offset for
   outside-the-board labels), which shifted every file letter ~half a
   square to the right. On a phone-sized board (~50px squares) that put
   letters ON or PAST their square boundary — the customer-reported
   "letters off by 1 square" (verified by headless-Chromium render at
   450x900/390x844: letter deltas +0.48..+0.57 of a square before, inside
   own square after). ::deep compiles to ".chessboard[b-...] coords.files"
   which outranks chessground.base.css by specificity regardless of
   stylesheet order. */

/* stylelint-disable selector-type-no-unknown --
   `coords` and `coord` are chessground's own CUSTOM ELEMENTS, created at
   runtime by wwwroot/lib/chessground/chessground.min.js - see
   chessground.base.css, which styles the same two elements (".cg-wrap coords",
   ".cg-wrap coords coord"). They are not typos and not dead rules: verified in
   headless Chromium on dev, signed in as demo@ascendchess.com, at /analysis -
   the board renders <coords class="ranks"> and <coords class="files"> with 16
   <coord> children, and every rule below is the WINNING rule for the property
   it sets (checked via getComputedStyle + a document.styleSheets match walk).
   The flipped variants were confirmed the same way after clicking "Flip board":
   chessground adds the `black` class and both .black rules take effect.

   Sonar (css:S4670, stylelint selector-type-no-unknown) cannot see runtime
   markup, and its `ignore=custom-elements` default only forgives HYPHENATED
   custom-element names, so an un-hyphenated `coords` reads as an unknown HTML
   tag. That is a false positive on OUR side of the analyzer, not a defect here.

   DO NOT "fix" these by deleting them or by renaming them to a class: #6725
   was a customer-reported "file letters off by one square" bug caused by these
   exact rules being dead, and the specificity of `coords.files` over
   chessground.base.css is what fixes it. Tech Debt #7242. */
.chessboard[b-b9ynrsxw9u]  coords {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    user-select: none;
}

.chessboard[b-b9ynrsxw9u]  coords.ranks {
    left: 3px;
    top: 0;
    bottom: auto;
    right: auto;
    width: auto;
    height: 100%;
    flex-flow: column-reverse;
    text-align: left;
}

.chessboard[b-b9ynrsxw9u]  coords.ranks.black {
    flex-flow: column;
}

.chessboard[b-b9ynrsxw9u]  coords.ranks coord {
    /* Override chessground's translateY(39%) — that was tuned for
       outside-the-board placement; for top-of-square labels we want
       the text anchored at the top of each rank's flex share. */
    transform: none;
    line-height: 1;
    padding-top: 1px;
}

.chessboard[b-b9ynrsxw9u]  coords.files {
    bottom: 0;
    left: 0;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    flex-flow: row;
    text-align: right;
    padding: 0 3px 1px 0;
}

.chessboard[b-b9ynrsxw9u]  coords.files.black {
    flex-flow: row-reverse;
}
/* stylelint-enable selector-type-no-unknown */

/* Control buttons */
.chessboard-controls[b-b9ynrsxw9u] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.btn-control[b-b9ynrsxw9u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    color: var(--ascend-accent);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-control:hover:not(:disabled)[b-b9ynrsxw9u] {
    background: rgba(49, 221, 227, 0.2);
    border-color: var(--ascend-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.3);
}

.btn-control:active:not(:disabled)[b-b9ynrsxw9u] {
    transform: translateY(0);
}

.btn-control:disabled[b-b9ynrsxw9u] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Font Awesome renders as nested SVG; size/color the i, not the <i>.
   ::deep, not :global() - see the #6725 note above. */
.btn-control[b-b9ynrsxw9u]  i {
    width: 16px;
    height: 16px;
    color: var(--ascend-accent);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Drop flex layout on mobile. The default
       `display: flex; flex-direction: column; align-items: center`
       can collapse an aspect-ratio:1 flex child to its zero intrinsic
       width on narrow viewports — the chessboard then renders as a
       tiny pill (the board's border-radius on a near-zero element).
       Block layout with margin: 0 auto preserves centering and gives
       width: 100% a definite container to resolve against. */
    .chessboard-container[b-b9ynrsxw9u] {
        display: block;
        /* #6784 symptom B — a scrollable gutter must exist beside the board.
           Chessground binds touch across the whole board, so a swipe that
           starts on it drags a piece instead of scrolling the page; if the
           board runs to the page edges there is physically nowhere to put a
           thumb. Measured before this rule (headless Chromium, authenticated
           dev): 25-29px of page either side on the drill surfaces and only
           14px on the endgame lesson - narrower than a fingertip.

           calc(100vw - 4.5rem) is measured from the VIEWPORT, not from the
           parent, so the guarantee survives whatever padding the hosting page
           happens to use: at least 2.25rem of non-board on each side at every
           phone width. min() keeps 100% winning whenever the container is
           already narrower (a side-by-side tablet column), so nothing grows. */
        max-width: min(100%, calc(100vw - 4.5rem));
        padding: 0;
    }

    .chessboard[b-b9ynrsxw9u] {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }

    /* Block layout here has no flex gap to pull back from. */
    .chessboard-material[b-b9ynrsxw9u] {
        max-width: 100%;
        margin: 0.375rem auto 0;
    }

    .btn-control[b-b9ynrsxw9u] {
        width: 40px;
        height: 40px;
    }

    /* stylelint-disable-next-line selector-type-no-unknown --
       chessground runtime custom element; see the block comment above the
       main coords rules. Tech Debt #7242. */
    .chessboard[b-b9ynrsxw9u]  coords {
        font-size: 0.6rem;
    }
}

/* Animation for piece moves */
@keyframes piece-move-b-b9ynrsxw9u {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

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

/* Glow effect on hover */
.chessboard:hover[b-b9ynrsxw9u] {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(49, 221, 227, 0.25);
}

/* Promotion Modal */
.promotion-modal[b-b9ynrsxw9u] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}

.promotion-modal.show[b-b9ynrsxw9u] {
    display: block;
}

.promotion-overlay[b-b9ynrsxw9u] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    animation: fadeIn-b-b9ynrsxw9u 0.2s ease;
}

.promotion-content[b-b9ynrsxw9u] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.4);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(49, 221, 227, 0.2);
    animation: scaleIn-b-b9ynrsxw9u 0.3s ease;
    min-width: 20rem;
}

.promotion-title[b-b9ynrsxw9u] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
    text-align: center;
    background: linear-gradient(135deg, var(--ascend-accent), var(--ascend-accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.promotion-pieces[b-b9ynrsxw9u] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.promotion-piece[b-b9ynrsxw9u] {
    background: rgba(49, 221, 227, 0.1);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 0.75rem;
    width: 3.75rem;
    height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.promotion-piece:hover[b-b9ynrsxw9u] {
    background: rgba(49, 221, 227, 0.2);
    border-color: var(--ascend-accent);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(49, 221, 227, 0.4);
}

.promotion-piece:active[b-b9ynrsxw9u] {
    transform: translateY(-2px) scale(1.02);
}

.piece-icon[b-b9ynrsxw9u] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    /* Unicode chess glyphs render in the current text color. Without this
       rule they fell back to the inherited dark color and disappeared into
       the dark modal background (Joe-flagged 2026-04-29). White on dark
       reads cleanly for both the outline glyphs (\2655-\2658) and the
       filled glyphs (\265B-\265E) used for the black-side promotion. */
    color: #ffffff;
    line-height: 1;
}

/* White piece icons using Unicode chess symbols */
.piece-icon.queen[b-b9ynrsxw9u]::before {
    content: '\2655';
}

.piece-icon.rook[b-b9ynrsxw9u]::before {
    content: '\2656';
}

.piece-icon.bishop[b-b9ynrsxw9u]::before {
    content: '\2657';
}

.piece-icon.knight[b-b9ynrsxw9u]::before {
    content: '\2658';
}

/* Black pieces - updated by JavaScript based on color */
.promotion-modal.black .piece-icon.queen[b-b9ynrsxw9u]::before {
    content: '\265B';
}

.promotion-modal.black .piece-icon.rook[b-b9ynrsxw9u]::before {
    content: '\265C';
}

.promotion-modal.black .piece-icon.bishop[b-b9ynrsxw9u]::before {
    content: '\265D';
}

.promotion-modal.black .piece-icon.knight[b-b9ynrsxw9u]::before {
    content: '\265E';
}

@keyframes fadeIn-b-b9ynrsxw9u {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn-b-b9ynrsxw9u {
    from {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Responsive adjustments for promotion modal */
@media (max-width: 768px) {
    .promotion-content[b-b9ynrsxw9u] {
        min-width: 17.5rem;
        padding: 1.5rem;
    }

    .promotion-pieces[b-b9ynrsxw9u] {
        gap: 0.75rem;
    }

    .promotion-piece[b-b9ynrsxw9u] {
        width: 3.5rem;
        height: 3.5rem;
    }

    .piece-icon[b-b9ynrsxw9u] {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* Smallest phones / foldable cover screens: the promotion picker is a
   required gameplay tap target, so cap its width to the viewport and let
   min-width relax so it never overflows or clips off-screen edges.
   (Mobile sweep 2026-06.) */
@media (max-width: 380px) {
    .promotion-content[b-b9ynrsxw9u] {
        min-width: 0;
        width: calc(100vw - 1.5rem);
        max-width: 17.5rem;
        padding: 1.25rem;
    }
}


/* #7736 — the board's control buttons measured 40x40 at 390px: four pixels
   under the line, on every surface that embeds a board. Registered against the
   SHARED component because that is where the class lives; the copy of this rule
   first written in OpeningHub.razor.css could never match, since the button is
   rendered by this component and carries ITS scope attribute, not the page's. */
@media (hover: none) and (pointer: coarse) {
    .btn-control[b-b9ynrsxw9u] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/ChessClock.razor.rz.scp.css */
.chess-clock[b-dkfh3a03n1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.clock-row[b-dkfh3a03n1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s ease;
}

/* The running clock glows cyan so the side to move is unmistakable. */
.clock-row.active[b-dkfh3a03n1] {
    border-color: rgba(49, 221, 227, 0.5);
    box-shadow: 0 0 0 1px rgba(49, 221, 227, 0.25), 0 0 18px rgba(49, 221, 227, 0.12);
}

/* Time pressure — the active clock under the low threshold turns red. */
.clock-row.active.low[b-dkfh3a03n1] {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3), 0 0 18px rgba(239, 68, 68, 0.18);
}

.clock-label[b-dkfh3a03n1] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.clock-time[b-dkfh3a03n1] {
    font-family: var(--ascend-font-primary);
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.75);
}

.clock-row.active .clock-time[b-dkfh3a03n1] {
    color: #31DDE3;
}

.clock-row.active.low .clock-time[b-dkfh3a03n1] {
    color: #f87171;
}
/* /Components/Shared/ChessSidePicker.razor.rz.scp.css */
.color-buttons[b-rjxf0j0fsz] {
    display: flex;
    gap: 0.4rem;
}

.color-btn[b-rjxf0j0fsz] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.color-btn.with-name[b-rjxf0j0fsz] {
    width: auto;
    min-width: 5.5rem;
    height: 2.75rem;
    padding: 0 0.85rem;
    gap: 0.45rem;
}

.color-btn.active[b-rjxf0j0fsz] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.1);
}

.color-icon[b-rjxf0j0fsz] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.color-icon.white[b-rjxf0j0fsz] { background: #f0f0f0; }
.color-icon.black[b-rjxf0j0fsz] { background: #333; border: 1px solid rgba(255, 255, 255, 0.35); }

.color-name[b-rjxf0j0fsz] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}
/* /Components/Shared/CircuitBlockClose.razor.rz.scp.css */
/* #8063 - the close of a Tactical Circuit block. Deliberately quiet: no trophy,
   no celebration animation, no gold - this is feedback, not a reward. */

.circuit-block-close[b-7j2tk7i89o] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 0;
    box-sizing: border-box;
}

.cbc-header[b-7j2tk7i89o] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cbc-title[b-7j2tk7i89o] {
    font-family: var(--ascend-font-primary);
    font-size: 2rem;
    color: var(--ascend-text-light);
    margin: 0;
}

.cbc-subtitle[b-7j2tk7i89o] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: var(--ascend-text-muted);
    margin: 0;
}

[b-7j2tk7i89o] .cbc-stats,
[b-7j2tk7i89o] .cbc-reserve-stats {
    width: 100%;
}

.cbc-comparison[b-7j2tk7i89o],
.cbc-note[b-7j2tk7i89o],
.cbc-queued[b-7j2tk7i89o],
.cbc-cycle-ended[b-7j2tk7i89o] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ascend-text-muted);
    margin: 0;
}

.cbc-reserve[b-7j2tk7i89o] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}

.cbc-section-title[b-7j2tk7i89o] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: var(--ascend-text-light);
    margin: 0;
}

.cbc-note[b-7j2tk7i89o] {
    font-size: 0.9375rem;
}

.cbc-actions[b-7j2tk7i89o] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cbc-size[b-7j2tk7i89o] {
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 480px) {
    .circuit-block-close[b-7j2tk7i89o] {
        padding: 1rem 0;
    }

    .cbc-title[b-7j2tk7i89o] {
        font-size: 1.5rem;
    }

    .cbc-actions[b-7j2tk7i89o]  .ascend-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}
/* /Components/Shared/CircuitBlockSizePicker.razor.rz.scp.css */
/* #8063 - Tactical Circuit block size picker. */

.circuit-block-size[b-dnxlopoh9y] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
}

.circuit-block-size-label[b-dnxlopoh9y] {
    color: var(--ascend-text-muted);
}

.circuit-block-size-select[b-dnxlopoh9y] {
    min-height: 2.25rem;
    min-width: 4.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    background-color: var(--ascend-bg-dark);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    cursor: pointer;
}

.circuit-block-size-select:focus-visible[b-dnxlopoh9y] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.circuit-block-size-select:disabled[b-dnxlopoh9y] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* #8294 - the touch floor. app.css floors every select at --touch-target on a
   coarse pointer, but `select` is specificity 0,0,1 and the scoped rule above
   (.circuit-block-size-select[b-...]) is 0,2,0, so its 2.25rem won: the prod
   canary measured the picker at 72x36 at 390 and 344, beside 44px Solution and
   Skip buttons in the same sidebar. The "Next block size" picker on the block
   close is this same component. The floor is restated here, inside the pointer
   query, so a mouse keeps the compact 2.25rem. */
@media (hover: none) and (pointer: coarse) {
    .circuit-block-size-select[b-dnxlopoh9y] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/CircuitSpeedChange.razor.rz.scp.css */
/* #8222 - a neutral statement of two figures. Deliberately quiet: no success green, no
   warning amber, no pill - the same styling whichever way the time moved. */

.circuit-speed-change[b-i678jrgb57],
.circuit-speed-in-progress[b-i678jrgb57] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ascend-text-muted);
    text-align: center;
    margin: 1rem 0 0;
}

.csc-figure[b-i678jrgb57] {
    font-weight: 700;
    color: var(--ascend-text-light);
    white-space: nowrap;
}
/* /Components/Shared/CoachCommitment.razor.rz.scp.css */
/* #8418 - the commitment to coaches. Same public-page idiom as the /for-coaches
   callout and the coach-referral landing's FAQ block: a quiet tinted panel. */

.coach-commitment[b-rx8up3h09r] {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    border-radius: 16px;
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.25);
    scroll-margin-top: 6rem;
}

/* Specific enough to beat the public shell's heading margins
   (.public-content ::deep h2, which ties a plain ".coach-commitment h2"). */
.coach-commitment h2.cc-heading[b-rx8up3h09r] {
    margin-top: 0;
}

.coach-commitment .cc-intro[b-rx8up3h09r] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.coach-commitment .cc-promises[b-rx8up3h09r] {
    margin: 0;
    padding-left: 1.25rem;
}

.coach-commitment .cc-promises li[b-rx8up3h09r] {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.coach-commitment .cc-promises li:last-child[b-rx8up3h09r] {
    margin-bottom: 0;
}

.coach-commitment .cc-promises strong[b-rx8up3h09r] {
    color: rgba(255, 255, 255, 0.95);
}

.coach-commitment-excerpt[b-rx8up3h09r] {
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.coach-commitment-excerpt .cc-excerpt-title[b-rx8up3h09r] {
    margin: 0 0 0.4rem;
    color: var(--ascend-accent);
    font-size: 0.95rem;
    font-weight: 600;
}

.coach-commitment-excerpt .cc-excerpt-text[b-rx8up3h09r] {
    margin: 0 0 0.6rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.6;
}

.coach-commitment-excerpt .cc-excerpt-link[b-rx8up3h09r] {
    display: inline-block;
    padding: 0.35rem 0;
    color: var(--ascend-accent);
    font-size: 0.95rem;
    text-decoration: underline;
}
/* /Components/Shared/CoachContentReportButton.razor.rz.scp.css */
/* #8104 CB-TRUST - the report control. Quiet on purpose: it sits beside a coach's words
   and must not compete with them, but its tap target is the house 44px minimum. */
.ccr[b-jd9ybl04y6] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ccr-btn[b-jd9ybl04y6] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ascend-text-muted);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.ccr-btn:hover:not(:disabled)[b-jd9ybl04y6],
.ccr-btn:focus-visible[b-jd9ybl04y6] {
    color: var(--ascend-text-light);
    border-color: rgba(255, 255, 255, 0.25);
}

.ccr-btn:focus-visible[b-jd9ybl04y6] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.ccr-btn:disabled[b-jd9ybl04y6] {
    cursor: default;
    opacity: 0.6;
}

.ccr-outcome[b-jd9ybl04y6],
.ccr-error[b-jd9ybl04y6] {
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.ccr-outcome[b-jd9ybl04y6] {
    color: var(--ascend-text-muted);
}

.ccr-error[b-jd9ybl04y6] {
    color: var(--ascend-error-light);
}
/* /Components/Shared/CoachCredentials.razor.rz.scp.css */
.coach-credentials[b-6jeri0j82j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.coach-cred-bio[b-6jeri0j82j] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.coach-cred-chips[b-6jeri0j82j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.coach-cred-chip[b-6jeri0j82j] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: #31DDE3;
    white-space: nowrap;
}

.coach-cred-chip[b-6jeri0j82j]  i {
    font-size: 13px;
}

.coach-cred-experience[b-6jeri0j82j] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
}

.coach-cred-label[b-6jeri0j82j] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Shared/CoachHowToInstruction.razor.rz.scp.css */
/* #9473 - a sent how-to as an instruction: plain facts, no celebration styling. */
.cb-howto[b-o5banwfrsv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--ascend-accent);
    border-radius: 6px;
    background: rgba(49, 221, 227, 0.06);
    min-width: 0;
    overflow-wrap: anywhere;
}

.cb-howto-task[b-o5banwfrsv] {
    margin: 0;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.35;
}

.cb-howto-line[b-o5banwfrsv] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
}

.cb-howto-key[b-o5banwfrsv] {
    color: var(--ascend-text-muted);
}

.cb-howto-line strong[b-o5banwfrsv] {
    color: #ffffff;
    font-weight: 600;
}

/* #9505 - what to do after pressing the control: a plain numbered list inside the card. */
.cb-howto-steps[b-o5banwfrsv] {
    margin: 0.15rem 0 0.25rem;
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    line-height: 1.4;
}

.cb-howto-steps li[b-o5banwfrsv] {
    padding-left: 0.15rem;
    min-width: 0;
}

.cb-howto-steps li[b-o5banwfrsv]::marker {
    color: var(--ascend-text-muted);
}

.cb-howto-steps strong[b-o5banwfrsv] {
    color: #ffffff;
    font-weight: 600;
}
/* /Components/Shared/CoachingBanner.razor.rz.scp.css */
.coaching-banner[b-ym1p2nhp6e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.08) 0%, rgba(184, 133, 54, 0.04) 100%);
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-left: 4px solid var(--ascend-secondary);
    border-radius: 12px;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.coaching-banner.collapsed:hover[b-ym1p2nhp6e] {
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.12) 0%, rgba(184, 133, 54, 0.06) 100%);
}

.coaching-banner.expanded[b-ym1p2nhp6e] {
    cursor: default;
}

.banner-icon[b-ym1p2nhp6e] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(184, 133, 54, 0.15);
    border-radius: 8px;
}

.banner-content[b-ym1p2nhp6e] {
    flex: 1;
    min-width: 0;
}

.banner-message[b-ym1p2nhp6e] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.banner-label[b-ym1p2nhp6e] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.banner-chevron[b-ym1p2nhp6e]  i {
    transition: transform 0.2s ease;
}

.banner-action[b-ym1p2nhp6e] {
    flex-shrink: 0;
    padding: 0.4rem 1rem;
    background: rgba(184, 133, 54, 0.15);
    color: var(--ascend-secondary);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 20px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
}

.banner-action:hover[b-ym1p2nhp6e] {
    background: rgba(184, 133, 54, 0.25);
    border-color: rgba(184, 133, 54, 0.5);
    color: var(--ascend-secondary-light);
}

.banner-dismiss[b-ym1p2nhp6e] {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.banner-dismiss:hover[b-ym1p2nhp6e] {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .coaching-banner[b-ym1p2nhp6e] {
        gap: 0.5rem;
        padding: 0.5rem 0.65rem;
        margin-bottom: 0.5rem;
    }

    .banner-icon[b-ym1p2nhp6e] {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }

    .banner-message[b-ym1p2nhp6e] {
        font-size: 0.75rem;
        line-height: 1.35;
    }

    .banner-action[b-ym1p2nhp6e] {
        padding: 0.25rem 0.7rem;
        font-size: 0.7rem;
    }
}
/* /Components/Shared/CoachingFraming.razor.rz.scp.css */
.coaching-framing[b-mvoojv7nbb] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.25);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.coaching-framing[b-mvoojv7nbb]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ascend-accent), var(--ascend-secondary));
}

.framing-icon[b-mvoojv7nbb] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(184, 133, 54, 0.15));
    border: 1px solid rgba(49, 221, 227, 0.3);
}

.framing-icon[b-mvoojv7nbb]  i { font-size: 20px; color: var(--ascend-accent); }

.framing-content[b-mvoojv7nbb] { flex: 1; min-width: 0; }

.framing-greeting[b-mvoojv7nbb] {
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.3rem;
}

.framing-focus[b-mvoojv7nbb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 0.2rem;
    line-height: 1.5;
}

.framing-rationale[b-mvoojv7nbb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.75rem;
    line-height: 1.4;
}

.framing-ready-btn[b-mvoojv7nbb] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #31DDE3, #42e8ed);
    color: #0a1628;
    border: none;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: all 0.18s ease;
}

.framing-ready-btn:hover[b-mvoojv7nbb] {
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .coaching-framing[b-mvoojv7nbb] { padding: 1rem; }
    .framing-greeting[b-mvoojv7nbb] { font-size: 1.05rem; }
}

/* #6958 - busy affordance on the readiness button. */
.framing-ready-btn:disabled[b-mvoojv7nbb] {
    cursor: wait;
    opacity: 0.75;
    transform: none;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.2);
}

.framing-ready-spinner[b-mvoojv7nbb] {
    display: inline-block;
    animation: framing-ready-spin-b-mvoojv7nbb 0.9s linear infinite;
}

@keyframes framing-ready-spin-b-mvoojv7nbb {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.framing-ready-error[b-mvoojv7nbb] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: #ef8a8a;
    margin: 0.5rem 0 0;
    line-height: 1.4;
}
/* /Components/Shared/CoachingNotesList.razor.rz.scp.css */
/* Bug #8604 - the member's AI Coach's Notes list. Same box the old raw <pre> used
   (scrolls past 240px), one note per item with its date on its own line. */
.memory-notes[b-0v4z9r7n62] {
    list-style: none;
    margin: 0;
    padding: 0.75rem 1rem;
    max-height: 240px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.memory-notes:focus-visible[b-0v4z9r7n62] {
    outline: 2px solid var(--ascend-secondary-light);
    outline-offset: 2px;
}

.memory-note[b-0v4z9r7n62] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.memory-note + .memory-notes:focus-visible[b-0v4z9r7n62] {
    outline: 2px solid var(--ascend-secondary-light);
    outline-offset: 2px;
}

.memory-note[b-0v4z9r7n62] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.6rem;
}

.memory-note-date[b-0v4z9r7n62] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.02em;
}

.memory-note-text[b-0v4z9r7n62] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-style: normal;
    line-height: 1.6;
    margin: 0;
    overflow-wrap: anywhere;
}
/* /Components/Shared/CoachingReflection.razor.rz.scp.css */
.coaching-reflection[b-apiwqopyb6] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(10, 22, 40, 0.95));
    border: 2px solid rgba(16, 185, 129, 0.25);
    border-radius: 16px;
    margin-top: 1.5rem;
    position: relative;
    overflow: hidden;
}

.coaching-reflection[b-apiwqopyb6]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #34d399, var(--ascend-secondary));
}

.reflection-icon[b-apiwqopyb6] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.reflection-icon[b-apiwqopyb6]  i { font-size: 20px; color: #34d399; }

.reflection-content[b-apiwqopyb6] { flex: 1; min-width: 0; }

/* Mastery strip — chips of the honest numbers. Shown above the coach narrative
   so the player sees the blended mastery + accuracy + pace at a glance. */
.mastery-strip[b-apiwqopyb6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.mastery-chip[b-apiwqopyb6] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    min-width: 80px;
}

.mastery-chip .mastery-label[b-apiwqopyb6] {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1;
}

.mastery-chip .mastery-value[b-apiwqopyb6] {
    font-family: var(--ascend-font-primary);
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-top: 0.15rem;
}

.mastery-chip .mastery-delta[b-apiwqopyb6] {
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.4rem;
    vertical-align: middle;
}
.mastery-chip .mastery-delta.up[b-apiwqopyb6] { color: #34d399; }
.mastery-chip .mastery-delta.down[b-apiwqopyb6] { color: #f87171; }

.mastery-chip.primary[b-apiwqopyb6] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.1), rgba(184, 133, 54, 0.08));
    border-color: rgba(49, 221, 227, 0.35);
}
.mastery-chip.primary.learning[b-apiwqopyb6] { border-color: rgba(148, 163, 184, 0.4); }
.mastery-chip.primary.developing[b-apiwqopyb6] { border-color: rgba(49, 221, 227, 0.4); }
.mastery-chip.primary.proficient[b-apiwqopyb6] { border-color: rgba(184, 133, 54, 0.45); }
.mastery-chip.primary.mastered[b-apiwqopyb6] { border-color: rgba(16, 185, 129, 0.5); background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 211, 153, 0.1)); }

.mastery-chip.wrong[b-apiwqopyb6] {
    border-color: rgba(239, 68, 68, 0.3);
}
.mastery-chip.wrong .mastery-value[b-apiwqopyb6] {
    color: #f87171;
}

.reflection-score[b-apiwqopyb6] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.4rem;
    line-height: 1.4;
}

.reflection-trend[b-apiwqopyb6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(16, 185, 129, 0.9);
    margin: 0 0 0.3rem;
}

.reflection-next[b-apiwqopyb6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 1rem;
    line-height: 1.4;
}

/* #8837 - the layout is the shared .action-row action-row--start (app.css, on
   the element): Continue and Done stack at ONE width on a phone and sit in a
   left-aligned row above 480px. This used to be a hand-rolled wrapping row
   with a 640px column rescue; the endgame lesson's practice banner squeezed
   the whole card to ~110px beside its success line, and "Try again" and "Back
   to endgames" stacked there at their own widths with their labels broken.
   The banner now gives this card its own line (EndgameLessonDetail.razor.css). */
.reflection-actions[b-apiwqopyb6] {
    margin-top: 0.5rem;
}

.reflection-btn[b-apiwqopyb6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    /* Cap to the container width and let a long label wrap at a space rather
       than overflow past the card's edge in a narrow panel (e.g. "Back to
       endgames" in the endgame-drill side panel). On a roomy row the label
       still sits on one line; it only wraps when it genuinely can't fit. */
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    flex-shrink: 1;
    min-width: 0;
}

.reflection-btn.primary[b-apiwqopyb6] {
    background: linear-gradient(135deg, #31DDE3, #42e8ed);
    color: #0a1628;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.reflection-btn.primary:hover[b-apiwqopyb6] {
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

.reflection-btn.secondary[b-apiwqopyb6] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.reflection-btn.secondary:hover[b-apiwqopyb6] {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {
    .coaching-reflection[b-apiwqopyb6] { padding: 1rem; }
    .reflection-score[b-apiwqopyb6] { font-size: 0.95rem; }
}

/* 375px tighter pass — mastery-strip chips wrap onto multiple rows
 * cleanly, the icon shrinks so it doesn't dominate the surface, and
 * inter-element gaps tighten so the card doesn't swamp narrow viewports.
 * (PBI 5567 acceptance: mobile responsive at 375px wide and up.) */
@media (max-width: 480px) {
    .coaching-reflection[b-apiwqopyb6] {
        padding: 0.85rem;
        gap: 0.65rem;
        align-items: flex-start;
    }

    .reflection-icon[b-apiwqopyb6] {
        width: 32px;
        height: 32px;
    }

    .reflection-icon[b-apiwqopyb6]  i {
        font-size: 16px;
    }

    .mastery-strip[b-apiwqopyb6] {
        gap: 0.4rem;
        margin-bottom: 0.85rem;
    }

    .mastery-chip[b-apiwqopyb6] {
        padding: 0.35rem 0.65rem;
        min-width: 0;
        flex: 1 1 calc(50% - 0.4rem);
    }

    .mastery-chip .mastery-value[b-apiwqopyb6] {
        font-size: 1.15rem;
    }

    .reflection-score[b-apiwqopyb6] {
        font-size: 0.9rem;
        line-height: 1.35;
    }

    .reflection-trend[b-apiwqopyb6] {
        font-size: 0.78rem;
    }

    .reflection-next[b-apiwqopyb6] {
        font-size: 0.75rem;
    }
}
/* /Components/Shared/CoachIntroModal.razor.rz.scp.css */
/* One-time coach introduction shown on arriving at the plan off the first rep.
   Tokens only; the Modal shell owns the chrome. */
.coach-intro[b-v2lgjtmn3c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.coach-intro-lead[b-v2lgjtmn3c] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.coach-intro-list[b-v2lgjtmn3c] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.coach-intro-list li[b-v2lgjtmn3c] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--ascend-accent);
}

.coach-intro-cue[b-v2lgjtmn3c] {
    font-style: italic;
    color: #ffffff;
}

.coach-intro-why[b-v2lgjtmn3c] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.coach-intro-where[b-v2lgjtmn3c] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.8);
}
/* /Components/Shared/CoachItemsList.razor.rz.scp.css */
/* #6018 slice 2 - "From your coaches" on Today, directly below the next action. Full
   width like the hero above it; quiet rows, no badge, no celebration (Recognition
   Follows Improvement). Tokens only (ScopedCssBoundaryTests). */

.coach-items[b-rl873pavq7] {
    grid-column: 1 / -1;
    min-width: 0;
}

.coach-items-list[b-rl873pavq7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.coach-item[b-rl873pavq7] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.coach-item[data-status="Deferred"][b-rl873pavq7] {
    border-left-color: rgba(255, 255, 255, 0.3);
}

.coach-item-kicker[b-rl873pavq7] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.coach-item-title[b-rl873pavq7] {
    margin-top: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
}

.coach-item-line[b-rl873pavq7] {
    margin: 0.35rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    overflow-wrap: anywhere;
}

.coach-item-minutes[b-rl873pavq7] {
    margin-left: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.coach-item-status[b-rl873pavq7] {
    color: rgba(255, 255, 255, 0.6);
}

.coach-item-note[b-rl873pavq7] {
    font-style: italic;
}

/* #8531 - a waiting suggestion's text is the coach's own words, up to 1000 characters.
   Today shows the start of it; the plan page, where it is answered, shows all of it. */
.coach-item-waiting-text[b-rl873pavq7] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.86);
}

.coach-item-actions[b-rl873pavq7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.coach-items-error[b-rl873pavq7] {
    margin-top: 0.75rem;
    color: var(--ascend-secondary-light);
}

/* At phone width the card already pads the row; keep the row's own padding
   small so "Not now" and "Decline" can share a line under "Add to my plan". */
@media (max-width: 480px) {
    .coach-item[b-rl873pavq7] {
        padding: 0.75rem 0.7rem;
    }

    .coach-item-actions[b-rl873pavq7] {
        gap: 0.35rem 0.4rem;
    }
}
/* /Components/Shared/CoachLinkChips.razor.rz.scp.css */
/* #8744 - the link chips under a coach reply: quiet, cyan-outlined pills in the brand's accent, one
   row that wraps. Touch-sized on a coarse pointer. */
.coach-link-chips[b-52mdrlcf7a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.coach-link-chip[b-52mdrlcf7a] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 2rem;
    padding: 0.3rem 0.5rem 0.3rem 0.8rem;
    border: 1px solid rgba(49, 221, 227, 0.45);
    border-radius: 50px;
    background: rgba(49, 221, 227, 0.08);
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    max-width: 100%;
}

.coach-link-chip span[b-52mdrlcf7a] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coach-link-chip:hover[b-52mdrlcf7a],
.coach-link-chip:focus-visible[b-52mdrlcf7a] {
    background: rgba(49, 221, 227, 0.18);
    border-color: var(--ascend-accent);
}

.coach-link-chip:focus-visible[b-52mdrlcf7a] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .coach-link-chip[b-52mdrlcf7a] {
        min-height: 2.75rem;
        padding: 0.5rem 0.7rem 0.5rem 1rem;
    }
}
/* /Components/Shared/CoachListingFieldList.razor.rz.scp.css */
/* #8102 - a coach listing's fields, each with its provenance label. Brand tokens only. */
.clf-list[b-0g9aoh6lkh] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
}

.clf-row[b-0g9aoh6lkh] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.clf-name[b-0g9aoh6lkh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
}

.clf-field[b-0g9aoh6lkh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
}

.clf-provenance[b-0g9aoh6lkh] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
}

.clf-verified[b-0g9aoh6lkh] {
    border-color: var(--ascend-secondary-light);
    color: var(--ascend-secondary-light);
}

/* The coach's own text: escaped by Razor; only its line breaks are honored. */
.clf-value[b-0g9aoh6lkh] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.clf-unanswered[b-0g9aoh6lkh] {
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
}
/* /Components/Shared/CoachOtherChatPanel.razor.rz.scp.css */
/* #8386 - the "From your other chat" panel: a quiet, collapsed disclosure above a coach chat. It is a
   record, not a conversation, so it is set back from the chat bubbles: muted text, a thin accent
   border, no bubble shapes. Wraps at phone width; the turns scroll inside a capped height. */
.coach-other-chat[b-28tdzewwk6] {
    margin: 0 0 0.75rem;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 10px;
    background: rgba(49, 221, 227, 0.05);
    font-family: var(--ascend-font-secondary);
    max-width: 100%;
    min-width: 0;
}

.coach-other-chat-summary[b-28tdzewwk6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    color: var(--ascend-accent-light);
    font-size: 0.875rem;
    font-weight: 600;
    list-style-position: inside;
    overflow-wrap: anywhere;
}

.coach-other-chat-summary:focus-visible[b-28tdzewwk6] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
    border-radius: 10px;
}

.coach-other-chat-body[b-28tdzewwk6] {
    padding: 0 0.9rem 0.8rem;
}

.coach-other-chat-note[b-28tdzewwk6] {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.coach-other-chat-turns[b-28tdzewwk6] {
    margin: 0 0 0.6rem;
    padding: 0;
    list-style: none;
    max-height: 22rem;
    overflow-y: auto;
}

/* The scrolling list is its own tab stop (a keyboard-only member scrolls it with the arrow keys). */
.coach-other-chat-turns:focus-visible[b-28tdzewwk6] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.coach-other-chat-turn[b-28tdzewwk6] {
    padding: 0.45rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
}

.coach-other-chat-role[b-28tdzewwk6] {
    display: inline-block;
    margin-right: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
}

.coach-other-chat-turn-coach .coach-other-chat-role[b-28tdzewwk6] {
    color: var(--ascend-accent-light);
}

.coach-other-chat-chip[b-28tdzewwk6] {
    display: inline-block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
}

.coach-other-chat-text[b-28tdzewwk6] {
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* The coach's turns are rendered markdown: their elements carry no scope attribute. */
.coach-other-chat-turn-coach .coach-other-chat-text[b-28tdzewwk6] {
    white-space: normal;
}

.coach-other-chat-text[b-28tdzewwk6]  p {
    margin: 0 0 0.35rem;
}

.coach-other-chat-text[b-28tdzewwk6]  ul,
.coach-other-chat-text[b-28tdzewwk6]  ol {
    margin: 0 0 0.35rem;
    padding-left: 1.2rem;
}

.coach-other-chat-shortened[b-28tdzewwk6],
.coach-other-chat-gap[b-28tdzewwk6] {
    font-size: 0.75rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
}

.coach-other-chat-gap[b-28tdzewwk6] {
    padding: 0.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.coach-other-chat-proposal[b-28tdzewwk6] {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.coach-other-chat-link[b-28tdzewwk6] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 2.75rem;
    color: var(--ascend-accent-light);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.coach-other-chat-link:hover[b-28tdzewwk6],
.coach-other-chat-link:focus-visible[b-28tdzewwk6] {
    text-decoration: underline;
}

.coach-other-chat-link:focus-visible[b-28tdzewwk6] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}
/* /Components/Shared/CoachPlanOverlay.razor.rz.scp.css */
/* #6018 / #8091 - the student's accepted focus from their coach, on the plan page.
   Quiet rows, no badge, no celebration (Recognition Follows Improvement). Tokens only
   (ScopedCssBoundaryTests). Same row shape as the COACH SUGGESTIONS card above it. */

.coach-overlay[b-goqj0pobih] {
    min-width: 0;
    margin-bottom: 1.25rem;
}

.coach-overlay-list[b-goqj0pobih] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.coach-overlay-item[b-goqj0pobih] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.coach-overlay-kicker[b-goqj0pobih] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.coach-overlay-title[b-goqj0pobih] {
    margin-top: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
}

.coach-overlay-line[b-goqj0pobih] {
    margin: 0.35rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    overflow-wrap: anywhere;
}

.coach-overlay-statement[b-goqj0pobih] {
    color: rgba(255, 255, 255, 0.86);
}

/* #8091 - "what we covered": the coach's own words, as plain text. The coach's line
   breaks are kept (pre-line), nothing else of their formatting is. A long note starts
   shortened and opens in place, so it never pushes the plan down the page unasked. */
.coach-overlay-covered[b-goqj0pobih] {
    white-space: pre-line;
    color: rgba(255, 255, 255, 0.86);
}

.coach-overlay-more[b-goqj0pobih] {
    margin-top: 0.4rem;
}

@media (max-width: 480px) {
    .coach-overlay-item[b-goqj0pobih] {
        padding: 0.75rem 0.7rem;
    }
}
/* /Components/Shared/CoachPlanSuggestions.razor.rz.scp.css */
/* #8531 - the student's plan suggestions from their coach, at the top of the plan page.
   Quiet rows, no badge, no celebration (Recognition Follows Improvement). Tokens only
   (ScopedCssBoundaryTests). Same row shape as "From your coaches" on Today. */

.coach-suggestions[b-2i1h8dm91e] {
    min-width: 0;
    margin-bottom: 1.25rem;
}

.coach-suggestions-list[b-2i1h8dm91e] {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.coach-suggestion[b-2i1h8dm91e] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.coach-suggestion-kicker[b-2i1h8dm91e] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.coach-suggestion-title[b-2i1h8dm91e] {
    margin-top: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
}

.coach-suggestion-line[b-2i1h8dm91e] {
    margin: 0.35rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    overflow-wrap: anywhere;
}

.coach-suggestions-help[b-2i1h8dm91e] {
    margin-top: 0;
}

.coach-suggestion-text[b-2i1h8dm91e] {
    white-space: pre-wrap;
    color: rgba(255, 255, 255, 0.86);
}

.coach-suggestion-actions[b-2i1h8dm91e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.coach-suggestions-message[b-2i1h8dm91e] {
    margin-top: 0.75rem;
}

@media (max-width: 480px) {
    .coach-suggestion[b-2i1h8dm91e] {
        padding: 0.75rem 0.7rem;
    }

    .coach-suggestion-actions[b-2i1h8dm91e] {
        gap: 0.35rem 0.4rem;
    }
}
/* /Components/Shared/CoachProfileLink.razor.rz.scp.css */
/* Bug #6895 — the verified link keeps the styling the page already used; the
   unverified fallback is deliberately quieter than a real profile link so the
   two never read as the same promise. */

.coach-link[b-cqeaegv0xq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

.coach-link:hover[b-cqeaegv0xq] {
    color: var(--ascend-accent-light);
}

.coach-link-lichess[b-cqeaegv0xq] {
    color: var(--ascend-text-light);
    background: rgba(49, 221, 227, 0.15);
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(49, 221, 227, 0.3);
}

.coach-link-lichess:hover[b-cqeaegv0xq] {
    background: rgba(49, 221, 227, 0.25);
    color: var(--ascend-accent);
}

.coach-link-unverified[b-cqeaegv0xq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.coach-platform[b-cqeaegv0xq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: var(--ascend-text-muted);
}

.coach-link-search[b-cqeaegv0xq] {
    color: var(--ascend-text-muted);
    font-size: 0.75rem;
}

.coach-link-search:hover[b-cqeaegv0xq] {
    color: var(--ascend-accent);
}
/* /Components/Shared/CoachWalkthroughPanel.razor.rz.scp.css */
.cwp[b-8nz8g5wn1a] {
    display: grid;
    /* minmax(min(280px, 100%), 420px), never a bare 280px floor: a track floor
       wider than the container overflows the page rather than wrapping (#7296). */
    grid-template-columns: minmax(min(280px, 100%), 420px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* Both columns must be free to shrink. A grid item defaults to
   min-width: auto, which resolves to its MIN-CONTENT - so the board column or
   the coach column can size the track wider than the phone and push the panel
   off the right edge, where html/body's overflow-x: hidden makes it
   unreachable and unzoomable. Same defect class as #7296 on /games; this panel
   is the other surface the customer reported clipped coach copy on. */
.cwp > *[b-8nz8g5wn1a] {
    min-width: 0;
}

@media (max-width: 820px) {
    .cwp[b-8nz8g5wn1a] {
        /* minmax(0, 1fr), never a bare `1fr` - `1fr` is minmax(AUTO, 1fr) and
           that auto minimum is the item's min-content (#7296). */
        grid-template-columns: minmax(0, 1fr);
    }
}

.cwp-progress[b-8nz8g5wn1a] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.cwp-progress-bar[b-8nz8g5wn1a] {
    flex: 1;
    height: 4px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.cwp-progress-fill[b-8nz8g5wn1a] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #31DDE3, #B88536);
    transition: width 0.3s ease;
}

.cwp-moment-meta[b-8nz8g5wn1a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.cwp-chip[b-8nz8g5wn1a] {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 50px;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.35);
    color: #31DDE3;
}

.cwp-chip.clock[b-8nz8g5wn1a] {
    background: rgba(184, 133, 54, 0.15);
    border-color: rgba(184, 133, 54, 0.4);
    color: #B88536;
}

/* #6491 — plan-triggered moment: names the Verified structure the moment sits in.
   Distinct from the clock chip so "why it surfaced" reads at a glance (clock / plan /
   both). Neutral wording only — never asserts the move was wrong (the drift judgment
   is the coach's at Reveal). */
.cwp-chip.plan[b-8nz8g5wn1a] {
    background: rgba(49, 221, 227, 0.14);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
    text-transform: none;
    letter-spacing: 0.02em;
}

.cwp-why-moment[b-8nz8g5wn1a] {
    margin: 0.6rem 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

/* "Keep this position" affordances under the board (capture parity). */
.cwp-capture-row[b-8nz8g5wn1a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cwp-dialogue-col[b-8nz8g5wn1a] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cwp-coach[b-8nz8g5wn1a] {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
}

.cwp-coach.reveal[b-8nz8g5wn1a] {
    border-color: rgba(184, 133, 54, 0.4);
}

.cwp-coach-label[b-8nz8g5wn1a] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #31DDE3;
    margin-bottom: 0.4rem;
}

.cwp-coach-msg[b-8nz8g5wn1a] {
    margin: 0;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
    white-space: pre-wrap;
}

/* Rendered-markdown coach copy: the model emits markdown, so reset the pre-wrap (block
   elements handle their own spacing) and keep headings inline-sized — this is a tight
   chat-style debrief, not a document. */
.cwp-md[b-8nz8g5wn1a] {
    white-space: normal;
}

.cwp-md > :first-child[b-8nz8g5wn1a] {
    margin-top: 0;
}

.cwp-md > :last-child[b-8nz8g5wn1a] {
    margin-bottom: 0;
}

.cwp-md[b-8nz8g5wn1a]  p {
    margin: 0 0 0.6rem;
}

/* Extra parent-class specificity + !important so a global h1-h6 colour rule can't win
   and render these the same dark as the card background (the "can't see the headers"
   canary bug). Belt-and-suspenders: the reveal prompt also forbids headings outright. */
.cwp-coach-msg.cwp-md[b-8nz8g5wn1a]  h1,
.cwp-coach-msg.cwp-md[b-8nz8g5wn1a]  h2,
.cwp-coach-msg.cwp-md[b-8nz8g5wn1a]  h3,
.cwp-coach-msg.cwp-md[b-8nz8g5wn1a]  h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff !important;
    margin: 0.6rem 0 0.3rem;
}

.cwp-md[b-8nz8g5wn1a]  ul,
.cwp-md[b-8nz8g5wn1a]  ol {
    margin: 0 0 0.6rem;
    padding-left: 1.2rem;
}

.cwp-md[b-8nz8g5wn1a]  strong {
    color: #ffffff;
}

.cwp-board-hint[b-8nz8g5wn1a] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.cwp-board-hint strong[b-8nz8g5wn1a] {
    color: #31DDE3;
}

.cwp-try-again[b-8nz8g5wn1a] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #31DDE3;
    text-decoration: underline;
    cursor: pointer;
}

.cwp-try-again:disabled[b-8nz8g5wn1a] {
    color: rgba(255, 255, 255, 0.35);
    cursor: default;
}

.cwp-guard-note[b-8nz8g5wn1a] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #B88536;
}

.cwp-field[b-8nz8g5wn1a] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cwp-field label[b-8nz8g5wn1a] {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.65);
}

.cwp-input[b-8nz8g5wn1a] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

.cwp-input:focus[b-8nz8g5wn1a] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.cwp-input[b-8nz8g5wn1a]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Self-assessment: two prominent, equal-weight choices (the predict-first commitment). */
.cwp-selfassess[b-8nz8g5wn1a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cwp-assess-btn[b-8nz8g5wn1a] {
    flex: 1 1 0;
    min-width: 12rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cwp-assess-btn:hover:not(:disabled)[b-8nz8g5wn1a] {
    border-color: rgba(49, 221, 227, 0.5);
    color: #ffffff;
}

.cwp-assess-btn.selected[b-8nz8g5wn1a] {
    background: rgba(49, 221, 227, 0.15);
    border-color: #31DDE3;
    color: #31DDE3;
}

.cwp-assess-btn:disabled[b-8nz8g5wn1a] {
    opacity: 0.5;
    cursor: default;
}

.cwp-taxonomy[b-8nz8g5wn1a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cwp-tax-btn[b-8nz8g5wn1a] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.8);
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cwp-tax-btn:hover:not(:disabled)[b-8nz8g5wn1a] {
    border-color: rgba(49, 221, 227, 0.5);
    color: #ffffff;
}

.cwp-tax-btn.selected[b-8nz8g5wn1a] {
    background: rgba(49, 221, 227, 0.15);
    border-color: #31DDE3;
    color: #31DDE3;
}

.cwp-tax-btn:disabled[b-8nz8g5wn1a] {
    opacity: 0.5;
    cursor: default;
}

/* #6399 - the per-moment "show me the answer" escape hatch. Deliberately quiet
   next to the primary predict-first flow, but plainly available and never styled
   as a warning or an error: skipping is a valid, neutral choice. */
.cwp-skip[b-8nz8g5wn1a] {
    display: flex;
}

.cwp-skip-btn[b-8nz8g5wn1a] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.15s ease;
}

.cwp-skip-btn:hover:not(:disabled)[b-8nz8g5wn1a] {
    color: var(--ascend-accent);
}

.cwp-skip-btn:disabled[b-8nz8g5wn1a] {
    color: rgba(255, 255, 255, 0.35);
    cursor: default;
}

.cwp-unavailable[b-8nz8g5wn1a] {
    margin: 0;
    font-size: 0.9rem;
    color: #ef4444;
}

.cwp-engine[b-8nz8g5wn1a] {
    padding: 1rem 1.25rem;
    background: rgba(184, 133, 54, 0.08);
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 16px;
}

.cwp-engine-label[b-8nz8g5wn1a] {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #B88536;
    margin-bottom: 0.6rem;
}

.cwp-engine-rows[b-8nz8g5wn1a] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cwp-engine-rows > div[b-8nz8g5wn1a] {
    display: flex;
    justify-content: space-between;
    font-size: 0.92rem;
}

.cwp-engine-rows span[b-8nz8g5wn1a] {
    color: rgba(255, 255, 255, 0.6);
}

.cwp-engine-rows strong[b-8nz8g5wn1a] {
    color: #ffffff;
}

.cwp-your-pick[b-8nz8g5wn1a] {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.cwp-log[b-8nz8g5wn1a] {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
}

.cwp-log-head[b-8nz8g5wn1a] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #31DDE3;
    margin-bottom: 0.5rem;
}

.cwp-log-lesson[b-8nz8g5wn1a] {
    margin: 0 0 0.75rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.cwp-logged[b-8nz8g5wn1a] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #10b981;
    font-size: 0.9rem;
}

.cwp-next[b-8nz8g5wn1a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cwp-done[b-8nz8g5wn1a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

.cwp-empty[b-8nz8g5wn1a] {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    padding: 2rem;
}

[b-8nz8g5wn1a] .cwp-input {
    font-family: inherit;
}

/* Moment-selection fade (task #1131). The board + dialogue columns are re-keyed on the
   moment index, so this keyframe replays each time the user advances to a new critical
   moment — a subtle rise-and-fade instead of an abrupt swap. It does NOT play on the
   in-moment Elicit->Reveal transition (the key doesn't change there). */
@keyframes cwpMomentFadeIn-b-8nz8g5wn1a {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cwp-fade[b-8nz8g5wn1a] {
    animation: cwpMomentFadeIn-b-8nz8g5wn1a 0.35s ease both;
}

/* Honor reduced-motion: no movement, no fade for users who opt out. */
@media (prefers-reduced-motion: reduce) {
    .cwp-fade[b-8nz8g5wn1a] {
        animation: none;
    }
}

/* #6010 — the plan-citation line on a Reveal turn. Verified = coached against
   the named plan (accent edge); withheld = named honestly without asserting
   plans (neutral edge). Absent entirely when plan-deviation coaching is off. */
.cwp-plan-ref[b-8nz8g5wn1a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
}

.cwp-plan-ref.verified[b-8nz8g5wn1a] {
    border-left: 3px solid var(--ascend-accent);
}

.cwp-plan-ref.verified strong[b-8nz8g5wn1a] {
    color: var(--ascend-accent);
}

.cwp-plan-ref.withheld[b-8nz8g5wn1a] {
    border-left: 3px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.65);
}

/* #7137 - the lifetime coached-walkthrough standing banner (capped, not locked).
   Neutral, honest chrome: it states where the user stands before a walkthrough
   starts, and at exhaustion it carries the plans CTA without error styling. */
.cwp-allowance[b-8nz8g5wn1a] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.cwp-allowance i[b-8nz8g5wn1a] {
    color: var(--ascend-accent);
    flex-shrink: 0;
}

.cwp-allowance strong[b-8nz8g5wn1a] {
    color: var(--ascend-accent);
}

.cwp-allowance.exhausted[b-8nz8g5wn1a] {
    border-color: rgba(184, 133, 54, 0.35);
    background: rgba(184, 133, 54, 0.08);
}

.cwp-allowance.exhausted i[b-8nz8g5wn1a] {
    color: var(--ascend-secondary);
}

.cwp-allowance[b-8nz8g5wn1a]  .cwp-allowance-cta {
    flex-shrink: 0;
    white-space: nowrap;
}

/* #7137 - a tier/allowance refusal is a product state, not an outage: it must
   never wear the red error color the true unavailability states use. */
.cwp-unavailable.tier[b-8nz8g5wn1a] {
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Shared/CommentaryNavIndicator.razor.rz.scp.css */
/* #6934 - the cross-page commentary signal. It is information a person is
   waiting on, not a re-engagement prompt, so it reads as a quiet chip - never
   as an alert, and (owner walk 2026-08-10) never as a nav destination either:
   a count is STATUS. Chip geometry, so several counts share one row inside
   NavStatusRow instead of each taking a nav row of its own. */

.commentary-signal[b-fu2a0eryzj] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 50px;
    line-height: 1;
    white-space: nowrap;
    color: var(--ascend-text-light);
    text-decoration: none;
    background: color-mix(in srgb, var(--ascend-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 40%, transparent);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.commentary-signal:hover[b-fu2a0eryzj] {
    background: color-mix(in srgb, var(--ascend-accent) 24%, transparent);
    border-color: color-mix(in srgb, var(--ascend-accent) 60%, transparent);
    color: var(--ascend-text-light);
}

/* Keyboard reachability is the other half of the accessible name: the chip is
   an anchor, so it is tabbable, and the focus ring must survive the shrink. */
.commentary-signal:focus-visible[b-fu2a0eryzj] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.commentary-signal-icon[b-fu2a0eryzj] {
    color: var(--ascend-accent);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.commentary-signal-count[b-fu2a0eryzj] {
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Mobile header: the chip sits on the header bar beside the session timer,
   where the surrounding chrome is already dark - so it drops its own. */
.commentary-signal-compact[b-fu2a0eryzj] {
    padding: 0.35rem 0.5rem;
    background: transparent;
    border-color: transparent;
}


/* #7736 — the commentary chip measured 43x27 (49x25 in its compact form) and
   appears on nearly every member surface. It is an inline pill in a status
   row, so it takes a pseudo-element hit area rather than a min-height: the
   pill keeps its shape and the finger gets 44px. It sits alone in its row, so
   there is no neighbour for the invisible area to steal taps from.

   ::before, NOT ::after, and that is not a style preference. app.css draws the
   global link underline on
   `a:not([class*=btn]):not([class*=button]):not(.nav-link):not(.logo-link)::after`
   - four :not() arguments, so it weighs (0,4,1) and beats this file's
   (0,2,0)+scope. The first attempt here DID apply and was then overwritten to
   `height: 2px` by that underline bar; the live gate measured the pill at 43x27
   and said so, which is the only reason it was caught. ::before is unclaimed,
   so it wins by not competing. */
@media (hover: none) and (pointer: coarse) {
    .commentary-signal[b-fu2a0eryzj] {
        position: relative;
    }

    .commentary-signal[b-fu2a0eryzj]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: var(--touch-target);
        min-width: var(--touch-target);
        transform: translate(-50%, -50%);
    }
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
/* Overlay */
.confirm-dialog-overlay[b-ufwhrud1ii] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-ufwhrud1ii 0.2s ease;
    /* #7976 walk: keep a margin so a tall dialog never touches the screen edges. */
    padding: 1rem;
    box-sizing: border-box;
}

@keyframes fadeIn-b-ufwhrud1ii {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Dialog */
.confirm-dialog[b-ufwhrud1ii] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    /* #8715 slice 8715-2 final review: the dialog paints its own navy surface, so it sets its own text color too.
       Without it, caller content (ChildContent) and the warning icon inherited the HOST's color, which outside a
       PageContainer is the body's --ascend-text-primary (#0f172a), the same navy: the paused card's Stop sharing
       lesson and refund lines were invisible. Pinned by ConfirmDialogOwnTextColorTests. */
    color: var(--ascend-text-light);
    padding: 2rem;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(49, 221, 227, 0.1);
    animation: slideIn-b-ufwhrud1ii 0.3s ease;
    /* #7976 walk: a long message (the dual-role deletion disclosure) made the dialog
       683px tall in a 664px phone viewport, clipping its top and bottom off-screen.
       The dialog now never exceeds the viewport and scrolls inside itself. */
    box-sizing: border-box;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 480px) {
    .confirm-dialog[b-ufwhrud1ii] {
        padding: 1.25rem;
        width: 100%;
    }

    .confirm-dialog-icon[b-ufwhrud1ii] {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
    }
}

@keyframes slideIn-b-ufwhrud1ii {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Icon */
.confirm-dialog-icon[b-ufwhrud1ii] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    border: 2px solid rgba(239, 68, 68, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn-b-ufwhrud1ii 0.4s ease;
}

.confirm-dialog-icon[b-ufwhrud1ii]  i {
    font-size: 32px;
}

@keyframes scaleIn-b-ufwhrud1ii {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Title */
.confirm-dialog-title[b-ufwhrud1ii] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    margin: 0 0 1rem 0;
}

/* Message */
.confirm-dialog-message[b-ufwhrud1ii] {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 0 0 2rem 0;
}

/* Optional reason capture (#6949) - rendered only when ReasonLabel is set */
.confirm-dialog-reason[b-ufwhrud1ii] {
    margin: 0 0 1.5rem 0;
    text-align: left;
}

.confirm-dialog-reason-label[b-ufwhrud1ii] {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-text-secondary);
}

.confirm-dialog-reason-input[b-ufwhrud1ii] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0.75rem 1rem;
    resize: vertical;
}

.confirm-dialog-reason-input:focus[b-ufwhrud1ii] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

/* Actions */
.confirm-dialog-actions[b-ufwhrud1ii] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.confirm-dialog-actions button[b-ufwhrud1ii] {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .confirm-dialog[b-ufwhrud1ii] {
        padding: 1.5rem;
    }

    .confirm-dialog-actions[b-ufwhrud1ii] {
        flex-direction: column;
    }

    .confirm-dialog-actions button[b-ufwhrud1ii] {
        width: 100%;
    }
}
/* /Components/Shared/ConsentNotice.razor.rz.scp.css */
/* #7762 - THE NOTICE IS ANCHORED BY BOTH EDGES, NOT BY ITS CENTER.

   What was here before was `left: 50%; transform: translateX(-50%)` with
   `max-width: min(640px, calc(100vw - 2 * var(--space-lg)))`. A fixed box
   with only `left` set is shrink-to-fit, and the space it can grow into is
   everything to the RIGHT of that left edge - so the box could never be
   wider than half the viewport, and the max-width was dead code below
   1328px. Measured on dev at scroll 0: 172px wide at 344, 195px at 390,
   384px at 768, i.e. exactly 50vw every time, against a 312px content
   column at 344. That is the "narrow box, narrower than the copy it covers"
   in the bug: at 344 it stood 260px tall in the lower half of the screen
   with the pricing intro paragraph running out from behind both sides.

   Pinning left AND right makes `width: auto` resolve to FILL instead of
   shrink-to-fit, `max-width` finally binds, and `margin-inline: auto`
   centers what is left over. Desktop is unchanged by construction - 640px
   centered, which is what it already computed at 1440 - and every width
   below 1328 gains the width it was always supposed to have. */
.consent-notice[b-09liv0xqrw] {
    position: fixed;
    bottom: var(--space-lg);
    left: var(--space-lg);
    right: var(--space-lg);
    width: auto;
    max-width: 640px;
    margin-inline: auto;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    /* #7762 - OPAQUE, not 0.96/0.98. The old stops were within a rounding
       error of solid and read as solid on a desktop card covering nothing,
       but a 2-4% window over a paragraph of bright text on a near-black page
       ghosts the glyphs through, and at phone width the bar covers six lines
       of it at once. Same two brand colors, through their tokens rather than
       the raw values the rgba() form was hiding. */
    background: linear-gradient(135deg, var(--ascend-bg-card), var(--ascend-bg-dark));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.consent-notice p[b-09liv0xqrw] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.consent-notice a[b-09liv0xqrw] {
    color: var(--ascend-accent);
}

.consent-dismiss[b-09liv0xqrw] {
    background: transparent;
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 50px;
    color: var(--ascend-accent);
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.consent-dismiss:hover[b-09liv0xqrw] {
    background: rgba(49, 221, 227, 0.1);
}

/* #7762, the second half. Widening the card is not enough on a phone: a
   floating card with a gap under it still lands in the middle of the reading
   column, and the copy keeps running out from under its shadow. At phone
   width the notice becomes what a consent notice is everywhere else - a bar
   welded to the bottom edge, edge to edge, with only its top border drawn.
   Nothing then sits over the heading or the opening paragraph; the visitor
   reads the page above it and dismisses it when they are ready.

   Flush to the edge means the rounded corners and the side/bottom borders go
   too: a radius on a corner that touches the screen edge just shows a sliver
   of page through it. The safe-area inset keeps the button clear of a home
   indicator on a notched phone and is 0 everywhere else.

   480px and not 344px: this is a LAYOUT switch (card vs. bar), and the card
   reads badly on any phone, not just on a folded one. The breakpoint is the
   one this stylesheet already used for the column switch. */
@media (max-width: 480px) {
    .consent-notice[b-09liv0xqrw] {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        text-align: center;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    }
}

/* #7762 / #7783 - the dismiss button is the only control here and it was
   34px tall, measured at 344, 390 and 768 with a coarse pointer. The live
   #7736 touch ratchet cannot reach it: the notice renders only when the
   visitor-analytics flag is on for the viewer AND the visitor has not
   already dismissed it, so CI's signed-in account never sees it. The floor
   is declared here, inside the pointer query so desktop density is
   untouched, and it grows the real box - no pseudo-element hit area, which
   at this size would reach over the Privacy link sitting beside it. */
@media (hover: none) and (pointer: coarse) {
    .consent-dismiss[b-09liv0xqrw] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/CornerEditorOverlay.razor.rz.scp.css */
/* Mirrors CameraCaptureModal exactly — fixed full-viewport overlay, content
   fills it, action bar pinned to the bottom via absolute positioning so the
   buttons always sit on top of the photo, never below it.

   100dvw/dvh (not vh) so the action bar lands above the browser's collapsing
   address bar on mobile. backdrop-filter on a Modal ancestor doesn't trap
   us because dvh on a fixed element still pins to the visual viewport. */
.corner-editor-overlay[b-wjl6u0rahk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background: #000;
    z-index: 10000;
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
}

.corner-editor-content[b-wjl6u0rahk] {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    overflow: hidden;
}

/* Title + hint as a translucent bar at the top, fading into the photo. */
.corner-editor-title[b-wjl6u0rahk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: calc(0.75rem + env(safe-area-inset-top, 0)) 1rem 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.97);
    text-align: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    z-index: 2;
    pointer-events: none;
}

.corner-editor-hint[b-wjl6u0rahk] {
    position: absolute;
    top: calc(2.4rem + env(safe-area-inset-top, 0));
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 1rem 0.6rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

/* Photo container is the editor VIEWPORT: the band between the title/hint
   chrome and the action bar. C# measures this box (measureCornerEditor) and
   fits the photo to its FULL WIDTH via CornerEditorGeometry — #6997 reverted
   the #6942b contain fit (shrinking the photo made the corners harder to
   place; precision needs pixels). No max-size rule may shrink the image below
   the viewport fit. A taller-than-viewport photo overflows the fold by
   design; the caller-seeded starting quad (detection result or inset
   default), never a smaller image, keeps the handles reachable. overflow
   stays visible because image and drag canvas may extend beyond this band;
   the overlay root still clips at the screen edge. isolation:isolate confines
   the canvas to this stacking context. */
.corner-editor-container[b-wjl6u0rahk] {
    position: absolute;
    inset: calc(4.8rem + env(safe-area-inset-top, 0px)) 0
           calc(5.6rem + env(safe-area-inset-bottom, 0px));
    background: #000;
    overflow: visible;
    isolation: isolate;
}

/* Action bar overlays the bottom of the content via absolute positioning —
   never pushed below the fold. Gradient lifts the buttons off the photo
   without a hard solid bar that hides corner detail. */
.corner-editor-actions[b-wjl6u0rahk] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0));
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    z-index: 3;
    /* The gradient must never eat a corner drag that strays under it — only
       the buttons themselves take pointer events (#6942). */
    pointer-events: none;
}

.corner-editor-actions .corner-confirm-btn[b-wjl6u0rahk],
.corner-editor-actions .corner-cancel-btn[b-wjl6u0rahk] {
    pointer-events: auto;
}

.corner-confirm-btn[b-wjl6u0rahk] {
    min-width: 10rem;
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    border: none;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: var(--ascend-primary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.45);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.corner-confirm-btn:not(:disabled):active[b-wjl6u0rahk] {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(49, 221, 227, 0.5);
}

.corner-confirm-btn:disabled[b-wjl6u0rahk] {
    opacity: 0.55;
    cursor: not-allowed;
}

.corner-confirm-btn[b-wjl6u0rahk]  i {
    font-size: 0.875rem;
}

.corner-cancel-btn[b-wjl6u0rahk] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    border-radius: 50px;
    padding: 0.6rem 1.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.corner-cancel-btn:not(:disabled):active[b-wjl6u0rahk] {
    background: rgba(255, 255, 255, 0.15);
}

.corner-cancel-btn:disabled[b-wjl6u0rahk] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* #6716 - touch pass. This overlay is only ever reached from the board-photo
   scan flow, which is a camera flow, so in practice it is always driven by a
   finger; it had no touch sizing at all. Measured before: Confirm 38.4px tall,
   Cancel 37.2px - both under the 44px minimum at EVERY viewport, phone
   included, because the sizing was never viewport- or pointer-conditional.
   Keyed on the pointer so mouse/desktop is unchanged. The drag handles
   themselves are already a 64px hit circle (HANDLE_RADIUS + 10 in
   PositionSetup.razor.js) and are left alone. */
@media (hover: none) and (pointer: coarse) {
    .corner-editor-actions[b-wjl6u0rahk] {
        gap: 1rem;
    }

    .corner-confirm-btn[b-wjl6u0rahk],
    .corner-cancel-btn[b-wjl6u0rahk] {
        min-height: var(--touch-target);
    }

    .corner-confirm-btn[b-wjl6u0rahk] {
        font-size: 1rem;
    }

    .corner-cancel-btn[b-wjl6u0rahk] {
        font-size: 0.95rem;
        padding: 0.6rem 1.5rem;
    }
}
/* /Components/Shared/CoverSearchModal.razor.rz.scp.css */
.cover-modal-overlay[b-10g5yo10mr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal, 1050);
    backdrop-filter: blur(4px);
}

.cover-modal-card[b-10g5yo10mr] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.99) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 2rem;
    width: 520px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cover-modal-title[b-10g5yo10mr] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0 0 1.25rem;
}

.cover-search-bar[b-10g5yo10mr] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

[b-10g5yo10mr] .cover-search-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.6rem 0.85rem;
    transition: all 0.2s ease;
}

[b-10g5yo10mr] .cover-search-input:focus {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

[b-10g5yo10mr] .cover-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.cover-searching[b-10g5yo10mr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 0;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.cover-spinner[b-10g5yo10mr] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(49, 221, 227, 0.2);
    border-top-color: #31DDE3;
    border-radius: 50%;
    animation: cover-spin-b-10g5yo10mr 1s linear infinite;
}

@keyframes cover-spin-b-10g5yo10mr {
    to { transform: rotate(360deg); }
}

.cover-no-results[b-10g5yo10mr] {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    padding: 1.5rem 0;
}

.cover-grid[b-10g5yo10mr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cover-option[b-10g5yo10mr] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    color: inherit;
}

.cover-option:hover[b-10g5yo10mr] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.05);
    transform: translateY(-2px);
}

.cover-option img[b-10g5yo10mr] {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 4px;
}

.cover-option-title[b-10g5yo10mr] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cover-modal-footer[b-10g5yo10mr] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}
/* /Components/Shared/CriticalPositionsTimeline.razor.rz.scp.css */
/* Critical Positions Timeline */
.critical-positions-timeline[b-plx6iejme2] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Header */
.timeline-header[b-plx6iejme2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.timeline-header h3[b-plx6iejme2] {
    font-family: 'condor', sans-serif;
    font-size: 0.875rem;
    color: #31DDE3;
    margin: 0;
    letter-spacing: 0.05em;
}

.count-badge[b-plx6iejme2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background: rgba(49, 221, 227, 0.2);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #31DDE3;
}

/* Timeline Track */
.timeline-container[b-plx6iejme2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.timeline-track[b-plx6iejme2] {
    position: relative;
    height: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    margin: 0 0.5rem;
}

.timeline-marker[b-plx6iejme2] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 1;
}

.marker-dot[b-plx6iejme2] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #6b7280;
    border: 2px solid rgba(15, 23, 42, 0.9);
    transition: all 0.2s ease;
    box-shadow: 0 0 0 calc(var(--significance) * 0.05) rgba(255, 255, 255, 0.1);
}

.timeline-marker:hover .marker-dot[b-plx6iejme2] {
    transform: scale(1.3);
}

/* Type-specific marker colors */
.timeline-marker.eval-swing .marker-dot[b-plx6iejme2] { background: #f59e0b; }
.timeline-marker.tactical .marker-dot[b-plx6iejme2] { background: #10b981; }
.timeline-marker.missed .marker-dot[b-plx6iejme2] { background: #ef4444; }
.timeline-marker.defensive .marker-dot[b-plx6iejme2] { background: #3b82f6; }
.timeline-marker.opening .marker-dot[b-plx6iejme2] { background: #14b8a6; }
.timeline-marker.endgame .marker-dot[b-plx6iejme2] { background: #6366f1; }
.timeline-marker.blunder .marker-dot[b-plx6iejme2] { background: #dc2626; }
.timeline-marker.wdl-variance .marker-dot[b-plx6iejme2] { background: #a855f7; }
.timeline-marker.only-move .marker-dot[b-plx6iejme2] { background: #22c55e; }
.timeline-marker.sharp .marker-dot[b-plx6iejme2] { background: #f97316; }
.timeline-marker.turning-point .marker-dot[b-plx6iejme2] { background: #06b6d4; }

.timeline-labels[b-plx6iejme2] {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
}

.label-start[b-plx6iejme2],
.label-end[b-plx6iejme2] {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Positions List */
.positions-list[b-plx6iejme2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.position-item[b-plx6iejme2] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.position-item:hover[b-plx6iejme2] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(49, 221, 227, 0.2);
}

.position-item.selected[b-plx6iejme2] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.4);
}

/* Type-specific item colors */
.position-item.eval-swing[b-plx6iejme2] { border-left: 3px solid #f59e0b; }
.position-item.tactical[b-plx6iejme2] { border-left: 3px solid #10b981; }
.position-item.missed[b-plx6iejme2] { border-left: 3px solid #ef4444; }
.position-item.defensive[b-plx6iejme2] { border-left: 3px solid #3b82f6; }
.position-item.opening[b-plx6iejme2] { border-left: 3px solid #14b8a6; }
.position-item.endgame[b-plx6iejme2] { border-left: 3px solid #6366f1; }
.position-item.blunder[b-plx6iejme2] { border-left: 3px solid #dc2626; }
.position-item.wdl-variance[b-plx6iejme2] { border-left: 3px solid #a855f7; }
.position-item.only-move[b-plx6iejme2] { border-left: 3px solid #22c55e; }
.position-item.sharp[b-plx6iejme2] { border-left: 3px solid #f97316; }
.position-item.turning-point[b-plx6iejme2] { border-left: 3px solid #06b6d4; }

.position-icon[b-plx6iejme2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    flex-shrink: 0;
}

.position-icon i[b-plx6iejme2] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Type-specific icon colors */
.position-item.eval-swing .position-icon i[b-plx6iejme2] { color: #f59e0b; }
.position-item.tactical .position-icon i[b-plx6iejme2] { color: #10b981; }
.position-item.missed .position-icon i[b-plx6iejme2] { color: #ef4444; }
.position-item.defensive .position-icon i[b-plx6iejme2] { color: #3b82f6; }
.position-item.opening .position-icon i[b-plx6iejme2] { color: #14b8a6; }
.position-item.endgame .position-icon i[b-plx6iejme2] { color: #6366f1; }
.position-item.blunder .position-icon i[b-plx6iejme2] { color: #dc2626; }
.position-item.wdl-variance .position-icon i[b-plx6iejme2] { color: #a855f7; }
.position-item.only-move .position-icon i[b-plx6iejme2] { color: #22c55e; }
.position-item.sharp .position-icon i[b-plx6iejme2] { color: #f97316; }
.position-item.turning-point .position-icon i[b-plx6iejme2] { color: #06b6d4; }

.position-content[b-plx6iejme2] {
    flex: 1;
    min-width: 0;
}

.position-header[b-plx6iejme2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.move-number[b-plx6iejme2] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.position-type[b-plx6iejme2] {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6);
}

.position-explanation[b-plx6iejme2] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.4;
}

.eval-swing[b-plx6iejme2] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

.eval-swing i[b-plx6iejme2] {
    font-size: 0.5rem;
}

/* Significance Indicator */
.significance-indicator[b-plx6iejme2] {
    width: 4px;
    height: 100%;
    min-height: 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.significance-bar[b-plx6iejme2] {
    width: 100%;
    background: linear-gradient(to top, #31DDE3, #10b981);
    border-radius: 2px;
    transition: height 0.3s ease;
}

/* No Positions State */
.no-positions[b-plx6iejme2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.no-positions i[b-plx6iejme2] {
    font-size: 2rem;
    color: #10b981;
    margin-bottom: 0.75rem;
}

.no-positions p[b-plx6iejme2] {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.no-positions .sub-text[b-plx6iejme2] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.25rem;
}
/* Responsive */
@media (max-width: 768px) {
    .critical-positions-timeline[b-plx6iejme2] {
        padding: 0.75rem;
        border-radius: 12px;
    }

    .positions-list[b-plx6iejme2] {
        max-height: 200px;
    }

    .position-item[b-plx6iejme2] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* /Components/Shared/DeclarationSkeleton.razor.rz.scp.css */
/* DeclarationSkeleton (#9203). Hosted at the top of the build panel, which can be ~184px wide on a
   phone column: every row wraps, nothing has a fixed width, tokens only. Neutral labels: no success
   color, no icon of success. */

.declaration-skeleton[b-g221k8yvsg] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    min-width: 0;
    font-family: var(--ascend-font-secondary);
    color: var(--ascend-text-light);
}

.skeleton-header[b-g221k8yvsg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 0.75rem;
}

.skeleton-title[b-g221k8yvsg] {
    margin: 0;
    flex: 1 1 12rem;
    min-width: 0;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    color: var(--ascend-text-light);
}

.skeleton-subtitle[b-g221k8yvsg] {
    margin: 0 0 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ascend-text-muted);
}

.skeleton-message[b-g221k8yvsg],
.skeleton-band[b-g221k8yvsg],
.skeleton-hint[b-g221k8yvsg] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ascend-text-muted);
}

.skeleton-link[b-g221k8yvsg] {
    color: var(--ascend-accent);
    margin-left: 0.25rem;
}

/* Its own line under the band heading: Razor drops the leading space inside the span, which ran the two
   sentences together ("(990 games)No rating"), seen in the worktree walk. */
.skeleton-band-note[b-g221k8yvsg] {
    display: block;
    font-style: italic;
}

.skeleton-prompt[b-g221k8yvsg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.5rem;
    min-width: 0;
}

.skeleton-prompt.current[b-g221k8yvsg] {
    padding: 0.6rem 0.65rem;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 10px;
    background: var(--ascend-bg-card);
}

.skeleton-line[b-g221k8yvsg] {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--ascend-text-muted);
    overflow-wrap: anywhere;
}

.skeleton-reply[b-g221k8yvsg] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
}

.skeleton-reply-move[b-g221k8yvsg] {
    font-weight: 600;
    color: var(--ascend-text-light);
}

.skeleton-reply-name[b-g221k8yvsg] {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.skeleton-reply-share[b-g221k8yvsg],
.skeleton-reply-state[b-g221k8yvsg] {
    font-size: 0.76rem;
    /* No tabular-nums here: tablet-gothic's tnum feature draws the percent sign as a
       dagger-like glyph, seen in the #9203 walk. The share is one number per row, so
       column alignment buys nothing. */
    color: var(--ascend-text-muted);
}

.skeleton-reply-state[b-g221k8yvsg] {
    color: var(--ascend-warning);
}

.skeleton-prompt .skeleton-band[b-g221k8yvsg],
.skeleton-prompt .skeleton-hint[b-g221k8yvsg] {
    flex: 1 1 100%;
}

/* The shared Button is a child component: its root is reached with ::deep. */
.skeleton-prompt[b-g221k8yvsg]  .skeleton-show {
    align-self: center;
}

.skeleton-header[b-g221k8yvsg]  .skeleton-leave {
    flex: 0 0 auto;
}

.skeleton-prompts[b-g221k8yvsg],
.skeleton-end-lines[b-g221k8yvsg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.skeleton-prompt-row[b-g221k8yvsg] {
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.skeleton-ends[b-g221k8yvsg] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.skeleton-end summary[b-g221k8yvsg] {
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ascend-text-muted);
}

.skeleton-end-lines[b-g221k8yvsg] {
    margin-top: 0.35rem;
    padding-left: 0.9rem;
    gap: 0.25rem;
}

.skeleton-end-lines li[b-g221k8yvsg] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.skeleton-end-detail[b-g221k8yvsg] {
    font-size: 0.74rem;
    color: var(--ascend-text-muted);
}

/* #9203 review - "Check further" and the way back from it. The shared Button is a child component, so
   its root is reached with ::deep; neither stretches across the column. */
.skeleton-continued[b-g221k8yvsg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.75rem;
}

.skeleton-continued .skeleton-message[b-g221k8yvsg] {
    flex: 1 1 12rem;
    min-width: 0;
}

.skeleton-continued[b-g221k8yvsg]  .skeleton-restart,
.declaration-skeleton[b-g221k8yvsg]  .skeleton-check-further {
    flex: 0 0 auto;
    align-self: flex-start;
}

/* #9203 review round 4 - the status switch's wrapper keeps the section's spacing, and is where focus
   lands after a pressed "Check further" or "Start again" reads. A container, not a control: no ring for
   a pointer press, the browser's ring for the keyboard. */
.skeleton-body[b-g221k8yvsg] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.skeleton-body:focus:not(:focus-visible)[b-g221k8yvsg] {
    outline: none;
}

.skeleton-busy[b-g221k8yvsg] {
    font-style: italic;
}
/* /Components/Shared/DeferChapterModal.razor.rz.scp.css */
/* Body + footer content for DeferChapterModal — chrome (overlay, header,
   close button, sizing) lives in the shared Modal.razor. Only style what's
   inside the slots here. */

.defer-explainer[b-g3mcmrxkxq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    background: rgba(49, 221, 227, 0.06);
    border-left: 3px solid rgba(49, 221, 227, 0.5);
    border-radius: 6px;
}

.defer-label[b-g3mcmrxkxq] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

.defer-textarea[b-g3mcmrxkxq] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: var(--ascend-font-secondary);
    resize: vertical;
    min-height: 72px;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.defer-textarea:focus[b-g3mcmrxkxq] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.defer-textarea[b-g3mcmrxkxq]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.defer-charcount[b-g3mcmrxkxq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
    margin-top: 0.25rem;
}

.defer-btn[b-g3mcmrxkxq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.defer-btn-secondary[b-g3mcmrxkxq] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.defer-btn-secondary:hover[b-g3mcmrxkxq] {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.defer-btn-primary[b-g3mcmrxkxq] {
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0a1628;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.defer-btn-primary:hover[b-g3mcmrxkxq] {
    background: linear-gradient(135deg, #42e8ed 0%, #31DDE3 100%);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}
/* /Components/Shared/DeletionDisclosurePanel.razor.rz.scp.css */
/* #7976 - moved from Profile.razor.css with the markup (#5564 / #6898 / #6915).
   The three-bucket erasure disclosure (erased / kept without your name / kept
   as-is) is a definition list because that is what it is: three terms and what
   each one means. */
.ddp-lede[b-sgjnon3p02] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ddp-blocks[b-sgjnon3p02] {
    margin: 0 0 1.25rem;
}

.ddp-blocks dt[b-sgjnon3p02] {
    margin-top: 1rem;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ddp-blocks dt:first-child[b-sgjnon3p02] {
    margin-top: 0;
}

.ddp-blocks dd[b-sgjnon3p02] {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* #6915 - each block is a set of paragraphs from AccountDeletionDisclosure rather
   than one run of prose, so they need their own spacing. The first paragraph sits
   flush against the term. */
.ddp-blocks dd p[b-sgjnon3p02] {
    margin: 0.6rem 0 0;
}

.ddp-blocks dd p:first-child[b-sgjnon3p02] {
    margin-top: 0;
}

/* #7976 - the "Manage your subscription" link inherited the global link color
   (--ascend-primary, navy) and measured 1.12:1 against the panel under axe-core -
   unreadable on the dark theme on /profile since #6914. Accent, underlined so it
   stays distinguishable from the surrounding copy by more than color. */
.ddp-lede a[b-sgjnon3p02] {
    color: var(--ascend-accent);
    text-decoration: underline;
}
/* /Components/Shared/DemoEmbedForRoute.razor.rz.scp.css */
/* #6316 v2 in-app demo embed - quiet link-out card, tokens only (ScopedCssBoundaryTests). */

.demo-embed[b-htrrzuf91z] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.5rem;
}

/* #8895 - the head holds the heading only. Its two controls live together in
   the shared .action-row below it (see the markup), so the head no longer lays
   out a button beside the text, and no longer turns into a column on a phone. */
.demo-embed-head[b-htrrzuf91z] {
    margin-bottom: 0.75rem;
}

.demo-embed-title[b-htrrzuf91z] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.demo-embed-question[b-htrrzuf91z] {
    margin: 0.25rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.demo-embed-dismiss[b-htrrzuf91z] {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.3rem 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.demo-embed-dismiss:hover:not(:disabled)[b-htrrzuf91z] {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.9);
}

.demo-embed-dismiss:disabled[b-htrrzuf91z] {
    opacity: 0.5;
    cursor: default;
}

/* Link-out target: a compact YouTube icon button (owner change 2026-07-14 —
   the full hqdefault video cover rendered grainy; no thumbnail, no iframe). */
.demo-embed-link[b-htrrzuf91z] {
    display: inline-flex;
    align-items: center;
    /* #8895 - centered when .action-row makes it full width on a phone, so the
       icon and label sit over the Dismiss label below them. */
    justify-content: center;
    gap: 0.6rem;
    padding: 0.5rem 1.1rem 0.5rem 0.65rem;
    border-radius: 50px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(49, 221, 227, 0.3);
    text-decoration: none;
    transition: all 0.2s ease;
}

.demo-embed-link:hover[b-htrrzuf91z] {
    background: rgba(15, 23, 42, 0.9);
    border-color: var(--ascend-accent);
    transform: translateY(-1px);
}

.demo-embed-play[b-htrrzuf91z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.demo-embed-play[b-htrrzuf91z]  i {
    font-size: 28px;
    /* #8895 - the glyph's inherited line box made the link 63px tall; at 1 it is
       the icon's own height, so the link and Dismiss stack as an even pair. */
    display: block;
    line-height: 1;
}

.demo-embed-cue[b-htrrzuf91z] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {
    .demo-embed[b-htrrzuf91z] {
        padding: 0.75rem 0.85rem 0.85rem;
    }
}

/* #7845 - the "Dismiss" control measured 74x29 by the #7736 gate on /study-plan
   (prod, e2e@ account). The card only renders until an account dismisses it,
   so an account that already hid it (the demo account) never showed the gate
   this control. It sits alone at the end of the card header, so the box grows.
   #8895 - it now sits in the card's .action-row beside Watch on YouTube; the
   floor still applies there. */
@media (hover: none) and (pointer: coarse) {
    .demo-embed-dismiss[b-htrrzuf91z] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/DragScrollArea.razor.rz.scp.css */
/* #6638 - drag-to-pan container. The grab affordance only shows when a
   descendant (or the area itself) actually overflows - .drag-scrollable is
   maintained by the collocated module's observers. */
.drag-scroll-area.drag-scrollable[b-a0b7v9nkjz] {
    cursor: grab;
}

.drag-scroll-area.drag-scrolling[b-a0b7v9nkjz] {
    cursor: grabbing;
    user-select: none;
}
/* /Components/Shared/DrillBoard.razor.rz.scp.css */
.drill-board[b-uq84et4z1w] {
    /* #7858 - DrillBoard OWNS its size, and the inner ChessBoard fills it
       exactly. Before this the box here was "100% of whatever the host gave
       me" while ChessBoard capped its own width at min(600px, 88dvh) (#6126)
       and took its height from this box. In a 648px host column that made a
       600 x 644 board: chessground built 75 x 80.5 squares, the bottom rank
       ran below the fold, and the click-capture grid below (sized to this
       648px box) sent clicks near the right and bottom edges to the WRONG
       square. The same split opened on a short window inside a 600px column
       (88dvh < 600). So the cap lives here, where the overlays can see it,
       and the inner board is told to fill this box and nothing else.

       Rounded DOWN to a multiple of 8px because chessground sizes its board
       to floor(width * dpr / 8) * 8 / dpr. A box that is not a multiple of 8
       leaves up to 7px of dead strip right and bottom, which the overlay
       grid (1fr x 8 of THIS box) does not know about. The plain min() line
       is the fallback for an engine without CSS round(): still square and
       aligned to within a pixel per square, just not exact. */
    width: min(100%, 600px, 88dvh);
    width: round(down, min(100%, 600px, 88dvh), 8px);
    aspect-ratio: 1;
    margin: 0 auto;
    /* Container query unit source so glyph markers scale with the board. */
    container-type: inline-size;
}

.drill-board-stack[b-uq84et4z1w] {
    position: relative;
    width: 100%;
    height: 100%;
}

/* The inner ChessBoard fills the stack EXACTLY, whatever ChessBoard's own
   caller-facing caps say (#7858). max-width: none undoes the #6126 cap for
   this host only - the cap is re-applied on .drill-board above, so it still
   holds, it just holds in one place. */
.drill-board-stack[b-uq84et4z1w]  .chessboard-container {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

/* The board element is chessground's .cg-wrap, which chessground forces to
   box-sizing: content-box and measures with getBoundingClientRect - i.e.
   INCLUDING ChessBoard's 2px border. Width and height then resolve through
   different paths and the board came out 600 x 596. With no layout border
   the wrap is exactly the stack, so cg-board == stack == overlay grid. The
   cyan ring is kept as an outline, which paints outside the box and takes
   no layout. */
.drill-board-stack[b-uq84et4z1w]  .chessboard {
    width: 100%;
    height: 100%;
    max-width: none;
    border: none;
    outline: 2px solid rgba(49, 221, 227, 0.3);
}

/* Phone widths: ChessBoard keeps a thumb gutter beside the board so a swipe
   has somewhere to scroll the page (#6784). The container cap that carried
   it is lifted above, so carry the same gutter on the DrillBoard box. */
@media (max-width: 768px) {
    .drill-board[b-uq84et4z1w] {
        width: min(100%, 600px, 88dvh, calc(100vw - 4.5rem));
        width: round(down, min(100%, 600px, 88dvh, calc(100vw - 4.5rem)), 8px);
    }
}

/* Vision drills don't show coords — the whole point is reading the
   board, not reading the labels. Hide via the inner ChessBoard's
   coords element.

   `coords` is chessground's own CUSTOM ELEMENT, created at runtime by
   chessground.min.js, so Sonar (css:S4670 / stylelint
   selector-type-no-unknown) reads it as an unknown HTML tag. It is not a
   typo and not dead: verified in headless Chromium on dev, signed in as
   demo@ascendchess.com, at /foundation/board-vision in "Name the Square"
   mode - ".drill-board-stack[b-...] coords" matches both rendered <coords>
   elements and getComputedStyle reports display:none on each. Deleting it
   would put rank/file labels back on a board whose whole purpose is
   reading squares WITHOUT labels. Tech Debt #7242. */
/* stylelint-disable-next-line selector-type-no-unknown */
.drill-board-stack[b-uq84et4z1w]  coords {
    display: none !important;
}

/* Both overlays share the same 8x8 grid geometry so squares line up
   pixel-perfect with chessground's squares. */
.drill-overlay[b-uq84et4z1w] {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    pointer-events: none; /* per-cell rules below override where needed */
}

/* When the board is flipped, the CSS grid stays the same — but the
   visual mapping is mirrored. We rotate the entire overlay so the
   per-cell `grid-area` math (which assumes white-at-bottom) lines up
   visually with chessground's flipped pieces. */
.drill-overlay.flipped[b-uq84et4z1w] {
    transform: rotate(180deg);
}

/* MARK LAYER — colored highlight + feedback markers. Sits BELOW pieces
   so a piece + highlight on the same square shows both. */
.drill-marks[b-uq84et4z1w] {
    z-index: 1;
}

.mark-cell[b-uq84et4z1w] {
    position: relative;
}

/* Highlight: cyan accent, semi-transparent so the underlying square
   color (gold/dark) shows through. */
.mark-cell.mark-highlight[b-uq84et4z1w] {
    background: rgba(49, 221, 227, 0.45);
    box-shadow: inset 0 0 12px rgba(49, 221, 227, 0.6);
}

.mark-cell.mark-correct[b-uq84et4z1w] {
    background: rgba(52, 211, 153, 0.6);
    animation: drill-flash-b-uq84et4z1w 0.5s ease-out;
}

.mark-cell.mark-wrong[b-uq84et4z1w] {
    background: rgba(248, 113, 113, 0.6);
    animation: drill-flash-b-uq84et4z1w 0.5s ease-out;
}

.mark-cell.mark-missed[b-uq84et4z1w] {
    background: rgba(251, 191, 36, 0.5);
}

.mark-cell.mark-clicked[b-uq84et4z1w] {
    box-shadow: inset 0 0 0 3px rgba(49, 221, 227, 0.8);
}

/* Knight-specific accent (KnightVision drills). */
.mark-cell.mark-knight[b-uq84et4z1w] {
    background: rgba(49, 221, 227, 0.55);
}

.mark-cell.mark-target[b-uq84et4z1w] {
    background: rgba(184, 133, 54, 0.65);
}

/* #7914 - Fork Spotter targets. A RING, not a fill: the whole question is "fork
   these pieces", so the piece standing on the square has to stay readable through
   the marker. The square names are also listed in text under the prompt, which is
   the non-color channel (WCAG 1.4.1) - this ring is the fast visual index. */
.mark-cell.mark-fork-target[b-uq84et4z1w] {
    background: rgba(184, 133, 54, 0.18);
    box-shadow: inset 0 0 0 3px rgba(184, 133, 54, 0.9);
}

.mark-cell.mark-danger[b-uq84et4z1w] {
    background: rgba(239, 68, 68, 0.3);
}

.mark-cell.mark-pawn[b-uq84et4z1w] {
    background: rgba(239, 68, 68, 0.5);
}

.mark-cell.mark-path[b-uq84et4z1w] {
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.15);
}

.mark-cell.mark-visited[b-uq84et4z1w] {
    background: rgba(0, 0, 0, 0.35);
}

.mark-cell.mark-valid-move[b-uq84et4z1w] {
    box-shadow: inset 0 0 0 2px rgba(49, 221, 227, 0.5);
}

/* Hint flash (e.g. Warnsdorf suggestion): gold pulse. */
.mark-cell.mark-hint[b-uq84et4z1w] {
    background: rgba(251, 191, 36, 0.6);
    animation: drill-flash-b-uq84et4z1w 0.5s ease-out;
}

@keyframes drill-flash-b-uq84et4z1w {
    from { opacity: 0.2; }
    to { opacity: 1; }
}

/* GLYPH LAYER — non-chess markers (✦ target, etc.) centered on a square.
   Above the mark tints, below the click-capture so it never blocks input. */
.drill-glyphs[b-uq84et4z1w] {
    z-index: 2;
}

.glyph-cell[b-uq84et4z1w] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7cqw;
    line-height: 1;
    color: #B88536;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Counter-rotate the glyph on a flipped board so it stays upright. */
.glyph-cell.flipped[b-uq84et4z1w] {
    transform: rotate(180deg);
}

/* CLICK LAYER — invisible cells on top capture all pointer events.
   Sits ABOVE pieces so the user can click any square, including those
   with pieces on them. Pieces don't react because chessground's
   movable=false and our z-index puts these cells on top. */
.drill-clicks[b-uq84et4z1w] {
    z-index: 3;
    pointer-events: none; /* enable per-cell below */
}

.click-cell[b-uq84et4z1w] {
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.12s ease;
}

.click-cell:hover[b-uq84et4z1w] {
    background: rgba(49, 221, 227, 0.12);
}

/* #7190 (WCAG 1.4.1) - the verdict glyph inside a correctness-tinted mark
   cell. Dark ink over the translucent tint so it reads on both square colors
   and survives grayscale; the tint keeps carrying the color reinforcement. */
.mark-cell[b-uq84et4z1w] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mark-result-glyph[b-uq84et4z1w] {
    font-size: 6cqw;
    line-height: 1;
    color: rgba(10, 15, 20, 0.85);
    pointer-events: none;
}

/* Counter-rotate on a flipped board so the glyph stays upright, same as the
   glyph layer's .glyph-cell.flipped rule. */
.drill-marks.flipped .mark-result-glyph[b-uq84et4z1w] {
    transform: rotate(180deg);
}
/* /Components/Shared/DrillFeedbackOverlay.razor.rz.scp.css */
/* Full-board feedback overlay — fills the board area instead of
   floating as a small centered box. Joe preferred the TC-style flood
   over the original modal-pill look that lived here; this unifies
   every drill that uses DrillFeedbackOverlay on the same shape.
   The .alternative variant is preserved for OpeningDrill (gold flood
   for "valid alternative move"). */

.drill-feedback-overlay[b-ieac8ipc2z] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border-radius: 12px;
    z-index: 10;
    pointer-events: none;
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    animation: drill-feedback-in-b-ieac8ipc2z 0.18s ease-out;
}

.drill-feedback-overlay.correct[b-ieac8ipc2z] {
    background: rgba(16, 185, 129, 0.85);
}

.drill-feedback-overlay.alternative[b-ieac8ipc2z] {
    background: rgba(184, 133, 54, 0.85);
}

.drill-feedback-overlay.incorrect[b-ieac8ipc2z] {
    background: rgba(239, 68, 68, 0.85);
}

.drill-feedback-overlay[b-ieac8ipc2z]  i {
    font-size: 3rem;
    line-height: 1;
}

.drill-feedback-overlay[b-ieac8ipc2z]  i {
    font-size: 3rem;
}

/* Inline placement (#6697) — the feedback panel that replaces the answer
   controls below the board for drills whose feedback carries real content
   (EvaluationDrill). Only the wrapper chrome lives here; the caller's Body
   fragment keeps the caller's own scope id, so its inner styling stays where
   it is authored. */
.drill-feedback-inline[b-ieac8ipc2z] {
    padding: 1rem 1.25rem;
    border-radius: 0.625rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.drill-feedback-inline.correct[b-ieac8ipc2z] {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.drill-feedback-inline.alternative[b-ieac8ipc2z] {
    background: rgba(184, 133, 54, 0.12);
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.3);
}

.drill-feedback-inline.incorrect[b-ieac8ipc2z] {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.drill-feedback-inline-header[b-ieac8ipc2z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.drill-feedback-inline-header[b-ieac8ipc2z]  i {
    font-size: 1.2rem;
}

.drill-feedback-sub[b-ieac8ipc2z] {
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.95);
    margin-top: 0.25rem;
}

@keyframes drill-feedback-in-b-ieac8ipc2z {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/Shared/DrillIntroOverlay.razor.rz.scp.css */
.drill-intro-backdrop[b-neauhi9g65] {
    position: fixed;
    inset: 0;
    background: rgba(2, 8, 20, 0.72);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: drill-intro-fade-b-neauhi9g65 0.25s ease;
}

.drill-intro-card[b-neauhi9g65] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.96));
    border: 1px solid rgba(184, 133, 54, 0.45);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    max-width: 480px;
    width: 100%;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    animation: drill-intro-rise-b-neauhi9g65 0.3s ease;
}

.drill-intro-icon[b-neauhi9g65] {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(184, 133, 54, 0.15);
    border: 1px solid rgba(184, 133, 54, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.drill-intro-icon i[b-neauhi9g65] {
    color: #B88536;
    font-size: 1.2rem;
}

.drill-intro-body[b-neauhi9g65] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.drill-intro-eyebrow[b-neauhi9g65] {
    color: rgba(184, 133, 54, 0.9);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0;
}

.drill-intro-title[b-neauhi9g65] {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.drill-intro-text[b-neauhi9g65] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.drill-intro-first-step[b-neauhi9g65] {
    color: #6ee7b7;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0.25rem 0 0;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.drill-intro-first-step i[b-neauhi9g65] {
    flex-shrink: 0;
}

.drill-intro-dismiss[b-neauhi9g65] {
    align-self: flex-start;
    margin-top: 0.5rem;
    background: rgba(184, 133, 54, 0.9);
    border: none;
    border-radius: 8px;
    color: #0b1220;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    transition: background 0.15s ease, transform 0.1s ease;
}

.drill-intro-dismiss:hover[b-neauhi9g65] {
    background: #d09a44;
    transform: translateY(-1px);
}

@keyframes drill-intro-fade-b-neauhi9g65 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drill-intro-rise-b-neauhi9g65 {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/DrillPhases.razor.rz.scp.css */
/* DrillPhases scoped styles (#6756) - the first-path return hint shown on
   the completion phase when the guided first path sent the user here.
   Tokens only - no raw brand hex, no font literals. */

.first-path-return[b-9dkz26f07l] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.9rem;
    margin-bottom: 0.9rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.35);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.first-path-return-link[b-9dkz26f07l] {
    color: var(--ascend-secondary-light);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    white-space: nowrap;
}

.first-path-return-link:hover[b-9dkz26f07l] {
    color: var(--ascend-accent);
}

/* The first-path return countdown (#6756 owner canary). The advance is visible
   and stoppable - an automatic move the player cannot cancel is a trap. */
.first-path-return-next[b-9dkz26f07l] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
}

.first-path-return-actions[b-9dkz26f07l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.first-path-return-stay[b-9dkz26f07l] {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    cursor: pointer;
}

.first-path-return-stay:hover[b-9dkz26f07l] {
    color: var(--ascend-accent);
}
/* /Components/Shared/DrillShell.razor.rz.scp.css */
/* DrillShell — board + sidebar layout shared across drills.
   Flex-based layout (PBI #5934, Joe-directive 2026-05-31): the board
   column flex-grows to a 600px ceiling and the sidebar flexes beside it
   on wide viewports, stacking below on narrow. Mirrors TacticalCircuits'
   pattern: layout responsibility lives inside the component, not in
   per-page max-width overrides on the outer page wrapper.

   IMPORTANT — drill pages MUST NOT add their own `max-width` to the
   outer page div. The board sizes from `.drill-shell-board-column`'s
   cap (--drill-board-max, below); the sidebar sizes from
   `.drill-shell-sidebar`'s flex basis. Adding a page-level max-width
   re-introduces the 650-1200px chaos that prompted this fix. */

/* #7911 - THE BOARD CAP IS THE HEIGHT THAT IS LEFT ON SCREEN, NOT A FLAT 600px.

   The board is a width-driven square, so the column's width IS the board's
   height. A flat 600px column was only ever right on a tall window: at 1440x900
   the board's top edge sat at 314px (343px under Their Best Move's two-line
   subtitle), so rank 1 ended at 914-947px, and a real 1440x900 laptop screen
   leaves the browser ~790px. ChessBoard's own min(600px, 88dvh) cap (#6126)
   never fired: 88% of 900 is 792, above 600.

   So the column is capped at the viewport height minus everything above the
   board, each part published by the component that owns it:
     --app-content-top    MainLayout: app header + content padding, per band.
     --page-header-block  PageContainer: the compact drill header, when the
                          page has one (0 when it does not).
     1.25rem              1rem of air under rank 1, plus ChessBoard's 2px
                          border top and bottom, which draws OUTSIDE the
                          column width (the board is 100% + 4px tall).
   At 1440x900 that is 900 - 128 - 52 - 20 = 700, so the full 600px board
   still fits (measured: rank 1 now ends at 784, was 914-947). At 1440x790 the
   column is 590px and rank 1 ends at 774 instead of 918; at 1280x720 (the
   short-landscape 48px header) it ends at 704 instead of 846.

   svh, not dvh: the SMALL viewport - a phone's browser with its toolbars
   shown - is what the player sees when the drill opens, and it does not
   change when a toolbar collapses mid-scroll, so the board never resizes
   under a finger. On desktop all three units are the same number.

   17rem (272px) is the floor: never smaller than the board a 344px phone
   already gets in portrait (#7891, measured 272-276px), which is the smallest
   board this app already ships as usable. On a window too short for that the
   board keeps 17rem and the page scrolls, as it always did.

   #8710 - --drill-below-board-reserve IS THE OTHER HALF OF THE SAME CONTRACT,
   and it is what a page sets when something in BelowBoardContent has to be ON
   SCREEN rather than merely rendered.

   The cap above claims the whole height left under the chrome for the board, so
   by construction there is nothing left for the slot below it: at 1280x800 the
   advance row measured 112px of room for a 174px need, and at 1440x900 172px
   for the same 174px. A drill whose below-board content is only a score bar
   does not care. One whose below-board content is the VERDICT does, because a
   verdict the member has to scroll to find is the #6784 failure one width class
   up (#8710: the correction names squares, so the board must stay uncovered AND
   the correction must be readable without hunting for it).

   It defaults to 0px, so every drill that does not set it keeps exactly the cap
   it had before this variable existed. A page that sets it publishes what its
   below-board block costs, in the same shape MainLayout publishes
   --app-content-top and PageContainer publishes --page-header-block: the
   component that owns the space states what it consumes, rather than the board
   guessing. Set it on an element ABOVE .drill-shell (the page's own wrapper);
   custom properties inherit, and .drill-shell reads it here.

   #8710 round 3 - --drill-below-board-room IS THE RESERVE'S HONEST TWIN, AND
   IT EXISTS BECAUSE A RESERVE SUBTRACTED INSIDE A clamp() CAN BE A NO-OP.

   The reserve is subtracted from the clamp's MIDDLE term. When the middle term
   falls under the 17rem floor the floor wins, the subtraction changes nothing,
   and the page that asked for room gets none - silently, with no number
   anywhere saying so. Measured on this page (no PageContainer title, so
   --page-header-block is 0): at 844x390, an iPhone 14 Pro in LANDSCAPE, the
   middle term is 390 - 56 - 224 - 20 = 90px, so the board sat at the 272px
   floor and the correction started 58px past the bottom of the screen with
   nothing docked, because the dock was keyed to WIDTH (<= 768px) and 844 is
   not a phone width. Two rounds of this bug were a reserve that worked at the
   heights that were walked.

   So the room is computed from the cap the clamp ACTUALLY resolved, not from
   what the page asked for:

     --drill-below-board-room = max(0px, available - --drill-board-max)

   which is the reserve where the reserve was honored, the smaller real
   remainder where the floor won, and exactly 0px where nothing is left. A page
   whose below-board block must stay on screen clips that block to this value
   (max-height + overflow-y: auto). The block then ends at
   available - room = the board's cap, i.e. at or above the bottom of the
   viewport, AT EVERY WIDTH AND HEIGHT, whatever the floor does and however
   long the copy grows. That is the guarantee rounds 1 and 2 were each one
   viewport band short of.

   It is max(0px, ...) rather than a bare subtraction so a window too short for
   even the floor yields 0 instead of a negative length - and a page that reads
   0 here has to have a fallback that costs no vertical space at all
   (BlunderDrill moves the row beside the board; see its stylesheet). */
.drill-shell[b-osgpoevbqn] {
    --drill-available: calc(100svh - var(--app-content-top, 0px)
        - var(--page-header-block, 0px) - 1.25rem);
    --drill-board-max: clamp(17rem,
        var(--drill-available) - var(--drill-below-board-reserve, 0px),
        600px);
    --drill-below-board-room: max(0px,
        calc(var(--drill-available) - var(--drill-board-max)));
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: flex-start;
}

/* #9053 - scroll-margin-top IS THE HEADER OFFSET FOR THE BRING-INTO-VIEW, and
   it is read, never restated.

   When a verdict appears DrillShell hands this element to
   /js/drill-verdict-into-view.js, which brings the board-and-verdict region into
   the viewport (measured before it: ImbalanceSpotDrill's verdict word sat at top
   -182 at 390x844 and -319 at 344x740). The region has to land UNDER the app's
   own chrome, and the only number that knows how tall that is is
   --app-content-top: MainLayout publishes it per band (116px at 480 and below
   under the fixed .mobile-header, from calc(108px + 0.5rem); 128px under the
   sticky desktop .main-header, from calc(96px + 2rem))
   and the module reads the computed scroll-margin-top off this element. Exactly
   the contract .paged-list (app.css) and .board-card already use; a px value
   here would be the fourth copy of a height that has moved four times. */
.drill-shell-board-column[b-osgpoevbqn] {
    flex: 1 1 320px;
    max-width: var(--drill-board-max);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scroll-margin-top: var(--app-content-top, 0px);
}

.drill-shell-board[b-osgpoevbqn] {
    position: relative;
    width: 100%;
}

/* #8993 - THE VERDICT AT THE BOARD (owner ruling 2026-10-20, Design A).

   The correction lives in the below-board dock (#8710 / #8730), which is right
   for reading it but says nothing where the member is looking when they move.
   So the board itself signals the verdict for the hold: data-verdict on this
   element (set from DrillVerdictSignal, which the drill's own Inline overlay
   publishes to) turns the board's frame green, red or gold, and DrillVerdictChip
   pins the word at the frame's top edge (on a phone, just below the frame - see
   the 768px rule below). Nothing here paints over a square:
   the frame is the canvas border or a ring OUTSIDE a bare board.

   Two board shapes reach this slot. Most drills wrap the board in .drill-canvas
   (app.css: 2rem padding, 24px radius, overflow hidden), and for those the
   canvas's own border and glow take the color and the chip may straddle the top
   edge into the padding. A drill that drops a bare ChessBoard in the slot
   (MoveHabits, Evaluation, TimeManagement) has no padding, so the ring is drawn
   outside the board and the chip sits wholly above it.

   Bare-board placement, walked (#8993 final review, MoveHabits with its longest
   correction): above 768px the chip above the board is in view and covered by
   nothing at the load scroll at 1440x900 and 1366x768; it only leaves the
   viewport when the member scrolls the board's top to within the chip's height
   of the screen's top (the desktop header scrolls away, so nothing covers it).
   Pinning it BELOW the board instead was measured too and is worse: band E caps
   the board to the height left on screen with 1rem of air, so at 1366x768 the
   chip ran 8px past the bottom of the screen at the load scroll. On a phone it
   sits below the frame (the 768px rule) and stays clear of the fixed dock even
   with the dock grown to its clip. */
.drill-shell-board[data-verdict="correct"][b-osgpoevbqn] {
    --drill-verdict-color: var(--ascend-success);
}

.drill-shell-board[data-verdict="alternative"][b-osgpoevbqn] {
    --drill-verdict-color: var(--ascend-secondary);
}

.drill-shell-board[data-verdict="incorrect"][b-osgpoevbqn] {
    --drill-verdict-color: var(--ascend-error);
}

.drill-shell-board[data-verdict]:not(:has(> .drill-canvas))[b-osgpoevbqn] {
    border-radius: 4px;
    box-shadow: 0 0 0 3px var(--drill-verdict-color),
                0 0 1.5rem color-mix(in srgb, var(--drill-verdict-color) 45%, transparent);
}

/* The canvas's own verdict paint lives with the rest of its paint, in app.css
   (`[data-verdict] > .drill-canvas`); this element only says which color. */

.drill-shell-board:has(> .drill-canvas)[b-osgpoevbqn] {
    --drill-verdict-chip-lift: -50%;
}

/* At 768px and below the top edge is no home for the chip. The canvas padding
   drops to a hairline (app.css), so a straddling chip would reach the first rank,
   and wholly above the edge it lands under the phone's sticky header on every
   drill whose board opens the page: on the Blunder Drill (no page header in the
   active phase) the board starts at 123px under a 116px header, so the chip at
   94-116px was painted over by .mobile-header at 390x844 and 344x740 (#8993
   round 1 walk). So on a phone the chip sits wholly BELOW the board's frame, the
   same placement PuzzleDrillSurface takes, and the board column's gap grows from
   0.75rem to 1.5rem so the chip (22px) has its own room and never covers the top
   of the below-board content. Off every square, never under the chrome. Both
   selectors, so the canvas rule's :has() specificity above does not win. */
@media (max-width: 768px) {
    .drill-shell-board[b-osgpoevbqn],
    .drill-shell-board:has(> .drill-canvas)[b-osgpoevbqn] {
        --drill-verdict-chip-top: 100%;
        --drill-verdict-chip-lift: 0px;
    }

    .drill-shell-board-column[b-osgpoevbqn] {
        gap: 1.5rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .drill-shell-board[data-verdict][b-osgpoevbqn] {
        transition: box-shadow 0.16s ease-out, border-color 0.16s ease-out;
    }
}

.drill-shell-below-board[b-osgpoevbqn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.drill-shell-sidebar[b-osgpoevbqn] {
    flex: 0 1 320px;
    min-width: 280px;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.drill-shell-sidebar-pill[b-osgpoevbqn] {
    display: flex;
    align-items: center;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.12);
}

.drill-shell-sidebar-chips[b-osgpoevbqn] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Shared chip styling — drills emit <div class="shell-chip"> markup
   instead of bespoke per-page hud-item rules. ::deep so Blazor's CSS
   isolation lets it reach the parent's children. */
.drill-shell-sidebar-chips[b-osgpoevbqn]  .shell-chip {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.drill-shell-sidebar-chips[b-osgpoevbqn]  .shell-chip-label {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
}

.drill-shell-sidebar-chips[b-osgpoevbqn]  .shell-chip-value {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
}

.drill-shell-sidebar-chips[b-osgpoevbqn]  .shell-chip-value.warning {
    color: #fbbf24;
}

.drill-shell-sidebar-chips[b-osgpoevbqn]  .shell-chip-value.critical {
    color: #ef4444;
}

/* Rich slot — no chip styling applied. Drills bring their own internal
   layout (progress bars, context blocks, action buttons, pickers).
   The wrapper just stacks children with a small gap so multiple sections
   line up cleanly without each drill re-implementing flex column. */
.drill-shell-sidebar-rich[b-osgpoevbqn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Question panel variant (#7858) - only when a drill passes QuestionContent.
   A grid instead of the wrapping flex row so the question can sit in the right
   column UNDER the sidebar card while the board spans both rows. Same caps as
   the flex layout: board column <= --drill-board-max (#7911), sidebar 280-320px. */
.drill-shell.drill-shell-with-question[b-osgpoevbqn] {
    display: grid;
    grid-template-columns: minmax(0, var(--drill-board-max)) minmax(280px, 320px);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "board side"
        "board question";
}

.drill-shell-with-question > .drill-shell-board-column[b-osgpoevbqn] {
    grid-area: board;
}

/* #9060 chunk 3 - the room a band E dock may take beside the board on an opted-in shell
   (ReserveDockRoomBesideBoard); the band E block above 1100px is the only reader.
   #9082 - per shell: 16rem unless the drill's page wrapper sets --drill-dock-room-beside-size
   (it inherits down to here). Three-Move Slate is the one that does. */
.drill-shell-dock-room-beside[b-osgpoevbqn] {
    --drill-dock-room-beside: var(--drill-dock-room-beside-size, 16rem);
}

.drill-shell-with-question > .drill-shell-sidebar[b-osgpoevbqn] {
    grid-area: side;
}

.drill-shell-question[b-osgpoevbqn] {
    grid-area: question;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* #9060 chunk 2 - AN EMPTY QUESTION PANEL IS NO PANEL. A Razor slot cannot be passed
   conditionally, so a drill whose modes have different answer shapes (EvaluationDrill: a
   multi-control grid in one mode, single-tap rows riding the dock in the others) passes
   QuestionContent always and leaves it empty in the modes that answer from the dock. The
   shell then lays out as a shell without the slot: the plain flex row, no grid, no empty
   panel and no gap for it. Blazor emits no whitespace text node for a fragment whose only
   @if is false, so :empty matches (EvaluationDrillDockTests pins the markup). */
.drill-shell.drill-shell-with-question:has(> .drill-shell-question:empty)[b-osgpoevbqn] {
    display: flex;
}

.drill-shell-question:empty[b-osgpoevbqn] {
    display: none;
}

/* Narrow viewports: sidebar drops below the board, both centered.
   The board cap (--drill-board-max) is preserved so the chessboard doesn't expand
   uncomfortably wide on mid-sized tablets. */
/* ============================================================
   #8730 - THE VERDICT DOCK, SHARED. ONE COPY OF #8710's MECHANISM.

   #8710 was filed from an iPad: "If I miss the move twice the screen turns red,
   and it tells what the right move is. But the red makes it hard to see the
   board and I cannot seem to make it go away." It fixed the blunder drill, and
   left the other EIGHT callers of DrillFeedbackOverlay flooding their boards
   over about sixteen routes. #8730 is that sweep.

   The rules below ARE #8710's mechanism, moved here out of
   BlunderDrill.razor.css rather than copied: the band table, the room clip, the
   scroll/actions split and the idle shell are the same declarations, and
   BlunderDrill reads them from here now. There is no second copy to drift from,
   which is the thing a sweep over nine callers would otherwise guarantee.

   WHY ::deep AND WHY ANCHORED ON .drill-shell-below-board. The verdict row is
   authored by the CALLER - BlunderDrill hand-rolls it because its row also
   carries a flash-card offer and two buttons, every other drill emits it
   through <DrillVerdictDock /> - so a stylesheet scoped to any one component's
   own elements could not reach both. .drill-shell-below-board is THIS
   component's element, which is what makes ::deep legal, and it is also the
   right fence: these rules reach a verdict row in the shell's below-board slot
   and nothing else on the page.

   The shared class names are the ones #8710 already shipped
   (.drill-advance-row / .drill-advance-scroll / .drill-advance-actions) rather
   than new ones, so BlunderDrill's markup, its three page test files and
   AxeDecidableTextSurfaceTests all keep pointing at the same thing.
   ============================================================ */

/* The reserve half of the contract, set by the shell itself when a caller
   passes ReserveVerdictRoom. #8710 set it on .blunder-drill-page, the page's own
   wrapper, because a page is above .drill-shell and custom properties inherit.
   Eight more pages doing that is eight more copies of this calc and of band C's
   override, so the shell sets it on ITSELF: a var() in another declaration on
   the same element reads that element's own computed value, so
   --drill-board-max below resolves it exactly as it did when it was inherited.

   15rem (240px) is measured, not guessed, and sized for the CORRECTION lane:
   the controls block is 44px plus the 0.6rem gap, which leaves 186px of panel,
   and the longest correction in the family measured 178px (MoveHabitsDrill's
   "You played Qxf7+. The move was Rxe8+." plus up to three accepted
   continuations, at 769x601 where the board column is narrowest and the copy
   wraps most).

   The safe-area term is not decoration. env(safe-area-inset-bottom) resolves to
   0 in headless Chromium, so no walk on this box can see it, and a notched
   iPhone's dock is up to 34px taller than anything measured here. Carrying the
   inset in the reserve makes the dock's 16px of clearance structural instead of
   lucky: the board yields the inset too. */
.drill-shell.drill-shell-verdict-room[b-osgpoevbqn] {
    --drill-below-board-reserve: calc(15rem + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   THE BANDS ARE AN EXACT PARTITION OF THE (width, height) PLANE, and each one
   carries its own mechanism. Every viewport matches exactly one; the complement
   is proved rather than hoped, in
   AscendChess.Components.Tests/Architecture/DrillVerticalBudgetTests.

     A  <= 768px wide, >= 520px tall   fixed bottom dock, clipped to the room
                                       that actually exists (#7173's dock).
     B  <= 768px wide, <= 519px tall   the row stays in FLOW. Under ~520px of
                                       height a phone-width viewport has less
                                       than 7rem under a floor-sized board, so a
                                       dock would be a scrolling sliver AND
                                       would sit on the board. In flow it is
                                       below the fold and the page scrolls - the
                                       board is never covered, which is the line
                                       that matters. No device has this shape; a
                                       hand-sized browser window does.
     C  768.01-1100px wide, <= 600px tall  the row goes BESIDE the board, fixed to
                                       the right edge. This is the band where
                                       the board floor wins, because the vertical
                                       axis is spent: at 844x390 there are 314px
                                       under the chrome for a 272px board.
                                       Nothing stacked fits there. The horizontal
                                       axis is empty - 844 - 272 = 572px of it -
                                       so the verdict costs no height at all.
     D  768.01-1100px wide, >= 601px tall  the reserve above. The 601px floor
                                       is where the arithmetic says the reserve
                                       still clears the board floor: the shortest
                                       viewport in the band is 601px tall and
                                       landscape, so MainLayout's short-landscape
                                       chrome applies (48 + 8), leaving
                                       601 - 56 - 20 = 525px, and 525 - 224 =
                                       301px > the 272px floor.
     E  > 1100px wide, any height      BESIDE the board, anchored to the board
                                       column, over the top of the sidebar
                                       column, and the reserve is 0px - so the
                                       board keeps exactly the pre-#8710 cap.
                                       #8810, owner ruling 2026-10-15: "revert
                                       the size ... fit the under-board controls
                                       another way: no lost board pixels". See
                                       the band E block below for why 1100px.

   C and D stop at 1100px since #8810 and E starts ABOVE 1100px, written in range
   syntax, `(width > 1100px)`, which is the exact complement of
   `(max-width: 1100px)` at every fractional width. The decimal trick described
   next does not survive Chrome: measured 2026-10-16 in Chrome 155, at a viewport
   exactly 1024px (or 768px) wide `(min-width: 1024.01px)` MATCHES (and so does
   1024.015625; 1024.02 does not), so a decimal boundary OVERLAPS its neighbor at
   the integer instead of meeting it. The 768/768.01 seam below has that overlap
   today at 768px and 520-600px tall; #8810 does not change it.

   768.01px, NOT 769px. A CSS pixel is fractional - browser zoom and a fractional
   device pixel ratio both produce widths like 768.5 - and at 768.5 neither
   `max-width: 768px` nor `min-width: 769px` matches, so the row fell through
   BOTH band A and band C to the in-flow reserve. At band-C heights that leaves a
   42px slice with the buttons inside it: #8710's own complaint, at a width
   nobody would think to test. The bands have to PARTITION the plane, so they
   must MEET. The two height boundaries, 519/520 and 600/601, have the same
   shape and the same reasoning.
   ============================================================ */

/* The ROW ITSELF - its flex split, its clip and its idle shell - is
   DrillVerdictDock's own stylesheet, because the row is its element. What lives
   here is only what a component cannot do for itself: the reserve above, which
   has to be set on .drill-shell, and the four viewport BANDS below, which take
   the row out of flow and therefore have to know about the board it must not
   cover. The bands reach the row with ::deep from .drill-shell-below-board. */


@media (max-width: 768px) {
    .drill-shell[b-osgpoevbqn] {
        flex-direction: column;
        align-items: center;
    }
    /* Stacked, the question panel goes straight under the board and above the
       sidebar card (order 2), so on a phone the question is next to the board
       rather than below the chips. */
    .drill-shell.drill-shell-with-question[b-osgpoevbqn] {
        display: flex;
    }
    .drill-shell-question[b-osgpoevbqn] {
        order: 1;
        width: 100%;
        max-width: 600px;
    }
    .drill-shell-board-column[b-osgpoevbqn] {
        flex: 1 1 auto;
        width: 100%;
    }
    .drill-shell-sidebar[b-osgpoevbqn] {
        flex: 1 1 auto;
        width: 100%;
        max-width: 600px;
        order: 2;
        /* #6780 family — the desktop `min-width: 280px` above is a hard px
           floor that survives into the stacked layout, where it is not just
           useless but dangerous: on a 320px viewport the content column is
           ~288px, so the sidebar is one padding change away from forcing the
           document wider than the screen. That is exactly the failure this
           bug is: a flex/grid child whose min-content refuses to shrink,
           pushing the page past the viewport with html/body overflow-x
           hidden so there is no scroll to reach the clipped part. Once the
           sidebar is full-width and stacked the floor has no job left. */
        min-width: 0;
    }
}

/* :not(.is-idle) ON EVERY BAND RULE BELOW, AND IT IS NOT DECORATION.

   The idle shell lives in DrillVerdictDock.razor.css, a DIFFERENT stylesheet,
   and `.drill-advance-row.is-idle[b-dock]` and
   `.drill-shell-below-board[b-shell] .drill-advance-row` have the SAME
   specificity (0,3,0). Across two files the winner is then bundle order, which
   nothing here controls - so a fixed dock could be painted around an empty live
   region, which is a bar across the bottom of the screen with nothing in it.
   Excluding the idle row from the bands means they never compete: the mounted
   region costs nothing because no band claims it. */

/* ============================================================
   #8730 / #8710 - BAND A. The phone action dock.

   #7173's dock, kept. On a phone this row is the whole feature: if the control
   that clears the verdict is below the fold, a member who is told they were
   wrong sees a verdict and nothing else - which is the complaint. The furniture
   above the board on a phone is 116-294px before the board draws, so a row in
   flow under the board starts past the fold at every phone width and no board
   size buys that back.

   OPAQUE, AND FLAT. At 0.98/0.97 the sidebar text underneath ghosted through the
   correction panel, which is 12% tinted itself, so the coaching sentence was
   read over a faint second sentence. The dock covers page content by design; it
   should cover it completely. And the background is FLAT because axe cannot
   resolve a text contrast over any gradient, so every line of the correction
   came back "incomplete" instead of pass or fail - the same call #7862 made on
   .main-header for this identical two-stop navy pair.
   AxeDecidableTextSurfaceTests pins it flat.
   ============================================================ */
@media (max-width: 768px) {
    .drill-shell-below-board[b-osgpoevbqn]  .drill-advance-row:not(.is-idle) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        margin: 0;
        padding: 0.75rem 0.9rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: var(--ascend-bg-card);
        border-top: 2px solid rgba(49, 221, 227, 0.3);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.55);
    }

    /* Two actions on a 320px screen: let them share the row, and keep both at a
       real thumb target rather than shrinking to fit. `> *` rather than a button
       class because the control is the caller's own element - a bare <button> in
       BlunderDrill and TimeManagementDrill, a shared <Button> elsewhere.
       #9060 - :not(.is-idle), like every band rule: an IDLE dock's Actions half holds
       a drill's answer controls (MiniPhaseDrill's phase buttons, ImbalanceSpotDrill's
       axis grid), and this would stretch them into flex items while the member is
       still answering. Same guard in bands C and E. */
    .drill-shell-below-board[b-osgpoevbqn]  .drill-advance-row:not(.is-idle) .drill-advance-actions > * {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
    }
}

/* ============================================================
   #8730 / #8710 - BAND C. Beside the board, because the vertical axis is spent.

   Anchored to the right edge rather than the bottom: a bottom dock in this band
   would sit on the board (at 844x390 the board already reaches 332 of 390), and
   the board is the one thing this ticket is about keeping visible.

   The width is the smaller of 22rem and 36vw so the panel cannot reach the board
   at the narrow end of the band: at 769x600 the board's right edge is at 417 and
   the panel's left edge at 492; at 844x390 they are 386 and 507. The 36vw term
   is what holds the narrow end, and it also leaves room for
   env(safe-area-inset-right), which on a notched phone IN LANDSCAPE is ~44px and
   is the inset that matters here (the bottom one does not, since the panel is
   not on the bottom).

   It covers the sidebar card, on purpose and only while a verdict is up: the
   chips are progress, the panel is the correction and the way out of it.
   ============================================================ */
/* #9053 part (b) review round 4 - A SHELL WITH NO SIDEBAR PUTS ITS BOARD AT THE START.
   The side panel above is fixed to the viewport's right edge, which is safe because a
   shell with a sidebar has the sidebar there: the panel covers the sidebar card, by
   design, and the board sits left of it. A shell with nothing to hold in its sidebar
   renders no sidebar (HasSidebar, DrillShell.razor), so the board column is the row's
   only item and justify-content: center put it in the middle, under the panel. Walked on
   the endgame lesson with a result change up: the panel covered 42px of squares at
   900x500, 20px at 1000x500 and 154px at 1024x600 (about three files), and the board is
   frozen until Take back or Play on, so the member decides with the position covered.
   flex-start gives the board the far side of the row instead. Two corners of the band
   need one more step each, and DrillVerticalBudgetTests sweeps both sidebar-less verdict
   pages over every band C viewport so neither is a guess:
     - the narrow, tall end (769x600: a 472px board from x=48 against a panel from
       x=492): the board column is held to the room left of the panel, the viewport less
       the panel's width less 5rem for the page's left offset there (48px of content and
       page padding, a classic 17px scrollbar, and slack). It binds only there (about
       60px of board at 769x600); at 844x390, 900x500 and every shorter or wider window
       the cap is the smaller term.
     - 1024px and up, where MainLayout shows its 200px nav at these heights: the board
       starts 200px further right, so the panel narrows to 17rem instead of the board
       giving up pixels (#8810: no lost board pixels). See the block after this one. */
@media (min-width: 768.01px) and (max-width: 1100px) and (max-height: 600px) {
    .drill-shell.drill-shell-verdict-room[b-osgpoevbqn] {
        /* The row costs no flow height here, so the board keeps all of it. */
        --drill-below-board-reserve: 0px;
    }

    .drill-shell.drill-shell-verdict-room.drill-shell-no-sidebar[b-osgpoevbqn] {
        justify-content: flex-start;
    }

    .drill-shell.drill-shell-verdict-room.drill-shell-no-sidebar > .drill-shell-board-column[b-osgpoevbqn] {
        max-width: min(var(--drill-board-max), calc(100vw - min(22rem, 36vw) - 5rem));
    }

    .drill-shell-below-board[b-osgpoevbqn]  .drill-advance-row:not(.is-idle) {
        position: fixed;
        top: calc(var(--app-content-top, 0px) + 0.5rem);
        right: env(safe-area-inset-right, 0px);
        width: min(22rem, 36vw);
        z-index: 30;
        margin: 0;
        padding: 0.75rem 0.9rem;
        /* Its own budget, not --drill-below-board-room: that value is the room
           left UNDER the board, which in this band is deliberately zero. */
        max-height: calc(100svh - var(--app-content-top, 0px) - 1rem);
        overflow-y: auto;
        /* Flat, for the same reason the dock above is flat (#7862). */
        background: var(--ascend-bg-card);
        border: 2px solid rgba(49, 221, 227, 0.3);
        border-right: none;
        border-radius: 16px 0 0 16px;
        box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.55);
    }

    .drill-shell-below-board[b-osgpoevbqn]  .drill-advance-row:not(.is-idle) .drill-advance-actions > * {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
    }

    /* #9082 - THE QUESTION PANEL CLEARS THE FIXED DOCK (ClearQuestionOfFixedDock). The panel above
       is fixed over the side column, by design for the sidebar card, but on a shell with a question
       panel that column also holds the answer the member just gave, marked with the truth, and the
       dock covered it: walked before this, 60% of Candidate Moves' question content at 844x390 and
       75% at 1024x600, Three-Move Slate's 40-67%, ImbalanceSpot's marked grid 43-49% once scrolled
       to it. Padding the panel in place is not enough: its column is 320px and the dock is
       min(22rem, 36vw) from the viewport's edge, so at 844x390 it would leave the panel 109px and
       at 1024x600 (a 352px dock over a column that starts 16px inside it) nothing at all. So while
       the dock shows, the question panel leaves the side column for a row of its own under the
       board, spanning the shell, padded on the right by the dock's own width: its content ends at
       or before the dock's left edge at every band C width (the shell's right edge is never past
       the viewport's), the board keeps its size and stays where it is, and the side column keeps
       the sidebar card, which the dock covers by design. Only while showing (:has the dock row
       showing): while answering there is no dock to clear, and the list grows from moves on the
       board, so it stays beside the board where both are in view. The padding is the dock's width
       declaration above, restated, and the 1024px+ block below restates its narrower sidebar-less
       dock the same way (DrillShellDockRoomBesideBoardTests pins that both pairs match). */
    .drill-shell.drill-shell-verdict-room.drill-shell-with-question.drill-shell-question-clear-of-dock:has(> .drill-shell-board-column > .drill-shell-below-board .drill-advance-row:not(.is-idle))[b-osgpoevbqn] {
        grid-template-areas:
            "board side"
            "question question";
    }

    .drill-shell-question-clear-of-dock:has(> .drill-shell-board-column > .drill-shell-below-board .drill-advance-row:not(.is-idle)) > .drill-shell-question[b-osgpoevbqn] {
        padding-right: min(22rem, 36vw);
    }
}

/* #9053 part (b) review round 4 - band C from 1024px, where MainLayout's short-landscape
   block shows the 200px nav ((min-width: 1024px) and (max-height: 700px) and
   (orientation: landscape); every band C window is landscape and at most 600px tall). A
   sidebar-less shell's board then starts at x=248 or later, and a 472px board plus a
   22rem panel is wider than the room: at 1024x600 the board ends at 732 and a 352px
   panel starts at 672. The panel narrows to 17rem (the 36vw panel is already 277px at
   769px wide), which keeps the board whole at 1024x600, and the board column clamp
   follows the panel's width and the nav. Range syntax so this block never reads as band
   C to the stylesheet tests that look band C up by its decimal min-width. */
@media (width >= 1024px) and (width <= 1100px) and (height <= 600px) {
    .drill-shell.drill-shell-verdict-room.drill-shell-no-sidebar > .drill-shell-board-column[b-osgpoevbqn] {
        max-width: min(var(--drill-board-max), calc(100vw - 17rem - 5rem - 200px));
    }

    .drill-shell.drill-shell-no-sidebar .drill-shell-below-board[b-osgpoevbqn]  .drill-advance-row:not(.is-idle) {
        width: 17rem;
    }

    /* #9082 - a sidebar-less shell's question panel clears that narrower dock by its own width. */
    .drill-shell-no-sidebar.drill-shell-question-clear-of-dock:has(> .drill-shell-board-column > .drill-shell-below-board .drill-advance-row:not(.is-idle)) > .drill-shell-question[b-osgpoevbqn] {
        padding-right: 17rem;
    }
}

/* #9053 part (b) review round 4 - BAND D WITHOUT THE RESERVE, for a shell that opts in
   with VerdictFlowsInBandD (see that parameter in DrillShell.razor for why the endgame
   lesson does). The reserve and the dock's room clip go TOGETHER: the room is computed
   from the reserve, so dropping one without the other would clip the in-flow verdict to
   almost nothing. The prelude is the exact complement of band A, (max-width: 768px), in
   range syntax: band C's decimal min-width matches alongside band A at exactly 768px in
   Chrome (see the partition note above), and a page at 768 x 601+ must keep band A's
   fixed dock and its clip. DrillVerticalBudgetTests pins the spelling and the
   complement. */
@media (width > 768px) and (width <= 1100px) and (height > 600px) {
    .drill-shell.drill-shell-verdict-room.drill-shell-verdict-flows-in-band-d[b-osgpoevbqn] {
        --drill-below-board-reserve: 0px;
    }

    .drill-shell.drill-shell-verdict-flows-in-band-d .drill-shell-below-board[b-osgpoevbqn]  .drill-advance-row {
        max-height: none;
    }
}

/* ============================================================
   #8810 - BAND E. Laptops and desktops: the verdict goes BESIDE the board and the
   board pays nothing for it.

   Filed by the owner from a laptop ("did the board get smaller on laptops?") and
   ruled 2026-10-15: restore the pre-#8710/#8730 board size at laptop widths and
   fit the under-board controls another way, with no lost board pixels. Band D's
   reserve was the cost: 15rem came out of the board wherever the board was
   height-capped, which is every laptop window (measured on the repertoire drill:
   a 404px board column at 1280x720, 380px at 1366x768, 512px at 1440x900, where
   the pre-#8710 cap is 600px at all three).

   So the reserve is 0px here, which makes --drill-board-max the exact pre-#8710
   expression, and the row costs no flow height at all: it is taken out of flow
   and laid over the TOP of the sidebar column, beside the board, the same trade
   band C already makes on short windows. The horizontal axis is the one with
   room at these widths; the vertical one is the board's.

   WHY ANCHORED TO THE BOARD COLUMN AND NOT FIXED TO THE VIEWPORT EDGE LIKE BAND
   C. On a wide window the shell is centered, so the right edge of the viewport is
   not where the sidebar is: at 1440x900 a viewport-edge panel would cover the
   right 244px of the sidebar and leave its left 76px showing, and at 1920 it
   would float on empty page beside nothing (computed from the walked layout).
   left: calc(100% + 1.5rem) of the board column is the sidebar column's left
   edge (the shell's 1.5rem gap, the same in the grid variant), and width: 20rem
   is the sidebar's own width, so the panel sits exactly on the sidebar column
   and next to the board (walked: the panel's left and right edges equal the
   sidebar's at every laptop width). top: 0 is the board's top edge, so it is on
   screen whenever the board is.

   WHY 1100px. Anchoring beside the board requires the shell NOT to wrap, and it
   wraps when the shell is narrower than 320 + 24 + 320 = 664px. Above 1024px
   MainLayout's content column is the viewport less a 280px nav and 2rem of
   padding a side (the short-landscape bands narrow or drop the nav, so they have
   more room, not less), and the widest verdict page wrapper (RepertoireDrill,
   OpeningDrill) pads another 2rem a side. With a 17px classic Windows scrollbar
   the shell is side by side from 1089px: 1100px leaves an 11px margin. Between
   769 and 1100px the shell can wrap (the repertoire drill wraps up to ~1072px
   under the 280px nav, and below ~1016px under the 240px one), and a wrapped
   shell has nothing beside the board to put the verdict on, which is why C and
   D keep the #8710/#8730 mechanisms there. That is not free: a TALL window
   1025-1100px wide still pays the reserve where its board is height-capped. The
   owner's laptop widths (1280, 1366, 1440, 1536) are all well inside E.
   DrillVerticalBudgetTests sweeps the horizontal arithmetic as well as the
   vertical one.

   flex-wrap: nowrap makes "beside" structural rather than arithmetic: if a
   scrollbar or a zoom level ever did leave the column a few px short, the two
   columns shrink a few px instead of the sidebar dropping under the board and
   the panel landing beside nothing.

   It covers the top of the sidebar card while a verdict is up, deliberately, and
   only by its own height (one line of "Expected: e4" is ~90px; the longest
   correction measured 228px): the chips are progress, the panel is the
   correction and the way out of it.

   ONLY THE DOCK MOVES. Anything a page leaves in flow in BelowBoardContent stays
   under a board that now reaches the bottom of the viewport, so it is below the
   fold here. That is why the controls that are a page's only way forward ride
   the dock as well: OpeningDrill's finished line ("See your result", which holds
   the panel up until it is clicked) and BlunderDrill's grading-timeout skip.
   DrillBelowBoardControlsRideTheDockTests fails on any control left in flow on a
   verdict-room shell. What stays in flow is reading matter (OpeningDrill's score
   bar, BookDrill's game line) plus one audited optional control (BookDrill's
   AskCoachButton), all where they sat before #8710. max-height is --drill-available, the height
   the shell has under the chrome, so a long correction scrolls inside the panel
   while the controls stay pinned (DrillVerdictDock's split). On a page with
   nothing between the chrome and the shell that ends the panel at or above the
   bottom of the viewport; a page with its own in-page header above the shell
   (RepertoireDrill, OpeningDrill) starts the board lower and loosens that bound
   by the header's height, which no correction comes near (walked at 1280x720 on
   the repertoire drill: the longest correction plus a 44px button row ended at
   502px of 720).
   ============================================================ */
@media (width > 1100px) {
    .drill-shell.drill-shell-verdict-room[b-osgpoevbqn] {
        /* The row costs no flow height here, so the board keeps all of it. */
        --drill-below-board-reserve: 0px;
        flex-wrap: nowrap;
    }

    .drill-shell.drill-shell-verdict-room > .drill-shell-board-column[b-osgpoevbqn] {
        position: relative;
    }

    .drill-shell-below-board[b-osgpoevbqn]  .drill-advance-row:not(.is-idle) {
        position: absolute;
        top: 0;
        left: calc(100% + 1.5rem);
        width: 20rem;
        z-index: 30;
        margin: 0;
        padding: 0.75rem 0.9rem;
        /* Its own budget, not --drill-below-board-room: that value is the room
           left UNDER the board, which in this band is deliberately zero. */
        max-height: var(--drill-available);
        overflow-y: auto;
        /* Flat, for the same reason the docks above are flat (#7862). */
        background: var(--ascend-bg-card);
        border: 2px solid rgba(49, 221, 227, 0.3);
        border-radius: 16px;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.55);
    }

    .drill-shell-below-board[b-osgpoevbqn]  .drill-advance-row:not(.is-idle) .drill-advance-actions > * {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
    }

    /* #9060 chunk 3 - A DOCK THAT MUST NOT COVER THE QUESTION PANEL (ReserveDockRoomBesideBoard).
       The panel above covers the sidebar card by design, but on a shell with a question panel
       the card is only the first row of the side column and the question panel (the list the
       member just answered on, marked with the truth) starts right under it. A correction taller
       than the card spilled onto that list: walked at 1440x900 on the Calculation Trainer, the
       dock ended at 426px with the question panel starting at 406px, and Candidate Moves' reveal
       is taller still. So on an opted-in shell the side column's first row is at least the
       dock's room (the question panel starts below it, whether or not a verdict is up: nothing
       moves on the verdict edge) and the showing dock is capped to that room, so it never
       reaches the question panel. A longer correction scrolls inside the dock's reading half,
       with its bottom-edge cue, while Next stays pinned (DrillVerdictDock's split). 16rem holds
       the verdict panel, two lines of why and the button row. */
    .drill-shell.drill-shell-verdict-room.drill-shell-with-question.drill-shell-dock-room-beside[b-osgpoevbqn] {
        grid-template-rows: minmax(var(--drill-dock-room-beside), auto) 1fr;
    }

    .drill-shell-dock-room-beside .drill-shell-below-board[b-osgpoevbqn]  .drill-advance-row:not(.is-idle) {
        max-height: min(var(--drill-available), var(--drill-dock-room-beside));
    }
}

/* ============================================================
   #8730 / #8710 - BAND B. Under ~520px of height at phone width the row leaves
   the dock and goes back into FLOW. It is AFTER band A on purpose: both
   selectors have the same specificity, so source order is what makes this the
   winner, and moving it above would silently restore the dock.

   Why flow and not a shorter dock: under ~520px of height a phone-width
   viewport has less than 7rem left under a floor-sized board (at 344px wide the
   chrome is 116px, so 520 - 116 - 20 - 272 = 112px and it only falls from
   there), so the dock would be a scrolling sliver AND, once the room went
   negative, would be painted on the board's last ranks. In flow it is below the
   fold and the page scrolls, exactly as it did before #7173 - the member has to
   scroll, which is a cost, but the board is never covered, and that is the
   complaint this ticket is.
   ============================================================ */
@media (max-width: 768px) and (max-height: 519px) {
    .drill-shell-below-board[b-osgpoevbqn]  .drill-advance-row:not(.is-idle) {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}
/* /Components/Shared/DrillSidePill.razor.rz.scp.css */
.drill-side-pill[b-auas4z4ww0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.drill-side-pill.white[b-auas4z4ww0] {
    border-color: rgba(255, 255, 255, 0.4);
}

.drill-side-pill.black[b-auas4z4ww0] {
    border-color: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.3);
}

.drill-side-dot[b-auas4z4ww0] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.drill-side-pill.white .drill-side-dot[b-auas4z4ww0] {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.drill-side-pill.black .drill-side-dot[b-auas4z4ww0] {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.drill-side-pill strong[b-auas4z4ww0] {
    color: #ffffff;
    font-weight: 700;
}

/* Bug #8764 - the pill for a position that has not said whose move it is.
   Warning colored, not white and not black, because the point is that neither
   answer has been given. */
.drill-side-pill.not-set[b-auas4z4ww0] {
    border-color: var(--ascend-warning);
    background: rgba(245, 158, 11, 0.12);
}

.drill-side-pill.not-set .drill-side-dot[b-auas4z4ww0] {
    background: var(--ascend-warning);
    border: 1px solid rgba(0, 0, 0, 0.3);
}
/* /Components/Shared/DrillSolutionReview.razor.rz.scp.css */
/* Matches TC's .review-section: gradient card + 2px cyan border +
   16px radius + 1.25rem padding + slide-in animation. */
.drill-review[b-pohs1knu36] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1.25rem;
    animation: drill-review-in-b-pohs1knu36 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@keyframes drill-review-in-b-pohs1knu36 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.drill-review-header[b-pohs1knu36] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.drill-review-label[b-pohs1knu36] {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    color: #31DDE3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.drill-review-step[b-pohs1knu36] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.drill-review-moves[b-pohs1knu36] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
}

.drill-review-pair[b-pohs1knu36] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.drill-review-num[b-pohs1knu36] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
}

.drill-review-move[b-pohs1knu36] {
    font-size: 0.85rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.drill-review-move.played[b-pohs1knu36] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.drill-review-move.pending[b-pohs1knu36] {
    color: rgba(255, 255, 255, 0.3);
}

.drill-review-controls[b-pohs1knu36] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.drill-review-btn[b-pohs1knu36] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(49, 221, 227, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s;
}

.drill-review-btn:hover:not(:disabled)[b-pohs1knu36] {
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.drill-review-btn:disabled[b-pohs1knu36] {
    opacity: 0.3;
    cursor: default;
}

.drill-review-actions[b-pohs1knu36] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* ================================================================
   #6784 — phone action dock.

   Owner report: "If I get one wrong, the solution and the continue btn
   are below the visible screen, so I have to scroll everytime I want to
   move on." Measured on the real authenticated page chrome at 320x568 /
   360x640 / 390x844 / 412x915: this card rendered 1094-1146px down the
   document with its advance button at 1218-1270px — 450-700px BELOW the
   fold on every miss, at every phone width.

   Why the action is pinned to the viewport rather than the board shrunk
   to make room: the space is not the board's to give. Measured furniture
   ABOVE the board on a phone is 294-450px (fixed two-row mobile header
   105px + main-content padding-top 108px + page header 90-183px +
   coaching framing 109-130px), and the board itself is only ~336px —
   about 40% of a 844px viewport, NOT the 88dvh the original report
   assumed (ChessBoard's own max-width:768px block already caps it at
   100% of its container on phones). On a 360x640 phone the board's own
   bottom already sits 136px past the fold before this card renders. No
   board size recovers 450px of page header, and no board size is right
   for a correction whose height varies with the solution's length.
   Pinning is invariant to both.

   DESKTOP IS UNTOUCHED — the whole block is inside max-width: 768px, and
   a before/after render at 1440x900, 1280x800, 1024x768 and 769x1024 is
   identical (same board width, same card position, same document width).
   ================================================================ */
@media (max-width: 768px) {
    .drill-review[b-pohs1knu36] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        margin: 0;
        /* A long solution line must not swallow the screen: the card
           scrolls inside itself instead of growing over the board. */
        max-height: 55dvh;
        overflow-y: auto;
        /* Compact, because on a short phone (568-640px tall) the board and
           the correction cannot both fit by arithmetic and the dock covers
           the board's lower ranks; every row saved is a rank recovered. */
        padding: 0.75rem 0.9rem;
        gap: 0.6rem;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.55);
    }

    /* Keep the two control rows short — wrap rather than force width. */
    .drill-review-controls[b-pohs1knu36],
    .drill-review-actions[b-pohs1knu36] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* /Components/Shared/DrillVerdictChip.razor.rz.scp.css */
/* #8993 - the at-board verdict chip.

   POSITION. The host renders the chip inside its positioned board frame
   (.drill-shell-board, .puzzle-surface-board-card) and the chip pins itself to
   that frame's top edge, centered. How far it straddles the edge is the host's
   call, through --drill-verdict-chip-lift, because only the host knows whether
   there is padding between its edge and the first rank:
     -50%   straddle the edge: the lower half lies in the frame's padding. Only
            where that padding is at least half the chip (the 2rem desktop card).
     -100%  (default) sit wholly above the edge, clear of every square, for a
            bare board or a phone's hairline padding.
   A host whose top edge can sit flush under the phone's sticky header may move
   the chip to its BOTTOM edge instead (--drill-verdict-chip-top: 100% with a 0
   lift: wholly below the frame). Never over a square (#8710).

   SURFACE. Flat, never a gradient: axe cannot judge text over a gradient
   (AxeDecidableTextSurfaceTests). The verdict color is the border and the text,
   on the card navy, so it reads at a glance without washing anything. */
.drill-verdict-chip[b-6ep18d9tr0] {
    position: absolute;
    top: var(--drill-verdict-chip-top, 0);
    left: 50%;
    transform: translate(-50%, var(--drill-verdict-chip-lift, -100%));
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: calc(100% - 1rem);
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--drill-verdict-chip-color, var(--ascend-error-light));
    border-radius: 999px;
    background: var(--ascend-bg-card);
    color: var(--drill-verdict-chip-color, var(--ascend-error-light));
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.45);
}

.drill-verdict-chip.correct[b-6ep18d9tr0] {
    --drill-verdict-chip-color: var(--ascend-success);
}

.drill-verdict-chip.alternative[b-6ep18d9tr0] {
    --drill-verdict-chip-color: var(--ascend-secondary-light);
}

.drill-verdict-chip.incorrect[b-6ep18d9tr0] {
    --drill-verdict-chip-color: var(--ascend-error-light);
}

.drill-verdict-chip i[b-6ep18d9tr0] {
    flex-shrink: 0;
    font-size: 0.9rem;
    line-height: 1;
}

.drill-verdict-chip-san[b-6ep18d9tr0] {
    font-weight: 500;
    color: var(--ascend-text-light);
}

/* The fade is decoration, so it is opt-IN: only a member who has not asked for
   reduced motion gets it. Everyone else gets the chip as a plain state change. */
@media (prefers-reduced-motion: no-preference) {
    .drill-verdict-chip[b-6ep18d9tr0] {
        animation: drill-verdict-chip-in-b-6ep18d9tr0 0.16s ease-out;
    }
}

@keyframes drill-verdict-chip-in-b-6ep18d9tr0 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 480px) {
    .drill-verdict-chip[b-6ep18d9tr0] {
        font-size: 0.75rem;
        padding: 0.15rem 0.55rem;
    }
}
/* /Components/Shared/DrillVerdictDock.razor.rz.scp.css */
/* #8730 - the verdict dock's own structure. The four viewport BANDS that take
   this row out of flow live in DrillShell.razor.css (they have to know about the
   board the row must not cover, and they reach this row with ::deep); what is
   here is the row itself, so a dock still works on a surface that is not a
   DrillShell - PuzzleDrillSurface is one.

   THE SPLIT IS THE WHOLE POINT. The row is clipped to the room that actually
   exists under the board, so when the copy outruns the room something has to
   give, and it must not be the control that clears the verdict: clipping a
   wrapping row put "Try again" and "Next position" inside the scroll area
   (measured at 320x568, and at a 20px root font at every band). A COLUMN lets
   .drill-advance-actions keep its natural height while the verdict panel shrinks
   and scrolls in its own box. */
.drill-advance-row[b-kber1zgxv4] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /* The clip that turns the reserve into a guarantee. --drill-below-board-room
       is what DrillShell has left under the board AFTER its clamp resolved, so a
       row clipped to it cannot reach past the bottom of the viewport however
       long the correction runs - a bigger default font size, Android font
       scaling, a promotion-with-check SAN, MoveHabitsDrill's three accepted
       continuations all land inside the same box and scroll within it instead of
       pushing the buttons off screen. A fixed reserve cannot cover a worst case
       that depends on the member's own font size; a bounded box can.

       The `none` fallback is for a host that publishes no room (a surface
       outside DrillShell): unclipped is the old behavior, not a broken one. */
    max-height: var(--drill-below-board-room, none);
    overflow-y: auto;
}

/* The reading half. It is the ONLY flex child allowed to shrink, so when the
   copy outruns the room this is what scrolls - never the controls.
   min-height: 0 is load-bearing: without it a flex item refuses to go below its
   content's height and pushes its siblings out of the box instead. */
.drill-advance-scroll[b-kber1zgxv4] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* #9060 chunk 2 review round 1 - THE "MORE BELOW" CUE. On a phone the why of a board
       drill's correction scrolled inside this half with no sign that it was there. The house
       horizontal cue (ascend-scroll-edge, app.css) turned vertical: an inset shadow at the
       bottom edge, driven by this box's own block scroll timeline, full at the top of the
       scroll and gone at the end. A box with nothing to scroll has an INACTIVE timeline, so the
       base style (no shadow) renders; a browser without scroll timelines lands on the same
       base style. The failure mode is no cue, never a false one. A shadow, not a gradient:
       axe reads no box-shadow, and a background-image here would make every text node inside
       undecidable for it. Longhands on purpose: the `animation` shorthand resets
       animation-timeline, and `auto` is ambiguous with animation-name inside it. */
    animation-name: ascend-scroll-edge-block;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(self block);
}

/* The keyboard tab stop (a showing dock) gets app.css's 3px focus ring drawn INSIDE its own
   box: the app-wide 2px outset ring would be clipped by the row's own overflow. */
.drill-advance-scroll:focus-visible[b-kber1zgxv4] {
    outline: 3px solid var(--ascend-accent);
    outline-offset: -3px;
}

/* ::deep IS LOAD-BEARING HERE, and leaving it out is a rule that silently never
   matches. Blazor's rewriter puts the scope attribute on the LAST element of a
   selector, so the bare form compiles to
       .drill-advance-scroll > * + *[b-<thisComponent>]
   while every child of <Verdict> is authored in the CALLER's razor and carries
   the CALLER's scope id. The rule can then never match anything.

   It worked before this component existed because the container and its children
   were both BlunderDrill's own elements. BlunderDrill is the one caller that
   stacks two blocks in the verdict half (.blunder-correction, then the flash-card
   offer), so without ::deep the offer card butts flush against the correction
   panel at every viewport - on the two routes the customer fix just shipped on.

   The source-reading tests cannot catch this: DrillVerticalBudgetTests parses rule
   bodies out of the SOURCE css and never sees the compiled bundle, where the
   attribute placement is decided. Verify a change here against
   obj/**/scopedcss/bundle/AscendChess.styles.css[b-kber1zgxv4], not against this file. */
.drill-advance-scroll[b-kber1zgxv4] >  * + * {
    margin-top: 0.6rem;
}

/* The pinned half: one 44px button row, and nothing else belongs in here.
   Everything that is reading material (the correction, a flash-card offer, an
   offer's outcome) goes in .drill-advance-scroll above, because the block that
   must survive every clip has to be small enough to always fit. Measured with
   BlunderDrill's offer pinned: at 320x568 and 768x520 this block was 152px
   against 160-172px of room and went partly off screen, which clips the way OUT
   of the verdict - "I cannot seem to make it go away", caused by the fix for
   it. */
.drill-advance-actions[b-kber1zgxv4] {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    /* NEVER shrinks and never scrolls - this is the whole point. */
    flex: 0 0 auto;
}

/* #9060 - AN IDLE DOCK'S ACTIONS HALF HOLDS THE DRILL'S ANSWER CONTROLS.

   A graded drill on a verdict-room shell keeps every control under the board in
   this row (DrillBelowBoardControlsRideTheDockTests), and for MiniPhaseDrill and
   ImbalanceSpotDrill that is the ANSWER controls: a prompt plus five phase buttons,
   an eight-row axis grid plus Submit. They are on screen while the row is idle,
   because answering is what produces the verdict, and the centered wrapping row
   above (made for ONE button row shown with the verdict) put a prompt and a grid
   side by side wherever they fit.

   So while idle the half is a plain column with the below-board slot's own 0.75rem
   gap: the answer controls lay out as they did as that slot's direct children. The
   row itself is already in flow and unstyled while idle (the idle shell below), so
   nothing else changes. No existing caller renders Actions content while idle, so
   this moves nothing they show. Pinned by DrillVerdictDockAnswerControlsTests. */
.drill-advance-row.is-idle > .drill-advance-actions[b-kber1zgxv4] {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.75rem;
}

/* #9060 chunk 1 - A SHOWING DOCK WITH NOTHING TO PIN DROPS ITS ACTIONS BLOCK. A drill
   whose answer controls hide while a self-clearing verdict shows (MiniPhaseDrill; and
   OpeningDrill's showing dock since #8730) renders an EMPTY .drill-advance-actions, which
   still costs the row's 0.6rem gap as dead space at the bottom of the phone dock. Only a
   showing row: an idle one has no gap (below), so this changes nothing there. Blazor
   renders no whitespace text node for an Actions fragment whose @if is false, so :empty
   matches. Pinned by DrillVerdictDockAnswerControlsTests. */
.drill-advance-row:not(.is-idle) > .drill-advance-actions:empty[b-kber1zgxv4] {
    display: none;
}

/* The always-mounted live region's idle shell. DrillFeedbackOverlay keeps its
   role="status" node in the DOM from first render (#8710 problem 3: a live region
   inserted at the same moment as its text is announced inconsistently, worst of
   all by VoiceOver on the iPad this was filed from), so this row is always
   rendered too. With no verdict up it must take no space and paint nothing - and
   it must NOT be display: none, because that removes the region from the
   accessibility tree and puts the bug straight back.

   Two classes, so it outranks every single-class band rule in
   DrillShell.razor.css whatever the source order turns out to be. */
.drill-advance-row.is-idle[b-kber1zgxv4] {
    position: static;
    inset: auto;
    width: auto;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
    gap: 0;
    max-height: none;
    overflow: visible;
}
/* /Components/Shared/DrillVerifierGate.razor.rz.scp.css */
.drill-verifier-gate[b-8dlolg9ngw] {
    margin: 0.5rem 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.gate-actions[b-8dlolg9ngw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gate-hint[b-8dlolg9ngw] {
    font-size: 0.82rem;
    color: var(--ascend-warning);
}

.gate-hint.muted[b-8dlolg9ngw] {
    color: var(--ascend-text-muted);
}

/* PBI #8050 - the expert's answer to a wrong machine refusal. Deliberately
   quiet: an override is a legitimate, recorded act, not an alarm and not a
   celebration. The reason field is required, so it gets the room to write one. */
.gate-hint.overridden[b-8dlolg9ngw] {
    color: var(--ascend-secondary-light);
}

.verifier-override-form[b-8dlolg9ngw] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(184, 133, 54, 0.45);
    border-radius: 0.5rem;
    background: rgba(184, 133, 54, 0.08);
}

.verifier-override-form label[b-8dlolg9ngw] {
    font-size: 0.82rem;
    color: var(--ascend-text-muted);
}

.verifier-override-form[b-8dlolg9ngw]  .override-reason,
.verifier-override-form .override-reason[b-8dlolg9ngw] {
    width: 100%;
    resize: vertical;
    font: inherit;
    padding: 0.4rem 0.5rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
}

.override-actions[b-8dlolg9ngw] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* /Components/Shared/DueReviewsSection.razor.rz.scp.css */
/* Due-for-review section under Today's Focus inside CoachSessionBriefCard.
   Styling mirrors the brief card's dark/cyan palette so the section reads
   as a continuation, not a separate widget. */

.due-reviews-section[b-cn5xmf89kd] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.due-reviews-header[b-cn5xmf89kd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.due-reviews-label[b-cn5xmf89kd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.due-reviews-count[b-cn5xmf89kd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: #31DDE3;
}

.due-reviews-list[b-cn5xmf89kd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.due-row[b-cn5xmf89kd] {
    border: 1px solid rgba(49, 221, 227, 0.18);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    transition: border-color 0.18s ease, background 0.18s ease;
}

.due-row.expanded[b-cn5xmf89kd] {
    border-color: rgba(49, 221, 227, 0.35);
    background: rgba(15, 23, 42, 0.8);
}

.due-row-header[b-cn5xmf89kd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    cursor: pointer;
    text-align: left;
}

.due-row-header:hover[b-cn5xmf89kd] {
    color: #ffffff;
}

.due-row-chevron[b-cn5xmf89kd] {
    flex-shrink: 0;
    width: 0.9rem;
    font-size: 0.8rem;
    /* #7543 - was rgba(255,255,255,0.4): 3.80:1 on the now-opaque card. */
    color: var(--ascend-text-muted);
    transition: color 0.18s ease;
}

.due-row.expanded .due-row-chevron[b-cn5xmf89kd],
.due-row-header:hover .due-row-chevron[b-cn5xmf89kd] {
    color: #31DDE3;
}

.due-row-icon[b-cn5xmf89kd] {
    flex-shrink: 0;
    font-size: 1rem;
    color: #31DDE3;
}

.due-row-name[b-cn5xmf89kd] {
    flex: 1;
    font-weight: 600;
}

/* #9410 - the neutral backlog line under a budgeted repertoire row. */
.due-row-note[b-cn5xmf89kd] {
    display: block;
    margin-top: 0.1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
}

.due-row-count[b-cn5xmf89kd] {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    color: #31DDE3;
    letter-spacing: 0.03em;
}

.due-row-body[b-cn5xmf89kd] {
    padding: 0 1rem 0.85rem 2.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.due-items[b-cn5xmf89kd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    /* Long lists (heavy repertoire days can hit 20+ books) scroll
       within the expanded row rather than pushing the rest of the
       dashboard down. Bounded to ~10 items before the scrollbar
       kicks in — the user can still drill specific items. */
    max-height: 22rem;
    overflow-y: auto;
    /* Themed scrollbar to match the dashboard's dark/cyan palette. */
    scrollbar-width: thin;
    scrollbar-color: rgba(49, 221, 227, 0.4) transparent;
}

.due-items[b-cn5xmf89kd]::-webkit-scrollbar { width: 6px; }
.due-items[b-cn5xmf89kd]::-webkit-scrollbar-track { background: transparent; }
.due-items[b-cn5xmf89kd]::-webkit-scrollbar-thumb {
    background: rgba(49, 221, 227, 0.35);
    border-radius: 3px;
}
.due-items[b-cn5xmf89kd]::-webkit-scrollbar-thumb:hover { background: rgba(49, 221, 227, 0.55); }

.due-item[b-cn5xmf89kd] {
    margin: 0;
    padding: 0;
}

.due-item-link[b-cn5xmf89kd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.15s ease, color 0.15s ease;
}

.due-item-link:hover[b-cn5xmf89kd] {
    color: #ffffff;
    background: rgba(49, 221, 227, 0.08);
}

.due-item-label[b-cn5xmf89kd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: inherit;
}

.due-item-detail[b-cn5xmf89kd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.due-more[b-cn5xmf89kd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    padding-left: 0.6rem;
}

.due-drill-all[b-cn5xmf89kd] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: 0.4rem 0.85rem;
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.18), rgba(49, 221, 227, 0.08));
    border: 1px solid rgba(49, 221, 227, 0.4);
    color: #31DDE3;
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.15s ease, color 0.15s ease;
}

.due-drill-all:hover[b-cn5xmf89kd] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.28), rgba(49, 221, 227, 0.14));
    color: #ffffff;
}

@media (max-width: 640px) {
    .due-row-header[b-cn5xmf89kd] {
        padding: 0.6rem 0.75rem;
        font-size: 0.88rem;
    }
    .due-row-body[b-cn5xmf89kd] {
        padding-left: 2rem;
    }
}
/* /Components/Shared/EarnedCoachOfferCard.razor.rz.scp.css */
/* Earned coach offer (#6201 Tier B, re-homed #6899). Sits directly under the
   Progress trend charts, so it reads as a continuation of the read that fired
   it rather than a banner bolted onto the page. */

.earned-offer[b-89t17ihiyi] {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.07), rgba(10, 22, 40, 0.95));
    box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.35);
}

.eo-head[b-89t17ihiyi] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.eo-head i[b-89t17ihiyi] {
    color: var(--ascend-accent);
    font-size: 1.05rem;
}

.eo-label[b-89t17ihiyi] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.92);
    /* #8095 - the label can carry a coach's name: let a long one wrap inside the card
       instead of widening it at phone width. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.eo-trigger[b-89t17ihiyi] {
    margin-left: auto;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ascend-secondary);
    border: 1px solid rgba(184, 133, 54, 0.45);
    border-radius: 3rem;
    padding: 0.15rem 0.65rem;
}

.eo-reason[b-89t17ihiyi] {
    margin: 0 0 0.85rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.eo-actions[b-89t17ihiyi] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 40rem) {
    .eo-trigger[b-89t17ihiyi] {
        margin-left: 0;
    }

    .eo-actions[b-89t17ihiyi] {
        justify-content: flex-start;
    }
}
/* /Components/Shared/EcoBadge.razor.rz.scp.css */
/* EcoBadge - shared opening identity: name primary, ECO code secondary (#6633) */

.eco-badge-row[b-1zl7n45ed5] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    /* A code RANGE (the Benoni spans A60-A79) is many chips, and the stored
       string is comma-joined with no spaces - one unbreakable word that used to
       overflow its card. Wrapping at chip boundaries is what keeps a long range
       inside the card. */
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

/* Primary: the natural-language opening name reads first. */
.eco-name[b-1zl7n45ed5] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Secondary: the code, badged so it never reads as the opening's identity. */
.eco-code[b-1zl7n45ed5] {
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ascend-secondary);
    background: rgba(184, 133, 54, 0.15);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* /Components/Shared/EloImpactInterval.razor.rz.scp.css */
/* EloImpactInterval (#9365, #9384, #9453) - an Elo impact; its certainty and its 80% likely
 * range are in the tooltip and the accessible text. #9453 - nothing is printed beside the
 * estimate any more, and this file sets NO color: the estimate always takes its caller's tone
 * (the opening card's chip, the Opening Hub grid's sign color). InheritedContrastRatchetTests
 * pins that, the shape #9405's contrast fix takes now that the line under the estimate is gone.
 * Tokens only (ScopedCssBoundaryTests). */

/* The containing block for the visually-hidden sentence, so inside a horizontal scroller it
 * stays in the scroller (the RateInterval #9336 lesson). */
.elo-interval[b-yv7v2w9ta6] {
    position: relative;
}

.elo-stacked .elo-value[b-yv7v2w9ta6] {
    display: block;
}
/* /Components/Shared/EmailLandingCard.razor.rz.scp.css */
/* #8094 - extracted from EmailUnsubscribe.razor.css (#6659), the same look. */
.email-landing-page[b-urvilz2gnj] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.email-landing-card[b-urvilz2gnj] {
    width: min(100%, 480px);
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.email-landing-logo[b-urvilz2gnj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.email-landing-logo-img[b-urvilz2gnj] {
    height: 56px;
    width: auto;
}

/* Two-tone wordmark rendered by the shared <Wordmark /> component (#6355). */
.email-landing-brand[b-urvilz2gnj] {
    font-family: var(--ascend-font-primary);
    font-size: 1.4rem;
    font-weight: 800;
    --wordmark-tracking: 0.05em;
}

.email-landing-card[b-urvilz2gnj]  h1 {
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-primary);
    font-size: 1.6rem;
    margin: 0 0 0.75rem;
    overflow-wrap: anywhere;
}

.email-landing-card[b-urvilz2gnj]  .subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    margin: 0 0 1.25rem;
}

.email-landing-card[b-urvilz2gnj]  .hint {
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    margin: 1.25rem 0 0;
    line-height: 1.6;
}

.email-landing-card[b-urvilz2gnj]  a {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.email-landing-card[b-urvilz2gnj]  a:hover {
    text-decoration: underline;
}

.email-landing-card[b-urvilz2gnj]  .email-landing-btn {
    /* #8705 - the card's links are underlined (above); a button styled from an <a> is not. */
    text-decoration: none;
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-bg-dark);
    -webkit-text-fill-color: var(--ascend-bg-dark);
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    padding: 0.875rem 2.5rem;
    min-height: 44px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.email-landing-card[b-urvilz2gnj]  .email-landing-btn:hover {
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* Empty State Component - AscendChess */

.empty-state[b-q594t2gz64] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    gap: 0.5rem;
}

/* #8873 - inside a card, which already pads its body. */
.empty-state.compact[b-q594t2gz64] {
    padding: 1.5rem 0.5rem;
}

.empty-state h3[b-q594t2gz64] {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-family: var(--ascend-font-primary);
}

/* #8087 - the HeadingLevel="2" title must look exactly like the h3 one. Its paint (color, font)
   is owned by app.css next to the h3's (SharedClassOwnershipTests); only geometry is here: the
   global h2 rule is larger and adds a negative letter-spacing that the h3 rule does not. */
.empty-state h2[b-q594t2gz64] {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: inherit;
}

.empty-state p[b-q594t2gz64] {
    margin: 0;
    max-width: 400px;
    color: rgba(255, 255, 255, 0.6);
}
/* /Components/Shared/EngineLinePanel.razor.rz.scp.css */
/* Engine line panel (#6765/#6766). Brand tokens only. */

/* Owner canary 2026-07-31: the header was eating a card's worth of vertical
   space above the move list. No title row, no boxed chrome - the eval reads as
   the heading and the whole control is one line. */
/* #7188 - the separator and the spacing below now belong to the ENGINE READS
   strip that hosts this panel alongside the live rows, not to this panel: a
   border under one cell of a two-column strip draws a line through the middle
   of a single reference band. */
.engine-line-panel[b-n1w3u3rvvq] {
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* #7188 - .elp-toggle is gone. The on/off word buttons that used to sit at the
   end of this readout moved to the control bar under the board as a single
   stateful toggle, because a control that hides a panel must not live inside
   the panel it hides (and hiding must actually reclaim the space). */

.elp-muted[b-n1w3u3rvvq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    /* #7747 - was rgba(255, 255, 255, 0.45); axe-core 4.13.0 measured 4.45:1
       on /games/{id}/analysis. Same dim-white family, same #7232 token. */
    color: var(--ascend-text-secondary);
}

/* ------------------------------------------------------------------ readout */

.elp-readout[b-n1w3u3rvvq] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.elp-eval[b-n1w3u3rvvq] {
    font-family: var(--ascend-font-primary);
    font-size: 1.0625rem;
}

.elp-eval.white-better[b-n1w3u3rvvq] { color: #ffffff; }
.elp-eval.black-better[b-n1w3u3rvvq] { color: var(--ascend-secondary-light); }
.elp-eval.level[b-n1w3u3rvvq]        { color: rgba(255, 255, 255, 0.75); }

.elp-depth[b-n1w3u3rvvq],
.elp-engine[b-n1w3u3rvvq],
.elp-source[b-n1w3u3rvvq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
}

/* Stored vs live must be distinguishable at a glance - a shallow cached read
   is never passed off as a deep live one (#6767 criterion 12). */
.elp-source[b-n1w3u3rvvq] {
    border: 1px solid rgba(184, 133, 54, 0.45);
    color: var(--ascend-secondary-light);
    border-radius: 50px;
    padding: 0.0625rem 0.5rem;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------- line */

.elp-line[b-n1w3u3rvvq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.elp-ply[b-n1w3u3rvvq] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.1875rem;
}

.elp-num[b-n1w3u3rvvq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: var(--ascend-text-muted); /* #9457 - was rgba(255,255,255,0.4), 3.80:1 */
}

.elp-move[b-n1w3u3rvvq] {
    background: none;
    border: none;
    padding: 0.0625rem 0.1875rem;
    border-radius: 6px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.elp-move:hover[b-n1w3u3rvvq] {
    background: rgba(49, 221, 227, 0.16);
    color: var(--ascend-accent-light);
}

.elp-single[b-n1w3u3rvvq] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Shared/EngineLines.razor.rz.scp.css */
/* #8955 - the shared engine-lines panel. Brand tokens only. One compact block:
   a small header (engine, source), then one row per line - eval chip, depth,
   moves - so three lines read like Lichess's lines box, not three cards. */

.engine-lines[b-z02w0dqk67] {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.el-empty[b-z02w0dqk67] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: var(--ascend-text-muted);
}

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

.el-head[b-z02w0dqk67] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}

.el-engine[b-z02w0dqk67] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--ascend-text-muted);
}

/* Stored, server and live must be told apart at a glance: a shallow saved read
   is never passed off as a deep live one (#6767 criterion 12). */
.el-source[b-z02w0dqk67] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.45);
    border-radius: 50px;
    padding: 0 0.5rem;
}

/* ------------------------------------------------------------------- lines */

.el-list[b-z02w0dqk67] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.el-line[b-z02w0dqk67] {
    display: grid;
    grid-template-columns: 3.75rem 2rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: 0.375rem;
    min-height: 1.75rem;
    padding: 0.125rem 0.25rem;
    border-radius: 8px;
    min-width: 0;
}

.el-eval[b-z02w0dqk67] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9375rem;
    text-align: center;
    border-radius: 6px;
    padding: 0 0.25rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ascend-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-eval.negative[b-z02w0dqk67] {
    color: var(--ascend-secondary-light);
}

.el-depth[b-z02w0dqk67] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-text-muted);
    white-space: nowrap;
}

/* The moves wrap rather than overflow: a twelve-ply line is two rows in a narrow
   rail, never a horizontal scroll.

   Pinned to the LAST track, not left to auto-placement: a host may hide the depth
   (Game Review's phone-today hides every search statistic), and auto-placement
   would then drop the moves into the 2rem depth column, one move per row. */
.el-moves[b-z02w0dqk67] {
    grid-column: -2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.25rem;
    min-width: 0;
}

/* A move number and the move after it wrap as one: "3." never ends a row with its
   move starting the next. */
.el-ply[b-z02w0dqk67] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    white-space: nowrap;
}

.el-num[b-z02w0dqk67] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: var(--ascend-text-muted);
}

.el-move[b-z02w0dqk67] {
    background: none;
    border: none;
    padding: 0.0625rem 0.1875rem;
    border-radius: 6px;
    font-family: var(--ascend-font-secondary);
    /* #9211 (owner 2026-10-28: "way too big of a font... a little less prominent,
       maybe a little less bold"): one step down from 0.9375rem, weight pinned to
       regular so it cannot inherit a heavier panel weight, and the muted text color
       until a move is hovered, focused or previewed. */
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ascend-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    touch-action: manipulation;
}

.el-move:focus-visible[b-z02w0dqk67] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 1px;
    color: var(--ascend-text-light);
}

.el-move.is-previewing[b-z02w0dqk67] {
    background: rgba(49, 221, 227, 0.2);
    color: var(--ascend-accent-light);
}

/* Hover styling only where hover exists, the same split the preview uses: on a
   touch screen a "hover" is a tap and must not stick. */
@media (hover: hover) and (pointer: fine) {
    .el-line:hover[b-z02w0dqk67] {
        background: rgba(49, 221, 227, 0.06);
    }

    .el-move:hover[b-z02w0dqk67] {
        background: rgba(49, 221, 227, 0.16);
        color: var(--ascend-accent-light);
    }
}

/* A finger needs a bigger target than a mouse. */
@media (pointer: coarse) {
    .el-move[b-z02w0dqk67] {
        padding: 0.25rem 0.375rem;
        min-height: 2rem;
    }
}

/* ------------------------------------------------------------ preview bar */

.el-preview-bar[b-z02w0dqk67] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
    margin-top: 0.375rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
}

.el-preview-label[b-z02w0dqk67] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    color: var(--ascend-text-light);
}

.el-preview-actions[b-z02w0dqk67] {
    display: inline-flex;
    gap: 0.375rem;
    margin-left: auto;
}

@media (max-width: 400px) {
    .el-line[b-z02w0dqk67] {
        grid-template-columns: 3.25rem 1.75rem minmax(0, 1fr);
        column-gap: 0.25rem;
    }
}
/* /Components/Shared/ErrorBanner.razor.rz.scp.css */
.error-banner[b-71hjoy5pwv] {
    /* A banner spans its container. Mounted directly in the dashboard's
       two-column grid it would otherwise take one column and read as a card,
       which is the opposite of what an error notice is for. Inert outside a
       grid. */
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.error-banner[b-71hjoy5pwv]  i {
    font-size: 16px;
    flex-shrink: 0;
}

.error-banner-message[b-71hjoy5pwv] {
    flex: 1;
    min-width: 0;
    line-height: 1.5;
}

.error-banner-retry[b-71hjoy5pwv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 50px;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.error-banner-retry:hover:not(:disabled)[b-71hjoy5pwv] {
    background: rgba(49, 221, 227, 0.12);
    border-color: #31DDE3;
}

.error-banner-retry:disabled[b-71hjoy5pwv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.error-banner-retry[b-71hjoy5pwv]  i {
    font-size: 12px;
}
/* /Components/Shared/EvalBar.razor.rz.scp.css */
.eval-bar[b-rxvw9m206h] {
    width: 24px;
    min-height: 400px;
    background: #1a1a2e;
    border-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.eval-bar-white[b-rxvw9m206h] {
    background: linear-gradient(180deg, #f0f0f0 0%, #e0e0e0 100%);
    transition: height 0.3s ease;
    width: 100%;
}

.eval-bar-black[b-rxvw9m206h] {
    flex: 1;
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%);
}

.eval-bar-score[b-rxvw9m206h] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    font-size: 0.625rem;
    font-weight: 600;
    color: #31DDE3;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* /Components/Shared/EvalDisplay.razor.rz.scp.css */
/* EvalDisplay — color-coded engine evaluation with bg indicator */

.eval-display[b-yajbx2hjp4] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: default;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    display: inline-block;
    line-height: 1.3;
    /* The eval is a single token ("+0.5", "W M3") — never let it wrap, or a
       space-containing mate reading breaks onto two lines and gets clipped by
       the row height on narrow layouts. */
    white-space: nowrap;
}

.eval-white-adv[b-yajbx2hjp4] {
    color: #1a1a2e;
    background: #e8e8e8;
}

.eval-black-adv[b-yajbx2hjp4] {
    color: #e8e8e8;
    background: #3a3a4a;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.eval-even[b-yajbx2hjp4] {
    color: rgba(255, 255, 255, 0.8);
    background: linear-gradient(135deg, rgba(200, 200, 200, 0.25), rgba(60, 60, 80, 0.25));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.eval-empty[b-yajbx2hjp4] {
    color: rgba(255, 255, 255, 0.3);
}
/* /Components/Shared/ExampleLinePlayer.razor.rz.scp.css */
/* PBI #8678 - the example line on its own board. Tokens only; sizes in rem so the
   control row and the move list wrap at 344px. */
/* A solid surface of its own, so every text node on it has a decidable contrast
   (the lesson section behind it is a gradient that axe cannot measure through). */
.elp[b-vpibzzn17y] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--ascend-bg-card);
    /* #8837 - the control row below sizes itself to THIS box, not the viewport:
       the player sits in the lesson's board column, which is 206px wide on a
       344px phone and ~250px at 390, so a viewport query cannot tell when the
       four controls fit on one line. The box is block-level (its width comes
       from its parent, never its content), so inline-size containment is safe. */
    container-type: inline-size;
}

.elp-board[b-vpibzzn17y] {
    width: 100%;
    max-width: 22rem;
    margin: 0 auto;
}

/* #8837 - the controls used to be a wrapping flex row, so on a phone they
   broke 2 + 2 (344) or 3 + 1 (390) with each button at its own width: "Back"
   82px over "Forward" 105px, and End alone on the second line. Now two equal
   tracks when the box is narrow (Start | Back over Forward | End, all four one
   width), and one line once the box can hold it: Start and End stay square at
   the ends, Back and Forward share the middle equally.

   NAMED EXCEPTION to the #8837 icon-only rule ("icon-only buttons stay square,
   beside a stack, never in it"): in the narrow 2 x 2 layout the icon-only Start
   and End fill their tracks like Back and Forward. This is a four-button
   transport grid, not a stack of actions: all four cells share one width, which
   is what the rule protects. One line needs about 300px (two 44px squares plus
   "Back" and "Forward") and the box is 182px inside on a 344 phone, so square
   Start/End cells would only leave ragged holes in the grid. The DOM order
   (Start, Back, Forward, End) is the reading order. */
.elp-controls[b-vpibzzn17y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

@container (min-width: 21rem) {
    .elp-controls[b-vpibzzn17y] {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    }
}

.elp-btn[b-vpibzzn17y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    border: 1px solid var(--ascend-text-secondary);
    background: var(--ascend-bg-card);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    cursor: pointer;
}

.elp-btn:hover:not(:disabled)[b-vpibzzn17y],
.elp-btn:focus-visible[b-vpibzzn17y] {
    border-color: var(--ascend-accent);
}

.elp-btn:focus-visible[b-vpibzzn17y] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.elp-btn:disabled[b-vpibzzn17y] {
    cursor: default;
    color: var(--ascend-text-secondary);
}

.elp-btn-primary[b-vpibzzn17y] {
    border-color: var(--ascend-accent);
}

.elp-moves[b-vpibzzn17y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.elp-move[b-vpibzzn17y] {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    border: 1px solid transparent;
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.elp-move.is-played[b-vpibzzn17y] {
    color: var(--ascend-text-light);
}

.elp-move.is-current[b-vpibzzn17y] {
    border-color: var(--ascend-accent);
    color: var(--ascend-text-light);
    font-weight: 600;
}

.elp-num[b-vpibzzn17y] {
    color: var(--ascend-text-secondary);
}

.elp-status[b-vpibzzn17y],
.elp-note[b-vpibzzn17y] {
    margin: 0;
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.45;
}
/* /Components/Shared/ExerciseProgressSection.razor.rz.scp.css */
.exercise-progress-section[b-iuzmrhwzqu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Two-tone title rendered by the shared Wordmark component (#6356), which
   owns the flush-seam rule; tracking flows through --wordmark-tracking. */
.ep-section-title[b-iuzmrhwzqu] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    --wordmark-tracking: 0.08em;
    margin: 0;
}

.ep-section-subtitle[b-iuzmrhwzqu] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    margin: 0;
}

.ep-grid[b-iuzmrhwzqu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.ep-card[b-iuzmrhwzqu] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ep-card-wide[b-iuzmrhwzqu] {
    grid-column: 1 / -1;
}

.ep-card-header[b-iuzmrhwzqu] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.ep-card-header i[b-iuzmrhwzqu] {
    color: var(--ascend-secondary);
    font-size: 1.1rem;
}

.ep-card-title[b-iuzmrhwzqu] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    flex: 1;
}

.ep-headline[b-iuzmrhwzqu] {
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.ep-of[b-iuzmrhwzqu] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.9rem;
    font-weight: 500;
}

.ep-bands[b-iuzmrhwzqu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ep-band-chip[b-iuzmrhwzqu] {
    background: rgba(184, 133, 54, 0.12);
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.625rem;
    white-space: nowrap;
}

.ep-band-chip.complete[b-iuzmrhwzqu] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.45);
    color: #6ee7b7;
}

.ep-card-empty[b-iuzmrhwzqu] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    margin: 0;
}

.ep-checkpoint-line[b-iuzmrhwzqu] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ep-checkpoint-line strong[b-iuzmrhwzqu] {
    color: #ffffff;
    font-size: 1.05rem;
}

.ep-delta[b-iuzmrhwzqu] {
    font-size: 0.78rem;
    font-weight: 600;
}

.ep-delta.up[b-iuzmrhwzqu] { color: #6ee7b7; }
.ep-delta.down[b-iuzmrhwzqu] { color: #fca5a5; }
/* /Components/Shared/FaqList.razor.rz.scp.css */
/* #8418 - the shared FAQ rows. Two looks, moved here unchanged from the pages that
   hand-rolled them: Landing from Home.razor.css (.lp-faq-list / .lp-faq-item) and
   Compact from Pricing.razor.css (.pricing-faq details). Brand colors are tokens.

   SPECIFICITY PARITY: each variant class sits inside :where(), so every selector here
   weighs exactly what the page rule it replaced weighed, and the cascade resolves as it
   did before the move. It matters on /pricing: PublicPageShell's
   `.public-content ::deep p:not(...)` ties the compact answer rule and wins on bundle
   order, which is how /pricing's answers have always got their 1rem bottom margin and
   0.75 text color. A plain `.faq-list-compact .faq-item p` outweighed it and changed
   both with the flag off (#8418 review round 1). FaqListSpecificityContractTests pins it. */

.faq-list[b-wz96ov3lwt] {
    width: 100%;
    margin: 0;
}

/* Landing: the home page accordions. */
:where(.faq-list-landing) .faq-item[b-wz96ov3lwt] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

:where(.faq-list-landing) .faq-item[open][b-wz96ov3lwt] {
    border-color: rgba(49, 221, 227, 0.45);
    background: rgba(49, 221, 227, 0.04);
}

:where(.faq-list-landing) .faq-item summary[b-wz96ov3lwt] {
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-family: var(--ascend-font-primary, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    list-style: none;
    position: relative;
    padding-right: 2.5rem;
}

:where(.faq-list-landing) .faq-item summary[b-wz96ov3lwt]::-webkit-details-marker { display: none; }

:where(.faq-list-landing) .faq-item summary[b-wz96ov3lwt]::after {
    content: '+';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--ascend-accent);
    transition: transform 0.2s ease;
    font-weight: 300;
    line-height: 1;
}

:where(.faq-list-landing) .faq-item[open] summary[b-wz96ov3lwt]::after {
    content: '\2212';
}

:where(.faq-list-landing) .faq-item p[b-wz96ov3lwt] {
    padding: 0 1.25rem 1.1rem;
    margin: 0;
    font-family: var(--ascend-font-secondary, sans-serif);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65;
}

/* Compact: the public pages' rows (/pricing, /for-coaches). */
:where(.faq-list-compact) details.faq-item[b-wz96ov3lwt] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    margin-bottom: 0.75rem;
}

:where(.faq-list-compact) .faq-item summary[b-wz96ov3lwt] {
    cursor: pointer;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

:where(.faq-list-compact) .faq-item p[b-wz96ov3lwt] {
    margin: 0.75rem 0 0;
    color: rgba(255, 255, 255, 0.7);
}

/* A link lands on an entry by its anchor; keep it clear of the sticky marketing header. */
.faq-item[id][b-wz96ov3lwt] {
    scroll-margin-top: 6rem;
}
/* /Components/Shared/FeedbackButton.razor.rz.scp.css */
/* Floating feedback button — small icon-only circle, bottom-right. Smaller
   footprint so it doesn't overlap page content. Brand cyan + subtle shadow. */
.feedback-fab[b-rimfedagi0] {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    z-index: 9000;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: var(--ascend-primary);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(49, 221, 227, 0.4), 0 0 0 1px rgba(49, 221, 227, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, visibility 0s linear 0s;
}

/* THE BUTTON YIELDS TO WHATEVER IS UNDER IT.

   /js/feedback-fab.js (loaded once from App.razor) sets data-yield on this
   button whenever a tap in its footprint would otherwise land on a control, or
   while a dialog or full-screen scrim is open, and clears it once the corner
   is clear and scrolling has settled. The long note is in that script; the
   measured case was the passkey remove panel's "Keep it" at 390x844, under
   this button by 283 px2 with the page at rest.

   pointer-events goes first, with no transition, so a tap during the fade
   already reaches the control underneath; visibility follows the fade so the
   hidden button also leaves the tab order and the accessibility tree. */
.feedback-fab[data-yield][b-rimfedagi0] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}

@media (prefers-reduced-motion: reduce) {
    .feedback-fab[b-rimfedagi0],
    .feedback-fab[data-yield][b-rimfedagi0] {
        transition: none;
    }
}

.feedback-fab:hover[b-rimfedagi0] {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 8px 20px rgba(49, 221, 227, 0.55);
}

.feedback-fab:active[b-rimfedagi0] {
    transform: scale(0.96);
}

.feedback-fab[b-rimfedagi0]  i {
    font-size: 1.05rem;
    line-height: 1;
}

/* Phones: lift the FAB above the bottom mobile nav so it doesn't get buried. */
@media (max-width: 600px) {
    .feedback-fab[b-rimfedagi0] {
        bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
    }
}

/* #7912 - THE BUTTON STANDS DOWN WHILE A DRILL BOARD IS LIVE, UP TO TABLET WIDTH.

   Wherever DrillShell stacks - its own 768px rule, and ALSO whenever its flex
   row wraps, which in MainLayout's 240px-sidebar band (769-1024px) is every
   window narrower than ~950px - the drill's answer controls run the full width
   of the content column directly under the board, and this button is fixed
   over the bottom-right of whatever is there. Measured with touch emulation
   and the page at rest: it sat on Imbalances' 'Black' answer at 390x664,
   344x746 and 820x1180 (a portrait tablet), on Read-Then-Rate's 'Better' at
   344x746, on Opening Practice's board itself at 390x664, and on Their Best
   Move's instructions. On a timed drill that is a mis-tap that opens a modal
   mid-rep, and the control underneath can only be reached by scrolling it out
   from under the button.

   Padding the page cannot fix that: a fixed button covers whatever scrolls
   under it, and the reported overlap was with the page scrolled to 0. So while
   a drill board is on screen the button is not drawn. The hook is the same
   structural one PageContainer uses for its compact header (#7891):
   `.drill-shell` is DrillShell's root class, so the button returns on the
   drill's setup and results screens (no shell there) and on every other page,
   and a future drill inherits this with no page edits.

   1024px, not 768px, because the wrap is decided by the content column, not by
   a breakpoint, and 1024 is where MainLayout's narrow-sidebar band ends. Above
   it the shell always sits beside its sidebar, centered, and the button clears
   it (measured at 1280x720, 1440x790 and 1440x900: nothing under it).

   The Razor CSS rewriter leaves the :has() argument alone and scopes the last
   compound: `body:has(.drill-shell) .feedback-fab[b-...]`. */
@media (max-width: 1024px) {
    body:has(.drill-shell) .feedback-fab[b-rimfedagi0] {
        display: none;
    }
}

/* Modal */
.feedback-overlay[b-rimfedagi0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    z-index: 9050;
}

.feedback-modal[b-rimfedagi0] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 92vw);
    max-height: 88dvh;
    overflow: hidden;
    z-index: 9100;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 50px rgba(49, 221, 227, 0.12);
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: var(--ascend-font-secondary);
}

.feedback-header[b-rimfedagi0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.15);
}

.feedback-header h3[b-rimfedagi0] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

.feedback-close[b-rimfedagi0] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.feedback-close:hover[b-rimfedagi0] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.feedback-body[b-rimfedagi0] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* #9173 - this column SCROLLS, so nothing in it may shrink to make room: at 344 the consent line used to squeeze the
   Details box from six rows to one (the default flex-shrink of 1). Content keeps its size and the body scrolls. */
.feedback-body > *[b-rimfedagi0] {
    flex-shrink: 0;
}

.feedback-label[b-rimfedagi0] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: -0.25rem;
}

.feedback-types[b-rimfedagi0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

/* #8747 - four kinds (Question added while coach-report-handoff is on): one row where it fits,
   two rows of two on a phone. */
.feedback-types-four[b-rimfedagi0] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 420px) {
    .feedback-types-four[b-rimfedagi0] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.feedback-type[b-rimfedagi0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.feedback-type[b-rimfedagi0]  i {
    font-size: 1.2rem;
    color: rgba(49, 221, 227, 0.8);
}

.feedback-type:hover[b-rimfedagi0] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.3);
    color: #fff;
}

.feedback-type.active[b-rimfedagi0] {
    background: rgba(49, 221, 227, 0.18);
    border-color: rgba(49, 221, 227, 0.6);
    color: #fff;
    box-shadow: 0 0 16px rgba(49, 221, 227, 0.18);
}

.feedback-type.active[b-rimfedagi0]  i {
    color: #31DDE3;
}

.feedback-input[b-rimfedagi0],
.feedback-textarea[b-rimfedagi0] {
    width: 100%;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #fff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    resize: vertical;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.feedback-input:focus[b-rimfedagi0],
.feedback-textarea:focus[b-rimfedagi0] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.feedback-input[b-rimfedagi0]::placeholder,
.feedback-textarea[b-rimfedagi0]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.feedback-error[b-rimfedagi0] {
    padding: 0.6rem 0.8rem;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    color: #fecaca;
    font-size: 0.85rem;
}

.feedback-upload[b-rimfedagi0] {
    display: flex;
    align-items: flex-start;
}

.feedback-upload-btn[b-rimfedagi0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(49, 221, 227, 0.4);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.feedback-upload-btn:hover[b-rimfedagi0] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.7);
    color: #fff;
}

.feedback-upload-btn[b-rimfedagi0]  i {
    color: rgba(49, 221, 227, 0.85);
    font-size: 1rem;
}

.feedback-attachment[b-rimfedagi0] {
    position: relative;
    display: inline-block;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 10px;
    overflow: hidden;
    max-width: 220px;
    background: rgba(0, 0, 0, 0.3);
}

.feedback-attachment img[b-rimfedagi0] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
}

.feedback-attachment-remove[b-rimfedagi0] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background 0.15s ease;
}

.feedback-attachment-remove:hover[b-rimfedagi0] {
    background: rgba(239, 68, 68, 0.85);
}

.feedback-footer[b-rimfedagi0] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    background: rgba(0, 0, 0, 0.2);
}

.feedback-cancel[b-rimfedagi0],
.feedback-submit[b-rimfedagi0] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.feedback-cancel[b-rimfedagi0] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.8);
}

.feedback-cancel:hover:not(:disabled)[b-rimfedagi0] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.feedback-submit[b-rimfedagi0] {
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: var(--ascend-primary);
    box-shadow: 0 4px 14px rgba(49, 221, 227, 0.35);
}

.feedback-submit:hover:not(:disabled)[b-rimfedagi0] {
    box-shadow: 0 6px 18px rgba(49, 221, 227, 0.5);
    transform: translateY(-1px);
}

.feedback-submit:disabled[b-rimfedagi0],
.feedback-cancel:disabled[b-rimfedagi0] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.feedback-submit[b-rimfedagi0]  i {
    font-size: 14px;
}

/* Success toast — appears bottom-center, auto-dismisses after 3.5s */
.feedback-toast[b-rimfedagi0] {
    position: fixed;
    bottom: calc(5rem + env(safe-area-inset-bottom, 0));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9200;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(34, 197, 94, 0.92));
    color: var(--ascend-primary);
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.4);
    cursor: pointer;
    animation: feedback-toast-in-b-rimfedagi0 0.25s ease;
}

.feedback-toast[b-rimfedagi0]  i {
    font-size: 16px;
}

@keyframes feedback-toast-in-b-rimfedagi0 {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* #9173 - the testimonial consent line and its opt-out, under the Blurb's box. Muted, readable, never a blocker. */
.feedback-consent[b-rimfedagi0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.feedback-consent-line[b-rimfedagi0] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ascend-text-muted);
}

.feedback-consent-optout[b-rimfedagi0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-size: 0.9rem;
    color: var(--ascend-text-light);
    cursor: pointer;
}

.feedback-consent-optout input[b-rimfedagi0] {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}
/* /Components/Shared/FideLookupInline.razor.rz.scp.css */
/* FideLookupInline (#6944) - mirrors the onboarding wizard's .uscf-* inline
   form so the two federation-identity steps read as one pair, written against
   the brand tokens rather than the grandfathered raw hex. */

.fide-lookup-inline[b-9f55xyfyxq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
}

.fide-input-row[b-9f55xyfyxq] {
    display: flex;
    gap: 0.5rem;
}

.fide-input[b-9f55xyfyxq] {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
    outline: none;
}

.fide-input:focus[b-9f55xyfyxq] {
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.fide-input[b-9f55xyfyxq]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.fide-lookup-btn[b-9f55xyfyxq] {
    background: rgba(49, 221, 227, 0.1);
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.fide-lookup-btn:hover:not(:disabled)[b-9f55xyfyxq] {
    background: rgba(49, 221, 227, 0.2);
    border-color: rgba(49, 221, 227, 0.5);
}

.fide-lookup-btn:disabled[b-9f55xyfyxq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fide-provenance[b-9f55xyfyxq] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    font-family: var(--ascend-font-secondary);
}

.fide-pick-warning[b-9f55xyfyxq],
.fide-confirm-warning[b-9f55xyfyxq] {
    color: var(--ascend-secondary-light);
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
    margin: 0;
}

.fide-results-list[b-9f55xyfyxq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 16rem;
    overflow-y: auto;
}

.fide-result-item[b-9f55xyfyxq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.fide-result-item:hover[b-9f55xyfyxq] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.4);
}

.fide-result-name[b-9f55xyfyxq],
.fide-confirm-name[b-9f55xyfyxq] {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: var(--ascend-font-secondary);
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.fide-title[b-9f55xyfyxq] {
    color: var(--ascend-secondary-light);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.fide-result-details[b-9f55xyfyxq],
.fide-confirm-details[b-9f55xyfyxq] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-family: var(--ascend-font-secondary);
}

.fide-result-id[b-9f55xyfyxq] {
    color: rgba(255, 255, 255, 0.4);
}

.fide-confirm[b-9f55xyfyxq] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 12px;
    padding: 0.75rem;
}

.fide-confirm-facts[b-9f55xyfyxq] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.fide-confirm-actions[b-9f55xyfyxq] {
    display: flex;
    gap: 0.5rem;
}

.fide-confirm-btn[b-9f55xyfyxq] {
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-primary);
    border: none;
    border-radius: 12px;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fide-confirm-btn:hover:not(:disabled)[b-9f55xyfyxq] {
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.fide-confirm-btn:disabled[b-9f55xyfyxq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fide-notme-btn[b-9f55xyfyxq] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fide-notme-btn:hover:not(:disabled)[b-9f55xyfyxq] {
    background: rgba(255, 255, 255, 0.1);
}

.fide-hint[b-9f55xyfyxq],
.fide-no-list[b-9f55xyfyxq] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
    margin: 0;
}

.fide-error[b-9f55xyfyxq] {
    color: #ef4444;
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
    margin: 0;
}
/* /Components/Shared/FirstPathEscort.razor.rz.scp.css */
/* The way back to the study plan, carried on every page for a player who has
   not reached their plan yet. Quiet by design: it is a signpost, not an alert,
   and it must never look like it is competing with the page the player chose to
   be on. Tokens only, no raw hex. */

.first-path-escort[b-0l7ebz1bj3] {
    /* Inert outside a grid; keeps the bar full width if the shell ever mounts
       it inside one (the empty-half-width-box trap the progress chip hit). */
    grid-column: 1 / -1;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ascend-accent) 10%, transparent),
        color-mix(in srgb, var(--ascend-bg-dark) 90%, transparent));
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
}

.first-path-escort-body[b-0l7ebz1bj3] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.first-path-escort-icon[b-0l7ebz1bj3] {
    color: var(--ascend-accent);
    font-size: 1.1rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.first-path-escort-heading[b-0l7ebz1bj3] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: var(--ascend-accent-light);
}

.first-path-escort-message[b-0l7ebz1bj3] {
    margin: 0.15rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.first-path-escort-action[b-0l7ebz1bj3] {
    flex-shrink: 0;
    padding: 0.6rem 1.35rem;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-bg-dark);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.first-path-escort-action:hover[b-0l7ebz1bj3] {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--ascend-accent) 35%, transparent);
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .first-path-escort[b-0l7ebz1bj3] {
        flex-direction: column;
        align-items: stretch;
    }

    .first-path-escort-action[b-0l7ebz1bj3] {
        text-align: center;
    }
}
/* /Components/Shared/FirstRunHint.razor.rz.scp.css */
/* FirstRunHint (#6756). Quiet by design: one line, one link, one dismiss.
   Tokens only - no raw brand hex, no font literals. */

.first-run-hint[b-n5fpkyead5] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.2);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.first-run-hint-icon[b-n5fpkyead5] {
    color: var(--ascend-accent);
    flex-shrink: 0;
    font-size: 0.9rem;
}

.first-run-hint-text[b-n5fpkyead5] {
    flex: 1;
    min-width: 0;
}

.first-run-hint-link[b-n5fpkyead5] {
    margin-left: 0.35rem;
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.first-run-hint-link:hover[b-n5fpkyead5] {
    color: var(--ascend-accent-light);
}

.first-run-hint-dismiss[b-n5fpkyead5] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.15rem;
    color: var(--ascend-text-secondary);
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1;
}

.first-run-hint-dismiss:hover[b-n5fpkyead5] {
    color: var(--ascend-text-light);
}
/* /Components/Shared/FlashCardSolutionAuthor.razor.rz.scp.css */
.fc-author[b-ds1w8h3767] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fc-author-lede[b-ds1w8h3767] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.62);
}

.fc-author-board[b-ds1w8h3767] {
    width: 100%;
    max-width: 22rem;
    margin: 0 auto;
}

.fc-author-line[b-ds1w8h3767] {
    min-height: 1.9rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.fc-author-empty[b-ds1w8h3767] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}

.fc-author-moves[b-ds1w8h3767] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: fc-author-ply;
}

.fc-author-move[b-ds1w8h3767] {
    padding: 0.1rem 0.5rem;
    background: rgba(49, 221, 227, 0.12);
    border-radius: 999px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: var(--ascend-accent);
}

.fc-author-actions[b-ds1w8h3767] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fc-author-btn[b-ds1w8h3767] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    transition: all 0.15s ease;
}

.fc-author-btn:hover:not(:disabled)[b-ds1w8h3767] {
    border-color: rgba(49, 221, 227, 0.4);
    color: #ffffff;
}

.fc-author-btn:disabled[b-ds1w8h3767] {
    opacity: 0.4;
    cursor: not-allowed;
}

.fc-author-btn-suggest[b-ds1w8h3767] {
    background: rgba(184, 133, 54, 0.14);
    border-color: rgba(184, 133, 54, 0.35);
    color: var(--ascend-secondary-light);
}

.fc-author-btn-suggest:hover:not(:disabled)[b-ds1w8h3767] {
    border-color: rgba(184, 133, 54, 0.6);
    color: var(--ascend-secondary-light);
}

/* #7110 - the author's statement of whose move the card starts on. .fc-author
   is a flex column, so the pill opts out of the default stretch. ::deep -
   .drill-side-pill is the child component's markup. */
.fc-author[b-ds1w8h3767]  .drill-side-pill {
    align-self: flex-start;
}
/* /Components/Shared/FoundingMemberBadge.razor.rz.scp.css */
.fm-badge[b-05vet91i4j] {
    /* Same grid-item trap the progress chip fell into (owner canary
       2026-07-30): this badge is a direct child of the dashboard's two-column
       grid, so without these it inflates from a pill into an empty half-width
       box as tall as whatever card shares its row. It has gone unseen only
       because it renders for founding members alone. Inert outside a grid. */
    grid-column: 1 / -1;
    justify-self: start;
    align-self: start;
    width: fit-content;
    max-width: 100%;

    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1.1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.18), rgba(49, 221, 227, 0.10));
    border: 1px solid rgba(184, 133, 54, 0.45);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.fm-badge-emblem[b-05vet91i4j] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.35), rgba(184, 133, 54, 0.12));
    border: 1px solid rgba(184, 133, 54, 0.6);
}

.fm-badge-emblem[b-05vet91i4j]  i {
    font-size: 22px;
}

.fm-badge-text[b-05vet91i4j] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.fm-badge-title[b-05vet91i4j] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
}

.fm-badge-number[b-05vet91i4j] {
    font-size: 0.85rem;
    color: #B88536;
    font-weight: 600;
}

.fm-badge-lock[b-05vet91i4j] {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}
/* /Components/Shared/GameAnalysisProgressChip.razor.rz.scp.css */
/* PBI #6688 - import/analysis progress chip. Quiet cyan: this is ambient status
   the player may ignore, never an alert and never an action. Tokens only, no raw
   hex. Kept visually lighter than the surrounding cards so it reads as a note in
   the margin rather than a card competing for attention. */

.analysis-progress-chip[b-vgpuy7ujum] {
    /* Owner canary 2026-07-30: the chip mounts as a DIRECT CHILD of the
       dashboard's `grid-template-columns: repeat(2, 1fr)`, so it was a grid
       item - and a grid item's inline-level display is blockified, then
       stretched to fill its column AND the row height set by whatever tall
       card sits beside it. A 0.78rem pill became an empty half-width box the
       height of the Next Step card, with border-radius 50px reading as a card
       corner and the text floating in the middle of nothing.

       All three properties are inert outside a grid, so the component stays
       safe wherever it is mounted: span the full row rather than eat a column,
       and keep the pill at its own size in both axes. */
    grid-column: 1 / -1;
    justify-self: start;
    align-self: start;
    width: fit-content;
    max-width: 100%;

    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    background: color-mix(in srgb, var(--ascend-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.analysis-progress-chip-icon[b-vgpuy7ujum] {
    font-size: 0.85rem;
    animation: analysis-progress-chip-spin-b-vgpuy7ujum 2.4s linear infinite;
}

.analysis-progress-chip-text[b-vgpuy7ujum] {
    white-space: nowrap;
}

@keyframes analysis-progress-chip-spin-b-vgpuy7ujum {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* The chip is ambient, not a spinner the player is asked to watch - hold it
   still for anyone who has asked the system to stop moving things. */
@media (prefers-reduced-motion: reduce) {
    .analysis-progress-chip-icon[b-vgpuy7ujum] {
        animation: none;
    }
}
/* /Components/Shared/GameMetaBanner.razor.rz.scp.css */
.game-meta-banner[b-odjirc89cd] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.meta-players-row[b-odjirc89cd] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
}

.meta-player[b-odjirc89cd] {
    font-weight: 600;
    color: #ffffff;
}

.meta-vs[b-odjirc89cd] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.meta-elo[b-odjirc89cd] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    font-family: var(--ascend-font-secondary);
}

.meta-result-banner[b-odjirc89cd] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
}

.meta-result-banner.white-wins[b-odjirc89cd] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.meta-result-banner.black-wins[b-odjirc89cd] {
    background: rgba(30, 30, 30, 0.4);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.meta-result-banner.draw[b-odjirc89cd] {
    background: rgba(184, 133, 54, 0.1);
    color: #B88536;
    border: 1px solid rgba(184, 133, 54, 0.2);
}

.meta-details-row[b-odjirc89cd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.meta-tag[b-odjirc89cd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

/* #6633 - the shared EcoBadge owns the opening identity tag; keep the banner's
   own muted meta treatment on the name it renders. */
.meta-tag.opening-name[b-odjirc89cd]  .eco-name {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.meta-tag.result[b-odjirc89cd] {
    color: #B88536;
}
/* /Components/Shared/GameStructureChanges.razor.rz.scp.css */
/* PBI #9220 - the game review's structure-change lines. Same type scale as the
   #9216 "Your study" block beside it, so the two read as one review area. */

.game-structure-changes[b-h0ngwsqjky] {
    min-width: 0;
    margin-top: 1rem;
}

.structure-changes-heading[b-h0ngwsqjky] {
    font-family: var(--ascend-font-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-accent);
    margin: 0 0 0.4rem;
}

.structure-changes-intro[b-h0ngwsqjky] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

.structure-changes-list[b-h0ngwsqjky] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.structure-change-line[b-h0ngwsqjky] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.structure-change-line + .structure-change-line[b-h0ngwsqjky] {
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* /Components/Shared/GlobalSearch.razor.rz.scp.css */
/* #8748 - the header search box. The trigger shares the header pill geometry of NotificationBell,
   SessionTimer and SoundToggle so the control row reads as one. The dialog is a native <dialog> in
   the top layer: a panel near the top of the screen (16px gutters on a phone), results as plain
   links. No celebration, no animation beyond a hover tint. */

.gs[b-gnigzg25xb] {
    position: relative;
    display: inline-flex;
}

.gs-trigger[b-gnigzg25xb] {
    /* Shared header-row height (app.css --topbar-control-height). */
    min-height: var(--topbar-control-height);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--ascend-text-light) 12%, transparent);
    background: color-mix(in srgb, var(--ascend-text-light) 5%, transparent);
    color: var(--ascend-text-muted);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.gs-trigger:hover[b-gnigzg25xb] {
    color: var(--ascend-accent);
    border-color: color-mix(in srgb, var(--ascend-accent) 50%, transparent);
    background: color-mix(in srgb, var(--ascend-accent) 8%, transparent);
}

.gs-trigger:focus-visible[b-gnigzg25xb] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.gs-trigger-icon[b-gnigzg25xb] {
    font-size: 0.95rem;
}

.gs-kbd[b-gnigzg25xb] {
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid color-mix(in srgb, var(--ascend-text-light) 20%, transparent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: var(--ascend-text-muted);
}

/* Phone header: an icon button, the same quiet chrome as the bell's compact variant, and a
   44px target. */
.gs-compact .gs-trigger[b-gnigzg25xb] {
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 0;
    background: transparent;
    border-color: transparent;
}

.gs-compact .gs-trigger-icon[b-gnigzg25xb] {
    font-size: 1.1rem;
}

/* The labeled desktop pill is what a touch tablet (768px and wider) gets: the touch floor applies
   on a coarse pointer only, so desktop density stays as it is (the NotificationBell and SessionTimer
   pattern). */
@media (hover: none) and (pointer: coarse) {
    .gs-trigger[b-gnigzg25xb] {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
    }
}

/* ---------------------------------------------------------------- dialog */

/* The panel's height is sized against its own top offset, so a full list never runs past the bottom
   of the screen (the dialog sits in the top layer and cannot be scrolled into view). */
.gs-dialog[b-gnigzg25xb] {
    --gs-top: 10vh;
    width: min(40rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - var(--gs-top) - 1rem);
    margin: var(--gs-top) auto auto;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
    border-radius: var(--radius-lg);
    background: var(--ascend-bg-card);
    color: var(--ascend-text-light);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-align: left;
}

.gs-dialog[b-gnigzg25xb]::backdrop {
    background: rgba(2, 8, 20, 0.7);
}

@media (max-width: 767px) {
    .gs-dialog[b-gnigzg25xb] {
        --gs-top: 1rem;
    }
}

.gs-panel[b-gnigzg25xb] {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - var(--gs-top) - 1rem);
}

.gs-head[b-gnigzg25xb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0 1rem;
}

.gs-title[b-gnigzg25xb] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ascend-text-light);
}

.gs-close[b-gnigzg25xb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ascend-text-muted);
    cursor: pointer;
}

.gs-close:hover[b-gnigzg25xb] {
    color: var(--ascend-accent);
    background: color-mix(in srgb, var(--ascend-accent) 8%, transparent);
}

.gs-close:focus-visible[b-gnigzg25xb] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: -2px;
}

.gs-field[b-gnigzg25xb] {
    position: relative;
    margin: 0.5rem 1rem 0.25rem;
}

.gs-field-icon[b-gnigzg25xb] {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    color: var(--ascend-text-muted);
    pointer-events: none;
}

.gs-input[b-gnigzg25xb] {
    width: 100%;
    min-height: var(--touch-target);
    padding: 0.6rem 0.85rem 0.6rem 2.4rem;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 35%, transparent);
    border-radius: var(--radius-md, 8px);
    background: var(--ascend-bg-dark);
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    /* 16px: smaller makes iOS zoom the page when the field takes focus. */
    font-size: 1rem;
}

.gs-input[b-gnigzg25xb]::placeholder {
    color: var(--ascend-text-muted);
    opacity: 1;
}

.gs-input:focus-visible[b-gnigzg25xb] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 1px;
}

.gs-status[b-gnigzg25xb] {
    margin: 0.5rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-text-muted);
}

.gs-results[b-gnigzg25xb] {
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.gs-result[b-gnigzg25xb] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-height: var(--touch-target);
    padding: 0.55rem 1rem;
    color: var(--ascend-text-light);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    overflow-wrap: anywhere;
}

.gs-result:hover[b-gnigzg25xb] {
    background: color-mix(in srgb, var(--ascend-accent) 8%, transparent);
}

.gs-result:focus-visible[b-gnigzg25xb] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--ascend-accent) 8%, transparent);
}

.gs-result-title[b-gnigzg25xb] {
    font-size: 0.95rem;
}

.gs-result-context[b-gnigzg25xb] {
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.gs-ask[b-gnigzg25xb] {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    margin-top: 0.25rem;
    border-top: 1px solid color-mix(in srgb, var(--ascend-accent) 15%, transparent);
    color: var(--ascend-accent-light);
}

.gs-ask-icon[b-gnigzg25xb] {
    flex-shrink: 0;
}
/* /Components/Shared/GuessTheMoveAttempts.razor.rz.scp.css */
/* #9191 - matches the guess-the-move page's own sidebar cards (SESSION, MOVES). */
.attempts-card[b-si49cl0bty] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
}

.attempts-card h3[b-si49cl0bty] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--ascend-accent);
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.attempt-rows[b-si49cl0bty] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attempt-row[b-si49cl0bty] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.attempt-when[b-si49cl0bty] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: var(--ascend-text-muted);
}

.attempt-side[b-si49cl0bty] {
    margin-left: 0.375rem;
}

.attempt-result[b-si49cl0bty] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: right;
}

.attempt-row[data-outcome="Restarted"] .attempt-result[b-si49cl0bty] {
    color: var(--ascend-text-muted);
}
/* /Components/Shared/GuidedPathPrompt.razor.rz.scp.css */
/* #6692 existing-user guided path prompt - quiet inline banner, never an
   overlay: it must not stand in the way. Tokens only (ScopedCssBoundaryTests). */

.guided-path-prompt[b-33cw3uqqhf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-left: 3px solid var(--ascend-secondary);
    border-radius: 16px;
    padding: 1.1rem 1.35rem;
    margin-bottom: 1.5rem;
}

.guided-path-prompt-body[b-33cw3uqqhf] {
    flex: 1 1 20rem;
    min-width: 0;
}

.guided-path-prompt-heading[b-33cw3uqqhf] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: var(--ascend-secondary-light);
}

.guided-path-prompt-message[b-33cw3uqqhf] {
    margin: 0.45rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.guided-path-prompt-actions[b-33cw3uqqhf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.guided-path-prompt-start[b-33cw3uqqhf] {
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    border-radius: 50px;
    color: var(--ascend-bg-dark);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.6rem 1.4rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.guided-path-prompt-start:hover[b-33cw3uqqhf] {
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.35);
    transform: translateY(-1px);
}

.guided-path-prompt-defer[b-33cw3uqqhf] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    padding: 0.55rem 1.1rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.guided-path-prompt-defer:hover:not(:disabled)[b-33cw3uqqhf] {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.35);
}
/* /Components/Shared/HubSection.razor.rz.scp.css */
/* PBI #6634 - hub layout standard section chrome. The header is the accent
   heading (white keyword + gold period, colors from the global .accent-*
   classes in app.css); this file only owns the section's spacing and the
   quiet rule under the header. */

.hub-section[b-q4rb0kduai] {
    margin-bottom: 2.25rem;
}

.hub-section:last-of-type[b-q4rb0kduai] {
    margin-bottom: 1rem;
}

.hub-section-title[b-q4rb0kduai] {
    font-family: var(--ascend-font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ascend-accent) 18%, transparent);
}
/* /Components/Shared/HubTileGrid.razor.rz.scp.css */
.hub-tile-grid[b-6uf6e11x1d] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.hub-section[b-6uf6e11x1d] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hub-section-title[b-6uf6e11x1d] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-accent);
    margin: 0;
}

.hub-section-description[b-6uf6e11x1d] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.5rem;
}

.hub-tile-row[b-6uf6e11x1d] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
}

@media (min-width: 480px) {
    .hub-tile-row[b-6uf6e11x1d] {
        grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
    }
}

.hub-tile[b-6uf6e11x1d] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-tile:hover[b-6uf6e11x1d] {
    border-color: rgba(49, 221, 227, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(4, 32, 71, 0.4), 0 0 16px rgba(49, 221, 227, 0.1);
}

.hub-tile .hub-tile-icon[b-6uf6e11x1d] {
    font-size: 1.6rem;
    color: var(--ascend-accent);
    flex-shrink: 0;
}

.hub-tile-meta[b-6uf6e11x1d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.hub-tile-title[b-6uf6e11x1d] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ascend-text-light);
}

.hub-tile-blurb[b-6uf6e11x1d] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

.hub-go-arrow[b-6uf6e11x1d] {
    color: rgba(49, 221, 227, 0.6);
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.hub-tile:hover .hub-go-arrow[b-6uf6e11x1d] {
    color: var(--ascend-accent);
    transform: translateX(3px);
}

/* Partner attribution badge - --partner-accent carries the PARTNER's brand
   color (set inline per tile), deliberately outside the ASCEND token set. */
.hub-tile-partner[b-6uf6e11x1d] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.2rem 0.65rem 0.2rem 0.3rem;
    border: 1px solid color-mix(in srgb, var(--partner-accent) 45%, transparent);
    border-radius: 50px;
    background: color-mix(in srgb, var(--partner-accent) 14%, transparent);
    width: fit-content;
}

.hub-tile-partner-logo[b-6uf6e11x1d] {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

.hub-tile-partner-label[b-6uf6e11x1d] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.hub-tile-partner-wordmark[b-6uf6e11x1d] {
    font-family: var(--partner-font, inherit);
    font-size: 0.85rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}
/* /Components/Shared/InstinctPrompt.razor.rz.scp.css */
/* #9031 - the soft "first instinct?" prompt. Calm on purpose: the drill's own cyan
   accent at low strength, no warning color, no motion, no progress bar. It must read as
   an optional aside, never a clock.

   Review round 1: every state's lines share ONE grid cell, and only the current layer is
   visible, so the box is always the height of its tallest state at every width and
   nothing around it moves when the window ends. */
.instinct-slot[b-ay56bbmhwu] {
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
}

.instinct-stack[b-ay56bbmhwu] {
    display: grid;
}

.instinct-layer[b-ay56bbmhwu] {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.instinct-layer.is-inactive[b-ay56bbmhwu] {
    visibility: hidden;
}

.instinct-prompt-title[b-ay56bbmhwu] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--ascend-accent);
}

.instinct-prompt-body[b-ay56bbmhwu] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
}

/* Skip sits beside the short body line, so the box stays two rows tall in every state. */
.instinct-prompt-row[b-ay56bbmhwu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Review round 2: after Skip (or the window ending while Skip had focus) focus moves to
   the line that replaced it (tabindex -1). A pointer user sees no ring; a keyboard user
   sees where focus went. */
.instinct-layer:focus[b-ay56bbmhwu] {
    outline: none;
}

.instinct-layer:focus-visible[b-ay56bbmhwu] {
    outline: 2px solid rgba(49, 221, 227, 0.55);
    outline-offset: 3px;
    border-radius: 6px;
}
/* /Components/Shared/LastMoveNote.razor.rz.scp.css */
/* LastMoveNote (#8701). Quiet context, not an announcement: the member is
   mid-thought about the position, and this line exists so they are not missing
   information - it must not pull the eye off the board.

   Body prose, so it takes the oblique and muted treatment the codebase already
   uses for help text beside a board, with a gold rule on the leading edge to
   mark it as given information rather than instruction. */

.last-move-note[b-lo74kw1qr7] {
    margin: 0.4rem 0 0;
    padding-left: 0.5rem;
    border-left: 2px solid color-mix(in srgb, var(--ascend-secondary) 45%, transparent);
    font-family: var(--ascend-font-secondary);
    font-style: italic;
    font-size: 0.8rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--ascend-text-light) 70%, transparent);
}
/* /Components/Shared/LaunchCountdown.razor.rz.scp.css */
/* Public launch countdown (#6209). Brand dark theme: cyan #31DDE3 accent,
   gold #B88536 secondary, condensed numeric display. */

.launch-countdown[b-k75ub89ko8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem auto;
    padding: 1.25rem 1.5rem;
    max-width: 32rem;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lc-label[b-k75ub89ko8] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.lc-units[b-k75ub89ko8] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
}

.lc-unit[b-k75ub89ko8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.25rem;
}

.lc-value[b-k75ub89ko8] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
    color: #31DDE3;
    text-shadow: 0 0 18px rgba(49, 221, 227, 0.35);
}

.lc-tag[b-k75ub89ko8] {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(184, 133, 54, 0.9);
}

.lc-sep[b-k75ub89ko8] {
    font-size: 1.75rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.3);
    padding-top: 0.2rem;
}

@media (max-width: 480px) {
    .lc-value[b-k75ub89ko8] { font-size: 1.75rem; }
    .lc-unit[b-k75ub89ko8] { min-width: 2.5rem; }
    .lc-sep[b-k75ub89ko8] { font-size: 1.35rem; }
}

/* Respect reduced-motion: the accent glow is static, but suppress any future
   transition/animation on the value for users who opt out of motion. */
@media (prefers-reduced-motion: reduce) {
    .lc-value[b-k75ub89ko8] { text-shadow: none; transition: none; animation: none; }
}
/* /Components/Shared/Lc0EnginePanel.razor.rz.scp.css */
/* Compact mode: engine row */
.engine-row[b-uku1p6ebpd] {
    display: grid;
    grid-template-columns: 28px 52px 1fr auto;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0;
    /* Bug #7766 - the row is the same height whichever state is inside it.
       The states carry different font sizes (the eval reads at 0.875rem, the
       pending and unavailable markers at 0.6875rem), so without this the row
       grew and shrank on every move underneath a column that then had to
       re-divide itself. line-height is declared as a LENGTH, so every child
       inherits the same line box whatever its own font-size, and the row's
       height stops depending on font metrics. It is not a fixed height on
       anything: the row still grows if its content ever wraps. */
    line-height: 1.25rem;
}

.engine-name[b-uku1p6ebpd] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.engine-name.lc0[b-uku1p6ebpd] {
    color: #B88536;
}

.engine-eval[b-uku1p6ebpd] {
    font-family: 'tablet-gothic', monospace;
    font-size: 0.875rem;
    font-weight: 600;
}

.engine-eval.positive[b-uku1p6ebpd] {
    color: #ffffff;
}

.engine-eval.negative[b-uku1p6ebpd] {
    color: rgba(255, 255, 255, 0.6);
}

.engine-best[b-uku1p6ebpd] {
    font-family: 'tablet-gothic', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.engine-stat[b-uku1p6ebpd] {
    font-size: 0.5625rem;
    /* #7747 - was rgba(255, 255, 255, 0.4); axe-core 4.13.0 measured 3.80:1
       on /games/{id}/analysis. Same dim-white family, same #7232 token. */
    color: var(--ascend-text-secondary);
    font-family: monospace;
}

.engine-loading[b-uku1p6ebpd] {
    grid-column: span 3;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.6875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* WDL Compact */
.wdl-compact[b-uku1p6ebpd] {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wdl-compact .wdl-bar[b-uku1p6ebpd] {
    height: 4px;
}

.wdl-compact .wdl-labels[b-uku1p6ebpd] {
    margin-top: 0.125rem;
    /* Bug #7766 - the second of the two line boxes that make up the band's
       height (the 4px bar above is the first). Declared as a length for the
       same reason as .engine-row's, and it is what .wdl-labels-reserved
       matches, so the skeleton and the arrived read are the same height. */
    line-height: 0.75rem;
}

/* Bug #7766 - the reserved skeleton. The band holds its space while the read
   is pending, slow-pending, unavailable or waiting for the first move, so the
   answer changes the panel's CONTENTS and never the analysis column's
   geometry. The track is dimmer than a real bar: it is a placeholder, and it
   must not read as a win/draw/loss split of zero. */
.wdl-compact .wdl-bar-reserved[b-uku1p6ebpd] {
    background: rgba(255, 255, 255, 0.06);
}

/* The empty label line, the same line box the W/D/L labels occupy above. */
.wdl-compact .wdl-labels-reserved[b-uku1p6ebpd] {
    height: 0.75rem;
}

.wdl-compact .wdl-label[b-uku1p6ebpd] {
    font-size: 0.5rem;
}

/* WDL Bar shared styles */
.wdl-bar[b-uku1p6ebpd] {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.wdl-win[b-uku1p6ebpd] {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width 0.3s ease;
}

.wdl-draw[b-uku1p6ebpd] {
    background: linear-gradient(90deg, #6b7280, #9ca3af);
    transition: width 0.3s ease;
}

.wdl-loss[b-uku1p6ebpd] {
    background: linear-gradient(90deg, #dc2626, #ef4444);
    transition: width 0.3s ease;
}

.wdl-labels[b-uku1p6ebpd] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.wdl-label[b-uku1p6ebpd] {
    font-size: 0.5625rem;
    font-weight: 600;
}

.wdl-label.win[b-uku1p6ebpd] {
    color: #22c55e;
}

.wdl-label.draw[b-uku1p6ebpd] {
    color: #9ca3af;
}

.wdl-label.loss[b-uku1p6ebpd] {
    color: #ef4444;
}

/* Full mode: sidebar card */
.sidebar-card[b-uku1p6ebpd] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
}

.lc0-wdl-card[b-uku1p6ebpd] {
    border-color: rgba(184, 133, 54, 0.3);
    position: relative;
}

.lc0-wdl-card[b-uku1p6ebpd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #B88536 0%, #31DDE3 100%);
    border-radius: 16px 16px 0 0;
}

.sidebar-card-header[b-uku1p6ebpd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.sidebar-card-header h3[b-uku1p6ebpd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #B88536;
    margin: 0;
    text-transform: uppercase;
}

.sidebar-card-header h3 i[b-uku1p6ebpd] {
    font-size: 0.875rem;
}

.lc0-toggle[b-uku1p6ebpd] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lc0-toggle:hover:not(:disabled)[b-uku1p6ebpd] {
    border-color: rgba(184, 133, 54, 0.4);
    color: rgba(255, 255, 255, 0.7);
}

.lc0-toggle.enabled[b-uku1p6ebpd] {
    background: rgba(184, 133, 54, 0.15);
    border-color: rgba(184, 133, 54, 0.4);
    color: #B88536;
}

.lc0-toggle:disabled[b-uku1p6ebpd] {
    opacity: 0.6;
    cursor: not-allowed;
}

.lc0-wdl-content[b-uku1p6ebpd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* WDL Bar - Larger version for sidebar */
.wdl-bar-large[b-uku1p6ebpd] {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.wdl-bar-large .wdl-win[b-uku1p6ebpd] {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width 0.3s ease;
}

.wdl-bar-large .wdl-draw[b-uku1p6ebpd] {
    background: linear-gradient(90deg, #6b7280, #9ca3af);
    transition: width 0.3s ease;
}

.wdl-bar-large .wdl-loss[b-uku1p6ebpd] {
    background: linear-gradient(90deg, #dc2626, #ef4444);
    transition: width 0.3s ease;
}

/* WDL Percentages */
.wdl-percentages[b-uku1p6ebpd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wdl-item[b-uku1p6ebpd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.wdl-item .wdl-value[b-uku1p6ebpd] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    font-weight: 600;
}

.wdl-item .wdl-label[b-uku1p6ebpd] {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wdl-item.win .wdl-value[b-uku1p6ebpd],
.wdl-item.win .wdl-label[b-uku1p6ebpd] {
    color: #22c55e;
}

.wdl-item.draw .wdl-value[b-uku1p6ebpd],
.wdl-item.draw .wdl-label[b-uku1p6ebpd] {
    color: #9ca3af;
}

.wdl-item.loss .wdl-value[b-uku1p6ebpd],
.wdl-item.loss .wdl-label[b-uku1p6ebpd] {
    color: #ef4444;
}

/* Lc0 Best Move */
.lc0-best-move[b-uku1p6ebpd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(184, 133, 54, 0.1);
    border-radius: 6px;
}

.lc0-best-move .best-label[b-uku1p6ebpd] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(184, 133, 54, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lc0-best-move .best-move[b-uku1p6ebpd] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    color: #B88536;
    font-weight: 600;
}

/* Lc0 Eval Row (fallback when no WDL) */
.lc0-eval-row[b-uku1p6ebpd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
}

.lc0-eval-label[b-uku1p6ebpd] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(184, 133, 54, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lc0-eval-row .engine-eval[b-uku1p6ebpd] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 1.25rem;
    font-weight: 700;
}

.lc0-eval-row .engine-eval.positive[b-uku1p6ebpd] {
    color: #4ade80;
}

.lc0-eval-row .engine-eval.negative[b-uku1p6ebpd] {
    color: #ef4444;
}

/* Lc0 Nodes Display */
.lc0-nodes[b-uku1p6ebpd] {
    text-align: center;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.6875rem;
    color: rgba(184, 133, 54, 0.7);
}

/* Loading State */
.lc0-loading[b-uku1p6ebpd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

.lc0-loading i[b-uku1p6ebpd] {
    font-size: 1.25rem;
    color: #B88536;
}

/* Bug #7738 - the second-stage pending hint: the wait outlived the ordinary
   search, so the card says the engine is warming up. Same 0.55 alpha as
   .lc0-awaiting (6.2:1 on the card ground) - a NEW rule clears AA. */
.lc0-loading-hint[b-uku1p6ebpd] {
    max-width: 26ch;
    text-align: center;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
}

/* Unavailable State (#7283) - the honest empty state when the Cloud Run
   analyzer cannot serve a Leela eval. Same visual weight as the loading
   state so the card does not jump between the two. */
.lc0-unavailable[b-uku1p6ebpd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.lc0-unavailable i[b-uku1p6ebpd] {
    font-size: 1.25rem;
    color: rgba(184, 133, 54, 0.7);
}

/* Compact-mode unavailable marker. #9434 - was 0.4 white, axe 3.8:1 on the
   analysis page; the secondary-text token clears AA (5.85:1 on #0f172a). */
.engine-unavailable[b-uku1p6ebpd] {
    grid-column: span 3;
    color: var(--ascend-text-secondary);
    font-size: 0.6875rem;
    font-style: italic;
}

/* Disabled Hint */
.lc0-disabled-hint[b-uku1p6ebpd] {
    text-align: center;
    padding: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    font-style: italic;
}

/* Spin animation */
.spin[b-uku1p6ebpd] {
    animation: spin-b-uku1p6ebpd 1s linear infinite;
}

@keyframes spin-b-uku1p6ebpd {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .engine-row[b-uku1p6ebpd] {
        grid-template-columns: 24px 44px 1fr auto;
        gap: 0.25rem;
    }

    .pv-line[b-uku1p6ebpd] {
        word-break: break-all;
    }

    .network-dropdown[b-uku1p6ebpd] {
        width: 100%;
    }

    .engine-controls[b-uku1p6ebpd] {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .engine-row[b-uku1p6ebpd] {
        grid-template-columns: 22px 40px 1fr;
        font-size: 0.8rem;
    }
}

/* Awaiting-first-move state (Bug #7346) - the board is on the untouched start
   position, which is deliberately not sent to the paid analyzer. Same visual
   weight as the loading and unavailable states so the card never jumps. */
.lc0-awaiting[b-uku1p6ebpd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    /* 6.2:1 on the card's rgb(15, 23, 42) ground. The neighboring unavailable
       state sits at 0.5/0.4 alpha on grandfathered rules that predate the #7291
       ratchet; a NEW rule has to clear WCAG 2.2 AA, so this one does. */
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
}

/* The icon deliberately declares no color: it inherits the AA-clearing text
   color above rather than introducing a second, dimmer value. */
.lc0-awaiting i[b-uku1p6ebpd] {
    font-size: 1.25rem;
}

/* Compact-mode counterpart of .lc0-awaiting */
.engine-idle[b-uku1p6ebpd] {
    grid-column: span 3;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.6875rem;
    font-style: italic;
}
/* /Components/Shared/LinearMoveList.razor.rz.scp.css */
/* Bug #7180 - LAYOUT lives HERE, in the component that owns the markup.
   THEMING (color, background, font-family, font-size, padding, borders) stays
   with the consuming pages.

   The old split put layout on the consumer side and shipped the component with
   nothing but a cursor rule. Four pages re-implemented `.move-pair` by hand and
   the fifth (MasterGameView) did not, so its move list rendered as one unbroken
   run: "1. e4c52. Nf3d6". A shared component whose readability depends on every
   consumer re-deriving the same three rules is shared in name only, so the
   spacing that makes a move list A MOVE LIST is now a default: a sixth consumer
   gets a legible list with no page CSS at all.

   Line drawn at LAYOUT vs THEME on purpose, and the page rules that duplicated
   these declarations were removed in the same change - component scoped CSS
   (`.move-pair[b-x]`) and a page's `::deep .move-pair` (`[b-page] .move-pair`)
   have EQUAL specificity, so a duplicate is decided by bundle order, not by
   intent. One owner per declaration is the only stable arrangement.

   Sizing (max-height) stays with the pages: how tall the list may grow is a
   property of the panel it sits in, not of the list. `overflow-y` is here so
   that a page setting max-height alone scrolls instead of clipping, and so the
   auto-scroll in MoveListAutoScroll has a scroll container to work with. */
.moves-list[b-7amb3wzsi5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    overflow-y: auto;
}

/* THE rule whose absence was the bug: without it the number and both moves are
   three bare inline spans with no separation of any kind. */
.move-pair[b-7amb3wzsi5] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.5rem;
}

/* ---------------------------------------------------------------------------
   ROW LAYOUT (Layout="MoveListLayout.Rows") - Bug #7180, second pass.

   Spacing alone was not the fix. With it the list read
   "1. Nf3 c5  2. c4 g6  3. d4 cxd4" - legible, and still a WRAPPING PARAGRAPH
   four move-pairs to a line. A reader looking for move 24 in a 60-move game has
   to scan the paragraph for it. The Study Board has never done that: its move
   tree is one row per move number, a fixed number gutter, and White/Black in
   columns that line up all the way down, so "move 24" is found by running the
   eye down a column. That is the presentation, and it now lives HERE.

   THE SAME GEOMETRY AS THE MODEL, on purpose: 36px number gutter, 26px minimum
   row height, both moves flex:1 - the values from StudyBoard.razor.css
   (.move-tree / ::deep .move-row, "modeled on RepertoireEditor's Advanced View,
   PBI #5714"). A page that opts into Rows gets the Study Board's shape without
   re-deriving it, which is the whole point: the row model was hand-rolled in
   three places (StudyBoard, RepertoireEditor, GameAnalysis) and MasterGameView
   would have been the fourth.

   Still LAYOUT only. Colour, font and chip padding stay with the page, same
   line as the inline mode above - and the properties set here are disjoint from
   the ones pages set, so nothing is decided by bundle order. */
.moves-list.rows[b-7amb3wzsi5] {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
}

.move-row[b-7amb3wzsi5] {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 26px;
}

/* The gutter that makes it a list instead of a run: every move number occupies
   the same width, right-aligned, so the moves start on a common left edge. */
.move-row > .move-number[b-7amb3wzsi5] {
    width: 36px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 6px;
    user-select: none;
}

/* Two equal columns. Aligning move 3's black reply under move 2's is what lets
   the eye track a single side down the game. */
.move-row > .move[b-7amb3wzsi5] {
    flex: 1 1 0;
    min-width: 0;
}

.move-row > .move-empty[b-7amb3wzsi5] {
    flex: 1 1 0;
}

/* A move is an atom - "Qxd4+" must never wrap across two lines. */
.move[b-7amb3wzsi5] {
    white-space: nowrap;
}

.move-number[b-7amb3wzsi5] {
    white-space: nowrap;
}

/* Bug #6931 — the pointer cursor is owned HERE, by the component that knows
   whether a click goes anywhere, instead of being re-decided in each host page's
   .razor.css. `clickable` is only on the move spans when OnMoveClicked has a
   delegate, so a move that navigates looks like it navigates and a move on a live
   drill board (Opening Practice / Repertoire Drill / Maia Training, none of which
   pass a handler) does not.

   Deliberately cursor ONLY. The higher-specificity `.move.clickable` would
   otherwise outrank each page's own colour-coding (.move-correct /
   .move-incorrect / .selected), so background and colour stay with the pages. */
.move.clickable[b-7amb3wzsi5] {
    cursor: pointer;
}

/* PBI #7190 - the verdict glyph inside a drill-record chip. LAYOUT only, per
   the line drawn above: the icon inherits the chip's color, which stays with
   the consuming page's .move-correct / .move-incorrect theming. */
.move .move-result-glyph[b-7amb3wzsi5] {
    margin-left: 0.1rem;
    font-size: 0.85em;
    vertical-align: baseline;
}
/* /Components/Shared/LinePriorityToggle.razor.rz.scp.css */
/* #6033 — mirrors the Lines-tab action buttons (.line-mainline-btn /
   .line-delete-btn). Pinned state is gold (the brand accent) so it reads as
   "active focus"; unpinned is the muted resting state. */
.line-priority-btn[b-bn6averpj1] {
    background: transparent;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    margin-left: 0.4rem;
}

.line-priority-btn:hover[b-bn6averpj1] {
    color: #B88536;
}

.line-priority-btn.is-priority[b-bn6averpj1] {
    color: #B88536;
}
/* /Components/Shared/LinkedStructureStudy.razor.rz.scp.css */
/* PBI #9216 - "Your study" links on the game review: the member's own chapters
   and notes on the structures the game reached. Same type scale as the #9215
   "Your notes" panel, so the two read as one feature. */

.linked-structure-study[b-d9d5vjx8gd] {
    min-width: 0;
    margin-top: 1rem;
}

.linked-study-heading[b-d9d5vjx8gd] {
    font-family: var(--ascend-font-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-accent);
    margin: 0 0 0.4rem;
}

.linked-study-intro[b-d9d5vjx8gd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

.linked-study-structure + .linked-study-structure[b-d9d5vjx8gd] {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.linked-study-structure-name[b-d9d5vjx8gd] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.4rem;
    overflow-wrap: anywhere;
}

.linked-study-links[b-d9d5vjx8gd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.linked-study-link[b-d9d5vjx8gd] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.linked-study-link a[b-d9d5vjx8gd] {
    display: block;
    padding: 0.55rem 0;
    color: var(--ascend-accent);
    text-decoration: none;
}

/* The label reads as the member's own; the title is the underlined link text. */
.linked-study-label[b-d9d5vjx8gd] {
    color: rgba(255, 255, 255, 0.78);
}

.linked-study-title[b-d9d5vjx8gd] {
    text-decoration: underline;
}

.linked-study-link a:hover .linked-study-title[b-d9d5vjx8gd],
.linked-study-link a:focus-visible .linked-study-title[b-d9d5vjx8gd] {
    color: #ffffff;
}

/* Phones get a full-line tap target (about 44px); desktop keeps the list tight. */
@media (min-width: 900px) {
    .linked-study-link a[b-d9d5vjx8gd] {
        padding: 0.15rem 0;
    }
}
/* /Components/Shared/LoadingSpinner.razor.rz.scp.css */
/* Loading Spinner Component - AscendChess */

.loading-container[b-5078bn9j38] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
}

.loading-container p[b-5078bn9j38] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
/* /Components/Shared/MarketingFooter.razor.rz.scp.css */
/* Marketing footer (extracted from Home.razor.css) */
.footer[b-ku3m1f7uc8] {
    padding-top: var(--space-2xl);
    border-top: 1px solid rgba(49, 221, 227, 0.15);
    animation: fadeIn-b-ku3m1f7uc8 0.8s ease-out 1s both;
}

@keyframes fadeIn-b-ku3m1f7uc8 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.copyright[b-ku3m1f7uc8] {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-sm);
}

.footer-links[b-ku3m1f7uc8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    font-size: 0.9375rem;
}

.footer-links a[b-ku3m1f7uc8] {
    color: rgba(255, 255, 255, 0.65);
    transition: color var(--transition-fast);
    font-weight: 500;
}

.footer-links a:hover[b-ku3m1f7uc8] {
    color: var(--ascend-accent);
}

/* Social brand-logo links (Bootstrap Icons glyphs). */
.footer-social[b-ku3m1f7uc8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.footer-social a[b-ku3m1f7uc8] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-social a:hover[b-ku3m1f7uc8] {
    color: var(--ascend-accent);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .footer-links[b-ku3m1f7uc8] {
        gap: var(--space-md);
    }

    .footer-social[b-ku3m1f7uc8] {
        gap: var(--space-md);
    }
}
/* /Components/Shared/MarketingHeader.razor.rz.scp.css */
/* Marketing Header with Logo - Dark (extracted from Home.razor.css) */
.marketing-header[b-dj2g9qgfyx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--space-xl);
    z-index: 100;
    background: linear-gradient(180deg, rgba(10, 22, 40, 0.95) 0%, transparent 100%);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.marketing-logo[b-dj2g9qgfyx] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
}

/* Auth Buttons */
.auth-buttons[b-dj2g9qgfyx] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.auth-buttons .btn[b-dj2g9qgfyx] {
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    white-space: nowrap;
}

/* Lighter-weight nav link (For Coaches): reads as navigation, not a CTA button,
   but still sits in the header where a discovering coach looks first. */
.auth-buttons .btn-ghost[b-dj2g9qgfyx] {
    background: transparent;
    border: 2px solid transparent;
    color: var(--ascend-text-light);
}

.auth-buttons .btn-ghost:hover[b-dj2g9qgfyx] {
    color: var(--ascend-accent);
    border-color: rgba(49, 221, 227, 0.3);
    transform: translateY(-2px);
}

.auth-buttons .btn-outline[b-dj2g9qgfyx] {
    background: transparent;
    border: 2px solid rgba(49, 221, 227, 0.3);
    color: var(--ascend-text-light);
}

.auth-buttons .btn-outline:hover[b-dj2g9qgfyx] {
    background: rgba(49, 221, 227, 0.1);
    border-color: var(--ascend-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.2);
}

/* #6180 - geometry only. The cyan fill and navy text come from the global
   .btn-primary (css/SharedPages.css; app.css owns its :hover), the same
   treatment as the Home hero CTA. The border is already none from the global
   .btn. This rule used to restate the fill and text color privately. */
.auth-buttons .btn-primary[b-dj2g9qgfyx] {
    box-shadow: 0 4px 12px rgba(49, 221, 227, 0.3);
}

.auth-buttons .btn-primary:hover[b-dj2g9qgfyx] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(49, 221, 227, 0.4);
}

.header-logo-image[b-dj2g9qgfyx] {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 4px 12px rgba(49, 221, 227, 0.3));
}

.header-logo-text[b-dj2g9qgfyx] {
    font-family: var(--ascend-font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.header-logo-text .logo-primary[b-dj2g9qgfyx] {
    color: var(--ascend-text-light);
}

.header-logo-text .logo-secondary[b-dj2g9qgfyx] {
    color: var(--ascend-secondary);
}

@media (max-width: 768px) {
    /* #7731 - the header STOPS being an overlay below the desktop band.

       It is absolutely positioned so it can float over the landing hero, and
       every consumer paid for that with a hardcoded top padding (160px on
       desktop, 140px here, 120px on Home at phone width). That arithmetic held
       only while the header stayed one short row. It does not: at <=480px the
       header stacks the logo and three full-width buttons and measured 244px,
       so on /pricing at 390x844 the "SIMPLE PRICING" heading rendered at y=150
       - underneath it, along with the first lines of the intro.

       A bigger magic number would only move the failure to the next width that
       changes the header's height. So below 768px the header goes back into
       normal flow and reserves its own space, whatever that space turns out to
       be, and the consumers drop their offsets to ordinary spacing.
       `relative`, not `static`: the z-index has to keep working, or the landing
       page's fixed hero-knight (z-index: 1) paints over the logo. */
    .marketing-header[b-dj2g9qgfyx] {
        position: relative;
        padding: var(--space-lg);
    }

    .header-logo-image[b-dj2g9qgfyx] {
        width: 40px;
        height: 40px;
    }

    .header-logo-text[b-dj2g9qgfyx] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .marketing-header[b-dj2g9qgfyx] {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: flex-start;
        padding: var(--space-md);
    }

    /* #7731 - the header now costs the page real estate instead of borrowing
       it, so its height is no longer free. Three full-width stacked buttons
       made it 244px on a 844px screen - 29% of the phone gone before a word of
       the page. They wrap as a row instead: same three links, ~150px, and
       still a 44px touch target each (--touch-target, #6716) because they got
       shorter, not smaller. */
    .auth-buttons[b-dj2g9qgfyx] {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .auth-buttons .btn[b-dj2g9qgfyx] {
        /* #7748 - this used to need an explicit `width: auto` to escape a
           global `@media (max-width: 480px) { .btn { width: 100% } }` in
           css/SharedPages.css, which survived `flex-wrap` silently because a
           100% width becomes the flex basis and every item then fills its own
           line (measured here before it was found: three 44px rows, header
           228px). That global rule is now opt-in (.btn-block), so there is
           nothing left to escape and the override is gone. `flex: 1 1 auto`
           is what shares the row and stays. */
        flex: 1 1 auto;
        justify-content: center;
        min-height: var(--touch-target);
        padding: var(--space-sm) var(--space-md);
    }
}

/* #9391 - Landing (the landing page only). A flat navy surface at every width, so axe can judge
   the logo and the links on it. Below 760px: one short row, no stacking, and Create Account
   dropped only when the hero carries it (.marketing-header-hero-cta); otherwise the header keeps
   it and its links wrap under the logo if the row is too narrow. Every link keeps the 44px touch
   target. Geometry, display and the header's own surface only: the button skins stay app.css's
   (#7258). */
.marketing-header-landing[b-dj2g9qgfyx] {
    background: none;
    backdrop-filter: none;
}

.marketing-header-landing[b-dj2g9qgfyx] {
    background-color: var(--ascend-primary);
}

@media (max-width: 760px) {
    .marketing-header-landing[b-dj2g9qgfyx] {
        flex-direction: row;
        align-items: center;
        gap: var(--space-sm);
        padding: 12px 16px;
    }

    .marketing-header-landing .marketing-logo[b-dj2g9qgfyx] {
        flex: 0 0 auto;
        gap: 6px;
        min-height: var(--touch-target);
    }

    .marketing-header-landing .header-logo-image[b-dj2g9qgfyx] {
        width: 28px;
        height: 28px;
    }

    .marketing-header-landing .header-logo-text[b-dj2g9qgfyx] {
        font-size: 1.0625rem;
    }

    .marketing-header-landing .auth-buttons[b-dj2g9qgfyx] {
        width: auto;
        flex-wrap: nowrap;
        gap: 0;
        margin-right: -6px;
    }

    .marketing-header-landing .auth-buttons .btn[b-dj2g9qgfyx] {
        flex: 0 0 auto;
        min-height: var(--touch-target);
        padding: 0 6px;
        font-size: 0.875rem;
    }

    .marketing-header-landing.marketing-header-hero-cta .auth-buttons .btn-primary[b-dj2g9qgfyx] {
        display: none;
    }

    /* The hero does not carry Create Account (pre-launch, say): keep it, and let the links take
       a second row when logo plus three links do not fit (the header is in normal flow below
       768px, #7731, so a taller header pushes the hero rather than covering it). */
    .marketing-header-landing:not(.marketing-header-hero-cta)[b-dj2g9qgfyx] {
        flex-wrap: wrap;
    }

    .marketing-header-landing:not(.marketing-header-hero-cta) .auth-buttons[b-dj2g9qgfyx] {
        margin-left: auto;
    }
}

@media (max-width: 380px) {
    .marketing-header-landing .header-logo-text[b-dj2g9qgfyx] {
        font-size: 1rem;
    }
}
/* /Components/Shared/MasteryTierChip.razor.rz.scp.css */
/* Shared mastery-tier chip (PBI #5627). One visual for every surface — 8px
   radius (matching the canonical CoachingReflection mastery chip, not the
   pill the Checkmate hub used), small-caps label, tier-colored border + tint.
   Colors mirror the Endgame-Mastery reference. */
.mastery-tier-chip[b-s23xwryffv] {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.mastery-tier-chip.tier-mastered[b-s23xwryffv] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.mastery-tier-chip.tier-mid[b-s23xwryffv] {
    background: rgba(184, 133, 54, 0.1);
    border-color: rgba(184, 133, 54, 0.4);
    color: var(--ascend-secondary, #B88536);
}

.mastery-tier-chip.tier-early[b-s23xwryffv] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.35);
    color: var(--ascend-accent, #31DDE3);
}
/* /Components/Shared/MaterialBalanceSide.razor.rz.scp.css */
/* #9074 - one side of the material balance: name (optional), glyphs, and the lead. Sized in em
   so it scales with whatever line it sits on: the strip under a board, or a player chrome strip
   (where it must not make that thin strip any taller). */

.mb-side[b-vskhs8mj17] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    line-height: 1;
}

.mb-name[b-vskhs8mj17] {
    font-weight: 600;
}

.mb-glyphs[b-vskhs8mj17] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

/* The glyphs are the filled chess symbols for BOTH colors. A white piece is drawn light on
   the dark page; a black piece is drawn dark on its own light tile, so it never relies on an
   outline to be seen (and clears contrast on its own surface). U+FE0E keeps every platform on
   the text form rather than an emoji. Keyed by the registry's piece name; this map is
   presentation (a name to a symbol), not chess knowledge, and the registry ratchet says so. */
.mb-piece[b-vskhs8mj17] {
    display: inline-block;
    font-size: 1.35em;
    line-height: 1;
    padding: 0 1px;
    border-radius: 3px;
}

.mb-piece.mb-white[b-vskhs8mj17] {
    color: var(--ascend-text-light);
}

.mb-piece.mb-black[b-vskhs8mj17] {
    color: var(--ascend-bg-dark);
    background: var(--ascend-text-muted);
}

.mb-queen[b-vskhs8mj17]::before { content: '\265B\FE0E'; }
.mb-rook[b-vskhs8mj17]::before { content: '\265C\FE0E'; }
.mb-bishop[b-vskhs8mj17]::before { content: '\265D\FE0E'; }
.mb-knight[b-vskhs8mj17]::before { content: '\265E\FE0E'; }
.mb-pawn[b-vskhs8mj17]::before { content: '\265F\FE0E'; }

.mb-lead[b-vskhs8mj17] {
    font-weight: 700;
    color: var(--ascend-text-light);
}
/* /Components/Shared/MaterialBalanceStrip.razor.rz.scp.css */
/* #9074 - the material balance strip under a board without player chrome. Compact on purpose:
   one short line at phone widths, wrapping only if a lopsided position runs out of room. Each
   side's look (name, glyphs, lead) lives in MaterialBalanceSide.razor.css. */

.material-balance[b-uz89lk197w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem 1rem;
    width: 100%;
    min-height: 1.5rem;
    font-size: 0.85rem;
    line-height: 1.5rem;
    color: var(--ascend-text-muted);
}
/* /Components/Shared/MirrorEditionSettings.razor.rz.scp.css */
/* #8019 - the MIRROR EDITIONS card on /profile. Colors come from the theme
   tokens and the global .form-input / .form-label rules; this file owns layout
   and the one muted note style. Every row is a wrapping flex row, so at 344px an
   inline control drops under its label instead of overflowing the card. */

.mirror-edition-lede[b-b89wcfc02a] {
    margin: 0 0 var(--space-md, 1rem);
    color: var(--ascend-text-light);
    line-height: 1.5;
}

.mirror-edition-fieldset[b-b89wcfc02a] {
    border: 0;
    margin: 0 0 var(--space-md, 1rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.mirror-edition-fieldset legend[b-b89wcfc02a] {
    margin-bottom: 0.5rem;
    padding: 0;
}

.mirror-edition-row[b-b89wcfc02a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

/* The label is the finger target, not the 1.1rem radio inside it. */
.mirror-edition-option[b-b89wcfc02a] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--touch-target, 44px);
    cursor: pointer;
    color: var(--ascend-text-light);
}

.mirror-edition-option input[type="radio"][b-b89wcfc02a],
.mirror-edition-option input[type="checkbox"][b-b89wcfc02a] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--ascend-accent);
    flex-shrink: 0;
}

.mirror-edition-every-n[b-b89wcfc02a] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ascend-text-light);
    white-space: nowrap;
}

/* Room for three digits; NumberInput fills its wrapper. */
.mirror-edition-n-field[b-b89wcfc02a] {
    display: inline-block;
    width: 5rem;
}

.mirror-edition-quiet[b-b89wcfc02a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--ascend-text-light);
}

.mirror-edition-quiet select[b-b89wcfc02a] {
    width: auto;
    min-width: 5.75rem;
}

/* The page's .form-hint is scoped to Profile and does not reach this component. */
.mirror-edition-note[b-b89wcfc02a] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.4;
}

.mirror-edition-actions[b-b89wcfc02a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* #8020 - the cadence email's one link lands here (/profile#mirror-editions): clear the fixed
   header, the #9053 convention. */
.mirror-edition-anchor[b-b89wcfc02a] {
    scroll-margin-top: var(--app-content-top, var(--space-md, 1rem));
}

/* #8020 review round 1 - the email box and its note stack, as the SME box does, with room before Save. */
.mirror-edition-email[b-b89wcfc02a] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 var(--space-md, 1rem);
}
/* /Components/Shared/Modal.razor.rz.scp.css */
.modal-overlay[b-5sxtic78d3] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modalFadeIn-b-5sxtic78d3 0.2s ease;
}

.modal-dialog[b-5sxtic78d3] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.99) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(49, 221, 227, 0.1);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    width: 90%;
    position: relative;
    animation: modalSlideIn-b-5sxtic78d3 0.3s ease;
    overflow: hidden;
}

/* Size variants */
.modal-small[b-5sxtic78d3] {
    max-width: 400px;
}

.modal-medium[b-5sxtic78d3] {
    max-width: 560px;
}

.modal-large[b-5sxtic78d3] {
    max-width: 800px;
}

.modal-full[b-5sxtic78d3] {
    max-width: 95vw;
    max-height: 95vh;
}

/* On mobile, medium and large go near-fullscreen */
@media (max-width: 640px) {
    .modal-medium[b-5sxtic78d3],
    .modal-large[b-5sxtic78d3] {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 16px;
    }

    .modal-full[b-5sxtic78d3] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-overlay[b-5sxtic78d3] {
        padding: 0.5rem;
    }
}

/* Close button */
.modal-close-btn[b-5sxtic78d3] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0.5rem;
    /* #8771: above the header band, which is opaque and stacked at 1. */
    z-index: 2;
    transition: color 0.2s ease;
    line-height: 0;
}

.modal-close-btn:hover[b-5sxtic78d3] {
    color: #31DDE3;
}

/* Header
   #8771: the header is a BAND, the twin of the footer band below (#7442). It
   had no background, no bottom padding and no edge, so the body's clip line sat
   exactly on the title's baseline (measured at 344: title bottom and body top
   both 68.5px). With the body scrolled, a card cut off at that line read as
   content running under the title. Now it is opaque (the dialog's own surface,
   the start of its gradient), has room under the title, a hairline edge, and is
   stacked above the body; the close button sits above it (z-index 2). The
   body's top padding under a header gives back what the band adds (see
   `.modal-header + .modal-body` below), so a titled dialog at rest moves its
   first line by a quarter rem and an untitled one does not move at all. */
.modal-header[b-5sxtic78d3] {
    padding: 1.5rem 2rem 0.75rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background-color: var(--ascend-bg-card);
    border-bottom: 1px solid rgba(49, 221, 227, 0.18);
}

.modal-title[b-5sxtic78d3] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: #ffffff;
    padding-right: 2rem;
}

/* Body
   #7442: `min-height: 0` and a reserved scrollbar gutter. The gutter matters
   because Chromium paints OVERLAY scrollbars here - measured on dev, the body's
   offsetWidth and clientWidth were both 556px, so a body that genuinely
   overflowed showed NO scrollbar at rest and nothing said the dialog scrolled. */
.modal-body[b-5sxtic78d3] {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-gutter: stable;

    /* #7442 scroll shadow - the affordance the dialog was missing. Two
       background layers on the scroller: a cyan GLOW pinned to the element
       (background-attachment: scroll, so it stays at the bottom edge of the
       visible area) and, painted OVER it, an opaque COVER pinned to the content
       (attachment: local, so it travels with the text and sits at the very end
       of it). While there is more to read the cover is still below the fold and
       the glow shows; scroll to the end and the cover arrives and extinguishes
       it. The cover color is --ascend-bg-card, which is the start of the
       dialog's own gradient - that gradient's two stops differ by under 3/255
       per channel, so the cover is not perceptible against it. */
    background-image:
        linear-gradient(rgba(10, 22, 40, 0), var(--ascend-bg-card) 60%),
        linear-gradient(rgba(49, 221, 227, 0), rgba(49, 221, 227, 0.28));
    background-position: center bottom, center bottom;
    background-repeat: no-repeat;
    background-size: 100% 2.5rem, 100% 0.75rem;
    background-attachment: local, scroll;
}

/* #8771 - under the header band the body needs less top padding: the band
   already holds 0.75rem and a hairline above it. Only longhand padding-top, so
   it never resets the phone side padding below. */
.modal-header + .modal-body[b-5sxtic78d3] {
    padding-top: 1rem;
}

/* #6404 - 2rem of side padding costs 64px, which is 19% of a 344px screen.
   Measured there with a coarse pointer: the dialog was 295.2px wide and the
   content inside it 227.2px, so the widest thing a Medium modal could offer a
   phone was two thirds of the viewport. That is what starves PositionSetup's
   piece palette and its board (28.7px squares at 344; 32.7px after). 1rem gives 32px back to
   every modal on a phone; nothing can overflow that did not already, because
   the content box only grows. Vertical padding is unchanged.

   POSITION MATTERS AND IT COST A MEASUREMENT CYCLE. This first went into the
   (max-width: 640px) block at the top of the file, which sits BEFORE the base
   rule above. Same specificity, so the base `padding` SHORTHAND won and reset
   both sides - the overlay's 0.5rem in that same block applied, which made it
   look as though the query were matching and the rule were wrong. It has to
   follow the shorthand it overrides. */
@media (max-width: 640px) {
    .modal-body[b-5sxtic78d3] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Footer
   #7442: the footer is a BAND, not an overlay. It has always been a static flex
   item that cannot physically cover the body - but with zero top padding and no
   separator the buttons sat flush against a body edge that slices its last line
   mid-word, so on /marketing/offers the trailing DISCOUNT panel read as
   rendering behind Cancel/Save. An admin who could not read it just saw a
   missing field, which is the opposite of what that copy exists to say: it is
   the dialog's explanation that a discount CANNOT be added without its own
   Stripe coupon. The hairline plus top padding turn that edge into a visible
   scroll boundary. Fixed on the shared Modal because every long dialog has it.

   Mobile-first action row: wraps by default so footer buttons (the shared
   Button sets white-space:nowrap) drop to the next line instead of
   overflowing. Inherited by EVERY Modal-based dialog. */
.modal-footer[b-5sxtic78d3] {
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid rgba(49, 221, 227, 0.18);
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* On narrow phones the action buttons stack full-width so neither label is
   clipped (mirrors ConfirmDialog's stack-at-mobile pattern). */
@media (max-width: 480px) {
    .modal-footer[b-5sxtic78d3] {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-footer > *[b-5sxtic78d3] {
        width: 100%;
    }
}

/* Animations */
@keyframes modalFadeIn-b-5sxtic78d3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideIn-b-5sxtic78d3 {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* #7736 — MODAL CLOSE. The shared dialog's dismiss control is a bare glyph
   with 0.5rem of padding; the audit measured the equivalent button at 24x24.
   A close button that is hard to hit is the worst case in the set, because
   the user is already trying to leave. Grown in both axes and centered so the
   glyph does not move. */
@media (hover: none) and (pointer: coarse) {
    .modal-close-btn[b-5sxtic78d3] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/ModalContainer.razor.rz.scp.css */
.modal-container[b-sy8vi0rufb] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999999;
}

.modal-container > *[b-sy8vi0rufb] {
    pointer-events: auto;
}

.modal-wrapper[b-sy8vi0rufb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* /Components/Shared/MotifSkillEstimateCard.razor.rz.scp.css */
/* #8066 step 5 - the per-motif skill estimate. Support, not a reward: every figure in the
   default (neutral) tone, no gold, no green or red, no motion. */
.me-explainer[b-914aa22cqk],
.me-legend[b-914aa22cqk] {
    margin: 0 0 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
}

.me-legend[b-914aa22cqk] {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.me-motif[b-914aa22cqk] {
    padding: 0.6rem 0;
    border-top: 1px solid rgba(49, 221, 227, 0.15);
}

.me-motif:first-of-type[b-914aa22cqk] {
    border-top: none;
    padding-top: 0;
}

.me-headline[b-914aa22cqk] {
    margin: 0 0 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    overflow-wrap: anywhere;
}

.me-blocks[b-914aa22cqk] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.me-block[b-914aa22cqk] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    overflow-wrap: anywhere;
}

.me-block-caption[b-914aa22cqk] {
    color: rgba(255, 255, 255, 0.7);
}

.me-change[b-914aa22cqk] {
    margin: 0.4rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    overflow-wrap: anywhere;
}

.me-off[b-914aa22cqk] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.motif-estimate-hidden[b-914aa22cqk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

/* On Tactical Stats with no circuit stats the card sits under the "no circuit data" empty
   state; its own section spacing keeps it from reading as part of that empty state. */
.motif-estimate-standalone[b-914aa22cqk] {
    margin-top: 2.5rem;
}
/* /Components/Shared/MoveCommentBubble.razor.rz.scp.css */
/* Move-comment bubble (#6374). Owns the styling that StudyBoard.razor.css and
   GameAnalysis.razor.css previously carried as near-identical copies. Neither
   page may redefine .move-comment-bubble - it lives here now.

   The two copies agreed on everything except the left margin (4px vs 0.2rem,
   i.e. 3.2px) and a flex-shrink StudyBoard alone had. Settled on 0.25rem, which
   is exactly the 4px StudyBoard used, in rem per the responsive-units rule;
   GameAnalysis shifts by under a pixel. flex-shrink is kept for both: it only
   matters inside a flex move-cell, where it stops the icon being squeezed. */
.move-comment-bubble[b-gaomhk5abl] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    cursor: pointer;
    flex-shrink: 0;
}

/* Font Awesome wraps the SVG in an <i data-fa-i2svg> that defaults to
   display:inline, so it inherits the move row's line-height and the glyph
   drops to the baseline (bottom of the cell). Flex the wrapper so its inline
   12px size applies and the SVG centers vertically with the move text. */
.move-comment-bubble > i[b-gaomhk5abl] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* ::deep reaches the <i> Font Awesome's JS injects, which never carries this
   component's scope attribute. The span and the <i> above are this component's
   own markup and need no ::deep. */
.move-comment-bubble[b-gaomhk5abl]  i {
    font-size: 12px;
    transition: color 0.15s ease;
}
/* /Components/Shared/MoveHabitPicker.razor.rz.scp.css */
.habit-picker[b-b1zj7jyhxb] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(184, 133, 54, 0.06);
    border: 1px solid rgba(184, 133, 54, 0.2);
    border-radius: 10px;
}

.habit-header[b-b1zj7jyhxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.habit-label[b-b1zj7jyhxb] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.habit-help-btn[b-b1zj7jyhxb] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0.15rem;
    font-size: 0.9rem;
}

.habit-help-btn:hover[b-b1zj7jyhxb] {
    color: var(--ascend-accent);
}

.habit-help-panel[b-b1zj7jyhxb] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.habit-help-intro[b-b1zj7jyhxb] {
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.6);
}

.habit-help-row[b-b1zj7jyhxb] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    align-items: flex-start;
}

.habit-help-emoji[b-b1zj7jyhxb] {
    flex-shrink: 0;
    width: 1.2rem;
    text-align: center;
}

.habit-chips[b-b1zj7jyhxb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.habit-chip[b-b1zj7jyhxb] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(184, 133, 54, 0.25);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.3rem 0.65rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.habit-chip:hover[b-b1zj7jyhxb] {
    border-color: #B88536;
    background: rgba(184, 133, 54, 0.1);
}

.habit-chip.active[b-b1zj7jyhxb] {
    background: rgba(184, 133, 54, 0.2);
    border-color: #B88536;
    color: #ffffff;
}

.habit-chip.clear[b-b1zj7jyhxb] {
    border-color: rgba(255, 255, 255, 0.15);
}

.habit-chip.clear:hover[b-b1zj7jyhxb] {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}
/* /Components/Shared/MoveNoteBlock.razor.rz.scp.css */
/* #7079 - moved here verbatim from RepertoireBuildPanel.razor.css when the note
   surface became a component, with the raw brand hex swapped for the tokens. */

.rep-comment-block[b-hg1w8gvdxq] {
    margin: 0.5rem 1rem 0;
    padding: 0.65rem 0.8rem;
    background: color-mix(in srgb, var(--ascend-secondary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-secondary) 22%, transparent);
    border-radius: 10px;
}

.rep-comment-header[b-hg1w8gvdxq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.rep-comment-label[b-hg1w8gvdxq] {
    font-family: var(--ascend-font-primary);
    font-size: 0.72rem;
    color: var(--ascend-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.rep-comment-body[b-hg1w8gvdxq] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--ascend-text-light) 85%, transparent);
    white-space: pre-wrap;
}

.rep-comment-edit-link[b-hg1w8gvdxq] {
    background: none;
    border: none;
    color: color-mix(in srgb, var(--ascend-accent) 70%, transparent);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.15s ease;
}

.rep-comment-edit-link:hover[b-hg1w8gvdxq] {
    color: var(--ascend-accent);
    background: color-mix(in srgb, var(--ascend-accent) 10%, transparent);
}

.rep-comment-add-btn[b-hg1w8gvdxq] {
    width: 100%;
    background: none;
    border: 1px dashed color-mix(in srgb, var(--ascend-secondary) 35%, transparent);
    border-radius: 8px;
    /* #7905 - the 85% fade measured 4.28:1 on the page behind it, below AA.
       The token at full strength clears it at 5.48:1; hover keeps its step by
       brightening to --ascend-secondary-light. */
    color: var(--ascend-secondary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: all 0.15s ease;
}

.rep-comment-add-btn:hover[b-hg1w8gvdxq] {
    background: color-mix(in srgb, var(--ascend-secondary) 8%, transparent);
    border-color: color-mix(in srgb, var(--ascend-secondary) 55%, transparent);
    /* Light step so hover still reads brighter than the rest state now that
       rest is plain gold (#7905). 6.06:1 on the 8% tint. */
    color: var(--ascend-secondary-light);
}
/* /Components/Shared/MultiEnginePanel.razor.rz.scp.css */
/* Multi-Engine Panel */
.multi-engine-panel[b-1ql1ooxygk] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: 'tablet-gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Panel Header */
.panel-header[b-1ql1ooxygk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.panel-header h3[b-1ql1ooxygk] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #31DDE3;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Evaluation Section */
.consensus-section[b-1ql1ooxygk] {
    background: rgba(49, 221, 227, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* #9377 - the eval and the WDL bar share this row, and it WRAPS at every width. The
   eval is the variable: a decisive read prints "White winning" at 1.5rem, which with
   the old fixed bar floor ran the bar 27px past this row and 10px past the card at
   1024 wide (the rail is 288px there). Wrapping lets the bar drop to its own line
   when the two do not fit side by side, instead of being laid out past the edge. */
.consensus-eval[b-1ql1ooxygk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.eval-value[b-1ql1ooxygk] {
    font-family: 'condor', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
}

.eval-value.white-advantage[b-1ql1ooxygk] {
    color: #ffffff;
}

.eval-value.black-advantage[b-1ql1ooxygk] {
    color: #9ca3af;
}

/* WDL Bar
   #9377 - 7.5rem is the width the bar ASKS for beside the eval (a flex basis), not a
   floor: the old `min-width: 120px` (80px and 60px below 769px and 481px) beat the
   container whenever the row was narrower than eval + gap + 120px. With no floor the
   bar can never be wider than its row; with the row wrapping, a row too narrow for
   both puts the bar on its own full-width line. The segments' 2rem floors stay: the
   bar's overflow: hidden clips them inside the bar, so they cannot spill. */
.wdl-bar[b-1ql1ooxygk] {
    display: flex;
    height: 1.25rem;
    border-radius: 4px;
    overflow: hidden;
    flex: 1 1 7.5rem;
    min-width: 0;
}

.consensus-wdl[b-1ql1ooxygk] {
    font-size: 0.625rem;
}

.engine-wdl[b-1ql1ooxygk] {
    height: 0.5rem;
    font-size: 0;
}

.wdl-win[b-1ql1ooxygk] {
    background: linear-gradient(135deg, #ffffff, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    font-weight: 600;
    min-width: 2rem;
}

.wdl-draw[b-1ql1ooxygk] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    min-width: 2rem;
}

.wdl-loss[b-1ql1ooxygk] {
    background: linear-gradient(135deg, #374151, #1f2937);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    min-width: 2rem;
}

.consensus-best-move[b-1ql1ooxygk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.best-label[b-1ql1ooxygk],
.move-label[b-1ql1ooxygk],
.pv-label[b-1ql1ooxygk] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.best-move[b-1ql1ooxygk],
.move-value[b-1ql1ooxygk] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    color: #10b981;
    font-weight: 600;
}

/* Engine Results */
.engine-results[b-1ql1ooxygk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.engine-card[b-1ql1ooxygk] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.engine-card:hover[b-1ql1ooxygk] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(49, 221, 227, 0.2);
}

.engine-card.error[b-1ql1ooxygk] {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

/* Bug #8210 - every local engine busy: a status, not an error. */
.engine-card.busy[b-1ql1ooxygk] {
    border-color: rgba(49, 221, 227, 0.25);
    background: rgba(49, 221, 227, 0.05);
}

.busy-badge[b-1ql1ooxygk] {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    background: rgba(49, 221, 227, 0.15);
    border-radius: 4px;
    color: var(--ascend-text-light);
    text-transform: uppercase;
}

.busy-message[b-1ql1ooxygk] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.busy-actions[b-1ql1ooxygk] {
    display: flex;
}

.engine-header[b-1ql1ooxygk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.engine-name[b-1ql1ooxygk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.engine-eval[b-1ql1ooxygk] {
    font-family: 'condor', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
}

.error-badge[b-1ql1ooxygk] {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 4px;
    color: var(--ascend-text-light);
    text-transform: uppercase;
}

.error-message[b-1ql1ooxygk] {
    font-size: 0.75rem;
    color: rgba(239, 68, 68, 0.8);
    margin: 0;
}

.engine-best-move[b-1ql1ooxygk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* PV Section */
.pv-section[b-1ql1ooxygk] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.pv-moves[b-1ql1ooxygk] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    word-break: break-all;
}

/* Engine Stats */
.engine-stats[b-1ql1ooxygk] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.stat[b-1ql1ooxygk] {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.4);
}

/* States */
.analyzing-state[b-1ql1ooxygk],
.no-analysis-state[b-1ql1ooxygk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    gap: 0.75rem;
}

/* Bug #8851 - a position with no legal move: one plain line where the eval would be. */
.no-legal-move[b-1ql1ooxygk] {
    margin: 0;
    padding: 0.75rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.analyzing-state i[b-1ql1ooxygk] {
    font-size: 1.5rem;
    color: #31DDE3;
}

.spin[b-1ql1ooxygk] {
    animation: spin-b-1ql1ooxygk 1s linear infinite;
}

@keyframes spin-b-1ql1ooxygk {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .multi-engine-panel[b-1ql1ooxygk] {
        padding: 0.75rem;
        border-radius: 12px;
    }
}
/* /Components/Shared/NavStatusRow.razor.rz.scp.css */
/* #6934 - the nav's single status line. Horizontal padding only: with every
   chip self-gated to silence the row must collapse to nothing, and vertical
   padding would leave a phantom gap in the nav for a user who has no counts at
   all (which is most users, most of the time). */

.nav-status-row[b-npysgpq9ui] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.75rem;
}

/* The row owns the spacing between chips; a chip that shipped with its own nav
   margins (StagedCountBadge, #6746) would otherwise double the gap. ::deep
   because these are child COMPONENTS - their markup carries their own scope,
   not this one's. */
.nav-status-row[b-npysgpq9ui]  .staged-count-badge,
.nav-status-row[b-npysgpq9ui]  .commentary-signal {
    margin: 0;
}

/* Below the sidebar's drawer breakpoint the row is inside the drawer, where
   width is tighter - chips wrap rather than overflow, which the flex-wrap
   above already does; this only keeps them from stretching. */
@media (max-width: 768px) {
    .nav-status-row[b-npysgpq9ui] {
        padding: 0 0.5rem;
    }
}
/* /Components/Shared/NextActionHero.razor.rz.scp.css */
/* #6755 Next Action hero - the day-2 spine. One loud, unmistakable next
   action; everything else on the dashboard stays visible below it. A section,
   never an overlay. Tokens only (ScopedCssBoundaryTests). */

.next-action-hero[b-85qzj9a5n9] {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-left: 4px solid var(--ascend-accent);
    border-radius: 24px;
    padding: 1.75rem 2rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* The hard recommend carries the gold accent - the coach's strong point of
   view - without becoming an alarm. */
.next-action-hero.hero-hard-recommend[b-85qzj9a5n9] {
    border-color: rgba(184, 133, 54, 0.35);
    border-left-color: var(--ascend-secondary);
}

.hero-kicker[b-85qzj9a5n9] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ascend-accent);
    margin-bottom: 0.6rem;
}

.hero-hard-recommend .hero-kicker[b-85qzj9a5n9] {
    color: var(--ascend-secondary-light);
}

.hero-heading[b-85qzj9a5n9] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.6rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.95);
}

.hero-message[b-85qzj9a5n9] {
    margin: 0.65rem 0 0;
    max-width: 46rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.98rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
}

.hero-actions[b-85qzj9a5n9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.25rem;
}

.hero-cta[b-85qzj9a5n9] {
    display: inline-block;
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    border-radius: 50px;
    color: var(--ascend-bg-dark);
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.85rem 2rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: all 0.2s ease;
}

.hero-cta:hover[b-85qzj9a5n9] {
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

.hero-minutes[b-85qzj9a5n9] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.hero-defer[b-85qzj9a5n9] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    padding: 0.7rem 1.2rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-defer:hover:not(:disabled)[b-85qzj9a5n9] {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Picks 2-3: quiet, present, never competing with the CTA. */
.hero-alternates[b-85qzj9a5n9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-alternates-label[b-85qzj9a5n9] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.hero-alt[b-85qzj9a5n9] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.45rem 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hero-alt:hover[b-85qzj9a5n9] {
    border-color: rgba(49, 221, 227, 0.4);
    background: rgba(49, 221, 227, 0.06);
}

.hero-alt-title[b-85qzj9a5n9] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
}

.hero-alt-minutes[b-85qzj9a5n9] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .next-action-hero[b-85qzj9a5n9] {
        padding: 1.25rem 1.25rem;
    }

    .hero-heading[b-85qzj9a5n9] {
        font-size: 1.3rem;
    }
}

/* #6018 - the coach's item ("From {Coach}"): the same hero, teal like the
   ordinary branch. No celebration, no badge, no animation (Recognition Follows
   Improvement); the facts line is plain text. */
button.hero-cta[b-85qzj9a5n9] {
    border: none;
    cursor: pointer;
}

button.hero-cta:disabled[b-85qzj9a5n9],
.hero-defer:disabled[b-85qzj9a5n9] {
    opacity: 0.6;
    cursor: default;
}

.hero-coach-facts[b-85qzj9a5n9] {
    color: rgba(255, 255, 255, 0.9);
}

.hero-coach-note[b-85qzj9a5n9] {
    font-style: italic;
    overflow-wrap: anywhere;
}

.hero-coach-error[b-85qzj9a5n9] {
    color: var(--ascend-secondary-light);
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* #6937 - the notification bell. Quiet by design: an outline icon at rest, a
   filled icon plus a small count when something is waiting, and no pulsing,
   glowing or bouncing - it announces information a person is waiting on, it
   does not ask for attention. Pill geometry matches SessionTimer and
   SoundToggle so the three read as one control row in the header. */

.nb[b-8zbjgo0bmf] {
    position: relative;
    display: inline-flex;
}

.nb-bell-btn[b-8zbjgo0bmf] {
    /* Shared header-row height (app.css --topbar-control-height). */
    min-height: var(--topbar-control-height);
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--ascend-text-light) 12%, transparent);
    background: color-mix(in srgb, var(--ascend-text-light) 5%, transparent);
    color: var(--ascend-text-muted);
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.nb-bell-btn:hover[b-8zbjgo0bmf],
.nb-bell-btn[aria-expanded="true"][b-8zbjgo0bmf] {
    color: var(--ascend-accent);
    border-color: color-mix(in srgb, var(--ascend-accent) 50%, transparent);
    background: color-mix(in srgb, var(--ascend-accent) 8%, transparent);
}

.nb-bell-btn:focus-visible[b-8zbjgo0bmf] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.nb-bell-icon[b-8zbjgo0bmf] {
    font-size: 0.95rem;
}

.nb-count[b-8zbjgo0bmf] {
    min-width: 1.1rem;
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-full);
    background: var(--ascend-accent);
    color: var(--ascend-bg-dark);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

/* Mobile header: the chrome around the header controls is already dark. */
.nb-compact .nb-bell-btn[b-8zbjgo0bmf] {
    background: transparent;
    border-color: transparent;
}

/* Outside-click catcher, under the panel. Transparent: this is a dropdown,
   not a modal, and the page stays visible. */
.nb-scrim[b-8zbjgo0bmf] {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: transparent;
}

.nb-panel[b-8zbjgo0bmf] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 2;
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(32rem, calc(100dvh - 8rem));
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
    background: var(--ascend-bg-card);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-align: left;
}

/* On the phone the wrapper stops being the containing block, so the panel
   anchors to the fixed mobile header itself: full width with the 16px page
   gutter, directly under the header whatever height it has wrapped to. */
.nb-compact[b-8zbjgo0bmf] {
    position: static;
}

.nb-compact .nb-panel[b-8zbjgo0bmf] {
    left: 1rem;
    right: 1rem;
    width: auto;
}

.nb-panel-head[b-8zbjgo0bmf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ascend-accent) 15%, transparent);
}

.nb-title[b-8zbjgo0bmf] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ascend-text-light);
}

.nb-head-actions[b-8zbjgo0bmf] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nb-action-btn[b-8zbjgo0bmf] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ascend-accent-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}

.nb-action-btn:hover[b-8zbjgo0bmf] {
    background: color-mix(in srgb, var(--ascend-accent) 10%, transparent);
}

.nb-action-btn:focus-visible[b-8zbjgo0bmf],
.nb-item:focus-visible[b-8zbjgo0bmf],
.nb-toggle:focus-within[b-8zbjgo0bmf] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: -2px;
}

.nb-panel-body[b-8zbjgo0bmf] {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nb-list[b-8zbjgo0bmf],
.nb-pref-list[b-8zbjgo0bmf] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
}

.nb-item[b-8zbjgo0bmf] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border: none;
    background: transparent;
    color: var(--ascend-text-muted);
    text-align: left;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
}

.nb-item:hover[b-8zbjgo0bmf] {
    background: color-mix(in srgb, var(--ascend-accent) 8%, transparent);
}

.nb-dot[b-8zbjgo0bmf] {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.4rem;
    border-radius: var(--radius-full);
    background: transparent;
}

.nb-item-unread .nb-dot[b-8zbjgo0bmf] {
    background: var(--ascend-accent);
}

.nb-item-unread .nb-item-title[b-8zbjgo0bmf] {
    color: var(--ascend-text-light);
    font-weight: 600;
}

.nb-item-text[b-8zbjgo0bmf] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.nb-item-title[b-8zbjgo0bmf] {
    font-size: 0.875rem;
    color: var(--ascend-text-muted);
    overflow-wrap: anywhere;
}

.nb-item-fold[b-8zbjgo0bmf] {
    color: var(--ascend-text-muted);
    font-weight: 400;
}

.nb-item-body[b-8zbjgo0bmf] {
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
    overflow-wrap: anywhere;
}

.nb-item-meta[b-8zbjgo0bmf] {
    font-size: 0.72rem;
    color: var(--ascend-text-secondary);
}

.nb-settings-lead[b-8zbjgo0bmf] {
    margin: 0;
    padding: 0.75rem 1rem 0.25rem;
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.nb-toggle[b-8zbjgo0bmf] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
}

.nb-toggle input[b-8zbjgo0bmf] {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.1rem;
    accent-color: var(--ascend-accent);
}

.nb-toggle-text[b-8zbjgo0bmf] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nb-toggle-name[b-8zbjgo0bmf] {
    font-size: 0.875rem;
    color: var(--ascend-text-light);
}

.nb-toggle-desc[b-8zbjgo0bmf] {
    font-size: 0.78rem;
    color: var(--ascend-text-muted);
}

/* Touch floor (#7736 / #7783). Every control here is behind the bell flag and
   an open panel, so the live touch-target gate cannot see any of them; the
   source pins in ConditionalSurfaceTouchTargetTests hold them instead. Boxes
   grow - no pseudo-element hit areas, because the header controls sit side by
   side and an invisible hit area would eat the neighbor's taps. */
@media (hover: none) and (pointer: coarse) {
    .nb-bell-btn[b-8zbjgo0bmf] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }

    .nb-action-btn[b-8zbjgo0bmf] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }

    .nb-item[b-8zbjgo0bmf] {
        min-height: var(--touch-target);
    }

    .nb-toggle[b-8zbjgo0bmf] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/NumberInput.razor.rz.scp.css */
.number-input-wrapper[b-ms986hwln0] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.number-input-wrapper[b-ms986hwln0]  .number-input-field {
    width: 100%;
    padding-right: 1.6rem;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Suppress the native webkit spinner — our custom buttons replace it. */
.number-input-wrapper[b-ms986hwln0]  .number-input-field::-webkit-outer-spin-button,
.number-input-wrapper[b-ms986hwln0]  .number-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.number-input-spinners[b-ms986hwln0] {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0;
    pointer-events: none;
}

.number-input-spinner[b-ms986hwln0] {
    background: transparent;
    border: none;
    color: var(--ascend-accent);
    cursor: pointer;
    padding: 0;
    width: 1rem;
    height: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.15s ease;
    pointer-events: auto;
}

.number-input-spinner[b-ms986hwln0]  i {
    font-size: 0.65rem;
}

/* A mouse gets the carets; the - / + pair is for the touch stepper below. */
.number-input-glyph-touch[b-ms986hwln0] {
    display: none;
}

.number-input-spinner:hover:not(:disabled)[b-ms986hwln0] {
    color: #31DDE3;
}

/* #7934 - a muted gray, not the old 15% white (1.55:1). While the spinners sat
   absolutely inside the field the contrast ratchet skipped them as out of flow;
   as a touch stepper they are in flow, and 15% white was unreadable beside a
   live cyan +. The token is the app's AA-clearing muted gray (see app.css),
   and gray against cyan still reads as "not now". */
.number-input-spinner:disabled[b-ms986hwln0] {
    color: var(--ascend-text-secondary);
    cursor: not-allowed;
}

/* ===== #7934 - a finger needs a 44px target =====
   Everything above is sized for a mouse: two 16x13.6px carets stacked inside
   the field (SessionTimer enlarges its pair to 28x24). They cannot grow in
   place on a touch screen, because two stacked 44px buttons would need an
   88px-tall field. So on a coarse pointer they step OUT of the field and sit
   beside it as a stepper - [ value ][ - ][ + ] - each button at least 44x44,
   with the field taking whatever width is left. Nothing overlays the field
   anymore, so it drops the spinner gutter, and a tap anywhere on it focuses it
   instead of landing on a caret.

   The stepper needs about 10rem. A caller that lays the field out narrower
   passes HideSpinnersOnTouch (.number-input-keypad-only), and the spinners are
   not drawn at all: type="number" already brings up the numeric keypad.
   Either way no spinner under 44px is left for a finger.
   ConditionalSurfaceTouchTargetTests pins the floor, and
   NumberInputTouchContractTests holds every caller to one of the two. */
@media (hover: none) and (pointer: coarse) {
    .number-input-wrapper[b-ms986hwln0] {
        display: flex;
        align-items: stretch;
        gap: 0.375rem;
    }

    .number-input-wrapper[b-ms986hwln0]  .number-input-field {
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 0.75rem;
    }

    /* Static, so the buttons are laid out BESIDE the field and cannot overlap
       it. DOM order is Increment then Decrement; a stepper reads - then +. */
    .number-input-spinners[b-ms986hwln0] {
        position: static;
        transform: none;
        flex: 0 0 auto;
        flex-direction: row-reverse;
        gap: 0.375rem;
    }

    /* The extra compounds out-rank a caller that sizes the in-field spinner for
       a mouse (SessionTimer does). min-* would beat its width and height on its
       own, but a fixed height would stop the button stretching to the field. */
    .number-input-wrapper .number-input-spinners .number-input-spinner[b-ms986hwln0] {
        width: auto;
        height: auto;
        min-width: var(--touch-target);
        min-height: var(--touch-target);
        background: color-mix(in srgb, var(--ascend-accent) 8%, transparent);
        border: 1px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
        border-radius: var(--radius-md);
    }

    .number-input-wrapper .number-input-spinners .number-input-spinner:active:not(:disabled)[b-ms986hwln0] {
        background: color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    }

    .number-input-wrapper .number-input-spinners .number-input-spinner:disabled[b-ms986hwln0] {
        background: transparent;
        border-color: rgba(255, 255, 255, 0.08);
    }

    .number-input-glyph-fine[b-ms986hwln0] {
        display: none;
    }

    .number-input-spinner .number-input-glyph-touch[b-ms986hwln0] {
        display: inline-block;
        font-size: 1rem;
    }

    .number-input-keypad-only .number-input-spinners[b-ms986hwln0] {
        display: none;
    }
}
/* /Components/Shared/OnboardingHeardAboutQuestion.razor.rz.scp.css */
/* #6977 / #8570 - the optional heard-about attribution element, shared by the
   classic wizard's welcome step and the guided path's first screen. Quiet by
   design: it must read as an aside, never as a gate on the first run. */
.heard-about-block[b-xn44luz6sh] {
    margin: 2rem auto 0;
    max-width: 560px;
    text-align: left;
}

.heard-about-label[b-xn44luz6sh] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.5rem;
}

.heard-about-optional[b-xn44luz6sh] {
    color: rgba(255, 255, 255, 0.45);
}

.heard-about-inputs[b-xn44luz6sh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.heard-about-select[b-xn44luz6sh],
.heard-about-detail[b-xn44luz6sh] {
    width: 100%;
    /* background-color, never the shorthand: the shorthand would erase the
       chevron the global select rule draws (SelectChevronRatchetTests). */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
    outline: none;
}

.heard-about-select:focus[b-xn44luz6sh],
.heard-about-detail:focus[b-xn44luz6sh] {
    border-color: var(--ascend-accent);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

/* Room for the chevron the global select rule draws. */
.heard-about-select[b-xn44luz6sh] {
    padding-right: 2.25rem;
}

.heard-about-select option[b-xn44luz6sh] {
    background: var(--ascend-bg-dark);
    color: var(--ascend-text-light);
}

.heard-about-detail[b-xn44luz6sh]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
/* /Components/Shared/OnlineGameLine.razor.rz.scp.css */
/* #9332 - the line under an online game, the same look as the broadcast credit (#9266). A small upright label, like the Wikibooks credit
   (#8368): the links take the label's color and are told apart by their underline, and a link
   wraps as a whole so "played on Lichess" never breaks. Upright even inside an italic
   host (the session banner and the coach card set italic), so it reads as a label. */
.online-game-line[b-emirdhrfcs] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ascend-text-muted);
    overflow-wrap: anywhere;
}

.online-game-link[b-emirdhrfcs] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    white-space: nowrap;
}

.online-game-link:hover[b-emirdhrfcs],
.online-game-link:focus-visible[b-emirdhrfcs] {
    color: var(--ascend-accent);
}

.online-game-link:focus-visible[b-emirdhrfcs] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* A finger needs 44px, wherever the pointer is coarse or the screen is phone-sized; a mouse row
   is unchanged. The line gives some of that height back by overlapping its own padding, never
   another control. */
@media (max-width: 768px), (pointer: coarse) {
    .online-game-link[b-emirdhrfcs] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
    }
}
/* /Components/Shared/OnlineGameTag.razor.rz.scp.css */
/* #9332 - a small upright label in the row's own muted color, like the broadcast credit's (#9266):
   it states a fact about the game, so it carries no accent color and no icon. */
.online-game-tag[b-3n251jowmk] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--ascend-text-muted);
    border: 1px solid currentColor;
    border-radius: 50px;
    padding: 0 0.5rem;
    white-space: nowrap;
}
/* /Components/Shared/OpeningExplorerPanel.razor.rz.scp.css */
/* Opening Explorer Panel Card.

   #7543's ACCENT-LINE half, applied here for the same reason and after the same
   measurement - but NOT its flat-card half, and the difference is the whole
   point of this note.

   Develop build 10885 failed the axe gate on this component's dead-end state:
   .no-moves-title came back undecidable "due to a pseudo element" and
   .no-moves-hint "due to a background gradient". Two causes, one card:

     * this card's background is a TRANSLUCENT 0.95 -> 0.9 navy gradient, and a
       gradient has no single background color, so axe walks the text's
       background stack, fails to resolve one and returns 'incomplete' -
       neither a pass nor a failure;
     * this card's ::before accent line was painted as a BACKGROUND, and axe
       treats an absolutely positioned pseudo-element that has a background as
       an overlay, comparing its ABSOLUTE area with 25% of the text node's own
       area. The line is 690x3 = 2070px^2, so a 3px rule across the top of the
       card made short captions elsewhere inside it undecidable without ever
       touching them.

   The two siblings got different reasons purely because of their size: the
   title is 151x24, so the line beat its 25% threshold; the hint is 384x42, so
   it did not, and axe carried on up into the gradient. The state itself is not
   new - it renders only once the index query resolves to "no data", which takes
   about 20s on dev, and the 10882 scan finished in 2s where the 10885 scan took
   11s. The register is frozen and may only shrink (#7312), so the remedy is the
   gate's own first one: MAKE IT MEASURABLE.

   WHY THE CARD KEEPS ITS GRADIENT. Flattening it to var(--ascend-bg-card), the
   way Card.razor.css does, clears both reasons - and then CONVERTS what was
   undecidable into real results, which is exactly what the gate is for and
   exactly why it has to be done deliberately. Measured here with the suite's
   own axe build against this page: a flat card turns .explorer-source-label
   into a SERIOUS color-contrast violation at 3.79:1, and six more rules in
   this stylesheet paint text at rgba(255,255,255,0.3-0.4), which computes
   between 3.1:1 and 3.7:1 on #0a1628 and would fail the moment the explorer has
   data to show. That is a real accessibility finding and it is in the handoff,
   but repainting brand chrome is a design decision, not something to slip into
   a CI hotfix. So the line loses its background here (which costs nothing and
   removes the pseudo-element reason everywhere in the card), and the ONE state
   that failed gets its own opaque surface further down - see
   .explorer-no-moves. Measured combinations, same page, same run:

     develop (gradient card, background line)  .no-moves-title X  .no-moves-hint X  0 violations
     flat card                                 both clear                            1 violation
     opaque state only                         .no-moves-title X                     0 violations
     border-image line + opaque state          both clear                            0 violations  <- this

   Same 3px, same brand gradient; border-image simply is not a background. */
.explorer-panel-card[b-3u1jbo53ot] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1.25rem;
    position: relative;
}

.explorer-panel-card[b-3u1jbo53ot]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%) 1;
}

/* Header */
.explorer-panel-header[b-3u1jbo53ot] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.explorer-header-actions[b-3u1jbo53ot] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.explorer-source-label[b-3u1jbo53ot] {
    font-size: 0.625rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.explorer-panel-header h3[b-3u1jbo53ot] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #31DDE3;
    margin: 0;
    text-transform: uppercase;
}

/* Content */
.explorer-panel-content[b-3u1jbo53ot] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Loading / Empty */
.explorer-loading[b-3u1jbo53ot],
/* #6794 - the two dead-end states (line runs out / index miss). Sits in the
   same visual family as .explorer-empty (now only the error branch) rather
   than the shared page-scale EmptyState, which is sized for a full-width
   surface and whose .empty-state class this component is not allowed to
   restyle. */
.explorer-no-moves[b-3u1jbo53ot] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.25rem 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    /* The opaque surface the note at the head of this file explains: it ends
       axe's background walk HERE, instead of letting it run up into the card's
       translucent gradient, which is what made this state's two lines
       undecidable on develop build 10885. It reaches the loading state as well,
       which shares this rule, and that is wanted rather than tolerated - the
       loading line sits in the same place and would otherwise be the same
       hazard the next time a scan catches it. Measured afterwards against
       #0a1628: the title (0.8 white) at 11:1, the hint (0.5 white) at 4.84:1
       and this rule's own 0.6 white at 6.2:1, all above the 4.5:1 AA floor -
       and axe now says so instead of shrugging. The block also reads as a
       deliberate dead end rather than as a gap in the panel. */
    background: var(--ascend-bg-card);
    border-radius: 12px;
}

.explorer-no-moves i[b-3u1jbo53ot] {
    color: var(--ascend-accent);
    opacity: 0.7;
}

.explorer-no-moves .no-moves-title[b-3u1jbo53ot] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
}

.explorer-no-moves .no-moves-hint[b-3u1jbo53ot] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    max-width: 24rem;
}

.explorer-empty[b-3u1jbo53ot] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

.explorer-loading i[b-3u1jbo53ot] {
    font-size: 1rem;
    color: #31DDE3;
}

/* Coverage banner */
.coverage-banner[b-3u1jbo53ot] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.coverage-complete[b-3u1jbo53ot] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.coverage-partial[b-3u1jbo53ot] {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: rgba(245, 158, 11, 0.9);
}

.coverage-banner i[b-3u1jbo53ot] {
    font-size: 0.75rem;
}

/* Opening Name */
.explorer-opening[b-3u1jbo53ot] {
    padding: 0.5rem 0.75rem;
    background: rgba(49, 221, 227, 0.08);
    border-radius: 8px;
}

/* Total games bar */
.explorer-total[b-3u1jbo53ot] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.total-count[b-3u1jbo53ot] {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Moves Table */
.explorer-moves[b-3u1jbo53ot] {
    display: flex;
    flex-direction: column;
}

.moves-header[b-3u1jbo53ot] {
    display: grid;
    grid-template-columns: 55px 55px 1fr 44px;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.move-row[b-3u1jbo53ot] {
    display: grid;
    grid-template-columns: 55px 55px 1fr 44px;
    gap: 0.25rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.move-row:hover[b-3u1jbo53ot] {
    background: rgba(49, 221, 227, 0.1);
}

.move-san[b-3u1jbo53ot] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #31DDE3;
}

.col-games[b-3u1jbo53ot] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.freq-pct[b-3u1jbo53ot] {
    font-size: 0.5625rem;
    color: rgba(255, 255, 255, 0.35);
}

.col-bar[b-3u1jbo53ot] {
    display: flex;
    align-items: center;
}

.col-eval[b-3u1jbo53ot] {
    text-align: right;
}

/* Sleeper move indicator */
.sleeper-icon[b-3u1jbo53ot] {
    color: #B88536;
    font-size: 0.5625rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Frequency bar */
.frequency-bar-row[b-3u1jbo53ot] {
    padding: 0 0.5rem 0.25rem;
}

.frequency-bar[b-3u1jbo53ot] {
    height: 2px;
    background: linear-gradient(90deg, rgba(49, 221, 227, 0.4), rgba(49, 221, 227, 0.1));
    border-radius: 1px;
    min-width: 1px;
    transition: width 0.3s ease;
}

/* Top Games */
.explorer-top-games[b-3u1jbo53ot] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.5rem;
}

.top-games-header[b-3u1jbo53ot] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.game-row[b-3u1jbo53ot] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.game-row:hover[b-3u1jbo53ot] {
    background: rgba(49, 221, 227, 0.08);
}

/* #7138 E9 - no host wired the click (e.g. withheld below tier): plain data,
   not an offer. */
.game-row-static[b-3u1jbo53ot],
.game-row-static:hover[b-3u1jbo53ot] {
    cursor: default;
    background: transparent;
}

.game-players[b-3u1jbo53ot] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
}

.game-white[b-3u1jbo53ot] {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.game-vs[b-3u1jbo53ot] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.625rem;
}

.game-black[b-3u1jbo53ot] {
    color: rgba(255, 255, 255, 0.7);
}

.game-meta[b-3u1jbo53ot] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
}

.game-elo[b-3u1jbo53ot] {
    font-family: 'SF Mono', 'Consolas', monospace;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.625rem;
}

.game-year[b-3u1jbo53ot] {
    color: rgba(255, 255, 255, 0.4);
}

.game-result[b-3u1jbo53ot] {
    font-weight: 600;
    font-size: 0.6875rem;
}

.result-white[b-3u1jbo53ot] {
    color: #e8e8e8;
}

.result-draw[b-3u1jbo53ot] {
    color: #6b7280;
}

.result-black[b-3u1jbo53ot] {
    color: rgba(255, 255, 255, 0.5);
}

.game-study-btn[b-3u1jbo53ot] {
    margin-left: auto;
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 4px;
    color: #31DDE3;
    padding: 0.125rem 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.game-study-btn:hover[b-3u1jbo53ot] {
    background: rgba(49, 221, 227, 0.25);
    border-color: #31DDE3;
}

/* Repertoire coverage indicator */
.move-row.in-repertoire[b-3u1jbo53ot] {
    background: rgba(16, 185, 129, 0.06);
}

.move-row.in-repertoire .move-san[b-3u1jbo53ot] {
    color: #10b981;
}

.covered-icon[b-3u1jbo53ot] {
    color: #10b981;
    font-size: 0.625rem;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.col-move[b-3u1jbo53ot] {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Spin animation */
.spin[b-3u1jbo53ot] {
    animation: spin-b-3u1jbo53ot 1s linear infinite;
}

@keyframes spin-b-3u1jbo53ot {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .explorer-panel-card[b-3u1jbo53ot] {
        padding: 0.75rem;
        border-radius: 12px;
    }

    .moves-header[b-3u1jbo53ot],
    .move-row[b-3u1jbo53ot] {
        grid-template-columns: 45px 45px 1fr 36px;
        font-size: 0.8rem;
    }

    .move-row[b-3u1jbo53ot] {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .moves-header[b-3u1jbo53ot],
    .move-row[b-3u1jbo53ot] {
        grid-template-columns: 40px 40px 1fr 32px;
        gap: 0.25rem;
        font-size: 0.75rem;
    }

    .explorer-panel-header h3[b-3u1jbo53ot] {
        font-size: 0.6875rem;
    }
}

/* #7736 — the explorer's move rows are `<div role="button" tabindex="0">`:
   interactive controls whatever tag they use, and they measured 38-39px tall
   on a coarse-pointer tablet walk at 834/1024/1280. They do not appear at all
   at 390px (the panel is a tablet-and-up surface), which is why the 390px gate
   cannot see them and why this was found by hand rather than by the ratchet.
   Twelve of them stack directly against each other, so this grows the row
   rather than painting a pseudo hit area - overlapping invisible areas on a
   stack of adjacent rows would send taps to the wrong move. */
@media (hover: none) and (pointer: coarse) {
    .move-row[b-3u1jbo53ot] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/OpeningPreviewModal.razor.rz.scp.css */
.opening-preview-overlay[b-jtor5cwyic] {
    position: fixed;
    inset: 0;
    background: rgba(4, 14, 30, 0.72);
    backdrop-filter: blur(6px);
    z-index: 900;
    animation: fade-in-b-jtor5cwyic 180ms ease;
}

.opening-preview-modal[b-jtor5cwyic] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(920px, 92vw);
    max-height: 92vh;
    overflow: auto;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.55), 0 0 40px rgba(49, 221, 227, 0.12);
    z-index: 901;
    animation: scale-in-b-jtor5cwyic 220ms ease;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
}

@keyframes fade-in-b-jtor5cwyic { from { opacity: 0; } to { opacity: 1; } }
@keyframes scale-in-b-jtor5cwyic { from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.preview-header[b-jtor5cwyic] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.15);
}

.preview-title h3[b-jtor5cwyic] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1.35rem;
    color: #ffffff;
}

.preview-variation[b-jtor5cwyic] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.preview-eco[b-jtor5cwyic] {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 2px 8px;
    font-family: monospace;
    font-size: 0.7rem;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 6px;
    color: #31DDE3;
}

.preview-close[b-jtor5cwyic] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.35rem 0.5rem;
}
.preview-close:hover[b-jtor5cwyic] { color: #ffffff; }

.preview-loading[b-jtor5cwyic], .preview-empty[b-jtor5cwyic] {
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}
.preview-loading[b-jtor5cwyic]  i, .preview-empty[b-jtor5cwyic]  i { font-size: 1.75rem; color: rgba(49, 221, 227, 0.6); }
.preview-loading .spin[b-jtor5cwyic] { animation: spin-b-jtor5cwyic 1.2s linear infinite; }
@keyframes spin-b-jtor5cwyic { to { transform: rotate(360deg); } }

.preview-body[b-jtor5cwyic] {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(260px, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
}

.preview-board[b-jtor5cwyic] { display: flex; flex-direction: column; gap: 0.75rem; }

.preview-playback[b-jtor5cwyic] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.playback-btn[b-jtor5cwyic] {
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.3);
    color: #31DDE3;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
}
.playback-btn:hover[b-jtor5cwyic] { background: rgba(49, 221, 227, 0.22); }

.playback-status[b-jtor5cwyic] { font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); }

.preview-side[b-jtor5cwyic] { display: flex; flex-direction: column; gap: 1rem; }

.preview-moves[b-jtor5cwyic] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}

.move-played[b-jtor5cwyic] { color: #31DDE3; }
.move-pending[b-jtor5cwyic] { color: rgba(255, 255, 255, 0.35); }

.preview-status[b-jtor5cwyic] {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    align-items: flex-start;
}
.preview-status[b-jtor5cwyic]  i { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.preview-status strong[b-jtor5cwyic] { display: block; margin-bottom: 0.2rem; font-family: var(--ascend-font-primary); }
.preview-status p[b-jtor5cwyic] { margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); line-height: 1.45; }

.preview-status.in-rep[b-jtor5cwyic] { background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.3); }
.preview-status.in-rep[b-jtor5cwyic]  i { color: #10b981; }

.preview-status.not-in-rep[b-jtor5cwyic] { background: rgba(49, 221, 227, 0.10); border: 1px solid rgba(49, 221, 227, 0.3); }
.preview-status.not-in-rep[b-jtor5cwyic]  i { color: var(--ascend-accent); }

.preview-status.family-match[b-jtor5cwyic] { background: rgba(184, 133, 54, 0.10); border: 1px solid rgba(184, 133, 54, 0.3); }
.preview-status.family-match[b-jtor5cwyic]  i { color: var(--ascend-secondary); }

.playback-label[b-jtor5cwyic] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    flex: 1;
}

/* Bug #6540: fallback lines sourced from the user's own game (no ECO row)
   are visually distinct from canonical theory — gold, not neutral. */
.game-line-label[b-jtor5cwyic] {
    color: var(--ascend-secondary-light);
    font-style: italic;
}

.preview-games[b-jtor5cwyic] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.preview-games-header[b-jtor5cwyic] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.preview-games-title[b-jtor5cwyic] {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.preview-games-reset[b-jtor5cwyic] {
    background: transparent;
    border: 1px solid rgba(49, 221, 227, 0.25);
    color: rgba(49, 221, 227, 0.85);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    cursor: pointer;
}
.preview-games-reset:hover[b-jtor5cwyic] { background: rgba(49, 221, 227, 0.12); }

.preview-game-row[b-jtor5cwyic] {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.preview-game-row:hover[b-jtor5cwyic] { background: rgba(49, 221, 227, 0.08); border-color: rgba(49, 221, 227, 0.2); }
.preview-game-row.active[b-jtor5cwyic] { border-color: rgba(49, 221, 227, 0.55); background: rgba(49, 221, 227, 0.12); }

.preview-game-date[b-jtor5cwyic] { color: rgba(255, 255, 255, 0.55); }
.preview-game-opp[b-jtor5cwyic] { font-family: monospace; color: rgba(255, 255, 255, 0.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-game-result[b-jtor5cwyic] { font-weight: 600; padding: 1px 6px; border-radius: 4px; font-size: 0.7rem; }
.preview-game-row.win .preview-game-result[b-jtor5cwyic] { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.preview-game-row.loss .preview-game-result[b-jtor5cwyic] { background: rgba(239, 68, 68, 0.18); color: var(--ascend-text-light); }
.preview-game-row.draw .preview-game-result[b-jtor5cwyic] { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }

.preview-action[b-jtor5cwyic] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.2rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0a1628;
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
    transition: transform 0.15s ease;
}
.preview-action:hover:not(:disabled)[b-jtor5cwyic] { transform: translateY(-1px); }
.preview-action:disabled[b-jtor5cwyic] { opacity: 0.6; cursor: not-allowed; }

.preview-error[b-jtor5cwyic] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.8rem;
}

@media (max-width: 720px) {
    .preview-body[b-jtor5cwyic] { grid-template-columns: 1fr; }
}
/* /Components/Shared/OrientationTour.razor.rz.scp.css */
/* Orientation tour (#6764). Brand tokens only - no raw hex, no raw font names. */

/* ---------------------------------------------------------------- overlay */

.tour-overlay[b-bugex7v9cn] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}

/* The spotlight is a transparent box whose shadow darkens the rest of the
   screen. Cheaper and sharper than an SVG mask, and it stays crisp at any
   nav-entry size. */
.tour-spotlight[b-bugex7v9cn] {
    position: fixed;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(2, 8, 20, 0.82),
                0 0 0 2px var(--ascend-accent),
                0 0 24px rgba(49, 221, 227, 0.45);
    transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease;
    pointer-events: none;
}

/* Fallback when the stop's nav entry is not in this player's sidebar. */
.tour-scrim[b-bugex7v9cn] {
    position: fixed;
    inset: 0;
    background: rgba(2, 8, 20, 0.82);
}

/* ------------------------------------------------------------------- card */

.tour-card[b-bugex7v9cn] {
    position: fixed;
    pointer-events: auto;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.96));
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 24px;
    padding: 1.25rem 1.375rem 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.tour-card-centered[b-bugex7v9cn] {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(340px, calc(100vw - 2rem));
}

.tour-step-count[b-bugex7v9cn] {
    margin: 0 0 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ascend-secondary);
}

.tour-nav-label[b-bugex7v9cn] {
    margin: 0 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 1.375rem;
    line-height: 1.15;
    color: #ffffff;
}

.tour-body[b-bugex7v9cn] {
    margin: 0 0 0.875rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.tour-not-yours[b-bugex7v9cn] {
    margin: -0.5rem 0 0.875rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------- actions */

.tour-actions[b-bugex7v9cn] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.tour-card .tour-next[b-bugex7v9cn] {
    flex: 1;
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-bg-dark);
    /* Belt-and-braces: some gradient-text rules zero the fill colour, which
       leaves the paint white regardless of `color`. Owner canary 2026-07-31
       reported white text on these cyan buttons. */
    -webkit-text-fill-color: var(--ascend-bg-dark);
    border: none;
    border-radius: 50px;
    padding: 0.6875rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tour-card .tour-next:hover[b-bugex7v9cn] {
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

.tour-back[b-bugex7v9cn] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    padding: 0.6875rem 1.125rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    cursor: pointer;
}

.tour-back:hover[b-bugex7v9cn] {
    background: rgba(255, 255, 255, 0.13);
}

.tour-skip[b-bugex7v9cn] {
    display: block;
    margin: 0.75rem auto 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    text-decoration: underline;
    cursor: pointer;
}

.tour-skip:hover[b-bugex7v9cn] {
    color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------- launcher */

.tour-launcher[b-bugex7v9cn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: 0.875rem 1.125rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.28);
    border-radius: 16px;
}

.tour-launcher-body[b-bugex7v9cn] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: min(100%, 18rem);
    flex: 1;
}

.tour-launcher-icon[b-bugex7v9cn] {
    color: var(--ascend-accent);
    font-size: 1.25rem;
    line-height: 1.3;
}

.tour-launcher-heading[b-bugex7v9cn] {
    margin: 0 0 0.125rem;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: #ffffff;
}

.tour-launcher-message[b-bugex7v9cn] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.tour-launcher-actions[b-bugex7v9cn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tour-launcher .tour-launcher-start[b-bugex7v9cn] {
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-bg-dark);
    /* Belt-and-braces: some gradient-text rules zero the fill colour, which
       leaves the paint white regardless of `color`. Owner canary 2026-07-31
       reported white text on these cyan buttons. */
    -webkit-text-fill-color: var(--ascend-bg-dark);
    border: none;
    border-radius: 50px;
    padding: 0.5625rem 1.125rem;
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
}

.tour-launcher .tour-launcher-start:hover[b-bugex7v9cn] {
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.35);
}

.tour-launcher-decline[b-bugex7v9cn] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
    cursor: pointer;
}

.tour-launcher-decline:hover[b-bugex7v9cn] {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 640px) {
    .tour-card[b-bugex7v9cn] {
        width: min(340px, calc(100vw - 2rem)) !important;
        left: 1rem !important;
    }

    /* #8613 walk - the centered card (a stop whose row is not in this
       member's sidebar) is pinned to left: 1rem above, so its horizontal
       half of the centering pushed it half its width off the left edge.
       On a phone it centers vertically only. */
    .tour-card-centered[b-bugex7v9cn] {
        transform: translateY(-50%);
    }
}
/* /Components/Shared/PageContainer.razor.rz.scp.css */
.page-shell[b-avjqovfwyl] {
    min-height: 100vh;
    background: var(--ascend-background);
    color: var(--ascend-text-light);
}

/* Standardized page header — matches StudyLibrary / BookCatalog canonical pattern.

   #7735 — THE HEADER ACTION ROW WRAPS AT EVERY WIDTH. Read this before
   removing flex-wrap below or restoring flex-shrink: 0 on .header-right.

   This row used to be nowrap with an unshrinkable .header-right, and the
   column-direction rescue lived at max-width: 768px only. That left a
   TABLET-AND-SMALL-LAPTOP HOLE. Measured on /library at an 834px viewport:
   the row had 546px of content column to work with, .header-left wanted
   266px and .header-right wanted 542px (three buttons — Find / Add Book 188,
   Add Workbook 182, Add Course 156). 266 + 32 gap + 542 = 840 against 546,
   and because .header-right could neither shrink nor wrap it simply ran on:
   its right edge landed at 1103px, and at 1103px again on a 1024px viewport.

   Those 269-279px were not merely off-screen. app.css clamps html/body with
   overflow-x: hidden (#7296), so the page does not scroll sideways — the
   excess is hidden, unscrollable and unzoomable. "Add Course" was not a
   cramped button on a tablet; for that user it did not exist. Phone widths
   were clean the whole time (the 768px column rule caught them) and 1280+
   was clean (the row finally fit), which is exactly how a band defect
   survives a phone-and-desktop check.

   The fix lets flexbox do at EVERY width what it was only allowed to do at
   one breakpoint: the row wraps, so .header-right drops to its own line when
   the pair will not fit; .header-right wraps internally, so its buttons
   stack when that line is still too narrow; and nothing is pinned at its
   max-content width any more. No media query is involved, so there is no
   next band to fall through — which is the actual lesson here, not the
   number 834. */
.page-header[b-avjqovfwyl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

/* A long heading or subtitle must wrap inside this block rather than set the
   line's width: min-width on a flex item defaults to its MIN-CONTENT, which
   is the same blowout mechanism #7296 documents one level up. */
.header-left[b-avjqovfwyl] {
    flex: 1 1 auto;
    min-width: 0;
}

/* #7862 - THE line-height IS LOAD-BEARING. Read this before shrinking it.

   condor's inline box is 1.25em and the inherited line-height was 1.2em, so the
   heading's text box overflowed its own line box by exactly 1px at the top and
   1px at the bottom (measured in Chrome at 40px: a 50px text rect inside a 48px
   h1). This h1 is the FIRST thing inside .page-shell, which has no top padding,
   so that 1px escaped .page-shell - and .page-shell is the nearest opaque
   background in the chain.

   axe-core therefore refused to judge the heading on EVERY page that uses
   PageContainer: "Element's background color could not be determined because
   it's partially obscured by another element", blaming .page-shell. Nothing was
   obscuring anything. axe requires the first opaque ancestor to VISUALLY
   CONTAIN the text rect, and it did not, by one pixel. Those two entries
   (.accent-white, .accent-gold) sit in the frozen undecidable register marked
   "POSSIBLE REAL OVERLAP - the most likely place in this file to find a real
   bug"; this is what they actually were.

   1.3 leaves a 1px margin on that containment check, and because it is a ratio
   the 1.75rem and 1.35rem sizes below are covered by the same value. Measured
   after: LIBRARY 17.85:1, STUDIES 5.48:1 - neither was judged at all before. */
.page-heading[b-avjqovfwyl] {
    font-family: var(--ascend-font-primary);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin: 0;
}

.page-subtitle[b-avjqovfwyl] {
    font-family: var(--ascend-font-secondary);
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.5rem 0 0;
}

/* #7735 — flex-wrap is unconditional (it used to live in the 768px block, which
   is why the tablet band overflowed), and flex-shrink: 0 is GONE. Pinning this
   row at its max-content width is what turned "three buttons do not fit" into
   "three buttons run off the edge of a page that cannot scroll". */
.header-right[b-avjqovfwyl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    align-items: center;
    /* #8837 - the row is also the shared .action-row action-row--start (see the
       markup), so on a phone the header actions STACK at one width instead of
       wrapping one per line at their own label widths ("Find / Add Book" 191px
       over "Add Workbook" 184px over "Add Course" 157px on /library at 344).
       .action-row is width: 100% for the footer case; here the row is a flex
       ITEM beside .header-left above 768px, and 100% would push it onto its own
       line under the title. width: auto keeps it beside the title on desktop,
       and on a phone (the header is a column, align-items: flex-start) it makes
       the stack as wide as its widest button, which every button then takes. */
    width: auto;
}

@media (max-width: 768px) {
    .page-header[b-avjqovfwyl] {
        flex-direction: column;
        gap: 1rem;
    }

    .page-heading[b-avjqovfwyl] {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .page-heading[b-avjqovfwyl] {
        font-size: 1.35rem;
    }

    .page-subtitle[b-avjqovfwyl] {
        font-size: 0.9rem;
    }
}

/* #7891 - COMPACT HEADER WHILE A DRILL BOARD IS ON SCREEN (phone widths).

   All 22 drills compose DrillShell for the live board, and 16 of them put the
   standard header above it (title + a one-to-three line coaching subtitle).
   At phone widths that header, plus SharedPages.css's 2rem padding, 1px rule
   and 3-4rem margin under it, put the board's top edge at ~300px. Under the
   two-row mobile header (108px at <= 480px) a 322px board then ends at
   ~622px - below the fold of a real phone browser viewport (iPhone 14 Safari
   is 390x664 with its toolbars; any subtitle that wraps to three lines pushes
   rank 1 under). Rank 1 is the rank endgame and mate work depends on.

   The header collapses when, and only when, the shell CONTAINS a DrillShell:
   `.drill-shell` is DrillShell's root class, so the hook is structural and
   needs nothing from the pages. On a drill's setup screen there is no shell
   yet, so the full title and subtitle still frame the drill where they are
   read; the moment the board is up they get out of its way. The subtitle is
   hidden rather than clamped - a one-line ellipsis reads as a defect, and the
   drill's own prompt sits under the board.

   The Razor CSS rewriter leaves the :has() argument alone and scopes the
   outer compound (`.page-shell:has(.drill-shell) .page-header[b-...]`) -
   verified against GameAnalysis's `.rail-stack:has(> .move-detail-col)` in a
   built bundle. The scoped selector also out-specifies SharedPages.css's
   global `.page-header` margin/padding, which is the point.

   #7911 - AT EVERY WIDTH, NOT ONLY <= 768px. This block first shipped inside
   the 768px query on the reasoning that vertical space only becomes the
   constraint once the sidebar stacks. The desktop proved otherwise: at
   1440x900 the full header (a 40px heading, a one- or two-line subtitle, a
   2rem rule gap and a 4rem margin) put the board's top edge at 314-343px
   under the 96px app header, so the 600px board ended at 914-947px, and a real
   laptop browser only has ~790px of a 1440x900 screen. So the header compacts
   wherever a drill board is live; only the heading size differs by width.

   --page-header-block is what the compact header costs vertically, published
   for DrillShell's board cap (see DrillShell.razor.css). It is DERIVED from the
   declarations below - heading font-size x line-height, plus padding-bottom,
   plus SharedPages.css's 1px rule, plus margin-bottom - so change them
   together. It is set only when the page actually has a header
   (`:has(> .page-header)`); a drill with no PageContainer title reserves
   nothing. */
.page-shell:has(.drill-shell):has(> .page-header)[b-avjqovfwyl] {
    --page-header-block: calc(1.5rem * 1.3 + 0.5rem + 1px + 0.75rem);
}

.page-shell:has(.drill-shell) .page-header[b-avjqovfwyl] {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    gap: 0.5rem;
}

.page-shell:has(.drill-shell) .page-heading[b-avjqovfwyl] {
    font-size: 1.5rem;
}

.page-shell:has(.drill-shell) .page-subtitle[b-avjqovfwyl] {
    display: none;
}

/* #9053 part (b) - a page whose subtitle is its own content, not a drill's tagline,
   keeps it when it hosts a DrillShell. The endgame lesson's subtitle is the lesson's
   one line under the generic ENDGAME LESSON heading, so hiding it would leave the
   header naming no lesson. The rest of the compact header still applies. */
.page-shell.page-shell-keeps-subtitle:has(.drill-shell) .page-subtitle[b-avjqovfwyl] {
    display: block;
}

/* NOTE (review round 1): --page-header-block above does NOT count a kept subtitle.
   That is deliberate, and it limits where this class may go: only on a page whose
   board does not start under the header, so the board cap's header term is not what
   places the board. On the endgame lesson the framing card and side line already put
   the board well below the header, and adding a subtitle term would only shrink the
   board there (#8810: no lost board pixels). A page whose board starts right under a
   kept subtitle must add that line to --page-header-block instead. */

/* #9053 part (b) review - ROOM AT THE END OF THE PAGE FOR A DOCK THAT STAYS UP.
   In band A (DrillShell.razor.css) the verdict row is fixed to the bottom of the
   screen. A verdict that clears itself in a second or two can cover the page's end
   for that long; one that waits on Next, Try again or Take back
   (DrillVerdictDock StaysUntilDismissed) covers it for as long as the member reads,
   so without this the page's last controls (the endgame lesson's Rate yourself, Back
   and This looks wrong) could not be scrolled above it. The padding is the band A
   reserve, the room DrillShell already budgets for that dock, so it is at least the
   dock's height. Same band boundaries as DrillShell's band A. */
@media (max-width: 768px) and (min-height: 520px) {
    .page-shell:has(.drill-advance-row.stays-until-dismissed:not(.is-idle))[b-avjqovfwyl] {
        padding-bottom: calc(15rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 768px) {
    .page-shell:has(.drill-shell):has(> .page-header)[b-avjqovfwyl] {
        --page-header-block: calc(1.1rem * 1.2 + 0.5rem + 1px + 0.75rem);
    }

    .page-shell:has(.drill-shell) .page-heading[b-avjqovfwyl] {
        font-size: 1.1rem;
        line-height: 1.2;
    }
}
/* /Components/Shared/PastDueRecoveryBanner.razor.rz.scp.css */
/* PBI #8426 past-due recovery - a quiet factual notice, tokens only
   (ScopedCssBoundaryTests). Amber, not red: the renewal is unresolved, not
   broken, and a red alarm bar would be the manufactured urgency the house rule
   forbids. */

.pastdue-note[b-6y8ndvdhyt] {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 3px solid var(--ascend-warning);
    border-radius: 16px;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.5rem;
}

.pastdue-note-heading[b-6y8ndvdhyt] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* The darker amber clears AA on the card background; the base token does not. */
    color: var(--ascend-warning);
}

.pastdue-note-message[b-6y8ndvdhyt] {
    margin: 0.6rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ascend-text-light);
}

.pastdue-note-error[b-6y8ndvdhyt] {
    margin: 0.6rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ascend-error-light);
}

.pastdue-note-action[b-6y8ndvdhyt] {
    /* Defect #8498 - the HEIGHT OF THIS BUTTON IS DECIDED HERE, not inherited
       from a font's metrics. It was `inline-block` with no line-height, so the
       label box was whatever `line-height: normal` computes to for
       --ascend-font-secondary (about 1.388), and on a phone the control measured
       42.78px: 19.98px of text + 20.8px of padding + 2px of border. That is why
       the number was 42.78 and not something round - nothing in this file chose
       it. Pinning the line-height makes the sum arithmetic this stylesheet owns
       (0.9rem x 1.5 = 21.6 + 20.8 + 2 = 44.4px at phone padding), and flex
       centering means the touch floor below grows the box with the label in the
       middle of it rather than sitting at the top of a taller button. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    margin-top: 0.9rem;
    background: transparent;
    border: 1px solid var(--ascend-warning);
    border-radius: 50px;
    padding: 0.45rem 1.1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-warning);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.pastdue-note-action:hover:not(:disabled)[b-6y8ndvdhyt] {
    background: var(--ascend-warning);
    color: var(--ascend-primary-dark);
}

.pastdue-note-action:disabled[b-6y8ndvdhyt] {
    cursor: default;
    opacity: 0.65;
}

/* Phone: the notice is full width inside the page gutters, and the action is a
   full-width target rather than a thin pill next to the text. */
@media (max-width: 480px) {
    .pastdue-note[b-6y8ndvdhyt] {
        padding: 0.9rem 1rem 1.1rem;
        border-radius: 12px;
    }

    .pastdue-note-action[b-6y8ndvdhyt] {
        display: flex;
        width: 100%;
        padding: 0.65rem 1rem;
    }
}

/* Defect #8498 - the touch floor. It is in a POINTER query, not in the 480px
   block above, because "how wide is the window" is not the question "is this a
   finger" (#6681, re-learned by #7736). A coarse pointer at 1024px and a phone
   held in landscape at 844px both miss that block, and the pill they get keeps
   the narrower 0.45rem padding, which computes to about 38px - further under the
   floor than the phone case this defect was filed for. Pointer media is true on
   every touch device at every width and false for every mouse, so it cannot
   re-inflate desktop density. --touch-target is 2.75rem = 44px: the iOS HIG
   minimum and WCAG 2.5.5. The width needs no floor - the label is "Update your
   card", far wider than 44px at every size. */
@media (hover: none) and (pointer: coarse) {
    .pastdue-note-action[b-6y8ndvdhyt] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/PauseStudyModal.razor.rz.scp.css */
/* Body + footer content for PauseStudyModal — chrome (overlay, header, close
   button, sizing) lives in the shared Modal.razor. Only style the slots here. */

.pause-explainer[b-d2ytc5f0lm] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    background: rgba(184, 133, 54, 0.08);
    border-left: 3px solid rgba(184, 133, 54, 0.6);
    border-radius: 6px;
}

.pause-label[b-d2ytc5f0lm] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

.pause-required[b-d2ytc5f0lm] {
    color: rgba(184, 133, 54, 0.95);
    font-weight: 600;
}

.pause-textarea[b-d2ytc5f0lm] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: var(--ascend-font-secondary);
    resize: vertical;
    min-height: 72px;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.pause-textarea:focus[b-d2ytc5f0lm] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.pause-textarea[b-d2ytc5f0lm]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.pause-charcount[b-d2ytc5f0lm] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
    margin-top: 0.25rem;
}

.pause-btn[b-d2ytc5f0lm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.pause-btn-secondary[b-d2ytc5f0lm] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.pause-btn-secondary:hover[b-d2ytc5f0lm] {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.pause-btn-primary[b-d2ytc5f0lm] {
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0a1628;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.pause-btn-primary:hover:not(:disabled)[b-d2ytc5f0lm] {
    background: linear-gradient(135deg, #42e8ed 0%, #31DDE3 100%);
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

.pause-btn-primary:disabled[b-d2ytc5f0lm] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
/* /Components/Shared/PawnSkeletonBoard.razor.rz.scp.css */
/* #6951 pawn skeleton diagram.

   The board itself is the shared ChessBoard, whose .chessboard-container is a
   width-driven 1:1 square (width: 100%, capped by max-width). Sizing here is
   therefore purely a width constraint on the wrapper - never a transform, and
   never a re-implementation of the board's own chrome. ::deep is required for
   the max-width override because .chessboard-container belongs to the CHILD
   component's markup and so does not carry this component's scope attribute. */

.skeleton-board[b-60js5mnvdu] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.skeleton-board.compact[b-60js5mnvdu] {
    /* Thumbnail for list rows. The shared board caps itself at min(600px, 88dvh);
       narrowing the wrapper is what shrinks it, so cap both. */
    max-width: 13rem;
    margin: 0 auto;
}

.skeleton-board.compact[b-60js5mnvdu]  .chessboard-container {
    gap: 0;
    max-width: 13rem;
}

.skeleton-board.compact[b-60js5mnvdu]  .chessboard {
    max-width: 13rem;
    border-width: 1px;
    border-radius: 8px;
    /* The full-size board's 60px-deep glow reads as smudge at thumbnail scale. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.skeleton-hint[b-60js5mnvdu] {
    margin: 0.75rem 0 0;
    text-align: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.skeleton-empty[b-60js5mnvdu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 8rem;
    padding: 1.25rem;
    border: 1px dashed var(--ascend-text-secondary);
    border-radius: 12px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-text-muted);
    text-align: center;
}

.skeleton-empty.compact[b-60js5mnvdu] {
    min-height: 6rem;
    max-width: 13rem;
    margin: 0 auto;
    padding: 0.75rem;
    font-size: 0.75rem;
}

.skeleton-empty i[b-60js5mnvdu] {
    font-size: 1.5rem;
    color: var(--ascend-accent);
    opacity: 0.6;
}
/* /Components/Shared/PawnStructureBadge.razor.rz.scp.css */
/* Pawn structure badge — cyan/teal lane to distinguish from gold tabiya
   badges and white/orange opening pills. Layout is the same panel-width
   block used in RepertoireBuildPanel; Compact variant strips the prefix
   label for tighter inline use. */
.ps-badge[b-ypxq2nftv4] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.14), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(49, 221, 227, 0.45);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ps-badge.ps-badge-compact[b-ypxq2nftv4] {
    width: auto;
    padding: 0.35rem 0.7rem;
    gap: 0.4rem;
}

.ps-badge:hover[b-ypxq2nftv4] {
    border-color: rgba(49, 221, 227, 0.85);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(49, 221, 227, 0.18);
}

.ps-badge .bi-grid-3x3[b-ypxq2nftv4] {
    color: rgba(49, 221, 227, 0.95);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.ps-badge.ps-badge-compact .bi-grid-3x3[b-ypxq2nftv4] {
    font-size: 0.9rem;
}

.ps-badge .ps-badge-label[b-ypxq2nftv4] {
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(49, 221, 227, 0.95);
}

.ps-badge .ps-badge-name[b-ypxq2nftv4] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-badge.ps-badge-compact .ps-badge-name[b-ypxq2nftv4] {
    font-size: 0.8rem;
}

.ps-badge .ps-badge-go[b-ypxq2nftv4] {
    color: rgba(184, 133, 54, 0.7);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ps-badge:hover .ps-badge-go[b-ypxq2nftv4] {
    color: rgba(184, 133, 54, 1);
}

/* Plans modal — two-column white/black grid with description hero on top. */
.ps-modal-body[b-ypxq2nftv4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ps-modal-meta[b-ypxq2nftv4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ps-modal-family[b-ypxq2nftv4] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(184, 133, 54, 0.95);
}

.ps-modal-confidence[b-ypxq2nftv4] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.ps-modal-description[b-ypxq2nftv4] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

.ps-modal-grid[b-ypxq2nftv4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.ps-plan-card[b-ypxq2nftv4] {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(49, 221, 227, 0.18);
}

.ps-plan-card h4[b-ypxq2nftv4] {
    margin: 0 0 0.55rem 0;
    font-family: var(--ascend-font-primary);
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    letter-spacing: 0.02em;
}

.ps-plan-white h4[b-ypxq2nftv4]  i {
    color: rgba(255, 255, 255, 0.92);
}

.ps-plan-black h4[b-ypxq2nftv4]  i {
    color: var(--ascend-text-primary);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 3px;
    padding: 1px;
}

.ps-plan-block[b-ypxq2nftv4] {
    margin-top: 0.55rem;
}

.ps-plan-block:first-of-type[b-ypxq2nftv4] {
    margin-top: 0;
}

.ps-plan-block-label[b-ypxq2nftv4] {
    display: block;
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(49, 221, 227, 0.85);
    margin-bottom: 0.25rem;
}

.ps-plan-block p[b-ypxq2nftv4] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.ps-plan-empty[b-ypxq2nftv4] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.ps-modal-link[b-ypxq2nftv4] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ps-modal-link:hover[b-ypxq2nftv4] {
    border-color: rgba(49, 221, 227, 0.55);
    background: rgba(49, 221, 227, 0.1);
}

.ps-modal-close[b-ypxq2nftv4] {
    padding: 0.55rem 1.4rem;
    border-radius: 50px;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ps-modal-close:hover[b-ypxq2nftv4] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(49, 221, 227, 0.3);
}

@media (max-width: 640px) {
    .ps-modal-grid[b-ypxq2nftv4] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/PerGameSentence.razor.rz.scp.css */
/* #8012 - the per-game Mirror sentence. Quiet on purpose: a measurement of one
   game, read in passing on a list or at the top of a review. No glow, no
   gradient, no animation - nothing here is a reward. Every color comes from the
   brand tokens. */

.pergame-sentence[b-i1j4zif3m2] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.pergame-text[b-i1j4zif3m2] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--ascend-text-light) 88%, transparent);
    overflow-wrap: anywhere;
}

.pergame-evidence[b-i1j4zif3m2] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ascend-text-secondary);
    overflow-wrap: anywhere;
}

.pergame-meta[b-i1j4zif3m2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}

/* Upright UI chrome (the judicious-oblique rule): a label, not prose. */
.pergame-pillar[b-i1j4zif3m2] {
    display: inline-flex;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ascend-secondary-light);
    border: 1px solid color-mix(in srgb, var(--ascend-secondary) 40%, transparent);
    background: color-mix(in srgb, var(--ascend-secondary) 10%, transparent);
    /* #8562 - the label WRAPS inside its pill rather than running past the
       games list's clipping Game cell. "Psychology & Decision-Making" in
       letter-spaced caps is wider than the column's 12rem floor, so a nowrap
       pill was cut off at the cell edge. Capped at its row; a two-line pill
       keeps the rounded shape with a smaller radius. */
    border-radius: 0.75rem;
    padding: 0.15rem 0.6rem;
    white-space: normal;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.pergame-train[b-i1j4zif3m2] {
    display: inline-flex;
    align-items: center;
    /* A real touch target on a phone, without a button's weight. */
    min-height: 44px;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: 0.8rem;
    color: var(--ascend-accent);
    text-decoration: none;
}

.pergame-train:hover[b-i1j4zif3m2],
.pergame-train:focus-visible[b-i1j4zif3m2] {
    color: var(--ascend-accent-light);
    text-decoration: underline;
}

/* The analysis header: a thin band under the game meta line, so the board still
   starts near the top of the viewport. */
.pergame-header[b-i1j4zif3m2] {
    padding: 0.6rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ascend-accent) 4%, transparent);
    margin: 0.5rem 0;
}

.pergame-header .pergame-text[b-i1j4zif3m2] {
    font-size: 0.95rem;
}

@media (pointer: fine) {
    .pergame-train[b-i1j4zif3m2] {
        min-height: 0;
    }
}
/* /Components/Shared/PhaseTransitionBanner.razor.rz.scp.css */
/* #5444 — phase-transition banner (shared: Self-Review + GameAnalysis). */

.phase-transitions-banner[b-vliij2i5ll] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    /* #7179 - the `margin-bottom: 1rem` that used to sit here was double
       spacing. BOTH consumers stack this banner in a `display:flex;
       flex-direction:column; gap:1rem` column (Self-Review's .sidebar-column,
       GameAnalysis's .analysis-main), so the gap already separates it from the
       next block and the margin only added a second 16px - plus a trailing
       16px under it in GameAnalysis, where it is the last child. */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 12px;
}

/* #7764 - Compact="true": the title sits BESIDE the boundary chips. Stacked,
   this banner spends a 19px title row plus a 9.6px gap above a 35px chip row
   and 27px of padding - 93px measured on dev at 1440 - to show, on most games,
   a single chip. In Self-Review's height-capped sidebar that height comes
   straight out of the move list below it, which is the working surface (#7764).
   Inline it is one row: same words, same chips, ~56px.
   `flex-wrap: wrap` on the row is what makes this safe at every width: when the
   title and the chips cannot share a line they take one each, which is exactly
   the stacked layout, so a narrow column never renders worse than before.
   Nothing here touches the default (stacked) rendering GameAnalysis uses. */
.phase-transitions-banner.compact[b-vliij2i5ll] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
}

.phase-transitions-banner.compact .ptb-header[b-vliij2i5ll] {
    flex-shrink: 0;
}

.phase-transitions-banner.compact .ptb-list[b-vliij2i5ll] {
    flex: 1 1 auto;
    min-width: 0;
}

.ptb-header[b-vliij2i5ll] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ascend-accent);
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ptb-title[b-vliij2i5ll] {
    color: rgba(255, 255, 255, 0.85);
}

.ptb-list[b-vliij2i5ll] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ptb-row[b-vliij2i5ll] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* #8844 review round 1 - where the transitions wrap onto lines of their own, two
   bordered buttons at their own widths ("Move 16 Opening -> Middlegame" 232px over
   "Move 30 Middlegame -> Endgame" 241px, Self-Review at 344, 390 and in its 1440
   sidebar) read as an uneven stack. Each row grows to fill its line so they share one
   width: always in the COMPACT banner (Self-Review's narrow sidebar column, where they
   stack at every width), and at 480px and below in the full banner, which keeps a
   compact row of natural-width buttons where there is room. */
.phase-transitions-banner.compact .ptb-row[b-vliij2i5ll] {
    flex: 1 1 auto;
}

@media (max-width: 480px) {
    .ptb-list .ptb-row[b-vliij2i5ll] {
        flex: 1 1 auto;
    }
}

.ptb-row:hover[b-vliij2i5ll] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.45);
}

.ptb-row.current[b-vliij2i5ll] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.12);
}

.ptb-move[b-vliij2i5ll] {
    color: var(--ascend-accent);
    font-weight: 600;
    white-space: nowrap;
}

.ptb-phases[b-vliij2i5ll] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.ptb-phases i[b-vliij2i5ll] {
    color: var(--ascend-secondary);
    font-size: 0.75rem;
}

.ptb-nudge[b-vliij2i5ll] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* #7796 - the phase-transition chips are real buttons that jump the board to
   the move, and they measured 234x34 on /games/{id}/review at 390px on a
   coarse pointer. They lay out as flex items in .ptb-list, so growing the box
   is safe - a pseudo-element hit area would overlap the chip beside it and
   take its taps (#7783). Inside the pointer query, so desktop keeps its
   compact chip row. */
@media (hover: none) and (pointer: coarse) {
    .ptb-row[b-vliij2i5ll] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/PieceGlyph.razor.rz.scp.css */
/* #9012 - a single piece outside a chessground board. chessground.base.css positions every
   ".cg-wrap piece" absolutely at one eighth of its wrapper (a board square); here the wrapper IS
   the square, so the piece fills it. The SVG itself comes from chessground.cburnett.css. */
.piece-glyph[b-wzwedutdej] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.piece-glyph piece[b-wzwedutdej] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    will-change: auto;
    pointer-events: none;
}
/* /Components/Shared/PlanExplanationPanel.razor.rz.scp.css */
.plan-panel[b-hxk8olmqmh] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    z-index: 10;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(10, 22, 40, 0.94));
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.plan-panel-header[b-hxk8olmqmh] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.plan-panel-header h3[b-hxk8olmqmh] {
    margin: 0;
    font-family: 'condor', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    color: #31DDE3;
}

.plan-panel-subtitle[b-hxk8olmqmh] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.plan-panel-hint[b-hxk8olmqmh] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* #7124 - tier-locked note. Neutral, not an error: nothing went wrong, the
   coach's wording is simply part of a paid plan. */
.plan-locked-note[b-hxk8olmqmh] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
}

.plan-answer-input[b-hxk8olmqmh] {
    width: 100%;
    resize: vertical;
    min-height: 4.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.875rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.plan-answer-input:focus[b-hxk8olmqmh] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.plan-answer-input[b-hxk8olmqmh]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.plan-panel-actions[b-hxk8olmqmh] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.plan-panel-actions[b-hxk8olmqmh]  i {
    font-size: 16px;
}

.grade-chip[b-hxk8olmqmh] {
    display: inline-block;
    padding: 0.25rem 0.85rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.grade-strong[b-hxk8olmqmh] {
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.grade-partial[b-hxk8olmqmh] {
    background: rgba(184, 133, 54, 0.15);
    border: 1px solid rgba(184, 133, 54, 0.5);
    color: #B88536;
}

.grade-weak[b-hxk8olmqmh] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef9a9a;
}

.plan-feedback[b-hxk8olmqmh] {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.6;
}

.plan-reward-line[b-hxk8olmqmh] {
    margin: 0;
    color: rgba(49, 221, 227, 0.85);
    font-size: 0.9rem;
}
/* /Components/Shared/PlatformSyncStatus.razor.rz.scp.css */
/* Shared platform sync-status line (#7021).

   The states that need the user to DO something have to read as different from
   the ones that do not - that is the fix. Colour is not what carries it (the
   sentences differ, and each one says the whole thing on its own); the warning
   tone is what makes a user stop on the one card that needs them. */

.platform-sync-status[b-coiz4bdaff] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.platform-sync-warn[b-coiz4bdaff],
.platform-sync-warn-icon[b-coiz4bdaff] {
    color: var(--ascend-warning, #f59e0b);
}
/* /Components/Shared/PlayerColorDot.razor.rz.scp.css */
/* PlayerColorDot - #7727.

   The ring carries the meaning, not the fill: on the dark navy card a black
   fill is nearly the same luminance as the surface behind it, and on a light
   surface a white fill is. So each disc gets the OPPOSITE ring, and the pair
   stays legible on either background.

   The ring is 20% of the diameter with a 2px floor. The floor is not padding:
   browsers round border-width DOWN to a whole device pixel, so the 0.55rem
   board-chrome dot computed a 1px ring from the proportional value and the
   ring is the only thing carrying the meaning. Measured at 2px on every call
   site, the smallest of which still leaves a ~5px core. */

.player-color-dot[b-yac12ro77a] {
    --pcd-size: 0.7rem;
    --pcd-ring: max(2px, calc(var(--pcd-size) * 0.2));

    display: inline-block;
    box-sizing: border-box;
    width: var(--pcd-size);
    height: var(--pcd-size);
    border-radius: 50%;
    flex: 0 0 auto;
    vertical-align: middle;
}

.player-color-dot.is-white[b-yac12ro77a] {
    background: var(--ascend-piece-white);
    border: var(--pcd-ring) solid var(--ascend-piece-black);
}

.player-color-dot.is-black[b-yac12ro77a] {
    background: var(--ascend-piece-black);
    border: var(--pcd-ring) solid var(--ascend-piece-white);
}
/* /Components/Shared/PositionalDiagnosticPanel.razor.rz.scp.css */
.pdc-panel[b-vgxn2j9p7c] {
    /* The gauge row's three tracks, named once so the axis header above them can
       be positioned FROM them instead of re-typing their pixel values (#7030).
       Hosts that need a narrower rail override these variables rather than the
       widths, and everything downstream — including the axis header's offset —
       follows automatically. Rem, not px, so a user's font size scales them. */
    --pdc-label-w: 4.7rem;
    --pdc-value-w: 4.4rem;
    --pdc-gauge-gap: 0.5rem;

    /* The panel lives in a sidebar rail, so "narrow" is a fact about the RAIL,
       not about the viewport — a viewport media query is measuring the wrong
       box. This makes the panel the query container for the cqi units the axis
       header sizes its type against. */
    container-type: inline-size;

    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    margin-top: 0.75rem;
}

.pdc-header[b-vgxn2j9p7c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.75rem;
}

.pdc-header[b-vgxn2j9p7c]  i {
    color: var(--ascend-accent);
    font-size: 0.9rem;
}

/* Axis header — OPPONENT ... BALANCED ... YOU, spanning the scale the gauges
   below it are read against.

   #7030: it used to be inset by the label and value column widths
   (`padding: 0 calc(70px + .5rem) 0 calc(75px + .5rem)`) so its two ends met
   the gauge TRACK's ends. In the 300–340px analysis sidebar those two fixed
   gutters ate ~127px of a ~276px panel, leaving ~149px for three labels that
   need ~140px before letter-spacing — so `space-between` ran out of free space
   and the three collided into one another. The inset also never did the job it
   was there for: with `space-between` and three unequal labels, BALANCED landed
   wherever it landed, NOT over the track's centre line.

   Now the header spans the full panel and gets its centring from the grid:
   three EQUAL tracks put the middle one's centre at the row's centre, and the
   tiny padding offset (the DIFFERENCE between the two gutters, ~5px, never
   their sum) slides that centre onto the gauge track's centre — the 1px
   `.gauge-center` mark. The ends now reach the panel edges rather than the
   track edges, which is what buys the ~127px that made them collide.

   Equal tracks rather than `1fr auto 1fr` on purpose: an `auto` middle track
   cannot shrink below the min-content width of a nowrap label, so at ~190px and
   below BALANCED grew back out of its track and collided with OPPONENT again
   (measured in Chromium, 2026-08-15: gaps of -3px at 190px, -17px at 160px).
   Equal thirds bound every label to a box it cannot leave. */
.pdc-axis-legend[b-vgxn2j9p7c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    column-gap: 0.4rem;

    /* Only the DIFFERENCE between the gauge row's side columns, so the header's
       centre sits on the track's centre. max() keeps it non-negative whichever
       column is wider. */
    padding-inline-start: max(0px, calc(var(--pdc-label-w) - var(--pdc-value-w)));
    padding-inline-end: max(0px, calc(var(--pdc-value-w) - var(--pdc-label-w)));

    margin-bottom: 0.4rem;
    font-family: var(--ascend-font-secondary);
    /* Shrinks with the RAIL (cqi), not the viewport: the panel is a sidebar
       resident, so a wide phone can hand it a narrow column and a narrow laptop
       a wide one. Ceiling is the original 0.65rem. */
    font-size: clamp(0.5rem, 3.4cqi, 0.65rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Each label FILLS its own third (the grid default, stretch) and aligns its text
   to the end of the scale it names. Filling rather than shrink-to-fit is the
   part that makes overlap impossible: the box is the track, so overflow:hidden
   clips at the track edge instead of letting a long label spill across its
   neighbour. The ellipsis is the last-resort degradation for a rail narrower
   than anything that ships — truncated beats overlapping. */
.axis-side[b-vgxn2j9p7c] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* #9089 - the opponent and middle labels were translucent (3.45:1 and 3.16:1 on
   the panel, below AA). They now take the app's tokens for the same meaning: the
   400-step error red for "their side" and the muted text color for the neutral
   middle, both opaque, so the panel no longer depends on what sits behind it. */
.axis-side.opp[b-vgxn2j9p7c] { text-align: start; color: var(--ascend-error-light); }
.axis-side.mid[b-vgxn2j9p7c] { text-align: center; color: var(--ascend-text-muted); }
.axis-side.you[b-vgxn2j9p7c] { text-align: end; color: rgba(49, 221, 227, 0.85); }

.pdc-gauges[b-vgxn2j9p7c] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gauge-row[b-vgxn2j9p7c] {
    display: flex;
    align-items: center;
    gap: var(--pdc-gauge-gap);
}

.gauge-label[b-vgxn2j9p7c] {
    flex-shrink: 0;
    width: var(--pdc-label-w);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    text-align: right;
}

.gauge-track[b-vgxn2j9p7c] {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.gauge-center[b-vgxn2j9p7c] {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.gauge-fill[b-vgxn2j9p7c] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.gauge-fill.positive[b-vgxn2j9p7c] {
    background: linear-gradient(90deg, rgba(49, 221, 227, 0.4), rgba(49, 221, 227, 0.7));
}

.gauge-fill.negative[b-vgxn2j9p7c] {
    background: linear-gradient(270deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.5));
}

.gauge-value[b-vgxn2j9p7c] {
    flex-shrink: 0;
    width: var(--pdc-value-w);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    /* #9089 - was rgba(255, 255, 255, 0.35), 3.16:1. The neutral reading stays
       muted; .positive and .negative below still color the leaning ones. */
    color: var(--ascend-text-muted);
    text-align: left;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.gauge-value.positive[b-vgxn2j9p7c] { color: #31DDE3; }
.gauge-value.negative[b-vgxn2j9p7c] { color: #f87171; }

.pdc-bishop-pair[b-vgxn2j9p7c] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.35rem 0.6rem;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: var(--ascend-secondary-light);
}

.pdc-bishop-pair[b-vgxn2j9p7c]  i {
    font-size: 0.75rem;
}

.pdc-tags[b-vgxn2j9p7c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.6rem;
}

.pdc-tag[b-vgxn2j9p7c] {
    padding: 0.15rem 0.5rem;
    background: rgba(49, 221, 227, 0.08);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 6px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.55);
}
/* /Components/Shared/PositionDrillModal.razor.rz.scp.css */
/* Chrome for PositionDrillModal.

   #6347: these rules used to live in StudyBoard.razor.css, scoped to
   StudyBoard's markup - so they never reached this child component and the
   modal shipped COMPLETELY UNSTYLED in production. Moved here so the scope
   attribute matches the markup they style.

   Sizing is rem, not the px the original carried: px ignores the reader's
   browser font-size and shrinks against scaled text on high-DPI displays.
   The three px values left are the sanctioned exceptions - a 1px hairline
   border, a shadow spread radius, and the 12px input radius the brand
   guide fixes. */
/* #6347 — content-only styling for <PositionDrillModal>. The overlay, dialog
   card, header/title and close button now come from the shared <Modal>.

   These rules previously lived in StudyBoard.razor.css, where they were scoped
   to StudyBoard's markup and therefore never reached this child component — the
   dialog rendered unstyled in production. They belong with the component that
   owns the markup. The textareas are written in THIS component's markup, so
   they carry its scope attribute and need a plain selector, not ::deep. */

.drill-position-info[b-pa275jczj7] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.drill-move-label[b-pa275jczj7] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
}

.drill-status-badge[b-pa275jczj7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
}

.drill-rep-count[b-pa275jczj7] {
    color: rgba(255, 255, 255, 0.5);
}

.drill-field[b-pa275jczj7] {
    margin-bottom: 0.75rem;
}

.drill-field label[b-pa275jczj7] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.375rem;
}

.drill-field textarea[b-pa275jczj7] {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.625rem 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    resize: vertical;
    line-height: 1.5;
}

.drill-field textarea:focus[b-pa275jczj7] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.drill-field textarea[b-pa275jczj7]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
/* /Components/Shared/PositionSetup.razor.rz.scp.css */
.position-setup[b-c0erpeyi1i] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Piece Palette */
.piece-palette[b-c0erpeyi1i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.palette-row[b-c0erpeyi1i] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.palette-piece[b-c0erpeyi1i] {
    /* #8808 - a touch drag from the palette needs the pointer events; without
       this the browser claims the gesture for scrolling and pointermove never
       arrives, so the drag silently does nothing on a phone.
       KNOWN COST, measured, not hand-waved: on a coarse pointer the
       .palette-row rule below turns this into a 1fr grid with max-width: none,
       so the buttons span the full content width (four columns at 344px, five
       at 390px). These two rows are therefore a band where a touch cannot
       scroll the dialog or the page. pan-y would give scrolling back but would
       break the drag, because the palette sits ABOVE the board and the gesture
       is mostly vertical. The rest of the surface still scrolls.
       user-select stops the piece GLYPH being text-selected mid-drag, which
       otherwise paints a selection highlight across the palette. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: rgba(255, 255, 255, 0.9);
    padding: 0;
}

/* #6404 - hover is a MOUSE affordance. On a touch screen a tap leaves the
   hovered look stuck on the last button pressed, and here that stuck look is
   one step away from .selected (same cyan tint, weaker border), so the palette
   reads as if two pieces were armed. Guarded by (hover: hover); the press
   feedback a finger needs is :active, below. */
@media (hover: hover) {
    .palette-piece:hover[b-c0erpeyi1i] {
        background: rgba(49, 221, 227, 0.1);
        border-color: rgba(49, 221, 227, 0.4);
    }
}

/* Immediate press feedback. Selection is round-tripped through the Blazor
   circuit, so .selected can lag a tap by the network; :active is painted by
   the browser at once and is the only thing that says "I got that". */
.palette-piece:active[b-c0erpeyi1i] {
    background: rgba(49, 221, 227, 0.18);
    transform: scale(0.96);
}

.palette-piece.selected[b-c0erpeyi1i] {
    background: rgba(49, 221, 227, 0.2);
    border-color: #31DDE3;
    box-shadow: 0 0 8px rgba(49, 221, 227, 0.3);
}

.palette-piece.tool-btn[b-c0erpeyi1i] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

@media (hover: hover) {
    .palette-piece.tool-btn:hover[b-c0erpeyi1i] {
        background: rgba(255, 255, 255, 0.08);
    }
}

.palette-piece.tool-btn.selected[b-c0erpeyi1i] {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.piece-char[b-c0erpeyi1i] {
    font-size: 1.25rem;
    line-height: 1;
}

/* Black pieces share the dark button background. Distinguish via
   fill color — slate gray for black, cream for white. Real-chess-set
   color scheme; both visible against dark theme. */
.palette-piece .piece-char[b-c0erpeyi1i] {
    color: #f0d9b5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.palette-piece-black .piece-char[b-c0erpeyi1i] {
    color: #475569;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.35);
}
.palette-piece-black.selected .piece-char[b-c0erpeyi1i] {
    color: #94a3b8;
}

/* Editor Board */
/* #8808 - .editor-board IS chessground's .cg-wrap, and the dragged piece is
   drawn inside it, translated relative to the board rect. A piece on its way
   down from the palette has a negative offset, so `overflow: hidden` below
   clips it and the member drags something invisible. The drag module adds this
   class for the life of a palette drag and removes it on pointerup, so the
   rounded-corner clip is only relaxed while a piece is actually in flight. */
.editor-board.palette-drag-active[b-c0erpeyi1i] {
    overflow: visible;
}

.editor-board[b-c0erpeyi1i] {
    width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(49, 221, 227, 0.2);
    position: relative;
    z-index: 1;
}

/* No square-color overrides — let chessground.brown.css (loaded in
   App.razor) provide the canonical wooden cream + brown palette. The
   previous gold/navy overrides washed out against dark modal
   backgrounds; defaults give proper contrast everywhere. */

/* Controls */
.position-controls[b-c0erpeyi1i] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.side-toggle[b-c0erpeyi1i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--ascend-font-secondary);
}

.toggle-label[b-c0erpeyi1i] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.radio-option[b-c0erpeyi1i] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    cursor: pointer;
}

.radio-option input[type="radio"][b-c0erpeyi1i] {
    accent-color: #31DDE3;
}

.quick-actions[b-c0erpeyi1i] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-btn[b-c0erpeyi1i] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .action-btn:hover[b-c0erpeyi1i] {
        background: rgba(49, 221, 227, 0.1);
        border-color: rgba(49, 221, 227, 0.4);
    }
}

.action-btn:active[b-c0erpeyi1i] {
    background: rgba(49, 221, 227, 0.18);
    transform: scale(0.98);
}

/* Scan button — primary action, not a secondary utility. Larger than the
   other action buttons so it's easily tappable on mobile and reads as a
   clear call-to-action rather than a small icon. */
.scan-btn-primary[b-c0erpeyi1i] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(184, 133, 54, 0.15);
    border: 1px solid rgba(184, 133, 54, 0.45);
    border-radius: 8px;
    color: #d4a04c;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: var(--touch-target);
}
@media (hover: hover) {
    .scan-btn-primary:hover[b-c0erpeyi1i] {
        background: rgba(184, 133, 54, 0.25);
        border-color: #B88536;
    }
}

.scan-btn-primary:not(:disabled):active[b-c0erpeyi1i] {
    background: rgba(184, 133, 54, 0.3);
    transform: scale(0.98);
}
.scan-btn-primary i[b-c0erpeyi1i] {
    font-size: 1.1rem;
}

/* Scan Message */
.scan-message[b-c0erpeyi1i] {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-family: var(--ascend-font-secondary);
}

.scan-message.success[b-c0erpeyi1i] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.scan-message.error[b-c0erpeyi1i] {
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* FEN Input */
.fen-input-row[b-c0erpeyi1i] {
    display: flex;
    gap: 0.35rem;
}

.fen-text-input[b-c0erpeyi1i] {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.35rem 0.5rem;
    font-size: 0.7rem;
    font-family: monospace;
}

[b-c0erpeyi1i] .fen-text-input:focus {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
}

.fen-apply-btn[b-c0erpeyi1i] {
    padding: 0.35rem 0.6rem;
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 6px;
    color: #31DDE3;
    font-size: 0.7rem;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .fen-apply-btn:hover:not(:disabled)[b-c0erpeyi1i] {
        background: rgba(49, 221, 227, 0.25);
    }
}

.fen-apply-btn:not(:disabled):active[b-c0erpeyi1i] {
    background: rgba(49, 221, 227, 0.32);
}

.fen-apply-btn:disabled[b-c0erpeyi1i] {
    opacity: 0.4;
    cursor: default;
}

/* Scan Progress Modal */
.scan-modal-overlay[b-c0erpeyi1i] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-c0erpeyi1i 0.2s ease;
}

@keyframes fadeIn-b-c0erpeyi1i {
    from { opacity: 0; }
    to { opacity: 1; }
}

.scan-modal[b-c0erpeyi1i] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(10, 22, 40, 0.95));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(49, 221, 227, 0.1);
    animation: slideIn-b-c0erpeyi1i 0.3s ease;
    text-align: center;
}

@keyframes slideIn-b-c0erpeyi1i {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.scan-modal-icon[b-c0erpeyi1i] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.15), rgba(184, 133, 54, 0.1));
    border: 2px solid rgba(49, 221, 227, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-modal-icon[b-c0erpeyi1i]  i {
    font-size: 28px;
}

.scan-modal-title[b-c0erpeyi1i] {
    font-family: var(--ascend-font-primary);
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 1.25rem;
}

.scan-steps[b-c0erpeyi1i] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
    margin-bottom: 1.25rem;
}

.scan-step[b-c0erpeyi1i] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.2s ease;
}

.scan-step.active[b-c0erpeyi1i] {
    color: rgba(255, 255, 255, 0.9);
}

.scan-step.done[b-c0erpeyi1i] {
    color: #10b981;
}

.step-indicator[b-c0erpeyi1i] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    font-size: 0;
    transition: all 0.2s ease;
}

.scan-step.active .step-indicator[b-c0erpeyi1i] {
    border-color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
}

.scan-step.active .step-indicator[b-c0erpeyi1i]  i {
    font-size: 10px;
}

.scan-step.done .step-indicator[b-c0erpeyi1i] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.scan-step.done .step-indicator[b-c0erpeyi1i]  i {
    font-size: 10px;
}

.scan-modal-close[b-c0erpeyi1i] {
    padding: 0.5rem 1.5rem;
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .scan-modal-close:hover[b-c0erpeyi1i] {
        background: rgba(49, 221, 227, 0.25);
        border-color: rgba(49, 221, 227, 0.5);
    }
}

.scan-modal-close:active[b-c0erpeyi1i] {
    background: rgba(49, 221, 227, 0.32);
}

/* Modal states: success / failure icon override */
.scan-modal.complete .scan-modal-icon[b-c0erpeyi1i] {
    border-color: rgba(16, 185, 129, 0.5);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
}

.scan-modal.failed .scan-modal-icon[b-c0erpeyi1i] {
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
}

/* Camera viewfinder CSS extracted to CameraCaptureModal.razor.css */
/* Corner editor CSS extracted to CornerEditorOverlay.razor.css */

@media (max-width: 768px) {
    .scan-modal[b-c0erpeyi1i] {
        padding: 1.25rem 1.5rem;
        max-width: 320px;
    }

    .scan-modal-icon[b-c0erpeyi1i] {
        width: 48px;
        height: 48px;
    }

    .scan-modal-icon[b-c0erpeyi1i]  i {
        font-size: 24px;
    }

    .scan-modal-title[b-c0erpeyi1i] {
        font-size: 1rem;
    }

    .scan-step[b-c0erpeyi1i] {
        font-size: 0.75rem;
    }

    /* Palette: let pieces flex to fill the row so the palette never overflows.
       At 36px × 10 buttons the row overflowed narrow phones; distribute evenly
       and bump tap target size so pieces are easy to pick with a thumb. */
    .palette-row[b-c0erpeyi1i] {
        gap: 0.3rem;
    }
    .palette-piece[b-c0erpeyi1i] {
        flex: 1 1 0;
        min-width: 2.25rem;
        max-width: 3.5rem;
        height: var(--touch-target);
    }
    .piece-char[b-c0erpeyi1i] {
        font-size: 1.4rem;
    }

    /* Side-to-move row: keep everything on one row if it fits; only wrap
       when truly necessary. Label sits inline with the radios. */
    .side-toggle[b-c0erpeyi1i] {
        flex-wrap: wrap;
        gap: 0.35rem 0.6rem;
        align-items: center;
    }
    .radio-option[b-c0erpeyi1i] {
        font-size: 0.85rem;
        padding: 0.15rem 0;
    }

    /* Quick actions: side-by-side buttons that flex to fill the row.
       Each button takes equal width via flex: 1; they wrap to two rows only
       on very narrow viewports. This keeps the modal compact instead of
       forcing a tall column of stacked buttons. */
    .quick-actions[b-c0erpeyi1i] {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .action-btn[b-c0erpeyi1i],
    .scan-btn-primary[b-c0erpeyi1i] {
        flex: 1 1 8.75rem;
        justify-content: center;
        font-size: 0.85rem;
        padding: 0.5rem 0.6rem;
    }

    /* FEN row: keep input + Apply side-by-side on mobile. Input flexes wide,
       Apply stays compact. Only if the container is extremely narrow does the
       wrap kick in. */
    .fen-input-row[b-c0erpeyi1i] {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .fen-text-input[b-c0erpeyi1i] {
        flex: 1 1 11.25rem;
        font-size: 0.75rem;
        padding: 0.45rem 0.55rem;
    }
    .fen-apply-btn[b-c0erpeyi1i] {
        padding: 0.45rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* ---------------------------------------------------------------------------
   #6716 - touch pass for the piece palette and the setup controls.

   Keyed on the INPUT DEVICE, not the viewport width. The block above is
   (max-width: 768px); a tablet in landscape (1024x768) is a touch-only device
   that it never reaches, and PositionSetup is embedded in a ModalSize.Medium
   dialog (max-width 560px, ~492px of content), so the component is narrow on a
   wide viewport too. Measured before this rule at 1024x768 with touch: palette
   pieces 36x36, radio input 13x13, FEN input 26.2px tall at 11.2px type - the
   "buttons incredibly small, can't read the text" report on #6681, which could
   not be reproduced because it was reproduced at PHONE widths where the
   max-width query does fire.

   (hover: none) and (pointer: coarse) matches touch-PRIMARY devices only, so a
   touchscreen laptop driven by a mouse keeps the desktop sizing. Verified by
   rendering: the two mouse cases are byte-identical before and after.
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    /* #6404 - the palette is a GRID of 44px cells, not a flex row that shrinks
       to fit. Measured with a real coarse pointer (Playwright is_mobile +
       has_touch, matchMedia asserted) inside the shared Modal at 344 and 390:
       the #6716 rule gave every piece the 44px HEIGHT and then let `flex: 1 1 0`
       with `min-width: 2.25rem` squeeze the WIDTH to 41.0px at 344 and 40.1px at
       390 - a 44x40 target, which is the same half-fix app.css calls out
       ("a 44px-tall, 24px-wide button is not a 44px target").

       auto-fit + minmax(44px, 3.5rem) computes the column count from the 44px
       MINIMUM, so the cells can never go under the floor: the row wraps to a
       second line instead, which is the documented house choice for adjacent
       controls ("they are grown and the row is allowed to wrap"). The 3.5rem
       ceiling keeps a wide tablet container from stretching six buttons into
       slabs. */
    .palette-row[b-c0erpeyi1i] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--touch-target), 1fr));
        gap: 0.35rem;
        /* 1fr, not a 3.5rem track ceiling. With a DEFINITE maximum the browser
           counts repetitions off that maximum, so a 227px container fitted three
           56px columns and the white row became three lines on a phone. With 1fr
           the count comes off the 44px minimum - four columns at 344, five at
           390 - and the tracks then share the row. The ceiling moves to the row
           instead: 24rem is seven cells plus gaps, which keeps a wide tablet
           container from stretching six buttons into slabs and is wider than any
           phone, so it never binds at 344 or 390. */
        max-width: 24rem;
    }

    .palette-piece[b-c0erpeyi1i] {
        width: auto;
        max-width: none;
        min-width: var(--touch-target);
        min-height: var(--touch-target);
        height: auto;
    }

    .piece-char[b-c0erpeyi1i] {
        font-size: 1.5rem;
    }

    .quick-actions[b-c0erpeyi1i] {
        gap: 0.5rem;
    }

    .action-btn[b-c0erpeyi1i],
    .scan-btn-primary[b-c0erpeyi1i] {
        min-height: var(--touch-target);
        font-size: 0.9rem;
        padding: 0.55rem 0.9rem;
    }

    /* The whole label is the tap target, not just the 13px native dot. */
    .side-toggle[b-c0erpeyi1i] {
        gap: 0.5rem 1rem;
        flex-wrap: wrap;
    }

    .radio-option[b-c0erpeyi1i] {
        min-height: var(--touch-target);
        gap: 0.5rem;
        font-size: 0.95rem;
    }

    /* The label is the 44px target (measured 76x44 / 73x44). The native dot
       still has to clear the unconditional WCAG 2.5.8 floor on its own, and at
       1.25rem it measured 20x20. 1.5rem = 24px. */
    .radio-option input[type="radio"][b-c0erpeyi1i] {
        width: 1.5rem;
        height: 1.5rem;
    }

    .toggle-label[b-c0erpeyi1i] {
        font-size: 0.9rem;
    }

    .fen-text-input[b-c0erpeyi1i],
    .fen-apply-btn[b-c0erpeyi1i] {
        min-height: var(--touch-target);
        font-size: 0.85rem;
    }

    /* 1rem, not the 0.85rem the neighboring rule sets: iOS Safari zooms the
       whole page when a focused input's type is under 16px, and the zoom is
       what actually clips this dialog on a phone. Declared after the shared
       rule above so it wins without raising specificity. */
    .fen-text-input[b-c0erpeyi1i] {
        padding: 0.5rem 0.65rem;
        font-size: 1rem;
    }

    .fen-apply-btn[b-c0erpeyi1i] {
        padding: 0.5rem 1rem;
    }

    /* The only way out of a failed scan. It never took a floor because the
       #6716 pass stopped at the palette and the corner editor; from its own
       padding and 0.8rem type it computes to about 33px tall. Icon-free but
       short-labeled ("OK"), so it takes both floors. */
    .scan-modal-close[b-c0erpeyi1i] {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
        padding: 0.5rem 1.75rem;
        font-size: 0.9rem;
    }
}
/* /Components/Shared/PreparationPanel.razor.rz.scp.css */
/* Preparation Panel */
.prep-panel-card[b-5voklw7gki] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 16px;
    padding: 1.25rem;
    position: relative;
}

.prep-panel-card[b-5voklw7gki]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #B88536 0%, #31DDE3 100%);
    border-radius: 16px 16px 0 0;
}

/* Header */
.prep-panel-header[b-5voklw7gki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.prep-panel-header h3[b-5voklw7gki] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #B88536;
    margin: 0;
    text-transform: uppercase;
}

.prep-progress-text[b-5voklw7gki] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

/* Content */
.prep-panel-content[b-5voklw7gki] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Loading / Complete states */
.prep-loading[b-5voklw7gki],
.prep-complete[b-5voklw7gki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    text-align: center;
}

.prep-complete i[b-5voklw7gki] {
    color: #10b981;
    font-size: 1.5rem;
}

/* #5957 — honest empty-states: explorer-unreachable reads as a soft warning
   (gold), empty-book as a neutral prompt (cyan) — never the success green. */
.prep-unavailable i[b-5voklw7gki] {
    color: #B88536;
}

.prep-empty-book i[b-5voklw7gki] {
    color: #31DDE3;
}

.prep-subtitle[b-5voklw7gki] {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
    margin: 0;
}

/* Position info */
.prep-position[b-5voklw7gki] {
    padding: 0.5rem 0.75rem;
    background: rgba(184, 133, 54, 0.08);
    border-radius: 8px;
}

.prep-move-path[b-5voklw7gki] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Candidates table */
.prep-candidates[b-5voklw7gki] {
    display: flex;
    flex-direction: column;
}

.prep-candidates-header[b-5voklw7gki] {
    display: grid;
    grid-template-columns: 55px 50px 1fr 40px;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.prep-candidate-row[b-5voklw7gki] {
    display: grid;
    grid-template-columns: 55px 50px 1fr 40px;
    gap: 0.25rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.prep-candidate-row:hover[b-5voklw7gki] {
    background: rgba(184, 133, 54, 0.08);
}

.prep-candidate-row.is-sleeper[b-5voklw7gki] {
    border-left: 2px solid rgba(184, 133, 54, 0.4);
}

.candidate-san[b-5voklw7gki] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #B88536;
}

.sleeper-icon[b-5voklw7gki] {
    color: #B88536;
    font-size: 0.5625rem;
    margin-left: 0.25rem;
}

.col-freq[b-5voklw7gki] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
}

.col-result[b-5voklw7gki] {
    display: flex;
    align-items: center;
}

.col-games[b-5voklw7gki] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.candidate-actions[b-5voklw7gki] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

.btn-choose[b-5voklw7gki] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(49, 221, 227, 0.15);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 4px;
    color: #31DDE3;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-choose:hover[b-5voklw7gki] {
    background: rgba(49, 221, 227, 0.25);
    border-color: #31DDE3;
}

/* Action buttons */
.prep-actions[b-5voklw7gki] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-skip[b-5voklw7gki],
.btn-exclude[b-5voklw7gki] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.btn-skip:hover[b-5voklw7gki] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.btn-exclude:hover[b-5voklw7gki] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--ascend-text-light);
}

/* Spin animation */
.spin[b-5voklw7gki] {
    animation: spin-b-5voklw7gki 1s linear infinite;
}

@keyframes spin-b-5voklw7gki {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .prep-panel-card[b-5voklw7gki] {
        padding: 0.75rem;
        border-radius: 12px;
    }

    .prep-candidates-header[b-5voklw7gki],
    .prep-candidate-row[b-5voklw7gki] {
        grid-template-columns: 45px 40px 1fr 32px;
        font-size: 0.8rem;
    }

    .prep-candidate-row[b-5voklw7gki] {
        min-height: 44px;
    }

    .prep-search-input[b-5voklw7gki] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .prep-candidates-header[b-5voklw7gki],
    .prep-candidate-row[b-5voklw7gki] {
        grid-template-columns: 40px 35px 1fr 28px;
        font-size: 0.75rem;
        gap: 0.25rem;
    }
}
/* /Components/Shared/PricingPlanFinder.razor.rz.scp.css */
/* v9.1 plan-finder - three questions, nudge-not-gate result. */
.plan-finder[b-gofoayveqe] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 24px;
    padding: 1.75rem;
    margin: 2rem 0;
}

.plan-finder h2[b-gofoayveqe] {
    margin-top: 0;
}

.plan-finder-lede[b-gofoayveqe] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.plan-finder-q[b-gofoayveqe] {
    margin-bottom: 1.25rem;
}

.plan-finder-question[b-gofoayveqe] {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    margin: 0 0 0.6rem;
}

.plan-finder-options[b-gofoayveqe] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.plan-finder-option[b-gofoayveqe] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.8);
    padding: 0.6rem 1.3rem;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.plan-finder-option:hover[b-gofoayveqe] {
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.plan-finder-option.selected[b-gofoayveqe] {
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.25), rgba(49, 221, 227, 0.1));
    border-color: #31DDE3;
    color: #ffffff;
}

.plan-finder-result[b-gofoayveqe] {
    border-top: 1px solid rgba(49, 221, 227, 0.2);
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}

.plan-finder-verdict[b-gofoayveqe] {
    font-family: 'condor', sans-serif;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0 0 0.4rem;
}

.plan-finder-verdict strong[b-gofoayveqe] {
    color: #31DDE3;
}

.plan-finder-why[b-gofoayveqe] {
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 0.5rem;
}

.plan-finder-reminder[b-gofoayveqe] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}
/* /Components/Shared/PromoterDisclosureLine.razor.rz.scp.css */
/* #8419 - the promoter disclosure line beside a referral link. */

.promoter-disclosure[b-livqj31fmx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 560px;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(184, 133, 54, 0.3);
    border-radius: 12px;
    box-sizing: border-box;
}

.pd-label[b-livqj31fmx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

.pd-line[b-livqj31fmx] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.pd-guidance[b-livqj31fmx] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.pd-actions[b-livqj31fmx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pd-status[b-livqj31fmx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: var(--ascend-accent-light);
}
/* /Components/Shared/ProposedLineCheck.razor.rz.scp.css */
.proposed-line-check[b-kxdepejnjk] {
    margin: 0.5rem 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.proposed-line-label[b-kxdepejnjk] {
    font-size: 0.82rem;
    color: var(--ascend-text-secondary);
}

.proposed-line-row[b-kxdepejnjk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.proposed-line-input[b-kxdepejnjk] {
    flex: 1 1 16rem;
    min-width: 12rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    /* #7232: was var(--ascend-text-primary) (#0f172a), the LIGHT-theme
       foreground, painting near-black glyphs on the dark input - 1.13:1, so
       what the SME typed was invisible while the placeholder was not. */
    color: var(--ascend-text-light);
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    font-family: var(--ascend-font-mono, monospace);
    font-style: normal;
}

.proposed-line-input:focus[b-kxdepejnjk] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.proposed-line-input[b-kxdepejnjk]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.proposed-line-hint[b-kxdepejnjk] {
    font-size: 0.82rem;
    color: var(--ascend-warning);
}

.proposed-line-hint.muted[b-kxdepejnjk] {
    color: var(--ascend-text-muted);
}
/* /Components/Shared/PublicPageShell.razor.rz.scp.css */
.public-page[b-2elpagl0s9] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    background: linear-gradient(135deg, #0a1628 0%, #0f172a 50%, #1e293b 100%);
}

.public-container[b-2elpagl0s9] {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 160px var(--space-xl) var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    flex: 1;
}

.public-content[b-2elpagl0s9] {
    color: rgba(255, 255, 255, 0.85);
    /* Absorb the container's spare height so the footer pins to the bottom
       of the viewport instead of floating mid-page with a dead gap below it
       on short pages (Joe-flagged 2026-06-10). */
    flex: 1;
}

/* Typography for page content rendered through ChildContent */

/* #7746 - the clamp's FLOOR was 2rem, and a floor on the font size is a floor
   on the width of the longest UNBREAKABLE word in the heading. Measured on dev
   at 320 and 344: "METHODOLOGY" needs 339px at 32px and "ACCESSIBILITY" needs
   425px, against content boxes of 288px and 312px - so both laid out past the
   right edge (the gold span reaching x=355 and x=441). With html/body at
   overflow-x: hidden (#7296) that is hidden and unreachable, not scrollable,
   and 344 is a real device here: the owner's folded Galaxy Fold 6.

   Dropping the floor to 1.3rem (20.8px) brings the worst case, ACCESSIBILITY,
   to 276px inside a 288px box at 320. The 5vw term is UNCHANGED, so every
   viewport at or above 416px renders exactly the size it rendered before -
   the fix costs nothing on any width that was not already broken.

   overflow-wrap is the INVARIANT rather than the fix: a heading longer than
   any of today's seven breaks the line instead of the page, so the next long
   word cannot reopen this bug. */
.public-content[b-2elpagl0s9]  h1 {
    font-family: var(--ascend-font-primary);
    font-size: clamp(1.3rem, 5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ascend-text-light);
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.public-content[b-2elpagl0s9]  h1 .title-gold {
    color: var(--ascend-secondary);
}

/* #7746 - h2 was a flat 1.5rem (24px). With h1 free to fall to 20.8px on a
   320px screen, a flat h2 would render LARGER than the page title there and
   invert the heading hierarchy - a defect introduced by the fix above rather
   than one the fix found. It tracks h1 down on the same 4:5 ratio the two
   already have at their caps (1.5rem vs 2.75rem is close enough that the
   relationship reads the same), and 4vw reaches the 1.5rem cap at 600px, so
   nothing changes on a tablet or a desktop. */
.public-content[b-2elpagl0s9]  h2:not(:where(.public-embed *)) {
    font-family: var(--ascend-font-primary);
    font-size: clamp(1.05rem, 4vw, 1.5rem);
    font-weight: 700;
    color: var(--ascend-text-light);
    margin: var(--space-2xl) 0 var(--space-md);
    overflow-wrap: break-word;
}

/* #8417 - .public-embed marks an IN-APP component shown on a marketing page
   (the Coach Bridge sample on /for-coaches). The prose typography below is for
   the page's own copy; inside an embed it out-specified the component's own
   rules ((0,2,1) against (0,2,0)), so the sample's paragraphs rendered at
   marketing size and spacing instead of the size the coach page shows. The
   opt-out is wrapped in :where() so it adds no specificity to these rules. */
.public-content[b-2elpagl0s9]  p:not(:where(.public-embed *)) {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--space-md);
}

.public-content[b-2elpagl0s9]  .lede {
    font-size: 1.1875rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Content links are cyan, but NOT links rendered as buttons (the shared Button
   component renders <a class="ascend-btn ...">): cyan text on the cyan primary
   button was invisible on the public Subscribe / waitlist CTAs (#1109). */
.public-content[b-2elpagl0s9]  a:not(.ascend-btn):not(:where(.public-embed *)) {
    color: var(--ascend-accent);
}

/* #7731 - below 768px MarketingHeader returns to normal flow and reserves its
   own height, so these paddings stop being a header offset and go back to
   being page spacing. The 140px/150px they used to carry were a guess at a
   header that is 244px tall at phone width, which is why "SIMPLE PRICING"
   rendered underneath it on /pricing at 390x844. */
@media (max-width: 768px) {
    .public-container[b-2elpagl0s9] {
        padding: var(--space-xl) var(--space-lg) var(--space-2xl);
    }
}

@media (max-width: 480px) {
    .public-container[b-2elpagl0s9] {
        padding: var(--space-lg) var(--space-md) var(--space-xl);
    }
}
/* /Components/Shared/PuzzleDrillSurface.razor.rz.scp.css */
.puzzle-drill-surface[b-xnjqgnsod0] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.puzzle-surface-header[b-xnjqgnsod0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.puzzle-surface-header-extra[b-xnjqgnsod0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.puzzle-surface-body[b-xnjqgnsod0] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.puzzle-surface-body:not(.with-sidebar)[b-xnjqgnsod0] {
    justify-content: center;
}

/* Board card — matches TC's .board-section: gradient + 2px cyan border +
   24px radius + radial overlay + heavy shadow. */
.puzzle-surface-board-card[b-xnjqgnsod0] {
    flex: 1;
    min-width: 0;
    max-width: 640px;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4), 0 0 40px rgba(49, 221, 227, 0.1);
    position: relative;
    /* #8993 - the 2rem padding is room for the verdict chip to straddle the
       card's top edge without reaching the first rank (DrillVerdictChip.razor.css). */
    --drill-verdict-chip-lift: -50%;
}

/* #8993 - THE VERDICT AT THE BOARD (owner ruling 2026-10-20, Design A). For the
   hold, the card's border and glow take the verdict's color; the chip names it at
   the top edge. data-verdict comes from DrillVerdictSignal, which the surface's
   own Inline overlay publishes to. The border is the card's, so nothing is
   painted over a square (#8710). */
.puzzle-surface-board-card[data-verdict="correct"][b-xnjqgnsod0] {
    --drill-verdict-color: var(--ascend-success);
}

.puzzle-surface-board-card[data-verdict="alternative"][b-xnjqgnsod0] {
    --drill-verdict-color: var(--ascend-secondary);
}

.puzzle-surface-board-card[data-verdict="incorrect"][b-xnjqgnsod0] {
    --drill-verdict-color: var(--ascend-error);
}

.puzzle-surface-board-card[data-verdict][b-xnjqgnsod0] {
    border-color: var(--drill-verdict-color);
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.4),
                0 0 2.5rem color-mix(in srgb, var(--drill-verdict-color) 45%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .puzzle-surface-board-card[data-verdict][b-xnjqgnsod0] {
        transition: box-shadow 0.16s ease-out, border-color 0.16s ease-out;
    }
}

.puzzle-surface-board-card[b-xnjqgnsod0]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(49, 221, 227, 0.1), transparent);
    pointer-events: none;
}

.puzzle-surface-board[b-xnjqgnsod0] {
    position: relative;
    width: 100%;
}

/* Full-board overlay — fills the board area, not a small centered box. */
/* #6697 — the hand-rolled .puzzle-feedback-overlay block that lived here was a
   byte-for-byte duplicate of DrillFeedbackOverlay's flood styling, and owning
   the markup is what let this surface own its own (unpaused) hold. The shared
   overlay renders the feedback now; its scoped CSS owns the look. */

/* Sidebar card — matches TC's .puzzle-sidebar: gradient + 2px border +
   16px radius + 1rem padding + vertical stack. Inner styles (sidebar-item,
   sidebar-label, sidebar-value, theme-badge, hint-reveal-btn, hint-nudge,
   sidebar-actions, sidebar-themes) live here via ::deep so every consumer
   that drops markup into SidebarContent inherits the same look without
   each page re-defining the classes. */
.puzzle-surface-sidebar[b-xnjqgnsod0] {
    width: 220px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.2);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* #8993 - the containing block the verdict is anchored to above 768px. */
    position: relative;
}

/* #5970 autoplay toggle — sits under the side-to-move pill, centered. */
.puzzle-surface-autoplay[b-xnjqgnsod0] {
    display: flex;
    justify-content: center;
}

/* #8730 / #8993 - THE CORRECTION'S PANEL.

   The verdict used to be an 85%-opaque wash filling the board area on all seven
   routes this surface hosts, which covered the square the correction names.
   #8730 moved it into a row UNDER the board card, in normal flow - and under a
   ~670px card that row started at y=808 on a 1366x768 screen and cleared itself
   (1.2s / 3.5s hold) before the member scrolled to it (#8991). #8993 renders it
   as the SIDEBAR's first child instead. The inner row's own layout - the flex
   split, the clip, the idle shell - is DrillVerdictDock's stylesheet; what this
   wrapper adds is where it sits: beside the board above 768px, the bottom dock
   at 768px and below.

   .is-idle on the WRAPPER as well as on the row, because the wrapper is what
   carries the dock's chrome: without it an empty live region would paint a bar
   with nothing in it. Idle it is also out of flow, so the mounted, empty
   role="status" region costs the sidebar no gap (it stays in the accessibility
   tree: absolute is not display: none). */
.puzzle-surface-verdict.is-idle[b-xnjqgnsod0] {
    position: absolute;
}

/* #8993 Design B - ABOVE 768px, BESIDE THE BOARD. Anchored over the top of the
   sidebar, which .puzzle-surface-body (a flex row, align-items: flex-start) lines
   up with the top of the board card, so the correction is on screen whenever the
   top of the board is. Out of flow, so neither the board nor the sidebar moves
   when it appears (DrillShell band E parity, #8810: no lost board pixels). Range
   syntax, the exact complement of the phone rule's (max-width: 768px) - a decimal
   min-width overlaps it at 768px in Chrome (see DrillShell.razor.css). Flat, for
   axe (#7862). */
@media (width > 768px) {
    .puzzle-surface-verdict:not(.is-idle)[b-xnjqgnsod0] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 30;
        margin: 0;
        padding: 0.75rem 0.9rem;
        max-height: 70vh;
        overflow-y: auto;
        background: var(--ascend-bg-card);
        border: 2px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
        border-radius: 16px;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.55);
    }
}

/* #5970 manual-advance button shown when autoplay is off (solved + paused). */
.puzzle-surface-advance[b-xnjqgnsod0] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* Side-to-move pill anchored to the top of the sidebar — replaces the old
   header-bar placement so every drill has a consistent right-rail layout
   with the pill, info chips, and actions stacked. */
.puzzle-surface-sidebar-pill[b-xnjqgnsod0] {
    display: flex;
    align-items: center;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.12);
}

.puzzle-surface-sidebar[b-xnjqgnsod0]  .sidebar-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.puzzle-surface-sidebar[b-xnjqgnsod0]  .sidebar-label {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
}

.puzzle-surface-sidebar[b-xnjqgnsod0]  .sidebar-value {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
}

.puzzle-surface-sidebar[b-xnjqgnsod0]  .sidebar-detail {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
}

.puzzle-surface-sidebar[b-xnjqgnsod0]  .sidebar-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.puzzle-surface-sidebar[b-xnjqgnsod0]  .theme-badge {
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: rgba(184, 133, 54, 0.15);
    color: #B88536;
    text-transform: capitalize;
}

.puzzle-surface-sidebar[b-xnjqgnsod0]  .hint-reveal-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(49, 221, 227, 0.3);
    border-radius: 8px;
    color: rgba(49, 221, 227, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.puzzle-surface-sidebar[b-xnjqgnsod0]  .hint-reveal-btn:hover:not(:disabled) {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}

.puzzle-surface-sidebar[b-xnjqgnsod0]  .hint-reveal-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.puzzle-surface-sidebar[b-xnjqgnsod0]  .hint-nudge {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    padding: 0.5rem 0.6rem;
    background: rgba(251, 191, 36, 0.06);
    border-left: 2px solid rgba(251, 191, 36, 0.4);
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    color: rgba(251, 191, 36, 0.85);
    line-height: 1.4;
}

.puzzle-surface-sidebar[b-xnjqgnsod0]  .sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: auto;
}

@media (max-width: 768px) {
    .puzzle-surface-body.with-sidebar[b-xnjqgnsod0] {
        flex-direction: column;
        /* Default body alignment is align-items: flex-start, which means
           cross-axis (width, in column mode) doesn't stretch. Combined with
           the card's min-width:0, the card collapses to its content's
           intrinsic width — chessground then inits at ~0 and freezes the
           board at 8px (the "tiny dot" symptom). Stretching forces full
           width and the chessground init reads the real parent size. */
        align-items: stretch;
    }
    .puzzle-surface-sidebar[b-xnjqgnsod0] {
        width: 100%;
    }
    /* Match .drill-canvas mobile rules: shrink padding so the square
       board inside reclaims horizontal (and therefore vertical) space. */
    .puzzle-surface-board-card[b-xnjqgnsod0] {
        max-width: none;
        width: 100%;
        padding: 0.5rem;
        border-radius: 14px;
    }
    .puzzle-surface-board-card[b-xnjqgnsod0]::before {
        border-radius: 14px;
    }
    /* #8993 - the padding is a hairline here, so a straddling chip would reach
       the first rank, and the top edge is no home either: on the Deviation Drill
       the card starts flush under the phone's sticky header (card top 116px under
       a 112px header at 390x844), which painted over a chip placed above it. So on
       a phone the chip sits wholly BELOW the card, in the body's 1.5rem column gap
       above the sidebar (22px chip, 24px gap) - beside the board, off every
       square, and never under the chrome. Measured in the #8993 walk. */
    .puzzle-surface-board-card[b-xnjqgnsod0] {
        --drill-verdict-chip-top: 100%;
        --drill-verdict-chip-lift: 0px;
    }
}

@media (max-width: 480px) {
    .puzzle-surface-board-card[b-xnjqgnsod0] {
        padding: 0.25rem;
        border-radius: 10px;
        border-width: 1px;
    }
    .puzzle-surface-board-card[b-xnjqgnsod0]::before {
        border-radius: 10px;
    }
}

/* #6784 — the other two post-answer action states dock exactly like the
   solution card does (see the long note in DrillSolutionReview.razor.css
   for the measurements and for why the action is pinned rather than the
   board shrunk). All three are the SAME beat in the loop: the user has
   answered, and the only thing left to do is read the correction and
   advance. Keeping them in normal flow put the advance button 400-700px
   below the fold on every rep.

   The surface reserves bottom padding so the last of its own content is
   never permanently hidden under the dock. */
@media (max-width: 768px) {
    /* #8730 - the verdict joins this list rather than growing a second dock. On a
       phone the correction and the control that acts on it are the same beat in
       the loop, so they belong in the same thumb-reachable block; the three of
       them stack because at most two are ever up at once (a verdict with the
       advance control, or a verdict with the blindfold retry bar). */
    .puzzle-surface-verdict:not(.is-idle)[b-xnjqgnsod0],
    .puzzle-surface-advance[b-xnjqgnsod0],
    .puzzle-blindfold-retry[b-xnjqgnsod0] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        margin: 0;
        max-height: 55dvh;
        overflow-y: auto;
        padding: 0.75rem 0.9rem;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        /* FLAT, not a gradient, and that is a correctness requirement rather than
           taste. This block used to carry only button bars; #8730 moved the VERDICT
           into it, so it now holds multi-line reading copy on seven routes. axe
           cannot resolve a text contrast over a gradient and returns every line as
           INCOMPLETE, which is undecidable rather than passing - the condition
           AxeDecidableTextSurfaceTests (#7862) exists to prevent, and the same call
           already made for .main-header and TrailGuideSteeringCard.
           The two stops were a near-identical navy pair (rgba(10,22,40,.98) to
           rgba(15,23,42,.96)), so flattening to the first one is visually a no-op
           and the opacity is what stopped content ghosting through, not the ramp. */
        background: rgb(10, 22, 40);
        box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.55);
    }

    .puzzle-drill-surface[b-xnjqgnsod0] {
        padding-bottom: 6rem;
    }
}

/* #6173 Blindfold mode — post-miss "keep calculating / reveal" bar. Sits where
   the solution review would otherwise be; neutral styling, no spoiler. */
.puzzle-blindfold-retry[b-xnjqgnsod0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.puzzle-blindfold-hint[b-xnjqgnsod0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.puzzle-blindfold-hint[b-xnjqgnsod0]  i {
    flex-shrink: 0;
}

.puzzle-blindfold-actions[b-xnjqgnsod0] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
/* /Components/Shared/PwaInstallSection.razor.rz.scp.css */
/* PWA install affordance (#6338). Card chrome comes from the shared Card
   component — only the lede is styled here (matches the Profile page's
   .data-export-lede so the section reads as a sibling settings block). */
.pwa-install-lede[b-l4gm2pj0l3] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
    line-height: 1.5;
}
/* /Components/Shared/RateInterval.razor.rz.scp.css */
/* RateInterval (#8228) - a rate with its 80% interval. Color and size of the rate itself
 * come from the caller (a grid cell, a stat tile's value); only the range is styled here.
 * Tokens only (ScopedCssBoundaryTests). */

/* #9336 - the root is the containing block for the stacked layout's visually-hidden
 * sentence (app.css .visually-hidden is position: absolute). Without it that span's
 * containing block was the page, not the cell, so inside a horizontal scroller (the
 * Opening Hub played grid's .played-table-wrapper) it sat at its static position past the
 * scroller's clip and widened body.scrollWidth: /opening-hub overflowed by 76 to 122px at
 * phone widths, hidden by html/body overflow-x: hidden (#7296). position: relative keeps
 * the span inside the scroller, which clips it. No visual change: nothing here is offset. */
.rate-interval[b-o4thxyko10] {
    position: relative;
}

/* The two bounds never split across lines. */
.rate-range[b-o4thxyko10] {
    white-space: nowrap;
}

.rate-stacked .rate-value[b-o4thxyko10],
.rate-stacked .rate-range[b-o4thxyko10] {
    display: block;
}

/* The range under a stacked rate: a fixed small size, so it reads the same under a 1.5rem
 * tile value and a 0.88rem grid cell. The brand secondary-text token clears AA on every
 * resolved surface (docs/design/brand-tokens.md). */
.rate-stacked .rate-range[b-o4thxyko10] {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ascend-text-secondary);
}
/* /Components/Shared/ReferencePositionBadge.razor.rz.scp.css */
.reference-position-badge[b-ap5j3za601] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.625rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #31DDE3;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.12), rgba(184, 133, 54, 0.12));
    border: 1px solid rgba(49, 221, 227, 0.4);
    white-space: nowrap;
}

.reference-position-badge[b-ap5j3za601]  i {
    font-size: 14px;
}
/* /Components/Shared/ReflectionBlocksSection.razor.rz.scp.css */
/* #5973 4f — themed reflection block review. On-brand dark cards; synthesis is
   the hero, applied-skill the quiet header, reflections collapsed beneath. */
.rblocks[b-p4j9sije50] {
    margin-bottom: 1.75rem;
}

/* Two-tone title rendered by the shared Wordmark component (#6356), which
   owns the flush-seam rule; tracking flows through --wordmark-tracking. */
.rblocks-title[b-p4j9sije50] {
    font-family: var(--ascend-font-primary);
    --wordmark-tracking: 0.04em;
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
}

.rblocks-sub[b-p4j9sije50] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 1rem;
}

.rblock[b-p4j9sije50] {
    border: 1px solid rgba(49, 221, 227, 0.18);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.rblock.open[b-p4j9sije50] {
    border-color: rgba(49, 221, 227, 0.4);
}

.rblock-head[b-p4j9sije50] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.rblock-theme[b-p4j9sije50] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.rblock-tag[b-p4j9sije50] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    color: #ffffff;
}

.rblock-pillar[b-p4j9sije50] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(184, 133, 54, 0.85);
}

.rblock-chev[b-p4j9sije50]  i { color: rgba(49, 221, 227, 0.7); }

.rblock-body[b-p4j9sije50] {
    padding: 0 1.1rem 1.1rem;
    border-top: 1px solid rgba(49, 221, 227, 0.12);
}

.rblock-applied[b-p4j9sije50] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.75rem 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

.rblock-applied strong[b-p4j9sije50] { color: var(--ascend-accent); }

/* The synthesis throughline — the hero of the review. */
.rblock-synth[b-p4j9sije50] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    padding: 0.9rem 1rem;
    background: rgba(49, 221, 227, 0.06);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 8px;
    margin-bottom: 0.9rem;
}

.rblock-reflections[b-p4j9sije50] {
    margin-bottom: 1rem;
}

.rblock-reflections summary[b-p4j9sije50] {
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.3rem 0;
}

.rblock-reflection[b-p4j9sije50] {
    padding: 0.5rem 0 0.5rem 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0.4rem 0;
}

.rr-title[b-p4j9sije50] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: #ffffff;
    font-weight: 600;
}

.rr-idea[b-p4j9sije50] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 0.15rem;
}

.rr-game[b-p4j9sije50] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.15rem;
    font-style: italic;
}

.rblock-actions[b-p4j9sije50] {
    display: flex;
    justify-content: flex-end;
}

/* #7137 - the gated-throughline note: sits where the synthesis paragraph would,
   stated plainly, never styled as an error. */
.rblock-synth-gated[b-p4j9sije50] {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid rgba(184, 133, 54, 0.35);
    border-radius: 12px;
    background: rgba(184, 133, 54, 0.08);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.rblock-synth-gated a[b-p4j9sije50] {
    color: var(--ascend-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.rblock-synth-gated a:hover[b-p4j9sije50] {
    text-decoration: underline;
}
/* /Components/Shared/RepertoireBacklogSpreadPanel.razor.rz.scp.css */
/* #9411 - the SPREAD DUE LINES card on the Opening Hub. Colors come from the theme tokens;
   this file owns layout, the window picker (native radios styled as a segmented row, the
   BookMediumPicker pattern) and the per-day list. Every control is at least 44px tall, and
   the three window options and the day rows fit at 344px. */

.spread-text[b-ag1v7hzr04] {
    margin: 0 0 0.75rem;
    color: var(--ascend-text-light);
    line-height: 1.5;
}

.spread-note[b-ag1v7hzr04] {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.45;
}

.spread-message[b-ag1v7hzr04] {
    margin-top: 0.75rem;
}

.spread-window[b-ag1v7hzr04] {
    border: 0;
    margin: 0 0 0.75rem;
    padding: 0;
    min-width: 0;
}

.spread-window-legend[b-ag1v7hzr04] {
    display: block;
    padding: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.spread-window-options[b-ag1v7hzr04] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.spread-window-option[b-ag1v7hzr04] {
    position: relative;
    flex: 1 1 0;
    min-width: 4.5rem;
    max-width: 9rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.spread-window-option:hover[b-ag1v7hzr04] {
    background: rgba(49, 221, 227, 0.06);
    border-color: rgba(49, 221, 227, 0.25);
    color: #ffffff;
}

.spread-window-option.selected[b-ag1v7hzr04] {
    background: rgba(49, 221, 227, 0.12);
    border-color: var(--ascend-accent);
    color: #ffffff;
}

/* The radio stays in the accessibility tree and keyboard order; only its dot is hidden. */
.spread-window-radio[b-ag1v7hzr04] {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.spread-window-option:focus-within[b-ag1v7hzr04] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.spread-days[b-ag1v7hzr04] {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.35rem 0.75rem;
    max-height: 22rem;
    overflow-y: auto;
}

.spread-days:focus-visible[b-ag1v7hzr04] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.spread-day[b-ag1v7hzr04] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.spread-day.today[b-ag1v7hzr04] {
    border: 1px solid rgba(49, 221, 227, 0.35);
}

.spread-day-label[b-ag1v7hzr04] {
    white-space: nowrap;
}

.spread-day-count[b-ag1v7hzr04] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #ffffff;
}

/* The buttons sit on the shared .action-row (app.css): a full-width column on a phone, a row above
   480px. Nothing here re-lays them out (ColumnButtonContainerRatchetTests). */
/* /Components/Shared/RepertoireBookGroupHeading.razor.rz.scp.css */
/* #9326 - a group section heading on the Opening Hub book list. Sits between two
   books grids, so it carries the spacing that separates them. */
.book-group-heading[b-soma8rtl5d] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.book-group-name[b-soma8rtl5d] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    overflow-wrap: anywhere;
}

.book-group-count[b-soma8rtl5d] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}
/* /Components/Shared/RepertoireBookGroupsPanel.razor.rz.scp.css */
/* #9326 - the Opening Hub book groups panel. Mobile first: every row wraps, so
   nothing forces a horizontal scroll at 344px; at 600px and up the move list
   lays out in two columns. Inputs and selects are native elements of this
   component, so they are styled directly here (no ::deep needed); the shared
   Button styles itself. */
.book-groups[b-4obfts3erq] {
    margin-bottom: 1rem;
}

.book-groups-toggle[b-4obfts3erq] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.book-groups-toggle:hover[b-4obfts3erq] {
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(49, 221, 227, 0.08);
}

.book-groups-toggle:focus-visible[b-4obfts3erq],
.book-groups-input:focus-visible[b-4obfts3erq],
.book-groups-select:focus-visible[b-4obfts3erq] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.book-groups-chevron[b-4obfts3erq] {
    font-size: 0.75rem;
}

.book-groups-panel[b-4obfts3erq] {
    margin-top: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-width: 0;
}

.book-groups-title[b-4obfts3erq] {
    margin: 0 0 0.35rem;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.book-groups-subtitle[b-4obfts3erq] {
    margin: 1.25rem 0 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.book-groups-intro[b-4obfts3erq],
.book-groups-empty[b-4obfts3erq] {
    margin: 0 0 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

.book-groups-empty[b-4obfts3erq] {
    margin: 1rem 0 0;
}

.book-groups-label[b-4obfts3erq] {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.book-groups-field[b-4obfts3erq] {
    display: flex;
}

/* The buttons sit on the shared .action-row (app.css): a full-width column
   below 480px, a row above it. Only the spacing is local. */
.book-groups-buttons[b-4obfts3erq] {
    margin-top: 0.6rem;
}

/* background-color, never the background shorthand: on the select the
   shorthand would erase the chevron the global select rule draws. */
.book-groups-input[b-4obfts3erq],
.book-groups-select[b-4obfts3erq] {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    padding: 0.45rem 0.65rem;
    min-height: 2.5rem;
    min-width: 0;
}

.book-groups-input[b-4obfts3erq] {
    flex: 1 1 auto;
    width: 100%;
}

.book-groups-input[b-4obfts3erq]::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.book-groups-select[b-4obfts3erq] {
    width: 100%;
    padding-right: 2.25rem;
    cursor: pointer;
}

.book-groups-select option[b-4obfts3erq] {
    background-color: var(--ascend-bg-dark);
    color: #ffffff;
}

.book-groups-error[b-4obfts3erq] {
    margin: 0.4rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: #fca5a5;
}

.book-groups-list[b-4obfts3erq],
.book-groups-moves[b-4obfts3erq] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.book-groups-item[b-4obfts3erq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.75rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.book-groups-item > .book-groups-field[b-4obfts3erq],
.book-groups-item > .book-groups-buttons[b-4obfts3erq],
.book-groups-item > .book-groups-error[b-4obfts3erq] {
    flex: 1 1 100%;
}

.book-groups-item > .book-groups-buttons[b-4obfts3erq] {
    margin-top: 0;
}

.book-groups-item-text[b-4obfts3erq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    min-width: 0;
}

.book-groups-name[b-4obfts3erq] {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.book-groups-count[b-4obfts3erq] {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
}

/* The Rename and Delete pair is a shared .action-row; below 480px it is a
   full-width column under the group's name. */
.book-groups-actions[b-4obfts3erq] {
    gap: 0.35rem;
}

@media (min-width: 480px) {
    /* Beside the name once there is room: the row takes only its buttons' width. */
    .book-groups-actions[b-4obfts3erq] {
        width: auto;
    }
}

.book-groups-moves[b-4obfts3erq] {
    margin-top: 0;
}

.book-groups-move[b-4obfts3erq] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.book-groups-move-label[b-4obfts3erq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

@media (min-width: 600px) {
    .book-groups-moves[b-4obfts3erq] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1rem;
    }
}

/* Bug #9390: the touch floor on a finger. The 2.5rem min-height above is this
   component's own scoped rule, so it outranks every global floor in app.css (the
   #8294 trap), and the prod E2E touch-target gate measured the toggle at 115x40
   on a coarse pointer at 390. Raised here, inside the pointer query, so a mouse
   keeps the 40px look; the shared Button already takes the floor itself. Last in
   the file so it wins over the base rules at equal specificity. */
@media (hover: none) and (pointer: coarse) {
    .book-groups-toggle[b-4obfts3erq],
    .book-groups-input[b-4obfts3erq],
    .book-groups-select[b-4obfts3erq] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/RepertoireBuildPanel.razor.rz.scp.css */
/* RepertoireBuildPanel — ChessBook-style preparation panel */

/* #7745 - this panel is a COLUMN, and how wide that column is has almost
   nothing to do with how wide the viewport is: on the repertoire editor it is
   a grid track beside a board rail, so at 768px and at 1024px it was the SAME
   184px while the viewport differed by a third. Every viewport media query in
   this file is therefore structurally blind to the case that actually
   overflowed. Naming the panel as an inline-size container lets the candidate
   table size itself against the space it really has. The viewport media
   queries are KEPT and sit AFTER the container blocks, so phone behavior -
   including #7689's stacked candidate row at <=480px - is unchanged; the
   container blocks only decide the cases no media query can see. */
.build-panel[b-708uag2ujp] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    overflow: hidden;
    container-type: inline-size;
    container-name: buildpanel;
}

/* #9203 - the hosted declaration skeleton (a child component) is separated from the explorer below
   it by the panel. Crossing into the child needs ::deep: a plain .declaration-skeleton rule here would
   carry this panel's scope attribute, which the child's markup does not have. */
.build-panel[b-708uag2ujp]  .declaration-skeleton {
    border-bottom: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(49, 221, 227, 0.04);
}

/* Loading / Empty states */
.build-loading[b-708uag2ujp],
.build-empty[b-708uag2ujp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.spin[b-708uag2ujp] {
    animation: spin-b-708uag2ujp 1s linear infinite;
}

@keyframes spin-b-708uag2ujp {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Opening name header */
.build-opening[b-708uag2ujp] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* First-time educational banner — fires once when the user first reaches a
   canonical Tabiya. Dismissed forever after the user clicks
   "Got it". The badge below carries the marker after dismissal. */
.build-tabiya-intro[b-708uag2ujp] {
    display: flex;
    gap: 0.85rem;
    margin: 0.75rem 0.75rem 0.25rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.18), rgba(49, 221, 227, 0.12));
    border: 1px solid rgba(184, 133, 54, 0.55);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(4, 32, 71, 0.22);
}

.build-tabiya-intro .intro-icon[b-708uag2ujp] {
    flex-shrink: 0;
    font-size: 1.4rem;
    color: rgba(184, 133, 54, 0.95);
    padding-top: 0.15rem;
}

.build-tabiya-intro .intro-body[b-708uag2ujp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.build-tabiya-intro .intro-title[b-708uag2ujp] {
    font-family: var(--ascend-font-primary);
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.build-tabiya-intro .intro-blurb[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.55;
    margin: 0;
}

.build-tabiya-intro .intro-actions[b-708uag2ujp] {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.build-tabiya-intro .intro-btn[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(184, 133, 54, 0.5);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.build-tabiya-intro .intro-btn.primary[b-708uag2ujp] {
    background: rgba(184, 133, 54, 0.2);
    color: #ffffff;
}

.build-tabiya-intro .intro-btn.primary:hover[b-708uag2ujp] {
    border-color: rgba(184, 133, 54, 0.95);
    background: rgba(184, 133, 54, 0.32);
}

.build-tabiya-intro .intro-btn.ghost[b-708uag2ujp] {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.18);
}

.build-tabiya-intro .intro-btn.ghost:hover[b-708uag2ujp] {
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

/* Tabiya badge — surfaces when the user is on a canonical
   anchor position. Click navigates to the deep-dive page. */
.build-tabiya-badge[b-708uag2ujp] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.5rem 0.75rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.15), rgba(49, 221, 227, 0.1));
    border: 1px solid rgba(184, 133, 54, 0.45);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.build-tabiya-badge:hover[b-708uag2ujp] {
    border-color: rgba(184, 133, 54, 0.85);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(184, 133, 54, 0.18);
}

.build-tabiya-badge .bi-bullseye[b-708uag2ujp] {
    color: rgba(184, 133, 54, 0.95);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.build-tabiya-badge .tabiya-label[b-708uag2ujp] {
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(184, 133, 54, 0.95);
}

.build-tabiya-badge .tabiya-name[b-708uag2ujp] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.build-tabiya-badge .tabiya-go[b-708uag2ujp] {
    color: rgba(49, 221, 227, 0.7);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.build-tabiya-badge:hover .tabiya-go[b-708uag2ujp] {
    color: var(--ascend-accent);
}

/* Pawn structure badge — sibling of the tabiya badge. Surfaces when the
   position's pawn skeleton matches a known structure. Cyan/teal lane to
   distinguish from the gold tabiya badge so both can stack visibly when
   a position is both a tabiya AND a known structure. */
.build-structure-badge[b-708uag2ujp] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: calc(100% - 1.5rem);
    margin: 0.5rem 0.75rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(135deg, rgba(49, 221, 227, 0.14), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(49, 221, 227, 0.45);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.build-structure-badge:hover[b-708uag2ujp] {
    border-color: rgba(49, 221, 227, 0.85);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(49, 221, 227, 0.18);
}

.build-structure-badge .bi-grid-3x3[b-708uag2ujp] {
    color: rgba(49, 221, 227, 0.95);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.build-structure-badge .structure-label[b-708uag2ujp] {
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(49, 221, 227, 0.95);
}

.build-structure-badge .structure-name[b-708uag2ujp] {
    flex: 1;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.build-structure-badge .structure-go[b-708uag2ujp] {
    color: rgba(184, 133, 54, 0.7);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.build-structure-badge:hover .structure-go[b-708uag2ujp] {
    color: rgba(184, 133, 54, 1);
}

/* Pawn structure plans modal — opened from .build-structure-badge.
   Two-column grid (white / black) with description hero on top. */
.structure-modal-body[b-708uag2ujp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.structure-modal-meta[b-708uag2ujp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.structure-modal-family[b-708uag2ujp] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(184, 133, 54, 0.95);
}

.structure-modal-confidence[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.structure-modal-description[b-708uag2ujp] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

.structure-modal-grid[b-708uag2ujp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.structure-plan-card[b-708uag2ujp] {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(49, 221, 227, 0.18);
}

.structure-plan-card h4[b-708uag2ujp] {
    margin: 0 0 0.55rem 0;
    font-family: var(--ascend-font-primary);
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    letter-spacing: 0.02em;
}

.structure-plan-white h4[b-708uag2ujp]  i {
    color: rgba(255, 255, 255, 0.92);
}

.structure-plan-black h4[b-708uag2ujp]  i {
    color: var(--ascend-text-primary);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 3px;
    padding: 1px;
}

.plan-block[b-708uag2ujp] {
    margin-top: 0.55rem;
}

.plan-block:first-of-type[b-708uag2ujp] {
    margin-top: 0;
}

.plan-block-label[b-708uag2ujp] {
    display: block;
    font-family: var(--ascend-font-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(49, 221, 227, 0.85);
    margin-bottom: 0.25rem;
}

.plan-block p[b-708uag2ujp] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.plan-empty[b-708uag2ujp] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.structure-modal-link[b-708uag2ujp] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.structure-modal-link:hover[b-708uag2ujp] {
    border-color: rgba(49, 221, 227, 0.55);
    background: rgba(49, 221, 227, 0.1);
}

.structure-modal-close[b-708uag2ujp] {
    padding: 0.55rem 1.4rem;
    border-radius: 50px;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    border: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.structure-modal-close:hover[b-708uag2ujp] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(49, 221, 227, 0.3);
}

@media (max-width: 640px) {
    .structure-modal-grid[b-708uag2ujp] {
        grid-template-columns: 1fr;
    }
}

/* Progress hero */
.build-progress-hero[b-708uag2ujp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.progress-ring[b-708uag2ujp] {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.progress-percent[b-708uag2ujp] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    color: #10b981;
}

.progress-detail[b-708uag2ujp] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.progress-title[b-708uag2ujp] {
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.progress-subtitle[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Back navigation + breadcrumb */
.build-nav-header[b-708uag2ujp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
}

.build-back-btn[b-708uag2ujp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.build-back-btn:hover[b-708uag2ujp] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

/* Move path breadcrumb */
.build-path[b-708uag2ujp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.path-move[b-708uag2ujp] {
    color: rgba(255, 255, 255, 0.6);
}

.path-move:last-child[b-708uag2ujp] {
    color: #31DDE3;
    font-weight: 600;
}

/* Section headings */
.build-section[b-708uag2ujp] {
    padding: 0.75rem 0 0 0;
}

.build-heading[b-708uag2ujp] {
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    color: #ffffff;
    margin: 0;
    padding: 0 1rem 0.75rem;
    letter-spacing: 0.3px;
}

.build-hint[b-708uag2ujp] {
    padding: 1rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    text-align: center;
}

/* Engine-fallback header — appears when the explorer has no games for
   this position and the panel falls back to the engine's top picks.
   Uses a softer cyan tint than the build-heading so it reads as
   "different source" without competing for emphasis. */
.engine-fallback-note[b-708uag2ujp] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem 0.4rem;
    color: rgba(49, 221, 227, 0.85);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-style: italic;
}

.engine-fallback-note[b-708uag2ujp]  i {
    font-size: 0.85rem;
}

/* Slight left border on engine-fallback rows so they're visually
   distinguishable from real explorer rows once mixed sessions land. */
.candidate-row.engine-fallback[b-708uag2ujp] {
    border-left: 2px solid rgba(49, 221, 227, 0.35);
}

/* ===============================
   Line complete — big celebratory card
   =============================== */

.line-complete-card[b-708uag2ujp] {
    margin: 0.75rem 1rem 1rem;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(49, 221, 227, 0.08));
    border: 2px solid rgba(16, 185, 129, 0.45);
    border-radius: 16px;
    text-align: center;
    animation: line-complete-in-b-708uag2ujp 0.35s ease-out;
}

@keyframes line-complete-in-b-708uag2ujp {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.line-complete-icon[b-708uag2ujp] {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(184, 133, 54, 0.2));
    border: 2px solid rgba(16, 185, 129, 0.5);
    border-radius: 50%;
}

/* Bug #9053 follow-up 3: the neutral completion check takes the token, not the raw hex
   (#10b981 is the same value as --ascend-success). */
.line-complete-icon[b-708uag2ujp]  i {
    font-size: 1.6rem;
    color: var(--ascend-success);
}

.line-complete-title[b-708uag2ujp] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
}

.line-complete-body[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 auto 1rem;
    max-width: 340px;
}

.line-complete-actions[b-708uag2ujp] {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Termination as inline badge — sits above the move list at fully-covered
   non-leaf positions where the user can still drill into prepped moves.
   Replaces the larger card form, which was hiding the candidate list (bad)
   when only the celebration was warranted (good). */
.line-complete-badge[b-708uag2ujp] {
    margin: 0 1rem 0.5rem;
    padding: 0.55rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
}

.line-complete-badge[b-708uag2ujp]  i {
    color: #10b981;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ===============================
   "This move is in your repertoire"
   =============================== */

.rep-move-card[b-708uag2ujp] {
    margin: 0 1rem 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 10px;
}

/* Highlights the rep-move card that matches the explorer-hovered move,
   so when multiple alternates render in a single position the user can
   tell which one corresponds to the explorer row they're considering. */
.rep-move-card-hovered[b-708uag2ujp] {
    border-color: rgba(49, 221, 227, 0.55);
    background: rgba(49, 221, 227, 0.07);
}

.rep-move-san[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.rep-move-stats[b-708uag2ujp] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
}

/* #6347 — this cluster is a 3-up explorer readout (one cell holds a WdlBar, not
   a value), sized well below the shared StatItem scale, so it no longer squats
   on the reserved .stat-label / .stat-value vocabulary owned by
   Components/Shared/StatItem. font-weight / margin-bottom / line-height below
   were previously inherited from the global .stat-* block in app.css; they are
   declared explicitly so the rename is pixel-identical. */
.rep-stat-col[b-708uag2ujp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.rep-stat-label[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.rep-stat-value[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
}

.btn-build-action[b-708uag2ujp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-build-action:hover[b-708uag2ujp] {
    background: rgba(49, 221, 227, 0.05);
    color: #31DDE3;
}

/* ===============================
   "Choose your next move" table
   =============================== */

.candidate-header[b-708uag2ujp],
.opponent-header[b-708uag2ujp] {
    display: grid;
    padding: 0 1rem 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.candidate-header[b-708uag2ujp] {
    grid-template-columns: 1fr 3.75rem 3.25rem 5.625rem;
    gap: 0.25rem;
    /* #9332 - where "TOP PLAYERS" still wraps (a panel under 22rem), the one-line
       labels sit on its bottom line instead of floating at the top. */
    align-items: end;
}

.ch-peers[b-708uag2ujp],
.ch-eval[b-708uag2ujp],
.ch-results[b-708uag2ujp] {
    text-align: right;
}

/* #9332 pre-canary walk - "TOP PLAYERS" (the masters source's candidate column,
   was "PEERS") is wider than its fixed 3.75rem track: at 1440px it broke into two
   lines and grew the header from 27px to 45px. The header and each row are
   separate grids, so the track must stay fixed for them to line up. Where the
   panel has room, the label stays on one line, end-aligned, and runs left into
   the 1fr Move track (measured clear of MOVE at 22rem and up; a 16rem panel
   collided, so narrower panels keep the wrap). */
@container buildpanel (min-width: 22rem) {
    .candidate-header .ch-peers[b-708uag2ujp] {
        white-space: nowrap;
        justify-self: end;
    }
}

.candidate-row[b-708uag2ujp] {
    display: grid;
    grid-template-columns: 1fr 3.75rem 3.25rem 5.625rem;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background 0.15s ease;
}

.candidate-row:hover[b-708uag2ujp] {
    background: rgba(49, 221, 227, 0.06);
}

.candidate-row.in-rep[b-708uag2ujp] {
    background: rgba(49, 221, 227, 0.04);
}

/* Picker mode: existing repertoire moves dim so the alternates pop. The
   row stays clickable (a user might pick the same move to confirm or
   re-add a deleted line) but visually recedes. */
.build-section.picking-alternate .candidate-row.in-rep[b-708uag2ujp] {
    opacity: 0.45;
}

.build-section.picking-alternate .candidate-row.in-rep:hover[b-708uag2ujp] {
    opacity: 0.7;
}

.alternate-picker-header[b-708uag2ujp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.alternate-cancel-btn[b-708uag2ujp] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.65);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.alternate-cancel-btn:hover[b-708uag2ujp] {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.alternate-picker-hint[b-708uag2ujp] {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

/* Secondary badges (sleeper/book/study) — small icons, always visible */
.secondary-badges[b-708uag2ujp] {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.cr-move[b-708uag2ujp] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
}

.cr-peers[b-708uag2ujp] {
    text-align: right;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.cr-eval[b-708uag2ujp] {
    text-align: right;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.cr-results[b-708uag2ujp] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
}

.wdl-number[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    min-width: 22px;
    text-align: right;
}

/* Sleeper move badge */
.sleeper-badge[b-708uag2ujp] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: #B88536;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Dubious move marker */
.dubious-marker[b-708uag2ujp] {
    color: #ef4444;
    font-weight: 700;
    font-size: 0.85rem;
}

/* In-repertoire checkmark */
.in-rep-icon[b-708uag2ujp] {
    color: #10b981;
}

/* Book indicator — move exists in another repertoire book */
.book-indicator[b-708uag2ujp] {
    display: inline-flex;
    align-items: center;
    color: #B88536;
    cursor: help;
    margin-left: 0.15rem;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.book-indicator:hover[b-708uag2ujp] {
    opacity: 1;
}

/* Study move hint — move appears in user's study chapters */
.study-indicator[b-708uag2ujp] {
    display: inline-flex;
    align-items: center;
    color: var(--ascend-accent);
    cursor: help;
    margin-left: 0.15rem;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.study-indicator:hover[b-708uag2ujp] {
    opacity: 1;
}

/* Faced move badge — how many times user has faced this opponent move */
.faced-badge[b-708uag2ujp] {
    display: inline-flex;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    padding: 0.1rem 0.4rem;
    margin-left: 0.3rem;
    white-space: nowrap;
    cursor: help;
}

/* ===============================
   "Choose a move to prepare for"
   =============================== */

.opponent-header[b-708uag2ujp] {
    grid-template-columns: 1fr 80px 50px 90px 60px 28px;
    gap: 0.4rem;
}

.oh-expected[b-708uag2ujp],
.oh-eval[b-708uag2ujp],
.oh-results[b-708uag2ujp],
.oh-coverage[b-708uag2ujp] {
    text-align: right;
}

.opponent-row[b-708uag2ujp] {
    display: grid;
    /* Final column (28px) reserves space for the hide/unhide button so it
       lines up with the edge of every row instead of landing in whatever
       leftover space the grid gives it. */
    grid-template-columns: 1fr 80px 50px 90px 60px 28px;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background 0.15s ease;
}

.or-eval[b-708uag2ujp] {
    text-align: right;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
}

.or-results[b-708uag2ujp] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.opponent-row:hover[b-708uag2ujp] {
    background: rgba(49, 221, 227, 0.06);
}

.opponent-row.covered[b-708uag2ujp] {
    background: rgba(16, 185, 129, 0.04);
}

/* Off-path: move is in your tree but below the current threshold. Greyed
   so you see your own off-beat pick in context, but visually clear that
   it doesn't count against coverage (and doesn't carry the "expected"
   weight of the bolded above-threshold rows). */
.opponent-row.off-path[b-708uag2ujp] {
    opacity: 0.55;
}

.opponent-row.off-path:hover[b-708uag2ujp] {
    opacity: 0.85;
}

.opponent-row.off-path .or-san[b-708uag2ujp] {
    font-style: italic;
}

/* Low-volume row — surfaced by GetFilteredMoves' fallback when nothing
   clears the 75-game floor at this position (deep / rare lines). Visually
   subdued like off-path but slightly more visible so users can still
   click them to extend; the italic SAN telegraphs "optional." */
.opponent-row.low-volume[b-708uag2ujp] {
    opacity: 0.65;
}

.opponent-row.low-volume:hover[b-708uag2ujp] {
    opacity: 0.9;
}

.opponent-row.low-volume .or-san[b-708uag2ujp] {
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
}

.or-move[b-708uag2ujp] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    /* Grid items default to min-width: auto, which lets contents push the
       column wider than 1fr and break the ellipsis truncation on .or-desc.
       min-width: 0 lets the column actually constrain. */
    min-width: 0;
}

.or-san[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
}

.or-desc[b-708uag2ujp],
.cr-desc[b-708uag2ujp] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    /* #8368 - was 40% white: 3.8:1 on the panel and 2.0:1 on a dimmed row
       (.off-path, .low-volume), measured with axe-core's own contrast function
       against the painted surface (axe itself abstains here: the panel is a
       gradient). At 90% it is 13:1, and 5:1 on the dimmest row. */
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
    font-style: italic;
    /* One-line truncation — descriptions were wrapping to 2-3 lines and
       inflating row height to ~90px. Full text still available via title tooltip. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* #8368 (owner ruling 2026-10-11) - the credit under a Wikibooks description.
   Upright, so it reads as a label and not as more of the quoted text. The
   links take the label's color and are told apart by their underline: the
   accent cyan drops under 4.5:1 on a dimmed row, near-white does not. */
.or-credit[b-708uag2ujp] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.9);
}

.or-credit-link[b-708uag2ujp] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    /* #8368 follow-up - "Excerpt from" is longer than "Source:", and in a narrow
       move column the license link broke at its hyphen ("CC BY-" / "SA"). A link
       wraps as a whole. */
    white-space: nowrap;
}

.or-credit-link:hover[b-708uag2ujp],
.or-credit-link:focus-visible[b-708uag2ujp] {
    color: #31DDE3;
}

.or-credit-link:focus-visible[b-708uag2ujp] {
    outline: 2px solid #31DDE3;
    outline-offset: 2px;
    border-radius: 2px;
}

/* A finger needs 44px. This panel has no inline text link to copy a
   convention from (its other links are pill buttons), so each credit link
   gets a real 44px box wherever the pointer is coarse or the screen is
   phone-sized; a mouse row is unchanged. The line gives a little of that
   height back by overlapping the plain text above and below it, never
   another control. */
@media (max-width: 768px), (pointer: coarse) {
    .or-credit[b-708uag2ujp] {
        margin-block: -0.375rem;
    }

    .or-credit-link[b-708uag2ujp] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
    }
}

/* On a narrow panel the move column is under 90px: a description there shows
   two words, and its credit wrapped to three 44px lines. A row that carries a
   description gives the move, its description and the credit the full width,
   and puts the figures on the line below. Rows without one are unchanged.
   Same two conditions as the four-column rules below (viewport and container). */
@media (max-width: 768px) {
    .opponent-row.described[b-708uag2ujp] {
        grid-template-columns: 1fr auto auto auto auto;
    }

    .opponent-row.described .or-move[b-708uag2ujp] {
        grid-column: 1 / -1;
    }

    .opponent-row.described .or-expected[b-708uag2ujp] {
        text-align: left;
    }
}

@container buildpanel (max-width: 20rem) {
    .opponent-row.described[b-708uag2ujp] {
        grid-template-columns: 1fr auto auto auto auto;
    }

    .opponent-row.described .or-move[b-708uag2ujp] {
        grid-column: 1 / -1;
    }

    .opponent-row.described .or-expected[b-708uag2ujp] {
        text-align: left;
    }
}

.or-expected[b-708uag2ujp] {
    text-align: right;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.or-coverage[b-708uag2ujp] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

[b-708uag2ujp] .coverage-started {
    color: #31DDE3;
}

[b-708uag2ujp] .coverage-complete {
    color: #10b981;
}

.rep-actions[b-708uag2ujp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.rep-move-note[b-708uag2ujp] {
    margin-top: 0.35rem;
    padding: 0.5rem 0.65rem;
    background: rgba(49, 221, 227, 0.05);
    border-left: 2px solid rgba(49, 221, 227, 0.35);
    border-radius: 6px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.rep-move-note[b-708uag2ujp]  i {
    color: rgba(49, 221, 227, 0.7);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* #7079 - the note on the move the opponent just played, stacked above the
   user's own content inside the SAME card. The rule below is the only thing
   separating the two sections; it must not read as a second card. */
.opp-note-section[b-708uag2ujp] {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ascend-secondary) 20%, transparent);
}

.opp-note-heading[b-708uag2ujp] {
    padding-bottom: 0.4rem;
    font-size: 0.9rem;
    color: var(--ascend-secondary-light);
}

.opp-note-move[b-708uag2ujp] {
    margin: 0 1rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.95rem;
    color: var(--ascend-text-light);
    letter-spacing: 0.3px;
}

/* Owner, prod walk 2026-08-24: "Delete btn is wider than the rest and spacing
   isn't correct."

   Every other row in this stack is inset 1rem from the panel edge - the move
   card does it with `margin: 0 1rem`, the nag picker with `padding: ... 1rem`.
   This button did it with neither: `width: 100%` and a top margin only, so it
   ran a full 1rem PROUD on each side of the cards it belongs to, and with no
   bottom margin the next move card butted straight up against it.

   `display: flex` rather than inline-flex so it is block-level and fills the
   line minus its own margins - `width: 100%` plus a horizontal margin would
   overflow by exactly the 2rem it is trying to give back. The 0.75rem bottom
   matches .rep-move-card's, so consecutive moves breathe the same amount. */
.rep-move-delete-link[b-708uag2ujp] {
    margin: 0.5rem 1rem 0.75rem;
    /* A <button> SHRINK-WRAPS even as a block-level flex container - its
       `width: auto` computes to fit-content, unlike a div. That is why the
       original rule carried `width: 100%`, and dropping it is what collapsed
       this to 212px against a 668px card when I first tried the margin alone.
       MEASURED, both times: parent content box 842-1542 (700 wide), card 858-1526
       via its own 1rem margins. 100% - 2rem lands the button on exactly those
       edges. `align-self: stretch` does nothing here - the parent is not a flex
       container, which the 212px measurement is what proved. */
    width: calc(100% - 2rem);
    background: none;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: all 0.15s ease;
}

.rep-move-delete-link:hover[b-708uag2ujp] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.55);
    color: var(--ascend-text-light);
}

[b-708uag2ujp] .coverage-unchecked {
    color: rgba(255, 255, 255, 0.15);
}

/* Coverage summary bar */
.coverage-summary[b-708uag2ujp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.coverage-label[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

/* Coverage bar */
.coverage-bar[b-708uag2ujp] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.coverage-fill[b-708uag2ujp] {
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.coverage-fill.covered[b-708uag2ujp] {
    background: #10b981;
}

/* NAG display inline */
.build-move-nag[b-708uag2ujp] {
    font-weight: 700;
    font-size: 0.9rem;
    margin-left: 0.3rem;
}

.build-move-nag.nag-good[b-708uag2ujp],
[b-708uag2ujp] .nag-good { color: #10b981; }
.build-move-nag.nag-brilliant[b-708uag2ujp],
[b-708uag2ujp] .nag-brilliant { color: #06d6a0; }
.build-move-nag.nag-interesting[b-708uag2ujp],
[b-708uag2ujp] .nag-interesting { color: #22d3ee; }
.build-move-nag.nag-dubious[b-708uag2ujp],
[b-708uag2ujp] .nag-dubious { color: #fbbf24; }
.build-move-nag.nag-mistake[b-708uag2ujp],
[b-708uag2ujp] .nag-mistake { color: #f97316; }
.build-move-nag.nag-blunder[b-708uag2ujp],
[b-708uag2ujp] .nag-blunder { color: #ef4444; }
.build-move-nag.nag-book[b-708uag2ujp],
[b-708uag2ujp] .nag-book { color: #a78bfa; }
/* #7039 - novelty is the complement of book on the same axis, so it reads as
   its own colour rather than a shade of the quality glyphs. Same brand gold the
   game annotations give it, so the mark looks the same on both surfaces. */
.build-move-nag.nag-novelty[b-708uag2ujp],
[b-708uag2ujp] .nag-novelty { color: var(--ascend-secondary-light); }

/* NAG picker row */
.build-nag-picker[b-708uag2ujp] {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 1rem 0.5rem;
}

.nag-btn[b-708uag2ujp] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.15rem;
    min-height: 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.nag-btn:hover[b-708uag2ujp] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.nag-btn.brilliant.active[b-708uag2ujp] { background: rgba(6, 214, 160, 0.15); border-color: rgba(6, 214, 160, 0.5); color: #06d6a0; }
.nag-btn.good.active[b-708uag2ujp] { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.5); color: #10b981; }
.nag-btn.interesting.active[b-708uag2ujp] { background: rgba(34, 211, 238, 0.15); border-color: rgba(34, 211, 238, 0.5); color: #22d3ee; }
.nag-btn.dubious.active[b-708uag2ujp] { background: rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.5); color: #fbbf24; }
.nag-btn.mistake.active[b-708uag2ujp] { background: rgba(249, 115, 22, 0.15); border-color: rgba(249, 115, 22, 0.5); color: #f97316; }
.nag-btn.blunder.active[b-708uag2ujp] { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.5); color: var(--ascend-text-light); }
.nag-btn.book.active[b-708uag2ujp] { background: rgba(167, 139, 250, 0.15); border-color: rgba(167, 139, 250, 0.5); color: #a78bfa; }
.nag-btn.novelty.active[b-708uag2ujp] { background: rgba(184, 133, 54, 0.18); border-color: var(--ascend-secondary); color: var(--ascend-secondary-light); }
.nag-btn.clear.active[b-708uag2ujp] { background: rgba(49, 221, 227, 0.1); border-color: rgba(49, 221, 227, 0.3); color: #31DDE3; }

/* Per-move progress bar (opponent rows) */
.or-progress-bar[b-708uag2ujp] {
    width: 50px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.or-progress-fill[b-708uag2ujp] {
    height: 100%;
    background: var(--ascend-accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.or-progress-fill.complete[b-708uag2ujp] {
    background: #10b981;
}

/* Common mistake marker */
.common-mistake-marker[b-708uag2ujp] {
    display: inline-flex;
    align-items: center;
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--ascend-text-light);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 0.05rem 0.35rem;
    margin-left: 0.3rem;
    white-space: nowrap;
}

/* Total games bar at bottom */
.build-total[b-708uag2ujp] {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.total-label[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

/* ==========================================================================
   #7745 - PANEL-WIDTH responsive tiers. These come FIRST on purpose: the
   viewport media queries below are unchanged and, being later in the sheet,
   still win wherever they apply. These blocks only reach the widths no media
   query describes - a narrow pane on a wide screen.

   The two thresholds are arithmetic, not taste. Panel content box = panel
   width - 4px (the 2px border each side) - 32px (.candidate-row's 1rem side
   padding).
     * The DESKTOP grid is 1fr 3.75rem 3.25rem 5.625rem with 0.25rem gaps:
       60 + 52 + 90 + 12 = 214px of fixed track, plus the move column's
       min-content (about 40px at the base font) = ~254px of content, i.e. a
       ~290px panel. 20rem (320px) leaves real headroom for a longer SAN.
     * The COMPACT grid is 48 + 52 + 68 + 12 = 180px fixed + ~37px of move
       (measured on dev at 768) = ~217px of content, i.e. a ~253px panel.
       Below 15rem (240px) even that cannot fit, so the row stacks exactly the
       way #7689 stacks it on a phone.
   ========================================================================== */
@container buildpanel (max-width: 20rem) {
    .candidate-header[b-708uag2ujp],
    .candidate-row[b-708uag2ujp] {
        grid-template-columns: 1fr 3rem 3.25rem 4.25rem;
        font-size: 0.8rem;
    }

    .opponent-header[b-708uag2ujp],
    .opponent-row[b-708uag2ujp] {
        grid-template-columns: 1fr 80px 70px 28px;
        font-size: 0.8rem;
    }

    .candidate-row[b-708uag2ujp],
    .opponent-row[b-708uag2ujp] {
        min-height: 44px;
    }
}

@container buildpanel (max-width: 15rem) {
    /* Same two-line stack as the <=480px viewport rule below, and for the same
       reason: four columns cannot honor their own contents, and shrinking the
       tracks only moves the collision onto the eval chip. Nothing is hidden -
       a narrow pane still shows every column a wide one does. */
    .candidate-header[b-708uag2ujp],
    .candidate-row[b-708uag2ujp] {
        grid-template-columns: 1fr auto;
        column-gap: 0.5rem;
        row-gap: 0.15rem;
        font-size: 0.75rem;
    }

    .ch-move[b-708uag2ujp],
    .cr-move[b-708uag2ujp] {
        grid-column: 1;
        grid-row: 1;
    }

    .ch-peers[b-708uag2ujp],
    .cr-peers[b-708uag2ujp] {
        grid-column: 2;
        grid-row: 1;
    }

    .ch-eval[b-708uag2ujp],
    .cr-eval[b-708uag2ujp] {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
        justify-content: flex-start;
    }

    .ch-results[b-708uag2ujp],
    .cr-results[b-708uag2ujp] {
        grid-column: 2;
        grid-row: 2;
    }

    .opponent-header[b-708uag2ujp],
    .opponent-row[b-708uag2ujp] {
        grid-template-columns: 1fr 70px 60px 28px;
        font-size: 0.75rem;
        gap: 0.25rem;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .repertoire-build-card[b-708uag2ujp] {
        padding: 0.75rem;
        border-radius: 12px;
    }

    /* #7689 - LEFT ALONE deliberately. The results track is 4.25rem = 68px and
       its content (WdlBar min-width 40px + 0.35rem gap + win-rate number min
       22px) is 67.6px, which reads like a tie worth widening. Measured at 768px
       it is not one: the row clears by 4.4px and no eval chip is touched.
       Widening it to 5rem was tried and REVERTED - the editor's own container
       is already ~11px wider than a 768px viewport there (.ch-results measured
       at 779 on dev, before any change on this branch), so the extra 12px
       pushed .cr-results and .wdl-number out of the viewport too. That is a
       separate container bug; do not pay for it here.

       #7745 UPDATE - that container bug is now fixed (the pane track has a
       17rem floor in RepertoireEditor.razor.css and this panel sizes its table
       by container query above), so the 768px pane is 272px rather than 184px.
       This rule still stays as it is: the 4.25rem results track measures clear
       by 4.4px with the eval chip untouched, and there is no bug left here to
       widen it for. */
    .candidate-header[b-708uag2ujp],
    .candidate-row[b-708uag2ujp] {
        grid-template-columns: 1fr 3rem 3.25rem 4.25rem;
        font-size: 0.8rem;
    }

    .opponent-header[b-708uag2ujp],
    .opponent-row[b-708uag2ujp] {
        grid-template-columns: 1fr 80px 70px 28px;
        font-size: 0.8rem;
    }

    .candidate-row[b-708uag2ujp],
    .opponent-row[b-708uag2ujp] {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    /* #7689 - at phone width the four-column row cannot honor its own contents.
       The last two tracks were 3.25rem (52px) and 3.5rem (56px), but .cr-results
       holds a WdlBar with a 40px min-width, a 0.35rem gap and a .wdl-number with
       a 22px min-width - 68px that will not fit in 56px. .cr-results is a flex
       box justified to flex-end, so the excess overflowed towards the START, i.e.
       LEFT, straight over .cr-eval: the reported "eval chip on top of the WDL
       bar". Low game counts made it worst because "100" is the widest win-rate
       string there is.

       Shrinking the tracks further only moves the collision. So the two
       secondary columns stop sharing a line they do not fit on and take a row of
       their own: move + peers on the first line, eval + results on the second,
       both tracks auto-sized so the content decides the width instead of a
       number in this file. Nothing is hidden - the phone still shows every
       column the desktop does. */
    .candidate-header[b-708uag2ujp],
    .candidate-row[b-708uag2ujp] {
        grid-template-columns: 1fr auto;
        column-gap: 0.5rem;
        row-gap: 0.15rem;
        font-size: 0.75rem;
    }

    .ch-move[b-708uag2ujp],
    .cr-move[b-708uag2ujp] {
        grid-column: 1;
        grid-row: 1;
    }

    .ch-peers[b-708uag2ujp],
    .cr-peers[b-708uag2ujp] {
        grid-column: 2;
        grid-row: 1;
    }

    /* Left-aligned on its own line, under the move it belongs to - the
       right-alignment of the desktop column exists to line the numbers up with
       each other, and on a stacked row there is no column to line up with. */
    .ch-eval[b-708uag2ujp],
    .cr-eval[b-708uag2ujp] {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
        justify-content: flex-start;
    }

    .ch-results[b-708uag2ujp],
    .cr-results[b-708uag2ujp] {
        grid-column: 2;
        grid-row: 2;
    }

    .opponent-header[b-708uag2ujp],
    .opponent-row[b-708uag2ujp] {
        grid-template-columns: 1fr 70px 60px 28px;
        font-size: 0.75rem;
        gap: 0.25rem;
    }
}

.or-hide-btn[b-708uag2ujp] {
    background: none;
    border: none;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    padding: 0.2rem;
    font-size: 0.8rem;
    transition: color 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* "Show / Hide N hidden moves" toggle at the bottom of the opponent list.
   Only renders when at least one move at this position is hidden. */
.hidden-toggle[b-708uag2ujp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 1rem 0;
    padding: 0.35rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hidden-toggle:hover[b-708uag2ujp] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

.or-hide-btn:hover[b-708uag2ujp] {
    color: var(--ascend-accent);
}

.or-hide-btn.is-hidden[b-708uag2ujp] {
    color: #B88536;
}

.or-hidden-badge[b-708uag2ujp] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
}

/* ===============================
   #6948 - inline alternate moves
   The alternates at this position sit under the moves already prepped
   here, with no click to reveal them. They reuse .candidate-row verbatim
   (one row definition, per Job Story #6704), so nothing below restyles a
   row - only the frame around the list.
   =============================== */
.inline-alternates[b-708uag2ujp] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ia-heading-row[b-708uag2ujp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0 1rem;
    margin-bottom: 0.4rem;
}

.ia-heading[b-708uag2ujp] {
    margin: 0;
}

/* The corpus, stated. "Played by masters" and "the engine likes it" are
   different claims, so the list says which one it is rather than leaving
   the user to infer it from a column header. */
.ia-source[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ascend-text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

.ia-expand-btn[b-708uag2ujp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 36px;
    margin-top: 0.35rem;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--ascend-text-muted);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ia-expand-btn:hover[b-708uag2ujp],
.ia-expand-btn:focus-visible[b-708uag2ujp] {
    background: rgba(49, 221, 227, 0.06);
    border-color: var(--ascend-accent);
    color: var(--ascend-text-light);
}

/* SortOrder 0 IS the main-line designation (#5956). With the prepped moves
   now rendered in sibling order, the first one says so instead of leaving
   the user to work out which of three cards is the spine. */
.main-line-badge[b-708uag2ujp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    margin-left: 0.4rem;
    vertical-align: middle;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .ia-heading-row[b-708uag2ujp] {
        padding: 0 0.5rem;
    }

    .ia-expand-btn[b-708uag2ujp] {
        min-height: 44px;
    }
}
/* /Components/Shared/RepertoireReviewBudgetCard.razor.rz.scp.css */
/* #9410 - the REPERTOIRE REVIEW card on /profile. Colors come from the theme tokens and
   the global .form-input / .form-label rules; this file owns layout and the muted note.
   Each field stacks label, input and hint, so the touch stepper (about 10rem) fits at 344px. */

.repertoire-budget-option[b-88gad12tun] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--touch-target, 44px);
    cursor: pointer;
    color: var(--ascend-text-light);
}

.repertoire-budget-option input[type="checkbox"][b-88gad12tun] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--ascend-accent);
    flex-shrink: 0;
}

.repertoire-budget-fields[b-88gad12tun] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md, 1rem) 1.5rem;
    margin: var(--space-md, 1rem) 0;
}

.repertoire-budget-field[b-88gad12tun] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 14rem;
}

.repertoire-budget-number[b-88gad12tun] {
    display: block;
    width: 11rem;
    max-width: 100%;
}

/* The page's .form-hint is scoped to Profile and does not reach this component. */
.repertoire-budget-note[b-88gad12tun] {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.4;
}

.repertoire-budget-actions[b-88gad12tun] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
/* /Components/Shared/RepertoireSendPanel.razor.rz.scp.css */
/* #7753 - the panel's own result message.
   These rules used to exist ONLY in StudyBoard.razor.css. Scoped CSS does not
   cross a component boundary without ::deep, so the message rendered in plain
   white wherever this panel is used and a FAILED import looked exactly like a
   successful one. The panel now carries its own styling, so the colour follows
   the component rather than whichever page happens to host it. */
.import-message[b-8fry7wvfld] {
    padding: 0.5rem 1rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.import-message.import-ok[b-8fry7wvfld] {
    color: #10b981;
}

.import-message.import-failed[b-8fry7wvfld] {
    color: #ef4444;
}
/* /Components/Shared/RepertoireSettingsFields.razor.rz.scp.css */
/* Scoped styles for the shared repertoire settings fields. Ported from the
   RepertoireEditor settings panel when these controls were extracted so the create
   form and the editor render identically. Uses the brand tokens (the originals
   carried raw hex — legacy drift tracked in Feature #6303). */

.setting-group[b-j8a4omngc6] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.setting-group label[b-j8a4omngc6] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.setting-select[b-j8a4omngc6] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.setting-select:focus[b-j8a4omngc6] {
    outline: none;
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 2px rgba(49, 221, 227, 0.1);
}

.setting-select option[b-j8a4omngc6] {
    background: var(--ascend-bg-dark);
    color: #ffffff;
}

.setting-radios[b-j8a4omngc6],
.setting-checks[b-j8a4omngc6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.radio-label[b-j8a4omngc6],
.check-label[b-j8a4omngc6] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.radio-label input[b-j8a4omngc6],
.check-label input[b-j8a4omngc6] {
    accent-color: var(--ascend-accent);
}

.setting-rating-range[b-j8a4omngc6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rating-dash[b-j8a4omngc6] {
    color: rgba(255, 255, 255, 0.3);
}

/* NumberInput renders its own <input>; reach it with ::deep. */
[b-j8a4omngc6] .setting-input {
    width: 5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
}

[b-j8a4omngc6] .setting-input:focus {
    outline: none;
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 2px rgba(49, 221, 227, 0.1);
}

.setting-hint[b-j8a4omngc6] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

.coverage-goal-grid[b-j8a4omngc6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 0.5rem;
    /* #7801 - the rows reflow on the width of THIS grid, not the viewport: the
       same component renders in the OpeningHub create form and in the editor's
       settings modal, and at 344px those give it 260px and 227px respectively. */
    container-type: inline-size;
    container-name: coveragegoal;
}

.coverage-level-row[b-j8a4omngc6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 5.625rem;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.8rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--ascend-font-secondary);
    font-size: 0.86rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.coverage-level-row:hover[b-j8a4omngc6] {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

.coverage-level-row.active[b-j8a4omngc6] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.4);
    color: #ffffff;
}

.cl-name[b-j8a4omngc6] {
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.coverage-level-row.active .cl-name[b-j8a4omngc6] {
    color: var(--ascend-accent);
}

.cl-games[b-j8a4omngc6] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

.coverage-level-row.active .cl-games[b-j8a4omngc6] {
    color: rgba(255, 255, 255, 0.75);
}

.cl-bar[b-j8a4omngc6] {
    display: block;
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.cl-bar-fill[b-j8a4omngc6] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
    border-radius: 3px;
    transition: width 0.2s ease;
}

/* ==========================================================================
   #7801 - narrow coverage rows. The three-track grid gives the name
   minmax(0, 1fr), so once the games label and the 5.625rem bar have taken
   their share the name column can shrink below its own longest word. The
   name then wraps and paints straight through the vertically centered
   games label ("Studiedn 150 games"); measured at 344px coarse, every one
   of the six names overflowed its cell (up to 87px in the editor modal).
   The boxes never intersect, so a rect check reads clean - only the text
   collides.

   Nothing is clipped here on purpose (no overflow: hidden / ellipsis - that
   is the silent truncation #7757 removed). Instead the row becomes a
   wrapping flex line: the name keeps at least its longest word, the games
   label drops to its own line when both do not fit, and the effort bar
   takes a full-width line beneath. Every row shows everything a wide row
   shows. 26rem is where the grid's three tracks plus gaps and padding stop
   honoring the longest tier name ("Competition-ready").
   ========================================================================== */
@container coveragegoal (max-width: 26rem) {
    .coverage-level-row[b-j8a4omngc6] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.85rem;
        row-gap: 0.35rem;
    }

    .cl-name[b-j8a4omngc6] {
        flex: 1 1 auto;
    }

    .cl-games[b-j8a4omngc6] {
        flex: 0 0 auto;
    }

    .cl-bar[b-j8a4omngc6] {
        flex: 1 0 100%;
    }
}
/* /Components/Shared/RepertoireVariationGaps.razor.rz.scp.css */
/* RepertoireVariationGaps (#9202). Sits inside a declared card: plain rows, neutral labels, tokens only. */

.variation-gaps[b-xwabao3juv] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.variation-gaps-heading[b-xwabao3juv],
.variation-gaps-message[b-xwabao3juv],
.variation-gaps-other[b-xwabao3juv] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ascend-text-muted);
}

.variation-gaps-note[b-xwabao3juv] {
    font-style: italic;
}

.variation-gaps-list[b-xwabao3juv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.variation-gap[b-xwabao3juv] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--ascend-text-light);
}

.variation-gap-name[b-xwabao3juv] {
    flex: 1 1 10rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.variation-gap-move[b-xwabao3juv],
.variation-gap-share[b-xwabao3juv] {
    font-variant-numeric: tabular-nums;
    color: var(--ascend-text-muted);
}

.variation-gap-status[b-xwabao3juv] {
    font-size: 0.74rem;
    color: var(--ascend-text-muted);
}

.variation-gap.uncovered .variation-gap-status[b-xwabao3juv] {
    color: var(--ascend-warning);
}
/* /Components/Shared/ReportThread.razor.rz.scp.css */
/* #7423 - one exchange, read down the card. Our entries are accent-bordered on
   the left; the reporter's are indented and quieter; a status movement is a
   single line between them. Same geometry on both pages. */
.rt-team[b-85k4bfplcz] {
    margin-top: 0.85rem;
    border-left: 3px solid var(--ascend-secondary);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--ascend-secondary) 8%, transparent);
    padding: 0.65rem 0.9rem;
}

.rt-team-label[b-85k4bfplcz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-secondary-light);
}

.rt-team-html[b-85k4bfplcz],
.rt-team-text[b-85k4bfplcz] {
    margin: 0.35rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-text-light);
    overflow-wrap: anywhere;
}

.rt-team-text[b-85k4bfplcz] {
    white-space: pre-line;
}

.rt-reporter[b-85k4bfplcz] {
    margin-top: 0.6rem;
    margin-left: 1.25rem;
    border-left: 3px solid color-mix(in srgb, var(--ascend-text-muted) 45%, transparent);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--ascend-text-muted) 8%, transparent);
    padding: 0.55rem 0.9rem;
}

.rt-reporter-label[b-85k4bfplcz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ascend-text-secondary);
}

.rt-reporter-text[b-85k4bfplcz] {
    margin: 0.3rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-text-light);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.rt-event[b-85k4bfplcz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    color: var(--ascend-text-secondary);
}

.rt-event > i[b-85k4bfplcz] {
    color: var(--ascend-text-muted);
}

.rt-event-when[b-85k4bfplcz] {
    color: var(--ascend-text-muted);
}

/* The status chip inside an event row is the same chip the card header
   wears; the geometry is owned here so the shared component is self-contained
   on the admin page as well. */
.rt-event .mr-status[b-85k4bfplcz] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid;
}

.rt-event .mr-status.received[b-85k4bfplcz] {
    /* #7905 - was var(--ascend-info): 4.20:1 on its own 12% tint, below AA.
       The light step clears it at 5.79:1, matching how .accepted already
       reaches for --ascend-secondary-light. */
    color: var(--ascend-info-light);
    border-color: color-mix(in srgb, var(--ascend-info-light) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-info-light) 12%, transparent);
}

.rt-event .mr-status.accepted[b-85k4bfplcz] {
    color: var(--ascend-secondary-light);
    border-color: color-mix(in srgb, var(--ascend-secondary-light) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-secondary-light) 12%, transparent);
}

.rt-event .mr-status.working[b-85k4bfplcz] {
    color: var(--ascend-accent);
    border-color: color-mix(in srgb, var(--ascend-accent) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-accent) 12%, transparent);
}

.rt-event .mr-status.fixed[b-85k4bfplcz],
.rt-event .mr-status.answered[b-85k4bfplcz] {
    color: var(--ascend-success);
    border-color: color-mix(in srgb, var(--ascend-success) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-success) 12%, transparent);
}

.rt-event .mr-status.not-planned[b-85k4bfplcz] {
    color: var(--ascend-text-muted);
    border-color: color-mix(in srgb, var(--ascend-text-muted) 45%, transparent);
    background: color-mix(in srgb, var(--ascend-text-muted) 12%, transparent);
}
/* /Components/Shared/RequestContentReviewButton.razor.rz.scp.css */
/* Bug #7084 - the result line the reporter reads after raising a review.
   Owned here (not by the host page) so every surface reads the same: the
   markup carries THIS component's scope attribute, which is why the copies
   that used to live in PawnStructureDetail.razor.css and
   StructureRecognitionDrill.razor.css were removed with the inline markup. */
.content-review-result[b-rz90zubogo] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
}

.content-review-result.is-ok[b-rz90zubogo] {
    color: var(--ascend-accent);
}

.content-review-result.is-warn[b-rz90zubogo] {
    color: rgba(255, 255, 255, 0.65);
}
/* /Components/Shared/RevisionGainCard.razor.rz.scp.css */
/* #9031 - the revision read. Support, not a reward: every figure in the default (neutral)
   tone, no gold, no green or red, no motion. */
.rr-explainer[b-2ktrtz75zz],
.rr-below[b-2ktrtz75zz],
.rr-caveat[b-2ktrtz75zz] {
    margin: 0 0 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
}

.rr-caveat[b-2ktrtz75zz] {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.rr-figures[b-2ktrtz75zz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rr-off[b-2ktrtz75zz] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.revision-read-hidden[b-2ktrtz75zz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(49, 221, 227, 0.2);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Review round 1: on Tactical Stats with no circuit stats the card sits under the
   "no circuit data" empty state; its own section spacing keeps it from reading as part of
   that empty state. */
.revision-read-standalone[b-2ktrtz75zz] {
    margin-top: 2.5rem;
}
/* /Components/Shared/RichTextEditor.razor.rz.scp.css */
/* #6680 - dark-surface skin for the vendored Quill snow theme. Quill builds its
   toolbar and editor INSIDE .rte-host from JS, so every Quill class needs ::deep
   (those nodes carry no scope attribute). Chrome mirrors the sibling console
   inputs (.field > input): translucent fill, accent-tinted border, accent focus. */
.rte[b-4wrskj6wuh] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rte-host[b-4wrskj6wuh] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
}

.rte-host:focus-within[b-4wrskj6wuh] {
    border-color: var(--ascend-accent);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.rte-host[b-4wrskj6wuh]  .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid rgba(49, 221, 227, 0.2);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px 8px 0 0;
    font-family: var(--ascend-font-secondary);
}

.rte-host[b-4wrskj6wuh]  .ql-container.ql-snow {
    border: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    color: var(--ascend-text-light);
}

.rte-host[b-4wrskj6wuh]  .ql-editor {
    min-height: 14rem;
    line-height: 1.6;
    padding: 0.75rem;
}

.rte-host[b-4wrskj6wuh]  .ql-editor.ql-blank::before {
    color: var(--ascend-text-muted);
    font-style: normal;
}

.rte-host[b-4wrskj6wuh]  .ql-editor a {
    color: var(--ascend-accent);
}

/* The global h1-h6 rule in app.css paints headings --ascend-text-primary (dark navy),
   which vanishes on this dark surface. Headings in the editor take the editor's text
   color; the sent email styles them itself on its light card. */
.rte-host[b-4wrskj6wuh]  .ql-editor h1,
.rte-host[b-4wrskj6wuh]  .ql-editor h2,
.rte-host[b-4wrskj6wuh]  .ql-editor h3 {
    color: var(--ascend-text-light);
}

/* Toolbar glyphs: Quill paints them #444 for a white toolbar, invisible here. */
.rte-host[b-4wrskj6wuh]  .ql-snow .ql-stroke {
    stroke: var(--ascend-text-muted);
}

.rte-host[b-4wrskj6wuh]  .ql-snow .ql-fill {
    fill: var(--ascend-text-muted);
}

.rte-host[b-4wrskj6wuh]  .ql-snow .ql-picker {
    color: var(--ascend-text-muted);
}

.rte-host[b-4wrskj6wuh]  .ql-snow button:hover .ql-stroke,
.rte-host[b-4wrskj6wuh]  .ql-snow button:focus-visible .ql-stroke,
.rte-host[b-4wrskj6wuh]  .ql-snow button.ql-active .ql-stroke,
.rte-host[b-4wrskj6wuh]  .ql-snow .ql-picker-label:hover .ql-stroke,
.rte-host[b-4wrskj6wuh]  .ql-snow .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--ascend-accent);
}

.rte-host[b-4wrskj6wuh]  .ql-snow button:hover .ql-fill,
.rte-host[b-4wrskj6wuh]  .ql-snow button:focus-visible .ql-fill,
.rte-host[b-4wrskj6wuh]  .ql-snow button.ql-active .ql-fill {
    fill: var(--ascend-accent);
}

.rte-host[b-4wrskj6wuh]  .ql-snow .ql-picker-label:hover,
.rte-host[b-4wrskj6wuh]  .ql-snow .ql-picker-label.ql-active,
.rte-host[b-4wrskj6wuh]  .ql-snow .ql-picker-item:hover,
.rte-host[b-4wrskj6wuh]  .ql-snow .ql-picker-item.ql-selected {
    color: var(--ascend-accent);
}

.rte-host[b-4wrskj6wuh]  .ql-snow .ql-picker-options {
    background: var(--ascend-bg-card);
    border-color: rgba(49, 221, 227, 0.2);
}

/* The link tooltip opens inside the editor; Quill styles it white-on-white-ish. */
.rte-host[b-4wrskj6wuh]  .ql-snow .ql-tooltip {
    background: var(--ascend-bg-card);
    border: 1px solid rgba(49, 221, 227, 0.3);
    box-shadow: none;
    color: var(--ascend-text-light);
    z-index: 2;
}

.rte-host[b-4wrskj6wuh]  .ql-snow .ql-tooltip input[type=text] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    color: var(--ascend-text-light);
}

.rte-host[b-4wrskj6wuh]  .ql-snow .ql-tooltip a {
    color: var(--ascend-accent);
}

.rte-error[b-4wrskj6wuh] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ascend-error);
}
/* /Components/Shared/SelfReviewMovesChangedNote.razor.rz.scp.css */
.self-review-moves-changed[b-xiidakwtoi] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}
/* /Components/Shared/SessionTimer.razor.rz.scp.css */
.session-timer-wrap[b-8fub9gil3c] {
    position: relative;
    display: inline-flex;
}

.timer-btn[b-8fub9gil3c] {
    /* Shared header-row height (app.css --topbar-control-height). */
    min-height: var(--topbar-control-height);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.timer-btn:hover[b-8fub9gil3c] {
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.08);
}

.timer-btn.timer-running[b-8fub9gil3c] {
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
    font-variant-numeric: tabular-nums;
}

.timer-btn.timer-expired[b-8fub9gil3c] {
    border-color: rgba(184, 133, 54, 0.6);
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    animation: timer-pulse-b-8fub9gil3c 1.4s ease-in-out infinite;
}

.timer-btn.timer-pomodoro-work[b-8fub9gil3c] {
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
    background: rgba(239, 68, 68, 0.08);
}

.timer-btn.timer-pomodoro-break[b-8fub9gil3c] {
    border-color: rgba(16, 185, 129, 0.5);
    color: #34d399;
    background: rgba(16, 185, 129, 0.08);
}

.timer-btn.timer-complete[b-8fub9gil3c] {
    border-color: rgba(251, 191, 36, 0.6);
    color: #fbbf24;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(16, 185, 129, 0.1));
    animation: timer-pulse-b-8fub9gil3c 1.4s ease-in-out infinite;
}

.timer-cycle[b-8fub9gil3c] {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    margin-left: 0.15rem;
}

.timer-btn[b-8fub9gil3c]  i { font-size: 0.95rem; }
/* Bug #9053 follow-up 3: the complete pill's neutral check takes --ascend-success; the pill
   label keeps the state's color. */
.timer-btn.timer-complete[b-8fub9gil3c]  i { color: var(--ascend-success); }

@keyframes timer-pulse-b-8fub9gil3c {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); }
}

.timer-menu[b-8fub9gil3c] {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 120;
    /* #7934 - a width, not a min-width: the custom-length row is laid out
       against it. Capped by the viewport so a narrow desktop window cannot
       push it off-screen either. */
    width: min(18rem, calc(100vw - 2rem));
    padding: 0.75rem;
    /* #7934 - flat and opaque. The 0.96-0.98 alpha gradient let the page
       behind show through the custom-length row (measured on a phone), and axe
       cannot decide contrast over any gradient (#7543). The token IS the old
       gradient's first stop, so the menu looks the same. */
    background: var(--ascend-bg-card);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(4, 32, 71, 0.5), 0 0 30px rgba(49, 221, 227, 0.08);
    font-family: var(--ascend-font-secondary);
}

.timer-menu-header[b-8fub9gil3c] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.25rem 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.88rem;
}
.timer-menu-header[b-8fub9gil3c]  i { color: var(--ascend-accent); font-size: 1.1rem; }
/* Bug #9053 follow-up 3: the "Pomodoro complete" check is a neutral receipt, not a reward. */
.timer-menu-header[b-8fub9gil3c]  i.timer-complete-check { color: var(--ascend-success); }
.timer-menu-header strong[b-8fub9gil3c] {
    font-family: var(--ascend-font-primary);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.timer-menu-label[b-8fub9gil3c] {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.1rem;
}

.timer-menu-divider[b-8fub9gil3c] {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.35rem 0;
}

.timer-menu-chips[b-8fub9gil3c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.25rem;
}

.timer-chip[b-8fub9gil3c] {
    flex: 1 1 calc(33% - 0.4rem);
    padding: 0.45rem 0.3rem;
    background: rgba(49, 221, 227, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.timer-chip:hover[b-8fub9gil3c] {
    background: rgba(49, 221, 227, 0.15);
    border-color: #31DDE3;
    color: #ffffff;
}

.timer-menu-item[b-8fub9gil3c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}
.timer-menu-item:hover[b-8fub9gil3c] {
    background: rgba(49, 221, 227, 0.08);
    color: #31DDE3;
}
.timer-menu-item[b-8fub9gil3c]  i { font-size: 0.95rem; }
.timer-menu-item.danger[b-8fub9gil3c] { color: rgba(248, 113, 113, 0.85); }
.timer-menu-item.danger:hover[b-8fub9gil3c] { background: rgba(239, 68, 68, 0.1); color: #f87171; }

/* ===== #7934 - custom length =====
   Before: `.timer-menu-custom input` styled an element this component does not
   render (NumberInput does), so the field fell back to a UA-white 31.6x21px box
   - and `.timer-menu-item` (width: 100%) on the old Start squeezed it to its
   min-content. Color, background and border now come from the global
   .form-input; this file owns only size and layout, per app.css. */
.timer-menu-custom[b-8fub9gil3c] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.35rem 0 0;
    padding: 0.6rem 0.25rem 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.timer-custom-label[b-8fub9gil3c] {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.72);
}

/* The field takes whatever the button leaves; min-width: 0 lets the grid
   track shrink below the input's intrinsic size instead of overflowing. */
.timer-custom-row[b-8fub9gil3c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: stretch;
}

.timer-custom-field[b-8fub9gil3c] {
    min-width: 0;
}

/* Specificity is deliberate: NumberInput's own `.number-input-wrapper ::deep
   .number-input-field` sets padding-right, and at equal weight the winner
   would depend on bundle order. 16px type keeps iOS from zooming the page
   when the field takes focus. The right padding clears the spinner column so
   the number is never drawn underneath it. The 3rem height is what lets each
   stacked spinner be 24px tall - axe measured them 24x17.6 at a 2.5rem field,
   under the WCAG 2.5.8 minimum. Those in-field sizes are for a MOUSE: on a
   coarse pointer NumberInput's own touch block moves the spinners out beside
   the field as a 44x44 stepper and overrides the width and height below, and
   the touch block at the end of this file drops the gutter. */
.timer-custom-field[b-8fub9gil3c]  .number-input-wrapper .number-input-field {
    min-height: 3rem;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.timer-custom-field[b-8fub9gil3c]  .number-input-spinner {
    width: 1.75rem;
    height: 1.5rem;
}

/* The caret only: on a touch screen NumberInput draws - / + at its own size,
   and an `i` subject here would out-rank that. */
.timer-custom-field[b-8fub9gil3c]  .number-input-glyph-fine {
    font-size: 0.8rem;
}

/* ===== Mode toggle tabs at the top of the idle menu ===== */
.timer-mode-tabs[b-8fub9gil3c] {
    display: flex;
    gap: 0.35rem;
    padding: 0.2rem;
    margin-bottom: 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.timer-mode-tab[b-8fub9gil3c] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.timer-mode-tab[b-8fub9gil3c]  i { font-size: 0.9rem; }

.timer-mode-tab:hover[b-8fub9gil3c] {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.04);
}

.timer-mode-tab.active[b-8fub9gil3c] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.45);
    color: #31DDE3;
}

.timer-mode-tab.active[b-8fub9gil3c]  i { color: var(--ascend-accent); }

/* ===== Pomodoro mode menu ===== */
.timer-menu-blurb[b-8fub9gil3c] {
    margin: 0.1rem 0.25rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
}

.timer-pomodoro-presets[b-8fub9gil3c] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.25rem;
}

.timer-preset-card[b-8fub9gil3c] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.timer-preset-card strong[b-8fub9gil3c] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: #ffffff;
}
.timer-preset-card span[b-8fub9gil3c] {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}
.timer-preset-card:hover[b-8fub9gil3c] {
    background: rgba(239, 68, 68, 0.15);
    border-color: #f87171;
}

.timer-menu-item.pomodoro-cta[b-8fub9gil3c] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}
.timer-menu-item.pomodoro-cta:hover[b-8fub9gil3c] {
    background: rgba(239, 68, 68, 0.18);
    border-color: #f87171;
    color: #ffffff;
}

.timer-toast.complete[b-8fub9gil3c] {
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(251, 191, 36, 0.3);
}
/* Bug #9053 follow-up 3: the toast's neutral check takes --ascend-success, not the reward gold. */
.timer-toast.complete[b-8fub9gil3c]  i { color: var(--ascend-success); }

/* Expired state toast — non-blocking, sits above every page. */
.timer-toast[b-8fub9gil3c] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    min-width: 20rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 20, 10, 0.96));
    border: 2px solid rgba(251, 191, 36, 0.5);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(251, 191, 36, 0.2);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
    animation: toast-slide-in-b-8fub9gil3c 0.25s ease;
}
.timer-toast[b-8fub9gil3c]  i { color: #fbbf24; font-size: 1.2rem; flex-shrink: 0; }
.timer-toast-body[b-8fub9gil3c] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.timer-toast-body strong[b-8fub9gil3c] { font-family: var(--ascend-font-primary); font-size: 0.92rem; letter-spacing: 0.5px; color: #ffffff; }
.timer-toast-body span[b-8fub9gil3c] { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.1rem; }

.timer-toast-btn[b-8fub9gil3c] {
    padding: 0.35rem 0.8rem;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 999px;
    color: #31DDE3;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.timer-toast-btn:hover[b-8fub9gil3c] { background: rgba(49, 221, 227, 0.25); color: #ffffff; }

@keyframes toast-slide-in-b-8fub9gil3c {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .timer-toast[b-8fub9gil3c] { left: 1rem; right: 1rem; min-width: 0; }
}

/* #7934 - the mobile header's instance. The wrapper stops being the
   containing block, so the menu anchors to the FIXED mobile header: directly
   under it, inside the 16px page gutters, whatever height the header has
   wrapped to (the same mechanism as NotificationBell's .nb-compact). Right-
   aligned with a width cap rather than stretched edge to edge, because this
   header also shows on a short landscape screen 1280px wide. */
.timer-compact[b-8fub9gil3c] {
    position: static;
}

.timer-compact .timer-menu[b-8fub9gil3c] {
    left: auto;
    right: 1rem;
    width: min(22rem, calc(100% - 2rem));
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
}

/* #8809 review round 1 - a click outside closes the open menu. Pinned, the menu
   stays over the page while the member scrolls on (measured: still at
   [1110,72,288,256] after 500px more of scrolling, and a click on the page left
   it open). This transparent full-screen layer is rendered under the menu while
   it is open (desktop instance only) and closes it on a click. z-index -1 in
   the stacking context it shares with the pill and the menu (the bar, or the
   pinned wrapper, which position: fixed makes its own context): painted under
   them, so a click on the pill or inside the menu still lands there, and over
   the page, because that whole context sits above the page. */
.timer-scrim[b-8fub9gil3c] {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: transparent;
}

/* ===== #8809 - the desktop timer stays in reach on a long page =====
   Member report from a puzzle book's answer key: start the timer at the top,
   scroll down to the puzzle being worked, and the timer is gone. On a phone it
   lives in the FIXED mobile header and never leaves the screen. On desktop it
   lives in the top bar, and the bar scrolls away with the page: its
   `position: sticky` has been inert since the global overflow guard in app.css
   made body a scroll container that never scrolls. Measured on develop at
   1440x900 and 1366x768 on the answer key: the button at top -1470 after a
   1500px scroll, unreachable, and the same on every signed-in page.

   The fix pins THIS timer, not a copy and not the whole bar. session-timer.js
   (keepTimerReachable) watches the slot the timer sits in and, once that whole
   controls row is above the screen, sets data-timer-floating on the wrapper;
   this rule then fixes the same element to the top-right. One element means
   one menu, one set of state classes, one chime and one place in the tab
   order (every instance chimes on expiry, so a floating copy would chime
   again).

   Why not a sticky header: the one-line fix for the inert sticky revives EVERY
   dormant sticky rule in the app at once (the full 96px bar on every desktop
   page plus page-level sticky panels), which is the sticky bar on all pages
   the report itself was unsure about.

   Geometry. top centers the chip on the line the bar's controls sat on, so it
   reappears where the member last saw the timer, and it cannot overlap what is
   left of the bar: the attribute is set only once the controls row is fully off
   screen, so at most (header height - control top) of the bar still shows, and
   that is exactly this top. right is the bar's own right padding. Opaque under
   the pill's translucent tint, because content now scrolls beneath it and axe
   cannot decide contrast through a see-through layer (#7862); the token is the
   bar's own color, so the pill looks as it did in the bar. Its menu still opens
   under it (this wrapper stays its containing block). It paints on the bar's
   own layer (z-index 50, MainLayout.razor.css): still inside the bar's stacking
   context, which puts it over the page content it floats on and under every
   page overlay and modal. Review round 1 removed a lift to var(--z-fixed) that
   drew it over overlays at 100, 900 and 1000.

   Wide desktop only: 1280px and up (claude1 call 1, after review round 2).
   The bar shows from 769px, but at tablet and narrow-desktop widths (769 to
   1279) the pinned pill covered the right edge of whichever answer input was
   passing under it on the answer key (about 80px at 1024x768 and 820x1180, at
   every scroll offset). There the timer keeps develop's behavior: it stays in
   the bar and scrolls away with it, and nothing covers the inputs.
   session-timer.js gates the attribute on the same media query, so the two
   must change together (SessionTimerReachableContractTests holds both). The
   phone bands hide the bar entirely, and a fixed child of a display:none bar
   is not drawn, so the phone header and a short landscape window (a 1366x768
   laptop's ~650px-tall viewport included) are untouched. The entry fade is
   stilled by the global reduced-motion guard. */
@media screen and (min-width: 1280px) {
    .session-timer-wrap[data-timer-floating][b-8fub9gil3c] {
        position: fixed;
        top: calc((var(--header-height) - var(--topbar-control-height)) / 2);
        right: var(--space-xl);
        border-radius: 999px;
        background: var(--ascend-bg-card);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        animation: timer-float-in-b-8fub9gil3c 0.18s ease;
    }
}

@keyframes timer-float-in-b-8fub9gil3c {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to { opacity: 1; transform: translateY(0); }
}


/* #7736 — the session timer sits in the header on every authenticated page
   and measured 105x32. */
@media (hover: none) and (pointer: coarse) {
    .timer-btn[b-8fub9gil3c] {
        min-height: var(--touch-target);
    }

    /* #7934 - everything inside the menu. The live #7736 ratchet cannot see
       any of it (a route walk never opens the menu); measured on a coarse
       pointer at 390 and 344 the chips were 32.4px tall and the mode tabs
       36.4px. ConditionalSurfaceTouchTargetTests pins these. */
    .timer-mode-tab[b-8fub9gil3c],
    .timer-chip[b-8fub9gil3c],
    .timer-menu-item[b-8fub9gil3c],
    .timer-preset-card[b-8fub9gil3c] {
        min-height: var(--touch-target);
    }

    /* The spinners are a 44x44 stepper BESIDE the field here (NumberInput's
       touch block), so the in-field gutter above would only be dead space.
       It has to be undone here: the rule above out-ranks NumberInput's own. The
       release walk measured the old in-field pair at 32x24 on a phone. */
    .timer-custom-field[b-8fub9gil3c]  .number-input-wrapper .number-input-field {
        padding-right: 0.75rem;
    }
}
/* /Components/Shared/ShareRepertoireBookDialog.razor.rz.scp.css */
/* PBI #8595 - "Share with student" for a repertoire book. */
.srb-intro[b-sgyaas5swy] {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.srb-students[b-sgyaas5swy] {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
    min-width: 0;
}

.srb-student[b-sgyaas5swy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.srb-student:last-child[b-sgyaas5swy] {
    border-bottom: 0;
}

/* The whole row label is the touch target (44px tall). */
.srb-student-pick[b-sgyaas5swy] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 44px;
    flex: 1 1 12rem;
    min-width: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9375rem;
}

.srb-student-pick input[type="checkbox"][b-sgyaas5swy] {
    accent-color: var(--ascend-accent);
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.srb-student-name[b-sgyaas5swy] {
    overflow-wrap: anywhere;
}

.srb-student-state[b-sgyaas5swy] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
}

.srb-result[b-sgyaas5swy] {
    margin: 0.75rem 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.srb-result-error[b-sgyaas5swy] {
    color: var(--ascend-error);
}

.srb-result-warning[b-sgyaas5swy] {
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Shared/SideChipGroup.razor.rz.scp.css */
/* SideChipGroup - side-attributed thematic chips (#6633). Mirrors the chip
   treatment the detail pages already use, but owned by the component so every
   host renders the groups identically. */

.chip-group-label[b-s3mldx2ikx] {
    font-family: var(--ascend-font-primary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.9rem 0 0.4rem;
}

.chip-group-label:first-of-type[b-s3mldx2ikx] {
    margin-top: 0;
}

.chip-row[b-s3mldx2ikx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* #6775 - the "one side authored, the other not" marker. Deliberately quiet:
   it states an absence of verified content, not a finding. */
.chip-group-pending[b-s3mldx2ikx] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0.5rem 0 0;
}

.chip[b-s3mldx2ikx] {
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(49, 221, 227, 0.4);
    color: rgba(49, 221, 227, 0.9);
    background: rgba(49, 221, 227, 0.08);
}
/* /Components/Shared/SignupBotGuardFields.razor.rz.scp.css */
/* Bug #8438 - the honeypot row: off-screen, not display:none, so a bot that
   skips hidden inputs still sees a text field it will fill. Same treatment as
   the /contact honeypot (#7326). */
.bot-guard-trap[b-h17x6o9b1b] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The Turnstile widget's slot, reserved at the Managed widget's documented
   height so the submit button does not jump when the iframe lands. Centered,
   and never wider than its column: at phone width the loader picks the
   compact widget when the slot is narrower than the normal one. */
.bot-guard-challenge[b-h17x6o9b1b] {
    display: flex;
    justify-content: center;
    min-height: 65px;
    max-width: 100%;
    margin: 0.75rem 0;
}
/* /Components/Shared/SkillCheckpointTrajectoryCard.razor.rz.scp.css */
.checkpoint-section[b-h4nv2nvdtq] {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Two-tone title rendered by the shared Wordmark component (#6356), which
   owns the flush-seam rule; tracking flows through --wordmark-tracking. */
.checkpoint-section-title[b-h4nv2nvdtq] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    --wordmark-tracking: 0.08em;
    margin: 0;
}

.checkpoint-card[b-h4nv2nvdtq] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkpoint-headline-row[b-h4nv2nvdtq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.checkpoint-composite[b-h4nv2nvdtq] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.composite-label[b-h4nv2nvdtq] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.composite-score[b-h4nv2nvdtq] {
    color: var(--ascend-accent);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    font-family: var(--ascend-font-primary);
}

.composite-delta[b-h4nv2nvdtq] {
    font-size: 1.1rem;
    font-weight: 600;
}

.composite-delta.up[b-h4nv2nvdtq] {
    color: #10b981;
}

.composite-delta.down[b-h4nv2nvdtq] {
    color: #ef4444;
}

.composite-sparkline[b-h4nv2nvdtq] {
    flex-shrink: 0;
}

.checkpoint-headline[b-h4nv2nvdtq] {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    font-style: italic;
    padding-left: 0.75rem;
    border-left: 3px solid var(--ascend-secondary);
}

.checkpoint-axis-grid[b-h4nv2nvdtq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
    gap: 0.75rem;
}

.axis-card[b-h4nv2nvdtq] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.12);
    border-radius: 12px;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.axis-card-head[b-h4nv2nvdtq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.axis-label[b-h4nv2nvdtq] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 600;
    flex: 1;
}

.axis-score[b-h4nv2nvdtq] {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
}

.axis-delta[b-h4nv2nvdtq] {
    font-size: 0.85rem;
    font-weight: 600;
}

.axis-delta.up[b-h4nv2nvdtq] {
    color: #10b981;
}

.axis-delta.down[b-h4nv2nvdtq] {
    color: #ef4444;
}

.axis-note[b-h4nv2nvdtq] {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    line-height: 1.4;
}

.checkpoint-coach-close[b-h4nv2nvdtq] {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    font-style: italic;
    text-align: center;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.checkpoint-meta[b-h4nv2nvdtq] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    text-align: right;
}

/* #6635: manual-trigger action styles removed with the affordance —
   checkpoints recompute automatically (cadence sweep). */
/* /Components/Shared/SkillCheckpointV2Card.razor.rz.scp.css */
.scv2-card[b-vus9xa62un] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 16px;
    /* #7543 - opaque, so the lens values and legend inside are measurable by
       axe instead of 'undecidable' over a gradient. The old 0.95 -> 0.9 navy
       gradient over the (now opaque, #0a1628) card rendered as this token. */
    background: var(--ascend-bg-dark);
    border: 1px solid rgba(49, 221, 227, 0.15);
}

/* Two-tone title rendered by the shared Wordmark component (#6356), which
   owns the flush-seam rule; tracking flows through --wordmark-tracking. */
.scv2-title[b-vus9xa62un] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    --wordmark-tracking: 0.08em;
    margin: 0;
}

/* The prose headline is the visual anchor — large, the first thing read. */
.scv2-headline[b-vus9xa62un] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 1.15rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}

/* Composite number is deliberately small + secondary (research §5.2). */
.scv2-composite-row[b-vus9xa62un] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.scv2-composite[b-vus9xa62un] {
    font-family: var(--ascend-font-primary);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ascend-accent);
}

.scv2-composite-label[b-vus9xa62un] {
    font-size: 0.78rem;
    /* #7543 - was rgba(255,255,255,0.45): 4.48:1 on the now-opaque panel. */
    color: var(--ascend-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scv2-delta[b-vus9xa62un] { font-size: 0.85rem; font-weight: 700; }
.scv2-delta.up[b-vus9xa62un] { color: #10b981; }
.scv2-delta.down[b-vus9xa62un] { color: #ef4444; }

.scv2-date[b-vus9xa62un] {
    margin-left: auto;
    font-size: 0.72rem;
    /* #7543 - was rgba(255,255,255,0.35): 3.20:1 on the now-opaque panel. */
    color: var(--ascend-text-muted);
}

/* Legend that names the two lenses (the cadence difference is the point). */
.scv2-lens-legend[b-vus9xa62un] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

.scv2-legend-level[b-vus9xa62un] { color: var(--ascend-accent); font-weight: 700; }
.scv2-legend-form[b-vus9xa62un] { color: var(--ascend-secondary); font-weight: 700; }
.scv2-legend-input[b-vus9xa62un] { color: #10b981; font-weight: 700; }

/* One card per axis; Level + Form (+ Input) lenses side by side. Min column
   widened so three lenses fit without crushing the labels. */
.scv2-axes[b-vus9xa62un] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
    gap: 0.6rem;
}

.scv2-axis[b-vus9xa62un] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.12);
}

/* #7543 - a building axis used to be dimmed with opacity: 0.7 on the whole
   axis. axe-core measures text through that opacity, and once the card became
   measurable every lens label, note and no-data word in a building axis read
   2.35-3.0:1 against the 4.5:1 AA floor. The building state is still visible
   through .scv2-lens-building ('building' in italics) and the muted tokens
   below; it no longer dims the words that explain it below legibility. */

.scv2-axis.expanded[b-vus9xa62un] {
    border-color: rgba(49, 221, 227, 0.32);
    background: rgba(255, 255, 255, 0.055);
}

/* The whole pillar header is a button that drills in to the signals (#6612).
   Reset native button chrome, keep it full-width and readable. */
.scv2-axis-toggle[b-vus9xa62un] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.scv2-axis-toggle:focus-visible[b-vus9xa62un] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.scv2-axis-name[b-vus9xa62un] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.scv2-axis-inspect[b-vus9xa62un] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    color: var(--ascend-accent);
}

.scv2-axis-inspect-text[b-vus9xa62un] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(49, 221, 227, 0.75);
}

.scv2-axis-chevron[b-vus9xa62un] {
    font-size: 0.8rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.scv2-axis.expanded .scv2-axis-chevron[b-vus9xa62un] {
    transform: rotate(180deg);
}

/* Signals drill-in panel — one row per constituent signal, showing its
   calibrated position toward mastery and the raw measured value. Inspection,
   never a reward (Recognition-Follows-Improvement). */
.scv2-signals[b-vus9xa62un] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.2rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.scv2-signals-empty[b-vus9xa62un] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.72rem;
    /* #7543 - was rgba(255,255,255,0.45): 4.35:1 on the now-opaque panel. */
    color: var(--ascend-text-muted);
}

.scv2-signal[b-vus9xa62un] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scv2-signal.no-data[b-vus9xa62un] { opacity: 0.6; }

.scv2-signal-head[b-vus9xa62un] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.scv2-signal-name[b-vus9xa62un] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
}

.scv2-signal-samples[b-vus9xa62un] {
    flex-shrink: 0;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* #7543 - was rgba(255,255,255,0.4): 3.73:1 on the now-opaque panel. */
    color: var(--ascend-text-muted);
}

.scv2-signal-meter[b-vus9xa62un] {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.scv2-signal-meter-fill[b-vus9xa62un] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ascend-secondary), var(--ascend-accent));
}

.scv2-signal-readout[b-vus9xa62un] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.scv2-signal-toward[b-vus9xa62un] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.6);
}

.scv2-signal-raw[b-vus9xa62un] {
    font-size: 0.64rem;
    /* #7543 - was rgba(255,255,255,0.42): 3.97:1 on the now-opaque panel. */
    color: var(--ascend-text-muted);
    white-space: nowrap;
}

.scv2-signal-nodata[b-vus9xa62un] {
    font-size: 0.66rem;
    font-style: italic;
    /* #7543 - was rgba(255,255,255,0.4): 3.73:1 on the now-opaque panel. */
    color: var(--ascend-text-muted);
}

/* Actionable empty-state link (#6620): routes to the specific drill that
   feeds an empty signal. */
.scv2-signal-action[b-vus9xa62un] {
    font-size: 0.66rem;
    margin-left: 0.4rem;
    color: var(--ascend-accent);
    text-decoration: none;
}

.scv2-signal-action:hover[b-vus9xa62un] {
    text-decoration: underline;
}

/* #7749 - the lenses STACK instead of sitting three-across. The axes grid
   packs axis cards at minmax(16.25rem, 1fr), so an axis card is ~240-345px at
   EVERY viewport, phone or desktop. Split three ways that left each lens 60px
   at 320, 76px at 390 and 81px at 1440 - and each lens carries a prose
   sub-label ("Try the Evaluation Trainer to build data.", "1 structure seen",
   "nothing logged yet"). Three prose columns never fitted in that width at any
   size; the ellipsis on .scv2-lens-note below was hiding that rather than
   solving it, so a phone reader could not tell what an axis measures. Stacked,
   every lens gets the axis card's full inner width at every viewport, the
   notes wrap to one or two lines, and the reading order, the vocabulary and
   the legend are unchanged. */
.scv2-lenses[b-vus9xa62un] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scv2-lens[b-vus9xa62un] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

/* Visual divider between the lenses - a rule above each one after the first,
   since they stack (#7749); it was a left border when they sat side by side. */
.scv2-lens + .scv2-lens[b-vus9xa62un] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.5rem;
}

.scv2-lens-label[b-vus9xa62un] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* #7543 - was rgba(255,255,255,0.4): 2.35:1 measured by axe. */
    color: var(--ascend-text-muted);
}

.scv2-lens-value[b-vus9xa62un] {
    font-family: var(--ascend-font-primary);
    font-weight: 700;
    font-size: 1.05rem;
    color: #ffffff;
}

.scv2-lens-building[b-vus9xa62un] {
    font-size: 0.78rem;
    color: var(--ascend-text-muted);
    font-style: italic;
}

/* #7749 - WRAPS, never clips. This carried white-space: nowrap + overflow:
   hidden + text-overflow: ellipsis, which turned every sub-label longer than
   the lens column into "Try the Evalua...". An ellipsis is only honest when
   the full text is available some other way; here it was the only place the
   text appeared, so it simply withheld what the axis measures. */
.scv2-lens-note[b-vus9xa62un] {
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--ascend-text-muted);
    white-space: normal;
    overflow-wrap: break-word;
}

/* Form word coloring — momentum, not a calibrated score. */
.scv2-form.form-good[b-vus9xa62un] { color: #10b981; }
.scv2-form.form-ok[b-vus9xa62un] { color: var(--ascend-accent); }
.scv2-form.form-low[b-vus9xa62un] { color: #f59e0b; }
.scv2-form.form-none[b-vus9xa62un] { color: var(--ascend-text-muted); }

/* Input word coloring (#6620) — per-axis expectation adherence, a
   measurement word, never 0-100 and never a reward. "No active plan" and
   "No planned work" are honest empty states, dimmed like other no-data text. */
.scv2-input.input-ontrack[b-vus9xa62un] { color: #10b981; }
/* Past the plan: read as met-and-then-some, distinct from plain on-track. */
.scv2-input.input-past[b-vus9xa62un] { color: #34d399; }
.scv2-input.input-partial[b-vus9xa62un] { color: var(--ascend-accent); }
.scv2-input.input-behind[b-vus9xa62un] { color: #f59e0b; }
.scv2-input.input-noplan[b-vus9xa62un] {
    color: var(--ascend-text-muted);
    font-size: 0.78rem;
    font-style: italic;
}

/* Dashboard lead variant (#6635). Same card vocabulary, tighter rhythm; the
   drill-in link replaces the full view's signal inspection. */
.scv2-card.scv2-lead[b-vus9xa62un] {
    gap: 0.85rem;
}

.scv2-lead-link[b-vus9xa62un] {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: var(--ascend-accent);
    text-decoration: none;
}

.scv2-lead-link:hover[b-vus9xa62un] {
    text-decoration: underline;
}
/* /Components/Shared/SolutionPlaybackModal.razor.rz.scp.css */
.sp-body[b-kn6ks9umku] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sp-empty[b-kn6ks9umku] {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
}

.sp-board[b-kn6ks9umku] {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
}

.sp-moves[b-kn6ks9umku] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-move[b-kn6ks9umku] {
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.sp-move.is-played[b-kn6ks9umku] {
    background: rgba(49, 221, 227, 0.12);
    color: rgba(255, 255, 255, 0.85);
}

.sp-move.is-current[b-kn6ks9umku] {
    background: rgba(49, 221, 227, 0.28);
    color: #ffffff;
}

.sp-controls[b-kn6ks9umku] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.sp-btn[b-kn6ks9umku] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.sp-btn:hover:not(:disabled)[b-kn6ks9umku] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(49, 221, 227, 0.4);
}

.sp-btn:disabled[b-kn6ks9umku] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sp-btn-primary[b-kn6ks9umku] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.45);
    color: var(--ascend-accent);
}

.sp-status[b-kn6ks9umku] {
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}
/* /Components/Shared/SoundToggle.razor.rz.scp.css */
/* Match the SessionTimer .timer-btn pill — same height, same border radius,
   same border + bg treatment so the two read as a single control row.
   Joe-flagged 2026-05-02: 'timer is a rounded pill, mute is square-ish'. */
.sound-toggle-btn[b-urwihy3ccq] {
    /* Shared header-row height (app.css --topbar-control-height). */
    min-height: var(--topbar-control-height);
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.75);
    padding: 0.4rem 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.sound-toggle-btn:hover[b-urwihy3ccq] {
    color: var(--ascend-accent, #31DDE3);
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(49, 221, 227, 0.08);
}

.sound-toggle-btn[b-urwihy3ccq]  i {
    font-size: 0.95rem;
}


/* #7736 — the header sound toggle measured 38x30: an icon button that is
   under the line in BOTH axes. */
@media (hover: none) and (pointer: coarse) {
    .sound-toggle-btn[b-urwihy3ccq] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}

/* #8098 - the labeled setting on the profile page. A plain bordered control in
   the page's own vocabulary: no pill, no accent fill, the state in words. */
.sound-setting-btn[b-urwihy3ccq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--touch-target, 44px);
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sound-setting-btn:hover[b-urwihy3ccq] {
    border-color: var(--ascend-accent, #31DDE3);
    background-color: rgba(49, 221, 227, 0.08);
}

.sound-setting-btn.is-off[b-urwihy3ccq] {
    border-color: rgba(255, 255, 255, 0.2);
}

.sound-setting-btn[b-urwihy3ccq]  i {
    font-size: 1rem;
    color: var(--ascend-accent, #31DDE3);
}

.sound-setting-btn.is-off[b-urwihy3ccq]  i {
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/Shared/StagedCountBadge.razor.rz.scp.css */
/* PBI #6746 - staged-count badge (admin nav + SME hub). Gold accent: staged
   work is owner-gated intake, not an alarm - it reads as "awaiting your call",
   distinct from the cyan nav links around it. Tokens only, no raw hex. */

.staged-count-badge[b-7p125ih2an] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    background: color-mix(in srgb, var(--ascend-secondary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-secondary) 40%, transparent);
    color: var(--ascend-secondary-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.staged-count-badge:hover[b-7p125ih2an] {
    background: color-mix(in srgb, var(--ascend-secondary) 24%, transparent);
    border-color: color-mix(in srgb, var(--ascend-secondary) 60%, transparent);
}

.staged-count-badge i[b-7p125ih2an] {
    font-size: 0.85rem;
}

.staged-count-text[b-7p125ih2an] {
    white-space: nowrap;
}

/* Owner canary 2026-07-29: keep the chip on one line and vertically centered
   wherever it is hosted (nav row, hub/workbench headers). */
.staged-count-badge[b-7p125ih2an] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}
/* /Components/Shared/StaticBoardDiagram.razor.rz.scp.css */
/* #9012 - the static board. Square colors are chessground's stock lichess-brown pair, the board
   every member already knows (ChessBoard.razor.css: no branded board theme without an owner
   design pass). The board is a square that fills its container, so the host sets the width. */
.sbd[b-tzvo4v3wop] {
    width: 100%;
    max-width: 100%;
}

.sbd-board[b-tzvo4v3wop] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.sbd-sq[b-tzvo4v3wop] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font: inherit;
    min-width: 0;
}

.sbd-light[b-tzvo4v3wop] {
    background-color: #f0d9b5;
}

.sbd-dark[b-tzvo4v3wop] {
    background-color: #b58863;
}

.sbd-editable .sbd-sq[b-tzvo4v3wop] {
    cursor: pointer;
    touch-action: manipulation;
}

.sbd-editable .sbd-sq:hover[b-tzvo4v3wop] {
    box-shadow: inset 0 0 0 3px rgba(49, 221, 227, 0.55);
}

.sbd-editable .sbd-sq:focus-visible[b-tzvo4v3wop] {
    outline: 3px solid var(--ascend-accent);
    outline-offset: -3px;
    z-index: 2;
}

.sbd-files[b-tzvo4v3wop] {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
    color: var(--ascend-text-muted);
}

/* #9012 review - rank numbers in the top-left corner of the left-hand column, so Flip is easy to
   follow. One dark brown on both square colors keeps the small text readable on each (chessground's
   own coordinates swap the two board colors, which is too faint at this size). */
.sbd-rank[b-tzvo4v3wop] {
    position: absolute;
    top: 1px;
    left: 3px;
    z-index: 1;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    color: #2b1d10;
    pointer-events: none;
}

/* #9328 - a read-only board can mark the squares of two moves. Rings, never fills, so the piece
   stays readable, and the two differ in shape (dashed for the move played, solid for the engine's
   move) as well as color. Both colors hold at least 3:1 against each square color (WCAG 1.4.11):
   the played ring a near-black gray (neutral: a mark, not an alarm), the engine ring a deep
   blue-green. */
.sbd-mark-played[b-tzvo4v3wop]::after,
.sbd-mark-engine[b-tzvo4v3wop]::after {
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.sbd-mark-played[b-tzvo4v3wop]::after {
    border: 3px dashed #2a2a2a;
}

.sbd-mark-engine[b-tzvo4v3wop]::after {
    border: 3px solid #063a37;
}

/* #9391 - the host's overlay (ChildContent): a box the size of the board above the squares, so
   one unit of an SVG with viewBox "0 0 8 8" is one square. It never takes a click. */
.sbd-overlay[b-tzvo4v3wop] {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
/* /Components/Shared/StatItem.razor.rz.scp.css */
/* StatItem (#6433, Feature #6304) - canonical stat tile styling.
 * The Tile chrome mirrors the global .stat-item block in app.css (which stays
 * for not-yet-migrated plain markup); keep the two in sync. Tokens only -
 * never raw brand hex (ScopedCssBoundaryTests RuleBrandHex). */

/* ---- chrome ---- */

.stat-item.stat-tile[b-mymqgfc7r7] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 16px;
    padding: 1rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.stat-item.stat-tile:hover[b-mymqgfc7r7] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(49, 221, 227, 0.3);
    transform: translateY(-2px);
}

.stat-item.stat-bare[b-mymqgfc7r7] {
    background: none;
    border: none;
    padding: 0;
}

/* ---- layouts ---- */

.stat-item.stat-iconrow[b-mymqgfc7r7] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-item.stat-stacked[b-mymqgfc7r7] {
    display: flex;
    flex-direction: column;
    /* app.css's global .stat-item sets align-items:center for the icon row;
     * reset it so the stacked content block spans the tile. */
    align-items: stretch;
    min-width: 0;
}

.stat-item.stat-stacked .stat-content[b-mymqgfc7r7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
}

.stat-item.stat-stacked.stat-align-start .stat-content[b-mymqgfc7r7] {
    align-items: flex-start;
    text-align: left;
}

.stat-icon[b-mymqgfc7r7] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg, 12px);
    background: linear-gradient(135deg, var(--ascend-accent), var(--ascend-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    /* #7232: was `white` - 1.67:1 on the cyan end of the gradient, below even
       the 3:1 large-glyph bar. Deep navy is what app.css's .btn-accent already
       puts on this same cyan, and it reads 9.66:1 on the cyan stop and 4.95:1
       on the gold stop. */
    color: var(--ascend-primary);
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.3));
}

.stat-icon[b-mymqgfc7r7]  i {
    font-size: 24px;
}

/* IconContent marks (an <img> platform logo) come from the CALLER, so they carry
 * the caller's scope attribute - ::deep is required to reach them. */
.stat-icon[b-mymqgfc7r7]  img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.stat-content[b-mymqgfc7r7] {
    flex: 1;
    min-width: 0;
}

/* ---- typography ---- */

.stat-label[b-mymqgfc7r7] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value[b-mymqgfc7r7] {
    font-family: var(--ascend-font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ascend-text-light);
    line-height: 1.1;
}

.stat-value[b-mymqgfc7r7]  .stat-sub {
    font-size: 0.65em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

/* Optional third line (SubLabel/SubContent): quieter than the label, and it
 * stays quiet at every Size - the size steps only scale the value.
 * #8264: was rgba(255, 255, 255, 0.4) - 3.75:1 by axe on the Progress tile
 * (#737883 on #161e30) and 3.65:1 on the worst surface the #7291 cascade
 * sweep resolves behind StatItem's usage sites, below AA for this 11px line.
 * Every consumer shares this rule, so it is fixed here, once. The brand
 * secondary-text token is the one docs/design/brand-tokens.md names for
 * helper text at any size; it clears AA on every resolved surface (pinned by
 * InheritedContrastRatchetTests) and still reads a step quieter than the
 * 0.55-white label above it. */
.stat-sublabel[b-mymqgfc7r7] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--ascend-text-secondary);
}

/* ---- sizes ---- */

.stat-size-sm .stat-value[b-mymqgfc7r7] {
    font-size: 1.25rem;
}

.stat-size-lg .stat-value[b-mymqgfc7r7] {
    /* Fluid: ~1.5rem on phones up to 2rem on desktop (OpeningHub precedent). */
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem);
}

.stat-size-hero .stat-value[b-mymqgfc7r7] {
    font-size: clamp(2rem, 1.2rem + 4vw, 3rem);
}

/* ---- tones: value color; Tile also tints the border ---- */

.stat-tone-accent .stat-value[b-mymqgfc7r7] { color: var(--ascend-accent); }
.stat-tone-gold .stat-value[b-mymqgfc7r7] { color: var(--ascend-secondary); }
.stat-tone-success .stat-value[b-mymqgfc7r7] { color: var(--ascend-success); }
.stat-tone-warning .stat-value[b-mymqgfc7r7] { color: var(--ascend-warning); }
.stat-tone-danger .stat-value[b-mymqgfc7r7] { color: var(--ascend-error); }
.stat-tone-muted .stat-value[b-mymqgfc7r7] { color: rgba(255, 255, 255, 0.55); }

.stat-tile.stat-tone-gold[b-mymqgfc7r7] { border-color: rgba(184, 133, 54, 0.4); }
.stat-tile.stat-tone-success[b-mymqgfc7r7] { border-color: rgba(16, 185, 129, 0.35); }
.stat-tile.stat-tone-warning[b-mymqgfc7r7] { border-color: rgba(245, 158, 11, 0.35); }
.stat-tile.stat-tone-danger[b-mymqgfc7r7] { border-color: rgba(239, 68, 68, 0.35); }
/* /Components/Shared/StatsRow.razor.rz.scp.css */
/* StatsRow (#6433, Feature #6304) - canonical stats grid; mirrors the global
 * .stats-row block in app.css (kept for not-yet-migrated plain markup). */

.stats-row[b-coiee8xjp2] {
    display: grid;
    grid-template-columns: var(--stats-row-cols, repeat(auto-fit, minmax(min(150px, 100%), 1fr)));
    gap: var(--stats-row-gap, var(--space-lg, 1rem));
}

/* Phones pack an auto-fit row tighter. A pinned row is left alone: its own track
 * list already drops to one column when the tiles stop fitting (#8582). */
@media (max-width: 480px) {
    .stats-row:not(.stats-row-pinned)[b-coiee8xjp2] {
        grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    }
}
/* /Components/Shared/StockfishBrowserPanel.razor.rz.scp.css */
/* Compact mode: engine row */
.engine-row[b-rrqip5owwl] {
    display: grid;
    grid-template-columns: 28px 52px 1fr auto;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0;
}

.engine-name[b-rrqip5owwl] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #31DDE3;
    letter-spacing: 0.02em;
}

.engine-eval[b-rrqip5owwl] {
    font-family: 'tablet-gothic', monospace;
    font-size: 0.875rem;
    font-weight: 600;
}

.engine-eval.positive[b-rrqip5owwl] {
    color: #ffffff;
}

.engine-eval.negative[b-rrqip5owwl] {
    color: rgba(255, 255, 255, 0.6);
}

.engine-best[b-rrqip5owwl] {
    font-family: 'tablet-gothic', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.engine-stat[b-rrqip5owwl] {
    font-size: 0.5625rem;
    /* #7747 - was rgba(255, 255, 255, 0.4); axe-core 4.13.0 measured 3.80:1
       on /games/{id}/analysis. Same dim-white family, same #7232 token. */
    color: var(--ascend-text-secondary);
    font-family: monospace;
}

.engine-loading[b-rrqip5owwl] {
    grid-column: span 3;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.6875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Full mode: panel card */
.sf-panel-card[b-rrqip5owwl] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1.25rem;
    position: relative;
}

.sf-panel-card[b-rrqip5owwl]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #31DDE3 0%, #B88536 100%);
    border-radius: 16px 16px 0 0;
}

.sf-panel-header[b-rrqip5owwl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.sf-panel-header h3[b-rrqip5owwl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #31DDE3;
    margin: 0;
    text-transform: uppercase;
}

.sf-panel-header h3 i[b-rrqip5owwl] {
    font-size: 0.875rem;
}

.sf-toggle[b-rrqip5owwl] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sf-toggle:hover[b-rrqip5owwl] {
    border-color: rgba(49, 221, 227, 0.4);
    color: rgba(255, 255, 255, 0.7);
}

.sf-toggle.enabled[b-rrqip5owwl] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
    color: #31DDE3;
}

.sf-panel-content[b-rrqip5owwl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sf-eval-row[b-rrqip5owwl] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.sf-eval[b-rrqip5owwl] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 1.25rem;
    font-weight: 600;
}

.sf-eval.positive[b-rrqip5owwl] {
    color: #ffffff;
}

.sf-eval.negative[b-rrqip5owwl] {
    color: rgba(255, 255, 255, 0.6);
}

.sf-depth[b-rrqip5owwl] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.4);
}

.sf-best-row[b-rrqip5owwl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(49, 221, 227, 0.1);
    border-radius: 6px;
}

.sf-best-label[b-rrqip5owwl] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(49, 221, 227, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-best-move[b-rrqip5owwl] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    color: #31DDE3;
    font-weight: 600;
}

.sf-pv[b-rrqip5owwl] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-analyzing[b-rrqip5owwl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

.sf-analyzing i[b-rrqip5owwl] {
    font-size: 1rem;
    color: #31DDE3;
}

/* Bug #8352 - the engine cannot run in this browser (no cross-origin
   isolation, so no SharedArrayBuffer). Deliberately full-contrast text: this is
   the only thing in the panel, and a member reading why their engine is missing
   should not have to squint at it. */
.sf-unavailable[b-rrqip5owwl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
}

.sf-unavailable-headline[b-rrqip5owwl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

.sf-unavailable-headline i[b-rrqip5owwl] {
    color: #31DDE3;
    font-size: 1rem;
}

.sf-unavailable-detail[b-rrqip5owwl] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #E6EDF5;
}

.sf-source-note[b-rrqip5owwl] {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: #31DDE3;
}

.engine-unavailable[b-rrqip5owwl] {
    grid-column: span 3;
    font-size: 0.6875rem;
    color: #E6EDF5;
}

/* Spin animation */
.spin[b-rrqip5owwl] {
    animation: spin-b-rrqip5owwl 1s linear infinite;
}

@keyframes spin-b-rrqip5owwl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .engine-row[b-rrqip5owwl] {
        grid-template-columns: 24px 44px 1fr auto;
        gap: 0.25rem;
    }

    .pv-line[b-rrqip5owwl] {
        word-break: break-all;
    }

    .engine-controls[b-rrqip5owwl] {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .engine-row[b-rrqip5owwl] {
        grid-template-columns: 22px 40px 1fr;
        font-size: 0.8rem;
    }
}

/* Bug #8458 - the engine has not been started and has downloaded nothing. This
   is NOT the unavailable state: the engine works here, it has simply not been
   paid for yet, so the block reads as an offer with a price rather than a
   problem. Deliberately full-contrast text for the same reason .sf-unavailable
   is: it is the only thing in the panel. */
.sf-start[b-rrqip5owwl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
}

.sf-start-headline[b-rrqip5owwl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

.sf-start-headline i[b-rrqip5owwl] {
    color: #31DDE3;
    font-size: 1rem;
}

.sf-start-detail[b-rrqip5owwl] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #E6EDF5;
}

/* ::deep because the element is rendered by the shared Button component and
   carries ITS scope id, not this panel's. */
.sf-start[b-rrqip5owwl]  .sf-start-button {
    align-self: flex-start;
}

/* Compact mode: the engine row is a grid, and the start control is the whole
   row because there is no evaluation to sit beside yet. At 344px the label has
   to be allowed to wrap rather than overflow the row. */
.engine-row[b-rrqip5owwl]  .sf-start-compact {
    grid-column: span 3;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    min-width: 0;
}
/* /Components/Shared/StructureChangeAtMove.razor.rz.scp.css */
/* Defect #9378 - the structure-change line at its move in the Moves view's move details. The
   same type and color as the Review tab's line (GameStructureChanges.razor.css), set off by a
   thin rule so it reads as a fact about this move, not as a new card. It renders only at a move
   with a line (final pass: the live region moved to the page), so other moves are untouched. */

.structure-change-at-move[b-0ttga88wnl] {
    min-width: 0;
}

/* Fixer round 2 - no margin: .move-details already puts its 0.4rem flex gap above this region
   (the #7763 rule removed the same doubled child margin from the picker). The padding and the
   rule are this region's own spacing. */
.structure-change-at-move.has-line[b-0ttga88wnl] {
    padding: 0.4rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.structure-change-at-move-line[b-0ttga88wnl] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.structure-change-at-move-line + .structure-change-at-move-line[b-0ttga88wnl] {
    margin-top: 0.3rem;
}
/* /Components/Shared/StructurePerspectivesPanel.razor.rz.scp.css */
/* PBI #9215 - "Your notes" on a pawn structure. Plain HTML inputs (not Blazor
   Input components), so scoped selectors reach them directly. */

.structure-perspectives[b-mlo9zgrmwg] {
    min-width: 0;
    /* #9216 - arriving on #your-notes lands the panel below the fixed phone header. */
    scroll-margin-top: calc(var(--app-content-top, 0px) + var(--space-md, 1rem));
}

.perspectives-heading[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-accent);
    margin: 0 0 0.4rem;
}

.perspectives-intro[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
    margin: 0 0 0.9rem;
}

.perspectives-status[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 0.75rem;
}

/* The disagreement: one fixed sentence, then the notes side by side. Nothing
   in the layout ranks one column above another. */
.perspective-disagreement[b-mlo9zgrmwg] {
    border: 1px solid rgba(255, 193, 7, 0.45);
    border-radius: 8px;
    padding: 0.75rem;
    margin: 0 0 0.9rem;
    background: rgba(255, 193, 7, 0.06);
}

.disagreement-sentence[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
    margin: 0 0 0.25rem;
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.disagreement-side[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 0.6rem;
}

.disagreement-columns[b-mlo9zgrmwg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Narrow enough that two notes sit side by side even at 344px; a third
       wraps to the next row. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr));
    gap: 0.5rem;
}

.disagreement-column[b-mlo9zgrmwg] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    min-width: 0;
}

.disagreement-source[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.assessment-chip[b-mlo9zgrmwg] {
    align-self: flex-start;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(49, 221, 227, 0.45);
    color: #ffffff;
    white-space: nowrap;
}

.perspective-list[b-mlo9zgrmwg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.perspective-item[b-mlo9zgrmwg] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    min-width: 0;
}

.perspective-head[b-mlo9zgrmwg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin-bottom: 0.4rem;
}

.perspective-source[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-secondary);
    font-weight: 700;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.perspective-meta[b-mlo9zgrmwg],
.perspective-chapter[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.78);
}

.perspective-chapter[b-mlo9zgrmwg] {
    margin: 0 0 0.4rem;
}

.perspective-chapter a[b-mlo9zgrmwg] {
    color: var(--ascend-accent);
    text-decoration: underline;
}

.perspective-label[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.55rem 0 0.15rem;
}

.perspective-text[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.perspective-fens[b-mlo9zgrmwg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.perspective-fens code[b-mlo9zgrmwg] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.88);
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* The button rows are the shared .action-row (app.css): a full-width column
   on a phone, a row once there is room. Only the spacing is local. */
.perspective-actions[b-mlo9zgrmwg],
.perspective-form-actions[b-mlo9zgrmwg],
.perspective-add[b-mlo9zgrmwg] {
    margin-top: 0.6rem;
}

.perspective-form[b-mlo9zgrmwg] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.perspective-field-row[b-mlo9zgrmwg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.perspective-field-row .perspective-field[b-mlo9zgrmwg] {
    flex: 1 1 9rem;
}

.perspective-field[b-mlo9zgrmwg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.perspective-field label[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.75);
}

.perspective-input[b-mlo9zgrmwg] {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(49, 221, 227, 0.35);
    border-radius: 6px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    padding: 0.5rem 0.6rem;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}

.perspective-input:focus[b-mlo9zgrmwg] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 1px;
}

/* Room for the global select chevron (app.css draws it as a background image). */
select.perspective-input[b-mlo9zgrmwg] {
    padding-right: 2.25rem;
}

select.perspective-input option[b-mlo9zgrmwg] {
    background: var(--ascend-bg-dark);
    color: #ffffff;
}

textarea.perspective-input[b-mlo9zgrmwg] {
    resize: vertical;
}

.perspective-fen-input[b-mlo9zgrmwg] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

.perspective-error[b-mlo9zgrmwg] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: var(--ascend-error-light);
    margin: 0;
}
/* /Components/Shared/StructuresWithoutStudyCard.razor.rz.scp.css */
/* PBI #9217 - the structure library's neutral "no linked study chapter yet" count.
   Same type scale as the #9216 "Your study" block, so the two read as one feature.
   No celebration styling: plain text, no badge, no animation. */

.structures-without-study[b-usqglb6vl2] {
    min-width: 0;
    margin: 0 0 1.25rem;
}

.structures-without-study-intro[b-usqglb6vl2] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
    margin: 0 0 0.5rem;
}

.structures-without-study-list[b-usqglb6vl2] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.structures-without-study-row[b-usqglb6vl2] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.structures-without-study-row + .structures-without-study-row[b-usqglb6vl2] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* The whole line is the link, so it wraps as text at phone widths and the
   tap target is the full row (at least 44px tall). */
.structures-without-study-row a[b-usqglb6vl2] {
    display: block;
    min-height: 44px;
    padding: 0.6rem 0;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 0.2em;
}

.structures-without-study-row a:hover[b-usqglb6vl2],
.structures-without-study-row a:focus-visible[b-usqglb6vl2] {
    color: var(--ascend-accent);
    text-decoration-color: currentColor;
}

.structures-without-study-actions[b-usqglb6vl2] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.structures-without-study-actions[b-usqglb6vl2]  .ascend-btn {
    min-height: 44px;
}

.structures-without-study-hidden[b-usqglb6vl2] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 1.25rem;
}
/* /Components/Shared/StruggleChips.razor.rz.scp.css */
/* #6761 - the struggle picker grid, extracted from StrugglePicker so /focus and
   the guided first path render one component. Tokens only - no raw brand hex,
   no font literals. */

.focus-count[b-o8p8vrwgmc] {
    font-size: 0.85rem;
    color: var(--ascend-accent);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* ---- pillar groups -------------------------------------------------- */
.focus-group[b-o8p8vrwgmc] {
    margin-bottom: 1.75rem;
}

.focus-group-head[b-o8p8vrwgmc] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(49, 221, 227, 0.15);
    padding-bottom: 0.4rem;
}

.focus-group-phrase[b-o8p8vrwgmc] {
    font-family: var(--ascend-font-primary);
    font-size: 1.05rem;
    color: var(--ascend-secondary);
    letter-spacing: 0.02em;
}

.focus-group-header[b-o8p8vrwgmc] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.focus-chips[b-o8p8vrwgmc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}

/* ---- chip ----------------------------------------------------------- */
.focus-chip[b-o8p8vrwgmc] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    text-align: left;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.18s ease;
}

.focus-chip:hover:not(.disabled)[b-o8p8vrwgmc] {
    border-color: rgba(49, 221, 227, 0.5);
    background: rgba(49, 221, 227, 0.06);
    transform: translateY(-1px);
}

.focus-chip.selected[b-o8p8vrwgmc] {
    border-color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.12);
    box-shadow: 0 0 0 1px rgba(49, 221, 227, 0.3);
}

.focus-chip.disabled[b-o8p8vrwgmc] {
    opacity: 0.4;
    cursor: not-allowed;
}

.chip-check[b-o8p8vrwgmc] {
    color: var(--ascend-accent);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.chip-body[b-o8p8vrwgmc] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.chip-label[b-o8p8vrwgmc] {
    font-size: 0.92rem;
    line-height: 1.35;
}

.chip-lives-in[b-o8p8vrwgmc] {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}
/* /Components/Shared/StudyAllocationPanel.razor.rz.scp.css */
/* #6946 - ::deep: the class rides on the child <Card>, so a bare selector never
   matched. The host (.study-plan-page) is plain block flow with no `gap`, so
   this margin is the only separation from the .plan-actions row that follows. */
[b-nlz1x124g5] .study-allocation-card {
    margin-bottom: 1rem;
}

.alloc-header[b-nlz1x124g5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* #9371 - now an h2 (heading order); weight and line height are pinned so the
   heading looks exactly as it did as an h3. */
.alloc-title[b-nlz1x124g5] {
    margin: 0;
    font-family: 'condor', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.alloc-band[b-nlz1x124g5] {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    padding: 0.1rem 0.6rem;
}

/* #9371 - the one line that says the card is a split of study time, not a score. */
.alloc-explainer[b-nlz1x124g5] {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.alloc-rationale[b-nlz1x124g5] {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    border-left: 2px solid #B88536;
    padding-left: 0.75rem;
}

.alloc-rows[b-nlz1x124g5] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* #9371 - wraps so "General Improvement" and "18% of your study time" stack on a
   phone instead of pushing the card wider than the screen. */
.alloc-row-head[b-nlz1x124g5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
    margin-bottom: 0.3rem;
}

.alloc-area[b-nlz1x124g5] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.alloc-pct[b-nlz1x124g5] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

/* #9371 - the delta is a sentence now ("+8 vs. the usual split for your level"),
   shown under the bar with no hover needed, so it is a wrapping line, not a pill. */
.alloc-delta[b-nlz1x124g5] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
}

.alloc-delta.up[b-nlz1x124g5] {
    color: #31DDE3;
}

.alloc-delta.down[b-nlz1x124g5] {
    color: rgba(255, 255, 255, 0.7);
}

.alloc-bar[b-nlz1x124g5] {
    position: relative;
    height: 8px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.alloc-fill[b-nlz1x124g5] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(184, 133, 54, 0.7), rgba(184, 133, 54, 0.4));
    transition: width 0.4s ease;
}

.alloc-fill.up[b-nlz1x124g5] {
    background: linear-gradient(135deg, #31DDE3, #42e8ed);
}

.alloc-fill.down[b-nlz1x124g5] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
}

/* Baseline marker — a thin vertical tick the bar overlays, so the player can
   see where the rating-tier default sat before their weaknesses tilted it. */
.alloc-baseline-mark[b-nlz1x124g5] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: rgba(255, 255, 255, 0.45);
    z-index: 2;
}

.alloc-reason[b-nlz1x124g5] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.6);
}

/* #9371 - the baseline tick in words, once, for every bar above. */
.alloc-legend[b-nlz1x124g5] {
    margin: 0.85rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.alloc-foot[b-nlz1x124g5] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.alloc-foot strong[b-nlz1x124g5] {
    color: rgba(255, 255, 255, 0.85);
}
/* /Components/Shared/StudyBoardMasterGames.razor.rz.scp.css */
/* #8349 - master games from the Study Board, under the Explorer tab.
   Text colors stay at 0.75 alpha or above on the card's flat background, so the
   axe contrast gate reads them as passes rather than undecidable. */

.sbmg[b-m7212k5r7g] {
    margin-top: 0.75rem;
}

.sbmg-this-game[b-m7212k5r7g] {
    margin-bottom: 0.5rem;
}

.sbmg-lead[b-m7212k5r7g],
.sbmg-within[b-m7212k5r7g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.625rem 0;
}

.sbmg-within[b-m7212k5r7g] {
    color: rgba(255, 255, 255, 0.9);
}

/* The chapter's own game, above the position's games. */
.sbmg-this-game-result[b-m7212k5r7g] {
    margin: 0 0 0.875rem 0;
}

.sbmg-this-game-lead[b-m7212k5r7g] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0.5rem 0;
}

.sbmg-games[b-m7212k5r7g] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sbmg-game[b-m7212k5r7g] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    min-width: 0;
}

.sbmg-players[b-m7212k5r7g] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.95);
    overflow-wrap: anywhere;
}

.sbmg-vs[b-m7212k5r7g] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
}

.sbmg-meta[b-m7212k5r7g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    overflow-wrap: anywhere;
}

.sbmg-result[b-m7212k5r7g] {
    font-weight: 600;
}

.sbmg-actions[b-m7212k5r7g],
.sbmg-side-pick[b-m7212k5r7g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.sbmg-row-message[b-m7212k5r7g] {
    font-size: 0.75rem;
    color: var(--ascend-accent);
}
/* /Components/Shared/StudyPickerList.razor.rz.scp.css */
/* Bug #6604 — scoped styling for the shared picker LIST. Ported from the
   link-resource-* / picker-* rules that lived in StudyDetail.razor.css so both
   StudyDetail and CollectionDetail render the same styled grid (per-component
   scoped CSS is why CollectionDetail's inline copy was unstyled before). */

.resources-empty[b-3xh0t33ujh] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-style: italic;
}

.link-resource-list[b-3xh0t33ujh] {
    flex: 1;
    overflow-y: auto;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 50vh;
}

.link-resource-row[b-3xh0t33ujh] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    width: 100%;
    transition: all 0.15s ease;
}

.link-resource-row:hover:not(:disabled)[b-3xh0t33ujh] {
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.3);
}

.link-resource-row:disabled[b-3xh0t33ujh] {
    opacity: 0.5;
    cursor: not-allowed;
}

.link-resource-cover[b-3xh0t33ujh], .link-resource-cover-placeholder[b-3xh0t33ujh] {
    width: 36px;
    height: 54px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
}

.link-resource-cover-placeholder[b-3xh0t33ujh] {
    background: rgba(49, 221, 227, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ascend-accent);
}

.link-resource-meta[b-3xh0t33ujh] {
    flex: 1;
    min-width: 0;
}

.link-resource-title[b-3xh0t33ujh] {
    color: #ffffff;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-resource-sub[b-3xh0t33ujh] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
}

/* ── Chapter-level rows ─────────────────────────────────────────────── */
.picker-row[b-3xh0t33ujh] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(49, 221, 227, 0.12);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 0.35rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.picker-row:hover:not(.disabled)[b-3xh0t33ujh] {
    border-color: rgba(49, 221, 227, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.picker-row.checked[b-3xh0t33ujh] {
    border-color: rgba(49, 221, 227, 0.6);
    background: rgba(49, 221, 227, 0.08);
}

.picker-row.disabled[b-3xh0t33ujh] {
    opacity: 0.5;
    cursor: not-allowed;
}

.picker-row input[type="checkbox"][b-3xh0t33ujh] {
    margin-top: 0.2rem;
    accent-color: var(--ascend-accent);
}

.picker-meta[b-3xh0t33ujh] {
    flex: 1;
    min-width: 0;
}

.picker-breadcrumb[b-3xh0t33ujh] {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.15rem;
}

.picker-study[b-3xh0t33ujh] {
    color: rgba(49, 221, 227, 0.7);
    font-weight: 500;
}

.picker-sep[b-3xh0t33ujh] {
    color: rgba(255, 255, 255, 0.25);
}

.picker-crumb[b-3xh0t33ujh] {
    color: rgba(255, 255, 255, 0.6);
}

.picker-title[b-3xh0t33ujh] {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
}

.picker-already[b-3xh0t33ujh] {
    color: rgba(184, 133, 54, 0.85);
    font-size: 0.8rem;
    font-style: italic;
}

.picker-subtree-toggle[b-3xh0t33ujh] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 8px;
    color: rgba(184, 133, 54, 0.95);
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.picker-subtree-toggle:hover[b-3xh0t33ujh] {
    background: rgba(184, 133, 54, 0.18);
    border-color: rgba(184, 133, 54, 0.5);
}

.picker-subtree-list[b-3xh0t33ujh] {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid rgba(184, 133, 54, 0.3);
    border-radius: 0 6px 6px 0;
}

.picker-subtree-item[b-3xh0t33ujh] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    line-height: 1.5;
}

.picker-subtree-bullet[b-3xh0t33ujh] {
    color: rgba(184, 133, 54, 0.6);
    font-weight: 600;
}

.picker-subtree-more[b-3xh0t33ujh] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-style: italic;
    margin-top: 0.3rem;
    padding-left: 0.4rem;
}
/* /Components/Shared/StudyPlanEnrichmentBanner.razor.rz.scp.css */
/* #6691 enrichment announcement - quiet note, tokens only (ScopedCssBoundaryTests). */

.enrichment-note[b-cunl85fg58] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.18);
    border-left: 3px solid var(--ascend-accent);
    border-radius: 16px;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.5rem;
}

.enrichment-note-head[b-cunl85fg58] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.enrichment-note-heading[b-cunl85fg58] {
    margin: 0;
    font-family: var(--ascend-font-primary);
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ascend-accent);
}

.enrichment-note-dismiss[b-cunl85fg58] {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.enrichment-note-dismiss:hover[b-cunl85fg58] {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.35);
}

.enrichment-note-message[b-cunl85fg58] {
    margin: 0.6rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.enrichment-note-link[b-cunl85fg58] {
    display: inline-block;
    margin-top: 0.9rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: var(--ascend-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(49, 221, 227, 0.4);
    padding-bottom: 0.1rem;
}

.enrichment-note-link:hover[b-cunl85fg58] {
    color: var(--ascend-accent-light);
    border-bottom-color: var(--ascend-accent-light);
}
/* /Components/Shared/StudyPrepPanel.razor.rz.scp.css */
/* #8550 - the study board's Prep tab card. */
.study-prep[b-rxxno1sz2i] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.5rem;
}

/* #9277 - the color is set here: without it the global h1..h6 rule painted this heading
   --ascend-text-primary (dark slate) on the dark panel, 1:1 contrast. */
.study-prep-heading[b-rxxno1sz2i] {
    margin: 0;
    font-size: 1rem;
    color: var(--ascend-text-light);
}

.study-prep-hint[b-rxxno1sz2i] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.study-prep-line[b-rxxno1sz2i],
.study-prep-note[b-rxxno1sz2i],
.study-prep-error[b-rxxno1sz2i] {
    margin: 0;
    line-height: 1.45;
}

.study-prep-error[b-rxxno1sz2i] {
    color: var(--ascend-error);
}

.study-prep-books[b-rxxno1sz2i],
.study-prep-evidence[b-rxxno1sz2i] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.study-prep-book[b-rxxno1sz2i],
.study-prep-evidence li[b-rxxno1sz2i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--ascend-border);
    border-radius: 6px;
}

.study-prep-also[b-rxxno1sz2i],
.study-prep-whose[b-rxxno1sz2i],
.study-prep-line-label[b-rxxno1sz2i] {
    font-size: 0.85rem;
    color: var(--ascend-text-muted);
}

.study-prep-move[b-rxxno1sz2i],
.study-prep-pv[b-rxxno1sz2i] {
    font-family: var(--font-mono, monospace);
}

.study-prep-pv[b-rxxno1sz2i] {
    overflow-wrap: anywhere;
}

.study-prep-mainline[b-rxxno1sz2i] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
/* /Components/Shared/StudyTaskList.razor.rz.scp.css */
/* Shared Today's-Tasks / study-plan activity row (Dashboard Overhaul #6104).
   Ported from StudyPlan.razor.css (activity/note rows) and Dashboard.razor.css
   (skip dialog) so the two surfaces render identically. */

.study-task-list[b-rwu6xd39st] {
    display: flex;
    flex-direction: column;
}

.activity-row[b-rwu6xd39st] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

/* #7736 follow-on — the status marker measured 18x21 (the bare `bi` glyph at
   1.1rem with padding: 0), which is under WCAG 2.2 AA 2.5.8's 24px floor on a
   MOUSE and nowhere near the 44px a phone needs. It is the control a user
   touches most in the product - it cycles Pending -> InProgress -> Done - and
   it renders on both /dashboard and /study-plan.

   The #7736 sweep missed it for the shape #7248 first recorded: it renders only
   for an account that HAS study-plan tasks, and the CI account has none, so the
   ratchet measured a surface where this control does not exist and reported it
   green. Found by eye on dev at 390px instead.

   THE BOX GROWS; THE GLYPH DOES NOT. font-size is untouched, so the ring and
   the check read exactly as they do today - inline-flex centers them in the
   larger box. No pseudo-element hit area: these rows sit 0.5rem apart in a
   vertical list, so an invisible 44px area on an 18px control would reach into
   the rows above and below and let one task's marker eat its neighbor's taps,
   which is the rule #7736 wrote down. Two floors, the pair that sweep
   established: 24px unconditionally, because 2.5.8 applies to a mouse as well,
   and the full target on a coarse pointer. */
.activity-check[b-rwu6xd39st] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ascend-text-secondary);
    font-size: 1.1rem;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

@media (hover: none) and (pointer: coarse) {
    .activity-check[b-rwu6xd39st] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}

.activity-check:hover[b-rwu6xd39st] {
    color: #31DDE3;
}

.activity-check.checked[b-rwu6xd39st] {
    color: #10b981;
}

/* In-progress — cyan accent so it reads as "active work the coach can credit". */
.activity-check.in-progress[b-rwu6xd39st] {
    color: var(--ascend-accent);
}

.activity-type-badge[b-rwu6xd39st] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.2);
}

.activity-type-badge.book[b-rwu6xd39st] { background: rgba(49, 221, 227, 0.1); border-color: rgba(49, 221, 227, 0.2); }
.activity-type-badge.tactics[b-rwu6xd39st] { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); }
.activity-type-badge.gameanalysis[b-rwu6xd39st] { background: rgba(184, 133, 54, 0.1); border-color: rgba(184, 133, 54, 0.2); }
.activity-type-badge.repertoire[b-rwu6xd39st] { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); }
.activity-type-badge.drill[b-rwu6xd39st] { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.2); }
.activity-type-badge.review[b-rwu6xd39st] { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.2); }
.activity-type-badge.recommendation[b-rwu6xd39st] { background: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.3); }

.activity-info[b-rwu6xd39st] {
    flex: 1;
    min-width: 0;
}

.activity-title[b-rwu6xd39st] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: block;
}

.activity-title a[b-rwu6xd39st] {
    color: #31DDE3;
    text-decoration: none;
}

.activity-title a:hover[b-rwu6xd39st] {
    text-decoration: underline;
}

.activity-desc[b-rwu6xd39st] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    /* #8726 - was rgba(255, 255, 255, 0.45) = #787f89 on the card surface:
       4.48:1, a hair under AA at 11.2px (axe serious on /dashboard, release walk
       2026-10-14). --ascend-text-muted is 7.07:1 on #0a1628. */
    color: var(--ascend-text-muted);
    display: block;
    margin-top: 0.15rem;
    line-height: 1.4;
}

.activity-duration[b-rwu6xd39st] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    /* #8726 - was rgba(255, 255, 255, 0.35) = 3.20:1. --ascend-text-secondary
       (5.94:1 on #0a1628) keeps the duration one visible step quieter than the
       description above, which app.css records as the intent of the two tokens. */
    color: var(--ascend-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.activity-row.activity-in-progress .activity-title[b-rwu6xd39st] {
    color: rgba(49, 221, 227, 0.95);
}

.activity-row.activity-done .activity-title a[b-rwu6xd39st],
.activity-row.activity-done .activity-title[b-rwu6xd39st] {
    text-decoration: line-through;
    opacity: 0.5;
}

.activity-row.activity-done .activity-desc[b-rwu6xd39st] {
    opacity: 0.3;
}

.activity-row.activity-skipped[b-rwu6xd39st] {
    opacity: 0.4;
}

.skip-badge[b-rwu6xd39st] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.activity-note[b-rwu6xd39st] {
    display: block;
    font-size: 0.75rem;
    color: rgba(49, 221, 227, 0.6);
    margin-top: 2px;
}

.activity-note i[b-rwu6xd39st] {
    margin-right: 3px;
}

.activity-actions[b-rwu6xd39st] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* WCAG 2.2 AA 2.5.8 (target size, minimum): Skip / Add-note must present at least
   a 24x24 CSS-px pointer target. The glyph stays 0.8rem - inline-flex centers it
   inside the larger box, so the row reads the same but the hit area is real. */
.act-menu-btn[b-rwu6xd39st] {
    background: none;
    border: none;
    cursor: pointer;
    /* #7232: 0.2 read 1.87:1 - the skip and note controls only appeared on hover. */
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    line-height: 1;
}

/* #7783 sweep - the 24px above is the 2.5.8 floor on a mouse; on a finger these
   two are still 24x24, which is the same miss .activity-check carries the note
   for twenty lines up, in the same row, found the same way. The E2E ratchet
   never sees either: it runs as an account with no study-plan tasks, so it
   measures a /dashboard and /study-plan where this whole list does not exist.
   Measured 24x24 on /dashboard at 390px coarse as demo@ (40 of them).

   Growing the boxes, not a pseudo hit area: Skip and Add-note sit 4px apart, so
   invisible 44px areas would overlap by 40px and the top one would swallow the
   other's taps. The row's own height is set by the task description below the
   title (measured 181px at 344px, 86px at 1440), so the taller buttons do not
   move the row; they only widen .activity-actions from 52px to 92px, which
   .activity-info absorbs - it is flex: 1 with min-width: 0. */
@media (hover: none) and (pointer: coarse) {
    .act-menu-btn[b-rwu6xd39st] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}

.act-menu-btn:hover[b-rwu6xd39st] {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}

/* Note editor */
/* #7788 - wrap is what lets Save and Cancel drop to their own line at phone
   width instead of being pushed off the card. Above the phone band the row
   still fits on one line, so wrapping costs nothing there, and it doubles as a
   safety net: if the row ever stops fitting again the controls take a second
   line rather than leaving the card. */
.note-editor[b-rwu6xd39st] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px 0 4px 36px;
}

.note-input[b-rwu6xd39st] {
    flex: 1;
    /* #7788 - a flex item defaults to min-width: auto and refuses to shrink
       below its own intrinsic width, so this input pushed its siblings out of
       the card instead of compressing. MEASURED at 344px on a coarse pointer
       before this line existed: editor scrollWidth 263 against clientWidth 228,
       with Cancel 11px past the card body. This is what lets it give way. */
    min-width: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 6px;
    color: #ffffff;
    padding: 4px 8px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
}

.note-input:focus[b-rwu6xd39st] {
    outline: none;
    border-color: #31DDE3;
}

/* Same 24x24 minimum as .act-menu-btn - the note editor opens directly from the
   Add-note button, so these are the very next targets the same user reaches for. */
.note-save-btn[b-rwu6xd39st], .note-cancel-btn[b-rwu6xd39st] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    line-height: 1;
}

/* #7788 - the phone-width layout the touch floor below depends on, and the
   OWNER'S CALL on the question #7783 left open (2026-09-20).

   min-width: 0 on .note-input stops the overflow, but on its own it leaves a
   ~96px input at 344px once two 44px buttons sit beside it - about twelve
   characters, too narrow to read back what you just typed into a note. So the
   buttons take their own line here and the input keeps the full card width.
   One row of vertical space, deliberately spent.

   480px and not the pointer query on purpose: this is a WIDTH decision, not a
   finger decision. A coarse pointer at 768px has room for both on one line
   (measured: 472px of input left over), and wrapping there would spend a row
   for nothing. 480px is the same phone band Modal.razor.css stacks its action
   buttons at. */
@media (max-width: 480px) {
    .note-input[b-rwu6xd39st] {
        flex-basis: 100%;
    }
}

/* #7783 / #7788 - the touch floor, applied LAST because it only became safe
   once the row above could hold it. Growing the boxes, not a pseudo-element hit
   area: Save and Cancel sit 4px apart, so invisible 44px areas would overlap by
   40px and whichever painted on top would silently eat the other's taps - the
   trap #7758 hit on the Opening Hub with DELETE on top. */
@media (hover: none) and (pointer: coarse) {
    .note-save-btn[b-rwu6xd39st],
    .note-cancel-btn[b-rwu6xd39st] {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}

.note-save-btn[b-rwu6xd39st] { color: #10b981; }
.note-save-btn:hover[b-rwu6xd39st] { background: rgba(16, 185, 129, 0.1); }
.note-cancel-btn[b-rwu6xd39st] { color: rgba(255, 255, 255, 0.4); }
.note-cancel-btn:hover[b-rwu6xd39st] { background: rgba(255, 255, 255, 0.05); }

/* Skip-with-reason dialog */
.skip-dialog-hint[b-rwu6xd39st] {
    font-family: var(--ascend-font-secondary); font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5); margin: 0 0 1rem;
}
.skip-reason-options[b-rwu6xd39st] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.skip-reason-btn[b-rwu6xd39st] {
    padding: 0.35rem 0.75rem; font-family: var(--ascend-font-secondary);
    font-size: 0.78rem; border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px; background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: all 0.15s;
}
.skip-reason-btn:hover[b-rwu6xd39st] { border-color: rgba(49, 221, 227, 0.3); }
.skip-reason-btn.selected[b-rwu6xd39st] { background: rgba(49, 221, 227, 0.15); border-color: #31DDE3; color: #31DDE3; }
.skip-reason-input[b-rwu6xd39st] {
    width: 100%; padding: 0.5rem 0.75rem; font-family: var(--ascend-font-secondary);
    font-size: 0.85rem; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
    color: #fff; margin-bottom: 1rem;
}
.skip-reason-input:focus[b-rwu6xd39st] { outline: none; border-color: rgba(49, 221, 227, 0.4); }
.skip-reason-input[b-rwu6xd39st]::placeholder { color: rgba(255, 255, 255, 0.3); }
.skip-confirm-btn[b-rwu6xd39st] {
    padding: 0.5rem 1.5rem; background: #fbbf24; color: #0a1628;
    border: none; border-radius: 50px; font-family: var(--ascend-font-secondary);
    font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.skip-cancel-btn[b-rwu6xd39st] {
    padding: 0.5rem 1.5rem; background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px; font-family: var(--ascend-font-secondary);
    font-size: 0.85rem; cursor: pointer;
}

/* Study Plan Basics (Work item 3): method badge + weakness-tied reason. */
.activity-method[b-rwu6xd39st] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    vertical-align: middle;
}
.activity-method.core[b-rwu6xd39st] {
    color: #31DDE3;
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.35);
}
.activity-reason[b-rwu6xd39st] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #B88536;
}
.activity-reason i[b-rwu6xd39st] {
    margin-right: 0.25rem;
    font-size: 0.72rem;
}

/* Mobile: stack the row so the description/why span the full card width instead
   of being squeezed into a thin column next to the duration + action buttons.
   768px matches the breakpoint where both the dashboard and /study-plan reflow
   to a single column.

   #9385 - A FIXED HEADER, NOT A WRAPPING LINE. This used to be a flex line with
   flex-wrap: wrap, asking the marker, the type badge, the minutes and Skip +
   note to share one line. On a coarse pointer that needs ~228px (44 + 32 +
   minutes + 44 + 4 + 44, three 8px gaps); the dashboard's list is 212px wide at
   344, so every row there wrapped its buttons onto a line of their own, and
   /study-plan's today list sits right at the edge, so a row wrapped or not by
   the width of its own minutes text ("20 min" wrapped, "25 min" did not, in one
   list). So the header holds only fixed-size boxes - the marker and badge on
   the left, Skip and the note on the right - and the
   minutes move down beside the title. Same line on every row, at every phone
   width (184px needed on a coarse pointer: 44 + 8 + 32 + 8 + 92). .activity-info is display: contents so its title, description, reason
   and note are placed on this grid directly: the title shares row 2 with the
   minutes, and the rest auto-place below in DOM order, full width.

   Row 1: [check] [badge] ............ [skip] [note]
   Row 2: [title ....................] [minutes]
   Row 3+: description, reason, note (full width) */
@media (max-width: 768px) {
    .activity-row[b-rwu6xd39st] {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        column-gap: 0.5rem;
        row-gap: 0;
        align-items: center;
    }

    .activity-check[b-rwu6xd39st] { grid-column: 1; grid-row: 1; }
    .activity-type-badge[b-rwu6xd39st] { grid-column: 2; grid-row: 1; }
    /* Columns 3-4, not 4: the last column is sized by the minutes below it
       (~40px), and Skip + note (92px on a coarse pointer) span into the
       flexible column beside it, so the minutes' column never widens to the
       buttons' width and steals it from the title. */
    .activity-actions[b-rwu6xd39st] { grid-column: 3 / -1; grid-row: 1; justify-self: end; }

    .activity-info[b-rwu6xd39st] { display: contents; }

    .activity-title[b-rwu6xd39st] {
        grid-column: 1 / 4;
        grid-row: 2;
        align-self: baseline;
        margin-top: 0.35rem;
    }

    .activity-duration[b-rwu6xd39st] {
        grid-column: 4;
        grid-row: 2;
        justify-self: end;
        align-self: baseline;
    }

    .activity-desc[b-rwu6xd39st],
    .activity-reason[b-rwu6xd39st],
    .activity-note[b-rwu6xd39st] {
        grid-column: 1 / -1;
    }
}
/* /Components/Shared/TabiyaFilterBar.razor.rz.scp.css */
.tabiya-filters[b-q1sdjhqcz1] {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
}

.tabiya-filter[b-q1sdjhqcz1] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    /* #7323 - a select sizes to its widest option, and opening names run long
       ("Alekhine Defense Exchange..."), so without these caps the label's
       automatic minimum (min-width: auto) blocks flex shrinking and the whole
       control pushes past a 390px phone viewport. app.css hides overflow-x, so
       the excess was unreachable, not scrollable. A definite min-width releases
       the shrink floor; max-width: 100% caps the label at the filter row's width.
       #9393 - the 220px floor lives HERE, on the label, and gives way to the row:
       min(13.75rem, 100%) is 220px wherever 220px fits. It used to be a bare
       min-width: 220px on the control, which beat the control's max-width (min-width
       wins a conflict), so on Sparring's Tabiya picker at 344 (a 212px row) every
       control ran 8px past its label and the row. It cannot sit on the control as
       min(13.75rem, 100%): the label is sized by its content, so the control's 100%
       is cyclic and the floor vanished at every width (measured: 106, 68 and 197px
       controls at 1440). Here the 100% resolves against the row, which is definite. */
    min-width: min(13.75rem, 100%);
    max-width: 100%;
}

.tabiya-filter-label[b-q1sdjhqcz1] {
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(49, 221, 227, 0.85);
}

.tabiya-filter-input[b-q1sdjhqcz1] {
    /* #9393 - no floor of its own: the label holds it (above), and the column
       flex stretches the control to the label's width. */
    min-width: 0;
    /* #7323 - cap the control at its label so a long option list cannot widen
       it past the viewport; the native select clips option text instead. */
    max-width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
}

.tabiya-filter-input:focus[b-q1sdjhqcz1] {
    outline: none;
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.tabiya-filter-input[b-q1sdjhqcz1]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.tabiya-result-count[b-q1sdjhqcz1] {
    font-family: var(--ascend-font-secondary);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    margin-left: auto;
    align-self: center;
}
/* /Components/Shared/TacticalRecountNote.razor.rz.scp.css */
/* TacticalRecountNote (#9027 chunk 6). Reads as part of the card it sits on, never as page chrome:
   the host's width, one quiet line above the numbers it explains. Tokens only. */

.tactical-recount-note[b-wu5q108jgd] {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.65rem;
    border-left: 2px solid var(--ascend-secondary);
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ascend-text-muted);
}
/* /Components/Shared/TagChips.razor.rz.scp.css */
.tag-chips[b-mpq1pnb3vk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.tag-chip[b-mpq1pnb3vk] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-family: var(--ascend-font-secondary), sans-serif;
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    white-space: nowrap;
    /* #8562 - a chip never grows past its row. In the games list the Game
       cell is overflow:hidden, so a chip wider than the column used to be cut
       off at the cell edge with no way to read it. Capped at the row, the
       NAME truncates instead (below) and its title carries the full text.
       The Lines tab in the repertoire editor gets the same protection. */
    max-width: 100%;
    min-width: 0;
}

.tag-name[b-mpq1pnb3vk] {
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-remove[b-mpq1pnb3vk] {
    display: inline-flex;
    align-items: center;
    /* #8562 - the x keeps its size when the name beside it truncates. */
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    color: rgba(49, 221, 227, 0.7);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
}

.tag-remove:hover[b-mpq1pnb3vk] {
    color: #ef4444;
}

.tag-add[b-mpq1pnb3vk] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-family: var(--ascend-font-secondary), sans-serif;
    color: rgba(255, 255, 255, 0.5);
    background: none;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tag-add:hover[b-mpq1pnb3vk] {
    color: var(--ascend-accent);
    border-color: rgba(49, 221, 227, 0.4);
}

.tag-input[b-mpq1pnb3vk] {
    width: 90px;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 50px;
    outline: none;
}

.tag-input[b-mpq1pnb3vk]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* #6482 — starter-suggestion chips shown next to the add input. Dashed like
   the add affordance (an offer, not an applied tag). */
.tag-suggestion[b-mpq1pnb3vk] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-family: var(--ascend-font-secondary), sans-serif;
    color: rgba(255, 255, 255, 0.5);
    background: none;
    border: 1px dashed rgba(49, 221, 227, 0.3);
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.tag-suggestion:hover[b-mpq1pnb3vk] {
    color: var(--ascend-accent);
    background: rgba(49, 221, 227, 0.08);
    border-color: rgba(49, 221, 227, 0.5);
}


/* #7736 — the tag controls, and the one place in this sweep where the two
   mechanisms genuinely differ.

   .tag-add measured 48x20. TWENTY pixels tall fails WCAG 2.5.8's 24px floor
   on a mouse, not just on a finger, so its floor is UNCONDITIONAL; the touch
   block then takes it the rest of the way to 44.

   .tag-remove is the x INSIDE a chip. Growing it to 44px would inflate every
   chip in the row into a lozenge and change the look of the games list, so it
   gets a pseudo-element hit area instead: the glyph keeps its size, the
   touchable area is centered on it. This is safe HERE specifically because
   each x is the only control inside its own chip and the chips carry a gap —
   the overlap hazard the policy warns about applies to rows of adjacent bare
   buttons, which this is not. */
.tag-add[b-mpq1pnb3vk] {
    min-height: 1.5rem;
}

@media (hover: none) and (pointer: coarse) {
    .tag-add[b-mpq1pnb3vk] {
        min-height: var(--touch-target);
    }

    .tag-remove[b-mpq1pnb3vk] {
        position: relative;
    }

    .tag-remove[b-mpq1pnb3vk]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--touch-target);
        height: var(--touch-target);
        transform: translate(-50%, -50%);
    }
}
/* /Components/Shared/TestimonialWall.razor.rz.scp.css */
/* Testimonial wall (#6875 follow-through).

   Moved here from Home.razor.css when the coach page became the second
   consumer. The markup now carries THIS component's scope attribute, so the
   landing page's scoped rules no longer reach it - the section has to own its
   own spacing and heading style rather than inherit the host page's.

   Raw brand hex from the original block was swapped for tokens on the way in
   (the cite colour was a literal #B88536). */

.lp-proof[b-0wop5194ds] {
    margin-top: 5rem;
    padding: 0 1rem;
}

.lp-section-title[b-0wop5194ds] {
    font-family: var(--ascend-font-primary);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-align: left;
    margin: 0 0 1rem;
    line-height: 1.15;
}

/* #9167 - the section's disclosure line, set exactly like the cites (same face, size, case,
   tracking and color), so it reads at their weight rather than as small print. It is a
   QuoteDisclosure child, so ::deep. */
[b-0wop5194ds] .lp-proof-disclosure {
    max-width: 900px;
    margin: 0 auto 1.25rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-secondary);
}

.lp-proof-grid[b-0wop5194ds] {
    display: grid;
    /* #9172 walk - min() so the column floor never exceeds the space it has. A bare
       320px floor is wider than a 344px phone's 312px content box, so every card
       ran 8px past the viewport and lost its right border to the page's clip. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.lp-proof-quote[b-0wop5194ds] {
    margin: 0;
    padding: 2rem 1.75rem;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 16px;
    position: relative;
}

.lp-proof-quote[b-0wop5194ds]::before {
    content: '"';
    position: absolute;
    top: 0.25rem;
    left: 1rem;
    font-family: Georgia, serif;
    font-size: 4rem;
    color: rgba(49, 221, 227, 0.3);
    line-height: 1;
}

.lp-proof-quote p[b-0wop5194ds] {
    font-family: var(--ascend-font-primary);
    font-size: 1.15rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.lp-proof-quote cite[b-0wop5194ds] {
    display: block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-secondary);
    padding-left: 1.5rem;
}

@media (max-width: 767.98px) {
    .lp-proof[b-0wop5194ds] {
        margin-top: 3.5rem;
    }

    .lp-proof-quote p[b-0wop5194ds] {
        font-size: 1rem;
        padding-left: 1rem;
    }

    .lp-proof-quote cite[b-0wop5194ds] {
        padding-left: 1rem;
    }
}
/* /Components/Shared/ThinSampleNotice.razor.rz.scp.css */
/* ThinSampleNotice (#6763). Quiet but not hidden: it has to read as part of
   the number it qualifies, never as page chrome, so it inherits the host's
   width and sits tight under the statistic. Tokens only - no raw brand hex,
   no font literals. */

.thin-sample-notice[b-kyfn8qo36v] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.35rem 0 0;
    padding: 0;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: 0.75rem;
    line-height: 1.45;
    /* #7543 - was rgba(255,255,255,0.6): 3.79:1 measured by axe on the
       dashboard's skill-checkpoint panel. */
    color: var(--ascend-text-muted);
}

.thin-sample-notice-icon[b-kyfn8qo36v] {
    color: var(--ascend-secondary);
    flex-shrink: 0;
    font-size: 0.72rem;
}

.thin-sample-notice-text[b-kyfn8qo36v] {
    flex: 1;
    min-width: 0;
}
/* /Components/Shared/TimeOfDaySelect.razor.rz.scp.css */
/* #8714 - the shared time-of-day select. .form-input is the global dark input (app.css). */
.tod-select[b-0k2ctky28u] {
    min-width: 0;
    max-width: 100%;
    font-variant-numeric: tabular-nums;
}

@media (hover: none) and (pointer: coarse) {
    .tod-select[b-0k2ctky28u] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/TimeZoneSelect.razor.rz.scp.css */
/* #8714 - the shared time zone select. .form-input is the global dark input (app.css). */
.tz-select[b-owr8dq5vll] {
    min-width: 0;
    width: 100%;
    max-width: 28rem;
    box-sizing: border-box;
}

@media (hover: none) and (pointer: coarse) {
    .tz-select[b-owr8dq5vll] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/TocReviewModal.razor.rz.scp.css */
.toc-modal-overlay[b-3a1rju4uvv] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    backdrop-filter: blur(4px);
}

.toc-modal-card[b-3a1rju4uvv] {
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.99) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 2px solid rgba(49, 221, 227, 0.3);
    border-radius: 24px;
    padding: 2rem;
    width: min(560px, 90vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
}

.toc-scanning-overlay[b-3a1rju4uvv] {
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 40, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 10;
    border-radius: 24px;
}

.toc-scanning-spinner[b-3a1rju4uvv] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(49, 221, 227, 0.2);
    border-top-color: #31DDE3;
    border-radius: 50%;
    animation: tocSpin-b-3a1rju4uvv 1s linear infinite;
}

@keyframes tocSpin-b-3a1rju4uvv {
    to { transform: rotate(360deg); }
}

.toc-scanning-text[b-3a1rju4uvv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.toc-modal-title[b-3a1rju4uvv] {
    font-family: var(--ascend-font-primary);
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0 0 0.5rem;
}

.toc-modal-subtitle[b-3a1rju4uvv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.toc-chapter-list[b-3a1rju4uvv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    max-height: 400px;
    padding-right: 0.25rem;
    margin-bottom: 1.25rem;
}

.toc-chapter-item[b-3a1rju4uvv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: padding-left 0.15s ease;
}

/* Indent/outdent controls */
.toc-indent-controls[b-3a1rju4uvv] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.toc-indent-btn[b-3a1rju4uvv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.toc-indent-btn:hover:not(:disabled)[b-3a1rju4uvv] {
    background: rgba(49, 221, 227, 0.1);
    border-color: rgba(49, 221, 227, 0.3);
    color: #31DDE3;
}

.toc-indent-btn:disabled[b-3a1rju4uvv] {
    opacity: 0.25;
    cursor: not-allowed;
}

/* Game entry icon */
.toc-game-icon[b-3a1rju4uvv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(184, 133, 54, 0.1);
    border: 1px solid rgba(184, 133, 54, 0.25);
    border-radius: 6px;
    color: var(--ascend-secondary);
    flex-shrink: 0;
}

.toc-chapter-number[b-3a1rju4uvv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(49, 221, 227, 0.1);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 6px;
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    color: #31DDE3;
    flex-shrink: 0;
}

.toc-chapter-input[b-3a1rju4uvv] {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 8px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.toc-chapter-input:focus[b-3a1rju4uvv] {
    outline: none;
    border-color: #31DDE3;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

/* #6946 - .toc-puzzle-count rides on the inner <input> of a child <NumberInput>,
   so NONE of this ever applied: the count field has been rendering as an unstyled
   browser-default (white, system-font) box wedged between the dark .toc-chapter-input
   and .toc-theme-dropdown. Restored, but split across two targets because the
   original rule predates the NumberInput migration and no longer fits it:

   - WIDTH goes on .number-input-wrapper. NumberInput anchors its +/- spinner
     buttons to the wrapper, so sizing only the inner input would strand the
     carets off the field's right edge. The literal 50px is widened to 4.5rem:
     NumberInput reserves a 1.6rem right gutter for those spinners, and 50px
     left roughly one digit of usable room against a Max of 999.
   - PAINT goes on the inner input via ::deep. Note padding is set per-side:
     NumberInput owns padding-right (the spinner gutter), so the shorthand would
     fight it. `text-align: center` is dropped for the same reason - there is no
     honest center to align to once a gutter is reserved on one side only. */
.toc-chapter-item[b-3a1rju4uvv]  .number-input-wrapper {
    flex: 0 0 auto;
    width: 4.5rem;
}

[b-3a1rju4uvv] .toc-puzzle-count {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    padding-block: 0.35rem;
    padding-left: 0.4rem;
}

[b-3a1rju4uvv] .toc-puzzle-count::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.toc-theme-dropdown[b-3a1rju4uvv] {
    width: 90px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    padding: 0.35rem 0.25rem;
    flex-shrink: 0;
}

.toc-theme-dropdown option[b-3a1rju4uvv] {
    background: #0f172a;
    color: #ffffff;
}

.toc-remove-btn[b-3a1rju4uvv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--ascend-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.toc-remove-btn:hover[b-3a1rju4uvv] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--ascend-text-light);
}

.toc-empty-message[b-3a1rju4uvv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 1rem 0;
}

.toc-modal-actions[b-3a1rju4uvv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toc-actions-right[b-3a1rju4uvv] {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

.toc-btn-scan-another[b-3a1rju4uvv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(49, 221, 227, 0.08);
    color: #31DDE3;
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 50px;
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toc-btn-scan-another:hover[b-3a1rju4uvv] {
    background: rgba(49, 221, 227, 0.15);
    border-color: rgba(49, 221, 227, 0.4);
}

.toc-btn-primary[b-3a1rju4uvv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #31DDE3 0%, #42e8ed 100%);
    color: #0f172a;
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(49, 221, 227, 0.3);
}

.toc-btn-primary:hover:not(:disabled)[b-3a1rju4uvv] {
    box-shadow: 0 6px 20px rgba(49, 221, 227, 0.4);
    transform: translateY(-1px);
}

.toc-btn-primary:disabled[b-3a1rju4uvv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.toc-btn-secondary[b-3a1rju4uvv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--ascend-font-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toc-btn-secondary:hover[b-3a1rju4uvv] {
    background: rgba(255, 255, 255, 0.12);
}
/* Responsive */
@media (max-width: 768px) {
    .toc-modal-card[b-3a1rju4uvv] {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .toc-modal-actions[b-3a1rju4uvv] {
        flex-direction: column;
    }

    .toc-actions-right[b-3a1rju4uvv] {
        width: 100%;
        flex-direction: column;
        margin-left: 0;
    }

    .toc-btn-primary[b-3a1rju4uvv],
    .toc-btn-secondary[b-3a1rju4uvv],
    .toc-btn-scan-another[b-3a1rju4uvv] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Shared/TrailGuideSteeringCard.razor.rz.scp.css */
.trail-guide-steer[b-fi7n3om62i] {
    margin: 1.25rem 0 0.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 16px;
    /* Develop build 11079 follow-on - this was linear-gradient(135deg,
       rgba(15,23,42,0.92), rgba(10,22,40,0.88)): two near-identical navies, which axe
       cannot resolve, so `.tg-now` failed the /opening-hub axe gate once the steering
       had data. This is the gradient's (premultiplied) midpoint, so the card looks the
       same and axe judges its text. Pinned by AxeDecidableTextSurfaceTests. */
    background: rgba(13, 23, 41, 0.9);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.tg-head[b-fi7n3om62i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.tg-head[b-fi7n3om62i]  i {
    color: var(--ascend-accent);
    font-size: 1.05rem;
}

.tg-label[b-fi7n3om62i] {
    font-family: 'condor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.tg-coarse[b-fi7n3om62i] {
    margin-left: auto;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #B88536;
    border: 1px solid rgba(184, 133, 54, 0.45);
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
}

.tg-now[b-fi7n3om62i] {
    margin: 0 0 0.4rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.5;
}

.tg-now strong[b-fi7n3om62i] {
    color: #31DDE3;
    font-weight: 600;
}

.tg-reason[b-fi7n3om62i] {
    margin: 0 0 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    line-height: 1.6;
}

.tg-actions[b-fi7n3om62i] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.tg-start[b-fi7n3om62i] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #B88536;
    font-size: 0.88rem;
    text-decoration: none;
    font-weight: 600;
}

.tg-start:hover[b-fi7n3om62i] {
    color: #d4a04a;
}

.tg-start[b-fi7n3om62i]  i {
    font-size: 0.8rem;
}

/* Develop build 11079 follow-on (#7736) - "Start here" is a text link, 87x23 on a
   coarse pointer at 390. It shares the actions row with the Ask-your-coach button, so
   the real box grows (no pseudo-element hit area, which would reach over that
   button); align-items: center keeps the label where it was. Desktop is unchanged. */
@media (hover: none) and (pointer: coarse) {
    .tg-start[b-fi7n3om62i] {
        min-height: var(--touch-target);
    }
}
/* /Components/Shared/TranspositionAuditPanel.razor.rz.scp.css */
/* #6543 - transposition-consistency audit panel. Sits under the Preparation
   panel on the Find & Fix surface; header/card treatment mirrors
   PreparationPanel, row treatment mirrors TranspositionBanner so the two
   transposition surfaces read as one feature. */
.tap-panel[b-seexngyzk9] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 22, 40, 0.9));
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 16px;
    padding: 1.25rem;
    position: relative;
    margin-top: 0.75rem;
}

.tap-panel[b-seexngyzk9]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%);
    border-radius: 16px 16px 0 0;
}

.tap-panel-header[b-seexngyzk9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.tap-panel-header h3[b-seexngyzk9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--ascend-accent);
    margin: 0;
    text-transform: uppercase;
}

.tap-count[b-seexngyzk9] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.tap-panel-content[b-seexngyzk9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tap-loading[b-seexngyzk9],
.tap-error[b-seexngyzk9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    padding: 0.5rem 0;
}

.tap-error[b-seexngyzk9] {
    color: #fca5a5;
}

.tap-loading .spin[b-seexngyzk9] {
    animation: tap-spin-b-seexngyzk9 1.2s linear infinite;
}

@keyframes tap-spin-b-seexngyzk9 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.tap-intro[b-seexngyzk9] {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}

/* One divergent position: board thumbnail + its arrivals. */
.tap-divergence[b-seexngyzk9] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.6rem;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 0.6rem;
    background: rgba(245, 158, 11, 0.06);
}

/* Static thumbnail: cap the shared ChessBoard, suppress interaction. */
.tap-board[b-seexngyzk9] {
    flex: 0 0 auto;
    width: 132px;
}

.tap-board[b-seexngyzk9]  .chessboard-container {
    width: 132px;
}

.tap-board[b-seexngyzk9]  .chessboard {
    width: 132px;
    height: 132px;
    pointer-events: none;
}

.tap-occurrences[b-seexngyzk9] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    flex: 1;
}

.tap-occurrence[b-seexngyzk9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

/* Quiet-link path, same idiom as the banner's tb-occ-path. */
.tap-occ-path[b-seexngyzk9] {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.76rem;
    text-align: left;
    text-decoration: underline dotted rgba(255, 255, 255, 0.35);
    text-underline-offset: 2px;
}

.tap-occ-path:hover[b-seexngyzk9] {
    color: var(--ascend-accent-light);
    text-decoration-color: var(--ascend-accent-light);
}

.tap-occ-reply[b-seexngyzk9] {
    color: #6ee7d6;
    font-size: 0.78rem;
}

.tap-occ-leaf[b-seexngyzk9] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.76rem;
    font-style: italic;
}

.tap-occ-align[b-seexngyzk9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 0.4rem;
    background: rgba(49, 221, 227, 0.14);
    color: var(--ascend-accent-light);
    padding: 0.22rem 0.55rem;
    font-size: 0.76rem;
    cursor: pointer;
}

.tap-occ-align:hover:not(:disabled)[b-seexngyzk9] {
    background: rgba(49, 221, 227, 0.24);
}

.tap-occ-align:disabled[b-seexngyzk9] {
    opacity: 0.55;
    cursor: default;
}

@media (max-width: 640px) {
    .tap-divergence[b-seexngyzk9] {
        flex-direction: column;
    }
}
/* /Components/Shared/TranspositionBanner.razor.rz.scp.css */
/* #5964/#6542 - transposition awareness banner (moved from RepertoireEditor's
   page CSS when the badge grew per-occurrence rows + the graft action). */
.transposition-badge[b-vcmvqgljn0] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.6rem 0 0.2rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 0.6rem;
    background: rgba(49, 221, 227, 0.07);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
}

.transposition-badge > i[b-vcmvqgljn0] {
    color: var(--ascend-accent);
    margin-top: 0.1rem;
}

.tb-body[b-vcmvqgljn0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1;
}

.tb-headline[b-vcmvqgljn0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* #6542 - divergence badge: the book answers this position differently
   depending on the move order that reached it. Amber, not red - it is an
   authoring inconsistency to resolve, not an error state. */
.tb-diverge-badge[b-vcmvqgljn0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 0.4rem;
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    font-size: 0.74rem;
}

.tb-diverge-badge i[b-vcmvqgljn0] {
    color: #fbbf24;
}

.tb-occurrence[b-vcmvqgljn0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

/* Clickable path - navigates the editor to that occurrence. Styled as a
   quiet link, not a button, so the row reads "via 1.e4 c5 2.Nf3 ...". */
.tb-occ-path[b-vcmvqgljn0] {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.76rem;
    text-align: left;
    text-decoration: underline dotted rgba(255, 255, 255, 0.35);
    text-underline-offset: 2px;
}

.tb-occ-path:hover[b-vcmvqgljn0] {
    color: var(--ascend-accent-light);
    text-decoration-color: var(--ascend-accent-light);
}

.tb-occ-reply[b-vcmvqgljn0] {
    color: #6ee7d6;
    font-size: 0.78rem;
}

/* One-click transpose-and-graft action. */
.tb-occ-graft[b-vcmvqgljn0] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(49, 221, 227, 0.4);
    border-radius: 0.4rem;
    background: rgba(49, 221, 227, 0.14);
    color: var(--ascend-accent-light);
    padding: 0.22rem 0.55rem;
    font-size: 0.76rem;
    cursor: pointer;
}

.tb-occ-graft:hover:not(:disabled)[b-vcmvqgljn0] {
    background: rgba(49, 221, 227, 0.24);
}

.tb-occ-graft:disabled[b-vcmvqgljn0] {
    opacity: 0.55;
    cursor: default;
}

.tb-status[b-vcmvqgljn0] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
}

.tb-status.success[b-vcmvqgljn0] {
    color: #10b981;
}

.tb-status.error[b-vcmvqgljn0] {
    color: #fca5a5;
}
/* /Components/Shared/TrendChart.razor.rz.scp.css */
.trend-chart-container[b-580kld2w7b] {
    position: relative;
}

.trend-chart-svg[b-580kld2w7b] {
    width: 100%;
    height: auto;
    display: block;
}

.chart-empty[b-580kld2w7b] {
    text-align: center;
    padding: 1.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
}

.chart-y-labels[b-580kld2w7b] {
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.chart-y-labels span[b-580kld2w7b] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
}
/* /Components/Shared/TrimBranchScope.razor.rz.scp.css */
/* #7086 - the branch root reads first and loudest; the path to it is context.
   The visual hierarchy IS the fix: same information, opposite emphasis. */

.trim-branch-scope[b-l6ezi4vm1k] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.trim-branch-root[b-l6ezi4vm1k] {
    font-family: var(--ascend-font-secondary);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ascend-accent);
    white-space: nowrap;
}

.trim-branch-context[b-l6ezi4vm1k] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8125rem;
    color: var(--ascend-text-muted);
    /* Wraps rather than scrolling - a long trunk must never push the row wide
       enough to hide the impact count on the right (#6263 kept that honest). */
    overflow-wrap: anywhere;
}
/* /Components/Shared/TwicGameTag.razor.rz.scp.css */
/* #9437 follow-up - the same small upright label as the online-game tag (#9332): it states where
   the game came from, so it carries no accent color and no icon. */
.twic-game-tag[b-1dvwfz32l9] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--ascend-text-muted);
    border: 1px solid currentColor;
    border-radius: 50px;
    padding: 0 0.5rem;
    white-space: nowrap;
    align-self: flex-start;
}
/* /Components/Shared/UscfLookupInline.razor.rz.scp.css */
/* UscfLookupInline (#6981) - styles moved verbatim from Onboarding.razor.css
   when the USCF lookup was extracted into this shared component (page-scoped
   rules cannot reach child-component markup, so the rules live with the
   markup now). Both onboarding surfaces and the guided path's rating offer
   render this one panel. */

.uscf-connect-form[b-6cwwbiq9xp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.uscf-input-row[b-6cwwbiq9xp] {
    display: flex;
    gap: 0.5rem;
}

.uscf-input[b-6cwwbiq9xp] {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(49, 221, 227, 0.2);
    border-radius: 12px;
    color: #ffffff;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
    outline: none;
}

.uscf-input:focus[b-6cwwbiq9xp] {
    border-color: var(--ascend-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.uscf-input[b-6cwwbiq9xp]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.uscf-lookup-btn[b-6cwwbiq9xp] {
    background: rgba(49, 221, 227, 0.1);
    color: var(--ascend-accent);
    border: 1px solid rgba(49, 221, 227, 0.3);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.uscf-lookup-btn:hover:not(:disabled)[b-6cwwbiq9xp] {
    background: rgba(49, 221, 227, 0.2);
    border-color: rgba(49, 221, 227, 0.5);
}

.uscf-lookup-btn:disabled[b-6cwwbiq9xp] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* uscf-lookup-btn icon inherits color from parent */

.uscf-result[b-6cwwbiq9xp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
}

.uscf-result-info[b-6cwwbiq9xp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.uscf-result-name[b-6cwwbiq9xp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uscf-result-rating[b-6cwwbiq9xp] {
    font-family: var(--ascend-font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ascend-accent);
    flex-shrink: 0;
}

.uscf-confirm-btn[b-6cwwbiq9xp] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: var(--ascend-primary-dark);
    border: none;
    border-radius: 50px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.uscf-confirm-btn:hover:not(:disabled)[b-6cwwbiq9xp] {
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.uscf-confirm-btn:disabled[b-6cwwbiq9xp] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* uscf-confirm-btn icon inherits color from parent */

/* USCF Search Results List */
.uscf-results-list[b-6cwwbiq9xp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid rgba(49, 221, 227, 0.15);
    border-radius: 12px;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.02);
}

.uscf-result-item[b-6cwwbiq9xp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
    color: inherit;
    font-family: inherit;
}

.uscf-result-item:hover[b-6cwwbiq9xp] {
    background: rgba(49, 221, 227, 0.1);
}

.uscf-result-details[b-6cwwbiq9xp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.uscf-result-id[b-6cwwbiq9xp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

.uscf-result-state[b-6cwwbiq9xp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

.uscf-error[b-6cwwbiq9xp] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    color: #ef4444;
    padding: 0 0.25rem;
}
/* /Components/Shared/VerifierResultView.razor.rz.scp.css */
.verifier-result[b-rvxspv4kqt] {
    margin: 0.75rem 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--ascend-border);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.verifier-result.running[b-rvxspv4kqt] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    color: var(--ascend-text-secondary);
}

.verifier-result.pass[b-rvxspv4kqt] {
    border-color: var(--ascend-success);
    background: rgba(16, 185, 129, 0.08);
}

.verifier-result.fail[b-rvxspv4kqt] {
    border-color: var(--ascend-error);
    background: rgba(239, 68, 68, 0.08);
}

.verifier-result.unavailable[b-rvxspv4kqt] {
    border-color: var(--ascend-warning);
    background: rgba(184, 133, 54, 0.08);
}

/* #6665 - the distinct miscategorised-for-bank outcome (retire-and-reclassify,
   not correct-in-place): gold, deliberately neither the pass green nor the
   fail red, because the content is neither wrong nor right for its bank. */
.verifier-result.miscat[b-rvxspv4kqt] {
    border-color: var(--ascend-secondary);
    background: rgba(184, 133, 54, 0.08);
}

.verifier-head[b-rvxspv4kqt] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.verifier-chip[b-rvxspv4kqt] {
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    /* #8260 - the panel is always on a dark surface; --ascend-text-primary is the
       dark text for the light body and read 1.05:1 here. */
    color: var(--ascend-text-light);
    border: 1px solid var(--ascend-border);
}

.verifier-chip.pass[b-rvxspv4kqt] {
    color: var(--ascend-success);
    border-color: var(--ascend-success);
}

.verifier-chip.fail[b-rvxspv4kqt] {
    /* #8260 - red text on a red tint: the 400-level step (#7905), 3.74:1 at the 500. */
    color: var(--ascend-error-light);
    border-color: var(--ascend-error);
}

.verifier-chip.unavailable[b-rvxspv4kqt] {
    color: var(--ascend-warning);
    border-color: var(--ascend-warning);
}

.verifier-chip.miscat[b-rvxspv4kqt] {
    color: var(--ascend-secondary-light);
    border-color: var(--ascend-secondary);
}

.verifier-checkedby[b-rvxspv4kqt] {
    font-size: 0.8rem;
    color: var(--ascend-text-muted);
}

.verifier-verdict[b-rvxspv4kqt] {
    margin: 0;
    font-size: 0.92rem;
    /* #8260 - was --ascend-text-primary (#0f172a), 1.04:1 on this dark panel. */
    color: var(--ascend-text-light);
    font-style: normal;
}

.verifier-detail[b-rvxspv4kqt] {
    margin: 0;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--ascend-text-secondary);
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* #6665 - the per-claim breakdown. One row per named check so the SME can see
   WHICH claim held, which was refuted, and which could not be checked at all. */
.verifier-checks[b-rvxspv4kqt] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.verifier-check[b-rvxspv4kqt] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid var(--ascend-border);
}

.verifier-check.pass[b-rvxspv4kqt] { border-left-color: var(--ascend-success); }
.verifier-check.fail[b-rvxspv4kqt] { border-left-color: var(--ascend-error); }
.verifier-check.unavailable[b-rvxspv4kqt] { border-left-color: var(--ascend-warning); }
.verifier-check.authored[b-rvxspv4kqt] { border-left-color: var(--ascend-secondary); }
.verifier-check.advisory[b-rvxspv4kqt] { border-left-color: var(--ascend-accent); }

.check-status[b-rvxspv4kqt] {
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    align-self: center;
}

.verifier-check.pass .check-status[b-rvxspv4kqt] { color: var(--ascend-success); }
.verifier-check.fail .check-status[b-rvxspv4kqt] { color: var(--ascend-error-light); } /* #8260 - 4.30:1 at the 500 */
.verifier-check.unavailable .check-status[b-rvxspv4kqt] { color: var(--ascend-warning); }
.verifier-check.authored .check-status[b-rvxspv4kqt] { color: var(--ascend-secondary); }
.verifier-check.advisory .check-status[b-rvxspv4kqt] { color: var(--ascend-accent); }

.check-name[b-rvxspv4kqt] {
    font-size: 0.86rem;
    font-weight: 600;
    /* #8260 - the check name is what an SME reads before overriding a refusal
       (#8050); was --ascend-text-primary (#0f172a), 1.04:1 on the check row. */
    color: var(--ascend-text-light);
}

.check-by[b-rvxspv4kqt] {
    grid-column: 2;
    font-size: 0.72rem;
    color: var(--ascend-text-muted);
}

.check-detail[b-rvxspv4kqt] {
    grid-column: 2;
    font-size: 0.8rem;
    color: var(--ascend-text-secondary);
    word-break: break-word;
}

@media (max-width: 40rem) {
    .verifier-check[b-rvxspv4kqt] {
        grid-template-columns: 1fr;
    }

    .check-by[b-rvxspv4kqt],
    .check-detail[b-rvxspv4kqt] {
        grid-column: 1;
    }
}

.verifier-note[b-rvxspv4kqt] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ascend-warning);
}

.verifier-result[b-rvxspv4kqt]  i {
    font-size: 16px;
}
/* /Components/Shared/VisionTeachPanel.razor.rz.scp.css */
/* #9084 - the vision drills' miss teaching (see VisionTeachPanel.razor). The copy and its
   hierarchy are the old teach card's (title, the rule lines, the time penalty pill, the
   paused line); what changed is WHERE it sits, so the sizes come down to fit a dock's
   reading half (20rem beside a desktop board, the room under a phone board) and there is
   no backdrop, no blur and no fixed positioning anywhere in this file.

   FLAT, NEVER A GRADIENT. In the dock the surface is the dock's own flat card color, and
   framed it is that same token: axe cannot decide a text contrast over a gradient (the old
   card's two-stop navy), which is why every dock surface is flat (#7862,
   AxeDecidableTextSurfaceTests). */

/* Idle: the always-mounted live region, empty. No padding, no border, no margin: it takes no
   space. Not display: none, which would drop it from the accessibility tree. */
.vision-teach[b-idh3odvma2] {
    margin: 0;
    padding: 0;
}

.vision-teach.is-shown[b-idh3odvma2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ascend-font-secondary);
}

/* Board Vision's board-less modes: its own card in flow under the answer buttons. */
.vision-teach.is-framed[b-idh3odvma2] {
    max-width: 520px;
    margin: 1rem auto 0;
    padding: 1rem 1.25rem;
    background: var(--ascend-bg-card);
    border: 2px solid rgba(184, 133, 54, 0.5);
    border-radius: 16px;
}

.vision-teach-head[b-idh3odvma2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.vision-teach-head i[b-idh3odvma2] {
    font-size: 1.25rem;
    color: var(--ascend-secondary);
}

.vision-teach-title[b-idh3odvma2] {
    font-family: var(--ascend-font-primary);
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    color: var(--ascend-text-light);
}

.vision-teach-line[b-idh3odvma2] {
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}

.vision-teach-meta[b-idh3odvma2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.9rem;
    margin-top: 0.35rem;
}

.vision-teach-penalty[b-idh3odvma2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: var(--ascend-error-light);
    font-size: 0.85rem;
    font-weight: 600;
}

.vision-teach-paused[b-idh3odvma2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.02rem;
}

.vision-teach-paused i[b-idh3odvma2] {
    color: var(--ascend-accent);
}
/* /Components/Shared/WalledShell.razor.rz.scp.css */
/* PBI #6825 - minimal walled chrome. Reuses the auth-page visual language
   (accent line, logo section, dark radial backdrop) without any app nav.
   Tokens only - no raw brand hex (CLAUDE.md). */

.walled-shell[b-2492cgfawe] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ascend-bg-dark);
    background-image: radial-gradient(ellipse at 50% 0%, rgba(49, 221, 227, 0.06) 0%, transparent 60%),
                      radial-gradient(ellipse at 80% 50%, rgba(184, 133, 54, 0.04) 0%, transparent 50%);
}

/* The accent line the auth cards carry, promoted to the shell's top edge. */
.walled-accent-line[b-2492cgfawe] {
    height: 4px;
    background: linear-gradient(90deg, var(--ascend-accent), var(--ascend-secondary));
    flex-shrink: 0;
}

.walled-header[b-2492cgfawe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid rgba(49, 221, 227, 0.12);
}

.walled-brand[b-2492cgfawe] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.walled-brand-logo[b-2492cgfawe] {
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

.walled-brand-name[b-2492cgfawe] {
    font-family: var(--ascend-font-primary);
    font-size: 1.15rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.walled-actions[b-2492cgfawe] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
}

.walled-action-link[b-2492cgfawe] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.walled-action-link:hover[b-2492cgfawe] {
    color: var(--ascend-accent);
}

/* Each hosted page keeps its own centering/backdrop (.callback-page,
   .subscribe-plan-page, .pricing-page); the shell just fills the remaining
   height. */
.walled-main[b-2492cgfawe] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (max-width: 480px) {
    .walled-header[b-2492cgfawe] {
        padding: var(--space-sm) var(--space-md);
    }

    .walled-brand-name[b-2492cgfawe] {
        display: none;
    }

    .walled-action-link span[b-2492cgfawe] {
        font-size: 0.85rem;
    }

    /* #8715 review round 4 - a 44px touch target on a phone, now that the
       header can carry a second action (the walled Coach Lessons link). */
    .walled-action-link[b-2492cgfawe] {
        min-height: 44px;
    }
}
/* /Components/Shared/WdlBar.razor.rz.scp.css */
/* WdlBar — shared Win/Draw/Loss bar component */

.wdl-bar[b-3z3pe2753t] {
    display: flex;
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

/* Size variants */
.wdl-sm[b-3z3pe2753t] {
    height: 6px;
}

.wdl-md[b-3z3pe2753t] {
    height: 8px;
}

.wdl-lg[b-3z3pe2753t] {
    height: 18px;
    border-radius: 4px;
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    font-weight: 600;
}

/* Segments */
.wdl-seg[b-3z3pe2753t] {
    min-width: 1px;
}

.wdl-white[b-3z3pe2753t] {
    background: #e8e8e8;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wdl-draw[b-3z3pe2753t] {
    background: #6b7280;
    color: var(--ascend-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wdl-black[b-3z3pe2753t] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Shared/WeekdaySelect.razor.rz.scp.css */
/* #8602 review round 2 - the shared weekday select. .form-input is the global input (app.css).
   The global select rule draws its caret as a background-image, and axe declines to judge text
   over any background image ("could not be determined due to a background image", an incomplete
   color-contrast node). So this select drops the image and keeps its opaque .form-input fill, and
   the caret is drawn by the wrapper's pseudo-element from borders only (no background, so axe has
   nothing to abstain on), with pointer-events off so a tap still reaches the select. */
.weekday-select-wrap[b-ko4n8n6wf0] {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.weekday-select-wrap[b-ko4n8n6wf0]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.95rem;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--ascend-accent);
    border-bottom: 2px solid var(--ascend-accent);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.weekday-select-wrap:has(.weekday-select:disabled)[b-ko4n8n6wf0]::after {
    opacity: 0.55;
}

.weekday-select[b-ko4n8n6wf0] {
    background-image: none;
    width: auto;
    min-width: 9rem;
    max-width: 100%;
    min-height: var(--touch-target, 44px);
}
/* /Components/Shared/WeeklyRecapCard.razor.rz.scp.css */
/* Weekly recap card. Compact three-beat layout (worked on / key number / next).
   The shared Card owns its chrome; this styles the recap body. Direction colors
   are brand accents (cyan / gold), NOT green-red good/bad - the reused headline
   already states whether a move is good, and blunder-rate "up" is bad, so a
   good/bad color here would mislead. */

/* #6946 - a `.weekly-recap-card.weekly-recap-card { position: relative; overflow: hidden }`
   rule stood here to "raise specificity over .ascend-card". It never applied (the class
   rides on the child <Card>, so the doubled selector still compiled to
   `.weekly-recap-card.weekly-recap-card[b-xxx]` and matched nothing) - and it never
   needed to: Card.razor.css already sets BOTH `position: relative` and `overflow: hidden`
   on `.ascend-card`, which is what anchors .wr-accent-line below. Deleted as redundant. */

.wr-accent-line[b-k8gs4r3jhg] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #31DDE3, #B88536);
}

.wr-eyebrow[b-k8gs4r3jhg] {
    margin: 0.25rem 0 1rem;
    font-family: 'condor', sans-serif;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    color: #31DDE3;
}

.wr-beat[b-k8gs4r3jhg] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 0;
}

.wr-beat + .wr-beat[b-k8gs4r3jhg] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* #8264: was rgba(255, 255, 255, 0.45) - 4.48:1 on the card (#787f89 on
   #0a1628), just under AA for this 10.5px label. The honest-consistency flag
   adds a "Your study days" beat that wears it, so axe on /progress failed with
   the flag on. The brand secondary-text token (docs/design/brand-tokens.md:
   labels and helper text at any size) reads 5.94:1 here, pinned by
   InheritedContrastRatchetTests, and stays quieter than the beat text. */
.wr-beat-label[b-k8gs4r3jhg] {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ascend-text-secondary);
}

.wr-beat-text[b-k8gs4r3jhg] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

.wr-beat-assoc[b-k8gs4r3jhg] {
    margin: 0.15rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.wr-keynumber-row[b-k8gs4r3jhg] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.wr-keynumber-value[b-k8gs4r3jhg] {
    font-family: 'condor', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
}

/* #6905 - keyed on the read's verdict, not its raw direction. */
.wr-keynumber-value.wr-dir-improving[b-k8gs4r3jhg] { color: #31DDE3; }
.wr-keynumber-value.wr-dir-worsening[b-k8gs4r3jhg] { color: #B88536; }
.wr-keynumber-value.wr-dir-steady[b-k8gs4r3jhg] { color: rgba(255, 255, 255, 0.7); }

.wr-keynumber-metric[b-k8gs4r3jhg] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}

.wr-beat[b-k8gs4r3jhg]  .ascend-btn {
    margin-top: 0.5rem;
    align-self: flex-start;
}
/* /Components/Shared/WhatsChangedModal.razor.rz.scp.css */
/* "What's Changed" changelog dialog. Centered, dark, dismissible. The shared
   Card owns its own chrome (.ascend-card); this styles the native <dialog>
   (which is the sizing shell), its ::backdrop, and the announcement content
   written into the card body.

   #7713 - a native <dialog> opened with showModal() (browser top layer).
   What that buys, measured with axe-core 4.13.0 in a real browser
   (2026-09-16, the #7713 report has the per-run tables):
   - Real modal semantics: focus moves in, Tab is contained, Escape closes,
     the page behind is inert. axe honors that inertness: with the dialog open
     it evaluates the dialog, not the dashboard.
   - With the z-index below, no text in the card is "overlapped by another
     element" any more (axe's bgOverlap reason).
   What it does NOT buy, and no CSS on this dialog can: axe decides a text
   node's background by comparing one element stack PER LINE OF TEXT, each
   probed at that line's center point against a grid it builds from PAGE
   geometry (getTextElementStack -> getRectStack). The page beneath a modal is
   in that grid regardless of top layer, z-index, backdrop or opacity, so a
   multi-line paragraph whose line centers sit over different dashboard
   elements is "partially overlaps other elements" (elmPartiallyObscuring) -
   the CI finding on .wc-description. Single-line text is decidable (one
   stack, nothing to compare). The remedy for the paragraph belongs to the
   scan, not to this file. Do not attempt a fourth CSS fix here.

   THE ENTRY ANIMATION MUST NEVER ANIMATE THE OPACITY OF THE CONTENT OR ITS
   CONTAINER. Measured inside the dialog with axe-core 4.13.0: content at
   opacity 0.98 or 0.5 is "partially obscured by another element" (incomplete
   again), and the whole dialog at 0.5 is a genuine contrast FAIL. So the rise
   is a transform on the dialog, and the only opacity that moves is the
   ::backdrop's, which is not an element axe evaluates. */

.whats-changed-dialog[b-4o0t7290qo] {
    /* The dialog is the sizing shell. The UA centers a modal dialog with
       inset: 0 + margin: auto; the border and canvas background it paints are
       removed so the Card is the visible surface. The padding is a transparent
       band around the card: it gives the card's shadow room and it is the
       click-outside target - a click there, or on the ::backdrop, reaches the
       dialog itself (the shell stops propagation) and dismisses. overflow:
       auto so a tall announcement on a short landscape viewport scrolls
       inside the dialog instead of running off-screen where a fixed, inert
       page cannot scroll to it. */
    box-sizing: border-box;
    /* Inset from every viewport edge, never edge-to-edge. axe-core recognizes
       a modal dialog by hit-testing a point 10px OUTSIDE its top-left corner
       (getModalDialog); a dialog flush with the viewport puts that point
       off-screen, the heuristic fails, and axe then evaluates the whole
       dashboard behind the modal instead of treating it as inert - measured
       at 390x844 on 2026-09-16. 12px of backdrop on each side keeps the probe
       inside the viewport at every size. */
    width: min(calc(460px + 3rem), calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 1.5rem);
    margin: auto;
    padding: 1.5rem;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: auto;
    /* For axe-core's stacking model, NOT for the browser: the top layer paints
       above everything regardless of z-index, but axe 4.13 builds its own
       stack from CSS (position + z-index + DOM order) and has no notion of the
       top layer. With z-index auto a fixed dialog rendered near the top of
       the dashboard markup ranked BELOW later page content, and every text
       node in the card became "overlapped by another element" (measured
       2026-09-16, #7713). The modal token puts it above the page in that
       model; the token, not a raw number, because it is the app's layer. */
    z-index: var(--z-modal);
}

.whats-changed-dialog[open][b-4o0t7290qo] {
    animation: wc-rise-in-b-4o0t7290qo 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Phones: a thinner band, so the card keeps the 24px it always had from the
   viewport edge (12px inset + 12px band) instead of losing width to the band. */
@media (max-width: 480px) {
    .whats-changed-dialog[b-4o0t7290qo] {
        padding: 0.75rem;
    }
}

.whats-changed-dialog[b-4o0t7290qo]::backdrop {
    background: rgba(3, 8, 18, 0.82);
    backdrop-filter: blur(6px);
}

.whats-changed-dialog[open][b-4o0t7290qo]::backdrop {
    animation: wc-fade-in-b-4o0t7290qo 0.4s ease;
}

.whats-changed-shell[b-4o0t7290qo] {
    width: 100%;
}

/* The card root is owned by the Card component, so reach it with ::deep. */
.whats-changed-shell[b-4o0t7290qo]  .whats-changed-card {
    position: relative;
    overflow: hidden;
}

/* Gradient accent line - drawn with border-image, NOT a background (#7543's
   established fix, applied here for #7312's undecidable-surface gate).

   axe-core's color-contrast check treats any absolutely positioned ancestor
   element carrying a BACKGROUND as an overlay, and compares its absolute area
   against 25% of the text node's own area. A 3px line across a 460px modal is
   1,380px^2 - larger than a line of body text - so .wc-description became
   'incomplete' (neither passed nor failed) on account of a line that never
   touches it, and the dashboard scan failed with NEW UNDECIDABLE SURFACE.

   A border with no background is ignored by that check, and the text is then
   measured against the card's opaque background as intended. Same 3px, same
   gradient, and the raw hex becomes the brand tokens it always meant. */
.wc-accent-line[b-4o0t7290qo] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--ascend-accent) 0%, var(--ascend-secondary) 100%) 1;
}

.wc-eyebrow-row[b-4o0t7290qo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.25rem 0 1.25rem;
}

.wc-eyebrow[b-4o0t7290qo] {
    font-family: 'condor', sans-serif;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    color: var(--ascend-accent);
}

.wc-version[b-4o0t7290qo] {
    font-family: 'condor', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(184, 133, 54, 0.4);
    border-radius: 50px;
}

.wc-image[b-4o0t7290qo] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 0 0 1.25rem;
    border: 1px solid rgba(49, 221, 227, 0.15);
}

.wc-title[b-4o0t7290qo] {
    margin: 0 0 0.75rem;
    font-family: 'condor', sans-serif;
    font-size: 1.5rem;
    color: #ffffff;
}

.wc-description[b-4o0t7290qo] {
    margin: 0 0 1.75rem;
    font-family: 'tablet-gothic', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.wc-actions[b-4o0t7290qo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Backdrop only - see the header for why no content opacity is animated. */
@keyframes wc-fade-in-b-4o0t7290qo {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Transform only - see the header. */
@keyframes wc-rise-in-b-4o0t7290qo {
    from { transform: translateY(16px) scale(0.98); }
    to { transform: translateY(0) scale(1); }
}

/* app.css already collapses every animation under reduced motion, but its
   `*::before, *::after` selector cannot reach ::backdrop - so both halves are
   named here explicitly. */
@media (prefers-reduced-motion: reduce) {
    .whats-changed-dialog[open][b-4o0t7290qo],
    .whats-changed-dialog[open][b-4o0t7290qo]::backdrop {
        animation: none;
        transform: none;
    }
}
/* /Components/Shared/Wordmark.razor.rz.scp.css */
/* Wordmark (#6355/#6356) - the ONE place the two-tone flush rule lives.
   ScopedCssBoundaryTests bans wordmark class rules in every other .razor.css;
   this file is the designated owner (alongside the app.css color globals). */

.wordmark[b-yxnn2k1d4k] {
    /* The wordmark owns its own tracking so the seam cancel below always
       matches. Callers tune it via --wordmark-tracking on the heading,
       never via letter-spacing (which the cancel could not follow). */
    letter-spacing: var(--wordmark-tracking, 0.05em);
    /* Wordmarks never slant - stay upright even inside oblique paragraph copy. */
    font-style: normal;
}

.brand-white[b-yxnn2k1d4k] {
    color: #ffffff;
    /* letter-spacing trails after every glyph, including the last letter of
       the white half, which renders as a gap at the colour seam. Cancel the
       trailing track so the two halves sit flush (#6193). */
    margin-right: calc(-1 * var(--wordmark-tracking, 0.05em));
}

.brand-gold[b-yxnn2k1d4k] {
    color: var(--ascend-secondary);
}
/* /Components/Shared/WorldChessLookupInline.razor.rz.scp.css */
/* WorldChessLookupInline (#7018) - deliberately the same shape as
   FideLookupInline so the three "claim a federation/platform identity" panels
   read as one family. Written against the brand tokens; the translucent layers
   are derived from the tokens with color-mix rather than re-typing the hex. */

.wc-lookup-inline[b-mb56owq3as] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
}

/* #7036 - the id field's label row: the field name and the beta chip on one
   line, so the disclosure is attached to the control rather than floating near
   it. The chip is a child component and carries its own scope, so no ::deep is
   needed to lay it out here - only alignment belongs to this file. */
.wc-field-label[b-mb56owq3as] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wc-label[b-mb56owq3as] {
    color: color-mix(in srgb, var(--ascend-text-light) 80%, transparent);
    font-family: var(--ascend-font-secondary);
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 600;
}

.wc-input-row[b-mb56owq3as] {
    display: flex;
    gap: 0.5rem;
}

.wc-input[b-mb56owq3as] {
    flex: 1;
    background: color-mix(in srgb, var(--ascend-text-light) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-radius: 12px;
    color: var(--ascend-text-light);
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
    outline: none;
}

.wc-input:focus[b-mb56owq3as] {
    border-color: var(--ascend-accent);
    background: color-mix(in srgb, var(--ascend-text-light) 8%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ascend-accent) 10%, transparent);
}

.wc-input[b-mb56owq3as]::placeholder {
    /* #7905 - the 35% white fade measured 3.08:1 on the input's own 5% white
       surface, the worst of this file. --ascend-text-muted is the brand's
       proven muted value and clears it at 5.65:1, still far quieter than the
       white the field itself types in. */
    color: var(--ascend-text-muted);
}

.wc-lookup-btn[b-mb56owq3as] {
    background: color-mix(in srgb, var(--ascend-accent) 10%, transparent);
    color: var(--ascend-accent);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 30%, transparent);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.wc-lookup-btn:hover:not(:disabled)[b-mb56owq3as] {
    background: color-mix(in srgb, var(--ascend-accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--ascend-accent) 50%, transparent);
}

.wc-lookup-btn:disabled[b-mb56owq3as] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Font Awesome injects the SVG without the scope attribute, so ::deep is the
   only way to reach it. */
.wc-lookup-btn[b-mb56owq3as]  i,
.wc-confirm-btn[b-mb56owq3as]  i {
    font-size: 14px;
}

.wc-provenance[b-mb56owq3as] {
    /* #7905 - the 45% white fade measured 4.36:1, below AA. The brand muted
       token clears it at 6.47:1. */
    color: var(--ascend-text-muted);
    font-size: 0.75rem;
    font-family: var(--ascend-font-secondary);
}

.wc-provenance strong[b-mb56owq3as] {
    color: color-mix(in srgb, var(--ascend-text-light) 75%, transparent);
}

/* #7036 - the beta disclosure, quieter than the provenance line above it. Read
   once and worked around, so it must not compete with the field. */
.wc-beta-note[b-mb56owq3as] {
    /* #7905 - the 40% white fade measured 3.73:1, below AA. --ascend-text-secondary
       clears it at 5.44:1 and keeps this line one visible step quieter than the
       provenance line above, which the comment asks for. */
    color: var(--ascend-text-secondary);
    font-family: var(--ascend-font-secondary);
    font-style: italic;
    font-size: 0.72rem;
    line-height: 1.45;
}

.wc-confirm[b-mb56owq3as] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: color-mix(in srgb, var(--ascend-accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 35%, transparent);
    border-radius: 12px;
    padding: 0.75rem;
}

.wc-confirm-facts[b-mb56owq3as] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.wc-confirm-name[b-mb56owq3as] {
    color: var(--ascend-text-light);
    font-weight: 600;
    font-size: 0.9rem;
    font-family: var(--ascend-font-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.wc-avatar[b-mb56owq3as] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--ascend-accent) 35%, transparent);
}

.wc-title[b-mb56owq3as] {
    color: var(--ascend-secondary-light);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.wc-confirm-details[b-mb56owq3as] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    color: color-mix(in srgb, var(--ascend-text-light) 60%, transparent);
    font-size: 0.78rem;
    font-family: var(--ascend-font-secondary);
}

.wc-confirm-warning[b-mb56owq3as] {
    color: var(--ascend-secondary-light);
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
    margin: 0;
}

.wc-games-hidden[b-mb56owq3as] {
    color: color-mix(in srgb, var(--ascend-text-light) 70%, transparent);
    font-size: 0.78rem;
    font-family: var(--ascend-font-secondary);
    margin: 0;
}

.wc-confirm-actions[b-mb56owq3as] {
    display: flex;
    gap: 0.5rem;
}

.wc-confirm-btn[b-mb56owq3as] {
    background: linear-gradient(135deg, var(--ascend-accent) 0%, var(--ascend-accent-light) 100%);
    color: var(--ascend-primary);
    border: none;
    border-radius: 12px;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wc-confirm-btn:hover:not(:disabled)[b-mb56owq3as] {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ascend-accent) 30%, transparent);
}

.wc-confirm-btn:disabled[b-mb56owq3as],
.wc-notme-btn:disabled[b-mb56owq3as] {
    opacity: 0.5;
    cursor: not-allowed;
}

.wc-notme-btn[b-mb56owq3as] {
    background: color-mix(in srgb, var(--ascend-text-light) 6%, transparent);
    color: color-mix(in srgb, var(--ascend-text-light) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--ascend-text-light) 20%, transparent);
    border-radius: 12px;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-family: var(--ascend-font-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wc-notme-btn:hover:not(:disabled)[b-mb56owq3as] {
    background: color-mix(in srgb, var(--ascend-text-light) 10%, transparent);
}

.wc-hint[b-mb56owq3as] {
    color: color-mix(in srgb, var(--ascend-text-light) 60%, transparent);
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
    margin: 0;
}

.wc-error[b-mb56owq3as] {
    /* #7905 - var(--ascend-error) measured 4.41:1 on the surfaces this
       component actually renders on, below AA. The light step clears it at
       5.99:1. */
    color: var(--ascend-error-light);
    font-size: 0.8rem;
    font-family: var(--ascend-font-secondary);
    margin: 0;
}
/* /Components/Shared/YourPickTag.razor.rz.scp.css */
/* #9082 - the neutral "your pick" tag. Outlined, never filled, in the light text token on whatever
   tint the choice has (the truth's green, the struck pick's red, a dimmed or neutral choice): no
   meaning rides its color, and the outline keeps it from reading as a button or a badge earned. */
.your-pick-tag[b-q0qx2fwtl9] {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 0 0.35rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: var(--ascend-text-light);
    font-family: var(--ascend-font-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}
/* /Components/StudyPlan/CoachAccountFacts.razor.rz.scp.css */
/* #8746 - the account card under a coach reply: one quiet card, a label, a definition list of the
   account's own facts, and the link chips to the pages where the member acts. No button: the coach
   never acts on money, deletion or access. */
.coach-account-facts[b-4n18msay96] {
    margin: 0.5rem 0 0;
    max-width: 100%;
}

/* The shared Card keeps its own OPAQUE background (#7543); this only rounds its frame inside a chat bubble. */
.coach-account-facts[b-4n18msay96]  .coach-account-card {
    border-radius: 10px;
}

.coach-account-label[b-4n18msay96] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
}

.coach-account-list[b-4n18msay96] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.3rem;
}

.coach-account-row[b-4n18msay96] {
    display: contents;
}

.coach-account-row dt[b-4n18msay96] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    overflow-wrap: anywhere;
}

.coach-account-row dd[b-4n18msay96] {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.coach-account-unverified-label[b-4n18msay96] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    color: rgba(255, 255, 255, 0.85);
    border: 1px dashed rgba(255, 255, 255, 0.45);
    background: transparent;
}

.coach-account-declared[b-4n18msay96] {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.coach-account-note[b-4n18msay96] {
    display: block;
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .coach-account-list[b-4n18msay96] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.15rem;
    }

    .coach-account-row dd[b-4n18msay96] {
        margin-bottom: 0.35rem;
    }
}
/* /Components/StudyPlan/CoachBookOfferPanel.razor.rz.scp.css */
/* PBI #6887 - the two choices for a pre-review book title.

   Deliberately the QUIETER sibling of .research-panel: the gold accent family
   there marks the "worth something" tier (the SOFT-VERIFIED chip), and this
   control sits under a claim nobody has verified yet. Reading as loudly as a
   verified result is exactly the visual glazing the tiering copy is written to
   avoid, so it takes the neutral surface treatment and lets the status line
   carry the meaning. */
.book-offer-panel[b-laxjs7jfg6] {
    align-self: flex-start;
    max-width: 85%;
    margin-top: 0.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.book-offer-status[b-laxjs7jfg6] {
    margin: 0 0 0.6rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.book-offer-actions[b-laxjs7jfg6] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.book-offer-caveat[b-laxjs7jfg6] {
    margin: 0.6rem 0 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.book-offer-working[b-laxjs7jfg6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.book-offer-working[b-laxjs7jfg6]  i {
    font-size: 14px;
}

.book-offer-notice[b-laxjs7jfg6] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Bug #8611 (owner ruling 2026-10-12) - the "passed to our experts" line under a research notice. */
.book-offer-notice-experts[b-laxjs7jfg6] {
    margin-top: 0.4rem;
}
/* /Components/StudyPlan/CoachGameCards.razor.rz.scp.css */
/* #8743 - the game cards under a coach reply. A plain list of quiet cards: the trust label is
   the only accent, so an expert-approved game reads differently from a database game, and an
   Unverified entry reads as a caution, never as a result. */
.coach-game-cards[b-zlezgur6r3] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0.5rem;
    max-width: 100%;
}

.coach-game-card-item[b-zlezgur6r3] {
    min-width: 0;
}

/* The shared Card keeps its own OPAQUE background (#7543: axe can measure text only on a solid
   surface); this only rounds and quiets its frame inside a chat bubble. */
.coach-game-cards[b-zlezgur6r3]  .coach-game-card {
    height: 100%;
    border-radius: 10px;
}

.coach-game-cards[b-zlezgur6r3]  .coach-game-card-unverified {
    border-style: dashed;
}

.coach-game-label[b-zlezgur6r3] {
    display: inline-block;
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    margin-bottom: 0.35rem;
}

.coach-game-label-expert[b-zlezgur6r3] {
    color: var(--ascend-secondary-light);
    border: 1px solid rgba(184, 133, 54, 0.45);
    background: rgba(184, 133, 54, 0.12);
}

.coach-game-label-database[b-zlezgur6r3],
.coach-game-label-online[b-zlezgur6r3],
.coach-game-label-yours[b-zlezgur6r3] {
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
}

.coach-game-label-unverified[b-zlezgur6r3] {
    color: rgba(255, 255, 255, 0.85);
    border: 1px dashed rgba(255, 255, 255, 0.45);
    background: transparent;
}

.coach-game-players[b-zlezgur6r3] {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.coach-game-meta[b-zlezgur6r3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.coach-game-structure[b-zlezgur6r3],
.coach-game-note[b-zlezgur6r3] {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    overflow-wrap: anywhere;
}

.coach-game-link[b-zlezgur6r3] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.2rem;
    font-weight: 600;
    color: var(--ascend-accent-light);
}

/* #9266 - the CC BY-SA credit of a broadcast game (BroadcastCreditLine owns its look). */
.coach-game-cards[b-zlezgur6r3]  .coach-game-credit {
    margin-top: 0.3rem;
}
/* /Components/StudyPlan/CoachHelpFeedbackPrompt.razor.rz.scp.css */
/* #8749 - "Did this answer it?" under a help reply. Deliberately quiet: no card, no accent rule, no
   icon, no color that reads as success. It is a question we ask, not a reward. The two answers are
   the shared Button (secondary); the chosen one only keeps a visible outline, so the state is clear
   without praise. Touch-sized on a coarse pointer. */
.chf[b-a5eo531yze] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin: 0.6rem 0 0;
    max-width: 100%;
}

.chf-question[b-a5eo531yze] {
    font-size: 0.85rem;
    color: #c4cedb;
}

.chf-answers[b-a5eo531yze] {
    display: flex;
    gap: 0.5rem;
}

.chf-answers[b-a5eo531yze]  .chf-answer {
    min-width: 3.5rem;
}

.chf-answers[b-a5eo531yze]  .chf-answer-chosen,
.chf-answers[b-a5eo531yze]  .chf-answer-chosen:disabled {
    opacity: 1;
    outline: 2px solid #c4cedb;
    outline-offset: 1px;
}

.chf-error[b-a5eo531yze] {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.85rem;
    color: #ffb4a8;
}

@media (hover: none) and (pointer: coarse) {
    .chf-answers[b-a5eo531yze]  .chf-answer {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
    }
}
/* /Components/StudyPlan/CoachReportDraftCard.razor.rz.scp.css */
/* #8747 - the report draft card under a coach reply. A solid card (axe measures text only on a
   solid surface, #7543), a gold rule on the left so it reads as an action the member takes, not
   as more of the coach's prose. Inputs and controls are touch-sized on a coarse pointer. */
.crd[b-35iwi3v8nd] {
    margin: 0.75rem 0 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 3px solid var(--ascend-secondary);
    border-radius: 10px;
    background: var(--ascend-bg-card);
    color: #ffffff;
    max-width: 100%;
    box-sizing: border-box;
}

.crd-heading[b-35iwi3v8nd] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    color: #ffffff;
}

.crd-note[b-35iwi3v8nd],
.crd-hint[b-35iwi3v8nd],
.crd-page[b-35iwi3v8nd] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: #c4cedb;
    overflow-wrap: anywhere;
}

.crd-kinds[b-35iwi3v8nd] {
    border: 0;
    margin: 0.6rem 0 0;
    padding: 0;
    min-width: 0;
}

.crd-label[b-35iwi3v8nd],
.crd-label-inline[b-35iwi3v8nd] {
    display: block;
    margin: 0.6rem 0 0.25rem;
    padding: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
}

.crd-label-inline[b-35iwi3v8nd] {
    display: inline;
    margin: 0;
}

.crd-kind-row[b-35iwi3v8nd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.crd-kind[b-35iwi3v8nd] {
    position: relative;
    display: inline-flex;
}

/* The native radio stays in the accessibility tree and keyboard order; the label is the pill. */
.crd-kind input[b-35iwi3v8nd] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.crd-kind-pill[b-35iwi3v8nd] {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    font-size: 0.85rem;
    color: #ffffff;
    cursor: pointer;
}

.crd-kind input:checked + .crd-kind-pill[b-35iwi3v8nd] {
    border-color: var(--ascend-secondary-light);
    background: #3a2a10;
    color: #ffffff;
    font-weight: 600;
}

.crd-kind input:focus-visible + .crd-kind-pill[b-35iwi3v8nd] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.crd-input[b-35iwi3v8nd] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: #061223;
    color: #ffffff;
    font: inherit;
    font-size: 0.95rem;
}

.crd-input:focus-visible[b-35iwi3v8nd] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 1px;
}

.crd-textarea[b-35iwi3v8nd] {
    resize: vertical;
    min-height: 5rem;
}

.crd-include[b-35iwi3v8nd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.7rem 0 0;
    cursor: pointer;
}

.crd-include input[b-35iwi3v8nd] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--ascend-secondary);
    flex: 0 0 auto;
}

/* #8821 - the label now carries a count ("(last 30 messages)"), so it may run to two lines on a
   phone: it wraps inside the row, never past the card. */
.crd-include-text[b-35iwi3v8nd] {
    min-width: 0;
    font-size: 0.9rem;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.crd-error[b-35iwi3v8nd] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--ascend-error-light);
}

.crd-actions[b-35iwi3v8nd] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
}

.crd-done-line[b-35iwi3v8nd] {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
    color: #ffffff;
}

.crd-done-line i[b-35iwi3v8nd] {
    color: var(--ascend-secondary-light);
}

.crd-link[b-35iwi3v8nd] {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    color: var(--ascend-accent-light);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Phone floors. The card renders only with coach-report-handoff on AND a draft the coach
   offered, so the live touch gate never measures it: ConditionalSurfaceTouchTargetTests
   holds .crd-kind-pill, .crd-include and .crd-link. The checkbox sits inside its label, so
   the whole .crd-include row is the target (the #8308 precedent). */
@media (hover: none) and (pointer: coarse) {
    .crd-kind-pill[b-35iwi3v8nd],
    .crd-link[b-35iwi3v8nd],
    .crd-include[b-35iwi3v8nd] {
        min-height: var(--touch-target);
    }

    .crd-include input[b-35iwi3v8nd] {
        width: 1.5rem;
        height: 1.5rem;
    }

    .crd-actions[b-35iwi3v8nd]  .ascend-btn {
        min-height: var(--touch-target);
    }
}
/* /Components/StudyPlan/CoachResearchPanel.razor.rz.scp.css */
/* #6558 - coach research approval prompt. Sits under the coach's message inside
   the chat column; gold accent family (the "worth something" tier, matching the
   SOFT-VERIFIED chip) so it reads as a distinct, deliberate step - not another
   chat bubble. */
.research-panel[b-9ujs5x2l1a] {
    align-self: flex-start;
    max-width: 85%;
    margin-top: 0.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--ascend-secondary) 40%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ascend-secondary) 8%, transparent);
}

.research-question[b-9ujs5x2l1a] {
    margin: 0 0 0.6rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.research-actions[b-9ujs5x2l1a] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.research-working[b-9ujs5x2l1a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.research-working[b-9ujs5x2l1a]  i {
    font-size: 14px;
}

.research-notice[b-9ujs5x2l1a] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Bug #8611 (owner ruling 2026-10-12) - the "passed to our experts" line under a Failed or
   allowance-exhausted notice. Same voice as the notice, set apart by a little space. */
.research-notice-experts[b-9ujs5x2l1a] {
    margin-top: 0.4rem;
}

/* PBI #8958 - the expert route. The wait note sits between the question and the
   buttons so it is read before the member chooses; same voice as the question,
   a little quieter. The answered and confirmation lines keep the notice's voice.
   A stored expert answer is rendered markdown (MarkupString), so its paragraphs
   and lists carry no scope attribute and are reached with ::deep. */
.research-expert-wait[b-9ujs5x2l1a] {
    margin: 0 0 0.6rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.research-expert-notice:focus[b-9ujs5x2l1a] {
    outline: none;
}

.research-expert-notice:focus-visible[b-9ujs5x2l1a] {
    outline: 2px solid var(--ascend-accent);
    outline-offset: 2px;
}

.research-expert-answer[b-9ujs5x2l1a]  p {
    margin: 0 0 0.5rem;
}

.research-expert-answer[b-9ujs5x2l1a]  p:last-child {
    margin-bottom: 0;
}

.research-expert-answer[b-9ujs5x2l1a]  ul,
.research-expert-answer[b-9ujs5x2l1a]  ol {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
}

.research-expert-detail[b-9ujs5x2l1a] {
    margin-top: 0.4rem;
}
/* /Components/StudyPlan/StudyPlanRenewalPrompt.razor.rz.scp.css */
/* Study plan renewal prompt (study-plan-renewal flag). Quiet support display: no badge,
   no celebration, nothing animated (Recognition Follows Improvement). Tokens and the
   neighboring surfaces' rgba values only. Sits inside the CoachConsole card body on the
   dashboard and in place of the wrap-up note on the Study Plan page. */

.renewal[b-227mgszkmv] {
    min-width: 0;
    margin: 0.5rem 0 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(49, 221, 227, 0.25);
    border-radius: 12px;
    background: rgba(49, 221, 227, 0.06);
    box-sizing: border-box;
    width: 100%;
}

/* On the Study Plan page it takes the setup column's width (the notes card beside it). */
.renewal--page[b-227mgszkmv] {
    max-width: 640px;
    margin-top: 0;
}

.renewal-label[b-227mgszkmv] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ascend-text-muted);
    margin: 0 0 0.4rem;
}

.renewal-lines[b-227mgszkmv] {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.renewal-line[b-227mgszkmv] {
    margin: 0;
    font-family: var(--ascend-font-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: anywhere;
}

.renewal-fact[b-227mgszkmv] {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.25rem;
}

.renewal-message[b-227mgszkmv] {
    margin-top: 0.5rem;
}

.renewal-helper[b-227mgszkmv] {
    margin-top: 0.5rem;
    color: var(--ascend-text-muted);
}

.renewal-status[b-227mgszkmv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.renewal-status i[b-227mgszkmv] {
    color: var(--ascend-accent);
    flex-shrink: 0;
}

/* The buttons sit on the shared .action-row (app.css): a full-width column on a phone,
   a row above it, so they never stack at uneven widths (#8844). */
.renewal-actions[b-227mgszkmv] {
    margin-top: 0.75rem;
}

.renewal-link[b-227mgszkmv] {
    display: inline-block;
    margin-top: 0.6rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ascend-accent);
    text-decoration: none;
}

.renewal-link:hover[b-227mgszkmv],
.renewal-link:focus-visible[b-227mgszkmv] {
    text-decoration: underline;
}

@media (hover: none) and (pointer: coarse) {
    .renewal-link[b-227mgszkmv] {
        min-height: var(--touch-target);
        display: inline-flex;
        align-items: center;
    }
}
/* /Components/StudyPlan/WeeklyStudyTimeEditor.razor.rz.scp.css */
/* Per-weekday study-time overrides (#6099) - brand dark theme. */

.wte[b-jplo9ksrkq] {
    margin-top: 0.5rem;
}

.wte-toggle[b-jplo9ksrkq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.35rem 0;
    cursor: pointer;
    font-family: var(--ascend-font-secondary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease;
}

.wte-toggle:hover[b-jplo9ksrkq] {
    color: #31DDE3;
}

.wte-toggle[b-jplo9ksrkq]  i {
    color: var(--ascend-accent);
    font-size: 0.8rem;
}

.wte-badge[b-jplo9ksrkq] {
    margin-left: auto;
    padding: 0.1rem 0.6rem;
    border-radius: 50px;
    background: rgba(49, 221, 227, 0.12);
    border: 1px solid rgba(49, 221, 227, 0.3);
    font-size: 0.7rem;
    color: #31DDE3;
}

.wte-hint[b-jplo9ksrkq] {
    margin: 0.5rem 0 0.85rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

.wte-hint strong[b-jplo9ksrkq] {
    color: rgba(255, 255, 255, 0.75);
}

.wte-grid[b-jplo9ksrkq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.6rem;
}

.wte-day[b-jplo9ksrkq] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.wte-day label[b-jplo9ksrkq] {
    font-family: var(--ascend-font-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}

/* #7266: fill, border, radius and colour duplicated the global .form-input /
   `select` rules in app.css (#7258). The compact sizing is the genuine delta -
   seven of these sit in one week row - and the right-hand padding is spelled
   out because this selector outranks the global caret room. */
.wte-day[b-jplo9ksrkq]  .form-input,
.wte-day select[b-jplo9ksrkq] {
    padding: 0.6rem 2.25rem 0.6rem 0.7rem;
    font-size: 0.85rem;
}

.wte-day select:focus[b-jplo9ksrkq] {
    outline: none;
    border-color: #31DDE3;
    box-shadow: 0 0 0 3px rgba(49, 221, 227, 0.1);
}

.wte-saved[b-jplo9ksrkq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    color: #10b981;
}

.wte-saved[b-jplo9ksrkq]  i {
    color: #10b981;
    font-size: 0.85rem;
}

/* One-click reset of all per-day overrides back to the everyday default. */
.wte-clear[b-jplo9ksrkq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding: 0.4rem 0.85rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--ascend-font-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wte-clear:hover[b-jplo9ksrkq] {
    border-color: rgba(49, 221, 227, 0.5);
    color: #31DDE3;
}


/* #7736 — .wte-toggle measured 274x29 at 390px: full-width already, just too
   short for a finger. */
@media (hover: none) and (pointer: coarse) {
    .wte-toggle[b-jplo9ksrkq] {
        min-height: var(--touch-target);
    }
}