html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* -------------------------------------------------------------------------
   Desk card — shared card look (T-080e, D-038 AC1-3)
   One base look reused by the Home module/utility cards, the mode-select
   cards (Assess/Train/Practice/Belt Test on SrLanding + its Trend-Range/
   Transitions/Breakout-Reversal siblings), and the /learn belt-ladder
   cards — global (not scoped) so it renders identically everywhere,
   matching the .source-pill precedent above. Token-driven: Bootstrap's
   .card already supplies the Desk bg/border-color via the T-080a --bs-*
   remap; this only upgrades the radius and adds the readme's "soft
   elevation" (mostly-flat raised shadow, restrained hover lift — no heavy
   drop shadows). position:relative + overflow:hidden let a page-scoped
   accent (e.g. Home's ::before role-color bar) sit flush with the rounded
   corners without leaking into pages that don't add one.
   ------------------------------------------------------------------------- */
.desk-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-raised, 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10));
    transition: box-shadow var(--duration, 180ms) var(--ease-standard, ease),
                transform var(--duration, 180ms) var(--ease-standard, ease);
}

.desk-card:hover {
    box-shadow: var(--shadow-panel, 0 1px 3px rgba(16, 24, 40, 0.08), 0 4px 12px rgba(16, 24, 40, 0.06));
    transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   Explain-page shared shell (T-132)
   All three /explain pages under /train (SrExplain, DailyRegimeExplain, TrendRangeExplain) write
   class="tr-explain-page ..." on their root element, but only SrExplain had a *.razor.css of its
   own — Blazor CSS isolation rewrites those selectors with SrExplain's own scope id, so
   DailyRegimeExplain and TrendRangeExplain (no .razor.css) rendered as unstyled Bootstrap. Moved
   here VERBATIM from SrExplain.razor.css (T-110) so a component-scoped sheet never strands a rule
   three pages depend on — same reasoning as .desk-card/.source-pill/.dojo-eyebrow above.
   SrExplain.razor.css keeps its SrExplain-only S0 numbered-framing rules (.sr-s0-*), which are
   not shared and did not move.

   .desk-card is deliberately NOT in the moved selector list below: it is already declared
   globally by T-080e (.desk-card / .desk-card:hover above), and every .desk-card on all three
   explain pages also carries tr-explain-card (class="card desk-card tr-explain-card"), so
   .tr-explain-card alone reaches the same elements. Adding background/border to .desk-card here
   would instead take over properties Bootstrap's .card supplies on the 7 unrelated pages that use
   .desk-card outside this item's scope (Home, Learn, the five Train landings) — border in
   particular is not inert: tokens.css's --border-default (--gray-300, #e2e6ec) differs from
   Bootstrap's --bs-border-color-translucent, which tokens.css does not remap.
   ------------------------------------------------------------------------- */
.tr-explain-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 32px 96px;
    background: var(--surface-subtle);
}

.tr-explain-page .dojo-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.tr-explain-page h2 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--gray-900);
    margin-top: 8px;
}

.tr-explain-page p.text-muted {
    font-size: 17px;
    color: var(--gray-700) !important; /* Beats Bootstrap's .text-muted color:var(--bs-secondary-color), also marked important, in bootstrap.min.css. */
}

.tr-explain-page h3 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-900);
    margin-top: 44px;
}

.tr-explain-card {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
}

/* -------------------------------------------------------------------------
   Monospace source-code pills, e.g. "[061]" (T-080d, D-038 AC2)
   Shared across every Brooks citation badge (SrDrill feedback lines, ReactionDrill,
   LiveSim) — defined once here since scoped component CSS can't cross a component
   boundary and the look must be identical wherever a citation renders. Style only:
   citation numbers/text are untouched; each caller keeps its own bg-* tone class.
   ------------------------------------------------------------------------- */
.source-pill {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    border-radius: var(--radius-pill, 50rem);
}

