:root {
  --primary: #ff6b00;
  --primary-light: #ff983f;
  --primary-dark: #c43c00;
  --surface: #ffffff;
  --surface-variant: #f5f5f5;
  --background: #fafafa;
  --on-surface: #1a1a1a;
  --on-surface-variant: #666666;
  --outline: #cccccc;
  --error: #d32f2f;
  --success: #388e3c;
  --warning: #f9a825;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1e1e1e;
    --surface-variant: #2d2d2d;
    --background: #121212;
    --on-surface: #ffffff;
    --on-surface-variant: #b0b0b0;
    --outline: #444444;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--background);
  color: var(--on-surface);
  min-height: 100vh;
  min-height: 100dvh;  /* visible viewport on mobile (excludes the address bar) */
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 600px;
  margin: 0 auto;
  background: var(--surface);
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  /* Keep the title/buttons below the notch/status bar (viewport-fit=cover). */
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--primary);
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 18px;
}

.nav-actions {
  display: flex;
  gap: 4px;
}

.icon-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.icon-btn:hover {
  background: rgba(255,255,255,0.2);
}

.navbar .icon-btn:hover {
  background: rgba(255,255,255,0.2);
}

/* Main Content */
main {
  flex: 1;
  padding: 16px;
  /* Clear the fixed bottom nav (taller than it looks once the safe-area inset is
     added on phones with a home indicator). */
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

/* Fixed bottom stack: holds the ad banner (when shown) directly above the nav.
   Both are in normal flow inside this one fixed container, so the banner can't
   overlap or hide under the nav no matter how tall either gets. */
.bottom-stack {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 600px;
  margin: 0 auto;
  z-index: 1000;
}

/* Bottom Navigation */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  background: var(--surface);
  border-top: 1px solid var(--outline);
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--on-surface-variant);
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 8px;
  font-size: 11px;
  transition: all 0.2s;
}

/* Tab labels share the width evenly and never push a tab off-screen */
.nav-item > span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item.active {
  color: var(--primary);
}

.nav-item:hover {
  background: var(--surface-variant);
}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--outline);
}

.card-header h3 {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
}

.card-header .material-symbols-outlined {
  color: var(--primary);
}

.card-content {
  padding: 16px;
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-variant);
}

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

.card-row-label {
  color: var(--on-surface-variant);
  font-size: 14px;
}

.card-row-value {
  font-weight: 500;
  font-size: 14px;
}

/* Weather Widget */
.weather-highlight {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Weather trend sparkline (temp high/low + RH min/max over recent IAPs). */
.weather-sparkline {
  background: var(--surface-variant);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.weather-sparkline svg {
  display: block;
  width: 100%;
  height: auto;
}
.weather-sparkline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--on-surface-variant);
}
.weather-sparkline-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.weather-sparkline-legend .legend-period {
  font-size: 12px;
  opacity: 0.75;
}
.weather-sparkline { cursor: pointer; }
.weather-sparkline-legend .sparkline-more { margin-left: auto; color: var(--primary); font-weight: 600; }
.weather-sparkline .wind-spark {
  margin-top: 8px;
  border-top: 1px solid var(--outline);
  padding-top: 4px;
}
.legend-note { opacity: 0.7; font-size: 11px; }

/* Weather trend detail modal: one chart per series, numbers on every point. */
.trend-detail-section { margin-bottom: 14px; }
.trend-detail-section:last-child { margin-bottom: 0; }
.trend-detail-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; margin-bottom: 2px;
}
.trend-detail-head .legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.trend-detail-head .legend-period { font-size: 14px; opacity: 0.75; }
.trend-detail-section svg {
  display: block; width: 100%; height: auto;
  background: var(--surface-variant); border-radius: 8px;
}
.trend-detail-empty { color: var(--on-surface-variant); font-size: 13px; padding: 8px 0; }
.weather-sparkline-legend .legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.weather-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.weather-temp {
  font-size: 36px;
  font-weight: 700;
}

.weather-icon {
  font-size: 48px;
}

.weather-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  font-size: 14px;
}

.weather-alert {
  background: var(--warning);
  color: #000;
  padding: 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* Division/Radio Lists */
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--surface-variant);
  cursor: pointer;
  transition: background 0.2s;
}

.list-item:hover {
  background: var(--surface-variant);
}

.list-item:last-child {
  border-bottom: none;
}

