:root {
  color-scheme: light;
  --bg: #faf8f6;
  --panel: #ffffff;
  --panel-2: #fdf9f5;
  --card: #ffffff;
  --surface: #f3f0ea;
  --text: #1f2933;
  --text-primary: #1f2933;
  --text-secondary: #6b7280;
  --muted: #5c616e;
  --on-accent: #231a0f;
  --link: #a04a08;
  --accent: #d97706;
  --accent-light: #fb923c;
  --accent-dark: #b45309;
  --accent-strong: #b45309;
  --primary: #d97706;
  --border: #f3e8e1;
  --hairline: rgba(0, 0, 0, 0.12);
  --radius: var(--radius-14);
  --shadow: 0 10px 30px rgba(217, 119, 6, 0.1);
  --glow: rgba(217, 119, 6, 0.3);
}

body[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a0f0a;
  --panel: #2d1810;
  --panel-2: #3a2016;
  --card: #24140e;
  --surface: #2e1a12;
  --text: #f5e6d3;
  --text-primary: #f5e6d3;
  --text-secondary: #c49a6f;
  --muted: #d3a97e;
  --link: #f59e0b;
  --accent: #f59e0b;
  --accent-light: #fbbf24;
  --accent-dark: #d97706;
  --accent-strong: #f59e0b;
  --primary: #f59e0b;
  --border: #4a2f1f;
  --hairline: rgba(255, 255, 255, 0.12);
  --shadow: 0 10px 30px rgba(245, 158, 11, 0.2);
  --glow: rgba(245, 158, 11, 0.4);
}

* {
  box-sizing: border-box;
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

/* Background grid (the MQTT console's squares, shared site-wide). Light is
   the default; dark is slightly fainter so it sits behind dark panels. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(234, 88, 12, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 88, 12, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

body[data-theme="dark"]::before {
  background-image:
    linear-gradient(rgba(249, 115, 22, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 115, 22, 0.03) 1px, transparent 1px);
}

a {
  color: var(--link, #a04a08);
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  cursor: pointer;
}

.logo-link:hover {
  opacity: 0.85;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-logo {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--radius-12);
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.brand-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35);
}

.top-nav {
  display: flex;
  gap: 6px;
  margin-right: 8px;
  align-items: center;
}

.top-nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-20);
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.top-nav a:hover {
  background: rgba(217, 119, 6, 0.1);
  color: var(--accent);
}

.top-nav a[aria-current="page"],
.top-nav a.active {
  background: var(--accent);
  color: var(--on-accent, #231a0f) !important;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.35);
}

/* Glassmorphism with glow effect */

.card {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  transition: color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card:hover {
  box-shadow: 0 0 25px var(--glow), var(--shadow);
  transform: translateY(-2px);
}

body[data-theme="dark"] .card {
  background: rgba(45, 24, 16, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.15);
}

body[data-theme="dark"] .card:hover {
  background: rgba(45, 24, 16, 0.95);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.25), var(--shadow);
}

/* Scroll reveal animations */
.text-center {
  text-align: center;
}

.mt-2rem {
  margin-top: 2rem;
}

.mt-28 {
  margin-top: 28px;
}

.mt-40 {
  margin-top: 40px;
}

.panel-callout {
  margin-top: 28px;
  padding: 16px;
  background: rgba(217, 119, 6, 0.06);
  border-radius: var(--radius-10);
  border: 1px solid var(--border);
}

.inline-block {
  display: inline-block;
}

.muted {
  color: var(--muted);
}

.reveal-lift {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.reveal-lift:hover {
  transform: translateY(-2px);
}

.page-loaded>header,
.page-loaded>.topbar,
.page-loaded>main,
.page-loaded>footer {
  opacity: 1;
  transform: none;
  filter: none;
}

body:not(.page-loaded)>header,
body:not(.page-loaded)>.topbar,
body:not(.page-loaded)>main,
body:not(.page-loaded)>footer {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
}

.page-loaded>header,
.page-loaded>.topbar,
.page-loaded>main,
.page-loaded>footer {
  transition:
    opacity 750ms ease,
    transform 950ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 750ms ease;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(calc(var(--reveal-y, 44px) + var(--hero-drift, 0px) + var(--hero-shift, 0px))) scale(var(--reveal-scale, 0.965));
  filter: blur(var(--reveal-blur, 8px)) saturate(0.92);
  will-change: opacity, transform, filter;
  transition:
    opacity var(--reveal-duration, 1100ms) ease,
    transform var(--reveal-duration, 1100ms) cubic-bezier(0.16, 1, 0.3, 1),
    filter var(--reveal-duration, 1100ms) ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0) saturate(1);
}

.parallax-drift {
  will-change: transform;
  transition: transform 180ms linear;
}

.footer-reveal {
  position: relative;
  overflow: hidden;
}

.footer-reveal::before {
  content: '';
  position: absolute;
  inset: -20px 0 auto;
  height: 80px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent);
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-reveal.is-visible::before {
  opacity: 1;
  transform: translateY(0);
}

.footer-reveal .footer-section,
.footer-reveal .footer-bottom,
.footer-reveal .footer-logo {
  transition-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}

.reveal-media {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  filter: blur(4px);
  will-change: opacity, transform, filter;
  transition:
    opacity 760ms ease,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 760ms ease;
  transition-delay: var(--media-delay, 0ms);
}

.scroll-reveal.is-visible .reveal-media,
.reveal-media.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.depth-reveal {
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.05);
}

.depth-reveal.is-visible {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}

.footer-reveal.is-visible .footer-section,
.footer-reveal.is-visible .footer-bottom,
.footer-reveal.is-visible .footer-logo {
  animation: footerLift 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes footerLift {
  from {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Global kill: infinite animations are motion, not function. Individual
     reduce-block overrides elsewhere in this file stay for non-infinite
     transitions; pinned by tests/perf-budget.test.js. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  body:not(.page-loaded)>header,
  body:not(.page-loaded)>.topbar,
  body:not(.page-loaded)>main,
  body:not(.page-loaded)>footer,
  .scroll-reveal {
    opacity: 1;
    transform: none;
    filter: none;
transition: none;
  }
}

/* ------------------ View transitions (cross-document) ------------------
   MPA navigation fades via the native View Transition API — the multi-page
   analog of the route-change pattern. Chromium 126+/Firefox 144+/Safari 18.2+
   get a quiet cross-fade between pages; every other browser just swaps.
   Pinned by tests/view-transitions.test.js. */
@view-transition {
  navigation: auto;
}

/* The topbar is persistent chrome: it renders identically on every page, so
   cross-fading it would make it flicker on each navigation. Pin it above the
   animating groups. */
.topbar {
  view-transition-name: persistent-nav;
}

::view-transition-group(persistent-nav) {
  animation: none;
  z-index: 100;
}

/* The topbar paints with backdrop-filter, so its old snapshot is blurred over
   stale content — hide the old snapshot and hold the new one static instead
   of cross-fading (the standard blur workaround). */
::view-transition-old(persistent-nav) {
  display: none;
}

::view-transition-new(persistent-nav) {
  animation: none;
}

/* The site's reduced-motion kill-switch below targets *, ::before and
   ::after — pseudo-elements of the view-transition overlay hang off the root
   and are outside its reach, so suppress them explicitly. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}

/* ------------------ Topbar ------------------ */

/* Google Translate attribution link: the widget's own stylesheet styles
   .VIpgJd-ZVi9od-l4eHX-hSRGPd as #444 with a transparent background, so it
   inherits the themed page surface (1.76:1 on dark). An explicit ink+chip
   pair fixed at 9.74:1 applies in both themes; axe accepts it because the
   widget loads async (waited-for in the sweep). */
a.VIpgJd-ZVi9od-l4eHX-hSRGPd {
  color: #444444;
  background: #ffffff;
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-4);
  font-weight: bold;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(12px + env(safe-area-inset-top)) calc(28px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(28px + env(safe-area-inset-left));
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: margin-left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

body[data-theme="dark"] .topbar {
  background: rgba(45, 24, 16, 0.85);
}

.topbar-scrolled .topbar,
body.topbar-scrolled .topbar {
  box-shadow: 0 4px 24px rgba(217, 119, 6, 0.15);
  border-bottom-color: rgba(217, 119, 6, 0.25);
}

@media (min-width: 901px) {
  body.menu-open .topbar,
  body.menu-open main,
  body.menu-open footer,
  body.menu-open .content-grid {
    margin-left: 280px !important;
    max-width: calc(100% - 280px) !important;
    width: calc(100% - 280px) !important;
    box-sizing: border-box !important;
    transition: margin-left 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

@media (max-width: 900px) {
  body.menu-open .topbar,
  body.menu-open main,
  body.menu-open footer,
  body.menu-open .content-grid {
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

.brand h1 {
  margin: 0;
  font-size: 20px;
}

.brand-sub {
  font-size: 13px;
  color: var(--muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.header-socials {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 2px;
}

.header-socials a {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-8);
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.header-socials a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(217, 119, 6, 0.1);
}

/* Font Awesome fallback for X icon */
.fa-x-twitter::before {
  content: "\e61b";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
  animation: statusPulse 1.4s ease-in-out infinite;
}

@keyframes statusPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
  }

  50% {
    transform: scale(1.4);
    opacity: 0.55;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.85);
  }
}

/* ------------------ Layout ------------------ */

.app-container {
  max-width: 1400px;
  margin: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landing-wrap {
  max-width: 100%;
  margin: 28px auto;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landing-wrap .card {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Home page spacing refinements */
.home-page .landing-wrap {
  gap: 24px;
}

.home-page .sensor-preview {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px;
}

/* ====================================
   Fire Season Widget (Homepage)
   ==================================== */

.home-page .fire-season-widget {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 28px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(217, 119, 6, 0.06) 50%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.home-page .fire-season-widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ef4444 0%, #f97316 50%, #fb923c 100%);
  border-radius: var(--radius) var(--radius) 0 0;
}

body[data-theme="dark"] .home-page .fire-season-widget {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(217, 119, 6, 0.1) 50%, rgba(45, 24, 16, 0) 100%);
  border-color: rgba(239, 68, 68, 0.25);
}

.fire-season-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.fire-season-header h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 14px;
}

.fire-emoji {
  font-size: 1.4em;
  animation: fireFlicker 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
}

@keyframes fireFlicker {

  0%,
  100% {
    transform: scale(1) rotate(-3deg);
    opacity: 1;
  }

  25% {
    transform: scale(1.08) rotate(3deg);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.05) rotate(-2deg);
    opacity: 0.95;
  }

  75% {
    transform: scale(1.1) rotate(2deg);
    opacity: 0.85;
  }
}

.fire-season-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.fire-stat {
  background: linear-gradient(145deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-16);
  padding: 24px 20px;
  transition: color 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}

.fire-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light));
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: gradientShift 3s ease infinite;
}

/* background-position animation repaints the card every frame; keep it for
   users who want motion, drop it for reduced-motion visitors. */
@media (prefers-reduced-motion: reduce) {
  .fire-stat::before { animation: none; }
}

@keyframes gradientShift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.fire-stat:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow), 0 0 0 1px var(--glow);
  border-color: var(--accent);
}

.fire-stat:hover::before {
  transform: scaleX(1);
}

.fire-stat-icon {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-4px) rotate(2deg);
  }
}

.fire-stat:nth-child(2) .fire-stat-icon {
  animation-delay: 0.2s;
}

.fire-stat:nth-child(3) .fire-stat-icon {
  animation-delay: 0.4s;
}

.fire-stat:nth-child(4) .fire-stat-icon {
  animation-delay: 0.6s;
}

.fire-stat-content {
  flex: 1;
  min-width: 0;
}

.fire-stat-number {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--accent-dark);
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.fire-stat:hover .fire-stat-number {
  color: var(--accent);
}

/* Out of Control is the one number that should read as an alarm, so it keeps a
   dedicated hue instead of the amber used for the neutral counts. */
.fire-stat.is-critical .fire-stat-number {
  color: #dc2626;
}

.fire-stat.is-critical:hover {
  border-color: rgba(220, 38, 38, 0.45);
}

body[data-theme="dark"] .fire-stat.is-critical .fire-stat-number {
  color: #f87171;
}

.fire-stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fire-stat-sub {
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.3;
}

.fire-stat-sub:empty {
  display: none;
}

/* "New in the last 24 hours" badge. The up-arrow comes from CSS so the JS
   only ever fills in a count. */
.fire-stat-up {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-20);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.fire-stat-up::before {
  content: '\2191';
  font-size: 0.8rem;
  line-height: 1;
}

.fire-stat-up:empty {
  display: none;
}

body[data-theme="dark"] .fire-stat-up {
  color: #4ade80;
}

/* The "newly detected in 24h" badge defaults to a reassuring green, which is
   the right tone for "new fires" but reads as a contradiction next to the red
   Out-of-Control number. On the critical card the badge shares that alarm hue
   instead, so the escalation reads consistently. */
.fire-stat.is-critical .fire-stat-up {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.3);
}

body[data-theme="dark"] .fire-stat.is-critical .fire-stat-up {
  color: #f87171;
}

.fire-stat-cause-icon {
  display: inline-block;
  margin-top: 6px;
  font-size: 1.5rem;
  line-height: 1;
  animation: causeIconPop 1.5s ease-out;
}

@keyframes causeIconPop {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.2) rotate(10deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.fire-cause-breakdown {
  background: linear-gradient(145deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-16);
  padding: 24px;
}

.fire-cause-breakdown h3 {
  margin: 0 0 20px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
}

.fire-cause-breakdown h3 span {
  font-size: 1.2em;
  animation: iconPulse 2s ease-in-out infinite;
}

.cause-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
}

.cause-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cause-tab:hover {
  color: var(--text);
  border-color: var(--accent);
}

.cause-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.cause-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cause-source {
  margin: 16px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.cause-source:empty {
  display: none;
}

.national-context {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--border);
}

.national-context h4 {
  margin: 0 0 12px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.national-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--border);
  color: var(--text);
}

.national-badge.level-high {
  background: rgba(234, 88, 12, 0.15);
  color: #c2410c;
}

.national-badge.level-critical {
  background: rgba(220, 38, 38, 0.15);
  color: #b91c1c;
}

body[data-theme="dark"] .national-badge.level-high {
  color: #fb923c;
}

body[data-theme="dark"] .national-badge.level-critical {
  color: #f87171;
}

/* ── NPL header pill (npl-widget.js) ─────────────────────────
   Compact National Preparedness Level readout in the topbar.
   Colour scales green→red with the CIFFC level (1 = calm, 5 =
   full national commitment). Tooltip carries the meaning + date. */
