/* p8-light.css — Phase 8 cases (and everything built on casefile.js) in the light lesson style.
   Same content and steps; only the look changes: light colours, a centered column,
   the chart full width with the analysis panel under it, a short chip row instead of the case file. */
body.p8-on{
  --dk-bg:var(--bg-fdf8f5,#FDF8F5); --dk-panel:var(--ac-ffffff,#FFFFFF); --dk-panel2:var(--ac-ffffff,#FFFFFF); --dk-line:var(--ln-f1e7e1,#F1E7E1); --dk-text:var(--fg-3d2b20,#3D2B20); --dk-dim:var(--ac-7a5c50,#7A5C50);
  --dk-pink:var(--fg-c8455f,#C8455F); --dk-mint:var(--ac-1f8a7e,#1F8A7E); --dk-peach:var(--ac-c4741f,#C4741F); --dk-gold:var(--ac-9a6b00,#9A6B00); --dk-purple:var(--ac-5e56b8,#5E56B8);
}
/* centered column (same width the rest of the Academy uses, so it lines up with the sidebar centering) */
body.p8-on .main{max-width:1100px;padding:28px 28px 96px;}
/* lesson header back to the normal light header */
body.p8-on .lh-header{background:var(--bg-ffffff,#fff);color:var(--text);border:1px solid var(--border);box-shadow:0 10px 40px rgba(44,24,16,.06);}
body.p8-on .lh-header strong, body.p8-on .lh-sp-row, body.p8-on .lh-nav-link{color:var(--dark);}
body.p8-on .lh-sp-track{background:var(--pink-pale);}
body.p8-on .lh-header .lh-title{color:var(--dark);}
body.p8-on .lh-header .lh-hook, body.p8-on .lh-header .lh-crumb, body.p8-on .lh-header .lh-count{color:var(--muted);}

/* the desk card */
body.p8-on .p8-desk{background:var(--bg-ffffff,#fff);border:1px solid var(--border);box-shadow:0 10px 40px rgba(44,24,16,.06);border-radius:24px;padding:clamp(12px,2.4vw,24px);}
body.p8-on .p8-topbar{justify-content:center;border-bottom:0;padding-bottom:6px;}
body.p8-on .p8-timeline{margin-left:0;justify-content:center;}
body.p8-on .p8-tl{font-size:.7rem;padding:5px 11px;background:var(--cream);border-color:transparent;}
body.p8-on .p8-tl.is-cur{background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);border-color:var(--ink-bg,var(--dark));} body.p8-on .p8-tl.is-cur i{background:var(--bg-ffffff,#fff);box-shadow:none;}
body.p8-on .p8-tl.is-done{background:var(--teal-pale);border-color:transparent;}
body.p8-on .p8-brand{display:none;}
body.p8-on .p8-tl-arrow{display:none;}

/* one column: chips → chart → panel */
body.p8-on .p8-grid{grid-template-columns:minmax(0,1fr);gap:14px;}
body.p8-on .p8-file{order:0;position:static;background:none;border:0;padding:0;}
body.p8-on .p8-chartcol{order:1;border-radius:18px;}
body.p8-on .p8-panel{order:2;position:static;max-height:none;overflow:visible;width:100%;max-width:760px;margin:0 auto;border-radius:18px;padding:18px 20px;}
body.p8-on .p8-handle{display:none;}
.p8-chiprow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.p8-chip{background:var(--cream);border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:700;color:var(--muted);}
.p8-chip.is-lock{background:var(--bg-fff6dc,#FFF6DC);color:var(--fg-8a6100,#8a6100);}
.p8-chip.is-out b{color:var(--dark);}
.p8-chip.is-stop,.p8-chip.is-warn{background:var(--pink-pale);color:var(--fg-8a2f45,#8a2f45);}

/* questions: one at a time */
.p8-ask.is-later{display:none;}
body.p8-on .p8-q{font-size:1rem;font-weight:800;}
body.p8-on .p8-chips{gap:8px;}
body.p8-on .p8-chips button{background:var(--bg-ffffff,#fff);border:1.5px solid var(--border);color:var(--dark);border-radius:14px;padding:10px 14px;font-weight:700;}
body.p8-on .p8-chips button.on{border-color:var(--ink-bg,var(--dark));box-shadow:inset 0 0 0 1.5px var(--dark);background:var(--cream);}
body.p8-on .p8-h{font-size:1.4rem;}
body.p8-on .p8-say{background:var(--bg-fff6dc,#FFF6DC);border-radius:12px;padding:10px 12px;color:var(--dark);}

/* text that was white on dark */
body.p8-on :is(.dk-m b,.dk-verdict b,.dk-hello h2,.dk-hc b,.dl-card b,.p8-h,.p8-say b,.p8-q,.p8-f-title,.p8-rp-t,.p8-card-f,.p8-cf-t,.p8-principle,.p8-ev-l,.dk-studies .dk-card b){color:var(--dark);}
body.p8-on :is(.p8-tf.on,.p8-rv-g button.on){color:var(--dark);background:var(--cream);}
body.p8-on .p8-form input, body.p8-on .p8-desk input, body.p8-on .p8-desk select, body.p8-on .p8-desk textarea{color:var(--dark);background:var(--bg-ffffff,#fff);}
body.p8-on .p8-btn{background:var(--bg-ffffff,#fff);color:var(--dark);border:1.5px solid var(--border);border-radius:999px;}
body.p8-on .p8-btn.is-primary, body.p8-on .p8-btn.is-lock{background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);border-color:var(--ink-bg,var(--dark));letter-spacing:0;}
body.p8-on .p8-btn:disabled{opacity:.4;}
body.p8-on .p8-dayli{color:var(--fg-ffffff,#fff);}
body.p8-on .p8-principle{background:var(--bg-fff6dc,#FFF6DC);border-color:var(--ln-f1d78a,#F1D78A);}
body.p8-on .p8-ev, body.p8-on .p8-eight{background:var(--bg-ffffff,#fff);border:1px solid var(--border);}
body.p8-on .p8-e{background:var(--cream);border-color:var(--border);}
body.p8-on .p8-e b{color:var(--dark);}

/* charts: light paper */
body.p8-on .p8-bg{fill:var(--fg-ffffff,#FFFFFF);}
body.p8-on .p8-grid-l{stroke:var(--fg-f1e7e1,#F1E7E1);}
body.p8-on .p8-ax{fill:var(--fg-7a5c50,#7A5C50);}
body.p8-on .p8-mini{background:var(--bg-fdf8f5,#FDF8F5);}
body.p8-on svg rect[fill="#100E18"]{fill:var(--fg-fdf8f5,#FDF8F5);}
body.p8-on svg [stroke="#221E33"]{stroke:var(--fg-f1e7e1,#F1E7E1);}
body.p8-on .p8-replay .p8-play{color:var(--fg-ffffff,#fff);}

@media (max-width:820px){
  body.p8-on .p8-panel{position:static;max-height:none;box-shadow:none;border-radius:18px;}
  body.p8-on .p8-desk{margin-bottom:0;}
}

/* main buttons sit on the right, like every other lesson */
body.p8-on .p8-panel .p8-btn.is-primary, body.p8-on .p8-panel .p8-btn.is-lock{width:fit-content;min-width:220px;margin-left:auto;display:block;padding:13px 24px;}
@media (max-width:600px){ body.p8-on .p8-panel .p8-btn.is-primary, body.p8-on .p8-panel .p8-btn.is-lock{width:100%;} }
body.p8-on .p8-tl.is-cur.is-done{background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);}

/* mark tools (1H swing high, MSS, Undo…) and chart labels, made for the light chart */
body.p8-on .p8-tools-l{color:var(--muted);}
body.p8-on .p8-tfs{background:var(--cream);}
body.p8-on .p8-tf{color:var(--muted);}
body.p8-on .p8-wm{fill:var(--fg-b9a79c,#B9A79C);}
body.p8-on .p8-c.up line{stroke:var(--fg-7ecec4,#7ECEC4);} body.p8-on .p8-c.up rect{fill:var(--fg-7ecec4,#7ECEC4);}
body.p8-on .p8-c.dn line{stroke:var(--fg-f4829a,#F4829A);} body.p8-on .p8-c.dn rect{fill:var(--fg-f4829a,#F4829A);}
body.p8-on .p8-curtain{fill:rgba(233,185,73,.06);stroke:rgba(185,134,31,.35);}
body.p8-on .p8-replay button{background:var(--bg-ffffff,#fff);border:1.5px solid var(--border);color:var(--dark);}
body.p8-on .p8-replay .p8-play{background:var(--ink-bg,var(--dark));border-color:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);}
body.p8-on .p8-flash{background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);}

/* ── "Mark on the chart": its own bright strip above the chart ── */
body.p8-on .p8-chartbar{flex-wrap:wrap;gap:10px;}
body.p8-on .p8-tools:not(:empty){flex-basis:100%;order:-1;background:var(--bg-fde8ed,#FDE8ED);border:1.5px solid var(--ln-f9b8c6,#F9B8C6);border-radius:16px;padding:10px 12px;gap:8px;}
body.p8-on .p8-tools-l{font-size:.8rem;letter-spacing:.02em;font-weight:800;color:var(--dark);margin-right:4px;}
body.p8-on .p8-tool{background:var(--bg-f4829a,#F4829A);border:1.5px solid var(--ln-f4829a,#F4829A);color:var(--dark);font-size:.86rem;font-weight:800;padding:8px 16px;box-shadow:0 4px 12px rgb(var(--pink-rgb,244 130 154) / .3);}
body.p8-on .p8-tool:hover{background:var(--bg-f27390,#F27390);border-color:var(--ln-f27390,#F27390);}
body.p8-on .p8-tool:not(.has):not(.on):not(.p8-undo){animation:p8pulse 2.2s ease-in-out infinite;}
body.p8-on .p8-tool.on{background:var(--ink-bg,var(--dark));border-color:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);box-shadow:0 0 0 3px rgba(44,24,16,.15);animation:none;}
body.p8-on .p8-tool.has{background:var(--bg-e8f8f6,#E8F8F6);border-color:var(--ln-7ecec4,#7ECEC4);color:var(--dark);box-shadow:none;}
body.p8-on .p8-tool.p8-undo{background:transparent;border-color:transparent;color:var(--muted);box-shadow:none;text-decoration:underline;text-underline-offset:3px;margin-left:auto;}
@keyframes p8pulse{0%,100%{box-shadow:0 4px 12px rgb(var(--pink-rgb,244 130 154) / .3);}50%{box-shadow:0 0 0 6px rgb(var(--pink-rgb,244 130 154) / .25);}}
@media (prefers-reduced-motion:reduce){body.p8-on .p8-tool{animation:none!important;}}

/* ── the question panel under the chart ── */
body.p8-on .p8-panel{background:var(--bg-ffffff,#fff);border:1px solid var(--border);border-top:0;border-radius:20px;padding:0;overflow:hidden;box-shadow:0 12px 34px rgba(44,24,16,.08);}
body.p8-on .p8-panel-body{padding:22px 24px 24px;}
body.p8-on .p8-panel::before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--pink),var(--bg-f5a857,#F5A857),var(--bg-e9b949,#E9B949));}
body.p8-on .p8-prog{height:6px;border-radius:999px;background:var(--cream);margin-bottom:16px;}
body.p8-on .p8-prog span{background:linear-gradient(90deg,var(--pink),var(--bg-e9b949,#E9B949));border-radius:999px;}
body.p8-on .p8-kicker{font-size:.7rem;letter-spacing:.16em;color:var(--pink);}
body.p8-on .p8-h{font-size:1.7rem;line-height:1.15;margin:2px 0 14px;font-weight:900;}
/* what to mark: a row of pills instead of a list */
body.p8-on .p8-need{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:none;padding:0;margin:0 0 16px;}
body.p8-on .p8-need-h{flex-basis:100%;font-size:.7rem;letter-spacing:.14em;color:var(--muted);margin:0;}
body.p8-on .p8-need-i{background:var(--bg-ffffff,#fff);border:1.5px dashed var(--ln-f4829a,#F4829A);color:var(--dark);border-radius:999px;padding:6px 14px;font-size:.88rem;font-weight:700;}
body.p8-on .p8-need-i.ok{background:var(--bg-e8f8f6,#E8F8F6);border:1.5px solid var(--ln-7ecec4,#7ECEC4);color:var(--dark);}
/* each question as a soft card with big answers */
body.p8-on .p8-ask{background:var(--cream);border-radius:18px;padding:16px 16px 14px;margin:0 0 12px;}
body.p8-on .p8-q{font-size:1.08rem;font-weight:800;color:var(--dark);margin:0 0 12px;}
body.p8-on .p8-ask .p8-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
body.p8-on .p8-chips button{min-height:52px;background:var(--bg-ffffff,#fff);border:1.5px solid var(--border);border-radius:14px;padding:12px 14px;font-size:.93rem;font-weight:700;color:var(--dark);text-align:left;box-shadow:0 2px 6px rgba(44,24,16,.04);transition:border-color .15s,transform .15s;}
body.p8-on .p8-chips button:hover:not(:disabled){border-color:var(--ink-bg,var(--dark));transform:translateY(-1px);}
body.p8-on .p8-chips button.on{background:var(--bg-ffffff,#fff);border-color:var(--ink-bg,var(--dark));box-shadow:inset 0 0 0 1.5px var(--dark);}
body.p8-on .p8-chips button.on::before{content:"✓ ";color:var(--fg-1a6b63,#1a6b63);}
body.p8-on .p8-fbi{background:var(--bg-ffffff,#fff);font-size:.88rem;border-radius:12px;padding:10px 12px;margin-top:10px;}
/* Dayli demo box */
body.p8-on .p8-demo{background:var(--bg-fff6dc,#FFF6DC);border:1.5px solid var(--ln-f1d78a,#F1D78A);border-radius:18px;padding:14px;}
body.p8-on .p8-demo .p8-btn{background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);border-color:var(--ink-bg,var(--dark));}
body.p8-on .p8-dayli{background:linear-gradient(135deg,var(--pink),var(--bg-f5a857,#F5A857));}
/* the lock button: soft while waiting, dark when ready */
body.p8-on .p8-panel .p8-btn.is-primary:disabled{background:var(--cream);color:var(--muted);border:1.5px dashed var(--ln-d9c7bc,#D9C7BC);opacity:1;}