/* Self-hosted Inter/Questrial (CLAUDE.md regel 9 — ingen tredjeparts-CDN'er). Inter's woff2 is a
   variable font covering the whole 400-600 range in one file; Questrial only ships weight 400. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/inter-latin-var.woff2') format('woff2');
}

@font-face {
    font-family: 'Questrial';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/questrial-latin-400.woff2') format('woff2');
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Active nav link — pill highlight */
.mud-nav-link.active,
.mud-nav-link-active {
    background-color: rgba(74, 121, 134, 0.14) !important;
    border-radius: 8px;
    color: #4A7986 !important;
}

.mud-nav-link.active .mud-nav-link-icon,
.mud-nav-link-active .mud-nav-link-icon {
    color: #4A7986 !important;
}

/* Card/paper border radius */
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-popover):not(.mud-dialog-content) {
    border-radius: 12px;
}

.mud-table-container {
    border-radius: 12px;
    overflow: hidden;
}

/* Link color — darkened from the original #F3AB16 (WCAG AA fix, Milestone 6: the brand amber
   only reached ~2.0:1 contrast against white, far short of the 4.5:1 text requirement). Same
   hue, darkened enough to pass; not a theme redesign.
   :not(.student-button) matters: without it, this rule's higher specificity (3 :not() clauses)
   overrode .student-button's own `color: #fff` on <a class="student-button"> elements (the
   elevside's "Jeg har brug for hjælp" and ExternalLink-step buttons are <a>, not <button>) —
   found during Milestone 6's contrast verification: the resulting text was near-unreadable
   dark-amber-on-dark-teal (~1.03:1), an existing bug this fix also happens to correct. */
a:not(.mud-button-root):not(.mud-nav-link):not(.mud-breadcrumb-link):not(.student-button):not(.student-resume):not(.student-module-card):not(.student-help-bubble):not(.student-hero__back):not(.student-footer__line a) {
    color: #A66600;
}

/* Blazor error boundary */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Der opstod en fejl."
}

/* Form validation — darkened green/red (WCAG AA fix, Milestone 6, same hues as before). */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #2E7D5B;
}

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

.validation-message {
    color: #C0392B;
}

/* Student shell — plain static-SSR layout, no MudBlazor providers (see StudentLayout.razor).
   Mobile-first, WCAG-conscious: high contrast, visible focus, generous tap targets.
   Design system: designguidens egne farver (teal #6695A2/#4A7986, sage #2E7D5B, guld #F3AB16),
   Questrial til overskrifter/labels, Inter til brødtekst. Hero + footer bruger samme
   gradient-opskrift som et matchet par; imellem dem et almindeligt, læsevenligt indhold. */
.student-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #F4F7F7;
    color: #324143;
}

/* Appbar logo (admin, MainLayout) — same lockup on the MudAppBar teal. */
.appbar-logo {
    display: block;
    height: 26px;
    width: auto;
}

/* Appbar account menu (MainLayout) — the header line and the logout row both need to look like
   the MudMenuItem rows around them, but neither is one: the header is static text (not
   clickable), and logout must be a real form POST for antiforgery, which MudMenuItem can't do
   (it only supports GET navigation via Href). */
.account-menu__header {
    padding: 6px 16px;
    opacity: 0.72;
}

.account-menu__logout-form {
    margin: 0;
}

.account-menu__logout-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 16px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.account-menu__logout-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.student-main {
    flex: 1;
    width: 100%;
}

.student-main :focus-visible {
    outline: 3px solid #4A7986;
    outline-offset: 2px;
}

/* Routes.razor's FocusOnNavigate focuses the page h1 on every navigation (screen readers
   announce the new page) — keep the focus, but a visible ring on a non-interactive heading
   just looks like a rendering glitch. Most student pages use <StudentHero> instead of a bare
   h1 now; this only still applies to the handful of plain-text edge pages (not found, link
   error, help-sent confirmation). */
.student-main > h1:focus,
.student-main > h1:focus-visible {
    outline: none;
}

/* Direct-child only — the hero's own <h1> (StudentHero.razor, nested several levels deep) has
   its own sizing/margin for the flex hero layout and must not inherit this. This only styles
   the handful of edge pages that still render a bare <h1> (not found, link error). */
