/*
 * MPJE app shell for course routes (course page, course practice, lesson reader).
 * Mirrors the dashboard sidebar/top bar metrics so moving between pages feels like one app.
 */
.mpj-skip { position: absolute; left: -999px; top: 8px; z-index: 1000; background: var(--mpj-navy); color: #fff !important; padding: 8px 12px; border-radius: var(--mpj-r); }
.mpj-skip:focus { left: 8px; }

.mpj-shell { display: grid; grid-template-columns: var(--mpj-sidebar-w) minmax(0, 1fr); min-height: 100vh; background: var(--mpj-paper); }
.mpj-side { position: fixed; left: 0; top: 0; bottom: 0; width: var(--mpj-sidebar-w); z-index: 60; overflow-y: auto; background: var(--mpj-surface); border-right: 1px solid var(--mpj-line); padding: var(--mpj-s4) var(--mpj-s3); }
body.admin-bar .mpj-side { top: 32px; }
.mpj-shell > .mpj-shell__main { grid-column: 2; }
.mpj-brand { display: flex; align-items: center; height: 44px; padding: 0 var(--mpj-s2); margin-bottom: var(--mpj-s4); }
.mpj-brand__img { height: 40px; width: auto; }
.mpj-brand__text { font: 600 var(--mpj-fs-md) var(--mpj-serif); color: var(--mpj-navy); }
.mpj-side__nav { display: grid; gap: 2px; }
html body.mpj-ui .mpj-side__link { display: flex; align-items: center; gap: var(--mpj-s3); height: 38px; padding: 0 var(--mpj-s3); border-radius: var(--mpj-r); color: var(--mpj-muted); font: 500 var(--mpj-fs-sm)/1 var(--mpj-sans); text-decoration: none !important; }
html body.mpj-ui .mpj-side__link:hover { background: var(--mpj-sunken); color: var(--mpj-navy); }
html body.mpj-ui .mpj-side__link.is-active { background: var(--mpj-blue-soft); color: var(--mpj-navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--mpj-blue); }
.mpj-side__link.is-active svg { color: var(--mpj-blue); }
.mpj-side__group { margin: var(--mpj-s4) var(--mpj-s3) var(--mpj-s1); padding-top: var(--mpj-s3); border-top: 1px solid var(--mpj-line); font-size: var(--mpj-fs-xs); color: var(--mpj-faint); }
.mpj-side__scrim { display: none; }

.mpj-shell__main { min-width: 0; display: flex; flex-direction: column; }
.mpj-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--mpj-s3); height: var(--mpj-topbar-h); padding: 0 var(--mpj-s6); background: rgba(255,255,255,.94); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--mpj-line); }
body.admin-bar .mpj-top { top: 32px; }
.mpj-top__spacer { flex: 1; }
.mpj-top__menu { display: none; width: 38px; height: 38px; border: 1px solid var(--mpj-line); border-radius: var(--mpj-r); background: var(--mpj-surface); color: var(--mpj-navy); align-items: center; justify-content: center; cursor: pointer; }
html body.mpj-ui .mpj-top__user { display: inline-flex; align-items: center; gap: var(--mpj-s2); padding: 4px 8px 4px 4px; border-radius: var(--mpj-r); color: var(--mpj-navy); text-decoration: none !important; }
html body.mpj-ui .mpj-top__user:hover { background: var(--mpj-sunken); }
.mpj-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mpj-navy); color: #fff; font: 600 var(--mpj-fs-xs) var(--mpj-sans); }
.mpj-top__name { font: 500 var(--mpj-fs-sm) var(--mpj-sans); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.mpj-ui .mpj-top__back, html body.mpj-ui .mpj-top__link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--mpj-s3); border-radius: var(--mpj-r); color: var(--mpj-navy); font: 500 var(--mpj-fs-sm) var(--mpj-sans); text-decoration: none !important; }
html body.mpj-ui .mpj-top__back:hover, html body.mpj-ui .mpj-top__link:hover { background: var(--mpj-sunken); }
.mpj-top--reader { padding: 0 var(--mpj-s4); }
.mpj-top--reader .mpj-brand { margin: 0; height: auto; padding: 0; }
.mpj-top--reader .mpj-brand__img { height: 34px; }

.mpj-shell__content { flex: 1; min-width: 0; }
.mpj-shell__content > main { display: block; }

