:root {
    --teal-text: #0c7572;   /* AA-safe teal for small text on white (>=4.5:1) */
    --brand-teal: #0ea5a4;  /* brand accent — decorative/non-text only */
    --muted-text: #5b6b7b;  /* AA-safe muted grey for small text */
}

html, body {
    font-family: 'Nunito Sans', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

a, .btn-link {
    color: var(--teal-text);
}

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

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

.validation-message {
    color: #dc2626;
}

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

/* Framework unhandled-error bar. The default rule (which hides it until an error and gives it
   contrast) was lost when the template CSS was trimmed, leaving the message rendering unreadably
   at the bottom of the page. Restored as a clear, high-contrast bar, hidden until a real error. */
#blazor-error-ui {
    color-scheme: light only;
    background: #b32121;
    color: #ffffff;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 2.5rem 0.85rem 1.25rem;
    position: fixed;
    z-index: 1000;
    display: none;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
    font-family: 'Nunito Sans', system-ui, sans-serif;
}

#blazor-error-ui a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 600;
}

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

/* ── Send assessment page ───────────────────────────────────────────── */
.send-grid { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.send-grid > label { min-width: 130px; font-size: .9rem; color: #475569; font-weight: 600; }
.send-input { border: 1px solid #cbd5e1; border-radius: 7px; padding: 8px 11px; font-size: .92rem; font-family: inherit; color: #1f2937; }
.send-note { font-size: .78rem; color: var(--muted-text); }
.send-recipient { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.send-recipient .recipient-name { flex: 1; min-width: 160px; }
.send-recipient .recipient-email { flex: 1; min-width: 180px; }
.send-link { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 7px; margin-bottom: 7px; background: #f8fafc; }
.send-link-who { font-size: .82rem; color: #475569; }
.send-link-url { font-size: .82rem; color: #0f2a4a; word-break: break-all; }
/* Uniform right-edge icon spacing for the framed controls. Native <select> arrows hug the border
   while the date-picker icon sits inside the input padding; draw a custom chevron at a fixed offset
   and align the date icon to the same ~12px gap so every control matches. */
select.send-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
input[type="datetime-local"].send-input { padding-right: 10px; }
input[type="datetime-local"].send-input::-webkit-calendar-picker-indicator { margin-left: 6px; margin-right: 0; }

/* Assessment editor (MudBlazor): line every control's right-edge icon up at the same 10px gap as
   the Send page. The numeric spinner is absolutely positioned (default right:0, flush to the border);
   the select chevron sits ~14px in from the input's padding. Pull both to 10px. Selectors are scoped
   under .settings and reuse MudBlazor's own ancestor classes for enough specificity to win — its
   stylesheet loads after app.css. */
.settings .mud-input-control.mud-input-number-control .mud-input-numeric-spin { right: 10px; }
.settings .mud-input-control .mud-input-adornment-end.mud-select-input { margin-inline-end: -4px; }
.attendee-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.attendee-row { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border: 1px solid #e5e7eb; border-radius: 7px; cursor: pointer; transition: background 100ms ease; }
.attendee-row:hover { background: #f8fafc; }
.attendee-name { font-size: .9rem; color: #1f2937; font-weight: 600; }
.attendee-rank { font-size: .74rem; color: #475569; background: #eef2f6; border-radius: 999px; padding: 1px 8px; }
.attendee-email { font-size: .82rem; color: var(--muted-text); margin-left: auto; word-break: break-all; }

/* ── Public taking site (mobile-first, light) ───────────────────────── */
.take-shell { min-height: 100vh; background: #eef2f6; padding: 16px; }
.take-main { max-width: 680px; margin: 0 auto; }
.take-head { margin: 8px 4px 14px; }
.take-head h1 { font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.4rem; color: #0f2a4a; margin: 0 0 4px; }
.take-desc { color: #475569; font-size: .95rem; line-height: 1.45; margin: 0 0 6px; }
.take-deadline { color: var(--muted-text); font-size: .88rem; margin: 0; }
.take-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(15,42,74,.04); }
.take-prompt { font-size: 1.2rem; font-weight: 600; color: #0f2a4a; line-height: 1.4; margin-bottom: 16px; }
.take-prompt img { max-width: 100%; height: auto; border-radius: 8px; }
.take-option { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1.5px solid #e2e8f0; border-radius: 10px; margin-bottom: 8px; cursor: pointer; font-size: .95rem; color: #334155; }
.take-option--sel { border-color: #0ea5a4; background: #f0fbfa; }
.take-option input { width: 19px; height: 19px; accent-color: #0ea5a4; flex: none; }
.take-text { width: 100%; border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 11px; font-size: .98rem; font-family: inherit; resize: vertical; }
.take-actions { margin: 10px 4px 28px; }
.take-submit { width: 100%; background: #0f2a4a; color: #fff; border: none; border-radius: 12px; padding: 15px; font-size: 1.02rem; font-weight: 700; cursor: pointer; }
.take-submit:disabled { opacity: .6; cursor: default; }

/* ── Filter chips ────────────────────────────────────────────────────
   MudBlazor renders the *selected* chip as faint text (it drops the fill),
   which is hard to tell apart from the unselected pills. Give the active
   filter a solid, on-brand pill so the current view is unmistakable. */
.filter-chips .mud-chip.mud-chip-selected {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
.take-error { color: #b32121; font-size: .9rem; margin-bottom: 8px; }
.take-msg { text-align: center; padding: 34px 18px; }
.take-msg h1 { font-family: 'Montserrat', system-ui, sans-serif; color: #0f2a4a; }
.take-score { font-size: 1.15rem; font-weight: 700; }
.take-score.ok { color: #0f5e5c; }
.take-score.no { color: #b32121; }
/* graded review — green/red reserved for results only (master spec §10) */
.review-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px; margin-bottom: 8px; }
.review-option.correct { border-color: #16a34a; background: #f0fdf4; }
.review-option.wrong { border-color: #dc2626; background: #fef2f2; }
.review-option .tag { margin-left: auto; font-size: .74rem; font-weight: 700; color: #475569; }
.review-text { color: #475569; font-size: .92rem; }

/* ── Taking page: progress, numbering, autosave, submit confirm ─────── */
.take-progress { margin-top: 12px; }
.take-progress-track { height: 7px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.take-progress-fill { height: 100%; background: #0ea5a4; border-radius: 999px; transition: width .25s ease; }
.take-progress-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
.take-progress-label { font-size: .8rem; color: var(--muted-text); }
.take-save { font-size: .8rem; color: var(--teal-text); min-height: 1em; }
.take-save.saving { color: var(--muted-text); }
.take-qnum { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-text); margin-bottom: 7px; }
.take-card--missing { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626; }
.take-confirm { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 1px 2px rgba(15,42,74,.04); }
.take-confirm p { margin: 0 0 8px; color: #1f2937; font-size: .96rem; line-height: 1.45; }
.take-confirm-actions { display: flex; gap: 10px; margin-top: 12px; }
.take-confirm-actions .take-submit, .take-cancel { flex: 1; width: auto; }
.take-cancel { background: #fff; color: #0f2a4a; border: 1.5px solid #cbd5e1; border-radius: 12px; padding: 15px; font-size: 1.02rem; font-weight: 700; cursor: pointer; }

/* Time-limit countdown badge. tabular-nums keeps the digits from jiggling as they tick down. */
.take-timer { display:inline-flex; align-items:center; gap:7px; margin:8px 0 2px; padding:7px 14px; border-radius:999px; font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums; border:1.5px solid transparent; }
.take-timer--normal { background:#eef2f6; color:#0f2a4a; border-color:#dbe3ec; }
.take-timer--warning { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.take-timer--critical, .take-timer--expired { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }

/* ── Taking page: start screen (shown before the attempt begins) ───────── */
.take-intro-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-text); margin: 2px 0 0; }
.take-intro-lead { color: #1f2937; font-size: 1rem; line-height: 1.5; margin: 0 0 12px; }
.take-intro-facts { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; color: #334155; font-size: .95rem; }
.take-intro-facts li { padding: 8px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.take-intro-warn { background: #fef3c7; color: #92400e; border: 1.5px solid #fcd34d; border-radius: 10px; padding: 12px 14px; font-size: .92rem; line-height: 1.5; margin: 12px 0 16px; }
.take-intro-note { color: #475569; font-size: .92rem; line-height: 1.5; margin: 12px 0 16px; }

/* ── Authoring markdown preview ──────────────────────────────────────── */
/* Keep preview images inside the editor's center pane (same fit as the taking page). */
.md-preview img { max-width: 100%; height: auto; border-radius: 8px; }

/* Markdown pipe tables — give them visible structure in the editor preview AND the taking page. */
.md-preview table, .take-prompt table { border-collapse: collapse; margin: 8px 0; }
.md-preview th, .md-preview td,
.take-prompt th, .take-prompt td { border: 1px solid #cbd5e1; padding: 6px 10px; }
.md-preview th, .take-prompt th { background: #f1f5f9; }

/* Markdown SOURCE textarea — light gray so it reads as the editable input, distinct from the
   white rendered Preview below it. */
.md-source {
    width: 100%;
    min-height: 7rem;
    box-sizing: border-box;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    color: #1f2937;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px;
    outline: none;
}

.md-source:focus { border-color: #0ea5a4; }

/* Blockquotes and code render nicely in both the editor preview and the taking page. */
.md-preview blockquote, .take-prompt blockquote {
    border-left: 3px solid #cbd5e1;
    margin: 8px 0;
    padding: 2px 12px;
    color: #475569;
}

.md-preview code, .take-prompt code { background: #f1f5f9; border-radius: 4px; padding: 1px 5px; font-size: 0.9em; }
.md-preview pre, .take-prompt pre { background: #f1f5f9; border-radius: 6px; padding: 10px; overflow: auto; }
.md-preview pre code, .take-prompt pre code { background: none; padding: 0; }

/* ── Dashboard KPI cards: lift on hover (they are clickable) ──────────── */
.dash-card { transition: box-shadow .18s ease, transform .18s ease; will-change: transform; }
.dash-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 42, 74, .16); }
.dash-card:active { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(15, 42, 74, .14); }

/* ── Top app-bar nav: clearer hover affordance on the navy bar ────────── */
.mud-appbar .mud-button-root { transition: background-color .15s ease; }
.mud-appbar .mud-button-root:hover { background-color: rgba(255, 255, 255, .14); }

/* ── Email-template editor tabs ───────────────────────────────────────────
   Render the two tabs as a clickable segmented control with a highlighted
   active tab, so they read as buttons rather than plain text labels.
   Selectors out-specify MudBlazor's own .mud-tab / .mud-tab.mud-tab-active. */
.template-tabs .mud-tab {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    margin-right: 8px;
    min-width: 150px;
    text-transform: none;
    background-color: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
}
.template-tabs .mud-tab:hover {
    background-color: var(--mud-palette-action-default-hover);
}
.template-tabs .mud-tab.mud-tab-active {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}
.template-tabs .mud-tab-slider { display: none; }

/* ── Grading screen: zoned question cards ─────────────────────────────────
   Three zones per card — question, labelled response, scoring band. Eyebrows
   reuse the taking page's .take-qnum treatment. Green/red stay reserved for
   correctness (graded review is allowed to use them, master spec §10); the
   workflow state badge uses amber/teal/neutral instead, set on its MudChip. */
.grade-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-text); margin: 13px 0 5px; }
.grade-eyebrow--model { color: #047857; }
.grade-answer { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 9px 12px; font-size: .92rem; color: #1f2937; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.grade-model { background: #ecfdf5; border: 1px solid #bbf0dd; border-radius: 6px; padding: 9px 12px; font-size: .92rem; color: #065f46; line-height: 1.5; }
.grade-model img { max-width: 100%; height: auto; }
/* Full-bleed scoring footer: negative margins reach the card's pa-4 (16px) edges; the card's
   overflow:hidden clips the band to its rounded corners. */
.grade-band { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin: 14px -16px -16px; padding: 13px 16px 14px; border-top: 1px solid #e2e8f0; background: #f8fafc; }
/* Flex-grow lives on this plain wrapper, not on the MudBlazor input control — putting flex-grow
   directly on .mud-input-control lets the outlined field stretch vertically. The field fills the
   wrapper at width:100% and keeps its natural single-line height. */
.grade-comment { flex: 1 1 240px; }

/* ── Accessibility: visible focus + skip link ─────────────────────────── */
.take-option:focus-within { outline: 2px solid var(--teal-text); outline-offset: 2px; }
.take-text:focus-visible,
.send-input:focus-visible { outline: 2px solid var(--teal-text); outline-offset: 1px; border-color: var(--teal-text); }
.take-submit:focus-visible,
.take-cancel:focus-visible { outline: 2px solid #0f2a4a; outline-offset: 2px; }
a:focus-visible, .btn-link:focus-visible { outline: 2px solid var(--teal-text); outline-offset: 2px; border-radius: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #0f2a4a; color: #fff; padding: 8px 14px; border-radius: 0 0 8px 0; font-weight: 600; }
.skip-link:focus { left: 0; }

/* Staff page heading — real <h1>, styled to match the previous MudText title. */
.page-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: #0f2a4a; margin: 0 0 16px; }

/* ── AI grading assist: per-answer suggest button + non-binding card ──── */
.grade-suggest { margin-top: 10px; }
.grade-suggest-card {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #d6e2ea;
    border-left: 3px solid var(--brand-teal, #0ea5a4);
    border-radius: 8px;
    background: #f3f8fa;
}
.grade-suggest-eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--teal-text, #0c7572); margin-bottom: 4px;
}
.grade-suggest-score { font-size: .95rem; color: #0f2a4a; }
.grade-suggest-feedback { font-size: .92rem; color: #1f2d3d; margin-top: 4px; white-space: pre-wrap; }
.grade-suggest-msg { font-size: .9rem; color: var(--muted-text, #5b6b7b); margin-top: 6px; }

/* ── App-bar navigation breakpoint ─────────────────────────────────────────
   These are app-owned class names on purpose. The framework utilities collide:
   Bootstrap (still loaded for the Identity pages) defines .d-lg-none from 992px,
   while MudBlazor defines .d-lg-flex from 1280px. Marking the toggle d-lg-none and
   the inline nav "d-none d-lg-flex" therefore hid BOTH between 992px and 1279px,
   leaving those viewports with no navigation at all.

   1540px is where the inline nav genuinely fits. Measured on the widest case - an
   administrator, who sees all nine working entries plus the Help icon - the bar needs
   1487px: 968px of nav, a 227px brand, the user name and the log-out control. The extra
   allowance covers a user name at its full 150px cap. Without that headroom the labels
   wrap inside their own buttons ("Email log" over two lines) while the row itself still
   "fits", so the bar looks broken well before it overflows. Narrower than 1540px the
   drawer takes over rather than letting the app bar wrap onto two rows. */
.app-nav-inline { display: none; flex-wrap: nowrap; }
.mud-appbar .mud-toolbar { white-space: nowrap; }

/* Bounded so an unusually long name cannot push the bar past the breakpoint's headroom. */
.app-user-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 1540px) {
    .app-nav-inline { display: flex !important; }
    .app-nav-toggle { display: none !important; }
    .app-nav-drawer { display: none !important; }
}

/* ── In-app help (/help) ───────────────────────────────────────────────────
   Renders wwwroot/help/user-guide.md. Styling lives here rather than in the
   markdown so the same file stays readable as plain text and on GitHub. */
/* The document scroller is <html>, where MudBlazor sets scroll-behavior: smooth. That suits ordinary
   pages, but the guide is ~19,000px tall: a jump from the contents list animated the whole way,
   streaming past every screenshot for several seconds before settling. Scoped with :has() so only the
   guide is affected — and browsers without :has() simply keep the smooth scroll. */
html:has(.help-layout) { scroll-behavior: auto; }

.help-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

@media (max-width: 900px) {
    .help-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .help-toc { position: static; max-height: none; }
    /* Two columns so the contents do not fill a phone screen before the guide starts. */
    .help-toc ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
    .help-toc-note { display: none; }
}

.help-toc {
    position: sticky;
    top: 88px;                 /* clears the fixed app bar */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    font-size: .9rem;
    border-left: 2px solid #e3eaf0;
    padding-left: 16px;
}

.help-toc-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: .74rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted-text);
    margin: 0 0 10px;
}

.help-toc ul { list-style: none; margin: 0; padding: 0; }
.help-toc li { margin-bottom: 7px; }
.help-toc a { color: #0f2a4a; text-decoration: none; }
.help-toc a:hover { color: var(--teal-text); text-decoration: underline; }

.help-toc-note {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid #e3eaf0;
    font-size: .82rem; color: var(--muted-text); line-height: 1.5;
}

/* ── The document itself ── */
.help-doc { max-width: 62rem; color: #1f2d3d; line-height: 1.65; }

.help-doc h1 { font-size: 1.9rem; color: #0f2a4a; margin: 0 0 6px; line-height: 1.2; }
.help-doc h2 {
    font-size: 1.35rem; color: #0f2a4a; margin: 44px 0 12px;
    padding-bottom: 8px; border-bottom: 2px solid #e3eaf0;
    /* the fixed app bar would otherwise cover a heading jumped to from the contents list */
    scroll-margin-top: 84px;
}
.help-doc h3 { font-size: 1.08rem; color: #0f2a4a; margin: 30px 0 8px; scroll-margin-top: 84px; }

.help-doc p { margin: 0 0 14px; }
.help-doc ul, .help-doc ol { margin: 0 0 14px; padding-left: 22px; }
.help-doc li { margin-bottom: 6px; }
.help-doc strong { color: #0f2a4a; }
.help-doc hr { border: 0; border-top: 1px solid #e3eaf0; margin: 34px 0; }

.help-doc img {
    display: block;
    width: 100%;
    height: auto;
    margin: 18px 0 26px;
    border: 1px solid #dbe4ec;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(15, 42, 74, .09);
}

.help-doc table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 18px;
    font-size: .93rem;
}
.help-doc th, .help-doc td { border: 1px solid #dbe4ec; padding: 8px 12px; text-align: left; }
.help-doc th { background: #f3f7fa; color: #0f2a4a; font-weight: 700; }

/* Callouts — the guide uses blockquotes for "worth knowing" notes. */
.help-doc blockquote {
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1px solid #d6e2ea;
    border-left: 3px solid var(--brand-teal);
    border-radius: 8px;
    background: #f3f8fa;
}
.help-doc blockquote p:last-child { margin-bottom: 0; }

.help-doc code {
    background: #eef3f7; border-radius: 4px; padding: 1px 5px;
    font-size: .9em; color: #0f2a4a;
}
.help-doc pre {
    background: #0f2a4a; color: #e8f1f6; padding: 14px 16px;
    border-radius: 8px; overflow-x: auto; margin: 0 0 18px;
}
.help-doc pre code { background: none; color: inherit; padding: 0; }

/* ── Printing: the guide doubles as the PDF handed to staff ── */
@media print {
    .mud-appbar, .mud-drawer, .help-toc, .skip-link, #blazor-error-ui { display: none !important; }

    /* The router focuses the <h1> on navigation, which would otherwise print a box round the title. */
    :focus, :focus-visible { outline: none !important; }
    html, body, .mud-layout, .mud-main-content { background: #fff !important; }

    .mud-main-content { padding-top: 0 !important; }
    .mud-container { max-width: none !important; padding: 0 !important; }
    .help-layout { display: block; }
    .help-doc { max-width: none; font-size: 11pt; }

    /* Keep a screenshot with the text that introduces it. */
    .help-doc img { break-inside: avoid; page-break-inside: avoid; max-height: 15cm; object-fit: contain; box-shadow: none; }
    .help-doc h2, .help-doc h3 { break-after: avoid; page-break-after: avoid; }
    .help-doc table, .help-doc blockquote { break-inside: avoid; page-break-inside: avoid; }
    .help-doc h2 { margin-top: 26px; }

    a { color: inherit; text-decoration: none; }
}