/* Exam Prep: question banks, runner and public landing pages. Uses site theme tokens (dark default, [data-theme="light"] override). */
.ep-shell, .ep-public, .ep-dialog-backdrop, .ep-toast {
  --ep-ok: #34c58a; --ep-bad: #ff6b6f; --ep-warn: #f0a630; --ep-radius: 1.25rem; --ep-tap: 2.75rem;
  /* Accent for text and thin strokes: the cyan accent is too light on white, so light mode darkens it. */
  --ep-ink: var(--mh-accent);
}
[data-theme="light"] .ep-shell, [data-theme="light"] .ep-public, [data-theme="light"] .ep-dialog-backdrop, [data-theme="light"] .ep-toast {
  --ep-ok: #1f8a5c; --ep-bad: #c9373c; --ep-warn: #a86400; --ep-ink: #0b6f93;
}
.ep-shell, .ep-public { position: relative; z-index: 1; padding: clamp(1rem, 3vw, 2.25rem); display: grid; gap: 1.25rem; align-content: start; color: var(--mh-text); min-width: 0; }
.ep-shell > * { min-width: 0; }
.ep-shell [id] { scroll-margin-block-start: calc(var(--mh-header-h, 5rem) + 1rem); }
.ep-public { max-width: 62rem; margin-inline: auto; padding-block: clamp(1.5rem, 4vw, 3.5rem); }
.ep-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--mh-muted); font-size: .9rem; }
.ep-crumbs a:hover { color: var(--ep-ink); }
.ep-head h1, .ep-hero h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.15; font-weight: 800; overflow-wrap: break-word; }
.ep-head { display: grid; gap: .5rem; }
.ep-head__stack { display: grid; gap: .5rem; }
.ep-head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1rem; }
.ep-hero { display: grid; gap: .9rem; }
.ep-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--ep-ink); font-weight: 700; }
.ep-lede { color: var(--mh-muted-strong); line-height: 1.7; }
.ep-muted { color: var(--mh-muted); font-size: .92rem; }
.ep-small { font-size: .82rem; }
.ep-num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.ep-h2 { font-size: 1.25rem; font-weight: 700; margin-block: .25rem; }
.ep-count { display: inline-block; vertical-align: middle; font-size: .9rem; font-weight: 700; padding: .1rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--mh-accent) 14%, transparent); color: var(--ep-ink); }
.ep-card { padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--mh-card-border); border-radius: var(--ep-radius); background: var(--mh-surface-soft); display: grid; gap: .75rem; align-content: start; min-width: 0; }
.ep-card h2, .ep-card h3 { font-weight: 700; }
.ep-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.ep-twocol { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ep-twocol--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.ep-stack { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.ep-section-head { display: grid; gap: .25rem; margin-block-end: .75rem; }
.ep-section-head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-block-end: 0; }
.ep-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.ep-badge { display: inline-block; width: fit-content; padding: .1rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--mh-card-border); color: var(--mh-muted-strong); }
.ep-badge--ok { color: var(--ep-ink); border-color: var(--ep-ink); }
.ep-badge--muted { color: var(--mh-muted); }
.ep-badge--preview { color: var(--ep-warn); border-color: var(--ep-warn); border-style: dashed; }
.ep-badge--due { color: var(--mh-text); background: color-mix(in srgb, var(--mh-accent) 14%, transparent); border-color: transparent; }
.ep-badge--flag { color: var(--ep-warn); border-color: var(--ep-warn); }
.ep-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ep-actions--end { justify-content: flex-end; }
.ep-link { color: var(--ep-ink); font-weight: 600; min-height: var(--ep-tap); display: inline-flex; align-items: center; text-underline-offset: 3px; }
.ep-link:hover { text-decoration: underline; }
.ep-btn-sm { padding: .55rem 1.1rem; }
.ep-shell .mh-btn-primary, .ep-shell .mh-btn-secondary, .ep-dialog .mh-btn-primary, .ep-dialog .mh-btn-secondary { min-height: var(--ep-tap); }
.ep-shell button[disabled] { opacity: .5; cursor: not-allowed; }
.ep-shell :focus-visible, .ep-dialog :focus-visible { outline: 2px solid var(--mh-accent); outline-offset: 2px; }

/* Chips (hub header) */
.ep-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.ep-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; min-height: 2.25rem; border-radius: 999px; border: 1px solid var(--mh-card-border); background: var(--mh-surface-soft); font-size: .85rem; color: var(--mh-muted-strong); }
.ep-chip strong { color: var(--mh-text); font-variant-numeric: tabular-nums; }
.ep-chip--streak strong { color: var(--ep-warn); }
.ep-chip--due strong { color: var(--ep-ink); }
.ep-chip--link { color: var(--ep-ink); font-weight: 600; }
.ep-chip--link:hover { border-color: var(--mh-accent); }

/* Resume banner */
.ep-banner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-radius: var(--ep-radius); border: 1px solid color-mix(in srgb, var(--mh-accent) 45%, transparent); background: color-mix(in srgb, var(--mh-accent) 10%, var(--mh-surface-soft)); }
.ep-banner__title { font-weight: 700; font-size: 1.05rem; }
.ep-banner__body { display: grid; gap: .2rem; min-width: 0; }

/* Tracks and module cards */
.ep-track { display: grid; gap: .9rem; }
.ep-track__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
.ep-track__title { display: grid; gap: .35rem; }
.ep-track__progress { display: grid; gap: .35rem; max-width: 36rem; }
.ep-module { gap: .9rem; }
.ep-module.is-locked { background: linear-gradient(180deg, var(--mh-surface-soft), color-mix(in srgb, var(--mh-surface-soft) 85%, transparent)); }
.ep-module__top { display: flex; gap: .9rem; align-items: flex-start; }
.ep-module__title { display: grid; gap: .35rem; min-width: 0; }
.ep-module h3 { font-size: 1.05rem; line-height: 1.3; overflow-wrap: break-word; }
.ep-module h3 a:hover { color: var(--ep-ink); }
.ep-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.ep-kv > div { display: grid; gap: .1rem; padding: .5rem .6rem; border-radius: .8rem; background: color-mix(in srgb, var(--mh-text) 4%, transparent); }
.ep-kv dt { font-size: .75rem; color: var(--mh-muted); }
.ep-kv dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.ep-kv--dialog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ep-kv--dialog .is-warn dd { color: var(--ep-warn); }
.ep-counts { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; font-size: .82rem; color: var(--mh-muted); }
.ep-counts li { padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--mh-card-border); }
.ep-counts li.is-active { color: var(--mh-text); border-color: color-mix(in srgb, var(--mh-accent) 50%, transparent); }
.ep-counts li .ep-num { font-weight: 700; }

