:root {
  --bg: #f6f7f9; --panel: #ffffff; --text: #1d232b; --muted: #5d6773; --border: #d6dbe1;
  --accent: #0f766e; --accent-text: #ffffff; --good: #1d7a3e; --bad: #b3261e; --warn: #8a5a00;
  --flag: #c77700; --sel: #e0f2f1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161b; --panel: #1b2128; --text: #e6e9ed; --muted: #9aa4af; --border: #313a44;
    --accent: #2dd4bf; --accent-text: #042f2e; --good: #5cc983; --bad: #ff8a80; --warn: #e6b450;
    --flag: #f0a640; --sel: #123b38;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
.topbar nav a { margin-left: 12px; }
.brand { font-weight: 700; text-decoration: none; color: var(--text); }
main { max-width: 960px; margin: 0 auto; padding: 16px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.muted { color: var(--muted); }
.warn { color: var(--warn); }
.good { color: var(--good); }
.bad { color: var(--bad); }
h1 { font-size: 1.5rem; margin: 0 0 8px; }
h2 { font-size: 1.2rem; margin: 0 0 8px; }
button, .btn { font: inherit; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.bar { height: 8px; background: var(--border); border-radius: 4px; min-width: 60px; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

/* Exam */
.examhead { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 2; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.2rem; }
.timer.low { color: var(--bad); }
.stem { white-space: pre-wrap; }
.labs { margin: 12px 0; }
.options { list-style: none; padding: 0; margin: 12px 0 0; }
.options li { margin: 6px 0; }
.opt { display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; }
.opt .letter { font-weight: 700; min-width: 1.2em; }
.opt.selected { background: var(--sel); border-color: var(--accent); }
.opt.correct { border-color: var(--good); box-shadow: inset 4px 0 0 var(--good); }
.opt.wrong { border-color: var(--bad); box-shadow: inset 4px 0 0 var(--bad); }
.nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.nav-grid button { padding: 6px 0; font-size: .9rem; }
.nav-grid button.answered { background: var(--sel); }
.nav-grid button.current { outline: 2px solid var(--accent); }
.nav-grid button.flagged { border-color: var(--flag); border-width: 2px; }
.flag-on { color: var(--flag); border-color: var(--flag); }
.paused { text-align: center; padding: 48px 16px; }
.badge { display: inline-block; font-size: .8rem; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); }
.badge.draft { color: var(--warn); border-color: var(--warn); }
.badge.reviewed { color: var(--good); border-color: var(--good); }
.expl { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.expl p { margin: 6px 0; }
.thumbs button.on-up { border-color: var(--good); color: var(--good); }
.thumbs button.on-down { border-color: var(--bad); color: var(--bad); }
textarea { width: 100%; min-height: 70px; font: inherit; padding: 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
input[type=text], select { font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.kbd { font-size: .85rem; }
@media (max-width: 600px) {
  main { padding: 12px; }
  .examhead { gap: 8px; }
}

/* Images and viewer */
.qimg { margin: 12px 0; }
.imgbtn { padding: 0; border: 1px solid var(--border); background: #000; display: block; max-width: 100%; }
.imgbtn img { display: block; max-width: 100%; max-height: 320px; }
.viewer { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.92); display: flex; flex-direction: column; }
.viewer-bar { padding: 8px 12px; background: var(--panel); color: var(--text); }
.viewer-bar input[type=range] { vertical-align: middle; width: 110px; }
.viewer-stage { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.viewer-stage img { max-width: 95%; max-height: 95%; transform-origin: center; user-select: none; }

/* Highlight, strike-out, display tools */
.stem mark { background: #fde68a; color: #1d232b; cursor: pointer; border-radius: 2px; }
.options li { display: flex; gap: 6px; align-items: stretch; }
.options li .opt { flex: 1; }
.strike { padding: 4px 10px; color: var(--muted); }
.options li.struck .opt span:last-child { text-decoration: line-through; color: var(--muted); }
.options li.struck .strike, button.on { border-color: var(--accent); color: var(--accent); }
.disp { display: inline-flex; gap: 8px; align-items: center; margin-right: 8px; }
.disp button { padding: 4px 8px; font-size: .85rem; }
.zoomset button { border-radius: 0; margin-left: -1px; line-height: 1; }
.zoomset button[data-zoom="1"] { font-size: 13px; border-radius: 6px 0 0 6px; }
.zoomset button[data-zoom="2"] { font-size: 16px; }
.zoomset button[data-zoom="3"] { font-size: 20px; border-radius: 0 6px 6px 0; }
html[data-zoom="2"] { font-size: 19px; }
html[data-zoom="3"] { font-size: 22px; }
html.invert { filter: invert(1) hue-rotate(180deg); background: #000; }
/* Undo the inversion on clinical images so colors stay true. */
html.invert .imgbtn, html.invert .viewer-stage { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 600px) { .disp button { padding: 4px 6px; } .topbar { flex-wrap: wrap; gap: 6px; } }

/* Exam screen. The layout and controls follow the NBME tutorial (toolbars, navigator, answer
   box, pop-ups, break screens), but the look is our own: slate toolbars, teal accent, white
   page, rounded cards and the system font, so it is not mistaken for the official exam. */
body.exam-mode .topbar { display: none; }
body.exam-mode main { max-width: none; padding: 0; }
.nb { --nb-bar: #1e293b; --nb-bar-text: #f1f5f9; --nb-bar-muted: #94a3b8; --nb-accent: #0f766e; --nb-accent-2: #14b8a6;
  --nb-soft: #f1f5f9; --nb-line: #cbd5e1; --nb-page: #ffffff;
  position: fixed; inset: 0; display: grid; grid-template: 54px 1fr 50px / 80px 1fr;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #0f172a; background: var(--nb-page); }
.nb button { font-family: inherit; }
.nb-top, .nb-bottom { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 10px; background: var(--nb-bar); color: var(--nb-bar-text); font-size: 13px; }
.nb-top { grid-row: 1; border-bottom: 3px solid var(--nb-accent-2); } .nb-bottom { grid-row: 3; border-top: 1px solid #334155; }
.nb-center { flex: 1; display: flex; justify-content: center; gap: 8px; }
.nb-right { display: flex; gap: 10px; align-items: center; }
.nb-tool { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--nb-bar-text); padding: 3px 8px; font-size: 12px; cursor: pointer; }
.nb-tool:hover:not(:disabled), .nb-tool:focus-visible { background: rgba(255,255,255,.1); }
.nb-tool:disabled { color: #64748b; opacity: 1; cursor: default; }
.nb-tool .ico { display: block; width: 26px; height: 22px; }
.ico.tri-r { clip-path: polygon(10% 15%, 95% 50%, 10% 85%); background: #5eead4; }
.ico.tri-l { clip-path: polygon(90% 15%, 5% 50%, 90% 85%); background: #5eead4; }
.nb-tool:disabled .ico { background: #475569; }
.ico.rc { width: 22px; border-radius: 50%; background: linear-gradient(135deg, #f1f5f9 50%, #0f172a 50%); border: 1px solid #cbd5e1; }
.ico.pz { width: 22px; border-radius: 50%; border: 2px solid #fbbf24; background: linear-gradient(90deg, transparent 30%, #fbbf24 30% 42%, transparent 42% 58%, #fbbf24 58% 70%, transparent 70%) center / 100% 50% no-repeat; }
.ico.endstop { width: 20px; height: 20px; border-radius: 6px; background: #ef4444; }
.ico.endok { width: 22px; height: 22px; border-radius: 50%; background: #22c55e; clip-path: none; box-shadow: inset 0 0 0 6px #22c55e, inset 0 0 0 11px #dcfce7; }
.nb-iteminfo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; padding: 3px 8px; background: rgba(255,255,255,.06); border: 1px solid #334155; border-radius: 8px; color: var(--nb-bar-text); font-size: 14px; cursor: pointer; }
.nb-iteminfo span + span { font-size: 12px; color: var(--nb-bar-muted); }
.nb-mark { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.flagicon, .nflag { color: #f59e0b; }
.flagicon { font-size: 18px; }
.nb-zoom { cursor: default; }
.nb-zoom .zoomset { display: flex; gap: 2px; background: #334155; border-radius: 6px; padding: 2px; }
.nb .zoomset button { border: 0; border-radius: 4px; background: transparent; color: var(--nb-bar-text); font-weight: 700; padding: 0 4px; margin: 0; line-height: 1; cursor: pointer; }
.nb .zoomset button.on { background: var(--nb-accent); }
.nb .zoomset button[data-zoom="1"] { font-size: 11px; } .nb .zoomset button[data-zoom="2"] { font-size: 15px; } .nb .zoomset button[data-zoom="3"] { font-size: 20px; }
.nb-nav { grid-row: 2; overflow-y: auto; overflow-x: hidden; background: var(--nb-soft); border-right: 1px solid #e2e8f0; }
.nb-nav ol { list-style: none; margin: 6px 0; padding: 0 4px; }
.nb-nav li { border-radius: 6px; margin: 1px 0; }
.nb-nav li.current { background: var(--nb-accent); }
.nb-nav li.current button { color: #fff; }
.nb-nav button { display: grid; grid-template-columns: 14px 1fr 16px; width: 68px; padding: 1px 0; border: 0; background: none; text-align: left; font: 12px/18px system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; color: #334155; cursor: pointer; }
.nb-nav li:not(.current) button:hover { background: #e2e8f0; border-radius: 6px; }
.nb-nav .num { padding-left: 4px; }
.nb-main { grid-row: 2; overflow: auto; background: #f8fafc; font-size: 16px; line-height: 1.5; }
html[data-zoom="2"] .nb-main { font-size: 19px; } html[data-zoom="3"] .nb-main { font-size: 22px; }
.nb-item { padding: 24px 36px 40px; display: grid; grid-template-columns: minmax(0, 600px); gap: 20px; }
.nb-item.has-media { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
.nb .stem { white-space: pre-wrap; }
.nb .stem mark { background: #fde68a; color: inherit; cursor: pointer; border-radius: 2px; }
.answerbox { display: inline-block; min-width: 260px; max-width: 100%; margin: 16px 0; padding: 10px 12px; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid var(--nb-accent-2); border-radius: 10px; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.answerbox .options { list-style: none; margin: 0; padding: 0; }
.answerbox li { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 3px 4px; border-radius: 6px; }
.answerbox li:hover { background: #f0fdfa; }
.answerbox li input { margin: 0; cursor: pointer; accent-color: var(--nb-accent); }
.answerbox .opttext { cursor: pointer; }
.answerbox li.st { opacity: .6; text-decoration: line-through; }
.nb-btn { display: inline-block; font: 600 14px system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; text-decoration: none; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--nb-accent); cursor: pointer; }
.nb-btn:hover { background: #115e59; }
.nb-btn.red { background: #dc2626; } .nb-btn.red:hover { background: #b91c1c; }
.nb-btn.orange { background: #d97706; } .nb-btn.orange:hover { background: #b45309; }
.nb-btn.plain { color: var(--nb-accent); background: #fff; box-shadow: inset 0 0 0 1px var(--nb-accent); }
.nb-q > .nb-btn { display: block; margin: 0 auto; }
.nb-media .qimg { margin: 0; background: #1e293b; padding: 8px; border-radius: 10px; }
.nb-media .imgbtn img { max-height: 60vh; margin: 0 auto; }
.nb-media figcaption { color: #cbd5e1; font-size: 13px; }
.nb-time { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; padding: 3px 8px; background: rgba(255,255,255,.06); border: 1px solid #334155; border-radius: 8px; color: var(--nb-bar-text); font-size: 15px; line-height: 1.1; text-align: right; cursor: pointer; }
.nb-time .t { text-align: left; font-variant-numeric: tabular-nums; }
.nb-time .sm { font-size: 12px; color: var(--nb-bar-muted); }
.nb-pop { position: fixed; z-index: 5; background: #fff; border: 1px solid var(--nb-line); border-radius: 10px; padding: 8px 10px; font-size: 13px; box-shadow: 0 10px 25px rgba(15,23,42,.18); }
.nb-pop-time { left: 82px; bottom: 54px; width: 346px; }
.nb-pop-items { left: 82px; top: 58px; min-width: 396px; }
.nb-pop table, .nb-info table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.nb-pop caption, .nb-info caption { font-weight: 700; font-size: 14px; padding: 2px; color: var(--nb-accent); }
.nb-info caption { font-size: 16px; }
.nb-pop caption small { font-weight: 400; font-size: 13px; color: #64748b; }
.nb-pop td, .nb-info td { padding: 2px 4px; border-bottom: 1px solid #e2e8f0; }
.nb-pop td:last-child, .nb-info td:last-child { text-align: right; white-space: nowrap; }
.nb-pop tr.big td { font-size: 15px; }
.nb-pop tr.gap td { padding-top: 10px; }
.nb-overview td { text-align: left !important; }
.nb-overview td.chk { width: 1.5em; text-align: center !important; color: var(--nb-accent); }
.nb-overview tr.next { background: #f0fdfa; }
.nb-modal-back { position: fixed; inset: 0; z-index: 10; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; }
.nb-modal { width: min(600px, calc(100% - 32px)); background: #fff; border-radius: 14px; overflow: hidden; text-align: center; font-size: 16px; box-shadow: 0 20px 40px rgba(15,23,42,.25); }
.nb-modal h2 { margin: 0; padding: 12px; font-size: 16px; color: #fff; background: var(--nb-bar); }
.nb-modal.incomplete h2 { background: #b91c1c; }
.nb-modal p { margin: 16px; }
.nb-modal-btns { display: flex; justify-content: space-around; padding: 4px 16px 18px; }
.nb-modal-btns.center { justify-content: center; gap: 8px; }
.nb-screen { display: block; padding: 60px 34px 34px; overflow: auto; background: #f1f5f9; }
.nb-screen section { max-width: 1100px; margin: 0 auto; background: #fff; border: 1px solid #e2e8f0; border-top: 4px solid var(--nb-accent-2); border-radius: 14px; padding: 20px; text-align: center; font-size: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.nb-screen h2 { font-size: 24px; margin: 8px 0 12px; }
.nb-info { max-width: 582px; margin: 24px auto 0; text-align: left; }
.nb-info table { margin-bottom: 24px; }
.nb-alert { color: #b91c1c; }
.nb-disp { position: fixed; top: 0; right: 0; display: flex; gap: 10px; padding: 4px 10px; background: var(--nb-bar); border-radius: 0 0 0 10px; }
@media (max-width: 700px) {
  .nb { grid-template-columns: 44px 1fr; grid-template-rows: auto 1fr auto; }
  .nb-top, .nb-bottom { flex-wrap: wrap; gap: 4px; padding: 4px; }
  .nb-nav button { width: 40px; grid-template-columns: 10px 1fr 12px; }
  .nb-item, .nb-item.has-media { padding: 12px 16px 32px; grid-template-columns: minmax(0, 1fr); }
  .nb-tool { padding: 2px 4px; font-size: 11px; }
  .nb-pop-time, .nb-pop-items { left: 8px; right: 8px; width: auto; min-width: 0; }
}

/* Notes and Calculator panels: bottom-right card above the toolbar. */
.nb-tool.on { background: rgba(20,184,166,.25); color: #fff; }
.ico.notes, .ico.calc { width: 28px; height: 22px; font: 700 8px/1 system-ui, sans-serif; color: #0f172a; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.ico.notes { background: linear-gradient(#fef3c7 0 70%, #fbbf24 70%); }
.ico.calc { background: #e2e8f0; letter-spacing: -.3px; }
.nicons { display: inline-flex; gap: 1px; }
.nnote { color: #0d9488; cursor: help; }
.nb-nav button { grid-template-columns: 14px 1fr 22px; }
.nb-tool-pop { position: fixed; right: 8px; bottom: 58px; z-index: 6; padding: 10px; background: #fff; border: 1px solid var(--nb-line); border-radius: 12px; box-shadow: 0 10px 25px rgba(15,23,42,.18); }
.nb-tool-pop textarea { display: block; width: 353px; max-width: calc(100vw - 36px); height: 113px; min-height: 0; padding: 6px; border: 1px solid var(--nb-line); border-radius: 8px; font: 14px ui-monospace, Consolas, monospace; background: #f8fafc; color: #0f172a; resize: none; }
.nb-tool-btns { display: flex; justify-content: space-between; margin-top: 8px; }
.nb .nb-gbtn { font: 600 14px system-ui, -apple-system, "Segoe UI", sans-serif; color: #0f172a; padding: 4px 10px; border: 1px solid var(--nb-line); border-radius: 8px; background: #f8fafc; cursor: pointer; }
.nb .nb-gbtn:hover { background: #e2e8f0; }
.nb .nb-gbtn.purple { background: #ede9fe; border-color: #c4b5fd; }
.nb .nb-gbtn.yellow { background: #fef3c7; border-color: #fcd34d; }
.nb .nb-gbtn.lightblue { background: #ccfbf1; border-color: #5eead4; }
.nb-calc { padding: 10px; width: 260px; }
.calc-disp { height: 38px; margin-bottom: 8px; padding: 4px 8px; background: #0f172a; border: 0; border-radius: 8px; font: 22px ui-monospace, Consolas, monospace; text-align: right; overflow: hidden; white-space: nowrap; color: #5eead4; }
.calc-keys { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px 6px; }
.calc-keys .nb-gbtn { grid-column: span 2; height: 28px; padding: 0; }
.calc-keys [data-calc="0"], .calc-keys [data-calc="="] { grid-column: span 3; }

/* Lock / unauthorized break screen: dark slate with an amber warning. */
.ico.lk { width: 22px; border-radius: 50%; border: 2px solid #fbbf24; background: radial-gradient(circle at 50% 62%, #fbbf24 0 4px, transparent 4.5px), radial-gradient(circle at 50% 38%, transparent 0 3px, #fbbf24 3px 4.5px, transparent 5px); }
.nb-locked { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 70px; background: #0f172a; color: #f1f5f9; text-align: center; border-top: 6px solid #f59e0b; }
.nb-locked h2 { font-size: 44px; margin: 0 16px 20px; color: #fbbf24; }
.nb-locked h4 { font-size: 30px; margin: 0 0 28px; }
.nb-locked p { font-size: 28px; margin: 0 16px 32px; color: #cbd5e1; }
.nb-locked .nb-gbtn { background: #f1f5f9; }
@media (max-width: 700px) { .nb-locked h2 { font-size: 30px; } .nb-locked h4, .nb-locked p { font-size: 20px; } }
.nb-info td.tm, .nb-pop td.tm { text-align: right; white-space: nowrap; width: 4.5em; padding-left: 8px; }
.nb-overview td.tm { text-align: right !important; }
.nb-overview td:last-child { text-align: right !important; }

/* Report a problem, disclaimer */
.report { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border); }
.report summary { cursor: pointer; color: var(--muted); }
.report .row, .report textarea { margin-top: 8px; }
.fb textarea { margin: 8px 0; }
.topic-pick { margin: 8px 0; gap: 12px; }
.topic-pick label { display: inline-flex; gap: 6px; align-items: center; }
.modes { margin: 8px 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.modes legend { padding: 0 4px; font-weight: 600; }
.or { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; color: var(--muted); font-weight: 600; font-size: .9rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.learn .opt:disabled { opacity: 1; cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.prose { max-width: 760px; }
.prose h2 { margin-top: 20px; }

/* Accessibility: skip link, visible keyboard focus, footer links */
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 12px; background: var(--accent); color: var(--accent-text); border-radius: 6px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid #f0a030; outline-offset: 2px; }
main:focus { outline: none; }
.sitefoot { max-width: 960px; margin: 0 auto; padding: 8px 16px 32px; text-align: center; font-size: .9rem; color: var(--muted); }
body.exam-mode .sitefoot { display: none; }
.legal-links { margin-top: 24px; font-size: .9rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 4px 0; }