.list-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  overflow: hidden;
}

.list-avatar.favorite {
  background: var(--warning);
}

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

.list-title {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

.list-subtitle {
  font-size: 13px;
  color: var(--on-surface-variant);
  overflow-wrap: anywhere;
}

/* Compact per-division frequency line in list rows (truncates, never bleeds) */
.div-freq {
  font-size: 11px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.div-hint {
  font-size: 11px;
  color: var(--on-surface-variant);
  margin-top: 3px;
  opacity: 0.8;
}

/* Line-by-line tones / notes block (division detail + My Division card) */
.div-textblock { margin: 12px 0 0; }
.div-textblock-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 4px;
}
.div-lines {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.div-lines li {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.list-action {
  color: var(--on-surface-variant);
}

/* Frequency display */
.freq-value {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  font-size: 14px;
}

/* Maps Grid */
.maps-tabs {
  display: flex;
  border-bottom: 1px solid var(--outline);
  margin-bottom: 16px;
}

.maps-tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--on-surface-variant);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.maps-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.maps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.map-card {
  border: 1px solid var(--outline);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

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

.map-preview {
  height: 100px;
  background: var(--surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.map-preview .material-symbols-outlined {
  font-size: 48px;
}

.map-info {
  padding: 12px;
}

.map-name {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 4px;
}

.map-date {
  font-size: 12px;
  color: var(--on-surface-variant);
}

.map-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--primary);
  color: white;
  border-radius: 4px;
  font-size: 11px;
  margin-top: 4px;
}

/* IAP Viewer */
.iap-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface-variant);
  border-radius: 8px;
  margin-bottom: 16px;
}

.iap-selector select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--on-surface);
  font-size: 14px;
}

.iap-preview {
  background: var(--surface-variant);
  border-radius: 8px;
  padding: 24px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.iap-preview .material-symbols-outlined {
  font-size: 64px;
  color: var(--on-surface-variant);
  margin-bottom: 16px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 48px 24px;
}

.empty-state .material-symbols-outlined {
  font-size: 80px;
  color: var(--primary);
  margin-bottom: 16px;
}

/* Icons inside buttons (e.g. the "+" on Add Incident) shouldn't inherit the
   big orange hero-icon styling above — match the button's own text color/size. */
.empty-state .btn .material-symbols-outlined {
  font-size: 20px;
  color: inherit;
  margin-bottom: 0;
}

.empty-state h2 {
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--on-surface-variant);
  margin-bottom: 24px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-outline {
  background: none;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: white;
}

.btn-text {
  background: none;
  color: var(--primary);
  padding: 8px 16px;
}

/* Dropdown Menu */
.dropdown {
  position: fixed;
  top: calc(56px + env(safe-area-inset-top, 0px));
  right: 16px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  min-width: 200px;
}

.dropdown button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--on-surface);
  cursor: pointer;
  text-align: left;
  font-size: 14px;
}

.dropdown button:hover {
  background: var(--surface-variant);
}

