/* =========================================================
   THISIS DESIGN SYSTEM - GARDEN MORNING
   Inspired by Singapore's "City in Nature"
   ========================================================= */

/* Self-hosted & CDN fallback font-face for Material Symbols */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('/fonts/material-symbols-outlined.woff2') format('woff2'),
       url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v369/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2') format('woff2');
}

:root {
  /* Page-drawer accents: one per theme so a detail page announces its parent. */
  --theme-transit: #1f5fa8;
  --theme-weather: #2a7aa3;
  --theme-lifestyle: #b4571f;
  /* Garden Morning Theme (Default Light) */
  --color-primary: #334f2b;
  --color-on-primary: #ffffff;
  --color-primary-container: #4a6741;
  --color-on-primary-container: #c2e4b4;
  --color-primary-fixed: #caecbc;
  
  --color-secondary: #735c00;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fed65b;
  --color-on-secondary-container: #745c00;
  --color-secondary-fixed: #ffe088;
  
  --color-tertiary: #384c44;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #4f645b;
  --color-on-tertiary-container: #c9e0d4;
  --color-tertiary-fixed: #d1e8dd;
  --color-on-tertiary-fixed-variant: #374b43;

  --color-background: #faf9f4;
  --color-on-background: #1b1c19;
  --color-surface: #faf9f4;
  --color-surface-dim: #dbdad5;
  --color-surface-lowest: #ffffff;
  --color-surface-low: #f5f4ef;
  --color-surface-container: #efeee9;
  --color-surface-container-low: #f2f1ec;
  --color-surface-high: #e9e8e3;
  --color-surface-highest: #e3e3de;
  --color-surface-container-high: var(--color-surface-high);
  --color-surface-container-highest: var(--color-surface-highest);
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #000);
  --color-surface-variant: #e3e3de;
  --color-on-surface: #1b1c19;
  --color-on-surface-variant: #434840;
  --color-outline: #5a6157;
  --color-outline-variant: #c3c8bd;

  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;

  /* Status semantics — theme-aware so hazard colours work in dark mode too */
  --color-success: #16a34a;
  --color-success-container: rgba(34, 197, 94, 0.14);
  --color-warning: #b45309;
  --color-warning-container: rgba(234, 179, 8, 0.16);
  --color-on-warning: #ffffff;
  --color-danger: #dc2626;
  --color-danger-container: rgba(239, 68, 68, 0.14);
  --color-unhealthy: #ea580c;
  --color-info: #0284c7;
  --color-info-container: rgba(2, 132, 199, 0.12);
  --color-star: #eab308;
  --color-star-fixed: #fef3c7;
  --color-star-ink: #b45309;
  /* Text-safe status colours (>=4.5:1 on light surfaces); fills keep the base tokens */
  --color-success-text: #166534;
  --color-info-text: #075985;
  --color-unhealthy-text: #9a3412;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Layering */
  --z-content: 1;
  --z-nav: 180;
  --z-modal: 600;
  --z-toast: 1000;

  /* Motion */
  --motion-fast: 0.18s;
  --motion-base: 0.26s;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-ambient: 0 4px 16px rgba(27, 28, 25, 0.04);
  --shadow-card: 0 4px 20px -2px rgba(27, 28, 25, 0.06);
  --shadow-float: 0 10px 30px -4px rgba(51, 79, 43, 0.08);
  --shadow-elevated: 0 8px 24px -4px rgba(27, 28, 25, 0.14);

  /* Glassmorphism */
  --glass-bg: rgba(250, 249, 244, 0.92);
  --glass-card-bg: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(195, 200, 189, 0.4);
  --glass-blur: blur(20px);
}

/* Settings: visual theme picker (2×2 so labels never truncate at 360px) */
.theme-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.theme-select-grid .theme-select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 8px;
  font-size: var(--text-base);
  white-space: nowrap;
}

/* Amber Theme */
body[data-theme="amber"] {
  --color-primary: #735c00;
  --color-primary-container: #8e4d34;
  --color-on-primary-container: #ffdcc2;
  --color-primary-fixed: #ffe088;
  --color-background: #fdfaf6;
  --color-surface: #fdfaf6;
  --color-surface-low: #f8f3eb;
  --color-surface-lowest: #ffffff;
  --color-tertiary-fixed: #f7e6ce;
  --color-outline-variant: #dfd8cc;
  --color-star: #ca8a04;
  --color-star-fixed: #fef3c7;
  --color-star-ink: #854d0e;
  --glass-bg: rgba(253, 250, 246, 0.92);
}

/* Dark Theme */
body[data-theme="dark"] {
  --color-primary: #afd0a1;
  --color-on-primary: #062104;
  --color-primary-container: #334f2b;
  --color-on-primary-container: #c2e4b4;
  --color-primary-fixed: #243a2a;
  --color-on-primary-fixed: #cfe9c4;
  
  --color-secondary: #e0c46c;
  --color-on-secondary: #3c2f00;
  --color-secondary-container: #574500;
  --color-on-secondary-container: #ffe088;
  --color-secondary-fixed: #574500;

  --color-tertiary: #b7ccc0;
  --color-on-tertiary: #22372f;
  --color-tertiary-container: #384c44;
  --color-on-tertiary-container: #d1e8dd;
  
  --color-background: #141e17;
  --color-on-background: #e2e8e3;
  --color-surface: #141e17;
  --color-surface-dim: #101812;
  --color-surface-lowest: #1b261f;
  --color-surface-low: #18221b;
  --color-surface-container: #202d24;
  --color-surface-container-low: #1d2821;
  --color-surface-high: #27362c;
  --color-surface-highest: #2e3e33;
  --color-surface-variant: #2e3e33;
  --color-on-surface: #e2e8e3;
  --color-on-surface-variant: #a3b0a6;
  --color-outline: #8b988c;
  --color-outline-variant: #3a4b3f;
  --color-tertiary-fixed: #25392e;
  --color-on-tertiary-fixed-variant: #cae4d5;

  --color-error: #ffb4ab;
  --color-error-container: #93000a;

  /* Status semantics tuned for the dark surface stack */
  --color-success: #4ade80;
  --color-success-container: rgba(74, 222, 128, 0.16);
  --color-warning: #fbbf24;
  --color-warning-container: rgba(251, 191, 36, 0.16);
  --color-on-warning: #3c2f00;
  --color-danger: #f87171;
  --color-danger-container: rgba(248, 113, 113, 0.16);
  --color-unhealthy: #fb923c;
  --color-info: #38bdf8;
  --color-info-container: rgba(56, 189, 248, 0.16);
  --color-star: #facc15;
  --color-star-fixed: #422006;
  --color-star-ink: #facc15;
  --color-success-text: var(--color-success);
  --color-info-text: var(--color-info);
  --color-unhealthy-text: var(--color-unhealthy);

  --glass-bg: rgba(20, 30, 23, 0.92);
  --glass-card-bg: rgba(27, 38, 31, 0.92);
  --glass-border: rgba(58, 75, 63, 0.5);
  --shadow-ambient: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 10px 30px -4px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
}

/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Entrance animations referenced by widget/banner classes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

body {
  font-family: var(--font-family);
  background-color: var(--color-background);
  color: var(--color-on-background);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Page pinch-zoom is enabled (WCAG 1.4.4); Leaflet map containers set touch-action: none themselves */
html,
body {
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior-y: contain;
}

button,
input[type="range"],
.chip,
.overlay-pill,
.radar-range-tab-btn {
  touch-action: manipulation;
}

/* Material Symbols configuration - Resilient Mobile Rendering */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: var(--text-2xl);
  width: 1em;
  height: 1em;
  box-sizing: content-box;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga' 1;
  -webkit-font-feature-settings: 'liga' 1;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glassmorphism & Elevation */
.glass-panel {
  background: var(--glass-card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-ambient);
  border-radius: var(--radius-xl);
}

/* Aliases re-resolve on body so theme overrides (amber/dark) on body[data-theme] carry through */
body {
  --color-surface-container-high: var(--color-surface-high);
  --color-surface-container-highest: var(--color-surface-highest);
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #000);
}

/* Layout Utilities - Mobile First */
.app-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 16px));
  overflow-x: clip;
}

/* ==========================================================================
   Connectivity, Data-State & Freshness Components
   ========================================================================== */
.connectivity-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-warning);
  color: var(--color-on-warning);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
}
.connectivity-banner[hidden] { display: none; }
.connectivity-banner .material-symbols-outlined { font-size: var(--text-lg); }

.data-unavailable {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--color-surface-low);
  border: 1px dashed var(--color-outline-variant);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.data-unavailable.compact { padding: 10px 12px; }
.data-unavailable-icon { font-size: 22px; color: var(--color-outline); flex-shrink: 0; }
.data-unavailable-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.data-unavailable-title { font-size: var(--text-base); font-weight: 800; color: var(--color-on-surface); }
.data-unavailable-message { font-size: var(--text-sm); color: var(--color-outline); line-height: 1.35; }
.data-retry-btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-primary);
  color: var(--color-on-primary, #ffffff);
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
}
.data-retry-btn:disabled { opacity: 0.7; cursor: default; }

.data-loading-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px;
  color: var(--color-outline);
  font-size: var(--text-base);
  font-weight: 600;
}

.transit-gps-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--color-warning-container);
  border: 1px solid var(--color-warning-container);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--color-on-surface);
}
.transit-gps-notice .material-symbols-outlined { color: var(--color-warning); flex-shrink: 0; }

.freshness-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-outline);
  background: var(--color-surface-container);
  border-radius: var(--radius-full);
  padding: 2.5px 8px;
  white-space: nowrap;
}
.breadcrumb { margin-bottom: 16px; min-width: 0; }
.breadcrumb ol { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; min-width: 0; font-size: var(--text-lg); font-weight: 600; }
.breadcrumb li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumb__link {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; padding: 0 2px 0 0;
  border: 0; border-radius: var(--radius-sm, 6px);
  background: transparent; color: var(--color-on-surface-variant);
  font: inherit; cursor: pointer; white-space: nowrap;
}
.breadcrumb__link:active { color: var(--color-primary); text-decoration: underline; }
.breadcrumb__link .material-symbols-outlined { font-size: var(--text-xl); }
.breadcrumb__sep { color: var(--color-outline); }
.breadcrumb__sep .material-symbols-outlined { font-size: 22px; }
.breadcrumb__meta { margin-left: auto; padding-left: 8px; flex-shrink: 0; }
.breadcrumb__current { color: var(--color-primary); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freshness-chip.stale { color: var(--color-warning); background: var(--color-warning-container); }

@media (max-width: 380px) {
  .data-unavailable { flex-wrap: wrap; }
  .data-unavailable-copy { flex-basis: calc(100% - 34px); }
  .data-retry-btn { width: 100%; }
  .freshness-chip { font-size: var(--text-2xs); }
}

/* Header - Solid Opaque Sticky Top App Bar */
.top-app-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  height: calc(52px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0 16px;
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-outline-variant);
  box-shadow: 0 1px 4px rgba(27, 28, 25, 0.04);
}

/* Intelligent Widget Search Bar (Top Left) */
.search-bar-container {
  position: relative;
  flex: 1;
  max-width: 340px;
  min-width: 0;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-low, rgba(240, 244, 235, 0.7));
  border: 1px solid var(--color-outline-variant);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  box-sizing: border-box;
}

.search-input-wrapper:hover {
  border-color: var(--color-outline);
  background: var(--color-surface-container);
}

.search-input-wrapper:focus-within {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(51, 79, 43, 0.12);
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 10px;
  font-size: 18px;
  color: var(--color-outline);
  pointer-events: none;
  transition: color 0.2s ease;
  user-select: none;
}

.search-input-wrapper:focus-within .search-icon {
  color: var(--color-primary);
}

.widget-search-input {
  width: 100%;
  height: 100%;
  padding: 0 30px 0 33px;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-on-surface);
  letter-spacing: -0.01em;
  box-sizing: border-box;
}

.widget-search-input::placeholder {
  color: var(--color-outline);
  font-weight: 400;
  transition: opacity 0.15s ease;
}

.widget-search-input:focus::placeholder {
  opacity: 0.5;
}

.widget-search-input::-webkit-search-cancel-button,
.widget-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-clear-btn {
  position: absolute;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-surface-variant, rgba(0, 0, 0, 0.08));
  color: var(--color-on-surface-variant);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}

.search-clear-btn:hover {
  background: rgba(0, 0, 0, 0.16);
  color: var(--color-on-surface);
  transform: scale(1.08);
}

.search-clear-btn span {
  font-size: var(--text-md);
}

@keyframes searchFlash {
  0% { box-shadow: 0 0 0 3px var(--color-primary), 0 6px 20px rgba(51, 79, 43, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(51, 79, 43, 0); }
}

.search-flash {
  animation: searchFlash 1.5s ease-out 1;
  border-radius: var(--radius-xl);
}

/* =========================================================
   GLOBAL SEARCH OVERLAY
   ========================================================= */
.global-search-overlay {
  position: fixed;
  top: calc(52px + env(safe-area-inset-top, 0px));
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 180;
  background: var(--color-background);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.global-search-overlay[hidden] {
  display: none;
}

.global-search-panel {
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom, 16px)) 16px;
}

.gs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-outline);
  margin-bottom: 12px;
  min-width: 0;
}

.gs-header > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gs-close-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  cursor: pointer;
}

.gs-group {
  margin-bottom: 16px;
}

.gs-group-title {
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 6px;
  padding-left: 2px;
}

.gs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  text-align: left;
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  color: var(--color-on-surface);
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.gs-row:hover,
.gs-row:active {
  background: var(--color-surface-container);
}

.gs-row-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-fixed);
  color: var(--color-primary);
}

.gs-row-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.gs-row-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gs-row-sub {
  font-size: var(--text-sm);
  color: var(--color-outline);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gs-row-chevron {
  color: var(--color-outline);
  flex-shrink: 0;
}

.gs-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  font-size: var(--text-sm);
  color: var(--color-outline);
  background: var(--color-surface-low);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-outline-variant);
}

.gs-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-outline);
}

.gs-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.gs-empty-desc {
  font-size: var(--text-sm);
  color: var(--color-outline);
  margin-top: 4px;
  line-height: 1.45;
}

/* =========================================================
   ADD TO HOME SHEET
   ========================================================= */
.add-widget-group {
  margin-bottom: 16px;
}

.add-widget-group-title {
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 6px;
  padding-left: 2px;
}

.add-widget-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
}

/* =========================================================
   FIRST-RUN ONBOARDING
   ========================================================= */
.onboarding-points {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 4px 18px 4px;
}

.onboarding-point {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

.onboarding-point-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-fixed);
  color: var(--color-primary);
}

.onboarding-point-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.onboarding-point-title {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-on-surface);
}

.onboarding-point-desc {
  font-size: var(--text-sm);
  color: var(--color-outline);
  line-height: 1.35;
}

.onboarding-primary {
  width: 100%;
  padding: 14px;
  min-height: 48px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
}

.onboarding-primary:disabled {
  opacity: 0.7;
  cursor: default;
}

.onboarding-secondary {
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  min-height: 46px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  background: var(--color-surface-low);
  color: var(--color-on-surface);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
}

.onboarding-text {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--color-outline);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* =========================================================
   RADIAL NAV FIRST-RUN HINT
   ========================================================= */
.radial-hint-bubble {
  position: absolute;
  bottom: calc(84px + env(safe-area-inset-bottom, 12px));
  right: 18px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: min(250px, calc(100vw - 56px));
  padding: 10px 14px;
  text-align: left;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(20, 29, 21, 0.94);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 14px 32px -6px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: fadeIn 0.3s ease both;
}

.radial-hint-bubble .material-symbols-outlined {
  flex-shrink: 0;
  color: #c2e4b4;
}

.radial-nav-container[data-anchor="left"] .radial-hint-bubble {
  right: auto;
  left: 18px;
}

.radial-hint-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 22px;
  width: 12px;
  height: 12px;
  background: rgba(20, 29, 21, 0.94);
  transform: rotate(45deg);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.radial-nav-container[data-anchor="left"] .radial-hint-bubble::after {
  right: auto;
  left: 22px;
}

@media (max-width: 380px) {
  .top-app-bar {
    padding: env(safe-area-inset-top, 0px) 12px 0 12px;
    gap: 8px;
  }
  .search-bar-container {
    max-width: 100%;
  }
  .search-input-wrapper {
    height: 34px;
  }
  .widget-search-input {
    font-size: var(--text-sm);
    padding-left: 28px;
    padding-right: 24px;
  }
  .search-input-wrapper .search-icon {
    font-size: var(--text-lg);
    left: 8px;
  }
  .top-bar-actions {
    gap: 4px;
  }
  /* 40px + 4px gap = 44px pitch, so neighbouring 44px hit areas never overlap */
  .top-bar-actions .icon-btn {
    width: 40px;
    height: 40px;
  }
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.seo-intro {
  padding: 16px;
  color: var(--color-on-surface, inherit);
}
.seo-intro h2 {
  font-size: 1.05rem;
  margin: 16px 0 4px;
}
.seo-intro p {
  margin: 0 0 8px;
  line-height: 1.5;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.icon-btn:hover {
  background: rgba(74, 103, 65, 0.12);
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.icon-btn.active:hover {
  background: var(--color-primary);
  opacity: 0.92;
}

/* =========================================================
   HOME HEADER & "RIGHT NOW" PRIORITY STRIP
   ========================================================= */
.home-header {
  padding: 14px 16px 2px 16px;
}

.home-greeting {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-on-surface);
  overflow-wrap: anywhere;
}

.home-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--color-outline);
}

.home-meta-status {
  margin-left: auto;
}

.priority-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 32px);
  margin: 10px 16px 0 16px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--color-outline-variant);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-low);
  color: var(--color-on-surface);
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.haze-banner { background: var(--color-background); box-shadow: var(--shadow-card); align-items: flex-start; }
.haze-banner .priority-strip-copy { min-width: 0; }
.haze-banner-advice { display: block; margin-top: 2px; font-size: var(--text-xs, 12px); line-height: 1.35; color: var(--color-on-surface-variant, var(--color-outline)); overflow-wrap: anywhere; }

.priority-strip:hover {
  background: var(--color-surface-container);
}

.priority-strip:active {
  transform: scale(0.99);
}

.priority-strip-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.priority-strip-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.priority-strip-tag {
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.priority-strip-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.priority-strip-chevron {
  color: var(--color-outline);
  flex-shrink: 0;
}

/* Bento Grid - Full-Width Modular Stack */
.bento-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 20px 16px;
}

.bento-item {
  position: relative;
  overflow: hidden;
  contain: paint;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, opacity 0.25s ease;
}

.bento-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.col-span-2 {
  width: 100%;
}

/* ============================================================
   Bus Widget — Paginated Swipe Carousel (v2)
   ============================================================ */

/* Load-indicator dots */
.bus-load-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.load-sea { background: var(--color-success); box-shadow: 0 0 4px var(--color-success-container); }
.load-sda { background: var(--color-star); box-shadow: 0 0 4px var(--color-warning-container); }
.load-lsd { background: var(--color-danger); box-shadow: 0 0 4px var(--color-danger-container); }

/* ── Outer widget container ── */
.bus-widget {
  position: relative;
}

/* ── Content clip viewport (prevents track bleed into widget padding) ── */
.bus-widget-clip {
  overflow: hidden;
  width: 100%;
}

/* ── Sliding track (flex row of pages) ── */
.bus-widget-track {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: var(--space-4, 16px);
  will-change: transform;
  touch-action: pan-y;
  /* JS adds/removes .snapping for spring animation */
  user-select: none;
  -webkit-user-select: none;
}
.bus-widget-track.snapping {
  transition: transform 400ms cubic-bezier(0.25, 1.35, 0.65, 1);
}

/* ── Individual page ── */
.bus-widget-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 0 2px 0;
  display: flex;
  flex-direction: column;
}

/* Pages of the inactive mode are removed from layout so they neither peek
   during rubber-band drags nor stretch the track height. */
.bus-widget-page.is-off-mode {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  padding: 0;
}

/* ── Stop header inside each page ── */
.bus-stop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
  min-width: 0;
}
.bus-stop-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.bus-stop-name {
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}
.bus-stop-code-badge {
  font-size: var(--text-2xs);
  font-family: monospace;
  padding: 2.5px 8px;
  background: var(--color-surface-container);
  border-radius: var(--radius-sm);
  color: var(--color-outline);
  flex-shrink: 0;
}

/* ── 2×2 service card grid ── */
.bus-svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 7px;
  align-items: stretch;
}

/* ── Individual service card ── */
.bus-svc-card {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color 200ms ease, background 200ms ease;
  cursor: pointer;
}
/* Favourite identity is the star glyph + active tab only; tile fill is the
   same in every mode so green stays reserved for status (load dot, ETA). */
.bus-svc-num-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 2px;
}
.bus-svc-num {
  font-size: clamp(15px, 4.6vw, 17px);
  font-weight: 800;
  color: var(--color-on-surface);
  font-family: var(--font-family);
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  line-height: 1;
}
.bus-svc-eta {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-primary);
  flex-shrink: 0;
  line-height: 1;
}
.bus-svc-eta.arriving {
  color: var(--color-success-text);
}
.bus-svc-eta.imminent {
  color: var(--color-warning);
}
.bus-svc-eta.none {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-outline);
}
.bus-svc-wab {
  color: var(--color-outline);
  flex-shrink: 0;
}
.bus-svc-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-outline);
  gap: 4px;
  min-width: 0;
}
.bus-svc-dest {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.bus-svc-next2 {
  flex-shrink: 0;
  font-weight: 600;
}

/* ── Stop groups (Favourites page): one container per stop ── */
.bus-page-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-on-surface);
}
.bus-page-label.is-nearby .material-symbols-outlined { color: var(--color-primary); }
.bus-page-label__hint {
  font-weight: 600;
  color: var(--color-outline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin-left: 2px;
}
.bus-stop-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bus-stop-group {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 8px;
  min-width: 0;
}
.bus-stop-group__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px 7px;
  min-width: 0;
}
.bus-stop-group__name {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bus-stop-group__walk {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-outline);
}
.bus-stop-group__count {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-outline);
}
.bus-stop-group .bus-svc-grid { gap: 6px; }
.bus-stop-group .bus-svc-card:only-child { grid-column: 1 / -1; }
.bus-stop-groups__more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 14px;
  font-size: var(--text-sm);
}

