.location-panel { display: block; min-width: 0; }
.location-panel h3 { font-size: clamp(25px, 2.2vw, 33px); }
.location-panel .location-panel-copy { padding: 20px 25px 25px; }
.map-stage { position: relative; }
.field-map { width: 100%; height: 560px; background: #e4e8df; color: #202823; }
.map-pin { --pin-color: #244734; position: relative; height: 28px; text-align: center; filter: drop-shadow(0 1px 2px #0003); }
.map-pin-label { display: flex; width: 100%; height: 23px; box-sizing: border-box; align-items: center; justify-content: center; border: 1.5px solid white; border-radius: 12px; background: var(--pin-color); color: white; font: 800 11px/1 sans-serif; white-space: nowrap; }
.map-pin::after { content: ""; position: absolute; top: 22px; left: calc(50% - 4px); width: 0; height: 0; border-top: 6px solid var(--pin-color); border-right: 4px solid transparent; border-left: 4px solid transparent; }
.map-pin-end { --pin-color: #ab3d26; }
.map-pin-loop { --pin-color: #244734; }
.map-pin-booth { --pin-color: #8c5420; }
.map-pin-booth::after { content: none; }
.map-pin-verified { --pin-color: #1455a4; }
.map-pin-stale { --pin-color: #72685a; }
.map-pin-field { height: 44px; overflow: visible; }
.map-pin-field .map-pin-label { position: absolute; top: 16px; height: 26px; font-size: 12px; font-weight: 800; box-shadow: 0 2px 5px #0003; }
.map-pin-field::after { top: -9px; left: calc(50% - 9px); width: 18px; height: 18px; border: 3px solid white; border-radius: 50%; background: #0b69cf; box-shadow: 0 0 0 5px #4ca5ff50, 0 2px 5px #0005; box-sizing: border-box; }
.map-pin-field .map-pin-bubble { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 250px; box-sizing: border-box; padding: 14px 20px 12px; color: #302d2b; text-align: center; cursor: pointer; }
/* Centre the compact message/time group inside the cloud. */
.map-pin-bubble-content { position: relative; min-width: 0; }
.map-pin-cloud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 4px #0002); }
.map-pin-cloud path { fill: #fffefb; stroke: #302d2b; stroke-width: 1.8; stroke-linejoin: round; }
.map-pin-bubble::before, .map-pin-bubble::after { content: ""; position: absolute; box-sizing: border-box; background: #fffefb; border: 1.5px solid #302d2b; border-radius: 50%; }
.map-pin-bubble::before { width: 12px; height: 10px; bottom: -13px; left: calc(50% - 17px); transform: rotate(-15deg); }
.map-pin-bubble::after { width: 7px; height: 7px; bottom: -26px; left: calc(50% - 6px); }
.map-pin-message { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-height: 5.1em; overflow: hidden; font: 400 calc(11px + 2pt)/1.7 sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
.map-pin-message-time { position: relative; display: block; margin-top: 2px; color: #6c665b; font: 400 10px/1.5 sans-serif; }
.map-field-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.map-field-updates { margin: 18px 25px; }
.map-field-item { border: 1px solid #728b7c; border-left: 4px solid #70b7ff; padding: 14px; margin: 10px 0; background: #ffffff08; }
.map-field-item.is-stale { border-left-color: #d6bd98; }
.map-field-item strong { display: block; font-size: 14px; }
.map-field-state { display: inline-block; font-size: 12px; color: #c5e3ff; margin: 6px 0; }
.location-panel .map-field-item p { margin: 6px 0; font-size: 13px; }
.map-field-item small { display: block; font-size: 11px; }
.location-panel .map-field-warning, .location-panel .map-field-empty { font-size: 12px; line-height: 1.7; color: #e7d9bc; }
.map-pin-loop .map-pin-label { color: #e7ffbc; }
.map-project-controls { position: absolute; top: 8px; right: 8px; z-index: 5; box-sizing: border-box; width: min(252px, calc(100% - 16px)); padding: 7px; border: 1px solid #c7cfc4; border-radius: 8px; background: rgba(255, 255, 250, .97); color: var(--ink); box-shadow: 0 3px 15px #17271c20; }
.map-controls-label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 800; }
.map-project-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.map-project-button { min-width: 0; min-height: 36px; padding: 4px 3px; border: 1px solid #b7c3b1; border-radius: 4px; background: white; color: #25352b; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.35; cursor: pointer; overflow-wrap: anywhere; }
.map-project-button[aria-pressed="true"] { background: #244734; border-color: #244734; color: #e7ffbc; }
.map-project-button:disabled { background: #eeeee8; color: #747c70; border-color: #d5dacd; cursor: not-allowed; }
.map-project-button:focus-visible { outline: 3px solid #d34b31; outline-offset: 2px; }
.map-direction-arrow { width: 20px; height: 20px; pointer-events: none; }
.map-direction-arrow::before { content: ""; position: absolute; top: 7px; left: 5px; width: 9px; height: 9px; border-top: 3px solid #bf4934b3; border-right: 3px solid #bf4934b3; transform: rotate(-45deg); }
.map-route-info { margin: 18px 25px 0; padding: 14px; border-left: 3px solid #f19b7c60; background: #ffffff0a; }
.map-route-info strong { font-size: 14px; }
.location-panel .map-route-info p { margin: 8px 0; font-size: 12px; line-height: 1.7; }
.map-project-controls[hidden], .map-route-info[hidden] { display: none; }
.field-map[hidden], .map-placeholder[hidden], .map-load[hidden] { display: none; }
.map-placeholder { margin: 0 25px; padding: 25px 18px; border: 1px solid #678579; border-radius: 7px; background: #243f34; }
.location-panel .map-placeholder p { margin: 7px 0 0; }
.map-placeholder strong { font-size: 17px; line-height: 1.5; }
.location-panel .map-status { margin: 0 0 14px; }
.location-panel-copy:has(> .map-status:empty) { display: none; }
.map-load { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 5px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 800; }
.map-load:disabled { cursor: not-allowed; opacity: 0.65; }
.map-load-wrap { padding: 0 25px 18px; }
.map-load-wrap:has(.map-load[hidden]) { display: none; }
.map-places { margin: 0 25px 26px; max-height: 480px; overflow-y: auto; }
.map-place { border-top: 1px solid #678579; }
.map-place-summary { min-height: 54px; padding: 15px 4px; cursor: pointer; }
.map-place-name { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.map-place-summary small { display: block; margin: 6px 0 0 17px; color: #cdd8cc; font-size: 11px; }
.location-panel .map-place-pending { margin: 0 0 8px; font-size: 11px; }
.map-sessions { padding: 0; margin: 0; list-style: none; }
.map-session { padding: 14px 0; border-top: 1px solid #456458; }
.map-session-time { display: block; color: var(--lime); font-size: 11px; }
.map-session strong { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.map-session-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 15px; margin-top: 8px; }
.map-detail-button { min-height: 44px; padding: 5px 10px; border: 1px solid #9db19f; border-radius: 4px; background: transparent; color: var(--paper); font-size: 12px; }
.map-signup { display: inline-flex; min-height: 44px; align-items: center; color: var(--lime); font-size: 12px; text-decoration: underline; }
.location-panel .map-note { margin-bottom: 0; font-size: 11px; }
@media (max-width: 440px) {
  .field-map { height: 560px; }
  .map-project-controls { padding: 7px; }
  .map-route-info { margin-right: 18px; margin-left: 18px; }
  .map-field-updates { margin-right: 18px; margin-left: 18px; }
  .location-panel .location-panel-copy { padding: 18px; }
  .map-placeholder { margin: 0 18px; }
  .map-load-wrap { padding-right: 18px; padding-left: 18px; }
  .map-places { margin-right: 18px; margin-left: 18px; }
}