/* Entry I Case Lab v1.0 */
.case-hero{
  padding:110px 0 88px;
  background:
    radial-gradient(circle at 78% 35%,rgba(226,183,94,.09),transparent 30%),
    linear-gradient(180deg,#071a27,#06131d);
  border-bottom:1px solid rgba(225,236,243,.12);
}
.case-hero-grid{
  display:grid;
  grid-template-columns:1.15fr .55fr;
  gap:60px;
  align-items:end;
}
.case-hero h1{
  max-width:900px;
  margin:8px 0 18px;
  font:600 clamp(50px,6vw,84px)/.96 var(--serif);
  letter-spacing:-.035em;
}
.case-hero p{
  max-width:760px;
  color:#aebbc4;
  font-size:15px;
  line-height:1.7;
}
.case-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.case-hero-note{
  padding:22px;
  border:1px solid rgba(225,236,243,.14);
  border-radius:14px;
  background:rgba(5,18,27,.7);
}
.case-hero-note span{
  color:var(--warm);font-size:9px;letter-spacing:.14em
}
.case-hero-note strong{
  display:block;margin-top:10px;font:600 24px/1.05 var(--serif)
}
.case-hero-note p{font-size:12px;margin:9px 0 0}

.case-picker-section{
  padding:76px 0 54px;
  background:#081a25;
}
.case-section-head{
  display:grid;grid-template-columns:1fr .7fr;gap:40px;align-items:end;margin-bottom:28px
}
.case-section-head h2{
  margin:7px 0 0;font:600 clamp(40px,5vw,62px)/1 var(--serif)
}
.case-section-head>p{margin:0;color:#94a7b2;font-size:13px;line-height:1.65}
.case-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.case-choice{
  appearance:none;
  min-height:280px;
  padding:22px;
  position:relative;
  text-align:left;
  color:#edf2f5;
  cursor:pointer;
  border:1px solid rgba(225,236,243,.14);
  border-radius:14px;
  background:linear-gradient(160deg,#0a202e,#071923);
  transition:transform .2s,border-color .2s,background .2s;
}
.case-choice:hover{transform:translateY(-3px);border-color:rgba(226,183,94,.4)}
.case-choice.active{
  border-color:rgba(226,183,94,.65);
  background:
    radial-gradient(circle at 86% 16%,rgba(226,183,94,.08),transparent 32%),
    linear-gradient(160deg,#0d2634,#081a27);
}
.case-no{float:right;color:#58717f;font-size:9px}
.case-icon{
  display:grid;place-items:center;width:50px;height:50px;margin:3px 0 54px;
  border:1px solid rgba(226,183,94,.25);border-radius:13px;
  color:#f0d99e;font-size:23px
}
.case-choice strong{display:block;font:600 28px/1.04 var(--serif)}
.case-choice p{margin:10px 0 0;color:#93a6b1;font-size:12px;line-height:1.6}
.case-choice b{position:absolute;left:22px;bottom:21px;color:#dfc178;font-size:10px}

.case-play-section{
  padding:46px 0 82px;background:#05131d;border-bottom:1px solid rgba(225,236,243,.10)
}
.case-player{
  overflow:hidden;
  border:1px solid rgba(225,236,243,.15);
  border-radius:18px;
  background:
    radial-gradient(circle at 73% 36%,rgba(143,200,225,.06),transparent 34%),
    linear-gradient(180deg,#081d2a,#06151f);
}
.case-player-top{
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;
  padding:28px 30px;
  border-bottom:1px solid rgba(225,236,243,.09)
}
.case-player-kicker{color:var(--warm);font-size:9px;letter-spacing:.14em}
.case-player-top h2{margin:7px 0 8px;font:600 36px/1.03 var(--serif)}
.case-player-top p{margin:0;max-width:750px;color:#90a4af;font-size:12px}

.case-timeline{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
  padding:0;
}
.case-step{
  min-height:225px;padding:22px;
  border-right:1px solid rgba(225,236,243,.08);
  opacity:.38;
  transition:opacity .25s,background .25s
}
.case-step:last-child{border-right:0}
.case-step.active{opacity:1;background:rgba(225,236,243,.025)}
.case-step.done{opacity:.78}
.case-step>span{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(225,236,243,.16);color:#a7bac3;font-size:10px
}
.case-step.active>span{border-color:rgba(226,183,94,.5);color:#f0d99f}
.case-step small{display:block;margin-top:35px;color:#728a96;font-size:9px;letter-spacing:.13em}
.case-step h3{margin:7px 0 8px;font:600 23px/1.05 var(--serif)}
.case-step p{margin:0;color:#98aab3;font-size:12px;line-height:1.55}

.case-decision{
  padding:24px 28px;
  border-top:1px solid rgba(225,236,243,.10);
  background:rgba(4,16,24,.5)
}
.case-decision>div:first-child span{color:var(--warm);font-size:9px;letter-spacing:.14em}
.case-decision h3{margin:7px 0 6px;font:600 30px/1 var(--serif)}
.case-decision p{margin:0;color:#91a5af;font-size:12px}
.case-decision-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}
.case-decision-buttons button{
  appearance:none;padding:15px;text-align:left;cursor:pointer;
  border:1px solid rgba(225,236,243,.14);border-radius:9px;
  background:#071923;color:#edf2f5
}
.case-decision-buttons button:hover{border-color:rgba(226,183,94,.5)}
.case-decision-buttons strong{display:block;font-size:13px}
.case-decision-buttons span{display:block;margin-top:4px;color:#8096a1;font-size:10px}

.case-result{
  border-top:1px solid rgba(225,236,243,.1);
  background:#071923
}
.case-result-heading{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:18px
}
.case-result-heading>span{
  min-width:80px;padding:9px 10px;text-align:center;
  border:1px solid rgba(226,183,94,.4);border-radius:6px;
  color:#f0d99f;font-size:9px;font-weight:900;letter-spacing:.12em
}
.case-result-heading h3{margin:0;font:600 25px/1 var(--serif)}
.case-result-heading p{margin:4px 0 0;color:#879ba6;font-size:11px}
.case-result-picture{padding:0 18px 18px}
.result-screen{
  overflow:hidden;border:1px solid rgba(225,236,243,.14);border-radius:13px;
  background:linear-gradient(160deg,#0b2231,#081a27)
}
.result-screen-top{
  display:flex;justify-content:space-between;gap:20px;padding:11px 15px;
  border-bottom:1px solid rgba(225,236,243,.09);
  color:#8fa3ae;font-size:10px;text-transform:uppercase;letter-spacing:.1em
}
.result-screen-top b{color:#dfc17b}
.result-screen-main{
  min-height:150px;display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;padding:24px
}
.result-symbol{
  display:grid;place-items:center;width:54px;height:54px;
  border:1px solid rgba(143,200,225,.3);border-radius:14px;font-size:24px
}
.result-screen-main small{color:#8095a0;font-size:9px;letter-spacing:.12em}
.result-screen-main strong{display:block;margin-top:5px;font:600 30px/1.03 var(--serif)}
.result-screen-main p{margin:7px 0 0;color:#98aab3;font-size:12px}
.result-value{font:600 30px/1 var(--serif);color:#f0d99f}
.result-screen-foot{
  padding:12px 15px;border-top:1px solid rgba(225,236,243,.09);color:#879ba6;font-size:10px
}
.case-result-picture[data-result-kind="danger"] .result-screen{
  border-color:rgba(216,110,100,.45);
  background:linear-gradient(160deg,#26171b,#0c1921)
}
.case-result-picture[data-result-kind="danger"] .result-screen-top b,
.case-result-picture[data-result-kind="danger"] .result-value{color:#ef9b92}
.case-result-picture[data-result-kind="continue"] .result-screen-top b,
.case-result-picture[data-result-kind="continue"] .result-value{color:#a7dac4}
.case-result-picture[data-result-kind="stop"] .result-screen-top b,
.case-result-picture[data-result-kind="stop"] .result-value{color:#a7dac4}

.case-danger{
  appearance:none;width:calc(100% - 36px);margin:0 18px 18px;padding:14px 16px;
  display:flex;justify-content:space-between;gap:20px;
  border:1px solid rgba(216,110,100,.25);border-radius:9px;
  background:rgba(216,110,100,.035);color:#c5d2d8;cursor:pointer;text-align:left
}
.case-danger strong{color:#ed9a92}
.case-question-strip{
  margin-top:18px;padding:17px 20px;
  display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center;
  border:1px solid rgba(226,183,94,.18);border-radius:10px;background:rgba(226,183,94,.035)
}
.case-question-strip span{color:var(--warm);font-size:9px;letter-spacing:.13em}
.case-question-strip strong{font:600 20px/1.25 var(--serif)}

.case-challenge{
  padding:72px 0;background:#091a25
}
.case-challenge-grid{display:grid;grid-template-columns:1fr auto;gap:45px;align-items:center}
.case-challenge h2{margin:8px 0 10px;font:600 42px/1.02 var(--serif)}
.case-challenge p{margin:0;max-width:720px;color:#93a6b0;font-size:13px;line-height:1.65}
.case-challenge-actions{display:flex;gap:9px;flex-wrap:wrap}

@media(max-width:900px){
  .case-hero-grid,.case-section-head,.case-challenge-grid{grid-template-columns:1fr}
  .case-picker{grid-template-columns:1fr}
  .case-choice{min-height:220px}
  .case-icon{margin-bottom:35px}
  .case-timeline{grid-template-columns:1fr 1fr}
  .case-step:nth-child(2){border-right:0}
  .case-step{border-bottom:1px solid rgba(225,236,243,.08)}
}
@media(max-width:620px){
  .case-hero{padding:82px 0 58px}
  .case-hero h1{font-size:46px}
  .case-player-top{grid-template-columns:1fr;padding:21px 17px}
  .case-player-top .btn{width:100%}
  .case-timeline{grid-template-columns:1fr}
  .case-step{min-height:0;border-right:0;padding:18px}
  .case-step small{margin-top:22px}
  .case-decision{padding:20px 16px}
  .case-decision-buttons{grid-template-columns:1fr}
  .case-result-heading{grid-template-columns:1fr}
  .result-screen-main{grid-template-columns:50px 1fr}
  .result-value{grid-column:2}
  .case-question-strip{grid-template-columns:1fr;gap:7px}
  .case-challenge-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .case-step,.case-choice{transition:none!important}
}


/* ===== v1.6 Case Lab reading comfort ===== */
.case-player-kicker,
.case-step small,
.case-no,
.case-question-strip span,
.result-screen-main small{
  font-size:10px;
}
.case-choice p,
.case-player-top p,
.case-step p,
.case-decision p,
.result-screen-main p{
  font-size:13px;
  line-height:1.6;
}
.result-screen-foot{font-size:11px}


/* ===== v1.7.1 — reader-paced case controls ===== */
.case-reader-controls{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:12px 28px;
  border-bottom:1px solid rgba(225,236,243,.09);
  background:rgba(4,16,24,.38);
}
.case-reader-controls>div:first-child span{
  display:block;
  color:#e2b75e;
  font-size:9px;
  letter-spacing:.13em;
}
.case-reader-controls>div:first-child strong{
  display:block;
  margin-top:4px;
  color:#dbe5e9;
  font-size:12px;
}
.case-reader-controls>div:last-child{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.case-skip{
  appearance:none;
  border:0;
  background:transparent;
  color:#91a5b0;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  font-size:11px;
}
.case-skip:hover{color:#dbe5e9}
@media(max-width:620px){
  .case-reader-controls{
    flex-direction:column;
    align-items:stretch;
    padding:12px 16px;
  }
  .case-reader-controls>div:last-child{
    display:grid;
    grid-template-columns:1fr;
  }
  .case-reader-controls .btn,
  .case-skip{
    width:100%;
  }
}


/* ===== v1.7.2 — dark-surface button contrast fix ===== */
.story-reader-controls .btn.ghost,
.case-reader-controls .btn.ghost{
  border:1px solid rgba(220,232,238,.22)!important;
  background:rgba(7,27,39,.92)!important;
  color:#e5edf1!important;
  box-shadow:none!important;
}
.story-reader-controls .btn.ghost:hover,
.story-reader-controls .btn.ghost:focus-visible,
.case-reader-controls .btn.ghost:hover,
.case-reader-controls .btn.ghost:focus-visible{
  border-color:rgba(226,183,94,.62)!important;
  background:rgba(16,41,55,.98)!important;
  color:#fff7e6!important;
}
.story-reader-controls .btn.ghost[hidden],
.case-reader-controls .btn.ghost[hidden]{
  display:none!important;
}
.story-reader-controls .story-skip,
.case-reader-controls .case-skip{
  color:#aebfc8!important;
}
.story-reader-controls .story-skip:hover,
.story-reader-controls .story-skip:focus-visible,
.case-reader-controls .case-skip:hover,
.case-reader-controls .case-skip:focus-visible{
  color:#f0d99f!important;
}

.dark-control{
  background:#0b2232!important;
  color:#eaf1f4!important;
  border:1px solid rgba(223,233,238,.24)!important;
}
.dark-control:hover,
.dark-control:focus-visible{
  background:#123246!important;
  color:#fff8e8!important;
  border-color:#c9a65f!important;
}


/* ===== v1.7.3 — decision visibility ===== */
.case-decision{
  margin:14px 28px 18px!important;
  padding:18px 20px!important;
  border:1px solid rgba(226,183,94,.42)!important;
  border-radius:12px!important;
  background:
    linear-gradient(180deg,rgba(226,183,94,.08),rgba(7,27,39,.84))!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18)!important;
}
.case-decision>div:first-child>span{
  color:#e2b75e!important;
  letter-spacing:.14em!important;
}
.case-decision h3{color:#f3f5f4!important}
.case-decision p{color:#aebfc8!important}
.case-decision .decision-cue{
  margin:10px 0 12px;
  color:#f0d99f;
  font-size:11px;
  font-weight:700;
}
.case-decision-buttons button{
  min-height:78px!important;
  border:1px solid rgba(221,232,238,.20)!important;
  background:#0b2232!important;
  color:#eaf1f4!important;
}
.case-decision-buttons button:hover,
.case-decision-buttons button:focus-visible{
  border-color:#c9a65f!important;
  background:#123246!important;
  color:#fff8e8!important;
}
.case-decision-buttons button strong{color:#f4f1e8!important}
.case-decision-buttons button span{color:#aebfc8!important}

@media(max-width:620px){
  .case-decision{
    margin:12px 16px 16px!important;
    padding:16px!important;
  }
  .case-decision-buttons{
    grid-template-columns:1fr!important;
  }
}


/* ===== v1.7.4 — guided flow destination ===== */
[data-case-result-panel]{
  scroll-margin-top:72px;
}


/* ===== v1.7.5 — story/case ending handoff ===== */
.story-end,
.case-end{
  margin-top:18px;
  padding:20px;
  border:1px solid rgba(226,183,94,.26);
  border-radius:12px;
  background:
    radial-gradient(circle at 90% 10%,rgba(226,183,94,.07),transparent 30%),
    rgba(6,24,35,.72);
}
.story-end-copy span,
.case-end-copy span{
  color:#e2b75e;
  font-size:9px;
  letter-spacing:.14em;
}
.story-end-copy h3,
.case-end-copy h3{
  margin:7px 0 5px;
  color:#f0f3f4;
  font-size:22px;
}
.story-end-copy p,
.case-end-copy p{
  max-width:780px;
  margin:0;
  color:#aebfc8;
  font-size:13px;
  line-height:1.65;
}
.story-end-actions,
.case-end-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.end-action{
  appearance:none;
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:14px 15px;
  border:1px solid rgba(221,232,238,.17);
  border-radius:10px;
  background:#0b2232;
  color:#eaf1f4;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
}
.end-action:hover,
.end-action:focus-visible{
  border-color:#c9a65f;
  background:#123246;
  color:#fff8e8;
}
.end-action strong{
  color:inherit;
  font-size:13px;
}
.end-action span{
  color:#9fb1ba;
  font-size:11px;
  line-height:1.45;
}
.end-action.primary-end{
  border-color:rgba(226,183,94,.48);
  background:rgba(226,183,94,.09);
}
.end-action.primary-end strong{color:#f0d99f}

@media(max-width:720px){
  .story-end-actions,
  .case-end-actions{
    grid-template-columns:1fr;
  }
  .end-action{min-height:72px}
}


/* ===== v1.7.6 — focused completion ===== */
.case-player[data-phase="result"] .case-reader-controls,
.case-player[data-phase="result"] .case-timeline,
.case-player[data-phase="result"] [data-case-decision]{
  display:none!important;
}
.case-player[data-phase="result"] [data-case-result-panel]{
  margin-top:16px!important;
  outline:none!important;
}
.case-result-focus-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
  gap:14px;
  align-items:stretch;
  margin-top:14px;
}
.case-consequence-col,
.case-next-col{
  min-width:0;
}
.case-next-col .case-end{
  height:100%;
  margin-top:0!important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.case-next-col .case-end-actions{
  grid-template-columns:1fr!important;
}
.case-next-col .end-action{
  min-height:70px;
}
[data-case-result-panel]:focus-visible{
  outline:2px solid rgba(226,183,94,.72)!important;
  outline-offset:5px;
}
@media(max-width:860px){
  .case-result-focus-grid{
    grid-template-columns:1fr;
  }
  .case-next-col .case-end{
    height:auto;
  }
}


/* v2.1.1 — mobile result positioning */
@media(max-width:700px){
  [data-case-result-panel]{
    scroll-margin-top:18px;
  }
}


/* v2.3 — mobile case-selection clarity */
.mobile-case-cue{display:none}

@media(max-width:760px){
  .case-choice{
    position:relative!important;
    min-height:0!important;
    padding:18px 18px 48px!important;
    text-align:left!important;
  }

  .case-choice strong{
    font-size:clamp(27px,7.8vw,34px)!important;
  }

  .case-choice p{
    font-size:13px!important;
    line-height:1.5!important;
  }

  .case-choice b{
    bottom:16px!important;
  }

  .mobile-case-cue{
    display:block!important;
    position:absolute;
    right:16px;
    bottom:15px;
    color:#d7bd7a;
    font-size:9px;
    font-weight:800;
  }

  .case-choice.active .mobile-case-cue{
    color:#f0d99f;
  }
}


/* ==========================================================
   v2.3.2 — CASE LAB MOBILE CONTROL HARDENING
   Ensure reader-paced controls always receive taps.
   ========================================================== */
.case-reader-controls{
  position:relative;
  z-index:20;
  pointer-events:auto!important;
}

.case-reader-controls button,
.case-reader-controls .btn,
.case-skip,
[data-case-play],
[data-case-replay]{
  position:relative;
  z-index:21;
  pointer-events:auto!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(226,183,94,.18);
}

@media(max-width:700px){
  .case-reader-controls{
    scroll-margin-top:12px;
  }

  [data-case-decision]{
    scroll-margin-top:12px;
  }

  .case-reader-controls button,
  .case-reader-controls .btn,
  .case-skip,
  [data-case-play],
  [data-case-replay]{
    min-height:48px!important;
  }

  .case-reader-controls button:active,
  .case-reader-controls .btn:active,
  .case-skip:active,
  [data-case-play]:active,
  [data-case-replay]:active{
    transform:scale(.985);
  }
}


/* v2.4 — Case Lab: one obvious action at a time */
@media(max-width:700px){
  [data-case-auto],[data-case-replay]{
    min-height:38px!important;
    font-size:10px!important;
    opacity:.72;
  }
  [data-case-next]{
    min-height:52px!important;
    font-size:13px!important;
    font-weight:800!important;
  }
  .case-skip{margin-top:8px!important;font-size:10px!important}
  .case-reader-controls{gap:8px!important}
  .case-step{padding-top:16px!important;padding-bottom:16px!important}
}


/* v2.5 — reduce simultaneous mobile controls */
@media(max-width:700px){
  .case-reader-controls>div:last-child{
    width:100%!important;
  }
  [data-case-next]{
    order:-1;
  }
  .case-secondary-controls{
    margin-top:2px;
  }
}


/* v2.6 — focused case stage */
.case-change{
  margin-left:auto;
}
@media(max-width:700px){
  .case-player-top{
    position:relative;
  }
  .case-change{
    width:100%;
    margin-top:10px;
  }
}


/* ==========================================================
   v2.6.8 — CASE LAB READABILITY
   Raise instructional microcopy without changing the flow.
   ========================================================== */

.case-hero-note span,
.case-no,
.case-player-kicker,
.case-step small,
.case-decision>div:first-child span,
.case-result-heading>span,
.result-screen-main small,
.case-question-strip span{
  font-size:11px!important;
  line-height:1.35!important;
}

.case-choice b,
.case-step>span,
.case-decision-buttons span,
.result-screen-top,
.result-screen-foot{
  font-size:11px!important;
  line-height:1.4!important;
}

.case-player-top p,
.case-decision p,
.case-choice p{
  font-size:13px!important;
  line-height:1.55!important;
}

@media(max-width:700px){
  .case-player-kicker,
  .case-step small,
  .case-decision>div:first-child span{
    font-size:11px!important;
  }

  .case-decision-buttons span{
    font-size:12px!important;
  }
}


/* ==========================================================
   v2.7.1 — CASE LAB VISUAL FOCUS
   In focused mode, use the space beside the active step for
   meaningful case context rather than leaving three empty columns.
   ========================================================== */

.case-stage-visual{
  display:none;
  min-height:225px;
  padding:24px 26px;
  border-left:1px solid rgba(225,236,243,.08);
  background:
    radial-gradient(circle at 88% 12%,rgba(226,183,94,.08),transparent 26%),
    linear-gradient(145deg,rgba(10,35,49,.94),rgba(6,22,32,.98));
}

.case-stage-visual-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:17px;
  border-bottom:1px solid rgba(225,236,243,.09);
}

.case-stage-visual-top span{
  color:#8da4af;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}

.case-stage-visual-top strong{
  color:#e5c981;
  font-size:10px;
  letter-spacing:.08em;
}

.case-stage-visual-body{
  min-height:128px;
  display:grid;
  grid-template-columns:74px 1fr;
  gap:22px;
  align-items:center;
  padding:22px 0 18px;
}

.case-stage-visual-icon{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border:1px solid rgba(143,200,225,.24);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  color:#efd28b;
  font:600 30px/1 var(--serif);
}

.case-stage-visual-body small{
  display:block;
  color:#78909b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}

.case-stage-visual-body h3{
  margin:7px 0 7px;
  font:600 34px/1.02 var(--serif);
  color:#f2f5f6;
}

.case-stage-visual-body p{
  margin:0;
  max-width:650px;
  color:#9db0b9;
  font-size:13px;
  line-height:1.55;
}

.case-stage-visual-foot{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:20px;
  align-items:center;
  padding-top:14px;
  border-top:1px solid rgba(225,236,243,.09);
}

.case-stage-visual-foot span{
  color:#7d939e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
}

.case-stage-visual-foot strong{
  color:#cad7dc;
  font-size:12px;
  line-height:1.4;
}

/* The key fix: focused mode is a 32/68 split, not a four-column grid. */
body.case-lab-focus .case-timeline{
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.68fr)!important;
}

body.case-lab-focus .case-timeline .case-step.active{
  grid-column:1!important;
  min-height:280px!important;
  padding:26px!important;
  border-right:0!important;
  border-bottom:0!important;
}

body.case-lab-focus .case-timeline .case-step.active small{
  margin-top:42px!important;
}

body.case-lab-focus .case-stage-visual{
  display:block!important;
  grid-column:2!important;
  min-height:280px!important;
}

/* On final step, make the visual more consequential without using alarm styling. */
body.case-lab-focus .case-stage-visual[data-visual-stage="3"]{
  border-left-color:rgba(226,183,94,.18);
  background:
    radial-gradient(circle at 82% 10%,rgba(226,183,94,.11),transparent 28%),
    linear-gradient(145deg,rgba(12,36,49,.98),rgba(7,22,31,.98));
}

body.case-lab-focus .case-stage-visual[data-visual-stage="3"] .case-stage-visual-state{
  color:#f0d58f;
}

@media(max-width:900px){
  body.case-lab-focus .case-timeline{
    grid-template-columns:1fr!important;
  }

  body.case-lab-focus .case-timeline .case-step.active{
    grid-column:1!important;
    min-height:0!important;
  }

  body.case-lab-focus .case-stage-visual{
    grid-column:1!important;
    min-height:0!important;
    border-left:0!important;
    border-top:1px solid rgba(225,236,243,.08);
  }
}

@media(max-width:620px){
  .case-stage-visual{
    padding:18px!important;
  }

  .case-stage-visual-body{
    grid-template-columns:54px 1fr;
    gap:15px;
    min-height:0;
    padding:18px 0 15px;
  }

  .case-stage-visual-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    font-size:24px;
  }

  .case-stage-visual-body h3{
    font-size:28px;
  }

  .case-stage-visual-body p{
    font-size:12px;
  }

  .case-stage-visual-foot{
    grid-template-columns:1fr;
    gap:5px;
  }
}


/* ==========================================================
   v2.7.2 — CASE RESULT FOCUS
   Consequence first. Meaning next. Navigation last.
   ========================================================== */

/* Hidden state must stay hidden even though case-danger uses display:flex. */
.case-danger[hidden],
.case-meaning[hidden],
.case-end[hidden]{
  display:none!important;
}

/* Result phase no longer needs the large case header above it. */
.case-player[data-phase="result"] .case-player-top{
  display:none!important;
}

.case-player[data-phase="result"] [data-case-result-panel]{
  margin-top:0!important;
}

/* Consequence is the only focus immediately after a decision. */
.case-player[data-result-depth="consequence"] .case-result-focus-grid{
  grid-template-columns:1fr!important;
  max-width:940px;
  margin:0 auto;
  padding:18px;
}

.case-player[data-result-depth="consequence"] .case-next-col{
  display:none!important;
}

.case-player[data-result-depth="consequence"] .case-consequence-col{
  width:100%;
}

.case-player[data-result-depth="consequence"] .case-result-heading{
  max-width:940px;
  margin:0 auto;
  padding:18px 18px 4px;
}

.case-meaning{
  appearance:none;
  width:calc(100% - 36px);
  min-height:56px;
  margin:0 18px 18px;
  padding:14px 18px;
  border:1px solid rgba(226,183,94,.34);
  border-radius:10px;
  background:#eedcae;
  color:#142836;
  cursor:pointer;
  font-size:13px;
  font-weight:900;
  text-align:center;
}

/* After "What this shows", navigation becomes the sole focus. */
.case-player[data-result-depth="next"] .case-result-heading,
.case-player[data-result-depth="next"] .case-consequence-col{
  display:none!important;
}

.case-player[data-result-depth="next"] .case-result-focus-grid{
  grid-template-columns:1fr!important;
  max-width:860px;
  margin:0 auto;
  padding:18px;
}

.case-player[data-result-depth="next"] .case-next-col{
  display:block!important;
}

.case-player[data-result-depth="next"] .case-next-col .case-end{
  display:block!important;
  height:auto!important;
  padding:24px!important;
}

.case-player[data-result-depth="next"] .case-end-actions{
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}

/* Public question appears only after the visitor asks for meaning. */
.case-play-section[data-result-depth="consequence"] .case-question-strip{
  display:none!important;
}

.case-play-section[data-result-depth="next"] .case-question-strip{
  display:grid!important;
  max-width:860px;
  margin:14px auto 0;
}

/* Replay should be clearly usable, not washed out. */
.case-result-heading [data-case-replay]{
  opacity:1!important;
  color:#d9e3e7!important;
  border-color:rgba(225,236,243,.24)!important;
  background:rgba(255,255,255,.035)!important;
}

.case-result-heading [data-case-replay]:hover{
  border-color:rgba(226,183,94,.46)!important;
  color:#f0d99f!important;
}

/* Danger branch is an optional secondary path, not a duplicate result. */
.case-danger{
  align-items:center;
}
.case-danger span{
  font-size:12px!important;
  line-height:1.45!important;
}
.case-danger strong{
  font-size:12px!important;
  white-space:nowrap;
}

@media(max-width:700px){
  .case-player[data-result-depth="consequence"] .case-result-focus-grid,
  .case-player[data-result-depth="next"] .case-result-focus-grid{
    padding:10px!important;
  }

  .case-player[data-result-depth="consequence"] .case-result-heading{
    padding:14px 10px 2px!important;
  }

  .case-meaning{
    width:calc(100% - 20px);
    margin:0 10px 12px;
  }

  .case-player[data-result-depth="next"] .case-end-actions{
    grid-template-columns:1fr!important;
  }

  .case-play-section[data-result-depth="next"] .case-question-strip{
    margin:10px!important;
  }
}