/* Inter — variable subset woff2 files, served from this RCL. Two faces split by
   unicode-range let the browser fetch only the script(s) actually used on the page.
   Paths are RCL-relative (no leading slash); they resolve to
   /_content/Repetitum.Cabinet.Shared/fonts/… in both the WASM host and MAUI. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/Inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

:root {
    /* --------------------------------------------------------------------
       Brand-blue tokens — derived from the РЕПЕТИТУМ logo wordmark, used by
       the rp-* rules in bp.css and the calendar/dashboard blocks below.
       Dark-mode flips live in `body.rp-dark` at the bottom of this file.
       -------------------------------------------------------------------- */
    --brand-primary:      #1D73B3;
    --brand-primary-tint: #E6F2FB;

    /* Slate neutrals (Tailwind palette) — the design system anchors everything
       on these so cabinet + landing visually agree. */
    --slate-50:   #F8FAFC;
    --slate-100:  #F1F5F9;
    --slate-200:  #E2E8F0;
    --slate-300:  #CBD5E1;
    --slate-400:  #94A3B8;
    --slate-500:  #64748B;
    --slate-700:  #334155;
    --slate-900:  #0F172A;

    --border-hairline: var(--slate-200);

    /* Validation state colors (used by .invalid / .valid.modified outlines
       and .validation-message — Blazor's own EditForm classes, not MudBlazor).
       Tokenized so the dark-mode block can brighten them for contrast on
       slate-900 backgrounds. */
    --state-error:    #E50000;
    --state-success:  #26B050;

    /* Alert tints, one triplet per severity (bg / ink / msg). `ink` drives
       the icon colour (via currentColor) and the 1px border (via color-mix);
       `msg` is the body-text ink. Each color appears in exactly one place —
       flip them once in the dark block below and every MudAlert tracks. */
    --alert-success-bg:  #E7F8EF;
    --alert-success-ink: #2BB673;
    --alert-success-msg: #0F5132;
    --alert-warning-bg:  #FEF6DA;
    --alert-warning-ink: #E89505;
    --alert-warning-msg: #6E430A;
    --alert-error-bg:    #FDEAEA;
    --alert-error-ink:   #DC2626;
    --alert-error-msg:   #8B1818;
    --alert-info-bg:     #E6F3FB;
    --alert-info-ink:    #2990DC;
    --alert-info-msg:    #14598E;

    /* Calendar group-lesson tone (purple) — the only calendar hue not already in the ramp above.
       1:1 lessons use --brand-*, slots/past use --slate-*, reservations reuse --alert-warning-*. */
    --cal-group-bg: #EEEDFE;
    --cal-group-fg: #534AB7;
}

/* Typography (font family, sizes, weights, tracking) comes from Blueprint's own base
   styles (blazorblueprint.css) plus the @font-face above, which stays in app.css because
   it has to be present at first paint. There is no separate theme object to configure —
   MudTheme/CabinetTheme.cs (and the MudThemeProvider runtime <style> tag that used to
   inject --mud-typography-* vars, which nothing here ever actually consumed) were
   removed in wave-9 T9. */

/* ------------------------------------------------------------------------
   Form validation (Blazor's built-in EditForm classes). The design system
   uses #e50000 for invalid and #26b050 for valid-modified to match the
   landing's existing colors. Kept verbatim — these classes are emitted by
   InputBase<T>, not by our markup.
   ------------------------------------------------------------------------ */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--state-success);
}

.invalid {
    outline: 1px solid var(--state-error);
}

.validation-message {
    color: var(--state-error);
}

h1:focus {
    outline: none;
}

