/* ============================================================================
   Services app — the second application.

   Its own header, its own navigation stack, its own screens. Same Onyx tokens
   and the same flat/2D rules as the marketplace, so the two halves read as one
   product, but the layout language here is a stacked app rather than a feed.
   ============================================================================ */

/* ------------------------------------------------------------- chrome -- */

.sv-head {
  padding: var(--s-4);
  border-bottom: var(--border-faint);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
}

.sv-back,
.sv-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: var(--border-hairline);
  border-radius: var(--r-pill);
  color: var(--c-text-muted);
}

.sv-back:active,
.sv-close:active { opacity: 0.6; }
.sv-back[hidden] { display: none; }

.sv-titles { flex: 1; min-width: 0; }

.sv-title {
  font-size: var(--t-title-3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
}

.sv-sub {
  margin-top: 2px;
  font-size: var(--t-footnote);
  color: var(--c-text-muted);
}

.sv-sub[hidden] { display: none; }

.sv-body { min-height: 0; }

/* --------------------------------------------------------------- view -- */

.sv {
  padding: var(--s-4) var(--s-4) var(--s-12);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.sv-section { display: flex; flex-direction: column; gap: var(--s-3); }

.sv-eyebrow {
  font-size: var(--t-caption-2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.sv-foot {
  font-size: var(--t-caption);
  color: var(--c-text-faint);
  text-align: center;
}

/* -------------------------------------------------------------- stats -- */

.sv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

.stat-pill {
  background: var(--c-surface);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.stat-ico { width: 20px; height: 20px; flex-shrink: 0; }
.stat-ico svg { width: 100%; height: 100%; }
.stat-ico-flame { color: var(--c-warning); }
.stat-ico-coin { color: var(--c-gold); }

.stat-val {
  font-family: var(--font-num);
  font-size: var(--t-title-3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: 1;
}

.stat-lbl {
  width: 100%;
  font-size: var(--t-caption);
  color: var(--c-text-muted);
}

/* ---------------------------------------------------------- challenge -- */

/* The hero of the services app: the reason to come back today. */
.challenge {
  background: var(--c-surface);
  border: var(--border-hairline);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.challenge.is-done { border-color: var(--c-success); }

.challenge-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.challenge-day {
  font-size: var(--t-title-2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
}

.challenge-sub {
  margin-top: var(--s-1);
  font-size: var(--t-footnote);
  color: var(--c-text-muted);
}

.challenge-badge {
  flex-shrink: 0;
  font-size: var(--t-caption-2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-success);
  background: var(--c-success-wash);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-2);
}

/* The single accent fill on this screen. */
.challenge-cta {
  height: var(--tap-min);
  border-radius: var(--r-md);
  background: var(--c-gold);
  color: var(--c-text-on-gold);
  font-size: var(--t-callout);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

.challenge-cta svg { width: 18px; height: 18px; }
.challenge-cta:active { opacity: 0.75; }

.challenge-cta:disabled {
  background: var(--c-raised);
  color: var(--c-text-faint);
  cursor: not-allowed;
}

/* --------------------------------------------------------------- grid -- */

.sv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

.tile {
  background: var(--c-surface);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  text-align: left;
}

.tile:active { opacity: 0.6; }

.tile-ico { width: 22px; height: 22px; color: var(--c-text-muted); margin-bottom: var(--s-1); }
.tile-ico svg { width: 100%; height: 100%; }

.tile-name {
  font-size: var(--t-callout);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
}

.tile-sub { font-size: var(--t-caption); color: var(--c-text-muted); }

/* --------------------------------------------------------- row links -- */

.row-link {
  width: 100%;
  background: var(--c-surface);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  color: var(--c-text-muted);
}

.row-link:active { opacity: 0.6; }
.row-link svg { width: 18px; height: 18px; flex-shrink: 0; }

.row-ico { width: 22px; height: 22px; flex-shrink: 0; }
.row-ico svg { width: 100%; height: 100%; }

.row-meta { flex: 1; min-width: 0; }

.row-name {
  display: block;
  font-size: var(--t-callout);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  letter-spacing: var(--ls-heading);
}

.row-sub { display: block; font-size: var(--t-caption); }

/* -------------------------------------------------------------- empty -- */

.empty {
  padding: var(--s-10) var(--s-4);
  text-align: center;
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
}

.empty h4 {
  font-size: var(--t-callout);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-2);
}

.empty p {
  font-size: var(--t-footnote);
  color: var(--c-text-muted);
  line-height: 1.5;
  max-width: 34ch;
  margin: 0 auto;
}

/* ============================================================================
   Services, second pass — wallet, challenges, polls, CBT, guide.

   Flat surfaces and hairlines throughout, per the app's visual language. Gold
   appears in exactly three places on this side and nowhere else: the coin
   figure, the reward line on a challenge, and the one filled button on a
   screen. It is the accent that means "this is worth money", so spending it on
   headings would empty it of meaning.
   ============================================================================ */

.sv-card {
  background: var(--c-surface);
  border: var(--border-hairline);
  border-radius: var(--r-xl);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* The wallet card is the only one that carries a gold edge. */
.sv-card.is-gold { border-color: var(--c-gold-edge); }
.sv-eyebrow.is-gold { color: var(--c-gold); }

.sv-hint {
  font-size: var(--t-footnote);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}

.sv-rows {
  display: flex;
  flex-direction: column;
  border: var(--border-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}

.sv-rows .row-link {
  border: none;
  border-radius: 0;
  border-bottom: var(--border-faint);
  background: var(--c-raised);
}

.sv-rows .row-link:last-child { border-bottom: none; }

.row-link.is-quiet {
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--c-line-strong);
}

.row-name.is-quiet { color: var(--c-text-muted); font-size: var(--t-footnote); }
.u-center { text-align: center; flex: none; }

/* --- attendance ---------------------------------------------------------
   Sits directly under the streak number it moves. A separate screen for
   "check in" would put a tap between the user and the habit we want. */

.checkin {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-gold);
  background: var(--c-gold);
  color: var(--c-text-on-gold);
  text-align: left;
}

.checkin:active { opacity: 0.75; }

/* Done for today: it stops being an action, so it stops looking like one. */
.checkin.is-done,
.checkin:disabled {
  background: var(--c-raised);
  border-color: var(--c-line);
  color: var(--c-text-muted);
}

.checkin.is-done .checkin-ico { color: var(--c-success); }

.checkin-ico { width: 20px; height: 20px; flex: none; }
.checkin-ico svg { width: 100%; height: 100%; }
.checkin-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.checkin-name { font-size: var(--t-subhead); font-weight: var(--fw-bold); }
.checkin-sub { font-size: var(--t-caption); opacity: 0.8; }

/* --- challenge cards --- */

.ch {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  border-radius: var(--r-lg);
  border: var(--border-hairline);
  background: var(--c-raised);
}

.ch:last-child { margin-bottom: 0; }
.ch.is-done { border-color: var(--c-success); }

.ch-top { display: flex; align-items: flex-start; gap: var(--s-3); }
.ch-ico { width: 20px; height: 20px; color: var(--c-text-muted); flex: none; margin-top: 2px; }
.ch-ico svg { width: 100%; height: 100%; }
.ch-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-name { font-size: var(--t-callout); font-weight: var(--fw-bold); color: var(--c-text); }
.ch-sub { font-size: var(--t-caption); color: var(--c-text-muted); }

.ch-badge {
  flex: none;
  font-size: var(--t-caption-2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-success);
  border: 1px solid var(--c-success);
  border-radius: var(--r-pill);
  padding: 2px var(--s-2);
}

.ch-facts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--t-caption);
}

.ch-reward { color: var(--c-gold-dim); font-weight: var(--fw-semibold); }
.ch-clock { color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.ch-clock.is-urgent, .poll-clock.is-urgent { color: var(--c-danger); }

.ch-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-gold);
  background: var(--c-gold);
  color: var(--c-text-on-gold);
  font-size: var(--t-subhead);
  font-weight: var(--fw-bold);
}

.ch-cta svg { width: 18px; height: 18px; }
.ch-cta:active { opacity: 0.75; }
.ch-cta:disabled { background: var(--c-raised); border-color: var(--c-line); color: var(--c-text-faint); }
.ch.is-done .ch-cta { background: transparent; color: var(--c-text); border-color: var(--c-line-strong); }

/* --- a short confirmation that does not need dismissing --- */

.sv-flash {
  position: sticky;
  bottom: var(--s-4);
  align-self: center;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-gold);
  color: var(--c-text-on-gold);
  font-size: var(--t-footnote);
  font-weight: var(--fw-bold);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}

.sv-flash.is-in { opacity: 1; transform: none; }
.sv-flash.is-bad { background: var(--c-danger); color: var(--c-text); }

/* ============================================================ polls ==== */

.poll-q { font-size: var(--t-title-3); font-weight: var(--fw-bold); color: var(--c-text); line-height: var(--lh-snug); }
.poll-sub { font-size: var(--t-footnote); color: var(--c-text-muted); }

.poll-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--t-caption);
  padding-bottom: var(--s-2);
  border-bottom: var(--border-faint);
}

.poll-clock { color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.poll-prize { color: var(--c-gold-dim); font-weight: var(--fw-semibold); }

.poll-options { display: flex; flex-direction: column; gap: var(--s-2); }

/* An option is a bar chart and a button at once — the fill IS the result, so
   the race is readable without a separate chart. */
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 56px;
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: var(--border-hairline);
  background: var(--c-raised);
  color: var(--c-text);
  text-align: left;
  overflow: hidden;
}

.opt-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--c-line);
  transition: width var(--dur-slow) var(--ease-out);
}

