/* Site-wide Light/Dark theme. The dark palette applies on screen only, so
   printing or saving a page as PDF always uses the original light layout. */

/* ---------- Toggle button (both themes) ---------- */
.theme-bar {
  display: flex;
  align-items: stretch;
  background: #000000;
}
.theme-bar .site-back { flex: 1 1 auto; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: auto 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.6); }
.theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
header.hero.has-theme-toggle { position: relative; }
header.hero.has-theme-toggle .site-tools { position: absolute; top: 12px; right: 12px; }
header.hero.has-theme-toggle .theme-toggle { margin: 0; }
.site-tools--floating { position: fixed; top: 12px; right: 12px; z-index: 10; }
.site-tools--floating .theme-toggle { margin: 0; background: #1b3a2b; }

/* ---------- Homepage artwork banner on subpages (Terms, Privacy) ---------- */
/* Same banner as the homepage; its edges match the page background in each theme. */
header.hero.hero-banner,
html[data-theme] header.hero.hero-banner { background: transparent; color: var(--text); padding: 0 20px 8px; }
.hero-banner .banner-link { display: block; line-height: 0; }
.hero-banner img { display: block; width: 100%; max-width: 860px; height: auto; margin: 0 auto; }
.hero-banner .banner-dark { display: none; }
header.hero.hero-banner .theme-toggle { background: #1b3a2b; }
@media screen {
  html[data-theme="dark"] .hero-banner .banner-light { display: none; }
  html[data-theme="dark"] .hero-banner .banner-dark { display: block; }
}
@media (max-width: 600px) { header.hero.hero-banner { padding: 44px 14px 4px; } }
.page-title { text-align: center; margin: 0 0 22px; }
.page-title h1 { margin: 0 0 6px; font-size: clamp(22px, 3.6vw, 30px); color: var(--green-dark); letter-spacing: 0.02em; }
.page-title p { margin: 0 auto; max-width: 640px; color: var(--green-mid); font-size: 16px; font-style: italic; }

/* ---------- Account links (shown when signed in) ---------- */
.site-tools { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; }
.site-account { display: flex; align-items: center; gap: 6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.site-account a {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.site-account a:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.6); }
.site-account a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
header.hero .site-account a, .site-tools--floating .site-account a { background: #1b3a2b; }
.theme-bar .site-tools { margin-left: 10px; }
.theme-bar .site-tools .theme-toggle { margin-left: 0; }
@media (max-width: 480px) { .site-account a { padding: 7px 9px; font-size: 12px; } }
@media print { .theme-bar, .theme-toggle, .site-tools { display: none !important; } }

/* ---------- Phones ---------- */
/* Stop phones from auto-inflating text unevenly when rotated. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Consumer briefs are sized in print points for a Letter page; scale the
   whole sheet up evenly on small screens so every line stays readable. */
@media screen and (max-width: 600px) {
  .sheet { zoom: 1.15; padding: 14px; }
  /* Long citation URLs and product names wrap instead of widening the page. */
  .sheet .src p { overflow-wrap: anywhere; }
  .sheet p, .sheet li, .sheet td { overflow-wrap: break-word; }
}

@media screen {
  html[data-theme="dark"] { color-scheme: dark; }

  /* ---------- Homepage & Research Methodology ---------- */
  html[data-theme="dark"] {
    --green-dark: #a8d5b8;
    --green-mid: #9dbcab;
    --green-pale: #1b231e;
    --border: #2e3a33;
    --text: #e3e8e4;
    --muted: #a3ada6;
    --h-bg: #1d3a24; --h-text: #a6e0b1; --h-border: #33603d;
    --m-bg: #3a2f10; --m-text: #f0cf7a; --m-border: #62501c;
    --l-bg: #3d1e1b; --l-text: #f4aa9f; --l-border: #6c342d;
  }
  html[data-theme="dark"] body { background: #111513; }
  html[data-theme="dark"] header.hero { background: linear-gradient(135deg, #10241a, #1b3a2b); }
  html[data-theme="dark"] .disclosure,
  html[data-theme="dark"] .featured-briefs,
  html[data-theme="dark"] .coming-soon,
  html[data-theme="dark"] .methodology,
  html[data-theme="dark"] .who-we-are,
  html[data-theme="dark"] .method-section {
    background: #181e1a;
    box-shadow: none;
  }
  html[data-theme="dark"] .btn-learn { background: #2d6a47; }
  html[data-theme="dark"] .btn-learn:hover,
  html[data-theme="dark"] .btn-learn:focus-visible { background: #378056; }
  html[data-theme="dark"] .legend-score { color: var(--muted); }
  html[data-theme="dark"] .site-back:hover { background: #262626; }

  /* ---------- Consumer brief pages (.sheet template) ---------- */
  html[data-theme="dark"] .sheet {
    /* Readable, lighter take on each brief's own accent color. */
    --accent-fg: color-mix(in srgb, var(--main) 40%, #fff);
    --accent-tint: color-mix(in srgb, var(--main) 24%, #1a1c1b);
  }
  html[data-theme="dark"]:has(.sheet) { background: #0e100f; }
  html[data-theme="dark"]:has(.sheet) body { color: #e4e4e4; }
  html[data-theme="dark"] .sheet { background: #1a1c1b; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
  html[data-theme="dark"] .sheet .acc,
  html[data-theme="dark"] .sheet sup,
  html[data-theme="dark"] .sheet .tagline,
  html[data-theme="dark"] .sheet .kv td:first-child,
  html[data-theme="dark"] .sheet .myth td:first-child { color: var(--accent-fg); }
  html[data-theme="dark"] .sheet h2 { color: var(--accent-fg); border-bottom-color: var(--accent-fg); }
  html[data-theme="dark"] .sheet h2 small { color: #9a9a9a; }
  html[data-theme="dark"] .sheet .bl { background: var(--accent-tint); border-left-color: var(--accent-fg); }
  html[data-theme="dark"] .sheet .card.top { border-color: var(--accent-fg); }
  html[data-theme="dark"] .sheet .hdr img { filter: brightness(0.9); }
  html[data-theme="dark"] .sheet td { border-bottom-color: #353230; }
  html[data-theme="dark"] .sheet tr:nth-child(even) td { background: #222423; }
  html[data-theme="dark"] .sheet .card { border-color: #3a3634; }
  html[data-theme="dark"] .sheet .tile .l,
  html[data-theme="dark"] .sheet .legend,
  html[data-theme="dark"] .sheet .muted,
  html[data-theme="dark"] .sheet .disc { color: #a8a8a8; }
  html[data-theme="dark"] .sheet .tile .n { color: #d0d0d0; }
  html[data-theme="dark"] .sheet .card .c { color: #b8b8b8; }
  html[data-theme="dark"] .sheet .src { color: #c8c8c8; }
  html[data-theme="dark"] .sheet .disc { border-top-color: #444; }
  html[data-theme="dark"] .pgfoot { color: #7a7a7a; }

  /* Evidence pills, tiles and boxes use a small set of inline color pairs. */
  html[data-theme="dark"] .sheet [style*="background:#FBEFC9" i] { background: #3a2f10 !important; }
  html[data-theme="dark"] .sheet [style*="color:#6B4E00" i] { color: #f0cf7a !important; }
  html[data-theme="dark"] .sheet [style*="background:#F6D6D3" i] { background: #3d1e1b !important; }
  html[data-theme="dark"] .sheet [style*="color:#8A1F17" i] { color: #f4aa9f !important; }
  html[data-theme="dark"] .sheet [style*="background:#DDEFD9" i] { background: #1d3a24 !important; }
  html[data-theme="dark"] .sheet [style*="color:#1E4D2B" i] { color: #a6e0b1 !important; }
  html[data-theme="dark"] .sheet [style*="background:#EAF4E6" i] { background: #1a2a1e !important; }
  html[data-theme="dark"] .sheet [style*="background:#FBF1F2" i] { background: #2c1c1e !important; }
  html[data-theme="dark"] .sheet [style*="color:#C00000" i],
  html[data-theme="dark"] .sheet [style*="color:#C0392B" i] { color: #ff8f85 !important; }
}

/* ---------- Footer contact line (both themes) ---------- */
/* Sits just under the copyright line, keeping the copyright's gap to the logo. */
.copyright + .contact { margin-top: -14px; }
.contact a { color: inherit; text-decoration: underline; }