/* assets/path.css — "The Signature Path" (production port of concept 9)
   Ported from _mockups/9-signature-path/path.css. Full-bleed painterly darkness,
   embossed gold display type, stone-slab CTAs, sword-flourish rules. All-original chrome.

   Custom properties are prefixed --pe- (Path Engine) — NOT the guide's own --ink/--paper/
   --card/--line/--gold/--shadow/--accent names. Each guide's own inline <style> block stays
   in the document (for crawlers + print) and still depends on ITS OWN --ink etc. resolving
   to its light-mode values; reusing those names here would repaint the printed page pale-on-
   white. See PORT-SPEC-SIGNATURE-PATH.md trap notes.

   Fonts: Cinzel + Alegreya Sans are loaded via <link> tags in each guide's <head> (added by
   the idempotent head-swap transform) — NOT a CSS @import here (traps section 6: @import
   blocks render). */

:root{
  --pe-gold-a:#fce8a8; --pe-gold-b:#e9b944; --pe-gold-c:#a06a14; --pe-gold-line:#6e5a26;
  --pe-ink:#e9e4d6; --pe-ink-dim:#bdb5a0; --pe-mut:#8f8770;
  --pe-panel:rgba(15,12,24,.78); --pe-panel-line:#3a3352; --pe-panel-line2:#221d36;
  --pe-acc:#c9573f;
  --pe-df:'Cinzel',serif; --pe-bf:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* reading text = friendly system sans by default (Dennis 2026-07-02); Cinzel stays display-only */
}
html[data-theme="light"]{
  --pe-panel:rgba(240,232,212,.90); --pe-panel-line:#b7a678; --pe-panel-line2:#d8cba4;
  --pe-ink:#2a2110; --pe-ink-dim:#54482c; --pe-mut:#6b5d40;
}
#top,#backdrop,#wrap,#hub,#splash,#toast,.pbackdrop{box-sizing:border-box}
#top *,#backdrop *,#wrap *,#hub *,#splash *,#toast *,.pbackdrop *{box-sizing:border-box}
#top,#hub,#wrap{font:16px/1.5 var(--pe-bf);-webkit-font-smoothing:antialiased}
#top a{color:inherit}
::selection{background:#e9b94455}

/* ---------- hide the static document (crawlers/print still see it — see @media print) ---------- */
.pe-static-hidden{display:none}

/* ---------- embossed gold display text ---------- */
.goldtx,#stage h1,.mast h1,.shelfhead>span:nth-child(2),#splash b{
  font-family:var(--pe-df);font-weight:700;text-transform:uppercase;
  background:linear-gradient(180deg,var(--pe-gold-a) 8%,var(--pe-gold-b) 46%,var(--pe-gold-c) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(233,185,68,.18))}