/* Progress ring */
.ep-ring { width: 4rem; height: 4rem; flex: none; }
.ep-ring--sm { width: 3.5rem; height: 3.5rem; }
.ep-ring--lg { width: 7.5rem; height: 7.5rem; }
.ep-ring__track { fill: none; stroke: var(--mh-card-border); stroke-width: 6; }
.ep-ring__value { fill: none; stroke: var(--mh-accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ep-ring__text { fill: var(--mh-text); font-size: 14px; font-weight: 800; font-family: inherit; }
.ep-result--strong .ep-ring__value { stroke: var(--ep-ok); }
.ep-result--borderline .ep-ring__value { stroke: var(--ep-warn); }
.ep-result--low .ep-ring__value { stroke: var(--ep-bad); }

/* Stats */
.ep-stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.ep-stat { display: grid; align-content: center; gap: .15rem; padding: .9rem 1rem; border: 1px solid var(--mh-card-border); border-radius: 1rem; background: var(--mh-surface-soft); color: var(--mh-muted); font-size: .85rem; }
.ep-stat--ring { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem; }
.ep-stat--ring .ep-ring { width: 3.25rem; height: 3.25rem; }
.ep-stat__n { font-size: 1.5rem; font-weight: 800; color: var(--mh-text); }
.ep-progress { height: .45rem; border-radius: 999px; background: var(--mh-card-border); overflow: hidden; }
.ep-progress > span { display: block; height: 100%; max-width: 100%; background: linear-gradient(90deg, var(--mh-accent), var(--mh-accent-secondary)); transition: width .4s ease; }
[dir="rtl"] .ep-progress > span { background: linear-gradient(270deg, var(--mh-accent), var(--mh-accent-secondary)); }
.ep-progress--warn > span, [dir="rtl"] .ep-progress--warn > span { background: var(--ep-warn); }
.ep-progress--runner { height: .35rem; }
.ep-topics, .ep-list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.ep-topics--cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); column-gap: 1.5rem; }
.ep-list { padding-inline-start: 1.1rem; list-style: disc; gap: .3rem; }
.ep-list a { color: var(--ep-ink); overflow-wrap: break-word; }
.ep-list-plain { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
.ep-list-plain li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .35rem; border-block-end: 1px solid var(--mh-card-border); }
.ep-list-plain li:last-child { border-block-end: 0; }
.ep-list-plain a { color: var(--ep-ink); font-weight: 600; }
.ep-topic-row { display: flex; justify-content: space-between; gap: 1rem; margin-block-end: .25rem; }
.ep-topic-row > span:first-child { min-width: 0; overflow-wrap: break-word; }
.ep-topic-row > span:last-child { flex: none; }
.ep-history li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Review entry cards */
.ep-review-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.ep-rcard { gap: .5rem; }
.ep-rcard__top { display: flex; align-items: baseline; gap: .6rem; }
.ep-rcard__n { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--mh-muted); }
.ep-rcard.has-items .ep-rcard__n { color: var(--ep-ink); }
.ep-rcard--wrong.has-items .ep-rcard__n { color: var(--ep-bad); }
.ep-rcard--flagged.has-items .ep-rcard__n { color: var(--ep-warn); }

/* Sparkline */
.ep-spark { margin: 0; display: grid; gap: .35rem; }
.ep-spark svg { width: 100%; max-width: 20rem; height: auto; }
.ep-spark__line { fill: none; stroke: var(--mh-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ep-spark__mid { stroke: var(--mh-card-border); stroke-dasharray: 3 4; }
.ep-spark__dot { fill: var(--mh-accent); }
[dir="rtl"] .ep-spark svg { transform: scaleX(-1); }

/* Forms */
.ep-form { display: grid; gap: .9rem; }
.ep-form fieldset { border: 1px solid var(--mh-card-border); border-radius: .9rem; padding: .75rem 1rem; display: grid; gap: .5rem; min-width: 0; }
.ep-form legend { font-weight: 600; padding-inline: .3rem; }
.ep-form__row { display: flex; flex-wrap: wrap; gap: 1rem; }
.ep-form label { font-weight: 600; font-size: .92rem; }
.ep-form select, .ep-form input[type="number"] { display: block; margin-block-start: .25rem; padding: .5rem .75rem; border-radius: .75rem; border: 1px solid var(--mh-card-border); background: var(--mh-surface); color: var(--mh-text); min-height: var(--ep-tap); min-width: 7rem; font: inherit; }
.ep-seg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.ep-seg__opt { display: flex; gap: .6rem; align-items: center; padding: .6rem .8rem; min-height: var(--ep-tap); border: 1px solid var(--mh-card-border); border-radius: .8rem; cursor: pointer; font-weight: 600; }
.ep-seg__opt:has(input:checked) { border-color: var(--mh-accent); background: color-mix(in srgb, var(--mh-accent) 10%, transparent); }
.ep-seg__opt input { accent-color: var(--mh-accent); }
.ep-chipset { display: flex; flex-wrap: wrap; gap: .45rem; }
.ep-chipbox { position: relative; display: inline-flex; cursor: pointer; }
.ep-chipbox input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ep-chipbox > span { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--mh-card-border); font-weight: 500; font-size: .88rem; }
.ep-chipbox input:checked + span { border-color: var(--mh-accent); background: color-mix(in srgb, var(--mh-accent) 14%, transparent); color: var(--mh-text); }
.ep-chipbox input:focus-visible + span { outline: 2px solid var(--mh-accent); outline-offset: 2px; }
.ep-check { display: flex; gap: .5rem; align-items: center; min-height: var(--ep-tap); }
.ep-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--mh-accent); }
.ep-error { color: var(--ep-bad); font-weight: 600; }
.ep-disclaimer { padding: .8rem 1rem; border-inline-start: 3px solid var(--mh-accent); border-radius: .5rem; font-size: .88rem; color: var(--mh-muted-strong); background: color-mix(in srgb, var(--mh-accent) 8%, transparent); }

/* Buy */
.ep-buy { display: grid; gap: .4rem; justify-items: start; max-width: 22rem; }
.ep-buy__msg { padding: .5rem .75rem; border-radius: .75rem; background: color-mix(in srgb, var(--mh-accent) 8%, transparent); font-size: .85rem; }
.ep-head--row > .ep-buy { justify-items: end; }

