/* Tokay "Change location" picker (area.js). Colours come only from Halite --h-* / Gecko --salt-* /
   --tokay-spot tokens, so light and dark both follow the page theme. Square corners; orange is
   only the pin's pupil and the small store dots. Buttons are the Tokay button system. */

.tk-area-scrim{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  background:var(--h-shadow);box-shadow:inset 0 0 0 100vmax var(--h-shadow);
  opacity:0;transition:opacity .16s var(--h-ease,ease)}
.tk-area-scrim.is-open{opacity:1}
.tk-area-scrim.is-closing{opacity:0}

.tk-area.h-root{position:relative;box-sizing:border-box;width:min(1120px,calc(100vw - 48px));height:min(720px,calc(100dvh - 48px));
  display:grid;grid-template-columns:clamp(340px,34%,380px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"top map" "foot map";background:var(--h-surface);color:var(--h-text);
  border:1px solid var(--h-line-strong);box-shadow:0 30px 80px var(--h-shadow);outline:none;
  transform:scale(.985);transition:transform .16s var(--h-ease,ease);overflow:hidden}
.tk-area-scrim.is-open .tk-area.h-root{transform:none}

/* ---------- left column ---------- */
.tk-area-top{grid-area:top;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--h-line)}
.tk-area-foot{grid-area:foot;display:flex;flex-direction:column;gap:12px;padding:20px;border-top:1px solid var(--h-line);border-right:1px solid var(--h-line)}
.tk-area-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 8px 6px 20px}
.tk-area-title{margin:0;font-size:19px;font-weight:600;line-height:1.25}
.tk-area-fieldwrap{padding:8px 20px 0}
.tk-area-label{display:block;margin-bottom:8px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--h-muted)}
.tk-area-field{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;background:var(--h-surface-2,var(--salt-bg));
  border:1px solid var(--h-line-strong);color:var(--h-muted)}
.tk-area-field:focus-within{border:2px solid var(--h-brand);padding:0 13px}
.tk-area-input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font:inherit;font-size:16px;color:var(--h-text);border-radius:0}
.tk-area-input::placeholder{color:var(--h-muted);opacity:.8}
.tk-area-results{margin-top:10px;min-height:0;display:flex;flex-direction:column}
.tk-area-list{list-style:none;margin:0;padding:0;overflow:auto;min-height:0;overscroll-behavior:contain}
.tk-area-list[hidden],.tk-area-msg[hidden]{display:none}
.tk-area-opt{display:flex;gap:12px;align-items:flex-start;padding:12px 20px;cursor:pointer;min-height:44px;box-sizing:border-box}
.tk-area-opt>svg{flex:none;margin-top:2px;color:var(--h-muted)}
.tk-area-opt[aria-selected="true"]{background:var(--h-brand-soft)}
.tk-area-opt[aria-selected="true"]>svg{color:var(--h-brand)}
.tk-area-opttxt{min-width:0;display:flex;flex-direction:column;gap:1px}
.tk-area-opttxt b{font-weight:600;overflow-wrap:anywhere}
.tk-area-optsub{font-size:13.5px;color:var(--h-muted);overflow-wrap:anywhere}
.tk-area-msg{margin:0;padding:6px 20px 8px;font-size:14px;color:var(--h-muted)}
.tk-area-mine{margin:auto 20px 0;padding-top:10px;border-top:1px solid var(--h-line)}
.tk-area-top>.tk-area-results+.tk-area-mine{margin-top:14px}
.tk-area-mine .h-button.tk-btn{padding-left:0;padding-right:10px;justify-content:flex-start}
.tk-area-mine .h-button.tk-btn[aria-pressed="true"]{color:var(--h-text)}
.tk-area-mine .h-button.tk-btn:disabled{opacity:.5}
.tk-area-top>.tk-area-results{flex:0 1 auto}
.tk-area-mine{margin-top:14px}

.tk-area-within{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;color:var(--h-muted)}
.tk-area-seg{display:flex}
.tk-area-radio{box-sizing:border-box;min-width:56px;height:36px;padding:0 12px;margin-left:-1px;background:transparent;border:1px solid var(--h-line-strong);
  color:var(--h-text);font-family:var(--h-mono);font-size:13px;border-radius:0;cursor:pointer;touch-action:manipulation}
.tk-area-radio:first-child{margin-left:0}
.tk-area-radio[aria-checked="true"]{background:var(--h-brand-soft);border-color:var(--h-brand);position:relative;z-index:1}
.tk-area-radio:focus-visible,.tk-area-input:focus-visible{outline:2px solid var(--h-brand);outline-offset:2px}
.tk-area-input:focus-visible{outline:0}

