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