/*
 * MPJE Review reskin layer.
 * Maps every legacy token set (medexp, tw, mlc3, ml, mmd, wiz) onto the MPJE
 * design system so existing markup inherits one palette, one type system and
 * one shape language. Component-level fixes follow the token map.
 * Loaded only when body has .mpj-ui (see includes/ui/class-mpj-ui.php).
 */

/* =========================================================================
 * 1. Token map
 * ========================================================================= */
body.mpj-ui,
body.mpj-ui .medexp-tw,
body.mpj-ui .medexp-scope,
body.mpj-ui :where(.medexp-tw) {
  /* brand */
  --brand-navy: var(--mpj-navy);
  --brand-teal: var(--mpj-blue);
  --brand-blue: var(--mpj-blue);
  --medexp-brand-navy: var(--mpj-navy);
  --medexp-brand-teal: var(--mpj-blue);
  --medexp-brand-blue: var(--mpj-blue);
  --medexp-brand-navy-rgb: 22, 44, 85;
  --medexp-brand-teal-rgb: 26, 79, 156;
  --medexp-brand-blue-rgb: 26, 79, 156;
  --medexp-brand-blue-dark: var(--mpj-blue-hover);
  --medexp-brand-teal-dark: var(--mpj-blue-hover);
  --medexp-brand-teal-ink: var(--mpj-blue);
  --medexp-brand-teal-ink-rgb: 26, 79, 156;

  /* medexp core */
  --medexp-page-bg: var(--mpj-paper);
  --medexp-bg: var(--mpj-surface);
  --medexp-surface: var(--mpj-surface);
  --medexp-card: var(--mpj-surface);
  --medexp-text: var(--mpj-text);
  --medexp-muted: var(--mpj-muted);
  --medexp-muted-2: var(--mpj-faint);
  --medexp-border: var(--mpj-line);
  --medexp-primary: var(--mpj-blue);
  --medexp-primary-contrast: #fff;
  --medexp-accent: var(--mpj-blue);
  --medexp-secondary: var(--mpj-navy);
  --medexp-info: var(--mpj-blue);
  --medexp-success: var(--mpj-success);
  --medexp-warning: var(--mpj-warn);
  --medexp-danger: var(--mpj-danger);
  --medexp-font: var(--mpj-sans);
  --medexp-font-sans: var(--mpj-sans);
  --medexp-radius: var(--mpj-r);
  --medexp-radius-sm: var(--mpj-r-sm);
  --medexp-radius-md: var(--mpj-r);
  --medexp-radius-lg: var(--mpj-r-lg);
  --medexp-radius-2xl: var(--mpj-r-lg);
  --medexp-shadow-xs: var(--mpj-shadow-sm);
  --medexp-shadow-sm: var(--mpj-shadow-sm);
  --medexp-shadow-md: var(--mpj-shadow);
  --medexp-shadow-lg: var(--mpj-shadow);
  --medexp-primary-grad: var(--mpj-blue);
  --medexp-btn-radius: var(--mpj-r);
  --medexp-table-header-bg: var(--mpj-sunken);
  --medexp-table-row-hover: var(--mpj-blue-soft);

  /* tw */
  --tw-gray-50: var(--mpj-paper);
  --tw-gray-100: var(--mpj-sunken);
  --tw-gray-200: var(--mpj-line);
  --tw-gray-300: var(--mpj-line-strong);
  --tw-gray-400: var(--mpj-faint);
  --tw-gray-500: var(--mpj-muted);
  --tw-gray-600: var(--mpj-muted);
  --tw-gray-700: var(--mpj-text);
  --tw-gray-900: var(--mpj-navy);
  --tw-slate-600: var(--mpj-muted);
  --tw-slate-900: var(--mpj-navy);
  --tw-indigo-500: var(--mpj-blue);
  --tw-indigo-600: var(--mpj-blue);
  --tw-sky-600: var(--mpj-blue);
  --tw-emerald-500: var(--mpj-blue);
  --tw-emerald-600: var(--mpj-blue);
  --tw-emerald-700: var(--mpj-blue-hover);
  --tw-amber-500: var(--mpj-warn);
  --tw-amber-600: var(--mpj-warn);
  --tw-rose-500: var(--mpj-danger);
  --tw-shadow: var(--mpj-shadow-sm);

  /* mlc3 */
  --mlc3-brand-teal: var(--mpj-blue);
  --mlc3-brand-teal-dark: var(--mpj-blue-hover);
  --mlc3-brand-teal-soft: var(--mpj-blue-soft);
  --mlc3-brand-blue: var(--mpj-blue);
  --mlc3-brand-blue-dark: var(--mpj-navy);
  --mlc3-brand-blue-soft: var(--mpj-blue-soft);
  --mlc3-bg: var(--mpj-paper);
  --mlc3-surface: var(--mpj-surface);
  --mlc3-surface-2: var(--mpj-sunken);
  --mlc3-text: var(--mpj-navy);
  --mlc3-text-soft: var(--mpj-text);
  --mlc3-muted: var(--mpj-muted);
  --mlc3-faint: var(--mpj-faint);
  --mlc3-border: var(--mpj-line);
  --mlc3-border-soft: var(--mpj-line);
  --mlc3-success: var(--mpj-success);
  --mlc3-warning: var(--mpj-warn);
  --mlc3-danger: var(--mpj-danger);
  --mlc3-fs-2xs: var(--mpj-fs-xs);
  --mlc3-fs-xs: var(--mpj-fs-xs);
  --mlc3-fs-sm: var(--mpj-fs-sm);
  --mlc3-fs-md: var(--mpj-fs-base);
  --mlc3-fs-lg: var(--mpj-fs-md);
  --mlc3-fs-xl: var(--mpj-fs-lg);
  --mlc3-fs-2xl: var(--mpj-fs-xl);
  --mlc3-fs-3xl: var(--mpj-fs-xl);
  --mlc3-fs-4xl: var(--mpj-fs-2xl);
  --mlc3-fw-bold: 600;
  --mlc3-fw-display: 600;
  --mlc3-r-sm: var(--mpj-r-sm);
  --mlc3-r-md: var(--mpj-r);
  --mlc3-r-lg: var(--mpj-r-lg);
  --mlc3-r-xl: var(--mpj-r-lg);
  --mlc3-r-2xl: var(--mpj-r-lg);
  --mlc3-shadow-1: none;
  --mlc3-shadow-2: var(--mpj-shadow-sm);
  --mlc3-shadow-3: var(--mpj-shadow-sm);
  --mlc3-shadow-4: var(--mpj-shadow);
  --mlc3-shadow-brand: none;

  /* Mochi drawer */
  --mmd-primary: var(--mpj-navy);

  /* Lesson diagrams */
  --medexp-mermaid-font-family: var(--mpj-sans);
  --medexp-mermaid-text-color: var(--mpj-navy);
  --medexp-mermaid-node-fill: var(--mpj-blue-soft);
  --medexp-mermaid-node-border-color: color-mix(in srgb, var(--mpj-blue) 38%, #fff);
  --medexp-mermaid-border-color: var(--mpj-line);
  --medexp-mermaid-arrow-color: color-mix(in srgb, var(--mpj-navy) 60%, var(--mpj-blue));
}

/* =========================================================================
 * 2. One typeface everywhere (legacy CSS hard-codes Rethink Sans / Inter).
 * Zero-specificity reset so any MPJE class below can still pick the serif.
 * ========================================================================= */
:where(body.mpj-ui),
:where(body.mpj-ui) :where(button, input, select, textarea),
:where(body.mpj-ui .medexp-tw, body.mpj-ui .medexp-scope, body.mpj-ui .medexp-page) :where(*:not(code, pre, kbd, samp, i, .dashicons, [class*="icon"], [class*="Icon"], svg, svg *)) {
  font-family: var(--mpj-sans) !important;
}
html body.mpj-ui .mpj-h1,
html body.mpj-ui .mpj-num,
html body.mpj-ui .mpj-stat__value,
html body.mpj-ui .mpj-next__title,
html body.mpj-ui .mpj-examdate__days,
html body.mpj-ui .tw-h1 {
  font-family: var(--mpj-serif) !important;
}
html body.mpj-ui .mpj-stat__value small { font-family: var(--mpj-sans) !important; }
body.mpj-ui { background: var(--mpj-paper) !important; color: var(--mpj-text); }

/* =========================================================================
 * 3. App shell: sidebar, topbar, main
 * ========================================================================= */
body.mpj-ui .medexp-dashboardPage .tw-shell { background: var(--mpj-paper) !important; }
html body.mpj-ui .medexp-dashboardPage .tw-sidebar {
  background: var(--mpj-surface) !important;
  border-right: 1px solid var(--mpj-line) !important;
  box-shadow: none !important;
  width: var(--mpj-sidebar-w) !important;
  padding: var(--mpj-s4) var(--mpj-s3) !important;
}
html body.mpj-ui .medexp-dashboardPage .tw-sidebar .tw-brandLogo { height: 40px !important; width: auto !important; }
html body.mpj-ui .medexp-dashboardPage .tw-sidebar a.tw-navlink,
html body.mpj-ui .medexp-dashboardPage .tw-navlink {
  height: 38px; padding: 0 var(--mpj-s3) !important; margin: 1px 0 !important;
  border-radius: var(--mpj-r) !important;
  color: var(--mpj-muted) !important; background: transparent !important;
  font: 500 var(--mpj-fs-sm)/1 var(--mpj-sans) !important;
  box-shadow: none !important; transform: none !important;
  gap: var(--mpj-s3) !important;
}
html body.mpj-ui .medexp-dashboardPage .tw-sidebar a.tw-navlink:hover { background: var(--mpj-sunken) !important; color: var(--mpj-navy) !important; text-decoration: none !important; }
html body.mpj-ui .medexp-dashboardPage .tw-sidebar a.tw-navlink.is-active,
html body.mpj-ui .medexp-dashboardPage .tw-navlink.is-active {
  background: var(--mpj-blue-soft) !important; color: var(--mpj-navy) !important; font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--mpj-blue) !important;
}
html body.mpj-ui .medexp-dashboardPage .tw-navlink .tw-navicon,
html body.mpj-ui .medexp-dashboardPage .tw-navlink svg { width: 18px !important; height: 18px !important; color: currentColor !important; opacity: .85; }
html body.mpj-ui .medexp-dashboardPage .tw-navlink.is-active svg { color: var(--mpj-blue) !important; opacity: 1; }
html body.mpj-ui .medexp-dashboardPage .tw-sidebar .tw-divider { background: var(--mpj-line) !important; margin: var(--mpj-s3) var(--mpj-s2) !important; }
html body.mpj-ui .medexp-dashboardPage .tw-sidebar .tw-kicker,
html body.mpj-ui .medexp-dashboardPage .tw-sidebar [class*="divider"] + * .tw-kicker {
  text-transform: none !important; letter-spacing: 0 !important; font: 500 var(--mpj-fs-xs) var(--mpj-sans) !important; color: var(--mpj-faint) !important;
}