.npl-widget {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-8);
  border: 1px solid var(--border);
  background: var(--panel);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
  flex: none;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.npl-widget:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.npl-widget .npl-pip {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: #22c55e;
  flex: none;
}
.npl-widget .npl-text strong { font-variant-numeric: tabular-nums; }
/* Level colouring — pip glows with severity, text accents when high. */
.npl-widget.level-1 { --npl: #22c55e; }
.npl-widget.level-2 { --npl: #65a30d; }
.npl-widget.level-3 { --npl: #eab308; }
.npl-widget.level-4 { --npl: #ea580c; }
.npl-widget.level-5 { --npl: #dc2626; }
.npl-widget.level-4,
.npl-widget.level-5 { box-shadow: 0 0 0 1px color-mix(in srgb, var(--npl) 35%, transparent); }
.npl-widget.level-4 .npl-text,
.npl-widget.level-5 .npl-text { color: var(--npl); }
/* --npl is set by the level-N tone class; the amber fallback keeps the pip
   visible when no level is known (unknown beats invisible). */
.npl-widget .npl-pip { background: var(--npl, #eab308); box-shadow: 0 0 8px color-mix(in srgb, var(--npl, #eab308) 70%, transparent); }
body[data-theme="dark"] .npl-widget.level-4 .npl-text,
body[data-theme="dark"] .npl-widget.level-5 .npl-text { color: #fdba74; }
/* No level published and none derivable: grey, never amber. An unknown value
   must not borrow a severity colour (it used to sit amber, which reads as
   "moderate", beside a number nobody had reported). */
.npl-widget.level-unknown { --npl: var(--muted, #94a3b8); }
.npl-widget.level-unknown .npl-pip { box-shadow: none; }
/* Marks a level this app derived from the live BCWS incident layer rather than
   a figure BCWS or CIFFC published. Kept in the visible text on purpose: a
   derivation must not be quotable as an official provincial level. */
.npl-widget .npl-basis {
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  text-transform: none;
}

.npl-history {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.npl-history-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.npl-history-head a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}
.npl-history-head a:hover { text-decoration: underline; }
#nplSparkline {
  display: block;
  width: 100%;
  height: 44px;
}
.npl-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.npl-line-prior {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: 0.55;
}
.npl-line-current {
  fill: none;
  stroke: #d97706;
  stroke-width: 2.25;
  stroke-linejoin: round;
}
.npl-line-current[fill] { fill: #d97706; }
.npl-history-key {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  font-size: 0.6875rem;
  color: var(--muted);
}
.npl-history-key span { display: inline-flex; align-items: center; gap: 5px; }
.npl-key {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.npl-key-current { background: #d97706; }
.npl-key-prior { background: var(--muted); opacity: 0.6; }
.npl-key-scale { margin-left: auto; }

/* ── Preparedness cards: FireSmart + national parks ────────── */
.preparedness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.prepared-card { padding: 22px; }
.prepared-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.prepared-card-head h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.prepared-card-head p { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); }
.prepared-card-head .ghost-btn { flex: none; white-space: nowrap; }
.prep-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.prep-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.75rem;
  color: var(--muted);
}
.prep-stat strong { font-size: 1.35rem; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.prep-subhead {
  margin: 14px 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.prep-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prep-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.prep-link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  transform: translateY(-1px);
}
.prep-link i:first-child { color: var(--accent); width: 16px; text-align: center; }
.prep-link span { flex: 1; }
.prep-link i:last-child { color: var(--muted); font-size: 0.7rem; }

/* Park fire-ban rows */
.park-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  margin-bottom: 8px;
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease;
}
.park-row:hover { transform: translateY(-1px); }
.park-row.is-ban { border-color: color-mix(in srgb, #dc2626 45%, var(--border)); }
.park-row.is-clear { border-color: color-mix(in srgb, #22c55e 35%, var(--border)); }
.park-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}
.park-row.is-ban .park-name i { color: #dc2626; }
.park-row.is-clear .park-name i { color: #22c55e; }
.park-state {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.park-row.is-ban .park-state { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
.park-row.is-clear .park-state { background: rgba(34, 197, 94, 0.14); color: #15803d; }
body[data-theme="dark"] .park-row.is-ban .park-state { color: #f87171; }
body[data-theme="dark"] .park-row.is-clear .park-state { color: #4ade80; }

.national-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px;
}

.national-figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.national-value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

body[data-theme="dark"] .national-value {
  color: var(--accent);
}

.national-label {
  font-size: 0.6875rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@keyframes iconPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

.cause-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.cause-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cause-row:hover {
  margin-left: 4px;
}

.cause-name {
  flex: 1;
  min-width: 130px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cause-emoji {
  font-size: 1rem;
  flex-shrink: 0;
  animation: causeEmojiFloat 2s ease-in-out infinite;
}

@keyframes causeEmojiFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }

  50% {
    transform: translateY(-2px) rotate(3deg);
  }
}

.cause-bar-bg {
  flex: 2;
  min-width: 180px;
  height: 10px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}

.cause-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-dark) 0%, var(--accent) 55%, var(--accent-light) 100%);
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25);
  position: relative;
}

/* Status view colours each bar by containment state; the cause view has no
   inherent severity ordering and stays on the accent ramp. */
.cause-row.tone-critical .cause-bar-fill {
  background: linear-gradient(90deg, #b91c1c, #ef4444);
}

.cause-row.tone-warning .cause-bar-fill {
  background: linear-gradient(90deg, #c2410c, #f97316);
}

.cause-row.tone-ok .cause-bar-fill {
  background: linear-gradient(90deg, #15803d, #22c55e);
}

.cause-row.tone-muted .cause-bar-fill {
  background: linear-gradient(90deg, #57534e, #a8a29e);
}

.cause-row.tone-critical .cause-count {
  color: #dc2626;
}

.cause-row.tone-ok .cause-count {
  color: #15803d;
}

body[data-theme="dark"] .cause-row.tone-critical .cause-count {
  color: #f87171;
}

body[data-theme="dark"] .cause-row.tone-ok .cause-count {
  color: #4ade80;
}

.cause-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
  border-radius: var(--radius-pill);
}

.cause-count {
  min-width: 55px;
  text-align: right;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-dark);
}

.cause-row-up {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 3px 6px;
  border-radius: var(--radius-pill);
}

body[data-theme="dark"] .cause-row-up {
  color: #4ade80;
}

body[data-theme="dark"] .cause-count {
  color: var(--accent);
}

/* The widget stacks several always-on loops (floating icons, pulsing headings,
   a scrolling gradient). Together they are the noisiest thing on the page, so
   stop them outright when the visitor has asked for less motion. */
@media (prefers-reduced-motion: reduce) {

  .fire-stat-icon,
  .cause-emoji,
  .fire-cause-breakdown h3 span,
  .fire-stat::before,
  .fire-stat-cause-icon {
    animation: none;
  }

  .cause-bar-fill {
    transition: none;
  }
}

@media (max-width: 768px) {
  .home-page .fire-season-widget {
    padding: 24px 20px;
  }

  .fire-season-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .fire-season-header h2 {
    font-size: 1.375rem;
  }

  .fire-emoji {
    font-size: 1.2em;
  }

  .fire-season-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .fire-stat {
    padding: 18px 14px;
    gap: 12px;
    flex-direction: column;
    text-align: center;
  }

  .fire-stat-icon {
    font-size: 2.25rem;
  }

  .fire-stat-number {
    font-size: 1.75rem;
  }

  .fire-cause-breakdown {
    padding: 20px 16px;
  }

  .cause-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
  }

  .cause-bar-bg {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    height: 8px;
  }

  .cause-count {
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .fire-season-stats {
    grid-template-columns: 1fr;
  }

  .fire-stat {
    flex-direction: row;
    text-align: left;
  }

  .fire-stat-icon {
    font-size: 2rem;
  }
}

/* Quick Links adjustment for new positioning */
.home-page .quick-links {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 26px;
}

.home-page .features-grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero {
  padding: 28px;
}

.hero-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 4vw, 36px);
}

.hero p {
  color: var(--muted);
  margin: 0;
}

.hero-actions {
  margin-top: 22px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.launch-btn,
.ghost-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 24px;
  border-radius: var(--radius-10);
  font-weight: 600;
}

.launch-btn {
  background: var(--accent);
  /* --on-accent (near-black) holds 5.38:1 on the light --accent and 7.97:1
     on the dark one; white failed both (2.14–2.7:1). */
  color: var(--on-accent, #231a0f);
}

.launch-btn,
.ghost-btn,
.select-plan,
.theme-toggle {
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}

.launch-btn:hover,
.ghost-btn:hover,
.select-plan:hover,
.theme-toggle:hover {
  transform: translateY(-2px);
}

.ghost-btn {
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--panel);
}

.quick-links h3,
.info-card h2,
.info-card h3 {
  margin-top: 0;
}

.quick-links ul,
.info-card ul {
  margin: 0;
  padding-left: 18px;
}

.quick-links li,
.info-card li {
  margin: 8px 0;
}

.info-card {
  padding: 24px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.classification-index-card {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
}

.classification-index-card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.classification-index-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.classification-index-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--panel-2);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.classification-index-pill:hover,
a.classification-index-pill:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.16);
  transform: translateY(-1px);
  outline: none;
}

.classification-index-pill.is-current {
  border-color: var(--accent);
  /* Dark ink on the saturated gradient: white fails every light stop.
     #431407 keeps >=5.58:1 on the base orange gradient. */
  color: #431407;
  background: linear-gradient(135deg, #fb923c, #f97316);
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18);
  cursor: default;
}

/* Classification page theming */
.info-page[class*="classification-"] {
  --class-accent: #f97316;
  --class-accent-soft: rgba(249, 115, 22, 0.2);
}

body.info-page.classification-good-page {
  --class-accent: #22c55e;
  --class-accent-ink: #166534; /* WCAG 2.2 AA: 4.6:1 on light card, was 2.27 */
  --class-accent-soft: rgba(34, 197, 94, 0.2);
}

body.info-page.classification-moderate-page {
  --class-accent: #eab308;
  --class-accent-ink: #854d0e; /* WCAG 2.2 AA: 6.9:1 on light card, was 1.91 */
  --class-accent-soft: rgba(234, 179, 8, 0.22);
}

body.info-page.classification-caution-page {
  --class-accent: #f97316;
  --class-accent-ink: #9a3412; /* WCAG 2.2 AA: 7.3:1 on light card, was 2.8 */
  --class-accent-soft: rgba(249, 115, 22, 0.2);
}

body.info-page.classification-unhealthy-page {
  --class-accent: #ef4444;
  --class-accent-soft: rgba(239, 68, 68, 0.2);
}

body.info-page.classification-very-unhealthy-page {
  --class-accent: #a855f7;
  --class-accent-soft: rgba(168, 85, 247, 0.2);
}

body.info-page.classification-hazardous-page {
  --class-accent: #7e0023;
  --class-accent-soft: rgba(126, 0, 35, 0.24);
}

.info-page[class*="classification-"] .landing-wrap {
  background: radial-gradient(circle at 10% -20%, var(--class-accent-soft), transparent 52%),
    radial-gradient(circle at 110% 0%, var(--class-accent-soft), transparent 42%);
  border-radius: var(--radius-16);
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ====================================
   Scroll Animations (per-page)
   ==================================== */

[data-scroll-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
}

[data-scroll-animate].is-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Fade from left */
[data-scroll-fade-left] {
  transform: translateX(-40px);
}

[data-scroll-fade-left].is-in-view {
  transform: translateX(0);
}

/* Fade from right */
[data-scroll-fade-right] {
  transform: translateX(40px);
}

[data-scroll-fade-right].is-in-view {
  transform: translateX(0);
}

/* Scale in */
[data-scroll-scale-in] {
  transform: scale(.9);
}

[data-scroll-scale-in].is-in-view {
  transform: scale(1);
}

/* Staggered children (for grids) */
[data-scroll-stagger]>* {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
}

[data-scroll-stagger].is-in-view>*:nth-child(1) {
  transition-delay: .05s;
  opacity: 1;
  transform: none;
}

[data-scroll-stagger].is-in-view>*:nth-child(2) {
  transition-delay: .12s;
  opacity: 1;
  transform: none;
}

[data-scroll-stagger].is-in-view>*:nth-child(3) {
  transition-delay: .19s;
  opacity: 1;
  transform: none;
}

[data-scroll-stagger].is-in-view>*:nth-child(4) {
  transition-delay: .26s;
  opacity: 1;
  transform: none;
}

[data-scroll-stagger].is-in-view>*:nth-child(5) {
  transition-delay: .33s;
  opacity: 1;
  transform: none;
}

[data-scroll-stagger].is-in-view>*:nth-child(6) {
  transition-delay: .40s;
  opacity: 1;
  transform: none;
}

[data-scroll-stagger].is-in-view>*:nth-child(7) {
  transition-delay: .47s;
  opacity: 1;
  transform: none;
}

[data-scroll-stagger].is-in-view>*:nth-child(8) {
  transition-delay: .54s;
  opacity: 1;
  transform: none;
}

/* Dark mode friendly overrides */
body[data-theme="dark"] [data-scroll-animate] {
  box-shadow: none;
}

/* Hero specific animations */
.hero[data-scroll-hero-fade-up] {
  transform: translateY(30px);
}

.hero[data-scroll-hero-fade-up].is-in-view {
  transform: translateY(0);
}

body[data-theme="dark"] .card.is-in-view {
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.15);
}

.info-page[class*="classification-"] .landing-wrap {
  background: radial-gradient(circle at 10% -20%, var(--class-accent-soft), transparent 52%),
    radial-gradient(circle at 110% 0%, var(--class-accent-soft), transparent 42%);
  border-radius: var(--radius-16);
  padding-top: 16px;
  padding-bottom: 16px;
}

.info-page[class*="classification-"] .info-card {
  border: 1px solid var(--class-accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.info-page[class*="classification-"] .info-card h2 {
  color: var(--class-accent-ink, var(--class-accent));
}

/* Dark cards: authored accent inks pass on the dark surface — keep them. */
body[data-theme="dark"] .info-page[class*="classification-"] .info-card h2 {
  color: var(--class-accent);
}

.info-page[class*="classification-"] .classification-index-card {
  border: 1px solid var(--class-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Switcher links correspond to their target classification color */
a.classification-index-pill[href*="classification-good.html"] {
  border-color: #22c55e55;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
}

a.classification-index-pill[href*="classification-moderate.html"] {
  border-color: #eab30866;
  color: #ca8a04;
  background: rgba(234, 179, 8, 0.14);
}

a.classification-index-pill[href*="classification-caution.html"] {
  border-color: #f9731666;
  color: #ea580c;
  background: rgba(249, 115, 22, 0.14);
}

a.classification-index-pill[href*="classification-unhealthy.html"] {
  border-color: #ef444466;
  color: #dc2626;
  background: rgba(239, 68, 68, 0.14);
}

a.classification-index-pill[href*="classification-very-unhealthy.html"] {
  border-color: #a855f766;
  color: #9333ea;
  background: rgba(168, 85, 247, 0.14);
}

a.classification-index-pill[href*="classification-hazardous.html"] {
  border-color: #7e002366;
  color: #7e0023;
  background: rgba(126, 0, 35, 0.12);
}

/* Maroon pill is the one current-page gradient dark enough for white text
   (10.99:1 on the dark stop, 8.02:1 on the light stop). */
body.classification-hazardous-page .classification-index-pill.is-current {
  color: #fff;
}

/* The .is-current current-page chip is duplicated per page (the per-page
   style blocks load after this file, so they out-cascade a global rule).
   A body-class-scoped override (2 classes + 1 class) wins on specificity:
   dark ink on the amber --accent holds >=5.38:1 in both themes. */
body.evacuation-page .is-current,
body.fire-cause-page .is-current,
body.fire-status-page .is-current,
body.fire-value-page .is-current {
  color: #431407 !important;
}

body.classification-good-page .classification-index-pill.is-current {
  background: linear-gradient(135deg, #34d399, #16a34a);
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

body.classification-moderate-page .classification-index-pill.is-current {
  background: linear-gradient(135deg, #fde047, #eab308);
  border-color: #ca8a04;
  color: #1f2937;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.24);
}

body.classification-caution-page .classification-index-pill.is-current {
  background: linear-gradient(135deg, #fb923c, #f97316);
  border-color: #ea580c;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.22);
}

body.classification-unhealthy-page .classification-index-pill.is-current {
  background: linear-gradient(135deg, #f87171, #ef4444);
  border-color: #dc2626;
  color: #2c0505;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.22);
}

body.classification-very-unhealthy-page .classification-index-pill.is-current {
  background: linear-gradient(135deg, #c084fc, #a855f7);
  border-color: #9333ea;
  color: #1e0836;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.24);
}

body.classification-hazardous-page .classification-index-pill.is-current {
  background: linear-gradient(135deg, #9f1239, #7e0023);
  border-color: #5f001a;
  box-shadow: 0 0 0 2px rgba(126, 0, 35, 0.28);
}

.back-to-map-wrap {
  margin: 0 0 14px;
}

.back-to-map-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: var(--radius-10);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.back-to-map-link i {
  color: var(--accent);
  font-size: 12px;
}

.back-to-map-link:hover,
.back-to-map-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
  transform: translateY(-1px);
  outline: none;
}

/* Sub-page breadcrumb navigation (Learn sub-pages, fire-*, classification-*) */
.subpage-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.subpage-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-10);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.subpage-breadcrumb a i {
  color: var(--accent);
  font-size: 11px;
}

.subpage-breadcrumb a:hover,
.subpage-breadcrumb a:focus-visible {
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
  transform: translateY(-1px);
  outline: none;
}

.subpage-breadcrumb-sep {
  color: var(--muted);
  font-size: 13px;
  -webkit-user-select: none;
  user-select: none;
}

.info-card:hover {
  box-shadow: 0 0 30px var(--glow);
  transform: translateY(-2px);
}

/* Navigation pill bars for guide, category, and learn pages */
.fire-info-nav,
.reading-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.fire-info-nav a,
.fire-info-nav span,
.reading-nav a,
.reading-nav span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  background: var(--surface, #f8fafc);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  color: var(--text, #1e293b);
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.fire-info-nav a:hover,
.reading-nav a:hover {
  border-color: var(--accent, #d97706);
  color: var(--accent, #d97706);
  transform: translateY(-1px);
}

.fire-info-nav .is-current,
.reading-nav .is-current {
  background: linear-gradient(135deg, var(--accent, #d97706), #b45309);
  border-color: var(--accent, #d97706);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
}

/* ------------------ News ------------------ */

@keyframes newsFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.news-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  padding: 20px;
  margin-bottom: 12px;
  animation: newsFadeIn 0.4s ease-out forwards;
}

.news-card:hover {
  box-shadow: 0 0 20px var(--glow);
}

.news-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.news-card-title {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text);
}

.news-card-summary {
  margin: 0 0 12px 0;
  color: var(--muted);
  font-size: 0.95em;
  line-height: 1.5;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.news-source,
.news-date,
.news-location {
  display: flex;
  align-items: center;
  gap: 4px;
}

.news-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.news-link:hover {
  text-decoration: underline;
}

.news-empty {
  text-align: center;
  padding: 60px 40px;
  color: var(--muted);
}

/* ---- News Page v2 ---- */
.news-page {
  gap: 16px;
}

.news-stats-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: linear-gradient(135deg, #dc2626 0%, #ea580c 50%, #d97706 100%);
  border-radius: var(--radius-16);
  padding: 20px 32px;
  flex-wrap: wrap;
  box-shadow: 0 8px 32px rgba(220, 38, 38, 0.3);
}

.news-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 120px;
  padding: 8px 20px;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.news-stat-item:last-child {
  border-right: none;
}

.news-stat-item i {
  font-size: 20px;
  opacity: 0.85;
}

.news-stat-item span {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.news-stat-item small {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.news-hero-card {
  padding: 24px 28px !important;
}

.news-hero-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-hero-content h2 {
  margin: 0 0 4px;
  font-size: 1.4em;
}

.news-hero-content p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9em;
}

.news-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.news-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-filter-tab {
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease, max-height 0.18s ease;
  white-space: nowrap;
}

.news-filter-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.news-filter-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent, #231a0f);
  font-weight: 600;
}

.news-sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-sort-bar select {
  padding: 6px 12px;
  border-radius: var(--radius-8);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.news-grid-container {
  padding: 0;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

/* v2 card */
.news-card-v2 {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-14);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 1;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}

.news-card-v2[data-severity="critical"] {
  border-left: 4px solid #ef4444;
}

.news-card-v2[data-severity="warning"] {
  border-left: 4px solid #f59e0b;
}

.news-card-v2[data-severity="info"] {
  border-left: 4px solid var(--border);
}

.news-card-v2:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.news-load-more {
  text-align: center;
  padding: 24px 0;
}

.news-load-more .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
}

.nc-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nc-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nc-sev-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.nc-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.nc-title {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.nc-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.875em;
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nc-fire-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nc-fire-badge {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.fire-of-note {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Pinned "Fire of Note" cards — distinct, elevated box with a top ribbon. */
.news-card-v2.fire-of-note-card {
  position: relative;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.07), var(--panel));
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.18);
}

.news-card-v2.fire-of-note-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #ef4444, #f59e0b);
}

.nc-fon-pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #dc2626, #f59e0b);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

.nc-footer-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.nc-dash-link {
  color: #ef4444;
}

.nc-dash-link:hover {
  text-decoration: underline;
}

.news-card-v2[data-href] {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.news-card-v2[data-href]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.nc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}

.nc-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nc-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}

.nc-read-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--link, #a04a08);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: gap 0.15s;
}

.nc-read-more:hover {
  gap: 7px;
  text-decoration: underline;
}

/* Skeleton loader */
.nc-skeleton {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-14);
  height: 180px;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}

@keyframes skeletonPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

/* ---- Homepage news preview ---- */
.news-preview-section {
  padding: 28px 32px !important;
}

.news-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.news-preview-header h2 {
  margin: 0 0 4px;
  font-size: 1.25em;
}

.news-preview-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.875em;
}

.home-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.home-news-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
}

.home-news-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.home-news-card[data-severity="critical"] {
  border-left: 3px solid #ef4444;
}

.home-news-card[data-severity="warning"] {
  border-left: 3px solid #f59e0b;
}

.hnc-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hnc-title {
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.hnc-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: auto;
}

.hnc-skeleton {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  height: 100px;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}

@media (max-width: 768px) {
  .news-stats-banner {
    gap: 0;
    padding: 16px;
  }

  .news-stat-item {
    padding: 8px 12px;
    min-width: 80px;
  }

  .news-stat-item span {
    font-size: 22px;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-preview-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-news-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .home-news-grid {
    grid-template-columns: 1fr;
  }
}


/* ------------------ Controls ------------------ */

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  z-index: 800;
}

.controls-left label {
  font-size: 13px;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

select {
  padding: 8px 10px;
  border-radius: var(--radius-10);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.12);
}

select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

/* Search box */
#searchBox,
#sensorSearchBox {
  padding: 8px 10px;
  border-radius: var(--radius-10);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  min-width: 180px;
  font-family: inherit;
  font-size: 14px;
}

#sensorSearchBox {
  margin-left: auto;
}

/* ------------------ Toggles ------------------ */

.controls-toggles {
  display: flex;
  gap: 20px;
}

.controls-toggles label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.controls-toggles input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Layer panel rework: active-count badges + search filter */
.layer-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: background 0.2s;
}

.layer-cat-count {
  min-width: 20px;
  text-align: center;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.8;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 60%, var(--muted));
  border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent);
}

/* Floating map panels — All Layers and Map Settings share one placement rule.
   Fixed, not absolute: as absolute they were placed against the document
   (top: 140px) and grew downward from there, so the 759px-tall layer panel ran
   ~50px past the bottom of the viewport and slid under the sticky header as the
   page scrolled. Fixed pins them under the header and bounds them to the
   viewport, so a panel taller than the screen scrolls inside itself. */
.map-float-panel {
  position: fixed;
  top: 92px;
  right: 20px;
  z-index: 1200;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 112px);
  flex-direction: column;
}

/* The All Layers panel keeps its title, filter and footer in view while the
   list of 59 layers scrolls between them. */
#layersPanel {
  overflow: hidden;
}

#layersPanel .layers-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-bottom: 10px;
  padding-right: 2px;
}

#mapSettingsPopup {
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 640px) {
  .map-float-panel {
    top: 88px;
    right: 10px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 106px);
  }
}

/* ── Detection Map: the situation brief ─────────────────────── */
/* The map's one control in the top bar. It reads the active-fire, sensor and
   weather feeds for the view in front of the reader and says which of them
   answered. Deliberately no backdrop-filter: every blur is a paint cost on a
   low-end GPU and perf-budget.test.js counts them (see the guide below). */
.map-brief-panel {
  position: fixed;
  top: 96px;
  right: 16px;
  z-index: 1200;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 10px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--paper, #140e08) 97%, transparent);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.15));
  border-radius: var(--radius-16, 16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: var(--ink, var(--text));
  font-family: var(--type-body, system-ui, -apple-system, sans-serif);
  text-align: left;
}

.map-brief-panel[hidden] {
  display: none !important;
}

.mb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
}

.mb-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mb-time {
  flex: 1 1 auto;
  font-size: 11px;
  color: var(--ink-soft, var(--muted, #64748b));
  text-align: right;
}

.mb-icon-btn {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.16));
  background: transparent;
  color: var(--ink, var(--text));
  font-size: 12px;
  cursor: pointer;
}

.mb-icon-btn:hover {
  border-color: var(--accent, #d97706);
  color: var(--accent, #d97706);
}

.mb-section + .mb-section,
.mb-note + .mb-section,
.mb-section + .mb-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
}

.mb-h3 {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 750;
}

.mb-line {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
}

.mb-note {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft, var(--muted, #64748b));
}

.mb-note--warn {
  color: #f59e0b;
  font-size: 12.5px;
}

.mb-note--ok {
  margin: 0;
  font-size: 12.5px;
}

.mb-list {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mb-fire {
  display: block;
  padding: 6px 8px;
  border-radius: 9px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, var(--card, #1c140e) 60%, transparent);
  color: var(--ink, var(--text));
  text-decoration: none;
}

.mb-fire:hover {
  border-color: var(--accent, #d97706);
}

.mb-fire-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
}

.mb-fire-meta {
  display: block;
  font-size: 11.5px;
  color: var(--ink-soft, var(--muted, #64748b));
}

.mb-flag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #ef4444;
  border: 1px solid color-mix(in srgb, #ef4444 34%, transparent);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.mb-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--link, var(--accent, #d97706));
  text-decoration: none;
}

.mb-chip {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--band, #64748b) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--band, #64748b) 42%, transparent);
  color: var(--band, #64748b);
  font-size: 11px;
  font-weight: 800;
}

.mb-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
}

.mb-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.14));
  font-size: 10.5px;
  font-weight: 700;
}

.mb-source.is-live {
  color: #22c55e;
  border-color: color-mix(in srgb, #22c55e 36%, transparent);
  background: color-mix(in srgb, #22c55e 12%, transparent);
}

.mb-source.is-down {
  color: #f59e0b;
  border-color: color-mix(in srgb, #f59e0b 36%, transparent);
  background: color-mix(in srgb, #f59e0b 12%, transparent);
}

@media (max-width: 640px) {
  .map-brief-panel {
    top: 88px;
    right: 10px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 106px);
  }
}

/* Searchable layer filter & layers panel styling */
#layersPanel {
  background: color-mix(in srgb, var(--paper, #140e08) 90%, transparent) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
  backdrop-filter: blur(10px) saturate(1.4) !important;

  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.15)) !important;
  border-radius: var(--radius-16) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

#layersPanel .layer-category {
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.1)) !important;
  border-radius: var(--radius-10) !important;
  background: color-mix(in srgb, var(--card, #1c140e) 60%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease;
}

#layersPanel .layer-category:hover {
  border-color: color-mix(in srgb, var(--accent, #d97706) 40%, transparent) !important;
}

#layersPanel .layer-category summary {
  background: color-mix(in srgb, var(--paper, #140e08) 80%, transparent) !important;
  -webkit-user-select: none;
  user-select: none;
}

.layers-panel-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-10);
  background: color-mix(in srgb, var(--surface, #1e1710) 90%, transparent);
}
.layers-panel-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 12.5px;
  font-family: var(--type-body);
}
.layers-panel-search input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}
.layers-panel-search .layers-search-clear {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.layer-category.is-filtered-out {
  display: none;
}
.layers-panel-search.is-empty .layers-search-clear {
  display: none;
}

.controls-buttons .btn-secondary.is-active {
  background: rgba(20, 184, 166, 0.14);
  border-color: rgba(20, 184, 166, 0.45);
  color: var(--text);
}

.controls-left select.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ===============================================================
   Detection Map Layer Dropdowns Toolbar

   Wraps rather than scrolls, deliberately. As a horizontally scrolling
   strip this bar had `overflow-x: auto` — and per CSS, an element with one
   non-visible overflow axis gets the other computed to `auto` too, so
   `overflow-y: visible` never applied. The bar became a 43px-tall scroll
   container holding the whole open menu (337px of content), which clipped
   every dropdown into the strip instead of letting it overlay the map.
   Measured 2026-10-12: probing where a menu should be hit the map canvas.
   Wrapping keeps all eight categories visible and needs no scroll box.
   =============================================================== */
.map-layers-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  overflow: visible;
  padding: 6px 0 2px 0;
  width: 100%;
}

.layers-bar-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

.layer-dd-wrapper {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

/* The open wrapper rises above its siblings, so a menu that reaches past a
   later trigger is still above it. */
.layer-dd-wrapper.open {
  z-index: 60;
}

.layer-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.layer-dd-trigger:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.layer-dd-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.layer-dd-trigger.has-active {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  font-weight: 600;
  color: var(--text);
}

.layer-dd-wrapper.open .layer-dd-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

.layer-dd-caret {
  font-size: 9px;
  opacity: 0.6;
  transition: transform 0.2s ease;
  margin-left: 2px;
}

.layer-dd-wrapper.open .layer-dd-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.layer-dd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  line-height: 1;
}

.layer-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1200;
  min-width: 300px;
  max-width: min(380px, calc(100vw - 24px));
  /* The cap also gets a variable: the controller measures the room below the
     trigger and, when neither side of it can hold the whole menu, bounds the box
     here so the list scrolls instead of running past the fold. */
  max-height: var(--dd-max-height, min(70vh, 470px));
  background: color-mix(in srgb, var(--paper, #140e08) 96%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);

  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Hidden by visibility rather than display, so the panel keeps its measured
     size (the right-edge flip can be decided before it appears) and stays out
     of the accessibility tree and out of hit-testing while closed. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
}

.layer-dd-menu.layer-dd-menu-up {
  top: auto;
  bottom: calc(100% + 8px);
}

.layer-dd-menu.layer-dd-menu-right {
  left: auto;
  /* 0 normally; a negative --dd-inset slides the menu right, which is the escape
     hatch for the one case the flip cannot solve — a phone narrower than the menu
     itself, where right-aligning to the trigger still hangs the box off the left
     edge. map-panels.js measures that shortfall and passes it here negated. */
  right: var(--dd-inset, 0);
}

.layer-dd-wrapper.open .layer-dd-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}

.layer-dd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 8px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  margin-bottom: 4px;
}

.layer-dd-header-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.layer-dd-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.layer-dd-status-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

.layer-dd-clear-btn {
  font-size: 10px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 4px;
  padding: 1px 6px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.layer-dd-clear-btn:hover {
  color: var(--text);
  border-color: var(--text);
}

.layer-dd-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 2px;
}

.layer-dd-items::-webkit-scrollbar {
  width: 4px;
}

.layer-dd-items::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 4px;
}

.layer-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
  -webkit-user-select: none;
  user-select: none;
  font-size: 12px;
  color: var(--text);
  margin: 0;
}

.layer-dd-item:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.layer-dd-item:focus-within {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -2px;
}

/* Feature counts, mirrored from the layers panel (see map-panels.js): the menu
   answers "does this layer actually have anything in it?" before you turn it
   on, the same way the panel does. */
.layer-dd-count {
  flex-shrink: 0;
  padding-left: 6px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.layer-dd-item.is-checked {
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.layer-dd-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
  margin: 0;
}

.layer-dd-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.layer-dd-tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: color-mix(in srgb, var(--surface) 80%, var(--border));
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .map-layers-bar {
    gap: 5px;
    padding: 5px 0 2px 0;
  }

  /* Never wider than the phone it is on. */
  .layer-dd-menu {
    min-width: min(300px, calc(100vw - 20px));
  }
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.switch {
  position: relative;
  width: 46px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: 0.2s;
}

.slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: var(--radius-circle);
  transition: 0.2s;
}

.switch input:checked+.slider {
  background: var(--accent);
}

.switch input:checked+.slider:before {
  transform: translateX(22px);
}

/* ------------------ Frosted Glass Side Navigation (Hamburger Menu) ------------------ */

.side-nav {
  position: fixed;
  overscroll-behavior: contain;
  left: -280px;
  top: var(--alert-stack, 0px);
  width: 280px;
  max-width: 85vw;
  height: calc(100vh - var(--alert-stack, 0px));
  height: calc(100dvh - var(--alert-stack, 0px));
  background: color-mix(in srgb, var(--paper, #140e08) 88%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);

  border-right: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  z-index: 10003;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), left 0.32s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s ease, height 0.2s ease;
  padding: 0;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.side-nav.open {
  left: 0;
}

.side-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
  background: color-mix(in srgb, var(--paper, #140e08) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  position: sticky;
  top: 0;
  z-index: 2;
}

.side-nav-header h3 {
  margin: 0;
  font-family: var(--type-display);
  color: var(--accent, #d97706);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.side-nav-close {
  width: 32px;
  height: 32px;
  background: color-mix(in srgb, var(--card, #fff) 20%, transparent);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
  font-size: 16px;
  color: var(--ink, var(--text));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  border-radius: var(--radius-pill);
}

.side-nav-close:hover {
  background: color-mix(in srgb, var(--accent, #d97706) 20%, transparent);
  color: var(--accent, #d97706);
  border-color: var(--accent, #d97706);
  transform: rotate(90deg);
}

.side-nav-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.side-nav-content a {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink, var(--text));
  text-decoration: none;
  border-radius: var(--radius-12);
  border: 1px solid transparent;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 14px;
  font-weight: 550;
}

.side-nav-content a:hover {
  background: color-mix(in srgb, var(--accent, #d97706) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent, #d97706) 25%, transparent);
  color: var(--accent, #d97706);
  transform: translateX(4px);
}

.side-nav-content a.active {
  background: color-mix(in srgb, var(--accent, #d97706) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent, #d97706) 40%, transparent);
  color: var(--link, #a04a08);
  font-weight: 650;
}

.side-nav-content a i {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #d97706);
  font-size: 14px;
  background: color-mix(in srgb, var(--accent, #d97706) 12%, transparent);
  border-radius: var(--radius-6);
}

.side-nav-divider {
  height: 1px;
  background: var(--hairline, rgba(255, 255, 255, 0.1));
  margin: 8px 6px;
}

.side-nav-toggle {
  position: fixed;
  left: 16px;
  top: calc(86px + var(--alert-stack, 0px));
  z-index: 1001;
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: color-mix(in srgb, var(--paper, #140e08) 86%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);

  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.15));
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s ease, background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s ease, border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s ease, box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s ease, opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s ease, max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s ease;
  color: var(--ink, var(--text));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.side-nav-toggle:hover {
  background: color-mix(in srgb, var(--accent, #d97706) 16%, transparent);
  border-color: var(--accent, #d97706);
  color: var(--accent, #d97706);
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.25);
}

.side-nav-toggle i {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

/* ------------------ Theme Toggle Button (Industry Standard) ------------------ */

.guide-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent, #d97706) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #d97706) 35%, transparent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--link, #a04a08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.guide-toggle-btn:hover {
  background: var(--accent, #d97706);
  color: #000;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.35);
}

.guide-toggle-btn i {
  font-size: 14px;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text);
}

.theme-toggle:hover {
  background: rgba(37, 99, 235, 0.1);
  transform: scale(1.1) rotate(20deg);
  color: var(--accent);
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* ------------------ Buttons (with enhanced animations) ------------------ */

button {
  padding: 9px 14px;
  border-radius: var(--radius-10);
  border: none;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-weight: 500;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

button:hover::before {
  width: 300px;
  height: 300px;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent, #231a0f);
  border: none;
}

.btn-primary:hover {
  filter: brightness(1.1);
  color: var(--on-accent, #231a0f);
}

/* ------------------ Grid ------------------ */

.content-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}

.map-card {
  padding: 0;
  overflow: hidden;
  align-self: start;
}

#map {
  height: 600px;
  width: 100%;
  position: relative;
  background: linear-gradient(135deg, #f8f4f0 0%, #faf8f6 50%, #f5f0ea 100%);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.12);
}

#classificationMap {
  height: 600px;
  width: 100%;
  position: relative;
  background: linear-gradient(135deg, #f8f4f0 0%, #faf8f6 50%, #f5f0ea 100%);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

body[data-theme="dark"] .leaflet-container {
  background: #10161d;
}

#legendStrip {
  min-height: 44px;
  padding: 8px 16px 28px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  transition: background 0.3s;
}

/* Dark-mode map synchronization — one owner for every Leaflet map on the
   site. Basemap tile layers tag themselves with `fw-basemap` via Leaflet's
   `className` option; imagery basemaps additionally carry `fw-imagery`.
   Map-style basemaps invert+desaturate into a dark canvas; imagery only
dims (inverting photos looks wrong). Overlay/WMS layers are never tagged,
   so radar, smoke, perimeters etc. keep their natural colours. */
body[data-theme="dark"] .leaflet-tile-pane .fw-basemap:not(.fw-imagery) {
  filter: invert(0.93) hue-rotate(180deg) saturate(0.8);
  opacity: 0.87;
}

body[data-theme="dark"] .leaflet-tile-pane .fw-imagery {
  filter: brightness(0.85);
}

/* The layer-switcher panel used to stay white in dark mode. */
/* The heatmap is a background visualization, but its canvas intercepts
   every pointer event, hiding the sensor markers drawn beneath it. Make
   the heat canvas itself click-transparent — Leaflet keeps rendering it
   and interactions fall through to the markers above it. */
.leaflet-heatmap-layer {
  pointer-events: none;
}

body[data-theme="dark"] .leaflet-control-layers {
  background: var(--card, #16202a) !important;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.1)) !important;
  color: var(--ink, #eef3f8) !important;
}

body[data-theme="dark"] .leaflet-control-layers-expanded {
  color: var(--ink, #eef3f8) !important;
}

/* Leaflet Controls Theming */
.leaflet-control-zoom {
  border: none !important;
  border-radius: var(--radius-8) !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.2) !important;
  background: linear-gradient(135deg, var(--panel) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
}

body[data-theme="dark"] .leaflet-control-zoom {
  background: linear-gradient(135deg, var(--panel) 0%, rgba(45, 24, 16, 0.9) 100%) !important;
}

.leaflet-control-zoom a {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
  font-weight: 600 !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  transition: color 0.2s ease !important, background-color 0.2s ease !important, border-color 0.2s ease !important, box-shadow 0.2s ease !important, transform 0.2s ease !important, opacity 0.2s ease !important, max-height 0.2s ease !important;
}

.leaflet-control-zoom a:hover {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.9) 0%, rgba(217, 119, 6, 0.9) 100%) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3) !important;
}

.leaflet-control-zoom a.leaflet-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Attribution Styling */
.leaflet-control-attribution {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 248, 246, 0.85) 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-6) !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.08) !important;
}

body[data-theme="dark"] .leaflet-control-attribution {
  background: linear-gradient(135deg, rgba(45, 24, 16, 0.95) 0%, rgba(26, 15, 10, 0.95) 100%) !important;
  border-color: rgba(74, 47, 31, 0.6) !important;
}

.leaflet-control-attribution a {
  color: var(--accent) !important;
  text-decoration: none !important;
}

.leaflet-control-attribution a:hover {
  text-decoration: underline !important;
}

/* Popup Styling */
.leaflet-popup-content-wrapper {
  background: linear-gradient(135deg, var(--panel) 0%, rgba(255, 255, 255, 0.98) 100%) !important;
  border: 2px solid var(--accent-light) !important;
  border-radius: var(--radius-10) !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.25) !important;
}

body[data-theme="dark"] .leaflet-popup-content-wrapper {
  background: linear-gradient(135deg, var(--panel) 0%, rgba(45, 24, 16, 0.95) 100%) !important;
}

.leaflet-popup-content {
  color: var(--text) !important;
  font-size: 14px !important;
}

.leaflet-popup-tip {
  background: var(--panel) !important;
  border-color: var(--accent-light) !important;
}

#overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 650;
}

/* Map Legend */
.map-legend {
  background: linear-gradient(135deg, var(--panel) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  padding: 12px;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.15);
  font-size: 13px;
  min-width: 150px;
}

body[data-theme="dark"] .map-legend {
  background: linear-gradient(135deg, var(--panel) 0%, rgba(45, 24, 16, 0.95) 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.legend-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.legend-heading {
  font-weight: 700;
  color: var(--text);
}

.legend-minimize-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.legend-minimize-btn:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .legend-minimize-btn {
    display: block;
  }

  .map-legend.is-minimized .legend-items-container {
    display: none;
  }

  .map-legend.is-minimized .legend-header-row {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  border-radius: var(--radius-8);
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.legend-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-height: 24px;
  padding: 2px 4px;
  margin: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.legend-item:hover {
  opacity: 0.8;
  transform: translateX(2px);
}

.map-legend.is-filtering .legend-item {
  opacity: 0.42;
}

.map-legend.is-filtering .legend-item.is-active {
  opacity: 1;
  background: rgba(217, 119, 6, 0.14);
  padding-left: 6px;
}

.legend-color {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.legend-label {
  color: var(--text);
  white-space: nowrap;
}

.legend-learn-more {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.92;
}

.legend-learn-more:hover {
  text-decoration: underline;
}

/* Sidebar */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  height: auto;
  overflow-y: auto;
}

#stations {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#stationSummary {
  font-size: 14px;
}

.station-summary {
  display: grid;
  gap: 6px;
}

.station-summary-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}

.summary-row {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  gap: 12px;
}

.summary-value {
  min-width: 110px;
  text-align: right;
  font-weight: 600;
}

.summary-current {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}

.summary-chart-wrap {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  height: 210px;
  display: block;
}

.summary-chart-wrap canvas {
  width: 100% !important;
  max-height: 200px;
  height: 200px !important;
  display: block;
}

/* Station rows */
.station-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-10);

  .summary-row.summary-address {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .summary-row.summary-address .summary-address-value {
    text-align: left;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    word-break: break-word;
  }

  cursor: pointer;
  transition: background 0.15s ease,
  transform 0.15s ease;
  position: relative;
}

.sensor-detail-value.address-value {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  word-break: break-word;
}

.station-row:hover {
  background: rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

body.add-mode #addPoint {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.25), 0 0 18px rgba(217, 119, 6, 0.45);
  transform: translateY(-1px);
}

body.add-mode #addPoint::before {
  background: rgba(217, 119, 6, 0.25);
}

body.add-mode .map-card {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}

body.add-mode #map {
  cursor: crosshair;
}

.station-row .dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
}

/* AQI badges */
.badge {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: white;
}

/* ------------------ Legend ------------------ */

.legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

#legend:empty {
  display: none;
}

/* ------------------ Expandable Sensor List ------------------ */

.sensor-list-container {
  margin-top: 16px;
}

.sensor-list-container h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: var(--accent);
}

.expandable-sensor-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-10);
  margin-bottom: 8px;
  overflow: hidden;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.expandable-sensor-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sensor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  cursor: pointer;
  background: var(--bg);
  transition: background 0.2s ease;
}

.sensor-header:hover {
  background: rgba(217, 119, 6, 0.05);
}

.sensor-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.sensor-status-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}

.sensor-name-group {
  flex: 1;
}

.sensor-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
}

.sensor-id {
  font-size: 12px;
  color: var(--muted);
}

.sensor-quick-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}

.sensor-quick-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
}

.sensor-quick-stat-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sensor-quick-stat-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.sensor-expand-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
  transition: transform 0.3s ease;
}

.expandable-sensor-item.expanded .sensor-expand-icon {
  transform: rotate(180deg);
}

.sensor-details {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.sensor-details-content {
  padding: 18px 20px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.sensor-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
  margin-bottom: 16px;
}

.sensor-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sensor-detail-item.status-merged {
  grid-column: 1 / -1;
  gap: 8px;
}

.sensor-status-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.sensor-detail-item.metric-inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-10);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
}

.sensor-detail-item.metric-inline .sensor-detail-value {
  white-space: nowrap;
  text-align: right;
}

.sensor-detail-item.sensor-metrics-cluster {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sensor-metric-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-10);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.sensor-metric-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sensor-metric-chip:active {
  transform: translateY(0);
}

/* ===========================
   Wildfire Detection System
   =========================== */

/* Wildfire Markers */
.wildfire-marker {
  z-index: 1000 !important;
}

.wildfire-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 26px;
  animation: wildfire-bounce 2s ease-in-out infinite;
}

/* Severity-based colors */
.wildfire-icon.watch {
  color: #eab308;
  filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.5));
}

.wildfire-icon.warning {
  color: #f97316;
  filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.6));
}

.wildfire-icon.critical {
  color: #ef4444;
  filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.8));
  animation: wildfire-bounce 1.2s ease-in-out infinite, wildfire-urgent 0.4s ease-in-out infinite alternate;
}

/* Status overrides */
.wildfire-icon.possible {
  opacity: 0.9;
}

.wildfire-icon.confirmed {
  opacity: 1;
  filter: drop-shadow(0 0 16px currentColor);
}

/* Confidence badge on marker */
.wildfire-confidence {
  position: absolute;
  bottom: -6px;
  right: -8px;
  background: var(--panel);
  color: var(--text);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: var(--radius-4);
  border: 1px solid var(--border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.wildfire-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, transparent 70%);
  animation: wildfire-pulse 2s ease-out infinite;
}

.wildfire-icon.watch .wildfire-pulse {
  background: radial-gradient(circle, rgba(234, 179, 8, 0.4) 0%, transparent 70%);
}

.custom-wildfire-icon {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
}

/* Fire of Note — vivid red pulse */
.custom-wildfire-icon.pulse-fon {
  animation: pulse-fon 1.4s ease-in-out infinite;
}

@keyframes pulse-fon {

  0%,
  100% {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(255, 0, 60, 0.9)) drop-shadow(0 0 22px rgba(255, 0, 60, 0.5));
  }

  50% {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(255, 0, 60, 1.0)) drop-shadow(0 0 36px rgba(255, 0, 60, 0.7));
  }
}

/* Out of Control — orange-red pulse */
.custom-wildfire-icon.pulse-red {
  animation: pulse-red 3s ease-in-out infinite;
}

@keyframes pulse-red {

  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
  }

  50% {
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.9)) drop-shadow(0 0 12px rgba(239, 68, 68, 0.5));
  }
}

/* Under Control — green pulse */
.custom-wildfire-icon.pulse-green {
  animation: pulse-green 4s ease-in-out infinite;
}

@keyframes pulse-green {

  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
  }

  50% {
    filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.8)) drop-shadow(0 0 10px rgba(34, 197, 94, 0.4));
  }
}

/* Being Held — yellow pulse */
.custom-wildfire-icon.pulse-yellow {
  animation: pulse-yellow 2.5s ease-in-out infinite;
}

@keyframes pulse-yellow {

  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
  }

  50% {
    filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.9)) drop-shadow(0 0 12px rgba(234, 179, 8, 0.5));
  }
}

