/* Layout: field-guide app — sticky header with day + tabs; map pane with side ledger; schedule list; plan timeline */
:root{
  --bg:#EDEFE4; --surface:#F8F8F1; --ink:#1F2A22; --muted:#5A665B; --line:#CBD2BF;
  --accent:#8E1B1B; --accent-ink:#FFF8F0; --gold:#A87A0E; --forest:#2F5D3A; --azure:#24467A; --warn:#B4441A;
  --paper:#E8E1CD; --village:#F2EBD8; --village-edge:#D6C7A2; --grass:#BCCB8F; --grass-2:#90A566; --tree:#5F8B46; --tree-dark:#45713A; --tree-hi:#93B86E; --roof:#A6522F; --roof-2:#7C3E29; --thatch:#C99B4D; --wall:#F5EBD5; --timber:#5B3A26; --mapink:#5B3A26; --shadow:rgba(60,45,20,.24); --sand:#E6D3A6; --fence:#8A6A45;
  --display:"IM Fell English SC", "Palatino Linotype", Georgia, serif;
  --body:"Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111713; --surface:#18201B; --ink:#E6EADF; --muted:#9BA598; --line:#2C3830;
  --accent:#DB5A50; --accent-ink:#1A0B09; --gold:#E2B54E; --forest:#86BA90; --azure:#93B3EA; --warn:#F08A5D;
  --paper:#171E19; --village:#2A2A21; --village-edge:#34332A; --grass:#2D4027; --grass-2:#405734; --tree:#2F5330; --tree-dark:#203C23; --tree-hi:#4C7346; --roof:#7E4029; --roof-2:#5D2E1F; --thatch:#8C6B36; --wall:#5C5444; --timber:#1E140D; --mapink:#D9CBA6; --shadow:rgba(0,0,0,.38); --sand:#4C4331; --fence:#6E5536; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111713; --surface:#18201B; --ink:#E6EADF; --muted:#9BA598; --line:#2C3830;
  --accent:#DB5A50; --accent-ink:#1A0B09; --gold:#E2B54E; --forest:#86BA90; --azure:#93B3EA; --warn:#F08A5D;
  --paper:#171E19; --village:#2A2A21; --village-edge:#34332A; --grass:#2D4027; --grass-2:#405734; --tree:#2F5330; --tree-dark:#203C23; --tree-hi:#4C7346; --roof:#7E4029; --roof-2:#5D2E1F; --thatch:#8C6B36; --wall:#5C5444; --timber:#1E140D; --mapink:#D9CBA6; --shadow:rgba(0,0,0,.38); --sand:#4C4331; --fence:#6E5536; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:0 48px}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:12px 0;display:flex;flex-direction:column;gap:10px}
.brand{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,4vw,36px);margin:0;line-height:1;letter-spacing:.01em;text-wrap:balance}
h1 small{display:block;font-family:var(--body);font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.day{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface);max-width:100%;overflow-x:auto;scrollbar-width:none}
.day::-webkit-scrollbar{display:none}
.datenote{margin:6px 0 0;font-size:14px;max-width:75ch}
.datenote b{color:var(--ink)}
.datenote .flag{color:var(--accent);font-weight:700}
.datenote .wx{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.datenote a{color:var(--azure)}
.day button{border:0;background:none;color:var(--muted);font:500 14px var(--body);padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.day button[aria-pressed="true"]{background:var(--forest);color:var(--surface)}
nav.tabs{display:flex;gap:4px;overflow-x:auto}
nav.tabs button{border:0;background:none;font:400 19px var(--display);color:var(--muted);padding:8px 14px 10px;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
nav.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.badge{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 12px/20px var(--body);text-align:center}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--azure);outline-offset:2px}

.note{font-size:14px;color:var(--muted);margin:14px 0 0;max-width:75ch}
.note a{color:var(--azure)}
section[role=tabpanel]{padding-top:16px}

/* map */
.mapgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){.mapgrid{grid-template-columns:minmax(0,1fr)}}
.mapbox{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);touch-action:none;aspect-ratio:1560/980;max-width:100%}
.mapbox svg{display:block;width:100%;height:100%;cursor:grab;user-select:none}
.mapbox svg.drag{cursor:grabbing}
.zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.zoom button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:700 18px var(--body);cursor:pointer}
.legend{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:4px 11px;font:500 13px var(--body);cursor:pointer}
.chip[aria-pressed="false"]{opacity:.5}
.chip .sw{width:10px;height:10px;border-radius:50%}
.side{display:flex;flex-direction:column;gap:14px;min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card h2{font:400 21px var(--display);margin:0 0 8px}
.eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cardhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.clock{display:flex;align-items:center;gap:10px}
.clock output{font:700 22px var(--body);font-variant-numeric:tabular-nums;min-width:86px}
.clock input{flex:1;accent-color:var(--accent)}
.mini{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.mini li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.mini li:first-child{border-top:0}
.t{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.ttl{font-weight:500;min-width:0}
.ttl small{display:block;color:var(--muted);font-weight:400;font-size:13px}
.ttl button.link{all:unset;cursor:pointer;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:2px}
.add{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--forest);background:none;color:var(--forest);font:700 18px/1 var(--body);cursor:pointer;flex:none}
.add[aria-pressed="true"]{background:var(--forest);color:var(--surface)}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:4px;border:1px solid var(--line);color:var(--muted);margin-left:4px;vertical-align:1px}
.pill.r{border-color:var(--gold);color:var(--gold)}
.pill.s{border-color:var(--azure);color:var(--azure)}
.empty{color:var(--muted);font-size:14px;margin:6px 0 0}

/* svg map */
.m-paper{fill:var(--paper)}
svg.official .m-roadname,svg.official .m-compass,svg.official .m-scale{display:none}
.offpanel{margin-top:10px}
.offsteps{margin:0 0 10px;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.offsteps li{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.offsteps .btn{text-decoration:none}
.m-roadname{font:400 23px var(--display);fill:var(--mapink);opacity:.78;letter-spacing:.08em;paint-order:stroke;stroke:var(--village);stroke-width:5px;stroke-linejoin:round;pointer-events:none}
.m-compass .cring{fill:none;stroke:var(--mapink);stroke-width:2;opacity:.7}
.m-compass .cring.thin{stroke-width:1;stroke-dasharray:2 4}
.m-compass .cdark{fill:var(--accent)} .m-compass .clight{fill:var(--wall);stroke:var(--mapink);stroke-width:.8}
.m-compass .cn{font:400 22px var(--display);fill:var(--mapink)}
.m-scale .s1{fill:var(--mapink)} .m-scale .s2{fill:var(--wall);stroke:var(--mapink);stroke-width:1}
.m-scale text{font:700 15px var(--body);fill:var(--mapink)}
.mk{cursor:pointer}
.mk .disc{stroke:var(--surface);stroke-width:4}
.mk.stage .disc{fill:var(--accent)} .mk.tavern .disc{fill:var(--gold)} .mk.place .disc{fill:var(--forest)}
.mk .glyph{fill:var(--surface);font:700 20px var(--body);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.mk .lbl{font:700 21px var(--body);fill:var(--ink);paint-order:stroke;stroke:var(--village);stroke-width:7px;stroke-linejoin:round;pointer-events:none}
.mk .ring{fill:none;stroke:var(--gold);stroke-width:6;opacity:0}
.mk.live .ring{opacity:1}
.mk.sel .disc{stroke:var(--ink);stroke-width:6}
.mk.dim{opacity:.35}
@media (prefers-reduced-motion:no-preference){.mk.live .ring{animation:pulse 1.8s ease-in-out infinite}}
@keyframes pulse{50%{stroke-width:12;opacity:.5}}
.am circle{stroke:var(--surface);stroke-width:3}
.am text{fill:var(--surface);font:700 14px var(--body);text-anchor:middle;dominant-baseline:central}
.am.privy circle{fill:var(--azure)} .am.atm circle{fill:var(--forest)} .am.aid circle{fill:var(--accent)} .am.water circle{fill:#3E86B5}
.route{fill:none;stroke:var(--azure);stroke-width:6;stroke-dasharray:2 12;stroke-linecap:round;stroke-linejoin:round}
.route-under{fill:none;stroke:var(--village);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.stop circle{fill:var(--azure);stroke:var(--surface);stroke-width:4}
.stop text{fill:var(--surface);font:700 18px var(--body);text-anchor:middle;dominant-baseline:central}

/* schedule */
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tools input[type=search],.tools select{font:16px var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
.tools input[type=search]{flex:1 1 220px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.slot{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.slot>.t{font:400 20px var(--display);color:var(--ink);padding-top:6px}
.rows{display:flex;flex-direction:column;gap:6px;min-width:0}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.row .when{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.stagename{color:var(--accent);font-weight:700}.stagename.tav{color:var(--gold)}
.row{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.row.ranked.r1{border-left:4px solid var(--accent)}.row.ranked.r2{border-left:4px solid var(--gold)}.row.ranked.r3{border-left:4px solid var(--line)}
.rowmain{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:0}
.rowmain:focus-visible{outline:2px solid var(--azure);outline-offset:3px;border-radius:4px}
.rowmain .ttl::after{content:" ›";color:var(--muted)}.row.open .rowmain .ttl::after{content:" ⌄"}
.rtags{display:flex;flex-wrap:wrap;gap:4px}.rtags span{font-size:11px;font-weight:700;letter-spacing:.03em;padding:0 6px;border-radius:4px;color:var(--tc);border:1px solid currentColor;opacity:.9}
.rowside{display:flex;align-items:center;gap:8px}
.rank{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.rank button{border:0;background:none;color:var(--muted);font:700 13px var(--body);width:28px;height:30px;cursor:pointer;font-variant-numeric:tabular-nums}
.rank button+button{border-left:1px solid var(--line)}
.rank button[aria-pressed="true"][data-n="1"]{background:var(--accent);color:var(--accent-ink)}
.rank button[aria-pressed="true"][data-n="2"]{background:var(--gold);color:var(--surface)}
.rank button[aria-pressed="true"][data-n="3"]{background:var(--muted);color:var(--surface)}
.detail{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.detail p{margin:0;max-width:65ch}
.dmeta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted)}
.ranknote{font-size:13px;color:var(--muted);margin:10px 0 0}
.t.rk{font-weight:700;color:var(--accent)}
@media (max-width:520px){.row{grid-template-columns:minmax(0,1fr)}.rowside{justify-content:space-between}}
.count{font-size:14px;color:var(--muted);margin:12px 0 4px}

/* plan */
.plangrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){.plangrid{grid-template-columns:minmax(0,1fr)}}
.tl{list-style:none;margin:0;padding:0}
.tl li.item{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:start;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--forest);border-radius:8px;padding:10px}
.tl li.item.custom{border-left-color:var(--gold)}
.pact{all:unset;cursor:pointer;font-weight:500}.pact::after{content:" ›";color:var(--muted)}.pact[aria-expanded="true"]::after{content:" ⌄"}
.pact:hover{text-decoration:underline;text-underline-offset:3px}.pact:focus-visible{outline:2px solid var(--azure);outline-offset:2px;border-radius:3px}
.pdetail{margin-top:2px}
.itacts{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.swap{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:8px}
.swap ul{list-style:none;margin:6px 0 0;padding:0}
.swap li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.swap li:last-child{border-bottom:0}
.swap .why{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.swap .why span{font-size:11px;font-weight:700;padding:0 6px;border-radius:4px;background:var(--bg);color:var(--accent)}.swap .why span.warn{color:var(--warn)}
.tl li.item.clash{border-left-color:var(--warn)}
.tl .t{font:700 16px var(--body);color:var(--ink)}
.tl .t small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.gap{font-size:13px;color:var(--muted);padding:6px 0 6px 72px}
.gap.bad{color:var(--warn);font-weight:700}
.rm{all:unset;cursor:pointer;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:2px}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.btn{font:500 14px var(--body);border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:8px 12px;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.form label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted);min-width:0}
.form .full{grid-column:1/-1}
.form input,.form select,textarea{font:15px var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 9px;min-width:0;width:100%}
textarea{min-height:120px;font-family:ui-monospace,Consolas,monospace;font-size:13px}
.stat{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.stat div{font-size:13px;color:var(--muted)} .stat b{display:block;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
details summary{cursor:pointer;font-weight:700}
/* generator */
.ichip{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:5px 12px;font:500 14px var(--body);cursor:pointer}
.ichip[data-w="1"]{border-color:var(--accent);color:var(--accent)}
.ichip[data-w="2"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.preset{font:400 16px var(--display);border:1px solid var(--gold);background:none;color:var(--ink);border-radius:8px;padding:6px 10px;cursor:pointer}
.preset small{display:block;font:400 11px var(--body);color:var(--muted)}
.gen-list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.gen-list li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.gen-list .why{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.gen-list .why span{font-size:11px;font-weight:700;padding:0 6px;border-radius:4px;background:var(--bg);color:var(--accent)}
.gen-list .walk{grid-column:1/-1;font-size:12px;color:var(--muted);padding:0 0 0 54px;border:0}
/* cinder */
.cinder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:860px){.cinder{grid-template-columns:minmax(0,1fr)}}
.deckwrap{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.cinderhead{text-align:center;max-width:360px}
.cindername{font:400 44px/1 var(--display);margin:0;color:var(--accent);letter-spacing:.02em}
.cindername::after{content:"";display:block;width:56px;height:3px;margin:8px auto 6px;background:linear-gradient(90deg,var(--gold),var(--accent))}
.deck{position:relative;width:min(100%,360px);height:470px}
.ccard{position:absolute;inset:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 28px rgba(30,20,10,.16);overflow:hidden;display:flex;flex-direction:column;touch-action:none;user-select:none;transition:transform .25s ease;cursor:grab}
.ccard.dragging{transition:none;cursor:grabbing}
.ccard .band{height:150px;flex:none;position:relative;display:grid;place-items:center;background:var(--c) repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 12px,transparent 12px 24px)}
.ccard .cap{font:400 104px/1 var(--display);color:rgba(255,255,255,.92);text-shadow:0 3px 0 rgba(0,0,0,.18)}
.ccard .kind{position:absolute;left:14px;top:12px;font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.ccard .cbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:auto}
.ccard h3{font:400 25px/1.1 var(--display);margin:0;text-wrap:balance}
.ccard p{margin:0;color:var(--muted);font-size:15px}
.ctags{display:flex;flex-wrap:wrap;gap:5px}.ctags span{font-size:11px;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:4px;background:var(--bg);color:var(--muted)}.ctags span.r{color:var(--gold)}
.times{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.times span{font-size:13px;border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-variant-numeric:tabular-nums}
.stamp{position:absolute;top:20px;font:800 26px var(--body);letter-spacing:.08em;border:4px solid;border-radius:8px;padding:2px 10px;opacity:0;background:var(--surface);pointer-events:none}
.stamp.yes{left:16px;color:#2E8B57;border-color:#2E8B57;transform:rotate(-12deg)}
.stamp.no{right:16px;color:#C0392B;border-color:#C0392B;transform:rotate(12deg)}
.stamp.must{left:50%;top:56px;transform:translateX(-50%) rotate(-5deg);color:#B8860B;border-color:#B8860B}
.deckdone{position:absolute;inset:0;border:2px dashed var(--line);border-radius:16px;display:grid;place-content:center;text-align:center;padding:20px}
.deckdone h3{font:400 26px var(--display);margin:0 0 6px}
.swipebtns{display:flex;gap:14px;align-items:center}
.sw{width:58px;height:58px;border-radius:50%;border:2px solid var(--line);background:var(--surface);font:700 24px/1 var(--body);cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.sw.no{color:#C0392B;border-color:#C0392B}.sw.yes{color:#2E8B57;border-color:#2E8B57}.sw.must{color:#B8860B;border-color:#B8860B;width:50px;height:50px}
.sw.undo{width:42px;height:42px;font-size:18px;color:var(--muted)}
.sw:disabled{opacity:.35;cursor:default}
@media (prefers-reduced-motion:reduce){.ccard{transition:none}}
/* profile */
.profile .persona{font:400 34px/1.05 var(--display);margin:2px 0 6px;color:var(--accent);text-wrap:balance}
.profile .pdesc{margin:0 0 6px;max-width:60ch}
.pbar{display:block;height:8px;border-radius:999px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.pbar>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--accent));border-radius:999px}
.pbar.sm{height:7px}
.affin{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.affin li{display:grid;grid-template-columns:96px minmax(0,1fr) 28px;gap:8px;align-items:center;font-size:13px}
.affin .pct{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
/* header controls & popovers */
.top-in{position:relative}
.brand{align-items:center}
.hdr-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.wxbtn,.datebtn,.gearbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;height:40px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:500 15px var(--body)}
.wxbtn{padding:0 12px 0 8px;font-variant-numeric:tabular-nums}
.wxbtn svg{width:26px;height:26px}
.datebtn{padding:0 12px;gap:8px}.datebtn .eyebrow{font-size:10px}.datebtn b{font-weight:700;white-space:nowrap}
.gearbtn{width:40px;justify-content:center;color:var(--muted)}
.wxbtn[aria-expanded="true"],.datebtn[aria-expanded="true"],.gearbtn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.chev{color:var(--muted);font-size:12px}
.pop{position:absolute;right:16px;top:64px;z-index:40;width:min(380px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(30,20,10,.18);padding:14px;max-height:75vh;overflow:auto}
.pop h3{font:400 20px var(--display);margin:0 0 8px}
.pop .grp{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:10px 0 4px}
.datelist{display:flex;flex-direction:column;gap:4px}
.dopt{all:unset;cursor:pointer;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;border:1px solid transparent}
.dopt:hover{background:var(--bg)}.dopt[aria-current="true"]{border-color:var(--forest);background:var(--bg)}
.dopt:focus-visible{outline:2px solid var(--azure)}
.dopt small{display:block;color:var(--muted);font-size:12px}
.dopt .wxmini svg{width:24px;height:24px}
.dopt .tmp{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.attend{display:flex;flex-direction:column;gap:2px}
.attend label{display:flex;gap:10px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.attend input{width:18px;height:18px;accent-color:var(--forest)}
.hours{list-style:none;margin:8px 0 0;padding:0}
.hours li{display:grid;grid-template-columns:44px 26px 40px minmax(0,1fr) 36px;gap:8px;align-items:center;padding:4px 0;font-size:14px;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
.hours li:last-child{border-bottom:0}
.hours svg{width:22px;height:22px}
.rainbar{height:8px;border-radius:999px;background:var(--bg);overflow:hidden;border:1px solid var(--line)}
.rainbar span{display:block;height:100%;background:#3E86B5}
.hours .pc{text-align:right;color:var(--muted);font-size:12px}
.wxsum{margin:0 0 4px}
.schednote{font-size:14px;color:var(--muted);margin:0 0 12px;max-width:80ch}
.schednote a{color:var(--azure)}.schednote .flag{color:var(--accent);font-weight:700}
/* map & plan */
@media (min-width:861px){.mapcol{position:sticky;top:calc(env(safe-area-inset-top,0px) + 128px)}}
.mapbox .zoom #layersbtn{display:grid;place-items:center;color:var(--muted)}
.mapbox .zoom #layersbtn[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
.layerpop{position:absolute;right:54px;top:10px;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;width:min(300px,calc(100% - 70px));box-shadow:0 10px 26px rgba(30,20,10,.16)}
.layerpop .legend{margin-top:6px}
.whatson{padding:0;overflow:hidden}
.wo-head{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:baseline;gap:8px;padding:12px 14px}
.wo-head b{font:700 18px var(--body);font-variant-numeric:tabular-nums}
.wo-head .wocount{margin-left:auto;font-size:13px;color:var(--forest);font-weight:700}
.wo-head:focus-visible{outline:2px solid var(--azure);outline-offset:-2px}
.wo-head[aria-expanded="true"] .chev{transform:rotate(180deg)}
#wobody{padding:0 14px 14px;border-top:1px solid var(--line)}
.locblk{padding:10px 0;border-bottom:1px dashed var(--line);margin-bottom:10px}
.locblk h3{font:400 20px var(--display);margin:2px 0 4px}
.planbox h2{margin:0}
.toolbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.tbtn{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:9px 6px;font:500 14px var(--body);cursor:pointer}
.tbtn[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.sheet{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--bg)}
.sheet h2{font:400 19px var(--display);margin:0 0 8px}
.sheet .form input,.sheet .form select{background:var(--surface)}
@media (max-width:620px){.hdr-right{width:100%;justify-content:flex-end}.datebtn .eyebrow{display:none}}
/* deck modes, path editor, finished stops */
.deckmode{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface)}
.deckmode button{border:0;background:none;color:var(--muted);font:500 14px var(--body);padding:6px 12px;border-radius:999px;cursor:pointer}
.deckmode button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.editpanel{margin-top:12px}
.editpanel [aria-pressed="true"]{background:var(--azure);color:var(--surface);border-color:var(--azure)}
#map.editing{touch-action:none}
.drawlayer{position:absolute;inset:0;z-index:3;cursor:crosshair;touch-action:none;background:transparent;outline:3px solid #E08A00;outline-offset:-3px}
.drawbanner{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:10px;background:#E08A00;color:#fff;font:700 14px var(--body);padding:6px 6px 6px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.2);white-space:nowrap;max-width:calc(100% - 20px)}
.drawbanner[hidden],.drawlayer[hidden]{display:none}
.drawbanner .btn{padding:5px 12px;background:#fff;color:#7a4a00;border:0}
.drawbanner span{overflow:hidden;text-overflow:ellipsis}
.mapbox .zoom #penbtn{font-size:16px}.mapbox .zoom #penbtn[aria-pressed="true"]{background:#E08A00;border-color:#E08A00}
.zoom{z-index:5}
@media (max-width:860px){.mapbox.tall{aspect-ratio:auto;height:min(72vh,620px)}}
.pe-only{display:flex;gap:8px;align-items:center;font-weight:700;margin:10px 0 2px}.pe-only input{width:18px;height:18px;accent-color:var(--azure)}
.pe-block{fill:rgba(200,40,40,.12);stroke:#C0392B;stroke-width:4;stroke-dasharray:10 8}.pe-block.mine{stroke-dasharray:none;fill:rgba(200,40,40,.22)}
.pe-path{fill:none;stroke:#2E6F9E;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12 8;opacity:.9}.pe-path.mine{stroke-dasharray:none}
.pe-draft{fill:none;stroke:#E08A00;stroke-width:6;stroke-dasharray:6 6}.pe-draft.block{fill:rgba(224,138,0,.15)}
.pe-dot{fill:#E08A00;stroke:#fff;stroke-width:2}
.pe-test{fill:none;stroke:#7A3E8E;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.pe-list{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pe-list li{display:flex;align-items:center;gap:8px;font-size:14px}.pe-list li span:nth-child(2){flex:1}
.pe-sw{width:16px;height:6px;border-radius:3px;background:#2E6F9E}.pe-sw.b{background:#C0392B;height:12px}
.tl li.item.done{opacity:.55}.tl li.item.done .pact{text-decoration:line-through}
.donehdr{list-style:none;padding:0 0 6px}
.stop.here circle{fill:var(--muted)}
/* next-stop route, path-to, pings */
.mpill rect{fill:var(--surface);stroke:var(--line);stroke-width:2;filter:drop-shadow(0 2px 3px rgba(30,20,10,.25))}
.mpill.ppill rect{stroke-width:1.5}.mpill.ppill text{font-size:14px}.mpill.ppill.old{opacity:.7}
.leader{stroke:var(--muted);stroke-width:2;stroke-dasharray:3 4}.leader.gpill{stroke:#7A3E8E}.leader.next{stroke:var(--azure)}
#labelsG{pointer-events:none}
.mpill text{font:700 16px var(--body);fill:var(--ink);text-anchor:middle}
.mpill.next rect{stroke:var(--azure)}.mpill.gpill rect{stroke:#7A3E8E;stroke-width:3}.mpill.gpill text{fill:#7A3E8E}
.goto{fill:none;stroke:#7A3E8E;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.goto-under{fill:none;stroke:var(--village);stroke-width:14;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.goto-from circle{fill:#7A3E8E;stroke:var(--surface);stroke-width:3}
.stop.here circle{fill:var(--azure);stroke:var(--surface);stroke-width:3}
.gotobar{position:relative;margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.gotobar .gotopop{flex-basis:100%;margin-top:0}
#offbtn[aria-pressed="true"]{border-color:var(--gold);color:var(--ink);background:color-mix(in srgb,var(--gold) 22%,var(--surface))}
.gotobtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 14px;font:700 14px var(--body);cursor:pointer;box-shadow:0 4px 10px rgba(30,20,10,.12)}
.gotobtn.on{border-color:#7A3E8E;color:#7A3E8E}
.gotopop{margin-top:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;width:min(360px,100%);box-shadow:0 10px 26px rgba(30,20,10,.16);display:flex;flex-direction:column;gap:8px}
.gotopop[hidden]{display:none}
.gotopop label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted)}
.gotopop select{font:15px var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 9px;min-width:0;width:100%}
.pd .ping{fill:none;stroke-width:4;transform-origin:center;transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){.pd .ping{animation:ping 2s ease-out infinite}.pd .ping.p2{animation-delay:1s}}
@keyframes ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.pd .pdlbl{font:700 15px var(--body);fill:var(--ink);text-anchor:start;dominant-baseline:auto;paint-order:stroke;stroke:var(--village);stroke-width:5px;stroke-linejoin:round}
.pd.old{opacity:.6}
/* party */
.partyhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.pname{font:400 clamp(24px,3.5vw,32px) var(--display);margin:2px 0 0;text-wrap:balance;overflow-wrap:anywhere}
.codebox{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px dashed var(--gold);border-radius:var(--r);padding:8px 12px}
.codebox b{font:700 24px var(--body);letter-spacing:.18em;font-variant-numeric:tabular-nums;color:var(--accent)}
.people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.people>li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:start;padding:9px 0;border-top:1px solid var(--line)}
.people>li:first-child{border-top:0}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--body);color:#fff}
.where{font-size:13px;color:var(--muted)}
.where b{color:var(--forest);font-weight:700}
.theirplan{grid-column:2/-1;list-style:none;margin:4px 0 0;padding:8px 10px;background:var(--bg);border-radius:8px;font-size:14px}
.theirplan li{display:flex;gap:8px;padding:2px 0}
.chat{display:flex;flex-direction:column;min-height:420px}
.msgs{flex:1;overflow-y:auto;max-height:60vh;min-height:260px;display:flex;flex-direction:column;gap:10px;padding:4px 2px 10px}
.m{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px}
.m .av{width:28px;height:28px;font-size:12px}
.m .who{font-size:13px;font-weight:700}
.m .who span{font-weight:400;color:var(--muted);margin-left:6px;font-variant-numeric:tabular-nums}
.m .body{overflow-wrap:anywhere;white-space:pre-wrap}
.m.sys .body{color:var(--muted);font-style:italic}
.m .planbox{margin-top:4px;border:1px solid var(--line);border-left:4px solid var(--azure);border-radius:6px;padding:6px 10px;font-size:14px;background:var(--bg)}
.m .planbox li{list-style:none;display:flex;gap:8px}
.m .planbox ul{margin:0;padding:0}
.send{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.send input{flex:1;min-width:0;font:16px var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 10px}
.pd circle{stroke:var(--surface);stroke-width:3}
.pd text{fill:#fff;font:700 13px var(--body);text-anchor:middle;dominant-baseline:central}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;font-size:14px;z-index:50}

/* ---------- webapp additions: quests, PIN, demo badge ---------- */
.modebadge{background:var(--gold);color:#1A1405;font-size:13px;padding:6px 16px;text-align:center}
.pinbox{display:flex;flex-direction:column;gap:4px;margin:10px 0;border-color:var(--gold)}
.pinbox b{font:700 32px/1.1 var(--body);letter-spacing:.2em;color:var(--accent)}
.lvl{display:flex;gap:14px;align-items:center}
.lvlnum{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font:700 26px var(--display);background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 3px var(--gold)}
.lvltitle{margin:2px 0 6px;font-family:var(--display)}
.board ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.board li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--bg)}
.board li.me{outline:2px solid var(--gold)}
.board .rank{width:18px;font-weight:700;color:var(--muted)}
.board .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.board .xp{font-size:13px;color:var(--muted);white-space:nowrap}
.questgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.quest{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.quest h3{margin:0;font:400 20px/1.15 var(--display)}
.quest p{margin:0;font-size:15px}
.quest.done{opacity:.72}
.qtop{display:flex;justify-content:space-between;align-items:center}
.qxp{font-weight:700;color:var(--gold);font-size:14px}
.qdone{color:var(--forest);font-weight:700}
.qsel{font:15px var(--body);padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);min-width:0;flex:1 1 140px;max-width:100%}
.qprog{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.qprog .pbar{flex:1}
.qmsg{margin:0;min-height:0}
.qmsg:empty{display:none}
.qsec{grid-column:1/-1;margin:10px 0 0;font:400 20px var(--display)}

.appfoot{max-width:1180px;margin:0 auto;padding:0 16px 32px;font-size:14px;color:var(--muted)}
.appfoot a,.draftbadge a{color:inherit;font-weight:700}

/* Wizard Wizard guide */
.wzbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;font:700 13px var(--body);cursor:pointer;position:relative}
.wzbtn-sp{display:grid;place-items:center;width:24px}
.wzbtn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
@media (max-width:560px){.wzbtn-t{display:none}.wzbtn{padding:0 6px}}
.wizard{position:fixed;z-index:40;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(400px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;background:var(--surface);border:2px solid var(--gold);border-radius:14px;padding:14px 16px 12px;box-shadow:0 18px 40px rgba(20,12,4,.28)}
.wizard[hidden]{display:none}
.wz-head{display:flex;align-items:center;gap:10px}
.wz-av{flex:none;display:grid;place-items:end center;width:52px;height:56px;background:color-mix(in srgb,var(--gold) 16%,var(--bg));border-radius:10px;padding-bottom:2px}
.wz-who{flex:1;min-width:0}
.wz-dots{display:flex;gap:4px;margin-top:5px}
.wz-dots i{width:14px;height:4px;border-radius:2px;background:var(--line)}
.wz-dots i.on{background:var(--gold)}
.wz-x{border:0;background:none;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:8px;align-self:flex-start}
.wz-x:hover{color:var(--ink);background:var(--bg)}
.wizard h2{font:400 23px/1.15 var(--display);margin:12px 0 4px;color:var(--accent)}
.wz-body p{margin:6px 0;font-size:15px}
.wz-code{background:var(--bg);border:1px dashed var(--gold);border-radius:8px;padding:8px 10px;overflow-wrap:anywhere}
.wz-code b{font-size:22px;letter-spacing:.14em}
.wz-choices{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.wz-c{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:10px 12px;font:15px var(--body);cursor:pointer}
.wz-c:hover,.wz-c:focus-visible{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--bg))}
.wz-c[aria-current="true"]{border-color:var(--gold)}
.wz-c small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.wz-c.quiet{background:none;border-style:dashed}
.wz-i{font-size:26px;line-height:1;flex:none;width:32px;text-align:center}
.wz-foot{margin-top:8px;min-height:20px}
.wz-foot .link[hidden]{display:none}
.wz-spot{outline:3px solid var(--gold)!important;outline-offset:3px;border-radius:10px;animation:wzglow 1.6s ease-in-out infinite}
@keyframes wzglow{50%{outline-color:color-mix(in srgb,var(--gold) 35%,transparent)}}
.wz-walker{position:absolute;z-index:39;pointer-events:none;transition:left .85s ease-in-out,top .85s ease-in-out;filter:drop-shadow(0 3px 2px rgba(0,0,0,.3))}
.wz-walker[hidden]{display:none}
.wz-walker svg{display:block}
.wz-walker.flip svg{transform:scaleX(-1)}
.wz-walker.walking svg{animation:wzstep .22s steps(2) infinite}
.wz-walker:not(.walking) svg{animation:wzidle 2.4s ease-in-out infinite}
@keyframes wzstep{50%{transform:translateY(-3px) rotate(-4deg)}}
.wz-walker.flip.walking svg{animation-name:wzstepf}
@keyframes wzstepf{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) translateY(-3px) rotate(4deg)}}
@keyframes wzidle{50%{transform:translateY(-2px)}}
.wz-walker.flip:not(.walking) svg{animation:none}
.wz-pill{position:fixed;z-index:40;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px;border:2px solid var(--gold);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 16px 6px 10px;font:700 15px var(--body);cursor:pointer;box-shadow:0 10px 26px rgba(20,12,4,.25)}
.wz-pill[hidden]{display:none}
@media (max-width:560px){.wizard{right:8px;left:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));max-height:50vh;padding:10px 12px}.wizard h2{font-size:20px;margin-top:8px}.wz-av{width:40px;height:44px}.wz-av svg{height:40px;width:auto}.wz-pill{right:8px}}
@media (prefers-reduced-motion:reduce){.wz-spot,.wz-walker svg{animation:none!important}.wz-walker{transition:none}}
.wzwrap{position:relative;display:inline-flex}
.wzbubble{position:absolute;top:calc(100% + 12px);left:-4px;z-index:25;display:flex;align-items:flex-start;gap:2px;width:max-content;max-width:min(230px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:2px solid var(--gold);border-radius:12px;padding:8px 4px 8px 12px;box-shadow:0 8px 20px rgba(20,12,4,.22);animation:wzpop .35s cubic-bezier(.2,1.6,.4,1) both}
.wzbubble[hidden]{display:none}
.wzbubble::before,.wzbubble::after{content:"";position:absolute;left:18px;border:9px solid transparent;border-top:0}
.wzbubble::before{top:-11px;border-bottom:11px solid var(--gold)}
.wzbubble::after{top:-7px;border-bottom:10px solid var(--surface)}
.wzb-say{border:0;background:none;color:inherit;font:700 15px/1.3 var(--body);text-align:left;cursor:pointer;padding:0}
.wzb-say:hover{color:var(--accent)}
.wzb-x{border:0;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 6px;border-radius:6px}
.wzb-x:hover{color:var(--ink);background:var(--bg)}
@keyframes wzpop{from{opacity:0;transform:translateY(-6px) scale(.85)}}
@media (prefers-reduced-motion:reduce){.wzbubble{animation:none}}

/* rank hats on party avatars */
.av{position:relative}
.av .hat{position:absolute;left:50%;bottom:68%;width:92%;transform:translateX(-50%) rotate(-8deg);line-height:0;pointer-events:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.av .hat svg{display:block;width:100%;height:auto}
.carryh{font-size:16px;margin:16px 0 4px}
.carrybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;padding:10px 16px;font-size:14px}
.carrybar .btn{padding:5px 12px;font-size:14px}