@media (max-width: 1024px) {
  .mpj-shell { grid-template-columns: 1fr; }
  .mpj-shell > .mpj-shell__main { grid-column: 1; }
  .mpj-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 200; width: min(280px, 86vw); transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--mpj-shadow); }
  body.admin-bar .mpj-side { top: 0; height: 100vh; }
  .mpj-shell.is-nav-open .mpj-side { transform: none; }
  .mpj-shell.is-nav-open .mpj-side__scrim { display: block; position: fixed; inset: 0; z-index: 150; border: 0; background: rgba(15, 33, 66, .35); }
  .mpj-top { padding: 0 var(--mpj-s4); }
  .mpj-top__menu { display: inline-flex; }
}
@media (max-width: 600px) {
  .mpj-top__name, .mpj-top--reader .mpj-top__link { display: none; }
  body.admin-bar .mpj-top { top: 46px; }
}
@media (prefers-reduced-motion: reduce) { .mpj-side { transition: none; } }

/* Hide legacy theme / course appbar chrome that the shell replaces */
html body.mpj-shell-page .medexp-appbar,
html body.mpj-shell-page .medexp-shell > .medexp-appbar,
html body.mpj-shell-page header.site-header,
html body.mpj-shell-page #masthead { display: none !important; }

/* Course page markup uses full-bleed negative margins; inside the shell it must sit in the content column. */
html body.mpj-shell-page .mpj-shell__content .medexp-shell,
html body.mpj-shell-page .mpj-shell__content .medexp-scope,
html body.mpj-shell-page .mpj-shell__content .medexp-container {
  margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; left: auto !important;
}
html body.mpj-shell-app .mpj-shell__content > main { max-width: var(--mpj-content-max); margin: 0 auto; padding: var(--mpj-s6) var(--mpj-s6) var(--mpj-s7); }
@media (max-width: 760px) { html body.mpj-shell-app .mpj-shell__content > main { padding: var(--mpj-s5) var(--mpj-s4) var(--mpj-s7); } }
html body.mpj-shell-page .mpj-brand__img { height: 40px !important; width: auto !important; max-width: 100% !important; }
html body.mpj-shell-reader .mpj-brand__img { height: 34px !important; }

/* The marketing site header, drawer and footer are not part of the app */
html body.mpj-shell-page #mpjehdr,
html body.mpj-shell-page #mpjedrawer,
html body.mpj-shell-page .mpjehdr,
html body.mpj-shell-page .mpjedrawer,
html body.mpj-shell-page footer.mpjf,
html body.mpj-shell-page .mpjf { display: none !important; }
html body.mpj-shell-app .mpj-shell__content h1 { font-family: var(--mpj-serif) !important; font-weight: 600 !important; color: var(--mpj-navy) !important; letter-spacing: -0.01em !important; }
html body.mpj-shell-page .mpj-shell__content [class*="label"], html body.mpj-shell-page .mpj-shell__content [class*="Label"] { letter-spacing: 0 !important; }
html body.mpj-shell-app .mpj-standalone { max-width: var(--mpj-content-max); margin: 0 auto; padding: var(--mpj-s6) var(--mpj-s6) var(--mpj-s7); }
@media (max-width: 760px) { html body.mpj-shell-app .mpj-standalone { padding: var(--mpj-s5) var(--mpj-s4) var(--mpj-s7); } }
/* Marketing header/footer injected by other code must never show inside the app */
html body.mpj-ui.mpj-surface-exam #mpjehdr, html body.mpj-ui.mpj-surface-exam .mpjehdr,
html body.mpj-ui.mpj-surface-exam .mpjedrawer, html body.mpj-ui.mpj-surface-exam .mpjf,
html body.mpj-ui.mpj-surface-shell #mpjehdr, html body.mpj-ui.mpj-surface-shell .mpjf { display: none !important; }
/* Session pages: their own nav bar becomes an inline toolbar inside the shell */
html body.mpj-shell-page .medexp-reviewNav { position: static !important; inset: auto !important; width: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 var(--mpj-s4) !important; margin: 0 !important; z-index: auto !important; }
html body.mpj-shell-page .medexp-reviewNav__title { display: none !important; }
html body.mpj-shell-page .mpj-standalone { padding-top: var(--mpj-s5) !important; }

/* Some themes (MedExPrep) make html/body their own scroll box with overflow-x: hidden.
   That shifts the sticky top bar down by the admin-bar offset and over the page title.
   clip hides sideways overflow without creating a scroll box. */
html:has(body.mpj-ui),
html body.mpj-ui { overflow-x: clip !important; overflow-y: visible !important; }