.student-main > h1 {
    font-family: 'Questrial', system-ui, sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    color: #324143;
    margin: 1.5rem 1.25rem 0.75rem;
}

.student-step h2 {
    font-family: 'Questrial', system-ui, sans-serif;
    font-weight: 400;
    font-size: 1.15rem;
    color: #324143;
    /* MudBlazor.min.css's global reset (`*{margin:0}`, loaded on every page — see App.razor)
       zeroes this out; .student-step__content's own children get their margin reinstated
       (below), but the step title itself never did, so it collapsed flush against the body. */
    margin: 0 0 0.75rem;
}

/* Plain form fields outside the quiz/checklist widgets (currently just the help page's
   message box) — otherwise a bare, unstyled browser textarea. */
.student-main label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #324143;
    margin: 0 0 0.4rem;
}

.student-main textarea {
    display: block;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid #E7EDED;
    border-radius: 10px;
    font: inherit;
    color: #324143;
    resize: vertical;
    margin: 0 0 1rem;
}

/* Buttons — teal pill, matches the resume/help language everywhere in the flow. */
.student-button {
    display: inline-block;
    padding: 0.8rem 1.3rem;
    border-radius: 10px;
    border: 1px solid #4A7986;
    background: #4A7986;
    color: #FFFFFF;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    text-decoration: none;
}

.student-button:hover {
    background: #3A626D;
    border-color: #3A626D;
}

.student-button--secondary {
    background: transparent;
    color: #4A7986;
}

.student-button--secondary:hover {
    background: rgba(74, 121, 134, 0.08);
}

/* Visually hidden but still announced by screen readers (WCAG-conscious labels/status text). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Hero — home mode (greeting) or sub-page mode (back-link + title), see
   StudentHero.razor. Full-bleed brand band; greeting/title and mascot sit side by side in
   normal flow (never absolutely positioned) so they can never collide with the card below. ===== */
/* min-height (not asymmetric padding) is what both keeps the band's height constant across
   pages AND centers its content vertically — .student-hero itself is the flex container now, so
   the inner row sits in the middle of the band regardless of how much padding is above/below it.
   The progress card's overlap (margin-top: -2.4rem on .student-progress-card) simply eats into
   whatever the hero's actual bottom edge ends up being; the two are no longer coupled. */
.student-hero {
    background:
        radial-gradient(120% 140% at 85% -20%, rgba(200, 227, 232, 0.28) 0%, transparent 55%),
        radial-gradient(90% 90% at 0% 100%, rgba(114, 171, 149, 0.5) 0%, transparent 60%),
        linear-gradient(135deg, #6695A2 0%, #4A7986 100%);
    color: #fff;
    display: flex;
    align-items: center;
    min-height: 12rem;
    padding: 1.5rem 1.25rem;
    position: relative;
}

/* Account menu — pinned to the hero's own top-right corner via absolute positioning (the hero
   is its `position: relative` anchor). Confined to the hero's box, so unlike in-flow content it
   can never push into the progress card below. <details>/<summary> gives a working toggle with
   zero JS, required on the static SSR elevside (kravspec rule 1). */
.student-account-menu {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    z-index: 5;
}

.student-account-menu__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
    list-style: none;
}

.student-account-menu__trigger::-webkit-details-marker {
    display: none;
}

.student-account-menu__trigger svg {
    width: 1.15rem;
    height: 1.15rem;
}

.student-account-menu__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 10rem;
    background: #fff;
    color: #324143;
    border-radius: 10px;
    box-shadow: 0 10px 26px -12px rgba(50, 65, 67, 0.45);
    padding: 0.75rem;
}

.student-account-menu__header {
    border-bottom: 1px solid #E7EDED;
    padding-bottom: 0.5rem;
    margin-bottom: 0.4rem;
}

.student-account-menu__name {
    font-weight: 600;
    font-size: 0.85rem;
    margin: 0;
}

.student-account-menu__meta {
    font-size: 0.78rem;
    color: #58595B;
    margin: 0.15rem 0 0;
}