/* Wildfire icon classes already below */

.satellite-observation-marker {
  background: transparent;
  border: 0;
}

.recluster-btn-container {
  position: relative;
  z-index: 1000;
}

.recluster-btn-container button {
  font-family: system-ui, -apple-system, sans-serif;
}

#reClusterAllBtn {
  display: none;
  padding: 10px 18px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: var(--radius-8);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  margin-bottom: 10px;
}

#reClusterAllBtn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

#reClusterAllBtn:active {
  transform: translateY(0);
}

.recluster-hotspot-btn-container {
  position: relative;
  z-index: 1000;
}

.recluster-hotspot-btn-container button {
  font-family: system-ui, -apple-system, sans-serif;
}

#reClusterAllHotspotsBtn {
  display: none;
  padding: 10px 18px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: var(--radius-8);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  margin-bottom: 10px;
}

#reClusterAllHotspotsBtn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

#reClusterAllHotspotsBtn:active {
  transform: translateY(0);
}

.wildfire-icon.critical .wildfire-pulse {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.5) 0%, transparent 70%);
  animation: wildfire-pulse 1.2s ease-out infinite;
}

@keyframes wildfire-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes wildfire-urgent {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.2);
  }
}

@keyframes wildfire-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.8);
    opacity: 0;
  }
}

/* Wildfire Popup */
.wildfire-popup-container .leaflet-popup-content-wrapper {
  background: var(--panel);
  border-radius: var(--radius-12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 0;
}

.wildfire-popup {
  min-width: 280px;
}

.wildfire-popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
}

.wildfire-popup-header i {
  font-size: 20px;
}

.wildfire-popup-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wildfire-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.wildfire-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-6);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}

.wildfire-badge i {
  font-size: 11px;
}

.wildfire-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.wildfire-stat span {
  color: var(--muted);
}

.wildfire-stat strong {
  color: var(--text);
  font-weight: 600;
}

.wildfire-popup-actions {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--border);
}

.wildfire-action-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-8);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.wildfire-action-btn.confirm {
  background: #22c55e;
  color: white;
}

.wildfire-action-btn.confirm:hover {
  background: #16a34a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.wildfire-action-btn.dismiss {
  background: var(--border);
  color: var(--text);
}

.wildfire-action-btn.dismiss:hover {
  background: var(--muted);
  color: white;
  transform: translateY(-1px);
}

/* Wildfire Notifications */
.wildfire-notifications {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
  pointer-events: none;
}

.wildfire-notification {
  background: var(--panel);
  border-radius: var(--radius-12);
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  border-left: 4px solid #f97316;
  animation: wildfire-notification-slide 0.4s ease;
}

/* Severity-based notification colors */
.wildfire-notification.watch {
  border-left-color: #eab308;
}

.wildfire-notification.warning {
  border-left-color: #f97316;
}

.wildfire-notification.critical {
  border-left-color: #ef4444;
  animation: wildfire-notification-slide 0.4s ease, wildfire-notification-urgent 2s ease-in-out infinite;
}

/* Action-based notification colors */
.wildfire-notification.confirmed {
  border-left-color: #22c55e;
}

