/* Quests drawer (js/ui/drawers/quests.js). Every colour comes from the tokens in styles.css, so high contrast and the text sizes work for free.
   Nothing is told by colour alone: rarity has a shape and a word (a dot, a diamond, a star), bonus skill levels are diamonds where earned ones are squares,
   locked quests are dashed and say what unlocks them, and a badge you have not found is a "?" with the word secret. */
.qs { display: grid; gap: .8rem; min-width: 0; }
.qs .btn { min-height: 2.75rem; text-transform: none; letter-spacing: 0; white-space: normal; }
.qs h3, .qs h4 { overflow-wrap: anywhere; }
.qs .bar { display: block; }
.qs h3:focus { outline: none; }
.qs [data-qsect] { scroll-margin-top: 3.9rem; } /* clear of the sticky jump bar */
/* a jump lands at once (js/ui/drawers/quests.js): the heading it lands on takes a brief wash of gold so the eye finds it. Only the start is named, so it fades to the heading's own look; reduced motion cuts it to nothing. */
.qs h3.landed { animation: qs-landed .9s ease-out; }
@keyframes qs-landed { from { background: color-mix(in srgb, var(--gold) 30%, transparent); } }
.qs-nav { position: sticky; top: calc(-1 * var(--db-pad, .8rem)); z-index: 2; display: flex; gap: .35rem; flex-wrap: wrap; margin: calc(-1 * var(--db-pad, .8rem)) calc(-1 * var(--db-pad, .8rem)) 0; padding: .45rem var(--db-pad, .8rem); background: var(--panel); border-bottom: 1px dashed var(--line); }
.qs-nav .btn { flex: 1 1 4rem; }
.qs-ic { font-size: 1.5rem; line-height: 1; flex: none; width: 2rem; text-align: center; }
.qs-prog { display: flex; align-items: center; gap: .6rem; }
.qs-prog .bar { flex: 1; height: .8rem; }
.qs-rw { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; font-size: .76rem; }
.qs-rw .btn { margin-left: auto; }

/* hero: level ring, points, streak, reputation */
.qs-hero { background: var(--panel2); border: 1px solid var(--line); border-left: 6px solid var(--gold); padding: .7rem .8rem; display: grid; gap: .7rem; }
.qs-lvl { display: flex; gap: .8rem; align-items: center; }
.qs-ring { --p: 0%; position: relative; flex: none; width: 4.6rem; height: 4.6rem; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) var(--p), var(--line) 0); }
.qs-ring::before { content: ""; position: absolute; inset: .45rem; border-radius: 50%; background: var(--panel2); }
.qs-ring b { position: relative; font: 800 1.5rem ui-monospace, Menlo, monospace; }
.qs-lvtx { flex: 1; min-width: 0; display: grid; gap: .25rem; }
.qs-lvtx h3 { margin: 0; }
.qs-lvtx p { margin: 0; }
.qs-lvtx .bar { height: .9rem; }
.qs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .5rem; }
.qs-stat { display: flex; gap: .55rem; align-items: flex-start; background: var(--bg2); border: 1px solid var(--line); padding: .5rem .6rem; font-size: .86rem; }
.qs-stat > span { font-size: 1.4rem; line-height: 1.1; }
.qs-stat small { display: block; color: var(--mute); font-size: .74rem; margin-top: .1rem; }
.qs-stat.pts.on { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.qs-reprow { display: flex; justify-content: space-between; gap: .5rem; font-size: .86rem; margin-bottom: .25rem; }
.qs-rep p { margin: .25rem 0 0; }
.qs-meter { position: relative; height: 1rem; background: var(--bg); border: 1px solid var(--line); }
.qs-meter > i { position: absolute; inset: 0 auto 0 0; background: var(--cyan); }
.qs-meter::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 2px solid var(--ink); } /* where every run starts: 50 */

