/* The location picker (location-picker.js): the map-pin button inside a .k-input (controls.css) and the map that
   grows out of it. The map is OpenFreeMap's Positron, a light map in both themes, so what sits on it (the pin, the
   map's own buttons) stays light-map coloured; the frame and the footer follow the theme. maplibre-gl.css is inserted
   before this file when the first map opens. */
/* A grid, so the input fills the wrapper when a stretched row makes it taller, and the button centres on the input.
   location-picker.js pads the input's end (inline) by the button and --k-location-inset; a page with a taller input
   than 36px sets --k-location-inset to (its height - 28px) / 2, so the button sits as far from the end as from the top. */
.k-location{position:relative;display:grid;min-width:0}
/* The button is part of the field: pointing at it keeps the field's hover look. */
.k-location:hover>.k-input:not(:disabled):not(:focus-visible){background:var(--panel-2);border-color:color-mix(in srgb,var(--text) 22%,var(--line))}
.k-location-button{
  position:absolute;top:0;bottom:0;right:var(--k-location-inset,4px);display:grid;place-items:center;width:28px;height:28px;margin:auto 0;padding:0;
  border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .15s ease,color .15s ease;
}
.k-location-button::before{
  content:"";width:18px;height:18px;background:currentColor;transition:transform .15s cubic-bezier(.22,1,.36,1);
  -webkit-mask:url("/icons/ui/map-pin.svg") center/18px no-repeat;mask:url("/icons/ui/map-pin.svg") center/18px no-repeat;
}
.k-location-button::after{content:"";position:absolute;inset:-4px}
.k-location-button:hover:not(:disabled),.k-location-button[aria-expanded="true"]{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.k-location-button:active:not(:disabled)::before{transform:scale(.88)}
.k-location-button:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px var(--focus)}
.k-location-button:disabled{opacity:.6;cursor:default}
@media(forced-colors:active){.k-location-button::before{background:ButtonText}}

/* ── The map popup ── */
.k-map{
  position:fixed;inset:auto;width:360px;margin:0;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);color:var(--text);font-family:var(--font-body,inherit);font-size:14px;line-height:1.4;
  box-shadow:0 16px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
  opacity:0;transform:translateY(-6px) scale(.96);
  transition:opacity .14s ease,transform .14s ease,overlay .14s ease allow-discrete,display .14s ease allow-discrete;
}
.k-map[data-side="top"]{transform:translateY(6px) scale(.96)}
.k-map:popover-open{
  opacity:1;transform:none;
  transition:opacity .2s ease,transform .32s cubic-bezier(.22,1,.36,1),overlay .2s ease allow-discrete,display .2s ease allow-discrete;
}
@starting-style{
  .k-map:popover-open{opacity:0;transform:translateY(-6px) scale(.96)}
  .k-map[data-side="top"]:popover-open{transform:translateY(6px) scale(.96)}
}
.k-map::backdrop{background:transparent}
.k-map:focus{outline:none}