/* -------------------------------------------------------------------------
   Dojo eyebrow (T-083d, kit LearnView.razor.reference) — the small mono,
   letter-spaced, muted uppercase "THE DOJO" label the kit places above a
   page's H1/H2. Global (not scoped) so the 5 Train landing pages (which
   have no per-page .razor.css) can share the identical rule the /learn
   ladder already defines locally (Learn.razor.css's .dojo-eyebrow) —
   mirrors the .desk-card/.source-pill precedent above for a look shared
   across component boundaries.
   ------------------------------------------------------------------------- */
.dojo-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: var(--tracking-wide, 0.1em);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

/* -------------------------------------------------------------------------
   Desk-tinted alerts (T-080d, D-038 AC4)
   Bootstrap 5.3's precompiled .alert-* rules read --bs-success-bg-subtle /
   --bs-warning-bg-subtle / --bs-danger-bg-subtle / their -border-subtle / -text-emphasis
   companions — these are STATIC hex values baked into bootstrap.min.css, not derived
   from the --bs-success/--bs-warning/--bs-danger primitives tokens.css remaps (T-080a),
   so alerts don't retint from that remap alone. Light touch: only the 3 vars each
   .alert-* rule already reads, using each palette's -050 tint + -600/-500 line.
   ------------------------------------------------------------------------- */
.alert-success {
    --bs-success-bg-subtle: var(--green-050);
    --bs-success-border-subtle: var(--green-600);
    --bs-success-text-emphasis: var(--green-700);
}

.alert-warning {
    --bs-warning-bg-subtle: var(--amber-050);
    --bs-warning-border-subtle: var(--amber-500);
    --bs-warning-text-emphasis: var(--amber-600);
}

.alert-danger {
    --bs-danger-bg-subtle: var(--red-050);
    --bs-danger-border-subtle: var(--red-600);
    --bs-danger-text-emphasis: var(--red-700);
}

/* -------------------------------------------------------------------------
   Glossary widget — GlossaryProvider component (T-008h)
   Ported from prototype/trainers/brooks-sr-program.html ~L709-730
   Global scope required: FAB + popup are fixed/absolute to the viewport.

   T-080d (D-038 AC5): --panel/--panel2 are now DEFINED by tokens.css (T-080a) as the dark
   structural ink surfaces (--ink-800/--ink-700) — the backgrounds below already "activate"
   correctly with no change. But tokens.css's chart-vars block (T-080a) also defines --ink
   itself as the DARKEST surface (--ink-900), for the chart/sidebar/header — the OPPOSITE
   semantic this widget's original fallback-only `var(--ink, #e8eef5)` intended (light TEXT ink
   on a dark panel). Left alone, the now-defined --ink would paint text near-black on these
   near-black panels — dark-on-dark, illegible (I-016). Fixed below: every TEXT-color use of
   --ink is repointed to --gray-100 (an existing token, #f4f6f9 — matches the original
   #e8eef5 fallback almost exactly); --panel/--panel2/--muted/--accent are untouched (already
   correct once defined). Do not swap these back to var(--ink, ...) for text.
   ------------------------------------------------------------------------- */