.student-account-menu__logout {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0;
    border: 0;
    background: none;
    color: #324143;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.student-hero__inner {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

/* Mascot (mand_hvidLogov4.png) replaces the old faint crest watermark — shown at full opacity
   since it's a deliberate illustration now, not a subtle background mark. Sized with clamp()
   so it reads as a real figure without out-growing the greeting text next to it. */
.student-hero__mascot {
    width: clamp(6.5rem, 20vw, 11rem);
    height: auto;
    flex-shrink: 0;
}

/* Narrow phones: the welcome sentence is long — drop the mascot rather than let it
   squeeze the text into a ragged column. */
@media (max-width: 26rem) {
    .student-hero__mascot {
        display: none;
    }
}

.student-hero__greeting {
    font-family: 'Questrial', system-ui, sans-serif;
    letter-spacing: 0.01em;
    font-size: 1.9rem;
    font-weight: 400;
    margin: 0;
}

/* Routes.razor's FocusOnNavigate focuses this <h1> on every navigation (screen readers announce
   the new page) — keep the focus, but a visible ring on a non-interactive heading just looks
   like a rendering glitch. Set directly on the hero's own classes since it sits several levels
   below .student-main, past the `> h1` direct-child rule that handles the plain edge-case pages. */
.student-hero__greeting:focus,
.student-hero__greeting:focus-visible,
.student-hero__pagetitle:focus,
.student-hero__pagetitle:focus-visible {
    outline: none;
}

.student-hero__subline {
    font-size: 0.92rem;
    opacity: 0.92;
    margin: 0.5rem 0 0;
    max-width: 34rem;
}

.student-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.78rem;
    margin: 0 0 0.7rem;
}

.student-hero__back svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* Same size as .student-hero__greeting — on a sub-page this title is the only heading (no
   subline competing for attention), so it carries the same visual weight as the home greeting. */
.student-hero__pagetitle {
    font-family: 'Questrial', system-ui, sans-serif;
    font-size: 1.9rem;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.01em;
}

/* ===== Content column — centered, readable width, independent of the hero/footer's
   full-bleed width. ===== */
.student-main > .student-progress-card,
.student-main > .student-intro,
.student-main > .student-resume,
.student-main > .student-complete-card,
.student-main > nav,
.student-main > .student-actions,
.student-main > .student-step,
.student-main > h1,
.student-main > p,
.student-main > form {
    width: min(40rem, 100% - 2.5rem);
    margin-left: auto;
    margin-right: auto;
}

/* Breathing room between the hero and whatever comes right after it. MudBlazor's global reset
   (`*{margin:0}`) zeroes out every element's own margin, so without this the first thing on the
   page — .student-resume, .student-complete-card, a bare <form> (Hjaelp.razor), the wizard's
   "Trin X af Y" <p> — sits flush against the hero with no gap at all (T's feedback 2026-08-07:
   "vi generelt mangler afstand fra Hero/header til første tekst"). .student-progress-card is the
   one deliberate exception — it's designed to overlap UP into the hero (see its own
   margin-top: -2.4rem below), so it's excluded here rather than fought with specificity. */
.student-hero + :not(.student-progress-card) {
    margin-top: 1.5rem;
}

/* ===== Progress card — segmented bar (one block per module) + deadline pill, overlapping
   the hero like a floating card. ===== */
.student-progress-card {
    /* `position: relative` (no z-index) puts this in the same "positioned" paint layer as
       .student-hero, which itself became positioned when the account menu needed an anchor
       (see .student-hero comment). Positioned elements paint above static ones regardless of
       DOM order — without this, the hero (positioned) started painting over this card's
       -2.4rem overlap instead of the reverse. Within the positioned layer, DOM order decides,
       and this card comes after the hero, so it's back on top. */
    position: relative;
    margin-top: -2.4rem;
    margin-bottom: 1rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 22px -16px rgba(50, 65, 67, 0.35);
}

.student-progress-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    padding: 1rem 1.1rem 0;
}

.student-progress-card__title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #324143;
    margin: 0;
}

.student-progress-card__count {
    font-family: 'Questrial', system-ui, sans-serif;
    font-size: 0.85rem;
    color: #58595B;
    white-space: nowrap;
}

/* ===== One continuous bar, replacing the per-module segments below (still used by
   /admin/kurser/{id}/preview, which has no real progress data to compute a percentage from —
   see the .student-progress-card__segments comment). Used on /forlob and /forlob/tema/{id}:
   a single percentage reads at any module count, where N segments stopped being legible once a
   course grew past a handful of modules. T's feedback 2026-08-07. ===== */
