/* ── The Rundown (weekly quests) ────────────────────────────────────────────
   Every class here is `qs-` prefixed. Loads after home-v2.css so it can reuse
   the --hv-* accent and panel tokens rather than redefining them.

   ⚠ Never give `.page` a top-level `display` rule from this file — the same
   warning home-v2.css / profile.css / settings.css carry. `.page` visibility is
   owned by main.css and showPage(); setting display here breaks tab switching. */

.qs-head { margin-bottom: 22px; }
.qs-eyebrow {
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase; font-weight: 600;
  color: var(--sp-season-primary, var(--accent)); margin-bottom: 7px;
}
.qs-h1 {
  font-family: var(--font-display); font-size: 31px; font-weight: 700;
  letter-spacing: -.022em; margin: 0 0 6px; text-wrap: balance;
}
.qs-sub { color: var(--text-2); font-size: 13.5px; margin: 0; max-width: 62ch; }

/* ── Milestone panel ─────────────────────────────────────────────────────── */
.qs-mile {
  background: var(--hv-panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 17px 19px; margin-bottom: 12px;
}
.qs-mile-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }
.qs-mile-n {
  font-family: var(--font-display); font-size: 25px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.qs-mile-of { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.qs-mile-lab { flex: 1; min-width: 0; color: var(--text-2); font-size: 12.5px; }
.qs-mile-xp { font-size: 12.5px; color: var(--text-2); }
.qs-mile-xp b { color: var(--hv-amber-2); font-variant-numeric: tabular-nums; }

/* One segment per milestone, not one continuous bar — the cadence of "every 5"
   is the thing worth reading, and a single 27/65 bar flattens it out. */
.qs-pips { display: flex; gap: 4px; height: 9px; }
.qs-pips i {
  flex: 1; border-radius: 99px; background: rgba(255,255,255,.07);
  position: relative; overflow: hidden;
}
.qs-pips i.m { background: linear-gradient(90deg, var(--hv-amber), var(--hv-amber-2)); }
.qs-pips i.p::after {
  content: ''; position: absolute; inset: 0; width: var(--p);
  background: linear-gradient(90deg, var(--hv-a-lo), var(--hv-a-hi));
}
.qs-mile-foot { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11.5px; color: var(--text-3); }

/* ── Backlog callout — carries the whole catch-up promise ────────────────── */
.qs-backlog {
  display: flex; align-items: center; gap: 13px; background: var(--hv-amber-dim);
  border: 1px solid rgba(245,181,24,.22); border-radius: 12px;
  padding: 13px 16px; margin-bottom: 26px;
}
.qs-backlog b { color: var(--hv-amber-2); }
.qs-backlog p { margin: 0; font-size: 13px; color: var(--text-2); }
.qs-bolt { font-size: 17px; line-height: 1; }

/* ── Week cards ──────────────────────────────────────────────────────────── */
.qs-weeks { display: flex; flex-direction: column; gap: 9px; }
.qs-wk { background: var(--hv-panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.qs-wk.now {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: 0 0 0 1px var(--hv-a-16), var(--shadow-lift);
}
.qs-wk-h {
  display: flex; align-items: center; gap: 12px; width: 100%; background: none;
  border: 0; color: inherit; font: inherit; text-align: left; padding: 14px 17px; cursor: pointer;
}
.qs-wk-h:hover { background: var(--surface); }
.qs-wk-h:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.qs-wk-n { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.qs-wk-d { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.qs-wk-sp { flex: 1; }
.qs-tier {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--text-3); border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px;
}
.qs-chip {
  font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 3px 10px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.qs-chip.done { background: rgba(74,222,128,.13); color: var(--green); }
/* Past weeks count what is still AVAILABLE, not what was missed — the backlog is
   the feature, and "2 still open" reads as an invitation where "3/5" reads as a
   scold. */
.qs-chip.open { background: var(--hv-amber-dim); color: var(--hv-amber-2); }
.qs-chip.now  { background: var(--accent-dim); color: color-mix(in srgb, var(--accent) 60%, #fff); }
.qs-caret { color: var(--text-3); font-size: 11px; transition: transform .16s ease; }
.qs-wk.open .qs-caret { transform: rotate(90deg); }
.qs-wk-b { border-top: 1px solid var(--border); display: none; }
.qs-wk.open .qs-wk-b { display: block; }

/* ── Quest rows ──────────────────────────────────────────────────────────── */
.qs-q {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center;
  padding: 12px 17px; border-bottom: 1px solid rgba(255,255,255,.045);
}
.qs-q:last-child { border-bottom: 0; }
.qs-q-l { min-width: 0; }
.qs-slot {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--text-3); margin-bottom: 3px;
}
.qs-slot em { font-style: normal; color: var(--accent); }
.qs-slot.seas em { color: var(--sp-season-primary, var(--accent)); }
.qs-t { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.qs-q.ok .qs-t { color: var(--text-2); }
.qs-r { display: flex; align-items: center; gap: 11px; justify-content: flex-end; }
.qs-xp {
  font-size: 11.5px; font-weight: 700; color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.qs-q.ok .qs-xp { color: var(--green); }
.qs-tick {
  width: 19px; height: 19px; border-radius: 50%; background: rgba(74,222,128,.15);
  color: var(--green); display: grid; place-items: center; font-size: 11px; flex: none;
}
.qs-prog { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.qs-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.qs-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hv-a-lo), var(--hv-a-hi)); }
.qs-num { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Staged quests get pips in amber, tying them to the milestone bonus — both are
   "extra structure", and the shape reads before the words do. */
.qs-stages { display: flex; gap: 5px; grid-column: 1 / -1; margin-top: 2px; }
.qs-stage { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.qs-stage i { height: 5px; border-radius: 99px; background: rgba(255,255,255,.07); display: block; }
.qs-stage.f i { background: linear-gradient(90deg, var(--hv-amber), var(--hv-amber-2)); }
.qs-stage.p i { background: linear-gradient(90deg, var(--hv-amber) var(--p), rgba(255,255,255,.07) var(--p)); }
.qs-stage span { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.qs-stage.f span { color: var(--hv-amber-2); }
.qs-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hv-amber); border: 1px solid rgba(245,181,24,.3); border-radius: 4px;
  padding: 1px 5px; margin-left: 7px; vertical-align: 1px;
}
.qs-tag.meta {
  color: var(--sp-season-primary, var(--accent));
  border-color: color-mix(in srgb, var(--sp-season-primary, var(--accent)) 35%, transparent);
}

/* ── Coming up ───────────────────────────────────────────────────────────────
   Future weeks are NOT peers of the week cards. Rendering them as full cards
   after the descending past weeks made the list read in two directions at once. */
.qs-soon {
  margin-top: 9px; background: var(--hv-panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 4px 0; opacity: .72;
}
.qs-soon-h {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
  color: var(--text-3); padding: 10px 17px 7px;
}
.qs-soon-r { display: flex; align-items: center; gap: 12px; padding: 7px 17px; font-size: 12.5px; }
.qs-soon-r + .qs-soon-r { border-top: 1px solid rgba(255,255,255,.04); }
.qs-soon-n { font-weight: 600; color: var(--text-2); min-width: 58px; }
.qs-soon-d { color: var(--text-3); font-variant-numeric: tabular-nums; }
.qs-soon-sp { flex: 1; }

.qs-msg { padding: 60px 20px; text-align: center; color: var(--text-3); font-size: 13px; }

@media (max-width: 720px) {
  .qs-h1 { font-size: 25px; }
  .qs-mile-xp { width: 100%; }
  .qs-wk-h { gap: 9px; padding: 13px 14px; flex-wrap: wrap; }
  .qs-tier { display: none; }
  .qs-q { padding: 12px 14px; }
}