/* ---------- backdrop ---------- */
#backdrop{position:fixed;inset:0;z-index:-2;background:#07060c}
#backdrop .bd{position:absolute;inset:0;background-size:cover;background-position:center 32%;opacity:0;transform:scale(1.04);transition:opacity 1.1s ease,transform 8s ease}
#backdrop .bd.on{opacity:1;transform:scale(1)}
#backdrop .bdshade{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 0%,transparent 0%,rgba(7,6,12,.38) 55%,rgba(7,6,12,.9) 100%),
  linear-gradient(180deg,rgba(7,6,12,.62),rgba(7,6,12,.28) 26%,rgba(7,6,12,.62) 78%,#07060c)}

/* ---------- top bar ---------- */
#top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 22px;background:linear-gradient(180deg,rgba(7,6,12,.92),rgba(7,6,12,.55) 75%,transparent);border:0}
#top .tleft{display:flex;align-items:center;gap:16px;min-width:0}
#top .backlink{display:inline-flex;gap:6px;align-items:center;text-decoration:none;color:var(--pe-gold-b);font:700 13px/1 var(--pe-bf);letter-spacing:.14em;text-transform:uppercase;opacity:.9;text-shadow:0 1px 2px #000}
#top .backlink:hover{opacity:1;text-shadow:0 0 10px rgba(233,185,68,.5)}
#top .brand{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none}
#top .tcrest{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 1px 3px #000)}
#top .brand .bt{display:flex;flex-direction:column;min-width:0}
#top .brand b{font:700 15px/1.2 var(--pe-df);letter-spacing:.1em;text-transform:uppercase;color:#f0dda0;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#top .brand i{font:500 11.5px/1.3 var(--pe-bf);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#a89f88}
#top .tright{display:flex;align-items:center;gap:10px;position:relative}
#top .searchbox{position:relative}
#top .searchbox input{width:min(320px,34vw);font:15px var(--pe-bf);color:#e9e4d6;background:rgba(12,10,20,.8);
  border:1px solid #3a3352;border-radius:3px;padding:8px 12px;outline:none}
#top .searchbox input::placeholder{color:#8b8298}
#top .searchbox input:focus{border-color:var(--pe-gold-c);box-shadow:0 0 10px rgba(233,185,68,.25)}
#results{position:absolute;top:42px;left:0;right:0;min-width:300px;background:#100d1c;border:1px solid #3a3352;border-radius:4px;
  box-shadow:0 20px 50px #000d;display:none;overflow:hidden;z-index:60}
#results.open{display:block}
#results button{display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #221d36;
  color:#e9e4d6;font:15px var(--pe-bf);padding:10px 13px;cursor:pointer}
#results button:hover{background:#1c1730}
#results button b{font-family:var(--pe-df);color:var(--pe-gold-b);font-size:13px}
#results button i{margin-left:auto;font-style:normal;color:#6f6885;font-size:12.5px}
#results button u{text-decoration:none;color:var(--pe-gold-b)}
#results .nores{padding:12px 13px;color:#6f6885;font-size:14px}
#charsel{appearance:none;font:600 14px var(--pe-bf);color:#e9e4d6;background:rgba(12,10,20,.8);border:1px solid #3a3352;border-radius:3px;
  padding:8px 30px 8px 11px;cursor:pointer;max-width:170px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23e9b944' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 7px center;background-size:14px}
#menubtn{width:37px;height:37px;font-size:15px;color:var(--pe-gold-b);background:rgba(12,10,20,.8);border:1px solid #3a3352;border-radius:3px;cursor:pointer}
#menubtn:hover{border-color:var(--pe-gold-c);box-shadow:0 0 10px rgba(233,185,68,.25)}
#pop{position:absolute;right:0;top:46px;min-width:230px;background:#100d1c;border:1px solid #3a3352;border-radius:4px;box-shadow:0 20px 50px #000d;padding:6px;display:none;z-index:70}
#pop.open{display:block}
#pop button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:3px;color:#e9e4d6;font:600 14.5px var(--pe-bf);padding:10px 12px;cursor:pointer}
#pop button:hover{background:#1c1730}
#pop button.danger{color:#e06457}
#pop hr{border:0;border-top:1px solid #221d36;margin:5px 6px}

/* ---------- slab buttons (stone + embossed gold) ---------- */
.slab{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;
  font:800 14px/1 var(--pe-df);letter-spacing:.16em;text-transform:uppercase;
  color:#f6ce62;text-shadow:0 -1px 0 #3c2a06,0 2px 2px #000;
  background:linear-gradient(180deg,#413b52 0%,#221e30 30%,#15121f 100%);
  border:1px solid #0a0812;border-radius:3px;
  box-shadow:inset 0 0 0 1px #575066,inset 0 0 22px rgba(0,0,0,.6),0 4px 14px rgba(0,0,0,.7);
  padding:14px 24px}
.slab:hover{filter:brightness(1.16);box-shadow:inset 0 0 0 1px #6b6480,inset 0 0 22px rgba(0,0,0,.5),0 4px 18px rgba(0,0,0,.8),0 0 16px rgba(233,185,68,.22)}
.slab:active{transform:translateY(1px)}
.slab.big{padding:16px 34px;font-size:16px}
.slab.ghosty{opacity:.85;font-size:12px;padding:12px 16px}
.slab[disabled]{opacity:.3;pointer-events:none}
.slab.isdone{color:#9ee6a0;text-shadow:0 -1px 0 #0c3010,0 2px 2px #000}

/* ---------- flourish rule ---------- */
.orn{display:inline-block;width:230px;max-width:42vw;height:13px;color:var(--pe-gold-c);vertical-align:middle;opacity:.9}

/* ================= GUIDE layout ================= */
#wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;max-width:1240px;margin:0 auto;padding:84px 26px 60px;min-height:100vh}

/* --- the path rail --- */
#path{position:relative;padding:10px 0 30px 6px;align-self:start;position:sticky;top:74px;max-height:calc(100vh - 90px);overflow-y:auto;scrollbar-width:none}
#path::-webkit-scrollbar{display:none}
#path .pathhead{display:flex;align-items:baseline;gap:10px;margin:0 0 14px 2px}
#path .phl{font:700 12px var(--pe-bf);letter-spacing:.3em;text-transform:uppercase;color:#8f8770}
#path #pct{font:700 20px var(--pe-df);color:#f0dda0;text-shadow:0 1px 2px #000}
#path .thread{position:absolute;left:27px;top:64px;bottom:34px;width:3px;background:rgba(70,62,100,.55);border-radius:2px}
#path .thread i{display:block;width:100%;height:0;border-radius:2px;background:linear-gradient(180deg,var(--pe-gold-a),var(--pe-gold-b) 60%,var(--pe-gold-c));
  box-shadow:0 0 12px rgba(233,185,68,.55);transition:height .6s ease}
#path ol{list-style:none;margin:0;padding:0;position:relative}
#path .zcap{font:700 11.5px var(--pe-bf);letter-spacing:.22em;text-transform:uppercase;color:#cfc19a;margin:16px 0 6px 52px;text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.9)}
#path .node{display:flex;align-items:center;gap:12px;margin:7px 0;position:relative}
#path .node .med{position:relative;z-index:1;width:33px;height:33px;flex:none;border-radius:50%;cursor:pointer;
  font:700 14px var(--pe-df);color:#cdbf92;background:radial-gradient(circle at 35% 30%,#241f38,#100d1c 70%);
  border:1.5px solid #574d7a;box-shadow:0 0 0 3px #07060c,0 2px 6px #000;margin-left:11px;display:grid;place-items:center;padding:0}
#path .node .med:hover{border-color:var(--pe-gold-b)}
#path .node .nl{font:600 14.5px/1.25 var(--pe-bf);color:#bdb5a0;cursor:pointer;text-shadow:0 1px 2px #000}
#path .node .nl:hover{color:#e9e4d6}
#path .node.done .med{background:radial-gradient(circle at 35% 30%,var(--pe-gold-a),var(--pe-gold-b) 55%,var(--pe-gold-c));border-color:#3c2a06;color:transparent}
#path .node.done .med::after{content:"";position:absolute;left:11px;top:7px;width:7px;height:13px;border:solid #221703;border-width:0 3px 3px 0;transform:rotate(43deg)}
#path .node.done .nl{color:#8a8270}
#path .node.current .med{border-color:var(--pe-gold-b);color:#f6ce62;animation:pe-pulse 2.2s ease-in-out infinite}
#path .node.current .nl{color:#f0dda0;font-weight:800}
#path .node.prenode .med span{font-size:15px}
#path .node.prenode .nl{font-style:italic}
@keyframes pe-pulse{0%,100%{box-shadow:0 0 0 3px #07060c,0 0 0 4.5px rgba(233,185,68,.65),0 0 14px rgba(233,185,68,.4)}50%{box-shadow:0 0 0 3px #07060c,0 0 0 4.5px rgba(233,185,68,.15),0 0 4px rgba(233,185,68,.1)}}

/* --- the quest stage --- */
#stage{min-width:0}
#stage .qcard{background:var(--pe-panel);border:1px solid var(--pe-panel-line);border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 30px 70px rgba(0,0,0,.65);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  padding:30px 38px 30px;max-width:820px}
#stage .qcard.enter{animation:pe-cardin .5s ease both}
@keyframes pe-cardin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#stage .kick{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
#stage .kick .kz{font:700 12px var(--pe-bf);letter-spacing:.26em;text-transform:uppercase;color:var(--pe-acc);text-shadow:0 1px 2px #000}
html[data-theme="light"] #stage .kick .kz{text-shadow:none}
#stage .kick .kn{font:700 11.5px var(--pe-bf);letter-spacing:.2em;text-transform:uppercase;color:var(--pe-mut)}
#stage h1{font-size:clamp(26px,3.6vw,40px);margin:10px 0 2px;line-height:1.08}
#stage .rule{margin:8px 0 16px}
#stage .lore{font:500 17px/1.6 var(--pe-bf);color:#d4674e;margin:0 0 14px;max-width:62ch}
html[data-theme="light"] #stage .lore{color:#a8432f}
#stage .startline{font:17px/1.6 var(--pe-bf);color:var(--pe-ink-dim);border-left:3px solid var(--pe-gold-line);padding:4px 0 4px 14px;margin:0 0 8px}
#stage .startline b{color:var(--pe-ink)}
#stage .objs{list-style:none;margin:14px 0 0;padding:0}
#stage .obj{display:flex;gap:14px;align-items:flex-start;padding:13px 10px 13px 8px;border-bottom:1px solid var(--pe-panel-line2);cursor:pointer;border-radius:3px;-webkit-user-select:none;user-select:none}
#stage .obj:hover{background:rgba(233,185,68,.05)}
#stage .obj .box{flex:none;width:21px;height:21px;margin-top:2px;border-radius:3px;cursor:pointer;position:relative;
  border:1.5px solid #6b6480;background:linear-gradient(180deg,#0b0914,#1d1930);box-shadow:inset 0 2px 4px #000c}
html[data-theme="light"] #stage .obj .box{border-color:#9a8a60;background:#efe6ca;box-shadow:inset 0 2px 4px rgba(90,70,30,.3)}
#stage .obj.on .box{border-color:var(--pe-gold-c);background:linear-gradient(180deg,#171204,#241d08)}
html[data-theme="light"] #stage .obj.on .box{background:#e6d9b2}
#stage .obj.on .box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--pe-gold-b);border-width:0 3px 3px 0;transform:rotate(43deg);filter:drop-shadow(0 0 4px rgba(233,185,68,.6))}
#stage .obj .otx{font:17px/1.6 var(--pe-bf);color:var(--pe-ink);min-width:0}
#stage .obj.on .otx{color:var(--pe-mut)}
#stage .obj .otx b{color:#f0dda0;font-weight:700}
html[data-theme="light"] #stage .obj .otx b{color:#5c3f0a}
#stage .obj.on .otx b{color:inherit}
#stage .obj .otx ul{margin:8px 0 2px;padding-left:20px}
#stage .obj .otx ul li{font-size:15.5px;line-height:1.6;color:var(--pe-ink-dim);padding:2.5px 0}
#stage .obj.on .otx ul li{color:var(--pe-mut)}
#stage .tag{color:#e0524a;font-weight:800;text-transform:uppercase;font-size:.86em;letter-spacing:.06em}
#stage .tag svg{display:none}
#stage .wp{cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  font:700 12.5px var(--pe-bf);color:#f6ce62;background:rgba(10,8,18,.7);border:1px solid #5c4d1f;border-radius:99px;padding:2px 10px 2px 8px;margin:0 2px;vertical-align:1px}
html[data-theme="light"] #stage .wp{color:#6b4a10;background:#efe6ca;border-color:#b39a5e}
#stage .wp svg{display:none}
#stage .wp::before{content:"◈";font-size:10px;color:var(--pe-gold-c)}
#stage .wp:hover{border-color:var(--pe-gold-b);box-shadow:0 0 8px rgba(233,185,68,.3)}
#stage .wp.copied{outline:1px solid var(--pe-gold-b)}
#stage .loot{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:13px 16px;border:1px solid var(--pe-gold-line);border-radius:4px;
  background:linear-gradient(180deg,rgba(233,185,68,.08),rgba(233,185,68,.03));font:17px/1.6 var(--pe-bf);color:var(--pe-ink-dim)}
#stage .loot b{color:#f0dda0}
html[data-theme="light"] #stage .loot b{color:#5c3f0a}
#stage .loot::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fce8a8,#e9b944 55%,#8a5c10);border:1px solid #3c2a06;box-shadow:0 1px 3px #000}

/* --- hazard / tip callouts (content mapping: PORT-SPEC section 2) --- */
#stage .haz{display:flex;flex-direction:column;gap:2px;margin:0 0 16px;padding:12px 15px;
  border:1px solid #6b2a24;border-left:3px solid #c5392e;border-radius:4px;background:rgba(197,57,46,.1);
  font:17px/1.6 var(--pe-bf);color:var(--pe-ink-dim)}
#stage .haz .hazlbl{color:#ff8d80;text-transform:uppercase;letter-spacing:.16em;font:800 11px var(--pe-df)}
#stage .haz b{color:#ffd9d3}
html[data-theme="light"] #stage .haz{background:#fdeceb;border-color:#d99089}
html[data-theme="light"] #stage .haz .hazlbl{color:#a8231d}
html[data-theme="light"] #stage .haz b{color:#7c2620}
#stage .tipbox{display:flex;flex-direction:column;gap:2px;margin:14px 0 0;padding:10px 15px;
  border:1px solid var(--pe-gold-line);border-radius:4px;background:rgba(233,185,68,.06);
  font:17px/1.6 var(--pe-bf);color:var(--pe-ink-dim)}
#stage .tipbox .tiplbl{color:var(--pe-gold-b);text-transform:uppercase;letter-spacing:.16em;font:800 10.5px var(--pe-df)}
#stage .tipbox b{color:#f0dda0}
html[data-theme="light"] #stage .tipbox b{color:#5c3f0a}
#stage .upnextbox{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--pe-panel-line2);font:15.5px/1.6 var(--pe-bf);color:var(--pe-mut)}
#stage .upnextbox b{color:var(--pe-ink)}

/* --- "Before You Begin" pre-panel --- */
#stage .precard .prebody{font:17px/1.6 var(--pe-bf);color:var(--pe-ink-dim)}
#stage .precard .prebody h2{font-family:var(--pe-df);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:#f0dda0;margin:18px 0 6px;display:flex;align-items:center;gap:8px}
#stage .precard .prebody h2 svg{display:none}
#stage .precard .prebody p.note{color:var(--pe-mut);font-size:13.5px;margin:2px 0 12px}
#stage .precard .prebody ul{list-style:none;margin:0 0 10px;padding:0}
#stage .precard .prebody li{position:relative;padding:5px 0 5px 20px}
#stage .precard .prebody li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;border:2px solid var(--pe-gold-c);border-radius:50%}
#stage .precard .prebody b{color:#f0dda0}
html[data-theme="light"] #stage .precard .prebody b{color:#5c3f0a}
#stage .metarow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
#stage .metachip{font:600 12px var(--pe-bf);letter-spacing:.02em;color:var(--pe-ink-dim);background:rgba(0,0,0,.25);border:1px solid var(--pe-panel-line);padding:5px 11px;border-radius:99px}
html[data-theme="light"] #stage .metachip{background:rgba(255,255,255,.5)}

#stage .ctas{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:24px 0 0}
#stage .qcard.qdone{border-color:var(--pe-gold-line)}

/* splash */
#splash{position:fixed;inset:0;z-index:80;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(60% 45% at 50% 50%,rgba(233,185,68,.14),transparent 70%)}
#splash.show{opacity:1}
#splash .spin{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 48px;background:radial-gradient(55% 80% at 50% 50%,rgba(7,6,12,.88),transparent 78%)}
#splash b{font-size:clamp(30px,5vw,54px)}
#splash .orn{width:300px}

/* ================= HUB ================= */
#hub{max-width:1150px;margin:0 auto;padding:96px 26px 80px}
#hub .mast{text-align:center;padding:4vh 0 30px}
#hub .mast .me{font:700 14px var(--pe-df);letter-spacing:.55em;text-transform:uppercase;color:#cdbf92;text-shadow:0 1px 3px #000}
#hub .mast h1{font-size:clamp(38px,6.4vw,66px);margin:12px 0 4px;line-height:1.05}
#hub .mrule{margin:6px 0 14px}
#hub .mtag{font:500 17px/1.6 var(--pe-bf);color:var(--pe-ink-dim);margin:0 auto 22px;max-width:80ch;text-wrap:balance;text-shadow:0 1px 3px #000}
#hub .gprog{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
#hub .gprog b{font:700 26px var(--pe-df);color:#f0dda0;text-shadow:0 1px 3px #000}
#hub .gprog span{color:var(--pe-mut);font:600 13px var(--pe-bf);letter-spacing:.14em;text-transform:uppercase}
#hub .gprog i{font-style:normal;color:var(--pe-ink-dim)}
#hub .gbar{width:min(420px,70vw);height:8px;border-radius:99px;background:rgba(70,62,100,.5);overflow:hidden;box-shadow:inset 0 1px 3px #000;margin:0 auto}
#hub .gbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pe-gold-c),var(--pe-gold-b));box-shadow:0 0 10px rgba(233,185,68,.6);transition:width .6s}
#resume{margin-top:14px;text-align:center}
#hub .shelfhead{display:flex;align-items:center;justify-content:center;gap:18px;margin:44px 0 20px;text-align:center}
#hub .shelfhead>span:nth-child(2){font-size:clamp(17px,2.4vw,24px);letter-spacing:.22em;white-space:nowrap}
#hub .shelfhead .sr1{color:var(--pe-gold-c);opacity:.75;flex:1;max-width:230px}
#hub .shelfhead .sr1 .orn{width:100%}
#hub .shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
#hub .xslab{position:relative;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;border-radius:5px;overflow:hidden;
  border:1px solid #2e2846;background:#0d0b16;box-shadow:0 14px 40px rgba(0,0,0,.55);min-height:150px}
#hub .xslab .xart{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:saturate(.95);transition:transform .5s ease}
#hub .xslab::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,12,.1) 0%,rgba(7,6,12,.55) 55%,rgba(7,6,12,.92) 100%)}
#hub .xslab:hover .xart{transform:scale(1.05)}
#hub .xslab:hover{border-color:var(--pe-gold-c);box-shadow:0 14px 44px rgba(0,0,0,.7),0 0 18px rgba(233,185,68,.2)}
#hub .xslab .xsc{position:relative;z-index:1;display:flex;gap:12px;align-items:flex-end;padding:96px 16px 14px 70px}
#hub .xcrest{position:absolute;left:14px;bottom:16px;width:42px;height:42px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 2px 4px #000);z-index:2}
#hub .xtx{min-width:0;flex:1}
#hub .xk{font:700 10.5px var(--pe-bf);letter-spacing:.22em;text-transform:uppercase;color:#b9ac82;text-shadow:0 1px 2px #000}
#hub .xslab h3{font:700 19px/1.15 var(--pe-df);letter-spacing:.05em;text-transform:uppercase;color:#f0dda0;margin:3px 0 3px;text-shadow:0 2px 4px #000}
#hub .xb{font:13.5px/1.4 var(--pe-bf);color:#cfc7b2;text-shadow:0 1px 2px #000;display:block}
#hub .xright{align-self:flex-end}
#hub .xpct{font:700 14px var(--pe-df);color:#f6ce62;text-shadow:0 1px 2px #000;white-space:nowrap}
#hub .xthread{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(20,16,32,.85);z-index:2}
#hub .xthread i{display:block;height:100%;background:linear-gradient(90deg,var(--pe-gold-c),var(--pe-gold-b));box-shadow:0 0 8px rgba(233,185,68,.7)}
#hub .xslab.full{border-color:var(--pe-gold-c)}

/* ---------- toast / modal ---------- */
#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(16px);z-index:90;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;display:flex;gap:9px;align-items:center;max-width:90vw;
  background:linear-gradient(180deg,#2c2740,#15121f);border:1px solid #0a0812;border-radius:3px;
  box-shadow:inset 0 0 0 1px #575066,0 10px 30px #000c;padding:12px 18px;font:600 14.5px var(--pe-bf);color:#e9e4d6}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast code{font:700 13px var(--pe-bf);color:#f6ce62;border:1px solid #5c4d1f;border-radius:99px;padding:1px 9px}
.pbackdrop{position:fixed;inset:0;background:rgba(4,3,8,.7);z-index:100;display:none;align-items:center;justify-content:center;padding:18px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pbackdrop.open{display:flex}
.pmodal{width:min(430px,100%);background:#131022;border:1px solid #3a3352;border-radius:6px;box-shadow:0 30px 80px #000;padding:24px}
.pmodal h3{margin:0 0 6px;font:700 17px var(--pe-df);letter-spacing:.06em;text-transform:uppercase;color:#f0dda0}
.pmodal p{margin:0 0 14px;font:15px var(--pe-bf);color:var(--pe-ink-dim)}
.pmodal input{width:100%;font:15px var(--pe-bf);padding:11px;border-radius:3px;border:1px solid #3a3352;background:#0c0a14;color:#e9e4d6;margin-bottom:16px}
.pmodal .row{display:flex;gap:10px;justify-content:flex-end}
.pbtn{border:1px solid #3a3352;border-radius:3px;background:#1c1730;color:#e9e4d6;font:700 13px var(--pe-df);letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;cursor:pointer}
.pbtn.gold{background:linear-gradient(180deg,#e9b944,#a06a14);color:#241a02;border-color:#3c2a06}
.pbtn.danger{background:linear-gradient(180deg,#c0524a,#7c2620);color:#fff;border-color:#3c0e0a}

/* no-JS static layer: show only the light crest variant (dark variant is toggled by the
   JS-set data-theme attribute, which never exists without JS) */
html:not(.pe-js) .wrap .crest .cd,html:not(.pe-js) .wrap .crescent .cd{display:none}

/* ---------- print: hide the app, show the ORIGINAL static document (PORT-SPEC section 4) ---------- */
@media print{
  #top,#backdrop,#wrap,#hub,#splash,#toast,.pbackdrop{display:none!important}
  .wrap svg.ico{width:17px!important;height:17px!important;vertical-align:-2px}
  html.pe-js body,body{background:#fff!important}
  .wrap svg{max-width:24px;max-height:24px}
  .wrap .crest img{width:74px!important;height:74px!important}
  .wrap .crest .cd,.wrap .crescent .cd{display:none!important}
  .pe-static-hidden{display:block!important}
  /* checkbox-state stamp on the real static DOM (set by syncPrintState() in path-engine.js) */
  ul.steps>li.pe-print-step-done{opacity:.6}
  ul.steps>li.pe-print-step-done::after{content:" \2713 done";font-weight:700;color:#2d7d4f}
  article.quest.pe-print-done h3{text-decoration:line-through;text-decoration-thickness:1.5px}
  body::after{content:"eq2sig.com";position:fixed;bottom:5mm;right:6mm;font:400 8pt/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#9a9aa2;letter-spacing:.04em}
}

/* icons inside reused content (.start/.reward/.hazard/.tip/.pre h2 etc.) lost their
   original guide-scoped sizing rules (.start .ico, .pre h2 .ico, ...) once their wrapper
   classes changed (startline/loot/haz/tipbox/prebody) — hide them; the pill/label styling
   above already carries the visual weight (waypoint diamond, red/gold callout labels). */
#stage svg.ico,#stage svg.el{display:none}

/* static callout/emphasis classes ride into injected app content with their original
   markup (renderPre injects .pre raw; steps keep inline spans) - the guides' own unscoped
   light-document rules otherwise paint them (light hazard boxes in dark mode, dark-red
   .warn / violet .night on the dark panel). App-side theme-aware overrides (2026-07-06;
   latent since the redesign - verified identical on the live pre-audit site): */
#stage .prebody .hazard{display:flex;flex-direction:column;gap:2px;margin:12px 0;padding:12px 15px;
  border:1px solid #6b2a24;border-left:3px solid #c5392e;border-radius:4px;background:rgba(197,57,46,.1);
  color:var(--pe-ink-dim);font-size:inherit;line-height:inherit}
/* the guides' own unscoped .hazard p / .hazard b rules set hard LIGHT-DOCUMENT colors and
   sizes (rage: #7a2b22 / #5e2019; most others: var(--ink-soft) resolving to the static
   palette) - they ride into the injected panel and go dark-on-dark. Pin them here. */
#stage .prebody .hazard p{margin:0;color:var(--pe-ink-dim);font-size:inherit}
#stage .prebody .hazard b,#stage .prebody .hazard strong{color:#ffd9d3}
html[data-theme="light"] #stage .prebody .hazard{background:#fdeceb;border-color:#d99089;border-left-color:#c5392e}
html[data-theme="light"] #stage .prebody .hazard b,html[data-theme="light"] #stage .prebody .hazard strong{color:#7c2620}
#stage .warn{color:#ff9d8a;font-weight:700}
html[data-theme="light"] #stage .warn{color:#a8231d}
#stage .night{color:#c3aef0;font-weight:700}
html[data-theme="light"] #stage .night{color:#5d3f96}

/* ---------- F5: daylight mode redesign (Dennis: shipped daylight was unshippable —
   dark-on-dark chrome text + a dark backdrop wash under one light stage panel). Two rules:
   (1) CHROME (top bar/search/charsel/menu/modal/toast/slabs) is game chrome — ONE fixed
       palette in BOTH themes, never var(--pe-ink)/var(--pe-mut) (already fixed above).
   (2) The WORLD goes to daylight: a warm parchment-tinted backdrop wash (not a lighter dark
       wash), rail text flips dark with a scrim strip for guaranteed contrast, and the hub
       masthead (which sits directly on backdrop art, not inside the parchment stage panel)
       flips dark too. Every value below was contrast-checked against its actual background,
       not eyeballed. ---------- */
html[data-theme="light"] #backdrop{background:#f2e9d3}
html[data-theme="light"] #backdrop .bd{filter:brightness(1.12) saturate(.82)}
html[data-theme="light"] #backdrop .bdshade{background:
  radial-gradient(120% 90% at 50% 0%,rgba(242,233,211,.12) 0%,rgba(242,233,211,.58) 55%,rgba(242,233,211,.82) 100%),
  linear-gradient(180deg,rgba(242,233,211,.64),rgba(242,233,211,.32) 26%,rgba(242,233,211,.58) 78%,#f2e9d3)}

/* rail: pinned light in dark theme (default, unchanged) — flips dark in daylight, plus a
   soft parchment scrim strip behind the column so contrast holds regardless of the zone
   art's own brightness underneath */
/* (daylight keeps the base position:sticky - a position:relative override here broke rail/stage alignment) */
html[data-theme="light"] #path::before{content:"";position:absolute;inset:-10px -14px;z-index:-1;border-radius:16px;
  background:linear-gradient(90deg,rgba(242,233,211,.62),rgba(242,233,211,.38) 75%,transparent)}
html[data-theme="light"] #path .phl{color:#5c4f36;text-shadow:none}
html[data-theme="light"] #path #pct{color:#3a2e12;text-shadow:none}
html[data-theme="light"] #path .zcap{color:#5c4f36;text-shadow:none}
html[data-theme="light"] #path .node .nl{color:#3d3524;text-shadow:none}
html[data-theme="light"] #path .node .nl:hover{color:#1c1608}
html[data-theme="light"] #path .node.done .nl{color:#8a7f66}
html[data-theme="light"] #path .node.current .nl{color:#241c08;font-weight:800}

/* hub masthead/tagline/progress sit directly on backdrop art (not the parchment stage
   panel) — flip dark against the lightened wash above */
html[data-theme="light"] #hub .mast .me{color:#5c4f36;text-shadow:none}
html[data-theme="light"] #hub .mtag{color:#3d3524;text-shadow:none}
html[data-theme="light"] #hub .gprog b{color:#8a5c10;text-shadow:none}
html[data-theme="light"] #hub .gprog span{color:#5c4f36}
html[data-theme="light"] #hub .gprog i{color:#3d3524}
html[data-theme="light"] #hub .shelfhead>span:nth-child(2){filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}

/* ---------- F3: Text & Readability setting (menu: Standard/Large/Hyperlegible,
   persisted in prefs.textMode — see PORT-SPEC Phase F3). Print is unaffected (only
   scoped to #stage/#hub/#top, never to .pe-static-hidden's printed content). ---------- */
#pop .pophead{padding:9px 12px 4px;font:700 10.5px var(--pe-bf);letter-spacing:.18em;text-transform:uppercase;color:#6f6885}

/* Large: explicit font-size overrides (zoom is banned - HANDOFF L8) */
/* Hyperlegible = Atkinson + the SAME size bump as Large (Dennis 2026-07-02: it read smaller than Large) */
html[data-textmode="hyperlegible"] #stage .otx{font-size:19.5px}
html[data-textmode="hyperlegible"] #stage .otx ul li{font-size:17px}
html[data-textmode="hyperlegible"] #stage .lore{font-size:19px}
html[data-textmode="hyperlegible"] #stage .startline,html[data-textmode="hyperlegible"] #stage .loot,
html[data-textmode="hyperlegible"] #stage .haz,html[data-textmode="hyperlegible"] #stage .tipbox,
html[data-textmode="hyperlegible"] #stage .prebody{font-size:17.5px;line-height:1.6}
html[data-textmode="hyperlegible"] .node .nl{font-size:16.5px}
html[data-textmode="hyperlegible"] #hub .xb{font-size:15.5px}
/* Large: explicit sizes (zoom corrupted the translucent stage panel w/ backdrop-filter) */
html[data-textmode="large"] #stage .otx{font-size:19.5px}
html[data-textmode="large"] #stage .otx ul li{font-size:17px}
html[data-textmode="large"] #stage .lore{font-size:19px}
html[data-textmode="large"] #stage .startline,html[data-textmode="large"] #stage .loot,
html[data-textmode="large"] #stage .haz,html[data-textmode="large"] #stage .tipbox,
html[data-textmode="large"] #stage .prebody{font-size:17.5px;line-height:1.6}
html[data-textmode="large"] .node .nl{font-size:16.5px}
html[data-textmode="large"] #hub .xb{font-size:15.5px}
html[data-textmode="large"] #hub .xslab h3{font-size:21px}

/* Hyperlegible: body font swaps via the --pe-bf custom property (every rule already
   reads var(--pe-bf), so this one redefinition recolors the whole content area — no
   per-rule edits needed); titles go solid gold instead of gradient-clip; italics off;
   slight word-spacing bump. Scoped to #stage/#hub/#top so print + chrome-fixed labels
   outside these regions are unaffected. */
html[data-textmode="hyperlegible"] #stage,html[data-textmode="hyperlegible"] #hub,html[data-textmode="hyperlegible"] #top{
  --pe-bf:'Atkinson Hyperlegible',system-ui,sans-serif;
  /* contrast raise (WCAG-ward): reading ink brighter in dark, darker in daylight */
  --pe-ink:#f4efe2; --pe-ink-dim:#d3cbb6}
html[data-theme="light"][data-textmode="hyperlegible"] #stage,html[data-theme="light"][data-textmode="hyperlegible"] #hub{
  --pe-ink:#1d1608; --pe-ink-dim:#3e341d}
/* evidence-based spacing on READING text only (Zorzi 2012 crowding; Galliussi 2020 coupling rule:
   word-spacing must scale ~4x with letter-spacing or letter-spacing HURTS; BDA line-height 1.5+,
   WCAG 1.4.8 line length <=80ch). Chrome labels/uppercase strings untouched. */
html[data-textmode="hyperlegible"] #stage .otx,html[data-textmode="hyperlegible"] #stage .lore,
html[data-textmode="hyperlegible"] #stage .startline,html[data-textmode="hyperlegible"] #stage .loot,
html[data-textmode="hyperlegible"] #stage .haz,html[data-textmode="hyperlegible"] #stage .tipbox,
html[data-textmode="hyperlegible"] #stage .prebody,html[data-textmode="hyperlegible"] #stage .upnextbox{
  letter-spacing:.04em;word-spacing:.16em;line-height:1.75;max-width:64ch}
html[data-textmode="hyperlegible"] #stage .otx ul li{line-height:1.7;padding:4px 0}
/* paragraph/step separation >= 1.5x line spacing (WCAG 1.4.8) */
html[data-textmode="hyperlegible"] #stage .obj{padding-top:17px;padding-bottom:17px}
html[data-textmode="hyperlegible"] .goldtx,html[data-textmode="hyperlegible"] #stage h1,
html[data-textmode="hyperlegible"] .mast h1,html[data-textmode="hyperlegible"] .shelfhead>span:nth-child(2),
html[data-textmode="hyperlegible"] #splash b{
  background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--pe-gold-b);
  filter:none;text-shadow:0 2px 2px rgba(0,0,0,.85)}
html[data-textmode="hyperlegible"] #path .node.prenode .nl{font-style:normal}
html[data-textmode="hyperlegible"] #stage *,html[data-textmode="hyperlegible"] #hub *{font-style:normal!important}

/* ---------- responsive ---------- */
@media (max-width:920px){
  #wrap{grid-template-columns:minmax(0,1fr);padding:120px 14px 40px;gap:14px}
  #path,#path .pathhead,#path ol{min-width:0;max-width:100%}
  #path{position:static;max-height:none;overflow:visible;padding:0}
  #path .thread{display:none}
  #path .pathhead{margin-bottom:8px}
  #path ol{display:flex;overflow-x:auto;gap:4px;padding:6px 2px 10px;scrollbar-width:none}
  #path ol::-webkit-scrollbar{display:none}
  #path .zcap{display:none}
  #path .node{margin:0}
  #path .node .med{margin-left:0;box-shadow:0 2px 6px #000}
  #path .node .nl{display:none}
  #stage .qcard{padding:20px 18px}
  #stage .ctas{flex-wrap:wrap}
  #top .searchbox input{width:36vw}
  #top{flex-wrap:wrap;padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){
  #backdrop .bd{transition:opacity .2s;transform:none}
  #path .node.current .med{animation:none}
  #stage .qcard.enter{animation:none}
}

/* ---------- FOUC fix: html.pe-js is set by a 1-line head script BEFORE the body parses,
   so the old static document never paints for JS users; no-JS visitors (no class) and
   crawlers see it normally. Body goes dark pre-paint too (was flashing the static page's
   light --paper background). ---------- */
html.pe-js .wrap,html.pe-js .hub-wrap{display:none}
html.pe-js body{background:#07060c}
@media print{
  html.pe-js .wrap,html.pe-js .hub-wrap{display:block!important}
}

/* ---------- native Ko-fi slab (replaced the third-party green widget 2026-07-02) ---------- */
.kofi-slab{position:fixed;right:22px;bottom:22px;z-index:55;font-size:12.5px;padding:12px 18px 12px 15px}
.kofi-slab::before{content:"";width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fce8a8,#e9b944 55%,#8a5c10);
  border:1px solid #3c2a06;box-shadow:0 1px 3px #000}
@media (max-width:920px){.kofi-slab{right:12px;bottom:12px;padding:10px 14px 10px 12px;font-size:11.5px}}
@media print{.kofi-slab{display:none!important}}

/* ---------- daylight hub headers (Dennis 2026-07-02: gold-on-light unreadable) ---------- */
html[data-theme="light"] .shelfhead>span:nth-child(2),
html[data-theme="light"] .mast h1{
  background:linear-gradient(180deg,#6b4f16,#4a350c);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 0 rgba(255,250,235,.75))}
html[data-theme="light"] .shelfhead .sr1{color:#7a5c1e;opacity:.9}
/* (five un-scoped .mast/.gprog daylight color rules removed 2026-07-06: they were dead -
   the id-scoped block above always won specificity; colors live there) */

/* ---------- crest showcase: Before-You-Begin hero + splash cameo (2026-07-02) ---------- */
.precard{position:relative;padding-top:36px}
.precrest{display:block;width:190px;height:190px;object-fit:contain;margin:0 auto 6px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(233,185,68,.18))}
.precard .kick{margin-top:4px}
.precard h1{text-align:center}
.precard .rule{text-align:center}
.precard .kick{justify-content:center;gap:18px}
#splash .spcrest{display:block;width:120px;height:120px;min-width:120px;min-height:120px;object-fit:contain;margin-bottom:4px;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(233,185,68,.3))}
@media (max-width:920px){.precrest{width:140px;height:140px}}
@media print{.precrest,#splash{display:none!important}}

/* ---------- crest lightbox ---------- */
.precrest{cursor:zoom-in}
.precrest:hover{filter:drop-shadow(0 6px 18px rgba(0,0,0,.65)) drop-shadow(0 0 34px rgba(233,185,68,.4))}
.pe-lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;cursor:zoom-out;
  background:radial-gradient(60% 60% at 50% 46%,rgba(20,16,10,.72),rgba(4,3,8,.94));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s ease}
.pe-lightbox.open{opacity:1}
.pe-lightbox img{width:min(72vh,86vw,760px);height:auto;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,.9)) drop-shadow(0 0 60px rgba(233,185,68,.22));
  transform:scale(.94);transition:transform .18s ease}
.pe-lightbox.open img{transform:scale(1)}
@media print{.pe-lightbox{display:none!important}}
@media (prefers-reduced-motion:reduce){.pe-lightbox,.pe-lightbox img{transition:none}}