.dropdown hr {
  border: none;
  border-top: 1px solid var(--outline);
  margin: 4px 0;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Above the bottom nav / dropdown / loading overlay (z 1000) AND the fullscreen
     map overlay (z 10000) — the 3D Premium prompt is triggered from inside the
     fullscreen map, so a lower modal would open hidden behind it. Toasts (below)
     sit above this. */
  z-index: 10100;
  /* Keep the modal clear of notches and the home indicator on phones. */
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.modal {
  background: var(--surface);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  /* dvh tracks the *visible* viewport, so the modal doesn't extend behind the
     mobile address bar / nav the way vh does. vh is the fallback for old browsers. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

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

.modal-header h2 {
  font-size: 18px;
}

.modal-content {
  padding: 16px;
  overflow-y: auto;
}

/* Form Elements */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--on-surface);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-hint {
  font-size: 12px;
  color: var(--on-surface-variant);
  margin-top: 4px;
}

/* Settings */
.settings-section {
  margin-bottom: 24px;
}

.settings-section h3 {
  font-size: 14px;
  color: var(--primary);
  margin-bottom: 8px;
  padding: 0 4px;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.settings-item:hover {
  background: var(--surface-variant);
}

.settings-item .material-symbols-outlined {
  color: var(--on-surface-variant);
}

.settings-item-content {
  flex: 1;
}

.settings-item-title {
  font-weight: 500;
}

.settings-item-subtitle {
  font-size: 13px;
  color: var(--on-surface-variant);
}

.settings-num {
  width: 56px; padding: 6px 8px; text-align: center;
  border: 1px solid var(--outline, #ccc); border-radius: 8px;
  background: var(--surface); color: var(--on-surface); font-size: 15px;
}

/* Toggle Switch */
.toggle {
  position: relative;
  width: 48px;
  height: 28px;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--outline);
  border-radius: 28px;
  transition: 0.3s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

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

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

/* Toast */
#toast-container {
  position: fixed;
  /* Clear the bottom nav + home indicator. */
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  /* Above modals (10100) and the fullscreen map so confirmations are never hidden. */
  z-index: 10200;
}

.toast {
  background: var(--on-surface);
  color: var(--surface);
  padding: 12px 24px;
  border-radius: 8px;
  margin-top: 8px;
  animation: slideUp 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 90vw;
}

.toast-error {
  background: var(--error, #d93025);
  color: #fff;
}

.toast-success {
  background: var(--primary, #ff6b00);
  color: #fff;
}

.toast-action {
  margin-left: 8px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: var(--primary, #ff6b00);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.historical-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--surface-variant);
  border-left: 4px solid var(--primary);
  font-size: 13px;
}
.historical-banner .btn-text { margin-left: auto; }

/* Live parse progress */
.parse-banner {
  background: var(--secondary-container, var(--surface-variant));
  color: var(--on-secondary-container, var(--on-surface));
  padding: 10px 12px;
  border-bottom: 1px solid var(--outline);
}
.parse-banner-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; margin-bottom: 8px;
}
.parse-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.parse-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 3px 8px; border-radius: 12px;
  background: rgba(127,127,127,0.12);
  transition: background 0.3s, color 0.3s;
}
.parse-chip .material-symbols-outlined { font-size: 14px; }
.parse-chip.pending { opacity: 0.55; }
.parse-chip.active { background: var(--primary-container, rgba(255,107,0,0.15)); color: var(--on-primary-container, var(--primary)); font-weight: 600; }
.parse-chip.done { background: rgba(46,160,67,0.18); color: #2ea043; }
.parse-spin { animation: spin 1s linear infinite; }

/* Skeleton loaders */
.skeleton-card {
  height: 96px; border-radius: 12px; margin-bottom: 16px;
  background: linear-gradient(90deg, rgba(127,127,127,0.10) 25%, rgba(127,127,127,0.18) 37%, rgba(127,127,127,0.10) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* View transition */
.view-enter { animation: fadeSlide 0.22s ease; }
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pull-to-refresh */
.ptr-indicator {
  position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  color: var(--primary); opacity: 0; z-index: 1200; pointer-events: none;
}
.ptr-indicator .material-symbols-outlined { font-size: 22px; }

/* Notes view */
.notes-textarea {
  width: 100%;
  min-height: 60vh;
  min-height: 60dvh;
  padding: 14px;
  border: 1px solid var(--outline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--on-surface);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}
.notes-textarea:focus { outline: 2px solid var(--primary); border-color: transparent; }
.notes-textarea.notes-widget { min-height: 160px; }

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

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--surface-variant);
  border-radius: 16px;
  font-size: 13px;
  margin: 2px;
}

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

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

.spinning {
  animation: spin 1s linear infinite;
}

/* Hidden */
.hidden {
  display: none !important;
}

/* Customize Dashboard */
.widget-list {
  list-style: none;
}

.widget-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface-variant);
  border-radius: 8px;
  margin-bottom: 8px;
}

.widget-list-item.hidden-widget {
  opacity: 0.5;
}

.widget-list-item .material-symbols-outlined {
  color: var(--on-surface-variant);
}

.widget-list-item .widget-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-list-item .drag-handle {
  cursor: grab;
  touch-action: none;        /* let our pointer-drag own the gesture */
  padding: 4px;
  margin: -4px;
}

.widget-list-item.dragging {
  opacity: 0.97;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  cursor: grabbing;
}

.widget-vis {
  background: none;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--on-surface-variant);
}

/* Job Code and P-Code styles */
.p-code-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
}

.job-code-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-variant);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
}

/* Primary container for highlighted info */
:root {
  --primary-container: #ffe4cc;
  --on-primary-container: #2d1600;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-container: #4a2800;
    --on-primary-container: #ffe4cc;
  }
}

/* Date picker styling */
input[type="date"] {
  width: 100%;
  /* Native date inputs carry a UA minimum width that overflows narrow
     containers (e.g. the segment box) on mobile webkit; force them to shrink. */
  min-width: 0;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
  padding: 12px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--on-surface);
  font-size: 14px;
}

input[type="date"]:focus {
  outline: none;
  border-color: var(--primary);
}

/* Grid form layout */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Date row. Native date inputs have a wide intrinsic min-width, so on phones
   two side-by-side crowd and overlap. Stack them by default (mobile-first) and
   only go two-column when the modal is wide enough (>=480px). min-width:0 keeps
   the inputs from overflowing their grid cell when side-by-side. */
.date-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.date-2col > * {
  min-width: 0;
}
@media (min-width: 480px) {
  .date-2col {
    grid-template-columns: 1fr 1fr;
  }
}

/* Assignment segments (multiple positions per fire) */
.segment-row {
  border: 1px solid var(--outline);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--surface-variant);
}
.segment-row .segment-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.segment-row .segment-row-head span {
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface-variant);
}
.segment-remove {
  background: none;
  border: none;
  color: var(--error);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 2px;
}
.fire-segment {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}
.fire-segment .fire-segment-dates {
  color: var(--on-surface-variant);
  font-size: 13px;
  white-space: nowrap;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.status-badge.pending {
  background: #fff3e0;
  color: #e65100;
}

.status-badge.processing {
  background: #e3f2fd;
  color: #1565c0;
}

.status-badge.completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-badge.failed {
  background: #ffebee;
  color: #c62828;
}

/* Sync timing info */
.sync-timing {
  font-size: 12px;
  color: var(--on-surface-variant);
  padding: 8px;
  background: var(--surface-variant);
  border-radius: 8px;
  margin-top: 8px;
}

/* Loading state for API calls */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--surface);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* My Fires View */
.fire-card.completed {
  opacity: 0.8;
}

.fire-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fire-details {
  margin-top: 8px;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}

.chip-primary {
  background: var(--primary);
  color: white;
}

/* Form Styles */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--on-surface-variant);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="date"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  font-size: 16px;
  background: var(--surface);
  color: var(--on-surface);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-group input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

/* Premium Badge */
.premium-badge {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
}

/* Ad Banner — sits above the nav inside .bottom-stack (normal flow). Plain block
   with an inline icon so the promo text wraps naturally and never overflows. */
.ad-banner {
  background: var(--surface);
  border-top: 1px solid var(--outline);
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
}

.ad-banner .material-symbols-outlined {
  vertical-align: middle;
  margin-right: 6px;
  color: var(--primary);
}

.ad-banner.hidden {
  display: none;
}

/* AdSense unit fills the banner width; reserve a banner height so layout doesn't jump
   before the ad fills. Recommend a 320x50/anchored-banner ad unit in the AdSense
   dashboard so the bottom bar stays compact on a safety app. */
.ad-banner ins.adsbygoogle {
  display: block;
  width: 100%;
  min-height: 50px;
}

/* Tighter padding when the banner holds an ad (the ad brings its own whitespace). */
.ad-banner:has(ins.adsbygoogle) {
  padding: 4px;
}

.ad-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 600px;
  margin: 0 auto;
}

.ad-placeholder {
  flex: 1;
  height: 50px;
  background: var(--surface-variant);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-upgrade {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 11px;
  cursor: pointer;
  padding: 8px;
  margin-left: 8px;
}

/* Adjust main content when the ad banner is visible so nothing hides behind the
   nav + banner stack (a wrapped house promo or an AdSense banner, ~50-90px). */
body.has-ad #main-content {
  padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px));
}

/* QR Code Share Modal */
.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

.qr-code-image {
  image-rendering: pixelated;
  width: 200px;
  height: 200px;
  margin-bottom: 16px;
}

.share-url-container {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
}

.share-url-input {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--surface-variant);
  color: var(--on-surface);
  font-size: 14px;
}

.share-url-input:focus {
  outline: none;
}

.qr-helper-text {
  font-size: 13px;
  color: var(--on-surface-variant);
  text-align: center;
}

/* Notes Modal */
.notes-modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notes-header-info {
  margin-bottom: 16px;
}

.notes-header-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
}

