/* =====================================================================
   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
     23. Logged-in area (Shared/_userlayout, User/FreePage)
     24. Free member home (User/FreePage)
     25. Member dashboard (User/userdashboard)
     26. Guided tour (intro.js)
     27. Practice mode start page (User/revision)
     28. Practice session review (User/revisiondetails)
     29. Members' mock exam (User/startexam)
     30. Performance (User/statistics)
     31. My profile (User/MyProfile)
     32. Simple public pages (FAQs, contact, demo, error)
     33. Exam information pages (mrcemprimaryexam)
     34. Legal pages (terms and conditions, privacy policy)
     35. Revision course page (primaryrevision)
     36. Exam overview (examoverview)
     37. Membership and payment (RenewMembership, Subscription)
     38. Topic notes (HTML from the database)
     39. Study material (User/books)
     40. Free members and pausing (Upgrade button, locked study material, pause panel)
     41. Exam screens: compact header and top bar
     42. Cookie choice and members' footer

   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 light/dark switch (in the members' header and the public header)
   puts data-theme="dark" on the <html> tag and saves the choice, so it
   carries across the whole site. These values replace the light ones
   when that happens. The exam screens stay light like a test centre.
   --------------------------------------------------------------------- */
[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);
}

/* New logo files (PermanentImages/mrcemultra-logo.svg and -icon.svg).
   For the developer: the full logo replaces the picture AND the word:
     <img class="mu-logo-full" src="~/PermanentImages/mrcemultra-logo.svg" width="216" height="32" alt="" />
     <img class="mu-logo-icon" src="~/PermanentImages/mrcemultra-icon.svg" width="32" height="32" alt="" />
   The icon only shows where the full logo does not fit (members' header
   on phones, see section 23). The link keeps aria-label="MrcemUltra home". */
.mu-logo .mu-logo-full {
    width: auto;
    height: 32px;
    border-radius: 0;
}

.mu-logo .mu-logo-icon {
    display: none;
}

/* Members' header: the menu has more links, so the logo is a little
   smaller to keep every link on one line */
.mu-app-header .mu-logo .mu-logo-full {
    height: 26px;
}

/* Small laptops: the full menu shows from 992px, so a little smaller again */
@media (min-width: 992px) and (max-width: 1199px) {
    .mu-app-header .mu-logo .mu-logo-full {
        height: 22px;
    }
}

/* Small phones: a slightly smaller full logo so the header stays on one row */
@media (max-width: 413px) {
    .mu-logo .mu-logo-full {
        height: 24px;
    }
}

/* 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);
}

/* "Log in" beside the menu button (phones and tablets). The same link
   is also in the menu. Hidden on desktop, where the menu shows it. */
.mu-header .mu-header-login {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: auto;             /* pushes it right, next to the menu button */
    margin-right: 8px;
    padding: 0 14px;
    border: 1.5px solid rgba(245, 240, 232, .55);
    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 .mu-header-login:hover {
    background: rgba(245, 240, 232, .08);
    color: 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,
    .mu-header .mu-header-login {
        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);
    }
}


/* Light/dark switch in the public header. In the phone menu it is a row
   with its words ("Dark Mode" / "Light Mode"); on desktop just the switch
   (the words stay available to screen readers). */
.mu-header .mu-public-theme .mu-theme-switch {
    padding: 10px 12px;
}

@media (max-width: 991px) {
    .mu-header .mu-theme-text {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        font-size: 15px;
    }
}

@media (min-width: 992px) {
    .mu-header .mu-theme-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Small laptops (992-1199px): slightly tighter menu so the logo and all
   menu items stay on one row */
@media (min-width: 992px) and (max-width: 1199px) {
    .mu-header .nav-link-custom,
    .mu-nav-group-name {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 14px;
    }

    .mu-header .auth-buttons {
        margin-left: 8px;
        padding-left: 8px;
    }

    .mu-header .btn-outline-light-new,
    .mu-header .btn-primary-new {
        padding: 8px 14px;
        font-size: 14px;
    }
}


/* 992-1099px: tighter still. The small "Free" tag is hidden because the
   link already says "Free mock exam". */
@media (min-width: 992px) and (max-width: 1099px) {
    .mu-header .nav-link-custom,
    .mu-nav-group-name {
        padding-left: 6px;
        padding-right: 6px;
    }

    .mu-header .nav-link-custom .mu-tag {
        display: none;
    }
}


/* ---------------------------------------------------------------------
   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);
}

/* --- Free mock + free notes buttons (top and bottom of the page) ---
   Two buttons of the same size. The line about the mock (.mu-cta-note)
   sits right under the mock button, so it is not read as being about the PDF.
   Phones: one column (mock, its line, download), buttons full width.
   576px and up: the two buttons side by side, the line under the mock. */
.mu-cta-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mock" "note" "download";
    column-gap: var(--mu-space-3);
}

.mu-cta-pair .mu-cta-mock {
    grid-area: mock;
}

.mu-cta-pair .mu-cta-note {
    grid-area: note;
    margin: 8px 0 var(--mu-space-4);
}

.mu-cta-pair .mu-cta-download {
    grid-area: download;
}

@media (min-width: 576px) {
    .mu-cta-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "mock download" "note .";
    }

    .mu-cta-pair .mu-cta-note {
        margin-bottom: 0;
    }
}

/* Small laptops (992-1199px): the top section's text column is too
   narrow for two buttons, so they stack there */
@media (min-width: 992px) and (max-width: 1199px) {
    .mu-hero .mu-cta-pair {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "mock" "note" "download";
    }

    .mu-hero .mu-cta-pair .mu-cta-note {
        margin-bottom: var(--mu-space-4);
    }
}

/* Room for the longer download label: a little less side padding, and
   the label may wrap onto two lines (both buttons then grow together) */
.mu-cta-pair .mu-btn {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

/* Keeps "High-Yield Notes" on one line when the label wraps */
.mu-cta-nowrap {
    white-space: nowrap;
}

/* Small "PDF" tag inside the download button */
.mu-cta-pdf {
    flex-shrink: 0;
    padding: 1px 6px;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    font-size: var(--mu-size-caption);
    font-weight: 800;
    letter-spacing: .04em;
}

/* Cream button for navy backgrounds (the top download button) */
.mu-btn-cream {
    background: var(--mu-on-navy);
    border-color: var(--mu-on-navy);
    color: var(--mu-navy);
}

.mu-btn-cream:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--mu-navy);
}

/* "Create your account" on its own row under the pair */
.mu-hero-account {
    margin-top: var(--mu-space-4);
}

@media (max-width: 479px) {
    .mu-hero-account .mu-btn {
        width: 100%;
    }
}

/* Bottom of the page: the pair centred, the line under the mock */
.mu-final .mu-final-pair {
    max-width: 640px;
    margin: var(--mu-space-5) auto 0;
}

.mu-final .mu-final-pair .mu-cta-note {
    margin-left: 0;
    margin-right: 0;
    font-size: var(--mu-size-small);
    color: var(--mu-text-muted);
}

.mu-final .mu-final-pair + .mu-btn-row {
    margin-top: var(--mu-space-3);
}

/* "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;
}

/* Dark mode: the chip's cream background would hide its cream text */
[data-theme="dark"] .mu-preview-letter {
    background: var(--mu-border);
}

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

/* --- Screenshot slider (in the credibility section) ---
   Bootstrap's carousel (bootstrap.min.js) moves the slides; these rules
   only style them. The frame is always 16:10 and each picture fits
   inside it whole (object-fit: contain), whatever its own shape. */
.mu-slider {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(245, 240, 232, .18);
    border-radius: var(--mu-radius-large);
    background: var(--mu-navy-light);
}

.mu-slider-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
}

/* Small round arrows, left and right, centred on the picture */
.mu-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 1px solid rgba(20, 33, 61, .15);
    border-radius: 50%;
    background: rgba(245, 240, 232, .92);
    color: var(--mu-navy);
    font-size: 14px;
    cursor: pointer;
}

.mu-slider-arrow:hover {
    background: var(--mu-cream);
}

.mu-slider-prev {
    left: 10px;
}

.mu-slider-next {
    right: 10px;
}

/* --- 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)
   Switched on by the wrapper <div class="mu-practice">.
   Goal: learning and momentum. No countdown, wrong answers are
   "to review", the explanation is easy to read, and the confidence
   question is the most prominent thing after choosing an answer.

   How the answer states work (no script changes):
   after an answer is saved, the script disables every radio button,
   shows each option's result span (#optAResult ...) and adds the class
   .fa-check-circle to the correct option's span. So:
     - correct option   = .option that contains .fa-check-circle
     - your answer      = .option whose radio is :checked and :disabled
     - answer revealed  = a result span without "none" in its style
   :has() is used to read these states (current browsers support it;
   older ones simply skip the highlights).
   --------------------------------------------------------------------- */

/* Text in the question area can't be selected (from the original page) */
.nocopy {
    -webkit-user-select: none;
    user-select: none;
}

.mu-practice {
    padding-top: var(--mu-space-4);
}

/* Question on the left, session navigator on the right (desktop) */
.mu-practice-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mu-space-5);
}

@media (min-width: 992px) {
    .mu-practice-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
    }
}

/* --- Top strip: subject, chapter and tools --- */
.mu-practice-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: var(--mu-space-4);
}

.mu-practice-chapter {
    margin-top: 6px;
}

.mu-practice-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mu-practice-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px 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-tool:hover {
    border-color: var(--mu-text);
}

/* Bookmark button, not bookmarked: the script writes a white background
   and black text inline, which glares on the dark page. !important beats
   the inline colours (same documented exception as sections 21, 25 and 27).
   The bookmarked green (#2c7e4f, whitesmoke text) reads well in both themes. */
[data-theme="dark"] #flagicon[style*="color: black"] {
    background: var(--mu-white) !important;
    color: var(--mu-text) !important;
}

.mu-practice-hy {
    background: var(--mu-amber-pale);
    color: var(--mu-amber-text);
}

/* --- Question card --- */
.mu-q-card {
    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);
}

/* When Next scrolls back up to the question (practice and mock), it
   stops below the sticky header */
#examContainer {
    scroll-margin-top: calc(var(--mu-header-height) + 16px);
}

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

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

/* Question text. Its first line is "Question 12 of 40" (written by the
   script before a line break), shown as a small label. */
.mu-practice #questionText {
    margin-bottom: var(--mu-space-5);
    color: var(--mu-text);
    font-size: var(--mu-size-question);
    line-height: 1.65;
}

.mu-practice #questionText::first-line {
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
    font-weight: 600;
    letter-spacing: .04em;
}

/* --- Answer options --- */
.mu-practice .options {
    display: grid;
    gap: 10px;
}

.mu-practice .option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-height: 56px;
    margin: 0;
    padding: 12px 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);
}

/* The radio button is hidden; the letter chip shows the choice.
   It can still be reached and changed with the keyboard. */
.mu-practice .option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.mu-practice .option:has(input:focus-visible) {
    outline: 3px solid var(--mu-amber);
    outline-offset: 2px;
}

.mu-opt-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--mu-border-dark);
    border-radius: 50%;
    font-family: var(--mu-font-heading);
    font-size: 14px;
    font-weight: 800;
}

.mu-opt-text {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 1.5;
}

/* Tags and percentage. Beside the answer on wider screens; on phones
   they move to their own line under it so the answer text has room. */
.mu-opt-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-left: auto;
}

@media (max-width: 639px) {
    .mu-opt-meta {
        flex-basis: 100%;
        padding-left: 44px;       /* lines up with the answer text */
    }

    /* Nothing to show: no empty line. Shown for the correct option and
       your answer once revealed, or when the percentages show. */
    .mu-opt-meta {
        display: none;
    }

    .mu-practice .option:has(.mu-opt-result.fa-check-circle) .mu-opt-meta,
    .mu-practice .option:has(input:checked:disabled) .mu-opt-meta,
    .mu-opt-meta:has(.mu-opt-result:not([style*="none"])) {
        display: flex;
    }
}

/* Chosen, before the answer is saved */
.mu-practice .option:has(input:checked) {
    border-color: var(--mu-navy);
    background: var(--mu-amber-pale);
}

.mu-practice .option:has(input:checked) .mu-opt-letter {
    border-color: var(--mu-navy);
    background: var(--mu-navy);
    color: var(--mu-on-navy);
}

/* After the answer is saved the options can't be changed */
.mu-practice .option:has(input:disabled) {
    cursor: default;
}

.mu-practice .option:has(input:disabled):hover {
    border-color: var(--mu-border-dark);
}

/* "Correct answer" / "Your answer" tags: hidden until the answer shows */
.mu-opt-tag {
    display: none;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--mu-size-caption);
    font-weight: 700;
}

.mu-opt-tag-correct {
    background: var(--mu-correct);
    color: var(--mu-white);       /* white in light mode, navy in dark mode */
}

.mu-opt-tag-yours {
    background: var(--mu-navy);
    color: var(--mu-on-navy);
}

/* Correct option (green) */
.mu-practice .option:has(.mu-opt-result.fa-check-circle) {
    border-color: var(--mu-correct);
    background: var(--mu-correct-pale);
}

.mu-practice .option:has(.mu-opt-result.fa-check-circle) .mu-opt-letter {
    border-color: var(--mu-correct);
    background: var(--mu-correct);
    color: var(--mu-white);
}

.mu-practice .option:has(.mu-opt-result.fa-check-circle) .mu-opt-tag-correct {
    display: inline-block;
}