/* ========================================================================
   Dark mode — token overrides triggered by the `rp-dark` class on <body>.
   ThemeController.SetAsync / InitializeAsync calls into theme.js's
   `repetitumTheme.apply()` which toggles the class — our own switch for our
   own --brand-* / --slate-* / --alert-* / --state-* tokens (tokens.css's
   shadcn-style vars flip on the parallel `.dark` class on <html> instead).

   The slate ramp inverts — slate-50 (lightest in light) maps to the
   darkest dark in this block — so any rule reading `var(--slate-50)` in
   dark mode renders the dark canvas, and so on up the ramp.
   ======================================================================== */
body.rp-dark {
    --brand-primary:      #2990DC;
    --brand-primary-tint: rgba(41, 144, 220, 0.18);

    /* Dark canvas ramp — ported from the design bundle's `[data-reader="dim"]`
       block. Background #14181F is warmer/less blue than slate-900; the
       slate-* tokens flip so any `var(--slate-50)` in dark mode renders the
       dark canvas, and so on up the ramp to slate-900 ≈ body text colour. */
    --slate-50:   #14181F;  /* canvas / page bg — design's --read-bg */
    --slate-100:  #1B2029;  /* one step up — MudPaper surface in dark */
    --slate-200:  #232A35;  /* hairline — design's --read-rule */
    --slate-300:  #3A4250;  /* input border (LinesInputs) */
    --slate-400:  #64748B;
    --slate-500:  #94A3B8;  /* muted text — design's --read-fg-muted */
    --slate-700:  #CBD5E1;
    --slate-900:  #E8EAEC;  /* body text — design's --read-fg */

    --border-hairline: #232A35;

    --state-error:    #F87171;
    --state-success:  #5EE5A8;

    --alert-success-bg:  rgba(43, 182, 115, 0.18);
    --alert-success-ink: #5EE5A8;
    --alert-success-msg: #A7F3D0;
    --alert-warning-bg:  rgba(232, 149, 5, 0.18);
    --alert-warning-ink: #FBBF24;
    --alert-warning-msg: #FDE68A;
    --alert-error-bg:    rgba(220, 38, 38, 0.18);
    --alert-error-ink:   #F87171;
    --alert-error-msg:   #FECACA;
    --alert-info-bg:     rgba(41, 144, 220, 0.18);
    --alert-info-ink:    #60A5FA;
    --alert-info-msg:    #BFDBFE;

    --cal-group-bg: rgba(127, 119, 221, 0.20);
    --cal-group-fg: #AFA9EC;
}

/* The AppBar uses MudBlazor's `Color="Color.Surface"` which resolves to
   Palette.Surface — that flips automatically through PaletteDark.Surface.
   But the inline `border-bottom: 1px solid var(--border-hairline)` in
   MainLayout.razor reads the token directly and follows the block above. */

/* ------------------------------------------------------------------------
   Onboarding checklist — the "Начало работы" card on TutorHome. Done items
   stay tappable (the tutor may want to revisit the page) but their label
   reads as past-tense via line-through + muted opacity.
   ------------------------------------------------------------------------ */
.rp-onboarding-done {
    text-decoration: line-through;
    opacity: 0.65;
}

/* ------------------------------------------------------------------------
   Blazor error boundary — yellow exclamation-mark banner shown when an
   unhandled exception bubbles up. Stock styling kept; the embedded SVG is
   the standard ASP.NET Core "error" icon.
   ------------------------------------------------------------------------ */
.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: "Произошла ошибка."
}

/* ========================================================================
   Calendar (Components/Calendar/*) — shared time-grid surface used by the
   tutor schedule and the student "Мои уроки" page. All hues come from the
   design tokens above (--brand-*, --slate-*, --alert-warning-*, --cal-group-*)
   so the whole calendar flips with dark mode without a separate block.
   Kept global (not scoped .razor.css) because the calendar is split across
   several child components and Blazor scoped CSS does not cross component
   boundaries — matching the rp-tree / rp-block convention above.
   ======================================================================== */
.rp-cal { display: flex; flex-direction: column; gap: 12px; }

