/* IFS guide · page styles (on top of /psychoed/psy.css) */
:root{--a:#e8a24a;--a2:#8ab4f8;--al:#fff1d8;--mg:#7aa8f0;--ff:#ff8a4a;--ex:#b8d4ff}
.hero .himg{--hx:62%}
.stage svg .serif text,.stage svg text.serif{font-family:var(--serif);font-style:italic}
.say{display:block;margin-top:6px;font-style:italic;font-family:var(--serif);font-size:18px;color:var(--lg)}
/* s1 */
#s1 .w{opacity:0;transition:opacity .6s}#s1[data-sel=one] .w-one,#s1[data-sel=many] .w-many{opacity:1}
#s1 .pl{transition:opacity .6s}#s1[data-sel=one] .pl{opacity:0}
/* s2 */
.cm{transition:opacity .5s,transform .6s var(--ease)}.cm .bg{transition:all .5s}
#s2[data-sel] .cm{opacity:.55}#s2 .cm.act{opacity:1;transform:scale(1.12)}#s2 .cm.act .bg{fill-opacity:.55;stroke-opacity:1}
/* s3 */
.s3w{opacity:0;transition:opacity .6s}#s3[data-sel=calm] .w-calm,#s3[data-sel=hit] .w-hit,#s3[data-sel=self] .w-self{opacity:1}
.card.r-mg b{color:#cfe0ff}.card.r-ff b{color:#ffc8a8}.card.r-ex b{color:#e0ecff}
.card.r-mg{border-left:3px solid var(--mg)}.card.r-ff{border-left:3px solid var(--ff)}.card.r-ex{border-left:3px solid var(--ex)}
/* s4 flip cards */
.flips{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.flc{appearance:none;border:0;padding:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;perspective:900px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.flc .in{display:grid;transition:transform .8s var(--ease);transform-style:preserve-3d}
.flc[aria-pressed="true"] .in{transform:rotateY(180deg)}
.flc .fa,.flc .fb{grid-area:1/1;display:block;padding:14px 15px;border-radius:16px;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid rgba(255,255,255,.12);min-height:118px}
.flc .fa{background:linear-gradient(160deg,rgba(255,138,74,.14),rgba(255,255,255,.015))}
.flc .fb{transform:rotateY(180deg);background:linear-gradient(160deg,rgba(232,162,74,.26),rgba(138,180,248,.08));border-color:rgba(255,224,138,.45)}
.flc i{display:block;font:600 10.5px/1 var(--sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#ffb08a;margin-bottom:7px}
.flc .fb i{color:var(--lg)}
.flc b{display:block;font:italic 500 21px/1.1 var(--serif);color:var(--al);margin-bottom:5px}
.flc span span{font-size:14.5px;line-height:1.45;color:#e6dccb}
.flc:focus-visible{outline:2px solid var(--a2);outline-offset:3px;border-radius:16px}
.mfc{margin:12px 0 0;text-align:center;font:italic 400 19px/1.3 var(--serif);color:var(--a)}
/* s6 */
.fs{transition:opacity .5s}.fs .bg{transition:all .5s}.fs.act .bg{fill-opacity:.6;stroke-opacity:1}.fs.done .bg{fill-opacity:.35}
/* wide interactive sections: tool gets more room on desktop */
@media (min-width:860px){.sc.sc-wide{grid-template-columns:minmax(0,.75fr) minmax(0,1.3fr)}.sc.sc-wide.flip{grid-template-columns:minmax(0,1.3fr) minmax(0,.75fr)}}
/* s7 wizard */
.wiz{position:relative;border-radius:24px;border:1px solid rgba(255,255,255,.09);padding:18px 16px 16px;background:radial-gradient(ellipse 80% 60% at 20% 0%,rgba(232,162,74,.16),transparent 70%),linear-gradient(160deg,#0f0c18,#07060c);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.wdots{display:flex;gap:6px;justify-content:center;margin-bottom:12px}.wdots i{width:26px;height:4px;border-radius:3px;background:rgba(255,255,255,.14);transition:background .4s}.wdots i.on{background:var(--a)}
.wq{margin:0 0 6px;text-align:center;font:italic 400 clamp(23px,3vw,28px)/1.2 var(--serif);color:#fff6e4}
.wh{margin:0 0 12px;text-align:center;font-size:14px;color:var(--mute)}
.wopts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wopts button{appearance:none;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--ink);padding:10px 14px;min-height:44px;font:500 14.5px/1.25 var(--sans);cursor:pointer;transition:all .3s var(--ease);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.wopts button:hover{border-color:rgba(255,255,255,.4)}
.wopts button.act{border-color:var(--a);background:rgba(232,162,74,.22);box-shadow:0 0 16px rgba(232,162,74,.3)}
.wopts button:focus-visible{outline:2px solid var(--a2);outline-offset:2px}
.wst{animation:psy-fade .5s var(--ease) both}
.bodyw{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:12px;align-items:center;max-width:460px;margin:0 auto}
.bodysvg{width:100%;height:auto;display:block}
.bz ellipse{fill:#e8a24a;fill-opacity:0;stroke:#ffe08a;stroke-opacity:.18;stroke-dasharray:3 4;cursor:pointer;transition:all .35s}
.bz ellipse:hover{fill-opacity:.18}.bz ellipse.act{fill-opacity:.5;stroke-opacity:.9;filter:url(#pz-glow)}
.wopts.col{flex-direction:column;align-items:stretch}.wopts.col button{padding:7px 12px;min-height:38px;font-size:13.5px;text-align:left}
@media (pointer:coarse){.wopts.col button{min-height:42px}}
.wnote{margin:14px auto 0;max-width:30em;padding:12px 14px;border-radius:14px;border:1px dashed rgba(138,180,248,.5);font-size:14.5px;color:#dde6f6;background:rgba(138,180,248,.07)}
.wsum{margin:8px auto 10px;max-width:28em;text-align:center;font:italic 400 21px/1.4 var(--serif);color:var(--lg)}
.wbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}.wbtns .btnp{margin:0}
.wnav{display:flex;justify-content:center;margin-top:12px}
/* s8 map */
.mapst{max-width:520px}
.mapn{cursor:pointer}.mapn .bg{transition:all .4s}.mapn.sel .bg{stroke-width:2.5;stroke-opacity:1;filter:url(#pz-glow)}
.mapn text{font-size:13px;pointer-events:none;paint-order:stroke;stroke:#07060c;stroke-width:3px;stroke-linejoin:round}
.mapform{max-width:520px;margin:12px auto 0;text-align:center}
.mlab{margin:14px 0 2px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}.mlab small{letter-spacing:.05em;text-transform:none;color:var(--dim)}
.chips.mini{margin-top:8px}.chips.mini .chip{min-height:38px;padding:7px 12px;font-size:13.5px}
@media (pointer:coarse){.chips.mini .chip{min-height:42px}}
.chip.r-mg.act,.chip.r-mg[aria-pressed=true]{border-color:var(--mg);background:rgba(122,168,240,.25);box-shadow:0 0 16px rgba(122,168,240,.35)}
.chip.r-ff.act,.chip.r-ff[aria-pressed=true]{border-color:var(--ff);background:rgba(255,138,74,.22);box-shadow:0 0 16px rgba(255,138,74,.35)}
.chip.r-ex.act,.chip.r-ex[aria-pressed=true]{border-color:var(--ex);background:rgba(184,212,255,.18);box-shadow:0 0 16px rgba(184,212,255,.3)}
.mrow{margin-top:10px}
.mrow input{width:min(100%,320px);padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:var(--ink);font:16px var(--sans)}
.mrow input:focus{outline:2px solid var(--a2);outline-offset:1px}
.msel{margin:12px auto 0;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,224,138,.3);background:rgba(232,162,74,.08)}.msel p{margin:0 0 8px;font-size:15px}
.mtools{display:flex;gap:8px;justify-content:center;margin-top:14px}.mtools .chip{font-size:13px;min-height:38px;color:var(--mute)}
.mstat{min-height:1.4em;margin:8px 0 0;font-size:13.5px;color:var(--a)}
.heal{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
@media (prefers-reduced-motion:reduce){.flc .in{transition:none}}
/* phone: flip cards become a swipe row */
@media (max-width:859px){.flips{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin:0 -4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.flips::-webkit-scrollbar{display:none}.flc{scroll-snap-align:center}.flc .fa,.flc .fb{height:100%}.flc .in{height:100%}.dg .swipe{display:block}}
.swipe{display:none;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:4px}