/* Your answer, once revealed. When it isn't the correct one it is
   "to review": warm terracotta, never an alarm-red cross.
   "Revealed" = the script has locked the radios (disabled), which it
   does every time it shows the answer. The percentages are hidden by
   the developer (12 Oct 2026), so they can't be used for this. */
.mu-practice .option:has(input:checked:disabled) .mu-opt-tag-yours {
    display: inline-block;
}

.mu-practice .option:has(input:checked:disabled ~ .mu-opt-meta .mu-opt-result:not(.fa-check-circle)) {
    border-color: var(--mu-learn);
    background: var(--mu-learn-pale);
}

.mu-practice .option:has(input:checked:disabled ~ .mu-opt-meta .mu-opt-result:not(.fa-check-circle)) .mu-opt-letter {
    border-color: var(--mu-learn);
    background: var(--mu-learn);
    color: var(--mu-white);
}

/* Percentage on each option after answering. The script adds a cross
   icon to every option and writes its colours inline; the cross is
   removed and !important beats the inline colours (same documented
   exception as sections 21, 25 and 27). The correct option keeps its tick. */
.mu-practice .mu-opt-result {
    float: none;
    margin-left: auto;
    color: var(--mu-text-muted) !important;
    font-family: var(--mu-font-body);
    font-size: var(--mu-size-small);
    font-weight: 600;
    white-space: nowrap;
}

.mu-practice .mu-opt-result.fa-close::before {
    content: none;
}

.mu-practice .mu-opt-result.fa-check-circle {
    color: var(--mu-correct) !important;
}

.mu-practice .mu-opt-result.fa-check-circle::before {
    content: "\f058";
    margin-right: 4px;
    font-family: FontAwesome;
}

/* "Percentages show how members answered" line under the options.
   Hidden until the percentages appear (after answering). */
.mu-opt-percent-note {
    display: none;
    margin: 8px 0 0;
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
}

.mu-practice .mu-q-card:has(.mu-opt-result:not([style*="none"])) .mu-opt-percent-note {
    display: block;
}

/* --- Confidence question ("How sure are you?") ---
   #dynamicConfidencePanel is the hidden template; the script shows a
   copy (.dynamic-confidence-inside) under the chosen answer. */
.mu-practice .dynamic-confidence {
    display: none;
}

.mu-practice .dynamic-confidence-inside {
    margin: 4px 0 6px;
    padding: 16px;
    border: 1.5px solid var(--mu-amber);
    border-radius: var(--mu-radius);
    background: var(--mu-amber-pale);
}

.mu-confidence-question {
    margin: 0 0 10px;
    font-family: var(--mu-font-heading);
    font-size: 18px;
    font-weight: 800;
}

.mu-practice .confidence-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mu-practice .confidence-btn-sm {
    min-height: 48px;
    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: 16px;
    font-weight: 700;
    cursor: pointer;
}

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

[data-theme="dark"] .mu-practice .confidence-btn-sm {
    border-color: var(--mu-on-navy);
    color: var(--mu-on-navy);
}

[data-theme="dark"] .mu-practice .confidence-btn-sm:hover {
    background: var(--mu-on-navy);
    color: var(--mu-navy);
}

/* Very narrow phones: a little less padding so "Guessing" fits */
@media (max-width: 400px) {
    .mu-q-card {
        padding: 16px;
    }

    .mu-practice .dynamic-confidence-inside {
        padding: 12px;
    }

    .mu-practice .confidence-btn-sm {
        padding: 8px 2px;
        font-size: 14px;
    }
}

.mu-confidence-help {
    margin: 10px 0 0;
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
}

/* --- Encouragement line after answering --- */
.mu-feedback {
    display: none;
    gap: 10px;
    margin: var(--mu-space-4) 0 0;
    padding: 12px 16px;
    border-radius: var(--mu-radius);
    font-weight: 600;
}

.mu-feedback .fa {
    margin-top: 4px;
}

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

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

.mu-feedback-learn .fa {
    color: var(--mu-learn);
}

.mu-practice:has(input:checked:disabled ~ .mu-opt-meta .mu-opt-result.fa-check-circle) .mu-feedback-right,
.mu-practice:has(input:checked:disabled ~ .mu-opt-meta .mu-opt-result:not(.fa-check-circle)) .mu-feedback-learn {
    display: flex;
}

/* --- Explanation (built by the script) ---
   The heading is written with an inline dark-blue colour that can't be
   read in dark mode; !important beats it. */
.mu-practice #shortanswerDiv:not(:empty) {
    margin-top: var(--mu-space-4);
    padding: var(--mu-space-5);
    border: 1px solid var(--mu-border);
    border-left: 4px solid var(--mu-navy);
    border-radius: var(--mu-radius);
    background: var(--mu-white-warm);
    color: var(--mu-text);
    font-size: 17px;
    line-height: 1.7;
}

[data-theme="dark"] .mu-practice #shortanswerDiv:not(:empty) {
    border-left-color: var(--mu-amber);
}

.mu-practice #shortanswerDiv h6 {
    margin-bottom: 8px !important;
    color: var(--mu-text) !important;
    font-family: var(--mu-font-heading);
    font-size: 18px;
    font-weight: 800;
}

.mu-practice #shortanswerDiv hr {
    display: none;
}

.mu-practice #shortanswerDiv p:last-child {
    margin-bottom: 0;
}

/* --- Actions ---
   Topic notes and Discussion sit in the card under the explanation.
   The Next group (spinner, skip hint, Next) is a navy bar fixed to the
   bottom of the screen, like the mock exam's bottom bar, so Next is
   always in view. It is the same element, just positioned. */
.mu-practice-actions {
    margin-top: var(--mu-space-4);
}

.mu-practice-actions-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.mu-practice-actions-right {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;                /* above the page, below the header and pop-ups */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
    min-height: 72px;
    /* Side padding lines the button up with the page content on wide
       screens; the extra bottom padding clears the iPhone home bar. */
    padding: 10px max(var(--mu-page-padding), calc((100% - var(--mu-max-width)) / 2 + var(--mu-page-padding)));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(245, 240, 232, .12);
    background: var(--mu-navy);
    color: var(--mu-on-navy);
    box-shadow: 0 -4px 16px rgba(20, 33, 61, .12);
}

/* Room at the bottom of the page so the bar never covers content,
   including the end of the session grid */
.mu-practice {
    padding-bottom: 96px;
}

/* Phones: the question card runs edge to edge (16px inside), so the
   question, options and notes get the full screen width. Next is
   centred in its bar, and the page leaves extra room at the bottom
   because the skip hint can wrap onto a second line in the bar. */
@media (max-width: 575px) {
    .mu-practice .mu-q-card {
        margin-left: calc(-1 * var(--mu-page-padding));
        margin-right: calc(-1 * var(--mu-page-padding));
        padding: var(--mu-space-5) var(--mu-space-4);
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .mu-practice-actions-right {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    /* The skip hint gets its own line, so Next is always centred */
    .mu-practice-actions-right .mu-skip-hint {
        flex-basis: 100%;
    }

    .mu-practice {
        padding-bottom: calc(150px + env(safe-area-inset-bottom));
    }
}

.mu-practice-actions-right .spinner-border {
    border-color: rgba(245, 240, 232, .3);
    border-top-color: var(--mu-amber);
}

/* "Next" (old class .buttonGreen kept). The script writes its
   background colour inline (green, or red when finished), so
   !important is needed to keep the brand colours. */
.mu-practice #btnNext {
    flex-shrink: 0;
    float: none;
    min-width: 150px;
    min-height: 52px;
    padding: 12px 24px;
    border: 0;
    background: var(--mu-amber) !important;
    color: var(--mu-navy);
    font-size: 17px;
}

.mu-practice #btnNext::after {
    content: " \2192";            /* right arrow */
}

.mu-practice #btnNext:disabled {
    opacity: .5;
}

/* "Finished": the script colours it red (rgb 231, 76, 60). In the
   navy bar it turns cream: still clear, but calmer than amber. */
.mu-practice #btnNext[style*="231, 76, 60"] {
    background: var(--mu-on-navy) !important;
    color: var(--mu-navy);
}

/* "Not sure? Next skips it": only while no answer is chosen */
.mu-skip-hint {
    color: var(--mu-on-navy-muted);
    font-size: var(--mu-size-small);
    line-height: 1.35;
}

.mu-practice:has(input[name="answer"]:checked) .mu-skip-hint {
    display: none;
}

/* --- Topic notes (HTML from the server) ---
   No box of their own: a line separates them from the question, so
   they use the card's full width. Notes styles: section 38. */
.mu-practice #completeAnswerDiv:not(:empty) {
    margin-top: var(--mu-space-5);
    padding-top: var(--mu-space-5);
    border-top: 1px solid var(--mu-border);
}

/* --- Discussion --- */
.mu-practice #commentsSection {
    margin-top: var(--mu-space-5);
}

.mu-practice #commentsSection h5 {
    margin-bottom: 12px;
    font-weight: 800;
}

/* Comments built by the script: .comment > .avatar + .content */
.mu-practice .comment {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mu-border);
}

.mu-practice .comment .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mu-navy);
    color: var(--mu-on-navy);
    font-weight: 700;
}

.mu-practice .comment .name {
    font-weight: 700;
}

.mu-practice .comment .time {
    color: var(--mu-text-muted);
    font-size: var(--mu-size-caption);
}

.mu-practice .comment-box {
    margin-top: 16px;
}

.mu-practice .comment-box textarea {
    display: block;
    width: 100%;
    min-height: 96px;
    margin-bottom: 12px;
    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;
}

/* Signed-in name (from the original page; identifies shared screenshots) */
.mu-practice-user {
    margin: var(--mu-space-5) 0 0;
    color: var(--mu-text-muted);
    font-size: var(--mu-size-caption);
    text-align: right;
}

/* --- Session navigator --- */
.mu-practice-side {
    padding: var(--mu-space-5);
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-large);
    background: var(--mu-white);
    color: var(--mu-text);        /* the "This session" heading follows dark mode */
}

/* Desktop: the panel stays in view while you scroll. For long chapters
   it never runs under the Next bar; the grid scrolls inside instead
   (64px header + 72px bar + 32px space = 168px). */
@media (min-width: 992px) {
    .mu-practice-side {
        position: sticky;
        top: calc(var(--mu-header-height) + 16px);
        max-height: calc(100vh - 168px);
        overflow-y: auto;
    }
}

.mu-practice-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 8px 0 12px;
    font-weight: 600;
}

/* Legend. The spans have the Font Awesome "fa" class (for the square),
   so the words are put back in the body font. */
.mu-practice-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.mu-practice-legend .fa {
    white-space: nowrap;
    color: var(--mu-text);
    font-family: var(--mu-font-body);
    font-size: var(--mu-size-small);
}

.mu-practice-legend .fa::before {
    margin-right: 4px;
    font-family: FontAwesome;
}

.mu-key-correct::before { color: var(--mu-correct); }
.mu-key-learn::before { color: var(--mu-learn); }
.mu-key-skipped::before { color: var(--mu-border-dark); }
.mu-key-open::before { color: var(--mu-cream-dark); }

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

/* Navigator squares (built by the script) */
.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: var(--mu-white);       /* white in light mode, navy in dark mode */
}

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

.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);
    cursor: default;
}

/* Dark mode: make Skipped and Not answered clearly different.
   Skipped: lighter square with a dashed light border.
   Not answered: faint, see-through square. */
[data-theme="dark"] .mu-practice .q-box.skipped {
    border-color: var(--mu-text-muted);
    background: var(--mu-border);
    color: var(--mu-text);
}

[data-theme="dark"] .mu-practice .q-box.unattempted {
    border-color: var(--mu-border);
    background: transparent;
    color: var(--mu-text-muted);
    opacity: .7;
}

[data-theme="dark"] .mu-key-skipped::before { color: var(--mu-text-muted); }
[data-theme="dark"] .mu-key-open::before { color: var(--mu-border); }

/* --- Report a problem pop-up --- */
.mu-practice-report {
    text-align: left;
}

.mu-practice-report .mu-modal-title {
    margin-bottom: 12px;
}

.mu-practice-report .input1 {
    min-height: 110px;
    margin-bottom: 16px;
}

.mu-practice-report-message:not(:empty) {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: var(--mu-radius-small);
    background: var(--mu-info-pale);
    font-family: var(--mu-font-body);
    font-weight: 600;
}


/* ---------------------------------------------------------------------
   17. MOCK EXAM QUESTION SCREEN
   Used by: Home/mockexampublic (free mock) and User/startexam (members).
   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;
}

/* Topic notes in the pop-up: no box of their own, just a line above,
   so they use the pop-up's full width. Notes styles: section 38. */
.mu-question-modal #completeAnswerDiv:not(:empty) {
    padding-top: 16px;
    border-top: 1px solid var(--mu-border);
}

/* Explanation box (filled by the script) */
.mu-question-modal #shortanswerDiv: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;
}



/* ---------------------------------------------------------------------
   23. LOGGED-IN AREA (Shared/_userlayout and User/FreePage)
   The layout JavaScript uses: #navToggle, #navMenu (adds "show"),
   .main-navbar (a click outside it closes the menu), .nav-icons li,
   #darkmodebtn and #modetext. Keep those names in the HTML.
   The dashboard tour points at #darkmodebtn, so the switch must stay
   visible in the header at every screen size.

   Phones and tablets: one row (logo, menu button ... switch, Practise,
   profile). The menu opens underneath. Desktop (992px+): menu in the row.
   --------------------------------------------------------------------- */

/* --- Header bar --- */
.mu-app-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-app-header .main-navbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--mu-header-height);
}

.mu-app-header .nav-left,
.mu-app-header .nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 768px) {
    .mu-app-header .nav-right {
        gap: 16px;
    }
}