.student-progress-card__track {
    position: relative;
    margin: 0.6rem 1.1rem 0;
    height: 9px;
    border-radius: 5px;
    background: #E7EDED;
    overflow: hidden;
}

.student-progress-card__fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: #2E7D5B;
}

.student-progress-card__pct {
    font-family: 'Questrial', system-ui, sans-serif;
    font-size: 0.95rem;
    color: #2E7D5B;
    white-space: nowrap;
}

.student-progress-card__segments {
    display: flex;
    gap: 0.28rem;
    padding: 0.6rem 1.1rem 0;
}

.student-progress-card__segments i {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: #E7EDED;
    display: block;
}

.student-progress-card__segments i.student-progress-card__segment--done {
    background: #2E7D5B;
}

.student-progress-card__segments i.student-progress-card__segment--current {
    background: rgba(46, 125, 91, 0.5);
}

.student-progress-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 1.1rem 1rem;
}

/* No subline next to the bar (unlike the segmented version below) — just the deadline pill,
   pushed to the right on its own. */
.student-progress-card__footer--end {
    justify-content: flex-end;
}

.student-progress-card__sub {
    font-size: 0.78rem;
    color: #58595B;
    margin: 0;
}

.student-progress-card__deadline {
    font-family: 'Questrial', system-ui, sans-serif;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(74, 121, 134, 0.1);
    color: #4A7986;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Intro block — the course description, shown above the resume button. Replaced the former
   "Velkommen" module (2026-08-05), which made the student click into and acknowledge a welcome
   message before reaching anything real. Deliberately plainer than a card: it's orienting text,
   not something to act on, so it must not compete with the resume button right below it. */
.student-intro {
    margin-bottom: 1.1rem;
    font-size: 0.92rem;
    color: #4A5658;
    line-height: 1.6;
}

/* Resume — the one thing a 15-18-year-old actually needs: what's next. */
.student-resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    background: #4A7986;
    color: #fff;
    text-decoration: none;
    font-family: 'Questrial', system-ui, sans-serif;
    font-size: 0.9rem;
    min-height: 44px;
}

.student-resume:hover {
    background: #3A626D;
}

.student-resume svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

/* Shown instead of the resume button once every module is done. */
.student-complete-card {
    background: #fff;
    border: 1px solid #E7EDED;
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    text-align: center;
    margin-bottom: 1.1rem;
}

.student-complete-card__title {
    font-family: 'Questrial', system-ui, sans-serif;
    font-size: 1.05rem;
    color: #324143;
    margin: 0 0 0.4rem;
}

.student-complete-card__sub {
    font-size: 0.85rem;
    color: #58595B;
    margin: 0;
}

/* ===== Module list — icon tile (module's own topic icon, chosen in admin) + title +
   description + status pill. Status is never colour-only: the pill text always says it too. ===== */
.student-module-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.student-module-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    border: 1px solid #E7EDED;
    background: #fff;
    text-decoration: none;
    color: inherit;
    min-height: 44px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.student-module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .student-module-card {
        transition: none;
    }

    .student-module-card:hover {
        transform: none;
    }
}

.student-module-card__tile {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 11px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 125, 91, 0.14);
    color: #2E7D5B;
}

.student-module-card__tile svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.student-module-card--in-progress .student-module-card__tile {
    box-shadow: 0 0 0 3px rgba(46, 125, 91, 0.35);
}

.student-module-card--not-started .student-module-card__tile {
    background: #F4F7F7;
    color: #939598;
}

.student-module-card--completed-with-errors .student-module-card__tile {
    background: rgba(192, 57, 43, 0.12);
    color: #C0392B;
}

.student-module-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.student-module-card__body strong {
    font-size: 0.9rem;
    color: #324143;
}

.student-module-card__body span {
    font-size: 0.76rem;
    color: #58595B;
}

.student-module-card__pill {
    font-family: 'Questrial', system-ui, sans-serif;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
    background: rgba(46, 125, 91, 0.14);
    color: #2E7D5B;
}

.student-module-card--not-started .student-module-card__pill {
    background: #eef1f0;
    color: #58595B;
}

.student-module-card--completed-with-errors .student-module-card__pill {
    background: rgba(192, 57, 43, 0.12);
    color: #C0392B;
}

