/* Crophalo's setup map: the tools, the action bar and the dock at the foot, the view stack, the pin, the lines of a drawing and an outline, its handles, the chip and the cross,
   over the Leaflet canvas. Only the tokens of css/app.css are used here: no colour is written in this file. */
.mapcol { overflow: hidden; }
.mapx { position: relative; width: 100%; height: 100%; min-height: inherit; border-radius: inherit; overflow: hidden; background: var(--map-ph); container-type: size; container-name: mapx; outline: none; }
.mapx:focus-visible { box-shadow: inset 0 0 0 3px var(--sel); }
.mapx:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 9; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--sel); pointer-events: none; }   /* the ring drawn over the map's own layers, which would hide it */
.mapx-canvas { position: absolute; inset: 0; background: var(--map-ph); z-index: 0; }
.mapx-canvas .leaflet-container { background: var(--map-ph); font: inherit; }
.mapx.full { position: fixed; inset: 0; z-index: var(--z-mapfull); border-radius: 0; }
body.mapx-full .nav { display: none; }

/* the bars at the top left: the tools (the icon always, the word from a 480 px map), Satellite and Light, About this spot; never under Places and Layers */
.mapx-top { position: absolute; left: var(--space-8); top: var(--space-8); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); max-width: calc(100% - 72px - var(--mapx-right-w, 0px)); }
@container mapx (max-width: 470px) { .mapx-top { max-width: calc(100% - 72px); } }
/* ONE kind of switch (the design system's .seg): an opaque grey track, so the chosen item's white raised thumb and dark heavier words read at a glance on the photo, on the white toolbar and on a phone in sun */
.mapx-seg, .mapx-base { background: linear-gradient(var(--fill), var(--fill)), var(--bar); box-shadow: var(--shadow-map); }
.mapx-seg button:is([aria-pressed=true]), .mapx-base button:is([aria-pressed=true]) { box-shadow: var(--shadow-thumb); }
.mapx-seg button:not([aria-pressed=true]), .mapx-base button:not([aria-pressed=true]) { color: var(--ink2); }
/* The chosen part of every switch on the map and the spot card is ONE clear look: filled with the app's blue, white bold words, and a tick before the words of the text-only switches (so it is not colour alone); the others are plain grey words on the grey track. Blue on the grey track is about 4.4 to 1 */
.mapx-seg, .mapx-base, .spot-tabs.seg { --seg-thumb: var(--accent); }
.mapx-seg button:is([aria-pressed=true]), .mapx-base button:is([aria-pressed=true]), .spot-tabs [role=tab][aria-selected=true] { color: var(--accent-ink); font-weight: 700; box-shadow: none; }
.mapx-seg button:is([aria-pressed=true]) .ic { color: var(--accent-ink); }
.mapx-base button:is([aria-pressed=true])::before, .spot-tabs [role=tab][aria-selected=true]::before { content: "\2713"; margin-right: 4px; font-weight: 700; }
@container mapx (max-width: 400px) { .mapx-base button:is([aria-pressed=true])::before { content: none; } }   /* on the narrowest maps the blue fill and the bold words carry it, so the switch stays clear of Places */
.mapx-seg button:not([aria-pressed=true]), .mapx-base button:not([aria-pressed=true]), .spot-tabs [role=tab][aria-selected=false] { color: var(--ink2); font-weight: 500; }
.spot-tabs [role=tab][aria-selected=true] { background: var(--accent); }
.mapx-seg button, .mapx-base button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--touch); min-width: var(--touch); }
/* The switch is 44 px high OUTSIDE, like the pills beside it: the track has no padding, each button fills its whole height (a full 44 px touch target) and the white raised thumb is the button's inner part, 2 px inside (radius 7 inside the track's 9) */
.mapx-seg, .mapx-base, .spot-tabs.seg { padding: 0; gap: 0; }
.mapx-seg button, .mapx-base button, .spot-tabs [role=tab] { box-sizing: border-box; min-height: var(--touch); border: 2px solid transparent; background-clip: padding-box; border-radius: var(--r-seg); }
.mapx-seg button:disabled, .mapx-base button:disabled { opacity: .4; cursor: default; }
.mapx-seg .ic { width: 18px; height: 18px; }
@container mapx (max-width: 479px) { .mapx-seg .mapx-w { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mapx-seg button { padding-inline: 0; } }
.mapx .mapbtn { position: relative; }

/* the dock at the foot of the map: the action bar, then the scale on the left and the photo's credit on the right; nothing in it covers anything else */
.mapx-dock { position: absolute; left: 0; top: calc(100cqh - 2 * var(--space-8) - env(safe-area-inset-bottom, 0px)); width: calc(100cqw - 2 * var(--space-8)); transform: translateY(-100%); z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }   /* it follows the tools in the page, so the Tab order is tools then bar; the map's own size (cqh, cqw) puts it at the map's foot */
.mapx-dock > * { pointer-events: auto; }
.mapx-hint { display: flex; flex-direction: column; gap: 6px; max-width: min(560px, 100%); padding: 6px var(--space-12) var(--space-8); border-radius: var(--r2); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow-map); font-size: var(--fs-small); }
@container mapx (max-width: 599px) { .mapx-hint { align-self: stretch; max-width: none; } }
.mapx-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-8); min-width: 0; margin: 0; overflow-wrap: anywhere; }
.mapx-line > span:first-child { flex: 1 1 14em; min-width: 0; }
.mapx.refused .mapx-line { box-shadow: inset 3px 0 0 var(--bad); padding-left: var(--space-8); }   /* a refused step: the words carry it, the mark only points at them */
.mapx-hint-btns { display: flex; flex-wrap: wrap; gap: 6px var(--space-8); }
.mapx-hint-btns:not(:has(button:not([hidden]))) { display: none; }
.mapx-hint .btn { min-height: var(--touch); }
.mapx-hint .btn .ic { width: 16px; height: 16px; }
.mapx-hint [data-act=precise][aria-pressed=true] { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent); }
.mapx-result { display: grid; gap: 2px; }
.mapx-result[hidden] { display: none; }
.mapx-big { margin: 0; font-size: 24px; font-weight: var(--fw-bold); letter-spacing: var(--ls-title); line-height: 1.15; font-variant-numeric: tabular-nums; }
.mapx-second { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-8); margin: 0; color: var(--ink2); font-variant-numeric: tabular-nums; }
.mapx-second .chip.on { background: var(--accent-soft); color: var(--accent-text); }
.mapx-foot { align-self: stretch; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px var(--space-8); pointer-events: none; }
.mapx-foot > * { pointer-events: auto; }
.mapx-foot .leaflet-control-scale { margin: 0; }
.mapx .leaflet-control-scale-line { min-height: 22px; box-sizing: border-box; line-height: 20px; padding: 1px 6px; border: 0; border-radius: 4px; background: var(--glass); color: var(--ink); font-size: 12px; box-shadow: var(--shadow-map); }
.mapx .leaflet-control-scale-line + .leaflet-control-scale-line { margin-top: 2px; }
/* the credit is one tidy line, the same height as the scale beside it; a tap opens the whole of it (and the links) */
.mapx-credit { max-width: min(68%, 560px); margin: 0 0 0 auto; padding: 1px 6px; border-radius: 4px; background: var(--glass); color: var(--ink2); font-size: 12px; line-height: 20px; min-height: 22px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: var(--shadow-map); }
.mapx-credit[data-open="true"] { white-space: normal; line-height: 1.35; max-width: min(92%, 560px); }
/* every link of the credit is a 24 px target (WCAG 2.5.8); on a narrow map the credit wraps and is read whole, in two or three lines of 24 px, rather than cut with an ellipsis */
.mapx-credit a { display: inline-block; min-height: 24px; line-height: 24px; }
@container mapx (max-width: 519px) { .mapx-credit, .mapx-credit[data-open] { max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; cursor: default; } }
@media (prefers-reduced-transparency: reduce) { .mapx-seg, .mapx-base, .mapx-hint, .mapx-stack, .mapx-chip, .mapx-len { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* the view stack: five buttons down the right edge, a thicker divider before the third */
.mapx-stack { position: absolute; right: var(--space-8); top: var(--space-8); z-index: 5; display: flex; flex-direction: column; gap: 2px; border-radius: var(--r2); overflow: hidden; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow-map); }
.mapx-stack button { display: grid; place-items: center; width: var(--touch); height: var(--touch); padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.mapx-stack button + button { box-shadow: 0 -.5px 0 var(--sep); }
.mapx-stack button:nth-child(3) { box-shadow: 0 -2px 0 var(--sep); }
.mapx-stack button[aria-pressed=true], .mapx-stack button[aria-busy=true] { background: var(--accent-soft); color: var(--accent-text); }
.mapx-stack button:focus-visible, .mapx-top button:focus-visible, .mapx-hint button:focus-visible, .mapx-change:focus-visible { outline: 3px solid var(--sel); outline-offset: -3px; }
.mapx-stack button[aria-busy=true] .ic { animation: spin 1s linear infinite; }
@media (hover: hover) { .mapx-stack button:hover { background: var(--fill2); } }

/* the pin: a teardrop with its tip on the spot, in a 44 px target, and a soft shadow at the tip that settles when it lands */
.mapx-pin { background: none; border: 0; pointer-events: auto; cursor: pointer; transition: opacity .16s var(--ease); }
.mapx-pin.carries { cursor: move; }
.mapx-pinbody { position: absolute; left: 7px; top: 11px; display: block; width: 30px; height: 38px; }
.mapx-pinbody svg { display: block; }
.mapx-pinfill { fill: var(--accent); stroke: var(--card); }
.mapx-pinmark { fill: var(--card); }
.mapx-pinshadow { position: absolute; left: 15px; top: 46px; width: 14px; height: 5px; border-radius: 50%; background: var(--ink); opacity: .3; filter: blur(1.5px); }
.mapx-pin:focus-visible { outline: 3px solid var(--sel); outline-offset: 2px; border-radius: 10px; }
.mapx-pin.dim { opacity: .4; pointer-events: none; }   /* while a drawing tool is on: a tap there is a corner, a drag there is a box */
.mapx-pin.lifted .mapx-pinbody { transform: translateY(-48px); transition: transform .12s var(--ease); }   /* a finger holds it: it rises above the finger, its tip on the spot */
.mapx-pin.lifted .mapx-pinshadow { opacity: .12; }
.mapx-pin.landing .mapx-pinbody { animation: mapx-slide .24s var(--ease) both, mapx-fade .12s linear both; }
.mapx-pin.landing .mapx-pinshadow { animation: mapx-settle .12s var(--ease) .24s both; }
.mapx-pin.mapx-leaving { pointer-events: none; animation: mapx-out .12s linear both; }
@keyframes mapx-slide { from { transform: translateY(-14px); } to { transform: none; } }
@keyframes mapx-settle { from { opacity: .12; filter: blur(4px); } to { opacity: .3; filter: blur(1.5px); } }

/* the lines: a navy core over a white halo, so the line reads on stubble, green, woods, road and cloud alike; a drawing is dashed, an outline solid */
.mapx .leaflet-pane > svg { max-width: none; max-height: none; }   /* the drawing's own panes: the page's rule for pictures (100% at most) would squeeze their SVG to nothing */
.mapx .mapx-halo { fill: none; stroke: var(--card); stroke-width: 9px; stroke-opacity: .85; stroke-linecap: butt; stroke-linejoin: round; }
.mapx .mapx-core { fill: none; stroke: var(--shade); stroke-width: 4px; stroke-opacity: 1; stroke-linecap: butt; stroke-linejoin: round; }
.mapx .mapx-core.mapx-dash { stroke-dasharray: 10 7; }
.mapx .mapx-closing { opacity: .55; }
.mapx .mapx-core.bad { stroke: var(--bad); stroke-dasharray: none; }
.mapx .mapx-fillpre { fill: var(--shade); fill-opacity: .08; stroke: none; }
.mapx .mapx-fill { fill: var(--shade); fill-opacity: .15; stroke: none; }
.mapx .mapx-ghost { fill: none; stroke: var(--card); stroke-width: 2px; stroke-opacity: .7; stroke-dasharray: 4 6; }
.mapx .mapx-square.mapx-halo { stroke-width: 4px; stroke: var(--shade); stroke-opacity: 1; }
.mapx .mapx-square.mapx-core { stroke-width: 2px; stroke: var(--card); }
.mapx .mapx-stem.mapx-halo { stroke: var(--shade); stroke-width: 3.5px; stroke-opacity: .55; }
.mapx .mapx-stem.mapx-core { stroke: var(--card); stroke-width: 1.5px; }
.mapx .mapx-dot { fill: var(--card); fill-opacity: 1; stroke: var(--shade); stroke-width: 2px; stroke-opacity: 1; }
.mapx .mapx-ring { fill: none; stroke: var(--accent); stroke-width: 2px; stroke-opacity: 1; }
.mapx .mapx-ring.near { fill: var(--accent-soft); fill-opacity: 1; }
.mapx-lbl { pointer-events: none; }
.mapx-len { display: inline-block; transform: translate(-50%, -50%); padding: 1px 7px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-map); color: var(--ink); font-size: 12px; font-weight: var(--fw-semi); line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mapx-len::before { content: attr(data-text); }
.mapx-x { display: block; width: 18px; height: 18px; transform: translate(-50%, -50%); background: linear-gradient(45deg, transparent 7.5px, var(--bad) 7.5px 10.5px, transparent 10.5px), linear-gradient(-45deg, transparent 7.5px, var(--bad) 7.5px 10.5px, transparent 10.5px); filter: drop-shadow(0 0 1.5px var(--card)); }
.mapx-lbl.mapx-xgo { animation: mapx-xgo .76s linear both; }
@keyframes mapx-xgo { 0%, 79% { opacity: 1; } to { opacity: 0; } }

/* the corner handles of an outline being changed: a 14 px disc in a 44 px button; shade on hover, never size; the chosen one filled */
.mapx-hicon, .mapx-micon { pointer-events: none; }
.mapx-handle { pointer-events: auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: grab; }
.mapx-handle i { width: 14px; height: 14px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 2.5px var(--accent), var(--shadow-map); }
@media (hover: hover) { .mapx-handle:hover i { background: var(--accent-soft); } }
.mapx-handle[aria-pressed=true] i { background: var(--accent); box-shadow: 0 0 0 2.5px var(--card), var(--shadow-map); }
.mapx-handle:focus-visible { outline: 3px solid var(--sel); outline-offset: 2px; }
.mapx-mid { pointer-events: auto; display: grid; place-items: center; width: 44px; height: 44px; cursor: copy; }
.mapx-mid i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--card); opacity: .9; box-shadow: 0 0 0 1.5px var(--accent); }
.mapx-mid i::before, .mapx-mid i::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent); }
.mapx-mid i::before { width: 6px; height: 1.5px; margin: -.75px 0 0 -3px; }
.mapx-mid i::after { width: 1.5px; height: 6px; margin: -3px 0 0 -.75px; }
.mapx.dragging .mapx-handle, .mapx.dragging .leaflet-container { cursor: grabbing; }
.mapx-hicon.mapx-lift { transition: transform .12s var(--ease); }   /* a finger's corner rises 48 px above it once, then follows the finger 1:1 */