.rp-cal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-cal-nav { display: flex; align-items: center; gap: 4px; }
.rp-cal-title { font-size: 1.05rem; font-weight: 500; margin-left: 8px; }
.rp-cal-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ----- time grid (week / day) ----- */
.rp-cal-grid { border: 1px solid var(--border-hairline); border-radius: 12px; overflow: hidden; }
.rp-cal-grid-head { display: flex; border-bottom: 1px solid var(--border-hairline); }
.rp-cal-gutter-head { flex: 0 0 52px; }
.rp-cal-dayhead { flex: 1 1 0; text-align: center; padding: 6px 2px; border-left: 1px solid var(--border-hairline);
                  display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rp-cal-dayhead--today { background: var(--brand-primary-tint); }
.rp-cal-dow { font-size: 11px; text-transform: uppercase; color: var(--slate-500); }
.rp-cal-daynum { font-size: 15px; font-weight: 500; }

/* No inner scroll: the page already scrolls, and an inner scrollbar would shrink the columns relative to
   the (unscrolled) header row, throwing the vertical gridlines out of alignment. The grid grows naturally. */
.rp-cal-grid-body { display: flex; }
.rp-cal-gutter { flex: 0 0 52px; position: relative; }
/* Hour labels sit just BELOW their own gridline (no vertical centring), so the top label isn't clipped
   above the grid and each number reads as the start of the hour block beneath it. */
.rp-cal-hour { position: absolute; right: 6px; margin-top: 2px; font-size: 10px; color: var(--slate-400); }
.rp-cal-cols { display: flex; flex: 1 1 0; }
.rp-cal-daycol { flex: 1 1 0; border-left: 1px solid var(--border-hairline); min-width: 0; }
.rp-cal-day-body { position: relative; width: 100%; }

.rp-cal-cell { position: absolute; left: 0; right: 0; cursor: pointer; }
.rp-cal-cell:hover { background: var(--brand-primary-tint); }

.rp-cal-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--state-error); z-index: 5; }
.rp-cal-now::before { content: ''; position: absolute; left: 0; top: -4px; width: 7px; height: 7px;
                      border-radius: 50%; background: var(--state-error); }

/* ----- event blocks ----- */
.rp-cal-ev { position: absolute; border-radius: 6px; padding: 2px 6px; overflow: hidden; cursor: pointer;
             font-size: 12px; line-height: 1.25; box-sizing: border-box; z-index: 3; }
.rp-cal-ev[draggable="true"] { cursor: grab; }
.rp-cal-ev[draggable="true"]:active { cursor: grabbing; }
.rp-cal-ev-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-cal-ev-sub { font-size: 11px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-cal-ev-badge { font-size: 11px; font-weight: 500; }

.rp-cal-ev--lesson { background: var(--brand-primary-tint); border-left: 3px solid var(--brand-primary); color: var(--brand-primary); }
.rp-cal-ev--group  { background: var(--cal-group-bg); border-left: 3px solid var(--cal-group-fg); color: var(--cal-group-fg); }
.rp-cal-ev--slot   { background: transparent; border: 1px dashed var(--slate-300); color: var(--slate-500); }
.rp-cal-ev--reservation { background: var(--alert-warning-bg); border: 1px solid var(--alert-warning-ink); color: var(--alert-warning-msg); }
.rp-cal-ev--past   { background: var(--slate-100); border-left: 3px solid var(--slate-300); color: var(--slate-500); }

/* ----- tone dots (agenda / month) ----- */
.rp-cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.rp-cal-dot--lesson { background: var(--brand-primary); }
.rp-cal-dot--group { background: var(--cal-group-fg); }
.rp-cal-dot--slot { background: var(--slate-400); }
.rp-cal-dot--reservation { background: var(--alert-warning-ink); }
.rp-cal-dot--past { background: var(--slate-300); }

/* ----- agenda (list) ----- */
.rp-cal-agenda-day { margin-bottom: 16px; }
.rp-cal-agenda-date { font-size: 13px; font-weight: 500; color: var(--slate-500); margin-bottom: 6px; text-transform: capitalize; }
.rp-cal-agenda-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-hairline);
                     border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.rp-cal-agenda-row:hover { background: var(--brand-primary-tint); }
