/* AsphaltBG — liquid glass layer (2026-10-31)
   Surface treatment only: no layout, size, position or copy changes. Linked LAST in <head> of every
   live page (index, methodology, contact, privacy, terms, cookies, offline), so removing those
   <link> tags rolls the whole layer back. Every selector carries an `html` prefix to win on
   specificity regardless of stylesheet order (pages carry their own inline <style> blocks).
   - Every glass surface has an opaque-ish fallback tint (>= .92) when backdrop-filter is
     unavailable; inside @supports the tint drops to .72 (flat navy backdrop, no map behind it).
   - All motion is inside prefers-reduced-motion: no-preference.
   - NOT touched here: the family bar (.cs-brandbar / .cs-flag-stripe, styled by civil-service.css +
     legal.js) and the shared donate/share widgets (.civic-*, styled by donate.js).
   - Large glass panels (hero card, article panel, offline card) are drawn by a ::before layer behind
     the content (inset offsets, z-index:-1 inside an isolated stacking context), so the content box,
     text flow and tap targets are exactly what they were. */

:root {
  --gl-tint: rgba(10, 22, 40, .94);          /* panels / cards */
  --gl-tint-strong: rgba(8, 18, 33, .96);    /* dense small text */
  --gl-tint-lite: rgba(12, 24, 42, .92);     /* chips */
  --gl-sheen: linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.025) 100%);
  --gl-border: rgba(255, 255, 255, .13);
  --gl-border-hi: rgba(255, 255, 255, .26);
  --gl-gold-rim: 0 0 0 1px rgba(232, 198, 106, .10);
  --gl-blur: blur(22px) saturate(165%);
  --gl-shadow:
    0 30px 70px -34px rgba(0, 0, 0, .85),
    0 10px 24px -14px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 1px 0 0 rgba(255, 255, 255, .05),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .03);
  --gl-shadow-sm:
    0 12px 28px -16px rgba(0, 0, 0, .8),
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(0, 0, 0, .35);
  --gl-chip-bg: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.015));
  --gl-ease: cubic-bezier(.22, 1, .36, 1);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --gl-tint: rgba(10, 22, 40, .72);
    --gl-tint-strong: rgba(8, 18, 33, .84);
    --gl-tint-lite: rgba(12, 24, 42, .72);
  }
}

/* 1. Landing (index.html) ---------------------------------------------------------------- */

