/*
 * Phase 86 — Mobile UI Polish (cosmetic contrast fixes only)
 * Targets: Recently Viewed strip, Saved Projects strip, project cards
 * Does NOT modify: JS, data logic, routing, performance, GA4, Lighthouse fixes
 * All rules use !important to win specificity over the deferred-bundle overrides
 */

/* ─── 1. Recently Viewed — section header ───────────────────────────────── */

/* Title "RECENTLY VIEWED": #4A5568 → #1e293b (4.54:1 → 12.9:1 on #F8F9FC bg) */
.rv-strip-title {
  color: #1e293b !important;
  font-size: 11px;
  letter-spacing: .06em;
}

/* "Clear" button: #475569 → #1e293b; ensures visible on light strip bg */
.rv-clear-btn {
  color: #1e293b !important;
  font-size: 12px;
  font-weight: 700 !important;
  padding: 0 10px; /* widens tap target without changing layout */
}
.rv-clear-btn:hover {
  color: #0f1b4c !important;
  text-decoration: underline;
}

/* ─── 2. Recently Viewed — card text contrast ────────────────────────────── */

/* rv-card-name: already #0F1B4C — no change needed */

/* rv-card-meta (location, sector): #64748B → #475569 (4.54:1 → 5.9:1) */
.rv-card-meta {
  color: #475569 !important;
}

/* rv-card-status ("50% done", "100% done"): #94a3b8 FAILS AA (2.88:1) → #475569 (5.9:1) */
.rv-card-status {
  color: #475569 !important;
  font-weight: 600;
}

/* ─── 3. Saved Projects — section header ─────────────────────────────────── */

/* sp-strip-title "SAVED PROJECTS": already #92400E on #FEF3C7 = 7.47:1 — no change */
/* sp-count-badge: already #1C1917 on #D97706 = 8.24:1 — no change */

/* Ensure sp-strip header fits 320px without wrapping or overflow */
.sp-strip-header {
  flex-wrap: nowrap;
  min-height: 32px;
  align-items: center;
}

/* ─── 4. Saved Projects — card text contrast ─────────────────────────────── */

/* sp-card-name: already #0F1B4C on white = 16.7:1 — no change */
/* sp-card-meta: already #78350F on white = 7.86:1 — no change */

/* ─── 5. 320px–360px edge case: prevent clipping or hidden text ─────────── */

@media (max-width: 360px) {
  /* RV strip: tighten horizontal padding so header row has more room */
  .rv-strip {
    padding: 10px 12px !important;
  }
  .rv-strip-header {
    gap: 4px;
  }
  /* Slightly narrower cards so 1.5 cards are visible at 320px */
  .rv-card {
    width: 140px;
  }

  /* SP strip: same treatment */
  .sp-strip {
    padding: 10px 12px !important;
  }
  .sp-card {
    width: 140px;
  }
  /* Ensure remove button doesn't overlap title text */
  .sp-card-name {
    padding-right: 36px !important;
  }
}