/* Square icon boxes: navy icon would be too faint on dark cards */
[data-theme="dark"] .mu-icon-box {
    color: var(--mu-amber);
}

/* Phones: logo picture only, so everything fits on one row (with the
   word, the row needs about 470px). FreePage's header has room, so it
   keeps the word. */
@media (max-width: 480px) {
    .mu-app-header .mu-logo-word {
        display: none;
    }

    .mu-app-header-simple .mu-logo-word {
        display: inline;
    }
}

/* New logo (section 12): up to 575px the members' header shows the icon
   instead of the full logo, which needs about 560px with everything
   else in the row. FreePage's header has room, so it keeps the full logo. */
@media (max-width: 575px) {
    .mu-app-header .mu-logo .mu-logo-full {
        display: none;
    }

    .mu-app-header .mu-logo .mu-logo-icon {
        display: block;
    }

    .mu-app-header-simple .mu-logo .mu-logo-full {
        display: block;
    }

    .mu-app-header-simple .mu-logo .mu-logo-icon {
        display: none;
    }
}

/* --- Menu button (phones and tablets only) --- */
.mu-app-header .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--mu-radius-small);
    background: rgba(245, 240, 232, .08);
    color: var(--mu-on-navy);
    font-size: 20px;
    cursor: pointer;
}

/* --- Menu: a panel under the header until JavaScript adds "show" --- */
.mu-app-header .nav-icons {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    margin: 0;
    padding: 8px var(--mu-page-padding) 16px;
    list-style: none;
    background: var(--mu-navy);
    border-top: 1px solid rgba(245, 240, 232, .1);
    box-shadow: var(--mu-shadow-large);
}

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

/* Each menu item is an <li onclick> with a real link inside, so it also
   works with the keyboard. Both go to the same page. */
.mu-app-header .nav-icons a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: var(--mu-radius-small);
    color: var(--mu-on-navy);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

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

.mu-app-header .nav-icons .fa {
    width: 18px;
    color: var(--mu-on-navy-muted);
}

/* The page you are on */
.mu-app-header .nav-icons a[aria-current="page"] {
    background: rgba(245, 240, 232, .1);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--mu-amber);
}

/* --- Dark mode switch --- */
.mu-app-header .mu-theme-switch,
.mu-header .mu-theme-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    color: var(--mu-on-navy);
    font-size: var(--mu-size-small);
    font-weight: 500;
    cursor: pointer;
}

.mu-app-header .mu-theme-switch .form-check-input,
.mu-header .mu-theme-switch .form-check-input {
    float: none;
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background-color: rgba(245, 240, 232, .25);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23F5F0E8'/%3e%3c/svg%3e");
    box-shadow: none;
    cursor: pointer;
}

.mu-app-header .mu-theme-switch .form-check-input:focus,
.mu-header .mu-theme-switch .form-check-input:focus {
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23F5F0E8'/%3e%3c/svg%3e");
}

.mu-app-header .mu-theme-switch .form-check-input:focus-visible,
.mu-header .mu-theme-switch .form-check-input:focus-visible {
    outline: 3px solid var(--mu-amber);
    outline-offset: 2px;
}

.mu-app-header .mu-theme-switch .form-check-input:checked,
.mu-header .mu-theme-switch .form-check-input:checked {
    background-color: var(--mu-amber);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2314213D'/%3e%3c/svg%3e");
}

/* The "Dark Mode" / "Light Mode" words show on desktop only.
   On smaller screens they are still read out by screen readers. */
@media (max-width: 991px) {
    .mu-theme-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* --- "Practise MCQs" button (old class .revise-btn kept) ---
   The colour is repeated here so the dark mode link colour can't
   override it. The small gap is the space between the two words. */
.mu-app-header .revise-btn,
.mu-app-header .revise-btn:hover {
    gap: 0.3em;
    min-height: 40px;
    padding: 8px 16px;
    color: var(--mu-navy);
    font-size: 15px;
    white-space: nowrap;
    box-shadow: none;
}

/* Drops the word "MCQs" on very narrow phones */
@media (max-width: 380px) {
    .mu-hide-tiny {
        display: none;
    }
}

/* --- Profile menu: opens on hover, tap or keyboard focus --- */
.mu-app-header .profile {
    position: relative;
}

.mu-profile-button {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mu-on-navy);
    font-family: var(--mu-font-body);
    font-size: var(--mu-size-small);
    font-weight: 600;
    cursor: pointer;
}

.mu-profile-button:hover {
    background: rgba(245, 240, 232, .08);
}

.mu-app-header .profile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(245, 240, 232, .16);
    font-size: 16px;
}

/* Name and arrow show from tablet up */
.mu-profile-name,
.mu-profile-arrow {
    display: none;
}

@media (min-width: 768px) {
    .mu-profile-button {
        padding-right: 12px;
    }

    .mu-profile-name,
    .mu-profile-arrow {
        display: inline;
    }
}

.mu-app-header .profile-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1040;
    min-width: 200px;
    padding: 8px;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    background: var(--mu-white);
    box-shadow: var(--mu-shadow-large);
}

.mu-app-header .profile:hover .profile-popup,
.mu-app-header .profile:focus-within .profile-popup {
    display: block;
}

.mu-app-header .profile-popup a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--mu-radius-small);
    color: var(--mu-text);
    font-size: 15px;
    text-decoration: none;
}

.mu-app-header .profile-popup a:hover {
    background: var(--mu-cream-dark);
    color: var(--mu-text);
}

.mu-app-header .profile-popup .fa {
    width: 18px;
    color: var(--mu-text-muted);
}

/* --- Desktop header --- */
@media (min-width: 992px) {
    .mu-app-header .nav-left {
        gap: 24px;
    }

    .mu-app-header .nav-toggle {
        display: none;
    }

    .mu-app-header .nav-icons {
        display: flex;
        position: static;
        flex-direction: row;
        gap: 2px;
        padding: 0;
        background: none;
        border-top: 0;
        box-shadow: none;
    }

    .mu-app-header .nav-icons a {
        min-height: 44px;
        padding: 10px 12px;
    }

    .mu-app-header .nav-icons .fa {
        display: none;
    }

    /* On desktop the current page gets an amber underline */
    .mu-app-header .nav-icons a[aria-current="page"] {
        box-shadow: inset 0 -3px 0 var(--mu-amber);
    }
}

/* FreePage has a single menu item (the page itself), so its menu
   button and menu are hidden. The logo already links to the page. */
.mu-app-header-simple .nav-toggle,
.mu-app-header-simple .nav-icons {
    display: none;
}

/* Small laptops (992-1199px): tighter menu, and the dark mode switch
   shows without its words (screen readers still read them), so the
   header stays on one row. */
@media (min-width: 992px) and (max-width: 1199px) {
    .mu-app-header .nav-left {
        gap: 12px;
    }

    .mu-app-header .nav-icons a {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 14px;
    }

    .mu-app-header .nav-right {
        gap: 12px;
    }

    .mu-theme-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* --- Page area under the header ---
   .maindiv is the old name of the content area. Pages not yet
   redesigned still add their own padding and colours inside it. */
.mu-app .maindiv {
    flex: 1 0 auto;
    padding: var(--mu-space-5) var(--mu-page-padding) var(--mu-space-7);
    background: var(--maindivBackground);
}

/* Redesigned logged-in pages put their content in this box.
   Same width as the header's content, so the edges line up. */
.mu-app-page {
    max-width: calc(var(--mu-max-width) - 2 * var(--mu-page-padding));
    margin: 0 auto;
}

/* --- Dark mode: navy buttons would vanish on the dark page,
   so they turn cream. (Public pages are always light.) --- */

/* Amber buttons keep navy text. Without this, an <a> button would take
   the pale dark-mode link colour (section 4). */
[data-theme="dark"] .mu-btn-primary,
[data-theme="dark"] .mu-btn-primary:hover {
    color: var(--mu-navy);
}

[data-theme="dark"] .mu-btn-secondary {
    background: var(--mu-on-navy);
    border-color: var(--mu-on-navy);
    color: var(--mu-navy);
}

[data-theme="dark"] .mu-btn-secondary:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--mu-navy);
}

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

[data-theme="dark"] .mu-btn-outline {
    border-color: var(--mu-on-navy);
    color: var(--mu-on-navy);
}

[data-theme="dark"] .mu-btn-outline:hover {
    background: var(--mu-on-navy);
    color: var(--mu-navy);
}

/* --- Old button classes on logged-in pages not yet redesigned.
   They used to be styled by the layout. Brand version until each
   page is redesigned:
     .buttonGreen       = solid navy (main action)
     .buttonBrown       = terracotta outline ("to review" filters)
     .buttonTransaprent = plain outline (spelling is the original) --- */
.buttonGreen,
.buttonBrown,
.buttonTransaprent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1.5px solid transparent;
    border-radius: var(--mu-radius-small);
    font-family: var(--mu-font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.buttonGreen:disabled,
.buttonBrown:disabled,
.buttonTransaprent:disabled {
    opacity: .5;
    cursor: not-allowed;
}

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

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

[data-theme="dark"] .buttonGreen {
    background: var(--mu-on-navy);
    border-color: var(--mu-on-navy);
    color: var(--mu-navy);
}

.buttonBrown {
    background: transparent;
    border-color: var(--mu-learn);
    color: var(--mu-learn);
}

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

.buttonTransaprent {
    background: transparent;
    border-color: var(--mu-border-dark);
    color: var(--mu-text);
}

.buttonTransaprent:hover {
    border-color: var(--mu-text);
    color: var(--mu-text);
}


/* ---------------------------------------------------------------------
   24. FREE MEMBER HOME (User/FreePage)
   Shown after sign up to members without a subscription.
   Phones: one column. Desktop: the free mock and the sample chapter on
   the left, "When you're ready for more" on the right.
   --------------------------------------------------------------------- */
.mu-free {
    padding-top: var(--mu-space-4);
}

.mu-free-head {
    max-width: 680px;
    margin-bottom: var(--mu-space-6);
}

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

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

.mu-free-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* never wider than the screen */
    gap: var(--mu-space-4);
}

@media (min-width: 992px) {
    .mu-free-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: start;
        gap: var(--mu-space-5);
    }

    .mu-free-mock {
        grid-column: 1;
        grid-row: 1;
    }

    .mu-free-sample {
        grid-column: 1;
        grid-row: 2;
    }

    .mu-free-full {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* --- Free mock: navy panel with the page's one amber button --- */
.mu-free-mock {
    padding: var(--mu-space-5);
    border-radius: var(--mu-radius-large);
    background: var(--mu-navy);
    color: var(--mu-on-navy);
    box-shadow: var(--mu-shadow-large);
}

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

[data-theme="dark"] .mu-free-mock {
    border: 1px solid var(--mu-border-dark);
}

.mu-free-label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mu-amber);
    color: var(--mu-navy);
    font-family: var(--mu-font-heading);
    font-size: var(--mu-size-caption);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

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

.mu-free-mock p {
    margin: 10px 0 0;
    color: var(--mu-on-navy-muted);
    font-size: var(--mu-size-lead);
}

.mu-free-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: var(--mu-space-5) 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
}

.mu-free-facts .fa {
    width: 18px;
    margin-right: 6px;
    color: var(--mu-amber);
}

.mu-free-mock .mu-btn {
    width: 100%;
}

@media (min-width: 640px) {
    .mu-free-mock .mu-btn {
        width: auto;
        min-width: 280px;
    }
}

/* --- Sample chapter card: icon above the text on phones,
   beside it from 480px up --- */
.mu-free-sample {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 480px) {
    .mu-free-sample {
        flex-direction: row;
        gap: 16px;
    }
}

.mu-free-sample p {
    margin: 4px 0 16px;
}

/* --- "When you're ready for more" card --- */
.mu-free-full .mu-muted {
    margin: 6px 0 12px;
}

.mu-free-full .mu-checklist {
    margin-bottom: var(--mu-space-5);
}

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


/* ---------------------------------------------------------------------
   25. MEMBER DASHBOARD (User/userdashboard)
   Order on every screen size: greeting, "today" panel (start
   practising, last score, exam date), progress (weekly chart, recent
   sessions), then study material, membership and help.
   The page script fills #revisionList and draws the chart in
   #weeklyChart. Keep those ids.
   --------------------------------------------------------------------- */
.mu-dash {
    padding-top: var(--mu-space-4);
}

/* --- Greeting --- */
.mu-dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: var(--mu-space-5);
}

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

.mu-dash-account {
    font-size: var(--mu-size-small);
    font-weight: 600;
    text-decoration: none;
}

.mu-dash-account .fa {
    margin-right: 6px;
}

/* --- "Today" panel: navy, with the page's one amber button --- */
.mu-dash-today {
    display: grid;
    gap: var(--mu-space-5);
    padding: var(--mu-space-5);
    border-radius: var(--mu-radius-large);
    background: var(--mu-navy);
    color: var(--mu-on-navy);
    box-shadow: var(--mu-shadow-large);
}

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

@media (min-width: 992px) {
    .mu-dash-today {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--mu-space-6);
    }
}

[data-theme="dark"] .mu-dash-today {
    border: 1px solid var(--mu-border-dark);
}

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

.mu-dash-today-main p {
    margin: 10px 0 var(--mu-space-5);
    color: var(--mu-on-navy-muted);
    font-size: var(--mu-size-lead);
}

.mu-dash-today-main .mu-btn {
    width: 100%;
}

@media (min-width: 640px) {
    .mu-dash-today-main .mu-btn {
        width: auto;
        min-width: 260px;
    }
}

