:root{
  /* One dark theme. Panes float over a darker backdrop (--float), lists sit in recessed wells (--well, --inset),
     and the faction (shell.css) is the accent: rules, selection, focus and primary buttons turn red or blue */
  --bg:#121519; --surface:#232830; --raised:#2a3039; --well:#191d23;
  --ink:#e9ecef; --muted:#9aa4af; --faint:#6d7783; --line:#2d343e;
  --rim:#3a434f; --edge:#0b0d10; --ctl:#4a5563;
  --float:0 0 8px 4px rgba(0,0,0,.34),inset 0 0 4px 1px var(--rim);
  --float-sm:0 0 5px 2px rgba(0,0,0,.32),inset 0 0 3px 1px var(--rim);
  --inset:inset 0 2px 7px rgba(0,0,0,.5);
  --accent:var(--faction); --accent-soft:var(--faction-soft); --violet:#b9a4e0; --violet-soft:#2a2438;
  --fv:#e9b949; --fv-soft:#3a2f14; --fv-ink:#f3d38a;
  --dg:#8d9db6; --dg-soft:#222a36; --dg-ink:#cfd9ea;
  --note:#8fbde6; --note-soft:#1c2b3a;
  --danger:#ec8a82;
  --s0:#5b8a3a; --s1:#2f7a5d; --s2:#3f5f9e; --s3:#7a4aa0; --s4:#a8452f; --s5:#8a6d1f; --s6:#2d7c8c; --s7:#8c3d62;
  /* step types: they sit on the map art as well as the page */
  --st-a:#f5c518; --st-t:#2b8a3e; --st-k:#d0342c; --st-l:#c96a12; --st-u:#8e4fd0; --st-x:#0e86a6; --st-d:#5f6f82; --st-n:#2f5f8f;
  /* the same step types as icon colours on the page, lighter to stay readable */
  --sg-a:#f5c518; --sg-t:#5cc46e; --sg-k:#ef6b61; --sg-l:#f0913f; --sg-u:#b88af0; --sg-x:#3ec2e0; --sg-d:#9aa8b8;
  /* world layers on the map */
  --wl-fp:#2d63b0; --wl-gy:#177a74; --wl-danger:#8e1c16;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{min-height:100%}
/* keep room for the scrollbar so content doesn't shift when it appears (the quest editor never scrolls the page) */
html:not(:has(body[data-view="quests"])){scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.45 "Source Sans 3",system-ui,sans-serif;display:flex;flex-direction:column;min-height:100vh}
body[data-view="quests"]{height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button,.btn{cursor:pointer;background:transparent;border:1px solid var(--ctl);border-radius:4px;padding:5px 11px;font-size:13.5px;font-weight:600;line-height:1.3;display:inline-block}
button:hover,.btn:hover{border-color:var(--faction)}
button:not(.pin):active,.btn:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.55)}
/* the one filled button: faction colour with a bevel */
button.primary{background:linear-gradient(var(--faction),var(--faction-deep));border-color:var(--edge);color:#fff;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.5)}
button.primary:hover{border-color:var(--edge);filter:brightness(1.1)}
:focus-visible{outline:3px solid var(--faction-hi);outline-offset:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}

/* quest list toolbar */
.vbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:14px 16px 0;padding:10px 14px;background:var(--surface);border:1px solid var(--rim);border-radius:5px;box-shadow:var(--float)}
.rname input{font:700 17px "Alegreya SC",Georgia,serif;background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 8px;width:min(340px,60vw)}
.rname input:hover,.rname input:focus{border-color:var(--ctl);background:var(--well)}
.stats{font:13.5px "Source Sans 3",sans-serif;color:var(--muted);font-variant-numeric:tabular-nums}
.actions{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}

/* layout */
.qlview{display:flex;flex-direction:column}
/* the list's width is set by dragging the divider (--side-w); the clamp keeps both columns usable */
.layout{flex:1;min-height:0;display:grid;padding:14px 16px 12px;grid-template-columns:clamp(320px,var(--side-w,470px),calc(100% - 308px)) 16px minmax(0,1fr)}
.side{display:flex;flex-direction:column;min-height:0;min-width:0}
.layout>.side,.mapcol{background:var(--surface);border:1px solid var(--rim);border-radius:5px;box-shadow:var(--float)}
.layout>.side{overflow:hidden}
/* The map column: zone buttons, map, map options and details, all on screen. fitMap (editor.js) sizes
   the map (--map-w). The details go under the map, with a divider (.hsplit) sharing the height, or in
   a column down the left beside the list (.side); they scroll inside */
.mapcol{min-height:0;min-width:0;overflow:auto;padding:12px 16px;display:grid;gap:8px 14px;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(160px,1fr);grid-template-areas:"zones" "map" "opts" "hsplit" "detail"}
.mapcol.side{grid-template-columns:minmax(0,1fr) var(--map-w);grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"detail zones" "detail map" "detail opts" "detail ."}
.mapcol.side.wide{grid-template-rows:auto 1fr auto;grid-template-areas:"zones zones" "detail map" "opts opts"}
.mapcol.side .hsplit{display:none}
.layout.nomap .mapcol{grid-template-rows:minmax(0,1fr);grid-template-areas:"detail"}
/* the divider: no height of its own, a grab area over the gap between the options and the details */
.hsplit{grid-area:hsplit;position:relative;height:0}
.hsplit::before{content:"";position:absolute;left:0;right:0;top:-8px;height:16px;cursor:row-resize;touch-action:none}
.hsplit::after{content:"";position:absolute;left:50%;top:-2px;width:44px;height:4px;transform:translateX(-50%);border-top:1px dotted var(--muted);border-bottom:1px dotted var(--muted);opacity:.7;pointer-events:none}
.hsplit:hover::after,.hsplit:focus-visible::after,.mapcol.resizing .hsplit::after{border-color:var(--accent);opacity:1}
.hsplit:focus-visible{outline:none}
.mapcol.resizing{cursor:row-resize;user-select:none}
.mapcol.resizing .vp{pointer-events:none}
.mapwrap{display:contents}
.mapwrap[hidden]{display:none}
.zones{grid-area:zones}
.maphost{grid-area:map;min-width:0}
.opts{grid-area:opts}
.splitter{cursor:col-resize;touch-action:none;position:relative;border-radius:4px}
.splitter::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:36px;transform:translate(-50%,-50%);border-left:1px dotted var(--muted);border-right:1px dotted var(--muted);opacity:.7}
.splitter:hover,.splitter:focus-visible,.layout.resizing .splitter{background:var(--accent-soft)}
.splitter:focus-visible{outline-offset:-2px}
.layout.resizing{cursor:col-resize;user-select:none}
.layout.resizing .mapcol{pointer-events:none}
/* the list / map / details switch for narrow screens (see the end of this file) */
.mswitch{display:none}

