/*
  Live Map chrome. Every value is a design-tokens.json custom property from
  theme.css (web.map carries the map-specific ones); nothing here is a literal
  colour. Layout follows iOS LiveMapView: pill top-left, Layers top-right,
  chips + locate bottom-left, status capsule bottom-centre.
*/

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--type-family-body);
  font-size: var(--type-body);
}

[hidden] { display: none !important; }

#map { position: fixed; inset: 0; z-index: 1; background: var(--color-surface-sunken); }

.leaflet-container { font-family: var(--type-family-body); }
.leaflet-control-attribution { font-size: var(--type-caption); }
.leaflet-bottom.leaflet-right { margin-bottom: var(--map-dock-clearance, 0px); }

button { font: inherit; cursor: pointer; }

/* The portal's ring (accessibility.focusRing), for the keyboard only. Moving
   focus from script after a click (Layers -> Done, Done -> Layers) still
   matches :focus-visible in Chrome, so while the last input was a pointer
   (html[data-input="pointer"], set by terra-map.js) no ring is drawn. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
:root[data-input="pointer"] :focus-visible { outline: none; box-shadow: none; }

/* ── Top row ── */

.tm-top {
  position: fixed;
  z-index: 1000;
  top: calc(var(--space-sm) + env(safe-area-inset-top));
  left: var(--space-md);
  right: var(--space-md);
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  pointer-events: none;
}
.tm-top > * { pointer-events: auto; }
.tm-spacer { flex: 1 1 auto; min-width: var(--space-xl); pointer-events: none; }

.tm-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  max-width: 100%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--map-pill-background);
  color: var(--glass-control-icon);
  font-weight: var(--type-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tm-pill-text { overflow: hidden; text-overflow: ellipsis; }
.tm-weather-glyph { color: var(--map-star-tint); }

.tm-glyph { display: inline-flex; width: var(--glass-control-icon-size); height: var(--glass-control-icon-size); flex: 0 0 auto; }
.tm-glyph svg { width: 100%; height: 100%; }
.tm-pill .tm-glyph { width: var(--type-body); height: var(--type-body); }

/* The app's .glassCircleIcon(): a 44 pt white glyph on frosted glass. The
   glass is kept dark here in BOTH colour schemes so a white glyph never lands
   on a light panel over a light map. */
.tm-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--map-control-size);
  height: var(--map-control-size);
  padding: 0;
  border: var(--control-border-width) solid var(--web-glass-border);
  border-radius: var(--radius-pill);
  background: var(--map-pill-background);
  backdrop-filter: var(--web-glass-backdrop);
  -webkit-backdrop-filter: var(--web-glass-backdrop);
  color: var(--glass-control-icon);
  box-shadow: var(--glass-control-shadow);
}

/* ── Tags banner ── */

.tm-banner {
  position: fixed;
  z-index: 999;
  top: calc(var(--space-sm) + var(--map-control-size) + var(--space-sm) + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - var(--space-lg) * 2);
}

/* ── Bottom-left: chips, locate ── */

.tm-bottom-left {
  position: fixed;
  z-index: 1000;
  left: var(--space-md);
  bottom: calc(var(--space-md) + var(--map-dock-clearance, 0px) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.tm-chips {
  display: flex;
  gap: var(--space-xs);
  max-width: calc(var(--layout-card-min-width) - var(--space-xl));
  overflow-x: auto;
  scrollbar-width: none;
}
.tm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--map-flash-pill-background);
  color: var(--glass-control-icon);
  font-size: var(--type-caption);
  font-weight: var(--type-weight-bold);
}
.tm-chip-x { opacity: 0.8; }

/* ── Status capsule + banner body ── */

.tm-capsule,
.tm-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--web-glass-bg);
  backdrop-filter: var(--web-glass-backdrop);
  -webkit-backdrop-filter: var(--web-glass-backdrop);
  border: var(--control-border-width) solid var(--web-glass-border);
  color: var(--color-text-primary);
  box-shadow: var(--elevation-card);
  font-size: var(--type-body);
}
.tm-capsule {
  position: fixed;
  z-index: 1000;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--space-xl) * 2 + var(--map-dock-clearance, 0px) + env(safe-area-inset-bottom));
  max-width: calc(100% - var(--space-lg) * 2);
}

