/* ============================================================================
   SCENARIO CARD
   Readability: short paragraphs, a comfortable line length (~68 characters),
   real lists, the question set apart from the story, lettered answer choices.
   Highlight colors themselves live in highlight.js (it injects its own CSS).
   ============================================================================ */
.case-shell{background:#080B10;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:18px;}
.case-header{padding:14px 20px;background:#0E141F;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.case-header .case-file-tag{font-family:var(--mono);font-size:11.5px;color:var(--teal);letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(79,209,197,.4);background:rgba(79,209,197,.08);padding:4px 10px;border-radius:5px;}
.case-body{padding:26px 26px 28px;}

/* The story */
.case-brief{max-width:68ch;margin:0 0 26px;font-size:16px;line-height:1.75;color:#C3CCDA;}
.case-brief .case-p{margin:0 0 15px;}
.case-brief .case-p:last-child{margin-bottom:0;}
.case-brief .case-p.lede{font-size:17px;color:#E7ECF3;}
.case-brief b,.case-brief strong{color:#E7ECF3;}

/* Lists the loader found inside the text */
.case-list{list-style:none;margin:8px 0 18px;padding:0;counter-reset:cl;}
.case-list li{position:relative;margin:0 0 8px;padding:10px 14px 10px 48px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:9px;color:#D5DCE8;}
ol.case-list li{counter-increment:cl;}
ol.case-list li::before{content:counter(cl);position:absolute;left:12px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--amber);color:#0B0E14;font:800 12px/24px var(--mono);text-align:center;}
ul.case-list li::before{content:"";position:absolute;left:19px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--teal);}
.case-list-plain li{padding-left:16px;border-left:3px solid var(--teal);}
.case-list-plain li::before{display:none;}

/* The question: visually separate from the story */
.case-q{max-width:68ch;margin:0 0 16px;padding-top:20px;border-top:1px solid var(--border);font-size:17px;font-weight:700;line-height:1.5;color:#F3F6FB;}

/* Answer choices: lettered, roomy */
.case-options{display:flex;flex-direction:column;gap:10px;counter-reset:opt;max-width:760px;}
.case-opt{display:flex;align-items:flex-start;gap:12px;text-align:left;background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:10px;font-size:14.5px;line-height:1.5;cursor:pointer;font-family:var(--sans);transition:all .15s ease;}
.case-opt::before{counter-increment:opt;content:counter(opt,upper-alpha);flex:none;width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font:800 12px var(--mono);background:rgba(255,255,255,.07);border:1px solid var(--border);color:var(--text-muted);}
.case-opt-text{flex:1;min-width:0;}
.case-opt:hover{border-color:var(--amber);}
.case-opt.best{background:rgba(79,209,197,.12);border-color:var(--teal);}
.case-opt.partial{background:rgba(232,163,61,.12);border-color:var(--amber);}
.case-opt.weak{background:rgba(240,84,107,.12);border-color:var(--danger);}
.case-opt.best::before{background:var(--teal);border-color:var(--teal);color:#0B0E14;}
.case-opt.partial::before{background:var(--amber);border-color:var(--amber);color:#0B0E14;}
.case-opt.weak::before{background:var(--danger);border-color:var(--danger);color:#0B0E14;}

/* After answering */
.case-feedback{margin-top:14px;max-width:68ch;font-size:14.5px;line-height:1.65;color:#C3CCDA;display:none;padding-left:2px;}
.case-feedback .case-p{margin:0 0 10px;}
.case-feedback .case-p:last-child{margin-bottom:0;}
.case-feedback.show{display:block;}
.case-resolution{margin-top:18px;padding:16px 18px;border-radius:10px;border:1px solid var(--teal);background:rgba(79,209,197,.08);font-size:14.5px;line-height:1.7;color:var(--text);display:none;max-width:68ch;}
.case-resolution .case-p{margin:0 0 10px;}
.case-resolution .case-p:last-child{margin-bottom:0;}
.case-resolution.show{display:block;}
.case-resolution b{color:var(--teal);}

@media (max-width:560px){
  .case-body{padding:20px 16px 22px;}
  .case-brief{font-size:15.5px;}
}