/* ==========================================================================
 * American Civics Five Minute Quiz — styles.css
 * White background · flag red #B22234 · flag blue #3C3B6E · tasteful USA accents.
 * Premium, family-friendly, mobile-first, desktop-friendly. System fonts only.
 * Readability: no visible text below 16px. Accessible contrast. No external CDNs.
 * 2026-06-27 polish pass (palette harmonized with the merged stylesheet).
 * ========================================================================== */

:root{
  --red:#C8102E;          /* strong flag red */
  --red-700:#9E0C24;
  --blue:#102A54;         /* deep navy */
  --blue-700:#0A1C3A;
  --gold:#C9A227;         /* restrained gold highlight */
  --white:#ffffff;
  --paper:#F5F7FB;
  --paper-2:#e9edf6;
  --line:#dfe4ef;
  --ink:#0E1726;
  --ink-soft:#46506a;
  --good:#16A34A; --good-bg:#DCFCE7;
  --bad:#DC2626;  --bad-bg:#FEE2E2;
  --shadow:0 8px 26px rgba(16,42,84,.14);
  --shadow-sm:0 2px 8px rgba(16,42,84,.08);
  --r:16px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--white); color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:18px; line-height:1.5; -webkit-text-size-adjust:100%; }
#app{ max-width:1040px; margin:0 auto; padding:0 18px 56px; }

/* ---------------- App bar ---------------- */
.appbar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 0; background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:3px solid var(--red); }
.brand{ display:flex; flex-direction:column; gap:2px; }
.brand-title{ font-size:20px; font-weight:800; color:var(--blue); display:flex; align-items:center; }
.brand-title .flag{ font-size:20px; }
.brand-sub{ font-size:16px; color:var(--ink-soft); }
.flag-lg{ font-size:30px; }

/* Language toggle (segmented pill) */
.lang-toggle{ display:flex; background:var(--paper); border:1px solid var(--line); border-radius:9999px; padding:3px; }
.lang-btn{ min-width:48px; min-height:40px; padding:8px 16px; border:none; background:transparent; cursor:pointer;
  font-size:16px; font-weight:800; color:var(--blue); border-radius:9999px; }