/* Two small panels: last score and exam date */
.mu-dash-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.mu-dash-stat {
    padding: 16px;
    border: 1px solid rgba(245, 240, 232, .14);
    border-radius: var(--mu-radius);
    background: rgba(245, 240, 232, .06);
}

.mu-dash-stat-label {
    margin: 0 0 8px;
    color: var(--mu-on-navy-muted);
    font-size: var(--mu-size-small);
    font-weight: 600;
}

.mu-dash-stat-number {
    margin: 0;
    color: var(--mu-on-navy);
    font-family: var(--mu-font-heading);
    font-size: var(--mu-size-stat);
    font-weight: 800;
    line-height: 1.1;
}

/* Exam date: the server sends this as HTML */
.mu-dash-exam {
    color: var(--mu-on-navy);
    font-family: var(--mu-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.mu-dash-exam a {
    color: var(--mu-amber);
}

/* Days to the exam: calm amber, not alarm red (amber is readable on navy) */
.mu-dash-days {
    margin: 4px 0 0;
    color: var(--mu-amber);
    font-size: var(--mu-size-small);
    font-weight: 600;
}

.mu-dash-link {
    min-height: 32px;
    margin-top: 6px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--mu-on-navy);
    font-size: var(--mu-size-small);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* No exam date: the server sends a link, "Set Exam Date (Click here)",
   that calls ShowExamdate() and has inline red styles. Shown as an amber
   button; !important beats the inline styles (same documented exception
   as sections 21, 25 and 27). Its text and onclick are unchanged. */
a[onclick="ShowExamdate()"] {
    display: inline-flex !important;
    align-items: center;
    min-height: 40px;
    margin-top: 4px;
    padding: 8px 16px;
    border-radius: var(--mu-radius-small);
    background: var(--mu-amber);
    color: var(--mu-navy) !important;
    font-family: var(--mu-font-body);
    font-size: var(--mu-size-small) !important;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none !important;
    cursor: pointer;
}

a[onclick="ShowExamdate()"]:hover {
    background: var(--mu-amber-hover);
}

[data-theme="dark"] a[onclick="ShowExamdate()"] {
    background: var(--mu-amber);
    color: var(--mu-navy) !important;
}

/* While that link shows, hide our own "Change exam date" button
   (both open the same date pop-up) */
.mu-dash-exam:has(a[onclick="ShowExamdate()"]) ~ .mu-dash-link {
    display: none;
}

/* --- Rows of cards --- */
.mu-dash-progress,
.mu-dash-more {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mu-space-4);
    margin-top: var(--mu-space-4);
}

@media (min-width: 768px) {
    .mu-dash-more {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .mu-dash-progress {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: var(--mu-space-5);
        margin-top: var(--mu-space-5);
    }

    .mu-dash-more {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--mu-space-5);
        margin-top: var(--mu-space-5);
    }
}

.mu-dash-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.mu-dash-card-head a {
    font-size: var(--mu-size-small);
    font-weight: 600;
}

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

.mu-dash .chart-wrapper {
    position: relative;
    height: 250px;
}

/* --- Recent practice sessions (built by the page script) --- */
#revisionList .revision-item {
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-small);
    background: var(--mu-white-warm);
}

#revisionList .revision-item h6 {
    font-family: var(--mu-font-body);
    font-size: 15px;
    font-weight: 600;
}

/* The script writes the score in a pale green (#10b981, 2.5:1 on
   white) and the date at 11px, both as inline styles. !important is
   the only way to make them readable without changing the script
   (same exception as in section 21). */
#revisionList .revision-item h6 span {
    color: var(--mu-correct) !important;
    font-family: var(--mu-font-heading);
    font-weight: 800;
}

#revisionList .revision-item p {
    font-size: 13px !important;
}

/* Shown until the first practice session is finished */
#revisionList:empty::before {
    content: "Your finished practice sessions will appear here.";
    display: block;
    padding: 16px;
    border: 1px dashed var(--mu-border-dark);
    border-radius: var(--mu-radius-small);
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
    text-align: center;
}

/* Bottom row cards: each card's button or link sits at the bottom, so
   the three cards line up. On tablets (2 columns) "Need help?" spans the
   whole row instead of leaving an empty space beside it. */
.mu-dash-more > .mu-card {
    display: flex;
    flex-direction: column;
}

.mu-dash-more .mu-dash-action {
    margin-top: auto;
}

@media (min-width: 768px) and (max-width: 991px) {
    .mu-dash-help-card {
        grid-column: 1 / -1;
    }
}

/* --- Study material --- */
.mu-dash-search {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.mu-dash-search .input1 {
    flex: 1;
    min-width: 0;
}

.mu-dash-search #searchicon {
    flex-shrink: 0;
    width: 48px;
    padding: 0;
}

/* "Browse all study notes": old class .book kept for its onclick.
   bookcss.css may also style .book, so its size is set here. */
.mu-dash .mu-dash-books {
    display: flex;
    align-items: center;
    gap: 12px;
    float: none;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: auto 0 0;              /* sits at the bottom of the card */
    padding: 12px;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    background: var(--mu-white-warm);
    box-shadow: none;
    color: var(--mu-text);
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
}

.mu-dash .mu-dash-books:hover {
    border-color: var(--mu-navy);
}

/* --- Membership --- */
.mu-dash-facts {
    margin: 12px 0 16px;
}

.mu-dash-facts div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mu-border);
}

.mu-dash-facts dt {
    color: var(--mu-text-muted);
    font-weight: 400;
}

.mu-dash-facts dd {
    margin: 0;
    font-weight: 700;
}

/* --- Help --- */
.mu-dash-card > .mu-h3 + .mu-muted {
    margin: 6px 0 16px;
}

.mu-dash-help {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mu-dash-help .mu-btn {
    flex: 1;
}

/* --- Exam date pop-up --- */
.mu-dash-modal-body {
    text-align: left;
}

.mu-dash-modal-body .mu-modal-title {
    margin-bottom: 16px;
}

.mu-dash-modal-body .input1 {
    margin-bottom: 16px;
}


/* ---------------------------------------------------------------------
   26. GUIDED TOUR (intro.js)
   The first-visit tour on the dashboard and practice pages. intro.js
   brings its own CSS; this only changes its look to the brand.
   --------------------------------------------------------------------- */
.introjs-tooltip {
    border-radius: var(--mu-radius);
    color: var(--mu-navy);
    font-family: var(--mu-font-body);
    box-shadow: var(--mu-shadow-large);
}

.introjs-tooltip-title {
    color: var(--mu-navy);
    font-family: var(--mu-font-heading);
    font-size: 18px;
    font-weight: 800;
}

.introjs-tooltiptext {
    font-size: 15px;
    line-height: 1.55;
}

.introjs-helperLayer {
    border-radius: var(--mu-radius);
}

.introjs-button {
    padding: 8px 14px;
    border: 1.5px solid var(--mu-navy);
    border-radius: var(--mu-radius-small);
    background: #FFFFFF;
    color: var(--mu-navy);
    font-family: var(--mu-font-heading);
    font-weight: 700;
    text-shadow: none;
}

.introjs-button:hover,
.introjs-button:focus {
    background: var(--mu-cream);
    border-color: var(--mu-navy);
    color: var(--mu-navy);
    box-shadow: none;
}

.introjs-nextbutton,
.introjs-nextbutton:hover,
.introjs-nextbutton:focus {
    background: var(--mu-amber);
    border-color: var(--mu-amber);
    color: var(--mu-navy);
}

.introjs-button:focus-visible {
    outline: 3px solid var(--mu-amber);
    outline-offset: 2px;
}

.introjs-bullets ul li a.active {
    background: var(--mu-navy);
}

.introjs-progressbar {
    background: var(--mu-amber);
}


/* ---------------------------------------------------------------------
   27. PRACTICE MODE START PAGE (User/revision)
   The page has two sections that the script shows and hides:
   #divRevision (practice, shown first) and #DivExam (mock exam).
   The chapter cards inside #divBookTopic are built by the script with
   the classes .chapter-card, .chapter-btn, .progress-bar-container and
   .progress-bar-fill. Keep those names.
   --------------------------------------------------------------------- */
.mu-rev {
    padding-top: var(--mu-space-4);
}

.mu-rev-head {
    max-width: 680px;
    margin-bottom: var(--mu-space-5);
}

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

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

/* --- Practice / Mock exam / Study material switch --- */
.mu-rev-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: var(--mu-space-6);
}

@media (min-width: 768px) {
    .mu-rev-modes {
        display: flex;
    }
}

.mu-rev-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;                  /* all three the same height, even when one label wraps */
    min-height: 48px;
    padding: 10px 16px;
    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-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.mu-rev-mode:hover {
    border-color: var(--mu-text);
}

/* The section you are in. "Practice" is current by default. When the
   script shows the mock section it writes style="display: block" on
   #DivExam; :has() spots that and moves the highlight to "Mock exam". */
.mu-rev-mode-practice,
.mu-rev:has(#DivExam[style*="block"]) .mu-rev-mode-mock {
    border-color: var(--mu-navy);
    background: var(--mu-navy);
    color: var(--mu-on-navy);
}

.mu-rev:has(#DivExam[style*="block"]) .mu-rev-mode-practice {
    border-color: var(--mu-border-dark);
    background: var(--mu-white);
    color: var(--mu-text);
}

[data-theme="dark"] .mu-rev-mode-practice,
[data-theme="dark"] .mu-rev:has(#DivExam[style*="block"]) .mu-rev-mode-mock {
    border-color: var(--mu-on-navy);
    background: var(--mu-on-navy);
    color: var(--mu-navy);
}

/* --- Section heading with its loading message --- */
.mu-rev-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.mu-rev-section-note {
    margin: 2px 0 0;
    font-size: var(--mu-size-small);
}

/* "Free account: try 5 questions" line (free members only), and the
   same message on FreePage */
.mu-rev-free-note,
.mu-free-try {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 6px 12px;
    border-radius: var(--mu-radius-small);
    background: var(--mu-amber-pale);
    color: var(--mu-amber-text);
    font-size: var(--mu-size-small);
    font-weight: 600;
}

.mu-free-try {
    margin: 0 0 12px;
}

/* "Loading chapters…" etc. Hidden until the script shows it. */
.mu-rev-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
}

/* --- Filters: radio buttons that look like pills --- */
.mu-rev-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: var(--mu-space-5);
}

@media (min-width: 640px) {
    .mu-rev-filters {
        display: flex;
        flex-wrap: wrap;
    }
}

.mu-rev-filter {
    position: relative;
    margin: 0;
    cursor: pointer;
}

/* The round radio dot is hidden; the pill shows the choice instead.
   It can still be reached and changed with the keyboard. */
.mu-rev-filter input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.mu-rev-filter-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 18px;
    border: 1.5px solid var(--mu-border-dark);
    border-radius: 999px;
    background: var(--mu-white);
    color: var(--mu-text);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.mu-rev-filter:hover .mu-rev-filter-pill {
    border-color: var(--mu-text);
}

.mu-rev-filter input:checked + .mu-rev-filter-pill {
    border-color: var(--mu-navy);
    background: var(--mu-navy);
    color: var(--mu-on-navy);
}

[data-theme="dark"] .mu-rev-filter input:checked + .mu-rev-filter-pill {
    border-color: var(--mu-on-navy);
    background: var(--mu-on-navy);
    color: var(--mu-navy);
}

.mu-rev-filter input:focus-visible + .mu-rev-filter-pill {
    outline: 3px solid var(--mu-amber);
    outline-offset: 2px;
}

/* --- Chapter cards (built by the script) --- */

/* Subject heading. The script writes it in amber (#FFB347), unreadable
   on cream; !important is needed to beat that inline colour (same
   exception as sections 21 and 25). */
#divBookTopic h4 {
    margin-top: var(--mu-space-5);
    color: var(--mu-text) !important;
    font-size: var(--mu-size-h3);
    font-weight: 800;
}

#divBookTopic > div:first-child h4 {
    margin-top: 0;
}

/* Cards: 1 per row on phones, 2 on tablets, 3 on laptops, 4 on wide screens.
   The script puts them in a flex row with a 20px gap. */
#divBookTopic .chapter-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 100%;
    padding: 16px;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    background: var(--mu-white);
    box-shadow: var(--mu-shadow);
}

@media (min-width: 640px) {
    #divBookTopic .chapter-card {
        flex-basis: calc(50% - 10px);
    }
}

@media (min-width: 992px) {
    #divBookTopic .chapter-card {
        flex-basis: calc(33.333% - 14px);
    }
}

@media (min-width: 1200px) {
    #divBookTopic .chapter-card {
        flex-basis: calc(25% - 15px);
    }
}

#divBookTopic .chapter-card:hover {
    border-color: var(--mu-navy);
}

/* The chapter name is the button. Its ::before covers the whole card,
   so tapping anywhere on the card opens the chapter. */
#divBookTopic .chapter-btn {
    width: 100%;
    margin: 0 0 14px;
    padding: 0 28px 0 0;
    border: 0;
    background: none;
    color: var(--mu-text);
    font-family: var(--mu-font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

#divBookTopic .chapter-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--mu-radius);
}

#divBookTopic .chapter-btn::after {
    content: "\2192";             /* right arrow */
    position: absolute;
    top: 14px;
    right: 16px;
    color: var(--mu-text-muted);
    font-size: 18px;
}

#divBookTopic .chapter-btn:focus-visible {
    outline: none;
}

#divBookTopic .chapter-btn:focus-visible::before {
    outline: 3px solid var(--mu-amber);
    outline-offset: 2px;
}