.opt.is-mine { border-color: var(--c-gold); }
.opt.is-mine .opt-fill { background: var(--c-gold-wash); }
.opt.is-won { border-color: var(--c-success); }
.opt.is-won .opt-fill { background: var(--c-success-wash); }
.opt:not(:disabled):active { opacity: 0.75; }

.opt-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opt-name { font-size: var(--t-callout); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.opt-sub { font-size: var(--t-caption); color: var(--c-text-muted); }

.opt-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--t-caption-2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-gold);
}

.opt-tag.is-won { color: var(--c-success); }
.opt-tag svg { width: 11px; height: 11px; }

.opt-num { position: relative; display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.opt-pct { font-size: var(--t-callout); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.opt-votes { font-size: var(--t-caption-2); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }

.poll-note { font-size: var(--t-caption); color: var(--c-text-muted); line-height: var(--lh-body); }
.poll-note.is-good { color: var(--c-success); }
.poll-note.is-bad { color: var(--c-danger); }

/* ============================================================== CBT ==== */

.qz-facts {
  display: flex;
  gap: var(--s-4);
  font-size: var(--t-caption);
  color: var(--c-text-muted);
  padding-bottom: var(--s-2);
  border-bottom: var(--border-faint);
}

.qz-explain { font-size: var(--t-caption); color: var(--c-text-muted); line-height: var(--lh-body); }
.qz-err { font-size: var(--t-caption); color: var(--c-danger); min-height: 1em; }
.qz-code-label { font-size: var(--t-caption); color: var(--c-text-muted); }

.qz-code {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  border: var(--border-hairline);
  background: var(--c-raised);
  color: var(--c-text);
  font-size: var(--t-body);
  font-family: var(--font-ui);
}

.qz-code:focus { outline: none; border-color: var(--c-gold); }

.qz-top { display: flex; align-items: center; justify-content: space-between; }
.qz-count { font-size: var(--t-caption); color: var(--c-text-muted); }
.qz-time { font-size: var(--t-callout); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.qz-time.is-urgent { color: var(--c-danger); }

/* The question map — answered, current, left — at a glance. */
.qz-map { display: flex; flex-wrap: wrap; gap: 5px; }

.qz-dot {
  width: 26px;
  height: 26px;
  min-height: 0;
  border-radius: var(--r-sm);
  border: var(--border-hairline);
  background: var(--c-raised);
  color: var(--c-text-faint);
  font-size: var(--t-caption-2);
  font-variant-numeric: tabular-nums;
}

.qz-dot.is-answered { background: var(--c-line); color: var(--c-text); }
.qz-dot.is-current { border-color: var(--c-gold); color: var(--c-gold); }

.qz-prompt { font-size: var(--t-callout); color: var(--c-text); line-height: var(--lh-body); }
.qz-options { display: flex; flex-direction: column; gap: var(--s-2); }

.qz-opt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: var(--border-hairline);
  background: var(--c-raised);
  color: var(--c-text);
  text-align: left;
}

.qz-opt:active { opacity: 0.75; }
.qz-opt.is-chosen { border-color: var(--c-gold); }

/* No right/wrong colouring during the paper: nothing on this device knows
   which is which until the server has marked it. */
.qz-letter {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--c-ground);
  font-size: var(--t-caption);
  font-weight: var(--fw-bold);
}

.qz-opt.is-chosen .qz-letter { background: var(--c-gold); color: var(--c-text-on-gold); }
.qz-opt-text { font-size: var(--t-subhead); }

.qz-foot { display: flex; gap: var(--s-2); }

.qz-nav {
  flex: 1;
  min-height: var(--tap-min);
  border-radius: var(--r-md);
  border: var(--border-hairline);
  background: var(--c-raised);
  color: var(--c-text);
  font-size: var(--t-footnote);
  font-weight: var(--fw-semibold);
}

.qz-nav:disabled { opacity: 0.4; }
.qz-nav:active { opacity: 0.7; }

/* --- result --- */

.qz-result { align-items: center; text-align: center; }
.qz-auto { font-size: var(--t-caption); color: var(--c-warning); }

.qz-badge {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 2px solid currentColor;
  font-size: var(--t-title-2);
  font-weight: var(--fw-bold);
}

.qz-badge.is-success { color: var(--c-success); }
.qz-badge.is-warning { color: var(--c-warning); }
.qz-badge.is-danger  { color: var(--c-danger); }

.qz-band { font-size: var(--t-title-3); font-weight: var(--fw-bold); }
.qz-score { font-size: var(--t-large-title); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.qz-score span { font-size: var(--t-title-3); color: var(--c-text-muted); }
.qz-pct { font-size: var(--t-callout); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

.qz-earned {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-lg);
  border: var(--border-gold);
  background: var(--c-gold-wash);
}

.qz-earned-num { font-size: var(--t-title-2); font-weight: var(--fw-bold); color: var(--c-gold); font-variant-numeric: tabular-nums; }
.qz-earned-lbl { font-size: var(--t-caption); color: var(--c-text-muted); }

/* --- review --- */

.qz-review { display: flex; flex-direction: column; gap: var(--s-2); }

.rv {
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: var(--border-hairline);
  border-left: 3px solid var(--c-line);
  background: var(--c-raised);
}

.rv.is-right   { border-left-color: var(--c-success); }
.rv.is-wrong   { border-left-color: var(--c-danger); }
.rv.is-skipped { border-left-color: var(--c-warning); }

.rv-q { font-size: var(--t-subhead); color: var(--c-text); line-height: var(--lh-snug); margin-bottom: var(--s-2); }
.rv-line { display: flex; gap: var(--s-2); font-size: var(--t-caption); }
.rv-lbl { color: var(--c-text-faint); flex: none; }
.rv-val { color: var(--c-success); }
.rv-line.is-wrong .rv-val { color: var(--c-danger); }
.rv-why { margin-top: var(--s-2); font-size: var(--t-caption); color: var(--c-text-muted); line-height: var(--lh-body); }

/* ============================================================= swap ==== */

.swap-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-3) 0; }
.swap-bal { font-size: var(--t-large-title); font-weight: var(--fw-bold); color: var(--c-gold); font-variant-numeric: tabular-nums; }
.swap-bal-lbl { font-size: var(--t-caption); color: var(--c-text-muted); }
.swap-worth { font-size: var(--t-caption); color: var(--c-text-faint); margin-top: var(--s-1); }

