/* ============================================================================
   RheumWave — CASE PAGE STYLES
   ----------------------------------------------------------------------------
   Used by every case page. Edit here once and every case updates.

   Load order on a case page (handled by the document.write block in the
   template, which also fixes the ../ prefix when the file sits in cases/):
       rheumwave-theme.css     tokens, base, cards, buttons, toast
       rheumwave-chrome.css    header, footer, floating logo
       rheumwave-case.css      this file — the case layout itself
   ============================================================================ */

/* ── LAYOUT ── */
.container { max-width: 860px; margin: 0 auto; padding: 32px 24px 60px; }

/* ── CASE HEADER ── */
.case-header {
  margin-bottom: 28px;
}
.case-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tag {
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tag-level  { background: var(--teal-light); color: var(--navy); }
.tag-region { background: var(--surface-2); color: var(--ink-2); }
.tag-path   { background: #fef3c7; color: #92400e; }
[data-theme="dark"] .tag-level  { background: #1a2e45; color: #7bb3d4; }
[data-theme="dark"] .tag-path   { background: #2d1f06; color: #fbbf24; }

.case-header h2 {
  font-family: 'Source Serif 4', serif;
  font-size: 1.9rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
[data-theme="dark"] .case-header h2 { color: #7bb3d4; }
.case-header .case-num { font-size: .85rem; color: var(--ink-3); margin: 0 0 10px; }

/* ── PROGRESS BAR ── */
.progress-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 14px 18px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.progress-bar-bg {
  flex: 1;
  height: 7px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy), var(--teal));
  border-radius: 99px;
  transition: width .5s ease;
}
.progress-label { font-size: .8rem; color: var(--ink-3); white-space: nowrap; }

/* ── VIGNETTE ── */
.vignette {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 28px;
  line-height: 1.75;
  font-size: .93rem;
  color: var(--ink-2);
  box-shadow: var(--shadow);
}
.vignette p { margin: 0 0 12px; }
.vignette p:last-child { margin: 0; }

/* ── PINNED COLLAPSIBLE VIGNETTE ── */
/* Only stick while collapsed (short). When expanded it scrolls normally
   so the full text never covers the question below. */
.vignette.pinned.collapsed {
  position: sticky; top: 12px; z-index: 50;
}
.vignette.pinned {
  margin-bottom: 20px;
}
.vignette-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.vignette-summary {
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3); margin: 0 0 4px;
}
.vignette-toggle {
  flex-shrink: 0; background: none; border: 1px solid var(--border);
  color: var(--ink-2); font-family: inherit; font-size: .78rem; font-weight: 600;
  padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: background .15s;
  white-space: nowrap;
}
.vignette-toggle:hover { background: var(--bg); }
/* collapsed: show only the lead line, hide the rest */
.vignette.collapsed .vignette-full { display: none; }
.vignette:not(.collapsed) .vignette-lead { display: none; }
.vignette-lead { margin: 0; color: var(--ink-2); }

/* ── PER-QUESTION NEW-INFO PANEL ── */
/* Case-information panel — now sits INSIDE the question box, at the top */
.new-info {
  background: color-mix(in srgb, var(--teal) 7%, var(--surface));
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
  line-height: 1.7;
  font-size: .9rem;
  color: var(--ink-2);
}
.new-info .ni-label {
  display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--teal); margin-bottom: 6px;
}
.new-info p { margin: 0; }

/* ── US IMAGES ── */
.us-images {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow);
}
.us-images h3 {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}

/* ── UNIFORM IMAGE PANEL (opt-in) ──
   Ultrasound stills arrive at whatever aspect ratio the machine exported. In a
   plain grid each cell takes its own image's height, so rows come out ragged
   and images float at different offsets — obvious as soon as a panel holds more
   than three or four.

   `.image-grid.uniform` gives every cell the same height and letterboxes the
   image against a dark backdrop, which reads as part of the scan rather than as
   empty space. Wrap each image in `.us-figure` to caption it: plane and mode
   only, never the finding, since the panel is shown before the learner answers. */
.image-grid.uniform { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* One image or clip on its own. A full-width column would stretch a 4:3 scan
   across 800px and pad the sides with black, so the column is capped and
   centred instead and the media keeps its own proportions.

   Both halves matter. Capping the column alone is not enough: the media still
   needs height:auto, or it keeps whatever fixed height it inherited and
   letterboxes inside the narrower column. */
.image-grid.solo {
  grid-template-columns: minmax(0, 660px);
  justify-content: center;
}
.image-grid.solo .us-figure img.us-thumb,
.image-grid.solo .us-figure video.us-clip {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}

.us-figure { display: flex; flex-direction: column; gap: 7px; margin: 0; }

/* On its own a figure keeps its natural proportions — nothing to line up with,
   so forcing a height would only letterbox it. */
.us-figure img.us-thumb {
  width: 100%;
  height: auto;
  background: #0b0f14;
  border-radius: 8px;
  display: block;
}

/* Inside a `uniform` grid the cells share one height so the rows line up, and
   the image is letterboxed to fit. That trade only pays when there is more than
   one cell — see `.image-grid.solo` below for the single-item case. */
.image-grid.uniform .us-figure img.us-thumb { height: 195px; object-fit: contain; }
.us-figure figcaption {
  font-size: .74rem;
  line-height: 1.4;
  color: var(--ink-3);
}

/* A sub-heading inside an image panel, for splitting one panel into groups
   (longitudinal / transverse, left / right). */
.step-images h4 {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin: 20px 0 10px;
}
.step-images h4:first-of-type { margin-top: 0; }

@media (max-width: 700px) {
  .image-grid.uniform .us-figure img.us-thumb,
  .image-grid.uniform .us-figure video.us-clip { height: 165px; }
}

/* ── CINE LOOPS ──
   A <video class="us-clip"> behaves like an image in the grid: same cell size,
   same dark backdrop, click to open full size. It plays silently on repeat with
   no controls, so it reads as part of the scan rather than as embedded media —
   the engine gives it controls and stops the autoplay for anyone who has asked
   their system to reduce motion.

   MP4 (H.264) only. AVI will not play in any browser and MOV only sometimes. */
video.us-clip {
  width: 100%;
  border-radius: 8px;
  background: #0b0f14;
  display: block;
  cursor: zoom-in;
  transition: filter .15s;
}
video.us-clip:hover { filter: brightness(1.05); }
.image-grid.uniform .us-figure video.us-clip { height: 195px; object-fit: contain; }


#usLightboxVideo {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  background: #000;
  cursor: default;
}

/* ── CLICK-TO-EXPAND ULTRASOUND IMAGES ── */
.us-thumb { cursor: zoom-in; transition: filter .15s, transform .15s; }
.us-thumb:hover { filter: brightness(1.05); }
#usLightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.88);
  align-items: center; justify-content: center;
  padding: 32px; cursor: zoom-out;
}
#usLightbox.open { display: flex; }
#usLightbox img {
  max-width: 96vw; max-height: 92vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
  cursor: default;
}
#usLightboxClose {
  position: absolute; top: 18px; right: 24px;
  background: rgba(255,255,255,.12); color: #fff; border: none;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#usLightboxClose:hover { background: rgba(255,255,255,.24); }