/* Stop code prefix on merged-favourites cards (which stop is this bus at?) */
.bus-svc-stopcode {
  font-weight: 700;
  color: var(--color-on-surface-variant);
  margin-right: 4px;
}
.bus-svc-stopcode::after { content: '·'; margin-left: 4px; font-weight: 400; }

/* ── Home bus widget: header Map pill (always visible, every state) ── */
.bus-map-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 32px;
  padding: 2.5px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.bus-map-pill .material-symbols-outlined { color: var(--color-primary); }
.bus-map-pill:active { transform: scale(0.96); }

/* ── Favourites / Nearest segmented tabs ── */
.bus-page-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  min-width: 0;
}
.bus-page-tab {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 36px;
  padding: 2.5px 12px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-outline);
  font-size: var(--text-2xs);
  font-weight: 700;
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
}
.bus-page-tab.active {
  background: var(--color-surface-container);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}
.bus-page-tab.active .material-symbols-outlined { color: var(--color-primary); }

/* ── Invalid Favourite Bus Card & Intuitive Removal Action ── */
.bus-svc-card.is-invalid {
  border: 1.5px dashed var(--color-danger-container) !important;
  background: var(--color-danger-container) !important;
}

.bus-svc-num.invalid {
  color: var(--color-danger) !important;
}

.bus-invalid-badge {
  font-size: var(--text-2xs);
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  background: var(--color-danger-container);
  color: var(--color-danger);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.bus-remove-invalid-btn {
  background: var(--color-danger);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-full);
  padding: 3px 8px;
  font-size: var(--text-2xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1.2;
  box-shadow: 0 1px 3px var(--color-danger-container);
  transition: background 150ms ease, transform 100ms ease;
  z-index: 2;
}

.bus-remove-invalid-btn:hover {
  background: var(--color-danger);
  transform: scale(1.03);
}

.bus-remove-invalid-btn:active {
  transform: scale(0.96);
}

.bus-remove-invalid-btn-modal {
  width: 100%;
  background: var(--color-danger-container);
  border: 1px solid var(--color-danger-container);
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 150ms ease;
  box-sizing: border-box;
}

.bus-remove-invalid-btn-modal:hover {
  background: var(--color-danger-container);
  border-color: var(--color-danger);
}

.bus-invalid-callout {
  background: var(--color-danger-container);
  border: 1px dashed var(--color-danger-container);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: var(--text-2xs);
  color: var(--color-on-surface-variant);
  line-height: 1.35;
  margin-top: 6px;
}

/* ── Favourited Count Badge in Stop Header ── */
.bus-fav-count-pill {
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  background: var(--color-warning-container);
  color: var(--color-warning);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* ── Drawer Section Headers ── */
.bus-drawer-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0 8px 0;
  padding: 0 2px;
}
.bus-drawer-section-title {
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 5px;
}
.bus-drawer-section-badge {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-outline);
}

/* No-services state */
.bus-no-services {
  padding: 14px 12px;
  text-align: center;
  color: var(--color-outline);
  font-size: var(--text-sm);
  background: var(--color-surface-low);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-outline-variant);
  grid-column: 1 / -1;
}

/* ── Dot pagination + page count (one row, multi-stop only) ── */
.bus-widget-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding-top: 10px;
  padding-bottom: 2px;
}

.bus-widget-pagination[hidden],
.bus-dot[hidden] { display: none; }

.bus-page-count {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-outline);
  margin-right: 3px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.bus-dot {
  position: relative;
  height: 6px;
  border-radius: 4px;
  background: var(--color-outline-variant);
  cursor: pointer;
  flex-shrink: 0;
  transition: width 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 220ms ease,
              opacity 220ms ease;
  width: 6px;
  opacity: 0.45;
  border: none;
  padding: 0;
}
/* Generous touch target area (30px x 24px) for fingers & automation */
.bus-dot::before {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -8px;
  right: -8px;
}
.bus-dot.active {
  background: var(--color-primary);
  width: 20px;
  opacity: 1;
}

/* ── Page footer (road name + distance + full-board chip) ── */
.bus-page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  font-size: var(--text-sm);
  color: var(--color-outline);
}
/* Stop code moves into the footer on compact widths (header demotes it) */
.bus-stop-code-inline {
  display: none;
  font-family: monospace;
  font-size: var(--text-2xs);
  flex-shrink: 0;
  padding: 2.5px 8px;
  background: var(--color-surface-container);
  border-radius: var(--radius-sm);
}

/* Full stop-board affordance: reveals that the arrival sheet holds every
   service at the stop, not just the star-filtered grid. */
.bus-full-board-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  max-width: 55%;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-size: var(--text-2xs);
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.4;
}
.bus-full-board-btn .material-symbols-outlined {
  font-size: var(--text-sm);
  flex-shrink: 0;
}

/* Honest freshness chip (Live / Stale / Offline) on each stop page */
.bus-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-success-text);
  flex-shrink: 0;
}
.bus-live-chip.stale { color: var(--color-warning); }
.bus-live-chip.offline { color: var(--color-outline); }

/* Occupancy legend on the widget card itself: decodes the load dots at a
   glance (one quiet line under the service grid). */
.bus-widget-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-outline);
}
.bus-widget-legend .bus-load-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Occupancy legend in the arrival sheet */
.bus-load-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 7px 10px;
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-on-surface-variant);
}
.bus-load-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Ghost variant of the L2→L3 bridge: present but quiet, so the ETA columns
   stay the visual focus of the arrival sheet. */
.sheet-bridge-btn.sheet-bridge-btn--ghost {
  background: transparent;
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface);
}
.sheet-bridge-btn.sheet-bridge-btn--ghost:hover,
.sheet-bridge-btn.sheet-bridge-btn--ghost:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* "← Route N" back link when an arrival sheet was opened from a route */
.bus-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px 0;
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

/* Compact viewport density pass (360–380px): demote the stop-code badge
   from the header into the footer so the stop name + GPS pill never collide
   or clip against the card edge. Grouped stop headers keep their badge: they
   have no footer fallback, and name + code + walk + count fit at 360px. */
@media (max-width: 380px) {
  .bus-widget .bus-stop-name-row .bus-stop-code-badge { display: none; }
  .bus-widget .bus-stop-code-inline { display: inline-block; }
  .bus-widget .bus-stop-name { font-size: var(--text-sm); }
  .bus-widget .bus-full-board-btn { max-width: 48%; }
  .bus-widget .bus-svc-eta { font-size: var(--text-md); }
  .bus-widget-legend { gap: 6px; }
}

/* Widget-level outer padding when it wraps this carousel */
.bus-widget.bento-item {
  padding: 14px 16px !important;
  cursor: default !important; /* cursor managed per-element below */
}

/* ==========================================================================
   Thumb-Anchored Curved Frosted Glass Action Palette & Navigation Hub
   ========================================================================== */

.radial-nav-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 0; /* Let background content receive pointer events */
  z-index: 250;
  pointer-events: none;
}

/* Frosted Scrim Backdrop */
.radial-nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 11, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
}

.radial-nav-container.open .radial-nav-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* Floating Hub Trigger Button */
.radial-hub-trigger {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 12px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  touch-action: none;
  user-select: none;
  /* Drag/spring offset driven by setupRadialNavigation (JS) */
  translate: var(--hub-dx, 0px) var(--hub-dy, 0px);
  will-change: translate;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, background-color 0.2s ease;
}

/* Right vs Left Anchor Position */
.radial-nav-container[data-anchor="right"] .radial-hub-trigger {
  right: 18px;
  left: auto;
}

.radial-nav-container[data-anchor="left"] .radial-hub-trigger {
  left: 18px;
  right: auto;
}

.radial-hub-trigger:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(51, 79, 43, 0.48), 0 3px 8px rgba(0, 0, 0, 0.22);
}

.radial-hub-trigger:active {
  transform: scale(0.94);
}

/* Lifted while being dragged to a new side */
.radial-nav-container.dragging .radial-hub-trigger {
  transform: scale(1.1);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42), 0 4px 10px rgba(0, 0, 0, 0.22);
  cursor: grabbing;
}

.radial-nav-container.open .radial-hub-trigger {
  background: var(--color-surface-container, #202d24);
  color: var(--color-on-surface);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Adaptive scroll docking — tuck into bezel to avoid obscuring card content */
.radial-nav-container.is-scrolling-down .radial-hub-trigger {
  transform: scale(0.82);
  opacity: 0.75;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.radial-nav-container[data-anchor="left"].is-scrolling-down .radial-hub-trigger {
  transform: scale(0.82) translate3d(-10px, 6px, 0);
}

.radial-nav-container[data-anchor="right"].is-scrolling-down .radial-hub-trigger {
  transform: scale(0.82) translate3d(10px, 6px, 0);
}

.radial-nav-container.is-scrolling-down .radial-hub-trigger:hover,
.radial-nav-container.is-scrolling-down .radial-hub-trigger:focus-visible,
.radial-nav-container.open .radial-hub-trigger {
  transform: scale(1) translate3d(0, 0, 0);
  opacity: 1;
}

/* Current-destination label shown briefly after a tab switch */
.radial-hub-label {
  position: absolute;
  bottom: calc(18px + 14px + env(safe-area-inset-bottom, 12px));
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 9;
}

.radial-nav-container[data-anchor="right"] .radial-hub-label { right: 82px; }
.radial-nav-container[data-anchor="left"] .radial-hub-label { left: 82px; }

.radial-hub-label.show { opacity: 1; }

/* Icon Switching with Smooth Spring Twist */
.hub-icon-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-icon-wrap .material-symbols-outlined {
  position: absolute;
  font-size: 26px;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.hub-icon-default {
  transform: rotate(0) scale(1);
  opacity: 1;
}

.hub-icon-active {
  transform: rotate(-90deg) scale(0);
  opacity: 0;
}

.radial-nav-container.open .hub-icon-default {
  transform: rotate(90deg) scale(0);
  opacity: 0;
}

.radial-nav-container.open .hub-icon-active {
  transform: rotate(0) scale(1);
  opacity: 1;
}

/* Pulsing Status Ring (active alert indicator) */
.hub-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  opacity: 0;
  pointer-events: none;
}

.radial-nav-container.has-alert .hub-pulse-ring {
  animation: hubPulse 2.4s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes hubPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  60% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ==========================================================================
   Curved Frosted Glass Action Palette
   ========================================================================== */

.radial-arc-menu {
  position: absolute;
  bottom: calc(84px + env(safe-area-inset-bottom, 12px));
  width: min(348px, calc(100vw - 36px));
  padding: 10px 10px 10px 10px;
  border-radius: 24px;
  background: rgba(20, 29, 21, 0.88);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 48px -4px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.22);
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

/* Theme Adaptation for Light Themes */
body[data-theme="garden"] .radial-arc-menu,
body[data-theme="amber"] .radial-arc-menu {
  background: rgba(250, 249, 244, 0.94);
  border-color: rgba(195, 200, 189, 0.6);
  box-shadow: 0 18px 44px -4px rgba(27, 28, 25, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

body[data-theme="dark"] .radial-arc-menu {
  background: rgba(20, 30, 23, 0.92);
  border-color: rgba(58, 75, 63, 0.6);
  box-shadow: 0 20px 48px -4px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* Right Anchor Placement */
.radial-nav-container[data-anchor="right"] .radial-arc-menu {
  right: 18px;
  transform-origin: bottom right;
  transform: scale(0.85) translateY(18px);
}

/* Left Anchor Placement */
.radial-nav-container[data-anchor="left"] .radial-arc-menu {
  left: 18px;
  transform-origin: bottom left;
  transform: scale(0.85) translateY(18px);
}

/* Open State */
.radial-nav-container.open .radial-arc-menu {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
}

/* Palette Header */
.radial-palette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 6px;
}

body[data-theme="garden"] .radial-palette-header,
body[data-theme="amber"] .radial-palette-header {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

.palette-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.palette-header-icon {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.palette-header-title {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-on-surface-variant);
  opacity: 0.85;
}

/* Palette List */
.radial-palette-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Individual Destination Tile (radial-node) */
.radial-node {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  opacity: 0;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.18s ease, border-color 0.18s ease;
}

/* Staggered Fan-Out Entrance */
.radial-nav-container[data-anchor="right"] .radial-node {
  transform: translateX(12px) scale(0.96);
}

.radial-nav-container[data-anchor="left"] .radial-node {
  transform: translateX(-12px) scale(0.96);
}

.radial-nav-container.open .radial-node {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease, background-color 0.18s ease;
  transition-delay: calc(var(--node-idx, 0) * 28ms);
}

/* Hover and Hold-Scrub Highlight States */
.radial-node:hover,
.radial-node.highlighted {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}

body[data-theme="garden"] .radial-node:hover,
body[data-theme="garden"] .radial-node.highlighted,
body[data-theme="amber"] .radial-node:hover,
body[data-theme="amber"] .radial-node.highlighted {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
}

.radial-nav-container[data-anchor="right"] .radial-node:hover,
.radial-nav-container[data-anchor="right"] .radial-node.highlighted {
  transform: scale(1.02) translateX(-2px);
}

.radial-nav-container[data-anchor="left"] .radial-node:hover,
.radial-nav-container[data-anchor="left"] .radial-node.highlighted {
  transform: scale(1.02) translateX(2px);
}

/* Active Screen Highlight */
.radial-node.active {
  background: rgba(74, 103, 65, 0.18);
  border-color: rgba(175, 208, 161, 0.35);
}

body[data-theme="garden"] .radial-node.active,
body[data-theme="amber"] .radial-node.active {
  background: rgba(51, 79, 43, 0.09);
  border-color: rgba(51, 79, 43, 0.25);
}

.radial-node.active .node-title {
  color: var(--color-primary);
}

/* Icon Circle */
.node-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.radial-node:hover .node-icon-circle,
.radial-node.highlighted .node-icon-circle {
  transform: scale(1.08);
}

.node-icon-circle .material-symbols-outlined {
  font-size: var(--text-xl);
  transition: transform 0.2s ease;
}

.radial-node.active .node-icon-circle .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}

/* Theme Icon Variations */
.node-icon-circle.theme-home {
  background: linear-gradient(135deg, rgba(51, 79, 43, 0.85), rgba(28, 54, 25, 0.95));
  color: #c2e4b4;
  border: 1px solid rgba(194, 228, 180, 0.25);
}

.node-icon-circle.theme-transit {
  background: linear-gradient(135deg, rgba(14, 94, 73, 0.85), rgba(10, 61, 48, 0.95));
  color: #88ecc9;
  border: 1px solid rgba(136, 236, 201, 0.25);
}

.node-icon-circle.theme-weather {
  background: linear-gradient(135deg, rgba(24, 76, 102, 0.85), rgba(14, 48, 66, 0.95));
  color: #9edcff;
  border: 1px solid rgba(158, 220, 255, 0.25);
}

.node-icon-circle.theme-deals {
  background: linear-gradient(135deg, rgba(110, 78, 11, 0.85), rgba(69, 48, 6, 0.95));
  color: #ffd65b;
  border: 1px solid rgba(255, 214, 91, 0.25);
}

/* Node Text Content */
.node-text-wrap {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  justify-content: center;
}

.node-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-on-surface);
  line-height: 1.25;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-subtitle {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-on-surface-variant);
  opacity: 0.8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Live Status Badge */
.node-badge-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: auto;
}

.node-badge {
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

/* The 361-412px band is the most common phone width; cap the live badge so
   title and subtitle always keep readable room instead of being squeezed out. */
@media (max-width: 412px) {
  .radial-node {
    padding: 6px 8px;
    gap: 9px;
  }
  .node-title {
    font-size: var(--text-base);
  }
  .node-badge {
    max-width: 92px;
    font-size: var(--text-2xs);
    padding: 2.5px 8px;
  }
}

@media (max-width: 360px) {
  .radial-node {
    padding: 6px 8px;
    gap: 8px;
  }
  .node-badge {
    max-width: 84px;
    font-size: var(--text-2xs);
    padding: 2.5px 8px;
  }
  .node-subtitle {
    font-size: var(--text-sm);
  }
}

body[data-theme="garden"] .node-badge,
body[data-theme="amber"] .node-badge {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
}

.radial-node.active .node-badge {
  background: rgba(175, 208, 161, 0.2);
  color: var(--color-primary-fixed, var(--color-primary));
  border-color: rgba(175, 208, 161, 0.35);
}

body[data-theme="garden"] .radial-node.active .node-badge,
body[data-theme="amber"] .radial-node.active .node-badge {
  background: rgba(51, 79, 43, 0.12);
  color: var(--color-primary);
  border-color: rgba(51, 79, 43, 0.25);
}

.radial-node:hover .node-badge,
.radial-node.highlighted .node-badge {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: transparent;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .radial-node,
  .radial-hub-trigger,
  .hub-icon-wrap .material-symbols-outlined,
  .radial-arc-menu {
    transition-duration: 0.08s !important;
    transform: none !important;
  }
  .radial-nav-container.has-alert .hub-pulse-ring {
    animation: none !important;
  }
}

/* Backwards-Compatible Helpers for legacy selectors */

/* Bus Load Bar */
.load-bar {
  height: 4px;
  background: var(--color-surface-variant);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 4px;
}

.load-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.load-bar-fill.SEA {
  background-color: var(--color-primary-container);
  width: 35%;
}

.load-bar-fill.SDA {
  background-color: var(--color-secondary);
  width: 75%;
}

.load-bar-fill.LSD {
  background-color: var(--color-error);
  width: 95%;
}

/* Pills & Badges */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Category Filter Chips */
.chip-group {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 20px 8px 20px;
  scrollbar-width: none;
}

.chip-group::-webkit-scrollbar {
  display: none;
}

.chip {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-lowest);
  color: var(--color-on-surface-variant);
  transition: all 0.2s ease;
}

.chip.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

/* Modal Backdrop & Dialog */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(15, 23, 16, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Hide floating radial navigation when any modal bottom sheet, search overlay or context popover is open */
body:has(.modal-overlay.open) .radial-nav-container,
.modal-overlay.open ~ .radial-nav-container,
body:has(#global-search-overlay:not([hidden])) .radial-nav-container,
#global-search-overlay:not([hidden]) ~ .radial-nav-container,
body:has(#widget-menu-popover:not([hidden])) .radial-nav-container,
#widget-menu-popover:not([hidden]) ~ .radial-nav-container {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.modal-sheet {
  background: var(--color-background);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  max-height: 88dvh;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  padding: 20px 18px calc(36px + env(safe-area-inset-bottom, 20px)) 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  scrollbar-width: thin;
  scrollbar-color: var(--color-outline-variant) transparent;
}

.modal-sheet::-webkit-scrollbar {
  width: 4px;
}

.modal-sheet::-webkit-scrollbar-track {
  background: transparent;
}

.modal-sheet::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: var(--radius-full);
}

@media (max-width: 380px) {
  .modal-sheet {
    padding: 16px 12px calc(36px + env(safe-area-inset-bottom, 20px)) 12px;
  }
}

/* L2 -> L3 bridge: the compact footer link every module detail sheet carries
   into the workspace that owns it. Sized for a 44px thumb target. */
.sheet-bridge-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.sheet-bridge-btn:hover,
.sheet-bridge-btn:focus-visible {
  background: var(--color-primary-fixed);
  border-color: var(--color-primary);
}

/* Inline pill variant used in the bus drawer chip row (Search Stops) */
.sheet-bridge-btn.sheet-bridge-btn--inline {
  width: auto;
  min-height: 0;
  margin-top: 0;
  padding: 4px 10px;
  justify-content: center;
  border-style: dashed;
  background: transparent;
  border-color: var(--color-primary);
}

/* Level 1: "+N more" overflow cell in the bus widget grid */
.bus-svc-overflow-btn {
  appearance: none;
  font-family: inherit;
  text-align: left;
  border-style: dashed;
  background: var(--color-surface-lowest, var(--color-surface-low));
}

.bus-svc-overflow-btn:hover,
.bus-svc-overflow-btn:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-fixed);
}

/* ── L3 Map chip explore canvas ─────────────────────────────────────── */
.explore-map-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}

.explore-map-canvas {
  height: clamp(320px, 55vh, 480px);
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--color-outline-variant);
  z-index: 1;
  background: var(--color-surface-low);
}

/* OneMap Terms of Use require their logo + attribution on every tile
   surface. Keep it visible but compact on 360-412px phone viewports
   (transit canvas is only 190px tall). Inline logo size is overridden
   so the credit never crowds the pins. */
.transit-map-canvas .leaflet-control-attribution,
.stop-mini-map .leaflet-control-attribution,
.explore-map-canvas .leaflet-control-attribution {
  font-size: var(--text-2xs);
  line-height: 1.35;
  padding: 2px 6px;
  max-width: calc(100% - 10px);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 4px 0 0 0;
}

.transit-map-canvas .leaflet-control-attribution img,
.stop-mini-map .leaflet-control-attribution img,
.explore-map-canvas .leaflet-control-attribution img {
  height: 16px !important;
  width: 16px !important;
  vertical-align: middle;
}

.transit-map-canvas .leaflet-control-attribution a,
.stop-mini-map .leaflet-control-attribution a,
.explore-map-canvas .leaflet-control-attribution a {
  color: inherit;
}

/* Bus stop page: compact, non-interactive "where is this stop" preview.
   The whole card is one tap target into Transit > Map. */
.stop-mini-map {
  position: relative;
  height: 132px;
  margin: 4px 0 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
  overflow: hidden;
  isolation: isolate;
}

.stop-mini-map__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.stop-mini-map__canvas .leaflet-control-attribution {
  /* Bottom-left corner, clear of the "Open map" pill (bottom-right). */
  max-width: 52%;
  margin: 0;
  border-radius: 0 4px 0 0;
}

.stop-mini-map__hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.stop-mini-map__hit:active {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.stop-mini-map__hit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

.stop-mini-map__pill {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-lowest, #fff);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: var(--shadow-card);
  pointer-events: none;
  white-space: nowrap;
}

.stop-mini-map.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--color-surface-lowest, #fff) 60%, transparent) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: stop-mini-map-shimmer 1.4s linear infinite;
}

@keyframes stop-mini-map-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.stop-mini-map__marker-wrap {
  background: none;
  border: 0;
}

.stop-mini-map__marker {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent);
  animation: stop-mini-map-pulse 2.2s ease-out infinite;
}

.stop-mini-map__marker .material-symbols-outlined {
  font-size: 16px;
}

.stop-mini-map__marker.is-fav {
  background: var(--color-star, #f59e0b);
  color: #1a1400;
}

@keyframes stop-mini-map-pulse {
  0% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent); }
  70%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 14px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .stop-mini-map__marker,
  .stop-mini-map.is-loading::after { animation: none; }
}

