/*
 * The Exams page (branch/exams.html).
 * Colours come from css/root/theme.css - never hardcode one here.
 */

/* The navbar is fixed; exams.js sets --exams-nav-height from its real height. */
body.exams-body {
    padding-top: var(--exams-nav-height, 4.75rem);
}

/* ----------------------------------------------------------------- layout */

/*
 * Tabs and filters, then the exams | the widgets. Full width with the same 1rem
 * edge as the hero and the leaderboard ad above, so every row lines up - no
 * max-width, which centred them and left an empty strip on a wide screen.
 */
.exams-toolbar {
    padding: 1.5rem 1rem 0;
}

.exams-toolbar .exams-filters[hidden] { display: none; }

.exams-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
    gap: 1.75rem;
    padding: 0 1rem 4rem;
}

.exams-main,
.exams-widgets,
.exams-page { min-width: 0; }

/* Narrower: the widgets drop under the exams, side by side. */
@media (max-width: 1024px) {
    .exams-layout { grid-template-columns: minmax(0, 1fr); }

    .exams-widgets {
        display: grid;
        /* min(): 16rem is wider than a 320px phone once the root font grows */
        grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
        gap: 1.25rem;
    }

    .exams-widgets .exams-widget { margin-bottom: 0; }
}

/* ------------------------------------------------------------------- tabs */

/* All exams | Not taken yet | In progress | Exams taken - a column in the left
   drawer, not a row above the exams: they are the page's navigation. The count
   is pushed to the far edge, so the four read as a list. */