/* the live area chip: a glass pill with the area in both units, by the pointer for a mouse and in the bar for a finger, the keys or Precise */
.mapx-chip { position: absolute; left: 0; top: 0; z-index: 7; padding: 3px 10px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow-map); color: var(--ink); font-size: 13px; font-weight: var(--fw-semi); line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.mapx-chip.in-bar { position: static; padding: 2px 9px; box-shadow: 0 0 0 .5px var(--sep); }
.mapx-chip[hidden] { display: none; }
.mapx-chip.bad { box-shadow: inset 0 0 0 2px var(--bad); }
.mapx-chip.bad::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -.5px; background: linear-gradient(45deg, transparent 3.5px, var(--bad) 3.5px 5.5px, transparent 5.5px), linear-gradient(-45deg, transparent 3.5px, var(--bad) 3.5px 5.5px, transparent 5.5px); }

/* the cross: where Space and the bar's step button put a point. In the middle of the free part of the map; shown for the keys and for Precise, never while the pin or a corner has focus */
.mapx-cross { position: absolute; left: var(--cross-x, 50%); top: var(--cross-y, 50%); z-index: 4; display: none; width: 36px; height: 36px; margin: -18px 0 0 -18px; pointer-events: none;
  background: linear-gradient(to right, var(--card) 0 15px, transparent 15px 21px, var(--card) 21px) center / 100% 2px no-repeat, linear-gradient(to bottom, var(--card) 0 15px, transparent 15px 21px, var(--card) 21px) center / 2px 100% no-repeat; filter: drop-shadow(0 0 1.5px var(--ink)); }
.mapx.cross-on .mapx-cross { display: block; }

/* the cursor says what a press does */
.mapx[data-tool=rect] .leaflet-container, .mapx[data-tool=poly] .leaflet-container, .mapx.no-pin[data-tool=pin] .leaflet-container { cursor: crosshair; }
.mapx[data-state=closing] .leaflet-container { cursor: pointer; }
.mapx.crossing .leaflet-container { cursor: not-allowed; }

/* the later steps on a phone: a strip that only shows the field, with one button back to it */
.mapx-change { display: none; }
.mapx.strip .mapx-change { position: absolute; left: var(--space-8); top: var(--space-8); z-index: 5; display: inline-flex; min-height: var(--touch); }
.mapx.strip :is(.mapx-top > .mapx-seg, .mapx-top > .mapx-base, #mapxAbout, .mapx-hint, .mapx-stack, .mapx-right, .mapx-lcol, .mapx-panelhost, .mapx-cross, .mapx-chip) { display: none !important; }
/* the small strip of the later setup steps: the picture, the pin and the outline, and one short credit line; no date card, no scale, no note */
.mapx.strip :is(.mapx-pic, .mapx-basenote, .leaflet-control-scale) { display: none !important; }
.mapx.strip .mapx-credit { max-width: calc(100% - var(--space-16)); margin: 0 var(--space-8) var(--space-8) auto; }
/* the drawing view of a phone (the full-screen map): while drawing, and while the outline drawn there is shown and changed, only the tools, the view stack
   and the dock show, so the outline has the room (the rest comes back after Use for my report or Exit) */
.mapx.drawview:is([data-state=armed], [data-state=drawing], [data-state=closing], [data-state=finished], [data-state=editing]) :is(.mapx-base, #mapxAbout, .mapx-right, .mapx-lcol, .mapx-panelhost, .mapx-stack [data-view=here]) { display: none; }
.mapx-stack button.over { display: none; }   /* a stack that would run into a tall bar (the largest text on a short phone) */
.mapx.full.fading { animation: mapx-fade .16s linear both; }
/* while a field is drawn or changed, the sentence about missing names (it shows offline, or when tiles do not answer) steps aside: it would cover corners and take their taps */
.mapx:is([data-state=drawing], [data-state=closing], [data-state=finished], [data-state=editing]) .mapx-basenote { display: none; }   /* not while the Rectangle is merely armed: it always is, with no Pin tool, and the credit and the status line must stay */
/* a corner or the field dragged towards the card stays in sight: the card fades back while the hand moves, and returns when it lets go */
.mapx .spot { transition: opacity .16s linear; }
.mapx.dragging .spot { opacity: .25; pointer-events: none; }

/* a short map: only zoom stays of the stack */
@container mapx (max-height: 330px) { .mapx-stack button:nth-child(n+3) { display: none; } }

/* the spot card: white, 340 px, over the map; along the bottom of a narrow map, above the dock; on the right of a wide map for a closed outline */
.spot { position: absolute; z-index: 8; display: flex; flex-direction: column; width: 340px; max-width: calc(100% - 16px); max-height: calc(100% - 64px); border-radius: var(--r1); background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden; outline: none; }
.spot:focus-visible { outline: 3px solid var(--sel); outline-offset: 2px; }
.spot.spot-in { animation: spot-in .24s var(--ease) backwards; }   /* backwards: once in, the card's own opacity rules again (it fades back while a corner is dragged) */
@keyframes spot-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.spot.bottom { max-height: 58%; width: auto; }
.spot-head { display: flex; align-items: center; gap: var(--space-8); padding: 6px 8px 6px 4px; box-shadow: 0 .5px 0 var(--sep); cursor: grab; touch-action: none; }
.spot-head h2 { flex: 1 1 auto; min-width: 0; font-size: var(--fs-headline); overflow-wrap: anywhere; }   /* an h2: the card follows the setup's h1 in the page */
.spot-grip { display: grid; grid-template-columns: repeat(2, 4px); gap: 3px; align-content: center; justify-content: center; width: var(--touch); height: var(--touch); flex: none; border-radius: var(--r3); cursor: grab; }
.spot-grip i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink2); }
.spot-grip:focus-visible { outline: 3px solid var(--sel); outline-offset: -3px; }
.spot-head .btn { min-height: var(--touch); }
.spot-tabs.seg { display: flex; flex-wrap: nowrap; margin: 6px 8px; width: calc(100% - 16px); }   /* the same switch as the map's: a grey track and a white raised thumb */
.spot-tabs [role=tab] { flex: 1 1 0; }
.spot-tabs [role=tab][aria-selected=true] { background: var(--seg-thumb); color: var(--ink); font-weight: var(--fw-semi); box-shadow: var(--shadow-thumb); }
.spot-panel { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--space-12) var(--space-16) var(--space-16); font-size: var(--fs-row); }
.spot-panel > * + * { margin-top: var(--space-8); }
.spot-wait { display: flex; align-items: center; gap: var(--space-8); color: var(--ink2); }
.spot-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8); }
.spot-temp { font-size: var(--fs-number); font-weight: var(--fw-bold); letter-spacing: var(--ls-title); }
.spot-calm { padding: var(--space-8) var(--space-12); border-radius: var(--r3); background: var(--fill2); }
.spot-calm.ok { background: var(--good-soft); color: var(--good); } .spot-calm.no { background: var(--warn-soft); color: var(--warn); }
.spot-days { padding: 0; list-style: none; }
.spot-days li { display: flex; flex-wrap: wrap; gap: 2px var(--space-8); padding: 6px 0; box-shadow: 0 -.5px 0 var(--sep); }
.spot-days li b { min-width: 36px; }
.spot-rows { display: grid; gap: 0; }
.spot-rows > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--space-12); padding: 7px 0; box-shadow: 0 -.5px 0 var(--sep); }
.spot-rows dt { color: var(--ink2); } .spot-rows dd { font-weight: var(--fw-medium); text-align: right; }
.spot-big { font-size: 34px; font-weight: var(--fw-bold); letter-spacing: var(--ls-title); font-variant-numeric: tabular-nums; }
.spot-second { color: var(--ink2); font-variant-numeric: tabular-nums; }
.spot-panel .spot-second { margin-top: 0; }
.spot .btnrow .btn { min-height: var(--touch); }
.srcnote { display: grid; gap: 4px; padding: var(--space-8) var(--space-12); border-radius: var(--r3); background: var(--card2); box-shadow: inset 0 0 0 .5px var(--sep); font-size: var(--fs-caption); }
.srcnote[hidden] { display: none; }
@container mapx (max-width: 519px) { .mapx.spot-open[data-state=idle] .mapx-stack, .mapx.spot-open[data-state=idle] .mapx-hint { display: none !important; } }