html body.mpj-ui .medexp-dashboardPage .tw-topbar {
  background: rgba(255,255,255,.92) !important; backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--mpj-line) !important; box-shadow: none !important;
  min-height: var(--mpj-topbar-h);
}
html body.mpj-ui .medexp-dashboardPage .tw-topbar .tw-title { font: 600 var(--mpj-fs-base)/1.3 var(--mpj-sans) !important; color: var(--mpj-navy) !important; letter-spacing: 0 !important; }
html body.mpj-ui .medexp-dashboardPage .tw-topbar .tw-muted { font-size: var(--mpj-fs-sm) !important; color: var(--mpj-muted) !important; }
html body.mpj-ui .medexp-dashboardPage .tw-topbar .tw-input,
html body.mpj-ui .medexp-dashboardPage .tw-topbar input[type="search"],
html body.mpj-ui .medexp-dashboardPage .tw-topbar select {
  height: 36px !important; border-radius: var(--mpj-r) !important; border: 1px solid var(--mpj-line) !important;
  background: var(--mpj-sunken) !important; box-shadow: none !important; font-size: var(--mpj-fs-sm) !important;
}
body.mpj-ui .tw-avatar { background: var(--mpj-navy) !important; color: #fff !important; font-weight: 600 !important; }
body.mpj-ui .tw-userMenu__btn { border-radius: var(--mpj-r) !important; box-shadow: none !important; border: 1px solid transparent !important; background: transparent !important; }
body.mpj-ui .tw-userMenu__btn:hover { background: var(--mpj-sunken) !important; }
body.mpj-ui .tw-userMenu__name { font: 500 var(--mpj-fs-sm) var(--mpj-sans) !important; color: var(--mpj-navy) !important; }
body.mpj-ui .tw-userMenu__drop { border-radius: var(--mpj-r-lg) !important; border: 1px solid var(--mpj-line) !important; box-shadow: var(--mpj-shadow) !important; }

body.mpj-ui .medexp-dashboardPage.medexp-tw .tw-main,
body.mpj-ui .tw-main { max-width: none !important; padding: 0 !important; }

/* Legacy card + button primitives used across every tab */
html body.mpj-ui .medexp-tw .tw-card {
  background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important;
  border-radius: var(--mpj-r-lg) !important; box-shadow: none !important;
}
html body.mpj-ui .medexp-tw .tw-card .tw-card { border-color: var(--mpj-line) !important; background: var(--mpj-surface) !important; }
html body.mpj-ui .medexp-tw .tw-btn { border-radius: var(--mpj-r) !important; font: 600 var(--mpj-fs-sm)/1 var(--mpj-sans) !important; box-shadow: none !important; transform: none !important; }
html body.mpj-ui .medexp-tw .tw-btn-primary { background: var(--mpj-blue) !important; border-color: var(--mpj-blue) !important; color: #fff !important; }
html body.mpj-ui .medexp-tw .tw-btn-primary:hover { background: var(--mpj-blue-hover) !important; }
html body.mpj-ui .medexp-tw .tw-btn-secondary { background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line-strong) !important; color: var(--mpj-navy) !important; }
body.mpj-ui .tw-pill { border-radius: var(--mpj-r-sm) !important; font-weight: 500 !important; }
body.mpj-ui .tw-h1, body.mpj-ui .tw-h2 { color: var(--mpj-navy) !important; letter-spacing: -0.005em !important; font-weight: 600 !important; }
body.mpj-ui .tw-h1 { font-family: var(--mpj-serif) !important; }
body.mpj-ui .tw-kicker, body.mpj-ui [class*="__kicker"], body.mpj-ui [class*="-kicker"], body.mpj-ui [class*="__eyebrow"] {
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important;
}

/* Non-dashboard tabs: give their content the same page frame as the dashboard */
body.mpj-ui #medexp-dash-content:not([data-tab="dashboard"]) {
  max-width: var(--mpj-content-max); margin: 0 auto; padding: var(--mpj-s6) var(--mpj-s6) var(--mpj-s7);
}
@media (max-width: 760px) {
  body.mpj-ui #medexp-dash-content:not([data-tab="dashboard"]) { padding: var(--mpj-s5) var(--mpj-s4) var(--mpj-s7); }
}

/* =========================================================================
 * 4. Mochi: small button only, never talks first
 * ========================================================================= */
body.mpj-ui .mlc3-mochi-floater:not(.is-expanded) [class*="bubble"],
body.mpj-ui .mlc3-mochi-floater:not(.is-expanded) [class*="greet"] { display: none !important; }
html body.mpj-ui .mlc3-mochi-floater,
html body.mpj-ui .medexp-mochi-drawer-trigger { scale: .72; transform-origin: bottom right; }
body.mpj-ui .medexp-mochi-drawer-trigger__dot { display: none !important; }

/* =========================================================================
 * 5. Dashboard (Mpj_Dashboard)
 * ========================================================================= */
.mpj-dash > * + * { margin-top: var(--mpj-s5); }
.mpj-dash .mpj-page-head { margin-bottom: 0; }

.mpj-examdate { display: grid; gap: 2px; padding: var(--mpj-s2) var(--mpj-s4); border: 1px solid var(--mpj-line); border-radius: var(--mpj-r); background: var(--mpj-surface); text-align: right; }
.mpj-examdate:hover { border-color: var(--mpj-blue-line); text-decoration: none !important; }
.mpj-examdate__label { font-size: var(--mpj-fs-xs); color: var(--mpj-muted); }
.mpj-examdate__days { font: 600 var(--mpj-fs-md)/1.2 var(--mpj-serif); color: var(--mpj-navy); }

.mpj-next { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--mpj-s6); padding: var(--mpj-s6); border-top: 3px solid var(--mpj-navy); border-radius: var(--mpj-r) var(--mpj-r) var(--mpj-r-lg) var(--mpj-r-lg); }
.mpj-next__label { margin: 0 0 var(--mpj-s1); font-size: var(--mpj-fs-sm); font-weight: 500; color: var(--mpj-blue); }
.mpj-next__title { margin: 0; font: 600 var(--mpj-fs-xl)/1.2 var(--mpj-serif); color: var(--mpj-navy); letter-spacing: -0.01em; max-width: 40ch; }
.mpj-next .mpj-meta { margin: var(--mpj-s2) 0 0; }
.mpj-next__actions { display: flex; flex-wrap: wrap; gap: var(--mpj-s2); margin-top: var(--mpj-s5); }
.mpj-next__progress { align-self: end; padding-left: var(--mpj-s6); border-left: 1px solid var(--mpj-line); }
.mpj-next__pct { display: flex; align-items: baseline; gap: 2px; margin-bottom: var(--mpj-s3); color: var(--mpj-muted); font-weight: 500; }
.mpj-next__pct .mpj-num { font-size: 56px; line-height: 1; }
.mpj-next__progress .mpj-bar { height: 8px; }
@media (max-width: 860px) {
  .mpj-next { grid-template-columns: 1fr; gap: var(--mpj-s5); padding: var(--mpj-s5); }
  .mpj-next__progress { padding-left: 0; border-left: 0; padding-top: var(--mpj-s4); border-top: 1px solid var(--mpj-line); }
  .mpj-next__pct .mpj-num { font-size: 40px; }
}

