/* The quest board (/quests) and a player's Quests tab: quest cards with their goals, rewards and, for a player, the
   state and progress bars. A state is a colour AND a word: ready to claim is the Blight's green (the one to act on),
   in progress the gold, cooldown and locked recede. Built on the site tokens (site.css). */
.qs { width: min(100% - 32px, 1320px); margin: 0 auto; padding: 28px 0 72px; display: grid; gap: 26px; }
.qs > * { min-width: 0; }
.qs-label { color: var(--ink-3); font: 700 .74rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
.qs-hint { margin: -4px 0 4px; color: var(--ink-3); font-size: .9rem; }
.qs-empty { margin: 0; padding: 40px 20px; border: 1px dashed var(--line-soft); border-radius: 6px; color: var(--ink-3); text-align: center; }

.qs-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; }
.qs-top__main { min-width: 0; }
.qs-title { margin: 0; color: var(--ink); font: 400 clamp(3rem, 9vw, 6rem)/.86 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.qs-title em { font-style: normal; color: var(--blight); }
.qs-lede { margin: 12px 0 0; max-width: 60ch; color: var(--ink-2); }
.qs-signin { margin: 0; max-width: 34ch; color: var(--ink-2); }
.qs-signin__link { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 600; }
.qs-signin__link .icon { width: 18px; height: 18px; }

/* The tally: four counts, ready to claim lit when there is something to claim. */
.qs-tally { display: grid; grid-template-columns: repeat(4, minmax(88px, auto)); gap: 8px; margin: 0; }
.qs-tally div { display: grid; gap: 6px; padding: 12px 14px; min-width: 0; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel); }
.qs-tally dt { color: var(--ink-3); font: 700 .72rem/1.15 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.qs-tally dd { margin: 0; color: var(--ink); font: 400 2.2rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.qs-tally__ready { border-color: color-mix(in oklch, var(--blight) 45%, var(--line-soft)) !important; background: radial-gradient(120% 120% at 0 0, oklch(0.87 0.2 128 / .14), transparent 65%), var(--panel) !important; }
.qs-tally__ready dd { color: var(--blight); }
.qs-tally--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.qs-cats { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 14px; border-block: 1px solid var(--line-soft); }
.qs-cats a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 13px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--panel); color: var(--ink-2); text-decoration: none; font: 600 .9rem/1 var(--font-label); letter-spacing: .04em; }
.qs-cats a small { color: var(--ink-3); font-size: .78rem; }
.qs-cats a:hover { color: var(--ink); border-color: var(--line); }
.qs-cats a[aria-current="true"] { color: var(--ink); border-color: var(--blight); background: var(--blight-soft); }
.qs-cats a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.qs-group { display: grid; gap: 12px; min-width: 0; }
.qs-group__title { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--ink); font: 400 clamp(1.7rem, 3.4vw, 2.3rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.qs-group__title small { color: var(--ink-3); font: 700 .85rem/1 var(--font-label); letter-spacing: .1em; }
.qs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }

/* One quest. */
.qs-card { --tone: var(--line); display: grid; align-content: start; gap: 12px; padding: 16px; min-width: 0; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel); scroll-margin-top: 90px; }
.qs-card:target { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.qs-card.is-ready { --tone: var(--blight); border-color: color-mix(in oklch, var(--blight) 55%, var(--line-soft)); background: radial-gradient(120% 70% at 0 0, oklch(0.87 0.2 128 / .1), transparent 60%), var(--panel); }
.qs-card.is-started { --tone: var(--gold); border-color: color-mix(in oklch, var(--gold) 40%, var(--line-soft)); }
.qs-card.is-locked { opacity: .78; }
.qs-card__head { display: grid; gap: 8px; min-width: 0; }
.qs-card__name { margin: 0; color: var(--ink); font: 700 1.25rem/1.1 var(--font-label); letter-spacing: .02em; overflow-wrap: anywhere; }
.qs-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.qs-card__desc { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.5; }

.qs-state, .qs-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 4px; font: 700 .74rem/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.qs-tag { color: var(--ink-2); background: oklch(1 0 0 / .06); }
.qs-tag .icon { width: 13px; height: 13px; }
.qs-state { color: var(--ink-2); background: oklch(1 0 0 / .06); }
.qs-state--ready { color: var(--bg-deep); background: var(--blight); }
.qs-state--started { color: var(--bg-deep); background: var(--gold); }
.qs-state--available { color: var(--ink); background: oklch(1 0 0 / .1); }
.qs-state--cooldown { color: var(--ink-2); background: oklch(0.6 0.03 240 / .22); }
.qs-state--completed { color: var(--blight); background: oklch(0.87 0.2 128 / .12); }
.qs-state--locked { color: var(--ink-3); background: none; box-shadow: inset 0 0 0 1px var(--line-soft); }

.qs-goals { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qs-goal { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "ico text count" "ico bar bar"; align-items: center; gap: 4px 10px; }
.qs-goal__ico { grid-area: ico; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; background: var(--bg-deep); color: var(--ink-3); }
.qs-goal__ico img { width: 26px; height: 26px; }
.qs-goal__ico .icon { width: 17px; height: 17px; }
.qs-goal__text { grid-area: text; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.qs-goal__count { grid-area: count; color: var(--ink-2); font: 600 .85rem/1 var(--font-label); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qs-goal.is-done .qs-goal__count { color: var(--blight); }
.qs-bar { grid-area: bar; height: 6px; overflow: hidden; border-radius: 99px; background: var(--bg-deep); box-shadow: inset 0 0 0 1px var(--line-soft); }
.qs-bar i { display: block; height: 100%; border-radius: 99px; background: var(--tone, var(--gold)); }
.qs-card.is-started .qs-bar i { background: var(--gold); }
.qs-goal.is-done .qs-bar i { background: var(--blight); }

.qs-rewards { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.qs-rewards ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qs-reward { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 10px 3px 5px; border-radius: 4px; background: var(--bg-deep); color: var(--ink-2); font-size: .88rem; }
.qs-reward img { width: 22px; height: 22px; }
.qs-reward .icon { width: 16px; height: 16px; margin-left: 3px; color: var(--ink-3); }
.qs-reward--coins { color: var(--gold); }
.qs-reward--coins .icon { color: var(--gold); }
.qs-reward--xp .icon, .qs-reward--rp .icon { color: var(--blight); }
.qs-needs, .qs-done { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-3); font-size: .86rem; }
.qs-needs .icon, .qs-done .icon { flex: none; width: 14px; height: 14px; }
.qs-done { color: var(--blight); }

/* Questlines: each a short road of quests, its stops lit by the viewer's state. */
.qs-lines { display: grid; gap: 12px; }
.qs-lines__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.qs-line { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 6px; background: linear-gradient(170deg, var(--panel-2), var(--bg-deep)); }
.qs-line__name { margin: 0; color: var(--ink); font: 400 1.5rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.qs-line__desc { margin: 0; color: var(--ink-2); font-size: .92rem; }
.qs-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.qs-step { position: relative; padding: 6px 0 6px 30px; counter-increment: step; }
.qs-step::before { content: counter(step); position: absolute; left: 0; top: 5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-deep); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font: 700 .72rem/1 var(--font-label); }
.qs-step:not(:last-child)::after { content: ""; position: absolute; left: 9.5px; top: 26px; bottom: -4px; width: 1px; background: var(--line-soft); }
.qs-step a { color: var(--ink-2); text-decoration: none; }
.qs-step a:hover { color: var(--gold); }
.qs-step.is-completed::before, .qs-step.is-cooldown::before { content: "✓"; color: var(--bg-deep); background: var(--blight); box-shadow: none; }
.qs-step.is-ready::before { color: var(--bg-deep); background: var(--blight); box-shadow: 0 0 0 3px oklch(0.87 0.2 128 / .25); }
.qs-step.is-started::before { color: var(--bg-deep); background: var(--gold); box-shadow: none; }

/* The profile tab's two short lists. */
.qs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qs-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.qs-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.qs-rows li:last-child { border-bottom: 0; }
.qs-rows span { min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.qs-rows b { flex: none; color: var(--ink); font: 700 .95rem/1.3 var(--font-label); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .qs-top { grid-template-columns: minmax(0, 1fr); }
    .qs-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qs-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
    .qs-cats a, .qs-step a { transition: color .15s var(--ease-out), border-color .15s var(--ease-out), background .15s var(--ease-out); }
}