.wildfire-notification.escalated {
  border-left-color: #ef4444;
  background: linear-gradient(to right, rgba(239, 68, 68, 0.05), var(--panel));
}

.wildfire-notification:hover {
  transform: translateX(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

@keyframes wildfire-notification-slide {
  from {
    transform: translateX(120%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes wildfire-notification-urgent {

  0%,
  100% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  50% {
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
  }
}

.wildfire-notification-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.wildfire-notification-content i {
  font-size: 20px;
  margin-top: 2px;
}

.wildfire-notification.watch i {
  color: #eab308;
}

.wildfire-notification.warning i,
.wildfire-notification.detected i {
  color: #f97316;
}

.wildfire-notification.critical i {
  color: #ef4444;
}

.wildfire-notification.confirmed i {
  color: #22c55e;
}

.wildfire-notification.escalated i {
  color: #ef4444;
}

.wildfire-notification-content strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.wildfire-notification-content p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.wildfire-notification-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-4);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.wildfire-notification-close:hover {
  background: var(--border);
  color: var(--text);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .wildfire-notifications {
    top: 60px;
    right: 10px;
    left: 10px;
    max-width: none;
  }

  .wildfire-notification {
    font-size: 13px;
  }
}

/* ===========================
   API Configuration Modal
   =========================== */

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.modal-content {
  background: var(--panel);
  border-radius: var(--radius-16);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modal-slide-up 0.3s ease;
}

@keyframes modal-slide-up {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-header i {
  color: var(--accent);
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-6);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.modal-close:hover {
  background: var(--border);
  color: var(--text);
}

.modal-body {
  padding: 24px;
}

.api-config-intro {
  background: var(--border);
  padding: 12px 16px;
  border-radius: var(--radius-8);
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}

.api-config-intro i {
  color: var(--accent);
  margin-top: 2px;
}

.api-config-section {
  background: var(--bg);
  padding: 20px;
  border-radius: var(--radius-12);
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.api-config-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.api-config-header input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.api-config-header label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
  font-size: 15px;
}

.api-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.api-badge.recommended {
  background: #22c55e;
  color: white;
}

.api-badge:not(.recommended) {
  background: var(--border);
  color: var(--muted);
}

.api-config-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 12px 28px;
}

.api-key-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  font-family: 'Courier New', monospace;
  margin-bottom: 8px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.api-key-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

.api-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  margin-left: 28px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.api-link:hover {
  color: var(--accent-light);
  gap: 8px;
}

.api-config-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.api-config-actions button {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-8);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent, #231a0f);
}

.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.btn-secondary {
  background: var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--muted);
  color: white;
}

.api-config-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius-8);
  border: 1px solid var(--border);
}

.api-config-note i {
  color: #22c55e;
  margin-top: 2px;
}

.api-config-note small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .modal-content {
    max-height: 95vh;
  }

  .modal-header,
  .modal-body {
    padding: 16px;
  }

  .api-config-actions {
    flex-direction: column;
  }
}

.sensor-metric-chip .sensor-detail-label {
  white-space: nowrap;
}

.sensor-metric-chip .sensor-detail-value {
  white-space: nowrap;
  text-align: right;
}

.sensor-detail-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sensor-detail-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.sensor-quick-stat-value.is-online,
.sensor-detail-value.is-online {
  color: #22c55e;
}

.sensor-quick-stat-value.is-offline,
.sensor-detail-value.is-offline {
  color: #ef4444;
}

.sensor-online-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sensor-online-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-circle);
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.sensor-online-dot.is-online {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.55);
}

.sensor-online-dot.is-offline {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.sensor-classification-description {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}

.classification-learn-more {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.classification-learn-more:hover {
  text-decoration: underline;
}

.summary-learn-more {
  justify-self: end;
}

.sensor-graph-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 8px;
}

.sensor-graph-controls label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sensor-graph-select {
  padding: 6px 10px;
  border-radius: var(--radius-8);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

/* ------------------ Custom Dropdown ------------------ */

.custom-select {
  position: relative;
  display: inline-block;
  min-width: 180px;
  font-weight: 600;
  z-index: 900;
}

.custom-select.native-hidden {
  display: inline-block;
}

.custom-select-trigger {
  width: 100%;
  padding: 10px 38px 10px 14px;
  border-radius: var(--radius-12);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.custom-select-trigger::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.2s ease;
}

.custom-select.open .custom-select-trigger::after {
  transform: translateY(-50%) rotate(-135deg);
}

.custom-select-trigger:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(217, 119, 6, 0.2);
  transform: translateY(-1px);
}

.custom-select-options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  padding: 6px;
  display: none;
  z-index: 2000;
  max-height: 260px;
  overflow-y: auto;
}

.custom-select-options::-webkit-scrollbar,
.sensor-readings-panel::-webkit-scrollbar {
  width: 8px;
}

.custom-select-options::-webkit-scrollbar-thumb,
.sensor-readings-panel::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
  border-radius: var(--radius-pill);
}

.custom-select.open .custom-select-options {
  display: block;
}

.custom-select-option {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-10);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.custom-select-option:hover,
.custom-select-option[aria-selected="true"] {
  background: rgba(217, 119, 6, 0.12);
  color: var(--accent);
}

.custom-select-native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

body[data-theme="dark"] .custom-select-trigger {
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2);
}

.custom-select.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.custom-select.is-disabled .custom-select-trigger {
  cursor: not-allowed;
}

.sensor-function-description {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  max-width: 560px;
}

.sensor-readings-dropdown {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-14);
  background: var(--panel);
  overflow: hidden;
}

.sensor-readings-dropdown>summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}

.sensor-readings-dropdown>summary::-webkit-details-marker {
  display: none;
}

.sensor-readings-summary-hint {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sensor-readings-panel {
  max-height: 250px;
  overflow-y: auto;
  padding: 0 12px 12px;
  display: grid;
  gap: 10px;
}

.sensor-readings-panel {
  touch-action: auto;
}

.sensor-reading-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
}

.sensor-reading-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sensor-reading-label {
  font-weight: 700;
}

.sensor-reading-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

/* Small UX styles for summary interactivity and locate control */
.summary-row.metric-hidden {
  opacity: 0.5;
}

.leaflet-control-userloc a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.station-summary-title {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.station-summary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.close-summary-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.close-summary-btn:hover {
  background: var(--muted);
  color: white;
}

/* Smoothing toggle */
.smooth-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.smooth-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.smooth-toggle.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dark);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.22);
}

.smooth-toggle-label {
  letter-spacing: 0.02em;
}

.smooth-toggle-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  font-weight: 800;
}

.smooth-toggle-state.is-off {
  background: rgba(107, 114, 128, 0.14);
  color: var(--muted);
}

.smooth-toggle.active .smooth-toggle-state {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Pin button */
.pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pin-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.pin-btn-icon {
  font-size: 13px;
}

.pin-btn.pinned {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dark);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.22);
}

.pin-btn.pinned .pin-btn-icon {
  filter: brightness(1.15);
}

.summary-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-key {
  font-weight: 700;
}

.summary-value {
  font-weight: 700;
}

.sensor-reading-value {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}

.sensor-reading-description {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.summary-section-title {
  margin-top: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.sensor-chart-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sensor-chart-container {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  min-height: 190px;
  position: relative;
}

.sensor-chart-container h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .sensor-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .sensor-detail-item.sensor-metrics-cluster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .sensor-details-content {
    padding: 14px;
  }

  .sensor-detail-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sensor-detail-item.sensor-metrics-cluster {
    grid-template-columns: 1fr;
  }
}

.sensor-chart-container canvas {
  max-height: 150px !important;
  height: 150px !important;
  width: 100% !important;
}

.sensor-chart-container.chart-large {
  min-height: 290px;
}

.sensor-chart-container.chart-large canvas {
  max-height: 240px !important;
  height: 240px !important;
}

.sensor-chart-container.chart-mini {
  min-height: 190px;
}

.sensor-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.sensor-action-btn {
  padding: 8px 16px;
  border-radius: var(--radius-8);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.sensor-action-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.sensor-action-btn i {
  margin-right: 6px;
}

/* ------------------ Extras ------------------ */

.extras {
  display: flex;
  gap: 12px;
}

.file-btn {
  padding: 9px 14px;
  border-radius: var(--radius-10);
  border: 1px dashed var(--border);
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}

/* ------------------ Remote Device Controls ------------------ */

.remote-config {
  display: grid;
  gap: 16px;
}

.remote-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.remote-config-header h3 {
  margin: 0;
}

.remote-config-status {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(148, 163, 184, 0.14);
  color: var(--muted);
}

.remote-config-status[data-state="success"] {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
}

.remote-config-status[data-state="error"] {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}

.remote-config-status[data-state="info"] {
  background: rgba(37, 99, 235, 0.14);
  color: #2563eb;
}

.remote-config-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.remote-field {
  display: grid;
  gap: 6px;
}

.remote-field label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.remote-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-10);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.remote-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
}

.remote-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--panel) 85%, transparent);
}

.remote-flags label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.remote-flags input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.remote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1100px) {
  .remote-config-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {

  .remote-config-header,
  .remote-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .remote-config-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------ Loading Skeleton ------------------ */

.loading {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 16px;
}

.skeleton {
  border-radius: var(--radius-14);
  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

.skeleton.map {
  height: 620px;
}

.skeleton.side {
  height: 620px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ------------------ Live Pulse Animation ------------------ */

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  70% {
    transform: scale(1.6);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.sensor-pulse {
  position: absolute;
  border-radius: var(--radius-circle);
  pointer-events: none;
}

/* Pulse animation is a pure nicety: thousands of sensor halos animating
   forever is one of the biggest main-thread costs on the map page, so it
   only runs for users who allow motion (and it never runs on canvas
   markers, which is how they are drawn now). */
@media (prefers-reduced-motion: no-preference) {
  .sensor-pulse {
    animation: pulse 2.2s infinite;
  }
}
/* Glass panels cost compositing: every blur forces the browser to re-filter
   the backdrop each frame the backdrop moves. On phones this freezes the
   page, so mobile gets solid panels (the backgrounds are ~90% opaque
   already) and desktop keeps light blurs. */
@media (max-width: 768px) {
  *,
  *::before,
  *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

  }
}

@media (prefers-reduced-transparency: reduce) {
  *,
  *::before,
  *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

  }
}

/* ------------------ Footer ------------------ */

.footer {
  background: color-mix(in srgb, var(--paper, #140e08) 88%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);

  border-top: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  padding: 40px clamp(16px, 3vw, 36px) 28px;
  margin-top: 48px;
  position: relative;
  z-index: 10;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.footer-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text);
}

.footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-section li {
  margin: 6px 0;
}

/* WCAG 2.2 target size (2.5.8): 13px type in a 16px line box made every footer
   link a 16px-tall target, on desktop as well as on a phone. Padding, not a
   larger font, so the footer's type hierarchy stays as designed. */
.footer-section a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  display: inline-block;
  padding: 5px 0;
  transition: color 0.15s ease;
}

.footer-section a:hover {
  color: var(--accent);
}

/* The page the reader is on, marked by side-nav.js. Bold (and accented, the same
   colour the hover state uses) so it reads as "you are here" rather than as one
   more link; aria-current="page" is what carries it for screen readers. */
.footer-section a.active,
.footer-section a[aria-current="page"] {
  color: var(--accent);
  font-weight: 750;
}

/* Install-as-app entry in the footer. Same accent language, border and hover
   fill as the header pill (.pwa-install-btn) but footer-scale: it lives in a
   link list, so it keeps the column's link typography and target-size padding
   and gains a pill border to read as an action rather than a page. */
.footer-section a.footer-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer-section a.footer-install-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.footer-section a.footer-install-btn i { font-size: 12px; }
.footer-section a.footer-install-btn[hidden] { display: none !important; }

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  max-width: 1400px;
  margin: 0 auto;
}

.footer-contact {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  font-size: 12px;
}

.footer-contact span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.footer-contact i {
  color: var(--accent);
}

.footer-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer-socials a {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--border);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.footer-socials a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(217, 119, 6, 0.1);
  transform: translateY(-1px);
}

/* Search Widget */
.search-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.search-btn {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.search-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4);
}

.search-box {
  position: absolute;
  overscroll-behavior: contain;
  bottom: 70px;
  right: 0;
  width: 360px;
  max-width: 90vw;
  background: color-mix(in srgb, var(--panel, #18120c) 95%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1001;
}

.search-box.hidden {
  display: none;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-box input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  font-size: 13px;
  font-weight: 550;
  color: var(--text);
  background: var(--surface);
  margin-bottom: 10px;
  box-sizing: border-box;
}

.search-box input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.search-results {
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.search-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: var(--radius-6);
  font-size: 11px;
  font-weight: 650;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.search-quick-chip:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  transform: translateY(-1px);
}

.search-category-badge {
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: var(--radius-4);
  background: rgba(217, 119, 6, 0.15);
  color: var(--accent, #d97706);
  border: 1px solid rgba(217, 119, 6, 0.3);
  white-space: nowrap;
}

.search-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-8);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  border: 1px solid transparent;
}

.search-result:hover {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-color: var(--border);
}

.search-result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-result-title {
  font-weight: 650;
}

.search-result-snippet {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}

.search-result-snippet mark {
  background: rgba(217, 119, 6, 0.25);
  color: var(--accent, #d97706);
  font-weight: 700;
  padding: 0 2px;
  border-radius: 3px;
}

.search-result:hover {
  background: rgba(217, 119, 6, 0.1);
  color: var(--accent);
  transform: translateX(4px);
}

.search-result i {
  color: var(--accent);
}

.no-results {
  padding: 10px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.search-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
}

/* Google Translate Widget Overhauls */
#google_translate_element {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  z-index: 10;
}

/* The site selector replaces Google's gadget as the visible control. The
   gadget still has to exist in the host so Google can apply the translation
   it reads from the googtrans cookie. */
#google_translate_element.has-language-pref .goog-te-gadget,
#google_translate_element.has-language-pref .translate-reset-btn {
  display: none !important;
}

#google_translate_element iframe,
#google_translate_element .goog-te-banner-frame,
#google_translate_element .goog-te-menu-frame {
  position: static !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
}

body>.goog-te-banner-frame,
body>.skiptranslate {
  display: none !important;
}

.goog-te-gadget {
  font-family: var(--font-family, "Segoe UI", system-ui, sans-serif) !important;
}

.goog-te-gadget .goog-te-combo {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  margin: 0 !important;
  /* Guarantee a visible dropdown arrow: strip the (unreliable) native chrome
     and draw a chevron with a background image so it reads as a select on
     every browser and in both themes. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
  /* A hard ceiling on the combo itself: native selects would otherwise grow
     to the longest language name (long Latin / Cyrillic names exceed the
     gadget's default width and pushed the whole topbar row wider, crushing
     the neighbours). The extra ceiling keeps the box at the gadget's usual
     size and clips the longer label. */
  max-width: 200px;
}

.goog-te-gadget .goog-te-combo:hover,
.goog-te-gadget .goog-te-combo:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.goog-logo-link {
  display: none !important;
}

.goog-te-gadget img {
  display: none !important;
}

/* Exit-translation control: the ✕ that returns the page to English. It is a
   child of #google_translate_element, so it follows the widget's header→
   footer relocation and sits right next to Google's dropdown; it shows only
   while the document is actually translated (the .is-visible class is driven
   from translate.js by Google's translated-ltr/-rtl marker on <html>). */
.translate-reset-btn {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: 0;
  margin-right: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* Visibility is CSS-driven from Google's translated-* marker on <html>, not
   from a class toggle: no JS timing can hide the exit control while the
   document actually is translated. */
html.translated-ltr .translate-reset-btn,
html.translated-rtl .translate-reset-btn,
.translate-reset-btn.is-visible {
  display: inline-flex;
}

.translate-reset-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.goog-te-gadget {
  color: var(--muted) !important;
  font-size: 11px !important;
}

/* Site-owned language selector. It stays outside Google's gadget so the
   control keeps its own size and typography when French is selected. */
.language-pref {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  min-height: 36px;
  max-width: min(300px, 100%);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--surface);
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.language-pref:hover,
.language-pref:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}

.language-pref-icon {
  flex: none;
  font-size: 14px;
  color: var(--accent);
}

.language-pref-text {
  display: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.language-pref-measure {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  font: 600 13px/1.2 var(--font-family, "Segoe UI", system-ui, sans-serif);
}

.language-select {
  width: var(--language-select-width, 5.75em);
  min-width: 0;
  max-width: none;
  padding: 8px 20px 8px 0;
  border: 0;
  border-radius: 0;
  outline: none;
  color: var(--text);
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 10px;
  font: 600 13px/1.2 var(--font-family, "Segoe UI", system-ui, sans-serif);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.language-select option {
  color: var(--text);
  background: var(--surface);
}

@media (max-width: 768px) {
  /* The header copy, present only until side-nav.js relocates the widget to the
     footer (or if that relocation never runs). It keeps the narrow clamp on
     purpose: Google draws a 216px dropdown at the type size below, and the bar
     is the one place that cannot yield — pushing the controls over the brand is
     the collision the topbar block was written to end. */
  .topbar-actions > #google_translate_element {
    max-width: 110px;
    flex-shrink: 1;
    overflow: hidden;
  }

  /* The footer copy is where the widget actually lives on a phone, and the clamp
     above used to apply to it as well. Google's dropdown measured 158px inside a
     110px box: `justify-content: center` centred it 24px left of its own start
     edge and `overflow: hidden` cut both ends off, so the visible control began
     at x=-8 on a 390px screen. The box never grew past the Translate button that
     had opened it. */
  .footer-content > #google_translate_element {
    /* It is a grid item like any other footer child, so it needs the full row:
       in a single 162px track the 216px dropdown cannot fit. */
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    overflow: visible;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  }

  /* The opening control is the footer's one real action on a phone, so it gets
     a thumb-sized target here. */
  .footer-content > #google_translate_element .language-pref {
    width: 100%;
    max-width: 360px;
    min-height: 44px;
    justify-content: center;
    margin: 0 auto;
  }

  .footer-content > #google_translate_element .language-pref-text {
    display: inline;
  }

  .footer-content > #google_translate_element .language-select {
    width: auto;
    max-width: none;
    flex: 1 1 auto;
  }

  /* The 11px/4px squeeze also broke the desktop rule's chevron: it is drawn by a
     background image at `right 10px center`, so a 6px right padding painted it
     on top of the label. Readable type, and the arrow's own room back. */
  #google_translate_element .goog-te-combo {
    font-size: 13px;
    padding: 8px 32px 8px 12px;
  }
}