/* Tabs */
.ep-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.ep-tab { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--mh-card-border); background: transparent; color: var(--mh-muted-strong); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.ep-tab:hover { border-color: var(--mh-accent); }
.ep-tab.is-active { background: var(--mh-accent); border-color: var(--mh-accent); color: #04131f; }
.ep-tabs--sm .ep-tab { min-height: 2.25rem; padding: .25rem .7rem; font-size: .8rem; }

/* Runner */
/* minmax(0, 1fr): a long header line or option must never widen the column past the viewport. */
.ep-runner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; width: 100%; max-width: 72rem; }
.ep-runner__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; min-width: 0; }
.ep-runner__layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 17rem; }
.ep-runner__side { min-width: 0; min-height: 0; }
.ep-runner__bar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ep-runner__meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ep-runner__count { font-weight: 700; }
.ep-runner__actions { flex-wrap: nowrap; padding-block: .55rem; padding-block-end: max(.55rem, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--mh-card-border); }
.ep-runner__actions .ep-keys { flex: 1 1 auto; min-width: 0; text-align: center; margin: 0; line-height: 1.35; }
/* LTR content (English/German titles, descriptions) inside the Arabic UI keeps LTR text but lines up with the RTL page. */
[dir="rtl"] .ep-shell p[dir="auto"], [dir="rtl"] .ep-shell h1[dir="auto"], [dir="rtl"] .ep-shell h2[dir="auto"], [dir="rtl"] .ep-shell h3[dir="auto"] { text-align: right; }
.ep-timer { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--mh-card-border); background: var(--mh-surface-soft); }
.ep-nav-jump { display: none; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ep-ink); }
.ep-timer.is-low { border-color: var(--ep-bad); color: var(--ep-bad); }
.ep-timer__value { font-weight: 800; font-size: 1.15rem; direction: ltr; unicode-bidi: isolate; min-width: 3.6em; text-align: center; }
.ep-question__tools { display: flex; gap: .4rem; }
.ep-qcontent { display: grid; gap: 1rem; }
/* Long German compounds (and drug names) wrap instead of overflowing; hyphenation follows the content lang. */
.ep-qcontent, .ep-feedback__text, .ep-explain p { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.ep-stem { overflow-wrap: break-word; white-space: pre-line; }
.ep-stem:focus { outline: none; }
.ep-options-group, .ep-options { display: grid; gap: .6rem; list-style: none; padding: 0; }
.ep-options--lettered { list-style: upper-alpha; padding-inline-start: 1.6rem; }
.ep-option { position: relative; display: flex; gap: .7rem; align-items: center; width: 100%; padding: .55rem .9rem; min-height: var(--ep-tap); border: 1px solid var(--mh-card-border); border-radius: .9rem; cursor: pointer; background: var(--mh-surface); color: var(--mh-text); font: inherit; text-align: start; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
button.ep-option:not(:disabled):active { transform: scale(.99); }
.ep-shell button.ep-option[disabled] { opacity: 1; cursor: default; }
.ep-shell button.ep-option[disabled]:not(.is-correct):not(.is-wrong) { opacity: .7; }
.ep-option__mark { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: #fff; }
.ep-option__mark svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ep-option__mark.is-ok { background: var(--ep-ok); }
.ep-option__mark.is-bad { background: var(--ep-bad); }
/* Answer feedback: correct = green pulse, wrong = short shake, then the right option is revealed. */
.ep-option.is-pulse { animation: ep-pulse .75s ease-out; }
.ep-option.is-pulse .ep-option__mark, .ep-option.is-reveal .ep-option__mark, .ep-option.is-shake .ep-option__mark { animation: ep-pop .35s cubic-bezier(.2, .9, .3, 1.2) both; }
.ep-option.is-shake { animation: ep-shake .42s ease; }
.ep-option.is-reveal { animation: ep-reveal .45s ease .38s backwards; }
.ep-option.is-reveal .ep-option__mark { animation-delay: .5s; }
.ep-explain.is-new .ep-explain__bar { animation: ep-rise .3s ease-out .1s backwards; }
@keyframes ep-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ep-ok) 55%, transparent); } 70% { box-shadow: 0 0 0 .6rem color-mix(in srgb, var(--ep-ok) 0%, transparent); } 100% { box-shadow: none; } }
@keyframes ep-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes ep-reveal { from { border-color: var(--mh-card-border); background-color: var(--mh-surface); } }
@keyframes ep-pop { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
.ep-option:hover:not(.is-locked) { border-color: color-mix(in srgb, var(--mh-accent) 60%, transparent); }
.ep-option.is-locked { cursor: default; }
.ep-option:has(input:focus-visible) { outline: 2px solid var(--mh-accent); outline-offset: 2px; }
.ep-option input { margin: 0; accent-color: var(--mh-accent); flex: none; }
.ep-option__key { font-weight: 800; color: var(--ep-ink); flex: none; min-width: 1ch; }
.ep-option__text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; line-height: 1.4; }
.ep-option.is-chosen { border-color: var(--mh-accent); background: color-mix(in srgb, var(--mh-accent) 8%, var(--mh-surface)); }
.ep-option.is-correct, .ep-options li.is-correct { border-color: var(--ep-ok); background: color-mix(in srgb, var(--ep-ok) 12%, transparent); }
.ep-option.is-wrong, .ep-options li.is-wrong { border-color: var(--ep-bad); background: color-mix(in srgb, var(--ep-bad) 10%, transparent); }
.ep-options li { padding: .6rem .9rem; border: 1px solid var(--mh-card-border); border-radius: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.ep-feedback__verdict.is-correct { color: var(--ep-ok); font-weight: 700; }
.ep-feedback__verdict.is-wrong { color: var(--ep-bad); font-weight: 700; }
.ep-feedback__text { white-space: pre-line; }
.ep-save-note { font-size: .82rem; color: var(--ep-warn); }
.ep-keys { font-size: .8rem; }
@media (hover: none) and (pointer: coarse), (max-width: 760px) { .ep-keys { display: none; } }
.ep-icon-btn { display: inline-grid; place-items: center; width: var(--ep-tap); height: var(--ep-tap); border-radius: .8rem; border: 1px solid var(--mh-card-border); background: var(--mh-surface); color: var(--mh-muted-strong); cursor: pointer; flex: none; }
.ep-icon-btn svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ep-icon-btn:hover { border-color: var(--mh-accent); color: var(--ep-ink); }
.ep-bookmark[aria-pressed="true"] { color: var(--ep-ink); border-color: var(--mh-accent); }
.ep-bookmark[aria-pressed="true"] svg { fill: currentColor; }
.ep-flag[aria-pressed="true"] { color: var(--ep-warn); border-color: var(--ep-warn); }
.ep-flag[aria-pressed="true"] svg { fill: currentColor; }
.ep-navpanel { gap: .75rem; }
.ep-navpanel__head { display: grid; gap: .5rem; }
.ep-navpanel__title { font-size: 1rem; }
.ep-navpanel__foot { display: grid; gap: .35rem; font-size: .8rem; }
.ep-navigator { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: .4rem; max-height: 50vh; overflow-y: auto; padding: 2px; }
.ep-nav-btn { min-width: 2.6rem; min-height: 2.6rem; border-radius: .6rem; border: 1px solid var(--mh-card-border); background: var(--mh-surface); color: var(--mh-text); cursor: pointer; font: inherit; font-size: .85rem; font-variant-numeric: tabular-nums; position: relative; }
.ep-nav-btn.is-answered { border-color: var(--mh-accent); background: color-mix(in srgb, var(--mh-accent) 14%, var(--mh-surface)); }
.ep-nav-btn.is-flagged::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-end: 3px; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ep-warn); }
.ep-nav-btn.is-current { background: var(--mh-accent); border-color: var(--mh-accent); color: #04131f; font-weight: 800; }

/* Results */
.ep-result { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: clamp(1rem, 3vw, 1.75rem); border-radius: var(--ep-radius); border: 1px solid var(--mh-card-border); background: var(--mh-surface-soft); }
.ep-result__body { display: grid; gap: .35rem; flex: 1 1 16rem; min-width: 0; }
.ep-result__body h2 { font-size: 1.35rem; font-weight: 800; }
.ep-result--strong { border-color: color-mix(in srgb, var(--ep-ok) 50%, transparent); }
.ep-result--borderline { border-color: color-mix(in srgb, var(--ep-warn) 50%, transparent); }
.ep-result--low { border-color: color-mix(in srgb, var(--ep-bad) 45%, transparent); }
.ep-review { border-inline-start-width: 4px; }
.ep-review.is-wrong { border-inline-start-color: var(--ep-bad); }
.ep-review.is-right { border-inline-start-color: var(--ep-ok); }
.ep-review.is-unanswered { border-inline-start-color: var(--mh-muted); }
.ep-review[hidden] { display: none; }
.ep-review__meta { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.ep-review details { margin-block-start: .25rem; }
.ep-review summary, .ep-explain summary { cursor: pointer; font-weight: 600; color: var(--ep-ink); min-height: var(--ep-tap); display: flex; align-items: center; }
.ep-explain p { line-height: 1.65; white-space: pre-line; }
.ep-empty { justify-items: start; }

/* History */
.ep-history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.ep-hrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .85rem 1.1rem; }
.ep-hrow:hover { border-color: var(--mh-accent); }
.ep-hrow__main { display: grid; gap: .15rem; min-width: 0; }
.ep-hrow__main strong { overflow-wrap: break-word; }
.ep-hrow__score { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; font-weight: 800; border: 3px solid var(--mh-card-border); }
.ep-hrow__score--strong { border-color: var(--ep-ok); color: var(--ep-ok); }
.ep-hrow__score--borderline { border-color: var(--ep-warn); color: var(--ep-warn); }
.ep-hrow__score--low { border-color: var(--ep-bad); color: var(--ep-bad); }
.ep-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* Dialog and toast */
.ep-dialog-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, #000 60%, transparent); backdrop-filter: blur(3px); }
.ep-dialog { width: min(100%, 26rem); display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--ep-radius); border: 1px solid var(--mh-card-border); background: linear-gradient(var(--mh-surface-strong, var(--mh-surface)), var(--mh-surface-strong, var(--mh-surface))), var(--mh-bg); color: var(--mh-text); box-shadow: 0 24px 64px rgba(0, 0, 0, .45); animation: ep-rise .18s ease-out; }
.ep-dialog h2 { font-size: 1.2rem; font-weight: 800; }
.ep-toast { position: fixed; inset-inline: 1rem; inset-block-end: 1rem; z-index: 1001; margin-inline: auto; width: fit-content; max-width: calc(100% - 2rem); padding: .7rem 1rem; border-radius: .9rem; background: linear-gradient(var(--mh-surface-strong, var(--mh-surface)), var(--mh-surface-strong, var(--mh-surface))), var(--mh-bg); color: var(--mh-text); border: 1px solid var(--mh-card-border); box-shadow: var(--mh-shadow, 0 12px 30px rgba(0, 0, 0, .3)); font-size: .9rem; opacity: 0; transform: translateY(.5rem); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.ep-toast.is-visible { opacity: 1; transform: none; }
@keyframes ep-rise { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

.ep-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Full-screen exam mode (runner): one question per screen and nothing on the page scrolls.
   A 100dvh column: compact header (exit, Question X of N, score/answered, progress, timer, flag,
   bookmark, navigator, full screen), the question body (fills the rest) and the Previous/Next bar.
   Long questions shrink to fit (exam-prep.js fit(), floor 14px on phones / 15px from 768px);
   only the stem (last resort) and the explanation panel ever scroll, inside themselves. */
/* The site shell pads the body for its fixed header; focus mode has no header. */
body:has(> .ep-focus) { padding-block-start: 0 !important; }
.ep-focus { position: relative; z-index: 1; height: 100vh; height: 100dvh; background: var(--mh-bg); overflow-x: clip; }
.ep-shell--focus { height: 100%; display: flex; flex-direction: column; padding: 0 clamp(.75rem, 2.5vw, 2rem); gap: 0; }
.ep-shell--focus > .ep-runner { flex: 1 1 auto; min-height: 0; }
.ep-shell--focus .ep-runner { margin-inline: auto; max-width: 84rem; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0; }
.ep-fhead { position: relative; z-index: 5; display: flex; align-items: center; gap: .6rem; padding-block: .4rem; /* full-bleed bar, content aligned with the question column */ margin-inline: calc(50% - 50vw); padding-inline: max(clamp(.75rem, 2.5vw, 2rem), calc(50vw - 50%)); background: color-mix(in srgb, var(--mh-bg) 88%, transparent); border-block-end: 1px solid var(--mh-card-border); }
.ep-fhead__mid { flex: 1 1 auto; min-width: 0; display: grid; gap: .3rem; }
.ep-fhead__line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .92rem; }
.ep-fhead__line .ep-runner__count { white-space: nowrap; }
.ep-fhead__tools { display: flex; align-items: center; gap: .35rem; flex: none; }
.ep-fhead .ep-progress--runner { margin: 0; }
.ep-fhead .ep-timer { padding: .25rem .7rem; }
.ep-chip--sm { min-height: 1.75rem; padding: .1rem .6rem; font-size: .8rem; }
.ep-exit:hover { border-color: var(--ep-bad); color: var(--ep-bad); }
.ep-fs[aria-pressed="true"], .ep-nav-toggle[aria-expanded="true"] { color: var(--ep-ink); border-color: var(--mh-accent); }
.ep-nav-toggle { display: none; }
.ep-navpanel__titlerow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ep-navpanel__close { display: none; }

/* Body / explanation / footer grid. Timed mocks add the navigator column (desktop). */
.ep-shell--focus .ep-runner__layout { min-height: 0; align-items: stretch; padding-block-start: .75rem; grid-template-columns: minmax(0, 1fr) clamp(14rem, 18vw, 17rem); }
.ep-shell--focus .ep-navpanel__foot .ep-keys { display: none; }
.ep-shell--focus .ep-runner__main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "body" "foot"; gap: 0; }
.ep-shell--focus .ep-runner > .ep-runner__main { padding-block-start: .75rem; }
.ep-shell--focus .ep-runner__main--practice { grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "body" "explain" "foot"; }
.ep-shell--focus .ep-runner__side { min-height: 0; padding-block-end: .75rem; }
.ep-shell--focus .ep-runner__side .ep-navpanel { max-height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.ep-shell--focus .ep-runner__side .ep-navigator { max-height: none; min-height: 0; overflow-y: auto; align-content: start; }
.ep-runner__actions { grid-area: foot; }

/* Question body: a size container, so type and the two-pane switch follow the space actually left. */
.ep-qbody { grid-area: body; position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; container: ep-qbody / size; }
.ep-question { --ep-scale: 1; --ep-min: 15px; display: flex; flex-direction: column; gap: .5rem; padding-block: .1rem .6rem; }
.ep-qcontent { display: grid; gap: calc(.9rem * var(--ep-scale)); width: 100%; max-width: 54rem; margin-inline: auto; }
.ep-question__meta { margin: 0 0 .3rem; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--mh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.ep-stemwrap { min-width: 0; min-height: 0; }
.ep-stemwrap:focus-visible { outline: 2px solid var(--mh-accent); outline-offset: 2px; border-radius: .5rem; }
.ep-question .ep-stem { font-size: max(var(--ep-min), calc(var(--ep-stem-fs) * var(--ep-scale))); line-height: 1.45; font-weight: var(--ep-stem-w, 650); }
.ep-question .ep-options-group { gap: calc(.5rem * var(--ep-scale)); align-content: start; min-width: 0; }
.ep-question .ep-option { font-size: max(var(--ep-min), calc(var(--ep-opt-fs) * var(--ep-scale))); padding-block: calc(.55rem * var(--ep-scale)); min-height: var(--ep-tap); }
/* Starting sizes by length bucket (exam_prep/layout.py): fluid with the body width (cqi). */
.ep-q--len-s { --ep-stem-fs: clamp(1.15rem, .8rem + 1.4cqi, 1.6rem); --ep-opt-fs: clamp(1rem, .85rem + .6cqi, 1.2rem); --ep-stem-w: 700; }
.ep-q--len-m { --ep-stem-fs: clamp(1.05rem, .8rem + 1cqi, 1.35rem); --ep-opt-fs: clamp(.98rem, .85rem + .45cqi, 1.1rem); --ep-stem-w: 650; }
.ep-q--len-l { --ep-stem-fs: clamp(1rem, .82rem + .6cqi, 1.18rem); --ep-opt-fs: clamp(.96rem, .84rem + .35cqi, 1.04rem); --ep-stem-w: 600; }
.ep-q--len-xl { --ep-stem-fs: clamp(.96rem, .84rem + .4cqi, 1.08rem); --ep-opt-fs: clamp(.94rem, .84rem + .28cqi, 1rem); --ep-stem-w: 500; }
/* Fallback when even the floor size does not fit: the stem scrolls on its own, options stay put. */
.ep-stem__more { display: none; }
.ep-question.is-stem-scroll { height: 100%; min-height: 0; }
.ep-question.is-stem-scroll .ep-qcontent { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(min(5.5rem, 30cqh), 1fr) auto; }
.ep-question.is-stem-scroll .ep-stemwrap { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--mh-accent) transparent; padding-inline-end: .35rem; }
.ep-question.is-stem-scroll .ep-stem__more, .ep-qbody.is-scroll > .ep-qbody__more { display: flex; justify-content: center; position: sticky; inset-block-end: 0; margin: 0; padding-block: 1.6rem .2rem; background: linear-gradient(to bottom, transparent, var(--mh-bg) 65%); color: var(--ep-ink); font-size: .8rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.ep-question.is-stem-scroll .ep-stem__more::after, .ep-qbody__more::after { content: "\2193"; margin-inline-start: .35rem; }
.ep-question.is-stem-scroll .ep-stemwrap.has-more .ep-stem__more, .ep-qbody.is-scroll.has-more > .ep-qbody__more { opacity: 1; }
.ep-qbody.is-scroll { scrollbar-width: thin; scrollbar-color: var(--mh-accent) transparent; }
.ep-qbody.is-scroll > .ep-qbody__more, .ep-question.is-stem-scroll .ep-stem__more { margin-block-start: -2.4rem; }
/* Wide body + long stem (case vignette): stem left, options right (mirrored in RTL). */
@container ep-qbody (min-width: 44rem) {
  .ep-q--split .ep-qcontent { max-width: none; grid-template-columns: minmax(0, var(--ep-split, 50%)) minmax(0, 1fr); align-items: start; column-gap: clamp(1.25rem, 3cqi, 2.5rem); }
  .ep-q--split.is-stem-scroll .ep-qcontent { grid-template-rows: minmax(0, 1fr); align-items: stretch; height: 100%; }
  .ep-q--split.is-stem-scroll .ep-options-group { align-self: start; max-height: 100%; }
  .ep-q--split.is-body-scroll .ep-options-group { overflow-y: auto; }
}
@media (max-width: 640px) {
  .ep-question .ep-option { padding-inline: .7rem; gap: .55rem; }
  .ep-question .ep-option__text { line-height: 1.35; }
  .ep-explain__bar .ep-feedback__verdict { font-size: .9rem; line-height: 1.3; }
  .ep-question.is-stem-scroll .ep-question__meta, .ep-question.is-body-scroll .ep-question__meta { display: none; }
}
@container ep-qbody (max-height: 22rem) {
  .ep-question__meta { display: none; }
}

/* Practice explanation. Narrow: a verdict bar above Previous/Next whose body opens as a bottom
   sheet over the lower part of the question (or inline when there is room). Wide: a side panel. */
.ep-explain { grid-area: explain; position: relative; min-width: 0; }
.ep-explain.is-empty { display: none; }
.ep-explain__bar { display: flex; align-items: center; gap: .6rem; padding-block: .35rem; border-block-start: 1px solid var(--mh-card-border); }
.ep-explain__bar .ep-feedback__verdict { flex: 1 1 auto; min-width: 0; margin: 0; }
.ep-explain__hint { margin: 0; }
.ep-explain__toggle { flex: none; min-height: var(--ep-tap); padding: .3rem .95rem; border-radius: 999px; border: 1px solid var(--mh-card-border); background: var(--mh-surface); color: var(--ep-ink); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.ep-explain__toggle:hover { border-color: var(--mh-accent); }
.ep-explain__body { display: none; line-height: 1.55; font-size: .94rem; }
.ep-explain__body:focus-visible { outline: 2px solid var(--mh-accent); outline-offset: -2px; }
.ep-explain__label { margin: 0; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mh-muted); }
.ep-explain__body .ep-list { margin: 0; }
.ep-explain__body > p, .ep-explain__body > .ep-muted { margin: 0; }
.ep-explain.is-inline .ep-explain__body { display: grid; gap: .4rem; padding-block-end: .5rem; }
.ep-explain.is-open .ep-explain__body { display: grid; align-content: start; gap: .5rem; position: absolute; z-index: 6; inset-inline: 0; inset-block-end: 100%; max-height: min(70vh, calc(100vh - 10rem)); max-height: min(70dvh, calc(100dvh - 10rem)); overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.1rem; border: 1px solid var(--mh-card-border); border-block-end: 0; border-radius: 1.1rem 1.1rem 0 0; background: linear-gradient(var(--mh-surface-strong, var(--mh-surface)), var(--mh-surface-strong, var(--mh-surface))), var(--mh-bg); box-shadow: 0 -16px 40px rgba(0, 0, 0, .3); animation: ep-rise .2s ease-out; }
@media (min-width: 1000px) {
  .ep-shell--focus .ep-runner__main--practice { grid-template-columns: minmax(0, 1fr) clamp(18rem, 26vw, 24rem); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "body explain" "foot foot"; column-gap: 1.25rem; }
  .ep-explain, .ep-explain.is-empty { display: flex; flex-direction: column; min-height: 0; margin-block-end: .75rem; border: 1px solid var(--mh-card-border); border-radius: 1rem; background: var(--mh-surface-soft); overflow: hidden; }
  .ep-explain__bar { border: 0; padding: .8rem 1rem .3rem; }
  .ep-explain__toggle { display: none; }
  .ep-explain__body, .ep-explain.is-open .ep-explain__body, .ep-explain.is-inline .ep-explain__body { display: grid; align-content: start; gap: .5rem; position: static; flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: .2rem 1rem 1rem; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; }
}
.mh-btn-primary.ep-btn-danger { background: var(--ep-bad); border-color: var(--ep-bad); color: #fff; }

@media (max-width: 960px) {
  .ep-twocol--wide { grid-template-columns: minmax(0, 1fr); }
  .ep-runner__layout, .ep-shell--focus .ep-runner__layout { grid-template-columns: minmax(0, 1fr); }
  .ep-nav-jump { display: inline-flex; }
  /* Narrow screens: the navigator becomes a bottom sheet opened from the header grid button. */
  .ep-nav-toggle { display: inline-grid; }
  .ep-shell--focus .ep-runner__side { display: none; position: fixed; inset: 0; z-index: 20; padding: 1rem; align-items: end; background: color-mix(in srgb, #000 55%, transparent); }
  .ep-shell--focus .ep-runner__side.is-open { display: grid; }
  .ep-shell--focus .ep-runner__side .ep-navpanel { max-height: 80vh; max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--mh-bg); width: 100%; max-width: 36rem; margin-inline: auto; animation: ep-rise .2s ease-out; }
  .ep-navpanel__close { display: inline-grid; }
  .ep-navigator { max-height: none; }
}
@media (max-width: 640px) {
  .ep-head__stack { display: grid; gap: .5rem; }
.ep-head--row { grid-template-columns: minmax(0, 1fr); }
  .ep-chips { justify-content: flex-start; }
  .ep-head--row > .ep-buy { justify-items: start; }
  .ep-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ep-kv > div { padding: .4rem .45rem; }
  .ep-hrow { grid-template-columns: auto minmax(0, 1fr); }
  .ep-hrow > time { grid-column: 2; }
  .ep-runner__actions { gap: .4rem; }
  .ep-runner__actions .mh-btn-primary, .ep-runner__actions .mh-btn-secondary { flex: 1 1 0; min-width: 0; padding: .6rem .7rem; font-size: .84rem; text-align: center; }
  .ep-stat__n { font-size: 1.3rem; }
  /* Timed bar: timer + navigator jump share one row; the "Time left" label stays for screen readers. */
  .ep-timer { padding: .25rem .7rem; }
  .ep-timer > .ep-muted { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ep-nav-jump { font-size: .8rem; padding: .25rem .7rem; min-height: 2.25rem; }
  .ep-fhead { gap: .4rem; padding-block: .5rem; }
  .ep-fhead__tools { gap: .25rem; }
  .ep-fhead__answered { display: none; }
  .ep-fhead__line { font-size: .88rem; row-gap: .2rem; }
  .ep-fs { display: none; }
  .ep-fhead .ep-timer__value { font-size: 1rem; min-width: 3.2em; }
  .ep-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-stat--ring { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .ep-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .ep-rcard { padding: .85rem; }
  .ep-rcard > .ep-muted { display: none; }
  .ep-rcard__top { flex-direction: column; gap: .2rem; }
  .ep-rcard h3 { font-size: .92rem; }
  .ep-rcard .ep-actions { flex-direction: column; align-items: stretch; gap: .2rem; }
  .ep-rcard .ep-link { justify-content: center; }
  .ep-stat--ring .ep-ring { width: 2.75rem; height: 2.75rem; }
}
/* Phones: the timed header (exit, timer, flag, bookmark, navigator) cannot also fit "Question X of N"
   and the progress bar at 360px with 44px targets, so the progress line drops to a second row. */
@media (max-width: 480px) {
  .ep-runner--timed .ep-fhead { flex-wrap: wrap; row-gap: .45rem; }
  .ep-runner--timed .ep-fhead__mid { order: 3; flex: 1 1 100%; }
  .ep-runner--timed .ep-fhead__tools { margin-inline-start: auto; }
  .ep-runner--timed .ep-fhead__answered { display: inline; margin-inline-start: auto; }
}
/* Touch / narrow screens: every control is at least 44px (WCAG 2.5.5 / platform guidance). */
@media (max-width: 640px), (pointer: coarse) {
  .ep-shell .ep-tab, .ep-shell .ep-tabs--sm .ep-tab, .ep-shell .ep-tab--xs, .ep-nav-jump,
  .ep-chipbox > span, .ep-rcard__mods .ep-link, .ep-shell .ep-link { min-height: var(--ep-tap); }
  .ep-nav-btn { min-width: var(--ep-tap); min-height: var(--ep-tap); }
  .ep-navigator { grid-template-columns: repeat(auto-fill, minmax(var(--ep-tap), 1fr)); }
}
/* Phone landscape: little height, so keep the sticky bars slim and the options compact. */
@media (max-height: 500px) and (orientation: landscape) {
  .ep-fhead { padding-block: .35rem; }
  .ep-runner__actions { padding-block: .35rem; padding-block-end: max(.35rem, env(safe-area-inset-bottom)); }
  .ep-shell--focus .ep-runner__side .ep-navpanel { max-height: 92vh; max-height: 92dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-progress > span, .ep-ring__value, .ep-option, .ep-toast { transition: none; }
  .ep-dialog, .ep-shell--focus .ep-runner__side .ep-navpanel { animation: none; }
  /* No shake/pulse/pop: the colours and icons alone carry the feedback. */
  .ep-option.is-pulse, .ep-option.is-shake, .ep-option.is-reveal, .ep-explain__bar, .ep-explain__body, .ep-option__mark { animation: none !important; }
  button.ep-option:not(:disabled):active { transform: none; }
}
#mh-exam-checkout .mh-web-upgrade-kicker { padding-inline-end: 3rem; }


/* ===================================================================== v2: exam-first hub + exam page */
.ep-section { display: grid; gap: .9rem; align-content: start; min-width: 0; }
.ep-section-head { margin-block-end: 0; }
.ep-section-foot { margin: 0; }
.ep-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 1.5rem; }
.ep-page-head__text { display: grid; gap: .4rem; max-width: 46rem; min-width: 0; }
.ep-page-head h1, .ep-exam-hero h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.12; font-weight: 800; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; }
.ep-chev { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; }
[dir="rtl"] .ep-chev { transform: scaleX(-1); }
.ep-ltr { direction: ltr; unicode-bidi: isolate; }
.ep-small { font-size: .82rem; }

/* State badges */
.ep-badge--state-owned, .ep-badge--state-free { color: var(--ep-ok); border-color: color-mix(in srgb, var(--ep-ok) 60%, transparent); background: color-mix(in srgb, var(--ep-ok) 10%, transparent); }
.ep-badge--state-partial { color: var(--ep-ink); border-color: color-mix(in srgb, var(--ep-ink) 50%, transparent); }
.ep-badge--state-locked { color: var(--mh-muted-strong); border-color: var(--mh-card-border); background: color-mix(in srgb, var(--mh-text) 5%, transparent); }

/* Exam cards (hub) */
.ep-exams { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.ep-exam-card { position: relative; display: grid; gap: .7rem; align-content: start; padding: 1.25rem; border-radius: 1.4rem; border: 1px solid var(--mh-card-border); background: var(--mh-surface-soft); box-shadow: var(--mh-soft-shadow, none); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; min-width: 0; }
.ep-exam-card::before { content: ""; position: absolute; inset-inline: 1.25rem; inset-block-start: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--mh-accent), var(--mh-accent-secondary)); opacity: .85; }
.ep-exam-card--locked::before { background: var(--mh-card-border); }
.ep-exam-card:hover, .ep-exam-card:focus-within { border-color: color-mix(in srgb, var(--mh-accent) 55%, transparent); transform: translateY(-2px); box-shadow: var(--mh-shadow, none); }
.ep-exam-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.ep-exam-card__title { font-size: 1.3rem; font-weight: 800; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.ep-stretch { color: inherit; }
.ep-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ep-stretch:focus-visible { outline: none; }
.ep-stretch:focus-visible::after { outline: 2px solid var(--mh-accent); outline-offset: 2px; }
.ep-exam-card__desc { color: var(--mh-muted-strong); font-size: .92rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ep-exam-card__meta { font-size: .85rem; }
.ep-exam-card__foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-block-start: .75rem; border-block-start: 1px solid var(--mh-card-border); margin-block-start: auto; }
.ep-exam-card__cta { display: inline-flex; align-items: center; gap: .3rem; color: var(--ep-ink); font-weight: 700; font-size: .92rem; }
.ep-exam-card:hover .ep-exam-card__cta .ep-chev { transform: translateX(3px); }
[dir="rtl"] .ep-exam-card:hover .ep-exam-card__cta .ep-chev { transform: scaleX(-1) translateX(3px); }
.ep-price { font-weight: 800; font-size: 1.05rem; color: var(--mh-text); }
.ep-price--owned { font-size: .92rem; color: var(--ep-ok); }

/* Mini stat row */
.ep-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.ep-mini > div { display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: .9rem; background: color-mix(in srgb, var(--mh-text) 4%, transparent); min-width: 0; }
.ep-mini dt { font-size: .74rem; color: var(--mh-muted); overflow-wrap: anywhere; }
.ep-mini dd { margin: 0; font-weight: 800; font-size: 1.1rem; }
.ep-mini--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Continue / resume banner */
.ep-banner { box-shadow: var(--mh-soft-shadow, none); }
.ep-banner__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: .9rem; color: var(--ep-ink); background: color-mix(in srgb, var(--mh-accent) 16%, transparent); }
.ep-banner__icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ep-banner__body { flex: 1 1 16rem; }
.ep-banner .ep-actions { flex-wrap: wrap; }

/* Exam page hero */
.ep-exam-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.6rem; border: 1px solid var(--mh-card-border); background:
  radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mh-accent) 14%, transparent), transparent 55%), var(--mh-surface-soft); box-shadow: var(--mh-soft-shadow, none); }
