/* Site-wide extras (Oct 13): footer site map, contrast fixes (WCAG AA), About sources list. Generated pages link this via scripts/build-site-extras.py */
.footer-map { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; max-width: 1000px; margin: 0 auto 1.2rem; padding: 0 1rem 1rem; border-bottom: 1px solid rgba(127,127,127,0.25); text-align: start; }
.footer-map .fm-h { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.4rem; opacity: 0.85; }
.footer-map ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; max-width: 420px; }
.footer-map a { font-size: 0.9rem; }
.sm-grid { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem 2rem; }
.sm-hub h2 { font-size: 1.2rem; margin: 0.6rem 0 0.4rem; }
.sm-hub ul { margin: 0; padding-inline-start: 1.1rem; }
.sm-hub li { margin: 0.25rem 0; }
/* contrast: white text on brand blue/green needs a darker fill (>= 4.5:1) */
button[type="submit"]:not(.help-btn), .sp-accept, .btn-nav, .sotw-actions .btn, .print-sheet, .sp-search-btn { background-color: #0072b1 !important; }
button[type="submit"]:not(.help-btn):hover, .sp-accept:hover, .btn-nav:hover, .sotw-actions .btn:hover, .print-sheet:hover { background-color: #005a8c !important; }
.status-badge.status-active { background-color: #1d7a45 !important; }
.mw-date { color: #c9d7e3 !important; }
/* About: sources as a readable list */
.src-list { list-style: none; padding: 0; margin: 1rem auto 0; max-width: 900px; text-align: start; }
.src-list li { padding: 0.8rem 0; border-bottom: 1px solid rgba(127,127,127,0.25); }
.src-list h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.src-list p { margin: 0.15rem 0; line-height: 1.5; }
.src-list .src-meta { font-size: 0.9rem; opacity: 0.85; }
html.dark body.toc-home .card-band .card { background: #0f1b26; box-shadow: 0 10px 28px rgba(0,0,0,0.45); }

/* ===== Oct 14: button flow fix (root cause of "Ways to Help" overlapping text on mobile) =====
   On the homepage .btn/.btn-nav were plain inline <a> with 12px vertical padding, so the padded box
   painted over neighbouring line boxes when the sentence wrapped. Make every button a flow box. */
.btn, .btn-nav, .share-btn { display: inline-block; max-width: 100%; line-height: 1.3; vertical-align: middle; overflow-wrap: anywhere; white-space: normal; }
p > .btn, li > .btn, p > .btn-nav { margin-block: .35rem; }
#actions, #actions .mission-block, .dot-card, .sotw-card, .diff-strip, .audience { height: auto; min-height: 0; overflow-wrap: break-word; }
#actions h2, #actions p { position: static; }

/* ===== Glass / water-bubble component (reusable). Tint per page via --glass-tint (rgb triplet). ===== */
:root { --glass-tint: 0 156 222; --glass-glow: 143 211 255; --glass-ink: #fff; --glass-solid: #0b4a6e; }
body[data-glass="ocean"]  { --glass-tint: 0 120 190;  --glass-glow: 120 220 255; --glass-solid: #0b4f78; }
body[data-glass="lakes"]  { --glass-tint: 0 150 170;  --glass-glow: 140 240 240; --glass-solid: #0a5c66; }
body[data-glass="rivers"] { --glass-tint: 0 140 150;  --glass-glow: 150 245 225; --glass-solid: #095a5e; }
body[data-glass="forests"]{ --glass-tint: 30 120 60;  --glass-glow: 170 240 160; --glass-solid: #1d5a32; }
body[data-glass="earth"]  { --glass-tint: 20 110 130; --glass-glow: 160 230 200; --glass-solid: #12505e; }
body[data-glass="space"]  { --glass-tint: 60 50 150;  --glass-glow: 190 170 255; --glass-solid: #33297a; }
body[data-glass="defense"]{ --glass-tint: 90 50 150;  --glass-glow: 210 170 255; --glass-solid: #4a2a7c; }
body[data-glass="sun"]    { --glass-tint: 170 80 10;  --glass-glow: 255 205 120; --glass-solid: #8a4208; }
body[data-glass="titan"]  { --glass-tint: 150 85 30;  --glass-glow: 255 200 140; --glass-solid: #7a4517; }
body[data-glass="mars"]   { --glass-tint: 160 50 30;  --glass-glow: 255 170 140; --glass-solid: #842c1a; }

.glass, #actions .mission-block,
.aud-icon, .eli10-icon, .share-btn, .nav-toggle {
  --_bg: rgb(var(--glass-tint) / .55);
  background: var(--glass-solid);           /* solid fallback (AA with white text) */
  color: var(--glass-ink);
  border: 1px solid rgb(var(--glass-glow) / .55);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 0 18px rgb(var(--glass-glow) / .25), 0 6px 18px rgb(0 0 0 / .25);
}
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .glass, #actions .mission-block, .aud-icon, .eli10-icon, .share-btn, .nav-toggle {
    background: radial-gradient(120% 90% at 25% 15%, rgb(255 255 255 / .28), transparent 45%), linear-gradient(160deg, rgb(var(--glass-tint) / .78), rgb(var(--glass-tint) / .58));
    -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  }
}
/* bubble-shaped icons */
.aud-icon, .eli10-icon { display: inline-grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50% 50% 46% 54% / 55% 48% 52% 45%; font-size: 1.3rem; line-height: 1; position: relative; }
.eli10-icon { font-size: 1.1rem; }
.share-btn { border-radius: 999px; }
.share-btn:hover, .share-btn:focus-visible { box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 0 22px rgb(var(--glass-glow) / .45), 0 6px 18px rgb(0 0 0 / .3); }

/* Ways to Help / "Be Part of the Fix" as a frosted water panel */
#actions { background: radial-gradient(60% 80% at 10% 0%, rgb(0 156 222 / .35), transparent 60%), radial-gradient(50% 70% at 95% 100%, rgb(0 200 200 / .25), transparent 60%), #002a42; padding: 2.5rem 1rem; overflow: hidden; }
#actions .mission-block { max-width: 920px; margin: 0 auto; padding: 2rem 1.4rem; border-radius: 28px 28px 36px 24px / 30px 24px 34px 28px; position: relative; isolation: isolate; }
#actions .mission-block::before, #actions .mission-block::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / .35), rgb(var(--glass-glow) / .12) 55%, transparent 70%); }
#actions .mission-block::before { width: 90px; height: 90px; top: -20px; inset-inline-end: 6%; animation: sp-bubble 9s ease-in-out infinite; }
#actions .mission-block::after { width: 46px; height: 46px; bottom: 14px; inset-inline-start: 5%; animation: sp-bubble 12s ease-in-out infinite reverse; }
#actions .mission-block h2, body.toc-home #actions .mission-block h2 { color: #bfe9ff; }
#actions .join-lead, #actions .join-lead a { color: #fff; }
#actions .btn { background: rgb(255 255 255 / .92); color: #00405f; border-radius: 999px; padding: .7rem 1.4rem; box-shadow: inset 0 -2px 0 rgb(0 60 90 / .15), 0 4px 14px rgb(0 0 0 / .25); text-decoration: none; }
#actions .btn:hover, #actions .btn:focus-visible { background: #fff; color: #002a42; }
@keyframes sp-bubble { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@media (prefers-reduced-motion: reduce) { #actions .mission-block::before, #actions .mission-block::after { animation: none; } }
@media (max-width: 480px) { #actions .join-lead { font-size: 1.1rem; } #actions .mission-block { padding: 1.5rem 1rem; } }
html.dark #actions .mission-block h2 { color: #bfe9ff; }
body #actions .mission-block .brand-blue { color: #8fe0ff; }
body.toc-home #actions .join-lead a.btn, body.toc-sub #actions .join-lead a.btn, #actions .join-lead a.btn { background: rgb(255 255 255 / .94); color: #00405f; text-decoration: none; }
body.toc-home #actions .join-lead a.btn:hover, body.toc-sub #actions .join-lead a.btn:hover { background: #fff; color: #002a42; }

/* Mobile hamburger menu: light blue links for readability on the dark panel */
@media (max-width: 900px) {
  nav.open .nav-links a,
  body.toc-home nav.open .nav-links a, body.toc-sub nav.open .nav-links a,
  body.toc-home nav.scrolled.open .nav-links a, body.toc-sub nav.scrolled.open .nav-links a,
  html.dark nav.open .nav-links a { color: #8fd3ff !important; }
  nav.open .nav-links a:hover, nav.open .nav-links a:focus-visible { color: #c6ecff !important; }
}
/* Video transcripts (Oct 14) */
.video-transcript { max-width: 760px; margin: .8rem auto 0; padding: .6rem 1rem; border: 1px solid rgb(143 211 255 / .45); border-radius: 14px; background: rgb(0 40 64 / .55); color: #e8eef5; text-align: start; overflow-wrap: break-word; }
.video-transcript summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.video-transcript p { margin: .4rem 0; line-height: 1.5; }
html:not(.dark) body:not(.toc-home):not(.toc-sub) .video-transcript { background: #f3f8fc; color: #10202c; }
video::cue { background: rgb(0 0 0 / .8); color: #fff; }

/* Oct 14: Become a Partner / Contact Us buttons use the glass teardrop bubble icon (same component as .aud-icon) */
body .partner-cta a.btn-nav { display: inline-flex; align-items: center; gap: .6em; }
.partner-cta .btn-nav::before { content: "\1F91D"; display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; flex: none; font-size: 1.1rem; line-height: 1;
  border-radius: 50% 50% 46% 54% / 55% 48% 52% 45%; color: var(--glass-ink);
  background: var(--glass-solid); border: 1px solid rgb(var(--glass-glow) / .55);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 0 18px rgb(var(--glass-glow) / .25), 0 6px 18px rgb(0 0 0 / .25); }
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .partner-cta .btn-nav::before { background: radial-gradient(120% 90% at 25% 15%, rgb(255 255 255 / .28), transparent 45%), linear-gradient(160deg, rgb(var(--glass-tint) / .78), rgb(var(--glass-tint) / .58));
    -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
}
/* Oct 14 2026: tap targets >= 44px on touch screens (Lighthouse target-size), search credit contrast, A-Z + trust pages */
.footer-map a { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 2px; }
@media (pointer: coarse), (max-width: 768px) {
  .footer-map a, footer a, .breadcrumb a, .chip, .sp-q, .az-nav a, .sol-top { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-map ul { gap: 0 1.2rem; }
  .az-nav a { min-width: 44px; justify-content: center; }
}
.sp-search .search-credit, .search-credit { opacity: 1; color: #c9d6e3; }
.search-credit a, .sp-search .search-credit a { color: #8fd3ff; }
.az-nav { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 1.5rem auto; max-width: 900px; position: sticky; top: 64px; z-index: 5; padding: 6px; border-radius: 12px; background: rgba(255,255,255,.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html.dark .az-nav { background: rgba(11,18,32,.75); }
.az-nav a { padding: 6px 10px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.az-nav a:hover, .az-nav a:focus-visible { background: rgba(0,156,222,.15); }
.az-group { max-width: 900px; margin: 0 auto 1.5rem; padding: 0 1.25rem; scroll-margin-top: 130px; }
.az-group h2 { border-bottom: 2px solid rgba(0,156,222,.35); padding-bottom: .2rem; }
.az-list { list-style: none; padding: 0; columns: 2 280px; column-gap: 2rem; }
.az-list li { break-inside: avoid; padding: 6px 0; }
.az-kind { font-size: .75rem; opacity: .85; margin-inline-start: .35rem; padding: 1px 6px; border-radius: 999px; background: rgba(0,156,222,.12); }
.trust-updated { max-width: 900px; margin: 1rem auto 0; padding: 0 1.25rem; font-size: .85rem; opacity: .85; }
/* Oct 14 2026 edu-extras: standards + badges */
.lb-std { margin-top: 1.2rem; padding: .8rem 1rem; border: 1px solid rgba(0,156,222,.35); border-radius: 12px; }
.lb-std-code { font-weight: 800; font-family: ui-monospace, monospace; background: rgba(0,156,222,.12); padding: 1px 6px; border-radius: 6px; }
.lb-std li { margin: .4rem 0; }
.sp-badge { margin: 1rem auto; max-width: 520px; padding: 1rem 1.2rem; border-radius: 16px; text-align: center; }
.sp-badge-t { font-size: 1.15rem; margin: 0 0 .6rem; }
.sp-badge-l { display: block; font-size: .85rem; margin-bottom: .6rem; }
.sp-badge-l input { display: block; width: 100%; margin-top: .3rem; min-height: 44px; padding: 8px 10px; border-radius: 8px; border: 1px solid #7aa7c2; box-sizing: border-box; }
.sp-badge .btn { min-height: 44px; }
@media print { .lb-std { break-inside: avoid; } }
.dept-foot { margin: .3rem 0; font-size: .9rem; }
.dept-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.dept-note { text-align: center; }