/* Progress bar: amber fill. The script sets the width. */
#divBookTopic .progress-bar-container {
    height: 8px;
    margin-top: auto;
    border-radius: 999px;
    background: var(--mu-cream-dark);
    overflow: hidden;
}

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

/* A finished chapter (100%) gets a green bar */
#divBookTopic .progress-bar-fill[style*="width: 100%"] {
    background: var(--mu-correct);
}

/* "12 of 40 done · 30%". The script writes it centred at 12px. */
#divBookTopic .chapter-card > div:last-child {
    color: var(--mu-text-muted) !important;
    font-size: 13px !important;
    text-align: left !important;
}

/* "Free" tag on the free chapter (script writes it yellow) */
#divBookTopic .chapter-card span[style] {
    background: var(--mu-amber) !important;
    color: var(--mu-navy) !important;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Nothing in this filter (e.g. no MCQs to review yet). Shown only once
   loading has finished (#loading1 hidden again). */
#divRevision:has(#loading1[style*="none"]) #divBookTopic:empty::before {
    content: "Nothing here yet. MCQs you answer wrongly appear in To review, and MCQs you bookmark appear in Bookmarked.";
    display: block;
    padding: 24px;
    border: 1px dashed var(--mu-border-dark);
    border-radius: var(--mu-radius);
    color: var(--mu-text-muted);
    text-align: center;
}

/* --- Mock exam section --- */
#DivExam {
    display: none;                /* the script shows it */
}

.mu-rev-continue,
.mu-rev-mock {
    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-rev-continue,
    .mu-rev-mock {
        padding: var(--mu-space-6);
    }
}

/* Mock in progress */
.mu-rev-continue {
    margin-bottom: var(--mu-space-5);
    border-left: 4px solid var(--mu-amber);
}

.mu-rev-continue .mu-h3 {
    margin-top: 6px;
}

.mu-rev-continue .mu-muted {
    margin: 4px 0 0;
    font-size: var(--mu-size-small);
}

.mu-rev-continue-facts {
    display: flex;
    gap: var(--mu-space-6);
    margin: var(--mu-space-4) 0 var(--mu-space-5);
}

.mu-rev-continue-facts dt {
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
    font-weight: 400;
}

.mu-rev-continue-facts dd {
    margin: 0;
    font-family: var(--mu-font-heading);
    font-size: 22px;
    font-weight: 800;
}

/* Continue on the left, End exam well apart on the right */
.mu-rev-continue-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mu-rev-or {
    display: none;                /* the line below is enough on its own */
}

/* New mock */
.mu-rev-mock .mu-muted {
    margin: 6px 0 var(--mu-space-5);
    max-width: 640px;
}

/* Subject weighting: name, bar, number of MCQs */
.mu-rev-blueprint {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mu-rev-blueprint li {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name count"
        "bar  bar";
    align-items: center;
    gap: 6px 12px;
}

@media (min-width: 768px) {
    .mu-rev-blueprint li {
        grid-template-columns: 220px 1fr 80px;
        grid-template-areas: "name bar count";
    }
}

.mu-rev-blueprint-name {
    grid-area: name;
    font-weight: 600;
}

.mu-rev-blueprint .mu-progress {
    grid-area: bar;
    display: block;
}

.mu-rev-blueprint .mu-progress-fill {
    display: block;
}

.mu-rev-blueprint-count {
    grid-area: count;
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
    text-align: right;
}

.mu-rev-mock-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: var(--mu-space-6);
}

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

@media (min-width: 640px) {
    .mu-rev-mock-action .mu-btn {
        width: auto;
        min-width: 280px;
    }
}

/* --- "Opening your chapter…" note at the bottom of the screen --- */
.mu-rev-opening {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--mu-navy);
    color: var(--mu-on-navy);
    font-weight: 600;
    box-shadow: var(--mu-shadow-large);
    transform: translateX(-50%);
}

.mu-rev-opening .spinner-border {
    border-color: rgba(245, 240, 232, .3);
    border-top-color: var(--mu-amber);
}

/* Link inside the "part of membership" pop-up. The script writes it in
   lime green; !important beats that inline colour. */
#messag3 .footnote {
    margin-top: 4px;
    color: var(--mu-text) !important;
    font-family: var(--mu-font-heading);
    font-weight: 700;
    text-decoration: underline;
}


/* ---------------------------------------------------------------------
   28. PRACTICE SESSION REVIEW (User/revisiondetails)
   Uses the results design (section 21). Only the spacing differs,
   because the logged-in page area already has its own top padding.
   --------------------------------------------------------------------- */
.mu-session-review {
    padding-top: var(--mu-space-4);
}

/* The pop-up's bottom Previous/Next row repeats the top row's ids, so the
   script only updates the top counter and the bottom one would always
   read "0 / 0". Its counter is hidden; its buttons still work.
   (Developer question 18 has the proper fix.) */
.mu-nav-bottom-copy .modal-nav-counter {
    visibility: hidden;
}

/* Dark mode for the results design (section 21 was written for the
   public results page, which is always light). Navy outlines and text
   turn cream so they can be seen on the dark page. */
[data-theme="dark"] .mu-filter-button,
[data-theme="dark"] .modal-nav-btn {
    border-color: var(--mu-on-navy);
    background: transparent;
    color: var(--mu-on-navy);
}

[data-theme="dark"] .mu-filter-button:hover,
[data-theme="dark"] .modal-nav-btn.next-btn {
    background: var(--mu-on-navy);
    color: var(--mu-navy);
}


/* ---------------------------------------------------------------------
   29. MEMBERS' MOCK EXAM (User/startexam)
   Same exam screen as the free mock (section 17). The only extra is
   the Flag button beside the question number, in the same plain
   test-centre style as the exam buttons. The script shows and hides it.
   --------------------------------------------------------------------- */
.mu-exam-question-head {
    max-width: 760px;             /* same width as the question and options */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.mu-exam-question-head .mu-exam-question-number {
    margin-bottom: 0;
}

.mu-exam-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 4px 12px;
    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: 14px;
    font-weight: 700;
    cursor: pointer;
}


/* ---------------------------------------------------------------------
   30. PERFORMANCE (User/statistics)
   The script draws #weeklyChart and #dailyChart and builds the rows of
   #leaderboardTable with the classes current-user-row, rank-cell,
   user-id-cell, accuracy-cell, performance-cell, performance-bar-container,
   performance-bar (width set inline) and performance-value.
   --------------------------------------------------------------------- */
.mu-stats {
    padding-top: var(--mu-space-4);
}

.mu-stats-head {
    max-width: 680px;
    margin-bottom: var(--mu-space-5);
}

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

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

/* Charts: stacked on phones, side by side on desktop */
.mu-stats-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mu-space-4);
}

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

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

/* Chart.js fills this box, so it needs a fixed height */
.mu-stats .chart-wrapper {
    position: relative;
    height: 280px;
}

/* --- "How you compare" table --- */
.mu-stats-board {
    margin-top: var(--mu-space-5);
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.leaderboard-table th {
    padding: 10px 12px;
    border-bottom: 2px solid var(--mu-border);
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.leaderboard-table td {
    padding: 12px;
    border-bottom: 1px solid var(--mu-border);
    color: var(--mu-text);
    vertical-align: middle;
}

/* The 5th column (accuracy as a number) repeats the bar's own number,
   so it is hidden; the bar column shows both. */
.leaderboard-table th:nth-child(5),
.leaderboard-table td:nth-child(5) {
    display: none;
}

.leaderboard-table .rank-cell {
    font-family: var(--mu-font-heading);
    font-weight: 800;
}

/* Your row */
.leaderboard-table .current-user-row td {
    background: var(--mu-amber-pale);
    font-weight: 600;
}

.leaderboard-table .current-user-row td:first-child {
    box-shadow: inset 4px 0 0 var(--mu-amber);
}

.leaderboard-table .badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--mu-navy);
    color: var(--mu-on-navy);
    font-size: var(--mu-size-caption);
    font-weight: 700;
}

[data-theme="dark"] .leaderboard-table .badge {
    background: var(--mu-on-navy);
    color: var(--mu-navy);
}

/* Accuracy: a slim bar with its number beside it (not on top of it),
   so the number is always on the plain background and easy to read */
.performance-bar-container {
    position: relative;
    width: 120px;
    height: 10px;
    margin-right: 56px;           /* room for the number */
    border-radius: 999px;
    background: var(--mu-cream-dark);
}

.performance-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--mu-border-dark);
}

.current-user-row .performance-bar {
    background: var(--mu-amber);
}

.performance-value {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    color: var(--mu-text);
    font-size: var(--mu-size-small);
    font-weight: 700;
    white-space: nowrap;
    transform: translateY(-50%);
}


/* ---------------------------------------------------------------------
   31. MY PROFILE (User/MyProfile)
   The menu buttons keep the old class .buttonTransaprent: the script
   uses it to switch panels and writes the chosen button's colours
   inline (#0e4f78 background, white text). The panels (.contentdiv)
   start hidden; the script shows one at a time.
   --------------------------------------------------------------------- */
.mu-profile {
    padding-top: var(--mu-space-4);
}

.mu-profile-head {
    margin-bottom: var(--mu-space-5);
}

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

.mu-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mu-space-4);
}

@media (min-width: 992px) {
    .mu-profile-layout {
        grid-template-columns: 280px minmax(0, 1fr);
        align-items: start;
        gap: var(--mu-space-5);
    }
}

/* --- Account card and menu --- */
.mu-profile-side {
    padding: var(--mu-space-5);
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-large);
    background: var(--mu-white);
}

.mu-profile-who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--mu-border);
}

.mu-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mu-navy);
    color: var(--mu-on-navy);
    font-size: 18px;
}

.mu-profile-name-line {
    margin: 0;
    font-family: var(--mu-font-heading);
    font-weight: 800;
}

.mu-profile-email {
    margin: 0;
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
    word-break: break-all;
}

/* Menu: 2 columns on phones, a list on desktop */
.mu-profile-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 575px) {
    .mu-profile-nav {
        grid-template-columns: minmax(0, 1fr);   /* one column: the labels can't wrap */
    }
}

@media (min-width: 992px) {
    .mu-profile-nav {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.mu-profile-nav .buttonTransaprent {
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-color: transparent;
    background: var(--mu-white-warm);
    font-size: 15px;
    text-align: left;
}

.mu-profile-nav .buttonTransaprent:hover {
    border-color: var(--mu-border-dark);
}

/* The chosen section. The script writes its colours inline; !important
   turns them into the brand navy (same documented exception as other
   script-written colours). */
.mu-profile-nav .buttonTransaprent[style*="background-color"] {
    border-color: var(--mu-navy) !important;
    background: var(--mu-navy) !important;
    color: var(--mu-on-navy) !important;
}

[data-theme="dark"] .mu-profile-nav .buttonTransaprent[style*="background-color"] {
    border-color: var(--mu-on-navy) !important;
    background: var(--mu-on-navy) !important;
    color: var(--mu-navy) !important;
}

/* --- Panels --- */
.mu-profile-main .contentdiv {
    display: none;                /* the script shows the chosen one */
    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-profile-main .contentdiv {
        padding: var(--mu-space-6);
    }
}

.mu-profile-main .contentdiv > .mu-h3 {
    margin-bottom: 8px;
}

.mu-profile-main .contentdiv > .mu-muted {
    margin: 0 0 var(--mu-space-5);
}

.mu-profile-facts {
    margin: 16px 0 var(--mu-space-5);
}

.mu-profile-facts div {
    display: grid;
    grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mu-border);
}

.mu-profile-facts dt {
    color: var(--mu-text-muted);
    font-weight: 400;
}

.mu-profile-facts dd {
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

.mu-profile-edit {
    max-width: 420px;
    margin-top: var(--mu-space-5);
    padding: var(--mu-space-5);
    border-radius: var(--mu-radius);
    background: var(--mu-white-warm);
}

.mu-profile-subtitle {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 800;
}

.mu-profile-big {
    margin: 4px 0 8px;
    font-family: var(--mu-font-heading);
    font-size: 22px;
    font-weight: 800;
}

.mu-profile-main textarea.input1 {
    min-height: 120px;
}

.mu-profile-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

/* --- Payments table (rows built by the script) --- */
/* The script's count only includes some payment types, so it can
   disagree with the table; hidden until it is fixed (developer question 23). */
.mu-profile-count {
    display: none;
    margin: 0 0 8px;
    color: var(--mu-text-muted);
    font-family: var(--mu-font-body);
    font-size: var(--mu-size-small);
}

.mu-profile-table {
    margin: 0;
    color: var(--mu-text);
    font-size: 15px;
}

.mu-profile-table th {
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
    font-weight: 600;
    white-space: nowrap;
}

.mu-profile-table th,
.mu-profile-table td {
    padding: 10px 12px;
    border-color: var(--mu-border);
    background: transparent;
    color: inherit;
}

/* Status colours: the script writes brown, lime green and a pale green
   inline; !important maps them to calm brand colours. */
#ttableRefund td[style*="brown"],
#ttableRefund span[style*="brown"] {
    color: var(--mu-learn) !important;
}

#ttableRefund td[style*="limegreen"] {
    color: var(--mu-correct) !important;
    font-weight: 700;
}

#ttableRefund span[style*="#60c193"] {
    color: var(--mu-navy-soft) !important;
    font-family: var(--mu-font-body);
    font-weight: 700;
    text-decoration: underline;
}

[data-theme="dark"] #ttableRefund span[style*="#60c193"] {
    color: var(--mu-on-navy) !important;
}