/* Explore Map: the stop we arrived from. */
.bus-stop-dot.is-focus {
  width: 22px;
  height: 22px;
  background: #0284c7;
  border: 3px solid #fff;
  transform: none;
  box-shadow: 0 0 0 6px rgba(2, 132, 199, 0.25), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.bus-stop-dot.is-focus.is-fav {
  background: var(--color-star, #f59e0b);
}

.explore-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 8px;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-outline);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.explore-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.explore-legend-pin {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--color-primary);
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  display: inline-block;
}

.explore-legend-pin.is-fav {
  background: var(--color-star);
}

.explore-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0284c7;
  border: 2px solid #fff;
  display: inline-block;
}

.bus-stop-pin__label {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  border-radius: 6px;
  padding: 2px 5px;
  font-size: var(--text-2xs);
  font-weight: 800;
  border: 1px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  line-height: 1.2;
}

.bus-stop-pin__label.is-fav {
  background: var(--color-star);
  color: #1a1400;
}

.bus-stop-pin__label.is-compact {
  padding: 1px 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: -0.2px;
}

.bus-stop-dot-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bus-stop-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 1.5px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.bus-stop-dot:hover,
.bus-stop-dot.is-active {
  transform: scale(1.4);
  background: #0284c7;
  border-color: #ffffff;
  z-index: 1000;
}

.bus-stop-dot.is-fav {
  width: 16px;
  height: 16px;
  background: var(--color-star, #f59e0b);
  color: #1a1400;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  font-weight: 900;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.45);
}

.explore-stop-preview-card {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1000;
  background: var(--color-background);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  animation: slideUpFade 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.explore-stop-preview-card .preview-title {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--color-on-surface);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-stop-preview-card .preview-sub {
  font-size: var(--text-sm);
  color: var(--color-outline);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bus-stop-distance-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-primary);
  font-weight: 700;
  margin-right: 4px;
}

.bus-timeline-vehicle-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--color-primary-fixed);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  padding: 2.5px 8px;
  font-size: var(--text-2xs);
  font-weight: 700;
  margin-left: 6px;
  animation: pulseVehicle 2s infinite ease-in-out;
}

@keyframes pulseVehicle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(0.96); }
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 360px) {
  .explore-map-canvas {
    height: clamp(300px, 50vh, 420px);
  }

  .explore-map-header h2 {
    font-size: var(--text-lg) !important;
  }
}

.sheet-bridge-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sheet-bridge-title {
  font-size: var(--text-base);
  font-weight: 800;
  line-height: 1.2;
}

.sheet-bridge-sub {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-outline);
  margin-top: 1px;
}

.modal-overlay.open .modal-sheet {
  transform: translateY(0);
}

.sheet-handle {
  position: relative;
  width: 40px;
  height: 4px;
  background: var(--color-outline-variant);
  border-radius: 2px;
  margin: 0 auto 16px auto;
  touch-action: none;
  cursor: grab;
}

/* Expand the grab target without changing the visual pill */
.sheet-handle::after {
  content: '';
  position: absolute;
  inset: -14px 0;
}

.modal-sheet.is-dragging .sheet-handle {
  cursor: grabbing;
}

/* Live swipe-down-to-dismiss drag state */
.modal-sheet.is-dragging {
  transition: none;
  will-change: transform;
}

.modal-overlay.sheet-dragging {
  transition: none;
}

.modal-sheet.is-dragging,
.modal-sheet.is-dragging * {
  user-select: none;
  -webkit-user-select: none;
}

.theme-module-card {
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.theme-module-card {
  cursor: pointer;
}

.theme-module-card:hover {
  transform: translateY(-1px);
}

/* "Show on Home" switch inside every domain workspace module. Gives residents
   one honest mental model: the workspace always holds the full toolkit, and
   this switch controls what appears on the Home feed. */
.module-home-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding: 0 2px;
}

.module-home-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  min-height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
  color: var(--color-on-surface-variant);
  font-family: inherit;
  font-size: var(--text-2xs);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.module-home-toggle::after {
  content: '';
  position: absolute;
  inset: -6px -4px;
}

.module-home-toggle.on {
  background: var(--color-primary-fixed);
  border-color: var(--color-primary-container);
  color: var(--color-primary);
}

.module-home-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Botanical Subtle Aura */
.botanical-aura {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(202, 236, 188, 0.45) 0%, rgba(202, 236, 188, 0) 70%);
  pointer-events: none;
}
.widget-card[data-widget-type="weather_overview"] .botanical-aura,
.glass-panel:has(.wx-scene) .botanical-aura {
  display: none !important;
}

/* =========================================================
   UI STANDARDISATION PRIMITIVES
   =========================================================
   One anatomy per level, composed by every renderer:
     card   = header + expressive primary zone + optional footer
     sheet  = handle + header + optional tabs + body + optional bridge
     module = header + primary zone + Show on Home control
   Renderers must compose these classes instead of restyling inline, so all
   widgets and all three themes stay uniform. Compact-phone first: every text
   slot below is min-width:0 safe, and truncation is a last resort. */

/* --- Shared typography roles ------------------------------------------- */
.ui-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  flex-wrap: wrap;
}

.ui-eyebrow__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-eyebrow__status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-transform: none;
}

.ui-eyebrow .material-symbols-outlined {
  font-size: var(--text-lg);
  flex-shrink: 0;
  color: var(--color-primary);
}

/* --- Truncation utilities ----------------------------------------------
   .t-1 is for non-critical labels only. Readings, units, ETAs, prices,
   codes, pills and buttons must never carry a truncation class. */
.t-1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-2 {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.t-wrap {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- Widget card (Home, level 1) ---------------------------------------- */
.widget-card {
  padding: var(--space-4);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Height bands: a floor, never a ceiling, so nothing can be clipped. */
.widget-card[data-layout="metric"] { min-height: 96px; }
.widget-card[data-layout="list"] { min-height: 120px; }
.widget-card[data-layout="media"] { min-height: 168px; }

.widget-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.widget-card__trailing {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.widget-card__chevron {
  font-size: 18px;
  color: var(--color-outline);
  flex-shrink: 0;
}

.widget-card__menu-btn {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-outline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.widget-card__menu-btn::after {
  content: '';
  position: absolute;
  inset: -9px;
}

.widget-card__menu-btn:hover,
.widget-card__menu-btn:focus-visible,
.widget-card__menu-btn.active {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  border-color: var(--color-outline-variant);
}

/* =========================================================
   Widget 3-Dots Action Menu Popover
   ========================================================= */

.widget-menu-popover {
  position: fixed;
  inset: 0;
  z-index: 1050;
  pointer-events: none;
}

.widget-menu-popover.open {
  pointer-events: auto;
}

.widget-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.widget-menu-popover.open .widget-menu-backdrop {
  opacity: 1;
}

.widget-menu-sheet {
  position: fixed;
  width: 216px;
  max-width: calc(100vw - 24px);
  background: var(--color-surface-lowest, #ffffff);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 6px;
  z-index: 1051;
  display: flex;
  flex-direction: column;
  transform: scale(0.92);
  opacity: 0;
  transform-origin: top right;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}

.widget-menu-sheet[data-placement="top"] {
  transform-origin: bottom right;
}

.widget-menu-popover.open .widget-menu-sheet {
  transform: scale(1);
  opacity: 1;
}

.widget-menu-header {
  padding: 6px 10px 6px 10px;
  border-bottom: 1px solid var(--color-outline-variant);
  margin-bottom: 4px;
}

.widget-menu-title {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-outline);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-menu-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.widget-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-md, 10px);
  border: none;
  background: transparent;
  color: var(--color-on-surface);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  min-height: 40px;
  box-sizing: border-box;
}

.widget-menu-item .material-symbols-outlined {
  font-size: 19px;
  flex-shrink: 0;
  color: var(--color-outline);
}

.widget-menu-item:hover,
.widget-menu-item:focus-visible {
  background: var(--color-surface-container);
  color: var(--color-primary);
}

.widget-menu-item:hover .material-symbols-outlined,
.widget-menu-item:focus-visible .material-symbols-outlined {
  color: var(--color-primary);
}

.widget-menu-item:active {
  background: var(--color-surface-container-highest, var(--color-surface-high));
}

.widget-menu-item[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.widget-menu-item--danger {
  color: var(--color-on-surface);
}

.widget-menu-item--danger .material-symbols-outlined {
  color: var(--color-error);
}

.widget-menu-item--danger:hover,
.widget-menu-item--danger:focus-visible {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
}

.widget-menu-item--danger:hover .material-symbols-outlined,
.widget-menu-item--danger:focus-visible .material-symbols-outlined {
  color: var(--color-error);
}

.widget-menu-divider {
  height: 1px;
  background: var(--color-outline-variant);
  margin: 4px 6px;
  opacity: 0.6;
}

.widget-card__primary {
  margin-top: var(--space-2);
  min-width: 0;
}

.widget-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 30px;
  font-size: var(--text-sm);
}

.widget-card__row-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-on-surface-variant);
}

.widget-card__row-value {
  flex-shrink: 0;
  font-weight: 800;
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
}

.widget-card__more {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-outline);
}

.widget-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-surface-variant);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-outline);
  min-width: 0;
}

.widget-card__footer-source {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-card__action {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  color: var(--color-primary);
  font-weight: 800;
  white-space: nowrap;
}

.widget-card__action .material-symbols-outlined {
  font-size: var(--text-md);
}

/* Shared non-content states: every card keeps its header and shows one of
   these in the primary zone instead of silently disappearing. */
.widget-card__state {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-on-surface-variant);
  min-width: 0;
}

.widget-card__state--muted {
  color: var(--color-outline);
}

/* --- Status pill (exactly one per surface) ------------------------------ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
}

.status-pill .material-symbols-outlined { font-size: var(--text-sm); }
.status-pill--ok { background: var(--color-success-container); color: var(--color-success-text); }
.status-pill--live { background: var(--color-success-container); color: var(--color-success-text); }
.status-pill--warning { background: var(--color-warning-container); color: var(--color-warning); }
.status-pill--critical { background: var(--color-danger-container); color: var(--color-danger); }
.status-pill--info { background: var(--color-info-container); color: var(--color-info-text); }
.status-pill--partner { background: var(--color-surface-container); color: var(--color-on-surface-variant); }
.status-pill--available { background: rgba(51, 79, 43, 0.12); color: var(--color-primary); }
body[data-theme="dark"] .status-pill--available { background: rgba(175, 208, 161, 0.16); color: var(--color-primary); }
body[data-theme="amber"] .status-pill--available { background: rgba(115, 92, 0, 0.12); color: var(--color-primary); }

/* --- Drawer shell (level 2) --------------------------------------------- */
.sheet-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  margin-bottom: 18px;
}

.sheet-header__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.sheet-header__icon .material-symbols-outlined { font-size: var(--text-xl); }

.sheet-header__copy {
  flex: 1;
  min-width: 0;
}

.sheet-header__title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-on-surface);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.sheet-header__subtitle {
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-outline);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header badge drops below the title when the title row is crowded. */
.sheet-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.sheet-close-btn {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-on-surface);
}

.sheet-close-btn::after {
  content: '';
  position: absolute;
  inset: -5px;
}

.sheet-close-btn .material-symbols-outlined { font-size: 18px; }

.sheet-section {
  margin-top: var(--space-3);
}

.sheet-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 4px;
}

.sheet-section__label {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.sheet-section__meta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-outline);
  white-space: nowrap;
}

.sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 40px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-surface-variant);
}

.sheet-row:last-child { border-bottom: none; }

.sheet-row__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-on-surface);
}

.sheet-row__value {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
}

.sheet-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}

.sheet-tabs::-webkit-scrollbar { display: none; }

.sheet-chip-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 2px 0 var(--space-2) 0;
  scrollbar-width: none;
}

.sheet-chip-row::-webkit-scrollbar { display: none; }

.sheet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
  color: var(--color-on-surface-variant);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.sheet-chip .material-symbols-outlined { font-size: var(--text-lg); }

/* --- Workspace module card (level 3) ------------------------------------ */
.module-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.module-card__header .material-symbols-outlined { font-size: var(--text-xl); }

.module-card__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-on-surface);
}

.module-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 800;
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

.module-card--off .module-card__header,
.module-card--off .module-card__primary {
  opacity: 0.72;
}

/* =========================================================
   ADMIN PORTAL STYLES (Garden Morning Design System)
   ========================================================= */
.admin-header-card {
  background: linear-gradient(135deg, var(--color-primary-container) 0%, var(--color-primary) 100%);
  color: var(--color-on-primary);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.admin-header-card::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.admin-stat-card {
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-ambient);
}

.admin-stat-card .stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
}

.admin-stat-card .stat-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-outline);
  letter-spacing: 0.04em;
}

.admin-source-card {
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-ambient);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.admin-source-card:hover {
  box-shadow: var(--shadow-card);
}

.admin-source-card.disabled {
  opacity: 0.7;
  background: var(--color-surface-low);
  border-style: dashed;
}

.admin-source-card.hidden-source {
  border-left: 4px solid var(--color-secondary);
}

.source-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--color-outline-variant);
  flex-wrap: wrap;
}

.toggle-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-on-surface);
}

/* Custom Modern Toggle Switch */
.switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  background-color: var(--color-outline-variant);
  border-radius: var(--radius-full);
  transition: background-color 0.25s ease;
  flex-shrink: 0;
}

.switch-slider::before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

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

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

/* Status Chips */
.status-pill.healthy {
  background: var(--color-primary-fixed);
  color: var(--color-primary);
}

.status-pill.disabled {
  background: var(--color-surface-dim);
  color: var(--color-outline);
}

.status-pill.hidden-tag {
  background: var(--color-secondary-fixed);
  color: var(--color-secondary);
}

.status-pill.error {
  background: var(--color-error-container);
  color: var(--color-error);
}

/* Admin Deals Inspection Table */
.admin-table-container {
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 16px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--text-sm);
}

.admin-table th {
  background: var(--color-surface-low);
  padding: 12px 14px;
  font-weight: 700;
  color: var(--color-outline);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-outline-variant);
}

.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface);
  vertical-align: middle;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tr:hover td {
  background: rgba(51, 79, 43, 0.03);
}

/* Spinning Animation for Sync */
@keyframes spin-sync {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinning {
  animation: spin-sync 1s linear infinite !important;
}

/* Toast Message */
.admin-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: 700;
  box-shadow: var(--shadow-float);
  /* Above the Card Flow overlay (10000) and its drag ghost (10100) so Undo is reachable there */
  z-index: 10200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-action-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  border-radius: var(--radius-full);
  padding: 3px 9px;
  font-size: var(--text-2xs);
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* 44px hit area; visual size unchanged */
.toast-action-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.admin-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   AIR QUALITY & REGIONAL HAZE (UNIFIED FEATURE)
   ========================================================= */

.air-quality-widget {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.air-quality-widget:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
}

/* Equal Weight Twin Hero Grid */
.air-twin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 2px 0 6px 0;
  position: relative;
  z-index: 2;
}

.air-twin-card {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 84px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.air-twin-card:hover {
  border-color: var(--color-primary);
  background-color: var(--color-surface-lowest);
}

.air-twin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.air-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-success-text);
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: var(--radius-full);
  padding: 2.5px 8px;
  line-height: 1;
}

.air-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
  animation: air-pulse-dot-anim 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes air-pulse-dot-anim {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.air-badge-cumulative {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-on-surface-variant);
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  padding: 2.5px 8px;
  line-height: 1;
}

.air-card-type-tag {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-outline);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.air-twin-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 3px 0;
}

.air-twin-num {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.air-twin-unit {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-outline);
}

.air-twin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.air-twin-range {
  min-width: 0;
  margin-top: 5px;
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.air-twin-range strong {
  color: var(--color-on-surface);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.air-stamp {
  margin-left: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

.air-metric-title {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-on-surface);
}

.air-status-pill {
  font-size: var(--text-2xs);
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

.air-twin-watermark {
  position: absolute;
  right: -6px;
  bottom: -6px;
  font-size: 44px !important;
  opacity: 0.07;
  pointer-events: none;
  color: var(--color-on-surface);
}

@media (max-width: 380px) {
  .air-twin-card {
    padding: 8px 8px;
    min-height: 80px;
  }
  .air-badge-live,
  .air-badge-cumulative {
    font-size: var(--text-2xs);
    padding: 2.5px 8px;
    gap: 3px;
  }
  .air-pulse-dot {
    width: 6px;
    height: 6px;
  }
  .air-card-type-tag {
    font-size: var(--text-2xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .air-twin-num {
    font-size: var(--text-2xl);
  }
  .air-twin-unit {
    font-size: var(--text-2xs);
  }
  .air-metric-title {
    font-size: var(--text-sm);
    white-space: nowrap;
  }
  .air-status-pill {
    font-size: var(--text-2xs);
    padding: 2.5px 8px;
  }
}

@media (max-width: 340px) {
  .air-twin-card {
    padding: 6px 6px;
  }
  .air-badge-live,
  .air-badge-cumulative {
    font-size: var(--text-2xs);
    padding: 2.5px 8px;
    gap: 2px;
  }
  .air-card-type-tag {
    font-size: var(--text-2xs);
  }
  .air-twin-num {
    font-size: 21px;
  }
  .air-metric-title {
    font-size: var(--text-sm);
  }
  .air-status-pill {
    font-size: var(--text-2xs);
    padding: 2.5px 8px;
  }
}

/* Singapore Map Background for 5-Region Display */
.sg-map-regions-card {
  position: relative;
  width: 100%;
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 8px 10px 10px 10px;
  z-index: 2;
}

.sg-map-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
  z-index: 4;
}

.sg-map-compass-label {
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sg-map-legend-pill {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-outline);
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  padding: 2.5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sg-map-stage-container {
  position: relative;
  width: 100%;
  height: 152px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.sg-map-stage {
  position: relative;
  height: 100%;
  aspect-ratio: 871 / 563;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-map-coastline-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
  pointer-events: none;
  transition: opacity 0.3s ease;
}

body[data-theme="dark"] .sg-map-coastline-img {
  opacity: 0.95;
  filter: invert(1) brightness(1.2) hue-rotate(170deg) drop-shadow(0 0 10px rgba(134, 239, 172, 0.25));
}

.sg-map-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(115, 121, 111, 0.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(115, 121, 111, 0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* 5 Regional Sector Pins - Symmetrically Aligned on North-South & East-West Axes */
.sg-reg-pin {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sg-reg-pin:hover {
  transform: translate(-50%, -50%) scale(1.1);
  z-index: 10;
}

/* Perfect Cardinal Alignment: N, C, S share left: 50%; W, C, E share top: 49% */
.sg-reg-pin.north   { top: 20%; left: 50%; }
.sg-reg-pin.west    { top: 49%; left: 17%; }
.sg-reg-pin.central { top: 49%; left: 50%; }
.sg-reg-pin.east    { top: 49%; left: 83%; }
.sg-reg-pin.south   { top: 77%; left: 50%; }

.sg-reg-chip {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  padding: 2.5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  line-height: 1;
}

body[data-theme="dark"] .sg-reg-chip {
  background: rgba(26, 33, 25, 0.95);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.sg-reg-badge {
  font-size: var(--text-2xs);
  font-weight: 900;
  color: #ffffff;
  border-radius: 4px;
  padding: 2.5px 8px;
  line-height: 1;
  text-transform: uppercase;
}

.sg-reg-data {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.sg-reg-val-primary {
  font-size: var(--text-sm);
  font-weight: 800;
}

.sg-reg-val-secondary {
  font-size: var(--text-sm);
  font-weight: 800;
}

.sg-reg-divider {
  font-size: var(--text-2xs);
  font-weight: 400;
  opacity: 0.35;
  color: var(--color-outline);
  margin: 0 1.5px;
}

/* Regional Haze Threat Strip */
.air-haze-threat-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: var(--text-sm);
  color: var(--color-outline);
  position: relative;
  z-index: 2;
  gap: 10px;
}

.air-haze-threat-strip strong {
  color: var(--color-on-surface);
}

@media (max-width: 380px) {
  .air-haze-threat-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 6px 10px;
    font-size: var(--text-2xs);
  }
  .air-haze-threat-strip > div {
    width: 100%;
    justify-content: space-between;
  }
}

/* Modal Charts & Tabs */
.air-tab-group {
  display: flex;
  background: var(--color-surface-container);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 3px;
  margin-bottom: 12px;
}

.air-tab-btn {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--color-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.air-tab-btn.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 2px 6px rgba(51, 79, 43, 0.2);
}

.air-chart-card {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 14px 14px 10px 14px;
  margin-bottom: 14px;
  position: relative;
}

.air-chart-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
  flex-wrap: wrap;
}

.air-chart-stat-chip {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: var(--text-2xs);
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-outline);
}

.air-chart-stat-chip strong {
  color: var(--color-on-surface);
}

.air-trend-svg-container {
  width: 100%;
  position: relative;
  touch-action: none;
  user-select: none;
}

.air-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(27, 28, 25, 0.92);
  color: #ffffff;
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: var(--text-2xs);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -120%);
  white-space: nowrap;
  z-index: 20;
  transition: opacity 0.15s ease;
  display: none;
}

.haze-widget-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 25%, rgba(202, 138, 4, 0.15) 0%, rgba(51, 79, 43, 0.05) 60%, transparent 100%);
  pointer-events: none;
}

.haze-wind-arrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs) !important;
  width: 11px;
  height: 11px;
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Pulsing Hotspot Fire Marker */
.haze-hotspot-pin {
  width: 13px;
  height: 13px;
  background: radial-gradient(circle, #f97316 0%, var(--color-danger) 100%);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-danger-container);
  position: relative;
  animation: hotspot-pulse 1.8s infinite ease-in-out;
}

.haze-hotspot-pin::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--color-danger-container);
  animation: hotspot-ring 1.8s infinite ease-out;
}

@keyframes hotspot-pulse {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.12); box-shadow: 0 0 12px var(--color-danger-container); }
  100% { transform: scale(0.92); }
}