/* skills */
.qs-skills { display: grid; gap: .7rem; }
.qs-skill { display: grid; gap: .4rem; background: var(--panel2); border: 1px solid var(--line); padding: .65rem .75rem; }
.qs-skill.ready { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.qs-skill header { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.qs-skill h4 { margin: 0; font-size: 1rem; }
.qs-skill p { margin: 0; }
.qs-pips { display: flex; gap: .22rem; flex-wrap: wrap; align-items: center; }
.qs-pip { width: 1.05rem; height: 1.05rem; display: inline-block; border: 2px solid var(--field); }
.qs-pip.on { background: var(--gold); border-color: var(--gold); }
.qs-pip.bonus { margin-left: .3rem; background: var(--cyan); border-color: var(--cyan); transform: rotate(45deg) scale(.8); }
.qs-fx { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-size: .84rem; }
.qs-fx li { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: baseline; border-bottom: 1px dotted var(--line); padding: .15rem 0; }
.qs-fx .lb { color: var(--mute); }
.qs-fx .now { font: 700 .84rem ui-monospace, Menlo, monospace; }
.qs-fx .nx { color: var(--green); font: 700 .84rem ui-monospace, Menlo, monospace; }

/* quests */
.qs-grp { display: grid; gap: .6rem; }
.qs-lab { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--mute); }
.qs-q { display: grid; gap: .4rem; background: var(--panel2); border: 1px solid var(--line); padding: .6rem .75rem; }
.qs-q header { display: flex; gap: .6rem; align-items: center; }
.qs-q h4 { margin: 0; font-size: .95rem; }
.qs-q header small { display: block; color: var(--mute); font-size: .74rem; }
.qs-q p { margin: 0; }
.qs-q.active { border: var(--bw) solid var(--gold); box-shadow: var(--shadow); }
.qs-q.locked { background: var(--panel); border-style: dashed; }
.qs-q.locked h4 { color: var(--mute); }
.qs-need { color: var(--mute); }
.qs-dgrp { display: grid; gap: .5rem; }
.qs-dist { margin: .2rem 0 0; font-size: .85rem; display: flex; gap: .4rem; align-items: center; border-bottom: 1px dashed var(--line); padding-bottom: .2rem; }
.qs-dist small { color: var(--mute); font-weight: 400; }
.qs-fold { justify-self: start; }
.qs-donel { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: .84rem; }
.qs-donel li > span:first-child { color: var(--green); font-weight: 700; }
.qs-donel li small { color: var(--mute); margin-left: .3rem; }

/* daily bounties */
.qs-days { display: grid; gap: .6rem; }
.qs-day { display: grid; grid-template-columns: auto 1fr; gap: .6rem; background: var(--panel2); border: 1px solid var(--line); border-left: 6px solid var(--cyan); padding: .55rem .7rem; }
.qs-day.done { border-left-color: var(--green); }
.qs-day h4 { margin: 0 0 .15rem; font-size: .92rem; }
.qs-day p { margin: 0 0 .3rem; }

/* achievements */
.qs-rars { display: flex; gap: .8rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.qs-rarity { display: inline-flex; gap: .25rem; align-items: center; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.qs-rarity.common { color: var(--cyan); }
.qs-rarity.rare { color: var(--violet); }
.qs-rarity.epic { color: var(--gold); }
.qs-filter { margin-bottom: .6rem; }
.qs-achs { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .55rem; }
.qs-ach { display: grid; grid-template-columns: auto 1fr; gap: .5rem; min-width: 0; background: var(--panel2); border: 1px solid var(--line); border-top: 3px solid var(--cyan); padding: .5rem .6rem; }
.qs-ach.rare { border-top-color: var(--violet); }
.qs-ach.epic { border-top-color: var(--gold); }
.qs-ach h4 { margin: 0 0 .1rem; font-size: .86rem; }
.qs-ach p { margin: .15rem 0; }
.qs-ach .qs-prog { gap: .4rem; }
.qs-ach .qs-prog .bar { height: .6rem; }
.qs-ach.earned { background: var(--good-bg); border-color: var(--green); border-top-color: var(--green); }
.qs-ach.earned.rare { border-top-color: var(--violet); }
.qs-ach.earned.epic { border-top-color: var(--gold); }
.qs-ach.todo .qs-ic { filter: grayscale(.85); }
.qs-ach.secret { border-style: dashed; }
.qs-ach.secret .qs-ic { font: 800 1.5rem ui-monospace, Menlo, monospace; color: var(--mute); }
.qs-got { color: var(--green); }