/* Positron's own background colour, so nothing flashes while the tiles come in; the drawn map fades in over it. */
.k-map-view{position:relative;height:280px;background:#f2f3f0;color:#5c5c5c}
.k-map-canvas{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.k-map.is-ready .k-map-canvas{opacity:1}
.k-map-canvas .maplibregl-canvas:focus-visible{outline:none}
.k-map-view:has(.maplibregl-canvas:focus-visible)::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 2px var(--focus)}

/* The pin: its tip is the chosen point, the middle of the map. It lifts while the map moves and drops back when it
   stops; the shadow stays on the ground. */
.k-map-pin{position:absolute;left:50%;top:50%;z-index:2;width:0;height:0;pointer-events:none;forced-color-adjust:none}
.k-map-pin-shadow{position:absolute;left:-7px;top:-3px;width:14px;height:6px;border-radius:50%;background:rgba(24,24,24,.3);filter:blur(1px);transition:transform .34s cubic-bezier(.34,1.56,.64,1),opacity .34s ease}
.k-map-pin-head{position:absolute;left:-18px;top:-32px;width:36px;height:36px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));transition:transform .34s cubic-bezier(.34,1.56,.64,1)}
.k-map-pin-head::before{content:"";position:absolute;inset:0;background:#181818;-webkit-mask:url("/icons/ui/map-pin.svg") center/36px no-repeat;mask:url("/icons/ui/map-pin.svg") center/36px no-repeat}
/* The icon's hole (r 3.25 at 12, 9.75 on its 24 grid), filled white. */
.k-map-pin-head::after{content:"";position:absolute;left:13.125px;top:9.75px;width:9.75px;height:9.75px;border-radius:50%;background:#fff}
.k-map.is-moving .k-map-pin-head{transform:translateY(-10px);transition-duration:.18s;transition-timing-function:cubic-bezier(.22,1,.36,1)}
.k-map.is-moving .k-map-pin-shadow{transform:scale(.7);opacity:.55;transition-duration:.18s;transition-timing-function:ease}

.k-map-status{position:absolute;left:12px;right:12px;top:calc(50% + 20px);z-index:2;display:grid;justify-items:center;gap:6px;text-align:center;font-size:12px;pointer-events:none}
.k-map-status:not([data-kind="loading"],[data-kind="failed"]){display:none}
.k-map-retry{pointer-events:auto;min-height:28px;padding:4px 10px;border:1px solid rgba(24,24,24,.18);border-radius:8px;background:#fff;color:#181818;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.k-map-retry:hover{background:#f0f0f0}
.k-map-retry:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px var(--focus)}

/* MapLibre's buttons, in the app's radius. */
.k-map .maplibregl-ctrl-top-right .maplibregl-ctrl{margin:8px 8px 0 0}
.k-map .maplibregl-ctrl-group{border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.06)}
.k-map .maplibregl-ctrl-group button{width:30px;height:30px}
.k-map .maplibregl-ctrl-group button:first-child{border-radius:8px 8px 0 0}
.k-map .maplibregl-ctrl-group button:last-child{border-radius:0 0 8px 8px}
.k-map .maplibregl-ctrl-group button:only-child{border-radius:8px}
.k-map .maplibregl-ctrl button:focus-visible{box-shadow:0 0 0 2px var(--focus)}
/* MapLibre shows the credits open until the map is first moved, then folds them into the (i); one line at this width. */
.k-map .maplibregl-ctrl-attrib{font-family:inherit;font-size:11px;line-height:18px}

.k-map-foot{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 8px 8px 14px;border-top:1px solid var(--line)}
.k-map-address{flex:1;min-width:0;margin:0;overflow:hidden;color:var(--text);font-size:13px;text-overflow:ellipsis;white-space:nowrap;transition:opacity .15s ease,color .15s ease}
.k-map-address[data-state="pending"]{color:var(--muted)}
.k-map-address[data-state="stale"]{opacity:.45}
.k-map-address[data-state="error"]{color:var(--error-text)}
/* The date picker's "Done" button (date-picker.css .v-picker-footer button:last-child). */
.k-map-use{flex:none;min-height:32px;padding:8px 12px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,opacity .15s ease}
.k-map-use:hover:not(:disabled){background:var(--accent-2)}
.k-map-use:disabled{opacity:.5;cursor:default}
.k-map-use[aria-busy="true"]{cursor:progress}
.k-map-use:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 3px var(--focus-soft),0 0 0 1px var(--focus)}

@media(prefers-reduced-motion:reduce){
  .k-map,.k-map[data-side="top"],.k-map:popover-open{transform:none;transition:opacity .12s ease,overlay .12s ease allow-discrete,display .12s ease allow-discrete}
  @starting-style{.k-map:popover-open,.k-map[data-side="top"]:popover-open{transform:none}}
  .k-map-pin-head,.k-map-pin-shadow,.k-map-canvas{transition:none}
  .k-map.is-moving .k-map-pin-head,.k-map.is-moving .k-map-pin-shadow{transform:none;opacity:1}
}