@keyframes hotspot-ring {
  0% { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Regional Station Pin (Refined Pill with Singapore Standard Indicator) */
.haze-station-pin {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-full);
  padding: 1px 2px 1px 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  font-size: var(--text-2xs);
  font-weight: 800;
  color: #1b1c19;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  /* Zero-size divIcon: centre the auto-width pill on its coordinate */
  position: absolute;
  transform: translate(-50%, -50%);
}

.haze-station-pin:hover {
  transform: translate(-50%, calc(-50% - 2px)) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 999 !important;
}

.haze-station-pin--home {
  border: 2px solid var(--color-primary);
  z-index: 500 !important;
}

.haze-station-badge {
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 800;
  color: #ffffff;
}

.haze-station-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Layer Control Chips (Horizontal Scroll, No Wrap, Crisp Icons) */
.haze-layer-chip {
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-lowest);
  color: var(--color-on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.haze-layer-chip:hover {
  background: var(--color-surface-container);
  border-color: var(--color-outline);
}

.haze-layer-chip.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(51, 79, 43, 0.25);
}

.haze-layer-chip.active .material-symbols-outlined {
  color: var(--color-on-primary) !important;
}

/* Timeline scrubber for Haze Explorer */
.haze-timeline-btn {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  padding: 5px 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-lowest);
  color: var(--color-outline);
  font-size: var(--text-2xs);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

.haze-timeline-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-container);
}

.haze-timeline-btn.active {
  background: var(--color-primary-fixed);
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(51, 79, 43, 0.15);
}

/* Timeline Play/Pause Button */
.haze-timeline-play-btn {
  width: 36px;
  height: 50px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-lowest);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.haze-timeline-play-btn:hover {
  background: var(--color-surface-container);
  border-color: var(--color-primary);
}

.haze-timeline-play-btn.playing {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

/* Map Expand/Collapse Button & Container */
#haze-modal-map {
  height: 310px;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#haze-modal-map.expanded {
  height: 480px;
}

.haze-map-expand-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 400;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.haze-map-expand-btn:hover {
  background: #ffffff;
  transform: scale(1.05);
}

/* Legend sits below the map so it never covers data */
.haze-map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-bottom: 12px;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-on-surface-variant);
}

.haze-wind-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  font-size: var(--text-2xs);
  font-weight: 600;
}

/* Odd chip out spans the full row */
.haze-layer-grid .haze-layer-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Layer toggles: 2x2 so every control is visible on 360px screens */
.haze-layer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.haze-layer-grid .haze-layer-chip {
  justify-content: center;
  min-height: 36px;
  min-width: 0;
}

.haze-legend-item {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.haze-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Basemap: mute OSM so hotspots, plumes and PSI pills carry the visual weight */
.haze-basemap-tiles { filter: grayscale(0.85) contrast(0.9) brightness(1.06); }

.haze-wind-arrow {
  display: block;
  color: var(--color-info);
  line-height: 1;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95));
  pointer-events: none;
}

/* Animated wind path */
@keyframes wind-dash-animation {
  to {
    stroke-dashoffset: -28;
  }
}

.haze-wind-animated-path {
  animation: wind-dash-animation 1.4s linear infinite;
}

.aqi-sector-card {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.aqi-sector-card:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-container);
}

.pollutant-card {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}

/* =========================================================
   EMPTY STATES & ZERO STATE COMPONENTS
   ========================================================= */
.empty-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 20px;
  border-radius: var(--radius-xl);
  margin: 12px 0;
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.empty-state-icon-container {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary-fixed);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(51, 79, 43, 0.12);
}

.empty-state-icon-container .material-symbols-outlined {
  font-size: 32px;
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

.empty-state-description {
  font-size: var(--text-base);
  color: var(--color-outline);
  line-height: 1.45;
  max-width: 320px;
  margin: 0 auto;
}

.empty-state-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  font-family: inherit;
}

.empty-state-btn.primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 2px 8px rgba(51, 79, 43, 0.25);
}

.empty-state-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(51, 79, 43, 0.3);
}

.empty-state-btn.secondary {
  background: var(--color-surface-low);
  color: var(--color-primary);
  border: 1px solid var(--color-outline-variant);
}

.empty-state-btn.secondary:hover {
  background: var(--color-surface-container);
  transform: translateY(-1px);
}

/* =========================================================
   ADD WIDGET HOME CARD (Feed End Affordance)
   ========================================================= */

.add-widget-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1.5px dashed rgba(51, 79, 43, 0.3);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(245, 244, 239, 0.96));
  padding: 18px 16px 16px 16px;
  cursor: pointer;
  opacity: 0.9;
  transform: translateY(14px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease,
              box-shadow 0.25s ease;
  contain: paint;
}

body[data-theme="dark"] .add-widget-card {
  border-color: rgba(175, 208, 161, 0.28);
  background: linear-gradient(135deg, rgba(27, 38, 31, 0.88), rgba(20, 30, 23, 0.94));
}

body[data-theme="amber"] .add-widget-card {
  border-color: rgba(115, 92, 0, 0.28);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 243, 235, 0.96));
}

.add-widget-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 4px 20px -2px rgba(51, 79, 43, 0.08);
}

.add-widget-card:hover {
  border-color: var(--color-primary);
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(51, 79, 43, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .add-widget-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.add-widget-card__ambient-glow {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 103, 65, 0.16) 0%, rgba(74, 103, 65, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

body[data-theme="dark"] .add-widget-card__ambient-glow {
  background: radial-gradient(circle, rgba(175, 208, 161, 0.18) 0%, rgba(175, 208, 161, 0) 70%);
}

body[data-theme="amber"] .add-widget-card__ambient-glow {
  background: radial-gradient(circle, rgba(234, 179, 8, 0.18) 0%, rgba(234, 179, 8, 0) 70%);
}

.add-widget-card__header {
  position: relative;
  z-index: 1;
}

.add-widget-card__sparkle {
  font-size: 18px;
  color: var(--color-primary);
  opacity: 0.85;
  animation: pulseSparkle 3s ease-in-out infinite;
}

@keyframes pulseSparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.15) rotate(15deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .add-widget-card__sparkle {
    animation: none;
  }
}

.add-widget-card__body {
  position: relative;
  z-index: 1;
  margin-top: 8px;
}

.add-widget-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-on-surface);
  letter-spacing: -0.02em;
  margin: 0 0 4px 0;
  line-height: 1.25;
}

.add-widget-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-outline);
  line-height: 1.45;
  margin: 0;
}

.add-widget-card__quick-rail-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-outline);
  position: relative;
  z-index: 1;
}

.add-widget-card__quick-rail-hint {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: none;
  opacity: 0.85;
}

.add-widget-card__quick-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px 2px;
  margin: 8px -2px 12px -2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  position: relative;
  z-index: 1;
}

.add-widget-card__quick-rail::-webkit-scrollbar {
  display: none;
}

.add-widget-quick-chip {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-lowest, #ffffff);
  border: 1px solid var(--glass-border);
  color: var(--color-on-surface);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  min-height: 36px;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  user-select: none;
}

body[data-theme="dark"] .add-widget-quick-chip {
  background: var(--color-surface-container);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}

body[data-theme="amber"] .add-widget-quick-chip {
  background: var(--color-surface-lowest, #ffffff);
  border-color: var(--color-outline-variant);
}

.add-widget-quick-chip:hover {
  background: var(--color-surface-container);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

body[data-theme="dark"] .add-widget-quick-chip:hover {
  background: var(--color-surface-high);
  border-color: var(--color-primary);
}

.add-widget-quick-chip:active {
  transform: scale(0.96);
}

.add-widget-quick-chip__icon {
  font-size: var(--text-lg);
  color: var(--color-primary);
  flex-shrink: 0;
}

.add-widget-quick-chip__text {
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.add-widget-quick-chip__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container, #ffffff);
  margin-left: 2px;
  flex-shrink: 0;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.add-widget-quick-chip:hover .add-widget-quick-chip__plus {
  background: var(--color-primary);
  color: var(--color-on-primary);
  transform: scale(1.1);
}

.add-widget-card__footer {
  position: relative;
  z-index: 1;
  margin-top: 4px;
}

.add-widget-card__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.add-widget-card__cta-btn:hover {
  background: var(--color-primary-container);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.add-widget-card__cta-btn:active {
  transform: scale(0.98);
}

/* =========================================================
   Lottery & Pools Official Draw Results Modal & Badges
   ========================================================= */

.lottery-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

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

.lottery-prize-card {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lottery-prize-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-ambient);
}

.lottery-prize-card.first-prize {
  border-color: rgba(212, 160, 23, 0.45);
  background: linear-gradient(145deg, rgba(254, 214, 91, 0.15) 0%, var(--color-surface-low) 100%);
}

.lottery-prize-card.second-prize {
  border-color: rgba(148, 163, 184, 0.45);
  background: linear-gradient(145deg, rgba(226, 232, 240, 0.18) 0%, var(--color-surface-low) 100%);
}

.lottery-prize-card.third-prize {
  border-color: rgba(180, 83, 9, 0.35);
  background: linear-gradient(145deg, var(--color-warning-container) 0%, var(--color-surface-low) 100%);
}

.lottery-badge-grid {
  display: grid;
  /* Fluid: 5-up when the card is wide enough, otherwise reflows to 4/3-up
     instead of squeezing 4-digit numbers (320px to 480px safe). */
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: clamp(4px, 1.6vw, 8px);
}

.lottery-chip {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  padding: 8px 2px;
  min-width: 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(12px, 3.6vw, 14px);
  font-weight: 700;
  color: var(--color-on-surface);
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}

.lottery-chip:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-container);
  color: var(--color-primary);
  transform: scale(1.03);
}

.lottery-ball {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 3px 8px rgba(51, 79, 43, 0.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .lottery-ball {
    width: 32px;
    height: 32px;
    font-size: var(--text-base);
  }
}

@media (max-width: 350px) {
  .lottery-ball {
    width: 27px;
    height: 27px;
    font-size: var(--text-2xs);
  }
}

.lottery-ball.bonus {
  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning) 100%);
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(217, 119, 6, 0.35);
}

.lottery-checker-card {
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 16px;
}

.lottery-checker-input {
  width: 100%;
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--text-md);
  color: var(--color-on-background);
  outline: none;
  transition: border-color 0.2s ease;
}

.lottery-checker-input:focus {
  border-color: var(--color-primary);
}

.lottery-payout-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-top: 12px;
}

.lottery-payout-table th {
  text-align: left;
  padding: 8px;
  background: var(--color-surface-low);
  color: var(--color-outline);
  font-weight: 700;
  border-bottom: 1px solid var(--color-outline-variant);
}

.lottery-payout-table td {
  padding: 8px;
  border-bottom: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface);
}

/* =========================================================
   SMART PROXIMITY RAIN PUSH ALERT & RADAR MARKERS
   ========================================================= */

.proximity-rain-banner {
  background: linear-gradient(135deg, rgba(230, 244, 254, 0.92) 0%, rgba(240, 249, 255, 0.95) 100%);
  border: 1.5px solid #38bdf8;
  border-radius: var(--radius-xl);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 30px -4px rgba(14, 165, 233, 0.15), var(--shadow-ambient);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: slideInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition: all 0.3s ease;
}

[data-theme="dark"] .proximity-rain-banner {
  background: linear-gradient(135deg, rgba(12, 44, 68, 0.92) 0%, rgba(15, 33, 50, 0.95) 100%);
  border-color: var(--color-info);
  box-shadow: 0 8px 32px -4px var(--color-info-container);
}

.proximity-rain-banner.imminent {
  border-color: #f97316;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.94) 0%, rgba(254, 242, 242, 0.96) 100%);
  box-shadow: 0 8px 30px -4px rgba(249, 115, 22, 0.2);
}

[data-theme="dark"] .proximity-rain-banner.imminent {
  background: linear-gradient(135deg, rgba(67, 26, 10, 0.92) 0%, rgba(45, 17, 8, 0.95) 100%);
  border-color: var(--color-unhealthy);
}

.proximity-rain-banner.active-downpour {
  border-color: #3b82f6;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95) 0%, rgba(224, 242, 254, 0.97) 100%);
}

.proximity-rain-banner.subsiding {
  border-color: #60a5fa;
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.94) 0%, rgba(236, 254, 255, 0.96) 100%);
  box-shadow: 0 8px 30px -4px rgba(96, 165, 250, 0.18);
}

[data-theme="dark"] .proximity-rain-banner.subsiding {
  background: linear-gradient(135deg, rgba(12, 45, 68, 0.92) 0%, rgba(8, 47, 58, 0.95) 100%);
  border-color: #3b82f6;
}

.proximity-rain-banner.clearing {
  border-color: #34d399;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.94) 0%, rgba(240, 253, 250, 0.96) 100%);
  box-shadow: 0 8px 30px -4px rgba(52, 211, 153, 0.18);
}

[data-theme="dark"] .proximity-rain-banner.clearing {
  background: linear-gradient(135deg, rgba(6, 46, 36, 0.92) 0%, rgba(9, 45, 40, 0.95) 100%);
  border-color: #10b981;
}

.proximity-rain-banner.forecast {
  border-color: #818cf8;
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.94) 0%, rgba(245, 243, 255, 0.96) 100%);
  box-shadow: 0 8px 30px -4px rgba(129, 140, 248, 0.18);
}

[data-theme="dark"] .proximity-rain-banner.forecast {
  background: linear-gradient(135deg, rgba(35, 32, 68, 0.92) 0%, rgba(30, 27, 60, 0.95) 100%);
  border-color: #6366f1;
}

.proximity-icon-container {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-info);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.proximity-rain-banner.imminent .proximity-icon-container {
  background: var(--color-unhealthy);
}

.proximity-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  opacity: 0.7;
  animation: proximity-pulse-anim 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes proximity-pulse-anim {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

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

.proximity-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.proximity-title {
  font-size: 15px;
  font-weight: 800;
  color: #0369a1;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .proximity-title {
  color: #38bdf8;
}

.proximity-rain-banner.imminent .proximity-title {
  color: #c2410c;
}

[data-theme="dark"] .proximity-rain-banner.imminent .proximity-title {
  color: #fb923c;
}

.proximity-eta-pill {
  background: var(--color-info);
  color: #ffffff;
  font-size: var(--text-2xs);
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.proximity-rain-banner.imminent .proximity-eta-pill {
  background: var(--color-unhealthy);
}

.proximity-message {
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--color-on-surface);
  margin-bottom: 8px;
  font-weight: 500;
}

.proximity-meta-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.proximity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--color-outline);
  background: rgba(255, 255, 255, 0.6);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .proximity-chip {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.08);
}

.proximity-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proximity-actions .proximity-action-btn {
  flex: 1;
  justify-content: center;
  min-height: 44px;
}

.proximity-action-btn {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  font-family: inherit;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.proximity-action-btn.primary {
  background: var(--color-info);
  color: #ffffff;
}

.proximity-action-btn.primary:hover {
  background: #0369a1;
  transform: translateY(-1px);
}

.proximity-rain-banner.imminent .proximity-action-btn.primary {
  background: var(--color-unhealthy);
}

.proximity-rain-banner.imminent .proximity-action-btn.primary:hover {
  background: #c2410c;
}

/* Easing / clearing / forecast variants */
.proximity-rain-banner.subsiding .proximity-icon-container {
  background: #3b82f6;
}

.proximity-rain-banner.clearing .proximity-icon-container {
  background: #10b981;
}

.proximity-rain-banner.forecast .proximity-icon-container {
  background: #6366f1;
}

.proximity-rain-banner.subsiding .proximity-title {
  color: #1d4ed8;
}

[data-theme="dark"] .proximity-rain-banner.subsiding .proximity-title {
  color: #60a5fa;
}

.proximity-rain-banner.clearing .proximity-title {
  color: #047857;
}

[data-theme="dark"] .proximity-rain-banner.clearing .proximity-title {
  color: #34d399;
}

.proximity-rain-banner.forecast .proximity-title {
  color: #4338ca;
}

[data-theme="dark"] .proximity-rain-banner.forecast .proximity-title {
  color: #a5b4fc;
}

.proximity-rain-banner.subsiding .proximity-eta-pill {
  background: #3b82f6;
}

.proximity-rain-banner.clearing .proximity-eta-pill {
  background: #10b981;
}

.proximity-rain-banner.forecast .proximity-eta-pill {
  background: #6366f1;
}

.proximity-rain-banner.subsiding .proximity-action-btn.primary {
  background: #3b82f6;
}

.proximity-rain-banner.subsiding .proximity-action-btn.primary:hover {
  background: #2563eb;
}

.proximity-rain-banner.clearing .proximity-action-btn.primary {
  background: #10b981;
}

.proximity-rain-banner.clearing .proximity-action-btn.primary:hover {
  background: #059669;
}

.proximity-rain-banner.forecast .proximity-action-btn.primary {
  background: #6366f1;
}

.proximity-rain-banner.forecast .proximity-action-btn.primary:hover {
  background: #4f46e5;
}

/* Calm the pulse ring for statuses that are easing or clearing */
.proximity-rain-banner.subsiding .proximity-pulse-ring,
.proximity-rain-banner.clearing .proximity-pulse-ring {
  animation-duration: 3.2s;
}

.proximity-action-btn.secondary {
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-outline);
  border: 1px solid var(--color-outline-variant);
}

.proximity-action-btn.secondary:hover {
  background: var(--color-surface-lowest);
  color: var(--color-on-surface);
}

[data-theme="dark"] .proximity-action-btn.secondary {
  background: rgba(255, 255, 255, 0.06);
}

/* Rain Radar Home Widget — Full-Width Canvas */
.radar-bento-card {
  padding: 0 0 12px 0;
  display: flex;
  flex-direction: column;
}

.radar-map-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 245px;
  overflow: hidden;
  background: #232f3e;
}

.radar-map-mount {
  position: absolute;
  inset: 0;
}

/* Bottom scrim keeps the in-canvas player legible over the map */
.radar-map-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.65) 0%, transparent 100%);
  pointer-events: none;
  z-index: 700;
}

/* Full-radius radar viewport (weather tab module + modal) */
.radar-map-viewport {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--color-outline-variant);
  background: #232f3e;
}

.radar-map-viewport-modal {
  height: 300px;
  margin-bottom: 0;
  background: #111a24;
}

.radar-map-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 800;
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.radar-map-badge-modal {
  top: 10px;
  left: 10px;
  padding: 3px 10px;
}

/* Map-level zoom controls (page zoom is disabled, so these carry magnification) */
.radar-zoom-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.radar-zoom-controls button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.radar-zoom-controls button .material-symbols-outlined {
  font-size: var(--text-xl);
}

.radar-zoom-controls button:active {
  background: rgba(15, 23, 42, 0.92);
}

/* Timing label in the home widget header (rendered inside .status-pill) */
.radar-widget-time {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* In-canvas playback controls for the home widget radar loop */
.radar-map-controls {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 800;
}

.radar-widget-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #232f3e;
  color: #fff;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

#widget-radar-slider {
  flex: 1;
  min-width: 0;
  height: 18px;
  accent-color: #232f3e;
  cursor: pointer;
}

/* OSM/geoBoundaries credit rendered below the map canvas on every radar
   surface, so it never covers the in-canvas play button or time slider. */
.radar-map-attribution {
  min-width: 0;
  padding: 6px 12px;
  font-size: var(--text-2xs);
  line-height: 1.4;
  color: var(--color-outline);
  overflow-wrap: anywhere;
}

/* Hug the map on the weather module: its viewport keeps a 14px bottom margin. */
.radar-map-viewport + .radar-map-attribution {
  margin-top: -10px;
  padding-top: 0;
}

.radar-map-viewport-modal + .radar-map-attribution {
  margin-top: 0;
  padding-top: 6px;
}

.radar-map-attribution a {
  color: inherit;
  text-decoration: none;
}

.radar-map-attribution a:hover,
.radar-map-attribution a:focus {
  text-decoration: underline;
}

/* Radar Map Pin Marker (Leaflet divIcon) */
.radar-pin-icon {
  background: none;
  border: none;
}

.radar-pin-anchor {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.radar-pin-beacon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-info);
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px var(--color-info-container);
  position: relative;
}

.radar-pin-halo {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1.5px dashed #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  animation: radar-halo-spin 6s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes radar-halo-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.radar-pin-label {
  margin-top: 4px;
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.radar-cell-icon { background: none; border: none; }

.radar-cell-anchor {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.radar-cell-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px dashed var(--color-danger);
  background: rgba(220, 38, 38, 0.12);
}

.radar-cell-label {
  margin-top: 3px;
  background: var(--color-danger);
  color: #ffffff;
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  min-width: 0;
}

/* =========================================================
   RADAR SHARE SHEET (animated GIF export)
   Mobile-first: preview, progress and actions must fit 360px.
   ========================================================= */

.radar-share-icon-btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.radar-share-icon-btn::after {
  content: '';
  position: absolute;
  inset: -7px;
}

.radar-share-icon-btn:hover,
.radar-share-icon-btn:focus-visible {
  background: var(--color-primary-fixed);
  border-color: var(--color-primary);
}

.radar-share-stage {
  position: relative;
  min-height: 240px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
}

.radar-share-loading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.radar-share-loading[hidden],
.radar-share-preview[hidden],
.radar-share-error[hidden] {
  display: none;
}

.radar-share-spin {
  font-size: 30px;
  color: var(--color-primary);
  animation: radar-share-spin 1.4s linear infinite;
}

@keyframes radar-share-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.radar-share-progress-track {
  width: min(260px, 76%);
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
  overflow: hidden;
}

.radar-share-progress-fill {
  width: 4%;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width 0.2s ease;
}

.radar-share-progress-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-on-surface-variant);
}

.radar-share-preview {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 44vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--color-surface-container);
}

.radar-share-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--color-on-surface-variant);
  text-align: center;
}

.radar-share-error button {
  min-height: 34px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.radar-share-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
}

.radar-share-controls[hidden] {
  display: none;
}

.radar-share-play-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}

.radar-share-play-btn:hover {
  transform: scale(1.05);
}

.radar-share-slider-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.radar-share-scrub-input {
  width: 100%;
  accent-color: var(--color-primary);
  cursor: pointer;
  height: 6px;
}

.radar-share-caption {
  margin-top: 8px;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--color-outline);
  text-align: center;
}

.radar-share-format-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.radar-share-format-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-outline);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.radar-share-format-pills {
  display: flex;
  gap: 6px;
  align-items: center;
}

.radar-share-format-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
  color: var(--color-on-surface);
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 32px;
  transition: all 0.16s ease;
}

.radar-share-format-pill:hover {
  background: var(--color-surface-container);
}

.radar-share-format-pill.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.radar-share-fmt-tag {
  font-size: var(--text-2xs);
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  background: rgba(34, 197, 94, 0.18);
  color: var(--color-success-text);
  letter-spacing: 0.02em;
}