.tm-spinner {
  width: var(--type-body);
  height: var(--type-body);
  flex: 0 0 auto;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text-primary);
  border-radius: var(--radius-pill);
  animation: tm-spin var(--motion-slow-ms) linear infinite;
  animation-duration: calc(var(--motion-slow-ms) * 2);
}
@keyframes tm-spin { to { transform: rotate(360deg); } }

.tm-inline-button {
  min-height: var(--layout-touch-target-min);
  padding: 0 var(--space-sm);
  border: 0;
  background: none;
  color: var(--color-primary);
  font-weight: var(--type-weight-semibold);
}
.tm-strong { font-weight: var(--type-weight-bold); }

/* ── Layers sheet (MapLayersSheet): a panel under the Layers button, or on a
      phone a bottom sheet sitting on the docked chrome. Either way it is
      bounded to the band between the top row and the top of the portal's
      mini-player + nav stack (--map-dock-clearance, which the parent page
      measures and posts), and its body scrolls inside that band. ── */

:root { --tm-overlay-top: calc(var(--space-sm) + var(--map-control-size) + var(--space-sm) + env(safe-area-inset-top)); }

.tm-sheet {
  position: fixed;
  z-index: 1100;
  top: var(--tm-overlay-top);
  right: var(--space-md);
  width: min(calc(var(--layout-card-min-width) + var(--space-xl) * 2), calc(100% - var(--space-md) * 2));
  /* Its foot stops a line above the stack, so the attribution beneath it stays readable. */
  max-height: calc(100% - var(--tm-overlay-top) - var(--map-dock-clearance, 0px) - var(--space-lg));
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  border: var(--control-border-width) solid var(--color-border);
  box-shadow: var(--elevation-raised);
  color: var(--color-text-primary);
}
@media (max-width: 599px) {
  .tm-sheet {
    top: auto;
    left: var(--shell-bottom-capsule-inset);
    right: var(--shell-bottom-capsule-inset);
    bottom: var(--map-dock-clearance, 0px);
    width: auto;
    max-height: min(70%, calc(100% - var(--tm-overlay-top) - var(--map-dock-clearance, 0px)));
  }
}
.tm-sheet:focus { outline: none; }
.tm-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  border-bottom: var(--control-border-width) solid var(--color-border);
}
.tm-sheet-title { margin: 0; font-size: var(--type-headline); font-weight: var(--type-weight-bold); }
.tm-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--list-group-gap);
}

.tm-section { display: flex; flex-direction: column; gap: var(--space-xs); }
/* MapLayersSheet's section headers: title case, secondary, body size. */
.tm-section-title {
  margin: 0;
  padding-inline: var(--space-md);
  font-size: var(--type-body);
  font-weight: var(--type-weight-semibold);
  color: var(--color-text-secondary);
}
.tm-list {
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.tm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--list-row-height);
  padding: 0 var(--list-row-padding-x);
  position: relative;
}
.tm-row + .tm-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--list-divider-inset);
  right: 0;
  border-top: var(--control-border-width) solid var(--color-border);
}
label.tm-row { cursor: pointer; }
.tm-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tm-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: calc(var(--layout-touch-target-min) + var(--space-sm));
  height: calc(var(--layout-touch-target-min) * 0.64);
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  transition: background-color var(--motion-fast-ms) var(--motion-easing);
  cursor: pointer;
}
.tm-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--layout-touch-target-min) * 0.64 - 4px);
  height: calc(var(--layout-touch-target-min) * 0.64 - 4px);
  border-radius: var(--radius-pill);
  background: var(--glass-control-icon);
  box-shadow: var(--elevation-card);
  transition: transform var(--motion-fast-ms) var(--motion-easing);
}
.tm-switch:checked { background: var(--color-primary); }
.tm-switch:checked::after { transform: translateX(calc(var(--layout-touch-target-min) + var(--space-sm) - var(--layout-touch-target-min) * 0.64)); }