/* --- FAQs (built by the script) --- */
#questionDiv > h6 {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--mu-border);
    font-family: var(--mu-font-body);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

#questionDiv > h6 .fa-question-circle {
    margin-right: 6px;
    color: var(--mu-navy-soft) !important;
}

[data-theme="dark"] #questionDiv > h6 .fa-question-circle {
    color: var(--mu-on-navy-muted) !important;
}

#questionDiv .answerDiv {
    margin: 0 0 12px !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-left: 4px solid var(--mu-amber) !important;
    border-radius: 0 var(--mu-radius-small) var(--mu-radius-small) 0 !important;
    background: var(--mu-white-warm);
    font-family: var(--mu-font-body);
    font-size: 15px;
    font-style: normal !important;
    font-weight: 400;
    line-height: 1.6;
}

#questionDiv .answerDiv .fa-check-circle {
    display: none;
}

/* --- Reset progress --- */
.mu-profile-warning {
    margin: 12px 0 var(--mu-space-5);
    padding: 14px 16px;
    border-left: 4px solid var(--mu-danger);
    border-radius: 0 var(--mu-radius-small) var(--mu-radius-small) 0;
    background: var(--mu-danger-pale);
}

.mu-profile-warning p {
    margin: 0 0 4px;
}

.mu-profile-warning p:last-child {
    margin-bottom: 0;
}

.mu-profile #bpassword {
    max-width: 320px;
}


/* ---------------------------------------------------------------------
   32. SIMPLE PUBLIC PAGES (Home/FAQs, contactus, primarydemo,
       intermediatedemo, Error; and Home/noprimarysubscription)
   --------------------------------------------------------------------- */
.mu-info-page {
    padding: var(--mu-space-7) 0 var(--mu-space-8);
}

/* Reading width for text pages */
.mu-info-narrow {
    max-width: 800px;
}

.mu-info-narrow > .mu-h1 {
    margin-top: 8px;
}

.mu-info-narrow > .mu-lead {
    margin: 12px 0 var(--mu-space-6);
}

/* Centred card (demo, error, membership needed) */
.mu-info-card {
    max-width: 640px;
}

.mu-info-card .mu-h1,
.mu-info-card .mu-h2 {
    margin-top: 8px;
}

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

/* --- FAQs: native <details> boxes, so they open without any script --- */
.mu-faq-group {
    margin: var(--mu-space-6) 0 12px;
}

.mu-faq {
    border-top: 1px solid var(--mu-border);
}

.mu-faq details {
    border-bottom: 1px solid var(--mu-border);
}

.mu-faq summary {
    position: relative;
    padding: 16px 40px 16px 0;
    font-family: var(--mu-font-heading);
    font-size: 17px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.mu-faq summary::-webkit-details-marker {
    display: none;
}

/* Plus sign that turns into a minus when open */
.mu-faq summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 8px;
    color: var(--mu-amber-text);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
}

.mu-faq details[open] summary::after {
    content: "\2212";             /* minus */
}

.mu-faq details > p,
.mu-faq details > ul {
    margin: 0 0 16px;
    color: var(--mu-text);
    line-height: 1.7;
}

.mu-faq details > ul {
    padding-left: 20px;
}

.mu-faq details li {
    margin-bottom: 6px;
}

/* Next step at the end of a page */
.mu-info-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-top: var(--mu-space-7);
    padding: var(--mu-space-5);
    border-radius: var(--mu-radius-large);
    background: var(--mu-amber-pale);
}

.mu-info-cta p {
    margin: 4px 0 0;
    color: var(--mu-text-muted);
}

/* --- Contact cards --- */
.mu-info-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mu-space-4);
}

@media (min-width: 768px) {
    .mu-info-cards {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--mu-space-5);
    }
}

.mu-info-cards .mu-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.mu-info-cards .mu-h3 {
    margin-top: 8px;
}

.mu-info-cards .mu-muted {
    margin: 0 0 8px;
}

.mu-info-cards .mu-btn {
    margin-top: auto;
}

/* Server message on the error page (Bootstrap's alert, made calm) */
.mu-info-message {
    margin: var(--mu-space-5) 0 0;
    padding: 12px 16px;
    border: 0;
    border-left: 4px solid var(--mu-learn);
    border-radius: var(--mu-radius-small);
    background: var(--mu-learn-pale);
    color: var(--mu-text);
}


/* ---------------------------------------------------------------------
   33. EXAM INFORMATION PAGES (Home/mrcemprimaryexam and the hidden
       Home/mrcemintermediateexam)
   The subject weighting reuses the bars from section 27.
   --------------------------------------------------------------------- */
.mu-exam-facts {
    display: grid;
    gap: 12px;
    margin: var(--mu-space-5) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .mu-exam-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

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

/* Section headings down the page */
.mu-info-section {
    margin: var(--mu-space-7) 0 12px;
}

.mu-info-narrow > p {
    line-height: 1.7;
}

.mu-exam-weighting {
    margin: 16px 0 var(--mu-space-4);
}

/* Exam dates */
.mu-dates-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--mu-white);
    font-size: 15px;
}

.mu-dates-table th,
.mu-dates-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--mu-border);
    text-align: left;
    vertical-align: top;
}

.mu-dates-table thead th {
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
    font-weight: 600;
    white-space: nowrap;
}

.mu-dates-table tbody th {
    font-family: var(--mu-font-heading);
    font-weight: 800;
    white-space: nowrap;
}

.mu-dates-detail {
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
}

.mu-dates-source {
    margin: 12px 0 0;
    font-size: var(--mu-size-small);
    font-weight: 600;
}

.mu-dates-note {
    margin-top: 6px;
    font-size: var(--mu-size-small);
}


/* ---------------------------------------------------------------------
   34. LEGAL PAGES (Home/termsconditions, Home/privacyterms)
   Styling only: the wording is exactly as published.
   --------------------------------------------------------------------- */
.mu-legal-body {
    color: var(--mu-text);
    font-size: 16px;
    line-height: 1.75;
}

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

/* "Effective date: ..." under the title */
.mu-legal-date {
    margin: 0 0 var(--mu-space-6);
    padding-bottom: var(--mu-space-5);
    border-bottom: 1px solid var(--mu-border);
    color: var(--mu-text-muted);
}

/* Numbered section headings */
.mu-legal-heading {
    margin: var(--mu-space-7) 0 12px;
    font-size: var(--mu-size-h3);
    font-weight: 800;
    line-height: 1.3;
    scroll-margin-top: calc(var(--mu-header-height) + 16px);
}

.mu-legal-body p {
    margin: 0 0 16px;
}

.mu-legal-body strong {
    font-weight: 700;
}

.mu-legal-list {
    margin: 0 0 20px;
    padding-left: 24px;
}

.mu-legal-list li {
    margin-bottom: 10px;
    padding-left: 4px;
}

.mu-legal-list li::marker {
    color: var(--mu-amber-text);
    font-weight: 700;
}

/* Table (privacy policy) */
.mu-legal-table {
    width: 100%;
    margin: 20px 0 24px;
    border-collapse: collapse;
    background: var(--mu-white);
    font-size: 15px;
    line-height: 1.55;
}

.mu-legal-table th,
.mu-legal-table td {
    padding: 12px 14px;
    border: 1px solid var(--mu-border);
    text-align: left;
    vertical-align: top;
}

.mu-legal-table th {
    background: var(--mu-white-warm);
    font-family: var(--mu-font-heading);
    font-weight: 700;
}


/* ---------------------------------------------------------------------
   35. REVISION COURSE PAGE (Home/primaryrevision and the hidden
       Home/intermediaterevision)
   Uses the homepage's feature cards (section 14) and the weighting
   bars (section 27).
   --------------------------------------------------------------------- */
.mu-course-hero {
    padding-bottom: var(--mu-space-7);
}

.mu-course-head {
    max-width: 760px;
}

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

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

.mu-course-credibility {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--mu-space-5) 0 0;
    font-weight: 600;
}

.mu-course-credibility .fa {
    color: var(--mu-amber-text);
    font-size: 18px;
}

/* Coverage: text on the left, subject bars on the right (desktop) */
.mu-course-cover {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mu-space-6);
    align-items: center;
}

@media (min-width: 992px) {
    .mu-course-cover {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }
}

.mu-course-cover .mu-h2 {
    margin-top: 8px;
}

.mu-course-cover .mu-lead {
    margin: 12px 0 0;
}

.mu-course-bars {
    margin-top: 16px;
}

/* Bars inside the narrow card: name and count above the bar */
.mu-course-bars li {
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name count"
        "bar  bar";
}

.mu-course-end {
    padding-top: 0;
}

.mu-course-end .mu-info-cta {
    margin-top: 0;
}


/* ---------------------------------------------------------------------
   36. EXAM OVERVIEW (Home/examoverview)
   The three MRCEM components as numbered cards.
   --------------------------------------------------------------------- */
.mu-overview-parts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: var(--mu-space-5) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .mu-overview-parts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.mu-overview-parts .mu-card {
    padding: var(--mu-space-4);
}

.mu-overview-parts .mu-h3 {
    margin-top: 10px;
}

.mu-overview-parts .mu-muted {
    margin: 4px 0 8px;
    font-size: var(--mu-size-small);
}

.mu-overview-parts a {
    font-size: var(--mu-size-small);
    font-weight: 600;
}

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

[data-theme="dark"] .mu-overview-step {
    background: var(--mu-on-navy);
    color: var(--mu-navy);
}


/* ---------------------------------------------------------------------
   37. MEMBERSHIP AND PAYMENT (User/RenewMembership, Subscription/Success,
       Subscription/Error)
   The plans are built by the script inside #mainform:
     <label class="option-row"><input type="radio" id="(planId)" name="plan">
       <span class="option-info"><span class="option-name">(name)</span></span>
       <span class="option-price"><span class="old-price">(old price)</span>(price)</span>
     </label>
   Names and prices come from the server; nothing is typed here.
   --------------------------------------------------------------------- */
.mu-checkout {
    padding-top: var(--mu-space-4);
}

.mu-checkout-head {
    max-width: 680px;
    margin-bottom: var(--mu-space-5);
}

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

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

.mu-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mu-space-5);
    align-items: start;
}

@media (min-width: 992px) {
    .mu-checkout-layout {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    }
}

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

.mu-checkout-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* @ViewBag.datee under the course name: hidden until the developer
   confirms what it is (developer question 30). */
.mu-checkout-current {
    display: none;
    margin: 6px 0 0;
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
}

/* Coupon: "I have a coupon code" link; the script shows the box and
   Apply button (#coupondiv1, #coupondiv2) when it is clicked. */
.mu-checkout-coupon {
    margin-top: var(--mu-space-4);
}

.mu-checkout-coupon .learn-link {
    color: var(--mu-navy-soft);
    font-size: var(--mu-size-small);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

[data-theme="dark"] .mu-checkout-coupon .learn-link {
    color: var(--mu-on-navy-muted);
}

.mu-checkout-coupon-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.mu-checkout-coupon-row #coupondiv1 {
    flex: 1;
    min-width: 0;
}

#couponappliedlabel:not(:empty) {
    margin: 8px 0 0;
    color: var(--mu-correct);
    font-family: var(--mu-font-body);
    font-size: var(--mu-size-small);
    font-weight: 700;
}

.mu-checkout-choose {
    margin: var(--mu-space-5) 0 10px;
}

/* --- Plan list --- */
.mu-checkout .pricing-options {
    display: grid;
    gap: 10px;
}

.mu-checkout .option-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    margin: 0;
    padding: 14px 16px;
    border: 1.5px solid var(--mu-border-dark);
    border-radius: var(--mu-radius);
    background: var(--mu-white);
    cursor: pointer;
}

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

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

.mu-checkout .option-row:has(input:checked) {
    border-color: var(--mu-navy);
    background: var(--mu-amber-pale);
}

[data-theme="dark"] .mu-checkout .option-row:has(input:checked) {
    border-color: var(--mu-on-navy);
}

.mu-checkout .option-row:has(input:focus-visible) {
    outline: 3px solid var(--mu-amber);
    outline-offset: 2px;
}

.mu-checkout .option-info {
    flex: 1;
}

.mu-checkout .option-name {
    font-family: var(--mu-font-heading);
    font-size: 17px;
    font-weight: 700;
}

/* Plain prices only: the struck-through "old price" is not shown */
.mu-checkout .old-price {
    display: none;
}

.mu-checkout .option-price {
    font-family: var(--mu-font-heading);
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
}

/* "Recommended" on the last plan: the 6-month plan when the server lists
   plans from 1 to 6 months (developer question 29). */
.mu-checkout .option-row:last-child {
    margin-top: 12px;
    border-color: var(--mu-amber);
}

.mu-checkout .option-row:last-child::before {
    content: "Recommended";
    position: absolute;
    top: -11px;
    left: 14px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--mu-amber);
    color: var(--mu-navy);
    font-family: var(--mu-font-heading);
    font-size: var(--mu-size-caption);
    font-weight: 800;
    letter-spacing: .04em;
}

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

/* Trust details right under the buy button */
.mu-checkout-trust {
    display: grid;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
}

.mu-checkout-trust .fa {
    width: 18px;
    margin-right: 6px;
    color: var(--mu-correct);
}

.mu-checkout-back {
    margin: var(--mu-space-5) 0 0;
    font-size: var(--mu-size-small);
}

.mu-checkout-included .mu-checklist {
    margin-top: 12px;
}

.mu-checkout-cred {
    margin: var(--mu-space-5) 0 0;
    padding-top: var(--mu-space-4);
    border-top: 1px solid var(--mu-border);
    font-size: var(--mu-size-small);
    font-weight: 600;
}

