/* =====================================================================
   MrcemUltra design system (site.css)
   ---------------------------------------------------------------------
   Location on the server: ~/Content/site.css
   Load this file AFTER bootstrap.min.css so these styles win.

   Contents
     1.  Colours, fonts and sizes (variables)
     2.  Dark mode colours
     3.  Old variable names (keeps existing pages working)
     4.  Page basics
     5.  Layout helpers
     6.  Buttons
     7.  Tags and badges
     8.  Cards
     9.  Progress bars
     10. Forms
     11. Pop-up messages (#ModelMessage3 and #ModelMessage4)
     12. Public header
     13. Public footer
     14. Homepage (Home/Index)
     15. Free mock start page (Home/mockexam)
     16. Practice mode question screen
     17. Mock exam question screen
     18. Small helper classes
     19. Form pages (email check, sign up, log in ...)
     20. Simple pop-ups on form pages (.modal-modern)
     21. Results pages (Home/results; later User/examdetails)
     22. Images inside questions and notes

   Naming
     - New classes start with "mu-" so they never clash with Bootstrap.
     - Some old class names (.option, .q-box, .nav-link-custom ...) are
       used by the page JavaScript. They are styled here but must never
       be renamed in the HTML.

   Colour rule
     Amber (#FCA311) is used for button and bar FILLS only.
     Never use amber for text on a light background: it is unreadable
     (2:1 contrast). For amber-looking text use var(--mu-amber-text).
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. COLOURS, FONTS AND SIZES
   Change a value here and it changes everywhere.
   --------------------------------------------------------------------- */
:root {
    /* Brand colours */
    --mu-navy: #14213D;
    --mu-navy-light: #24365F;      /* navy hover */
    --mu-navy-soft: #34497A;       /* links on light backgrounds */
    --mu-cream: #F5F0E8;
    --mu-cream-dark: #EDE6DA;      /* empty part of progress bars */
    --mu-amber: #FCA311;
    --mu-amber-hover: #E8920A;
    --mu-amber-pale: #FEF1D8;      /* pale amber background */
    --mu-amber-text: #9A5B00;      /* amber-looking text, readable on cream */

    /* Backgrounds and text */
    --mu-page: #F5F0E8;            /* page background (cream) */
    --mu-white: #FFFFFF;           /* cards and panels */
    --mu-white-warm: #FBF8F3;      /* slightly warm panel */
    --mu-text: #14213D;            /* main text (navy) */
    --mu-text-muted: #5B6475;      /* secondary text */
    --mu-border: #E4DDD0;
    --mu-border-dark: #CFC6B6;

    /* Text on navy backgrounds */
    --mu-on-navy: #F5F0E8;
    --mu-on-navy-muted: #C9D1E0;

    /* Answer feedback. "Learn" is a warm terracotta, not alarm red,
       because a wrong answer is a chance to learn, not a failure. */
    --mu-correct: #1E7A55;
    --mu-correct-pale: #E5F3EC;
    --mu-learn: #B4532A;
    --mu-learn-pale: #FBEDE6;
    --mu-danger: #B42318;          /* destructive buttons only (End exam) */
    --mu-danger-pale: #FDECEA;
    --mu-info-pale: #E8EDF7;

    /* Fonts */
    --mu-font-heading: "Manrope", "Segoe UI", Arial, sans-serif;
    --mu-font-body: "Inter", "Segoe UI", Arial, sans-serif;

    /* Font sizes (phone). Bigger screens: see the media queries below. */
    --mu-size-display: 32px;       /* homepage headline */
    --mu-size-h1: 28px;
    --mu-size-h2: 22px;
    --mu-size-h3: 18px;
    --mu-size-lead: 17px;          /* intro paragraph */
    --mu-size-body: 16px;
    --mu-size-question: 17px;      /* question text */
    --mu-size-stat: 28px;          /* big numbers */
    --mu-size-small: 14px;
    --mu-size-caption: 12px;       /* smallest text allowed */

    /* Spacing scale (multiples of 4px) */
    --mu-space-1: 4px;
    --mu-space-2: 8px;
    --mu-space-3: 12px;
    --mu-space-4: 16px;
    --mu-space-5: 24px;
    --mu-space-6: 32px;
    --mu-space-7: 48px;
    --mu-space-8: 64px;
    --mu-space-9: 96px;
    --mu-page-padding: 16px;       /* left/right padding of the page */

    /* Corners and shadows */
    --mu-radius-small: 8px;        /* buttons, inputs */
    --mu-radius: 12px;             /* cards */
    --mu-radius-large: 16px;       /* large panels */
    --mu-shadow: 0 1px 2px rgba(20, 33, 61, .06), 0 2px 8px rgba(20, 33, 61, .05);
    --mu-shadow-large: 0 4px 12px rgba(20, 33, 61, .08), 0 16px 32px rgba(20, 33, 61, .08);

    --mu-max-width: 1200px;
    --mu-header-height: 64px;
}

/* Tablet and up */
@media (min-width: 768px) {
    :root {
        --mu-page-padding: 24px;
        --mu-size-display: 40px;
        --mu-size-h1: 32px;
        --mu-size-h2: 26px;
        --mu-size-h3: 20px;
        --mu-size-stat: 34px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    :root {
        --mu-size-display: 48px;
        --mu-size-h1: 36px;
        --mu-size-h2: 28px;
        --mu-size-h3: 22px;
        --mu-size-lead: 19px;
        --mu-size-question: 18px;
        --mu-size-stat: 40px;
    }
}


/* ---------------------------------------------------------------------
   2. DARK MODE COLOURS
   The logged-in area already has a dark mode switch. It puts
   data-theme="dark" on the <html> tag. These values replace the
   light ones when that happens. Public pages always stay light.
   --------------------------------------------------------------------- */
[data-theme="dark"] {
    --mu-page: #0E1830;
    --mu-white: #1B2B4F;
    --mu-white-warm: #16244A;
    --mu-text: #F5F0E8;
    --mu-text-muted: #C9D1E0;
    --mu-border: #2E4170;
    --mu-border-dark: #41578A;
    --mu-amber-text: #FCA311;      /* amber text is readable on navy */
    --mu-amber-pale: #3A3420;
    --mu-correct: #5CC99A;
    --mu-correct-pale: #173A33;
    --mu-learn: #F0A27E;
    --mu-learn-pale: #3D2A26;
    --mu-danger: #F28B82;
    --mu-danger-pale: #3D2229;
    --mu-info-pale: #22345E;
    --mu-cream-dark: #2E4170;
}


/* ---------------------------------------------------------------------
   3. OLD VARIABLE NAMES
   Many existing pages use these names in their inline styles, for
   example style="color: var(--blackcolor)". Pointing them at the new
   colours restyles those pages without touching their HTML.
   Note: while a page still has its own <style> block defining these
   names, the page's own values win. They are removed page by page.
   --------------------------------------------------------------------- */
:root {
    --backgroundtopAdminBar: var(--mu-navy);
    --topadmincolot: var(--mu-on-navy);
    --backgroundmainnav: var(--mu-navy);
    --logocolor: var(--mu-on-navy);
    --Navtogglecolor: var(--mu-on-navy);
    --liHover: rgba(245, 240, 232, .12);
    --backgroundrevisebtn: var(--mu-amber);
    --profileiconcolor: rgba(245, 240, 232, .16);
    --profilepopupbackground: var(--mu-white);
    --profilepopupcolor: var(--mu-text);
    --maindivBackground: var(--mu-page);
    --greencolor: var(--mu-navy);
    --greenhover: var(--mu-navy-light);
    --browncolor: var(--mu-learn);
    --brownhover: var(--mu-danger);
    --transparentcolor: transparent;
    --transparenthover: var(--mu-info-pale);
    --whitesmokecolor: var(--mu-white-warm);
    --blackcolor: var(--mu-text);
    --whitecolor: var(--mu-text);
    --optionCheckedBackground: var(--mu-amber-pale);
    --bookSidebar: var(--mu-white-warm);
    --cardBg: var(--mu-white);
    --borderColor: var(--mu-border);
    --textMuted: var(--mu-text-muted);
    --leftSideBg: var(--mu-white);
    --tableBg: var(--mu-white);
    --tableBorder: var(--mu-border);
    --tableHeaderBg: var(--mu-white-warm);
    --correctColor: var(--mu-correct);
    --incorrectColor: var(--mu-learn);
    --skippedColor: var(--mu-text-muted);
}


/* ---------------------------------------------------------------------
   4. PAGE BASICS
   --------------------------------------------------------------------- */

/* The layout's <body> has class="mu-body". The footer sits at the
   bottom of short pages because the body is a column flexbox. */
.mu-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--mu-page);
    color: var(--mu-text);
    font-family: var(--mu-font-body);
    font-size: var(--mu-size-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.mu-body h1,
.mu-body h2,
.mu-body h3,
.mu-body h4,
.mu-body h5,
.mu-body h6 {
    font-family: var(--mu-font-heading);
    letter-spacing: -0.01em;
}

/* Links */
a {
    color: var(--mu-navy-soft);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--mu-navy);
}