/* the base switch (Satellite / Light) beside the tools, and the one sentence that says why the names or the detailed light map are missing */
.mapx-base button { padding-inline: var(--space-12); }
.mapx-basenote { position: absolute; left: var(--space-8); top: calc(var(--space-8) + var(--touch) + var(--space-8)); z-index: 4; max-width: min(420px, calc(100% - 88px)); margin: 0; padding: var(--space-8) var(--space-12); border-radius: 12px; background: var(--glass); box-shadow: var(--shadow-map); font-size: var(--fs-small); line-height: 1.35; }
.mapx-basenote[hidden] { display: none; }

/* the buttons at the top right (Places, Layers) and the glass card each opens under them */
.mapx-right { position: absolute; right: calc(var(--space-8) + var(--touch) + var(--space-8)); top: var(--space-8); z-index: 5; display: flex; gap: var(--space-8); }
.mapx-pbtn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); }
.mapx-pbtn .ic, .mapx-search .ic { width: 18px; height: 18px; }
.mapx-pbtn[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); }
.mapx-panelhost { position: absolute; right: calc(var(--space-8) + var(--touch) + var(--space-8)); top: var(--mapx-bars, 64px); z-index: 6; width: 316px; max-width: calc(100% - var(--touch) - 3 * var(--space-8)); max-height: calc(100% - var(--mapx-bars, 64px) - var(--mapx-dock, 96px) - 8px); display: flex; }
.mapx-panelhost:empty { display: none; }
.mapx-panel { flex: 1 1 auto; min-width: 0; overflow-y: auto; border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow-map); padding: var(--space-12); }
.mapx-phead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.mapx-phead h2 { margin: 0; font-size: var(--fs-headline); }
.mapx-pclose { width: var(--touch); height: var(--touch); display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.mapx-pclose .ic { width: 20px; height: 20px; }
.mapx-pclose:focus-visible, .mapx-pbtn:focus-visible, .mapx-row:focus-visible, .mapx-mic:focus-visible { outline: 3px solid var(--sel); outline-offset: -3px; }
.mapx-search { display: flex; align-items: center; gap: var(--space-8); margin-block: var(--space-8); }
.mapx-search input { flex: 1 1 auto; min-width: 0; min-height: var(--touch); padding: 0 var(--space-12); border: 1px solid var(--ctl); border-radius: 12px; background: var(--card); color: inherit; font: inherit; }
.mapx-mic { flex: none; min-width: var(--touch); width: var(--touch); height: var(--touch); display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.mapx-mic.hearing { background: var(--accent); color: var(--accent-ink); }
.mapx-res { margin: 0; }
.mapx-res p { margin: var(--space-4) 0; }
.mapx-sub { margin: var(--space-12) 0 var(--space-4); font-size: var(--fs-small); font-weight: 600; color: var(--ink2); }
.mapx-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.mapx-row { display: grid; width: 100%; min-height: var(--touch); padding: var(--space-8) var(--space-12); text-align: left; border: 1px solid transparent; border-radius: 10px; background: var(--card); color: inherit; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.mapx-row:hover:not(:disabled) { border-color: var(--accent); }
.mapx-row:disabled { opacity: .55; cursor: default; }
.mapx-row span { font-size: var(--fs-small); color: var(--ink2); }
@container mapx (max-width: 810px) { .mapx-pbtn .mapx-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mapx-pbtn { min-width: var(--touch); justify-content: center; } }
@container mapx (max-width: 470px) { .mapx-right { top: calc(var(--space-8) + var(--touch) + var(--space-8)); } }

/* Layers: the rows in the panel, and a legend card for each layer that is on, stacked at the bottom left above the dock */
.mapx-pbtn.has-on { background: var(--accent); color: var(--accent-ink); }
.mapx-lbase { margin: 0 0 var(--space-8); font-size: var(--fs-small); }
.mapx-lbase:empty { display: none; }
.mapx-lset { margin: var(--space-12) 0 0; padding: 0; border: 0; min-width: 0; }
.mapx-lset legend { padding: 0; font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--space-4); }
.mapx-lrow { display: flex; align-items: flex-start; gap: var(--space-8); min-height: var(--touch); padding: var(--space-8) var(--space-12); border-radius: 10px; background: var(--card); cursor: pointer; }
.mapx-lset + .mapx-lset { margin-top: var(--space-16, 16px); padding-top: var(--space-12); box-shadow: 0 -.5px 0 var(--sep); }   /* the two groups, NASA data and Terrain analysis, apart at a glance */
.mapx-setnote { margin: 0 0 var(--space-8); overflow-wrap: anywhere; }
.mapx-lrow > span { min-width: 0; overflow-wrap: anywhere; }
.mapx-lrow.on { background: var(--accent-soft); }
.mapx-lrow.off { opacity: .6; cursor: default; }
.mapx-lrow input { flex: none; margin-top: 3px; width: 20px; height: 20px; accent-color: var(--accent); }   /* never squeezed by a long sub-line */
.mapx-lrow b { display: block; }
.mapx-lrow:has(input:focus-visible) { outline: 3px solid var(--sel); outline-offset: -3px; }   /* the keyboard's ring round the whole row; a tap or a click leaves none (the box keeps its focus while the rows are drawn again) */
.mapx-legends { position: absolute; left: var(--space-8); bottom: max(96px, calc(var(--mapx-foot, 0px) + 30px + var(--space-8))); z-index: 5; width: 288px; max-width: calc(100% - 2 * var(--space-8) - var(--touch) - var(--space-8)); max-height: calc(100% - 160px); overflow-y: auto; display: grid; gap: var(--space-8); }
.mapx-legends[hidden] { display: none; }
.mapx-legend { padding: var(--space-12); border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow-map); font-size: var(--fs-small); }
.mapx-legend header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); }
.mapx-lx { width: var(--touch); height: var(--touch); margin: -10px -10px 0 0; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.mapx-lx .ic { width: 18px; height: 18px; }
.mapx-lx:focus-visible, .mapx-legend button:focus-visible, .mapx-legend input:focus-visible { outline: 3px solid var(--sel); outline-offset: 1px; }
.mapx-bar { height: 12px; margin-top: var(--space-8); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--sep); }
.mapx-ends { display: flex; justify-content: space-between; gap: var(--space-8); margin-top: 2px; font-size: var(--fs-micro); }
.mapx-date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.mapx-date input[type=date] { flex: 1 1 8.5em; min-width: 0; min-height: var(--touch); padding: 0 var(--space-8); border: 1px solid var(--ctl); border-radius: 8px; background: var(--card); color: inherit; font: inherit; }
.mapx-date .btn { min-height: var(--touch); }
.mapx-op { display: flex; align-items: center; gap: var(--space-8); margin-top: var(--space-8); min-height: var(--touch); }
.mapx-op > span { flex: none; }   /* the word Opacity is never broken */
.mapx-op input { flex: 1 1 auto; min-width: 0; min-height: var(--touch); margin: 0; accent-color: var(--accent); }
.mapx-op output { min-width: 3.2em; text-align: right; }
.mapx-lnote, .mapx-imageday { margin: var(--space-4) 0 0; }
.mapx-lnote:empty { display: none; }
@container mapx (max-width: 520px) { .mapx.spot-open .mapx-lcol { display: none; } }