.radar-share-format-pill.active .radar-share-fmt-tag {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

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

.radar-share-btn {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--text-base);
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.radar-share-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.radar-share-btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.radar-share-btn-secondary {
  background: var(--color-surface-low);
  color: var(--color-on-surface);
  border-color: var(--color-outline-variant);
}

.radar-share-hint {
  margin: 10px 0 0 0;
  font-size: var(--text-2xs);
  line-height: 1.45;
  color: var(--color-outline);
}

@media (max-width: 380px) {
  .radar-share-format-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .radar-share-format-pills {
    width: 100%;
    justify-content: flex-start;
  }
  .radar-share-format-pill {
    padding: 8px 14px;
    font-size: var(--text-2xs);
  }
  .radar-share-fmt-tag {
    display: none;
  }
}

@media (max-width: 380px) {
  .radar-share-stage {
    min-height: 200px;
    padding: 10px;
  }
  .radar-share-btn {
    padding: 10px;
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-share-spin {
    animation: none;
  }
  .radar-share-progress-fill {
    transition: none;
  }
}

/* =========================================================
   WIDGET CARD HIGH-RES IMAGE SHARING MODAL
   ========================================================= */

.widget-share-preview-wrap {
  width: 100%;
  max-height: 48vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}

.widget-share-preview-wrap[hidden] {
  display: none !important;
}

.widget-share-preview {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 44vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.widget-share-preview[hidden] {
  display: none !important;
}

@media (max-width: 380px) {
  .widget-share-preview-wrap {
    max-height: 42vh;
  }
  .widget-share-preview {
    max-height: 38vh;
  }
}

/* =========================================================
   TASTEFUL PARTNER & SPONSORSHIP WIDGETS
   Minimal intrusion, botanical harmony, and user agency
   ========================================================= */

.sponsored-widget-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  background: var(--glass-card-bg);
}

.sponsored-widget-card:hover {
  border-color: var(--color-warning-container);
  box-shadow: 0 8px 24px -4px var(--color-warning-container), var(--shadow-card);
}

.sponsored-widget-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-warning), #10b981, var(--color-info));
  opacity: 0.85;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.sponsored-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--color-warning-container);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-container);
}

body[data-theme="dark"] .sponsored-badge {
  background: var(--color-warning-container);
  color: #fbbf24;
  border-color: var(--color-warning-container);
}

.ad-dismiss-btn {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  color: var(--color-outline);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
  flex-shrink: 0;
}

.ad-dismiss-btn:hover {
  background: var(--color-error-container);
  color: var(--color-error);
  border-color: var(--color-error);
  transform: scale(1.08);
}

/* Transit Contextual Commuter Perk Card */
.transit-perk-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--glass-card-bg);
  box-shadow: var(--shadow-ambient);
  margin-top: 18px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.transit-perk-card:hover {
  border-color: var(--color-info-container);
  transform: translateY(-1px);
}

.transit-perk-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-info);
}

/* Interactive Promo Code Box */
.promo-code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface-low);
  border: 1.5px dashed var(--color-primary);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 14px 0;
}

.promo-code-box:hover {
  background: var(--color-primary-fixed);
  border-style: solid;
}

.promo-code-box:active {
  transform: scale(0.98);
}

.promo-code-text {
  font-family: monospace;
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-primary);
}

.promo-copy-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
}

/* Modal Transparency Banner */
.ad-transparency-note {
  margin-top: 18px;
  padding: 10px 14px;
  background: var(--color-surface-low);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-2xs);
  color: var(--color-outline);
  line-height: 1.4;
}

/* Location Status Badges & Fallback Configuration Sheets */
.location-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
  user-select: none;
}

.location-badge.active {
  background: var(--color-success-container);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-container);
}

.location-badge.warning {
  background: var(--color-warning-container);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-container);
  cursor: pointer;
}

.location-badge.warning:hover {
  background: var(--color-warning-container);
  transform: translateY(-1px);
}

.config-region-card {
  background: var(--color-surface-low);
  border: 1.5px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.config-region-card:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(51, 79, 43, 0.08);
}

.config-region-card.active {
  border-color: var(--color-primary);
  background: rgba(51, 79, 43, 0.06);
}

/* ==========================================================================
   Transit Search, Category Chips & Service Favouriting (AGENTS.md Compact Mobile Compliant)
   ========================================================================== */

.transit-category-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 6px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.transit-category-chips::-webkit-scrollbar {
  display: none;
}

/* Shared utility: hide horizontal scrollbars on chip/pill rails (mobile). */
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.transit-cat-chip {
  padding: 5px 12px;
  font-size: var(--text-2xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
  color: var(--color-on-surface-variant);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.transit-cat-chip:hover {
  background: var(--color-surface-container);
  border-color: var(--color-primary);
}

.transit-cat-chip.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: 0 2px 6px rgba(51, 79, 43, 0.25);
}

.bus-service-star-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-outline);
  border-radius: var(--radius-full);
  transition: transform 0.15s ease, color 0.15s ease;
}

.bus-service-star-btn:hover {
  color: var(--color-star-ink);
  transform: scale(1.15);
}

/* Bus Route Preview Card */
.bus-route-service-card {
  background: linear-gradient(135deg, var(--color-surface-lowest) 0%, var(--color-surface-low) 100%);
  border: 1.5px solid var(--color-primary-container);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-ambient);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.bus-route-service-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-elevated);
}

.bus-route-service-card:active {
  transform: scale(0.99);
}

#transit-results-container .glass-panel[data-stopcode] {
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#transit-results-container .glass-panel[data-stopcode]:hover {
  border-color: var(--color-primary);
}

#transit-results-container .glass-panel[data-stopcode]:active {
  transform: scale(0.99);
}

.bus-route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bus-route-number-pill {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary);
  background: var(--color-primary-fixed);
  padding: 3px 12px;
  border-radius: var(--radius-sm);
  display: inline-block;
  font-family: var(--font-family);
  letter-spacing: -0.02em;
}

.bus-route-dir-btn {
  padding: 5px 12px;
  font-size: var(--text-2xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-lowest);
  color: var(--color-on-surface-variant);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.bus-route-dir-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.bus-route-dir-btn.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

/* Bus Route Timeline & Sequential Stepper */
.bus-route-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 20px;
  margin-left: 8px;
}

.bus-route-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--color-outline-variant);
  z-index: 0;
}

.bus-timeline-stop-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px 9px 8px;
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  min-height: 48px;
  box-sizing: border-box;
}

.bus-timeline-stop-item:hover {
  background: var(--color-surface-container);
}

.bus-timeline-stop-item:active {
  background: var(--color-surface-high);
  transform: scale(0.99);
}

.bus-timeline-node {
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-surface-lowest);
  border: 2px solid var(--color-outline);
  z-index: 1;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.bus-timeline-stop-item.is-first .bus-timeline-node {
  border-color: var(--color-success);
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.bus-timeline-stop-item.is-last .bus-timeline-node {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2);
}

.recent-search-chip {
  padding: 4px 10px;
  font-size: var(--text-2xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.recent-search-chip:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-container);
}

/* Virtual Keyboard Smooth Scrolling in Drawers */
.modal-sheet {
  /* Prevent jarring bounce on virtual keyboard emergence */
  scroll-padding-bottom: calc(40px + env(keyboard-inset-height, 0px));
}

#bus-stop-modal-search,
#transit-search-input {
  /* Prevent mobile zoom on focus */
  font-size: var(--text-lg) !important;
}

@media (min-width: 481px) {
  #bus-stop-modal-search,
  #transit-search-input {
    font-size: var(--text-md) !important;
  }
}

/* Minimum 44px touch-target expansion for compact icon-only controls.
   The visual size stays compact; the hit area grows via a transparent ::after. */
.icon-btn,
.ad-dismiss-btn,
.bus-service-star-btn,
.radar-widget-play-btn {
  position: relative;
}

.icon-btn::after,
.search-clear-btn::after,
.ad-dismiss-btn::after,
.bus-service-star-btn::after,
.radar-widget-play-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.bus-service-star-btn::after {
  width: 46px;
  height: 46px;
}

.radar-widget-play-btn::after {
  width: 46px;
  height: 46px;
}

/* =========================================================
   UNIFIED ALERT CENTER + WEATHER SAFETY WIDGETS
   Severity-ranked hazards, regional hazard compass and the
   lightning activity sparkline. Mobile-first: every flex/grid
   child keeps min-width:0 so narrow 360px cards never clip.
   ========================================================= */

.alert-bell-btn {
  position: relative;
}

.alert-bell-btn.has-active-alerts .material-symbols-outlined {
  color: var(--color-danger);
  animation: alertBellPulse 3.2s ease-in-out infinite;
}

.alert-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  border-radius: var(--radius-full);
  color: #ffffff;
  font-size: var(--text-2xs);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--color-background);
  box-sizing: border-box;
  line-height: 1;
  pointer-events: none;
}

@keyframes alertBellPulse {
  0%, 100% { transform: rotate(0deg); }
  5% { transform: rotate(11deg); }
  10% { transform: rotate(-9deg); }
  15% { transform: rotate(5deg); }
  20% { transform: rotate(-3deg); }
  25% { transform: rotate(0deg); }
}

.alert-center-widget {
  min-width: 0;
}

.alert-center-top {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-left: 4px solid var(--color-outline);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  min-width: 0;
}

.alert-center-message {
  font-size: var(--text-sm);
  color: var(--color-outline);
  margin-top: 3px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.alert-category-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-2xs);
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.alert-center-clear {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-top: 10px;
  min-width: 0;
}

.alert-center-row {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-left: 4px solid var(--color-outline);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-width: 0;
}

.alert-action-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 14px;
  background: var(--color-surface-lowest);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-on-surface-variant);
  line-height: 1.4;
  min-width: 0;
}

.alert-action-row > span:last-child {
  min-width: 0;
}

.alert-snooze-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--color-outline-variant);
  color: var(--color-outline);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.alert-snooze-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.alert-clear-snoozes-btn {
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-2xs);
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
}

.alert-inline-link {
  color: var(--color-primary);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-decoration: none;
}

.alert-center-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.alert-stat-cell {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 10px 6px;
  text-align: center;
  min-width: 0;
}

.alert-stat-value {
  display: block;
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-on-surface);
  line-height: 1.1;
}

.alert-stat-label {
  display: block;
  font-size: var(--text-2xs);
  color: var(--color-outline);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hazard-compass {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-width: 320px;
  margin: 0 auto;
}

.hazard-compass-cell {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 0;
}

.hazard-compass-cell.empty {
  background: transparent;
  border: 1px dashed var(--color-outline-variant);
  opacity: 0.45;
}

.hazard-compass-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-outline);
  letter-spacing: 0.03em;
}

.hazard-compass-val {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-on-surface);
  line-height: 1.2;
}

.lightning-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 32px;
  flex-shrink: 0;
}

.lightning-bar-col {
  width: 7px;
  height: 32px;
  display: flex;
  align-items: flex-end;
}

.lightning-bar {
  width: 100%;
  border-radius: 3px 3px 1px 1px;
  transition: height 0.3s ease;
}

.lightning-compass-wrap {
  flex-shrink: 0;
}

.lightning-compass {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  border: 2px dashed var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-low);
}

.lightning-compass-arrow {
  font-size: 22px;
  color: var(--color-primary);
  line-height: 1;
  display: block;
}

.lightning-strike-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  min-width: 0;
}

@media (max-width: 380px) {
  .alert-center-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hazard-compass {
    max-width: 100%;
  }
}

/* Commute pack: parking rows, lot bars and traffic camera frames */
.parking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  min-width: 0;
}

.parking-bar {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-variant);
  overflow: hidden;
}

.parking-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.traffic-cam-frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  min-width: 0;
}

.traffic-cam-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.traffic-cam-stamp {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.traffic-cam-frame.cam-offline::after {
  content: 'Camera feed temporarily unavailable';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  color: var(--color-outline);
  text-align: center;
  padding: 8px;
}
/* ==========================================================================
   TRAIN / LRT SERVICE ADVISORY & STATUS COMPONENT
   ========================================================================== */
.train-alert-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
}

.train-alert-card__headline {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--color-on-surface);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  min-width: 0;
}

.train-alert-card__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.train-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  white-space: nowrap;
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  border: 1px solid var(--color-outline-variant);
  min-width: 0;
}

.train-meta-chip .material-symbols-outlined {
  font-size: var(--text-base);
  color: var(--color-outline);
}

.train-meta-chip--line {
  background: var(--color-surface-low);
  font-weight: 800;
}

.train-meta-chip--line.line-nsl { border-color: rgba(211, 47, 47, 0.4); background: rgba(211, 47, 47, 0.1); color: #ef4444; }
.train-meta-chip--line.line-ewl { border-color: rgba(0, 150, 64, 0.4); background: rgba(0, 150, 64, 0.1); color: #10b981; }
.train-meta-chip--line.line-ccl { border-color: rgba(250, 158, 13, 0.4); background: rgba(250, 158, 13, 0.1); color: #f59e0b; }
.train-meta-chip--line.line-dtl { border-color: rgba(0, 94, 196, 0.4); background: rgba(0, 94, 196, 0.1); color: #38bdf8; }
.train-meta-chip--line.line-tel { border-color: rgba(157, 91, 37, 0.4); background: rgba(157, 91, 37, 0.1); color: #d97706; }
.train-meta-chip--line.line-nel { border-color: rgba(112, 20, 122, 0.4); background: rgba(112, 20, 122, 0.1); color: #c084fc; }
.train-meta-chip--line.line-lrt { border-color: rgba(116, 132, 119, 0.4); background: rgba(116, 132, 119, 0.1); color: #94a3b8; }

.bus-walk-pill {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
  flex-shrink: 0;
}

.train-meta-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.train-alert-impact-box {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  min-width: 0;
}

.train-alert-impact-box--critical {
  border-left-color: var(--color-danger);
}

.train-alert-impact-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-warning);
  margin-bottom: 4px;
  min-width: 0;
}

.train-alert-impact-box--critical .train-alert-impact-header {
  color: var(--color-danger);
}

.train-alert-impact-header .material-symbols-outlined {
  font-size: var(--text-md);
  flex-shrink: 0;
}

.train-alert-impact-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-on-surface);
  line-height: 1.45;
  overflow-wrap: break-word;
  text-wrap: pretty;
  min-width: 0;
}

.train-alert-impact-text strong {
  font-weight: 800;
  color: var(--color-on-surface);
}

.train-alert-highlight-tag {
  display: inline-block;
  font-weight: 800;
  font-size: var(--text-2xs);
  padding: 2.5px 8px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
  vertical-align: baseline;
  letter-spacing: 0.02em;
}

.train-alert-highlight-tag--warning {
  background: rgba(234, 179, 8, 0.15);
  color: #b45309;
}

body[data-theme="dark"] .train-alert-highlight-tag--warning {
  color: #fbbf24;
}

.train-alert-alt-box {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  min-width: 0;
}

.train-alert-alt-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: 6px;
  min-width: 0;
}

.train-alert-alt-header .material-symbols-outlined {
  font-size: var(--text-md);
  flex-shrink: 0;
}

.train-alert-alt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.train-alert-alt-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--color-on-surface);
  line-height: 1.35;
  overflow-wrap: break-word;
  min-width: 0;
}

.train-alert-alt-item .material-symbols-outlined {
  font-size: 15px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 1.5px;
}

.train-alert-alt-text {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}

.train-alert-alt-text strong {
  font-weight: 700;
  color: var(--color-on-surface);
}

.train-alert-alt-single {
  font-size: var(--text-sm);
  color: var(--color-on-surface);
  line-height: 1.4;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: pretty;
}

/* Secondary line advisories indicator */
.train-alert-other-lines {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-2xs);
  color: var(--color-outline);
  padding: 4px 2px 0 2px;
  min-width: 0;
}

.train-alert-other-lines .material-symbols-outlined {
  font-size: var(--text-md);
  flex-shrink: 0;
}

/* Normal Operations View */
.train-normal-box {
  background: var(--color-surface-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.train-normal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.train-normal-icon {
  font-size: var(--text-xl);
  color: var(--color-success-text);
  flex-shrink: 0;
}

.train-normal-title {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-on-surface);
  line-height: 1.25;
  min-width: 0;
}

.train-normal-subtitle {
  font-size: var(--text-2xs);
  color: var(--color-outline);
  margin-top: 1px;
  line-height: 1.35;
  min-width: 0;
}

.train-normal-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
  min-width: 0;
}

.train-normal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 8px;
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-on-surface);
  white-space: nowrap;
}

.train-normal-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.train-normal-chip__status {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-success);
  flex-shrink: 0;
}

/* Train alert formatting within Alert Center surfaces */
.alert-center-top .train-alert-body,
.alert-center-row .train-alert-body {
  margin-top: 6px;
}

.alert-center-top .train-alert-impact-box,
.alert-center-row .train-alert-impact-box {
  background: var(--color-surface-lowest);
}

/* =========================================================
   AWAKENING THISIS: SCATTERING FALLING LEAVES ANIMATION
   ========================================================= */
.awakening-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 56vh;
  gap: 16px;
  padding: 16px 20px;
  box-sizing: border-box;
  text-align: center;
}

.awakening-stage {
  position: relative;
  width: 220px;
  height: 150px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  perspective: 600px;
  pointer-events: none;
  contain: layout paint;
}

.awakening-stage--compact {
  height: 120px;
  width: 190px;
}

.awakening-glow-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(74, 103, 65, 0.16) 0%, rgba(74, 103, 65, 0.04) 50%, transparent 72%);
  border-radius: 50%;
  pointer-events: none;
  animation: awakening-breathe 4s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes awakening-breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.65;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.95;
  }
}

.scattering-leaf {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  user-select: none;
  pointer-events: none;
  line-height: 1;
  will-change: transform, opacity;
  transform-origin: 35% 30%;
  filter: drop-shadow(0 2px 4px rgba(35, 60, 25, 0.15));
}

.scattering-leaf.leaf-1 {
  font-size: 26px;
  color: var(--color-primary);
  animation: leaf-fall-drift-1 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: -0.8s;
}

.scattering-leaf.leaf-2 {
  font-size: 22px;
  color: #4a7c3b;
  animation: leaf-fall-drift-2 2.9s cubic-bezier(0.35, 0, 0.25, 1) infinite;
  animation-delay: -1.7s;
}

.scattering-leaf.leaf-3 {
  font-size: 18px;
  color: #5c8c52;
  animation: leaf-fall-drift-3 4.1s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  animation-delay: -2.6s;
}

.scattering-leaf.leaf-4 {
  font-size: var(--text-2xl);
  color: var(--color-secondary);
  animation: leaf-fall-drift-4 3.6s cubic-bezier(0.4, 0, 0.3, 1) infinite;
  animation-delay: -0.3s;
}

.scattering-leaf.leaf-5 {
  font-size: 32px;
  color: var(--color-primary);
  animation: leaf-fall-drift-5 3.2s cubic-bezier(0.38, 0, 0.22, 1) infinite;
  animation-delay: -2.1s;
}

.scattering-leaf.leaf-6 {
  font-size: var(--text-xl);
  color: #274e23;
  animation: leaf-fall-drift-6 3.7s cubic-bezier(0.42, 0, 0.28, 1) infinite;
  animation-delay: -3.0s;
}

.scattering-leaf.leaf-7 {
  font-size: 22px;
  color: #43794b;
  animation: leaf-fall-drift-7 3.3s cubic-bezier(0.36, 0, 0.24, 1) infinite;
  animation-delay: -1.2s;
}

.scattering-leaf.leaf-8 {
  font-size: 15px;
  color: #709968;
  animation: leaf-fall-drift-8 2.6s cubic-bezier(0.4, 0, 0.3, 1) infinite;
  animation-delay: -3.3s;
}

@keyframes leaf-fall-drift-1 {
  0% {
    transform: translate3d(45px, -26px, 0) rotate(15deg) rotateY(0deg);
    opacity: 0;
  }
  15% {
    transform: translate3d(30px, 15px, 0) rotate(-20deg) rotateY(45deg);
    opacity: 0.95;
  }
  40% {
    transform: translate3d(12px, 55px, 0) rotate(30deg) rotateY(120deg);
    opacity: 0.9;
  }
  65% {
    transform: translate3d(28px, 95px, 0) rotate(-15deg) rotateY(200deg);
    opacity: 0.85;
  }
  85% {
    transform: translate3d(15px, 130px, 0) rotate(25deg) rotateY(280deg);
    opacity: 0.6;
  }
  100% {
    transform: translate3d(5px, 158px, 0) rotate(-10deg) rotateY(360deg);
    opacity: 0;
  }
}

@keyframes leaf-fall-drift-2 {
  0% {
    transform: translate3d(115px, -24px, 0) rotate(-30deg) rotateY(0deg);
    opacity: 0;
  }
  18% {
    transform: translate3d(140px, 18px, 0) rotate(20deg) rotateY(65deg);
    opacity: 1;
  }
  45% {
    transform: translate3d(170px, 60px, 0) rotate(-25deg) rotateY(150deg);
    opacity: 0.95;
  }
  72% {
    transform: translate3d(145px, 102px, 0) rotate(30deg) rotateY(240deg);
    opacity: 0.8;
  }
  90% {
    transform: translate3d(165px, 134px, 0) rotate(-10deg) rotateY(315deg);
    opacity: 0.5;
  }
  100% {
    transform: translate3d(175px, 158px, 0) rotate(15deg) rotateY(360deg);
    opacity: 0;
  }
}

@keyframes leaf-fall-drift-3 {
  0% {
    transform: translate3d(20px, -22px, 0) rotate(25deg) rotateY(0deg);
    opacity: 0;
  }
  20% {
    transform: translate3d(36px, 20px, 0) rotate(-15deg) rotateY(70deg);
    opacity: 0.85;
  }
  48% {
    transform: translate3d(14px, 58px, 0) rotate(20deg) rotateY(160deg);
    opacity: 0.8;
  }
  75% {
    transform: translate3d(32px, 98px, 0) rotate(-18deg) rotateY(250deg);
    opacity: 0.75;
  }
  100% {
    transform: translate3d(18px, 156px, 0) rotate(15deg) rotateY(360deg);
    opacity: 0;
  }
}

