/* Map: a full-width map under the glass bar, Layers and controls floating over it. */
.app-view--wide { width: 100%; padding: 0; }
.map-page { position: fixed; inset: 0; z-index: 1; }
.map-viewer, .map-wind { position: absolute; inset: 0; }
.map-viewer { overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 90% at 50% 40%, #1d3a3c, #0b1a1e 70%); }
.map-viewer:active { cursor: grabbing; }
.map-viewer:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.map-base { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(244, 233, 215, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 233, 215, 0.05) 1px, transparent 1px);
  background-size: 64px 64px; }
.map-base.has-apple-map { background: none; }
.map-tiles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.map-tiles img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-select: none; }
.map-aerial { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; image-rendering: auto; }
.map-markers { position: absolute; inset: 0; pointer-events: none; }
.map-marker { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.map-marker > * { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)); }
.map-marker--station > * { transform: translate(-50%, -50%); }
.map-marker:focus-visible > * { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
.map-pin { display: block; width: 16px; height: 23px; }
.map-pin::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--pin); }
.map-pin::after { content: ""; position: absolute; left: 4px; top: 15px; border: 4px solid transparent; border-top: 7px solid var(--pin); border-bottom: 0; }
.map-pin--mine { --pin: #c08a2e; }
.map-pin--club { --pin: #79533a; }
.map-pin--hardware { --pin: #6f8a99; }
.map-pin--obstruction { --pin: #c8433a; }
.map-top { position: absolute; z-index: 3; left: 16px; top: calc(max(12px, env(safe-area-inset-top)) + 72px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: calc(100% - 280px); }
.map-layers-button { display: none; min-height: 40px; padding: 0 16px; }
.map-note { margin: 0; padding: 8px 12px; border-radius: 999px; font-size: 13px; color: var(--cream-2); background: rgba(16, 34, 32, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* The views and layers panel: docked at the right, grouped under small labels, never taller than leaves room for the controls below it. */
.map-layers { position: absolute; z-index: 4; right: 16px; top: calc(max(12px, env(safe-area-inset-top)) + 72px); display: grid; gap: 6px; align-content: start; width: 220px; max-height: calc(100svh - 340px); padding: 12px 12px 14px; overflow-y: auto; border-radius: 18px; background: rgba(16, 34, 32, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(244, 233, 215, 0.12), 0 8px 24px rgba(0, 0, 0, 0.35); }
.map-group-label { margin: 6px 0 2px; color: var(--cream-3); font: 700 10.5px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.map-group-label:first-child { margin-top: 0; }
.map-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.map-chip, .map-toggle { min-height: 40px; padding: 6px 10px; border: 0; border-radius: 12px; cursor: pointer; color: var(--cream); font: 700 13px var(--sans); background: rgba(244, 233, 215, 0.08); box-shadow: inset 0 0 0 1px rgba(244, 233, 215, 0.12); }
.map-chip { min-height: 36px; font-weight: 600; }
.map-chip[aria-pressed="true"] { color: #1b1208; background: linear-gradient(180deg, #f8d59e, #dc9f5e); box-shadow: none; }
.map-toggles { display: grid; gap: 4px; }
.map-toggle { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 4px 8px; border-radius: 10px; text-align: left; font-weight: 600; background: transparent; }
.map-toggle:hover { background: rgba(244, 233, 215, 0.08); }
.map-toggle::before { content: ""; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(244, 233, 215, 0.45); font-size: 11px; line-height: 1; }
.map-toggle[aria-pressed="true"]::before { content: "✓"; color: #1b1208; border-color: transparent; background: linear-gradient(180deg, #f8d59e, #dc9f5e); }
.map-adds { display: grid; gap: 6px; }
.map-adds .pill { justify-content: center; min-height: 36px; }
.map-new-blind { text-align: center; text-decoration: none; }
.map-controls { position: absolute; z-index: 3; right: 16px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 24px); display: grid; gap: 8px; }
.map-control { width: 46px; height: 46px; border: 0; border-radius: 14px; cursor: pointer; color: var(--cream); font: 700 18px var(--sans);
  background: rgba(16, 34, 32, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(244, 233, 215, 0.18), 0 8px 20px -10px rgba(0, 0, 0, 0.7); }
.map-control:hover { color: var(--amber); }
.map-popup { width: min(420px, calc(100% - 24px)); max-height: 70svh; overflow-y: auto; }
.map-popup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.map-popup-kind { margin: 0; color: var(--cream-3); font-size: 12px; font-weight: 700; }
.map-popup-close { width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; color: var(--cream); font-size: 22px; background: rgba(244, 233, 215, 0.08); }
.map-popup-coords { margin: 0 0 8px; font-variant-numeric: tabular-nums; user-select: all; }
.map-popup-warning { margin: 0; color: #f2c66d; font-size: 14px; }
.map-popup-station { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid rgba(244, 233, 215, 0.12); }
.map-popup-station p { margin: 0; }
.map-popup-old { color: #f2c66d; }
.map-popup-values { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 4px 0; }
.map-popup-values dt { color: var(--cream-2); }
.map-popup-values dd { margin: 0; font-weight: 600; text-align: right; }
.map-popup-note { margin-top: 10px; }
.new-pin-dialog { width: min(480px, calc(100% - 24px)); max-height: 90svh; overflow-y: auto; }
.new-pin { display: grid; gap: 14px; }
/* Wind: Windy's map with the hourly table under it. */
.map-wind { display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: calc(max(12px, env(safe-area-inset-top)) + 124px) 12px calc(max(12px, env(safe-area-inset-bottom)) + 12px); gap: 12px; }
.wind-view { display: contents; }
.wind-frame { width: 100%; height: 100%; min-height: 240px; border: 0; border-radius: 22px; background: #0b1a1e; }
.wind-panel { padding: 12px 14px; border-radius: 22px; }
.wind-table { display: grid; gap: 8px; }
.wind-table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wind-heading { margin: 0; font-weight: 800; font-size: 14px; }
.wind-now { min-height: 36px; padding: 0 14px; }
.wind-grid { display: grid; grid-template-columns: 76px minmax(0, 1fr); }
.wind-legend, .wind-column { display: grid; grid-template-rows: repeat(6, 26px); align-items: center; font-size: 13px; }
.wind-legend { color: var(--cream-3); font-weight: 600; }
.wind-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.wind-column { flex: 0 0 60px; justify-items: center; padding: 0; border: 0; border-radius: 10px; cursor: pointer; color: var(--cream); font: inherit; background: none; scroll-snap-align: center; }
.wind-column.is-selected { background: rgba(237, 181, 106, 0.18); }
.wind-speed { font-weight: 800; color: var(--amber); }
.wind-from { display: inline-flex; align-items: center; gap: 2px; }
.wind-arrow { display: inline-block; }
@media (max-width: 720px) {
  .map-layers-button { display: inline-flex; }
  .map-layers { display: none; top: calc(max(12px, env(safe-area-inset-top)) + 124px); max-height: calc(100svh - 240px); width: min(240px, calc(100% - 32px)); padding: 10px; }
  .map-layers.is-open { display: grid; }
  .map-top { max-width: calc(100% - 32px); }
  .map-legend { max-width: calc(100% - 96px); }
  .map-controls { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 96px); }
  .map-wind { padding-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 96px); }
}

/* #13 duck approach cones (map/overlay.js): a layer between the aerial and the markers that
   never takes clicks; slot 4 amber (#c98500) pointing downwind, where ducks come in from. A
   legend in words sits at the bottom left, clear of the layers panel. */
.map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-cone { fill: rgba(201, 133, 0, 0.24); stroke: #c98500; stroke-width: 1.5; }
.map-legend { position: absolute; z-index: 2; left: 16px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 8px); display: grid; gap: 4px; max-width: min(420px, calc(100% - 96px)); padding: 8px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; color: var(--cream-2); background: rgba(16, 34, 32, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.map-legend p { margin: 0; }