.glx-fab {
    position: fixed; right: 18px; bottom: 18px; z-index: 9998;
    background: var(--panel2, #1d2735); color: var(--gray-100, #e8eef5);
    border: 1px solid var(--accent, #4aa3ff); border-radius: 999px;
    padding: 10px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.glx-fab:hover { filter: brightness(1.1); }

.glx-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(6,10,16,.66); display: none;
    align-items: flex-start; justify-content: center; padding: 6vh 16px;
}
.glx-overlay.on { display: flex; }

.glx-panel {
    background: var(--panel, #161e29); border: 1px solid var(--line, #2a3647);
    border-radius: 16px; max-width: 640px; width: 100%; max-height: 84vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.glx-head {
    padding: 14px 16px; border-bottom: 1px solid var(--line, #2a3647);
    display: flex; gap: 10px; align-items: center;
}
.glx-head b { font-size: 15px; }
.glx-head .glx-x {
    margin-left: auto; background: transparent;
    border: 1px solid var(--line, #2a3647); color: var(--muted, #8da0b6);
    border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 13px;
}
.glx-search {
    width: 100%; background: var(--panel2, #1d2735);
    border: 1px solid var(--line, #2a3647); border-radius: 9px;
    padding: 9px 11px; color: var(--gray-100, #e8eef5); font-size: 14px; font-family: inherit;
}
.glx-list  { overflow: auto; padding: 8px 16px 16px; }
.glx-item  { padding: 11px 0; border-bottom: 1px solid var(--line, #2a3647); }
.glx-term  { font-weight: 700; font-size: 14px; }
.glx-alias { font-size: 11px; color: var(--muted, #8da0b6); font-family: ui-monospace, Menlo, monospace; margin-left: 6px; }
.glx-def   { font-size: 13px; line-height: 1.55; color: var(--gray-100, #e8eef5); margin-top: 3px; }
.glx-src   { font-size: 11px; color: var(--muted, #8da0b6); margin-top: 3px; }
.glx-empty { color: var(--muted, #8da0b6); font-size: 13px; padding: 12px 0; }

.glx-link {
    text-decoration: underline dotted; text-underline-offset: 2px;
    text-decoration-thickness: 1px; cursor: help; color: inherit;
}
.glx-link:hover { color: var(--accent, #4aa3ff); }

.glx-pop {
    position: absolute; z-index: 10001; max-width: 300px;
    background: var(--panel, #161e29); border: 1px solid var(--accent, #4aa3ff);
    border-radius: 10px; padding: 11px 13px; box-shadow: 0 6px 22px rgba(0,0,0,.5);
    font-size: 12.5px; line-height: 1.5; color: var(--gray-100, #e8eef5);
}
.glx-pop .pt   { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.glx-pop .ps   { color: var(--muted, #8da0b6); font-size: 11px; margin-top: 6px; display: flex; gap: 10px; align-items: center; }
.glx-pop .pmore {
    background: transparent; border: 1px solid var(--line, #2a3647);
    color: var(--accent, #4aa3ff); border-radius: 6px; padding: 2px 7px;
    font-size: 11px; cursor: pointer;
}

/* -------------------------------------------------------------------------
   Feedback-line cards (T-187, docs/PRD-T187-CSS-PLACEMENT-DEBT.md §2 FORK 1)
   Promoted from four byte-identical *.razor.css copies (SrDrill, TransitionsDrill,
   TrendRangeDrill, DailyRegimeDrill) to this one global rule. Two of the six writers below
   — LiveSim, ReactionDrill — own no *.razor.css of their own, so Blazor's [b-xxx] scope
   attributes left them unable to reach any of the four scoped copies; that was the production
   defect this promotion fixes (they rendered with no border, at inherited body font-size).
   Promotion across the scope boundary is a REWRITE, not a move (I-164): the rule loses the
   [b-xxx] attribute selector's 0,1,0 of specificity (0,2,0 in the bundle -> 0,1,0 here) and its
   blast radius widens from one component to every element carrying the class app-wide. It also
   moves EARLIER in the cascade -- App.razor links this file (:12) before the scoped bundle
   (:13) -- so it now wins on SOURCE ORDER against any equal-or-lower-specificity rule, not on
   specificity as the scoped copy did. Nothing newly wins: every writer's other classes
   (d-flex/align-items-start/gap-2/mb-2/p-2/rounded plus one bg-*-subtle tone) are Bootstrap
   utilities that never touch border/font-size, so this rule is still the only one setting them.
   .feedback-line  writers: SrDrill.razor, TransitionsDrill.razor, TrendRangeDrill.razor,
                            DailyRegimeDrill.razor, LiveSim.razor, ReactionDrill.razor
   ------------------------------------------------------------------------- */
.feedback-line {
    border: 1px solid var(--border-default, #e2e6ec);
    font-size: 0.875rem;
}