@keyframes leaf-fall-drift-4 {
  0% {
    transform: translate3d(95px, -24px, 0) rotate(0deg) rotateY(0deg);
    opacity: 0;
  }
  16% {
    transform: translate3d(70px, 16px, 0) rotate(-35deg) rotateY(80deg);
    opacity: 0.9;
  }
  42% {
    transform: translate3d(108px, 56px, 0) rotate(25deg) rotateY(170deg);
    opacity: 0.95;
  }
  68% {
    transform: translate3d(65px, 96px, 0) rotate(-25deg) rotateY(260deg);
    opacity: 0.85;
  }
  88% {
    transform: translate3d(92px, 130px, 0) rotate(20deg) rotateY(325deg);
    opacity: 0.5;
  }
  100% {
    transform: translate3d(75px, 158px, 0) rotate(-15deg) rotateY(360deg);
    opacity: 0;
  }
}

@keyframes leaf-fall-drift-5 {
  0% {
    transform: translate3d(130px, -28px, 0) rotate(25deg) rotateY(0deg);
    opacity: 0;
  }
  16% {
    transform: translate3d(112px, 16px, 0) rotate(-25deg) rotateY(50deg);
    opacity: 1;
  }
  42% {
    transform: translate3d(86px, 55px, 0) rotate(30deg) rotateY(120deg);
    opacity: 0.95;
  }
  66% {
    transform: translate3d(116px, 94px, 0) rotate(-20deg) rotateY(200deg);
    opacity: 0.9;
  }
  86% {
    transform: translate3d(98px, 128px, 0) rotate(15deg) rotateY(280deg);
    opacity: 0.65;
  }
  100% {
    transform: translate3d(82px, 158px, 0) rotate(-10deg) rotateY(360deg);
    opacity: 0;
  }
}

@keyframes leaf-fall-drift-6 {
  0% {
    transform: translate3d(15px, -22px, 0) rotate(-20deg) rotateY(0deg);
    opacity: 0;
  }
  20% {
    transform: translate3d(42px, 22px, 0) rotate(25deg) rotateY(65deg);
    opacity: 0.9;
  }
  48% {
    transform: translate3d(68px, 62px, 0) rotate(-20deg) rotateY(145deg);
    opacity: 0.9;
  }
  74% {
    transform: translate3d(98px, 102px, 0) rotate(25deg) rotateY(235deg);
    opacity: 0.8;
  }
  90% {
    transform: translate3d(115px, 132px, 0) rotate(-5deg) rotateY(310deg);
    opacity: 0.5;
  }
  100% {
    transform: translate3d(128px, 156px, 0) rotate(15deg) rotateY(360deg);
    opacity: 0;
  }
}

@keyframes leaf-fall-drift-7 {
  0% {
    transform: translate3d(170px, -22px, 0) rotate(-25deg) rotateY(0deg);
    opacity: 0;
  }
  22% {
    transform: translate3d(150px, 20px, 0) rotate(20deg) rotateY(85deg);
    opacity: 0.9;
  }
  50% {
    transform: translate3d(178px, 60px, 0) rotate(-30deg) rotateY(175deg);
    opacity: 0.85;
  }
  76% {
    transform: translate3d(154px, 100px, 0) rotate(15deg) rotateY(265deg);
    opacity: 0.75;
  }
  100% {
    transform: translate3d(168px, 156px, 0) rotate(-15deg) rotateY(360deg);
    opacity: 0;
  }
}

@keyframes leaf-fall-drift-8 {
  0% {
    transform: translate3d(80px, -20px, 0) rotate(-10deg) rotateY(0deg);
    opacity: 0;
  }
  18% {
    transform: translate3d(98px, 18px, 0) rotate(40deg) rotateY(85deg);
    opacity: 0.85;
  }
  44% {
    transform: translate3d(68px, 52px, 0) rotate(-30deg) rotateY(175deg);
    opacity: 0.9;
  }
  70% {
    transform: translate3d(90px, 92px, 0) rotate(35deg) rotateY(265deg);
    opacity: 0.75;
  }
  100% {
    transform: translate3d(62px, 154px, 0) rotate(-20deg) rotateY(360deg);
    opacity: 0;
  }
}

.awakening-text {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.2px;
  margin: 0;
  min-width: 0;
  word-break: break-word;
  animation: awakening-text-pulse 2.8s ease-in-out infinite;
}

@keyframes awakening-text-pulse {
  0%, 100% {
    opacity: 0.88;
  }
  50% {
    opacity: 1;
  }
}

/* Dark mode theme overrides */
body[data-theme="dark"] .awakening-glow-orb {
  background: radial-gradient(circle, rgba(175, 208, 161, 0.18) 0%, rgba(175, 208, 161, 0.04) 50%, transparent 72%);
}

body[data-theme="dark"] .scattering-leaf.leaf-2 {
  color: #8ec37e;
}

body[data-theme="dark"] .scattering-leaf.leaf-3 {
  color: #97ba8e;
}

body[data-theme="dark"] .scattering-leaf.leaf-6 {
  color: #72a665;
}

body[data-theme="dark"] .scattering-leaf.leaf-7 {
  color: #81b789;
}

body[data-theme="dark"] .scattering-leaf.leaf-8 {
  color: #a4cca0;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scattering-leaf {
    animation: none !important;
    opacity: 0.7 !important;
  }
  /* Without keyframes the leaves have no position and would pile up at the
     stage's top-left corner; rest them as a loose scatter instead. */
  .scattering-leaf.leaf-1 { top: 18%; left: 20%; transform: rotate(-24deg); }
  .scattering-leaf.leaf-2 { top: 52%; left: 12%; transform: rotate(38deg); }
  .scattering-leaf.leaf-3 { top: 30%; left: 46%; transform: rotate(-8deg); }
  .scattering-leaf.leaf-4 { top: 64%; left: 38%; transform: rotate(62deg); }
  .scattering-leaf.leaf-5 { top: 14%; left: 70%; transform: rotate(20deg); }
  .scattering-leaf.leaf-6 { top: 48%; left: 62%; transform: rotate(-42deg); }
  .scattering-leaf.leaf-7 { top: 70%; left: 78%; transform: rotate(14deg); }
  .scattering-leaf.leaf-8 { top: 36%; left: 84%; transform: rotate(-56deg); }
  .awakening-glow-orb {
    animation: none !important;
  }
  .awakening-text {
    animation: none !important;
  }
}

/* Keyboard focus ring (only shown for keyboard navigation).
   Declared last so it wins over component-level `outline: none` rules. */
html :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(51, 79, 43, 0.55);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

body[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: rgba(175, 208, 161, 0.75);
}

/* =========================================================
   WEATHER METRIC PILLS (WCAG AA High-Contrast)
   ========================================================= */
.weather-metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  border: 1px solid var(--color-outline-variant);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, background 0.2s ease;
}

.weather-metric-pill .material-symbols-outlined {
  color: var(--color-primary);
  font-size: var(--text-md);
}

body[data-theme="dark"] .weather-metric-pill {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  border-color: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   SCROLLABLE CONTAINERS & EDGE FADE MASKS
   ========================================================= */
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Cue that a row scrolls sideways: the trailing edge fades out. The end padding
   lets the last item scroll fully clear of the fade. */
.scroll-fade-x {
  padding-inline-end: 24px !important;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

/* Sleek subtle scrollbars for lists */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-outline);
}

/* =========================================================
   THISIS BOTANICAL SPROUTING PULL-TO-REFRESH
   Living botanical seedling emerging from fertile Singapore garden soil
   with organic cotyledon unfurling, dewdrop glisten, and morning breeze sway
   ========================================================= */
.thisis-ptr {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  height: 0;
  max-height: 85px;
  pointer-events: none;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8px;
  box-sizing: border-box;
  will-change: height;
  contain: layout paint;
  z-index: 50;
}

.thisis-ptr.is-pulling,
.thisis-ptr.is-refreshing,
.thisis-ptr.is-resetting {
  display: flex;
}

.thisis-ptr.is-refreshing {
  height: 64px !important;
  transition: height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.thisis-ptr.is-resetting {
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 0 !important;
}

.thisis-ptr-stage {
  position: relative;
  width: 100px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.thisis-sprout-svg {
  width: 76px;
  height: 36px;
  overflow: visible;
}

/* Soil Mound & Base */
.sprout-soil-mound {
  fill: var(--color-outline);
  opacity: 0.15;
  transition: transform 0.15s ease-out;
}

.sprout-soil-line {
  stroke: var(--color-outline);
  stroke-width: 1.4px;
  stroke-linecap: round;
  fill: none;
  opacity: 0.4;
  transition: opacity 0.15s ease-out;
}

.sprout-soil-pebble {
  fill: var(--color-outline);
  opacity: 0.35;
}

/* Growing Sprout Organism */
.sprout-organism {
  transform-origin: 40px 33px;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.sprout-stem {
  stroke: var(--color-primary);
  stroke-width: 2.8px;
  stroke-linecap: round;
  fill: none;
}

.sprout-bud {
  fill: var(--color-primary-container);
}

.sprout-leaf {
  fill: var(--color-primary);
  filter: drop-shadow(0 2px 4px rgba(35, 60, 25, 0.2));
  transition: fill 0.2s ease, filter 0.2s ease;
}

.sprout-vein {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 0.8px;
  stroke-linecap: round;
  fill: none;
}

body[data-theme="dark"] .sprout-vein {
  stroke: rgba(6, 33, 4, 0.5);
}

.sprout-dewdrop {
  fill: var(--color-primary-fixed, #caecbc);
}

.sprout-dew-glow {
  fill: var(--color-primary-fixed, #caecbc);
  opacity: 0;
}

.sprout-dew-shine {
  fill: #ffffff;
}

.sprout-mist {
  fill: var(--color-primary-fixed, #caecbc);
}

/* When idle or resetting, seedling is tucked into the earth */
.thisis-ptr:not(.is-pulling):not(.is-refreshing) .sprout-organism {
  transform: translateY(22px) scale(0.2);
  opacity: 0;
}

/* During pulling: shoot pushes up out of the soil proportionally to progress */
.thisis-ptr.is-pulling .sprout-organism {
  transform: translateY(calc((1 - var(--ptr-prog, 0)) * 18px)) scale(calc(0.35 + (var(--ptr-prog, 0) * 0.65)));
  opacity: 1;
}

/* Left & Right Cotyledon Leaves uncurl outward as sprout climbs */
.sprout-leaf-branch {
  transform-origin: 40px 13px;
  transition: transform 0.12s ease-out, opacity 0.12s ease-out;
  will-change: transform;
}

.sprout-leaf-branch.left {
  transform: rotate(calc(42deg * (1 - var(--ptr-prog, 0)))) scale(calc(0.25 + (var(--ptr-prog, 0) * 0.75)));
  opacity: calc(0.3 + (var(--ptr-prog, 0) * 0.7));
}

.sprout-leaf-branch.right {
  transform: rotate(calc(-42deg * (1 - var(--ptr-prog, 0)))) scale(calc(0.25 + (var(--ptr-prog, 0) * 0.75)));
  opacity: calc(0.3 + (var(--ptr-prog, 0) * 0.7));
}

/* Dewdrop cluster appears and swells at apex */
.sprout-dew-cluster {
  transform-origin: 40px 8px;
  transform: scale(calc(max(0, (var(--ptr-prog, 0) - 0.3) * 1.43)));
  opacity: calc(max(0, (var(--ptr-prog, 0) - 0.3) * 1.43));
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

/* Ready State: Full uncurling, radiant dewdrop glow */
.thisis-ptr.is-ready .sprout-leaf {
  fill: var(--color-primary-container);
  filter: drop-shadow(0 0 6px var(--color-primary-container)) drop-shadow(0 0 10px rgba(74, 167, 65, 0.45));
}

.thisis-ptr.is-ready .sprout-dew-glow {
  opacity: 0.75;
  animation: sproutDewGlowPulse 1.1s ease-in-out infinite alternate;
}

@keyframes sproutDewGlowPulse {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 0.9; }
}

/* Refreshing State: Gentle tropical breeze sway & living respiration */
.thisis-ptr.is-refreshing .sprout-organism {
  transform: translateY(0) scale(1);
  transform-origin: 40px 33px;
  animation: sproutBreezeSway 2.4s ease-in-out infinite;
}

@keyframes sproutBreezeSway {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  25% {
    transform: translateY(-0.8px) scale(1) rotate(-3.5deg) skewX(-1.2deg);
  }
  70% {
    transform: translateY(-0.4px) scale(1) rotate(3deg) skewX(1deg);
  }
}

.thisis-ptr.is-refreshing .sprout-leaf-branch.left {
  transform: rotate(0deg) scale(1);
  opacity: 1;
  animation: cotyledonBreatheLeft 2s ease-in-out infinite;
}

.thisis-ptr.is-refreshing .sprout-leaf-branch.right {
  transform: rotate(0deg) scale(1);
  opacity: 1;
  animation: cotyledonBreatheRight 2.2s ease-in-out infinite 0.15s;
}

@keyframes cotyledonBreatheLeft {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-5deg) scale(1.08, 0.96); }
}

@keyframes cotyledonBreatheRight {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.08, 0.96); }
}

/* Dewdrop gentle glisten during refresh */
.thisis-ptr.is-refreshing .sprout-dew-cluster {
  transform: scale(1);
  opacity: 1;
}

.thisis-ptr.is-refreshing .sprout-dewdrop {
  animation: dewSparkle 1.6s ease-in-out infinite alternate;
}

@keyframes dewSparkle {
  0% { filter: drop-shadow(0 0 2px var(--color-primary)); }
  100% { filter: drop-shadow(0 0 5px var(--color-primary-fixed, #caecbc)); }
}

/* Floating Morning Dew Mists (rise up gently while refreshing) */
.thisis-ptr.is-refreshing .sprout-mist.mist-1 {
  animation: sproutMistRise 1.8s ease-out infinite;
}
.thisis-ptr.is-refreshing .sprout-mist.mist-2 {
  animation: sproutMistRise 2.1s ease-out infinite 0.45s;
}
.thisis-ptr.is-refreshing .sprout-mist.mist-3 {
  animation: sproutMistRise 1.9s ease-out infinite 0.9s;
}

@keyframes sproutMistRise {
  0% { transform: translateY(6px) scale(0.6); opacity: 0; }
  35% { opacity: 0.65; }
  100% { transform: translateY(-14px) scale(1.25); opacity: 0; }
}

/* Resetting State: Graceful return to earth */
.thisis-ptr.is-resetting .sprout-organism {
  transform: translateY(20px) scale(0.3);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}

.thisis-ptr-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-outline);
  margin-top: 2px;
  line-height: 1;
  transition: color 0.18s ease;
}

.thisis-ptr.is-ready .thisis-ptr-label {
  color: var(--color-primary);
}

.thisis-ptr.is-refreshing .thisis-ptr-label {
  color: var(--color-primary);
  animation: awakening-text-pulse 2s ease-in-out infinite;
}

/* =========================================================
   LEAF-DRIFT DISMISSAL & ORGANIC REMOVAL ANIMATION
   ========================================================= */
@keyframes leafDriftDismiss {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
  }
  30% {
    transform: translate3d(10px, -8px, 0) rotate(2.5deg) scale(1.02);
    opacity: 0.95;
    filter: drop-shadow(0 14px 28px rgba(51, 79, 43, 0.22));
  }
  65% {
    transform: translate3d(-16px, 20px, 0) rotate(-5deg) scale(0.96);
    opacity: 0.65;
  }
  100% {
    transform: translate3d(36px, 75px, 0) rotate(12deg) scale(0.82);
    opacity: 0;
  }
}

.is-leaf-drifting {
  animation: leafDriftDismiss 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
  pointer-events: none !important;
  will-change: transform, opacity;
}

/* Popular stop exploration chips */
.popular-stop-chip {
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: 6px 12px;
}
.popular-stop-chip:hover {
  transform: translateY(-1px);
  background: var(--color-primary-fixed);
  color: var(--color-primary);
}
.popular-stop-chip:active {
  transform: scale(0.96);
}

/* =========================================================
   POLISH & SHINE: ATMOSPHERIC MICRO-CLIMATE CANVAS
   ========================================================= */
/* Condition-driven weather scene layer (one scene per weather card).
   Sits behind content (z-index 1; card content is z-index 2). Compositor-only
   animations (transform/opacity); tuned for ~370x190px compact cards. */
.wx-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 1;
  --wx-sun: rgba(251, 191, 36, 0.45);
  --wx-sun-core: #f59e0b;
  --wx-flare: rgba(254, 240, 138, 0.40);
  --wx-cloud: rgba(120, 138, 160, 0.38);
  --wx-star: rgba(255, 255, 255, 0.95);
  --wx-meteor: rgba(186, 230, 253, 0.95);
  --wx-rain: rgba(2, 132, 199, 0.65);
  --wx-wind: rgba(100, 116, 139, 0.35);
  --wx-haze: rgba(180, 170, 150, 0.36);
  --wx-flash: rgba(219, 234, 254, 0.50);
}
[data-theme="dark"] .wx-scene {
  --wx-sun: rgba(251, 191, 36, 0.32);
  --wx-sun-core: #d97706;
  --wx-flare: rgba(254, 240, 138, 0.28);
  --wx-cloud: rgba(148, 163, 184, 0.22);
  --wx-rain: rgba(125, 211, 252, 0.45);
  --wx-wind: rgba(203, 213, 225, 0.28);
  --wx-haze: rgba(203, 190, 160, 0.20);
  --wx-flash: rgba(224, 242, 254, 0.45);
}
.wx-scene > * { position: absolute; display: block; will-change: transform, opacity; }

/* =========================================================
   TRANSIENT HERO WEATHER BADGE ENTRANCE (CARD & DRAWER)
   Initial state: hidden while transient sky passage unfolds.
   Handover: seamless, silky scale-and-fade in as sky passage dissolves.
   ========================================================= */
.wx-hero-badge {
  position: relative;
  z-index: 2;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: wxHeroBadgeFadeIn 3.0s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  will-change: opacity, transform;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.wx-hero-badge:hover {
  transform: scale(1.08);
}
.wx-hero-badge:active {
  transform: scale(0.92);
}
@keyframes wxHeroBadgeFadeIn {
  0%, 40% {
    opacity: 0;
    transform: scale(0.90);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================
   TRANSIENT SKY PASSAGE: CLEAR DAY (SUN ORB + RADIANT FLARES)
   Continuous, fluid celestial arc without jerky speed fluctuations.
   ========================================================= */
.wx-sun {
  top: -46px; right: -46px; width: 156px; height: 156px; border-radius: 50%;
  background: radial-gradient(circle, var(--wx-sun) 0%, rgba(251, 191, 36, 0.16) 48%, rgba(251, 191, 36, 0) 74%);
  animation: wxSunPass 3.0s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  will-change: transform, opacity;
}
@keyframes wxSunPass {
  0% {
    transform: translate3d(32px, -20px, 0) scale(0.92);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  65% {
    opacity: 0.85;
  }
  100% {
    transform: translate3d(-50px, 28px, 0) scale(1.06);
    opacity: 0;
  }
}

/* Radiant Lens Flare Rays sweeping continuously across the sky */
.wx-ray {
  top: -35%; right: 6%; width: 22px; height: 175%;
  background: linear-gradient(180deg, var(--wx-flare) 0%, rgba(251, 191, 36, 0.14) 45%, rgba(251, 191, 36, 0) 100%);
  transform-origin: 50% 0;
  animation: wxRayPass 3.0s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  will-change: transform, opacity;
}
.wx-ray--2 {
  right: 22%; width: 14px;
  background: linear-gradient(180deg, rgba(254, 240, 138, 0.32) 0%, rgba(251, 191, 36, 0.08) 45%, rgba(251, 191, 36, 0) 100%);
  animation-duration: 3.0s; animation-delay: 0.06s;
}
.wx-ray--3 {
  right: 36%; width: 9px;
  background: linear-gradient(180deg, rgba(254, 240, 138, 0.22) 0%, rgba(251, 191, 36, 0.06) 45%, rgba(251, 191, 36, 0) 100%);
  animation-duration: 3.0s; animation-delay: 0.12s;
}
@keyframes wxRayPass {
  0% {
    transform: rotate(22deg) translate3d(15px, 0, 0);
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  60% {
    opacity: 0.55;
  }
  100% {
    transform: rotate(38deg) translate3d(-35px, 0, 0);
    opacity: 0;
  }
}

/* Optical flare dispersion halo along ray axis */
.wx-flare {
  top: 14%; right: 18%; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.40) 0%, rgba(245, 158, 11, 0.12) 50%, rgba(251, 191, 36, 0) 70%);
  border: 1px solid rgba(254, 240, 138, 0.20);
  animation: wxFlarePass 3.0s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  will-change: transform, opacity;
}
@keyframes wxFlarePass {
  0% {
    transform: translate3d(25px, -20px, 0) scale(0.6);
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translate3d(-75px, 60px, 0) scale(1.0);
    opacity: 0;
  }
}

/* =========================================================
   TRANSIENT SKY PASSAGE: CLEAR NIGHT (SHOOTING STAR METEOR)
   ========================================================= */
.wx-meteor {
  top: 10%; right: 12%; width: 80px; height: 2px; border-radius: 999px;
  background: linear-gradient(270deg, #ffffff 0%, rgba(186, 230, 253, 0.8) 50%, rgba(186, 230, 253, 0) 100%);
  box-shadow: 0 0 8px rgba(186, 230, 253, 0.8);
  animation: wxMeteorPass 2.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  will-change: transform, opacity;
}
@keyframes wxMeteorPass {
  0% {
    transform: translate3d(60px, -25px, 0) rotate(-26deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    transform: translate3d(-220px, 110px, 0) rotate(-26deg);
    opacity: 0;
  }
}
.wx-star {
  left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%;
  background: var(--wx-star); opacity: 0.2;
  animation: wxTwinkle var(--d, 4s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes wxTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50% { opacity: 0.85; transform: scale(1.25); }
}
.wx-fly { display: none !important; }
[data-theme="dark"] .wx-fly {
  display: block !important; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 243, 208, 0.7) 0%, rgba(16, 185, 129, 0) 70%);
  animation: fireflyFloat var(--d, 6s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s);
}

/* =========================================================
   TRANSIENT SKY PASSAGE: CLOUDY / OVERCAST (ROLLING CLOUD FRONT)
   ========================================================= */
.wx-cloud {
  top: var(--y, 14%); left: -20%; width: var(--w, 46%); height: 34px; border-radius: 999px;
  background: var(--wx-cloud); filter: blur(6px);
  animation: wxCloudPass var(--d, 3.2s) cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  animation-delay: var(--dl, 0s);
  will-change: transform, opacity;
}
.wx-cloud::after {
  content: ''; position: absolute; left: 22%; bottom: 40%; width: 48%; height: 150%;
  border-radius: 50%; background: inherit;
}
@keyframes wxCloudPass {
  0% {
    transform: translate3d(-30px, 0, 0);
    opacity: 0;
  }
  25% {
    opacity: 0.85;
  }
  65% {
    opacity: 0.6;
  }
  100% {
    transform: translate3d(200px, 0, 0);
    opacity: 0;
  }
}

/* =========================================================
   TRANSIENT SKY PASSAGE: HAZE (DRIFTING SMOKE / MIST VEIL)
   ========================================================= */
.wx-haze {
  top: 0; left: 0; width: 200%; height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--wx-haze) 25%, rgba(0,0,0,0) 50%, var(--wx-haze) 75%, rgba(0,0,0,0) 100%);
  animation: wxHazePass 3.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  will-change: transform, opacity;
}
@keyframes wxHazePass {
  0% {
    transform: translate3d(20px, 0, 0);
    opacity: 0;
  }
  25% {
    opacity: 0.85;
  }
  70% {
    opacity: 0.4;
  }
  100% {
    transform: translate3d(-120px, 0, 0);
    opacity: 0;
  }
}

/* =========================================================
   TRANSIENT SKY PASSAGE: WINDY (GUST TRAILS + SWIRLING LEAVES)
   ========================================================= */
.wx-wind {
  left: -20%; top: var(--y); width: var(--w, 40%); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(0,0,0,0), var(--wx-wind), rgba(0,0,0,0));
  animation: wxWindPass 2.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: var(--dl, 0s);
  will-change: transform, opacity;
}
@keyframes wxWindPass {
  0% {
    transform: translate3d(-50px, 0, 0);
    opacity: 0;
  }
  25% {
    opacity: 0.85;
  }
  75% {
    opacity: 0.4;
  }
  100% {
    transform: translate3d(360px, 0, 0);
    opacity: 0;
  }
}

.wx-leaf {
  position: absolute; font-size: var(--text-lg); top: 18%; left: -10%; color: var(--color-primary);
  opacity: 0;
  animation: wxLeafPass 2.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  will-change: transform, opacity;
}
.wx-leaf--2 {
  top: 46%; font-size: var(--text-base);
  animation-duration: 2.9s;
  animation-delay: 0.12s;
}
@keyframes wxLeafPass {
  0% {
    transform: translate3d(-20px, 10px, 0) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    transform: translate3d(360px, -15px, 0) rotate(360deg);
    opacity: 0;
  }
}

/* =========================================================
   TRANSIENT SKY PASSAGE: RAIN / DRIZZLE (FALLING STREAKS & RIPPLES)
   ========================================================= */
.wx-streak {
  left: var(--x); top: -28px; width: 2px; height: 24px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--wx-rain));
  transform: rotate(14deg); opacity: 0;
  animation: wxRainPass 2.8s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: var(--dl, 0s);
  will-change: transform, opacity;
}
@keyframes wxRainPass {
  0% {
    transform: translate3d(0, 0, 0) rotate(14deg);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  75% {
    opacity: 0.4;
  }
  100% {
    transform: translate3d(-45px, 300px, 0) rotate(14deg);
    opacity: 0;
  }
}

.wx-ripple {
  left: var(--x); top: var(--y); width: var(--s, 80px); height: var(--s, 80px);
  border: 1.5px solid rgba(56, 189, 248, 0.55); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.08); opacity: 0;
  animation: wxRipplePass 2.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  animation-delay: var(--dl, 0s);
  will-change: transform, opacity;
}
@keyframes wxRipplePass {
  0% {
    transform: translate(-50%, -50%) scale(0.08);
    opacity: 0.9;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}
.wx-scene--rain { background: linear-gradient(180deg, rgba(100, 116, 139, 0.08), rgba(100, 116, 139, 0)); }
.wx-scene--heavy-rain, .wx-scene--thunder {
  background: linear-gradient(180deg, rgba(71, 85, 105, 0.16), rgba(71, 85, 105, 0.04));
}
[data-theme="dark"] .wx-scene--heavy-rain, [data-theme="dark"] .wx-scene--thunder {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.30), rgba(15, 23, 42, 0.06));
}

