/* Quests view — the onboarding chain.
 *
 * The list itself is the kit (css/ui.css): a quest is a `.u-row` inside a
 * `<section>` group, its status a `.u-pill`, its share of steps a `.u-meter`,
 * and a step's control a `.u-cta`. What stays here is the quest's own anatomy —
 * the guidance text, the step checklist that fills a row's body, and the step
 * counter's figures. Nothing truncates: the step name wraps.
 */

/* The three status groups, spaced apart; rows inside a group carry their own
   8px from the kit. */
#questList{display:flex;flex-direction:column;gap:18px}

/* Steps done / total — a dense readout, so it takes the mono face. */
.q-count{font-family:var(--u-font-mono);color:var(--u-value)}

/* Station GAVR's own words about the objective. */
.q-desc{font:400 13px/1.5 var(--u-font-ui);color:var(--u-body);overflow-wrap:anywhere}

/* The steps. Each is a state mark, the step's name, and the single control that
   advances it; the control keeps its own column so a wrapped name never pushes
   it out of reach. */
.q-tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.q-task{
  display:flex;align-items:center;gap:9px;
  font:400 13px/1.4 var(--u-font-ui);color:var(--u-body);
}
.q-task-name{flex:1;min-width:0;overflow-wrap:anywhere}
.q-check{flex:0 0 auto;width:16px;text-align:center;font-size:13px;color:var(--u-idle)}
.q-task.is-done{color:var(--u-mute)}
.q-task.is-done .q-check{color:var(--u-ok)}