.tm-segmented {
  display: flex;
  flex: 1 1 auto;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-border);
}
.tm-segment {
  flex: 1 1 0;
  min-height: calc(var(--layout-touch-target-min) * 0.75);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-secondary);
  font-weight: var(--type-weight-semibold);
}
.tm-segment-on { background: var(--color-surface-raised); color: var(--color-text-primary); box-shadow: var(--elevation-card); }

.tm-search {
  flex: 1 1 auto;
  min-height: calc(var(--layout-touch-target-min) * 0.8);
  padding: 0 var(--space-sm);
  border: var(--control-border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

/* ── Markers ── */

.tm-marker-icon { background: none; border: 0; }

.tm-station {
  position: relative;
  display: block;
  width: var(--map-station-marker-size);
  height: var(--map-station-marker-size);
}
.tm-station img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
  border: 1px solid var(--map-marker-ring);
  box-shadow: var(--elevation-card);
}
.tm-station-offline img {
  filter: grayscale(1) brightness(var(--map-offline-brightness));
  opacity: var(--map-offline-opacity);
}
.tm-station-star {
  position: absolute;
  top: calc(var(--map-new-badge-size) / -3);
  right: calc(var(--map-new-badge-size) / -3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--map-new-badge-size);
  height: var(--map-new-badge-size);
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--map-marker-ring);
  color: var(--map-star-tint);
}
.tm-station-star .tm-glyph, .tm-station-star svg { width: 100%; height: 100%; }

.tm-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--map-marker-size);
  height: var(--map-marker-size);
  padding: 5px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--map-marker-ring);
  color: var(--glass-control-icon);
  box-shadow: var(--elevation-card);
}
.tm-pin svg { width: 100%; height: 100%; }
.tm-pin-motus { background: var(--map-motus-tint); color: var(--map-flash-pill-background); }
.tm-pin-tag { background: var(--map-tag-tint); }
.tm-pin-curated { background: var(--map-curated-tint); }

.tm-cluster-icon { background: none; border: 0; }
.tm-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--map-marker-ring);
  color: var(--glass-control-icon);
  font-size: var(--type-caption);
  font-weight: var(--type-weight-bold);
  box-shadow: var(--elevation-card);
}
.tm-cluster-station { background: var(--map-station-cluster-tint); }
.tm-cluster-motus { background: var(--map-motus-tint); color: var(--map-flash-pill-background); }
.tm-cluster-tag { background: var(--map-tag-tint); }
.tm-cluster-curated { background: var(--map-curated-tint); }

.tm-callout { font-weight: var(--type-weight-semibold); }

/* ── Bird flashes ── */

.tm-flash-label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -8px);
  padding: 2px var(--space-sm);
  border-radius: 9px;
  background: var(--map-flash-pill-background);
  color: var(--glass-control-icon);
  font-size: var(--type-caption);
  font-weight: var(--type-weight-bold);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--elevation-card);
  animation: tm-label 1.5s var(--motion-easing) both;
}
@keyframes tm-label {
  0% { opacity: 0; transform: translate(-50%, -8px); }
  12% { opacity: 1; transform: translate(-50%, -22px); }
  70% { opacity: 1; transform: translate(-50%, -22px); }
  100% { opacity: 0; transform: translate(-50%, -36px); }
}

.tm-shake { animation: tm-shake 0.55s ease-out; }
@keyframes tm-shake {
  0%, 100% { transform: translateX(0); }
  14% { transform: translateX(-6px); }
  28% { transform: translateX(6px); }
  42% { transform: translateX(-5px); }
  57% { transform: translateX(5px); }
  71% { transform: translateX(-3px); }
  85% { transform: translateX(3px); }
}

.tm-flash {
  position: relative;
  display: block;
  width: 140px;
  height: 36px;
}
.tm-flash .tm-flash-label { bottom: 18px; }
.tm-flash-dot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: var(--radius-pill);
  background: var(--map-flash-dot);
  animation: tm-pulse 1s ease-out infinite;
}
@keyframes tm-pulse { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.6); opacity: 0.2; } }