[data-theme="dark"] a {
    color: var(--mu-on-navy-muted);
}

/* Keyboard focus: a clear amber ring on anything you tab to */
:focus-visible {
    outline: 3px solid var(--mu-amber);
    outline-offset: 2px;
}

/* Users who ask their device for less motion get no animations */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Text sizes */
.mu-display {
    margin: 0;
    font-family: var(--mu-font-heading);
    font-size: var(--mu-size-display);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.mu-h1 {
    margin: 0;
    font-size: var(--mu-size-h1);
    font-weight: 800;
    line-height: 1.15;
}

.mu-h2 {
    margin: 0;
    font-size: var(--mu-size-h2);
    font-weight: 800;
    line-height: 1.2;
}

.mu-h3 {
    margin: 0;
    font-size: var(--mu-size-h3);
    font-weight: 700;
    line-height: 1.3;
}

.mu-lead {
    font-size: var(--mu-size-lead);
    line-height: 1.6;
    color: var(--mu-text-muted);
}

.mu-small {
    font-size: var(--mu-size-small);
}

.mu-muted {
    color: var(--mu-text-muted);
}

/* Small uppercase label above a heading */
.mu-eyebrow {
    display: inline-block;
    font-family: var(--mu-font-heading);
    font-size: var(--mu-size-caption);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mu-amber-text);
}

/* "Skip to content" link for keyboard users.
   Hidden on load (same technique as .mu-screen-reader-only: shrunk to
   1px and clipped). When a keyboard user presses Tab, it gets focus and
   the :focus rule shows it as an amber button in the top-left corner. */
.mu-skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mu-skip-link:focus {
    top: 8px;
    left: 16px;
    z-index: 2000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 16px;
    overflow: visible;
    clip: auto;
    border-radius: var(--mu-radius-small);
    background: var(--mu-amber);
    color: var(--mu-navy);
    font-weight: 700;
    text-decoration: none;
}


/* ---------------------------------------------------------------------
   5. LAYOUT HELPERS
   --------------------------------------------------------------------- */

/* Centres content and adds side padding */
.mu-container {
    width: 100%;
    max-width: var(--mu-max-width);
    margin: 0 auto;
    padding-left: var(--mu-page-padding);
    padding-right: var(--mu-page-padding);
}

/* Main content area: grows to push the footer down */
.mu-main {
    flex: 1 0 auto;
}

/* A full-width band of the page */
.mu-section {
    padding: var(--mu-space-8) 0;
}

@media (min-width: 992px) {
    .mu-section {
        padding: var(--mu-space-9) 0;
    }
}

.mu-section-white {
    background: var(--mu-white);
}

.mu-section-navy {
    background: var(--mu-navy);
    color: var(--mu-on-navy);
}

/* Heading block at the top of a section */
.mu-section-head {
    max-width: 680px;
    margin: 0 0 var(--mu-space-6);
}

.mu-section-head-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.mu-section-head .mu-h2 {
    margin-top: var(--mu-space-2);
}

.mu-section-head p {
    margin: var(--mu-space-3) 0 0;
}

/* Card grids: 1 column on phones, 2 on tablets, 3 on desktop */
.mu-grid {
    display: grid;
    gap: var(--mu-space-4);
}

@media (min-width: 640px) {
    .mu-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .mu-grid-3 {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--mu-space-5);
    }
}


/* ---------------------------------------------------------------------
   6. BUTTONS
   Use ONE primary (amber) button per screen: it is the next step.
   Usage: class="mu-btn mu-btn-primary"
   --------------------------------------------------------------------- */
.mu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;              /* big enough to tap on a phone */
    padding: 12px 22px;
    border: 1.5px solid transparent;
    border-radius: var(--mu-radius-small);
    font-family: var(--mu-font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.mu-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Primary: amber with navy text */
.mu-btn-primary {
    background: var(--mu-amber);
    border-color: var(--mu-amber);
    color: var(--mu-navy);
    box-shadow: 0 6px 16px -6px rgba(252, 163, 17, .7);
}

.mu-btn-primary:hover {
    background: var(--mu-amber-hover);
    border-color: var(--mu-amber-hover);
    color: var(--mu-navy);
}

/* Secondary: solid navy */
.mu-btn-secondary {
    background: var(--mu-navy);
    border-color: var(--mu-navy);
    color: var(--mu-on-navy);
}

.mu-btn-secondary:hover {
    background: var(--mu-navy-light);
    border-color: var(--mu-navy-light);
    color: var(--mu-on-navy);
}

/* Outline: navy border, for light backgrounds */
.mu-btn-outline {
    background: transparent;
    border-color: var(--mu-navy);
    color: var(--mu-navy);
}

.mu-btn-outline:hover {
    background: var(--mu-navy);
    color: var(--mu-on-navy);
}

/* Outline for navy backgrounds */
.mu-btn-outline-light {
    background: transparent;
    border-color: rgba(245, 240, 232, .55);
    color: var(--mu-on-navy);
}

.mu-btn-outline-light:hover {
    background: rgba(245, 240, 232, .1);
    border-color: var(--mu-on-navy);
    color: var(--mu-on-navy);
}

/* Quiet: looks like a link */
.mu-btn-quiet {
    min-height: 40px;
    padding: 8px 4px;
    background: none;
    color: var(--mu-navy-soft);
    text-decoration: underline;
}

/* Danger: only for actions that end or delete something */
.mu-btn-danger {
    background: transparent;
    border-color: var(--mu-danger);
    color: var(--mu-danger);
}

.mu-btn-danger:hover {
    background: var(--mu-danger-pale);
    color: var(--mu-danger);
}

/* Sizes */
.mu-btn-large {
    min-height: 56px;
    padding: 14px 28px;
    font-size: 17px;
}

.mu-btn-full {
    display: flex;
    width: 100%;
}

/* A row of buttons that wraps on small screens */
.mu-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mu-space-3);
}

/* Old button classes still used on pages not yet redesigned.
   They now follow the brand: .button-orange = primary, the rest = outline. */
.button-orange {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--mu-radius-small);
    background: var(--mu-amber);
    color: var(--mu-navy);
    font-family: var(--mu-font-heading);
    font-weight: 700;
    text-decoration: none;
}

.button-modern,
.button1,
.button2blue {
    display: inline-block;
    padding: 12px 22px;
    border: 1.5px solid var(--mu-navy);
    border-radius: var(--mu-radius-small);
    background: transparent;
    color: var(--mu-navy);
    font-family: var(--mu-font-heading);
    font-weight: 700;
    text-decoration: none;
}