/* --- Success and error cards --- */
.mu-payment-card {
    margin-top: var(--mu-space-4);
    text-align: left;
}

.mu-payment-card .mu-h2 {
    margin-top: 4px;
}

.mu-payment-facts {
    margin: var(--mu-space-5) 0 0;
    border-top: 1px solid var(--mu-border);
}

.mu-payment-facts div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mu-border);
}

.mu-payment-facts dt {
    color: var(--mu-text-muted);
    font-weight: 400;
}

.mu-payment-facts dd {
    margin: 0;
    font-weight: 700;
}

.mu-payment-ok {
    color: var(--mu-correct);
}


/* ---------------------------------------------------------------------
   38. TOPIC NOTES (HTML from the database)
   Used by: User/booksdetails (.content-body) and #completeAnswerDiv on
   User/startrevision, User/revisiondetails and User/examdetails.
   Each of these containers has the class "mu-notes". The ones that also
   have "mu-notes-themed" follow dark mode. User/examdetails does not
   (layout and tables only).

   The notes are written in an editor and saved in the database, so they
   can carry their own inline colours, backgrounds and widths. Only
   !important beats an inline style, so it is used in this section where
   a comment says so (a documented exception, like #btnNext).
   --------------------------------------------------------------------- */

.mu-notes {
    color: var(--mu-text);
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* Comfortable line length on wide screens. Tables and pictures may use
   the full width. */
.mu-notes p,
.mu-notes li,
.mu-notes h1,
.mu-notes h2,
.mu-notes h3,
.mu-notes h4,
.mu-notes h5,
.mu-notes h6,
.mu-notes blockquote {
    max-width: 72ch;
}

.mu-notes h1,
.mu-notes h2 {
    margin: 28px 0 12px;
    font-size: var(--mu-size-h3);
    line-height: 1.3;
}

.mu-notes h3,
.mu-notes h4 {
    margin: 24px 0 8px;
    font-size: 17px;
    line-height: 1.35;
}

.mu-notes > :first-child {
    margin-top: 0;
}

.mu-notes a {
    text-decoration: underline;
}

/* Pictures never wider than the screen. !important: notes often give a
   picture a fixed inline width and height. */
.mu-notes img {
    max-width: 100% !important;
    height: auto !important;
}

/* --- Tables ---
   A table is never wider than its space: if its columns need more room
   (on phones, usually), it scrolls sideways inside its own box. As a
   block, the table keeps its rows and columns but can scroll. */
.mu-notes table {
    display: block;
    width: max-content;
    max-width: 100%;               /* also beats a fixed inline width */
    margin: 20px 0;
    overflow-x: auto;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-small);
    border-collapse: collapse;
    background: var(--mu-white);
}

/* Cells: room to read, subtle lines between rows, text wraps. The
   minimum width keeps columns readable; when they don't fit, the table
   scrolls instead of squeezing them. */
.mu-notes th,
.mu-notes td {
    min-width: 10rem;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--mu-border);
    font-size: 15px;
    line-height: 1.55;
    text-align: left;
    vertical-align: top;
    white-space: normal;
}

.mu-notes tbody tr:last-child > td,
.mu-notes tbody tr:last-child > th {
    border-bottom: 0;
}

.mu-notes td p,
.mu-notes th p {
    margin: 0;
}

/* Header row: navy with cream text. !important: notes often colour
   their header cells inline. */
.mu-notes th,
.mu-notes thead td {
    background: var(--mu-navy) !important;
    color: var(--mu-on-navy) !important;
    font-weight: 700;
    vertical-align: bottom;
}

.mu-notes th *,
.mu-notes thead td * {
    color: inherit !important;
}

/* --- Dark mode (containers with "mu-notes-themed" only) ---
   Every inline colour is replaced, so nothing is dark on dark or white
   on white. !important throughout: these replace inline styles. */

/* 1. All text cream, all backgrounds cleared, all lines dark */
[data-theme="dark"] .mu-notes-themed {
    color: var(--mu-text);
}

[data-theme="dark"] .mu-notes-themed * {
    color: var(--mu-text) !important;
    background-color: transparent !important;
    border-color: var(--mu-border) !important;
}

/* 2. Boxes that had their own background (heading boxes, tips) keep a
   box, in a dark blue */
[data-theme="dark"] .mu-notes-themed [style*="background"],
[data-theme="dark"] .mu-notes-themed [bgcolor] {
    background-color: var(--mu-info-pale) !important;
}

/* ...except ordinary table rows and cells, which stay clear */
[data-theme="dark"] .mu-notes-themed tr[style*="background"],
[data-theme="dark"] .mu-notes-themed tr[bgcolor],
[data-theme="dark"] .mu-notes-themed td[style*="background"],
[data-theme="dark"] .mu-notes-themed td[bgcolor] {
    background-color: transparent !important;
}

/* 3. Table: dark surface, header row a lighter navy */
[data-theme="dark"] .mu-notes-themed table {
    background-color: var(--mu-white) !important;
}

[data-theme="dark"] .mu-notes-themed th,
[data-theme="dark"] .mu-notes-themed th[style],
[data-theme="dark"] .mu-notes-themed thead td,
[data-theme="dark"] .mu-notes-themed thead td[style] {
    background-color: var(--mu-border) !important;
}

/* 4. Links amber (readable on navy) */
[data-theme="dark"] .mu-notes-themed a,
[data-theme="dark"] .mu-notes-themed a[style] {
    color: var(--mu-amber) !important;
}

/* 5. Pictures on a white card, so black lines on a see-through
   background (diagrams) stay visible */
[data-theme="dark"] .mu-notes-themed img {
    padding: 6px;
    border-radius: var(--mu-radius-small);
    background-color: #FFFFFF !important;
}

/* --- Topic notes page (User/booksdetails) ---
   The page's own <style> block draws a framed box (.content-area) with
   extra padding. Here it becomes plain page area, so the notes use the
   full width: the layout's 16px page padding on phones, a gap beside
   the sidebar on wider screens. (Two class names, so these rules win
   over the page's own one-class rules.) */
.book-details-row .content-area {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: visible;
}

@media (min-width: 769px) {
    .book-details-row .content-area {
        padding: 16px 0 0 24px;
    }
}

/* Up to 768px the page stacks the sidebar above the notes. Its rows are
   allowed to wrap, and a wrapping column grows to its widest content (a
   wide table), which made the page wider than the screen. One column
   needs no wrapping. */
@media (max-width: 768px) {
    .maindiv .book-details-row {
        flex-wrap: nowrap;
    }
}


/* ---------------------------------------------------------------------
   39. STUDY MATERIAL (User/books)
   One page: a tree on the left (book > chapter > topic > subtopic) and
   the notes on the right (#completeAnswerDiv, styled by section 38).
   Phones and small tablets (up to 991px): the tree sits above the notes
   and folds into a bar once a subtopic is chosen.
   The page script adds these classes and states:
     .mu-tree-book / -chapter / -topic / -subtopic   one row of each level
     aria-expanded="true"   row is open        .is-path   on the chosen path
     aria-current="true"    chosen subtopic    .mu-tree-result   search result
     #studyNav.has-choice   a subtopic was chosen (shows the phone bar)
     #studyNav.is-collapsed the phone bar is folded
   --------------------------------------------------------------------- */
.mu-study {
    padding-top: var(--mu-space-4);
}

.mu-study-head {
    margin-bottom: var(--mu-space-5);
}

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

/* Desktop: tree 320px wide, notes take the rest */
.mu-study-columns {
    display: grid;
    gap: var(--mu-space-5);
}

@media (min-width: 992px) {
    .mu-study-columns {
        grid-template-columns: 320px minmax(0, 1fr);
        align-items: start;
        gap: var(--mu-space-6);
    }
}

/* --- Left: the tree panel --- */
.mu-study-nav {
    min-width: 0;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    background: var(--mu-white);
    box-shadow: var(--mu-shadow);
    scroll-margin-top: calc(var(--mu-header-height) + 12px);
}

/* Desktop: the tree stays in view while the notes scroll, and scrolls
   on its own if it is long */
@media (min-width: 992px) {
    .mu-study-nav {
        position: sticky;
        top: calc(var(--mu-header-height) + 16px);
        max-height: calc(100vh - var(--mu-header-height) - 32px);
        overflow-y: auto;
    }
}

.mu-study-tree {
    padding: var(--mu-space-4);
}

/* Search box with a square search button */
.mu-study-search {
    display: flex;
    gap: 8px;
}

.mu-study-search .mu-study-input {
    flex: 1;
    min-width: 0;
}

.mu-study-search-btn {
    width: 48px;
    padding: 0;
    flex-shrink: 0;
}

.mu-study-bookmarks,
.mu-study-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mu-navy-soft);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

[data-theme="dark"] .mu-study-bookmarks,
[data-theme="dark"] .mu-study-link {
    color: var(--mu-on-navy-muted);
}

.mu-study-bookmarks {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: var(--mu-size-small);
}

.mu-study-bookmarks .fa {
    color: var(--mu-amber-text);
}

.mu-study-label {
    margin: var(--mu-space-3) 0 var(--mu-space-2);
    font-family: var(--mu-font-heading);
    font-size: var(--mu-size-caption);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mu-text-muted);
}

/* Search or bookmark results, above the books */
.mu-study-results {
    margin-bottom: var(--mu-space-4);
    padding-bottom: var(--mu-space-3);
    border-bottom: 1px solid var(--mu-border);
}

.mu-study-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    font-weight: 700;
    font-size: var(--mu-size-small);
}

/* --- The tree rows --- */
.mu-tree-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each level is indented a little more, with a thin guide line */
.mu-tree-item > .mu-tree-list {
    margin: 2px 0 4px 15px;
    padding-left: 8px;
    border-left: 1px solid var(--mu-border);
}

.mu-tree-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--mu-radius-small);
    background: none;
    color: var(--mu-text);
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

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

.mu-tree-book {
    font-family: var(--mu-font-heading);
    font-weight: 700;
}

.mu-tree-name {
    flex: 1;
    min-width: 0;
}

/* Arrow: points right when closed, down when open */
.mu-tree-arrow {
    width: 12px;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--mu-text-muted);
    transition: transform .15s;
}

.mu-tree-btn[aria-expanded="true"] > .mu-tree-arrow {
    transform: rotate(90deg);
}

/* Number of subtopics */
.mu-tree-count {
    flex-shrink: 0;
    min-width: 28px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mu-cream-dark);
    color: var(--mu-text-muted);
    font-size: var(--mu-size-caption);
    font-weight: 700;
    text-align: center;
}

/* Subtopic: a small dot instead of an arrow */
.mu-tree-dot {
    width: 7px;
    height: 7px;
    margin: 0 2px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--mu-border-dark);
}

/* Search result: "Chapter / Topic" on a second line */
.mu-tree-result {
    flex-wrap: wrap;
}

.mu-tree-where {
    flex-basis: 100%;
    padding-left: 21px;
    font-size: var(--mu-size-caption);
    color: var(--mu-text-muted);
}

/* The chosen path: book, chapter and topic in bold */
.mu-tree-btn.is-path {
    font-weight: 700;
}

.mu-tree-btn.is-path > .mu-tree-arrow {
    color: var(--mu-text);
}

/* The chosen subtopic: pale amber with an amber bar on the left */
.mu-tree-btn[aria-current="true"] {
    background: var(--mu-amber-pale);
    box-shadow: inset 3px 0 0 var(--mu-amber);
    font-weight: 700;
}

.mu-tree-btn[aria-current="true"] > .mu-tree-dot {
    background: var(--mu-amber);
}

/* "Loading...", "No chapters yet", errors */
.mu-tree-message {
    padding: 10px;
    font-size: var(--mu-size-small);
    color: var(--mu-text-muted);
}

.mu-tree-message.is-error,
.mu-study-status.is-error {
    color: var(--mu-learn);
}

/* --- Phone bar: the chosen path and "Change topic" ---
   Hidden on desktop, and on phones until a subtopic is chosen. */
.mu-study-bar {
    display: none;
}

@media (max-width: 991px) {
    .mu-study-nav.has-choice .mu-study-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 56px;
        padding: 10px var(--mu-space-4);
        border: 0;
        border-bottom: 1px solid var(--mu-border);
        border-radius: var(--mu-radius) var(--mu-radius) 0 0;
        background: none;
        color: var(--mu-text);
        text-align: left;
        cursor: pointer;
    }

    .mu-study-nav.is-collapsed .mu-study-bar {
        border-bottom: 0;
        border-radius: var(--mu-radius);
    }

    .mu-study-nav.is-collapsed .mu-study-tree {
        display: none;
    }
}

.mu-study-bar-path {
    flex: 1;
    min-width: 0;
    font-size: var(--mu-size-small);
    color: var(--mu-text-muted);
}

/* Looks like a small outline button */
.mu-study-bar-action {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1.5px solid var(--mu-text);
    border-radius: var(--mu-radius-small);
    font-family: var(--mu-font-heading);
    font-size: var(--mu-size-small);
    font-weight: 700;
}

/* --- Right: the notes --- */
.mu-study-notes {
    min-width: 0;
    scroll-margin-top: calc(var(--mu-header-height) + 16px);
}

/* Before anything is chosen */
.mu-study-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--mu-space-7) var(--mu-space-4);
    border: 1.5px dashed var(--mu-border-dark);
    border-radius: var(--mu-radius);
    text-align: center;
}

.mu-study-empty .mu-icon-box {
    margin-bottom: var(--mu-space-3);
}