.lang-btn.active{ background:var(--blue); color:#fff; }
.lang-btn:focus-visible{ outline:3px solid #9aa6e6; outline-offset:2px; }

/* ---------------- Hero ---------------- */
.hero{ padding:26px 0 14px; }
.hero-title{ font-size:30px; line-height:1.14; font-weight:900; letter-spacing:-.2px; color:var(--ink); margin:0 0 8px; }
.hero-sub{ font-size:19px; font-weight:700; color:var(--red); margin:0 0 8px; }
.hero-hook{ font-size:18px; font-style:italic; color:var(--ink-soft); margin:0; }

.section-label{ font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--ink-soft); margin:22px 0 12px; }

/* ---------------- Category grid ---------------- */
.categories{ display:grid; grid-template-columns:1fr; gap:16px; }
.category-card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:18px; padding:18px; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.category-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:#cfd2ea; }
.card-top{ display:flex; align-items:center; gap:14px; }
.card-emoji{ font-size:30px; width:56px; height:56px; flex:0 0 56px; display:flex; align-items:center; justify-content:center;
  background:var(--paper); border:1px solid var(--line); border-radius:14px; }
.card-titles{ min-width:0; }
.card-title{ font-size:19px; font-weight:800; color:var(--blue); }
.card-desc{ font-size:16px; color:var(--ink-soft); margin-top:2px; }
.card-modes{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 6px; }
.mode-chip{ font-size:16px; font-weight:700; color:var(--blue); background:var(--paper-2); border:1px solid var(--line);
  border-radius:9999px; padding:5px 12px; }
.card-progress{ font-size:16px; color:var(--red); font-weight:700; margin:6px 0 12px; }
.card-actions{ display:flex; gap:10px; }
.card-actions .btn{ width:auto; flex:1; margin:0; }

.footer-note{ font-size:16px; color:var(--ink-soft); text-align:center; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }
.link-btn{ font-size:16px; font-weight:800; color:var(--blue); background:none; border:none; cursor:pointer; text-decoration:underline; padding:6px; }

/* ---------------- Page heads ---------------- */
.page-head{ margin:18px 0 8px; }
.page-title{ font-size:26px; font-weight:900; color:var(--ink); margin:14px 0 6px; }
.page-desc{ font-size:18px; color:var(--ink-soft); margin:0 0 12px; }

/* ---------------- Buttons (all states) ---------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:54px;
  font-size:18px; font-weight:800; border-radius:9999px; border:2px solid transparent; cursor:pointer;
  padding:13px 20px; margin:10px 0; transition:background .15s ease, border-color .15s ease, transform .06s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid #9aa6e6; outline-offset:2px; }
.btn[disabled]{ opacity:.42; cursor:default; transform:none; }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:var(--blue-700); }
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red-700); }
.btn-ghost{ background:var(--paper); color:var(--blue); border-color:var(--line); }
.btn-ghost:hover{ background:var(--paper-2); }
.btn-ghost.danger{ color:var(--red); }
.btn-back{ width:auto; min-height:44px; padding:8px 16px; margin:0; font-size:16px; }
.nav-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modes .btn{ margin:8px 0; }

/* ---------------- Score bar / stats ---------------- */
.scorebar,.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.stats{ grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
.score-cell,.stat{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 8px; text-align:center; }
.sc-val,.stat-value{ font-size:26px; font-weight:900; color:var(--blue); }
.sc-lab,.stat-label{ font-size:16px; color:var(--ink-soft); margin-top:2px; }

/* ---------------- Flashcards ---------------- */
.count-pill{ display:inline-block; font-size:16px; font-weight:800; color:var(--blue); background:var(--paper);
  border:1px solid var(--line); border-radius:9999px; padding:7px 14px; margin:8px 0 14px; }
.flashcard{ width:100%; min-height:240px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:20px; border:3px solid var(--blue); box-shadow:var(--shadow); padding:28px; text-align:center;
  background:linear-gradient(180deg,#ffffff,#f7f8fd); transition:transform .25s ease, background .2s ease, border-color .2s ease; }
.flashcard.is-back{ background:linear-gradient(180deg,var(--blue),var(--blue-700)); border-color:var(--blue); }
.fc-inner{ font-size:24px; font-weight:800; color:var(--ink); white-space:pre-line; line-height:1.4; }
.flashcard.is-back .fc-inner{ color:#fff; font-weight:700; }
.flip-hint{ text-align:center; font-size:16px; color:var(--ink-soft); margin:12px 0 16px; }

/* ---------------- Timeline ---------------- */
.timeline{ margin:8px 0 18px; }
.tl-item{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.tl-year{ flex:0 0 66px; font-size:20px; font-weight:900; color:var(--red); }
.tl-title{ font-size:18px; font-weight:800; color:var(--blue); }
.tl-text{ font-size:16px; color:var(--ink-soft); margin-top:2px; }

/* ---------------- Quiz ---------------- */
.quiz-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 6px; flex-wrap:wrap; }
.q-cat{ font-size:18px; font-weight:800; color:var(--blue); }
.q-meta{ display:flex; align-items:center; gap:14px; }
.timer{ font-size:28px; font-weight:900; color:var(--blue); }
.timer.low{ color:var(--red); }
.q-progress{ font-size:16px; font-weight:700; color:var(--ink-soft); }
.q-score{ font-size:17px; font-weight:800; color:var(--blue); }
.question{ font-size:22px; font-weight:800; color:var(--ink); white-space:pre-line; line-height:1.35;
  background:var(--paper); padding:18px; border-radius:14px; border-left:6px solid var(--blue); margin:14px 0 16px; }
.options{ display:grid; grid-template-columns:1fr; gap:12px; }
.option{ width:100%; min-height:56px; text-align:left; font-size:18px; font-weight:700; color:var(--ink);
  background:var(--white); border:2px solid var(--line); border-radius:14px; padding:14px 16px; cursor:pointer; transition:border-color .12s, background .12s; }
.option:hover{ border-color:var(--blue); background:#fbfbfe; }
.option.correct{ background:var(--good-bg); border-color:var(--good); color:#0f6b3a; }
.option.incorrect{ background:var(--bad-bg); border-color:var(--bad); color:#9c1c1c; }
.quiz-actions{ margin-top:14px; }

/* ---------------- Results ---------------- */
.result-title{ font-size:28px; font-weight:900; color:var(--ink); text-align:center; margin:18px 0 6px; }
.result-hero{ text-align:center; padding:8px 0 4px; }
.rh-num{ font-size:64px; font-weight:900; color:var(--blue); line-height:1; }
.rh-lab{ font-size:18px; font-weight:700; color:var(--ink-soft); }
.saved-pill{ text-align:center; font-size:17px; font-weight:800; color:#0f6b3a; background:var(--good-bg);
  border:1px solid #bfe6cf; border-radius:14px; padding:10px; margin:12px 0; }

/* ---------------- Review ---------------- */
.review-item{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px; margin:10px 0; }
.ri-q{ font-size:18px; font-weight:800; color:var(--ink); white-space:pre-line; }
.ri-row{ font-size:17px; margin-top:4px; }
.ri-your{ color:var(--red); }
.ri-correct{ color:#0f6b3a; }
.muted{ font-size:17px; color:var(--ink-soft); }

/* ---------------- About ---------------- */
.about-card{ background:linear-gradient(180deg,#ffffff,#f6f7fb); border:1px solid var(--line);
  border-left:6px solid var(--red); border-radius:18px; padding:18px; box-shadow:var(--shadow-sm); }
.about-price{ font-size:26px; font-weight:900; color:var(--blue); }
.about-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.tag{ font-size:16px; font-weight:700; color:var(--blue); background:var(--paper-2); border:1px solid var(--line); border-radius:9999px; padding:6px 12px; }
.about-blurb{ font-size:17px; color:var(--ink-soft); margin:8px 0 0; }
.lang-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.opt{ min-height:54px; font-size:18px; font-weight:800; color:var(--blue); background:var(--white); border:2px solid var(--line); border-radius:14px; cursor:pointer; }
.opt.on{ border-color:var(--blue); background:#eef0fa; }
.privacy-note{ font-size:16px; color:var(--ink-soft); margin:16px 0; }

/* ---------------- Desktop ---------------- */
@media (min-width:720px){
  .categories{ grid-template-columns:1fr 1fr; }
  .hero-title{ font-size:36px; }
}
@media (prefers-reduced-motion:reduce){
  .category-card,.btn,.flashcard{ transition:none; }
  .btn:hover,.btn:active,.category-card:hover{ transform:none; }
}

/* ===================== 5-minute challenge patch (2026-06-27) ============== */
.hero{ padding:24px 0 12px; border-bottom:none; }
.hero-title{ font-size:30px; line-height:1.14; font-weight:900; color:var(--ink); margin:0 0 10px; }
.hero-hook{ font-size:20px; font-weight:800; color:var(--red); font-style:normal; margin:0 0 8px; }
.hero-desc{ font-size:17px; color:var(--ink-soft); margin:0 0 16px; max-width:60ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-cta .btn{ width:auto; margin:0; }
.btn-hero{ font-size:20px; min-height:60px; padding:16px 26px; box-shadow:var(--shadow); }
.btn-hero:hover{ box-shadow:var(--shadow); }

.section-head{ font-size:20px; font-weight:900; color:var(--blue); margin:26px 0 12px;
  padding-bottom:6px; border-bottom:3px solid var(--gold); }
.section-sub{ color:var(--ink-soft); border-bottom-color:var(--line); }
.section-note{ font-size:16px; color:var(--ink-soft); margin:0 0 12px; }

.card-progress.has{ color:var(--red); }
.btn-sm{ min-height:44px; font-size:16px; padding:10px 14px; }
.card-actions .btn-sm{ flex:0 0 auto; }

/* Study Tools (secondary) */
.study-tools{ display:grid; grid-template-columns:1fr; gap:10px; }
.tool-btn{ width:100%; text-align:left; font-size:17px; font-weight:700; color:var(--blue);
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px; cursor:pointer; }
.tool-btn:hover{ background:var(--paper-2); }
.tool-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

/* Results extras */
.best-banner{ text-align:center; font-size:18px; font-weight:900; color:var(--blue);
  background:#fff8e1; border:1px solid var(--gold); border-radius:14px; padding:10px; margin:6px 0; }
.result-meta{ text-align:center; margin:8px 0; }
.rm-cat{ font-size:17px; font-weight:700; color:var(--ink-soft); }
.beat-note{ text-align:center; font-size:17px; font-weight:800; color:var(--red); margin:8px 0; }

/* Scores screen */
.scores-list{ display:grid; grid-template-columns:1fr; gap:10px; margin:8px 0 16px; }
.score-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.sr-label{ font-size:17px; font-weight:800; color:var(--blue); }
.sr-val{ font-size:16px; font-weight:700; color:var(--red); }

/* hero accent bar under header */
.appbar{ border-bottom:3px solid var(--red); }
.brand-title{ color:var(--blue); }

/* Readable independence disclaimer (>=16px, not fine print) */
.disclaimer{ font-size:16px; line-height:1.5; color:var(--ink-soft); text-align:center;
  max-width:62ch; margin:18px auto 0; padding:14px 16px; background:var(--paper);
  border:1px solid var(--line); border-radius:14px; }

/* Answer explanation + Next control (>=16px) */
.explain{ font-size:16px; line-height:1.5; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:12px;
  padding:12px 14px; margin:14px 0 6px; }
.explain-label{ font-weight:700; color:var(--blue); }
.next-row{ display:flex; justify-content:flex-end; margin-top:6px; }
.btn-next{ min-width:140px; }

/* Tagline + live bilingual toggle hint (>=16px) */
.hero-tagline{ font-size:18px; font-weight:600; color:var(--red); margin:2px 0 10px; }
.toggle-hint{ font-size:16px; color:var(--blue); opacity:.85; margin:8px 0 0; }
/* Polished language toggle (not tiny, clear active state) */
.lang-toggle{ display:inline-flex; gap:2px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:3px; }
.lang-btn{ min-width:48px; min-height:36px; font-size:16px; font-weight:700; border:0; border-radius:999px; background:transparent; color:var(--blue); cursor:pointer; }
.lang-btn.active{ background:var(--blue); color:#fff; }
.ri-expl{ color:var(--blue); }