.button-modern:hover,
.button1:hover,
.button2blue:hover {
    background: var(--mu-navy);
    color: var(--mu-on-navy);
}


/* ---------------------------------------------------------------------
   7. TAGS AND BADGES
   --------------------------------------------------------------------- */

/* Small "FREE" style tag */
.mu-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--mu-navy);
    color: var(--mu-amber);
    font-family: var(--mu-font-heading);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.5;
}

/* Rounded label, e.g. "Anatomy · Upper limb" */
.mu-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mu-info-pale);
    color: var(--mu-text);
    font-size: var(--mu-size-caption);
    font-weight: 600;
    line-height: 1.4;
}

.mu-badge-correct {
    background: var(--mu-correct-pale);
    color: var(--mu-correct);
}

.mu-badge-learn {
    background: var(--mu-learn-pale);
    color: var(--mu-learn);
}


/* ---------------------------------------------------------------------
   8. CARDS
   --------------------------------------------------------------------- */
.mu-card {
    padding: var(--mu-space-5);
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    background: var(--mu-white);
    box-shadow: var(--mu-shadow);
}

/* Card without shadow */
.mu-card-flat {
    box-shadow: none;
}

/* Square icon box used in cards and lists */
.mu-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--mu-radius-small);
    background: var(--mu-amber-pale);
    color: var(--mu-navy);
    font-size: 20px;
}

/* Big number with a label underneath */
.mu-stat-number {
    font-family: var(--mu-font-heading);
    font-size: var(--mu-size-stat);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.mu-stat-label {
    margin-top: var(--mu-space-2);
    font-size: var(--mu-size-small);
    color: var(--mu-text-muted);
}


/* ---------------------------------------------------------------------
   9. PROGRESS BARS
   <div class="mu-progress"><div class="mu-progress-fill" style="width:40%"></div></div>
   --------------------------------------------------------------------- */
.mu-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--mu-cream-dark);
    overflow: hidden;
}

.mu-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--mu-amber);
}


/* ---------------------------------------------------------------------
   10. FORMS
   --------------------------------------------------------------------- */
.mu-field {
    margin-bottom: var(--mu-space-4);
}

.mu-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--mu-size-small);
    font-weight: 600;
}

.mu-help {
    margin-top: 6px;
    font-size: var(--mu-size-small);
    color: var(--mu-text-muted);
}

/* Text inputs. .input1 is the old class name used across the site.
   16px text stops iPhones zooming in when the field is tapped. */
.mu-input,
.input1 {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--mu-border-dark);
    border-radius: var(--mu-radius-small);
    background: var(--mu-white);
    color: var(--mu-text);
    font-family: var(--mu-font-body);
    font-size: 16px;
}

.mu-input:focus,
.input1:focus {
    outline: 3px solid var(--mu-amber);
    outline-offset: 0;
    border-color: var(--mu-navy);
}

/* Loading spinner used by the existing #loading elements */
.spinner-border {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--mu-border);
    border-top-color: var(--mu-navy);
}


/* ---------------------------------------------------------------------
   11. POP-UP MESSAGES
   The shared pop-ups #ModelMessage3 (notice) and #ModelMessage4
   (success) are opened by page JavaScript. Their ids are unchanged;
   only their look is new. They use Bootstrap's modal.
   --------------------------------------------------------------------- */
.mu-modal .modal-dialog {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}

.mu-modal .modal-content {
    border: 0;
    border-radius: var(--mu-radius-large);
    background: var(--mu-white);
    color: var(--mu-text);
    box-shadow: var(--mu-shadow-large);
}

.mu-modal .modal-header {
    padding: 12px 12px 0;
    border: 0;
}

.mu-modal .modal-body {
    padding: 0 24px 16px;
    text-align: center;
}

.mu-modal .modal-footer {
    justify-content: center;
    padding: 0 24px 24px;
    border: 0;
}

.mu-modal .modal-footer .mu-btn {
    min-width: 140px;
}

/* Round icon at the top of the pop-up */
.mu-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    border-radius: 50%;
    font-size: 26px;
}

.mu-modal-icon-notice {
    background: var(--mu-amber-pale);
    color: var(--mu-amber-text);
}

.mu-modal-icon-success {
    background: var(--mu-correct-pale);
    color: var(--mu-correct);
}

.mu-modal-title {
    margin: 0 0 6px;
    font-family: var(--mu-font-heading);
    font-size: 18px;
    font-weight: 800;
}

.mu-modal-message {
    margin: 0;
    font-family: var(--mu-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
}


/* ---------------------------------------------------------------------
   12. PUBLIC HEADER (Shared/_LayoutPage)
   The layout JavaScript uses: #mobileMenu, .nav-menu (adds "show"),
   .nav-link-custom, .dropdown-item-custom, .btn-outline-light-new and
   .btn-primary-new. Keep those names in the HTML.

   Phones: the menu is hidden until the menu button is tapped.
   Desktop (992px and wider): the menu sits in one row.
   --------------------------------------------------------------------- */
.mu-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--mu-navy);
    color: var(--mu-on-navy);
    border-bottom: 1px solid rgba(245, 240, 232, .08);
}

.mu-header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-height: var(--mu-header-height);
}

/* Logo: image + "MrcemUltra" word mark */
.mu-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--mu-on-navy);
    text-decoration: none;
}

.mu-logo:hover {
    color: var(--mu-on-navy);
}

.mu-logo img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.mu-logo-word {
    font-family: var(--mu-font-heading);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.mu-logo-word span {
    color: var(--mu-amber);
}

/* Menu button (three lines), phones only */
.mu-menu-button {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    border: 0;
    border-radius: var(--mu-radius-small);
    background: rgba(245, 240, 232, .08);
    cursor: pointer;
}

.mu-menu-button span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--mu-on-navy);
}

/* Menu: hidden on phones until JavaScript adds "show" */
.mu-header .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 8px 0 16px;
    border-top: 1px solid rgba(245, 240, 232, .1);
}

.mu-header .nav-menu.show {
    display: flex;
}

/* Menu links */
.mu-header .nav-link-custom {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--mu-radius-small);
    color: var(--mu-on-navy);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.mu-header .nav-link-custom:hover {
    background: rgba(245, 240, 232, .08);
    color: var(--mu-on-navy);
}

/* "Exams" group. On phones the group name is a small heading and its
   links are always shown underneath. On desktop it becomes a dropdown. */
.mu-nav-group {
    position: relative;
}

.mu-nav-group-name {
    display: block;
    width: 100%;
    padding: 12px 12px 4px;
    border: 0;
    background: none;
    color: var(--mu-on-navy-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: left;
    text-transform: uppercase;
}

.mu-nav-group-name .fa {
    display: none;                 /* the arrow only shows on desktop */
}

.mu-header .dropdown-menu-custom {
    padding-bottom: 8px;
}

.mu-header .dropdown-item-custom {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px 10px 24px;
    border-radius: var(--mu-radius-small);
    color: var(--mu-on-navy);
    font-size: 15px;
    text-decoration: none;
}

.mu-header .dropdown-item-custom:hover {
    background: rgba(245, 240, 232, .08);
    color: var(--mu-on-navy);
}

/* Log in / Sign up */
.mu-header .auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(245, 240, 232, .1);
}