/* ===== Progress ring — replaces the pill above on /forlob and /forlob/tema/{id} (still used
   as-is by the admin "Vis som elev" preview and the deltager-portal, neither of which this
   redesign touched, see docs/progress.md). Not done: a partial ring plus a "completed/total"
   fraction — module count for a theme card, required-step count for a module card, always
   derived at read time (CLAUDE.md rule 12), never a rounded percentage, so the number only ever
   moves when something actually completes. Done: the ring simply closes and a small check mark
   replaces the fraction — no fill, so a finished card doesn't outweigh the rest of the list
   (T's feedback 2026-08-07: an earlier solid-disc "gennemført" read far too heavy against the
   flat list around it). Colour still comes from the card's own --completed-with-errors
   modifier below, same as the tile/pill always have — no extra modifier needed on the ring
   itself. ===== */
.student-module-card__ring {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
}

/* `>` is deliberate, not a descendant selector: rotate(-90deg) needs to turn the progress arc
   so it starts at 12 o'clock, but must NOT also turn the check mark inside a completed ring —
   a check mark rotated 90° reads as a slash through a circle, i.e. a "not allowed" sign. Both
   states share one <svg> per ring, so the fix is scoping the rotate to that single direct
   child and cancelling it again with --done below, not a second nested <svg>. */
.student-module-card__ring > svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

/* r = 15.9155 makes the circle's circumference 100, so stroke-dasharray="<n> 100" draws exactly
   n% of the ring — no JS, no computed path, just the one number from the C# side. */
.student-module-card__ring .ring-track {
    fill: none;
    stroke: #E7EDED;
    stroke-width: 3.4;
}

.student-module-card__ring .ring-value {
    fill: none;
    stroke: #2E7D5B;
    stroke-width: 3.4;
    stroke-linecap: round;
}

.student-module-card__ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Questrial', system-ui, sans-serif;
    font-size: 0.72rem;
    color: #58595B;
}

.student-module-card__ring--done > svg {
    transform: none;
}

/* stroke-linecap: round leaves a visible "knot" where a fully-closed ring's two ends meet;
   butt draws a clean unbroken circle instead. */
.student-module-card__ring--done .ring-value {
    stroke-linecap: butt;
}

.student-module-card__ring .ring-check {
    fill: none;
    stroke: #2E7D5B;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.student-module-card--completed-with-errors .student-module-card__ring .ring-value,
.student-module-card--completed-with-errors .student-module-card__ring .ring-check {
    stroke: #C0392B;
}

.student-module-card__chev {
    display: flex;
    flex-shrink: 0;
    color: rgba(50, 65, 67, 0.35);
}

.student-module-card__chev svg {
    width: 1rem;
    height: 1rem;
}

/* Floating help bubble — fixed to the viewport (the one deliberate exception to "nothing on the
   elevside is absolutely/fixed positioned", approved by T 2026-08-07): it has to survive scroll
   to stay reachable on long module pages, which an in-flow element can't do. Icon-only circle on
   narrow screens; a labeled pill from 40rem up, where there's room to say what it is without the
   icon becoming a redundant second copy of the same idea. */
.student-help-bubble {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: #fff;
    border: 1px solid #E7EDED;
    border-radius: 999px;
    box-shadow: 0 8px 20px -10px rgba(50, 65, 67, 0.45);
    text-decoration: none;
    font-family: 'Questrial', system-ui, sans-serif;
    font-size: 0.85rem;
}

.student-help-bubble__icon {
    width: 1.3rem;
    height: 1.3rem;
    flex-shrink: 0;
}

.student-help-bubble__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 40rem) {
    .student-help-bubble {
        width: auto;
        height: auto;
        padding: 0.85rem 1.3rem;
    }

    .student-help-bubble__icon {
        display: none;
    }

    .student-help-bubble__label {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
    }
}

/* Safety margin so the fixed bubble above never sits on top of the wizard's own "Forrige/Næste"
   nav on a short trin — the nav can always be scrolled clear of it. */
.student-main:has(.student-help-bubble) .student-wizard__nav {
    margin-bottom: 4.5rem;
}

/* ===== Footer — mirrors the hero's gradient (same recipe, radial highlights flipped) so the
   two bands read as a matched pair. Same logo lockup + contact line + legal links as
   vhim-gym.dk's own footer, for authenticity. ===== */