.mpj-stat__dash { color: var(--mpj-faint); }

.mpj-chapters__table td:first-child { color: var(--mpj-navy); font-weight: 500; }
.mpj-chapters__n { display: inline-block; width: 1.5em; color: var(--mpj-faint); font-variant-numeric: tabular-nums; font-weight: 400; }
.mpj-chapters__mcol { width: 34%; }
.mpj-mastery { display: flex; align-items: center; gap: var(--mpj-s3); }
.mpj-mastery .mpj-bar { flex: 1; min-width: 60px; }
.mpj-mastery__pct { width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--mpj-muted); }
.mpj-mastery--l0 .mpj-bar > span { background: var(--mpj-m1); }
.mpj-mastery--l1 .mpj-bar > span { background: var(--mpj-m1); }
.mpj-mastery--l2 .mpj-bar > span { background: var(--mpj-m2); }
.mpj-mastery--l3 .mpj-bar > span { background: var(--mpj-m3); }
.mpj-mastery--l4 .mpj-bar > span { background: var(--mpj-m4); }
.mpj-faint { color: var(--mpj-faint); }
@media (max-width: 600px) { .mpj-hide-sm { display: none; } .mpj-chapters__mcol { width: 40%; } }

.mpj-today__list { list-style: none; margin: 0; padding: 0; }
.mpj-today__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--mpj-s3); padding: var(--mpj-s4) var(--mpj-s5); border-bottom: 1px solid var(--mpj-line); }
.mpj-today__item:last-child { border-bottom: 0; }
.mpj-today__step { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--mpj-line-strong); font-size: var(--mpj-fs-sm); font-weight: 600; color: var(--mpj-navy); }
.mpj-today__body { display: grid; gap: 2px; }

/* Active nav children (legacy forces white on every descendant) */
html body.mpj-ui .medexp-dashboardPage .tw-sidebar a.tw-navlink.is-active *:not(svg):not(path) { color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-dashboardPage .tw-sidebar a.tw-navlink.is-active svg,
html body.mpj-ui .medexp-dashboardPage .tw-sidebar a.tw-navlink.is-active .tw-navicon { color: var(--mpj-blue) !important; }

/* =========================================================================
 * 6. Practice (quiz list, qbank.js medexp-ql-*) + legacy tier tokens
 * ========================================================================= */
html body.mpj-ui {
  --ml-tier-not-started: var(--mpj-faint);  --ml-tier-not-started-bg: var(--mpj-sunken); --ml-tier-not-started-border: var(--mpj-line);
  --ml-tier-beginner: var(--mpj-m2);        --ml-tier-beginner-bg: var(--mpj-blue-soft); --ml-tier-beginner-border: var(--mpj-blue-line);
  --ml-tier-developing: var(--mpj-m3);      --ml-tier-developing-bg: var(--mpj-blue-soft); --ml-tier-developing-border: var(--mpj-blue-line);
  --ml-tier-proficient: var(--mpj-blue);    --ml-tier-proficient-bg: var(--mpj-blue-soft); --ml-tier-proficient-border: var(--mpj-blue-line);
  --ml-tier-mastered: var(--mpj-navy);      --ml-tier-mastered-bg: #e4e9f2;               --ml-tier-mastered-border: var(--mpj-m1);
}
/* The practice host is one surface; no card-in-card */
html body.mpj-ui .tw-practicePanel,
html body.mpj-ui .medexp-tw .tw-dashSubtabs { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html body.mpj-ui .medexp-tw .tw-dashSubtabs__bar,
html body.mpj-ui .medexp-tw [class*="dashTabs"] { border-bottom: 1px solid var(--mpj-line) !important; background: transparent !important; box-shadow: none !important; gap: var(--mpj-s1) !important; padding: 0 !important; border-radius: 0 !important; }
html body.mpj-ui .medexp-tw .tw-dashTabBtn {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: var(--mpj-s3) var(--mpj-s3) !important; color: var(--mpj-muted) !important; font: 500 var(--mpj-fs-sm)/1 var(--mpj-sans) !important; position: relative;
}
html body.mpj-ui .medexp-tw .tw-dashTabBtn:hover { color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-tw .tw-dashTabBtn.is-active { color: var(--mpj-navy) !important; font-weight: 600 !important; }
html body.mpj-ui .medexp-tw .tw-dashTabBtn.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--mpj-blue); }

html body.mpj-ui .medexp-ql-header__title { font: 600 var(--mpj-fs-xl)/1.2 var(--mpj-serif) !important; color: var(--mpj-navy) !important; letter-spacing: -0.01em !important; }
html body.mpj-ui .medexp-ql-statPill {
  background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r) !important; box-shadow: none !important;
}
html body.mpj-ui .medexp-ql-statPill svg { display: none !important; }
html body.mpj-ui .medexp-ql-statPill__v { font: 600 var(--mpj-fs-base) var(--mpj-sans) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-ql-statPill__l { color: var(--mpj-muted) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; }

html body.mpj-ui [class*="medexp-ql-hero"]:not([class*="__"]) {
  background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; box-shadow: none !important;
}
html body.mpj-ui .medexp-ql-hero__title { text-transform: none !important; letter-spacing: 0 !important; font: 500 var(--mpj-fs-sm) var(--mpj-sans) !important; color: var(--mpj-muted) !important; }
html body.mpj-ui [class*="medexp-ql-hero__pct"], html body.mpj-ui [class*="medexp-ql-hero__value"] { font-family: var(--mpj-serif) !important; color: var(--mpj-navy) !important; font-weight: 600 !important; }
html body.mpj-ui .medexp-ql-hero__distSeg { height: 8px !important; }
html body.mpj-ui [class*="medexp-ql-hero__next"], html body.mpj-ui [class*="medexp-ql-upNext"] {
  background: var(--mpj-sunken) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r) !important; box-shadow: none !important;
}