.mu-header .btn-outline-light-new,
.mu-header .btn-primary-new {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1.5px solid transparent;
    border-radius: var(--mu-radius-small);
    color: var(--mu-on-navy);
    font-family: var(--mu-font-heading);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.mu-header .btn-outline-light-new:hover {
    background: rgba(245, 240, 232, .08);
    color: var(--mu-on-navy);
}

/* "Sign up" has an outline */
.mu-header .btn-primary-new {
    border-color: rgba(245, 240, 232, .55);
}

.mu-header .btn-primary-new:hover {
    background: var(--mu-on-navy);
    color: var(--mu-navy);
}

/* Desktop header */
@media (min-width: 992px) {
    .mu-menu-button {
        display: none;
    }

    .mu-header .nav-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2px;
        width: auto;
        padding: 0;
        border-top: 0;
    }

    /* "Exams" looks like the other menu links */
    .mu-nav-group-name {
        display: flex;
        align-items: center;
        gap: 6px;
        width: auto;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: var(--mu-radius-small);
        color: var(--mu-on-navy);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        cursor: pointer;
    }

    .mu-nav-group-name:hover {
        background: rgba(245, 240, 232, .08);
    }

    .mu-nav-group-name .fa {
        display: inline-block;
        font-size: 12px;
    }

    /* Dropdown: hidden until the mouse is over the group, or a
       keyboard user tabs into it */
    .mu-header .dropdown-menu-custom {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        padding: 8px;
        border-radius: var(--mu-radius);
        background: var(--mu-white);
        box-shadow: var(--mu-shadow-large);
    }

    .mu-nav-group:hover .dropdown-menu-custom,
    .mu-nav-group:focus-within .dropdown-menu-custom {
        display: block;
    }

    .mu-header .dropdown-item-custom {
        padding: 10px 12px;
        color: var(--mu-navy);
    }

    .mu-header .dropdown-item-custom:hover {
        background: var(--mu-cream);
        color: var(--mu-navy);
    }

    .mu-header .auth-buttons {
        flex-direction: row;
        align-items: center;
        margin: 0 0 0 12px;
        padding: 0 0 0 12px;
        border-top: 0;
        border-left: 1px solid rgba(245, 240, 232, .15);
    }
}


/* ---------------------------------------------------------------------
   13. PUBLIC FOOTER (Shared/_LayoutPage)
   Keep id="fotter": Home/mockexampublic hides the footer using it.
   --------------------------------------------------------------------- */
.mu-footer {
    flex-shrink: 0;
    padding: var(--mu-space-7) 0 var(--mu-space-5);
    background: var(--mu-navy);
    color: var(--mu-on-navy-muted);
    font-size: var(--mu-size-small);
}

/* 1 column on phones, 3 columns from tablet up */
.mu-footer-columns {
    display: grid;
    gap: var(--mu-space-6);
}

@media (min-width: 768px) {
    .mu-footer-columns {
        grid-template-columns: 1.6fr 1fr 1fr;
    }
}

.mu-footer-tagline {
    max-width: 340px;
    margin: 12px 0 0;
}

.mu-footer-heading {
    margin: 0 0 12px;
    color: var(--mu-on-navy);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mu-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mu-footer ul a {
    display: inline-block;
    padding: 6px 0;
    color: var(--mu-on-navy-muted);
    text-decoration: none;
}

.mu-footer ul a:hover {
    color: var(--mu-on-navy);
    text-decoration: underline;
}

/* Company and trademark text */
.mu-footer-legal {
    margin-top: var(--mu-space-6);
    padding-top: var(--mu-space-5);
    border-top: 1px solid rgba(245, 240, 232, .12);
    font-size: 12px;
    line-height: 1.7;
}

.mu-footer-legal p {
    margin: 0 0 8px;
}


/* ---------------------------------------------------------------------
   14. HOMEPAGE (Home/Index)
   --------------------------------------------------------------------- */

/* --- Hero (navy top section) --- */
.mu-hero {
    padding: var(--mu-space-7) 0 var(--mu-space-8);
    color: var(--mu-on-navy);
    /* Navy background with two subtle layers on top:
       1. a soft amber glow in the top-right corner
       2. a faint lighter diagonal across the lower right */
    background-color: var(--mu-navy);
    background-image:
        radial-gradient(1000px 500px at 85% -10%, rgba(252, 163, 17, .16), transparent 60%),
        linear-gradient(160deg, transparent 55%, rgba(255, 255, 255, .035) 55%);
}

/* Text on the left, question preview on the right (desktop) */
.mu-hero-columns {
    display: grid;
    gap: var(--mu-space-6);
    align-items: center;
}

@media (min-width: 992px) {
    .mu-hero {
        padding: var(--mu-space-8) 0 var(--mu-space-9);
    }

    .mu-hero-columns {
        grid-template-columns: 1.15fr .85fr;
        gap: var(--mu-space-8);
    }
}

.mu-hero .mu-eyebrow {
    color: var(--mu-amber);
}

.mu-hero .mu-display {
    margin-top: 12px;
    color: var(--mu-on-navy);
}

/* The amber words in the headline */
.mu-hero .mu-display em {
    font-style: normal;
    color: var(--mu-amber);
}

.mu-hero .mu-lead {
    max-width: 560px;
    margin: 16px 0 0;
    color: var(--mu-on-navy-muted);
}

.mu-hero-buttons {
    margin-top: var(--mu-space-5);
}

/* On small phones the hero buttons fill the width */
@media (max-width: 479px) {
    .mu-hero-buttons .mu-btn {
        width: 100%;
    }
}

.mu-hero-note {
    margin: 12px 0 0;
    font-size: var(--mu-size-small);
    color: var(--mu-on-navy-muted);
}

/* "Built by doctors who sat and passed MRCEM Primary." */
.mu-credibility {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: var(--mu-space-5);
    padding-top: var(--mu-space-5);
    border-top: 1px solid rgba(245, 240, 232, .14);
    color: var(--mu-on-navy);
    font-weight: 600;
}

.mu-credibility .mu-icon-box {
    background: rgba(252, 163, 17, .16);
    color: var(--mu-amber);
}

/* --- Question preview card in the hero (a picture, not interactive) --- */
.mu-preview {
    margin: 0;
    padding: var(--mu-space-5);
    border-radius: var(--mu-radius-large);
    background: var(--mu-white);
    color: var(--mu-text);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .45);
    transform: rotate(-1deg);      /* slight tilt so it reads as a preview */
}

@media (min-width: 768px) {
    .mu-preview {
        padding: var(--mu-space-6);
    }
}

.mu-preview-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mu-preview-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--mu-text-muted);
    white-space: nowrap;
}

.mu-preview-question {
    margin: 16px 0;
    font-size: var(--mu-size-question);
    font-weight: 600;
    line-height: 1.5;
}

.mu-preview-options {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mu-preview-options li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1.5px solid var(--mu-border-dark);
    border-radius: var(--mu-radius-small);
    font-size: 15px;
}

/* The option shown as chosen */
.mu-preview-options li.mu-chosen {
    border-color: var(--mu-navy);
    background: var(--mu-amber-pale);
}

/* A, B, C, D letter boxes */
.mu-preview-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--mu-cream);
    font-family: var(--mu-font-heading);
    font-size: 12px;
    font-weight: 800;
}

.mu-chosen .mu-preview-letter {
    background: var(--mu-navy);
    color: var(--mu-amber);
}

/* "How sure are you?" box */
.mu-preview-confidence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed var(--mu-border-dark);
    border-radius: var(--mu-radius-small);
    background: var(--mu-white-warm);
}

.mu-preview-ask {
    font-size: var(--mu-size-small);
    font-weight: 700;
}

.mu-preview-chips {
    display: flex;
    gap: 6px;
}

.mu-preview-chips span {
    padding: 6px 10px;
    border: 1.5px solid var(--mu-navy);
    border-radius: 6px;
    font-family: var(--mu-font-heading);
    font-size: 12px;
    font-weight: 700;
}

.mu-preview-caption {
    margin-top: 16px;
    font-size: var(--mu-size-small);
    color: var(--mu-text-muted);
}