/* ── Fire Aware Cookie & Language Consent System ─────────── */
.consent-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: consentFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.consent-backdrop.fade-out {
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

@keyframes consentFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.consent-modal {
  background: color-mix(in srgb, var(--card, #ffffff) 98%, transparent);
  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-18);
  padding: 26px 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-family: var(--type-body, system-ui, -apple-system, sans-serif);
  color: var(--text, var(--ink, #101922));
  position: relative;
  animation: modalScaleUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes modalScaleUp {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.consent-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.consent-brand-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-10);
  background: linear-gradient(135deg, var(--accent, #d97706), #b45309);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.consent-modal h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.consent-subtitle {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

.consent-language-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}

.consent-language-more {
  margin: -4px 0 14px;
  text-align: center;
}

.consent-language-more summary {
  display: inline-block;
  padding: 2px 0;
  color: var(--accent, #d97706);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.consent-language-more summary:focus-visible {
  outline: 2px solid var(--accent, #d97706);
  outline-offset: 2px;
}

.consent-language-more[open] summary {
  margin-bottom: 8px;
}

.consent-lang-select {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-8);
  background: var(--surface, #f8fafc);
  color: var(--text, #101922);
  font: 500 12px/1.3 var(--type-body, system-ui, sans-serif);
}

.consent-lang-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  border-radius: var(--radius-12);
  border: 1.5px solid var(--hairline, rgba(0, 0, 0, 0.12));
  background: var(--surface, #f8fafc);
  color: var(--text, #101922);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.consent-lang-btn:hover {
  border-color: var(--accent, #d97706);
  background: color-mix(in srgb, var(--accent, #d97706) 12%, var(--surface, #f8fafc));
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.2);
}

.consent-lang-native {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted, #64748b);
}

.consent-note-text {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted, #64748b);
  line-height: 1.4;
  text-align: center;
}

.consent-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--muted, #64748b);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-6);
  transition: color 0.2s ease;
}

.consent-close-btn:hover {
  color: var(--text, #101922);
}

/* ── Cookie Consent Banner ────────────────────────────────── */
.fire-aware-cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 960px;
  margin: 0 auto;
  background: color-mix(in srgb, var(--card, #ffffff) 96%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);

  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.14));
  border-radius: var(--radius-18);
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.1);
  padding: 18px 22px;
  z-index: 99998;
  font-family: var(--type-body, system-ui, -apple-system, sans-serif);
  animation: bannerSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.fire-aware-cookie-banner.banner-slide-down {
  transform: translateY(120%);
  opacity: 0;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bannerSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cookie-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cookie-banner-text {
  flex: 1;
  min-width: 280px;
}

.cookie-banner-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text, #101922);
  margin-bottom: 4px;
}

.cookie-banner-text p {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

.cookie-banner-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}

.cookie-policy-link {
  color: var(--accent, #d97706);
  font-weight: 700;
  text-decoration: underline;
}

.cookie-sep {
  color: var(--muted, #64748b);
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-cookie-primary {
  background: linear-gradient(135deg, var(--accent, #d97706) 0%, #b45309 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-10);
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.btn-cookie-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.45);
}

.btn-cookie-secondary {
  background: var(--surface, #f8fafc);
  color: var(--text, #101922);
  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-10);
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.btn-cookie-secondary:hover {
  background: color-mix(in srgb, var(--text, #101922) 8%, var(--surface, #f8fafc));
  transform: translateY(-1px);
}

.btn-cookie-ghost {
  background: transparent;
  color: var(--muted, #64748b);
  border: 1px solid transparent;
  border-radius: var(--radius-10);
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.btn-cookie-ghost:hover {
  color: var(--text, #101922);
  background: rgba(0, 0, 0, 0.05);
}

/* ── Preferences Modal Details ─────────────────────────────── */
.pref-modal {
  max-width: 540px;
}

.pref-modal-intro p {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

.pref-categories-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.pref-category-card {
  background: color-mix(in srgb, var(--surface, #f8fafc) 80%, transparent);
  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-12);
  padding: 14px;
  transition: border-color 0.2s ease;
}

.pref-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.pref-cat-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pref-cat-title strong {
  font-size: 13.5px;
  color: var(--text, #101922);
}

.pref-badge-required {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: var(--radius-6);
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.pref-badge-optional {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: var(--radius-6);
  background: rgba(217, 119, 6, 0.15);
  color: var(--accent, #d97706);
}

.pref-badge-none {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: var(--radius-6);
  background: rgba(100, 116, 139, 0.15);
  color: var(--muted, #64748b);
}

.pref-cat-desc {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #64748b);
  line-height: 1.4;
}

/* Switch styling */
.pref-switch-wrap {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.pref-switch-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pref-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--hairline, #cbd5e1);
  transition: .3s;
  border-radius: var(--radius-24);
}

.pref-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: var(--radius-circle);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .pref-slider {
  background-color: var(--accent, #d97706);
}

input:checked + .pref-slider:before {
  transform: translateX(20px);
}

input:disabled + .pref-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.pref-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--hairline, rgba(0, 0, 0, 0.08));
}

@media (max-width: 600px) {
  .fire-aware-cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 16px;
  }
  .cookie-banner-actions {
    width: 100%;
    justify-content: stretch;
  }
  .cookie-banner-actions button {
    flex: 1;
  }
}

/* Footer Logo */
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer-logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.footer-logo-link:hover {
  opacity: 0.8;
  transform: translateY(-4px);
}

.footer-brand-logo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-12);
  padding: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.footer-brand-logo:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.4);
}

.footer-logo h4 {
  margin: 0;
  color: var(--accent);
}

.footer-logo-link h4 {
  margin: 0;
  color: var(--accent);
}

.footer-logo p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.footer-logo-link p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* Footer Logo */
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer-logo h4 {
  margin: 0;
  color: var(--accent);
}

.footer-logo p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* Sensor Preview Section */
.sensor-preview {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.08), rgba(245, 158, 11, 0.04));
  border: 2px solid var(--accent);
  text-align: center;
  margin: 30px 0;
}

.sensor-preview h2 {
  color: var(--accent);
  margin-top: 0;
  font-size: 28px;
}

.sensor-preview>p {
  color: var(--muted);
  margin-bottom: 24px;
}

.sensor-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.sensor-card {
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  text-align: center;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  cursor: pointer;
}

.sensor-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 30px var(--glow);
  border-color: var(--accent);
}

.sensor-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: var(--radius-12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.sensor-card:hover .sensor-icon {
  transform: scale(1.2) rotate(-10deg);
}

.sensor-icon.aqi-high {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.3);
}

.sensor-icon.pm-high {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  box-shadow: 0 0 20px rgba(251, 146, 60, 0.3);
}

.sensor-icon.co2-normal {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.sensor-icon.sensors-active {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.sensor-card h4 {
  margin: 12px 0 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.sensor-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  margin: 8px 0;
}

.sensor-status {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.explore-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent), #f59e0b);
  color: white;
  border: none;
  border-radius: var(--radius-8);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.3);
}

.explore-btn:hover {
  transform: translateX(6px);
  box-shadow: 0 8px 28px rgba(217, 119, 6, 0.5);
}

.explore-btn i {
  margin-left: 6px;
}

@media (max-width: 600px) {
  .sensor-preview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .explore-btn {
    width: 100%;
    text-align: center;
  }
}

/* Home Page Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

.feature-card {
  text-align: center;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  transition: color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 32px rgba(217, 119, 6, 0.2);
}

.feature-card i {
  font-size: 40px;
  color: var(--accent);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.feature-card:hover i {
  transform: scale(1.2) rotate(10deg);
  filter: drop-shadow(0 0 10px rgba(217, 119, 6, 0.5));
}

.feature-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Quick Links with Icons */
.quick-links ul li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-8);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.quick-links ul li a:hover {
  background: rgba(217, 119, 6, 0.1);
  color: var(--accent);
  transform: translateX(6px);
}

.quick-links ul li a i {
  color: var(--accent);
  min-width: 20px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 40px 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}

.pricing-tier {
  padding: 24px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  transition: color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  cursor: pointer;
  margin-top: 30px;
}

.pricing-tier:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 30px var(--glow), 0 15px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--accent);
}

.pricing-tier.featured {
  border: 2px solid var(--accent);
  transform: scale(1.05);
  box-shadow: 0 0 25px var(--glow);
}

.pricing-tier.featured:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 0 40px var(--glow), 0 20px 50px rgba(0, 0, 0, 0.15);
}

.pricing-tier h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 6px 16px;
  border-radius: var(--radius-20);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  border: 2px solid var(--panel);
}

.price {
  margin: 12px 0;
  font-size: 32px;
  font-weight: 700;
}

.price span {
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
}

.select-plan {
  width: 100%;
  padding: 10px 16px;
  margin: 16px 0;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-8);
  cursor: pointer;
  font-weight: 600;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.select-plan:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.select-plan.selected {
  background: var(--accent);
  animation: glow-pulse 2s ease-in-out infinite;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.6), 0 0 40px rgba(217, 119, 6, 0.4);
}

@keyframes glow-pulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(217, 119, 6, 0.6), 0 0 40px rgba(217, 119, 6, 0.4);
  }

  50% {
    box-shadow: 0 0 30px rgba(217, 119, 6, 0.8), 0 0 60px rgba(217, 119, 6, 0.6);
  }
}

.features-list {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.features-list li {
  padding: 8px 0;
  font-size: 13px;
  color: var(--text);
}

.features-list i {
  color: var(--accent);
  margin-right: 8px;
  width: 14px;
}

.features-list i.fa-times {
  color: var(--muted);
}

.product-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 30px 0;
  align-items: center;
}

@media (max-width: 900px) {
  .product-showcase {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.product-image {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 30px var(--glow);
}

.product-image img {
  width: 100%;
  height: auto;
  display: block;
}

.product-info h3 {
  margin-top: 0;
  font-size: 20px;
}

.product-info ul {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.product-info li {
  padding: 8px 0;
  color: var(--text);
}

.product-info i {
  color: var(--accent);
  margin-right: 10px;
}

.comparison-section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid var(--border);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.comparison-table th,
.comparison-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.comparison-table th {
  background: rgba(217, 119, 6, 0.1);
  font-weight: 600;
  color: var(--accent-dark);
}

.comparison-table tr:hover {
  background: rgba(217, 119, 6, 0.05);
}

.comparison-table i {
  font-size: 16px;
  color: var(--accent);
}

.comparison-table i.fa-times {
  color: var(--muted);
}

/* ------------------ Responsive ------------------ */

@media (max-width: 900px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .side-nav-toggle {
    display: flex;
  }

  .topbar {
    align-items: flex-start;
    gap: 10px;
    flex-direction: row;
    padding-left: 52px;
  }

  .topbar-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: auto;
  }

  .top-nav {
    display: none;
  }

  .landing-wrap {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  #map {
    height: 420px;
  }

  .sidebar {
    display: none;
  }

  .loading {
    grid-template-columns: 1fr;
  }
}

/* ── Chatbot Widget Styles (Overhauled & Rebuilt) ─────────── */
.chatbot-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100010;
  font-family: var(--type-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  pointer-events: auto;
}

.chatbot-toggle {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-circle, 50%);
  background: linear-gradient(135deg, var(--accent, #d97706) 0%, #ea580c 100%);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 21px;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  pointer-events: auto;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease;
}

.chatbot-toggle:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 32px rgba(217, 119, 6, 0.65), 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.chatbot-toggle:active {
  transform: scale(0.96);
}

.chatbot-widget:has(.unread-badge.show) .chatbot-toggle {
  animation: chatbotGlowPulse 2s ease-in-out infinite;
}

@keyframes chatbotGlowPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.65), 0 6px 20px rgba(217, 119, 6, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(217, 119, 6, 0), 0 10px 28px rgba(217, 119, 6, 0.65);
  }
}

.unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #ffffff;
  border-radius: var(--radius-circle, 50%);
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid var(--card, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.unread-badge.show {
  display: flex;
}

.chatbot-container {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 410px;
  max-width: calc(100vw - 32px);
  height: 570px;
  max-height: calc(100vh - 110px);
  background: var(--card, #ffffff);
  color: var(--text, #101922);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  border-radius: var(--radius-18, 18px);
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatbotSlideUp 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom right;
  z-index: 100011;
  pointer-events: auto;
}

.chatbot-container.hidden {
  display: none !important;
}

@keyframes chatbotSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chatbot-header {
  background: linear-gradient(135deg, var(--accent, #d97706) 0%, #b45309 100%);
  color: #ffffff;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.chatbot-header-content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chatbot-header-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-8, 8px);
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.chatbot-header-titles {
  min-width: 0;
}

.chatbot-header-titles h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
  color: #ffffff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatbot-header-status {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-weight: 500;
}

.chatbot-status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle, 50%);
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  display: inline-block;
  animation: chatbotDotPulse 2s infinite ease-in-out;
}

@keyframes chatbotDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.chatbot-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.chatbot-header-btn {
  background: rgba(255, 255, 255, 0.16);
  border: none;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-6, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
  padding: 0;
}

.chatbot-header-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border, rgba(0, 0, 0, 0.2)) transparent;
  background: var(--card, #ffffff);
  min-height: 0;
  position: relative;
}

.chatbot-messages::-webkit-scrollbar {
  width: 5px;
}

.chatbot-messages::-webkit-scrollbar-thumb {
  background: var(--border, rgba(0, 0, 0, 0.2));
  border-radius: 4px;
}

/* ── Individual Messages & Attached Layout ─────────────────── */
.message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  animation: messageFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

@keyframes messageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.message-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle, 50%);
  background: linear-gradient(135deg, var(--accent, #d97706), #ea580c);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.28);
}

.user-avatar {
  background: linear-gradient(135deg, #475569, #334155);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.message-body {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 36px);
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 11px;
  color: var(--muted, #64748b);
  font-weight: 600;
}

.message-author {
  color: var(--text, #101922);
  font-weight: 700;
}

.message-time {
  opacity: 0.8;
  font-weight: 500;
}

.message-bubble {
  padding: 10px 14px;
  border-radius: var(--radius-14, 14px);
  width: fit-content;
  max-width: 86%;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
  position: relative;
}

.bot-message {
  justify-content: flex-start;
}

.bot-message .message-bubble {
  background: var(--surface, #f8fafc);
  color: var(--text, #101922);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.user-message {
  justify-content: flex-end;
  align-self: flex-end;
}

.user-message .message-body {
  align-items: flex-end;
}

.user-message .message-header {
  justify-content: flex-end;
}

.user-message .message-bubble {
  min-width: 0;
  max-width: 86%;
  background: linear-gradient(135deg, var(--accent, #d97706) 0%, #ea580c 100%);
  color: #ffffff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);
}

.message-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.message-copy-btn {
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: var(--radius-4, 4px);
  font-size: 11px;
  color: var(--muted, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.message-copy-btn:hover {
  color: var(--text, #101922);
  background: rgba(0, 0, 0, 0.06);
}

.message-copy-btn.copied {
  color: #16a34a;
}

.error-message .message-bubble {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.25);
}

.message-bubble p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
  word-break: normal;
}

.message-bubble p:last-child {
  margin-bottom: 0;
}

.message-bubble a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message-bubble ul, .message-bubble ol {
  margin: 6px 0 8px;
  padding-left: 20px;
}

.message-bubble li {
  margin-bottom: 4px;
}

.chat-heading-1, .chat-heading-2, .chat-heading-3 {
  display: block;
  margin: 8px 0 4px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.chat-heading-1 { font-size: 15px; }
.chat-heading-2 { font-size: 14px; }
.chat-heading-3 { font-size: 13.5px; }

.chat-blockquote {
  border-left: 3px solid var(--accent, #d97706);
  padding: 4px 8px;
  margin: 6px 0;
  font-style: italic;
  background: rgba(217, 119, 6, 0.06);
  border-radius: 0 6px 6px 0;
}

.chat-code-block {
  background: #1e293b;
  color: #f1f5f9;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;
  margin: 6px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-inline-code {
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

.user-message .chat-inline-code {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.chatbot-escalation-action {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(127, 127, 127, 0.2);
}

.chatbot-escalate-btn {
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(220, 80, 60, 0.12);
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.18s ease;
}

.chatbot-escalate-btn:hover {
  background: rgba(220, 80, 60, 0.22);
}

/* ── Suggested Prompts & Chips Carousel ────────────────────── */
.sample-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.suggested-questions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 0;
}

.suggest-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sample-q-btn, .suggest-q-btn {
  background: var(--surface, #f1f5f9);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 14px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #101922);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  text-align: left;
  line-height: 1.35;
  font-family: inherit;
}

.sample-q-btn:hover, .suggest-q-btn:hover {
  background: var(--accent, #d97706);
  color: #ffffff;
  border-color: var(--accent, #d97706);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(217, 119, 6, 0.28);
}

/* ── Typing Indicator ──────────────────────────────────────── */
.typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle, 50%);
  background: var(--accent, #d97706);
  animation: typingBounce 1.3s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── Turnstile Zero-Footprint Wrap ─────────────────────────── */
.chatbot-turnstile-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.chatbot-turnstile-wrap .cf-turnstile {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  line-height: 0;
}

.chatbot-turnstile-wrap .cf-turnstile iframe {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.chatbot-turnstile-wrap.is-verified {
  display: none !important;
}

/* ── Input Area & Expanding Composer ───────────────────────── */
.chatbot-input-area {
  padding: 10px 12px 10px;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  background: var(--card, #ffffff);
  flex-shrink: 0;
}

.chatbot-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

#chatbotInput {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  border-radius: 12px;
  font-size: 13.5px;
  background: var(--surface, #f8fafc);
  color: var(--text, #101922);
  font-family: inherit;
  resize: none;
  min-height: 38px;
  max-height: 100px;
  line-height: 1.4;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#chatbotInput:focus {
  border-color: var(--accent, #d97706);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #d97706) 18%, transparent);
}

.chatbot-send {
  width: 38px;
  height: 38px;
  border: none;
  background: linear-gradient(135deg, var(--accent, #d97706), #ea580c);
  color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.chatbot-send:hover:not(:disabled) {
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
}

.chatbot-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.chatbot-input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding: 0 2px;
  font-size: 10.5px;
  color: var(--muted, #64748b);
}

.chatbot-char-count.warning {
  color: #d97706;
  font-weight: 700;
}

.chatbot-char-count.limit {
  color: #dc2626;
  font-weight: 800;
}

/* ── In-Widget Modal & Scroll Utilities ────────────────────── */
.chatbot-modal {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.chatbot-modal.hidden {
  display: none !important;
}

.chatbot-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.chatbot-modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--card, #ffffff);
  color: var(--text, #101922);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  border-radius: var(--radius-14, 14px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  padding: 18px;
  animation: chatbotModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chatbotModalPop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.chatbot-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.chatbot-modal-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
  color: var(--text, #101922);
  display: flex;
  align-items: center;
  gap: 6px;
}

.chatbot-modal-header h4 i {
  color: var(--accent, #d97706);
}

.chatbot-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted, #64748b);
  line-height: 1;
  padding: 2px 6px;
}

.chatbot-modal-desc {
  font-size: 12px;
  color: var(--muted, #64748b);
  margin: 0 0 12px;
  line-height: 1.4;
}

.chatbot-form-group {
  margin-bottom: 10px;
}

.chatbot-form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #64748b);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.chatbot-form-group input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface, #f8fafc);
  color: var(--text, #101922);
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
}

.chatbot-form-group input:focus {
  border-color: var(--accent, #d97706);
}

.chatbot-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.chatbot-btn-secondary {
  background: var(--surface, #f1f5f9);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  color: var(--text, #101922);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.chatbot-btn-primary {
  background: linear-gradient(135deg, var(--accent, #d97706), #ea580c);
  border: none;
  color: #ffffff;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chatbot-scroll-bottom {
  position: absolute;
  bottom: 74px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle, 50%);
  background: var(--card, #ffffff);
  color: var(--accent, #d97706);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.chatbot-scroll-bottom:hover {
  transform: translateY(-2px);
}

.chatbot-scroll-bottom.hidden {
  display: none !important;
}

/* ── Mobile Viewport Responsiveness ────────────────────────── */
@media (max-width: 640px) {
  .chatbot-widget {
    bottom: 16px;
    right: 16px;
  }
  .chatbot-toggle {
    width: 48px;
    height: 48px;
    font-size: 19px;
  }
  .chatbot-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    height: min(85dvh, 600px);
    max-height: 85dvh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  }
  .chatbot-input-area {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}


/* =====================================
   CONTACT FORM STYLES
   ===================================== */

.contact-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  margin-top: 2rem;
}

@media (max-width: 968px) {
  .contact-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.contact-form-section,
.contact-info-section {
  background: var(--panel);
  padding: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.contact-form-section h3,
.contact-info-section h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  font-size: 1.5rem;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.5rem;
}

/* Contact Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.form-group label i {
  color: var(--accent);
  width: 18px;
}

.required {
  color: var(--danger, #ef4444);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  font-family: inherit;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  outline: none;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

.form-group input.valid,
.form-group select.valid,
.form-group textarea.valid {
  border-color: var(--success, #10b981);
}

.form-group input.invalid,
.form-group select.invalid,
.form-group textarea.invalid {
  border-color: var(--danger, #ef4444);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 400px;
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-group button[type="submit"] {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), #f59e0b);
  color: white;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.form-group button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4);
}

.form-group button[type="submit"]:active:not(:disabled) {
  transform: translateY(0);
}

.form-group button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Form Status Messages */
.form-status {
  padding: 1rem;
  border-radius: var(--radius);
  font-weight: 500;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-status.hidden {
  display: none;
}

.form-status.success {
  background: rgba(16, 185, 129, 0.1);
  border: 2px solid #10b981;
  color: #10b981;
}

.form-status.error {
  background: rgba(239, 68, 68, 0.1);
  border: 2px solid #ef4444;
  color: #ef4444;
}

.form-status.info {
  background: rgba(59, 130, 246, 0.1);
  border: 2px solid #3b82f6;
  color: #3b82f6;
}

/* Contact Info Section */
.contact-info-section {
  height: fit-content;
}

.contact-info-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.contact-info-item:hover {
  border-color: var(--accent);
  transform: translateX(5px);
}

.contact-info-item>i {
  font-size: 1.5rem;
  color: var(--accent);
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info-item div {
  flex: 1;
}

.contact-info-item strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-primary);
  font-size: 1rem;
}

.contact-info-item p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.contact-info-item a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-info-item a:hover {
  color: #f59e0b;
  text-decoration: underline;
}

/* Quick Links */
.quick-links {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
}

.quick-links li {
  margin-bottom: 0.75rem;
}

.quick-links a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border-radius: var(--radius);
  color: var(--text-primary);
  text-decoration: none;
  border: 1px solid var(--border);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}

.quick-links a:hover {
  background: var(--panel);
  border-color: var(--accent);
  transform: translateX(5px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.quick-links a i {
  color: var(--accent);
  width: 20px;
  text-align: center;
}

/* Dark Mode Adjustments */
body[data-theme="dark"] .form-group input[type="text"],
body[data-theme="dark"] .form-group input[type="email"],
body[data-theme="dark"] .form-group select,
body[data-theme="dark"] .form-group textarea {
  background: #1f2937;
  color: #e5e7eb;
}

body[data-theme="dark"] .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aaa' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* Mobile Responsive */
@media (max-width: 600px) {

  .contact-form-section,
  .contact-info-section {
    padding: 1.5rem;
  }

  .form-group button[type="submit"] {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }

  .contact-info-item {
    flex-direction: column;
    text-align: center;
  }

  .contact-info-item>i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
}

/* Global Loader */
.global-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.global-loader .spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-circle);
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 20px;
}

.global-loader .loader-text {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 1px;
}

/* Indeterminate fetch progress bar under the spinner. Total dataset count isn't
   known up front, so the bar sweeps to show the load is actively progressing. */
.global-loader .loader-progress {
  width: 240px;
  height: 4px;
  margin-top: 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.global-loader .loader-progress span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #f97316, #ef4444);
  animation: loader-progress-sweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes loader-progress-sweep {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(320%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-loader .loader-progress span {
    animation: none;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Loading screen tips — a small rotating tip line injected by loading-tips.js */
.loader-tip {
  margin: 14px auto 0;
  max-width: 420px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  animation: loader-tip-in 0.35s ease-out;
}
.loader-tip--static {
  animation: none;
  opacity: 0.9;
}
.dashboard-loader .loader-tip,
.loading .loader-tip {
  color: var(--muted);
}
@keyframes loader-tip-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Keep the shimmer loader animation subtle on coarse/low-power screens. */
@media (hover: none) and (pointer: coarse) {
  .global-loader .spinner { animation-duration: 1.4s; }
  .skeleton { animation-duration: 1.8s; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .global-loader .spinner,
  .global-loader .loader-progress span,
  .loader-tip { animation: none; }
}

/* Evacuation "Read more" block injected by evac-guide.js into map popups,
   the fire dashboard, the home ticker and the weather banner. */
.evac-read-more {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}
.evac-guide-link,
.evac-official {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent, #d97706);
  border: 1px solid var(--accent, #d97706);
  border-radius: var(--radius-6);
  padding: 6px 10px;
  margin: 2px 4px 2px 0;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.evac-guide-link:hover,
.evac-official:hover {
  background: var(--accent, #d97706);
  color: #fff;
}
.evac-instruction-text {
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid #dc2626;
  border-radius: var(--radius-4);
  color: var(--text, inherit);
  font-size: 12.5px;
  line-height: 1.45;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Home "Learn About Wildfire" preview widget links. */
.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.quick-links-grid .ql {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.quick-links-grid .ql:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  transform: translateY(-1px);
}
/* Enriched Learn-preview cards: icon + title + one-line descriptor */
.quick-links-grid .ql.align-top { align-items: flex-start; }
.quick-links-grid .ql .ql-ico {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15em;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: var(--radius-10);
}
.quick-links-grid .ql > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.quick-links-grid .ql strong { font-weight: 600; line-height: 1.2; }
.quick-links-grid .ql small { font-weight: 400; font-size: 0.78em; color: var(--muted); line-height: 1.3; }

/* Fire details dashboard helpers */
#main-content {
  /* The topbar is sticky (see `.topbar`, "position: sticky"), so it already
     holds its own space in flow: a padding-top here is an empty band under the
     bar, not clearance. Pages bring their own top spacing (.landing-wrap
     margin, .dashboard-layout padding). This was 80px, and the fix for it was
     applied only under `@media (max-width: 900px)` — which left the band (and
     its 80px of the map page's own height) on every wider frame: measured 90px
     between the bar and the hero at 1024, 1366 and 1440. */
  padding-top: 0;
  min-height: 100vh;
}

.dashboard-loader {
  text-align: center;
  padding: 100px 20px;
}

.dashboard-loader .spinner {
  margin: 0 auto 20px;
}

.dashboard-loader-copy {
  color: var(--muted);
}

.dashboard-layout {
  display: none;
}

.dashboard-layout.is-visible {
  display: grid;
}

.dashboard-loader.is-hidden {
  display: none;
}

.dashboard-back-link {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.dashboard-header-badge {
  width: 120px;
}

.dashboard-fire-title {
  font-size: 2.5rem;
  margin: 0 0 8px;
}

.dashboard-fire-location {
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0 0 20px;
}

.dashboard-hero-fact-value {
  width: 70px;
}

.dashboard-hero-fact-value--medium {
  width: 80px;
}

.dashboard-hero-fact-value--large {
  width: 100px;
}

.dashboard-hero-fact-value--wide {
  width: 90px;
}

.dashboard-hero-fact-value--coords {
  width: 140px;
  font-size: 14px;
}

.dashboard-section {
  margin-bottom: 30px;
}

.dashboard-section--tight {
  margin-bottom: 20px;
}

.dashboard-card--full-width {
  grid-column: 1 / -1;
}

.dashboard-card-note--compact {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.dashboard-card-stack {
  margin-top: 14px;
}

.dashboard-card-note--spaced {
  margin-top: 12px;
}

.dashboard-card--section-spacer {
  margin-bottom: 20px;
}

.dashboard-related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.chart-canvas--hidden {
  display: none;
}

.dashboard-card-icon--sky {
  color: #38bdf8;
}

.dashboard-card-icon--fire {
  color: #ef4444;
}

.dashboard-card-icon--danger {
  color: #dc2626;
}

.dashboard-card-icon--orange {
  color: #f97316;
}

.dashboard-card-icon--amber {
  color: #f59e0b;
}

.dashboard-card-icon--blue {
  color: #3b82f6;
}

.dashboard-card-icon--purple {
  color: #a855f7;
}

.dashboard-card-icon--violet {
  color: #8b5cf6;
}

.dashboard-card-icon--green {
  color: #10b981;
}

.dashboard-card-icon--pink {
  color: #f472b6;
}

.dashboard-card-icon--cyan {
  color: #0ea5e9;
}

.dashboard-card-icon--rose {
  color: #ec4899;
}

.dashboard-card-icon--indigo {
  color: #6366f1;
}

.dashboard-card-icon--slate {
  color: #94a3b8;
}

.dashboard-card-icon--yellow {
  color: #eab308;
}

.dashboard-card-icon--cobalt {
  color: #0284c7;
}

/* API Toggle Button Fixes */
.api-toggle-btn {
  width: 160px;
  max-width: 160px;
  box-sizing: border-box;
  text-align: center;
  justify-content: center;
  position: relative;
}

.api-toggle-btn.loading {
  color: transparent !important;
}

.api-toggle-btn.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: var(--radius-circle);
  animation: spin 1s linear infinite;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: inherit;
}

.expandable-sensor-item.expanded .toggle-icon {
  transform: rotate(180deg);
}

/* Historical fire records */
.satellite-hotspot-marker {
  background: transparent;
  border: 0;
}

.satellite-hotspot-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #f8fafc;
  border-radius: var(--radius-circle);
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 2px 8px rgb(46 16 101 / .5);
  font-size: 13px;
}

.satellite-hotspot-icon span {
  position: absolute;
  right: -8px;
  top: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-8);
  background: #f97316;
  border: 1px solid #fff;
  color: #fff;
  font: 700 10px/14px system-ui, sans-serif;
  text-align: center;
}

.fire-records-page {
  padding-bottom: 36px;
}

.records-intro,
.records-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.records-intro {
  justify-content: space-between;
}

.records-intro h2 {
  margin: 0 0 6px;
}

.records-intro p {
  margin: 0;
  color: var(--muted);
}

.records-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  min-width: 120px;
}

.records-controls select,
.records-controls input {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
}

.records-controls .records-search {
  flex: 1;
  min-width: 220px;
}

.records-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0;
  flex-wrap: wrap;
}

.record-stat {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-10);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-width: 118px;
}

.record-stat strong {
  font-size: 20px;
  color: var(--accent);
}

.record-stat span,
.records-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.records-grid #recordsMap {
  height: 650px;
  min-height: 55vh;
}

.records-sidebar {
  max-height: 650px;
  overflow: auto;
}

.records-sidebar h3 {
  margin-top: 0;
}

.record-list-item {
  width: 100%;
  display: flex;
  text-align: left;
  gap: 10px;
  padding: 11px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
}

.record-list-item:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.record-list-item span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.record-list-item small {
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.record-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  margin-top: 5px;
  flex: 0 0 auto;
}

.records-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.records-empty {
  color: var(--muted);
}

@media (max-width:900px) {
  .records-grid #recordsMap {
    height: 480px;
  }

  .records-sidebar {
    max-height: none;
  }
}

/* LTAN-style fire-weather climatology workspace */
.climate-controls {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: end;
  margin-top: 16px;
}

.climate-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.climate-controls input,
.climate-controls select {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
}

.climate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}

.climate-grid canvas {
  width: 100%;
  height: 260px;
  display: block;
}

@media (max-width:760px) {
  .climate-grid {
    grid-template-columns: 1fr;
  }
}

/* Map UI Overrides */
.quick-layer-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

@media (min-width: 901px) {
  .content-grid {
    grid-template-columns: 1fr 380px !important;
  }
}

/* ---------------------------------------------------------------
   Home page: skip link, live-data states, sensor icon variants
--------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 10000;
  padding: 10px 18px;
  border-radius: var(--radius-8);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* Google Translate marks the translated document with translated-ltr/-rtl on
   <html>, and its focus shuffling then pops the skip link in as a stray
   popup. Hide it for translated documents only; English keyboard users keep
   the accessibility skip link. */
html.translated-ltr .skip-link,
html.translated-rtl .skip-link {
  display: none !important;
}

.load-note {
  color: var(--muted);
  font-size: 13px;
  margin: 8px 0 0;
  grid-column: 1 / -1;
}

.sensor-preview-note {
  text-align: center;
}

.sensor-icon.aqi-good {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.sensor-icon.aqi-moderate {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.3);
}

/* Values are swapped in after fetch — avoid a hard jump */
.sensor-value,
.sensor-status,
.fire-stat-number {
  transition: color 0.3s ease;
}

/* Top Cause holds a word, not a number. The base .fire-stat-number size is
   tuned for digits and clips longer cause names ("Lightning", "Debris
   Burning"), so text values get their own scale and are allowed to wrap. */
.fire-stat-number.is-text {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* A metric that came back empty or errored — de-emphasised so it does not
   read as a real reading of zero, and so "N/A" stops borrowing the alert-red
   gradient the real numbers use. The gradient is painted via background-clip
   with a transparent text fill, so plain `color` alone would do nothing. */
.sensor-value.is-unavailable,
.fire-stat-number.is-unavailable,
.fire-stat:hover .fire-stat-number.is-unavailable {
  background: none;
  -webkit-text-fill-color: var(--muted);
  color: var(--muted);
  font-weight: 600;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {

  .skip-link,
  .sensor-value,
  .sensor-status,
  .fire-stat-number {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   Header: keep the brand and nav on one line instead of wrapping
   mid-word once the injected nav grows past the available width.
--------------------------------------------------------------- */
.brand {
  flex: 0 0 auto;
}

.brand h1,
.brand-sub {
  white-space: nowrap;
}

.brand-logo {
  flex: 0 0 auto;
}

.topbar-actions {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.top-nav a {
  white-space: nowrap;
}

#google_translate_element {
  /* The visible control is the site's own selector, so it can keep its natural
     width. Google's gadget is present only to apply the cookie's translation
     and is hidden by .has-language-pref. */
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
  max-height: none;
  max-width: 300px;
}

/* The header can yield a category to the drawer when the selected language's
   own name needs more room; the drawer still carries every category. */
.tn-cat.language-yield {
  display: none !important;
}

/* Tighten before anything is dropped */
@media (max-width: 1500px) {
  .brand-logo {
    width: 64px;
    height: 64px;
  }

  .top-nav {
    gap: 4px;
  }

  .top-nav a {
    padding: 6px 7px;
    font-size: 14px;
  }
}

/* The header socials, guide and Home entry all have copies elsewhere. In the
   band where translated category labels and the language selector compete for
   room, let those optional header items yield rather than sliding underneath
   the selector (which also made them steal its clicks). At 1680px the full
   row fits again. */
@media (max-width: 1679px) {
  .header-socials,
  #siteGuideBtn,
  .top-nav > .tn-link[href="/"] {
    display: none !important;
  }
}

/* At wider sizes the optional items stay until a long selected language needs
   their room; fitHeaderNavigation adds this class only when that happens. */
.topbar.language-tight .header-socials,
.topbar.language-tight #siteGuideBtn,
.topbar.language-tight .top-nav > .tn-link[href="/"] {
  display: none !important;
}

/* Below 1200px the side-nav takes over from the top nav */
@media (max-width: 1200px) {
  .top-nav {
    display: none !important;
  }

  .side-nav-toggle {
    display: inline-flex !important;
  }

  .topbar {
    padding-left: 64px;
  }
}

/* Clean mobile header: remove nav header subtitles and titles for minimal clean UI */
@media (max-width: 900px) {
  .brand-sub {
    display: none !important;
  }

  .topbar {
    min-height: 58px;
    padding: 8px 14px 8px 60px !important;
    gap: 8px;
  }

  .brand h1 {
    font-size: 18px !important;
  }

  .side-nav-toggle {
    top: calc(9px + var(--alert-stack, 0px)) !important;
    left: 10px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    z-index: 10004 !important;
  }
}

/* Side navigation backdrop scrim for mobile & overlay */
.side-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 7, 5, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  z-index: 10002;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.menu-open .side-nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   Location consent dialog (geo-location.js) + derived site notice
   ============================================================ */
.fa-geo-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 12, 10, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: faGeoFade 0.18s ease-out;
}

@keyframes faGeoFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fa-geo-dialog {
  width: min(440px, 100%);
  padding: 28px 26px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
  animation: faGeoRise 0.22s ease-out;
}

@keyframes faGeoRise {
  from {
    transform: translateY(14px) scale(0.97);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.fa-geo-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  font-size: 1.4rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: 0 0 0 8px var(--glow);
}

.fa-geo-dialog h2 {
  margin: 0 0 10px;
  font-size: 1.25rem;
}

.fa-geo-dialog p {
  margin: 0 0 12px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--muted);
}

.fa-geo-fineprint {
  font-size: 0.82rem !important;
}

.fa-geo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.fa-geo-btn {
  flex: 1 1 150px;
  padding: 11px 18px;
  border-radius: var(--radius-10);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fa-geo-btn:hover {
  transform: translateY(-1px);
}

.fa-geo-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: 0 6px 18px var(--glow);
}

.fa-geo-ghost {
  color: var(--text);
  background: transparent;
  border-color: var(--border);
}

.fa-geo-ghost:hover {
  background: var(--border);
}

.derived-sites-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-10);
  background: var(--glow);
  font-size: 0.85rem;
  line-height: 1.5;
}

.derived-sites-note p {
  margin: 0 0 8px;
}

.derived-sites-note ul {
  margin: 0;
  padding-left: 18px;
}

.derived-sites-note li {
  margin-bottom: 6px;
}

.derived-sites-note small {
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════
   GUI REWORK LAYER  (gui-rework branch)
   A live design system layered over the legacy CSS. Supersedes the
   cruft above rather than deleting it, so nothing silently breaks and
   every page loads with the rework in effect. Keyed on the subject:
   a real-time air monitor for BC communities.
   ═══════════════════════════════════════════════════════════════ */

/* Design tokens ------------------------------------------------- */
:root {
  /* SG surface + type ------------------------------------------------- */
}
:root {
  --type-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --type-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --type-data: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* BC Air Quality Health Index band palette — the tactile identity of
     the app. PM2.5/AQHI reads map onto these; the active band tints UI. */
  --band-good: #22c55e;
  --band-moderate: #eab308;
  --band-sensit: #f97316;
  --band-unhealthy: #ef4444;
  --band-vunhealthy: #a855f7;
  --band-hazardous: #be123c;

  /* Measured foreground — a live AQI value sets this from JS; every
     accent that should "glow" with the current air derives from it. */
  --band-ink: #22c55e;
  --band-glow: rgba(34, 197, 94, 0.35);

  --ink: #101922;
  --ink-soft: #3b4754;
  --paper: #f7f4ef;
  --card: #ffffff;

  --hairline: rgba(16, 25, 34, 0.1);
  --ring: var(--band-ink);

  --rad-lg: var(--radius-20);
  --rad: var(--radius-14);
  --rad-sm: 9px;

  /* Canonical radius scale — value-named owners (added by radius consolidation).
     One value, one token; new radii should use these, not literals. */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --topbar-h: 64px;
}

body[data-theme="light"] {
  --ink: #101922;
  --ink-soft: #3b4754;
  --paper: #f7f4ef;
  --card: #ffffff;
  --hairline: rgba(16, 25, 34, 0.1);
}

body[data-theme="dark"] {
  --ink: #eef3f8;
  --ink-soft: #a3b0bd;
  --paper: #0e141c;
  --card: #16202a;
  --hairline: rgba(255, 255, 255, 0.1);
}

/* Lift the old amber as the throwback under the band identity */
body[data-theme="light"] .hard-coded-amber-hide { --accent: var(--band-ink); }

/* ── Typography ─────────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  max-width: 100%;
}
body {
  font-family: var(--type-body);
  background: var(--paper);
  color: var(--ink);
  letter-spacing: 0.01em;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}

/* ── Top bar: substantial size, clean flex containment ───────── */
.topbar {
  min-height: 74px;
  height: auto;
  padding-top: env(safe-area-inset-top);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(10px, 1.5vw, 20px);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(14px);
  backdrop-filter: saturate(1.1) blur(14px);

  border-bottom: 1px solid var(--hairline);
  padding: 12px clamp(14px, 2vw, 28px);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
}
.brand h1 {
  font-family: var(--type-display);
  letter-spacing: -0.02em;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
.brand-sub { font-family: var(--type-body); font-size: 13px; white-space: nowrap; }

/* ── Beta label ─────────────────────────────────────────────────
   Fire Aware is in development, and the header says so on every page
   (side-nav.js injects this one span into the brand block). A label that
   lives only in a changelog entry is not a label a reader sees before
   they trust a perimeter or an air-quality number.

   Filled with --accent and inked dark, the way the Guide pill paints itself
   on hover: the header is not always the light bar the tokens assume — on
   /map.html it is a dark translucent strip over the map, where an inherited
   --link text measured 1.3:1 against what was behind it. A solid fill makes
   the label's contrast a property of the label (6.5:1 on #d97706, 10:1 on the
   dark theme's #f59e0b) instead of a property of the surface it lands on.
   `flex: 0 0 auto` is load-bearing: the brand column is what shrinks at
   phone widths (the ≤900px block gives its parent `overflow: hidden`), and a
   label squeezed to nothing is not a disclosure. */
.beta-chip {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, #000 14%, transparent);
  border-radius: var(--radius-pill);
  background: var(--accent, #d97706);
  color: #1a1206;
  font-family: var(--type-body, inherit);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
}
.top-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
  position: relative;
}
.tn-link, .tn-cat-btn {
  font-family: var(--type-body);
  font-weight: 550;
  font-size: 14px;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--text, var(--ink));
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, var(--card, #ffffff) 40%, transparent);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  cursor: pointer;
}
.tn-link:hover, .tn-cat-btn:hover {
  background: color-mix(in srgb, var(--accent, #d97706) 12%, transparent);
  color: var(--accent, #d97706);
  border-color: color-mix(in srgb, var(--accent, #d97706) 28%, transparent);
  transform: translateY(-1px);
}
.tn-link.active, .tn-cat-btn.active {
  background: color-mix(in srgb, var(--accent, #d97706) 18%, transparent);
  color: var(--link, #a04a08);
  border-color: color-mix(in srgb, var(--accent, #d97706) 38%, transparent);
  font-weight: 650;
}
.tn-cat {
  position: relative;
  display: inline-flex;
}
.tn-chev {
  font-size: 10px;
  opacity: 0.65;
  transition: transform 0.2s ease;
  margin-left: 2px;
}
.tn-cat.open .tn-chev {
  transform: rotate(180deg);
}
.tn-cat.open .tn-cat-btn {
  background: var(--accent, #d97706);
  color: #ffffff !important;
  border-color: var(--accent, #d97706);
}
.tn-cat-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.97);
  min-width: 280px;
  max-width: 330px;
  background: var(--card, #ffffff);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);

  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-16);
  padding: 8px;
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tn-cat.open .tn-cat-drop {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}
.tn-drop-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-10);
  color: var(--text, var(--ink, #101922));
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, max-height 0.15s ease;
  position: relative;
}
.tn-drop-item i {
  font-size: 14px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-8);
  background: color-mix(in srgb, var(--accent, #d97706) 14%, transparent);
  color: var(--accent, #d97706);
  margin-top: 1px;
  flex-shrink: 0;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, max-height 0.15s ease;
}
.tn-drop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.tn-drop-label {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text, var(--ink, #101922));
  /* Top-nav links inherit `white-space: nowrap`, which let long labels and
     descriptions overflow the 280-330px dropdown. Truncate with an ellipsis
     (full text stays available via the title attribute). */
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tn-drop-desc {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted, #64748b);
  overflow-wrap: break-word;
  word-break: break-word;
  /* Top-nav links inherit `white-space: nowrap`, which let long labels and
     descriptions overflow the 280-330px dropdown. Truncate with an ellipsis
     (full text stays available via the title attribute). */
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tn-drop-item:hover {
  background: color-mix(in srgb, var(--accent, #d97706) 12%, var(--surface, #f8fafc));
  transform: translateX(3px);
}
.tn-drop-item:hover .tn-drop-label {
  color: var(--accent, #d97706);
}
.tn-drop-item:hover .tn-drop-desc {
  color: var(--text, var(--ink, #101922));
}
.tn-drop-item.active {
  background: color-mix(in srgb, var(--accent, #d97706) 16%, var(--surface, #f1f5f9));
  border-left: 3px solid var(--accent, #d97706);
}
.tn-drop-item.active .tn-drop-label {
  color: var(--accent, #d97706);
  font-weight: 800;
}
.tn-drop-item.active .tn-drop-desc {
  color: var(--text, var(--ink, #101922));
}
.tn-drop-item.active i {
  background: var(--accent, #d97706);
  color: #ffffff;
}

/* Dark Theme Overrides for Dropdowns and Active Links */
body[data-theme="dark"] .tn-cat-drop,
[data-theme="dark"] .tn-cat-drop {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body[data-theme="dark"] .tn-drop-label,
[data-theme="dark"] .tn-drop-label {
  color: #f1f5f9;
}
body[data-theme="dark"] .tn-drop-desc,
[data-theme="dark"] .tn-drop-desc {
  color: #94a3b8;
}
body[data-theme="dark"] .tn-drop-item:hover,
[data-theme="dark"] .tn-drop-item:hover {
  background: rgba(245, 158, 11, 0.16);
}
body[data-theme="dark"] .tn-drop-item:hover .tn-drop-label,
[data-theme="dark"] .tn-drop-item:hover .tn-drop-label {
  color: #fbbf24;
}
body[data-theme="dark"] .tn-drop-item:hover .tn-drop-desc,
[data-theme="dark"] .tn-drop-item:hover .tn-drop-desc {
  color: #e2e8f0;
}
body[data-theme="dark"] .tn-drop-item.active,
[data-theme="dark"] .tn-drop-item.active {
  background: rgba(245, 158, 11, 0.22);
  border-left: 3px solid #f59e0b;
}
body[data-theme="dark"] .tn-drop-item.active .tn-drop-label,
[data-theme="dark"] .tn-drop-item.active .tn-drop-label {
  color: #ffffff;
  font-weight: 800;
}
body[data-theme="dark"] .tn-drop-item.active .tn-drop-desc,
[data-theme="dark"] .tn-drop-item.active .tn-drop-desc {
  color: #cbd5e1;
}
body[data-theme="dark"] .tn-drop-item.active i,
[data-theme="dark"] .tn-drop-item.active i {
  background: #f59e0b;
  color: #000000;
}
body[data-theme="dark"] .tn-link.active,
body[data-theme="dark"] .tn-cat-btn.active,
body[data-theme="dark"] .top-nav a[aria-current="page"],
body[data-theme="dark"] .top-nav a.active,
[data-theme="dark"] .tn-link.active,
[data-theme="dark"] .tn-cat-btn.active,
[data-theme="dark"] .top-nav a[aria-current="page"],
[data-theme="dark"] .top-nav a.active {
  background: #d97706 !important;
  color: #1a0f0a !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 14px rgba(217, 119, 6, 0.45) !important;
  text-shadow: none !important;
}
.header-socials a { border-color: var(--hairline); width: 32px; height: 32px; font-size: 14px; }
/* Never squeeze the theme icon, status dot, or translate control. The translate
   WIDGET itself is deliberately absent from this group: at these widths it is
   the one flexible control (see its flex block above), and keeping it rigid
   made the payoff come out of the nav links instead. */
.theme-toggle, .status-dot, .header-socials, .npl-widget { flex: none; flex-shrink: 0; }
.theme-toggle {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  cursor: pointer;
}
.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(6px, 1vw, 12px);
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

/* ── Cards: raised, hairline, hospitable radius ──────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--rad);
  box-shadow: 0 1px 2px rgba(16, 25, 34, 0.04), 0 14px 40px -22px rgba(16, 25, 34, 0.18);
}
.card h1, .card h2, .card h3, .card h4 { font-family: var(--type-display); font-weight: 620; letter-spacing: -0.015em; }

/* ── THE SIGNATURE: Live Air Readout ──────────────────────────
   A single large value — the real PM2.5 AQI — is the hero. JS sets
   one CSS var per band, and the whole hero (and page ring) inherits it.
   aria-live so screen readers announce when the reading changes. */
.air-hero {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-24);
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px);
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--band-ink) 62%, transparent), transparent 62%),
    radial-gradient(120% 100% at 100% 100%, color-mix(in srgb, var(--band-ink) 28%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--band-ink) 24%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--band-ink) 28%, var(--hairline));
  color: var(--ink);
  transition: background 0.6s var(--ease-spring), border-color 0.6s var(--ease-spring);
}
.air-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, var(--band-glow), transparent 70%);
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}

.air-hero-eta { font: 700 0.72rem/1 var(--type-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.air-hero-reading {
  display: flex; align-items: baseline; gap: 0.35em; margin-top: 10px;
  font-family: var(--type-display); color: var(--band-ink);
  text-shadow: 0 0 24px var(--band-glow);
}
.air-hero-reading .air-val { font-size: clamp(56px, 12vw, 120px); font-weight: 720; line-height: 0.9; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.air-hero-reading .air-unit { font-size: clamp(18px, 3vw, 30px); font-weight: 540; color: var(--ink-soft); }
.air-hero-band { margin-top: 6px; font-family: var(--type-display); font-size: clamp(18px, 3.6vw, 30px); font-weight: 620; color: var(--band-ink); }
.air-hero-copy { max-width: 46ch; margin-top: 14px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.air-hero .hero-actions { margin-top: 22px; }

.air-band-track { display: flex; gap: 6px; margin-top: 22px; max-width: 460px; }
.air-band-step { flex: 1; height: 6px; border-radius: var(--radius-pill); opacity: 0.18; background: var(--band-step); }
.air-band-step.is-live { opacity: 1; box-shadow: 0 0 12px var(--band-ink); }
.air-band-key { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 11px; color: var(--ink-soft); }
.air-band-key span { display: inline-flex; align-items: center; gap: 6px; }
.air-band-key i { width: 9px; height: 9px; border-radius: var(--radius-circle); background: var(--band-key); flex: none; }

/* Phones wrap this key onto a second row, which breaks the only thing that
   made it readable on a wide screen: six labels silently aligned under the six
   track segments. As a grid the rows stay even at any width, and because every
   label now carries its own swatch the colour no longer depends on that
   alignment at all. */
@media (max-width: 900px) {
  .air-band-key {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr));
    gap: 6px 10px;
  }
}

/* Live sensor tiles under the hero: band-tinted icons */
.sensor-card { border: 1px solid var(--hairline); border-radius: var(--rad); background: var(--card); }
.sensor-value { font-family: var(--type-display); font-variant-numeric: tabular-nums; }
.sensor-up { font-family: var(--type-data); font-size: 11px; color: var(--band-ink); }

/* Fire season stats — urgent red reserved for Out of Control only */
.fire-season-widget { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-20); }
.fire-season-header h2 { font-family: var(--type-display); }
.fire-stat { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--rad); }
.fire-stat-number { font-family: var(--type-display); font-variant-numeric: tabular-nums; }
.fire-stat.is-critical .fire-stat-number { color: #f43f5e; }

/* The breakdown + its tabs and dividers still painted the legacy panel
   gradient, which sat awkwardly beside the flattened stat cards above.
   Pull them onto the same flat card system so the whole widget reads as
   one surface instead of a seam between two skins. */
.fire-cause-breakdown {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--rad);
}
.fire-cause-breakdown h3 { border-bottom-color: var(--hairline); }
.cause-tabs { border-bottom-color: var(--hairline); }
.national-context { border-top-color: var(--hairline); }

/* Footer */
.footer { background: var(--paper); border-top: 1px solid var(--hairline); }
.footer h4 { font-family: var(--type-display); }

/* Focus ring is obvious and theme-aware */
:focus-visible { outline: 2px solid var(--band-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .air-hero, .air-hero::after { transition: none; animation: none; }
}

/* ── The signature, propagated into the map app ───────────────
   A compact live-air pill sits in the map's top control bar. Same
   band system as the home hero (one value, one tint), scaled down so
   it never competes with the map surface. */
.map-air-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink);
  font-family: var(--type-display);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 25, 34, 0.06), 0 8px 22px -18px var(--band-glow);
  transition: border-color 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring);
}
.map-air-pill:hover { border-color: var(--band-ink); }
.map-air-dot {
  width: 9px; height: 9px; border-radius: var(--radius-circle);
  background: var(--band-ink);
  box-shadow: 0 0 10px var(--band-glow);
  flex: none;
}
.map-air-read { display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; }
.map-air-read strong { font-size: 16px; font-weight: 720; font-variant-numeric: tabular-nums; color: var(--band-ink); }
.map-air-read span { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

/* ── Home Page Air Hero Location Bar ────────────────────────── */
.air-hero-location-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.air-hero-eta {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft, var(--muted));
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.air-hero-city {
  color: var(--accent, #f97316);
  font-weight: 750;
}

.air-hero-location-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper, #140e08) 85%, transparent);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.15));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  font-size: 12px;
  font-weight: 600;
  color: var(--ink, var(--text));
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.air-hero-location-btn:hover {
  background: color-mix(in srgb, var(--accent, #d97706) 18%, transparent);
  border-color: var(--accent, #d97706);
  color: var(--accent, #d97706);
  transform: translateY(-1px);
}

.air-hero-location-btn.is-active {
  background: color-mix(in srgb, #16a34a 20%, transparent);
  border-color: #16a34a;
  color: #22c55e;
}

.air-hero-location-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* ── Interactive Guide Enhancements ───────────────────────── */












/* ── Checkout & Product Commerce ────────────────────────────── */
/* minmax(0, 1fr) instead of 1fr throughout: a bare 1fr floors each track at
   the track's min-content, and the order form's inputs are wider than a phone,
   which pushed the form column to 498px inside a 358px grid. */
.checkout-grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 960px) {
  .checkout-grid-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The single column has to be allowed to be narrower than its contents. */
  .checkout-forms-col,
  .checkout-summary-col {
    min-width: 0;
  }
}

.checkout-forms-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.checkout-step-card {
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
}

.checkout-step-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

.checkout-step-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent, #d97706);
  color: #000;
  font-weight: 850;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.checkout-step-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}

.checkout-step-desc {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.checkout-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 600px) {
  .checkout-fields-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.form-group label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.form-group input,
.form-group select {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--accent, #d97706);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.shipping-options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shipping-option-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.shipping-option-row:hover {
  border-color: var(--accent, #d97706);
}

.shipping-option-row input[type="radio"] {
  accent-color: var(--accent, #d97706);
  transform: scale(1.15);
}

.shipping-option-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shipping-option-body strong {
  font-size: 13.5px;
  color: var(--text);
}

.shipping-option-body span {
  font-size: 12px;
  color: var(--muted);
}

.shipping-option-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.payment-tabs-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  flex-wrap: wrap;
}

.payment-tab-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.payment-tab-btn.active {
  background: var(--accent, #d97706);
  border-color: var(--accent, #d97706);
  color: #000;
}

.checkout-summary-card {
  position: sticky;
  top: 90px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.cart-items-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 380px;
  overflow-y: auto;
}

.cart-item-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card, #1c140e) 50%, transparent);
  border: 1px solid var(--border);
}

.cart-item-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(217, 119, 6, 0.15);
  color: var(--accent, #d97706);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.cart-item-details {
  flex: 1;
  min-width: 0;
}

.cart-item-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text);
  line-height: 1.35;
}

.cart-item-remove-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s ease;
}

.cart-item-remove-btn:hover {
  color: #ef4444;
}

.cart-item-sku {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 8px;
}

.cart-item-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

.cart-qty-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cart-qty-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.cart-qty-num {
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
}

.cart-item-price-wrap {
  text-align: right;
}

.cart-item-unit-price {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.cart-item-line-total {
  font-size: 13.5px;
  color: var(--text);
}

.catalog-add-select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  outline: none;
}

.promo-code-wrap {
  margin: 16px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.checkout-calc-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
}

.calc-row.total-row {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.calc-total-amount {
  color: var(--accent, #d97706);
  font-size: 19px;
}

.checkout-trust-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.trust-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.order-timeline-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
  text-align: center;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}

.timeline-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
}

.timeline-step.completed .timeline-step-dot {
  background: #22c55e;
  border-color: #22c55e;
  color: #000;
}

.timeline-step.completed span {
  color: var(--text);
  font-weight: 700;
}

.timeline-step.active .timeline-step-dot {
  background: var(--accent, #d97706);
  border-color: var(--accent, #d97706);
  color: #000;
}

.timeline-step.active span {
  color: var(--accent, #d97706);
  font-weight: 700;
}

/* ── The guide: the page you are on, and the walkthrough ───── */
/* One small ? button in the corner and the panel it opens. It replaced a modal
   with eight tabs, a search box, three simulators and a five-step auto-popup
   that four different buttons all opened. No backdrop-filter here on purpose:
   the panel is non-modal, so it costs no compositing budget. */
.site-guide-floating-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: auto;
  z-index: 1000;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-circle, 999px);
  background: color-mix(in srgb, var(--paper, #140e08) 88%, transparent);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.18));
  color: var(--ink, var(--text));
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: color 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-guide-floating-btn:hover,
.site-guide-floating-btn[aria-expanded="true"] {
  transform: translateY(-2px) scale(1.08);
  background: var(--accent, #d97706);
  color: #000;
  border-color: var(--accent, #d97706);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.45);
}

.site-guide-floating-btn i {
  font-size: 13px;
}

.site-guide-panel {
  position: fixed;
  bottom: 64px;
  left: 20px;
  right: auto;
  z-index: 10003;
  width: min(392px, calc(100vw - 32px));
  max-height: min(72vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 12px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--paper, #140e08) 97%, transparent);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.14));
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  color: var(--ink, var(--text));
  font-family: var(--type-body, system-ui, -apple-system, sans-serif);
  text-align: left;
}

.site-guide-panel:focus-visible {
  outline: 2px solid var(--accent, #d97706);
  outline-offset: 2px;
}

.site-guide-panel[hidden],
.sg-try[hidden],
.sg-links[hidden],
.sg-tour-nav[hidden],
.sg-btn[hidden] {
  display: none !important;
}

.sg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sg-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #d97706) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #d97706) 34%, transparent);
  color: var(--accent, #d97706);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.sg-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.sg-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.16));
  background: transparent;
  color: var(--ink, var(--text));
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.sg-close:hover {
  background: color-mix(in srgb, var(--accent, #d97706) 16%, transparent);
  border-color: var(--accent, #d97706);
}

.sg-what {
  margin: 0 0 10px;
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--ink-soft, var(--muted, #64748b));
}

.sg-try {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sg-try li {
  position: relative;
  padding-left: 16px;
  font-size: 12.8px;
  line-height: 1.5;
}

.sg-try li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent, #d97706);
}

.sg-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.sg-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.16));
  background: color-mix(in srgb, var(--card, #1c140e) 70%, transparent);
  color: var(--ink, var(--text));
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.sg-link:hover {
  border-color: var(--accent, #d97706);
  color: var(--accent, #d97706);
}

.sg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
}

.sg-tour-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sg-btn {
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.16));
  background: transparent;
  color: var(--ink, var(--text));
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s cubic-bezier(0.16, 1, 0.3, 1), color 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.sg-btn:hover {
  border-color: var(--accent, #d97706);
  color: var(--accent, #d97706);
}

.sg-btn--primary {
  background: var(--accent, #d97706);
  border-color: var(--accent, #d97706);
  color: #000;
}

.sg-btn--primary:hover {
  color: #000;
  transform: translateY(-1px);
}

.sg-btn--ghost {
  color: var(--ink-soft, var(--muted, #64748b));
}

@media (max-width: 768px) {
  .site-guide-floating-btn {
    bottom: 16px;
    left: 16px;
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .site-guide-panel {
    left: 12px;
    right: 12px;
    bottom: 54px;
    width: auto;
    max-height: 66vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-guide-floating-btn,
  .site-guide-panel,
  .sg-btn {
    transition: none !important;
  }
}

/* ── Even 2-Line Statistics & Analytics Charts Grid ────────── */
.dashboard-grid--charts {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
}

@media (max-width: 1280px) {
  .dashboard-grid--charts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .dashboard-grid--charts {
    grid-template-columns: 1fr !important;
  }
}

.chart-card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

.chart-card .chart-frame {
  flex: 1;
  min-height: 190px;
  position: relative;
}

/* ── Themed Canadian FBP / FWI Analysis Cards ──────────────── */
.fbp-result-card,
.fwi-result-card {
  background: color-mix(in srgb, var(--surface, #1e1610) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,0.12)) 80%, #f97316);
  border-radius: var(--radius-14);
  padding: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

}

.fbp-header-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.fbp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fbp-badge--extreme { background: rgba(220, 38, 38, 0.2); color: #ef4444; border: 1px solid rgba(220, 38, 38, 0.4); }
.fbp-badge--high { background: rgba(234, 88, 12, 0.2); color: #f97316; border: 1px solid rgba(234, 88, 12, 0.4); }
.fbp-badge--moderate { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.fbp-badge--low { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.4); }

.fbp-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.fbp-metric-box {
  background: color-mix(in srgb, var(--panel, #18120c) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-10);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s;
}

.fbp-metric-box:hover {
  border-color: color-mix(in srgb, var(--accent, #d97706) 50%, var(--border));
}

.fbp-metric-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.fbp-metric-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.fbp-metric-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}

.fbp-meter {
  margin-top: 4px;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.fbp-meter-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.4s ease;
}

.fbp-advisory-box {
  background: color-mix(in srgb, var(--surface, #1e1610) 95%, #ea580c);
  border: 1px solid rgba(234, 88, 12, 0.35);
  border-left: 4px solid #ea580c;
  padding: 10px 14px;
  border-radius: var(--radius-8);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  margin-top: 10px;
}

/* ── Detection Map Sensor Compare Bottom Dock & Floating Widgets Lift ── */
body.sensor-compare-active .chatbot-widget,
body.sensor-compare-active .chatbot-toggler,
body.sensor-compare-active #chatbotToggle,
body.sensor-compare-active #chatbotWidget,
body.sensor-compare-active .search-widget,
body.sensor-compare-active .site-guide-floating-btn {
  bottom: calc(20px + var(--compare-dock-height, 136px)) !important;
  transition: bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* The panel opens above the button, so it clears the same comparison dock. */
body.sensor-compare-active .site-guide-panel {
  bottom: calc(64px + var(--compare-dock-height, 136px)) !important;
  transition: bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#sensorCompareTray {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 200px;
  background: color-mix(in srgb, var(--paper, #140e08) 94%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);

  border-top: 1px solid var(--hairline, rgba(255, 255, 255, 0.18));
  box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.45);
  z-index: 9990;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 10px 18px 12px;
  box-sizing: border-box;
}

#sensorCompareTray.active {
  transform: translateY(0);
}

.compare-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.compare-tray-cards {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.compare-sensor-card {
  min-width: 230px;
  max-width: 270px;
  background: color-mix(in srgb, var(--surface, #1e1610) 90%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-10);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: border-color 0.2s ease;
}

.compare-sensor-card:hover {
  border-color: color-mix(in srgb, var(--accent, #d97706) 60%, var(--border));
}

.compare-sensor-card-empty {
  min-width: 200px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-10);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.02);
}

/* ── Mobile Polish for Sensor Compare Tray & Modal ── */
@media (max-width: 768px) {
  #sensorCompareTray {
    padding: 8px 10px 10px;
    max-height: 220px;
  }
  .compare-tray-header {
    gap: 6px;
    margin-bottom: 6px;
  }
  .compare-tray-header strong {
    font-size: 11.5px !important;
  }
  .compare-tray-cards {
    gap: 8px;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
  }
  .compare-sensor-card {
    min-width: 175px;
    max-width: 215px;
    padding: 7px 10px;
    scroll-snap-align: start;
  }
  .compare-sensor-card-empty {
    min-width: 160px;
    padding: 8px 10px;
    font-size: 10.5px;
    scroll-snap-align: start;
  }
  #compare-modal {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 88vh !important;
    padding: 14px 10px !important;
    border-radius: var(--radius-14) !important;
  }
  #compare-modal h2 {
    font-size: 15px !important;
  }
  .comparison-table th,
  .comparison-table td {
    padding: 8px 10px !important;
    font-size: 11.5px !important;
  }
  .comparison-table td:first-child,
  .comparison-table th:first-child {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 2;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
  }
}


/* ═══════════════════════════════════════════════════════════════
   COOKIE CONSENT & PRIVACY SYSTEM
   Language modal → Cookie banner → Preferences modal
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared backdrop ──────────────────────────────────────────── */
.consent-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: consentFadeIn 0.25s ease;
}
.consent-backdrop.fade-out {
  animation: consentFadeOut 0.25s ease forwards;
}
@keyframes consentFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes consentFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ── Modal container ──────────────────────────────────────────── */
.consent-modal {
  background: var(--card, #fff);
  border-radius: var(--radius-20);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  max-width: 480px;
  width: 100%;
  padding: 32px;
  color: var(--text, #101922);
  animation: consentSlideUp 0.3s ease;
}
.consent-modal.pref-modal {
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
}
@keyframes consentSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.consent-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.consent-brand-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-12);
  background: linear-gradient(135deg, #f59e0b, #d97706);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
  margin-right: 12px;
}
.consent-close-btn {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted, #64748b);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-10);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.consent-close-btn:hover {
  background: var(--surface, #f1f5f9);
  color: var(--text, #101922);
}
.consent-subtitle {
  font-size: 14px;
  color: var(--muted, #64748b);
  margin-bottom: 20px;
  line-height: 1.5;
}
.consent-note-text {
  font-size: 12px;
  color: var(--muted, #94a3b8);
  margin-top: 14px;
  text-align: center;
}

/* ── Language selection buttons ────────────────────────────────── */
.consent-language-group {
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
}
.consent-lang-btn {
  flex: 1;
  padding: 18px 14px;
  border: 2px solid var(--hairline, rgba(0,0,0,0.12));
  border-radius: var(--radius-14);
  background: var(--surface, #f8fafc);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.consent-lang-btn:hover {
  border-color: #d97706;
  background: rgba(217, 119, 6, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.15);
}
.consent-lang-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #101922);
}
.consent-lang-native {
  font-size: 12px;
  color: var(--muted, #64748b);
}

/* ── Cookie consent banner ────────────────────────────────────── */
.fire-aware-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: var(--card, #ffffff);
  border-top: 1px solid var(--hairline, rgba(0,0,0,0.1));
  box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
  padding: 20px 28px;
  animation: bannerSlideUp 0.4s ease;
}
@keyframes bannerSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.fire-aware-cookie-banner.banner-slide-down {
  animation: bannerSlideDown 0.3s ease forwards;
}
@keyframes bannerSlideDown {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

.cookie-banner-content {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  min-width: 280px;
}
.cookie-banner-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 6px;
  color: var(--text, #101922);
}
.cookie-banner-text p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #64748b);
  margin: 0 0 6px;
}
.cookie-banner-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.cookie-policy-link {
  color: var(--accent, #d97706) !important;
  font-weight: 600;
  text-decoration: none;
}
.cookie-policy-link:hover {
  text-decoration: underline;
}
.cookie-sep {
  color: var(--muted, #94a3b8);
  font-size: 10px;
}

/* ── Consent action buttons ───────────────────────────────────── */
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.btn-cookie-primary {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-10);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.btn-cookie-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);
}
.btn-cookie-secondary {
  background: var(--surface, #f1f5f9);
  color: var(--text, #101922);
  border: 1px solid var(--hairline, rgba(0,0,0,0.12));
  padding: 10px 20px;
  border-radius: var(--radius-10);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.btn-cookie-secondary:hover {
  background: var(--hairline, rgba(0,0,0,0.06));
}
.btn-cookie-ghost {
  background: transparent;
  color: var(--accent, #d97706);
  border: 1px solid var(--accent, #d97706);
  padding: 10px 20px;
  border-radius: var(--radius-10);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.btn-cookie-ghost:hover {
  background: rgba(217, 119, 6, 0.08);
}

/* ── Preferences modal specifics ──────────────────────────────── */
.pref-modal-intro p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #64748b);
  margin: 0 0 16px;
}
.pref-categories-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.pref-category-card {
  background: var(--surface, #f8fafc);
  border: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-radius: var(--radius-14);
  padding: 16px;
}
.pref-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pref-cat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pref-cat-title strong {
  font-size: 14px;
  color: var(--text, #101922);
}
.pref-badge-required {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  padding: 2px 8px;
  border-radius: var(--radius-6);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pref-badge-optional {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  padding: 2px 8px;
  border-radius: var(--radius-6);
  font-size: 11px;
  font-weight: 700;
}
.pref-badge-none {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
  padding: 2px 8px;
  border-radius: var(--radius-6);
  font-size: 11px;
  font-weight: 700;
}
.pref-cat-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, #94a3b8);
  margin: 0;
}

/* ── Toggle switch slider ─────────────────────────────────────── */
.pref-switch-wrap {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.pref-switch-wrap .pref-switch {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.pref-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: var(--radius-24);
  transition: background 0.25s;
}
.pref-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  background: #fff;
  left: 3px;
  bottom: 3px;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.pref-switch:checked + .pref-slider {
  background: #16a34a;
}
.pref-switch:checked + .pref-slider::before {
  transform: translateX(20px);
}
.pref-switch:disabled + .pref-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Preferences modal footer ─────────────────────────────────── */
.pref-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--hairline, rgba(0,0,0,0.08));
}

/* ── Dark mode overrides ──────────────────────────────────────── */
[data-theme="dark"] .consent-modal,
[data-theme="dark"] .fire-aware-cookie-banner {
  background: var(--card, #1e293b);
  border-color: var(--hairline, rgba(255,255,255,0.08));
}
[data-theme="dark"] .consent-lang-btn {
  background: var(--surface, #0f172a);
  border-color: var(--hairline, rgba(255,255,255,0.1));
}
[data-theme="dark"] .consent-lang-btn:hover {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
[data-theme="dark"] .pref-category-card {
  background: var(--surface, #0f172a);
  border-color: var(--hairline, rgba(255,255,255,0.06));
}
[data-theme="dark"] .btn-cookie-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text, #e2e8f0);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .consent-close-btn:hover {
  background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .pref-slider {
  background: #475569;
}

/* ── Mobile responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .consent-modal {
    padding: 24px 18px;
    border-radius: var(--radius-16);
    max-width: 100%;
  }
  .consent-language-group {
    flex-direction: column;
  }
  .cookie-banner-content {
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner-actions {
    flex-direction: column;
  }
  .cookie-banner-actions button {
    width: 100%;
  }
  .pref-modal-footer {
    flex-direction: column;
  }
  .pref-modal-footer button {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH & AI CHATBOT WIDGETS
   ═══════════════════════════════════════════════════════════════ */

.hidden {
  display: none !important;
}

/* ── Search Widget (Stacked on Top of Chatbot) ───────────────── */
.search-widget {
  position: fixed;
  bottom: 84px;
  right: 28px;
  z-index: 100010;
  pointer-events: auto;
}

.search-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: var(--card, #ffffff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  color: var(--text, #1f2933);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-btn i,
.chatbot-toggle i,
.chatbot-toggle .unread-badge {
  pointer-events: none;
}

.search-btn:hover {
  transform: scale(1.08) translateY(-2px);
  background: var(--accent, #d97706);
  color: #ffffff;
  border-color: var(--accent, #d97706);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.45);
}

.search-box {
  position: absolute;
  bottom: 52px;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--card, #ffffff);
  color: var(--text, #1f2933);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.18));
  border-radius: var(--radius-16);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: widgetSlideUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  z-index: 100011;
  pointer-events: auto;
}

.search-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--muted, #6b7280);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-4);
  transition: color 0.15s ease;
}

.search-close:hover {
  color: var(--text, #1f2933);
}

#searchInput {
  width: 100%;
  padding: 10px 32px 10px 12px;
  border-radius: var(--radius-10);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  background: var(--surface, #f3f0ea);
  color: var(--text, #1f2933);
  font-size: 13.5px;
  font-weight: 600;
  box-sizing: border-box;
  outline: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

#searchInput:focus {
  border-color: var(--accent, #d97706);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #d97706) 22%, transparent);
}

.search-results {
  max-height: 330px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-20);
  background: var(--surface, #f3f0ea);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  color: var(--text, #1f2933);
  font-size: 11.5px;
  font-weight: 650;
  text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease, max-height 0.18s ease;
}

.search-quick-chip:hover {
  background: var(--accent, #d97706);
  color: #ffffff;
  transform: translateY(-1px);
}

.search-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-10);
  text-decoration: none;
  color: var(--text, #1f2933);
  transition: background 0.15s ease;
}

.search-result:hover {
  background: color-mix(in srgb, var(--accent, #d97706) 14%, transparent);
}

.search-category-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: var(--radius-4);
  background: color-mix(in srgb, var(--accent, #d97706) 18%, transparent);
  color: var(--accent, #d97706);
}
/* Responsive Search Widget */
@media (max-width: 640px) {
  .search-widget {
    bottom: 74px;
    right: 20px;
  }
  .search-btn {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }
  .search-box {
    bottom: 50px;
    right: 0;
    width: calc(100vw - 28px);
  }
}


/* ==========================================================================
   GETTING STARTED ENHANCEMENTS (Home Section & Dedicated Page)
   ========================================================================== */
.getting-started-section {
  padding: 32px 32px 28px !important;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-16);
  background: var(--surface);
  border: 1px solid var(--border);
}

.gs-role-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
}

.gs-role-label {
  font-size: 12.5px;
  font-weight: 750;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

.gs-role-pill {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-role-pill:hover {
  background: color-mix(in srgb, var(--accent, #d97706) 12%, transparent);
  border-color: var(--accent, #d97706);
  color: var(--accent, #d97706);
  transform: translateY(-1px);
}

.gs-role-pill.active {
  background: var(--accent, #d97706);
  color: var(--on-accent, #231a0f) !important;
  border-color: var(--accent, #d97706);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #d97706) 40%, transparent);
}

.gs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.gs-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-14);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.gs-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent, #d97706) 60%, var(--border));
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.gs-card.dimmed {
  opacity: 0.35;
  filter: grayscale(0.6);
  pointer-events: none;
}

.gs-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.gs-step-badge {
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  padding: 3px 8px;
  border-radius: var(--radius-6);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--border);
  color: var(--muted);
}

.gs-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gs-tag-live {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.gs-tag-live i {
  animation: pulseDot 1.8s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.gs-tag-aqi {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.gs-tag-route {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.gs-tag-guide {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.gs-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
  background: hsl(var(--accent-hue, 25), 85%, 94%);
  color: hsl(var(--accent-hue, 25), 85%, 45%);
  border: 1px solid hsl(var(--accent-hue, 25), 85%, 85%);
  transition: transform 0.2s ease;
}

body[data-theme="dark"] .gs-icon-wrap {
  background: hsl(var(--accent-hue, 25), 65%, 15%);
  color: hsl(var(--accent-hue, 25), 85%, 70%);
  border: 1px solid hsl(var(--accent-hue, 25), 65%, 28%);
}

.gs-card:hover .gs-icon-wrap {
  transform: scale(1.08) rotate(2deg);
}

.gs-card-title {
  font-size: 16.5px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--text);
  line-height: 1.3;
}

.gs-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 14px;
  flex: 1;
}

.gs-card-meta {
  display: flex;
  gap: 12px;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.gs-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.gs-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.gs-btn {
  padding: 8px 14px;
  border-radius: var(--radius-8);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.gs-btn.primary {
  background: var(--accent, #d97706);
  color: #fff;
  border: 1px solid var(--accent, #d97706);
}

.gs-btn.primary:hover {
  background: color-mix(in srgb, var(--accent, #d97706) 88%, #000);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, #d97706) 35%, transparent);
  transform: translateY(-1px);
}

.gs-btn.secondary {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--text);
  border: 1px solid var(--border);
}

.gs-btn.secondary:hover {
  background: var(--surface);
  border-color: var(--accent, #d97706);
  color: var(--accent, #d97706);
  transform: translateY(-1px);
}

.gs-btn.text {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 8px 10px;
}

.gs-btn.text:hover {
  color: var(--text);
  text-decoration: underline;
}

.gs-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.gs-footer-label {
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gs-footer-label i {
  color: var(--accent, #d97706);
}

.gs-footer-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gs-footer-links a {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.gs-footer-links a:hover {
  border-color: var(--accent, #d97706);
  color: var(--accent, #d97706);
  background: var(--surface);
  transform: translateY(-1px);
}

/* Dedicated Getting Started Onboarding Page Styles */
.onboarding-hero {
  padding: 44px 36px;
  border-radius: var(--radius-20);
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 95%, transparent), color-mix(in srgb, var(--surface) 80%, transparent));
  border: 1px solid var(--border);
  box-shadow: 0 12px 36px rgba(0,0,0,0.06);
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.onboarding-hero::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent, #d97706) 22%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.checklist-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-12);
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.checklist-item:hover {
  border-color: var(--accent, #d97706);
  transform: translateX(4px);
}

.checklist-item.completed {
  background: color-mix(in srgb, #10b981 8%, var(--bg));
  border-color: rgba(16, 185, 129, 0.4);
}

.checklist-item.completed .checklist-title {
  text-decoration: line-through;
  color: var(--muted);
}

.checklist-checkbox {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-6);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  margin-top: 2px;
  flex-shrink: 0;
}

.checklist-item.completed .checklist-checkbox {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

.checklist-text {
  flex: 1;
}

.checklist-title {
  font-size: 14px;
  font-weight: 750;
  color: var(--text);
  margin: 0 0 4px;
}

.checklist-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .getting-started-section {
    padding: 20px 16px !important;
  }
  .gs-role-filter {
    flex-direction: column;
    align-items: stretch;
  }
  .gs-footer-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .onboarding-hero {
    padding: 28px 20px;
  }
}


/* Web Interface Guidelines: balanced headings, honest numeric columns,
   anchored-heading scroll offset under the sticky topbar. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
td, th { font-variant-numeric: tabular-nums; }
a, button { touch-action: manipulation; }
h1[id], h2[id], h3[id], h4[id] { scroll-margin-top: 84px; }

/* ==================================================================
   Mobile chrome — one honest header row (≤900px)

   At ≤900px the bar was trying to hold a 64px mark, the brand, the BC PL
   pill, the guide button and the theme toggle in a single flex row. Those
   need ~430px together, so on a 390px phone the actions — packed with
   justify-content: flex-end — overflowed past their own start edge and
   painted over "Fire Aware" (readers saw "Fi"), while the guide button,
   the only item nothing was holding open, collapsed to a 26-30px sliver
   with its label clipped away.

   Measured at 390×844 before this block: bar 81px tall, mark 64×64,
   #siteGuideBtn 30×38 (26px on route-planner), #nplWidget's left edge
   68px to the left of its own parent's.

   Three changes keep the row inside the viewport without hiding anything
   that is not reachable elsewhere:
     - the mark shrinks to 34px, so a 56px bar can carry the brand;
     - the pill drops its "derived" basis note (the widget still spells
       that out in its accessible text) and keeps pip + level;
     - the bar's guide button goes, because the drawer already carries
       "Interactive Guide" (side-nav.js, #sideNavGuideBtn) and the help
       cluster opens the same panel.

The brand is the item that yields last, and it yields by ellipsis: the
actions are never allowed to shrink (that is the state that overlapped),
so an unusually narrow phone reads a shortened wordmark instead of a
collision.
   ================================================================== */
@media (max-width: 900px) {
  .topbar {
    /* The legacy ≤900px block earlier in this file asserts both of these
       with !important, so the same flag is the only way to win here. */
    min-height: 56px !important;
    padding: 6px 12px 6px 58px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .brand {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .brand-copy {
    min-width: 0;
    flex: 1 1 auto;
  }

  /* The link must stay shrinkable (its default): it is the item that gives way
     at 320px, and the wordmark inside it ellipsises. Pinning the link is what
     clipped the label instead — 3px at 390px, 73px at 320px. The label itself
     never shrinks and now sits on its own row, so it costs the row no width. */
  .beta-chip {
    padding: 2px 6px;
    font-size: 9.5px;
    letter-spacing: 0.07em;
  }

  .brand-logo {
    width: 34px;
    height: 34px;
  }

  .brand h1 {
    font-size: 17px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-actions {
    flex: 0 0 auto;
    min-width: 0;
    gap: 6px;
  }

  .npl-widget {
    height: 34px;
    padding: 0 9px;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
  }

  .npl-widget .npl-basis {
    display: none;
  }

  #siteGuideBtn {
    display: none !important;
  }

  .theme-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  /* Anchored headings have to clear a 56px bar, not the 81px one the 84px
     offset was written against. */
  h1[id], h2[id], h3[id], h4[id] {
    scroll-margin-top: 64px;
  }

  /* ".prepared-card-head .ghost-btn { flex: none; white-space: nowrap }" keeps
     the label from breaking up on a wide screen, but in a phone-width head it
     meant the button could neither shrink nor wrap: a 211px button sitting at
     x=180 inside a 258px head ran 32px past the viewport, taking its arrow icon
     with it. Wrapping the head drops the button to its own line instead. */
  .prepared-card-head {
    flex-wrap: wrap;
  }

}

/* ==================================================================
   Mobile footer — a deliberate layout instead of whatever auto-fit left

   `.footer-content` is `repeat(auto-fit, minmax(150px, 1fr))`. At 390px
   that resolves to two 169px tracks, and what it produced was not
   designed, it was emergent:

     * the brand's 96px mark shared a 169px cell with a link list;
     * Product (6 links) and Company (5) paired up, but Support & Legal
       — 10 links — ran 344px down one 169px gutter and set the height of
       the row beside it;
     * the fifth item was the Translate control, which landed alone in
       row three, leaving half the row empty;
     * the footer stood 922px tall under a 390px screen.

   These rules make the layout deliberate: three tracks while there is
   room for them (brand | Product | Company, then the long group and the
   Translate row across the full width), two tracks once there is not
   (brand on its own row, then the paired lists), and the long group
   splitting into two balanced columns of its own at every phone width.
   Nothing is left half empty and no link column is taller than its
   neighbour.

   Measured at 390px, before → after: grid rows used 100/100/31% →
   100/100/100/100% of the content width; Support & Legal 356px tall in a
   169px gutter → 194px in two 168px columns; the Translate box 110px →
   354px wide, with its dropdown inside it rather than hanging off the
   screen. The block itself is the same height (922px → 923px); what
   changed is that every pixel of it now belongs to something.
   ================================================================== */
@media (max-width: 768px) {
  .footer {
    padding: 30px 18px 22px;
    margin-top: 32px;
  }

  .footer-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 18px;
    margin-bottom: 16px;
  }

  /* Support & Legal: ten links in one gutter. Give it the full width and
     two balanced columns, so it stops setting its neighbour's row height. */
  .footer-content > .footer-section-wide {
    grid-column: 1 / -1;
  }

  .footer-content > .footer-section-wide ul {
    columns: 2;
    column-gap: 18px;
  }

  .footer-content > .footer-section-wide li {
    break-inside: avoid;
  }

  /* Rows size to their own content: the grid's default stretch made the
     shorter list in a row look like it had padding nobody asked for. */
  .footer-content > .footer-section {
    align-self: start;
  }

  .footer-bottom {
    padding-top: 18px;
  }

  /* Three centred contact rows instead of a ragged wrap, and social targets
     at 40px with a 12px gutter so a thumb has somewhere to land. */
  .footer-contact {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
  }

  .footer-socials {
    gap: 12px;
    margin-bottom: 16px;
  }

  .footer-socials a {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 520px) {
  /* Below this the three tracks fall under ~165px, where the brand mark can no
     longer share a row with a link list (and "Residential Exposure" stops
     fitting a column): the brand takes its own full-width row and the two
     balanced groups pair up underneath it. */
  .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-content > .footer-logo {
    grid-column: 1 / -1;
  }

  .footer-brand-logo {
    width: 80px;
    height: 80px;
  }
}

/* ── Installable app (PWA) ─────────────────────────────────────
   The manifest and service worker make the site installable; these rules are
   only the visible invitation. The header keeps the control icon-sized so it
   cannot repeat the old header-overlap bug, and the drawer carries the labelled
   version where a phone has room for one. */
.pwa-install-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pwa-install-btn.is-available { display: inline-flex; }
.pwa-install-btn[hidden] { display: none !important; }
.pwa-install-btn i { font-size: 12px; line-height: 1; }
.pwa-install-btn span { display: none; }

.pwa-install-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.pwa-install-btn:active { transform: translateY(1px); }

@media (min-width: 1400px) {
  .pwa-install-btn span { display: inline; }
}

@media (max-width: 900px) {
  /* The phone header is already at its width budget; the drawer entry below
     is the install control there. */
  .pwa-install-btn.is-available { display: none; }
}

.side-nav-install {
  display: none !important;
}

.side-nav-install.is-available {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: var(--radius-10, 10px);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong) !important;
  font-weight: 700;
  flex: 1 1 auto;
}

.side-nav-install i { width: 18px; text-align: center; }

.pwa-nudge {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90000;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper, #140e08) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

.pwa-nudge-icon { border-radius: 8px; flex: none; }

.pwa-nudge-copy { min-width: 0; }

.pwa-nudge-title { margin: 0; font-weight: 700; font-size: 14px; color: var(--text); }
.pwa-nudge-body { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.pwa-nudge-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.pwa-nudge-install {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 15px;
  cursor: pointer;
}

.pwa-nudge-install:hover { filter: brightness(1.08); }
.pwa-nudge-dismiss { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; padding: 9px 8px; cursor: pointer; }
.pwa-nudge-dismiss:hover { color: var(--text); }

@media (max-width: 520px) {
  .pwa-nudge { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; }
  .pwa-nudge-actions { justify-content: center; }
}

/* Dialog */
.pwa-dialog {
  position: fixed;
  inset: 0;
  z-index: 100020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pwa-dialog[hidden] { display: none; }

.pwa-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 5, 0.66);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.pwa-dialog.is-open .pwa-dialog-backdrop { opacity: 1; }

.pwa-dialog-panel {
  position: relative;
  width: min(100%, 440px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 30px 28px 26px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.72);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pwa-dialog.is-open .pwa-dialog-panel {
  opacity: 1;
  transform: none;
}

.pwa-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pwa-dialog-close:hover { border-color: var(--accent); color: var(--accent-strong); }

.pwa-dialog-logo {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 16px;
}

.pwa-dialog-panel h2 {
  margin: 0 0 8px;
  padding-right: 32px;
  font-size: clamp(21px, 4vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.pwa-dialog-lead {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.pwa-dialog-steps {
  margin: 0 0 18px;
  padding-left: 21px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

.pwa-dialog-steps li { margin-bottom: 8px; padding-left: 2px; }
.pwa-dialog-steps li:last-child { margin-bottom: 0; }

.pwa-dialog-note {
  margin: 0 0 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.pwa-dialog-ok {
  width: 100%;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.pwa-dialog-ok:hover { background: var(--accent-light); border-color: var(--accent-light); }

body.pwa-dialog-open { overflow: hidden; }

@media (max-width: 480px) {
  .pwa-dialog {
    align-items: flex-end;
    padding: 12px;
  }

  .pwa-dialog-panel {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 26px 20px 20px;
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-dialog-backdrop,
  .pwa-dialog-panel,
  .pwa-install-btn {
    transition: none;
  }
}

/* ── Account entry and social sign-in ───────────────────────── */
.header-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.header-account-btn:hover,
.header-account-btn.active {
  color: var(--accent-dark);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  transform: translateY(-1px);
}

.header-account-btn i { font-size: 16px; }

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  background: var(--card);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.oauth-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.oauth-btn i { font-size: 15px; }
.oauth-btn[data-provider="google"] i { color: #4285f4; }
.oauth-btn[data-provider="saml"] i { color: #0f766e; }
.oauth-btn[data-provider="github"] i { color: #24292f; }
.oauth-btn[data-provider="apple"] i { color: var(--text); }
.oauth-btn[data-provider="azure"] i { color: #0078d4; }
.oauth-btn[data-provider="bitbucket"] i { color: #0052cc; }
.oauth-btn[data-provider="discord"] i { color: #5865f2; }
.oauth-btn[data-provider="facebook"] i { color: #1877f2; }
.oauth-btn[data-provider="figma"] i { color: #f24e1e; }
.oauth-btn[data-provider="gitlab"] i { color: #fc6d26; }
.oauth-btn[data-provider="kakao"] i { color: #191919; }
.oauth-btn[data-provider="keycloak"] i { color: #4d7aa8; }
.oauth-btn[data-provider="linkedin_oidc"] i { color: #0a66c2; }
.oauth-btn[data-provider="notion"] i { color: #111111; }
.oauth-btn[data-provider="slack_oidc"] i { color: #4a154b; }
.oauth-btn[data-provider="spotify"] i { color: #1db954; }
.oauth-btn[data-provider="twitch"] i { color: #9146ff; }
.oauth-btn[data-provider="twitter"] i { color: #111111; }
.oauth-btn[data-provider="workos"] i { color: #6363f1; }
.oauth-btn[data-provider="zoom"] i { color: #2d8cff; }

[data-theme="dark"] .oauth-btn[data-provider="github"] i,
[data-theme="dark"] .oauth-btn[data-provider="notion"] i,
[data-theme="dark"] .oauth-btn[data-provider="twitter"] i { color: #f0f6fc; }

.oauth-badge {
  margin-left: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--accent-dark, #b45309);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-theme="dark"] .oauth-badge { color: var(--accent, #f59e0b); }

@media (max-width: 1280px) {
  .header-account-btn { width: 38px; padding: 0; }
  .header-account-btn span { display: none; }
}