/* ============================================================
   Task #1526360: Daily Design QA — Contrast & Visual Audit
   Date: 2026-05-12
   Audited: Homepage, Pricing, Settlements, Settlement Detail,
            Community, Games, Leaderboard, News, State Page
            at 375px mobile + 1440px desktop.

   Fixes:
   1. Mobile nav tab labels: #9ca3af → #6B7280 (2.58:1 → 4.54:1 WCAG AA)
   2. Referral milestone numbers: #94a3b8 → #6B7280 (3.0:1 → 4.54:1)
   3. Quiz widget content text: #9CA3AF → #6B7280 for non-decorative content
   4. Mobile tab label font-size: 10px → 11px (minimum legibility bump)
   5. hp-cotd__stat font-size: 12px → 13px on mobile (payout + deadline text)
   6. Settlements index: ms-tab-item__label color fix
   7. qw-settle-payout-label content color fix
   ============================================================ */


/* ── 1. MOBILE NAV TAB: Inactive label contrast fix ────────────
   .ms-tab-item color is #9ca3af = 2.58:1 on white. WCAG AA fail.
   Icon + label both inherit this color when inactive.
   Fix: bump to #6B7280 = 4.54:1 on white. WCAG AA pass.
   Only the inactive state — active uses var(--ms-gold-dark) which is fine.
   ──────────────────────────────────────────────────────────── */

.ms-tab-item {
  color: #6B7280 !important;
}

/* Keep active state gold — do not override */
.ms-tab-item.is-active {
  color: var(--ms-gold-dark, #B8952A) !important;
}

.ms-tab-item.is-active .ms-tab-item__label {
  color: var(--ms-gold-dark, #B8952A) !important;
}


/* ── 2. MOBILE TAB LABEL: font-size 10px → 11px ───────────────
   10px is below the 14px minimum for body text, and below the
   large-text exception (18px+). While tab labels are compact UI,
   11px is the minimum legible size for labels — matches native iOS.
   NOTE: 11px is still technically below 14px WCAG AA body text
   minimum, but is standard practice for tab bar labels (native apps
   use 10-11px). We bump to 11px as the most we can without breaking layout.
   ──────────────────────────────────────────────────────────── */

.ms-tab-item__label,
.ms-tab-bar .ms-tab-item__label {
  font-size: 11px !important;
}


/* ── 3. REFERRAL PAGE: Milestone number contrast fix ───────────
   .rf-milestone-num color is #94a3b8 = 3.0:1 on white. WCAG FAIL.
   These are the numeric markers (1, 3, 5, 10, 25) on the referral
   progress track — actual content, not decorative.
   Fix: #6B7280 = 4.54:1 WCAG AA pass.
   Completed milestones (.done) already use green #00875A — fine.
   ──────────────────────────────────────────────────────────── */

.rf-milestone-num {
  color: #6B7280 !important;
}

/* Keep completed milestone numbers green */
.rf-milestone-num.done {
  color: #00875A !important;
}


/* ── 4. REFERRAL LEADERBOARD: Silver rank contrast fix ─────────
   .rf-lb-rank.silver color is #94a3b8 = 3.0:1 on white. WCAG FAIL.
   The silver rank shows actual rank numbers — content, not decoration.
   Fix: use a darker silver that passes (#6B7280 still reads as secondary).
   Gold and bronze ranks are already high-contrast.
   ──────────────────────────────────────────────────────────── */

.rf-lb-rank {
  color: #6B7280 !important;
}

.rf-lb-rank.gold {
  color: #f59e0b !important;
}

.rf-lb-rank.silver {
  color: #64748b !important;
}

.rf-lb-rank.bronze {
  color: #cd7c2f !important;
}


/* ── 5. QUIZ WIDGET: Non-decorative content contrast fix ───────
   Several quiz widget elements use #9CA3AF = 2.58:1 on white.
   The ones below carry actual content (payout labels, back button,
   progress indicators) — WCAG AA fail for body text.
   Fix: #6B7280 = 4.54:1 on white. WCAG AA pass.
   ──────────────────────────────────────────────────────────── */

/* Skip link — user action, must be readable */
.qw-skip-link {
  color: #6B7280 !important;
}

/* Brand count — actual data */
.qw-brand-count {
  color: #6B7280 !important;
}

/* Payout label — shows dollar amounts */
.qw-settle-payout-label {
  color: #6B7280 !important;
}

/* Back button — user action */
.qw-back {
  color: #6B7280 !important;
}

/* Autopilot sub-link — user action */
.qw-autopilot-upsell__sub-link {
  color: #6B7280 !important;
}

/* Privacy text (small, but still content) */
.qw-email-privacy {
  color: #6B7280 !important;
}

/* Onboarding quiz equivalents */
.oq-progress-label {
  color: #6B7280 !important;
}

.oq-state-icon {
  color: #9CA3AF !important; /* decorative icon — can stay lighter */
}

.oq-brand-search-icon {
  color: #9CA3AF !important; /* decorative icon */
}

.oq-brand-cat-label {
  color: #6B7280 !important;
}

.oq-exit-btn-leave {
  color: #6B7280 !important;
}

.oqr-total-right {
  color: #6B7280 !important;
}

.oqr-sc-company {
  color: #6B7280 !important;
}

.oqr-sc-deadline {
  color: #6B7280 !important;
}


/* ── 6. HOMEPAGE COTD: Stat font-size 12px → 13px on mobile ───
   .hp-cotd__stat shows payout amounts ("Up to $500") and deadlines.
   At 12px on mobile this fails the 14px minimum for body content.
   Bump to 13px — the COTD card is compact so we can't go full 14px
   without breaking the 2-item stat row layout.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .hp-cotd__stat {
    font-size: 13px !important;
  }
}


/* ── 7. POLICY TOC: Sidebar title uses #9CA3AF ─────────────────
   .policy-toc-title is the "CONTENTS" label above the TOC.
   At 0.72rem + uppercase + bold this qualifies as large text
   (bold text at 18.67px (1.167rem at 16px base) → doesn't apply).
   At 0.72rem = ~11.5px this is small text — needs 4.5:1.
   Fix: change to #9CA3AF stay as-is (it's a UI label, not body copy)
   BUT it's literally 0.72rem = 11.5px → fails regardless.
   Fix: use #6B7280 instead.
   ──────────────────────────────────────────────────────────── */

.policy-toc-title {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}


/* ============================================================
   END Task #1526360 Daily QA Fixes
   ============================================================ */