/* --- Facts strip under the hero --- */
.mu-facts {
    background: var(--mu-white);
    border-bottom: 1px solid var(--mu-border);
}

/* 2 columns on phones, 4 on desktop */
.mu-facts-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin: 0;
    padding: var(--mu-space-5) 0;
    list-style: none;
}

@media (min-width: 992px) {
    .mu-facts-list {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.mu-facts-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--mu-size-small);
    line-height: 1.4;
}

.mu-facts-list strong {
    display: block;
    font-family: var(--mu-font-heading);
    font-size: 16px;
}

.mu-facts-list .mu-icon-box {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

/* --- "Three steps" section --- */
.mu-steps {
    display: grid;
    gap: var(--mu-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .mu-steps {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--mu-space-5);
    }
}

.mu-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mu-navy);
    color: var(--mu-amber);
    font-family: var(--mu-font-heading);
    font-weight: 800;
}

.mu-step .mu-h3 {
    margin-top: 16px;
}

.mu-step p {
    margin: 8px 0 0;
    color: var(--mu-text-muted);
}

/* Small amber line at the bottom of each step */
.mu-step .mu-step-note {
    margin-top: 16px;
    font-size: var(--mu-size-small);
    font-weight: 600;
    color: var(--mu-amber-text);
}

.mu-steps-button {
    margin-top: var(--mu-space-6);
    text-align: center;
}

/* --- Exam blueprint section --- */
.mu-blueprint-columns {
    display: grid;
    gap: var(--mu-space-6);
    align-items: center;
}

@media (min-width: 992px) {
    .mu-blueprint-columns {
        grid-template-columns: .9fr 1.1fr;
        gap: var(--mu-space-8);
    }
}

.mu-blueprint-numbers {
    display: flex;
    gap: var(--mu-space-6);
    margin-top: var(--mu-space-5);
}

.mu-blueprint-card-title {
    margin-bottom: var(--mu-space-5);
}

/* Subject name and number on one line, bar underneath */
.mu-subject-bars {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mu-subject-bars li {
    margin-bottom: 16px;
    font-size: 15px;
}

.mu-subject-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.mu-subject-count {
    font-family: var(--mu-font-heading);
    font-weight: 700;
}

.mu-subject-bars .mu-progress {
    height: 10px;
}

/* --- Feature cards --- */
.mu-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.mu-feature .mu-h3 {
    font-size: 17px;
}

.mu-feature p {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--mu-text-muted);
}

/* --- Credibility section (navy) --- */
.mu-about-columns {
    display: grid;
    gap: var(--mu-space-6);
    align-items: center;
}

@media (min-width: 992px) {
    .mu-about-columns {
        grid-template-columns: 1fr 1fr;
        gap: var(--mu-space-8);
    }
}

.mu-about .mu-h2 {
    color: var(--mu-on-navy);
}

.mu-about p {
    color: var(--mu-on-navy-muted);
}

.mu-about-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--mu-radius-large);
}

/* --- Final call to action --- */
.mu-final {
    text-align: center;
    background: var(--mu-amber-pale);
    border-top: 1px solid var(--mu-border);
}

.mu-final .mu-h2 {
    max-width: 640px;
    margin: 0 auto;
}

.mu-final p {
    max-width: 520px;
    margin: 12px auto 0;
}

.mu-final .mu-btn-row {
    justify-content: center;
    margin-top: var(--mu-space-5);
}


/* ---------------------------------------------------------------------
   15. FREE MOCK START PAGE (Home/mockexam)
   --------------------------------------------------------------------- */
.mu-start {
    padding: var(--mu-space-7) 0 var(--mu-space-8);
}

.mu-start-card {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--mu-space-5);
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-large);
    background: var(--mu-white);
    box-shadow: var(--mu-shadow);
}

@media (min-width: 768px) {
    .mu-start-card {
        padding: var(--mu-space-7);
    }
}

.mu-start-card .mu-h1 {
    margin-top: 8px;
}

.mu-start-card .mu-lead {
    margin: 12px 0 0;
}

/* Three facts: time, format, results */
.mu-start-facts {
    display: grid;
    gap: 12px;
    margin: var(--mu-space-5) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .mu-start-facts {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.mu-start-facts li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--mu-radius);
    background: var(--mu-white-warm);
    font-size: var(--mu-size-small);
    line-height: 1.4;
}

.mu-start-facts strong {
    display: block;
    font-family: var(--mu-font-heading);
    font-size: 16px;
}

.mu-start-facts .mu-icon-box {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

/* "What happens" numbered list */
.mu-start-steps {
    margin: var(--mu-space-6) 0 0;
    padding: 0;
    list-style: none;
}

.mu-start-steps li {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--mu-border);
}

.mu-start-steps li:last-child {
    border-bottom: 1px solid var(--mu-border);
}

.mu-start-steps .mu-step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.mu-start-steps strong {
    display: block;
    font-family: var(--mu-font-heading);
}

.mu-start-steps p {
    margin: 2px 0 0;
    color: var(--mu-text-muted);
    font-size: 15px;
}

/* Calm tip box */
.mu-tip {
    display: flex;
    gap: 12px;
    margin-top: var(--mu-space-5);
    padding: 16px;
    border-radius: var(--mu-radius);
    background: var(--mu-info-pale);
    font-size: 15px;
}

.mu-tip .fa {
    margin-top: 3px;
    color: var(--mu-navy);
}

.mu-start-action {
    margin-top: var(--mu-space-6);
    text-align: center;
}

.mu-start-action .mu-btn {
    width: 100%;
}

@media (min-width: 640px) {
    .mu-start-action .mu-btn {
        width: auto;
        min-width: 320px;
    }
}

/* "No account needed to start. Verify your email to see your results." */
.mu-start-note {
    margin: 12px 0 0;
    font-size: 15px;
    font-weight: 600;
}

.mu-start-login {
    margin: 16px 0 0;
    font-size: var(--mu-size-small);
    color: var(--mu-text-muted);
}


/* ---------------------------------------------------------------------
   16. PRACTICE MODE QUESTION SCREEN (User/startrevision)
   Not applied yet: switched on later by adding class="mu-practice" to
   the page's outer element. The JavaScript adds and removes .option,
   .q-box, .correct, .incorrect, .skipped and .unattempted itself;
   these rules only change how they look.
   --------------------------------------------------------------------- */

/* The 60-second countdown is hidden in practice mode. The timer still
   runs in the background, so the timing data sent to the server is the
   same as before. */
.mu-practice #timerBox {
    display: none;
}

/* Question text */
.mu-practice #questionText {
    margin-bottom: var(--mu-space-5);
    font-size: var(--mu-size-question);
    line-height: 1.65;
}

/* Answer options */
.mu-practice .option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 56px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--mu-border-dark);
    border-radius: var(--mu-radius);
    background: var(--mu-white);
    color: var(--mu-text);
    cursor: pointer;
}

.mu-practice .option:hover {
    border-color: var(--mu-navy-soft);
}

.mu-practice .option input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--mu-navy);
}

/* Highlight the option whose radio button is ticked.
   (:has is supported by current browsers; older ones skip the highlight
   but the radio button itself still shows the choice.) */
.mu-practice .option:has(input:checked) {
    border-color: var(--mu-navy);
    background: var(--mu-amber-pale);
}

/* Percentages shown on each option after answering: calm grey */
.mu-practice #optAResult,
.mu-practice #optBResult,
.mu-practice #optCResult,
.mu-practice #optDResult,
.mu-practice #optEResult {
    margin-left: auto;
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
    white-space: nowrap;
}