/* ---- Top bar: search, course menu, bell (matches the dashboard) ---- */
html body.mpj-ui .mpj-top { gap: 12px; }
html body.mpj-ui .mpj-search { position: relative; flex: 0 1 360px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--mpj-sunken, #f1f4f8); border: 1px solid transparent; color: var(--mpj-muted); transition: border-color .15s, background .15s; }
html body.mpj-ui .mpj-search:focus-within { background: #fff; border-color: var(--mpj-blue-line); box-shadow: var(--mpj-focus); }
html body.mpj-ui .mpj-search__input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; padding: 0 !important; height: 38px; font: inherit; font-size: 14px; color: var(--mpj-text); }
html body.mpj-ui .mpj-search__input::-webkit-search-cancel-button { cursor: pointer; }
html body.mpj-ui .mpj-search__drop { position: absolute; top: calc(100% + 8px); left: 0; width: min(460px, 92vw); max-height: 70vh; overflow-y: auto; padding: 8px; background: #fff; border: 1px solid var(--mpj-line); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(16,24,40,.28); z-index: 80; }
html body.mpj-ui .mpj-search__group { margin: 8px 8px 4px !important; font-size: 11px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mpj-faint) !important; }
html body.mpj-ui .mpj-search__item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; color: var(--mpj-text) !important; text-decoration: none !important; }
html body.mpj-ui .mpj-search__item:hover, html body.mpj-ui .mpj-search__item.is-active { background: var(--mpj-blue-soft); }
html body.mpj-ui .mpj-search__title { font-size: 14px; font-weight: 600; line-height: 1.35; }
html body.mpj-ui .mpj-search__meta { font-size: 12px; color: var(--mpj-muted); }
html body.mpj-ui .mpj-search__empty { margin: 10px !important; font-size: 13.5px; color: var(--mpj-muted) !important; }

html body.mpj-ui .mpj-cmenu { position: relative; flex: 0 1 300px; min-width: 0; }
html body.mpj-ui .mpj-cmenu__btn { list-style: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--mpj-line); border-radius: 12px; background: #fff; cursor: pointer; color: var(--mpj-navy); }
html body.mpj-ui .mpj-cmenu__btn::-webkit-details-marker { display: none; }
html body.mpj-ui .mpj-cmenu__btn:hover { border-color: var(--mpj-blue-line); }
html body.mpj-ui .mpj-cmenu[open] .mpj-cmenu__btn { border-color: var(--mpj-blue); box-shadow: var(--mpj-focus); }
html body.mpj-ui .mpj-cmenu__label { font-size: 11px; font-weight: 600; color: var(--mpj-faint); text-transform: uppercase; letter-spacing: .05em; }
html body.mpj-ui .mpj-cmenu__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.mpj-ui .mpj-cmenu__pop { position: absolute; top: calc(100% + 8px); left: 0; width: min(380px, 92vw); padding: 8px; background: #fff; border: 1px solid var(--mpj-line); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(16,24,40,.28); z-index: 80; }
html body.mpj-ui .mpj-cmenu__filter { width: 100%; height: 36px; margin: 0 0 6px; padding: 0 12px !important; border: 1px solid var(--mpj-line) !important; border-radius: 10px !important; font: inherit; font-size: 14px; box-sizing: border-box; }
html body.mpj-ui .mpj-cmenu__list { max-height: 50vh; overflow-y: auto; }
html body.mpj-ui .mpj-cmenu__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--mpj-text) !important; text-decoration: none !important; font-size: 14px; }
html body.mpj-ui .mpj-cmenu__item[hidden] { display: none !important; }
html body.mpj-ui .mpj-cmenu__item:hover { background: var(--mpj-sunken, #f1f4f8); }
html body.mpj-ui .mpj-cmenu__item.is-current { background: var(--mpj-blue-soft); color: var(--mpj-blue) !important; font-weight: 650; }
html body.mpj-ui .mpj-cmenu__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mpj-line); flex: none; }
html body.mpj-ui .mpj-cmenu__item.is-current .mpj-cmenu__dot { background: var(--mpj-blue); }
html body.mpj-ui .mpj-cmenu__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.mpj-ui .mpj-cmenu__all { display: block; margin-top: 6px; padding: 9px 10px; border-top: 1px solid var(--mpj-line); font-size: 13.5px; font-weight: 600; color: var(--mpj-blue) !important; text-decoration: none !important; }
html body.mpj-ui .mpj-top__bell { display: flex; align-items: center; background: transparent !important; }
html body.mpj-ui .mpj-top__bell .medexp-notifyDrop { right: 0; left: auto; }

@media (max-width: 860px) {
  html body.mpj-ui .mpj-search { flex: 0 0 40px; width: 40px; padding: 0; justify-content: center; }
  html body.mpj-ui .mpj-search .mpj-search__input { position: absolute; opacity: 0; pointer-events: none; width: 0; }
  html body.mpj-ui .mpj-search:focus-within { position: absolute; left: 12px; right: 12px; width: auto; flex: none; padding: 0 14px; justify-content: flex-start; z-index: 90; }
  html body.mpj-ui .mpj-search:focus-within .mpj-search__input { position: static; opacity: 1; pointer-events: auto; width: auto; }
  html body.mpj-ui .mpj-top__name { display: none !important; }
  html body.mpj-ui .mpj-cmenu { flex: 1 1 auto; }
  html body.mpj-ui .mpj-cmenu__label { display: none; }
}