.exams-tabs {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.exams-tab {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .7rem .85rem;
    border: none;
    border-left: 3px solid transparent;
    border-radius: .5rem;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: .95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.exams-tab > span:not(.exams-tab-count) { flex: 1; }

.exams-tab > i {
    width: 1.1rem;
    text-align: center;
}

.exams-tab:hover {
    color: var(--button-bg, #4f46e5);
    background: rgba(var(--button-bg-rgb, 79, 70, 229), .07);
}

.exams-tab.is-active {
    color: var(--button-bg, #4f46e5);
    border-left-color: var(--button-bg, #4f46e5);
    background: rgba(var(--button-bg-rgb, 79, 70, 229), .1);
}

.exams-tab-count {
    min-width: 1.6rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: rgba(var(--button-bg-rgb, 79, 70, 229), .1);
    color: var(--button-bg, #4f46e5);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
}

.exams-tab-count:empty { display: none; }

.exams-tab-intro {
    margin-bottom: 1.25rem;
    color: var(--text-secondary, #6b7280);
}

/* ---------------------------------------------------------------- widgets */

.exams-widgets {
    position: sticky;
    top: calc(var(--exams-nav-height, 4.75rem) + 1.5rem);
}

@media (max-width: 1024px) {
    .exams-widgets { position: static; }
}

.exams-widget {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.exams-widget-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .6rem;
}

.exams-widget-ad-label {
    padding: .15rem .5rem;
    border-radius: 4px;
    background: var(--hover-bg, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    font-size: .65rem;
}

/* The ad container keeps the leaderboard classes the rotation manager styles. */
.exams-widget .exams-widget-ad {
    min-height: 170px;
    margin-bottom: 0;
    border-radius: .75rem;
    overflow: hidden;
    position: relative;
    background: var(--hover-bg, #f3f4f6);
    box-shadow: none;
}

.exams-widget-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
}

.exams-widget-title i { color: var(--button-bg, #4f46e5); }

.exams-stats {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.exams-stat {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border-radius: .7rem;
    background: rgba(var(--button-bg-rgb, 79, 70, 229), .05);
}

.exams-stat i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    background: rgba(var(--button-bg-rgb, 79, 70, 229), .12);
    color: var(--button-bg, #4f46e5);
    font-size: .85rem;
}

.exams-stat-label {
    font-size: .85rem;
    color: var(--text-secondary, #6b7280);
}

.exams-stat-value {
    margin-left: auto;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary, #111827);
}

.exams-stats-empty {
    font-size: .88rem;
    color: var(--text-secondary, #6b7280);
}

/*
 * The hero is find-tutors' (css/find-tutors/hero-section.css). What follows is
 * only where it sits here, and the hero rules find-tutors keeps in its
 * responsive.css, which this page does not load.
 */
.exams-hero {
    padding: 1.5rem 1rem 0;
}

.exams-hero .hero-section { margin-bottom: 0; }

/* A line of the hero can bring its own subtitle (Manage Exams -> Exams page
   hero); js/exams/exams.js fades across to it rather than jumping. */
.exams-hero .hero-subtitle { transition: opacity .2s ease; }
.exams-hero .hero-subtitle.is-swapping { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .exams-hero .hero-subtitle { transition: none; }
}

@media (min-width: 1600px) {
    .exams-hero .hero-section { padding: 4rem 3rem; }
    .exams-hero .hero-title { font-size: 4rem; }
    .exams-hero .hero-subtitle { font-size: 1.5rem; }
    .exams-hero .hero-stats { gap: 4rem; }
    .exams-hero .stat-number { font-size: 2.5rem; }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .exams-hero .hero-section { padding: 2.5rem 1.5rem; }
    .exams-hero .hero-title { font-size: 2.5rem; }
    .exams-hero .hero-stats { gap: 2rem; }
    .exams-hero .stat-number { font-size: 1.75rem; }
    .exams-hero .stat-label { font-size: 0.8rem; }
}

@media (max-width: 768px) {
    .exams-hero .hero-section {
        padding: 2rem 1rem;
        border-radius: 1rem;
    }

    .exams-hero .hero-title {
        font-size: 1.75rem;
        min-height: auto;
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }

    .exams-hero .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        line-height: 1.4;
    }

    .exams-hero .hero-stats {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .exams-hero .stat-item {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
        padding: 0.75rem;
        background: rgba(var(--button-bg-rgb, 245, 158, 11), 0.05);
        border-radius: 0.75rem;
    }

    .exams-hero .stat-number { font-size: 1.5rem; }

    .exams-hero .stat-label {
        font-size: 0.7rem;
        text-align: center;
    }
}

/* The leaderboard ad under the hero, 2rem down as on find-tutors. */
.exams-top-banner {
    margin: 2rem 1rem 0;
}

/* The "Advertise with us" strip is injected right after it, with the banner's
   own 1rem edges - its stylesheet makes it 100% wide, which ran it into the
   side of the screen, out of line with everything else. */
.exams-top-banner + .advertise-with-us-cta {
    width: auto;
    max-width: none;
    margin: 1rem 1rem 0;
}

.exams-header h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: .25rem;
}

.exams-header p {
    color: var(--text-secondary, #6b7280);
    margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------ subscription */

.exams-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-radius: .75rem;
    background: var(--highlight, #fef3c7);
    color: var(--text);
    margin-bottom: 1.5rem;
}

.exams-notice strong { font-weight: 700; }

/* ------------------------------------------------- the left filter drawer */

/* The drawer itself is css/shared/filter-sidebar.css, which hangs it 64px down
   for find-tutors' navbar. This one is taller and its height is measured, so
   the drawer starts at the measured height instead - otherwise its first rows
   sit behind the navbar, which is above it (z-index 1001). */
.exams-body .sidebar-container {
    top: var(--exams-nav-height, 4.75rem);
    height: calc(100vh - var(--exams-nav-height, 4.75rem));
}

/* The hamburger left of the brand. */
.exams-body .sidebar-toggle {
    display: flex;
    align-items: center;
}

/* The drawer's header row: a title and a plain close cross, not find-tutors'
   Clear button - there is nothing in here to clear. */
.exams-body .sidebar-header .clear-filters-btn {
    padding: .4rem .6rem;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    box-shadow: none;
}

.exams-body .sidebar-header .clear-filters-btn:hover {
    transform: none;
    color: var(--button-bg, #4f46e5);
    box-shadow: none;
}

.exams-sidebar-icon { margin-right: .4rem; }

/* ----------------------------------------------------------------- search */

.exams-search {
    position: relative;
    flex: 1 1 16rem;
    min-width: 12rem;
}

.exams-search i {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary, #6b7280);
    font-size: .85rem;
    pointer-events: none;
}

.exams-filters .exams-search-input {
    width: 100%;
    padding: .6rem .8rem .6rem 2.2rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: .6rem;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    font-size: .95rem;
}

.exams-filters .exams-search-input:focus {
    outline: none;
    border-color: var(--button-bg, #4f46e5);
    box-shadow: 0 0 0 3px rgba(var(--button-bg-rgb, 79, 70, 229), .15);
}

/* ----------------------------------------------------------------- filters */

/* Two rows: what you are looking at, then the controls that change it. */
.exams-filters {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.exams-filters-head,
.exams-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

/* The count takes the middle, so Clear sits at the far edge. */
.exams-filters-head .exams-link {
    font-weight: 600;
}

.exams-filters select {
    min-width: 0;
    max-width: 100%;
    padding: .6rem .8rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: .6rem;
    background: var(--card-bg, #fff);
    color: var(--text);
    font-size: .95rem;
}

/* The list that is open, first in its filter row. It says where you are while
   the drawer holding the tabs is shut, and opens it again. On a wide screen the
   drawer is already open beside it, so it goes. */
.exams-open-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: .6rem;
    background: var(--card-bg, #fff);
    color: var(--text);
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.exams-open-tab:hover {
    border-color: var(--button-bg, #4f46e5);
    color: var(--button-bg, #4f46e5);
}

@media (min-width: 1280px) {
    .exams-open-tab { display: none; }
}

.exams-count {
    margin-left: auto;
    color: var(--text-secondary, #6b7280);
    font-size: .9rem;
}

/* With the drawer open beside them the open-list button goes, and the count
   has nothing to its left - so it keeps to the start rather than drifting to
   the far edge away from Clear. */
@media (min-width: 1280px) {
    .exams-filters-head .exams-count { margin-left: 0; margin-right: auto; }
}

/* ------------------------------------------------------------------- cards */

/* 15rem, not 17: beside the open drawer and the widgets (1280-1439px) 17rem
   left room for one card, stretched across 600px. min(): never wider than the
   column on a 320px phone. */
.exams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: 1.25rem;
}

/* A title is typed by the Exams desk, and one long word in it (a URL, a
   run-together name) used to widen the card and the whole page with it. */
.exam-card {
    min-width: 0;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.25rem;
    border-radius: .9rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}

.exam-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}

.exam-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.exam-type {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--button-bg, #4f46e5);
}

.exam-chip {
    font-size: .7rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--highlight, #fef3c7);
}

.exam-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}

.exam-card-meta,
.exam-card-facts {
    font-size: .85rem;
    color: var(--text-secondary, #6b7280);
}

.exam-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.exam-card-best {
    font-size: .85rem;
    font-weight: 600;
    color: var(--button-bg, #4f46e5);
}

.exam-card-btn {
    margin-top: auto;
    padding: .55rem 1rem;
    border: none;
    border-radius: .6rem;
    background: var(--button-bg, #4f46e5);
    color: var(--button-text, #fff);
    font-weight: 600;
    cursor: pointer;
}

.exam-card-btn:hover { filter: brightness(1.08); }

.exams-empty {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-secondary, #6b7280);
}

/* Nothing posted yet (exams.js emptyLibraryHtml): a stack of papers in a soft
   glow, three sparks, and one line - not a search that found nothing. */
.exams-empty-library {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 1.25rem 4rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 1.25rem;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(var(--button-bg-rgb, 79, 70, 229), .10), transparent 65%),
        var(--card-bg, #fff);
}

.exams-empty-art {
    position: relative;
    width: 9rem;
    height: 8rem;
    margin-bottom: 1.5rem;
}

.exams-empty-glow {
    position: absolute;
    inset: 0.5rem 0.75rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--button-bg-rgb, 79, 70, 229), .35), transparent 70%);
    filter: blur(6px);
    animation: exams-empty-breathe 4s ease-in-out infinite;
}

.exams-empty-sheet {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4.6rem;
    height: 5.8rem;
    border-radius: .75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, #fff);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

.exams-empty-sheet-back {
    transform: translate(-38%, -54%) rotate(10deg);
    background: rgba(var(--button-bg-rgb, 79, 70, 229), .12);
}

.exams-empty-sheet-front {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-60%, -48%) rotate(-6deg);
    color: var(--button-bg, #4f46e5);
    animation: exams-empty-float 5s ease-in-out infinite;
}

.exams-empty-sheet-front svg {
    width: 2.4rem;
    height: 2.4rem;
}

.exams-empty-spark {
    position: absolute;
    color: var(--button-bg, #4f46e5);
    line-height: 1;
    animation: exams-empty-twinkle 2.8s ease-in-out infinite;
}

.exams-empty-spark-1 { top: .2rem; right: 1rem; font-size: 1.1rem; }
.exams-empty-spark-2 { bottom: .6rem; left: .4rem; font-size: .8rem; animation-delay: .9s; }
.exams-empty-spark-3 { top: 2.2rem; left: 0; font-size: .7rem; animation-delay: 1.7s; }

.exams-empty-library .exams-empty-title {
    margin: 0 0 .5rem;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text-primary, var(--text, #111827));
}

.exams-empty-library .exams-empty-text {
    max-width: 30rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary, #6b7280);
}

@keyframes exams-empty-float {
    0%, 100% { transform: translate(-60%, -48%) rotate(-6deg); }
    50% { transform: translate(-60%, -56%) rotate(-4deg); }
}

@keyframes exams-empty-breathe {
    0%, 100% { opacity: .7; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1.04); }
}

@keyframes exams-empty-twinkle {
    0%, 100% { opacity: .25; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .exams-empty-glow,
    .exams-empty-sheet-front,
    .exams-empty-spark { animation: none; }
}

.exams-link {
    background: none;
    border: none;
    color: var(--button-bg, #4f46e5);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}

/* ------------------------------------------------------------ exam modal */

/*
 * Taking an exam and its result use the coursework modal
 * (css/tutor-profile/coursework-modal.css). Only what exams add is here.
 */

.exam-question-image {
    max-width: 100%;
    border-radius: .5rem;
    margin-bottom: 1rem;
}

/* A diagram is often the question. Tapping it opens the picture full size,
   because a graph shrunk into a phone-width card cannot be read. */
.exam-question-figure {
    display: block;
    max-width: 100%;
}

.exam-question-figure:hover .exam-question-image {
    box-shadow: 0 0 0 2px var(--button-bg, #4f46e5);
}

/* A formula drawn by KaTeX must not push the card sideways on a phone. */
.question-text .math-tex[data-display="1"],
.result-question-text .math-tex[data-display="1"],
.choice-text .math-tex[data-display="1"] {
    max-width: 100%;
}

.exam-review-explanation {
    padding: 12px;
    border-radius: 8px;
    background: rgba(var(--button-bg-rgb, 79, 70, 229), .08);
    color: var(--text-primary, #111827);
    font-size: .9rem;
    line-height: 1.5;
}

.exam-review-explanation strong { margin-right: .25rem; }

.exam-result-date {
    margin-left: auto;
    color: var(--text-secondary, #6b7280);
    font-size: .9rem;
}

.results-summary .summary-value.exam-score-fail { color: var(--error, #ef4444); }

/* The timer and the Leave button, side by side in the exam header. */
.exam-take-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}

.exam-take-tools .exam-leave-btn {
    padding: .6rem 1.1rem;
}

/* An open-ended answer or model answer keeps its line breaks. */
.exam-written-answer { white-space: pre-wrap; }

/* Marking your own open-ended answer against the model answer. */
.exam-self-mark {
    padding: 12px;
    border-radius: 8px;
    border: 1px dashed rgba(var(--button-bg-rgb, 79, 70, 229), .45);
    background: rgba(var(--button-bg-rgb, 79, 70, 229), .05);
    color: var(--text-primary, #111827);
    font-size: .9rem;
}

.exam-self-mark p { margin: 0 0 .6rem; }

.exam-self-mark-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.exam-self-mark-actions .coursework-btn {
    padding: .5rem 1rem;
    font-size: .9rem;
}

.exam-self-mark.is-marked { border-style: solid; }

/* The wall, the question-count chooser and the buy panel. */
.exam-btn {
    padding: .6rem 1.2rem;
    border-radius: .6rem;
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--card-bg, #fff);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}

.exam-btn:disabled { opacity: .45; cursor: default; }

.exam-btn-primary {
    background: var(--button-bg, #4f46e5);
    color: var(--button-text, #fff);
    border-color: transparent;
}

/* ----------------------------------------------------------- exams taken */

.exam-chip-open {
    background: rgba(var(--button-bg-rgb, 79, 70, 229), .12);
    color: var(--button-bg, #4f46e5);
    font-weight: 600;
}

.exam-chip-taken,
.exam-chip-pass {
    background: rgba(16, 185, 129, .14);
    color: var(--success, #10b981);
    font-weight: 600;
}

.exam-chip-fail {
    background: rgba(239, 68, 68, .12);
    color: var(--error, #ef4444);
    font-weight: 600;
}

.exam-chip i { font-size: .85em; margin-right: .15rem; }

/* "3 to mark" on an Exams taken card: open-ended answers waiting for a mark. */
.exam-chip-mark {
    border: none;
    background: rgba(245, 158, 11, .15);
    color: #b45309;
    font-weight: 600;
    cursor: pointer;
}

.exam-chip-mark:hover { background: rgba(245, 158, 11, .25); }

.exam-card-btn i { margin-right: .35rem; font-size: .85em; }

.my-exam-card { gap: .75rem; }

.my-exam-score {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem;
    border-radius: .8rem;
    background: rgba(var(--button-bg-rgb, 79, 70, 229), .05);
}

/* A progress ring drawn from --pct, no images or canvas. */
.my-exam-ring {
    --ring: var(--button-bg, #4f46e5);
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--pct, 0) * 1%),
                               rgba(var(--border-rgb, 229, 231, 235), .9) 0);
}

.my-exam-ring::before {
    content: '';
    position: absolute;
    inset: .4rem;
    border-radius: 50%;
    background: var(--card-bg, #fff);
}

.my-exam-ring > * {
    position: relative;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-primary, #111827);
}

.my-exam-ring small { font-size: .65em; font-weight: 700; }

.my-exam-ring.is-pass { --ring: var(--success, #10b981); }
.my-exam-ring.is-fail { --ring: var(--error, #ef4444); }
.my-exam-ring.is-empty i { color: var(--text-secondary, #6b7280); font-size: 1.1rem; }

.my-exam-best {
    font-size: .95rem;
    color: var(--text-primary, #111827);
}

.my-exam-best strong { font-weight: 800; }

.my-exam-last {
    font-size: .8rem;
    color: var(--text-secondary, #6b7280);
}

.exam-card-facts i { margin-right: .25rem; opacity: .75; }

.my-exam-history {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.my-exam-attempt {
    padding: .2rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: transparent;
    color: var(--text-primary, #111827);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}

.my-exam-attempt span { color: var(--text-secondary, #6b7280); font-weight: 500; }
.my-exam-attempt:hover { border-color: var(--button-bg, #4f46e5); }
.my-exam-attempt.is-pass { border-color: rgba(16, 185, 129, .45); }
.my-exam-attempt.is-fail { border-color: rgba(239, 68, 68, .4); }

.my-exam-more {
    font-size: .75rem;
    color: var(--text-secondary, #6b7280);
}

.my-exam-actions {
    display: flex;
    gap: .5rem;
    margin-top: auto;
}

.my-exam-actions .exam-card-btn {
    flex: 1;
    margin-top: 0;
}

.exam-card-secondary {
    background: transparent;
    border: 1px solid var(--button-bg, #4f46e5);
    color: var(--button-bg, #4f46e5);
}

.taken-empty i {
    display: block;
    margin-bottom: .75rem;
    font-size: 2.25rem;
    opacity: .5;
}

.taken-empty p { margin-bottom: 1rem; }

/* ------------------------------------------------------------------- wall */

.exams-wall {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

/* Its full width up to the cap, so the buttons have room at every size (it
   used to shrink to its text and crush three buttons into narrow columns),
   and it scrolls inside itself when it is taller than the screen - the buy
   form is, on a phone held sideways. */
.exams-wall-card {
    box-sizing: border-box;
    width: 100%;
    background: var(--card-bg, #fff);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 28rem;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overflow-wrap: anywhere;
    text-align: center;
}

.exams-wall-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .75rem;
}

.exams-wall-card p {
    color: var(--text-secondary, #6b7280);
    margin-bottom: 1.25rem;
}

/* The buttons take their own width and share what is left, wrapping onto a
   row of their own when a plan's name makes one long. */
.exams-wall-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.exams-wall-actions .exam-btn {
    flex: 1 1 auto;
}

/* The way in first, "Not now" last. */
#exams-wall .exams-wall-actions .exam-btn-primary { order: -1; }

@media (max-width: 480px) {
    .exams-wall { padding: .75rem; }
    .exams-wall-card { padding: 1.5rem 1.25rem; }
    .exams-wall-card h3 { font-size: 1.2rem; }
}

/* Which subscription tier a paper belongs to. */

.exam-card-tier {
    font-size: .78rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--highlight, #f5f3ff);
    color: var(--button-bg, #5b21b6);
    align-self: flex-start;
}

.exam-card-tier.is-locked {
    background: #fef3c7;
    color: #92400e;
}

.exam-card-tier.is-free {
    background: #dcfce7;
    color: #166534;
}

/* Not coverable by their plan: the button names the plan that would cover it. */
.exam-card-subscribe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.exam-card-subscribe i { font-size: .85em; }

.exam-card-btn.is-unavailable {
    background: var(--hover-bg, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    cursor: default;
}

.exam-card-btn.is-unavailable:hover { filter: none; }

/* ============================================
   Buying one paper outright
   A subscription is the wrong shape for someone who wants a single paper, so a
   priced paper can be bought on its own - same transfer-and-proof flow as every
   other payment on the platform.
   ============================================ */

.exam-card-owned {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .5rem;
    font-size: .8rem;
    font-weight: 600;
    color: #15803d;
}

[data-theme="dark"] .exam-card-owned { color: var(--success, #10b981); }

.exam-card-price {
    margin-top: .35rem;
    font-size: .82rem;
    color: var(--text-secondary, #6b7280);
}

/* --button-bg, as on the other outlined card button (Review): --accent is a
   dark violet in the dark theme and the button all but vanished there. */
.exam-card-buy {
    margin-top: .5rem;
    background: transparent;
    border: 1px solid var(--button-bg, #4f46e5);
    color: var(--button-bg, #4f46e5);
}

.exam-buy-card { max-width: 30rem; text-align: left; }

/* The invoice window (payment_invoices.py): a picture of the invoice when it is
   one, and the link to open it. */
.exams-wall[hidden] { display: none; }

.exam-invoice-image {
    display: block;
    max-width: 100%;
    max-height: 18rem;
    margin: 0 auto 1rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: .5rem;
}

.exam-invoice-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* Under .exams-wall-card, or the card's grey paragraph colour wins. */
.exams-wall-card .exam-buy-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--button-bg, #4f46e5);
    margin: .25rem 0 1rem;
}

.exam-buy-state {
    padding: .7rem .85rem;
    border-radius: .5rem;
    background: #fef3c7;
    color: #92400e;
    font-size: .88rem;
    margin-bottom: 1rem;
}

.exam-buy-label {
    display: block;
    margin: .8rem 0 .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
}

.exam-buy-input {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: .5rem;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    font-size: .9rem;
}

.exam-buy-hint {
    display: block;
    margin-top: .3rem;
    font-size: .75rem;
    color: var(--text-secondary, #9ca3af);
}

.exam-buy-error {
    margin-top: .8rem;
    padding: .6rem .8rem;
    border-radius: .5rem;
    background: #fee2e2;
    color: #991b1b;
    font-size: .85rem;
}

/* Choosing how many questions one sitting draws. */
.exam-sitting-note {
    font-size: .9rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 1rem;
}

.exam-sitting-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
}

.exam-preset {
    padding: .35rem .8rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary, #111827);
    font-size: .82rem;
    cursor: pointer;
}

.exam-preset:hover { border-color: var(--button-bg, #4f46e5); color: var(--button-bg, #4f46e5); }

/* "50 drawn at random from 4,000" on a card. */
.exam-card-bank {
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--text-secondary, #6b7280);
}

/* ======================================================================
   The navbar at every width
   find-tutors' navbar (css/find-tutors/navbar.css) with six links, a
   profile and a search sharing one row. Its 2rem gaps and the search's own
   margins squeezed the search to a 67px stub from 1024px up, the links
   broke onto two lines, and on a phone the brand and the menu button made
   the page 120px wider than the screen.
   ====================================================================== */
.exams-body .nav-container { gap: .75rem; }

.exams-body .nav-container > .flex-1 {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

.exams-body .nav-brand,
.exams-body .desktop-nav-actions,
.exams-body .mobile-menu-btn { flex-shrink: 0; }

.exams-body .desktop-nav-items .nav-link {
    white-space: nowrap;
    padding: .5rem .6rem;
}

/* The emoji beside each link only where there is room for them. */
@media (max-width: 1599px) {
    .exams-body .desktop-nav-items .nav-icon { display: none; }
}

/* 1024-1279: the links and the profile on one row still leave the search
   room - the avatar without the name, the brand without its badge. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .exams-body #profile-dropdown-toggle .profile-name { display: none; }
    .exams-body .nav-brand .logo-badge { display: none; }
    .exams-body .desktop-nav-items .nav-link {
        padding: .5rem .45rem;
        font-size: .92rem;
    }
}

/* A phone: the drawer's hamburger, the search and the menu button. The
   logo is at the top of the menu, as on find-tutors. */
@media (max-width: 559px) {
    .exams-body .nav-brand .logo-container { display: none; }
}

/* ======================================================================
   The filter row on a phone
   Two even columns under a full-width search, instead of selects of every
   width, one to a line.
   ====================================================================== */
@media (max-width: 599px) {
    .exams-toolbar { padding-top: 1.25rem; }

    .exams-filters-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }

    .exams-filters-row .exams-search {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .exams-filters-row select { width: 100%; }

    /* A select left on a row of its own takes the whole row (the fifth of
       All exams' five, Exams taken's only one) - the search is the first
       child, so that is a last child in an even place. */
    .exams-filters-row select:last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* ======================================================================
   The exam window
   It is the coursework take-quiz markup, and its stylesheet
   (css/tutor-profile/coursework-modal.css) is the profile pages' too - so
   what the exam needs is here, under #examTakeModal.
   ====================================================================== */

/* Anything typed - a question, an option, an answer - wraps rather than
   widening the window. A link pasted into a question made the whole window
   scroll sideways, 1484px of it on a phone. */
#examTakeModal .quiz-title,
#examTakeModal .question-text,
#examTakeModal .choice-text,
#examTakeModal .results-title,
#examTakeModal .result-question-text,
#examTakeModal .result-your-answer,
#examTakeModal .result-correct-answer,
#examTakeModal .exam-review-explanation,
#examTakeModal .exam-self-mark {
    overflow-wrap: anywhere;
}

#examTakeModal .quiz-choice .choice-text { min-width: 0; }

/* A formula keeps its shape and scrolls inside its own box when it is wider
   than the column. Display maths already does (js/shared/math-render.js);
   an inline one ran off the side of a phone and took the window with it.
   KaTeX still breaks it at = and + where it can, inside the box. */
#examTakeModal .math-tex[data-display="0"] {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
}

/* The progress bar's track is --highlight, which is white in the light
   theme: on the white window only the filled sliver showed. */
#examTakeModal .progress-bar { background: var(--hover-bg, #f3f4f6); }

/* The header is a centred stack at every size: the title, then the clock
   and Leave together, then what the exam is. Side by side, a long title
   pushed the clock onto a line of its own against the left edge. */
#examTakeModal .quiz-header-top {
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

#examTakeModal .quiz-title { margin-bottom: 0; }

#examTakeModal .exam-take-tools {
    justify-content: center;
    flex-wrap: nowrap;
}

/* The shared sheet stretches every coursework button full width under
   768px; Leave belongs beside the clock. */
#examTakeModal .exam-take-tools .exam-leave-btn {
    width: auto;
    flex-shrink: 0;
}

.exam-take-tools .quiz-timer-container { white-space: nowrap; }

/* The pills over a question never break inside themselves. */
#examTakeModal .question-header > span,
#examTakeModal .result-question-header > span { white-space: nowrap; }

@media (max-width: 600px) {
    #examTakeModal .coursework-modal-body { padding: .5rem 1rem 1.25rem; }

    #examTakeModal .quiz-header {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    #examTakeModal .quiz-title {
        font-size: 1.05rem;
        line-height: 1.35;
    }

    #examTakeModal .quiz-timer-container { padding: .5rem .9rem; }
    #examTakeModal .quiz-timer { font-size: 1.2rem; }
    #examTakeModal .timer-icon { font-size: 1rem; }

    #examTakeModal .quiz-meta { gap: .4rem; }

    #examTakeModal .quiz-meta-item {
        gap: .3rem;
        padding: .3rem .6rem;
        font-size: .8rem;
    }

    #examTakeModal .quiz-progress { margin-bottom: 1rem; }

    #examTakeModal .quiz-question-card {
        padding: 1rem;
        margin-bottom: 1.25rem;
        border-radius: .85rem;
    }

    /* Q-number, type and marks fit one row from 360px, and wrap below. */
    #examTakeModal .quiz-question-card .question-header {
        flex-wrap: wrap;
        gap: .35rem;
        margin-bottom: 1rem;
    }

    #examTakeModal .quiz-question-card .question-number,
    #examTakeModal .quiz-question-card .question-points {
        padding: .3rem .6rem;
        font-size: .78rem;
    }

    #examTakeModal .question-type-badge {
        padding: .25rem .5rem;
        font-size: .68rem;
    }

    #examTakeModal .quiz-question-card .question-text {
        font-size: 1.05rem;
        margin-bottom: 1rem;
    }

    #examTakeModal .quiz-choice {
        gap: .55rem;
        padding: .75rem .85rem;
    }

    #examTakeModal .quiz-choice .choice-label { min-width: 1.2rem; }

    #examTakeModal .quiz-navigation {
        gap: .6rem;
        margin-bottom: 1rem;
    }

    #examTakeModal .quiz-navigation .coursework-btn {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    #examTakeModal .quiz-question-dots {
        gap: .4rem;
        padding: .75rem;
    }

    /* The result: the window's own padding is enough. */
    #examTakeModal .quiz-results-container { padding: 0; }
    #examTakeModal .exam-result-date { margin-left: 0; }

    /* One row of Q-number, type, marks and tick, wrapping when it must -
       the shared sheet stacks them four lines deep on a phone. */
    #examTakeModal .result-question-header {
        flex-direction: row;
        align-items: center;
        gap: .5rem;
    }

    #examTakeModal .result-question-points { margin-left: auto; }

    #examTakeModal .result-question-card { padding: 12px; }
    #examTakeModal .result-question-text { padding: 10px; }
}

/* The narrowest phones: a little more of the width for the question. */
@media (max-width: 380px) {
    #examTakeModal .coursework-modal-body { padding-left: .75rem; padding-right: .75rem; }
}