/* one theme: dark */
:root{color-scheme:dark;--bg:#15181c;--card:#1d2126;--fg:#e4e6ea;--muted:#9aa3ae;--line:#2d3339;--accent:#5fb3c2;
--acc:#e6c25e;--edge:100%;--fp:#66d9e8;--hs:#b197fc;--food:#ff985c;--fire:#fac51c;--bag:#91a7ff;--done:#62d184;--do:#6fb0ff;--travel:#9aa8b8;--dng:#be8569;
--lv-bg:#27323d;--lv-fg:#b9c8d8;--note-bg:#232a31;--new:#c49af0;--warn-bg:#401c1f;--warn-fg:#ff7b80;--split-a:#a99bf5;--split-b:#9aa8b8;--split-c:#5fd0bf;--druid:#ff8a2b;--hunter:#5fae4e;--warrior:#c69b6d;--warrior-dark:#b87a45;--paladin:#f48cba;--qtext:#eae6dc;--loc:#bcd9b6;--die:#e58cf5;--nav-w:270px;--bar-h:44px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* sidebar */
nav{position:fixed;top:0;left:0;bottom:0;width:var(--nav-w);overflow-y:auto;padding:20px 14px;border-right:1px solid var(--line);background:var(--card)}
nav{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 35%,transparent) transparent}
nav:hover{scrollbar-color:color-mix(in srgb,var(--muted) 65%,transparent) transparent}
nav .title{font-weight:700;margin:0 0 4px;font-size:15px}
nav .docs{margin:0 0 12px;font-size:12px;color:var(--muted)}
nav .docs a{display:inline;padding:0;color:var(--accent)}
nav a{display:block;color:var(--muted);text-decoration:none;font-size:13px;padding:4px 8px;border-radius:6px;border-left:3px solid transparent}
nav a:hover{background:var(--note-bg);color:var(--fg)}
nav a.h1{color:var(--fg);font-weight:700;margin-top:10px}
/* the doc's top-level parts (h1.part): bigger sidebar links */
nav a.part{margin-top:18px;font-size:15px;color:var(--accent)}
nav a.h3{padding-left:20px}
/* phase links: 9STV north, Swamp33.9–36.6 (built by app.js from data-nav) */
nav a.phase{display:flex;align-items:baseline;gap:6px}
nav a.phase .pn{flex:none;box-sizing:border-box;min-width:2.2em;padding:0 3px;border-radius:4px;background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted);font-size:11px;line-height:1.6;text-align:center;font-variant-numeric:tabular-nums}
nav a.phase .pz{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav a.phase .pl{flex:none;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);opacity:.8}
nav a.in{color:var(--accent)}
nav a.active{background:var(--note-bg);color:var(--accent);font-weight:700;border-left-color:var(--accent)}
/* floating section header */
main{margin-left:var(--nav-w);max-width:920px;padding:0 40px 80px}
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;min-height:var(--bar-h);
margin:0 -40px;padding:8px 40px;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .15s}
.bar.on{border-bottom-color:var(--line)}
.crumb{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.crumb .up{color:var(--muted);font-weight:400}
/* content */
h1{font-size:22px;margin:48px 0 8px;padding-top:16px;border-top:3px solid var(--accent);color:var(--accent)}
/* route parts (Route 11–32, Route 32–60): a little bigger than other h1s */
h1.route{font-size:26px;margin-top:64px;padding-top:18px;border-top-width:4px}
h1.doc-title{font-size:24px;margin:12px 0 20px;padding:0;border:0;color:var(--fg)}
h2{font-size:19px;color:var(--accent);margin:40px 0 10px;padding-top:12px;border-top:1px solid var(--line)}
/* phase headings:
Phase 9 · 33.9 → 36.6 · …
The hidden " · " keeps the plain text "Phase 9 · 33.9 → 36.6 · …" for the sidebar, the floating header and pandoc. */
h2[data-nav] .ph-sep{display:none}
h2[data-nav] .ph-k{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
h2[data-nav] .ph-lv{padding:1px 6px;border-radius:4px;background:var(--lv-bg);color:var(--lv-fg);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;white-space:nowrap}
h2[data-nav] .ph-lv::before{content:"Lv "}
h2[data-nav] .ph-t{display:block;font-size:18px;line-height:1.3}
/* zones the phase goes through, right under the phase heading:
+ Tyno, Tero */
p.step.split-a{--who:var(--split-a)}
p.step.split-b{--who:var(--split-b)}
p.step.split-c{--who:var(--split-c)}
/* a split step for one player: that player's class colour (set by app.js from the who label) */
p.step.cls-druid{--who:var(--druid)}
p.step.cls-hunter{--who:var(--hunter)}
p.step.cls-warrior{--who:var(--warrior)}
p.step.cls-warrior-dark{--who:var(--warrior-dark)}
p.step.cls-paladin{--who:var(--paladin)}
/* player picker in the bar (built by app.js): All, then one button per player with a dot in their
class colour; the pressed one is filled with it. Split steps for other players are hidden. */
p.step.not-mine{display:none}
.player-pick{flex:none;display:flex;gap:2px;padding:2px;background:var(--card);border:1px solid var(--line);border-radius:999px}
.player-pick button{--pc:var(--accent);display:inline-flex;align-items:center;gap:5px;border:0;border-radius:999px;background:none;color:var(--muted);
font:inherit;font-size:12px;font-weight:700;line-height:1;padding:5px 10px;cursor:pointer;transition:background-color .12s,color .12s}
.player-pick button.cls-druid{--pc:var(--druid)}
.player-pick button.cls-hunter{--pc:var(--hunter)}
.player-pick button.cls-warrior{--pc:var(--warrior)}
.player-pick button.cls-warrior-dark{--pc:var(--warrior-dark)}
.player-pick button.cls-paladin{--pc:var(--paladin)}
.player-pick button[class]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pc)}
.player-pick button:hover{color:var(--fg);background:color-mix(in srgb,var(--pc) 10%,transparent)}
.player-pick button:focus-visible{outline:2px solid var(--pc);outline-offset:1px}
.player-pick button[aria-pressed="true"]{color:var(--pc);background:color-mix(in srgb,var(--pc) 20%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc) 45%,transparent)}
p.step[class*="split-"]{border-radius:0 6px 6px 0;box-shadow:inset 3px 0 0 var(--who);background:color-mix(in srgb,var(--who) 8%,transparent)}
.who{color:var(--who);background:color-mix(in srgb,var(--who) 16%,transparent);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:4px;white-space:nowrap}
/* sub-note under a step: text at the end of .body */
p.step .sub{display:block;position:relative;margin-top:2px;padding-left:14px;color:var(--muted);font-size:14px}
p.step .sub::before{content:"";position:absolute;left:3px;top:.3em;width:6px;height:.55em;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;border-bottom-left-radius:2px;opacity:.7}
/* checklist in a compound step: one per quest after the lead text (hanging indent) */
p.step .li{display:block;margin-top:3px;padding-left:1.6em;text-indent:-1.1em}
p.step .li *{text-indent:0}
/* place name at the start of a step: Darkshire: */
strong.loc{color:var(--loc)}
/* optional step:
+ Optional */
.opt{display:inline-block;color:var(--muted);border:1px dashed currentColor;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1.3;padding:0 5px;border-radius:4px;vertical-align:.1em}
p.step.optional{border-left:2px dashed color-mix(in srgb,var(--muted) 60%,transparent);padding-left:6px;border-radius:0 6px 6px 0}
/* phase intro under the heading */
p.intro{color:var(--muted);font-size:14px;margin:2px 0 10px}
p.intro strong{color:var(--fg)}
blockquote{margin:12px 0;padding:8px 14px;background:var(--note-bg);border-left:3px solid var(--accent);border-radius:0 6px 6px 0}
blockquote p{margin:4px 0}
/* accept / turn in: the source keeps ☐ and ✔ (for pandoc/Word); the page shows an amber "!" and a green "?" */
.acc,.done{font-size:0;display:inline-block;vertical-align:-.12em;margin:0 1px}
.acc{--q:var(--acc);border:1.5px solid var(--acc);border-radius:5px;padding:0 3px;min-width:18px;text-align:center} /* gold ! in a rounded gold box */
.done{--q:var(--acc);border:1.5px solid var(--done);border-radius:5px;padding:0 3px;min-width:18px;text-align:center} /* gold ? in a rounded green box */
.acc::before,.done::before{--o:color-mix(in srgb,color-mix(in srgb,var(--q) 35%,#000) var(--edge),transparent);font:900 18px/1 Georgia,"Times New Roman",serif;color:var(--q);
text-shadow:1px 0 0 var(--o),-1px 0 0 var(--o),0 1px 0 var(--o),0 -1px 0 var(--o),1px 1px 0 var(--o),-1px 1px 0 var(--o),1px -1px 0 var(--o),-1px -1px 0 var(--o)}
.acc::before{content:"!"}
.done::before{content:"?"}
/* quest name: The Night Watch. Bold, light cream. */
.q{color:var(--qtext);font-weight:650}
.do{color:var(--do);font-weight:700}
.travel{color:var(--travel);font-weight:700}
.train{color:var(--accent);font-weight:700}
/* death as travel: a step of its own that starts with Die and respawn at the Spirit Healer; the step number takes its colour */
.die{color:var(--die);font-weight:700;white-space:nowrap}
.die::before{content:"";display:inline-block;width:1.1em;height:1.1em;margin-right:3px;vertical-align:-.18em;background:var(--die);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 .6a5.3 5.3 0 0 0-5.3 5.3c0 1.8.8 3.1 2 3.9v1.7h6.6V9.8c1.2-.8 2-2.1 2-3.9A5.3 5.3 0 0 0 8 .6zM5.9 4.9a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6zm4.2 0a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6zM8 7.9l.8 1.4H7.2z'/%3E%3Cpath d='M2.4 12.2l11.2 3.3M13.6 12.2L2.4 15.5' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 .6a5.3 5.3 0 0 0-5.3 5.3c0 1.8.8 3.1 2 3.9v1.7h6.6V9.8c1.2-.8 2-2.1 2-3.9A5.3 5.3 0 0 0 8 .6zM5.9 4.9a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6zm4.2 0a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6zM8 7.9l.8 1.4H7.2z'/%3E%3Cpath d='M2.4 12.2l11.2 3.3M13.6 12.2L2.4 15.5' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
p.step:has(.die) .n{color:var(--die);font-weight:700;white-space:nowrap}
.dng{color:var(--dng);font-weight:700;font-size:12px}
/* NEW: quest new in Forever (not in Classic). Kept in the markup as a record, not shown */
.new{display:none}
/* warning: text, at the end of a step's body (before a sub note) */
.warn{background:var(--warn-bg);color:var(--warn-fg);font-weight:600;padding:1px 6px 1px 4px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* in a step or intro the warning is its own line at the end, with the icon hanging on the left */
p.step .warn,p.intro .warn{display:flex;align-items:flex-start;gap:5px;width:fit-content;max-width:100%;margin:4px 0 1px;padding:2px 8px 2px 6px;font-size:14px;border-left:2px solid currentColor;border-radius:0 4px 4px 0}
p.intro .warn{margin:0 0 4px}
p.step .warn::before,p.intro .warn::before{flex:none;margin:.2em 0 0}
p.step:has(.warn) .n{color:var(--warn-fg);font-weight:700}
.warn::before{content:"";display:inline-block;width:1em;height:1em;margin-right:4px;vertical-align:-.14em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.2 15.6 14.6H.4zM7.1 5.6h1.8l-.3 4.9H7.4zM7.1 11.6h1.8v1.7H7.1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.2 15.6 14.6H.4zM7.1 5.6h1.8l-.3 4.9H7.4zM7.1 11.6h1.8v1.7H7.1z'/%3E%3C/svg%3E") center/contain no-repeat}
/* level check:
; app.js sets root data-start and hides the other one. */
:root[data-start="nelf"] .start[data-for="dwarf"],:root[data-start="dwarf"] .start[data-for="nelf"]{display:none}
.start-pick{display:inline-flex;margin:8px 0 2px;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.start-pick button{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:700;padding:4px 14px;cursor:pointer}
.start-pick button+button{border-left:1px solid var(--line)}
.start-pick button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
/* leg label inside a phase:
1–6 · Shadowglen
*/
p.leg{margin:18px 0 6px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* quest list under the banner: