/* =============================================================================
 * Mapping Major Bushfires in Australia — Himawari-9
 * h9_bushfire_v2.css  (v1 kept for reference)
 *
 * Layout and component styles follow the reference project (01_reference1):
 * search pill, collapsible main panel, shaded section cards, status bar.
 * The accent moves from the reference's blue to an ember palette for the
 * bushfire theme; map data colours (overlay lines) are set in the config.
 * ========================================================================== */

:root {
  --accent:        #e8590c;   /* ember orange */
  --accent-dark:   #a61e1e;   /* deep fire red */
  --accent-hover:  #d24d06;
  --accent-soft:   rgba(232, 89, 12, .10);
  --title-grad:    linear-gradient(135deg, #f76b15 0%, #d9480f 48%, #a61e1e 100%);
  --section-bg:    #fbf5f1;   /* light warm shading for panel sections */
  --section-line:  #f1e3d9;
  --ink:           #202124;
  --ink-soft:      #5f6368;
  --line:          #dadce0;
  --surface:       #ffffff;
  --danger:        #c5221f;
  --warn-bg:       #fff4e0;
  --warn-ink:      #7a4b00;
  --radius:        10px;
  --radius-pill:   24px;
  --shadow-1:      0 1px 3px rgba(60, 64, 67, .25), 0 2px 8px rgba(60, 64, 67, .12);
  --shadow-2:      0 4px 16px rgba(60, 64, 67, .28);
  --font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --panel-w:       389px;   /* +20 % over v1's 324px */
}

html, body, #map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: var(--font);
  overflow: hidden;
}

body { background: #e8e6e1; color: var(--ink); }

.is-hidden { display: none !important; }

button { font-family: var(--font); }

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

/* Leaflet containers inherit the app font */
.leaflet-container { font-family: var(--font); background: #e8e6e1; }

/* Broken Himawari tiles (outside coverage or missing) stay invisible */
/* Imagery tiles are <div>s holding one <img>; a fallback from a coarser zoom
   shows an enlarged part of the parent tile, clipped to the tile. */
.h8-frame .leaflet-tile { overflow: hidden; }
.h8-frame .leaflet-tile img {
  position: absolute;
  max-width: none !important;
  max-height: none !important;
  image-rendering: auto;
}

/* Canvas used for GeoJSON overlays never captures the pointer: clicks are
 * resolved at map level so overlapping layers can be listed together. */
.leaflet-overlays-pane canvas { pointer-events: none !important; }

/* =============================================================================
 * SEARCH BAR — Google-Maps-style pill:  [ input  ✕ │ 🔍 ]   (from reference)
 * ========================================================================== */

#panel_search {
  position: absolute;
  top: 12px;
  left: 60px;
  z-index: 1001;
  width: min(460px, calc(100vw - var(--panel-w) - 100px));
}

.searchbar {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  padding: 0 4px 0 16px;
  transition: box-shadow .15s ease;
}
.searchbar:focus-within { box-shadow: var(--shadow-2); }

.searchbox {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  text-overflow: ellipsis;
}
.searchbox::placeholder { color: var(--ink-soft); }

.searchbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: background .12s ease, color .12s ease;
}
.searchbar-btn:hover:not(:disabled) { background: rgba(60, 64, 67, .08); color: var(--ink); }
.searchbar-btn .material-icons { font-size: 22px; }

.searchbar-clear { visibility: hidden; opacity: 0; transition: opacity .12s ease; }
.searchbar-clear.is-visible { visibility: visible; opacity: 1; }

.searchbar-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
  margin: 0 4px;
  flex-shrink: 0;
}

.searchbar-go { color: var(--accent); }
.searchbar-go:disabled { color: #b9bdc4; cursor: default; }
.searchbar-go:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }

/* Google Places autocomplete dropdown — aligned with the pill */
.pac-container {
  border-radius: 12px;
  margin-top: 6px;
  border: none;
  box-shadow: var(--shadow-2);
  font-family: var(--font);
}
.pac-item { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.pac-item:hover { background: #f1f3f4; }
.pac-item-query { font-size: 14px; }

/* =============================================================================
 * TOP-LEFT: zoom (Leaflet) + imagery opacity (vertical) below it
 * ========================================================================== */

.leaflet-top.leaflet-left .leaflet-control { margin-left: 12px; }
.leaflet-top.leaflet-left .leaflet-control-zoom { margin-top: 12px; }

.leaflet-bar {
  border: none !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
.leaflet-bar a {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  color: var(--ink) !important;
  font-size: 20px !important;
}
.leaflet-bar a:hover { background: #f1f3f4; }

.opacity-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 34px;
  padding: 8px 0 7px;
  background: var(--surface);
}
.opacity-control .material-icons { font-size: 18px; color: var(--accent); }
.opacity-control .opacity-range {
  writing-mode: vertical-lr;       /* vertical slider: top = 100 % */
  direction: rtl;
  width: 18px;
  height: 118px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.opacity-control .opacity-value {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* =============================================================================
 * RIGHT DOCK: main panel + status bar
 * ========================================================================== */

#right-dock {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-height: calc(100vh - 24px - 46px);   /* the status bar sits below, at the page bottom */
  pointer-events: none;            /* only the children take pointer events */
}
#right-dock > * { pointer-events: auto; }

#panel-main {
  position: relative;
  width: var(--panel-w);
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  overflow: hidden;
}

#panel-main-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#toggle-panel {
  position: absolute;
  right: 6px;
  top: 10px;
  z-index: 2;
  border: none;
  background: transparent;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
#toggle-panel:hover { background: rgba(255, 255, 255, .22); }

/* Collapsed: a single themed round button (bushfire mark) */
#panel-main.collapsed {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--title-grad);
  box-shadow: var(--shadow-1);
  overflow: visible;
}
#panel-main.collapsed #panel-main-content { display: none; }
#panel-main.collapsed #toggle-panel {
  position: static;
  width: 48px;
  height: 48px;
}
#panel-main.collapsed #toggle-panel:hover { background: rgba(255, 255, 255, .16); }
#toggle-panel .brand-mini { display: none; }
#panel-main.collapsed #toggle-panel #toggle-icon { display: none; }
#panel-main.collapsed #toggle-panel .brand-mini { display: block; }

/* Themed title bar: bushfire mark + two-line title */
#mapTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 34px 12px 12px;
  background: var(--title-grad);
  color: #fff;
  flex-shrink: 0;
}
.mapTitle-icon { flex-shrink: 0; width: 30px; height: 30px; }
#mapTitle h1 { margin: 0; font-weight: inherit; }
.mapTitle-main {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1.3;
  white-space: nowrap;              /* the title is exactly two lines */
}
.mapTitle-sub {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  color: rgba(255, 255, 255, .88);
  margin-top: 2px;
}

#panel-sections {
  padding: 12px 12px 4px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
}

/* Each section sits on its own lightly shaded card */
.panel-section {
  margin-bottom: 10px;
  background: var(--section-bg);
  border: 1px solid var(--section-line);
  border-radius: 8px;
  padding: 8px 10px 10px;
}

.panel-section-head-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.panel-section-head-row .panel-section-head { flex: 1; }
.section-toggle .section-chevron { color: var(--ink-soft); }

.panel-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 2px 2px;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
}