/* Explanation box: hidden while empty, a calm card once filled */
.mu-practice #shortanswerDiv:not(:empty),
.mu-practice #completeAnswerDiv:not(:empty) {
    margin-top: 16px;
    padding: var(--mu-space-5);
    border: 1px solid var(--mu-border);
    border-left: 4px solid var(--mu-amber);
    border-radius: var(--mu-radius);
    background: var(--mu-white);
    line-height: 1.7;
}

/* Confidence buttons (Sure / Maybe / Guessing) */
.mu-practice .confidence-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mu-practice .confidence-btn-sm {
    flex: 1;
    min-width: 96px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1.5px solid var(--mu-navy);
    border-radius: var(--mu-radius-small);
    background: var(--mu-white);
    color: var(--mu-navy);
    font-family: var(--mu-font-heading);
    font-weight: 700;
    cursor: pointer;
}

.mu-practice .confidence-btn-sm:hover {
    background: var(--mu-navy);
    color: var(--mu-on-navy);
}

/* Question navigator squares */
.mu-practice #questionCalendar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 6px;
}

.mu-practice .q-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: 1.5px solid var(--mu-border-dark);
    border-radius: var(--mu-radius-small);
    background: var(--mu-white);
    color: var(--mu-text);
    font-size: var(--mu-size-small);
    font-weight: 600;
    cursor: pointer;
}

.mu-practice .q-box.correct {
    border-color: var(--mu-correct);
    background: var(--mu-correct);
    color: #FFFFFF;
}

.mu-practice .q-box.incorrect {
    border-color: var(--mu-learn);
    background: var(--mu-learn);
    color: #FFFFFF;
}

.mu-practice .q-box.skipped {
    border-style: dashed;
    color: var(--mu-text-muted);
}

.mu-practice .q-box.unattempted {
    background: var(--mu-white-warm);
    color: var(--mu-text-muted);
}


/* ---------------------------------------------------------------------
   17. MOCK EXAM QUESTION SCREEN
   Used by: Home/mockexampublic (free mock). Later: User/startexam.
   Switched on by the wrapper <div class="mu-mock">.

   Styled like a test-centre (Pearson VUE style) exam screen: plain,
   white, no colours that hint at right or wrong answers.
   Every exam colour and size is a variable in the first block below,
   so it can be matched to a reference screenshot by editing values.
   --------------------------------------------------------------------- */
.mu-mock {
    --mu-exam-background: #FFFFFF;
    --mu-exam-text: #1A1A1A;
    --mu-exam-muted: #555555;
    --mu-exam-bar-background: #14213D;  /* top and bottom bars */
    --mu-exam-bar-text: #FFFFFF;
    --mu-exam-bar-height: 56px;
    --mu-exam-font: Arial, Helvetica, sans-serif;
    --mu-exam-font-size: 16px;
    --mu-exam-question-size: 18px;
    --mu-exam-line: #D0D0D0;
    --mu-exam-selected: #E8EEF9;         /* chosen option */
    --mu-exam-button-background: #F2F2F2;
    --mu-exam-button-text: #1A1A1A;
    --mu-exam-button-border: #8A8A8A;
    --mu-exam-button-radius: 3px;
    --mu-exam-next-background: #FCA311; /* Next button */
    --mu-exam-next-text: #14213D;
    --mu-exam-square-size: 36px;         /* question grid squares */
    --mu-exam-answered: #3C5A99;
    --mu-exam-unanswered: #FFFFFF;
    --mu-exam-skipped: #F3F3F3;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--mu-exam-background);
    color: var(--mu-exam-text);
    font-family: var(--mu-exam-font);
    font-size: var(--mu-exam-font-size);
}

/* --- Top and bottom bars --- */
.mu-exam-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--mu-exam-bar-height);
    padding: 8px var(--mu-page-padding);
    background: var(--mu-exam-bar-background);
    color: var(--mu-exam-bar-text);
    font-size: 14px;
}

/* The bottom bar stays in view while the question scrolls */
.mu-exam-bar-bottom {
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.mu-exam-name {
    margin: 0;
    font-family: var(--mu-exam-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

.mu-exam-bar-right,
.mu-exam-bar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.mu-exam-bar-left {
    gap: 8px;
}

/* On phones the candidate name is hidden to leave room for the timer */
.mu-exam-candidate {
    display: none;
}

@media (min-width: 640px) {
    .mu-exam-candidate {
        display: inline;
    }
}

.mu-mock #timerBox {
    margin: 0;
    color: var(--mu-exam-bar-text);
    font-weight: 700;
    white-space: nowrap;
}

/* --- Page body: question on the left, grid on the right (desktop) --- */
.mu-exam-layout {
    flex: 1;
    display: grid;
    gap: var(--mu-space-5);
    width: 100%;
    max-width: var(--mu-max-width);
    margin: 0 auto;
    padding: var(--mu-space-5) var(--mu-page-padding);
}

@media (min-width: 992px) {
    .mu-exam-layout {
        grid-template-columns: 1fr 300px;
        gap: var(--mu-space-7);
        padding-top: var(--mu-space-6);
    }
}

/* Subject and chapter labels are not filled in on the free mock */
.mu-mock .info-row {
    display: none;
}

/* "Question Sequence: 3/40" (text written by the page script) */
.mu-exam-question-number {
    margin-bottom: 12px;
    color: var(--mu-exam-muted);
    font-size: 14px;
    font-weight: 700;
}

.mu-mock #questionText {
    max-width: 760px;
    margin-bottom: var(--mu-space-5);
    font-size: var(--mu-exam-question-size);
    line-height: 1.6;
}

/* --- Answer options: plain rows with a line between, like the real exam --- */
.mu-mock .options {
    max-width: 760px;
    border-top: 1px solid var(--mu-exam-line);
}

.mu-mock .option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 14px 12px;
    border-bottom: 1px solid var(--mu-exam-line);
    color: var(--mu-exam-text);
    line-height: 1.5;
    cursor: pointer;
}

.mu-mock .option:hover {
    background: #FAFAFA;
}

.mu-mock .option input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--mu-exam-answered);
}

/* Highlight the option whose radio button is ticked.
   (Older browsers skip the highlight; the ticked radio still shows it.) */
.mu-mock .option:has(input:checked) {
    background: var(--mu-exam-selected);
}

.mu-option-letter {
    min-width: 20px;
    font-weight: 700;
}

/* Saving indicator under the options */
.mu-exam-loading {
    margin-top: 12px;
}

/* --- Question grid (right column on desktop, below the question on phones) --- */
.mu-exam-side {
    align-self: start;
    padding: 16px;
    border: 1px solid var(--mu-exam-line);
    border-radius: 4px;
}

.mu-exam-side-title {
    margin: 0 0 8px;
    font-family: var(--mu-exam-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

/* Counts and colour key above the grid (text written by the page script) */
.mu-mock #calenderhead {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    color: var(--mu-exam-muted);
    font-size: 13px;
}

.mu-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mu-legend-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--mu-exam-line);
    border-radius: 2px;
}

.mu-legend-answered {
    border-color: var(--mu-exam-answered);
    background: var(--mu-exam-answered);
}

.mu-legend-skipped {
    border-style: dashed;
    background: var(--mu-exam-skipped);
}

.mu-legend-unanswered {
    background: var(--mu-exam-unanswered);
}

.mu-mock #questionCalendar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--mu-exam-square-size), 1fr));
    gap: 6px;
}

/* Desktop: the grid scrolls inside its panel instead of making the page long */
@media (min-width: 992px) {
    .mu-mock #questionCalendar {
        max-height: 55vh;
        overflow-y: auto;
        padding-right: 4px;
    }
}

/* Squares are created by the page script with class "q-box" plus one of:
   correct, incorrect, skipped, unattempted.
   In a mock the answer is never revealed, so "correct" and "incorrect"
   look the same: both simply mean "answered". */