.swap-gates { display: flex; flex-direction: column; gap: var(--s-2); list-style: none; }

.swap-gates li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: var(--border-hairline);
  background: var(--c-raised);
  font-size: var(--t-subhead);
  color: var(--c-text-muted);
}

.swap-gates li.is-ok { color: var(--c-text); border-color: var(--c-success); }
.swap-gates li em { display: block; font-style: normal; font-size: var(--t-caption); color: var(--c-text-faint); }
.swap-gates li.is-ok em { color: var(--c-success); }
.swap-tick { width: 18px; text-align: center; flex: none; }

.swap-gate { font-size: var(--t-caption); color: var(--c-text-muted); line-height: var(--lh-body); }
.swap-gate.is-wait { color: var(--c-warning); }

.swap-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: var(--border-faint);
  font-size: var(--t-footnote);
}

.swap-row:last-child { border-bottom: none; }
.swap-row-status { font-size: var(--t-caption); color: var(--c-text-muted); }
.swap-row-status.is-paid { color: var(--c-success); }
.swap-row-status.is-rejected { color: var(--c-danger); }
.swap-row-status.is-requested, .swap-row-status.is-approved { color: var(--c-warning); }

/* --- refer --- */

.ref-code {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px dashed var(--c-gold-edge);
  background: var(--c-gold-wash);
}

