/* EMBER scenario decision-sim player — dark, calm, decision-focused. */
:root {
  --bg: #0e1116; --panel: #161b22; --panel2: #1c232d; --line: #2a323d;
  --ink: #e7edf3; --muted: #93a1b0; --brand: #ff7a3c; --brand2: #7ec9ff;
  --good: #3fb950; --bad: #f85149; --partial: #d29922;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.topbar {
  display: flex; align-items: center; gap: 18px; padding: 16px 24px;
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #11161d, #0e1116);
}
.topbar .back { color: var(--brand2); text-decoration: none; font-size: 14px; white-space: nowrap; }
.topbar .back:hover { text-decoration: underline; }
.title-wrap h1 { margin: 0; font-size: 18px; letter-spacing: .2px; }
.title-wrap .sub { color: var(--muted); font-size: 13px; }
.wrap { max-width: 820px; margin: 0 auto; padding: 28px 20px 64px; }
.loading, .empty { color: var(--muted); padding: 48px 8px; text-align: center; }

/* List */
.sim-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .sim-grid { grid-template-columns: 1fr 1fr; } }

/* ── Scenario carousel (coverflow) — one scenario front-and-centre ──────── */
.sim-carousel { position: relative; height: 540px; margin: 16px 0 4px; perspective: 1700px; }
.sim-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.sim-carousel .sim-card {
  position: absolute; top: 47%; left: 50%; width: 440px; max-width: 86vw;
  transform: translate(-50%, -50%);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s, box-shadow .3s, filter .3s;
  will-change: transform, opacity; box-shadow: 0 14px 40px -18px rgba(0,0,0,.6);
}
.sim-carousel .sim-card:hover { transform: translate(-50%, -50%); }        /* JS owns the transform */
.sim-carousel .sim-card.active { border-color: var(--brand); box-shadow: 0 34px 80px -26px rgba(0,0,0,.8), 0 0 0 1px var(--brand); }
.sim-carousel .sim-card:not(.active) { filter: saturate(.82) brightness(.78); }
.sim-carousel .sim-card:not(.active):hover { filter: saturate(1) brightness(.92); }
.sim-begin { display: none; margin-top: 4px; align-self: flex-start; font-weight: 800; font-size: 13.5px;
  color: #1a1206; background: linear-gradient(135deg, var(--brand,#ff7a18), #ffb020); padding: 9px 15px; border-radius: 9px; }
.sim-card.active .sim-begin { display: inline-block; }
.sim-best { font-size: 12.5px; font-weight: 700; color: var(--amber, #e0a13a); }
.sim-best.pass { color: var(--good, #3fb950); }
.sim-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 40;
  width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.sim-arrow svg { width: 20px; height: 20px; display: block; }
.sim-arrow:active { transform: translateY(-50%) scale(.97); }
.sim-arrow:focus-visible { outline: 2px solid var(--brand,#ff7a18); outline-offset: 3px; }
/* A matched, polished pair of controls. Dark glass at rest; a warm accent FILL on
   hover (the accent is transient, so the arrows never compete with the orange
   "Begin scenario" CTA). Symmetric, perfectly-centred chevrons (see sim.js paths).
   Scoped to .sim-carousel so it beats any global `.next` button rule. */
.sim-carousel .sim-arrow.prev, .sim-carousel .sim-arrow.next {
  border-radius: 50%;
  background: rgba(13,17,24,.58);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09);
}
.sim-carousel .sim-arrow.prev:hover, .sim-carousel .sim-arrow.next:hover {
  background: var(--brand,#ff7a18); border-color: var(--brand,#ff7a18); color: #160a04;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 28px -8px rgba(255,122,24,.5);
}
.sim-arrow.prev { left: 16px; } .sim-arrow.next { right: 16px; }
@media (max-width: 680px){ .sim-arrow { width: 42px; height: 42px; } .sim-arrow.prev { left: 8px; } .sim-arrow.next { right: 8px; } }
.sim-dots { display: flex; gap: 8px; justify-content: center; padding: 4px 0 16px; }
.sim-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(155,167,181,.32);
  cursor: pointer; transition: width .2s, background .2s; }
.sim-dot.on { width: 22px; border-radius: 5px; background: var(--brand,#ff7a18); }
@media (max-width: 680px) { .sim-carousel { height: 500px; } .sim-carousel .sim-card { width: 320px; } }
.sim-card {
  display: flex; flex-direction: column; text-align: left; cursor: pointer; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 0; color: var(--ink); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.sim-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.sim-card:focus-visible { outline: 2px solid var(--brand2); outline-offset: 2px; }
/* Preview thumbnail — the card's inviting "what's in here" image */
.sim-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, #1c232d, #11161d); border-bottom: 1px solid var(--line);
}
.sim-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .25s, transform .25s; }
.sim-card:hover .sim-thumb img { transform: scale(1.04); }
.sim-thumb.noimg img { display: none; }
.sim-thumb.noimg::after { content: "🔥"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; opacity: .45; }
.sim-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.sim-comp { color: var(--brand2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.sim-title { font-size: 17px; font-weight: 600; }
.sim-intro { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sim-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.sim-meta .done-tag { color: var(--good); font-weight: 600; }
/* Completed = desaturated, dimmed thumbnail ("I've been here"). Hover restores
   colour and reveals a Replay hint so it stays re-playable. */
.sim-card.done .sim-thumb img { filter: grayscale(1) brightness(.6) contrast(.95); }
.sim-card.done:hover .sim-thumb img { filter: grayscale(0) brightness(1); }
.sim-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: rgba(14,17,22,.82); border: 1px solid var(--line);
}
.sim-badge.pass { color: var(--good); border-color: var(--good); }
.sim-badge.review { color: var(--partial); border-color: var(--partial); }
.sim-replay {
  position: absolute; left: 8px; bottom: 8px; z-index: 2; font-size: 11px; font-weight: 700; color: var(--ink);
  padding: 3px 9px; border-radius: 999px; background: rgba(14,17,22,.72); border: 1px solid var(--line);
  opacity: 0; transition: opacity .15s;
}
.sim-card.done:hover .sim-replay { opacity: 1; }

/* Stage */
.stage { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.crumbs { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.crumbs a { color: var(--brand2); text-decoration: none; font-size: 13px; }
.crumbs .progress { color: var(--muted); font-size: 12px; }
.intro { color: var(--muted); font-size: 14px; border-left: 3px solid var(--brand); padding-left: 12px; margin: 0 0 18px; }
.scene-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel2); margin: 0 0 18px; display: block; }
.scene-img.ph { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scene-img.ph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-cap { position: relative; z-index: 1; color: var(--ink); font-size: 13px; background: rgba(14,17,22,.55); padding: 6px 12px; border-radius: 8px; max-width: 82%; text-align: center; }
.prompt { font-size: 20px; line-height: 1.35; margin: 0 0 18px; }
.options { display: grid; gap: 10px; }
.opt {
  text-align: left; cursor: pointer; background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 15px;
  transition: border-color .12s, background .12s;
}
.opt:hover:not(:disabled) { border-color: var(--brand2); background: #20293440; }
.opt:disabled { opacity: .7; cursor: default; }
/* Neutral committed state — between choosing and the reveal, while the
   confidence prompt is up. Deliberately verdict-free. */
.opt.picked { border-color: var(--brand2); box-shadow: 0 0 0 1px var(--brand2) inset; opacity: 1; }
.opt.picked-good { border-color: var(--good); box-shadow: 0 0 0 1px var(--good) inset; }
.opt.picked-bad { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad) inset; }
/* Reviewer "reveal answers" mode (staff/demo only): mark the correct path up-front. */
.opt.opt-reveal-correct { border-color: var(--good); box-shadow: 0 0 0 1px var(--good) inset; }
.opt.opt-reveal-partial { border-color: #c9a227; }
.opt-reveal-badge { float: right; margin-left: 10px; font-size: 12px; font-weight: 700; color: var(--good); background: #0f3d24; border: 1px solid var(--good); border-radius: 999px; padding: 1px 9px; }
.opt-reveal-badge.partial { color: #e8c44a; background: #3a2f0a; border-color: #c9a227; }

/* Reviewer-only "show all outcome images" gallery — compare the scene + every
   option's outcome (correct, partial, wrong) at once instead of walking the branch.
   Only rendered when sim.js is in REVIEW_MODE (admin or Course Reviewer only). */
.review-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.review-all-btn { cursor: pointer; background: var(--panel2); color: var(--brand2); border: 1px solid var(--brand2);
  border-radius: 9px; padding: 9px 15px; font-size: 13px; font-weight: 700; }
.review-all-btn:hover { background: #20293440; }
.review-tools-hint { color: var(--muted); font-size: 12px; }
.review-gallery { margin-top: 14px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rg-item { margin: 0; position: relative; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.rg-item.ok { border-color: var(--good); }
.rg-item.partial { border-color: var(--partial); }
.rg-item.wrong { border-color: var(--bad); }
.rg-item.scene { border-color: var(--brand2); }
.rg-tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; margin-bottom: 7px; }
.rg-tag.ok { color: var(--good); background: #0f3d24; border: 1px solid var(--good); }
.rg-tag.partial { color: #e8c44a; background: #3a2f0a; border: 1px solid var(--partial); }
.rg-tag.wrong { color: #ff9aa8; background: #4a1620; border: 1px solid var(--bad); }
.rg-tag.scene { color: var(--brand2); background: #102a3a; border: 1px solid var(--brand2); }
.rg-choice { font-size: 13px; font-weight: 600; margin-bottom: 8px; line-height: 1.35; }
.rg-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; background: var(--bg); }
.rg-cap { color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 7px; }

/* Consequence */
.consequence { margin-top: 18px; border-radius: 12px; padding: 16px 18px; border: 1px solid var(--line); background: var(--panel2); }
.consequence.good { border-color: var(--good); }
.consequence.bad { border-color: var(--bad); }
.consequence.partial { border-color: var(--partial); }
/* Confidence-first holding state: no verdict colour yet — just the prompt. */
.consequence.pending { border-color: var(--brand2); }
.outcome-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); margin: 0 0 12px; display: block; }
.consequence .verdict { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.consequence.good .verdict { color: var(--good); }
.consequence.bad .verdict { color: var(--bad); }
.consequence.partial .verdict { color: var(--partial); }
.consequence p { margin: 0 0 10px; }
.cite { color: var(--muted); font-size: 12px; font-style: italic; margin-bottom: 12px; }
.calib { margin: 0 0 12px; padding: 9px 13px; border-left: 3px solid var(--brand2); background: var(--panel2); border-radius: 8px; color: var(--ink); font-size: 13px; }
.confidence-mount { padding: 2px 0; }
.next {
  cursor: pointer; background: var(--brand); color: #160a04; border: 0; font-weight: 700;
  border-radius: 9px; padding: 10px 18px; font-size: 14px;
}
.next:hover { filter: brightness(1.08); }

/* Learning-analytics consent notice (small print under the scenario list). */
.analytics-consent {
  margin: 22px auto 6px; max-width: 760px;
  background: var(--panel2, #1c232d); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; color: var(--muted); font-size: 13px; line-height: 1.5;
}
.analytics-consent p { margin: 0; }
.analytics-consent b { color: var(--ink); font-weight: 700; }
.analytics-consent a { color: var(--brand2, #7ec9ff); }
.analytics-consent.slim { padding: 9px 14px; font-size: 12px; text-align: center; }
.ac-actions { display: flex; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.ac-ok, .ac-no, .ac-toggle {
  cursor: pointer; font: inherit; font-size: 12.5px; border-radius: 8px; padding: 7px 14px; border: 1px solid var(--line);
}
.ac-ok { background: var(--brand); color: #160a04; border-color: var(--brand); font-weight: 700; }
.ac-ok:hover { filter: brightness(1.08); }
.ac-no { background: transparent; color: var(--muted); }
.ac-no:hover { color: var(--ink); border-color: var(--muted); }
.ac-toggle { background: transparent; color: var(--brand2, #7ec9ff); border: 0; padding: 0 2px; text-decoration: underline; }

/* Result */
.result { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; text-align: center; }
.ember-cheer { line-height: 0; margin: 0 0 6px; }
.ember-cheer svg { filter: drop-shadow(0 6px 14px rgba(255,122,24,.22)); }
.score-ring { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 16px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border: 6px solid var(--line); }
.score-ring.pass { border-color: var(--good); }
.score-ring.fail { border-color: var(--partial); }
.score-ring b { font-size: 30px; }
.score-ring span { font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.result h2 { margin: 6px 0 10px; font-size: 20px; }
.debrief { color: var(--muted); font-size: 14px; max-width: 600px; margin: 0 auto 18px; border-left: 3px solid var(--brand); padding-left: 12px; text-align: left; }
.recap { list-style: none; padding: 0; margin: 0 auto 18px; max-width: 620px; text-align: left; display: grid; gap: 6px; }
.recap li { font-size: 14px; padding: 8px 12px; border-radius: 8px; background: var(--panel2); border-left: 3px solid var(--line); }
.recap li.good { border-left-color: var(--good); }
.recap li.bad { border-left-color: var(--bad); }
.recap li.partial { border-left-color: var(--partial); }
.recap b { color: var(--brand2); margin-right: 6px; }
.mastery { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.actions button, .actions .course {
  cursor: pointer; border-radius: 9px; padding: 10px 18px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.again { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); }
.more { background: var(--brand); color: #160a04; border: 0; }
.course { background: transparent; color: var(--brand2); border: 1px solid var(--line); display: inline-flex; align-items: center; }

/* Image codes — hidden for everyone except admin + Course Reviewer (body.codes-on).
   The badge sits on each scene/outcome image so an admin can quote the code to request a re-render of that exact image. */
.img-wrap { position: relative; display: block; }
.img-code { display: none; }
body.codes-on .img-code {
  display: inline-block; position: absolute; left: 8px; top: 8px; z-index: 6;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(14, 18, 24, 0.82); color: #ffd9a8; border: 1px solid rgba(255, 150, 60, 0.55);
  font: 11px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: 2px 7px; border-radius: 6px;
  cursor: pointer; opacity: 0.6; transition: opacity 0.12s ease, background 0.12s ease; user-select: all;
}
body.codes-on .img-wrap:hover .img-code { opacity: 1; background: rgba(14, 18, 24, 0.96); }

/* Teach-before-test primer (decision 1) + reteach panel (failed run) */
.sim-brief {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--brand2);
  border-radius: 12px; padding: 4px 16px 12px; margin: 0 0 18px;
}
.sim-brief summary {
  cursor: pointer; padding: 10px 0 6px; font-weight: 600; color: var(--brand2);
  list-style-position: inside;
}
.sim-brief ul { margin: 6px 0 10px; padding-left: 22px; color: var(--muted); }
.sim-brief li { margin: 4px 0; }
.sim-brief .brief-link { color: var(--brand2); font-size: 14px; text-decoration: none; }
.sim-brief .brief-link:hover { text-decoration: underline; }

.sim-reteach {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--partial);
  border-radius: 12px; padding: 14px 18px; margin: 16px 0; text-align: left;
}
.sim-reteach h3 { margin: 0 0 8px; font-size: 15px; color: var(--partial); }
.sim-reteach .reteach-eli5 { color: var(--ink); margin: 6px 0 8px; }
.sim-reteach ul { margin: 6px 0 10px; padding-left: 22px; color: var(--muted); }
.sim-reteach li { margin: 4px 0; }

/* ─────────────────────────────────────────────────────────────────────────
   LIGHT-MODE COLOUR OVERRIDES (site-wide light/dark toggle)
   Dark is the default; every rule above is left untouched. These rules only
   apply under :root[data-theme="light"] and fix hardcoded DARK grounds /
   light-on-light text that don't switch via var(). Soft rgba(0,0,0) shadows
   and glass chips that sit over photographic scene images are intentionally
   kept dark for legibility.
   ───────────────────────────────────────────────────────────────────────── */

/* Dark gradient bars/fills → light gradients */
:root[data-theme="light"] .topbar { background: linear-gradient(180deg, var(--panel), var(--bg)); }
:root[data-theme="light"] .sim-thumb { background: linear-gradient(135deg, var(--panel2), var(--bg)); }

/* Floating carousel arrows in LIGHT mode: white glass + dark icon at rest, warm
   accent FILL on hover (matches dark mode). Higher specificity than the dark-mode
   scoped rules so it wins under [data-theme="light"]. */
:root[data-theme="light"] .sim-carousel .sim-arrow.prev,
:root[data-theme="light"] .sim-carousel .sim-arrow.next {
  background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.12); color: #1b2735;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.7);
}
:root[data-theme="light"] .sim-carousel .sim-arrow.prev:hover,
:root[data-theme="light"] .sim-carousel .sim-arrow.next:hover {
  background: var(--brand,#ff7a18); border-color: var(--brand,#ff7a18); color: #160a04;
}

/* Inactive pagination dots: light-grey glass vanishes (~1.3:1) on the light
   body ground → darken to the light --muted so they keep the dark-mode subtlety */
:root[data-theme="light"] .sim-dot { background: rgba(90, 103, 117, .45); }

/* Dark hover overlays on light option / review buttons */
:root[data-theme="light"] .opt:hover:not(:disabled) { background: rgba(43, 108, 176, .10); }
:root[data-theme="light"] .review-all-btn:hover { background: rgba(43, 108, 176, .10); }

/* Glass captions/badges kept dark over an image: force their text to stay light */
:root[data-theme="light"] .ph-cap,
:root[data-theme="light"] .sim-replay { color: #e7edf3; }

/* Reviewer status pills: dark tinted grounds → light tints, text kept readable */
:root[data-theme="light"] .opt-reveal-badge,
:root[data-theme="light"] .rg-tag.ok { background: #e3f3e8; }
:root[data-theme="light"] .rg-tag.scene { background: #e2edf7; }
:root[data-theme="light"] .rg-tag.wrong { background: #fbe4e6; color: var(--bad); }
:root[data-theme="light"] .opt-reveal-badge.partial,
:root[data-theme="light"] .rg-tag.partial { background: #f6ecc9; color: var(--partial); }
:root[data-theme="light"] .opt-reveal-badge.partial { border-color: var(--partial); }

/* estimated-time pill on every scenario card */
.time-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#ffb14a;background:rgba(255,122,24,.13);border:1px solid rgba(255,122,24,.35);border-radius:999px;padding:2px 9px;vertical-align:middle;white-space:nowrap}

/* decision progress: pill + slim bar */
.crumbs .progress{display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:#ffb14a;background:rgba(255,122,24,.12);border:1px solid rgba(255,122,24,.3);border-radius:999px;padding:4px 12px;white-space:nowrap}
.sim-prog{height:5px;border-radius:3px;background:var(--line,#2a323d);overflow:hidden;margin:10px 0 14px}
.sim-prog i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#ff7a18,#ffb020);transition:width .25s ease}