.mu-mock .q-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--mu-exam-square-size);
    border: 1px solid var(--mu-exam-line);
    border-radius: 2px;
    background: var(--mu-exam-unanswered);
    color: var(--mu-exam-text);
    font-size: 13px;
    cursor: pointer;
}

.mu-mock .q-box:hover {
    border-color: var(--mu-exam-answered);
}

.mu-mock .q-box.correct,
.mu-mock .q-box.incorrect {
    border-color: var(--mu-exam-answered);
    background: var(--mu-exam-answered);
    color: #FFFFFF;
}

.mu-mock .q-box.skipped {
    border-style: dashed;
    background: var(--mu-exam-skipped);
}

/* --- Buttons --- */
.mu-exam-button {
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--mu-exam-button-border);
    border-radius: var(--mu-exam-button-radius);
    background: var(--mu-exam-button-background);
    color: var(--mu-exam-button-text);
    font-family: var(--mu-exam-font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.mu-exam-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* End exam: kept away from Next and outlined in red */
.mu-exam-button-end {
    border-color: #F2B8B5;
    background: transparent;
    color: #FFFFFF;
}

/* Next button.
   The page script sets an inline green or red background on #btnNext
   ($("#btnNext").css("background-color", ...)). We are not allowed to
   change the script, so !important is the only way to keep the brand
   colour. This is the one deliberate exception to the no-!important rule. */
.mu-mock #btnNext {
    min-width: 120px;
    border-color: var(--mu-exam-next-background);
    background: var(--mu-exam-next-background) !important;
    color: var(--mu-exam-next-text);
}


/* ---------------------------------------------------------------------
   18. SMALL HELPER CLASSES
   --------------------------------------------------------------------- */
.mu-center {
    text-align: center;
}

.mu-margin-top {
    margin-top: var(--mu-space-3);
}

.mu-margin-top-large {
    margin-top: var(--mu-space-5);
}

/* Hidden visually but still read by screen readers */
.mu-screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* ---------------------------------------------------------------------
   19. FORM PAGES
   A centred card for short forms. First used by Home/verifyEmailForMock;
   to be reused by sign up, log in and password pages.
   --------------------------------------------------------------------- */
.mu-form-page {
    padding: var(--mu-space-7) 0 var(--mu-space-8);
}

.mu-form-card {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--mu-space-5);
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-large);
    background: var(--mu-white);
    box-shadow: var(--mu-shadow);
}

@media (min-width: 768px) {
    .mu-form-card {
        padding: var(--mu-space-7);
    }
}

.mu-form-card .mu-h1 {
    margin-top: 8px;
}

.mu-form-card .mu-lead {
    margin: 12px 0 0;
}

/* Soft panel inside the card, e.g. "What you'll see" */
.mu-form-panel {
    margin-top: var(--mu-space-5);
    padding: 16px;
    border-radius: var(--mu-radius);
    background: var(--mu-white-warm);
}

.mu-form-panel-title {
    margin: 0 0 8px;
    font-family: var(--mu-font-heading);
    font-weight: 700;
}

/* List with green ticks */
.mu-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mu-checklist li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 6px 0;
    font-size: 15px;
}

.mu-checklist .fa {
    color: var(--mu-correct);
}

/* Short numbered list of the steps in a form */
.mu-form-steps {
    margin: var(--mu-space-5) 0 0;
    padding: 0;
    list-style: none;
}

.mu-form-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 15px;
}

.mu-form-steps .mu-step-number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    font-size: 13px;
}

/* "(optional)" next to a label */
.mu-optional {
    font-weight: 400;
    color: var(--mu-text-muted);
}

/* Tick box with its text. The whole line can be tapped. */
.mu-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0;
    font-size: 15px;
    cursor: pointer;
}

.mu-check input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--mu-navy);
}

.mu-form {
    margin-top: var(--mu-space-5);
}

/* Label on the left, small link on the right ("Forgot password?") */
.mu-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.mu-label-link {
    font-size: var(--mu-size-small);
    font-weight: 600;
}

/* Short note under the heading, e.g. "Coming soon." */
.mu-form-note {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: var(--mu-radius-small);
    background: var(--mu-info-pale);
    font-size: 15px;
    font-weight: 600;
}

/* Log-in error message. Hidden until the page script adds "show". */
.alert-message {
    display: none;
    margin-top: var(--mu-space-5);
    padding: 12px 16px;
    border-left: 4px solid var(--mu-learn);
    border-radius: var(--mu-radius-small);
    background: var(--mu-learn-pale);
    color: var(--mu-text);
    font-size: 15px;
}

.alert-message.show {
    display: block;
}

.alert-message .fa {
    margin-right: 6px;
    color: var(--mu-learn);
}

/* Course choice on the "Log in" page: the whole card is the link */
.mu-course-list {
    margin-top: var(--mu-space-5);
}

.mu-course-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1.5px solid var(--mu-border-dark);
    border-radius: var(--mu-radius);
    color: var(--mu-text);
    text-decoration: none;
}

.mu-course-option:hover {
    border-color: var(--mu-navy);
    background: var(--mu-white-warm);
    color: var(--mu-text);
}

.mu-course-option-text {
    flex: 1;
    font-size: 15px;
    color: var(--mu-text-muted);
}

.mu-course-option-text strong {
    display: block;
    color: var(--mu-text);
    font-family: var(--mu-font-heading);
    font-size: 18px;
}

/* Second step that appears after the first button is pressed */
.mu-code-step {
    margin-top: var(--mu-space-5);
    padding-top: var(--mu-space-5);
    border-top: 1px solid var(--mu-border);
}

.mu-code-step .mu-btn {
    margin-top: 12px;
}

.mu-form-loading {
    margin-top: 16px;
    text-align: center;
}

.mu-form-small {
    margin: 16px 0 0;
    font-size: var(--mu-size-small);
    color: var(--mu-text-muted);
    text-align: center;
}


/* ---------------------------------------------------------------------
   20. SIMPLE POP-UPS ON FORM PAGES
   Some pages (verifyEmailForMock, signup, forgotpassword, resetpassword,
   signupsilent) use their own pop-up instead of Bootstrap's. Their
   script calls showModal(id) / closeModal(id), which add or remove the
   class "show". Hidden by default, shown when "show" is added.
   Inside, they use the same look as section 11 (.mu-modal-icon etc.).
   --------------------------------------------------------------------- */
.modal-modern {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    padding: 16px;
    background: rgba(20, 33, 61, .55);   /* dimmed navy backdrop */
    align-items: center;
    justify-content: center;
}

.modal-modern.show {
    display: flex;
}

.modal-content-modern {
    width: 100%;
    max-width: 420px;
    border-radius: var(--mu-radius-large);
    background: var(--mu-white);
    color: var(--mu-text);
    box-shadow: var(--mu-shadow-large);
}

.modal-header-modern {
    padding: 12px 12px 0;
    text-align: right;
}