.notes-header-info .role {
  font-size: 14px;
  color: var(--on-surface-variant);
}

.notes-textarea {
  width: 100%;
  min-height: 250px;
  padding: 12px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  background: var(--surface);
  color: var(--on-surface);
  margin-bottom: 12px;
}

.notes-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.notes-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  transition: color 0.2s;
}

.notes-status.saved {
  color: var(--success);
}

.notes-status.unsaved {
  color: var(--warning);
}

.notes-status.saving {
  color: var(--on-surface-variant);
}

.notes-actions {
  display: flex;
  gap: 8px;
}

.notes-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--outline-variant);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Error container */
:root {
  --error-container: #ffd6d6;
  --on-error-container: #410002;
}

@media (prefers-color-scheme: dark) {
  :root {
    --error-container: #93000a;
    --on-error-container: #ffd6d6;
  }
}

/* Resource type chips - color coded */
.resource-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  margin: 2px;
}

.resource-chip .resource-icon {
  font-size: 14px;
}

/* Engine - red/orange */
.resource-chip.engine {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

@media (prefers-color-scheme: dark) {
  .resource-chip.engine {
    background: #4a1c1c;
    color: #ef9a9a;
    border-color: #5c2424;
  }
}

/* Crew/Handcrew - green */
.resource-chip.crew {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

@media (prefers-color-scheme: dark) {
  .resource-chip.crew {
    background: #1b3d1e;
    color: #a5d6a7;
    border-color: #2e5231;
  }
}

/* Water Tender - blue */
.resource-chip.water {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}

@media (prefers-color-scheme: dark) {
  .resource-chip.water {
    background: #0d2744;
    color: #90caf9;
    border-color: #1a3a5c;
  }
}

/* Dozer/Heavy Equipment - brown/amber */
.resource-chip.dozer {
  background: #fff8e1;
  color: #f57f17;
  border: 1px solid #ffe082;
}

@media (prefers-color-scheme: dark) {
  .resource-chip.dozer {
    background: #3d2e00;
    color: #ffe082;
    border-color: #5c4500;
  }
}

/* Medical - high visibility red with cross */
.resource-chip.medical {
  background: #d32f2f;
  color: white;
  border: 1px solid #b71c1c;
  font-weight: 600;
}

.resource-chip.medical .resource-icon {
  font-weight: bold;
}

/* Aircraft - purple */
.resource-chip.aircraft {
  background: #f3e5f5;
  color: #7b1fa2;
  border: 1px solid #ce93d8;
}

@media (prefers-color-scheme: dark) {
  .resource-chip.aircraft {
    background: #2a1233;
    color: #ce93d8;
    border-color: #3d1a4d;
  }
}

/* Default/other resources */
.resource-chip.other {
  background: var(--surface-variant);
  color: var(--on-surface);
  border: 1px solid var(--outline);
}

/* Resource summary badges */
.resource-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.resource-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--surface-variant);
  color: var(--on-surface-variant);
}