.panel-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink-soft);
}
.panel-label .material-icons {
  font-size: 15px;
  color: #fff;
  background: var(--title-grad);
  border-radius: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.section-chevron {
  font-size: 18px;
  color: var(--ink-soft);
  transition: transform .15s ease;
}
.panel-section.is-collapsed .section-chevron { transform: rotate(180deg); }
.panel-section.is-collapsed .panel-section-body { display: none; }

.panel-section-body { padding-top: 8px; }

.head-actions { display: inline-flex; align-items: center; gap: 0; }

.mini-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.mini-icon-btn:hover { background: var(--accent-soft); color: var(--accent-dark); }
.mini-icon-btn .material-icons { font-size: 19px; }

.basemap-dropdown {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
.basemap-dropdown:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Overlay checkboxes (generated from config) */
.overlay-map-options { display: flex; flex-direction: column; gap: 1px; }

.overlay-map-option {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  line-height: 1.35;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.overlay-map-option:hover { background: #f5e8df; }

.overlay-map-option input[type="checkbox"],
.check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.overlay-name { flex: 1; min-width: 0; }

/* Line swatch in the layer's own colour (white GDR gets a dark backing) */
.overlay-swatch {
  width: 18px;
  height: 0;
  border-top: 3px solid currentColor;
  border-radius: 2px;
  flex-shrink: 0;
}
.overlay-swatch.is-light { box-shadow: 0 0 0 1.5px #6b6b6b; }
/* Point layers: a dot with a white rim, as drawn on the map */
.overlay-swatch.is-point {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border: none;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #9aa0a6;
}
.ov-popup-layer .overlay-swatch.is-point { width: 7px; height: 7px; margin: 0 3px; }

/* Capital cities (drawn with the Cities overlay): larger dot and label */
.capital-marker { pointer-events: none; }
.capital-dot {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #111;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.capital-label {
  position: absolute;
  left: 9px;
  top: -11px;
  white-space: nowrap;
  font: 700 15px/1.2 "Segoe UI", Roboto, Arial, sans-serif;
  color: #000;
  /* white halo, as for the other city names */
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke fill;
  text-shadow: 0 0 2px #fff;
}

.overlay-state { font-size: 11px; color: var(--ink-soft); flex-shrink: 0; }
.overlay-state.is-error { color: var(--danger); }
.overlay-state .material-icons { font-size: 15px; vertical-align: -3px; }

/* Analysis: mode switch */
.field-row { display: flex; align-items: center; gap: 10px; }

.mode-row { padding: 2px 2px 0; }
.mode-label { font-size: 13px; color: var(--ink-soft); transition: color .15s ease; }
.mode-label.is-active { color: var(--ink); font-weight: 600; }
.mode-row .mini-icon-btn { flex-shrink: 0; margin: -4px 0 -4px auto; }   /* safety info, right end */

.switch {
  position: relative;
  width: 40px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 11px;
  background: #b9bdc4;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s ease;
}
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: transform .18s ease;
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(18px); }

.field-note {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 4px 2px 0;
  line-height: 1.4;
}
.field-note:empty { display: none; }

.field-block { margin-top: 12px; }
.field-block-first { margin-top: 0; }

.field-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--ink);
  margin: 0 2px 4px;
}
.field-value { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.speed-row { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.speed-row .material-icons { font-size: 17px; color: var(--ink-soft); }
.speed-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Analysis: RGB composite chips */
.rgb-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 14px 2px 6px;
}
.rgb-group-label:first-child { margin-top: 0; }
.rgb-group-label .material-icons { font-size: 16px; width: 16px; color: var(--accent); }

.chip-grid { display: flex; flex-wrap: wrap; gap: 5px; }

/* Composite groups: chips start under the heading's first character
   (2 px margin + 16 px icon + 6 px gap), with a faint guide line under
   the icon tying each group to its heading. */
.rgb-group-label + .chip-grid {
  position: relative;
  margin-left: 24px;
}
.rgb-group-label + .chip-grid::before {
  content: "";
  position: absolute;
  left: -15px;                      /* under the icon's centre (x = 10 px) */
  top: -3px;
  bottom: 3px;
  width: 2px;
  border-radius: 1px;
  background: #ecd3c2;
}

.chip { position: relative; cursor: pointer; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.chip span {
  display: inline-block;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid #e3d3c8;
  border-radius: 14px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chip:hover span { border-color: var(--accent); }
.chip input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Download */
.stamp-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  background: var(--surface);
  border: 1px solid #e3d3c8;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stamp-chip .material-icons { font-size: 16px; color: var(--accent); }

.dl-heading {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.35;
  margin: 10px 2px 4px;
}

.dl-list { display: flex; flex-direction: column; gap: 1px; }

.dl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 12.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.dl-item:hover:not(:disabled) { background: #f5e8df; }
.dl-item:disabled { cursor: default; color: #9aa0a6; }
.dl-item .material-icons { font-size: 18px; color: var(--accent); flex-shrink: 0; }
.dl-item:disabled .material-icons { color: #c4c7cb; }
.dl-item.is-busy .material-icons { animation: pulse 1s ease-in-out infinite; }
.dl-name { flex: 1; min-width: 0; line-height: 1.3; }
.dl-ext {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 4px;
  flex-shrink: 0;
}

@keyframes pulse { 50% { opacity: .35; } }

/* Analysis: "Display the map" (hotspot features for the selected time) */
.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  line-height: 1.35;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.check-row:hover { background: #f5e8df; }
.check-row .check-sub { color: var(--ink-soft); font-size: 12px; }
.check-row.is-disabled { opacity: .55; cursor: default; }
.check-row.is-disabled:hover { background: transparent; }

.hotspot-status {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 0 6px 2px 31px;
}
.hotspot-status:empty { display: none; }

/* Nearby-address dots: distance legend (0 km warm -> 12 km cold) */
.address-legend { margin: 2px 6px 4px 31px; }
.address-legend[hidden] { display: none; }
.address-legend-title { font-size: 11px; color: var(--ink-soft); margin-bottom: 3px; }
.address-legend-bar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; }
.address-legend-bar span { flex: 1; }
.address-legend-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* Download: heading with an info button on the right */
.dl-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dl-heading-row .mini-icon-btn { flex-shrink: 0; margin: -4px 0; }

/* Info dialogs: attribution block and external-link icon */
.tooltip-attrib b {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink);
  margin-bottom: 4px;
}
.tooltip-attrib p { margin: 0; }
.tooltip-msg { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.tooltip a { color: var(--accent); text-decoration: none; }
.tooltip a:hover { text-decoration: underline; }
.ext-link { font-size: 14px; vertical-align: -2px; }

/* Nearby-address popup */
.addr-popup { font-size: 12.5px; line-height: 1.45; }

/* Demo mode: the Download section shows only its note */
.panel-section.is-locked .panel-section-body > :not(#download-note) { display: none; }
.panel-section.is-locked #download-note { margin-top: 0; }

/* Hotspot balloon, as in the original KML popup */
.hs-popup { font-size: 12.5px; line-height: 1.45; }

/* Hotspot / nearby-exposure popups: field table with readable date-times */
.attr-popup-title { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.attr-popup-sub { font-weight: 400; color: var(--ink-soft); font-size: 12px; }
.attr-table { border-collapse: collapse; width: 100%; }
.attr-table th, .attr-table td {
  text-align: left;
  vertical-align: top;
  padding: 2px 0;
  font-size: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.attr-table tr:last-child th, .attr-table tr:last-child td { border-bottom: none; }
.attr-table th { font-weight: 500; color: var(--ink-soft); padding-right: 12px; white-space: nowrap; }
.attr-table td { word-break: break-word; font-variant-numeric: tabular-nums; }
.dt { white-space: nowrap; }
/* Brightness-temperature marker and footnote */
.attr-fn { font-size: 9px; margin-left: 1px; color: var(--accent); font-weight: 700; }
.attr-table th span[title] { cursor: help; }
.attr-note {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 290px;
}
.dt-time { font-weight: 600; }
.dt-zone {
  padding: 0 5px;
  border-radius: 8px;
  background: #eef1f4;
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .3px;
}
.hotspot-status.is-error { color: var(--danger); }

/* =============================================================================
 * STATUS BAR — live cursor Lat / Lon / Zoom, directly below the main panel
 * ========================================================================== */

#status-bar {
  position: fixed;                 /* bottom of the page, centred on the main panel */
  bottom: 14px;
  right: calc(12px + var(--panel-w) / 2);
  transform: translateX(50%);
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(3px);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  padding: 6px 14px;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  pointer-events: none !important;   /* never block map interaction */
}
#status-bar .sb-label { color: var(--ink-soft); margin-right: 4px; }
#status-bar .sb-value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  display: inline-block;
  min-width: 70px;
}
#status-bar .sb-zoom .sb-value { min-width: 16px; }

/* =============================================================================
 * OVERLAY INFO TOOLTIP (left of the panel)
 * ========================================================================== */

.tooltip {
  display: none;
  position: absolute;
  top: 150px;
  right: calc(var(--panel-w) + 26px);
  width: min(330px, calc(100vw - var(--panel-w) - 60px));
  background: var(--surface);
  box-shadow: var(--shadow-2);
  border-radius: 12px;
  padding: 14px 16px;
  z-index: 1003;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.tooltip.show { display: block; animation: fadeIn .18s ease-in-out; }

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

.tooltip h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 14.5px;
}
.tooltip h4 .material-icons { font-size: 19px; color: var(--accent); }
.tooltip ul { list-style: none; margin: 0; padding: 0; }
.tooltip li {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  padding-left: 28px;
}
.tooltip li > .material-icons {
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 18px;
  color: var(--accent);
}
.tooltip li > span:last-child { color: var(--ink-soft); font-size: 12.5px; }
.tooltip-attrib {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* =============================================================================
 * TIMELINE — bottom-centre, the main time control
 * ========================================================================== */

#timeline {
  --thumb: 18px;
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 1001;
  width: min(640px, calc(100vw - 2 * (var(--panel-w) + 36px)));   /* fallback; JS positions it */
  box-sizing: border-box;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  padding: 10px 16px 8px;
  user-select: none;
}

.tl-top { display: flex; align-items: center; gap: 4px; }

.tl-play {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--title-grad);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 2px;
  box-shadow: 0 2px 6px rgba(166, 30, 30, .35);
  transition: transform .1s ease, box-shadow .15s ease;
}
.tl-play:hover { box-shadow: 0 3px 10px rgba(166, 30, 30, .45); }
.tl-play:active { transform: scale(.95); }
.tl-play .material-icons { font-size: 28px; }

.tl-step {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.tl-step:hover:not(:disabled) { background: rgba(60, 64, 67, .08); }
.tl-step:disabled { color: #c4c7cb; cursor: default; }
.tl-step .material-icons { font-size: 24px; }

.tl-stamp { flex: 1; min-width: 0; margin-left: 6px; }
.tl-stamp-main {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-stamp-sub {
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.tl-dot { margin: 0 3px; }

.tl-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  background: #eceff1;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.tl-badge.is-live {
  background: #fde7e7;
  color: var(--danger);
}
.tl-badge { display: inline-flex; align-items: center; gap: 5px; border: none; font-family: var(--font); line-height: 1.4; }
button.tl-badge:disabled { cursor: default; }
button.tl-badge:not(:disabled) { cursor: pointer; }
button.tl-badge:not(:disabled):hover { filter: brightness(.96); }
.tl-badge .tl-badge-info { font-size: 13px; margin-left: -1px; opacity: .8; }
.tl-badge[aria-expanded="true"] { box-shadow: 0 0 0 2px rgba(197, 34, 31, .35); }

/* Live badge: a ring that fills over each 10-minute cycle around a pulsing
   dot; amber when the newest image is late. */
.tl-ring { width: 13px; height: 13px; flex-shrink: 0; }
.tl-ring-track { fill: none; stroke: rgba(197, 34, 31, .22); stroke-width: 2.2; }
.tl-ring-fill {
  fill: none;
  stroke: var(--danger);
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.tl-ring-dot { fill: var(--danger); animation: pulse 1.6s ease-in-out infinite; }
.tl-badge.is-delayed { background: #fff1d6; color: #9a5b00; }
.tl-badge.is-delayed .tl-ring-track { stroke: rgba(154, 91, 0, .25); }
.tl-badge.is-delayed .tl-ring-fill, .tl-badge.is-delayed .tl-ring-dot { stroke: #c27400; fill: none; }
.tl-badge.is-delayed .tl-ring-dot { fill: #c27400; }

/* "Next image in 6 min" in the timeline's sub-line (Live mode) */
.tl-fresh:empty { display: none; }
.tl-fresh::before { content: "\00b7"; margin: 0 3px; }
.tl-fresh { color: var(--danger); font-weight: 600; }
.tl-fresh.is-delayed { color: #9a5b00; }

/* "About live imagery" panel (opened from the LIVE badge) */
.tl-popover-wide { width: 330px; }
.tl-live-points { list-style: none; margin: 0; padding: 0; }
.tl-live-points li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.tl-live-points .material-icons { font-size: 17px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.tl-live-status {
  font-size: 11.5px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 7px;
  font-variant-numeric: tabular-nums;
}
.tl-live-status:empty { display: none; }

.tl-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(232, 89, 12, .25);
  border-top-color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0 4px;
  visibility: hidden;
  animation: spin .8s linear infinite;
}
.tl-spinner.is-active { visibility: visible; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Slider: native range on top of a custom track, ticks and fill */
.tl-slider {
  position: relative;
  height: 26px;
  margin-top: 6px;
}
.tl-track {
  position: absolute;
  left: calc(var(--thumb) / 2);
  right: calc(var(--thumb) / 2);
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: #e4e0dc;
  overflow: hidden;
}
.tl-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f9a03f, var(--accent) 60%, var(--accent-dark));
  border-radius: 3px;
}
.tl-ticks {
  position: absolute;
  left: calc(var(--thumb) / 2);
  right: calc(var(--thumb) / 2);
  top: 50%;
  height: 0;
}
.tl-tick {
  position: absolute;
  top: 5px;
  width: 1px;
  height: 5px;
  margin-left: -.5px;
  background: #a9a39e;
}
.tl-tick.is-hour { height: 9px; background: #6d6560; }

#tl-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
#tl-range:focus { outline: none; }
#tl-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
#tl-range::-moz-range-track { height: 100%; background: transparent; }
#tl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: 4px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: transform .1s ease;
}
#tl-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
#tl-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
#tl-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(232, 89, 12, .3); }
#tl-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(232, 89, 12, .3); }

.tl-labels {
  position: relative;
  height: 14px;
  margin: 0 calc(var(--thumb) / 2);
}
.tl-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tl-label:first-child { transform: none; }
.tl-label:last-child { transform: translateX(-100%); }

.tl-step.is-open { color: var(--accent); background: var(--accent-soft); }

.tl-popover {
  position: absolute;
  right: 10px;
  bottom: calc(100% + 8px);
  width: 250px;
  padding: 10px 12px 12px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  animation: fadeIn .15s ease-in-out;
}
.tl-popover[hidden] { display: none; }
.tl-popover-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.tl-popover-title .material-icons { font-size: 16px; color: var(--accent); }

.tl-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 4px 8px;
  font-size: 11.5px;
  color: var(--warn-ink);
  background: var(--warn-bg);
  border-radius: 6px;
}
.tl-hint:empty { display: none; }
.tl-hint .material-icons { font-size: 15px; }

/* =============================================================================
 * BOTTOM-LEFT: reset view · scale bar · attribution (two lines)
 * ========================================================================== */

.leaflet-bottom.leaflet-left .leaflet-control { margin-left: 12px; }
/* Opened attributions stay above the timeline where the two meet */
.leaflet-bottom.leaflet-left { z-index: 1002; }

.reset-control a {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.reset-control .material-icons { font-size: 21px; line-height: 34px; }

.leaflet-control-scale { margin-bottom: 6px !important; }
.leaflet-control-scale-line {
  border-color: #3c4043;
  background: rgba(255, 255, 255, .8);
  font-size: 10.5px;
  color: var(--ink);
}

.attrib-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px !important;
}
.attrib-toggle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.attrib-toggle:hover { background: #f1f3f4; color: var(--ink); }
.attrib-toggle.is-open { color: var(--accent); }
.attrib-toggle .material-icons { font-size: 19px; }

.app-attribution[hidden] { display: none; }
.app-attribution {
  padding: 4px 8px;
  background: rgba(255, 255, 255, .85);
  border-radius: 6px;
  font-size: 9.5px;
  line-height: 1.45;
  color: #3c4043;
  text-align: left;
  max-width: calc(100vw - 70px);
  box-shadow: var(--shadow-1);
}
.app-attribution div { white-space: nowrap; text-align: left; }
.app-attribution a { color: #3c4043; text-decoration: none; }
.app-attribution a:hover { color: var(--accent); text-decoration: underline; }
.app-attribution .sep { color: #9aa0a6; margin: 0 2px; }

/* =============================================================================
 * POPUPS
 * ========================================================================== */

.leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: var(--shadow-2);
}
.leaflet-popup-content { margin: 12px 14px; font-size: 12.5px; line-height: 1.4; }

.ov-popup { max-width: 290px; max-height: 320px; overflow-y: auto; }
.ov-popup-item + .ov-popup-item {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.ov-popup-layer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink-soft);
}
.ov-popup-layer .overlay-swatch { width: 14px; }
.ov-popup-title { font-size: 14px; font-weight: 600; margin: 2px 0 4px; }
.ov-popup table { border-collapse: collapse; width: 100%; }
.ov-popup th, .ov-popup td {
  text-align: left;
  vertical-align: top;
  padding: 1px 0;
  font-size: 12px;
}
.ov-popup th { font-weight: 500; color: var(--ink-soft); padding-right: 10px; white-space: nowrap; }
.ov-popup td { word-break: break-word; }
.ov-popup-empty { color: var(--ink-soft); font-style: italic; }

/* =============================================================================
 * TOAST
 * ========================================================================== */

#toast {
  position: absolute;
  top: 68px;
  left: 50%;
  transform: translate(-50%, -8px);
  z-index: 1100;
  max-width: min(460px, calc(100vw - 40px));
  padding: 9px 16px;
  border-radius: 8px;
  background: #323232;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .tooltip.show, .tl-ring-dot, .dl-item.is-busy .material-icons { animation: none; }
  #toast, .switch, .switch-knob, .section-chevron { transition: none; }
}

/* =============================================================================
 * SMALLER SCREENS
 * ========================================================================== */

/* Mid-size: the timeline no longer fits between the corner stacks, so it
 * rises above the bottom-left stack and the panel keeps clear of it. */
@media (max-width: 720px) {
  :root { --panel-w: 260px; }
  #panel_search { left: 56px; width: calc(100vw - 124px); }
  #right-dock { top: 64px; right: 8px; max-height: calc(100vh - 250px); }
  #timeline { left: 8px; right: 8px; width: auto; transform: none; bottom: 96px; padding: 8px 10px 6px; }
  #status-bar { right: 50%; }
  .tl-stamp-main { font-size: 14px; }
  #tl-latest { display: none; }
  .tooltip { right: 8px; left: 8px; width: auto; top: 120px; }
  .app-attribution div { white-space: normal; }
  .mapTitle-main, .mapTitle-sub { white-space: normal; }
}