.btn-close-modern {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--mu-radius-small);
    background: none;
    color: var(--mu-text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.btn-close-modern:hover {
    background: var(--mu-white-warm);
}

.modal-body-modern {
    padding: 0 24px 16px;
    text-align: center;
}

.modal-footer-modern {
    padding: 0 24px 24px;
    text-align: center;
}

.modal-footer-modern .mu-btn {
    min-width: 140px;
}


/* ---------------------------------------------------------------------
   21. RESULTS PAGES
   Used by: Home/results (free mock). Later: User/examdetails and
   User/revisiondetails, which share the same structure.
   The page script builds the question list inside #revisionDiv1 and
   fills the #ModelOptions pop-up. Some of that HTML comes with inline
   styles from the script; the rules below style around them.
   --------------------------------------------------------------------- */
.mu-results {
    padding: var(--mu-space-6) 0 var(--mu-space-8);
}

/* Heading on the left, score card on the right (desktop) */
.mu-results-top {
    display: grid;
    gap: var(--mu-space-5);
    align-items: center;
    margin-bottom: var(--mu-space-5);
}

@media (min-width: 992px) {
    .mu-results-top {
        grid-template-columns: 1fr 380px;
        gap: var(--mu-space-7);
    }
}

.mu-results-head {
    max-width: 720px;
}

.mu-results-head .mu-h1 {
    margin-top: 8px;
}

.mu-results-head .mu-lead {
    margin: 12px 0 0;
}

/* Score card: large accuracy figure plus the other numbers.
   The numbers are read from the server summary by the Razor code at the
   top of Home/results.cshtml. */
.mu-score {
    padding: var(--mu-space-5);
    border-radius: var(--mu-radius);
    background: var(--mu-navy);
    color: var(--mu-on-navy);
}

.mu-score-figure {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.mu-score-number {
    font-family: var(--mu-font-heading);
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--mu-amber);
}

.mu-score-label {
    font-family: var(--mu-font-heading);
    font-size: 18px;
    font-weight: 700;
}

/* 2 x 2 grid of numbers */
.mu-score-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(245, 240, 232, .15);
    list-style: none;
    color: var(--mu-on-navy-muted);
    font-size: 15px;
}

.mu-score-stats strong {
    color: var(--mu-on-navy);
    font-family: var(--mu-font-heading);
    font-size: 18px;
}

.mu-score-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--mu-on-navy-muted);
}

/* Filters on the left (desktop) or on top (phones), list on the right */
.mu-results-layout {
    display: grid;
    gap: var(--mu-space-4);
    align-items: start;
}

@media (min-width: 992px) {
    .mu-results-layout {
        grid-template-columns: 280px 1fr;
        gap: var(--mu-space-5);
    }
}

.mu-results-filters,
.mu-results-panel {
    padding: var(--mu-space-5);
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    background: var(--mu-white);
    box-shadow: var(--mu-shadow);
}

.mu-results-filters-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 800;
}

.mu-results-show {
    margin-top: 16px;
}

/* All / Correct / To review / Skipped: 2 x 2 buttons */
.mu-filter-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mu-filter-button {
    min-height: 44px;
    padding: 8px 12px;
    border: 1.5px solid var(--mu-navy);
    border-radius: var(--mu-radius-small);
    background: var(--mu-white);
    color: var(--mu-navy);
    font-family: var(--mu-font-heading);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.mu-filter-button:hover {
    background: var(--mu-navy);
    color: var(--mu-on-navy);
}

.mu-results-loading {
    margin-top: 16px;
    text-align: center;
}

/* Summary lines at the top of the list: date, score details, note */
#revisionDiv1 > h6 {
    margin: 0 0 6px;
    font-family: var(--mu-font-body);
}

/* Date line. The script writes it with an inline amber colour (#FFB347),
   which is unreadable on white. !important is needed to beat the inline
   style without changing the script. */
#revisionDiv1 > h6:first-child {
    color: var(--mu-amber-text) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Score details from the server */
#revisionDiv1 > h6:nth-child(2) {
    font-family: var(--mu-font-heading);
    font-size: 20px;
    line-height: 1.4;
}

/* When the score card is showing, the same numbers are not repeated above
   the list. (The page adds "mu-results-has-summary" only when it could read
   the numbers; otherwise the server's text line stays visible.) */
.mu-results-has-summary #revisionDiv1 > h6:nth-child(2) {
    display: none;
}

#revisionDiv1 > hr {
    margin: 16px 0;
    border-color: var(--mu-border);
    opacity: 1;
}

.mu-results-empty {
    padding: 32px 16px;
    color: var(--mu-text-muted);
    text-align: center;
}

.mu-results-empty .fa {
    display: block;
    margin-bottom: 8px;
    font-size: 32px;
    color: var(--mu-border-dark);
}

/* One row per question, built by the script. The script sets the colour
   of the left border: green = correct, terracotta = to review, grey = skipped. */
.examrevisionBlock {
    margin-top: 8px;
    padding: 14px 16px;
    border: 1px solid var(--mu-border);
    border-left: 4px solid var(--mu-border);
    border-radius: var(--mu-radius-small);
    background: var(--mu-white);
    cursor: pointer;
}

.examrevisionBlock:hover {
    border-color: var(--mu-navy-soft);
}

.examrevisionBlock h6 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--mu-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

/* "Keep your momentum going" box under the results */
.mu-results-next {
    display: grid;
    gap: var(--mu-space-4);
    align-items: center;
    margin-top: var(--mu-space-6);
    padding: var(--mu-space-5);
    border-radius: var(--mu-radius);
    background: var(--mu-amber-pale);
}

@media (min-width: 992px) {
    .mu-results-next {
        grid-template-columns: 1fr auto;
        padding: var(--mu-space-6);
    }
}

.mu-results-next p {
    margin: 8px 0 0;
    max-width: 640px;
}

/* --- Pop-up showing one question --- */
.mu-question-modal .modal-content {
    border: 0;
    border-radius: var(--mu-radius-large);
    background: var(--mu-white);
    color: var(--mu-text);
}

.mu-question-modal .modal-title {
    font-size: 18px;
    font-weight: 800;
}

.mu-question-text {
    margin: 20px 0;
    font-size: var(--mu-size-question);
    font-weight: 500;
    line-height: 1.6;
}

.mu-question-modal .option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--mu-border-dark);
    border-radius: var(--mu-radius);
    background: var(--mu-white);
    line-height: 1.5;
}

.mu-question-modal .option input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--mu-navy);
}

/* The correct option: the row that contains the green badge.
   (:has is supported by current browsers; older ones still show the
   green badge, just without the green row.) */
.mu-question-modal .option:has(.result-badge.correct) {
    border-color: var(--mu-correct);
    background: var(--mu-correct-pale);
}

/* The option you chose, when it was not the correct one (class added by
   the script). Terracotta, not red: it marks something to learn. */
.mu-question-modal .option.incorrect-selected {
    border-color: var(--mu-learn);
    background: var(--mu-learn-pale);
}

/* Percentage badge on each option (meaning to be confirmed with the
   developer); the correct option's badge is green */
.result-badge {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--mu-info-pale);
    color: var(--mu-text);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.result-badge.correct {
    background: var(--mu-correct);
    color: #FFFFFF;
}

/* Explanation and notes boxes (filled by the script) */
.mu-question-modal #shortanswerDiv:not(:empty),
.mu-question-modal #completeAnswerDiv:not(:empty) {
    margin-top: 16px;
    padding: 16px 20px;
    border: 1px solid var(--mu-border);
    border-left: 4px solid var(--mu-amber);
    border-radius: var(--mu-radius-small);
    background: var(--mu-white-warm);
    line-height: 1.7;
}

.mu-notes-link {
    margin-top: 8px;
    text-align: right;
}

/* Previous / Next inside the pop-up */
.modal-nav-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.modal-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1.5px solid var(--mu-navy);
    border-radius: var(--mu-radius-small);
    background: var(--mu-white);
    color: var(--mu-navy);
    font-family: var(--mu-font-heading);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.modal-nav-btn.next-btn {
    background: var(--mu-navy);
    color: var(--mu-on-navy);
}

.modal-nav-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.modal-nav-counter {
    min-width: 64px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mu-text-muted);
    text-align: center;
}


/* ---------------------------------------------------------------------
   22. IMAGES INSIDE QUESTIONS AND NOTES
   Question, explanation and notes text from the server can contain
   images with these classes. Keep these names.
   --------------------------------------------------------------------- */
.img-original,
.img-medium,
.img-small {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--mu-radius);
}

.img-medium {
    width: 100%;
    max-width: 600px;
}

.img-small {
    width: 100%;
    max-width: 300px;
}