/* draw-freehand — focused pass (after d16f08d). The search map's top controls as ONE collision-free group, the Draw
   menu (Freehand draw · Place points · Use visible map area), the live freehand ink and the drawing panel's placement.
   Map chrome stays on the light floating-control surface in both themes, like the other search-map controls
   (search-reference.css, draw-area.css). */

/* ---------- Top controls: one grid group (map.tsx layoutTop sets data-layout) ---------- */
/* split (default): row 1 = the left cluster (wrapping inside its own column) + Layers; row 2 = Search this area, centred
   (on phones within the left column, so it never reaches the zoom buttons that sit under Layers there). row: everything
   fits on one line at its natural width, Search this area centred between the clusters. Nothing shrinks into a neighbour. */
html[data-aw-theme] body .aw-sr .aw-msr-ui>div.aw-msr-top{top:18px;left:20px;right:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tl tr" "tc tc";align-items:start;gap:10px 12px}
@media (max-width:767px){html[data-aw-theme] body .aw-sr .aw-msr-ui>div.aw-msr-top{grid-template-areas:"tl tr" "tc ."}}
html[data-aw-theme] body .aw-sr .aw-msr-ui>div.aw-msr-top[data-layout=row]{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"tl tc tr"}
html[data-aw-theme] body .aw-sr .aw-msr-ui>.aw-msr-top>div{position:static;display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;min-width:0;max-width:none;transform:none;pointer-events:none}
html[data-aw-theme] body .aw-sr .aw-msr-ui>.aw-msr-top>div>*{flex:none;pointer-events:auto}
html[data-aw-theme] body .aw-sr .aw-msr-ui>.aw-msr-top>.aw-msr-tl{grid-area:tl}
html[data-aw-theme] body .aw-sr .aw-msr-ui>.aw-msr-top>.aw-msr-tc{grid-area:tc;justify-self:center}
html[data-aw-theme] body .aw-sr .aw-msr-ui>.aw-msr-top>.aw-msr-tr{grid-area:tr;justify-self:end}
@container awmap (max-width:720px){
 html[data-aw-theme] body .aw-sr .aw-msr-ui>div.aw-msr-top{top:12px;left:12px;right:12px;gap:8px}
 html[data-aw-theme] body .aw-sr .aw-msr-ui>.aw-msr-top>div{gap:8px}
}

/* ---------- Draw: a menu button ---------- */
html[data-aw-theme] body .aw-sr .aw-draw-menu-wrap{position:relative;display:flex}
html[data-aw-theme] body .aw-sr .aw-msr-draw{gap:8px!important;padding:0 11px 0 14px!important}
html[data-aw-theme] body .aw-sr .aw-msr-draw>.aw-map-glyph:last-child{width:16px;height:16px;margin-left:-2px;color:#6b7482;transition:transform .15s ease}
html[data-aw-theme] body .aw-sr .aw-msr-draw[aria-expanded=true]>.aw-map-glyph:last-child{transform:rotate(180deg)}
/* A drawing tool is active (the panel is open): the same blue ring as the other pressed map controls. */
html[data-aw-theme] body .aw-sr .aw-msr-draw[data-active]{color:var(--ws-blue)!important;box-shadow:inset 0 0 0 1.5px var(--ws-blue),var(--sr-shadow)!important}
html[data-aw-theme] body .aw-sr .aw-draw-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:8;display:grid;gap:2px;width:max-content;min-width:264px;max-width:320px;padding:6px;border-radius:10px;background:#fff;box-shadow:0 14px 36px rgba(16,24,40,.24),0 1px 3px rgba(16,24,40,.14)}
html[data-aw-theme] body .aw-sr .aw-draw-menu>button{display:grid!important;grid-template-columns:24px minmax(0,1fr);align-items:center;column-gap:12px;width:100%!important;height:auto!important;min-height:54px!important;margin:0!important;padding:8px 12px 8px 10px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:#151b26!important;box-shadow:none!important;text-align:left;font:400 14px/1.3 var(--ws-font)!important;cursor:pointer}
html[data-aw-theme] body .aw-sr .aw-draw-menu>button:hover{background:#f3f6fb!important}
html[data-aw-theme] body .aw-sr .aw-draw-menu>button:focus-visible{outline:2px solid var(--ws-blue)!important;outline-offset:-2px!important;background:#f3f6fb!important}
html[data-aw-theme] body .aw-sr .aw-draw-menu>button[aria-checked=true]{background:#eef3fe!important;box-shadow:inset 3px 0 0 var(--ws-blue)!important}
html[data-aw-theme] body .aw-sr .aw-draw-menu .aw-map-glyph{width:22px;height:22px;color:var(--ws-blue)}
html[data-aw-theme] body .aw-sr .aw-draw-menu strong{display:block;color:#151b26;font:600 15px/1.25 var(--ws-font)}
html[data-aw-theme] body .aw-sr .aw-draw-menu small{display:block;margin-top:2px;color:#5b6472;font:400 13.5px/1.3 var(--ws-font)}
html[data-aw-theme] body .aw-sr .aw-draw-menu-sep{height:1px;margin:4px 8px;background:#e3e7ec}
@media (pointer:coarse){html[data-aw-theme] body .aw-sr .aw-draw-menu>button{min-height:58px!important}}
/* An open top-control popover (the Draw menu, Layers) sits above the selected-listing preview card (z-index 5) and the
   stack picker, so its choices are never hidden behind them. */
html[data-aw-theme] body .aw-sr .aw-msr-ui:has(.aw-draw-menu,.aw-sr-pop){z-index:7}
@container awmap (max-width:560px){
 /* Icon-only Draw on narrow maps (draw-area.css hides the label): no disclosure arrow either. */
 html[data-aw-theme] body .aw-sr .aw-msr-draw{padding:0!important}
 html[data-aw-theme] body .aw-sr .aw-msr-draw>.aw-map-glyph:last-child{display:none}
}

/* ---------- Freehand ink: the live line while the pointer is down (SVG above the canvas, below the controls) ---------- */
html[data-aw-theme] body .aw-sr .aw-fh-ink{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
html[data-aw-theme] body .aw-sr .aw-fh-ink polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}
html[data-aw-theme] body .aw-sr .aw-fh-ink .aw-fh-casing{stroke:#fff;stroke-width:7;stroke-opacity:.92}
html[data-aw-theme] body .aw-sr .aw-fh-ink .aw-fh-line{stroke:#1b2a5e;stroke-width:3.2}
/* On release the closed stroke fades while the map draws the simplified outline (or the refused stroke in red). */
html[data-aw-theme] body .aw-sr .aw-fh-ink[data-done]{opacity:0;transition:opacity .22s ease .12s}
@media (prefers-reduced-motion:reduce){html[data-aw-theme] body .aw-sr .aw-fh-ink[data-done]{transition:none}html[data-aw-theme] body .aw-sr .aw-msr-draw>.aw-map-glyph:last-child{transition:none}}

/* ---------- Drawing panel placement ---------- */
/* Tablet Both (a narrow map beside the results, expand + zoom at its bottom right): the bottom sheet stops short of them.
   Phones move zoom to the top right (search-reference.css), so the sheet keeps the full width there. */
@media (min-width:768px){@container awmap (max-width:560px){html[data-aw-theme] body .aw-sr .aw-msr-ui>div.aw-draw-panel{right:70px}}}
/* Narrow sheets (tablet Both, phones) sit above the Mapbox logo and attribution instead of covering them. */
@container awmap (max-width:560px){html[data-aw-theme] body .aw-sr .aw-msr-ui>div.aw-draw-panel{bottom:34px}}
@media (max-width:767px){html[data-aw-theme] body .aw-sr .aw-msr-ui>div.aw-draw-panel{bottom:34px}}
/* Freehand keeps one width through armed → drawing → preview, so its buttons never jump under the pointer. */
html[data-aw-theme] body .aw-sr .aw-msr-ui>div.aw-draw-panel[data-mode=freehand]{width:min(440px,calc(100% - 150px))}
@container awmap (max-width:560px){html[data-aw-theme] body .aw-sr .aw-msr-ui>div.aw-draw-panel[data-mode=freehand]{width:auto}}
@media (max-width:767px){html[data-aw-theme] body .aw-sr .aw-msr-ui>div.aw-draw-panel[data-mode=freehand]{width:auto}}