/* one height for the buttons of the top bars, and a left column that keeps the sentence under the bar clear of the legends and the dock */
.mapx-top .mapbtn, .mapx-pbtn { min-height: var(--touch); }
.mapx-lx { flex: none; }
.mapx-panel .btn.sm, .mapx-legend .btn.sm { min-height: var(--touch); }
.mapx-lcol { position: absolute; left: var(--space-8); top: var(--mapx-bars, 64px); bottom: calc(var(--mapx-dock, 88px) + var(--space-8)); z-index: 5; width: min(420px, calc(100% - 2 * var(--space-8) - var(--touch) - var(--space-8))); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-8); pointer-events: none; }
.mapx-lcol > * { pointer-events: auto; }
.mapx:has(.mapx-panel) .mapx-lcol { width: calc(100% - 4 * var(--space-8) - var(--touch) - 316px); }   /* an open panel keeps the sentence and the legends to its left */
@container mapx (max-width: 699px) { .mapx:has(.mapx-panel) .mapx-lcol { display: none; } }   /* no room for both: the panel the farmer opened comes first, the legends come back when it closes */
.mapx-lcol .mapx-basenote { position: static; max-width: none; flex: none; }
.mapx-lcol .mapx-legends { position: static; width: min(288px, 100%); max-width: 100%; max-height: none; min-height: 0; flex: 0 1 auto; }
.mapx-base button { min-height: var(--touch); }
/* a map squeezed very short: only the tools and the view buttons stay, the rest comes back with the height */
@container mapx (max-height: 259px) { .mapx-right, .mapx-base, .mapx-lcol, .mapx-panelhost, #mapxAbout { display: none; } }

.mapx-dots { list-style: none; margin: var(--space-8) 0; padding: 0; display: grid; gap: var(--space-4); font-size: var(--fs-small); }
.mapx-dots li { display: flex; align-items: center; gap: var(--space-8); }
.mapx-dots i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--card); box-shadow: 0 0 0 1px var(--sep); }
.mapx-credit a, .mapx-osm a, .spot-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mapx-credit { pointer-events: auto; }