/* ---------- map ---------- */
.tk-area-map{grid-area:map;position:relative;overflow:hidden;background:var(--salt-bg);min-width:0;min-height:0}
.tk-area-canvas,.tk-area-map .tk-area-canvas.maplibregl-map{position:absolute;inset:0}
.tk-area-canvas .maplibregl-canvas{outline:none}
.tk-area-canvas .maplibregl-canvas:focus-visible{outline:2px solid var(--h-brand);outline-offset:-2px}
.tk-area-canvas .maplibregl-ctrl-attrib{background:var(--h-surface);color:var(--h-muted);font:11px var(--h-font)}
.tk-area-canvas .maplibregl-ctrl-attrib a{color:var(--h-muted)}
.tk-area-canvas .maplibregl-ctrl-attrib-button{background-color:var(--h-surface)}
.tk-area-chip{position:absolute;z-index:2;margin:0;padding:10px 14px;box-sizing:border-box;background:var(--h-surface);border:1px solid var(--h-line-strong);
  font-size:14px;line-height:1.3;color:var(--h-text);max-width:calc(100% - 96px)}
.tk-area-chip[hidden]{display:none}
.tk-area-hint{left:20px;top:20px}
.tk-area-count{left:20px;bottom:28px;display:flex;gap:8px;align-items:center}
.tk-area-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--tokay-spot)}
.tk-area-num{font-family:var(--h-mono)}
.tk-area-zoom{position:absolute;z-index:2;right:20px;top:20px;display:flex;flex-direction:column;gap:-1px}
.tk-area-zoom .h-button.tk-btn{--bh:44px;margin-top:-1px}
.tk-area-zoom .h-button.tk-btn:first-child{margin-top:0}
.tk-area-maperr{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;max-width:min(360px,calc(100% - 40px));color:var(--h-muted)}
.tk-area-map.is-failed .tk-area-pin,.tk-area-map.is-failed .tk-area-ground{display:none}

/* ---------- the gecko-eye pin: tip sits on the map centre ---------- */
.tk-area-pin{position:absolute;z-index:2;left:50%;top:50%;width:40px;height:55.4px;margin:-53.9px 0 0 -20px;pointer-events:none;overflow:visible}
.tk-area-ring{fill:var(--h-surface);stroke:var(--h-text);stroke-width:7}
.tk-area-stem{stroke:var(--h-text);stroke-width:3;fill:none}
.tk-area-pupil{fill:var(--tokay-spot);transform-box:fill-box;transform-origin:center;transition:transform .2s var(--h-ease,ease)}
.tk-area-pinbody{transition:transform .2s var(--h-ease,ease)}
.tk-area-ground{position:absolute;z-index:1;left:50%;top:50%;width:9px;height:3px;margin:-1px 0 0 -4.5px;border-radius:50%;background:var(--h-text);opacity:.35;pointer-events:none}
/* Magic move: while the map is dragged the pin lifts and the pupil narrows; on release it settles. */
.tk-area-map.is-drag .tk-area-pinbody{transform:translateY(-6px)}
.tk-area-map.is-drag .tk-area-pupil{transform:scaleX(.3)}

.tk-area-sr,.tk-area-probe{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .tk-area-scrim,.tk-area.h-root,.tk-area-pupil,.tk-area-pinbody{transition:none}
  .tk-area-scrim.is-open .tk-area.h-root{transform:none}
  .tk-area-map.is-drag .tk-area-pinbody,.tk-area-map.is-drag .tk-area-pupil{transform:none}
}

/* ---------- phone: full-screen sheet sliding up ---------- */
@media (max-width:719.98px){
  .tk-area-scrim{display:block;box-shadow:none}
  .tk-area.h-root{position:fixed;inset:0;width:100%;height:100dvh;border:0;box-shadow:none;
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "map" "foot";
    transform:translateY(100%);transition:transform .22s var(--h-ease,ease)}
  .tk-area-scrim.is-open .tk-area.h-root{transform:none}
  .tk-area-scrim.is-closing .tk-area.h-root{transform:translateY(100%)}
  .tk-area-top{position:relative;z-index:5;border-right:0;border-bottom:1px solid var(--h-line);padding-top:env(safe-area-inset-top)}
  .tk-area-head{padding:4px 4px 0 16px}
  .tk-area-title{font-size:17px}
  .tk-area-fieldwrap{padding:0 16px}
  .tk-area-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
  .tk-area-results{margin-top:0;position:absolute;left:0;right:0;top:100%;z-index:6;background:var(--h-surface);border-bottom:1px solid var(--h-line-strong)}
  .tk-area-results:not(:has(:not([hidden]))){display:none;border:0}
  .tk-area-list{max-height:min(320px,42dvh)}
  .tk-area-opt{padding:12px 16px}
  .tk-area-msg{padding:12px 16px}
  .tk-area-mine{margin:4px 16px 4px;padding-top:0;border-top:0}
  .tk-area-top>.tk-area-results+.tk-area-mine{margin-top:4px}
  /* 44 px touch target for the compact text button between 481 and 719 px */
  .tk-area-mine .h-button.tk-btn.is-sm{min-height:44px}
  .tk-area-foot{border-right:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:10px}
  .tk-area-radio{flex:1;height:44px;min-width:0}
  .tk-area-seg{flex:1;max-width:260px}
  .tk-area-hint{left:12px;top:12px;padding:8px 12px;font-size:13px;max-width:calc(100% - 84px)}
  .tk-area-zoom{right:12px;top:12px}
  .tk-area-count{left:12px;bottom:28px;padding:8px 12px;font-size:13px}
}
@media (max-width:719.98px) and (prefers-reduced-motion:reduce){
  .tk-area.h-root{transition:none}
}