#usLightboxCaption {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .85rem; background: rgba(0,0,0,.5);
  padding: 6px 16px; border-radius: 16px; max-width: 90vw; text-align: center;
}
#usLightboxCaption:empty { display: none; }

.image-slot {
  background: var(--surface-2);
  border-radius: 8px;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--border-strong);
  gap: 8px;
}
.image-slot svg { opacity: .35; }
.image-slot span { font-size: .75rem; color: var(--ink-3); text-align: center; padding: 0 12px; }

/* ── QUESTIONS ── */
.question-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  transition: box-shadow .2s;
}
.question-block.answered { border-color: var(--border-strong); }

.q-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.q-num {
  background: var(--navy);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  margin-top: 2px;
  flex-shrink: 0;
}
.q-text {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink);
}
.q-instruction {
  font-size: .78rem;
  color: var(--ink-3);
  margin-bottom: 14px;
  font-style: italic;
}

/* ── OPTIONS ── */
.options { display: flex; flex-direction: column; gap: 8px; }
.option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--bg);
}
.option:hover:not(.disabled) { border-color: var(--navy); background: var(--teal-light); }
[data-theme="dark"] .option:hover:not(.disabled) { background: #1a2e45; }
.option.disabled { cursor: default; }

.option-marker {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  transition: all .15s;
}
/* single answer */
.option.selected   .option-marker { border-color: var(--navy); background: var(--navy); color: #fff; }
.option.correct    .option-marker { border-color: #16a34a; background: #16a34a; color: #fff; }
.option.incorrect  .option-marker { border-color: #dc2626; background: #dc2626; color: #fff; }
.option.revealed   .option-marker { border-color: #16a34a; background: var(--success-light); color: #16a34a; }

.option.correct  { border-color: #16a34a; background: #f0fdf4; }
.option.incorrect{ border-color: #dc2626; background: #fef2f2; }
.option.revealed { border-color: #16a34a; background: #f0fdf4; }
[data-theme="dark"] .option.correct  { background: #052e16; border-color: #16a34a; }
[data-theme="dark"] .option.incorrect{ background: #2a0a0a; border-color: #dc2626; }
[data-theme="dark"] .option.revealed { background: #052e16; border-color: #16a34a; }

/* checkbox style for multi */
.option.multi .option-marker { border-radius: 4px; }

.option-text { font-size: .9rem; line-height: 1.5; flex: 1; }

/* ── EXPLANATION ── */
.explanation {
  margin-top: 10px;
  padding: 11px 14px;
  background: var(--teal-light);
  border-radius: 7px;
  font-size: .82rem;
  color: var(--ink-2);
  line-height: 1.6;
  display: none;
}
[data-theme="dark"] .explanation { background: #1a2e45; }
.explanation.show { display: block; }
.explanation strong { color: var(--ink); }
/* Links inside an explanation. There is no global `a` rule, so without this a
   citation link falls back to the browser default blue, which is close to
   unreadable on the dark-theme explanation background. `inherit` takes the
   surrounding --ink-2, which is already theme-aware, so weight and underline
   are what mark it as a link. */
.explanation a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}
.explanation a:hover { color: var(--navy); }
[data-theme="dark"] .explanation a:hover { color: var(--ink); }

/* ── SUBMIT BTN ── */
.q-footer { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.submit-btn {
  background: var(--navy); color: #fff; border: none;
  padding: 8px 18px; border-radius: 7px; font-size: .85rem;
  font-weight: 600; cursor: pointer; transition: opacity .2s;
  font-family: inherit;
}
.submit-btn:hover { opacity: .85; }
.submit-btn:disabled { opacity: .4; cursor: not-allowed; }
.q-result { font-size: .82rem; font-weight: 600; }
.q-result.ok  { color: #16a34a; }
.q-result.err { color: #dc2626; }

/* ── STEP NAVIGATION ── */
/* During the wizard, only the active step is shown. After final submit,
   body gets .review-mode and every question/explanation is shown together. */
.step { display: none; }
.step.active { display: block; }
body.review-mode .step { display: block; }
body.review-mode #stepNav { display: none; }
/* In review mode, un-pin the vignette and show its full text inline */
body.review-mode .vignette.pinned { position: static; }
body.review-mode .vignette .vignette-full { display: block; }
body.review-mode .vignette .vignette-lead,
body.review-mode .vignette-toggle { display: none; }

.step-images {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.step-images h3 {
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3); margin: 0 0 14px;
}

.step-nav {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; margin: 20px 0 8px;
}
.step-nav .nav-warning {
  font-size: .82rem; color: #dc2626; margin-right: auto; display: none;
}
.next-btn {
  background: var(--navy); color: #fff; border: none;
  padding: 10px 28px; border-radius: 7px; font-size: .92rem;
  font-weight: 600; cursor: pointer; transition: opacity .2s;
  font-family: inherit;
}
.next-btn:hover { opacity: .85; }
/* locked options after advancing */
.option.locked { cursor: default; pointer-events: none; }

/* ── FINAL RESULT ── */
#finalResult {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px;
  margin-top: 20px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
#finalResult.show { display: block; }
#finalResult .score-big {
  font-family: 'Source Serif 4', serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
}
[data-theme="dark"] #finalResult .score-big { color: #7bb3d4; }
#finalResult .score-label { font-size: .9rem; color: var(--ink-3); margin-bottom: 18px; }
#finalResult .final-explanation {
  text-align: left;
  background: var(--teal-light);
  border-radius: 9px;
  padding: 16px 18px;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 20px;
}
[data-theme="dark"] #finalResult .final-explanation { background: #1a2e45; }
.retry-btn {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--navy);
  padding: 8px 20px; border-radius: 7px;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: all .2s; font-family: inherit; margin-right: 8px;
}
.retry-btn:hover { background: var(--navy); color: #fff; }
[data-theme="dark"] .retry-btn { color: #7bb3d4; border-color: #7bb3d4; }
[data-theme="dark"] .retry-btn:hover { background: #7bb3d4; color: #0f172a; }
.back-btn {
  background: var(--navy); color: #fff; border: none;
  padding: 8px 20px; border-radius: 7px;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: opacity .2s; font-family: inherit;
}
.back-btn:hover { opacity: .85; }


/* ── Score-save status notice (injected into #finalResult by the engine) ─── */
#saveStatus {
  display: none;
  text-align: left;
  border-radius: 9px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: .85rem;
  line-height: 1.65;
}
#saveStatus.show { display: block; }

#saveStatus.ok {
  background: var(--teal-light);
  color: var(--ink-2);
}

#saveStatus.error {
  background: #fdf1ee;
  border: 1px solid #e3b1a5;
  color: #8a3624;
}
[data-theme="dark"] #saveStatus.error {
  background: #3b201a;
  border-color: #7c4235;
  color: #f1b9ab;
}

#saveStatus .save-actions { margin: 12px 0 4px; }
#saveStatus .save-retry-btn {
  background: transparent;
  color: #8a3624;
  border: 1.5px solid #8a3624;
  padding: 6px 16px;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
#saveStatus .save-retry-btn:hover:not(:disabled) { background: #8a3624; color: #fff; }
#saveStatus .save-retry-btn:disabled { opacity: .55; cursor: default; }
[data-theme="dark"] #saveStatus .save-retry-btn { color: #f1b9ab; border-color: #f1b9ab; }
[data-theme="dark"] #saveStatus .save-retry-btn:hover:not(:disabled) { background: #f1b9ab; color: #2a1512; }

#saveStatus .save-contact { display: block; font-size: .8rem; opacity: .9; }
#saveStatus .save-contact a { color: inherit; }

/* Per-case provenance line. Sits at the foot of the case, below the result
   panel and above the site footer. Populated by rheumwave-case-engine.js from
   the `developed` field in rheumwave-cases.js; hidden when that field is absent. */
.case-credit {
  text-align: center;
  font-size: .78rem;
  color: var(--ink-3);
  margin: 32px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}