.student-footer {
    background:
        radial-gradient(120% 140% at 15% 120%, rgba(200, 227, 232, 0.28) 0%, transparent 55%),
        radial-gradient(90% 90% at 100% 0%, rgba(114, 171, 149, 0.5) 0%, transparent 60%),
        linear-gradient(135deg, #6695A2 0%, #4A7986 100%);
    padding: 1.75rem 1.25rem 1.5rem;
    text-align: center;
    margin-top: auto;
}

.student-footer__logo {
    height: 42px;
    width: auto;
    margin: 0 auto 0.9rem;
    display: block;
}

.student-footer__line {
    font-family: 'Questrial', system-ui, sans-serif;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.9;
    margin: 0;
}

.student-footer__line a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin: 0 0.2rem;
}

/* Module/step content */
.student-step {
    margin: 1.5rem 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.student-step__done {
    margin-left: 0.4rem;
    color: #2E7D5B;
    font-weight: 600;
}

.student-step__content {
    line-height: 1.6;
}

/* Prose styling for admin-authored Markdown (CLAUDE.md rule 6). MudBlazor.min.css's global
   reset (`*{margin:0;padding:0}`, loaded on every page including student pages — see
   App.razor) strips paragraph spacing and list indentation before this rule runs, so every
   element the Markdig pipeline can produce needs its spacing reinstated explicitly here. */
.student-step__content p,
.student-step__content ol,
.student-step__content ul,
.student-step__content blockquote,
.student-step__content pre,
.student-step__content table {
    margin: 0 0 1rem;
}

.student-step__content h1,
.student-step__content h2,
.student-step__content h3,
.student-step__content h4 {
    margin: 1.25rem 0 0.5rem;
}

.student-step__content > :first-child {
    margin-top: 0;
}

.student-step__content > :last-child {
    margin-bottom: 0;
}

.student-step__content ol,
.student-step__content ul {
    padding-left: 1.5rem;
}

.student-step__content li + li {
    margin-top: 0.375rem;
}

.student-step__content li > ol,
.student-step__content li > ul {
    margin-top: 0.375rem;
    margin-bottom: 0;
}

.student-step__content blockquote {
    padding-left: 1rem;
    border-left: 3px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.75);
}

.student-step__content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: rgba(0, 0, 0, 0.06);
    padding: 0.125rem 0.3125rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.student-step__content pre {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    overflow-x: auto;
}

.student-step__content pre code {
    background: none;
    padding: 0;
}

.student-step__content hr {
    margin: 1.25rem 0;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.student-step__content table {
    border-collapse: collapse;
    width: 100%;
}

.student-step__content th,
.student-step__content td {
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    text-align: left;
}

/* Checklist — each item is its own form/button so a toggle saves immediately with no JS. */
.student-checklist {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.student-checklist-item {
    display: flex;
    align-items: center;
    /* MudBlazor's global CSS reset (loaded on every page, incl. static SSR student pages) sets
       `button { justify-content: center }` — this class sets display/align-items but nothing
       else in the cascade competes for justify-content, so that rule wins uncontested and
       centers the checkbox+text group instead of hugging the left edge. Override explicitly. */
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}

.student-checklist-item__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: 2px solid #4A7986;
    border-radius: 4px;
    color: #4A7986;
    font-weight: 700;
}

.student-checklist-item[aria-pressed="true"] {
    background: rgba(46, 125, 91, 0.12);
}

.student-checklist-item[aria-pressed="true"] .student-checklist-item__box {
    background: #2E7D5B;
    border-color: #2E7D5B;
    color: #fff;
}

/* Quiz — shared by quiz-trin (student-quiz) and video overlay questions (student-video-overlay
   reuses the same .student-quiz__option/__feedback markup). */
.student-quiz__question {
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.student-quiz__option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
}

.student-quiz__option input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    accent-color: #4A7986;
}

.student-quiz__option label {
    cursor: pointer;
}

.student-quiz__feedback {
    color: #C0392B;
    font-weight: 600;
    margin: 0.5rem 0;
}

.student-quiz__result {
    color: #2E7D5B;
    font-weight: 600;
    margin: 0.5rem 0;
}

.student-quiz__explanation {
    margin: 0.5rem 0 1rem;
}

.student-hint {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.875rem;
}