[dir="rtl"] .ep-exam-hero { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--mh-accent) 14%, transparent), transparent 55%), var(--mh-surface-soft); }
.ep-exam-hero__text { display: grid; gap: .65rem; align-content: start; min-width: 0; }
.ep-exam-hero__stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; min-width: 0; }
.ep-exam-hero__ring { display: grid; justify-items: center; gap: .3rem; }
.ep-exam-hero__note { grid-column: 1 / -1; }
.ep-band { font-size: .95rem; font-weight: 800; }
.ep-band--strong { color: var(--ep-ok); }
.ep-band--borderline { color: var(--ep-warn); }
.ep-band--low { color: var(--ep-bad); }

/* Exam page layout */
.ep-exam-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.ep-exam-main { display: grid; gap: 2rem; min-width: 0; }
.ep-exam-aside { position: sticky; inset-block-start: calc(var(--mh-header-h, 5rem) + 1rem); min-width: 0; }

/* Module rows */
.ep-mod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ep-mod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.15rem; border-radius: 1.1rem; border: 1px solid var(--mh-card-border); background: var(--mh-surface-soft); }
.ep-mod:hover { border-color: color-mix(in srgb, var(--mh-accent) 45%, transparent); }
.ep-mod__body { display: grid; gap: .3rem; min-width: 0; }
.ep-mod__title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.ep-mod__title a:hover { color: var(--ep-ink); }
.ep-mod__stats { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; }
.ep-mod__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.ep-mod__actions .ep-error { flex-basis: 100%; }