/* tabs & panes */
.sidehead{position:relative;z-index:3}
.tabbar{display:flex;align-items:flex-end;gap:4px;padding:10px 8px 0 10px;background:var(--surface);border-bottom:3px solid var(--faction);box-shadow:0 12px 8px -8px #000}
.tabs{display:flex;flex:1;min-width:0;gap:4px}
.searchbtn{display:grid;place-items:center;width:32px;height:32px;margin-bottom:4px;padding:0;border:1px solid transparent;border-radius:4px;background:none;color:var(--muted)}
.searchbtn:hover{color:var(--ink);background:var(--raised);border-color:var(--ctl)}
.searchbtn[aria-expanded="true"]{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.searchbar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.searchbar[hidden]{display:none}
.searchbar input{flex:1 1 auto;min-width:0;padding:6px 10px;border:1px solid var(--ctl);border-radius:4px;background:var(--well)}
.searchclose{padding:2px 8px;border:0;background:none;color:var(--muted);font-size:18px;line-height:1}
.searchclose:hover{color:var(--ink)}
.tabs button{border:2px solid var(--rim);border-bottom:0;border-radius:5px 5px 0 0;background:var(--surface);padding:7px 12px 6px;font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap}
.tabs button:hover{border-color:var(--faction);color:var(--ink)}
.tabs button:active{box-shadow:none}
.tabs button[aria-selected="true"]{color:var(--faction-hi);border-color:var(--faction);background:linear-gradient(var(--faction-soft),var(--surface))}
.tabs .count{font:600 12.5px "Source Sans 3",sans-serif;color:var(--faint);margin-left:3px;font-variant-numeric:tabular-nums}
.pane{flex:1;min-height:0;overflow:auto;padding:0 10px 14px}
.panetools{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0 6px}
/* offer to add the levels the route grew by (editor offerGrown) */
.extbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:10px 0 2px;padding:9px 12px;background:var(--faction-soft);border:1px solid var(--faction);border-radius:5px;box-shadow:var(--float-sm)}
.extbar[hidden]{display:none}
.extbar span{flex:1 1 240px;font-weight:600}
/* a fresh list starts folded (editor foldFresh) */
.foldtip{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:5px 4px 5px 12px;background:var(--faction-soft);border:1px solid var(--faction);border-radius:5px;box-shadow:var(--float-sm);font-weight:600}
.foldtip[hidden]{display:none}
.foldtip>span:not(.chev){flex:1}
.foldtip .chev{font:12px/1 "Source Sans 3",sans-serif;color:var(--faction-hi)}
/* the route list's how-to, shown while the ? after the key is hovered, across the tools above the list */
.lhelpbtn{display:grid;place-items:center;width:18px;height:18px;padding:0;border:1px solid var(--ctl);border-radius:50%;background:none;font:700 11.5px/1 "Source Sans 3",sans-serif;color:var(--muted);cursor:help}
.lhelp:hover .lhelpbtn,.lhelpbtn:focus-visible{border-color:var(--faction);color:var(--ink)}
.lhelpbox{display:none;position:absolute;left:0;right:0;top:calc(100% - 2px);z-index:5;padding:10px 13px;border:1px solid var(--rim);border-radius:5px;background:var(--raised);box-shadow:var(--float);font-size:12.5px;line-height:1.45;color:var(--ink)}
.lhelpbox span{display:block}
.lhelpbox span+span{margin-top:3px}
.lhelp:hover .lhelpbox,.lhelpbtn:focus-visible+.lhelpbox{display:block}
.rcount{font:12.5px "Source Sans 3",sans-serif;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.filters{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:10px 0 6px;font-size:13px;color:var(--muted)}
.filters select{padding:5px 6px;border:1px solid var(--ctl);border-radius:4px;background:var(--well)}
.filters label{display:flex;gap:5px;align-items:center;cursor:pointer;white-space:nowrap}
.filters .klegend{flex-basis:100%}

/* shared row grid: the quest name gets whatever the optional number columns (--qcols, set by the
   Columns menu) leave, which by default is everything after the step's number and icon */
.colhead,.ri,.ci{display:grid;align-items:center;column-gap:6px}
.colhead,.ri{grid-template-columns:[grip] 14px [chk] 18px [num] 30px [ico] 18px [main] minmax(0,1fr) [cols] var(--qcols,)}
.colhead.all,.ci{grid-template-columns:[chk] 22px [ico] 18px [main] minmax(0,1fr) [cols] var(--qcols,)}
.colhead{position:sticky;top:0;z-index:2;background:var(--surface);font:600 12.5px "Source Sans 3",sans-serif;color:var(--muted);padding:6px 4px 5px 12px}
.colhead .ch{text-align:right}
.colstep{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.colbtn{display:inline-flex;align-items:center;gap:4px;margin:0;padding:2px 6px;border:1px solid transparent;border-radius:5px;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.colbtn::after{content:"";width:5px;height:5px;margin:-2px 1px 0 2px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.colbtn:hover{border-color:var(--ctl);background:var(--raised);color:var(--ink)}
.colbtn[aria-expanded="true"]{border-color:var(--ctl);background:var(--raised);color:var(--faction-hi)}
.colmenu{position:fixed;z-index:45;min-width:210px;padding:10px 12px;border:1px solid var(--rim);border-radius:5px;background:var(--raised);box-shadow:var(--float);display:grid;gap:2px}
.colmenu .lab{font:700 15px "Alegreya SC",Georgia,serif;color:var(--faction-hi);margin-bottom:4px}
.colmenu label{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:13.5px;cursor:pointer}
.colmenu input{width:15px;height:15px;margin:0;accent-color:var(--accent)}
.colmenu p{margin:6px 0 0;max-width:220px;font-size:12px;line-height:1.35;color:var(--muted)}
.n{font:12.5px "Source Sans 3",sans-serif;font-variant-numeric:tabular-nums;text-align:right;color:var(--muted)}
.n.n-xp{color:var(--ink)}
.n.n-money{white-space:nowrap;font-size:11.5px;color:var(--ink)}
.n.warn{color:var(--danger);font-weight:600}

/* route list */
.rlist{list-style:none;margin:0;padding:0;background:var(--well);border:1px solid var(--edge);border-radius:4px;box-shadow:var(--inset);overflow:hidden}
/* long routes: rows out of view skip layout and paint. The row in use shows normally */
.rlist>li{content-visibility:auto;contain-intrinsic-size:auto 44px;scroll-margin-top:30px}
.rlist>li:hover,.rlist>li:focus-within,.rlist>li.sel,.rlist>li.editing{content-visibility:visible}
.ri{padding:6px 4px 6px 12px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
/* hover stays neutral: violet belongs to the selected quest's chain */
@media (hover:hover){.ri:hover,.ci:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}}
.ri.sel{background:var(--accent-soft);outline:1px solid var(--faction);outline-offset:-1px}
.ri.dragging{opacity:.4}
.ri.drop-before{box-shadow:inset 0 2px 0 var(--accent)}
.ri.drop-after,.secdiv.drop-after{box-shadow:inset 0 -2px 0 var(--accent)}
/* the drag grip shows on the row you point at (the whole row drags) */
.grip{cursor:grab;color:var(--muted);font-size:12px;letter-spacing:-2px;user-select:none;opacity:0}
.ri:hover .grip,.ri.sel .grip{opacity:1}
.num{font:600 12.5px "Source Sans 3",sans-serif;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.qcell{min-width:0}
.qname{font-weight:600;overflow-wrap:anywhere}
/* second line: who and where (or what to do), then the level, XP and money that aren't columns */
.qsub{display:flex;align-items:baseline;gap:2px 12px;font-size:12px;color:var(--muted);min-width:0}
.qwho{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qdet{flex:0 0 auto;font:12px "Source Sans 3",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.qdet>span+span::before{content:"·";margin:0 5px;opacity:.6}
/* third line: the quest's objective, only when the list is wide enough; the selected step shows all of it */
[data-id="paneRoute"],[data-id="paneAll"]{container-type:inline-size}
.qobj{display:none;font-size:12px;color:color-mix(in srgb,var(--ink) 62%,var(--muted));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@container (min-width:420px){.qobj{display:block}}
.ri.sel .qobj,.ci.sel .qobj{white-space:normal}
.hide-obj .qobj{display:none}
/* the quest's place in its chain: quiet until a quest of that chain is selected */
.chn{display:inline-flex;align-items:center;gap:3px;margin-left:7px;padding:1px 0;border-radius:4px;font:600 11.5px/1.25 "Source Sans 3",sans-serif;color:var(--muted);white-space:nowrap;vertical-align:middle;cursor:help}
.chn svg{width:12px;height:12px;flex:none}
.ri.chainmate,.ci.chainmate{background:color-mix(in srgb,var(--violet-soft) 85%,transparent)}
.ri.sel .chn,.ri.sib .chn,.ri.chainmate .chn,.ci.sel .chn,.ci.chainmate .chn,.detail h2 .chn{padding:1px 6px;color:var(--violet);background:color-mix(in srgb,var(--violet) 15%,transparent);font-weight:700}
/* the selected step's toolbar, under the step (nothing floats over the row) */
.rowbar{grid-column:main/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 3px;margin:7px 0 1px;cursor:default}
.rowbar button{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 7px;border:1px solid transparent;border-radius:4px;background:none;font-size:12.5px;color:var(--muted);white-space:nowrap}
.rowbar button:hover:not(:disabled){border-color:var(--ctl);background:var(--raised);color:var(--ink)}
.rowbar button.del:hover{color:var(--danger)}
.rowbar button svg{width:15px;height:15px}
.rowbar button[data-op="up"],.rowbar button[data-op="down"]{width:28px;padding:0;justify-content:center;font-size:14px}
.rb-sep{width:1px;height:18px;margin:0 3px;background:var(--line)}
.rb-end{display:flex;gap:4px;margin-left:auto}
.rb-split,.rb-nav,.rb-move{display:flex;align-items:center;gap:4px}
/* the split handles get a line of their own, so the other actions are always on the line under them */
.rb-split{flex-basis:100%}
.rb-nav{display:none}
.rb-lab{margin:0 3px 0 2px;font:600 12px "Source Sans 3",sans-serif;color:var(--muted)}
.ci .rowbar{display:none}
/* split handles: drag one out of the step to give that part (accept, do, turn in) its own step */
.rowbar .part{padding:0 9px 0 5px;border:1px dashed color-mix(in srgb,var(--kg) 60%,transparent);color:var(--kg);font-weight:600;cursor:grab;touch-action:none;user-select:none}
.rowbar .part:hover:not(:disabled){border-style:solid;border-color:var(--kg);background:color-mix(in srgb,var(--kg) 14%,var(--raised));color:var(--kg)}
.rowbar .part .sico{width:16px;height:16px;margin:0}
.rowbar .part .sico.qmark{font-size:19px}
.rowbar .part .sico.qmark.qt{font-size:21px}
.rowbar .part.lifted{opacity:.3}
.ri.splitsrc{background:var(--accent-soft)}
.chipdrag,.chipdrag *{cursor:grabbing!important;user-select:none}
/* while dragging a part: where it will land, and what that makes */
.splitline{position:fixed;height:0;border-top:2px solid var(--kg,var(--accent));z-index:40;pointer-events:none}
.splitline::before{content:"";position:absolute;left:0;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--kg,var(--accent))}
.splitline .tag{position:absolute;left:58px;top:-1px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;background:var(--raised);border:1.5px solid var(--kg,var(--accent));border-radius:11px;padding:1px 9px 1px 5px;font:600 12.5px/1.35 "Source Sans 3",sans-serif;color:var(--ink);white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.splitline .tag .sico{width:16px;height:16px}
.splitline .tag .sico.qmark{font-size:19px}
.splitline .tag .muted{font-weight:400}
.splitline.bad{--kg:var(--danger);border-top-style:dashed}
.splitline.bad .tag{color:var(--danger);padding-left:9px}
.splitghost{position:fixed;left:0;top:0;z-index:41;pointer-events:none;display:grid;place-items:center;width:26px;height:26px;border-radius:13px;background:var(--kc);color:var(--kf,#fff);border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.splitghost .pico{margin:0}
.splitghost.off{filter:grayscale(1);opacity:.6}
@media (prefers-reduced-motion:no-preference){
  .ri.born{animation:born 1.2s ease-out}
  @keyframes born{0%{background:color-mix(in srgb,var(--accent) 40%,var(--accent-soft))}100%{background:var(--accent-soft)}}
}
.detail .splithint .sico{width:15px;height:15px;vertical-align:-3px}
.detail .splithint .sicon{display:inline-flex;vertical-align:-3px}
.detail .splithint .sicon .sico{vertical-align:0}
.detail .splithint .sico.qmark{font-size:18px}
.secdiv{list-style:none}
.rlist .secbtn{display:flex;gap:8px;align-items:baseline;width:100%;margin:0;padding:8px 10px 6px;border:0;border-bottom:1px solid var(--edge);border-radius:0;background:linear-gradient(#2a3039,#232830);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);font:700 14.5px "Alegreya SC",Georgia,serif;color:var(--ink);text-align:left;cursor:pointer}
.rlist .secbtn:hover{color:var(--faction-hi)}
.secdiv i{font-style:normal;width:9px;height:9px;border-radius:50%;display:inline-block}
.secbtn .chev{width:10px;font:12px/1 "Source Sans 3",sans-serif;align-self:center;color:var(--faction-hi)}
.secbtn .chev::before{content:"▾"}
.secdiv.folded .chev::before{content:"▸"}
.secbtn small{margin-left:auto;font:400 12.5px "Source Sans 3",sans-serif;color:var(--muted)}
.rlist:not(.searching) .ri.folded{display:none}
.coin-g{color:var(--loot)} .coin-s{color:var(--muted)} .coin-c{color:var(--copper)}
.badge{display:inline-block;font:700 11px/1 "Source Sans 3",sans-serif;padding:3px 6px;border-radius:3px;vertical-align:1px;margin-left:5px;white-space:nowrap}
.b-fv{background:var(--fv-soft);color:var(--fv-ink);border:1px solid var(--fv)}
.b-dg{background:var(--dg-soft);color:var(--dg-ink);border:1px solid var(--dg)}
.b-lr{background:var(--accent-soft);color:var(--accent)}
.b-cl{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.b-late{background:var(--bg);color:var(--muted)}
.b-warn{background:transparent;color:var(--danger);border:1px solid var(--danger);cursor:help}
.detail ol.chain{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.detail ol.chain li{display:flex;gap:8px;align-items:baseline;font-size:13.5px}
.detail ol.chain li.go{cursor:pointer}
.detail ol.chain li.go:hover .t{text-decoration:underline}
.detail ol.chain li.cur .t{font-weight:700}
.detail ol.chain .cn{font:12.5px "Source Sans 3",sans-serif;font-variant-numeric:tabular-nums;color:var(--muted);min-width:20px;text-align:right}
.detail ol.chain button{margin-left:auto;padding:1px 8px;font-size:12px}
.detail ol.chain .st-in,.detail ol.chain .st-out{margin-left:auto;font:12.5px "Source Sans 3",sans-serif;color:var(--muted);white-space:nowrap}
.detail ol.chain .st-in{color:var(--faction-hi)}
.detail .warnline{margin:0;font-size:13px;color:var(--danger)}
.detail .warnline.soft{color:var(--muted)}
.b-soft{background:transparent;color:var(--muted);border:1px dashed var(--line);cursor:help}
.ri.fv{background:linear-gradient(to right,var(--fv-soft),transparent 55%)}
.ri.fv.sel{background:var(--accent-soft)}
.empty{color:var(--muted);padding:24px 4px}

/* notes */
.ri.note{grid-template-columns:[grip] 14px [chk] 18px [num] 30px [main] minmax(0,1fr);background:var(--note-soft)}
.ri.note.editing{grid-template-columns:[grip] 14px [chk] 18px [num] 30px [main] minmax(0,1fr) auto;align-items:start;cursor:default}
.ri.note.sel{background:var(--accent-soft)}
.ntext{display:block;font-size:14px;line-height:1.4;overflow-wrap:anywhere;padding:1px 0}
.ntext::before{content:"Note";font:700 12px "Source Sans 3",sans-serif;color:var(--note);margin-right:7px}
.nhelp{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.eops{padding-top:2px}
.eops button{padding:3px 10px;font-size:12.5px}
/* step icons: ! and ? for accept and turn-in steps split off a quest, otherwise what the quest has you do.
   One colour per step type: --kc fills the map pins and the selected quest's overlay, --kg colours the icons on the page */
.st-a{--kc:var(--st-a);--kf:#2a2214;--kg:var(--sg-a)} .st-t{--kc:var(--st-t);--kg:var(--sg-t)} .st-k{--kc:var(--st-k);--kg:var(--sg-k)}
.st-l{--kc:var(--st-l);--kg:var(--sg-l)} .st-u{--kc:var(--st-u);--kg:var(--sg-u)} .st-x{--kc:var(--st-x);--kg:var(--sg-x)} .st-d{--kc:var(--st-d);--kg:var(--sg-d)}
.sico{display:inline-grid;place-items:center;width:18px;height:18px;color:var(--kg,var(--muted));flex:0 0 auto}
.sico svg{display:block}
.sico.qmark{font:800 24px/1 "Alegreya SC",Georgia,serif;text-shadow:0 0 1px currentColor;transform:translateY(-.2em)}
.ri .sico{margin-top:1px}
.ri.done .sico{filter:grayscale(1);opacity:.55}
/* a step's icon in the lists: its main glyph and, under the ! of a step that also has you do the
   objectives, their kind, small and level with the step's second line */
.sicon{display:flex;flex-direction:column;align-items:center;gap:3px}
.sico.sub{width:14px;height:14px}
.sico.sub svg{width:14px;height:14px}
.sico.sub.qmark.qt{font-size:19px}
/* the later steps of a split quest sit indented under a dashed rule */
.ri.cont .qcell{margin-left:6px;padding-left:9px;border-left:1px dashed var(--line)}
.ri.cont .qname{font-weight:500}
.sref{margin:0 0 0 6px;padding:0 5px;border:1px solid var(--ctl);border-radius:3px;background:none;font:600 11.5px/1.5 "Source Sans 3",sans-serif;color:var(--muted);vertical-align:1px;white-space:nowrap}
.sref:hover{color:var(--ink);border-color:var(--muted);background:var(--raised)}
/* the selected quest's thread through its steps */
.rlist>li.thr{position:relative}
.rlist>li.thr::before{content:"";position:absolute;left:4px;top:0;bottom:0;border-left:2px solid var(--accent);pointer-events:none}
.rlist>li.thr-a::before{top:14px}
.rlist>li.thr-z::before{bottom:auto;height:14px}
.rlist>li.thr-a.thr-z::before{display:none}
.rlist>li.sib::after{content:"";position:absolute;left:1px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg);pointer-events:none}
.ri.sib:not(.sel){background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.klegend{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;color:var(--muted)}
.klegend>span{display:inline-flex;align-items:center;gap:3px}
.klegend .sico{width:16px;height:16px}
.klegend .sico.qmark{font-size:21px}
/* the ? draws smaller than the ! at the same size */
.sico.qmark.qt{font-size:26px}
.klegend .sico.qmark.qt{font-size:23px}
.pico.qmark.qt{font-size:16px}
.detail ul.steps .sicon{align-self:center;flex-direction:row;gap:2px}
.detail ul.steps li.cur .t{font-weight:700}
.detail .sn{font:12.5px "Source Sans 3",sans-serif;font-variant-numeric:tabular-nums;color:var(--muted);min-width:28px;text-align:right}
.detail .splits button{font-size:12.5px;padding:3px 10px}
.ri.note .num{color:var(--note)}
.ri.note textarea{width:100%;resize:vertical;min-height:34px;border:1px solid var(--ctl);border-radius:4px;padding:4px 7px;background:var(--well);font-size:13.5px}
.ri.note .pinfo{font-size:12px;color:var(--note);margin-top:2px}

/* catalog */
.csec{margin-top:10px}
.csec h3{margin:0}
.csecbtn{display:flex;align-items:baseline;gap:6px;width:100%;margin:0;padding:8px 4px 4px;border:0;border-radius:0;background:none;box-shadow:none;font:700 16px "Alegreya SC",Georgia,serif;color:var(--ink);text-align:left;cursor:pointer}
.csecbtn .chev{width:10px;font:12px/1 "Source Sans 3",sans-serif;align-self:center;color:var(--faction-hi)}
.csecbtn .chev::before{content:"▾"}
.csec.folded .chev::before{content:"▸"}
.csecbtn:hover .chev{color:var(--ink)}
.csecbtn small{margin-left:auto;font:400 12px "Source Sans 3",sans-serif;color:var(--muted)}
.catalog,ol.train{background:var(--well);border:1px solid var(--edge);border-radius:4px;box-shadow:var(--inset);padding:0 8px 8px}
.catalog:not(.searching) .csec.folded .ci{display:none}
.ci{padding:5px 4px;border-bottom:1px solid var(--line);cursor:pointer;scroll-margin-top:30px}
.ci.sel{background:var(--accent-soft);outline:1px solid var(--faction);outline-offset:-1px}
.ci.in .qname{color:var(--ink)}
.ci:not(.in) .qname{color:var(--muted)}
.ci input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;margin:0}
.ci.fv{box-shadow:inset 3px 0 0 var(--fv)}

/* map */
.zones{display:flex;flex-wrap:wrap;gap:5px}
.zbtn{font-size:13px;padding:4px 10px;display:flex;gap:6px;align-items:baseline}
.zbtn[aria-pressed="true"]{border-color:var(--faction);background:var(--accent-soft);color:var(--faction-hi);box-shadow:inset 0 0 0 1px var(--faction);font-weight:700}
.zbtn.zmore{border-style:dashed;color:var(--faint)}
.zbtn .c{font:600 12px "Source Sans 3",sans-serif;color:var(--faint);font-variant-numeric:tabular-nums}
.vp{position:relative;aspect-ratio:1022/668;width:min(100%,var(--map-w,100%));margin:0 auto;overflow:hidden;border-radius:3px;outline:2px solid var(--edge);box-shadow:0 0 0 3px var(--rim),0 4px 12px rgba(0,0,0,.55);background:#2a2214;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;flex:0 0 auto}
.vp.dragging{cursor:grabbing}
.vp.placing-mode{cursor:crosshair}
.stage{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform}
.stage img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pins{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;display:flex;align-items:center;border:0;background:none;padding:0}
.dot{min-width:24px;height:24px;padding:0 5px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:2px;color:#fff;font:700 12px/1 "Source Sans 3",sans-serif;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.55);position:relative;background:#5b8a3a}
.dot .more{position:absolute;top:-8px;right:-10px;background:#1f2420;color:#fff;border:1.5px solid #fff;border-radius:8px;font-size:9.5px;padding:1px 4px;line-height:1.1}
.pin.ghost .dot{background:rgba(30,30,30,.55)!important;border-style:dashed}
.pin.note .dot{border-radius:4px;background:#2f5f8f}
/* a cluster: step count on a dark disc, ringed by the mix of step types inside (set inline) */
.pin.cluster .dot{border-radius:50%;min-width:32px;height:32px;padding:4px;border-color:#fff}
.pin.cluster .cn{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#1f2420;font-size:12px}
.pin .lbl{position:absolute;left:calc(100% + 5px);top:50%;transform:translateY(-50%);white-space:nowrap;font:700 12px/1.15 "Source Sans 3",sans-serif;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,0 1px 2px #000;pointer-events:none;max-width:230px;overflow:hidden;text-overflow:ellipsis}
.pin:hover .dot{transform:scale(1.12)}
.pin[class*="st-"] .dot{background:var(--kc);color:var(--kf,#fff)}
.pin.sel{z-index:2}
/* linked hover: the pin of the list row under the pointer, and pins you point at, come forward with their label */
.pin:hover,.pin.hl{z-index:3}
.pin.hl .dot{transform:scale(1.3);border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 14px 4px rgba(255,255,255,.55)}
.pin.hl.pdone .dot{opacity:1}
.pin:hover .lbl[hidden],.pin.hl .lbl[hidden]{display:block}
.pin:hover .lbl,.pin.hl .lbl{background:rgba(0,0,0,.72);padding:2px 6px;border-radius:4px;max-width:320px}
.ri.hl{background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:inset 3px 0 0 var(--muted)}
.pin.sel .dot{transform:scale(1.18);border-color:#fff;box-shadow:0 0 0 2px #111,0 0 0 5px rgba(255,255,255,.9),0 2px 10px rgba(0,0,0,.7)}
.pin:focus{outline:none}
.pin:focus-visible .dot{outline:2px solid #fff;outline-offset:2px}
.ov{--kc:#e2472a}
.ov .area{fill:var(--kc);fill-opacity:.24;stroke:var(--kc);stroke-width:2.2;stroke-dasharray:6 4;stroke-linejoin:round}
.ov .area-halo{fill:none;stroke:rgba(255,255,255,.75);stroke-width:5;stroke-linejoin:round}
.ov .spawn{fill:var(--kc);stroke:#fff;stroke-width:1.2}
.ov .obj rect{fill:var(--kc);stroke:#fff;stroke-width:2}
.ov .obj text,.ov .ti text{font:700 11.5px "Source Sans 3",sans-serif;fill:#fff;text-anchor:middle;dominant-baseline:central}
.ov .ti circle{fill:var(--st-t);stroke:#fff;stroke-width:2}
.ov .ti text{fill:#fff;font-size:13px}
.ov text.olbl{font:700 12px "Source Sans 3",sans-serif;fill:#fff;text-anchor:start;paint-order:stroke;stroke:#000;stroke-width:3px;stroke-linejoin:round}
.ov .link{stroke:#fff;stroke-width:1.5;stroke-dasharray:2 4;opacity:.8;fill:none}
.ov .path{stroke:rgba(255,255,255,.55);stroke-width:1.6;stroke-linejoin:round;fill:none}
.ov .arrow{fill:#fff;stroke:rgba(0,0,0,.55);stroke-width:1;stroke-linejoin:round}
.ov .path.dim,.ov .arrow.dim{opacity:.45}
.ctrl{position:absolute;right:10px;top:10px;display:grid;gap:4px}
.ctrl button{width:34px;height:34px;padding:0;border-radius:4px;border:1px solid var(--edge);background:linear-gradient(#343c47,#252b33);color:var(--ink);font:700 18px/1 "Source Sans 3",sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(0,0,0,.55)}
.ctrl button:hover{border-color:var(--edge);color:var(--faction-hi);background:linear-gradient(#3b4450,#2a3039)}
.zl{position:absolute;left:10px;bottom:10px;font:700 12px "Source Sans 3",sans-serif;color:#fff;background:rgba(11,13,16,.8);border:1px solid var(--rim);padding:2px 7px;border-radius:3px;pointer-events:none}
.placing{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:#2f5f8f;color:#fff;padding:6px 12px;border-radius:6px;font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.placing button{margin-left:8px;padding:2px 8px;font-size:12px;background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.4)}
.opts{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:12.5px;color:var(--muted)}
.opts label{display:flex;gap:6px;align-items:center;cursor:pointer}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px}
.legend span{display:flex;align-items:center;gap:5px}
/* which steps the map shows: the next few after the last one ticked off (a slider), the ones in
   view in the list, or all of them */
.mshow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 7px}
.mshow .mapcount{white-space:nowrap}
.mshow .segs{display:inline-flex;border:1px solid var(--ctl);border-radius:4px;overflow:hidden}
.mseg{display:inline-flex;align-items:center;gap:7px;height:26px;margin:0;padding:0 10px;border:0;border-radius:0;background:none;font-size:12.5px;color:var(--muted);white-space:nowrap;cursor:pointer}
.mseg+.mseg{border-left:1px solid var(--ctl)}
.mseg:hover{color:var(--ink)}
.mseg.on{background:var(--accent-soft);color:var(--faction-hi);font-weight:700}
.mseg-ahead button{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit}
.mseg-ahead input{width:84px;margin:0;accent-color:var(--accent);cursor:pointer}
.mseg-ahead b{min-width:1.4em;font:700 12.5px "Source Sans 3",sans-serif;text-align:right;color:inherit;font-variant-numeric:tabular-nums}
/* the map legend opens over the map from the end of the options row */
.lgd{position:relative;margin-left:auto}
.lgd summary{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border:1px solid var(--ctl);border-radius:4px;font-weight:600;list-style:none;cursor:pointer;user-select:none}
.lgd summary::-webkit-details-marker{display:none}
.lgd summary::after{content:"";width:5px;height:5px;margin-top:3px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(-45deg)}
.lgd summary:hover,.lgd[open] summary{border-color:var(--faction);color:var(--ink)}
.lgd .legend{position:absolute;right:0;bottom:calc(100% + 6px);z-index:6;display:grid;grid-template-columns:repeat(2,max-content);gap:7px 20px;padding:11px 14px;border:1px solid var(--rim);border-radius:5px;background:var(--raised);color:var(--ink);box-shadow:var(--float)}
.lgd .klegend{display:contents}
/* where the details go: under the map, or beside the list */
.dock{display:inline-flex;align-items:center;gap:2px;padding-left:4px}
.dock button{display:grid;place-items:center;width:28px;height:24px;padding:0;border:1px solid transparent;border-radius:4px;background:none;color:var(--muted)}
.dock button:first-of-type{margin-left:4px}
.dock button:hover:not(:disabled){border-color:var(--ctl);color:var(--ink)}
.dock button[aria-pressed="true"]{border-color:var(--ctl);background:var(--raised);color:var(--faction-hi)}
.dock svg{width:17px;height:17px}
.legend .sico{display:inline-grid}
.legend i{width:12px;height:12px;border-radius:50%;display:inline-grid;place-items:center;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line);font:700 9px "Source Sans 3",sans-serif;font-style:normal}
.lg-done{background:var(--st-k);filter:grayscale(1);opacity:.55}
.lg-ghost{background:rgba(30,30,30,.55);border-style:dashed!important}
.lg-note{background:#2f5f8f;border-radius:3px!important}
.lg-obj{background:var(--st-d);border-radius:2px!important;transform:rotate(45deg) scale(.85)}

/* world layers: flight masters and dangerous mobs sit under the route's pins and don't cluster with them */
.pin.wpin .dot{min-width:0;width:22px;height:22px;padding:0;border-width:1.5px}
.pin.wpin .dot svg{width:14px;height:14px}
.pin.fp .dot{background:var(--wl-fp)}
.pin.gy .dot{background:var(--wl-gy)}
.pin.danger .dot{background:var(--wl-danger);width:20px;height:20px}
.pin.danger.t-elite .dot,.pin.danger.t-rare-elite .dot{border-color:#f0c24b;box-shadow:0 0 0 1.5px #5a3d00,0 1px 4px rgba(0,0,0,.55)}
.pin.danger.t-rare .dot{border-color:#cfd6dd;box-shadow:0 0 0 1.5px #333,0 1px 4px rgba(0,0,0,.55)}
.pin.danger.t-boss .dot{background:#5b2a86}
.pin.wpin .lbl{font-size:11px;font-weight:600}
.ov .patrol{fill:none;stroke:var(--wl-danger);stroke-width:2.4;stroke-dasharray:7 5;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.ov .patrol-halo{fill:none;stroke:rgba(255,255,255,.7);stroke-width:5;stroke-linejoin:round;opacity:.7}
.ov .patrol.sel{stroke-width:3.4;opacity:1}
.opts .lg-gy{background:var(--wl-gy)} .detail h2 .wico.gy{background:var(--wl-gy)}
.opts .lg-fp,.opts .lg-gy,.opts .lg-danger{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line)}
.opts .lg-fp{background:var(--wl-fp)} .opts .lg-danger{background:var(--wl-danger)}
.opts .lg-fp svg,.opts .lg-gy svg,.opts .lg-danger svg{width:12px;height:12px}
.detail h2 .wico{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;align-self:center}
.detail h2 .wico.fp{background:var(--wl-fp)} .detail h2 .wico.danger{background:var(--wl-danger)}
.detail ul.flights li{display:flex;gap:8px;align-items:baseline;font-size:13.5px}
.detail ul.flights li.go{cursor:pointer}
.detail ul.flights .w{margin-left:auto;font:12.5px "Source Sans 3",sans-serif;color:var(--muted)}

/* training tab */
.trainintro{font-size:13px;color:var(--muted);margin:10px 0 8px;max-width:70ch}
ol.train{list-style:none;margin:0}
ol.train li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;padding:6px 4px;border-bottom:1px solid var(--line);align-items:baseline}
ol.train li.onroute{background:var(--accent-soft)}
ol.train .lv{font:600 12.5px "Source Sans 3",sans-serif;color:var(--muted)}
ol.train li.onroute .lv{color:var(--ink)}
ol.train .sp{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13.5px}
ol.train .sp small{color:var(--muted);font-size:11.5px}
ol.train .sp a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--muted)}
ol.train .sp a:hover{color:var(--faction-hi);border-bottom-color:currentColor}
ol.train .none{color:var(--muted);font-size:13px;padding:10px 4px}

/* detail */
.detail{grid-area:detail;min-height:0;overflow:auto;overscroll-behavior:contain;align-content:start;background:var(--raised);border:1px solid var(--rim);border-radius:5px;box-shadow:var(--float-sm);padding:14px 16px;display:grid;gap:10px}
/* a quest's details: the heading, then groups that sit side by side in a wide panel and stack in a narrow one */
.detail .dhead,.detail .dsec{display:grid;gap:8px;align-content:start;min-width:0}
.detail .dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start}
.detail .dgrid>.dsec{padding:10px 12px;background:var(--well);border:1px solid var(--edge);border-radius:4px;box-shadow:var(--inset)}
.detail h2{font:800 22px/1.15 "Alegreya SC",Georgia,serif;text-shadow:0 2px 0 rgba(0,0,0,.45);margin:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.detail .facts{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--muted)}
.detail .facts b{color:var(--ink);font:700 13.5px "Source Sans 3",sans-serif;font-variant-numeric:tabular-nums}
.detail .summary{margin:0;font-size:14px;max-width:70ch}
.detail .lab{font:700 15px "Alegreya SC",Georgia,serif;color:var(--faction-hi)}
.detail ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.detail li.go{display:flex;gap:8px;align-items:baseline;font-size:13.5px;cursor:pointer}
.detail li.go:hover .t{text-decoration:underline}
.detail .w{margin-left:auto;font:12.5px "Source Sans 3",sans-serif;color:var(--muted);white-space:nowrap;text-align:right}
.mk{flex:0 0 auto;width:15px;height:15px;display:grid;place-items:center;font:700 10px "Source Sans 3",sans-serif;color:#fff;background:#e2472a;border-radius:3px;transform:rotate(45deg);margin:0 2px}
.mk span{transform:rotate(-45deg)}
.mk.ti{background:#f2c230;color:#2a2214;border-radius:50%;transform:none;width:17px;height:17px;font-size:11px}
.mk.ti span{transform:none}
.mk.st{background:#5b8a3a;border-radius:50%;transform:none;width:17px;height:17px}
.mk.st span{transform:none}
.detail .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.detail a{color:var(--faction-hi)}
.detail .none{font-size:13px;color:var(--muted);margin:0}

/* dialogs & toast */
dialog{border:1px solid var(--rim);border-radius:6px;background:var(--surface);color:var(--ink);padding:18px 20px;width:min(520px,92vw);box-shadow:var(--float),0 20px 60px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h2{font:800 22px "Alegreya SC",Georgia,serif;margin:0 0 6px;text-shadow:0 2px 0 rgba(0,0,0,.45)}
dialog p{margin:0 0 12px;font-size:13.5px}
.saved{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;max-height:50vh;overflow:auto}
.saved li{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--rim);border-radius:4px;background:var(--raised)}
.saved .nm{font-weight:600}
.saved .meta{font-size:12px;color:var(--muted)}
.saved .grow{flex:1;min-width:0}
.saved .del{color:var(--danger)}
.choices{display:grid;gap:8px;margin-bottom:12px}
.choices button{text-align:left;padding:10px 12px;display:grid;gap:2px;font-weight:600;background:var(--raised)}
.choices small{font-weight:400;color:var(--muted);font-size:12.5px}
.dlgbtns{display:flex;justify-content:flex-end;gap:8px}
/* feedback form (feedback.js) */
.linkbtn{border:0;background:none;padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:2px;font-size:13px}
.linkbtn:hover{color:var(--ink)}
.fbdlg{width:min(560px,94vw);max-height:92vh;overflow:auto}
.fbtypes{border:0;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fbtypes label{flex:1 1 150px;cursor:pointer}
.fbtypes input{position:absolute;opacity:0;pointer-events:none}
.fbtypes span{display:block;text-align:center;padding:8px 10px;border:1px solid var(--ctl);border-radius:4px;background:var(--raised);font-weight:600;font-size:13.5px}
.fbtypes label:hover span{border-color:var(--faction)}
.fbtypes input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.fbtypes input:focus-visible+span{outline:3px solid var(--faction-hi);outline-offset:1px}
.fbabout{padding:7px 10px;border-radius:4px;background:var(--well);border:1px solid var(--edge)}
.fbfield{display:grid;gap:4px;margin:0 0 12px;font-weight:600;font-size:13.5px}
.fbfield small{font-weight:400;color:var(--muted)}
.fbfield textarea,.fbfield input{width:100%;padding:7px 9px;border:1px solid var(--ctl);border-radius:4px;background:var(--well);font-weight:400;font-size:14px}
.fbfield textarea{resize:vertical;min-height:110px}
.fbhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fbattach{display:block;margin:0 0 10px;font-size:13.5px}
.fbattach small{color:var(--muted)}
.fbsent{margin:0 0 12px;font-size:13px}
.fbsent summary{cursor:pointer;color:var(--muted)}
.fbsent p{margin:6px 0}
.fbsent ul{list-style:none;margin:0;padding:6px 8px;border:1px solid var(--edge);border-radius:4px;background:var(--well);display:grid;gap:3px;max-height:180px;overflow:auto}
.fbsent li{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:8px}
.fbsent li span:first-child{color:var(--muted)}
.fbsent li span:last-child{overflow-wrap:anywhere}
.fbts:empty{display:none}
.fbts{margin:0 0 10px}
.fbstatus{min-height:1.2em;margin:0 0 8px;font-size:13.5px;color:var(--muted)}
.fbstatus:empty{display:none}
.fbstatus.err{color:var(--danger)}
.fbmaint{margin:0 0 14px;padding:9px 11px;border-radius:4px;background:var(--well);border:1px solid var(--edge);line-height:1.45}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--raised);color:var(--ink);border:1px solid var(--faction);padding:8px 14px;border-radius:5px;font-size:13.5px;box-shadow:var(--float),0 8px 24px rgba(0,0,0,.5);z-index:50}
@media (prefers-reduced-motion:no-preference){.toast{transition:opacity .2s}}
.toast button{margin-left:10px;padding:2px 10px;font-size:13px;font-weight:600;background:transparent;color:inherit;border-color:currentColor}
button:disabled{opacity:.45;cursor:default;border-color:var(--line)}
.undo{font-size:15px;padding:3px 9px}

/* editor: tick-off column, step notes, class/optional markers */
.ri{align-items:start}
.ri .grip,.ri .num,.ri .n{padding-top:2px}
.ri .chk{width:15px;height:15px;margin:3px 0 0;accent-color:var(--accent);cursor:pointer}
.ri.done .qcell,.ri.done .n{opacity:.45}
.ri.done .num{text-decoration:line-through}
.rlist.hide-done .ri.done{display:none}
.rlist.searching > li:not(.hit){display:none}
.ri.cls{box-shadow:inset 3px 0 0 var(--cc,var(--violet))}
.ri.sel.cls{box-shadow:inset 3px 0 0 var(--cc,var(--violet)),inset 0 0 0 999px transparent}
.qwide{grid-column:main/-1;min-width:0}
.qnote{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere;border-left:2px solid var(--line);padding-left:7px}
.ri.editing textarea{width:100%;resize:vertical;min-height:34px;border:1px solid var(--ctl);border-radius:4px;padding:4px 7px;background:var(--well);font-size:13.5px;margin-top:4px}
.ri:not(.note).editing{cursor:default}
.ri:not(.note).editing .eops{display:block;margin-top:4px}
.nmeta{display:block;margin-top:3px}
.nmeta .badge:first-child{margin-left:0}
.panetools .tick{display:flex;gap:5px;align-items:center;font-size:13px;color:var(--muted);cursor:pointer}
.pin.pdone .dot{opacity:.55;filter:grayscale(1)}
/* the step's icon inside its pin, before the step number */
.pico{display:inline-grid;place-items:center;margin-left:-1px}
.pico svg{width:13px;height:13px;stroke-width:1.9}
.pico.qmark{font:800 15px/1 "Alegreya SC",Georgia,serif;margin:0 1px 0 0}
.mapcount{font:12.5px "Source Sans 3",sans-serif;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- narrow screens: one view at a time (list, map or details), the steps as cards ---------- */
@media (max-width:980px){
  body[data-view="quests"]{height:auto;padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .vbar{margin:10px 8px 0}
  .layout{display:block;padding:10px 0 0}
  .layout>.side,.mapcol{background:none;border:0;border-radius:0;box-shadow:none}
  .layout>.side{overflow:visible}
  .rlist,.catalog,ol.train{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;padding:0}
  .splitter,.mapbtn,.lhelp,.colhead,.dock,.hsplit{display:none}
  .qlview[data-mview="list"] .mapcol,.qlview[data-mview="map"] .side,.qlview[data-mview="details"] .side,.qlview[data-mview="map"] .detail{display:none}
  /* the list's name and actions belong to the list view; the map and details start right under the header */
  .qlview[data-mview="map"] .vbar,.qlview[data-mview="details"] .vbar{display:none}
  /* the list scrolls with the page, under its sticky tab bar */
  .sidehead{position:sticky;top:0;z-index:6;background:var(--bg)}
  .tabbar{padding-top:8px}
  .pane{overflow:visible;padding:0 10px 18px}
  .mapcol{overflow:visible;padding:10px 10px 18px;display:flex;flex-direction:column;gap:8px}
  .zones{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -10px;padding:0 10px}
  .zbtn{flex:none}
  .mseg{height:32px}
  .mseg-ahead input{width:72px}
  /* the whole map fits on screen, landscape phones included */
  .vp{width:min(100%,calc((100vh - 130px) * 1022 / 668));width:min(100%,calc((100dvh - 130px) * 1022 / 668));margin:0 auto}
  /* cards */
  .rlist>li.ri,.catalog .ci{margin:0 0 8px;padding:10px 12px 10px 8px;border:1px solid var(--rim);border-radius:5px;box-shadow:var(--float-sm);column-gap:8px;scroll-margin:64px 0 76px}
  :where(.rlist>li.ri,.catalog .ci){background:var(--raised)}
  .ri.fv{background:linear-gradient(to right,var(--fv-soft),var(--raised) 55%)}
  .ri{grid-template-columns:[chk] 26px [num] 24px [ico] 20px [main] minmax(0,1fr)}
  .ri.note,.ri.note.editing{grid-template-columns:[chk] 26px [num] 24px [main] minmax(0,1fr)}
  .ri.note.editing .eops{grid-column:main/-1}
  .ci{grid-template-columns:[chk] 26px [ico] 20px [main] minmax(0,1fr)}
  .ri .grip{display:none}
  .ri .sicon{gap:6px}
  .ri .chk,.ci input{width:20px;height:20px;margin:1px 0 0}
  .qname{font-size:15.5px}
  .qsub{flex-wrap:wrap;margin-top:2px;font-size:12.5px}
  .qwho{white-space:normal}
  .qdet{flex-basis:100%}
  /* (as specific as the card rule above, or the card border wins) */
  .rlist>li.ri.sel,.catalog .ci.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:0}
  .rlist>li.ri.sib{border-color:color-mix(in srgb,var(--accent) 60%,var(--rim))}
  .rlist>li.ri.chainmate,.catalog .ci.chainmate{border-color:color-mix(in srgb,var(--violet) 45%,var(--rim))}
  .rlist>li.thr::before,.rlist>li.sib::after{display:none}
  .ri.cont .qcell{margin-left:0}
  .rlist .secdiv{border-bottom:0}
  .rlist .secbtn{margin:10px 0 8px;padding:8px 10px 6px;border:1px solid var(--edge);border-radius:4px;font-size:15px}
  .csecbtn{padding:14px 4px 8px}
  /* the selected card's toolbar, across the card: the other two views and reordering first, bigger targets */
  .rowbar{grid-column:1/-1;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
  .rowbar button{height:36px;padding:0 11px;border-color:var(--ctl);background:var(--surface);font-size:13.5px}
  .rowbar button[data-op="up"],.rowbar button[data-op="down"]{width:40px}
  .rb-nav,.ci .rowbar{display:flex}
  .rb-nav{order:-3}
  .rb-move{order:-2;margin-left:auto}
  .rb-split{order:-1}
  .rb-sep{display:none}
  .rb-end{margin-left:0}
  .toast{bottom:calc(74px + env(safe-area-inset-bottom))}
  /* the view switch, along the bottom within reach of a thumb */
  .mswitch{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:3px solid var(--faction);box-shadow:0 -6px 18px rgba(0,0,0,.5)}
  .mswitch button{display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border:0;border-radius:4px;background:none;font-size:14px;font-weight:600;color:var(--muted)}
  .mswitch button[aria-pressed="true"]{background:var(--accent-soft);color:var(--faction-hi)}
  .mswitch button[aria-pressed="true"] svg{color:var(--accent)}
  .mvbadge{min-width:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font:700 11.5px/1.6 "Source Sans 3",sans-serif;text-align:center}
}