html body.mpj-ui .medexp-ql-chip {
  height: 30px !important; padding: 0 10px !important; border-radius: var(--mpj-r-sm) !important; border: 1px solid var(--mpj-line) !important;
  background: var(--mpj-surface) !important; color: var(--mpj-muted) !important; font: 500 var(--mpj-fs-xs) var(--mpj-sans) !important; box-shadow: none !important;
}
html body.mpj-ui .medexp-ql-chip.is-active { background: var(--mpj-navy) !important; color: #fff !important; border-color: var(--mpj-navy) !important; }

html body.mpj-ui .medexp-ql-card {
  background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-left: 1px solid var(--mpj-line) !important;
  border-radius: var(--mpj-r-lg) !important; box-shadow: none !important; transform: none !important;
}
html body.mpj-ui .medexp-ql-card::before, html body.mpj-ui .medexp-ql-card::after { display: none !important; }
html body.mpj-ui .medexp-ql-card:hover { border-color: var(--mpj-blue-line) !important; }
html body.mpj-ui .medexp-ql-card__num { background: transparent !important; color: var(--mpj-faint) !important; font-weight: 500 !important; border: 0 !important; padding: 0 !important; }
html body.mpj-ui .medexp-ql-card__title { font: 600 var(--mpj-fs-md)/1.3 var(--mpj-sans) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-ql-badge, html body.mpj-ui .medexp-ql-startHere {
  text-transform: none !important; letter-spacing: 0 !important; border-radius: var(--mpj-r-sm) !important; font: 500 var(--mpj-fs-xs) var(--mpj-sans) !important; box-shadow: none !important;
}
html body.mpj-ui .medexp-ql-miniStat { background: var(--mpj-sunken) !important; border: 0 !important; border-radius: var(--mpj-r) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-ql-miniStat__v { font: 600 var(--mpj-fs-base) var(--mpj-sans) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-ql-miniStat__l { text-transform: none !important; letter-spacing: 0 !important; font: 400 var(--mpj-fs-xs) var(--mpj-sans) !important; color: var(--mpj-muted) !important; }
html body.mpj-ui .medexp-ql-card__barTrack { background: var(--mpj-m0) !important; height: 6px !important; border-radius: 999px !important; }
html body.mpj-ui .medexp-ql-card__barFill { background: var(--mpj-blue) !important; }
html body.mpj-ui .medexp-ql-startBtn {
  height: 36px !important; padding: 0 14px !important; border-radius: var(--mpj-r) !important; box-shadow: none !important; transform: none !important;
  background: var(--mpj-blue) !important; border: 1px solid var(--mpj-blue) !important; color: #fff !important; font: 600 var(--mpj-fs-sm)/1 var(--mpj-sans) !important;
}
html body.mpj-ui .medexp-ql-startBtn:hover { background: var(--mpj-blue-hover) !important; }
html body.mpj-ui .medexp-ql-card:not(.has-progress) .medexp-ql-startBtn[data-level="0"],
html body.mpj-ui .medexp-ql-startBtn.is-start { background: var(--mpj-surface) !important; color: var(--mpj-navy) !important; border-color: var(--mpj-line-strong) !important; }
html body.mpj-ui .medexp-ql-card [class*="ring"] circle:last-child { stroke: var(--mpj-blue) !important; }
html body.mpj-ui .medexp-ql-section__title, html body.mpj-ui .medexp-ql-topic__title { color: var(--mpj-text) !important; font-weight: 500 !important; }
/* Faded “not started” cards: keep full contrast */
html body.mpj-ui .medexp-ql-card { opacity: 1 !important; filter: none !important; }

/* =========================================================================
 * 7. Study plan wizard: one title, no pep talk, quieter XP
 * ========================================================================= */
html body.mpj-ui .medexp-wizHero__motiv,
html body.mpj-ui .medexp-wizOrb,
html body.mpj-ui .medexp-wizTip,
html body.mpj-ui .medexp-wizXP,
html body.mpj-ui .medexp-wizPane > .tw-h3:first-child { display: none !important; }
html body.mpj-ui .medexp-wiz { background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-wizHero { background: transparent !important; border-bottom: 1px solid var(--mpj-line) !important; box-shadow: none !important; padding: var(--mpj-s5) var(--mpj-s6) !important; }
html body.mpj-ui .medexp-wizHero__step { text-transform: none !important; letter-spacing: 0 !important; color: var(--mpj-muted) !important; font: 500 var(--mpj-fs-sm) var(--mpj-sans) !important; }
html body.mpj-ui .medexp-wizHero__title { font: 600 var(--mpj-fs-lg)/1.25 var(--mpj-serif) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-wizStepper [class*="dot"], html body.mpj-ui .medexp-wizStepper [class*="Dot"] { background: var(--mpj-surface) !important; border-color: var(--mpj-line-strong) !important; color: var(--mpj-muted) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-wizStepper .is-active [class*="ot"], html body.mpj-ui .medexp-wizStepper .is-done [class*="ot"] { background: var(--mpj-navy) !important; border-color: var(--mpj-navy) !important; color: #fff !important; }
html body.mpj-ui .medexp-wizStepper [class*="track"], html body.mpj-ui .medexp-wizStepper [class*="Track"] { background: var(--mpj-line) !important; }
html body.mpj-ui .medexp-wizStepper [class*="fill"], html body.mpj-ui .medexp-wizStepper [class*="Fill"] { background: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-wizQuick .tw-btn { background: var(--mpj-surface) !important; color: var(--mpj-navy) !important; border: 1px solid var(--mpj-line-strong) !important; }
html body.mpj-ui .medexp-chip { border-radius: var(--mpj-r-sm) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-chip.is-on { background: var(--mpj-navy) !important; color: #fff !important; border-color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-wizLabel { font: 600 var(--mpj-fs-sm) var(--mpj-sans) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-wizFoot { border-top: 1px solid var(--mpj-line) !important; background: var(--mpj-sunken) !important; }

/* =========================================================================
 * 8. Flashcards: one surface, readable card, no alarm colors
 * ========================================================================= */
html body.mpj-ui [class*="medexp-fc"][class*="hub"],
html body.mpj-ui [class*="medexp-fc2-shell"],
html body.mpj-ui .medexp-fc-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html body.mpj-ui .medexp-fc-card,
html body.mpj-ui [class*="medexp-fc"][class*="__card"]:not([class*="inner"]) { background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; box-shadow: var(--mpj-shadow-sm) !important; }
html body.mpj-ui .medexp-fc-face__badge { text-transform: none !important; letter-spacing: 0 !important; background: var(--mpj-sunken) !important; color: var(--mpj-muted) !important; border: 0 !important; border-radius: var(--mpj-r-sm) !important; font: 500 var(--mpj-fs-xs) var(--mpj-sans) !important; }
html body.mpj-ui .medexp-fc-face__content, html body.mpj-ui .medexp-fc2-faceContent { font: 500 var(--mpj-fs-md)/1.55 var(--mpj-sans) !important; color: var(--mpj-text) !important; }
html body.mpj-ui .medexp-fc-face__content strong, html body.mpj-ui .medexp-fc2-faceContent strong { font-weight: 600 !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-fc-face__meta .tw-pill, html body.mpj-ui .medexp-fc-face__meta > * { background: var(--mpj-blue-soft) !important; color: var(--mpj-blue) !important; border: 0 !important; border-radius: var(--mpj-r-sm) !important; font: 500 var(--mpj-fs-xs) var(--mpj-sans) !important; }

/* Legacy uses -webkit-text-fill-color (white / transparent gradient text); force real colors */
html body.mpj-ui .medexp-dashboardPage .tw-sidebar a.tw-navlink *,
html body.mpj-ui .medexp-tw h1, html body.mpj-ui .medexp-tw h2, html body.mpj-ui .medexp-tw h3,
html body.mpj-ui .medexp-tw [class*="title"], html body.mpj-ui .medexp-tw [class*="Title"] {
  -webkit-text-fill-color: currentColor !important; background-clip: border-box !important; -webkit-background-clip: border-box !important;
  background-image: none !important;
}
/* Level badges: one neutral style; the dot carries the level */
html body.mpj-ui .medexp-ql-badge { background: var(--mpj-surface) !important; color: var(--mpj-navy) !important; border: 1px solid var(--mpj-line-strong) !important; }
html body.mpj-ui .medexp-ql-hero__recLabel { text-transform: none !important; letter-spacing: 0 !important; font: 500 var(--mpj-fs-sm) var(--mpj-sans) !important; color: var(--mpj-muted) !important; }
html body.mpj-ui .medexp-ql-hero__recLabel svg { display: none !important; }
html body.mpj-ui [class*="medexp-ql-hero"] .tw-btn, html body.mpj-ui [class*="medexp-ql-hero"] button, html body.mpj-ui [class*="medexp-ql-hero"] a[class*="btn"] {
  background: var(--mpj-blue) !important; border-radius: var(--mpj-r) !important; box-shadow: none !important; color: #fff !important;
}

/* =========================================================================
 * 9. Tab hubs: one surface. Outer wrapper cards around tabbed hubs go flat.
 * ========================================================================= */
html body.mpj-ui #medexp-dash-content .mpj-tab-head { margin-bottom: var(--mpj-s5); }
html body.mpj-ui #medexp-dash-content .tw-card:has(> .tw-dashSubtabs),
html body.mpj-ui #medexp-dash-content .tw-fcHubShell {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
}
html body.mpj-ui #medexp-dash-content .tw-dashSubtabs__panels { padding-top: var(--mpj-s2) !important; }
html body.mpj-ui .medexp-dashboardPage [data-topbar-head] { visibility: hidden; }

/* Flashcards: study header + card */
html body.mpj-ui .medexp-fc-study__top {
  background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; box-shadow: none !important;
}
html body.mpj-ui .medexp-fc-study__title { font: 600 var(--mpj-fs-md) var(--mpj-sans) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-fc-stat { background: var(--mpj-sunken) !important; border: 0 !important; border-radius: var(--mpj-r) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-fc-stat__val { font: 600 var(--mpj-fs-lg)/1.1 var(--mpj-serif) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-fc-stat.is-overdue .medexp-fc-stat__val { color: var(--mpj-danger) !important; }
html body.mpj-ui .medexp-fc-stat__label { text-transform: none !important; letter-spacing: 0 !important; font: 400 var(--mpj-fs-xs) var(--mpj-sans) !important; color: var(--mpj-muted) !important; }
html body.mpj-ui .medexp-fc-meta__label { color: var(--mpj-muted) !important; font-weight: 400 !important; }
html body.mpj-ui .medexp-fc-meta__val { color: var(--mpj-navy) !important; font-weight: 600 !important; }
html body.mpj-ui .medexp-fc-meta__val.is-low { color: var(--mpj-warn) !important; }
html body.mpj-ui .medexp-fc-meta__val.is-none { color: var(--mpj-faint) !important; font-weight: 400 !important; }
html body.mpj-ui .medexp-fc-card { background: var(--mpj-surface) !important; box-shadow: var(--mpj-shadow-sm) !important; }
html body.mpj-ui .medexp-fc-card .medexp-fc-face { background: var(--mpj-surface) !important; }
html body.mpj-ui .medexp-fc-hint { color: var(--mpj-muted) !important; font-weight: 500 !important; }
html body.mpj-ui .medexp-flashcards .tw-btn,
html body.mpj-ui .medexp-flashcards button[class*="reveal"],
html body.mpj-ui .medexp-flashcards [class*="fc"] button:not(.tw-dashTabBtn) { border-radius: var(--mpj-r) !important; box-shadow: none !important; }

/* =========================================================================
 * 10. My courses (materials list)
 * ========================================================================= */
.mpj-materials__search { width: min(320px, 100%); }
.mpj-materials__search .mpj-input { height: 36px; font-size: var(--mpj-fs-sm); }
.mpj-materials__list { list-style: none; margin: 0; padding: 0; }
.mpj-materials__item { border-bottom: 1px solid var(--mpj-line); }
.mpj-materials__item:last-child { border-bottom: 0; }
html body.mpj-ui .mpj-materials__link { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--mpj-s4); align-items: center; padding: var(--mpj-s3) var(--mpj-s5); color: var(--mpj-text); text-decoration: none !important; }
html body.mpj-ui .mpj-materials__link:hover { background: var(--mpj-blue-soft); }
.mpj-materials__title { font-weight: 500; color: var(--mpj-navy); }
.mpj-materials__open { font-size: var(--mpj-fs-sm); font-weight: 600; color: var(--mpj-blue); }
@media (max-width: 600px) { html body.mpj-ui .mpj-materials__link { grid-template-columns: minmax(0, 1fr) auto; } .mpj-materials__link .mpj-badge { display: none; } }
html body.mpj-ui .medexp-wizFootXP { display: none !important; }
html body.mpj-ui .medexp-wizStep .medexp-wizStepIcon { background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line-strong) !important; color: var(--mpj-muted) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-wizStep.is-active .medexp-wizStepIcon,
html body.mpj-ui .medexp-wizStep.is-done .medexp-wizStepIcon { background: var(--mpj-navy) !important; border-color: var(--mpj-navy) !important; color: #fff !important; }
html body.mpj-ui .medexp-wizStep.is-active .medexp-wizStepLabel { color: var(--mpj-navy) !important; font-weight: 600 !important; }
html body.mpj-ui .medexp-wizTrack { background: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-wizError { background: var(--mpj-danger-bg) !important; color: var(--mpj-danger) !important; border: 0 !important; border-radius: var(--mpj-r) !important; }

/* =========================================================================
 * 11. Global label discipline: no tracked-out ALL CAPS labels anywhere in the app
 * ========================================================================= */
html body.mpj-ui #medexp-dash-content *:not(abbr):not(kbd),
html body.mpj-ui .mpj-shell__content *:not(abbr):not(kbd) {
  text-transform: none !important;
}
html body.mpj-ui #medexp-dash-content [class*="label"], html body.mpj-ui #medexp-dash-content [class*="kicker"],
html body.mpj-ui #medexp-dash-content [class*="eyebrow"], html body.mpj-ui #medexp-dash-content th,
html body.mpj-ui .mpj-shell__content [class*="label"], html body.mpj-ui .mpj-shell__content [class*="kicker"], html body.mpj-ui .mpj-shell__content th {
  letter-spacing: 0 !important;
}

/* =========================================================================
 * 12. Lesson figures: never clip diagram labels
 * ========================================================================= */
html body.mpj-ui .medexp-figure--mermaid .medexp-figure__canvas svg foreignObject { overflow: visible !important; }
html body.mpj-ui .medexp-figure--mermaid .medexp-figure__canvas svg foreignObject > div { overflow: visible !important; }
html body.mpj-ui { --medexp-mermaid-font-weight: 500; }

/* =========================================================================
 * 13. Shared legacy primitives used by course page, lesson reader, qbank:
 *     medexp-btn, medexp-pill, medexp-card
 * ========================================================================= */
html body.mpj-ui .medexp-btn {
  border-radius: var(--mpj-r) !important; box-shadow: none !important; transform: none !important;
  font-family: var(--mpj-sans) !important; font-weight: 600 !important; letter-spacing: 0 !important; background-image: none !important;
}
html body.mpj-ui .medexp-btn--primary { background: var(--mpj-blue) !important; border-color: var(--mpj-blue) !important; color: #fff !important; }
html body.mpj-ui .medexp-btn--primary:hover { background: var(--mpj-blue-hover) !important; }
html body.mpj-ui .medexp-btn--primary * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body.mpj-ui .medexp-btn--secondary,
html body.mpj-ui .medexp-btn--ghost,
html body.mpj-ui .medexp-btn:not(.medexp-btn--primary) {
  background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; color: var(--mpj-navy) !important;
}
html body.mpj-ui .medexp-btn:not(.medexp-btn--primary):hover { border-color: var(--mpj-line-strong) !important; background: var(--mpj-sunken) !important; }
html body.mpj-ui .medexp-pill { border-radius: var(--mpj-r-sm) !important; background: var(--mpj-sunken) !important; color: var(--mpj-muted) !important; border: 1px solid transparent !important; font-weight: 500 !important; box-shadow: none !important; }
html body.mpj-ui .medexp-pill.is-active, html body.mpj-ui .medexp-pill[aria-current], html body.mpj-ui .medexp-pill[aria-selected="true"] { background: var(--mpj-blue-soft) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-card { background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-card .medexp-card { border-color: var(--mpj-line) !important; }

/* Lesson reader */
html body.mpj-ui.mpj-surface-lesson { background: var(--mpj-paper) !important; }
html body.mpj-ui .medexp-lessonTabsRow { border-bottom: 1px solid var(--mpj-line) !important; background: var(--mpj-surface) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-lessonToolbar { gap: var(--mpj-s1) !important; }
html body.mpj-ui .medexp-lessonToolbar .medexp-btn { height: 32px !important; border-color: transparent !important; background: transparent !important; color: var(--mpj-muted) !important; font-weight: 500 !important; }
html body.mpj-ui .medexp-lessonToolbar .medexp-btn:hover { background: var(--mpj-sunken) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-pageheader h1, html body.mpj-ui .medexp-pageheader [class*="title"] { font-family: var(--mpj-serif) !important; color: var(--mpj-navy) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
html body.mpj-ui .medexp-sectionPill { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: var(--mpj-navy) !important; font: 600 var(--mpj-fs-md) var(--mpj-sans) !important; }
html body.mpj-ui .medexp-sectionPill svg { display: none !important; }
html body.mpj-ui .medexp-section { padding: var(--mpj-s6) !important; }
html body.mpj-ui .medexp-section p, html body.mpj-ui .medexp-section li { font-size: 16.5px !important; line-height: 1.7 !important; color: var(--mpj-text) !important; }
/* Text, figures and tables share the card's full width; the Reading menu sets the column width. */
html body.mpj-ui .medexp-metaHeading { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; color: var(--mpj-navy) !important; font-weight: 600 !important; }
html body.mpj-ui .medexp-metaHeading svg { display: none !important; }
html body.mpj-ui .medexp-toc { background: var(--mpj-surface) !important; }
html body.mpj-ui .medexp-toc a { color: var(--mpj-muted) !important; font-weight: 400 !important; }
html body.mpj-ui .medexp-toc a:hover { color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-toc a.is-active, html body.mpj-ui .medexp-toc .is-active > a { color: var(--mpj-navy) !important; font-weight: 600 !important; background: var(--mpj-blue-soft) !important; }
html body.mpj-ui .medexp-section table { border-collapse: collapse !important; }
html body.mpj-ui .medexp-section th { background: var(--mpj-sunken) !important; color: var(--mpj-navy) !important; font-weight: 600 !important; }
html body.mpj-ui .medexp-section th, html body.mpj-ui .medexp-section td { border-color: var(--mpj-line) !important; }
html body.mpj-ui .medexp-metaHeading__ico, html body.mpj-ui .medexp-sectionPill__ico { display: none !important; }
html body.mpj-ui .medexp-metaHeading__txt, html body.mpj-ui .medexp-sectionPill__txt { letter-spacing: 0 !important; text-transform: capitalize !important; }
html body.mpj-ui .medexp-sectionPill__txt { text-transform: none !important; }
html body.mpj-ui .medexp-sectionPill__txt::first-letter { text-transform: uppercase; }

/* =========================================================================
 * 14. Exam session (qbank player): exam-style chrome in MPJE navy,
 *     the question stem is the most prominent text, single-answer = round.
 * ========================================================================= */
html body.mpj-ui.mpj-surface-exam { background: var(--mpj-paper) !important; }
html body.mpj-ui .medexp-pv-bar,
html body.mpj-ui .medexp-pv-topbar,
html body.mpj-ui .medexp-pv-footer,
html body.mpj-ui .medexp-uw-footer { background: var(--mpj-navy) !important; background-image: none !important; box-shadow: none !important; border: 0 !important; }
html body.mpj-ui .medexp-uw-toptools { background: #24406f !important; background-image: none !important; box-shadow: none !important; border: 0 !important; }
html body.mpj-ui .medexp-uw-footer *, html body.mpj-ui .medexp-uw-toptools * { font-family: var(--mpj-sans) !important; }
html body.mpj-ui .medexp-pv-topbar *, html body.mpj-ui .medexp-pv-footer *, html body.mpj-ui .medexp-pv-bar * { font-family: var(--mpj-sans) !important; }
html body.mpj-ui .medexp-pv-chip { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: var(--mpj-r-sm) !important; color: #fff !important; box-shadow: none !important; }
html body.mpj-ui .medexp-pv-title { font-weight: 600 !important; letter-spacing: 0 !important; }

html body.mpj-ui .medexp-qb-stem {
  background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; box-shadow: none !important;
  padding: var(--mpj-s5) var(--mpj-s6) !important;
}
html body.mpj-ui .medexp-qb-stem, html body.mpj-ui .medexp-qb-stem p, html body.mpj-ui .medexp-qb-stem li {
  font-size: 17px !important; line-height: 1.65 !important; color: var(--mpj-navy) !important; font-weight: 400 !important;
}
html body.mpj-ui .medexp-qb-choice {
  background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r) !important; box-shadow: none !important; transform: none !important;
  padding: var(--mpj-s3) var(--mpj-s4) !important; align-items: center !important;
}
html body.mpj-ui .medexp-qb-choice:hover { border-color: var(--mpj-blue-line) !important; background: #fbfcfe !important; }
html body.mpj-ui .medexp-qb-choice:has(input:checked) { border-color: var(--mpj-blue) !important; background: var(--mpj-blue-soft) !important; box-shadow: inset 0 0 0 1px var(--mpj-blue) !important; }
html body.mpj-ui .medexp-qb-choice__text { font-size: 16px !important; line-height: 1.5 !important; font-weight: 400 !important; color: var(--mpj-text) !important; }
html body.mpj-ui .medexp-qb-choice__input {
  -webkit-appearance: none !important; appearance: none !important; width: 18px !important; height: 18px !important; margin: 0 !important; flex: 0 0 18px;
  border: 1.5px solid var(--mpj-line-strong) !important; background: var(--mpj-surface) !important; border-radius: 4px !important; display: grid; place-items: center; cursor: pointer;
}
html body.mpj-ui .medexp-qb-choices.is-single .medexp-qb-choice__input { border-radius: 50% !important; }
html body.mpj-ui .medexp-qb-choice__input:checked { border-color: var(--mpj-blue) !important; background: var(--mpj-blue) !important; box-shadow: inset 0 0 0 3px #fff !important; }
html body.mpj-ui .medexp-qb-choice__input:focus-visible { box-shadow: var(--mpj-focus) !important; }
html body.mpj-ui [class*="medexp-qb-choice__letter"], html body.mpj-ui .medexp-qb-choice__key {
  background: transparent !important; border: 0 !important; color: var(--mpj-muted) !important; font-weight: 600 !important; box-shadow: none !important;
}
html body.mpj-ui [class*="medexp-qb-confidence"] { text-transform: none !important; letter-spacing: 0 !important; }
html body.mpj-ui .medexp-qb-choice__ic { font-weight: 700 !important; }
html body.mpj-ui .medexp-qb-choice.is-correct { border-color: var(--mpj-success) !important; background: var(--mpj-success-bg) !important; }
html body.mpj-ui .medexp-qb-choice.is-wrong, html body.mpj-ui .medexp-qb-choice.is-incorrect { border-color: var(--mpj-danger) !important; background: var(--mpj-danger-bg) !important; }

/* =========================================================================
 * 15. Phone fixes
 * ========================================================================= */
@media (max-width: 600px) {
  html body.mpj-ui .tw-courseDropdown__btn { max-width: 150px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html body.mpj-ui .tw-topbar__inner { overflow: hidden; }
  html body.mpj-ui .medexp-mochi-drawer-trigger,
  html body.mpj-ui .mlc3-mochi-floater { bottom: 96px !important; right: 12px !important; }
  html body.mpj-ui .mpj-next__title { font-size: var(--mpj-fs-lg); }
  html body.mpj-ui .mpj-h1 { font-size: 24px; }
}

/* =========================================================================
 * 16. Practice hub (blocks, readiness, CAT, sessions): calm surfaces.
 *     Decorative gradients and glows go; progress fills keep a solid color.
 * ========================================================================= */
html body.mpj-ui .tw-practicePanel :where(*:not(svg, svg *, img, canvas)) { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
html body.mpj-ui .tw-practicePanel [class*="Fill"]:not([class*="profile"]),
html body.mpj-ui .tw-practicePanel [class*="__fill"],
html body.mpj-ui .tw-practicePanel [class*="barFill"],
html body.mpj-ui .tw-practicePanel [class*="progress"] > span,
html body.mpj-ui .tw-practicePanel [class*="meter"] > span { background-color: var(--mpj-blue) !important; }

/* Containers: one panel style */
html body.mpj-ui .medexp-qb-hero,
html body.mpj-ui .medexp-qb-section,
html body.mpj-ui .medexp-qb-summaryCard,
html body.mpj-ui .medexp-qb-historyCard,
html body.mpj-ui .tw-practicePanel .medexp-card,
html body.mpj-ui .tw-practicePanel [class*="Card"]:not([class*="__"]):not(.medexp-qb-subcard) {
  background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important;
}
html body.mpj-ui .medexp-qb-subcard { background: var(--mpj-sunken) !important; border: 0 !important; border-radius: var(--mpj-r) !important; }
html body.mpj-ui .medexp-qb-hero { padding: var(--mpj-s5) var(--mpj-s6) !important; }
html body.mpj-ui .medexp-qb-hero__kicker { background: var(--mpj-blue-soft) !important; color: var(--mpj-blue) !important; border: 0 !important; border-radius: var(--mpj-r-sm) !important; font: 500 var(--mpj-fs-xs) var(--mpj-sans) !important; }
html body.mpj-ui .medexp-qb-hero__title { font: 600 var(--mpj-fs-lg)/1.25 var(--mpj-serif) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-qb-hero__sub, html body.mpj-ui .medexp-qb-help, html body.mpj-ui .medexp-qb-subcard__hint { color: var(--mpj-muted) !important; font-size: var(--mpj-fs-sm) !important; }
html body.mpj-ui .medexp-qb-hero__quickLabel { color: var(--mpj-muted) !important; font-weight: 500 !important; }
html body.mpj-ui .medexp-qb-section__title, html body.mpj-ui .medexp-qb-summaryCard__title, html body.mpj-ui .medexp-qb-historyCard__title,
html body.mpj-ui .medexp-qb-perfStrip__title, html body.mpj-ui .medexp-qb-subcard__title { font: 600 var(--mpj-fs-base) var(--mpj-sans) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-qb-summaryCard__head svg, html body.mpj-ui .medexp-qb-perfStrip__head svg, html body.mpj-ui .medexp-qb-historyCard__head svg { display: none !important; }

/* Segmented controls (sub-tabs, Tutor/Timed) */
html body.mpj-ui .medexp-qb-subtabs, html body.mpj-ui .medexp-seg { background: var(--mpj-sunken) !important; border: 0 !important; border-radius: var(--mpj-r) !important; padding: 3px !important; }
html body.mpj-ui .medexp-qb-subtab, html body.mpj-ui .medexp-seg__btn { background: transparent !important; border: 0 !important; border-radius: 6px !important; color: var(--mpj-muted) !important; font-weight: 500 !important; }
html body.mpj-ui .medexp-qb-subtab.is-active, html body.mpj-ui .medexp-seg__btn.is-active, html body.mpj-ui .medexp-seg__btn[aria-pressed="true"] {
  background: var(--mpj-surface) !important; color: var(--mpj-navy) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(15,33,66,.12) !important;
}
html body.mpj-ui .medexp-qb-subtab__meta, html body.mpj-ui .medexp-qb-summaryPill { background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-sm) !important; color: var(--mpj-muted) !important; font-weight: 500 !important; }
html body.mpj-ui .medexp-qb-summaryPill { background: var(--mpj-blue-soft) !important; border-color: transparent !important; color: var(--mpj-blue) !important; }

/* Choice pills and chips */
html body.mpj-ui .medexp-qb-pill, html body.mpj-ui .medexp-qb-chip, html body.mpj-ui .medexp-qb-presetBtn, html body.mpj-ui .medexp-qb-coursePill {
  border-radius: var(--mpj-r) !important; border: 1px solid var(--mpj-line) !important; background: var(--mpj-surface) !important; color: var(--mpj-navy) !important; font-weight: 500 !important;
}
html body.mpj-ui .medexp-qb-pill:hover, html body.mpj-ui .medexp-qb-chip:hover, html body.mpj-ui .medexp-qb-presetBtn:hover { border-color: var(--mpj-line-strong) !important; background: var(--mpj-sunken) !important; }
html body.mpj-ui .medexp-qb-pill.is-active, html body.mpj-ui .medexp-qb-pill.is-selected, html body.mpj-ui .medexp-qb-chip.is-active, html body.mpj-ui .medexp-qb-chip.is-selected,
html body.mpj-ui .medexp-qb-chip[aria-pressed="true"], html body.mpj-ui .medexp-qb-pill[aria-pressed="true"] {
  background: var(--mpj-navy) !important; border-color: var(--mpj-navy) !important; color: #fff !important;
}
html body.mpj-ui .medexp-qb-pill.is-active *, html body.mpj-ui .medexp-qb-chip.is-active *, html body.mpj-ui .medexp-qb-chip.is-selected * { color: #fff !important; }
html body.mpj-ui .medexp-qb-input { border-radius: var(--mpj-r) !important; border: 1px solid var(--mpj-line-strong) !important; background: var(--mpj-surface) !important; }
html body.mpj-ui .medexp-qb-btn { border-radius: var(--mpj-r) !important; }

/* Summary + performance */
html body.mpj-ui .medexp-qb-sumRow { border-color: var(--mpj-line) !important; }
html body.mpj-ui .medexp-qb-sumRow__k { color: var(--mpj-muted) !important; font-weight: 400 !important; }
html body.mpj-ui .medexp-qb-sumRow__v { color: var(--mpj-navy) !important; font-weight: 600 !important; }
html body.mpj-ui .medexp-qb-perfStat { background: var(--mpj-sunken) !important; border: 0 !important; border-radius: var(--mpj-r) !important; }
html body.mpj-ui .medexp-qb-perfStat svg { display: none !important; }
html body.mpj-ui .medexp-qb-perfStat * { color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-qb-perfStat [class*="label"], html body.mpj-ui .medexp-qb-perfStat [class*="__k"] { color: var(--mpj-muted) !important; font-weight: 400 !important; }
html body.mpj-ui .medexp-qb-sticky { top: calc(var(--mpj-topbar-h) + 16px) !important; }
html body.mpj-ui .tw-practicePanel [class]::before,
html body.mpj-ui .tw-practicePanel [class]::after { background-image: none !important; box-shadow: none !important; }
html body.mpj-ui .medexp-qb-summaryCard, html body.mpj-ui .medexp-qb-sticky { border-top: 1px solid var(--mpj-line) !important; }
html body.mpj-ui .medexp-qb-summaryCard::before { display: none !important; }
html body.mpj-ui .medexp-qb-perfStat { border-left: 0 !important; }
html body.mpj-ui .medexp-qb-perfStat [class*="__v"], html body.mpj-ui .medexp-qb-perfStat strong { font-family: var(--mpj-serif) !important; font-weight: 600 !important; }
html body.mpj-ui .medexp-qb-empty { border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; background: var(--mpj-surface) !important; }
html body.mpj-ui .medexp-qb-empty, html body.mpj-ui .medexp-qb-empty > div:not(:first-child) { font-weight: 400 !important; color: var(--mpj-muted) !important; }
html body.mpj-ui .medexp-qb-empty > div:first-child { color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-qb-body > div > div:first-child:not([class]) { font-weight: 600; color: var(--mpj-navy); }
html body.mpj-ui .tw-practicePanel .medexp-card { padding: var(--mpj-s5) !important; }
html body.mpj-ui .tw-practicePanel .medexp-qb-chip { height: 28px !important; display: inline-flex !important; align-items: center !important; font-size: var(--mpj-fs-xs) !important; }
.mpj-li-dot { flex: 0 0 6px; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--mpj-blue); }

/* =========================================================================
 * 17. Video lessons (mxpvl plugin) in the MPJE system
 * ========================================================================= */
html body.mpj-ui .mxpvl-wrap { max-width: var(--mpj-content-max) !important; margin: 0 auto !important; padding: var(--mpj-s6) var(--mpj-s6) var(--mpj-s7) !important; }
html body.mpj-ui .mxpvl-head { margin-bottom: var(--mpj-s5) !important; }
html body.mpj-ui .mxpvl-title { font: 600 var(--mpj-fs-xl)/1.2 var(--mpj-serif) !important; color: var(--mpj-navy) !important; letter-spacing: -0.01em !important; margin: 0 !important; }
html body.mpj-ui .mxpvl-sub { color: var(--mpj-muted) !important; font-size: var(--mpj-fs-base) !important; max-width: 60ch; margin-top: var(--mpj-s1) !important; }
html body.mpj-ui .mxpvl-grid { gap: var(--mpj-s5) !important; }
html body.mpj-ui .mxpvl-card { background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; box-shadow: none !important; transform: none !important; overflow: hidden; }
html body.mpj-ui .mxpvl-card:hover { border-color: var(--mpj-blue-line) !important; text-decoration: none !important; }
html body.mpj-ui .mxpvl-thumb { background: var(--mpj-navy) !important; background-image: linear-gradient(160deg, var(--mpj-navy) 0%, #24406f 100%) !important; }
html body.mpj-ui .mxpvl-play { background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.4) !important; box-shadow: none !important; color: #fff !important; }
html body.mpj-ui .mxpvl-count { background: rgba(0,0,0,.35) !important; color: #fff !important; border-radius: var(--mpj-r-sm) !important; font: 500 var(--mpj-fs-xs) var(--mpj-sans) !important; }
html body.mpj-ui .mxpvl-eyebrow { text-transform: none !important; letter-spacing: 0 !important; color: var(--mpj-blue) !important; font: 500 var(--mpj-fs-xs) var(--mpj-sans) !important; }
html body.mpj-ui .mxpvl-card-title { font: 600 var(--mpj-fs-md) var(--mpj-sans) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .mxpvl-card-desc { color: var(--mpj-muted) !important; font-weight: 400 !important; font-size: var(--mpj-fs-sm) !important; }
html body.mpj-ui .mxpvl-btn { background: var(--mpj-blue) !important; border-color: var(--mpj-blue) !important; color: #fff !important; border-radius: var(--mpj-r) !important; box-shadow: none !important; font: 600 var(--mpj-fs-sm) var(--mpj-sans) !important; }
@media (max-width: 760px) { html body.mpj-ui .mxpvl-wrap { padding: var(--mpj-s5) var(--mpj-s4) var(--mpj-s7) !important; } }

/* Notebook */
html body.mpj-ui .medexp-nb-controls { background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; padding: var(--mpj-s3) !important; gap: var(--mpj-s2) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-nb-tagsInput { border: 1px solid var(--mpj-line-strong) !important; border-radius: var(--mpj-r) !important; padding: 0 !important; background: var(--mpj-surface) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-nb-tagsInput input { border: 0 !important; box-shadow: none !important; }
html body.mpj-ui .medexp-nb-input, html body.mpj-ui .medexp-nb-select { height: 40px !important; border: 1px solid var(--mpj-line-strong) !important; border-radius: var(--mpj-r) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-nb-card { background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-nb-empty { text-align: left !important; padding: var(--mpj-s6) !important; }
html body.mpj-ui .medexp-nb-empty__title { font: 600 var(--mpj-fs-md) var(--mpj-sans) !important; color: var(--mpj-navy) !important; margin-bottom: 4px; }
html body.mpj-ui .medexp-nb-pager[hidden] { display: none !important; }

/* =========================================================================
 * 18. Answer feedback / review: one explanation panel, no duplicate lists
 * ========================================================================= */
html body.mpj-ui .medexp-qb-reviewWrap .medexp-qb-review--choice,
html body.mpj-ui .medexp-qb-actionsRow .medexp-qb-msg.is-ok { display: none !important; }
html body.mpj-ui .medexp-qb-feedback {
  background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; box-shadow: none !important;
  padding: var(--mpj-s5) var(--mpj-s6) !important;
}
html body.mpj-ui .medexp-qb-feedback, html body.mpj-ui .medexp-qb-feedback p, html body.mpj-ui .medexp-qb-feedback li { font-size: 15.5px !important; line-height: 1.65 !important; color: var(--mpj-text) !important; }
html body.mpj-ui .medexp-qb-feedback strong { color: var(--mpj-navy) !important; font-weight: 600 !important; }
html body.mpj-ui .medexp-qb-result { border-radius: var(--mpj-r-sm) !important; font: 600 var(--mpj-fs-sm) var(--mpj-sans) !important; box-shadow: none !important; border: 0 !important; }
html body.mpj-ui .medexp-qb-result.is-ok { background: var(--mpj-success-bg) !important; color: var(--mpj-success) !important; }
html body.mpj-ui .medexp-qb-result.is-bad { background: var(--mpj-danger-bg) !important; color: var(--mpj-danger) !important; }
html body.mpj-ui .medexp-qb-references { border-top: 1px solid var(--mpj-line) !important; margin-top: var(--mpj-s4) !important; padding-top: var(--mpj-s3) !important; }
html body.mpj-ui .medexp-qb-references, html body.mpj-ui .medexp-qb-references li { font-size: var(--mpj-fs-sm) !important; color: var(--mpj-muted) !important; line-height: 1.5 !important; }
html body.mpj-ui .medexp-qb-references__title { font-weight: 600 !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-qb-references a, html body.mpj-ui .medexp-qb-references li { word-break: break-word; }
html body.mpj-ui .medexp-qb-pill.is-ok { background: var(--mpj-success-bg) !important; color: var(--mpj-success) !important; border: 0 !important; }
html body.mpj-ui .medexp-qb-pill.is-bad { background: var(--mpj-danger-bg) !important; color: var(--mpj-danger) !important; border: 0 !important; }
html body.mpj-ui .medexp-qb-choice__ic { background: var(--mpj-success) !important; color: #fff !important; }
html body.mpj-ui .medexp-qb-choice.is-wrong .medexp-qb-choice__ic, html body.mpj-ui .medexp-qb-choice.is-bad .medexp-qb-choice__ic { background: var(--mpj-danger) !important; }
/* Practice blocks hero row should wrap, never scroll sideways */
html body.mpj-ui .medexp-qb-hero, html body.mpj-ui .medexp-qb-hero__row { overflow: visible !important; flex-wrap: wrap !important; }
/* Graded states win over "selected" */
html body.mpj-ui .medexp-qb-choice.is-wrong { border-color: var(--mpj-danger) !important; background: var(--mpj-danger-bg) !important; box-shadow: inset 0 0 0 1px var(--mpj-danger) !important; }
html body.mpj-ui .medexp-qb-choice.is-wrong .medexp-qb-choice__input:checked { background: var(--mpj-danger) !important; border-color: var(--mpj-danger) !important; }
html body.mpj-ui .medexp-qb-choice.is-missed, html body.mpj-ui .medexp-qb-choice.is-correct { border-color: var(--mpj-success) !important; background: var(--mpj-success-bg) !important; box-shadow: inset 0 0 0 1px var(--mpj-success) !important; }
html body.mpj-ui .medexp-qb-choice.is-correct .medexp-qb-choice__input:checked { background: var(--mpj-success) !important; border-color: var(--mpj-success) !important; }
html body.mpj-ui .medexp-qb-choice.is-wrong .medexp-qb-choice__ic { background: var(--mpj-danger) !important; }

/* =========================================================================
 * 19. Session summary
 * ========================================================================= */
html body.mpj-ui .medexp-summaryTitle { font: 600 var(--mpj-fs-xl)/1.2 var(--mpj-serif) !important; color: var(--mpj-navy) !important; letter-spacing: -0.01em; }
html body.mpj-ui .medexp-summarySub { color: var(--mpj-muted) !important; font-size: var(--mpj-fs-base) !important; }
html body.mpj-ui .medexp-summaryKpiLabel { text-transform: none !important; letter-spacing: 0 !important; font: 500 var(--mpj-fs-sm) var(--mpj-sans) !important; color: var(--mpj-muted) !important; }
html body.mpj-ui .medexp-summaryKpiBig { font: 600 var(--mpj-fs-xl)/1.15 var(--mpj-serif) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-summaryKpiRow { border-color: var(--mpj-line) !important; color: var(--mpj-text) !important; }
html body.mpj-ui .medexp-summaryKpiRow strong { color: var(--mpj-navy) !important; font-weight: 600 !important; }
html body.mpj-ui .medexp-card__header { border-color: var(--mpj-line) !important; }
html body.mpj-ui .medexp-card__header > div:first-child { font: 600 var(--mpj-fs-base) var(--mpj-sans) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-standalone .medexp-card, html body.mpj-ui .mpj-standalone .medexp-card { box-shadow: none !important; }
html body.mpj-ui .mpj-standalone > .medexp-qbank > .medexp-card:first-child,
html body.mpj-ui .mpj-standalone [class*="summaryPage"] { background: transparent !important; border: 0 !important; padding: 0 !important; }

/* =========================================================================
 * 20. Phone + tablet passes: lesson reader and exam player
 * ========================================================================= */
@media (max-width: 600px) {
  html body.mpj-ui .medexp-uw-footer { overflow: hidden !important; }
  html body.mpj-ui .medexp-uw-footerBtn { padding: 0 12px !important; min-width: 0 !important; }
  html body.mpj-ui .medexp-uw-footerBtn:not(.is-end) .medexp-uw-footerBtn__label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
  html body.mpj-ui .medexp-uw-footerBtn:last-child .medexp-uw-footerBtn__label { position: static !important; width: auto !important; height: auto !important; clip: auto !important; }
  html body.mpj-ui .medexp-examRight { padding: var(--mpj-s3) !important; }
  html body.mpj-ui .medexp-qb-stem { padding: var(--mpj-s4) !important; }
  html body.mpj-ui .medexp-qb-stem, html body.mpj-ui .medexp-qb-stem p { font-size: 16px !important; }
  html body.mpj-ui .medexp-qb-choice { padding: var(--mpj-s3) !important; }
  html body.mpj-ui .medexp-qb-choice__text { font-size: 15px !important; }
  html body.mpj-ui .medexp-qb-feedback { padding: var(--mpj-s4) !important; }
  html body.mpj-ui.mpj-surface-lesson .medexp-section { padding: var(--mpj-s4) !important; border-radius: var(--mpj-r) !important; }
  html body.mpj-ui.mpj-surface-lesson .medexp-card .medexp-card { border: 0 !important; padding: 0 !important; background: transparent !important; }
  html body.mpj-ui.mpj-surface-lesson .medexp-section p, html body.mpj-ui.mpj-surface-lesson .medexp-section li { font-size: 16px !important; }
  html body.mpj-ui.mpj-surface-lesson .medexp-section ul, html body.mpj-ui.mpj-surface-lesson .medexp-section ol { padding-left: 1.2em !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  html body.mpj-ui .medexp-examRight { padding: var(--mpj-s4) !important; }
  html body.mpj-ui.mpj-surface-lesson .medexp-section { padding: var(--mpj-s5) !important; }
}
html body.mpj-ui .medexp-metaHeading__txt { font-size: var(--mpj-fs-sm) !important; font-variant: normal !important; }
/* Lesson: sections are the only cards; the lesson wrapper is not another box */
html body.mpj-ui .medexp-lesson { border: 0 !important; background: transparent !important; box-shadow: none !important; }
html body.mpj-ui .medexp-lesson__header { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 600px) { html body.mpj-ui .medexp-main { padding: var(--mpj-s3) !important; } }
/* Exam toolbar on tablets: the question number already shows in the top bar */
@media (max-width: 1024px) {
  html body.mpj-ui .medexp-uw-toptools__mid { display: none !important; }
  html body.mpj-ui .medexp-uw-flagBtn { white-space: nowrap !important; }
  html body.mpj-ui .medexp-uw-toptools__left { gap: 4px !important; }
}
@media (max-width: 700px) {
  html body.mpj-ui .medexp-uw-toolBtn span:not([class*="ico"]):not([class*="swatch"]),
  html body.mpj-ui .medexp-uw-flagBtn span:not([class*="ico"]) { display: none !important; }
}

/* =========================================================================
 * 21. Course page: page header instead of a gradient hero box
 * ========================================================================= */
html body.mpj-ui .medexp-hero { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; padding: 0 0 var(--mpj-s5) !important; }
html body.mpj-ui .medexp-hero__title { font: 600 var(--mpj-fs-2xl)/1.15 var(--mpj-serif) !important; color: var(--mpj-navy) !important; letter-spacing: -0.015em !important; }
html body.mpj-ui .medexp-hero [class*="__desc"], html body.mpj-ui .medexp-hero [class*="__sub"], html body.mpj-ui .medexp-hero__headerMain p { color: var(--mpj-muted) !important; max-width: 70ch; font-size: var(--mpj-fs-base) !important; line-height: 1.6 !important; }
html body.mpj-ui .medexp-nextUp, html body.mpj-ui .medexp-progress { background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; box-shadow: none !important; }
html body.mpj-ui .medexp-nextUp { border-top: 3px solid var(--mpj-navy) !important; }
html body.mpj-ui .medexp-nextUp__kicker { color: var(--mpj-blue) !important; font: 500 var(--mpj-fs-sm) var(--mpj-sans) !important; }
html body.mpj-ui .medexp-nextUp [class*="title"] { font: 600 var(--mpj-fs-lg)/1.3 var(--mpj-serif) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-progress [class*="thumb"], html body.mpj-ui .medexp-progress [class*="cover"], html body.mpj-ui .medexp-progress [class*="badge"]:first-child { display: none !important; }
html body.mpj-ui .medexp-progress__title { text-transform: none !important; letter-spacing: 0 !important; font: 600 var(--mpj-fs-base) var(--mpj-sans) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-progress [class*="pct"], html body.mpj-ui .medexp-progress [class*="value"] { font-family: var(--mpj-serif) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-progress [class*="label"], html body.mpj-ui .medexp-progress dt { color: var(--mpj-muted) !important; font-weight: 400 !important; letter-spacing: 0 !important; }
html body.mpj-ui .medexp-shell [class*="tabs"]:not([class*="__"]) { background: var(--mpj-surface) !important; border: 1px solid var(--mpj-line) !important; border-radius: var(--mpj-r-lg) !important; box-shadow: none !important; }

/* Flashcard controls */
html body.mpj-ui .medexp-fc-btn { height: 40px !important; padding: 0 18px !important; border-radius: var(--mpj-r) !important; box-shadow: none !important; transform: none !important; font: 600 var(--mpj-fs-sm) var(--mpj-sans) !important; background-image: none !important; border: 1px solid var(--mpj-line-strong) !important; background-color: var(--mpj-surface) !important; color: var(--mpj-navy) !important; }
html body.mpj-ui .medexp-fc-btn--primary { background-color: var(--mpj-blue) !important; border-color: var(--mpj-blue) !important; color: #fff !important; }
html body.mpj-ui .medexp-fc-btn--again { color: var(--mpj-danger) !important; }
html body.mpj-ui .medexp-fc-btn--hard { color: var(--mpj-warn) !important; }
html body.mpj-ui .medexp-fc-btn--good { color: var(--mpj-blue) !important; }
html body.mpj-ui .medexp-fc-btn--easy { color: var(--mpj-success) !important; }
html body.mpj-ui .tw-practicePanel .medexp-qb-perfStrip .medexp-qb-perfStat:nth-child(n) { border: 0 !important; background: var(--mpj-sunken) !important; }
html body.mpj-ui .tw-practicePanel .medexp-qb-perfStrip .medexp-qb-perfStat:nth-child(n) .medexp-qb-perfStat__v { color: var(--mpj-navy) !important; font-family: var(--mpj-serif) !important; font-weight: 600 !important; }