/* Mock exams */
.ep-mock-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.ep-mock { gap: .45rem; }
.ep-mock h3 { font-size: 1rem; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.ep-mock__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .8rem; color: var(--ep-warn); background: color-mix(in srgb, var(--ep-warn) 14%, transparent); }
.ep-mock__icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Review queue (exam page) */
.ep-exam-main .ep-review-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.ep-rcard__mods { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ep-rcard__mods li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.ep-rcard__mods .ep-link { min-height: 2.25rem; gap: .4rem; font-size: .88rem; }
.ep-tab--xs { min-height: 2rem; padding: .15rem .65rem; font-size: .78rem; }

/* Purchase panel */
.ep-purchase { gap: .7rem; border-color: color-mix(in srgb, var(--mh-accent) 40%, transparent); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mh-accent) 12%, transparent), transparent 60%), var(--mh-surface-soft); }
.ep-purchase--owned { border-color: color-mix(in srgb, var(--ep-ok) 45%, transparent); background: var(--mh-surface-soft); }
.ep-purchase--owned .ep-eyebrow { color: var(--ep-ok); }
.ep-purchase__price { font-size: 2rem; font-weight: 800; line-height: 1; }
.ep-purchase__note { font-size: .8125rem; margin-top: .375rem; }
.ep-purchase .ep-buy, .ep-purchase .ep-buy__btn { width: 100%; max-width: none; }
.ep-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; color: var(--mh-muted-strong); }
.ep-ticks li { position: relative; padding-inline-start: 1.5rem; }
.ep-ticks li::before { content: ""; position: absolute; inset-inline-start: .15rem; inset-block-start: .3rem; width: .7rem; height: .4rem; border-inline-start: 2px solid var(--ep-ok); border-block-end: 2px solid var(--ep-ok); transform: rotate(-45deg); }
[dir="rtl"] .ep-ticks li::before { transform: rotate(45deg) scaleX(-1); }