/* =========================================================
   TRANSIENT SKY PASSAGE: THUNDERSTORM (LIGHTNING CRACK & FLASH)
   ========================================================= */
.wx-bolt {
  top: 0; right: 22%; width: 28px; height: 68%;
  background: linear-gradient(180deg, rgba(254, 249, 195, 0.95), rgba(253, 224, 71, 0.25));
  clip-path: polygon(55% 0, 20% 48%, 48% 48%, 30% 100%, 82% 40%, 54% 40%, 80% 0);
  opacity: 0;
  animation: wxBoltStrike 2.6s ease-out forwards;
  will-change: opacity;
}
@keyframes wxBoltStrike {
  0%, 15% {
    opacity: 0;
  }
  18% {
    opacity: 0.95;
  }
  22% {
    opacity: 0.1;
  }
  26% {
    opacity: 0.85;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.wx-flash {
  inset: 0; background: var(--wx-flash); opacity: 0;
  animation: wxFlashStrike 2.6s ease-out forwards;
  will-change: opacity;
}
@keyframes wxFlashStrike {
  0%, 15% {
    opacity: 0;
  }
  18% {
    opacity: 0.75;
  }
  22% {
    opacity: 0.1;
  }
  26% {
    opacity: 0.55;
  }
  36% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wx-scene *, .wx-scene > * { animation: none !important; opacity: 0 !important; display: none !important; }
  .wx-hero-badge { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; pointer-events: auto !important; }
}

/* High UV / Tropical Sunbeam Rim Glow */
.weather-card--high-uv {
  position: relative;
}

.weather-card--high-uv::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 16px rgba(245, 158, 11, 0.16), 0 0 20px rgba(245, 158, 11, 0.12);
  animation: sunGlowPulse 4s ease-in-out infinite;
}

@keyframes sunGlowPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* =========================================================
   POLISH & SHINE: "MOSS-SPRING" TACTILE PRESS FEEDBACK
   ========================================================= */
.btn, 
.popular-stop-chip, 
.radial-node, 
.icon-btn, 
.empty-state-btn,
.promo-code-box,
.onboarding-primary,
.onboarding-secondary {
  transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.18s ease;
}

.btn:active, 
.radial-node:active, 
.onboarding-primary:active,
.promo-code-box:active {
  transform: scale(0.965);
}

.radial-hub-trigger:active {
  transform: scale(0.92);
}

/* =========================================================
   POLISH & SHINE: "MORNING DEW" SPECULAR GLASS & TABULAR NUMERALS
   ========================================================= */
.glass-panel, 
.widget-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 18px rgba(0, 0, 0, 0.04);
}

body[data-theme="dark"] .glass-panel,
body[data-theme="dark"] .widget-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 30px rgba(0, 0, 0, 0.28);
}

/* Enforce crisp alignment on all countdowns, bus numbers, & temperatures */
.bus-svc-eta,
.home-greeting,
.widget-stat-value,
.lottery-ball,
.weather-metric-pill,
[data-eta] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Enhanced Arriving Heartbeat Glow on Bus Pill */
.bus-svc-eta.arriving {
  position: relative;
  animation: arrPillHeartbeat 1.8s ease-in-out infinite;
}

@keyframes arrPillHeartbeat {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
  50% {
    box-shadow: 0 0 10px 2px rgba(34, 197, 94, 0.32);
  }
}

/* =========================================================
   POLISH & SHINE: OFFICIAL LTA MRT/LRT BRAND LINE EMBLEMS
   ========================================================= */
.mrt-line-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  color: #ffffff !important;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.mrt-line-pill.line-nsl { background-color: #d42e12; }
.mrt-line-pill.line-ewl { background-color: #009645; }
.mrt-line-pill.line-ccl { background-color: #fa9e0d; }
.mrt-line-pill.line-dtl { background-color: #005ec4; }
.mrt-line-pill.line-tel { background-color: #9d5b25; }
.mrt-line-pill.line-nel { background-color: #8f1c84; }
.mrt-line-pill.line-lrt { background-color: #748477; }

/* =========================================================
   POLISH & SHINE: HAWKER SPRING CLEANING SWEEP ANIMATION
   ========================================================= */
.hawker-cleaning-broom,
.hawker-broom-icon {
  display: inline-block;
  transform-origin: 50% 90%;
  animation: broomSweep 1.8s ease-in-out infinite;
}

@keyframes broomSweep {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-8deg);
  }
}

/* Bioluminescent Fireflies for Midnight Theme */
[data-theme="dark"] .home-header {
  position: relative;
  overflow: visible;
}

[data-theme="dark"] .home-header::before,
[data-theme="dark"] .home-header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(167, 243, 208, 0.45) 0%, rgba(16, 185, 129, 0) 70%);
  filter: blur(1px);
  animation: fireflyFloat 6s ease-in-out infinite alternate;
}

[data-theme="dark"] .home-header::before {
  width: 6px;
  height: 6px;
  top: 10px;
  right: 18%;
  animation-duration: 7s;
}

[data-theme="dark"] .home-header::after {
  width: 4px;
  height: 4px;
  top: 28px;
  right: 8%;
  animation-duration: 5.5s;
  animation-delay: -2.5s;
}

@keyframes fireflyFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(0.8);
    opacity: 0.2;
  }
  50% {
    transform: translate3d(-10px, -14px, 0) scale(1.2);
    opacity: 0.85;
  }
  100% {
    transform: translate3d(8px, -24px, 0) scale(0.9);
    opacity: 0.15;
  }
}

/* Odometer roll animation for live updating numbers */
.num-roll-in {
  animation: rollDigitIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  display: inline-block;
}

@keyframes rollDigitIn {
  from {
    transform: translateY(-6px);
    opacity: 0.4;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* =========================================================
   MINI-CARD REORDERING PREVIEW & PARABOLIC AUTO-SCROLL
   Compact mobile viewport first (360px - 412px).
   Dedicated preview sheet for dragging and reordering cards.
   ========================================================= */

.reorder-sheet-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  width: 100%;
}

.reorder-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 6px 2px;
  gap: 8px;
}

.reorder-badge-pill {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-surface-container);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.reorder-scroller-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
  overflow: hidden;
}

.reorder-list-scroller {
  max-height: 56vh;
  max-height: 56dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-outline-variant) transparent;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.reorder-list-scroller::-webkit-scrollbar {
  width: 4px;
}

.reorder-list-scroller::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: var(--radius-full);
}

