.location-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.location-button.is-active { color: #1a73e8; }
.location-button:focus-visible,
.location-status-text:focus-visible,
.location-action:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }

/* Minimal status card: 44 px icon. The label overlays the map above it (never pushes layout)
   for 5 s after a meaningful change; location.js toggles .is-announcing. */
.location-status { position: relative; width: 44px; height: 44px; pointer-events: auto; }
.location-status--floating { position: absolute; z-index: 4; left: 8px; top: calc(var(--stack-top, 0px) + 8px); }
.location-status-text {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: #5f6b66;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.location-status-label {
  position: absolute; left: 0; bottom: calc(100% + 6px);
  display: none;
  max-width: calc(100vw - 32px);
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: #333;
  font-size: 12px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.location-status.is-announcing .location-status-label { display: block; }
.location-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Icon: ring + dot (current position). Shape, not only colour, marks the state:
   dashed ring = approximate, dotted ring = saved/not updating, slash = off/blocked/unavailable. */
.location-status-icon { position: relative; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; }
.location-status-icon::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: currentColor; }
.location-status-icon::before { content: ''; position: absolute; left: 50%; top: -5px; width: 2px; height: 28px; margin-left: -1px; background: currentColor; transform: rotate(45deg); display: none; }
.location-status[data-state="trusted"] .location-status-text,
.location-status[data-state="finding"] .location-status-text { color: #1a73e8; }
.location-status[data-state="approximate"] .location-status-text { color: #9a5a00; }
.location-status[data-state="approximate"] .location-status-icon { border-style: dashed; }
.location-status[data-state="saved"] .location-status-icon,
.location-status[data-state="quiet"] .location-status-icon { border-style: dotted; }
.location-status[data-state="denied"] .location-status-text,
.location-status[data-state="unavailable"] .location-status-text,
.location-status[data-state="timeout"] .location-status-text,
.location-status[data-state="unsupported"] .location-status-text { color: #b4472b; }
.location-status[data-state="off"] .location-status-icon::before,
.location-status[data-state="denied"] .location-status-icon::before,
.location-status[data-state="unavailable"] .location-status-icon::before,
.location-status[data-state="unsupported"] .location-status-icon::before { display: block; }
.location-status[data-state="finding"] .location-status-icon::after { animation: location-pulse 1.2s ease-in-out infinite; }
/* Service-context tier is separate from the diagnostic/acquisition state. A
   timeout can still leave useful saved context; do not depict it as no position. */
.location-status[data-tier] .location-status-icon { border: 0; border-radius: 0; }
.location-status[data-tier] .location-status-icon::before,
.location-status[data-tier] .location-status-icon::after { display: none; }
.location-status[data-tier] .location-status-icon svg { display: block; width: 22px; height: 22px; }
.location-status[data-tier="precise"] .location-status-text { color: #1a73e8; }
.location-status[data-tier="approximate"] .location-status-text { color: #9a5a00; }
.location-status[data-tier="saved"] .location-status-text { color: #66776f; }
.location-status[data-tier="searching"] .location-status-text { color: #1a73e8; }
.location-status[data-tier="unavailable"] .location-status-text { color: #b4472b; }
.location-status[data-tier="searching"] .location-status-icon svg { animation: location-signal-search 1.5s linear infinite; }
@keyframes location-signal-search { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { :root:not([data-loka-motion="gentle"]) .location-status[data-tier] .location-status-icon svg { animation: none; } }
:root[data-loka-motion="off"] .location-status[data-tier] .location-status-icon svg { animation: none; }
@keyframes location-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .location-status[data-state="finding"] .location-status-icon::after { animation: none; } }
:root[data-loka-motion="off"] .location-status[data-state="finding"] .location-status-icon::after { animation: none; }
.bottom-tools:has(.location-status) .gesture-hint { display:none; }
/* Explore and navigation use this same information action below the camera button. */

/* Details popover (top layer, appended to body). Bottom sheet on phones; fits 320 x 568. */
.location-details {
  position: fixed;
  inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px;
  width: auto; max-width: 360px; height: auto;
  max-height: calc(100dvh - 16px);
  margin: 0 auto;
  box-sizing: border-box;
  overflow: auto; overscroll-behavior: contain;
  padding: 12px 14px;
  border: 1px solid #dfe5e1; border-radius: 14px;
  background: #fff; color: #163d33;
  font-size: 14px; line-height: 1.4;
  box-shadow: 0 6px 24px rgba(22, 61, 51, 0.2);
}
.location-details[hidden] { display: none; }
.location-details:focus { outline: none; }
.location-details-title { margin: 0 0 4px; font-size: 16px; }
.location-details-summary { margin: 0 0 8px; font-weight: 600; }
.location-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 8px; font-size: 13px; }
.location-facts dt { color: #5d7068; }
.location-facts dd { margin: 0; overflow-wrap: anywhere; }
.location-detail { margin: 0 0 8px; font-size: 13px; overflow-wrap: anywhere; }
.location-detail[hidden] { display: none; }
.location-details-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.location-action {
  min-height: 44px; min-width: 44px;
  padding: 0 14px;
  border: 1px solid #ccd6d1; border-radius: 10px;
  background: #fff; color: inherit;
  font: inherit; font-size: 14px;
  cursor: pointer;
}
.location-action[hidden] { display: none; }
.location-action--primary { border-color: var(--green, #063c2e); color: var(--green, #063c2e); font-weight: 700; }
/* Wide screens: a card beside the right-hand control cluster (not bottom-left, far from the
   locate button). --location-details-top may be set on :root to align with the live cluster. */
@media (min-width: 760px) {
  .location-details { left: auto; right: max(24px, env(safe-area-inset-right)); bottom: 120px; width: 360px; margin: 0; }
}
@media (min-width: 760px) and (min-height: 501px) {
  .location-details {
    top: var(--location-details-top, calc(var(--edge-top, 72px) + 248px)); bottom: auto;
    max-height: calc(100dvh - var(--location-details-top, calc(var(--edge-top, 72px) + 248px)) - 16px);
  }
}
/* Landscape phones are short: keep a bottom card, but at the right where the controls are. */
@media (min-width: 760px) and (max-height: 500px) {
  .location-details { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); }
}

.location-marker {
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #1a73e8;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.location-marker.is-cached,
.location-marker.is-stale,
.location-marker.is-dimmed { background: #8ab4e9; }
.location-pointer{display:none;position:absolute;inset:50% auto auto 50%;width:30px;height:34px;transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 1px 2px #063c2e66)}
.location-pointer svg{display:block;width:100%;height:100%}
.location-marker.has-heading{background:transparent;border-color:transparent;box-shadow:none}
.location-marker.has-heading .location-pointer{display:block}
.location-marker.is-dimmed .location-pointer{opacity:.48}
.location-marker.is-estimated-heading .location-pointer path:first-child{fill:#fff;stroke:#147de8}
.location-marker.is-estimated-heading .location-pointer path:last-child{fill:none}
/* Accuracy circle: the browser's estimated uncertainty radius (location.js sets --loc-acc in px).
   Gray and dashed for a saved or stale position, which is a last-known place, not live. */
.location-accuracy {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: var(--loc-acc, 0px); height: var(--loc-acc, 0px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(26, 115, 232, 0.4); border-radius: 50%;
  background: rgba(26, 115, 232, 0.12);
  pointer-events: none;
}
.location-accuracy[hidden] { display: none; }
.location-marker.is-cached .location-accuracy,
.location-marker.is-stale .location-accuracy { border: 1px dashed rgba(90, 90, 90, 0.5); background: rgba(120, 120, 120, 0.1); }
@media (max-width:759px) {
  .bottom-tools { max-width:calc(100vw - 160px); }
}

/* Reset legacy shared mobile chip styling; this file is loaded after shared styles. */
.location-status { display:block; flex:none; min-width:44px; max-width:44px; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; gap:0; }
.location-status-text { position:relative; flex:none; min-width:44px; min-height:44px; overflow:visible; white-space:normal; text-align:center; }
.location-status-text::after,.location-status.is-expanded .location-status-text::after { content:none; display:none; }

/* ---- Location control group (root wraps locateBtn + .location-status inside #map-controls) ----
   One 44 px column: camera (locate) button first, information/status action below. The
   fallback (status in .bottom-tools or floating) is untouched: every rule below needs the group.
   Route editing and reporting already hide #map-controls, so the group hides with it. */
.location-control-group {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  flex: none; gap: 8px; width: 44px; max-width: 100%; margin-inline-start: auto; align-self: flex-end;
  box-sizing: border-box;
}
.location-control-group > * { flex: none; }
/* Anchor the bubble to its status action, below the camera button. */
.location-control-group .location-status { position: relative; }
.location-control-group .location-status-text { position: static; }
.location-control-group .location-status-text { border: 1px solid var(--mf-line, #dfe5e1); border-radius: 12px; }

/* Keep the information action in the same place in every state and mode. Only its label
   expands temporarily; the button remains available for GPS details and settings. */

/* Compact bubble beside status, to the left of the right-hand control column so it never
   covers the buttons above the locate button. Max two lines, wraps instead of ellipsis. */
.location-control-group .location-status-label {
  left: auto; right: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%);
  width: max-content; max-width: min(220px, calc(100vw - 96px));
  white-space: normal; text-align: left; overflow-wrap: anywhere; text-overflow: clip;
  display: none; overflow: hidden;
}
.location-control-group .location-status.is-announcing .location-status-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* Keyboard focus keeps the bubble for as long as focus stays (it does not time out, and there is
   no hover-only help). Pointer taps open the details instead, so use :focus-visible, not :focus. */
.location-control-group .location-status:has(.location-status-text:focus-visible) .location-status-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
@supports not selector(:has(*)) {
  .location-control-group .location-status:focus-within .location-status-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
/* While the details are open they say everything; drop the bubble. */
.location-control-group .location-status-text[aria-expanded="true"] .location-status-label { display: none !important; }

/* Wide screens: the cluster sits at the top right, so put the bubble to the left of the group. */
@media (min-width: 760px) {
  .location-control-group .location-status-label { right: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); max-width: 260px; }
}
/* Landscape phones keep the same column and a bounded label beside status. */
@media (max-height: 500px) {
  .location-control-group .location-status-label { max-width: min(220px, calc(100vw - 160px)); }
}
@media (forced-colors: active) {
  .location-control-group .location-status-text,
  .location-control-group .location-status-label { border: 1px solid CanvasText; }
}

/* Escape hides this focus bubble while keeping the information action available.
   location.js clears the marker on blur or a fresh meaningful status change. */
.location-control-group .location-status.is-label-dismissed .location-status-label { display: none !important; }

/* The glyph, accessible name and tooltip show the next location action. */
.location-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.location-button { transition:background-color 150ms ease-out,color 150ms ease-out; }
.location-button svg { display:block; animation:location-action-in 150ms ease-out; }
.location-button.is-active { background: var(--green, #063c2e); color: #fff; }
@keyframes location-action-in { from { opacity:.4; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
:root[data-loka-motion="off"] .location-button { transition:none; }
:root[data-loka-motion="off"] .location-button svg { animation:none; }
@media(prefers-reduced-motion:reduce) {
  :root:not([data-loka-motion="gentle"]) .location-button { transition:none; }
  :root:not([data-loka-motion="gentle"]) .location-button svg { animation:none; }
}
.location-button:hover, .location-status-text:hover { box-shadow: 0 2px 7px #063c2e40; }
main:has(.location-control-group) .gesture-hint { display: none; }