/* Motion. Full: the tool highlight slides; the pin slides down 14 px as it fades in, then its shadow settles; a new corner's dot fades in; the close is one beat
   (the dashes march once while they seal to solid, the fill fades in, the figure counts up); the result rises 8 to 12 px. Nothing loops, bounces or grows past its size. */
@keyframes mapx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mapx-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mapx-seal { from { stroke-dasharray: 10 7; stroke-dashoffset: 0; } to { stroke-dasharray: 10 0; stroke-dashoffset: -34; } }
@keyframes mapx-grow { from { transform: scale(.75); fill-opacity: 0; } to { transform: none; fill-opacity: 1; } }
@keyframes mapx-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mapx .mapx-core.mapx-seal { animation: mapx-seal .7s var(--ease) both; }
.mapx .mapx-fill.mapx-fillin { animation: mapx-fade .2s var(--ease) .3s both; }
.mapx .mapx-dot.mapx-in { animation: mapx-fade .12s linear both; }
.mapx .mapx-ring.mapx-grow { transform-box: fill-box; transform-origin: center; animation: mapx-grow .12s var(--ease) both; }
.mapx .mapx-fadein { animation: mapx-fade .16s linear both; }
.mapx .mapx-fadeout { animation: mapx-out .16s linear both; pointer-events: none; }
.mapx-hint.rising { animation: mapx-rise .24s var(--ease) both; }
/* Less: every slide becomes a fade of 160 ms or less; the highlight and a lift jump; the map's own zoom jumps (set by script) */
html[data-motion=less] .mapx-seg::before { transition: none; }
html[data-motion=less] :is(.mapx-seg, .mapx-base) button { transition-duration: .16s; }
html[data-motion=less] .mapx-pin.landing .mapx-pinbody, html[data-motion=less] .mapx-pin.landing .mapx-pinshadow { animation: mapx-fade .16s linear both; }
html[data-motion=less] .mapx-pin.mapx-leaving { animation-duration: .16s; }
html[data-motion=less] .mapx-pin.lifted .mapx-pinbody { transition: none; }
html[data-motion=less] .mapx-hint.rising { animation: mapx-fade .16s linear both; }
html[data-motion=less] .spot.spot-in { animation: mapx-fade .16s linear backwards; }
html[data-motion=less] .mapx-stack button[aria-busy=true] .ic { animation: none; }
html[data-motion=reduce] .spot.spot-in, html[data-motion=reduce] .mapx-stack button[aria-busy=true] .ic { animation: none; }

/* forced colours: the system's colours, a line still two-toned, every handle with an edge */
@media (forced-colors: active) {
  .mapx .mapx-core, .mapx .mapx-square.mapx-halo { stroke: CanvasText; }
  .mapx .mapx-halo, .mapx .mapx-square.mapx-core { stroke: Canvas; }
  .mapx .mapx-fill, .mapx .mapx-fillpre { fill: CanvasText; }
  .mapx .mapx-dot { fill: Canvas; stroke: CanvasText; }
  .mapx .mapx-ring { stroke: Highlight; }
  .mapx-handle i, .mapx-mid i, .mapx-pinshadow { forced-color-adjust: none; background: Canvas; box-shadow: 0 0 0 2.5px ButtonText; }
  .mapx-handle[aria-pressed=true] i { background: Highlight; }
  .mapx-chip, .mapx-len, .mapx-hint { border: 1px solid CanvasText; }
  .mapx-cross { forced-color-adjust: none; }
}

