/* Web map layout. Shared colors, fonts, and chips come from /site/style.css. */
.map-page { height: 100dvh; min-height: 0; overflow: hidden; background: #e6e6e6; }
.map { position: fixed; inset: 0; }

/* Opaque, high-contrast controls over the map for outdoor use. */
.map-brand { position: fixed; top: max(.75rem, env(safe-area-inset-top)); left: max(.75rem, env(safe-area-inset-left)); display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .375rem .875rem .375rem .375rem; border-radius: 10px; background: #000000; color: #ffffff; font-family: var(--display); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; text-decoration: none; }
.map-brand img { width: 36px; height: 36px; border-radius: 8px; }

/* iOS segmented crosshair: 2 px white over a 5 px black outline. */
.crosshair { position: fixed; z-index: 1; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; pointer-events: none; overflow: visible; }
.crosshair path { fill: none; stroke-linecap: round; stroke: #000000; stroke-width: 5; }
.crosshair path + path { stroke: #ffffff; stroke-width: 2; }

/* Chip Bar Only: toolbar actions lead the chip row as icon chips. */
.icon-chip { width: 52px; padding: 0; }
.chip svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chip svg .fill { fill: currentColor; }
.chip .check { display: none; width: 20px; height: 20px; margin-right: .375rem; color: #0a84ff; stroke-width: 3; }
#basemap-chips .chip[aria-pressed="true"] { border: 1.5px solid #ffffff; color: #ffffff; }
#basemap-chips .chip[aria-pressed="true"] .check { display: inline; }

.chip-bar { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 3rem); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; padding: .5rem max(.75rem, env(safe-area-inset-right)) .25rem max(.75rem, env(safe-area-inset-left)); pointer-events: none; }
.chip-row { display: flex; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; pointer-events: auto; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .chip { -webkit-tap-highlight-color: transparent; }
.chip-row .chip { flex: none; }

.map-panel { position: fixed; z-index: 2; left: max(.75rem, env(safe-area-inset-left)); bottom: calc(env(safe-area-inset-bottom) + 7rem); width: min(22rem, calc(100% - 1.5rem)); padding: 1rem 1.25rem 1.25rem; border: 1.5px solid #ffffff; border-radius: 12px; background: #000000; color: #ffffff; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.panel-header h2 { font-size: 1.375rem; }
.readout { display: grid; gap: .5rem; margin: 0; }
.readout div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; align-items: baseline; }
.readout dt { color: #d0d0d0; }
.readout dd { font-variant-numeric: tabular-nums; }
.map-panel .note { color: #d0d0d0; }

.map-status { position: fixed; z-index: 3; left: 50%; top: max(5.5rem, env(safe-area-inset-top)); transform: translateX(-50%); width: min(26rem, calc(100% - 1.5rem)); margin: 0; padding: .75rem 1rem; border-radius: 10px; background: #000000; color: #ffffff; font-weight: 700; text-align: center; }

.choice-list { margin: 0; padding: 0; border: 0; }
.choice-list legend { margin-bottom: .5rem; padding: 0; color: #d0d0d0; font-weight: 700; }
.choice-list label { display: flex; align-items: center; gap: .75rem; min-height: 44px; font-weight: 700; cursor: pointer; }
.choice-list input { width: 22px; height: 22px; margin: 0; accent-color: #0a84ff; }

/* White footer strip: site links on the left, map attribution on the right. */
.map-footer { position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; gap: 1rem; min-height: 2.25rem; padding: 0 max(.75rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(.75rem, env(safe-area-inset-left)); background: #ffffff; color: #141414; font-size: .875rem; }
.map-footer a { display: inline-flex; align-items: center; min-height: 2.25rem; font-weight: 700; }
.map-credit { display: inline-flex; align-items: center; margin-left: auto; text-align: right; font-size: .8125rem; }
.map-credit a { font-weight: 400; }