.rp-cal-agenda-time { font-weight: 500; font-size: 13px; flex: 0 0 42px; }
.rp-cal-agenda-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rp-cal-agenda-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-cal-agenda-sub { font-size: 12px; color: var(--slate-500); }
.rp-cal-agenda-badge { flex: 0 0 auto; }

/* ----- month ----- */
.rp-cal-month { border: 1px solid var(--border-hairline); border-radius: 12px; overflow: hidden; }
.rp-cal-month-head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border-hairline); }
.rp-cal-month-dow { text-align: center; padding: 6px 0; font-size: 11px; text-transform: uppercase; color: var(--slate-500); }
.rp-cal-month-body { display: grid; grid-template-columns: repeat(7, 1fr); }
.rp-cal-month-cell { min-height: 94px; border-left: 1px solid var(--border-hairline); border-top: 1px solid var(--border-hairline);
                     padding: 4px; cursor: pointer; overflow: hidden; }
.rp-cal-month-cell--out { background: var(--slate-50); }
.rp-cal-month-cell--out .rp-cal-month-num { color: var(--slate-400); }
.rp-cal-month-num { font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center;
                    min-width: 22px; height: 22px; }
.rp-cal-month-cell--today .rp-cal-month-num { background: var(--brand-primary); color: #fff; border-radius: 50%; }
.rp-cal-chip { display: flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 3px; border-radius: 4px;
               cursor: pointer; white-space: nowrap; overflow: hidden; }
.rp-cal-chip:hover { background: var(--brand-primary-tint); }
.rp-cal-chip-text { overflow: hidden; text-overflow: ellipsis; }
.rp-cal-month-more { font-size: 10px; color: var(--slate-500); padding-left: 3px; }

/* The old MudBlazor-era tests gradebook (.rp-matrix-*) was removed in wave 3 Task 11 — the /tests page
   was rebuilt on Blueprint (rp-tm-* in bp.css), and nothing else referenced these rules. */

/* ==================== Dashboard (home pages) ==================== */
/* Home page top-level rhythm: a flex column with the same 20px cadence as .rp-dash
   columns. Children carry their own legacy mb-* utilities (used on other pages too),
   so neutralize bottom margin on direct children — the gap owns vertical spacing. */
.rp-home { display: flex; flex-direction: column; gap: 20px; }
.rp-home > * { margin-bottom: 0 !important; }

.rp-dash { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.rp-dash-main { flex: 3 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.rp-dash-rail { flex: 1 1 300px; min-width: 280px; max-width: 360px; display: flex; flex-direction: column; gap: 20px; }

.rp-dash-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.rp-dash-tile { flex: 1 1 170px; background: var(--card); border: 1px solid var(--border-hairline);
    border-radius: 12px; padding: 14px 16px; }
.rp-dash-tile--click { cursor: pointer; }
.rp-dash-tile--click:hover { border-color: var(--brand-primary); }
.rp-dash-tile-head { display: flex; align-items: center; gap: 8px; color: var(--slate-500); font-size: 12.5px; margin-bottom: 8px; }
.rp-dash-tile-value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.rp-dash-tile-note { font-size: 12px; color: var(--slate-500); }

.rp-dash-card { padding: 0; border: 1px solid var(--border-hairline); border-radius: 12px; overflow: hidden; }
.rp-dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.rp-dash-card-title { font-size: 16px; font-weight: 600; }
.rp-dash-card-eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--slate-500); padding: 16px 18px 4px; }
.rp-dash-card-link { font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.rp-dash-card-empty { padding: 14px 18px 18px; color: var(--slate-500); font-size: 13.5px; }
/* Body inset for free-form content inside .rp-dash-card (title + balance + button stacks
   in the rail cards). The eyebrow's own 16/18/4 padding owns the top inset, so this only
   adds horizontal + bottom. Not needed when the card body is a stack of .rp-dash-row's. */
.rp-dash-card-body { padding: 0 18px 16px; }

.rp-dash-row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--border-hairline); }
.rp-dash-row--click { cursor: pointer; }
.rp-dash-row--click:hover { background: var(--secondary); }
.rp-dash-row-body { flex: 1; min-width: 0; }
.rp-dash-row-title { font-size: 14.5px; font-weight: 600; }
.rp-dash-row-sub { font-size: 12.5px; color: var(--slate-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rp-dash-balance-exp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 4px; }
.rp-dash-progress { padding: 6px 18px 14px; }
.rp-dash-progress-head { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }

/* ==================== Video room (rp-room) ====================
   The whole /room chrome lives in bp.css — including the `.rp-room` base rule itself (moved there by
   the post-wave-7 smoke fix): app.css loads after bp.css, so keeping the base here let its display:flex
   outrank bp.css's phone-landscape `display:grid` override by source order. */

/* ==================== Mobile (≤600px) ====================
   The MudBlazor-era gutter/padding trim that used to live here (`.mud-container`/`.mud-paper.pa-6`
   compound selectors — MudContainer/MudPaper are long gone, and `.rp-shell__content`'s own gutters
   are handled by bp.css's shell rules) was removed as dead weight in wave-9 T9; only the dashboard
   phone layout remains here.
   (The notifications-matrix → cards collapse that used to live here moved to bp.css's
   rp-notif-* rules when that page was rewritten off MudSimpleTable — Task 7, wave 2.) */
@media (max-width: 600px) {
    /* Dashboard: single column, rail under main, on phones. */
    .rp-dash { flex-direction: column; }
    .rp-dash-main, .rp-dash-rail { flex: 1 1 100%; max-width: 100%; }
}

/* ==================== Whiteboard surface (wb-*) ====================
   wb-surface/wb-canvas back WhiteboardSurface.razor's canvas mount — width/height:100% of their
   `.rp-room-square` ancestor (bp.css) so the board always fills the stage in every rp-room-* layout
   (desktop, mobile/tablet portrait, phone landscape). The rest of this block — the toolbar/color-swatch/
   clear/restore pills (superseded by RoomToolRail, wave 7 Task 3) and the corner/filmstrip video demotion
   + the legacy `.rp-room-square`/`.rp-room-stage` (superseded by the wave 7 Task 4/5 chrome) — was DEAD
   and removed in the Task 6 legacy-CSS sweep; the two rules that were still alive (the whiteboard
   transparency override and rp-room-slide-counter's base rule) moved to bp.css alongside the rest of the
   rp-room-* chrome they belong with. */
.wb-surface { position: relative; width: 100%; height: 100%; background: var(--background); }
.wb-canvas { width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
/* Image blocks in lesson content (content page + reader). */
.rp-lesson-image { margin: 0 0 1rem; text-align: center; }
.rp-lesson-image img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
.rp-lesson-image figcaption { margin-top: 0.4rem; font-size: 0.85em; color: var(--muted-foreground); }
/* Lesson cover banners (content page + editor thumbnail + reader). */
.rp-lesson-cover { margin: 0 0 1rem; }
.rp-lesson-cover img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; display: block; }
.rp-lesson-cover-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; margin-right: 8px; flex-shrink: 0; }
.rp-reader-cover { margin: 0 0 1.5rem; }
.rp-reader-cover img { width: 100%; max-height: 240px; object-fit: cover; border-radius: 10px; display: block; }

/* ==================== Blazor error UI ====================
   Moved from Layout/MainLayout.razor.css when the layout lost its scoped CSS
   (Blueprint shell rewrite): the default display:none is what keeps the
   reload bar hidden until blazor.web.js flips it on an unhandled exception. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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