/* Prelaunch strip: keeps its red wash, gains sheen, a specular top edge and a soft drop. */
html .prelaunch-banner {
  background:
    var(--gl-sheen),
    linear-gradient(90deg, rgba(200,16,46,.30), rgba(232,52,79,.18), rgba(200,16,46,.30)),
    var(--gl-tint-strong);
  border-bottom: 1px solid var(--gl-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 30px -22px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

/* Hero card: the glass panel sits behind the content (no padding/size change to .card). */
html .hero .card::before {
  content: "";
  position: absolute;
  inset: -1.75rem -1.75rem -1.5rem;
  z-index: -1;
  border-radius: 28px;
  background: var(--gl-sheen), var(--gl-tint);
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow), var(--gl-gold-rim);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  pointer-events: none;
}
@media (max-width: 600px) {
  /* hero side padding is 1.5rem: keep the panel inside the viewport (no horizontal scroll). */
  html .hero .card::before { inset: -1.25rem -1rem -1.25rem; border-radius: 24px; }
}

html .badge {
  background: var(--gl-chip-bg), rgba(200,16,46,.17);
  border-color: rgba(248,113,113,.40);
  color: #fca5a5; /* was #f87171: the chip sheen lightens the fill, this keeps >= 4.5:1 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -12px rgba(0,0,0,.8);
}
html .logo-mark {
  background: linear-gradient(155deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 46%), linear-gradient(135deg, #C8102E 0%, #8b0f21 100%);
  box-shadow:
    0 0 0 1px rgba(200,16,46,.3),
    0 12px 48px rgba(200,16,46,.35),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -10px 18px -12px rgba(0,0,0,.5);
}
html .pothole { box-shadow: inset 0 4px 8px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.07); }

/* Muted copy that sat at 20-58% alpha: lifted so it holds >= 4.5:1 on the glass. */
html .tagline { color: rgba(241,245,249,.74); }
html .tagline span { opacity: 1 !important; color: rgba(241,245,249,.66); }
html .coming-soon-bg { color: rgba(241,245,249,.70); }
html .footer-text { color: rgba(241,245,249,.62); }
html .footer-links a { color: rgba(255,255,255,.80); }
html .footer-links a:hover { color: #fff; }
html .prelaunch-banner span { opacity: 1 !important; color: rgba(255,230,236,.86); }

html .footer-links a:focus-visible,
html .trust-page a:focus-visible,
html .trust-page__lang:focus-visible,
html .header-back:focus-visible,
html .quick a:focus-visible,
html .legal-nav a:focus-visible {
  outline: 2px solid #e8c66a;
  outline-offset: 3px;
  border-radius: 8px;
}

/* 2. Trust pages (methodology.html) ---------------------------------------------------------- */
html .trust-page { position: relative; isolation: isolate; }
html .trust-page::before {
  content: "";
  position: absolute;
  inset: .5rem .5rem 1.25rem;
  z-index: -1;
  border-radius: 22px;
  background: var(--gl-sheen), var(--gl-tint);
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow), var(--gl-gold-rim);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  pointer-events: none;
}
@media (min-width: 900px) {
  html .trust-page::before { inset: .75rem -.75rem 1.5rem; }
}
html .trust-page__lang {
  position: relative;
  background: var(--gl-chip-bg), rgba(10,22,40,.5);
  border-color: var(--gl-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px -12px rgba(0,0,0,.8);
}
html .trust-page__lang:hover {
  border-color: rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 10px 22px -12px rgba(0,0,0,.85);
}
html .trust-page__lede { color: #b4c3d3; }
html .trust-page th { color: #b4c3d3; }
html .trust-tag { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08); } /* ring via shadow: a border would grow the tag */

/* 3. Contact + legal pages (contact / privacy / terms / cookies) ----------------------------- */
html .page-header {
  background: var(--gl-sheen), linear-gradient(180deg, rgba(13, 24, 42, .9), rgba(8, 14, 26, .86));
  border-bottom: 1px solid var(--gl-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px -22px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
html .header-back,
html .quick a {
  position: relative;
  background: var(--gl-chip-bg), rgba(12,24,42,.55);
  border-color: var(--gl-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px -12px rgba(0,0,0,.8);
}
html .header-back:hover,
html .quick a:hover {
  background: var(--gl-chip-bg), rgba(200,16,46,.16);
  border-color: rgba(248,113,113,.45);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 10px 22px -12px rgba(0,0,0,.85);
}
html .legal-nav {
  background: var(--gl-sheen), var(--gl-tint-lite);
  border-bottom: 1px solid var(--gl-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 26px -22px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
html .legal-nav a:not(.active) { color: #8fa0bd; }
html .legal-date { color: #8fa0bd; }

html .contact-card,
html .legal-contact,
html .cookie-card {
  background: var(--gl-sheen), var(--gl-tint);
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow), var(--gl-gold-rim);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}
html .legal-contact,
html .cookie-card { box-shadow: var(--gl-shadow-sm), var(--gl-gold-rim); }
html .contact-card strong { color: rgba(240,244,255,.78); }
html .data-table th { background: var(--gl-chip-bg), rgba(26,36,56,.9); }

/* 4. Offline fallback (offline.html) ------------------------------------------------------ */
html .offline-card { position: relative; isolation: isolate; }
html .offline-card::before {
  content: "";
  position: absolute;
  inset: -2rem -1.5rem -1.5rem;
  z-index: -1;
  border-radius: 26px;
  background: var(--gl-sheen), var(--gl-tint);
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow), var(--gl-gold-rim);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  pointer-events: none;
}
@media (max-width: 600px) {
  /* body padding is 2rem: panel offsets stay inside it. */
  html .offline-card::before { inset: -1.5rem -1rem -1.25rem; }
}
html .offline-card .legal-text { color: #93a3b8; }

/* 5. Phone: bigger invisible hit areas for small pills/links (no visual change). ---------------- */
@media (max-width: 760px) {
  html .header-back::before,
  html .quick a::before { content: ""; position: absolute; inset: -4px 0; }
  html .trust-page__lang::before { content: ""; position: absolute; inset: -9px -6px; }
  html .footer-links a { position: relative; }
  html .footer-links a::before { content: ""; position: absolute; inset: -10px -4px; }
  html .trust-page__back { position: relative; }
  html .trust-page__back::before { content: ""; position: absolute; inset: -12px -6px; }
}

/* 6. Motion (all opt-in) ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes gl-in {
    from { opacity: 0; translate: 0 10px; }
    to   { opacity: 1; translate: 0 0; }
  }
  html .hero .card,
  html .trust-page,
  html .contact-card,
  html .offline-card { animation: gl-in .28s var(--gl-ease) both; }

  html .header-back,
  html .quick a,
  html .trust-page__lang,
  html .footer-links a {
    transition: color .18s var(--gl-ease), border-color .18s var(--gl-ease),
                background .18s var(--gl-ease), box-shadow .18s var(--gl-ease),
                transform .25s var(--gl-ease);
  }
  html .header-back:hover,
  html .quick a:hover,
  html .trust-page__lang:hover { transform: translateY(-1px); }
}

/* 7. Honour reduced transparency: solid surfaces, no blur. ------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
  html .prelaunch-banner,
  html .page-header,
  html .legal-nav,
  html .contact-card,
  html .legal-contact,
  html .cookie-card,
  html .hero .card::before,
  html .trust-page::before,
  html .offline-card::before {
    background: rgba(8, 18, 30, .97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}