.mu-study-empty-title {
    margin: 0;
    font-family: var(--mu-font-heading);
    font-size: var(--mu-size-h3);
    font-weight: 700;
}

.mu-study-empty .mu-muted {
    margin: 0;
}

/* Phones: the prompt is smaller, the tree is right above it */
@media (max-width: 991px) {
    .mu-study-empty {
        padding: var(--mu-space-5) var(--mu-space-4);
    }
}

/* Breadcrumb: Book › Chapter › Topic › Subtopic */
.mu-study-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    margin: 0 0 var(--mu-space-2);
    padding: 0;
    list-style: none;
    font-size: var(--mu-size-small);
    color: var(--mu-text-muted);
}

.mu-study-crumbs li + li::before {
    content: "\203A";              /* › */
    padding: 0 8px;
}

.mu-study-crumbs li[aria-current] {
    color: var(--mu-text);
    font-weight: 600;
}

/* Phones: the bar above already shows the path */
@media (max-width: 991px) {
    .mu-study-crumbs {
        display: none;
    }
}

.mu-study-title {
    margin: 0 0 var(--mu-space-4);
    padding-bottom: var(--mu-space-4);
    border-bottom: 1px solid var(--mu-border);
}

.mu-study-title:focus {
    outline: 0;
}

.mu-study-status {
    margin: 0;
    color: var(--mu-text-muted);
}


/* ---------------------------------------------------------------------
   40. FREE MEMBERS AND PAUSING
   - Upgrade button in the member header (free members only)
   - Locked study material panel (User/books, free members)
   - "Upgrade" link in the free-account note (User/revision)
   - Pause panel on the mock exam screens (User/startexam, Home/mockexampublic)
   --------------------------------------------------------------------- */

/* Upgrade button: same size as "Practise MCQs" next to it. */
.mu-app-header .mu-upgrade-btn,
.mu-app-header .mu-upgrade-btn:hover {
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    color: var(--mu-navy);
    font-size: 15px;
    white-space: nowrap;
    box-shadow: none;
}

/* With Upgrade showing, "Practise MCQs" becomes an outline button, so the
   header keeps one amber button (section 6). */
.mu-app-header .mu-upgrade-btn ~ .revise-btn,
.mu-app-header .mu-upgrade-btn ~ .revise-btn:hover {
    background: transparent;
    border-color: rgba(245, 240, 232, .55);
    color: var(--mu-on-navy);
}

.mu-app-header .mu-upgrade-btn ~ .revise-btn:hover {
    background: rgba(245, 240, 232, .08);
}

/* Room for Upgrade on desktop: the dark mode switch shows without its
   words (screen readers still read them), as it already does below 1200px. */
@media (min-width: 992px) {
    .mu-app-header .nav-right:has(.mu-upgrade-btn) .mu-theme-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Desktop: "Practise MCQs" reads "Practise", so the header stays on one row. */
@media (min-width: 992px) {
    .mu-app-header .mu-upgrade-btn ~ .revise-btn .mu-hide-tiny {
        display: none;
    }
}

/* Small laptops (992-1199px) and narrow phones: the star goes too, and on
   small laptops the name next to the profile icon (the menu still opens). */
@media (min-width: 992px) and (max-width: 1199px), (max-width: 380px) {
    .mu-app-header .mu-upgrade-btn .fa {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .mu-app-header .nav-right:has(.mu-upgrade-btn) .mu-profile-name,
    .mu-app-header .nav-right:has(.mu-upgrade-btn) .mu-profile-arrow {
        display: none;
    }

    .mu-app-header .nav-right:has(.mu-upgrade-btn) .mu-profile-button {
        padding-right: 4px;
    }
}

/* Phones and small tablets: no room for both, so Upgrade stays and
   "Practise" goes (practice is still in the menu, under Revision). */
@media (max-width: 639px) {
    .mu-app-header .mu-upgrade-btn ~ .revise-btn {
        display: none;
    }
}

@media (max-width: 380px) {
    .mu-app-header .mu-upgrade-btn {
        padding: 8px 12px;
    }
}

/* Locked study material */
.mu-locked-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mu-space-3);
    max-width: 560px;
    margin: var(--mu-space-5) auto 0;
    padding: var(--mu-space-7) var(--mu-space-5);
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    background: var(--mu-white);
    box-shadow: var(--mu-shadow);
    text-align: center;
}

.mu-locked-panel .mu-h2,
.mu-locked-panel p {
    margin: 0;
}

.mu-locked-panel .mu-btn {
    margin-top: var(--mu-space-2);
}

/* "Upgrade" link at the end of the free-account note: same colour as the
   note's text (light and dark mode), bold and underlined. */
.mu-rev-free-link,
[data-theme="dark"] .mu-rev-free-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* Pause panel: covers the whole screen, above the exam and its bars,
   so nothing behind it can be clicked or tapped. */
.mu-pause-panel {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mu-space-4);
    background: rgba(20, 33, 61, .92);
}

.mu-pause-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mu-space-3);
    width: 100%;
    max-width: 400px;
    padding: var(--mu-space-6) var(--mu-space-5);
    border-radius: var(--mu-radius);
    background: var(--mu-white);
    box-shadow: var(--mu-shadow-large);
    text-align: center;
}

.mu-pause-card .mu-h2,
.mu-pause-text {
    margin: 0;
}

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

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

.mu-pause-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mu-amber-pale);
    color: var(--mu-navy);
    font-size: 22px;
}


/* ---------------------------------------------------------------------
   41. EXAM SCREENS: COMPACT HEADER AND TOP BAR
   Used by: Home/mockexampublic (free mock) and User/startexam (members).
   - The site header shows on the exam screens, but shorter and not
     sticky: it scrolls away and the exam's own top bar (with the timer)
     stays at the top of the screen.
   - The light/dark switch is hidden here: exam screens stay light.
   - The pause panel (section 40) sits above both bars.
   The screens are found with :has(.mu-mock); older browsers simply show
   the normal header.
   --------------------------------------------------------------------- */
body:has(.mu-mock) {
    --mu-header-height: 52px;
}

body:has(.mu-mock) .mu-header,
body:has(.mu-mock) .mu-app-header {
    position: relative;
}

body:has(.mu-mock) .mu-logo img {
    width: 28px;
    height: 28px;
}

body:has(.mu-mock) .mu-logo-word {
    font-size: 18px;
}

body:has(.mu-mock) .mu-theme-switch,
body:has(.mu-mock) .mu-app-header .revise-btn {
    display: none;                /* light/dark switch, and "Practise MCQs" (competes with Next) */
}

/* --- Exam top bar: exam name and candidate on the left, timer on the right.
   Phones: name over candidate, timer beside both. Desktop: one row. --- */
.mu-exam-bar-top {
    position: sticky;
    top: 0;
    z-index: 20;                  /* above the question, below the pause panel */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name      timer"
        "candidate timer";
    align-items: center;
    gap: 2px 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: max(var(--mu-page-padding), calc((100% - var(--mu-max-width)) / 2 + var(--mu-page-padding)));
    padding-right: max(var(--mu-page-padding), calc((100% - var(--mu-max-width)) / 2 + var(--mu-page-padding)));
    border-top: 1px solid rgba(245, 240, 232, .12);   /* line between the header and this bar */
    box-shadow: 0 2px 8px rgba(20, 33, 61, .18);
    font-family: var(--mu-font-body);
}

.mu-exam-bar-top .mu-exam-bar-right {
    display: contents;            /* lets the candidate and timer take their own grid places */
}

.mu-exam-bar-top .mu-exam-title {
    grid-area: name;
    min-width: 0;
}

.mu-exam-bar-top .mu-exam-name {
    overflow: hidden;
    font-family: var(--mu-font-heading);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mu-exam-bar-top .mu-exam-candidate {
    grid-area: candidate;
    display: block;
    min-width: 0;
    overflow: hidden;
    color: rgba(245, 240, 232, .75);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mu-exam-bar-top .mu-exam-candidate .fa {
    margin-right: 4px;
}

/* Timer: the most prominent thing in the bar */
.mu-exam-bar-top #timerBox {
    grid-area: timer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 14px 5px;
    border: 1px solid rgba(245, 240, 232, .22);
    border-radius: var(--mu-radius-small);
    background: rgba(245, 240, 232, .10);
    line-height: 1.1;
}

.mu-timer-label {
    color: rgba(245, 240, 232, .75);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mu-exam-bar-top #timer {
    color: var(--mu-exam-bar-text);
    font-family: var(--mu-font-heading);
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;   /* digits don't jump as they change */
    letter-spacing: .02em;
}

/* Under 10 minutes left: amber timer with navy text. The class is added
   by one line in each page's timer script (DEVELOPER-QUESTIONS). */
.mu-exam-bar-top #timerBox.mu-timer-low {
    border-color: var(--mu-amber);
    background: var(--mu-amber);
}

.mu-exam-bar-top #timerBox.mu-timer-low .mu-timer-label,
.mu-exam-bar-top #timerBox.mu-timer-low #timer {
    color: var(--mu-navy);
}

@media (min-width: 640px) {
    .mu-exam-bar-top {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "name candidate timer";
        gap: 20px;
        min-height: 64px;
    }

    .mu-exam-bar-top .mu-exam-name {
        font-size: 17px;
    }

    .mu-exam-bar-top .mu-exam-candidate {
        max-width: 260px;
        font-size: 13px;
    }

    .mu-exam-bar-top #timerBox {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
        padding: 6px 16px;
    }

    .mu-exam-bar-top #timer {
        font-size: 24px;
    }
}


/* ---------------------------------------------------------------------
   42. COOKIE CHOICE AND MEMBERS' FOOTER
   Used by: Shared/_LayoutPage, Shared/_userlayout, User/FreePage.
   #muCookieBanner is a pop-up card in the lower part of the screen,
   over a light dimming (the page stays visible). It has the "hidden"
   attribute until the page script finds no saved choice, or "Cookie
   settings" is clicked. The script never shows it on the exam screens
   (pages with .mu-mock): it appears on the page before or after.
   --------------------------------------------------------------------- */
.mu-cookie {
    position: fixed;
    inset: 0;
    z-index: 1050;                /* above the header and Next bars, below pop-up messages */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--mu-space-3);
    padding-bottom: calc(var(--mu-space-3) + env(safe-area-inset-bottom));
    background: rgba(20, 33, 61, .28);   /* light navy dimming */
}

.mu-cookie[hidden] {
    display: none;
}

.mu-cookie-card {
    width: 100%;
    max-width: 560px;
    padding: var(--mu-space-4);
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-large);
    background: var(--mu-white);
    color: var(--mu-text);
    font-family: var(--mu-font-body);
    box-shadow: 0 8px 24px rgba(20, 33, 61, .12), 0 24px 48px rgba(20, 33, 61, .14);
}

/* Dark mode: a lighter edge, so the card stands out from the navy page */
[data-theme="dark"] .mu-cookie-card {
    border-color: var(--mu-border-dark);
}

.mu-cookie-card:focus {
    outline: none;                /* the card is focused only so keyboard users start inside it */
}

.mu-cookie-text {
    margin: 0 0 var(--mu-space-3);
    font-size: var(--mu-size-small);
    line-height: 1.5;
}

.mu-cookie-text a {
    color: var(--mu-text);
    font-weight: 600;
    text-decoration: underline;
}

/* Accept and Reject: same style and size, Accept first. Phones: stacked,
   full width. Wider screens, and short screens: side by side. */
.mu-cookie-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--mu-space-2);
}

.mu-cookie-buttons .mu-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 18px;
    font-size: 15px;
}

@media (min-width: 576px) {
    .mu-cookie {
        padding-bottom: calc(var(--mu-space-6) + env(safe-area-inset-bottom));
    }

    .mu-cookie-card {
        padding: var(--mu-space-5);
    }

    .mu-cookie-text {
        margin-bottom: var(--mu-space-4);
        font-size: 15px;
    }

    .mu-cookie-buttons {
        flex-direction: row;
        gap: var(--mu-space-3);
    }

    .mu-cookie-buttons .mu-btn {
        flex: 1 1 0;
    }
}

/* Short screens (e.g. iPhone SE): buttons side by side, so the card is
   shorter and the homepage's "Take a free mock exam" stays in view */
@media (max-height: 699px) {
    .mu-cookie-buttons {
        flex-direction: row;
    }

    .mu-cookie-buttons .mu-btn {
        flex: 1 1 0;
    }
}

/* --- "Cookie settings" in the public footer: a button that looks like
   the other footer links --- */
.mu-footer-linkbutton {
    display: inline-block;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--mu-on-navy-muted);
    font: inherit;
    cursor: pointer;
}

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

/* --- Members' footer (Shared/_userlayout, User/FreePage): one quiet
   line with the privacy policy and "Cookie settings" --- */
.mu-app-footer {
    padding: var(--mu-space-5) 0;
    border-top: 1px solid var(--mu-border);
    color: var(--mu-text-muted);
    font-size: var(--mu-size-small);
}

.mu-app-footer .mu-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--mu-space-5);
}

.mu-app-footer a,
.mu-app-footer .mu-footer-linkbutton {
    padding: 4px 0;
    color: var(--mu-text-muted);
    text-decoration: underline;
}

.mu-app-footer a:hover,
.mu-app-footer .mu-footer-linkbutton:hover {
    color: var(--mu-text);
}

/* Not on the exam screens, so "Cookie settings" can't open the card mid-exam */
body:has(.mu-mock) .mu-app-footer {
    display: none;
}

/* Practice screen: room below the footer for the fixed Next bar */
body:has(.mu-practice-actions-right) .mu-app-footer {
    margin-bottom: 96px;
}