/* Layout: a quest log. Sticky header with class, level and progress; five tabs; each tab is a stack of collapsible level brackets holding tick rows. */
:root{
  --bg:#f3f5f8; --surface:#ffffff; --sunk:#e8ecf2; --line:#cfd6e1;
  --fg:#17202e; --muted:#566377; --accent:#9a6a00; --accent-soft:#f6e7bd;
  --ok:#1f7a4d; --warn:#a2520b; --info:#2c5d9c;
  --display:"Alegreya Sans SC","Alegreya Sans",system-ui,sans-serif;
  --body:"Alegreya Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#10151d; --surface:#18202b; --sunk:#0c1017; --line:#2b3645;
  --fg:#e6ebf2; --muted:#98a5b8; --accent:#f2c14e; --accent-soft:#3a2f12;
  --ok:#5fcf95; --warn:#f0a45d; --info:#8bb6ee; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#10151d; --surface:#18202b; --sunk:#0c1017; --line:#2b3645;
  --fg:#e6ebf2; --muted:#98a5b8; --accent:#f2c14e; --accent-soft:#3a2f12;
  --ok:#5fcf95; --warn:#f0a45d; --info:#8bb6ee; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.45}
.wrap{max-width:860px;margin:0 auto;padding-inline:16px;padding-block:0 64px}
header.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);padding-block:calc(12px + env(safe-area-inset-top,0px)) 0}
.bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
h1{font-family:var(--display);font-weight:700;font-size:1.5rem;margin:0;letter-spacing:.02em;flex:1 1 auto;min-width:0}
h1 small{display:block;font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--muted);letter-spacing:0}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{font:inherit;font-size:.9rem;background:var(--surface);color:var(--fg);border:0;padding:6px 10px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--fg);font-weight:700}
.lvl{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--muted)}
.lvl input{font:600 .95rem var(--mono);width:4.2em;padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--fg)}
.meter{display:flex;align-items:center;gap:10px;margin-top:10px;font:400 .78rem var(--mono);color:var(--muted)}
.track{flex:1;height:6px;background:var(--sunk);border-radius:3px;overflow:hidden}
.fill{height:100%;background:var(--accent);width:0}
nav{display:flex;gap:2px;overflow-x:auto;margin-top:10px}
nav a{flex:0 0 auto;font-family:var(--display);font-weight:500;font-size:1rem;letter-spacing:.03em;color:var(--muted);text-decoration:none;padding:8px 12px;border-bottom:3px solid transparent}
nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent)}
nav a span{font:400 .72rem var(--mono);margin-left:5px}
main{padding-top:20px;display:flex;flex-direction:column;gap:14px}
.lede{color:var(--muted);max-width:65ch;margin:0}
h2{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.03em;margin:14px 0 0;text-wrap:balance}
details.grp{background:var(--surface);border:1px solid var(--line);border-radius:8px}
details.grp.here{border-color:var(--accent)}
summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:11px 14px}
summary::-webkit-details-marker{display:none}
.lv{font:600 .85rem var(--mono);color:var(--accent);min-width:3.6em}
.gt{font-weight:700;flex:1 1 12ch;min-width:0}
.cnt{font:400 .78rem var(--mono);color:var(--muted)}
.chip{font:400 .68rem var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:3px;border:1px solid currentColor;white-space:nowrap}
.chip.b{color:var(--ok)} .chip.a{color:var(--info)} .chip.c{color:var(--warn)} .chip.h{color:var(--accent)}
.body{border-top:1px solid var(--line);padding:6px 14px 12px;display:flex;flex-direction:column}
.note{color:var(--muted);font-size:.92rem;margin:8px 0 4px;max-width:68ch}
h3{font-family:var(--display);font-weight:500;font-size:.95rem;letter-spacing:.04em;color:var(--muted);margin:10px 0 2px}
ol.path{margin:2px 0 6px;padding-left:1.5em;max-width:70ch}
ol.path li{padding:3px 0}
ol.path li::marker{font:600 .82rem var(--mono);color:var(--accent)}
.item{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--sunk)}
.item:last-of-type{border-bottom:0}
.item input{flex:0 0 auto;width:19px;height:19px;margin:3px 0 0;accent-color:var(--accent)}
.item .tx{flex:1;min-width:0;overflow-wrap:anywhere}
.item .tx b{font-weight:700}
.item .mt{display:block;color:var(--muted);font-size:.9rem}
.item.done .tx{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.item .who{font:400 .66rem var(--mono);text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:0 4px;margin-left:6px;white-space:nowrap}
.item button.del{font:inherit;font-size:.8rem;background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:underline;padding:2px}
form.add{display:flex;gap:8px;margin-top:8px}
form.add input{flex:1;min-width:0;font:inherit;font-size:.95rem;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg)}
form.add button{font:inherit;font-size:.9rem;padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--fg);cursor:pointer}
.shop{margin-top:10px;padding-top:6px;border-top:1px dashed var(--line)}
.shop ul{list-style:none;margin:4px 0 0;padding:0;columns:2 14em;column-gap:18px;font-size:.92rem}
.shop li{break-inside:avoid;padding:2px 0;display:flex;gap:8px}
.shop .q{font:600 .8rem var(--mono);color:var(--accent);min-width:3.6em;text-align:right;padding-top:2px}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--display);font-weight:500;color:var(--muted);letter-spacing:.03em}
td:first-child{font-family:var(--mono);font-size:.82rem;white-space:nowrap}
.plain{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.plain p{margin:0 0 8px;max-width:68ch}
.plain p:last-child{margin-bottom:0}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.88rem;color:var(--muted)}
a{color:var(--info)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sync{font:400 .72rem var(--mono);color:var(--muted);background:none;border:0;padding:2px 0;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.syncdlg{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:16px 18px;width:min(420px,calc(100vw - 32px))}
.syncdlg::backdrop{background:rgb(0 0 0 / .45)}
.syncdlg h2{margin:0 0 8px}
.syncdlg p{margin:0 0 10px;max-width:none}
.syncdlg label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:4px}
.syncdlg input{width:100%;font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg)}
.syncdlg .row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.syncdlg button{font:inherit;font-size:.92rem;padding:6px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--fg);cursor:pointer}
.syncdlg button[value="on"],.syncdlg button[value="off"]{background:var(--accent-soft);font-weight:700}
ul.src{margin:0;padding-left:18px;font-size:.92rem}
@media (max-width:520px){body{font-size:16px} h1{font-size:1.3rem}}