.resource-count.engine { background: #ffcdd2; color: #c62828; }
.resource-count.crew { background: #c8e6c9; color: #2e7d32; }
.resource-count.water { background: #bbdefb; color: #1565c0; }
.resource-count.dozer { background: #ffecb3; color: #f57f17; }
.resource-count.medical { background: #d32f2f; color: white; }
.resource-count.aircraft { background: #e1bee7; color: #7b1fa2; }

@media (prefers-color-scheme: dark) {
  .resource-count.engine { background: #4a1c1c; color: #ef9a9a; }
  .resource-count.crew { background: #1b3d1e; color: #a5d6a7; }
  .resource-count.water { background: #0d2744; color: #90caf9; }
  .resource-count.dozer { background: #3d2e00; color: #ffe082; }
  .resource-count.aircraft { background: #2a1233; color: #ce93d8; }
}

/* ===== Organizations (crew sharing) ===== */
.org-card {
  background: var(--surface-variant);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.org-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.org-role-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #ede0ff;
  color: #6b3fb5;
}
.join-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.join-code {
  font-family: monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px dashed var(--on-surface-variant);
  color: var(--on-surface);
}
.member-row,
.org-share-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-variant);
  margin-bottom: 8px;
}
.org-share-row { cursor: pointer; }
.org-share-row input[type="checkbox"] { width: 20px; height: 20px; }
.fire-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: #ede0ff;
  color: #6b3fb5;
}
.org-fire-card { border-left: 4px solid #7b5cff; }

/* Segmented toggle (My Fires: All / Mine / Crew) */
.seg-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-variant);
  border-radius: 10px;
  margin-bottom: 16px;
}
.seg-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
}
.seg-btn.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

@media (prefers-color-scheme: dark) {
  .org-role-badge,
  .fire-source-badge { background: #2a1233; color: #ce93d8; }
}

/* ---- "What changed" between IAPs: banner + diff modal ---- */
.iap-change-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--primary);
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--on-surface);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.iap-change-banner:active { transform: scale(0.995); }
.iap-change-banner .material-symbols-outlined { color: var(--primary); font-size: 22px; }
.iap-change-banner-text { flex: 1; }

.diff-caption { color: var(--on-surface-variant); font-size: 13px; margin-bottom: 12px; }
.diff-section { margin-bottom: 18px; }
.diff-section h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--on-surface-variant); margin-bottom: 8px;
  border-bottom: 1px solid var(--outline); padding-bottom: 4px;
}
.diff-row { padding: 6px 0; border-bottom: 1px dashed var(--outline); }
.diff-row:last-child { border-bottom: none; }
.diff-field { font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
.diff-values { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.diff-old { color: var(--error); text-decoration: line-through; opacity: 0.85; }
.diff-new { color: var(--success); font-weight: 600; }
.diff-arrow { font-size: 16px; color: var(--on-surface-variant); }
.diff-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.diff-subhead { font-size: 13px; font-weight: 600; margin: 10px 0 2px; }
.diff-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.diff-tag.added { color: var(--success); }
.diff-tag.removed { color: var(--error); }
.diff-chip {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600;
}
.diff-chip.added { background: color-mix(in srgb, var(--success) 18%, var(--surface)); color: var(--success); }
.diff-chip.removed { background: color-mix(in srgb, var(--error) 18%, var(--surface)); color: var(--error); }

/* ---- Live "Where am I" map card ---- */
/* isolate: contain the map's internal z-indexes (leaflet controls reach z1000)
   so the layer switcher can sit above the readout/elevation panel siblings,
   without those high z-indexes leaking over other cards on the page. */
.map-card-body { position: relative; isolation: isolate; }
/* Mount point for the persistent map; keeps the card's shape even while the map
   element is temporarily re-parented into the fullscreen view. */
.dash-map-slot { min-height: 240px; position: relative; border-radius: 10px; overflow: hidden; background: var(--surface-variant); }
.dash-map {
  height: 240px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-variant);
  /* No z-index here: a stacking context would trap the leaflet layer switcher
     (z1000) below the readout/elev-panel siblings. The parent .map-card-body /
     .fs-map-wrap isolate instead. position:relative still anchors the crosshair. */
  position: relative;  /* positioning context for the center crosshair overlay */
}
.dash-map.fullscreen-map { height: 100%; border-radius: 0; }
.map-readout {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 500;
  background: rgba(0,0,0,0.68);
  color: #fff;
  font-size: 11px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
  border-radius: 8px;
  pointer-events: none;
  text-align: right;
}
.map-readout .rd-label { opacity: 0.7; }
.map-readout .rd-strong { font-weight: 700; font-size: 13px; }
/* When panned off the dot, lift the coord box above the Elevation Profile panel. */
.map-readout.panned { bottom: 116px; }

/* CalTopo-style Elevation Profile panel across the bottom of the map. */
.map-elev-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  background: rgba(18,20,18,0.9);
  color: #fff;
  padding: 6px 10px 5px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* (The loading/error skeleton uses an empty div.ep-chart — .ep-chart below
   sizes it exactly like the rendered svg, so the panel height never jumps and
   the coord box/controls anchored 116px up never float over a gap.) */
/* Fullscreen sits at the physical screen bottom — pad the panel past the home
   indicator / rounded corners, and lift everything anchored above it to match. */
#dash-map-fullscreen .map-elev-panel { padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); }
#dash-map-fullscreen .map-readout { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
#dash-map-fullscreen .map-readout.panned { bottom: calc(116px + env(safe-area-inset-bottom, 0px)); }
.ep-head { display: flex; justify-content: space-between; align-items: baseline; }
.ep-title { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.ep-pt { font-size: 12px; font-weight: 600; color: #cfe6ff; }
.ep-stats { font-size: 11px; color: #c8c8c8; margin: 1px 0 3px; }
.ep-gain { color: #66bb6a; font-weight: 600; }
.ep-loss { color: #ef5350; font-weight: 600; }
/* Premium-locked elevation panel: a blurred decorative chart under a tap-to-upgrade
   overlay — you can see there's a profile, but no real numbers. */
.ep-lock-tag { font-size: 11px; font-weight: 700; color: var(--primary, #ffd54f); }
/* The panel itself is pointer-events:none (so map gestures pass through); re-enable
   it on the locked area so the tap-to-upgrade actually registers. */
.ep-locked { position: relative; height: 56px; margin-top: 4px; cursor: pointer; pointer-events: auto; }
.ep-chart-locked {
  width: 100%; height: 56px; filter: blur(2.5px); opacity: 0.5;
  background: rgba(255,255,255,0.03);
  border-left: 1px solid rgba(255,255,255,0.25); border-bottom: 1px solid rgba(255,255,255,0.25);
}
.ep-locked-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; text-align: center;
  padding: 0 10px; color: #fff; font-size: 11px; font-weight: 600;
  background: rgba(10,12,10,0.45);
}
.ep-locked-overlay .material-symbols-outlined { font-size: 20px; }
.ep-chartwrap { display: flex; align-items: stretch; height: 56px; gap: 4px; }
.ep-yaxis {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 36px; text-align: right; font-size: 9px; color: rgba(255,255,255,0.6);
}
.ep-chart {
  flex: 1; height: 56px;
  background: rgba(255,255,255,0.03);
  border-left: 1px solid rgba(255,255,255,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.ep-xaxis {
  display: flex; justify-content: space-between;
  margin-left: 40px; margin-top: 1px;
  font-size: 9px; color: rgba(255,255,255,0.6);
}
/* Fullscreen: raise the bottom-left controls above the panel when it's shown. */
#dash-map-fullscreen.showing-elev .map-controls { bottom: calc(116px + env(safe-area-inset-bottom, 0px)) !important; }
.map-geo-status {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 500;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  max-width: 70%;
}
.map-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.map-controls select {
  flex: 1;
  min-width: 140px;
  padding: 6px 8px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--on-surface);
  font-size: 13px;
}
.map-zoom-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--outline); border-radius: 8px;
  background: var(--surface); color: var(--on-surface); cursor: pointer;
}
.map-zoom-btn:active { background: var(--surface-variant); }
.map-gps-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
/* GPS "you are here" marker: a 30×30 box (anchored centre) holding the dot plus a
   heading arrow that pivots around the dot centre. */
.map-gps-wrap { position: relative; width: 40px; height: 40px; }
.map-gps-wrap .map-gps-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.map-gps-arrow {
  position: absolute; left: 50%; top: 50%; display: none;
  width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 20px solid #1a73e8;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.9));
  /* Pivot at the arrow's base (dot centre); JS appends rotate(<heading>deg). */
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%);
}
/* Elevation waypoint control (top-right, Leaflet bar): "+" arms tap-to-add,
   reset clears. Active "+" = armed. */
.transect-ctl a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--on-surface); background: var(--surface);
}
.transect-ctl a .material-symbols-outlined { font-size: 20px; }
.transect-ctl a.active { background: var(--primary); color: #fff; }
.transect-ctl a.transect-reset { color: var(--on-surface-variant); }
/* Numbered elevation-waypoint markers. */
.map-wp-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: #e53935; border: 2px solid #fff; box-shadow: 0 0 4px rgba(0,0,0,0.5);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
}
/* Center crosshair, shown while panned off the GPS dot (see updateMapReadout). */
.map-crosshair {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; z-index: 500; pointer-events: none;
}
.map-crosshair::before, .map-crosshair::after {
  content: ''; position: absolute; background: rgba(0,0,0,0.65);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.8);
}
.map-crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.map-crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }

/* "Zoom in to load" pill for the perimeter/hotspot overlays (see setOverlayHint). */
.map-overlay-hint {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  z-index: 500; pointer-events: none; max-width: 80%;
  padding: 5px 10px; border-radius: 14px;
  background: rgba(0,0,0,0.72); color: #fff;
  font-size: 12px; line-height: 1.2; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Map annotation toolbar (owner/admin draw tools). */
.map-anno-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 8px; padding: 6px;
  background: var(--surface-variant); border-radius: 8px;
}
.map-anno-toolbar-fs .map-anno-toolbar { margin-top: 0; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.map-anno-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--outline); border-radius: 8px;
  background: var(--surface); color: var(--on-surface); cursor: pointer;
}
.map-anno-btn .material-symbols-outlined { font-size: 18px; }
.map-anno-btn.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.map-anno-btn:disabled { opacity: 0.4; cursor: default; }
.map-anno-delete { margin-left: auto; }
.map-anno-colors { display: inline-flex; gap: 4px; }
.map-anno-swatch {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--outline); cursor: pointer; padding: 0;
}
.map-anno-swatch.active { box-shadow: 0 0 0 2px var(--primary); }
/* Annotation pin marker + its permanent label. */
.map-anno-pin {
  width: 16px; height: 16px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.map-anno-label {
  background: rgba(0,0,0,0.72); color: #fff; border: none; font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 6px; box-shadow: none;
}
.map-anno-label::before { display: none; }

/* "Checking for updates…" chip shown in the header while a background refresh runs. */
.checking-chip {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  font-size: 10px; font-weight: 600;
  background: rgba(0,0,0,0.18); padding: 1px 8px 1px 6px; border-radius: 8px;
}
.checking-chip .material-symbols-outlined {
  font-size: 13px; animation: spin 1s linear infinite;
}
#dash-map-fullscreen {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; background: var(--background);
}
#dash-map-fullscreen .map-viewer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--surface); color: var(--on-surface);
  /* The overlay covers the whole screen incl. the status-bar/notch area. */
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
#dash-map-fullscreen .map-viewer-header h3 { margin: 0; font-size: 16px; }
#dash-map-fullscreen .fs-map-wrap { flex: 1; position: relative; isolation: isolate; }

/* --- 3D terrain view (MapLibre) --- */
/* z-index 800 puts the 3D canvas ABOVE every Leaflet pane (tiles z200 … popups
   z700), which share this .fs-map-wrap stacking context (isolation:isolate). This
   is the durable fix for "flat map paints over 3D": even if the slot-hide below
   fails to apply for a frame, MapLibre still wins the z-order. Hiding the slot
   (below) then just spares the work of painting/hit-testing the dead 2D map. */
#maplibre-3d { position: absolute; inset: 0; display: none; z-index: 800; background: #0b0e0b; }
.map3d-toggle { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--on-surface); }
.map3d-toggle .material-symbols-outlined { font-size: 20px; }
.map3d-toggle.active { color: var(--primary); }
/* In 3D, hide the whole Leaflet map + its chrome. Hiding the slot is essential:
   .dash-map is no longer its own stacking context (that was removed to fix the
   layer-switcher z-order), so its tile panes (z200-400) would otherwise leak
   ABOVE #maplibre-3d (z10) and paint the flat 2D map on top of the 3D one. The
   Leaflet map stays alive (display:none, not destroyed) — invalidateSize on exit. */
#dash-map-fullscreen.is-3d #dash-map-fs-slot,
#dash-map-fullscreen.is-3d .map-geo-status,
#dash-map-fullscreen.is-3d .map-controls,
#dash-map-fullscreen.is-3d .map-readout,
#dash-map-fullscreen.is-3d .map-elev-panel,
#dash-map-fullscreen.is-3d .map-anno-toolbar-fs { display: none !important; }
.map3d-controls {
  display: none;
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 810; gap: 6px; max-width: calc(100% - 16px);  /* above #maplibre-3d (z800) */
  padding: 8px; border-radius: 12px;
  background: rgba(20,22,20,0.86); box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
#dash-map-fullscreen.is-3d .map3d-controls { display: flex; flex-direction: column; }
.m3d-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.m3d-sliders { gap: 12px; }
.m3d-sliders label { display: flex; align-items: center; gap: 5px; color: #ddd; font-size: 11px; }
.m3d-sliders input[type=range] { width: 96px; }

/* Compact hotspot time-window picker (a leaflet control under the layer
   switcher, top-right). Shown only while the Active Hotspots layer is on. */
.hotspot-win { background: var(--surface); }
.hotspot-win select {
  border: 0; background: var(--surface); color: var(--on-surface);
  font-size: 12px; padding: 5px 6px; border-radius: 4px; cursor: pointer;
}