@container mapx (max-width: 820px) { .mapx.spot-open .mapx-lcol { display: none; } }   /* a tablet: the card and the left column would share the same room */
@container mapx (min-width: 520px) and (max-width: 820px) { .mapx:has(.mapx-panel) .mapx-lcol { width: min(420px, calc(100% - 392px)); } }   /* an open panel on the right: the left column stops 8 px short of it */
@container mapx (max-width: 470px) { .mapx-right { flex-direction: column; right: calc(var(--space-8) + var(--touch) + var(--space-4)); } }   /* a narrow map: Places and Layers stand in a column beside the zoom buttons, so the wrapped tools on the left never reach them, whatever the text size */

/* the date of the NASA picture, with Earlier and Newest: the third row of the toolbar, with the tools and Satellite / Light */
.mapx-top > .mapx-pic { flex: 1 1 100%; max-width: min(430px, 100%); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); padding: var(--space-4) var(--space-8); border-radius: 10px; background: var(--glass); color: var(--ink); font-size: var(--fs-small); line-height: 1.3; }
.mapx-pic[hidden] { display: none; }
@container mapx (max-width: 470px) { .mapx-top > .mapx-pic { max-width: calc(100cqw - 150px); } }   /* a narrow map: Places and Layers stand in a column beside the zoom buttons; the date bar stops short of them */
.mapx-pic-t { margin: 0; flex: 1 1 200px; }
.mapx-pic-b { display: flex; gap: var(--space-4); }
.mapx-pic .btn { min-height: var(--touch); }   /* the same 44 px room for a finger as every other map control */

/* ---- Layers that come alive. Full plays everything; "Less" (data-motion=less) swaps days without a fade and stills the halo; "Still" (data-motion=reduce) plays nothing by itself. */
@keyframes mapx-reveal { from { opacity: 0; } }
@keyframes mapx-ring { 0% { stroke-opacity: .9; stroke-width: 2px; } 100% { stroke-opacity: 0; stroke-width: 7px; } }
.leaflet-layer.mapx-reveal { animation: mapx-reveal .7s ease-out; }
.leaflet-layer.mapx-xfade { transition: opacity .3s linear; }   /* the cross-fade between two days of a time-lapse (PLAY.fadeMs in js/layeranim.js) */
path.mapx-fire { transition: fill-opacity .5s ease-out, stroke-opacity .5s ease-out; }
path.mapx-firehalo { fill: none; }
path.mapx-firehalo.ring { animation: mapx-ring 1.8s ease-out 3; }   /* rings three times, then stays still: never endless */
html[data-motion=less] .leaflet-layer.mapx-reveal, html[data-motion=reduce] .leaflet-layer.mapx-reveal { animation: none; }
html[data-motion=less] .leaflet-layer.mapx-xfade, html[data-motion=reduce] .leaflet-layer.mapx-xfade, html[data-motion=less] path.mapx-fire, html[data-motion=reduce] path.mapx-fire { transition: none; }
html[data-motion=less] path.mapx-firehalo.ring, html[data-motion=reduce] path.mapx-firehalo.ring { animation: none; }
@media (prefers-reduced-motion: reduce) { .leaflet-layer.mapx-reveal, path.mapx-firehalo.ring { animation: none; } .leaflet-layer.mapx-xfade, path.mapx-fire { transition: none; } }