@media (prefers-reduced-motion: reduce) {
  .tm-flash-label, .tm-flash-dot, .tm-shake, .tm-spinner { animation: none; }
  .tm-flash-label { transform: translate(-50%, -22px); }
}

/* ── Species focus (Session 692, iOS LiveMapView): under the Layers button, only
      while a species is focused ── */

.tm-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}
.tm-species-focus { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); pointer-events: auto; }
.tm-species-focus[hidden] { display: none; }
.tm-species-row { display: flex; align-items: center; gap: var(--space-sm); max-width: calc(100vw - var(--space-md) * 2); }
.tm-species-button,
.tm-species-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-touch-target-min);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--map-pill-background);
  color: var(--glass-control-icon);
  box-shadow: var(--glass-control-shadow);
}
.tm-species-button { justify-content: center; min-width: var(--layout-touch-target-min); padding: 0 var(--space-sm); }
.tm-species-chip { gap: var(--space-xs); min-width: 0; padding: 0 var(--space-xs) 0 var(--space-sm); }
.tm-species-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  min-height: var(--layout-touch-target-min);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: var(--type-weight-bold);
}
.tm-species-name .tm-glyph { width: var(--type-body); height: var(--type-body); color: var(--color-primary); }
.tm-species-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-species-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--layout-touch-target-min);
  height: var(--layout-touch-target-min);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.85;
}
.tm-species-clear .tm-glyph { width: var(--type-body); height: var(--type-body); }
.tm-species-count {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--map-species-count-background);
  color: var(--glass-control-icon);
  font-size: var(--type-caption);
  font-weight: var(--type-weight-bold);
  white-space: nowrap;
}

/* Species search results in the Layers sheet. */
.tm-results { display: flex; flex-direction: column; max-height: calc(var(--list-row-height) * 6); overflow-y: auto; }
.tm-result,
.tm-row-button {
  width: 100%;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.tm-result { justify-content: flex-start; }
.tm-result .tm-glyph { width: var(--type-body); height: var(--type-body); color: var(--color-text-secondary); }
.tm-result .tm-row-label { flex: 1 1 auto; }
.tm-result[aria-selected="true"] .tm-glyph:last-child { color: var(--color-primary); }
.tm-row-button .tm-glyph { width: var(--type-body); height: var(--type-body); color: var(--color-text-secondary); }
.tm-destructive { color: var(--color-danger); }

/* ── Overlay mode: a bare map the parent draws on ── */

body.tm-mode-overlay .tm-top,
body.tm-mode-overlay .tm-bottom-left,
body.tm-mode-overlay .tm-capsule,
body.tm-mode-overlay .tm-banner,
body.tm-mode-overlay .tm-sheet { display: none !important; }

/* Tag track (tagHistory.stationMarker / tagHistory.leg): a numbered circle
   per receiver station, the latest one larger, the selected one outlined in
   the focus colour; dashed legs with a direction chevron. Size and outline are
   redundant with the number and the list, never the only signal. */
.tm-track-leg {
  stroke: var(--track-leg-stroke);
  stroke-width: var(--track-leg-width);
  stroke-dasharray: var(--track-leg-dash);
  fill: none;
}
.tm-track-place {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid var(--map-marker-ring);
  border-radius: var(--radius-pill);
  background: var(--track-marker-fill);
  color: var(--track-marker-label);
  font-size: var(--type-body);
  font-weight: var(--type-weight-semibold);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--glass-control-shadow);
  cursor: pointer;
}
.tm-track-latest { font-size: var(--type-headline); font-weight: var(--type-weight-bold); }
.tm-track-selected {
  box-shadow: 0 0 0 var(--track-marker-selected-width) var(--track-marker-selected), var(--glass-control-shadow);
  transform: scale(var(--track-marker-emphasis-scale));
}
.tm-track-chevron { display: block; width: 100%; height: 100%; color: var(--track-leg-stroke); }
.tm-track-chevron svg { width: 100%; height: 100%; }