@media (max-width: 1100px) {
  .ep-exam-layout { grid-template-columns: minmax(0, 1fr); }
  .ep-exam-aside { position: static; }
  /* Locked: the purchase panel comes right after the hero; owned/free panels stay at the end. */
  .ep-exam-aside--buy { order: -1; }
}
@media (max-width: 820px) {
  .ep-exam-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ep-mod { grid-template-columns: auto minmax(0, 1fr); padding: .9rem; gap: .75rem; }
  .ep-mod__actions { grid-column: 1 / -1; justify-content: stretch; }
  .ep-mod__actions > .mh-btn-primary, .ep-mod__actions > .mh-btn-secondary { flex: 1 1 0; text-align: center; }
  .ep-exam-hero__stats { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .ep-exam-hero__ring { grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
  .ep-exam-hero__ring .ep-ring--lg { width: 5rem; height: 5rem; }
  .ep-exam-card { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-exam-card, .ep-exam-card .ep-chev { transition: none; }
  .ep-exam-card:hover, .ep-exam-card:focus-within { transform: none; }
  .ep-exam-card:hover .ep-exam-card__cta .ep-chev { transform: none; }
  [dir="rtl"] .ep-exam-card:hover .ep-exam-card__cta .ep-chev { transform: scaleX(-1); }
}
/* Exam checkout modal, light theme: an opaque panel (the shared translucent one turns grey over the dimmed page). */
[data-theme="light"] #mh-exam-checkout .mh-web-upgrade-panel { background: radial-gradient(circle at 86% 10%, rgba(14, 165, 233, .12), transparent 40%), var(--mh-bg-alt, #f8fbff); box-shadow: 0 28px 80px rgba(15, 40, 70, .25); }
[data-theme="light"] #mh-exam-checkout .mh-web-upgrade-actions { background: var(--mh-bg-alt, #f8fbff); }
[data-theme="light"] #mh-exam-checkout .mh-web-upgrade-kicker { color: #0b6f93; }
[data-theme="light"] #mh-exam-checkout .mh-web-upgrade-price { background: #fff; }

/* Touch / narrow screens (last, so it wins over the section rules above): every link and control
   in the exam module is at least 44px tall. Inline-flex keeps the text box unchanged. */
@media (max-width: 640px), (pointer: coarse) {
  .ep-crumbs { gap: 0 .5rem; align-items: center; }
  .ep-crumbs a, .ep-list a, .ep-list-plain a { display: inline-flex; align-items: center; min-height: var(--ep-tap); }
  .ep-list-plain li { padding-block: 0; align-items: center; }
  .ep-shell .ep-chip--link, .ep-shell .ep-rcard__mods .ep-link, .ep-shell .ep-tab--xs { min-height: var(--ep-tap); }
  .ep-mod__title a { display: inline-flex; align-items: center; min-height: var(--ep-tap); }
}

/* ── Former inline styles: exam_prep/templates/exam_prep/module.html, results.html, public_module.html (strict CSP) ── */
/* Width comes from data-css-vars="--bar: N%" (applied by csp-style.js). */
.ep-progress__bar { width: var(--bar) !important; }