.ref-code-lbl { font-size: var(--t-caption); color: var(--c-text-muted); }
.ref-code-val { font-size: var(--t-title-2); font-weight: var(--fw-bold); color: var(--c-gold); letter-spacing: 2px; }

/* ============================================================ guide ==== */

.guide-h { font-size: var(--t-title-2); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); }
.guide-lead { font-size: var(--t-subhead); color: var(--c-text-muted); line-height: var(--lh-body); }

.guide-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }

.guide-num {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s-3) var(--s-1);
  border-radius: var(--r-md);
  background: var(--c-raised);
  text-align: center;
}

.guide-num-v { font-size: var(--t-callout); font-weight: var(--fw-bold); color: var(--c-gold); font-variant-numeric: tabular-nums; }
.guide-num-l { font-size: var(--t-caption-2); color: var(--c-text-muted); line-height: 1.3; }

.guide-sec { padding: 0; gap: 0; overflow: hidden; }

.guide-btn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4);
  background: transparent;
  border: none;
  color: var(--c-text);
  text-align: left;
}

.guide-btn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.guide-title { font-size: var(--t-callout); font-weight: var(--fw-bold); }
.guide-sub { font-size: var(--t-caption); color: var(--c-text-muted); }

.guide-chev { width: 18px; height: 18px; color: var(--c-text-faint); flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.guide-chev svg { width: 100%; height: 100%; }
.guide-sec.is-open .guide-chev { transform: rotate(180deg); }

/* Collapsed by default so the page reads as a menu, not a wall of text. */
.guide-body { display: none; padding: 0 var(--s-4) var(--s-4); flex-direction: column; gap: var(--s-3); }
.guide-sec.is-open .guide-body { display: flex; }
.guide-body p { font-size: var(--t-subhead); color: var(--c-text-muted); line-height: var(--lh-body); }

.guide-list { display: flex; flex-direction: column; gap: var(--s-2); list-style: none; }
.guide-list li { position: relative; padding-left: var(--s-4); font-size: var(--t-subhead); color: var(--c-text-muted); }
.guide-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--c-gold); }