/* Edge Sheen Hotzones for Parabolic Auto-Scroll */
.reorder-hotzone {
  position: absolute;
  left: 0;
  right: 0;
  height: 50px;
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.reorder-hotzone.top {
  top: 0;
  background: linear-gradient(180deg, var(--color-surface-high) 0%, rgba(0, 0, 0, 0) 100%);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.reorder-hotzone.bottom {
  bottom: 0;
  background: linear-gradient(0deg, var(--color-surface-high) 0%, rgba(0, 0, 0, 0) 100%);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.reorder-hotzone.active {
  opacity: 1;
}

.reorder-hotzone.top.active {
  background: linear-gradient(180deg, rgba(45, 90, 39, 0.22) 0%, rgba(45, 90, 39, 0.02) 100%);
}

.reorder-hotzone.bottom.active {
  background: linear-gradient(0deg, rgba(45, 90, 39, 0.22) 0%, rgba(45, 90, 39, 0.02) 100%);
}

.reorder-hotzone-pill {
  background: var(--color-surface-high);
  color: var(--color-primary);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  animation: pulseZonePill 1.2s infinite ease-in-out;
}

@keyframes pulseZonePill {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Mini Cards Stack */
.reorder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.reorder-mini-card {
  height: 52px;
  min-height: 52px;
  background: var(--color-surface-high);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 0 8px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease, opacity 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.reorder-mini-card-seq {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  font-size: var(--text-2xs);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.reorder-mini-card-icon {
  font-size: var(--text-xl);
  color: var(--color-primary);
  flex-shrink: 0;
}

.reorder-mini-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reorder-mini-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  min-width: 0;
}

.reorder-mini-card-source {
  font-size: var(--text-2xs);
  color: var(--color-outline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.reorder-mini-card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.reorder-mini-stepper {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
  border: none;
  color: var(--color-on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.reorder-mini-stepper:active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.reorder-mini-stepper .material-symbols-outlined {
  font-size: 15px;
}

.reorder-drag-handle {
  width: 32px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-outline);
  cursor: grab;
  touch-action: pan-y;
  margin-left: 2px;
}

.reorder-drag-handle:active {
  cursor: grabbing;
  color: var(--color-primary);
}

.reorder-drag-handle .material-symbols-outlined {
  font-size: var(--text-xl);
}

/* Placeholder card when item is lifted */
.reorder-mini-card.is-placeholder {
  opacity: 0.35;
  border: 2px dashed var(--color-primary);
  background: rgba(74, 103, 65, 0.06);
  box-shadow: none;
}

/* Lifted Ghost Card during Drag */
.reorder-ghost-card {
  position: fixed;
  z-index: 10100;
  pointer-events: none;
  height: 52px;
  background: var(--color-surface-high);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 0 8px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(45, 90, 39, 0.18);
  opacity: 0.96;
  transform: translate3d(0, 0, 0) scale(1.03);
  box-sizing: border-box;
}

.reorder-ghost-card .reorder-mini-card-seq {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.reorder-ghost-card .reorder-mini-card-icon {
  color: var(--color-primary);
}

.reorder-ghost-card .reorder-mini-card-title {
  color: var(--color-primary);
}

/* =========================================================
   ARTISTIC FULL-SCREEN MINI-CARD REORDERING ATELIER
   - Blurred background (Home feed underneath softens)
   - Authentic miniature widget cards that look like the real cards
   - Asymmetric split layout: Card name on opposite side of radial orientation
     * navAnchor === 'right' -> Mini cards on RIGHT (thumb zone), names on LEFT
     * navAnchor === 'left'  -> Mini cards on LEFT (thumb zone), names on RIGHT
   - Drag up/down with parabolic edge auto-scroll
   ========================================================= */

body.is-reordering-cards {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.is-reordering-cards #app-main,
body.is-reordering-cards .top-app-bar,
body.is-reordering-cards .radial-nav-container {
  filter: blur(16px) brightness(0.72);
  pointer-events: none;
  transition: filter 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.artistic-reorder-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: rgba(14, 22, 15, 0.76);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.artistic-reorder-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Artistic Top Bar */
.artistic-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px 16px;
  background-color: #121c14;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 10px;
  flex-shrink: 0;
  z-index: 20;
}

.artistic-brand-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.artistic-brand-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
}

.artistic-brand-sub {
  font-size: var(--text-2xs);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 1px;
}

.artistic-top-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.artistic-btn-glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-radius: var(--radius-full);
  padding: 5px 9px;
  font-size: var(--text-2xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.artistic-btn-glass .material-symbols-outlined {
  font-size: 18px;
}

.artistic-btn-glass:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.97);
}

.artistic-add-btn {
  background: rgba(163, 230, 53, 0.14);
  border: 1px solid rgba(163, 230, 53, 0.35);
  color: #a3e635;
}

.artistic-add-btn:active {
  background: rgba(163, 230, 53, 0.26);
}

.artistic-btn-done {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-full);
  padding: 6px 16px;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 14px rgba(45, 90, 39, 0.4);
  transition: all 0.2s ease;
}

.artistic-btn-done:active {
  transform: scale(0.96);
  filter: brightness(1.1);
}

.artistic-btn-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Canvas & Scroller */
.artistic-reorder-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.artistic-reorder-canvas {
  flex: 1;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px calc(88px + env(safe-area-inset-bottom, 24px)) 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  touch-action: pan-y;
}

.artistic-reorder-canvas.reorder-list-scroller {
  max-height: none;
  height: 100%;
}

.artistic-reorder-canvas::-webkit-scrollbar {
  width: 4px;
}

.artistic-reorder-canvas::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
}

/* Edge Sheen Hotzones */
.artistic-hotzone {
  position: absolute;
  left: 0;
  right: 0;
  height: 58px;
  pointer-events: none;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.artistic-hotzone.top {
  top: 0;
  background: linear-gradient(180deg, rgba(14, 22, 15, 0.95) 0%, rgba(14, 22, 15, 0) 100%);
}

.artistic-hotzone.bottom {
  bottom: 0;
  background: linear-gradient(0deg, rgba(14, 22, 15, 0.95) 0%, rgba(14, 22, 15, 0) 100%);
}

.artistic-hotzone.active {
  opacity: 1;
}

.artistic-hotzone.top.active {
  background: linear-gradient(180deg, rgba(45, 90, 39, 0.38) 0%, rgba(45, 90, 39, 0.02) 100%);
}

.artistic-hotzone.bottom.active {
  background: linear-gradient(0deg, rgba(45, 90, 39, 0.38) 0%, rgba(45, 90, 39, 0.02) 100%);
}

.artistic-hotzone-pill {
  background: rgba(18, 30, 20, 0.85);
  color: #a3e635;
  border: 1px solid rgba(163, 230, 53, 0.35);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  animation: pulseZonePill 1.2s infinite ease-in-out;
}

/* Rows List & Handedness Layout */
.artistic-reorder-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 100%;
  touch-action: pan-y;
}

.artistic-reorder-row.reorder-mini-card,
.artistic-reorder-row {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-xl, 18px);
  background: rgba(20, 32, 22, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  touch-action: pan-y;
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 94px;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.artistic-reorder-row,
.artistic-reorder-row * {
  touch-action: pan-y;
}

.artistic-reorder-row.is-holding {
  transform: scale(0.985);
  border-color: rgba(163, 230, 53, 0.45);
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.artistic-reorder-row:hover {
  border-color: rgba(163, 230, 53, 0.35);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
}

.artistic-reorder-row:active {
  cursor: grabbing;
}

/* Right-Handed Orientation (navAnchor === 'right'):
   Thumb is on right -> Mini card (40% width) on RIGHT, Card Name on LEFT */
.artistic-reorder-list[data-anchor="right"] .artistic-reorder-row {
  flex-direction: row;
}
.artistic-reorder-list[data-anchor="right"] .artistic-label-col {
  text-align: left;
  align-items: flex-start;
}

/* Left-Handed Orientation (navAnchor === 'left'):
   Thumb is on left -> Mini card (40% width) on LEFT, Card Name on RIGHT */
.artistic-reorder-list[data-anchor="left"] .artistic-reorder-row {
  flex-direction: row-reverse;
}
.artistic-reorder-list[data-anchor="left"] .artistic-label-col {
  text-align: right;
  align-items: flex-end;
}

/* Card Name Column (~60% of row width) */
.artistic-label-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.artistic-label-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.artistic-reorder-list[data-anchor="left"] .artistic-label-top {
  flex-direction: row-reverse;
}

.artistic-seq-badge {
  font-size: var(--text-2xs);
  font-weight: 800;
  color: #a3e635;
  background: rgba(163, 230, 53, 0.15);
  border: 1px solid rgba(163, 230, 53, 0.3);
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.artistic-type-icon {
  font-size: 15px;
  color: #a3e635;
  flex-shrink: 0;
}

.artistic-card-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.artistic-card-eyebrow {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.artistic-drag-cue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  color: rgba(163, 230, 53, 0.7);
  font-weight: 600;
  margin-top: 2px;
}

.artistic-reorder-list[data-anchor="left"] .artistic-drag-cue {
  flex-direction: row-reverse;
}

/* Non-drag reorder controls: 44px targets for keyboard / screen-reader / switch users */
.artistic-move-controls {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.artistic-move-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.artistic-move-btn .material-symbols-outlined {
  font-size: var(--text-xl);
}

.artistic-move-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.artistic-move-btn:focus-visible {
  outline: 2px solid #a3e635;
  outline-offset: 2px;
}

/* Overlay header actions: keep the compact look, grow the hit area to 44px */
.artistic-btn-glass,
.artistic-btn-done,
.artistic-btn-close {
  position: relative;
}

.artistic-btn-glass::after,
.artistic-btn-done::after,
.artistic-btn-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 44px;
  transform: translateY(-50%);
}

/* Mini Card Viewport (Around 40% of the actual card width: 148px) */
.artistic-widget-col {
  flex: 0 0 148px;
  width: 148px;
  min-width: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.artistic-mini-viewport {
  width: 148px;
  height: 84px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  position: relative;
  background: rgba(255, 255, 255, 0.04);
}

.artistic-scaled-card {
  width: 370px;
  transform: scale(0.4);
  transform-origin: top left;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.artistic-scaled-card .widget-card {
  margin: 0 !important;
  box-shadow: none !important;
}

.mini-widget-body {
  width: 100%;
  box-sizing: border-box;
  height: 84px;
  min-height: 84px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mini-widget-body:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Hide duplicate grip inside mini-widget-body since header already has a dedicated grip */
.mini-widget-body .mini-w-grip {
  display: none;
}

.artistic-reorder-row.is-placeholder {
  opacity: 0.28;
  border: 2px dashed rgba(163, 230, 53, 0.8);
  background: rgba(74, 103, 65, 0.12);
  box-shadow: none;
}

/* Lifted Ghost Row during Drag */
.artistic-ghost-row {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.98;
  transform: translate3d(0, 0, 0) scale(1.03);
  box-sizing: border-box;
  border-color: #a3e635;
  background: rgba(22, 36, 24, 0.96);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.5), 0 0 24px rgba(163, 230, 53, 0.25);
}

/* Mini Widget Inner Anatomy */
.mini-w-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.mini-w-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.mini-w-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.mini-w-temp {
  font-size: var(--text-lg);
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

.mini-w-cond {
  font-size: var(--text-2xs);
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.mini-w-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.mini-w-source,
.mini-w-tag {
  font-size: var(--text-2xs);
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-w-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mini-w-subpill {
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.mini-w-subpill.live-dot {
  background: rgba(76, 217, 100, 0.2);
  color: #4cd964;
  border: 1px solid rgba(76, 217, 100, 0.35);
}

.mini-w-grip {
  color: rgba(255, 255, 255, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mini-w-grip .material-symbols-outlined {
  font-size: 18px;
}

/* Bus mini chips */
.mini-bus-chips {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mini-bus-chip {
  padding: 2.5px 8px;
  border-radius: 6px;
  background: rgba(45, 90, 39, 0.35);
  border: 1px solid rgba(76, 217, 100, 0.35);
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-2xs);
}

.mini-bus-chip .bus-num {
  font-weight: 800;
  color: #ffffff;
}

.mini-bus-chip .bus-time {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: #4cd964;
}

/* Radar mini simulated map */
.mini-radar-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 40%, rgba(78, 205, 196, 0.25) 0%, rgba(18, 30, 24, 0.7) 70%);
  pointer-events: none;
  opacity: 0.6;
}

/* 4D mini balls */
.mini-4d-balls {
  display: flex;
  gap: 3px;
}

.mini-4d-ball {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #f7ba2a, #d49a17);
  color: #1a1a1a;
  font-size: var(--text-2xs);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* MRT lines mini dots */
.mini-mrt-lines {
  display: flex;
  gap: 3px;
  align-items: center;
}

.mrt-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.mrt-dot.nsl { background: #d42e12; }
.mrt-dot.ewl { background: #009530; }
.mrt-dot.ccl { background: #fa9e0d; }
.mrt-dot.dtl { background: #005ec4; }
.mrt-dot.tel { background: #9d5b25; }

.mini-status-dot-green {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: #4cd964;
  box-shadow: 0 0 6px #4cd964;
}

.mini-deal-badge {
  font-size: var(--text-2xs);
  font-weight: 800;
  padding: 2.5px 8px;
  background: linear-gradient(135deg, #ff6b6b, #ee5253);
  color: #ffffff;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(238, 82, 83, 0.35);
}





/* ==========================================================================
   Design review: 44px hit areas for remaining small controls
   (visual size unchanged, so 320px to 480px layouts do not reflow)
   ========================================================================== */
.gs-close-btn,
.artistic-btn-close {
  position: relative;
}

.gs-close-btn::after,
.artistic-btn-close::after,
.haze-map-expand-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   Air quality 3x3 compass (N top, W/C/E middle, S bottom); fluid 320-480px
   ========================================================================== */
.sg-map-header-row { gap: 6px; flex-wrap: wrap; }
.sg-map-compass-label { min-width: 0; }

.air-compass {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 1.5vw, 8px);
  /* Static Singapore map backdrop so users can see where each region sits */
  aspect-ratio: 871 / 563;
  isolation: isolate;
}

.air-compass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/assets/SG-map-vector.png') center / contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

body[data-theme="dark"] .air-compass::before {
  opacity: 0.32;
  filter: invert(1) brightness(1.2) hue-rotate(170deg);
}

.air-compass-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  text-align: center;
}

.air-compass-cell.empty { background: transparent; border-color: transparent; }

/* The user's own region — neutral emphasis; green would read as "healthy" */
.air-compass-cell.is-headline {
  background: var(--color-surface-lowest);
  border-color: var(--color-on-surface);
  box-shadow: 0 0 0 1px var(--color-on-surface);
}

.air-compass-code {
  background: var(--color-outline);
  min-width: 20px;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 800;
  line-height: 1.2;
}

.air-compass-vals {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 4px;
  font-size: clamp(12px, 3.6vw, 14px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.air-compass-sep { opacity: 0.35; font-weight: 600; }

/* Status words wrap instead of clipping in ~140-170px twin cards */
.air-twin-footer {
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
}
.air-metric-title { min-width: 0; }
.air-status-pill {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Skeleton placeholders: reserve layout so cards do not jump when data lands */
.skeleton-block--lg { height: 64px; }
.skeleton-block--sm { height: 40px; width: 70%; }
.skeleton-stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.skeleton-block {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--color-surface-container) 25%, var(--color-surface-high) 50%, var(--color-surface-container) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-block { animation: none; }
}

/* Offscreen weather scenes stop animating (toggled by IntersectionObserver) */
.wx-scene.wx-paused,
.wx-scene.wx-paused * {
  animation-play-state: paused !important;
}

/* Utilities replacing repeated inline styles. !important preserves the old inline-style precedence. */
.u-meta { font-size: 11px !important; color: var(--color-outline) !important; }
.u-min0 { min-width: 0 !important; }
.u-row-between-mb12 { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 12px !important; }
.u-ic-13 { font-size: 13px !important; vertical-align: -2px !important; }
.u-p-16-20 { padding: 16px 20px !important; }
.u-title-18 { font-size: 18px !important; font-weight: 700 !important; color: var(--color-on-surface) !important; }
.u-fs-11 { font-size: 11px !important; }
.u-card-col { cursor: pointer !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-title-13 { font-size: 13px !important; font-weight: 700 !important; color: var(--color-on-surface) !important; }
.u-eyebrow { font-size: 11px !important; font-weight: 700 !important; color: var(--color-outline) !important; text-transform: uppercase !important; }
.u-flex1-min0 { flex: 1 !important; min-width: 0 !important; }
.u-footer-row { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 14px !important; border-top: 1px solid var(--color-outline-variant) !important; padding-top: 10px !important; }
.u-row-between-mb8 { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 8px !important; }
.u-row-gap8 { display: flex !important; align-items: center !important; gap: 8px !important; }
.u-p-20 { padding: 20px !important; }
.u-meta-mt2 { font-size: 11px !important; color: var(--color-outline) !important; margin-top: 2px !important; }
.u-meta-mt1 { font-size: 11px !important; color: var(--color-outline) !important; margin-top: 1px !important; }
.u-c-primary { color: var(--color-primary) !important; }
.u-ic-14 { font-size: 14px !important; vertical-align: -2px !important; }
.u-eyebrow-primary { font-size: 11px !important; font-weight: 700 !important; color: var(--color-primary) !important; text-transform: uppercase !important; }
.u-row-between-gap8 { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; }
.u-col-gap10 { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.u-row-gap6 { display: flex !important; align-items: center !important; gap: 6px !important; }
.u-row-gap5 { display: flex !important; align-items: center !important; gap: 5px !important; }
.u-empty-block { text-align: center !important; padding: 24px !important; color: var(--color-outline) !important; }
.u-ic-18-primary { font-size: 18px !important; color: var(--color-primary) !important; }
.u-ic-16-primary { font-size: 16px !important; color: var(--color-primary) !important; }
.u-title-14 { font-size: 14px !important; font-weight: 700 !important; color: var(--color-on-surface) !important; }
.u-meta-600 { font-size: 11px !important; color: var(--color-outline) !important; font-weight: 600 !important; }
.u-col-gap16 { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.u-btn-block { width: 100% !important; margin-top: 12px !important; padding: 11px !important; background: var(--color-primary) !important; color: var(--color-on-primary) !important; border: none !important; border-radius: var(--radius-full) !important; font-weight: 700 !important; font-size: 13px !important; cursor: pointer !important; }
.u-rel-z2 { position: relative !important; z-index: 2 !important; }
.u-flex1-min0 { min-width: 0 !important; flex: 1 !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mb-14 { margin-bottom: 14px !important; }
.u-ic-28-primary { font-size: 28px !important; color: var(--color-primary) !important; }
.u-stat-danger { font-size: 16px !important; font-weight: 800 !important; color: var(--color-danger) !important; margin-top: 1px !important; }
.u-fs13-mt6 { font-size: 13px !important; margin-top: 6px !important; }
.u-ic-13-mr2 { font-size: 13px !important; margin-right: 2px !important; }
.u-title-12 { font-size: 12px !important; font-weight: 700 !important; color: var(--color-on-surface) !important; }
.u-meta-12 { font-size: 12px !important; color: var(--color-outline) !important; }
.u-section-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--color-on-surface-variant) !important; margin: 14px 0 8px 0 !important; }
.u-row-between-mb10 { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 10px !important; }
.u-row-between { display: flex !important; justify-content: space-between !important; align-items: center !important; }
.u-wrap-gap6 { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.u-row-gap8-flex1 { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; flex: 1 !important; }
.u-row-gap6-wrap { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; }
.u-pointer { cursor: pointer !important; }
.u-tile { background: var(--color-surface-low) !important; border: 1px solid var(--color-outline-variant) !important; border-radius: var(--radius-md) !important; padding: 8px 6px !important; text-align: center !important; }
.u-icon-btn-bare { background: none !important; border: none !important; padding: 2px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }

/* Icon-size utilities (replace repeated inline style="font-size" on Material Symbols).
   !important preserves the old inline-style precedence. */
.material-symbols-outlined.icon-11 { font-size: 11px !important; }
.material-symbols-outlined.icon-12 { font-size: 12px !important; }
.material-symbols-outlined.icon-13 { font-size: 13px !important; }
.material-symbols-outlined.icon-14 { font-size: 14px !important; }
.material-symbols-outlined.icon-15 { font-size: 15px !important; }
.material-symbols-outlined.icon-16 { font-size: 16px !important; }
.material-symbols-outlined.icon-18 { font-size: 18px !important; }
.material-symbols-outlined.icon-20 { font-size: 20px !important; }

/* Add-to-Home sheet opened from Edit Home must stack above the overlay. */
body.is-reordering-cards #app-modal.open {
  z-index: 10010;
}

/* `display:flex` above would otherwise override the hidden attribute. */
.artistic-reorder-overlay[hidden] {
  display: none;
}


/* =========================================================
   Page drawers: full-screen detail pages (opened from a card)
   The sheet zooms out of the tapped card, wears a theme-coloured
   hero and trail header, and is left via the Back button that sits
   where the radial hub does. Level 1/2 pages never look like this.
   ========================================================= */
.modal-overlay.is-page {
  align-items: stretch;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity 0.12s ease;
}

.modal-overlay.is-page .modal-sheet {
  max-height: none;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: clip-path 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
  clip-path: inset(var(--ct, 40%) var(--cr, 14px) var(--cb, 40%) var(--cl, 14px) round 18px);
}

.modal-overlay.is-page.open .modal-sheet {
  clip-path: inset(0 0 0 0 round 0);
}

.modal-overlay.is-page .sheet-handle {
  display: none;
}

.page-shell {
  --page-accent: var(--color-primary);
  min-height: 100%;
  background: var(--color-background);
}
.page-shell[data-theme="transit"] { --page-accent: var(--theme-transit); }
.page-shell[data-theme="weather"] { --page-accent: var(--theme-weather); }
.page-shell[data-theme="lifestyle"] { --page-accent: var(--theme-lifestyle); }

/* Header bar floats over the hero, then turns solid once it scrolls away. */
.page-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 18px;
  color: #fff;
  background: transparent;
}

.page-shell.is-compact .page-bar {
  background-color: var(--page-accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.page-trail {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-trail b { font-weight: 800; }

.page-bar__mini {
  display: none;
  font-weight: 800;
  font-size: var(--text-md);
  white-space: nowrap;
}
.page-shell.is-compact .page-bar__mini { display: inline; }
.page-shell.is-compact .page-trail { display: none; }

.page-bar .sheet-close-btn {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.page-hero {
  margin-top: -56px;
  padding: calc(72px + env(safe-area-inset-top, 0px)) 18px 20px;
  background: linear-gradient(170deg, var(--page-accent) 0%, color-mix(in srgb, var(--page-accent) 70%, #000) 100%);
  color: #fff;
  border-radius: 0 0 26px 26px;
}

.page-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.page-hero__svc {
  flex-shrink: 0;
  padding: 2.5px 10px;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--page-accent);
  font-weight: 800;
  font-size: var(--text-md);
}

.page-hero__stop {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-hero__value {
  margin: 10px 0 2px;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}
.page-hero__value small {
  margin-left: 4px;
  font-size: var(--text-lg);
  font-weight: 600;
  opacity: 0.85;
}

.page-hero__sub {
  font-size: var(--text-sm);
  opacity: 0.92;
  overflow-wrap: anywhere;
}

.page-hero__meta {
  min-width: 0;
  margin-top: 4px;
  font-size: var(--text-xs, 12px);
  opacity: 0.8;
  overflow-wrap: anywhere;
  user-select: text;
}

.page-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.page-chip--load { gap: 6px; }

.load-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.page-chip--load .load-dot { margin-left: 0; }
.load-dot--sea { background: #4ade80; }
.load-dot--sda { background: #fbbf24; }
.load-dot--lsd { background: #f87171; }

.page-chip {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.18);
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stop header: identity only, so the first card is visible on a 360x780 phone. */
.page-hero--stop { padding-bottom: 16px; }
.page-hero__stop-name {
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.page-hero--stop .page-hero__chips { margin-top: 10px; }

.page-hero--loading {
  text-align: center;
  padding-bottom: 36px;
}
.page-hero__title { margin-top: 10px; font-size: var(--text-lg); font-weight: 800; }

/* Content gets page air and the clearance the Back button needs. */
.page-body {
  padding: 16px 18px calc(96px + env(safe-area-inset-bottom, 16px));
}

/* Back button: same size, anchor and shadow as the radial hub. */
.page-back-fab {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 12px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.page-back-fab[data-anchor="right"] { right: max(16px, calc((100vw - 480px) / 2 + 16px)); }
.page-back-fab[data-anchor="left"] { left: max(16px, calc((100vw - 480px) / 2 + 16px)); }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay.is-page .modal-sheet { transition: none; }
  .modal-overlay.is-page { transition: opacity 0.01s; }
}

/* ---- Per-bus arrival alerts (bell + threshold sheet) ---- */
.bus-monitor-btn-icon {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-lowest, #fff);
  color: var(--color-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.bus-monitor-btn-icon .material-symbols-outlined { font-size: 20px; }
/* 44px hit area; visual size unchanged */
.bus-monitor-btn-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.bus-monitor-btn-icon.active {
  background: var(--color-primary-fixed);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.bus-monitor-sheet {
  position: fixed;
  inset: 0;
  z-index: 10300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bus-monitor-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.bus-monitor-sheet__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  background-color: var(--color-background);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--color-outline-variant);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  max-height: 85vh;
  overflow-y: auto;
}
.bus-monitor-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.bus-monitor-sheet__title { font-size: 16px; font-weight: 800; color: var(--color-on-surface); }
.bus-monitor-sheet__sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-outline);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.bus-monitor-sheet__label { font-size: 12px; font-weight: 700; color: var(--color-on-surface-variant); margin-bottom: 8px; }
.bus-monitor-sheet__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bus-monitor-chip {
  min-width: 0;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
  color: var(--color-on-surface);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.bus-monitor-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.bus-monitor-sheet__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
  margin-bottom: 8px;
}
.bus-monitor-sheet__toggle input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-primary); }
.bus-monitor-sheet__hint { font-size: 11px; color: var(--color-outline); margin-bottom: 14px; }
.bus-monitor-sheet__note {
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-low);
  border: 1px dashed var(--color-outline-variant);
}
.bus-monitor-sheet__actions { display: flex; gap: 8px; }
.bus-monitor-btn {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--color-outline-variant);
}
.bus-monitor-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.bus-monitor-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.bus-monitor-btn--ghost { background: var(--color-surface-low); color: var(--color-on-surface); }
.bus-monitor-chip--slot {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 6px;
  border-radius: var(--radius-md);
}
.bus-monitor-chip--slot:disabled { opacity: 0.45; cursor: not-allowed; }
.bus-monitor-chip--slot[aria-checked="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.bus-monitor-chip__eta { font-size: 11px; font-weight: 600; opacity: 0.85; white-space: nowrap; }

/* Air quality header: LEVEL pill + exact timestamp wrap together on compact phones. */
.air-quality-widget .ui-eyebrow__status {
  flex-wrap: wrap;
  flex-shrink: 1;
  min-width: 0;
  row-gap: 2px;
}

/* Air quality summary line above the regions compass (compact-phone safe). */
.air-summary {
  margin: 2px 0 10px;
  min-width: 0;
}

.air-summary__main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-on-surface);
}

.air-summary__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.air-summary__region,
.air-summary__band {
  min-width: 0;
}

.air-summary__sep {
  color: var(--color-outline);
}

.air-summary__sub {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 2px;
  margin-top: 3px;
  padding-left: 15px;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--color-on-surface-variant);
}

.air-summary__sub strong {
  font-weight: 800;
}

/* Tappable region summary + drawer region cards. */
.air-summary__main[data-air-region-pick] {
  cursor: pointer;
  min-height: 28px;
  -webkit-tap-highlight-color: transparent;
}

.air-summary__chev {
  font-size: 18px;
  color: var(--color-outline);
  flex-shrink: 0;
}

button.aqi-sector-card {
  font: inherit;
  color: inherit;
  min-width: 0;
}

.aqi-sector-card.is-mine {
  border-color: var(--color-on-surface);
  box-shadow: 0 0 0 1px var(--color-on-surface);
  background: var(--color-surface-container);
}

.air-compass-cell[data-air-region-open] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Vouched: creator-endorsed eateries (card + level 2)
   Sized for 360-412px. Every flex child that holds text sets min-width:0.
   ========================================================================== */
.vouched-radar {
  position: relative;
  height: 128px;
  margin: 8px 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background:
    linear-gradient(var(--color-outline-variant) 1px, transparent 1px) 0 50% / 100% 50%,
    linear-gradient(90deg, var(--color-outline-variant) 1px, transparent 1px) 50% 0 / 25% 100%,
    var(--color-surface-low);
  background-blend-mode: normal;
  overflow: hidden;
  isolation: isolate;
}

.vouched-radar__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.vouched-radar__ring--inner { width: 36%; aspect-ratio: 1; }
.vouched-radar__ring--outer { width: 72%; aspect-ratio: 1; }

.vouched-radar__range {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-lowest, #fff);
  color: var(--color-on-surface-variant);
  font-size: var(--text-2xs);
  font-weight: 700;
}

.vouched-radar__pill {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-lowest, #fff);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}

.vouched-me {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-info);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-info) 25%, transparent);
  transform: translate(-50%, -50%);
}
.vouched-me--map { position: static; display: block; transform: none; }

.vouched-pin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: var(--shadow-card);
  font-size: var(--text-xs);
  font-weight: 800;
  transform: translate(-50%, -50%);
}
.vouched-pin.is-top {
  width: 34px;
  height: 34px;
  background: var(--theme-lifestyle);
  z-index: 2;
}
.vouched-pin.is-closed { background: var(--color-outline); opacity: 0.85; }
.vouched-pin--map { position: relative; left: 0; top: 0; transform: none; width: 30px; height: 30px; }
.vouched-pin--map.is-top { width: 36px; height: 36px; margin: -3px 0 0 -3px; }
.vouched-pin--map.is-selected { outline: 3px solid var(--color-info); outline-offset: 2px; }
.vouched-pin--map i {
  position: absolute;
  right: -6px;
  top: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-full);
  background: var(--color-surface-lowest, #fff);
  color: var(--color-on-surface);
  font-size: 10px;
  font-style: normal;
  line-height: 16px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.vouched-pin-wrap, .vouched-me-wrap { background: transparent; border: 0; }

.vouched-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.vouched-top__tile {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--theme-lifestyle) 14%, var(--color-surface-low));
  color: var(--theme-lifestyle);
}
.vouched-top__main { flex: 1 1 0; min-width: 0; }
.vouched-top__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-on-surface);
}
.vouched-top__meta {
  font-size: var(--text-xs);
  color: var(--color-on-surface-variant);
}
.vouched-top__by { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px; }
.vouched-top__count { font-size: var(--text-2xs); font-weight: 700; color: var(--color-on-surface-variant); }

.vouched-avs { display: inline-flex; }
.vouched-avs .vouched-av + .vouched-av { margin-left: -8px; }
.vouched-av {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-surface-lowest, #fff);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.vouched-av--0 { background: #b4571f; }
.vouched-av--1 { background: #334f2b; }
.vouched-av--2 { background: #3b6ea5; }
.vouched-av--3 { background: #7a4a8f; }

.vouched-open { color: var(--color-success-text); font-weight: 700; }
.vouched-closed { color: var(--color-warning-text, var(--color-star-ink)); font-weight: 700; }

.vouched-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  text-align: center;
  color: var(--color-on-surface-variant);
  font-size: var(--text-sm);
}
.vouched-empty p { margin: 0; }

/* Level 2 */
.vouched-sheet { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vouched-map-wrap { position: relative; }
.vouched-map {
  height: 232px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
  overflow: hidden;
  isolation: isolate;
}
.vouched-map .leaflet-control-attribution {
  max-width: 62%;
  font-size: var(--text-2xs);
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.85);
}
.vouched-recentre {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 500;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-lowest, #fff);
  color: var(--color-primary);
  box-shadow: var(--shadow-float);
  cursor: pointer;
}

.vouched-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
}
.vouched-seg button {
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-on-surface-variant);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.vouched-seg button[aria-pressed="true"] {
  background: var(--color-surface-lowest, #fff);
  color: var(--color-primary);
  box-shadow: var(--shadow-card);
}

.vouched-chip { min-height: 40px; }
.vouched-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.vouched-creators {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
}
.vouched-creators[hidden] { display: none; }
.vouched-creators__hint { margin: 0 0 8px; font-size: var(--text-xs); color: var(--color-on-surface-variant); }
.vouched-creators__row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.vouched-follow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px 0 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-lowest, #fff);
  color: var(--color-on-surface);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.vouched-follow.is-on { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-lowest, #fff)); }

.vouched-toolbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vouched-toolbar__count { flex: 1 1 0; min-width: 0; font-size: var(--text-sm); font-weight: 800; color: var(--color-on-surface); }
.vouched-select select {
  max-width: 130px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
  color: var(--color-on-surface-variant);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
}

.vouched-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vouched-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-low);
}
.vouched-item.is-selected { border-color: var(--theme-lifestyle); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-lifestyle) 25%, transparent); }
.vouched-item.is-closed { opacity: 0.8; }
.vouched-item__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vouched-item__title { flex: 1 1 0; min-width: 0; }
.vouched-item__title h4 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-on-surface);
}
.vouched-heart {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-outline);
  cursor: pointer;
}
.vouched-heart.is-on { color: var(--color-danger); }
.vouched-item__status { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: var(--text-xs); }
.vouched-count { flex-shrink: 0; font-weight: 700; color: var(--color-on-surface-variant); }
.vouched-bys { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.vouched-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 10px 3px 4px;
  border-radius: var(--radius-full);
  background: var(--color-surface-lowest, #fff);
  border: 1px solid var(--color-outline-variant);
  font-size: var(--text-xs);
  font-weight: 600;
}
.vouched-by.is-stale { opacity: 0.6; }
.vouched-by__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vouched-more { align-self: center; font-size: var(--text-xs); font-weight: 700; color: var(--color-on-surface-variant); }
.vouched-tip { margin: 0; font-size: var(--text-sm); color: var(--color-on-surface); }
.vouched-actions { display: flex; gap: 8px; }
.vouched-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-lowest, #fff);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.vouched-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.vouched-note { margin: 4px 0 0; font-size: var(--text-2xs); color: var(--color-outline); text-align: center; }