/* Wizard presentation mode — one step per page (ModulWizard.razor). */
.student-wizard__progress {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.student-wizard__nav {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Video player — the container establishes the box the overlay covers; the overlay is
   positioned ON TOP of the video frame (like a popup), not stacked below it in normal flow. */
.student-video {
    position: relative;
    max-width: 100%;
}

.student-video video {
    display: block;
    width: 100%;
    border-radius: 8px;
    background: #000;
}

/* The custom fullscreen button (video-player.js) fullscreens this container — never the bare
   <video> — so the question overlays, which are siblings of <video>, stay visible. */
.student-video__fullscreen {
    margin-top: 0.5rem;
}

.student-video:fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    max-width: none;
    background: #000;
    border-radius: 0;
}

.student-video:fullscreen video {
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
}

.student-video:fullscreen .student-video__fullscreen {
    position: absolute;
    top: 1rem;
    right: 1rem;
    margin: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.student-video-overlay {
    position: absolute;
    inset: 0;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    border-radius: 8px;
    overflow-y: auto;
}

/* [hidden]'s UA-stylesheet display:none must not be beaten by an unconditional display:flex
   here — gate the flex layout on the attribute's absence instead of touching the JS toggle. */
.student-video-overlay:not([hidden]) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.student-video-overlay p {
    margin: 0;
    max-width: 32rem;
}

/* The form itself is a centered card — narrower than the fullscreen overlay — with its
   options/labels left-aligned inside, since centering each option row's text individually
   would read worse than centering the card as a whole. */
.student-video-overlay form {
    width: 100%;
    max-width: 24rem;
    text-align: left;
}

.student-video-overlay .student-quiz__option label {
    color: #fff;
}

/* Kept at the original bright amber (unlike the link-color fix above) — this sits on the
   near-black fullscreen overlay background, where it already has excellent contrast; a darker
   shade would make it HARDER to read here, not easier. */
.student-video-overlay .student-quiz__feedback {
    color: #F3AB16;
}

/* ===== Admin: step editor dialog — deliberately overridden width. The BBCode editor inside
   (Kurser.razor) splits into a textarea + live preview side by side; at the default dialog
   width those two columns end up too narrow to be useful, so this dialog claims most of the
   viewport instead of MudDialog's content-driven default. ===== */
.step-edit-dialog {
    width: min(96vw, 1400px);
    max-width: 96vw;
}

/* BbCodeEditor: the textarea column and the live-preview column sit in the same grid row, so
   they're already stretched to equal *outer* height by the row's own flex layout — but the
   textarea itself only claimed its `Lines="12"` intrinsic height inside that space, leaving the
   input looking shorter than the preview even though its column wasn't. Forcing the whole
   MudTextField chain down to the textarea to fill its column makes the input always at least as
   tall as the preview, never smaller (the actual complaint), instead of guessing a fixed height
   that would inevitably be wrong for either short or long content. */
.bbcode-editor__field-col,
.bbcode-editor__preview-col {
    display: flex;
    flex-direction: column;
}

/* The plain <input type=file> for "indsæt billede" sits inline in the MudToolBar next to the
   icon buttons — without a width cap the browser's default file-input renders far wider than
   the other toolbar controls and pushes the merge-field menu off to one side. */
.bbcode-editor__image-input {
    max-width: 12rem;
    font-size: 0.8rem;
}

.bbcode-editor__field-col .mud-input-control,
.bbcode-editor__field-col .mud-input-control-input-container,
.bbcode-editor__field-col .mud-input {
    flex: 1;
    align-items: stretch;
}

.bbcode-editor__field-col textarea.mud-input-slot {
    height: 100% !important;
}

/* Styled to match the outlined MudTextField's own fieldset/legend exactly (border-radius,
   border color, legend size/position) so it reads as the same kind of box as "Indhold" — just
   with the amber secondary color kept on the label, per feedback. */
.bbcode-editor__preview-box {
    flex: 1;
    min-height: 280px;
    margin: 0;
    padding: 12px;
    border: 1px solid rgb(189, 189, 189);
    border-radius: 10px;
    overflow-y: auto;
}

.bbcode-editor__preview-box legend {
    margin-left: 11px;
    padding: 0 5px;
    font-size: 12px;
    color: var(--mud-palette-secondary);
}