/* the colour bar with the value at the field */
.mapx-barwrap { position: relative; margin-top: var(--space-8); }
.mapx-barwrap .mapx-bar { margin-top: 0; height: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.7); }
.mapx-mark { position: absolute; top: -5px; width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1.5px #111, 0 1px 4px rgba(0,0,0,.5); transition: left .6s ease-out; pointer-events: none; }
.mapx-mark[hidden] { display: none; }
html[data-motion=less] .mapx-mark, html[data-motion=reduce] .mapx-mark, html[data-motion=less] .gr-band, html[data-motion=reduce] .gr-band { transition: none; }   /* Less and Still: the marker jumps to the new value */
.mapx-here { margin: var(--space-4) 0 0; font-size: var(--fs-small); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mapx-playrow { margin-top: var(--space-8); }
.mapx-playrow .btn { width: 100%; justify-content: center; text-align: center; }
.mapx-playrow .btn[data-playing] { background: var(--accent); color: var(--accent-ink); }   /* playing: the button says Pause */
.mapx-playrow .btn:disabled { opacity: .6; }
/* the legend card, tidy down to a 320 px screen: nothing wider than the card, long words wrap, the controls stack */
.mapx-legend { overflow-wrap: anywhere; min-width: 0; }
.mapx-legend header b { overflow-wrap: anywhere; }
@container mapx (max-width: 380px) {
  .mapx-legends, .mapx-lcol .mapx-legends { width: 100%; }
  .mapx-date { gap: var(--space-4); }
  .mapx-date input[type=date] { flex: 1 1 100%; order: -1; }
  .mapx-date .btn { flex: 1 1 auto; padding-inline: var(--space-8); }
}
/* better contrast over the photo: a firmer card and a white edge on the dots */
.mapx-legend { background: color-mix(in srgb, var(--card, #fff) 88%, transparent); }
path.mapx-fire { filter: drop-shadow(0 0 2px rgba(0,0,0,.55)); }

/* the house loading sign of the map: the same turning ring as everywhere (.dot.busy), at the top in the middle, under the tools */
.mapx-busy { position: absolute; left: 50%; top: calc(var(--mapx-bars, 64px) + var(--space-8)); transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: var(--space-8); margin: 0; padding: 6px var(--space-12); border-radius: 999px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-map); font-size: var(--fs-small); font-weight: var(--fw-semi); pointer-events: none; white-space: nowrap; }
.mapx-busy[hidden] { display: none; }

/* ---- Regional water storage (js/gracelayer.js): the coarse warning, the band of the measurement's uncertainty on the bar, the month row */
.gr-coarse { margin: var(--space-4) 0 0; font-weight: 600; overflow-wrap: anywhere; }
.gr-legend header .gr-i { white-space: nowrap; }
.gr-band { position: absolute; top: 1px; height: 12px; border-radius: 3px; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1.5px rgba(17,17,17,.75); transition: left .6s ease-out, width .6s ease-out; pointer-events: none; }
.gr-band[hidden] { display: none; }
.mapx-ends span:nth-child(2):not(:last-child) { text-align: center; }
.gr-months .btn { flex: 1 1 auto; }
.gr-whole { margin-top: var(--space-8); }
.gr-retry[hidden], .gr-legend .mapx-date[hidden], .gr-legend .mapx-playrow[hidden], .gr-legend .mapx-op[hidden], .gr-whole[hidden] { display: none; }   /* nothing to step through or play until the region's answer has come */
.mapx-progress { margin: var(--space-4) 0 0; font-variant-numeric: tabular-nums; }
.mapx-progress:empty, .mapx-span:empty { display: none; }
.mapx-span { margin: 2px 0 0; }
.mapx-credit-line { margin: var(--space-4) 0 0; font-size: var(--fs-micro); overflow-wrap: anywhere; }
.mapx-seg.slide::before { margin-left: 2px; width: calc(var(--w, 0px) - 4px); }   /* the sliding thumb of the tools, 2 px inside the track on every side */
.mapx-basenote { pointer-events: none; }   /* a status line over the map takes no tap or drag meant for the field under it (on a phone it lay over the middle of the map and swallowed the tap that moves the pin) */
/* the map's status line sits at the bottom edge, in the foot with the scale and the credit: one or two short lines, never over the middle of the map (the first row of the foot is the scale and the credit) */
.mapx-foot .mapx-basenote { position: static; flex: 1 1 100%; order: 5; max-width: none; padding: 2px var(--space-8); border-radius: 6px; font-size: 12px; line-height: 1.3; box-shadow: none; }
.mapx-foot .mapx-basenote[hidden] { display: none; }
/* A narrow map (a phone, and most of all with the largest text): while the Layers or Places panel is open the line of what to do, the credit, the status line and the picture's date bar wait, so the panel and the legends have room; they come back when it closes. The legends keep their own credit lines. */
@container mapx (max-width: 519px) {
  .mapx:has(.mapx-panel) :is(.mapx-hint, .mapx-credit, .mapx-basenote, .mapx-pic) { display: none !important; }
  .mapx:has(.mapx-legend) :is(.mapx-hint, .mapx-credit, .mapx-basenote) { display: none !important; }
}
/* Drawing on a narrow map: the picture's date bar and the credit wait while a drawing tool is on or an outline is open (they come back after), so the field is not buried under them at 320 px with the largest text */
@container mapx (max-width: 519px) {
  .mapx:is([data-state=drawing], [data-state=closing], [data-state=finished], [data-state=editing]) :is(.mapx-pic, .mapx-credit) { display: none !important; }
}

/* grey skeleton lines in the shape of what is coming (js/skeleton.js): the spot card, the Places results and the area block */
.sk-block { display: block; } .sk-lines { display: grid; gap: 10px; padding: var(--space-4) 0; }
.sk-lines .sk.num { height: 30px; }

/* ---- ONE tidy switch (the owner's order): the chosen part is an inset pill: each button is 44 px high (the touch size) with a 3 px transparent border, and its fill stops at the padding box, so the pill has 3 px of free space all round, the track's radius (12) minus the border, the same height and the same 13 px side space as the other part; the words are centred; the tick sits 6 px before the word. */
.mapx-seg, .mapx-base, .spot-tabs.seg { padding: 0; gap: 0; border-radius: 12px; align-items: stretch; box-sizing: border-box; }
.mapx-seg button, .mapx-base button, .spot-tabs.seg [role=tab] { box-sizing: border-box; min-height: 44px; padding: 0 10px; border: 3px solid transparent; background-clip: padding-box; border-radius: 12px; justify-content: center; text-align: center; line-height: 1.2; }
.mapx-seg.slide::before { top: 3px; bottom: 3px; left: 3px; width: calc(var(--w, 0px) - 6px); border-radius: 9px; }
.mapx-base button:is([aria-pressed=true])::before, .spot-tabs.seg [role=tab][aria-selected=true]::before { margin-right: 6px; }
.spot-tabs.seg { display: flex; align-items: stretch; }
.spot-tabs.seg [role=tab] { flex: 1 1 0; display: inline-flex; align-items: center; }
/* the chosen part of every switch: the app's white on the app's blue, bold, whatever else a rule says (4.5 to 1 or better) */
:is(.mapx-seg, .mapx-base, .spot-tabs.seg) :is(button[aria-pressed=true], [role=tab][aria-selected=true]), :is(.mapx-seg, .mapx-base, .spot-tabs.seg) :is(button[aria-pressed=true], [role=tab][aria-selected=true]) * { color: var(--accent-ink) !important; font-weight: 700; }
:is(.mapx-base, .spot-tabs.seg) :is(button[aria-pressed=true], [role=tab][aria-selected=true]) { background: var(--accent); box-shadow: none; }

/* the "Zoom in to choose your field." message: the same pill as the loading sign, near the top centre, with its button (the pill itself takes presses) */
.mapx-far { position: absolute; left: 50%; top: calc(var(--mapx-bars, 64px) + var(--space-8)); transform: translateX(-50%); z-index: 7; display: inline-flex; align-items: center; gap: var(--space-8); margin: 0; padding: 4px 6px 4px var(--space-12); border-radius: 999px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-map); font-size: var(--fs-small); font-weight: var(--fw-semi); white-space: nowrap; max-width: calc(100% - 16px); }
.mapx-far[hidden] { display: none; }
.mapx-far .btn { min-height: 36px; border-radius: 999px; white-space: nowrap; }
.mapx.strip .mapx-far { display: none !important; }
@container mapx (max-width: 419px) { .mapx-far { flex-wrap: wrap; justify-content: center; white-space: normal; border-radius: 16px; text-align: center; } }

/* A field is not a spot: the mark at a chosen place (a search result, "I am at my field", a demo's centre) is a soft target, never a pin to drag. It is gone once an outline is drawn. */
.mapx-pin.target { pointer-events: none !important; }
.mapx-pin.target .mapx-pinbody { display: none; }
.mapx-pin.target::after { content: ""; position: absolute; left: 8px; top: 34px; width: 28px; height: 28px; box-sizing: border-box; border: 3px solid var(--accent); border-radius: 50%; background: rgba(10, 99, 216, .14); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), var(--shadow-map); }
.mapx-pin.target.carries, .mapx.has-ring .mapx-pin { display: none; }