.guide-foot { font-size: var(--t-caption); color: var(--c-text-faint); text-align: center; padding: var(--s-2) 0 var(--s-8); }

@media (prefers-reduced-motion: reduce) {
  .opt-fill, .guide-chev, .sv-flash { transition: none; }
}

/* Invited versus actually active. The gap between the two numbers is the whole
   referral rule, so they sit side by side rather than one being buried. */
.ref-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

.ref-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: var(--border-hairline);
  background: var(--c-raised);
}

.ref-stat-v { font-size: var(--t-title-3); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ref-stat-l { font-size: var(--t-caption); color: var(--c-text-muted); }
.ref-stat.is-good .ref-stat-v { color: var(--c-success); }
.ref-stat.is-good { border-color: var(--c-success); }

/* ============================================================================
   Colour, second pass.

   The services side had turned into one gold-on-black surface repeated eight
   times, and a list of four things all in one colour reads as one thing. The
   fix is not more gold — gold is rationed on purpose and spending it here would
   empty it of meaning. It is the categorical tints in `tokens.css`, which exist
   to tell things APART.

   The division of labour, and it is worth keeping strict:

     gold      this is worth money        coins, prizes, the one filled button
     green     this worked / is ahead     done, correct, leading, paid
     amber     careful / running out      time nearly up, pending
     red       this failed                wrong answer, declined, error
     tints     these are different things poll options, challenge kinds, tools

   A tint never means good or bad. The third poll option is teal because it is
   third, not because third is losing.
   ============================================================================ */

/* --- poll options: one colour each -------------------------------------- */

.opt.t-1 { --opt-c: var(--c-tint-1); --opt-w: var(--c-tint-1-wash); }
.opt.t-2 { --opt-c: var(--c-tint-2); --opt-w: var(--c-tint-2-wash); }
.opt.t-3 { --opt-c: var(--c-tint-3); --opt-w: var(--c-tint-3-wash); }
.opt.t-4 { --opt-c: var(--c-tint-4); --opt-w: var(--c-tint-4-wash); }
.opt.t-5 { --opt-c: var(--c-tint-5); --opt-w: var(--c-tint-5-wash); }
.opt.t-6 { --opt-c: var(--c-tint-6); --opt-w: var(--c-tint-6-wash); }

/* The bar IS the result, so it carries the option's colour. */
.opt .opt-fill { background: var(--opt-w); }
.opt .opt-pct  { color: var(--opt-c); }

/* A left edge in the option's colour, so the options are told apart even
   before any votes exist and every bar is at zero width. */
.opt { border-left: 3px solid var(--opt-c); }

/* Ahead right now. Green, because "ahead" is the one thing here that IS a
   judgement — and green is what this app already uses for it everywhere else.
   Deliberately no red for the others: red means something broke, a candidate
   in second place has not broken, and with four options "not first" would
   paint three of them as failures. */
.opt.is-leading {
  border-color: var(--c-success);
  border-left-color: var(--c-success);
}

.opt.is-leading .opt-fill { background: var(--c-success-wash); }
.opt.is-leading .opt-pct  { color: var(--c-success); }

.opt-tag.is-leading {
  color: var(--c-success);
  border: 1px solid var(--c-success);
  border-radius: var(--r-pill);
  padding: 1px var(--s-2);
}

/* Your pick keeps the gold ring — that is the one thing on this screen that is
   about YOU, and it has to survive whatever colour the option itself is. */
.opt.is-mine { border-color: var(--c-gold); box-shadow: inset 0 0 0 1px var(--c-gold-edge); }

/* Settled: the winner is green and everything else steps back, because the
   race is over and only one row still matters. */
.opt.is-won { border-color: var(--c-success); border-left-color: var(--c-success); }
.opt.is-won .opt-fill { background: var(--c-success-wash); }
.opt.is-won .opt-pct { color: var(--c-success); }

/* --- challenge cards: one colour per KIND ------------------------------- */

.ch { border-left: 3px solid var(--c-line); }

/* A poll is a prediction; a quiz is a test. They earn coins in completely
   different ways, so they should not look like the same card twice. */
.ch.k-poll { border-left-color: var(--c-tint-2); }
.ch.k-poll .ch-ico { color: var(--c-tint-2); }

.ch.k-cbt { border-left-color: var(--c-tint-3); }
.ch.k-cbt .ch-ico { color: var(--c-tint-3); }

/* Done outranks kind — a finished challenge is finished whatever it was. */
.ch.is-done,
.ch.is-done.k-poll,
.ch.is-done.k-cbt { border-color: var(--c-success); border-left-color: var(--c-success); }

/* --- tools: one colour each --------------------------------------------- */

.tile.tool-1 .tile-ico { color: var(--c-tint-1); }
.tile.tool-2 .tile-ico { color: var(--c-tint-2); }
.tile.tool-3 .tile-ico { color: var(--c-tint-3); }

/* --- the guide's three numbers ------------------------------------------ */

.guide-num:nth-child(1) .guide-num-v { color: var(--c-tint-1); }
.guide-num:nth-child(2) .guide-num-v { color: var(--c-warning); }
.guide-num:nth-child(3) .guide-num-v { color: var(--c-gold); }

/* --- the guide's sections ----------------------------------------------- */

.guide-sec:nth-of-type(6n+1) { border-left: 3px solid var(--c-tint-1); }
.guide-sec:nth-of-type(6n+2) { border-left: 3px solid var(--c-tint-2); }
.guide-sec:nth-of-type(6n+3) { border-left: 3px solid var(--c-tint-3); }
.guide-sec:nth-of-type(6n+4) { border-left: 3px solid var(--c-gold-edge); }
.guide-sec:nth-of-type(6n+5) { border-left: 3px solid var(--c-tint-5); }
.guide-sec:nth-of-type(6n)   { border-left: 3px solid var(--c-tint-6); }

/* --- swap history: status carries the colour ---------------------------- */

.swap-row { border-left: 3px solid transparent; padding-left: var(--s-3); }
.swap-row:has(.is-paid)      { border-left-color: var(--c-success); }
.swap-row:has(.is-rejected)  { border-left-color: var(--c-danger); }
.swap-row:has(.is-requested),
.swap-row:has(.is-approved)  { border-left-color: var(--c-warning); }

/* --- quiz: the question map earns its colours --------------------------- */

.qz-dot.is-answered { background: var(--c-tint-3-wash); border-color: var(--c-tint-3); color: var(--c-text); }
.qz-dot.is-current  { border-color: var(--c-gold); color: var(--c-gold); background: var(--c-gold-wash); }

/* --- streak and coins are already different, keep them that way --------- */

.stat-pill:has(.stat-ico-flame) { border-left: 3px solid var(--c-warning); }
.stat-pill:has(.stat-ico-coin)  { border-left: 3px solid var(--c-gold); }

/* --- refer: its own buttons -------------------------------------------- --
   Previously these reused `.ch-cta` and `.qz-nav`. `.qz-nav` is a quiz footer
   button and carries `flex: 1`, which is correct inside the quiz's ROW flex
   footer and wrong inside `.sv-card`, a COLUMN flex — there `flex: 1` sets
   flex-basis 0 on the vertical axis, so the button collapsed to nothing and
   overlapped the button above it. Borrowed classes bring their parent's
   layout assumptions with them; these do not. */

.ref-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ref-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-gold);
  background: var(--c-gold);
  color: var(--c-text-on-gold);
  font-size: var(--t-subhead);
  font-weight: var(--fw-bold);
}

.ref-share svg { width: 18px; height: 18px; flex: none; }
.ref-share:active { opacity: 0.75; }

.ref-copy {
  width: 100%;
  min-height: var(--tap-min);
  border-radius: var(--r-md);
  border: var(--border-hairline);
  background: var(--c-raised);
  color: var(--c-text);
  font-size: var(--t-footnote);
  font-weight: var(--fw-semibold);
}

.ref-copy:active { opacity: 0.7; }

.ref-msg {
  font-size: var(--t-caption);
  color: var(--c-success);
  text-align: center;
  min-height: 1em;
}