/* Maps (migration 0210 maps; BUILD-SPEC sections 5, 7 and 14; started from money-maps-design/maps/maps.css). The map box is the same
   everywhere: rounded, a thin line, the attribution inside the bottom edge. Plona's own drawing (P.maps.drawPlona) is styled here so dark mode
   follows the app's tokens. */
:root{--map-nb:#F1ECE6;--map-land:#FBF8F4;--map-water:#DCEAF2;--map-line:#C9BFB4;--map-lab:#B5ACA2;--map-ref:#8a837b;--map-tag:#fff;--map-tagline:#E4DED7;--map-tagink:#141414}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--map-nb:#24211e;--map-land:#2c2925;--map-water:#1f2e38;--map-line:#5a534b;--map-lab:#8a837b;--map-ref:#b9b3ab;--map-tag:#1D1B19;--map-tagline:#3a3632;--map-tagink:#F4F1EC}}
:root[data-theme=dark]{--map-nb:#24211e;--map-land:#2c2925;--map-water:#1f2e38;--map-line:#5a534b;--map-lab:#8a837b;--map-ref:#b9b3ab;--map-tag:#1D1B19;--map-tagline:#3a3632;--map-tagink:#F4F1EC}
.pm-wrap{position:relative}
.pm-map{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--map-land);isolation:isolate;height:184px}
.pm-city .pm-map{margin-top:14px}
.pm-exact .pm-map{height:210px;margin-top:10px}
/* go-live 3.5 (Legal, Oct 12): a Google map's logo (bottom left) and attribution (bottom right) are never cropped, so its bottom corners are
   almost square; Legal's line sits under every Google map (maps.js legalNote) */
.pm-map[data-pm=google],.pm-sheetmap[data-pm=google]{border-bottom-left-radius:4px;border-bottom-right-radius:4px}
.pm-legal{margin:6px 2px 0;font-size:12.5px;line-height:1.45;color:var(--sub)}
.pm-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pm-legal[hidden]{display:none}
.pm-market .pm-map{height:calc(100dvh - 230px);min-height:380px;border-radius:0;border-left:0;border-right:0}
.pm-x{position:absolute;right:8px;top:8px;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.12);cursor:pointer;z-index:3}
.pm-city .pm-x{top:22px}
.pm-exact .pm-x{top:18px}
.pm-wait{width:100%;height:100%;background:var(--map-land)}
/* Plona's own drawing */
svg.pd{display:block;width:100%;height:100%}
.pd-nb{fill:var(--map-nb)}.pd-land{fill:var(--map-land)}.pd-lake{fill:var(--map-water);stroke:none}
.pd-line{fill:none;stroke:var(--map-line);stroke-width:1}.pd-st{fill:var(--map-land);stroke:var(--map-line);stroke-width:1}.pd-edge{fill:none;stroke:var(--map-line);stroke-width:1.4}
.pd-stl{font:400 9.5px 'Instrument Sans',Arial,sans-serif;letter-spacing:1.6px;fill:var(--map-lab)}
.pd-cty{letter-spacing:2px}
.pd-dot{fill:var(--map-ref);opacity:.8}.pd-ref{font:600 11px 'Instrument Sans',Arial,sans-serif;fill:var(--map-ref);paint-order:stroke;stroke:var(--map-land);stroke-width:3px;stroke-linejoin:round}
.pd-rt{fill:none;stroke-linecap:round}.pd-rt.sel{stroke:#BF4A0A;stroke-width:2.6;stroke-dasharray:7 7}.pd-rt.oth{stroke:#8A837B;stroke-width:2.2;stroke-dasharray:5 6}.pd-rt.dot{stroke:#8A837B;stroke-width:2.2;stroke-dasharray:1.5 5}
.pd-area{fill:#F26A21;fill-opacity:.16;stroke:#E0611C;stroke-width:1.6}.pd-area.dash{stroke-dasharray:6 5}
.pd-ctr{fill:#BF4A0A;stroke:#fff;stroke-width:1.5}.pd-ctr.oth,.pd-ctr.dot{fill:#fff;stroke:#5A544D;stroke-width:2}.pd-ctr.end{fill:#fff}
.pd-hit{fill:transparent;stroke:transparent;stroke-width:22;cursor:pointer}
.pd-tag rect{fill:var(--map-tag);stroke:var(--map-tagline)}.pd-tag text{font:600 12.5px 'Instrument Sans',Arial,sans-serif;fill:var(--map-tagink)}
.pd-pin.pick path{fill:#fff;stroke:#BF4A0A;stroke-width:2.5}.pd-pin.pick circle{fill:none;stroke:#F26A21;stroke-width:3.2}
.pd-pin.drop path{fill:#141414;stroke:#fff;stroke-width:2}.pd-pin.drop circle{fill:#fff}
/* Google maps: labels and pins as HTML overlays */
.pm-ov{position:absolute;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap}
.pm-ov.pm-p{transform:translate(-50%,-100%)}
.pm-ov.pm-l{transform:translate(-50%,calc(-100% - 14px))}
.pm-ov.pm-under{transform:translate(-50%,10px)}
.pm-tag{display:inline-block;background:#fff;border:1px solid #E4DED7;border-radius:6px;padding:2px 8px;font:600 12.5px 'Instrument Sans',Arial,sans-serif;color:#141414;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pm-dotc{display:block;width:9px;height:9px;border-radius:50%;background:#BF4A0A;border:1.5px solid #fff}
.pm-pin{display:block;overflow:visible}
.pm-pin.pick path{fill:#fff;stroke:#BF4A0A;stroke-width:2.5}.pm-pin.pick circle{fill:none;stroke:#F26A21;stroke-width:3.2}.pm-pin.drop path{fill:#141414;stroke:#fff;stroke-width:2}.pm-pin.drop circle{fill:#fff}
.pm-lpin{background:none;border:0}
/* the bigger map sheet: the same map moves in. Phones keep the sheet's full width (walk.css); wider screens get a centered 960px box */
@media(min-width:700px){dialog.pm-big{width:min(960px,96vw);max-width:none}}
.pm-bigbox .pm-map{height:min(70vh,560px);margin:8px 0 0}
/* posting step 1: "See on map" at the end of the address line, so the step never grows on a phone */
.ps-kind .pm-see{font-size:inherit;font-weight:700;color:var(--ot);min-height:0;padding:0;margin-left:2px;text-decoration:underline;text-underline-offset:2px;display:inline;vertical-align:baseline;line-height:inherit}
.pm-sheet .pm-sheetmap{height:250px;margin:10px 0 4px;border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;background:var(--map-land)}
.pm-sheet .was-p{margin-top:10px}
/* the address list: Google's two lines and the Google Maps logo at the bottom, inside the same box (Places policies) */
.pk ul li.pk-g2 .pk-l b{display:block;font-weight:600}
.pk ul li.pk-g2 .pk-2{display:block;font-size:13.5px;color:var(--sub);font-weight:400}
.pk ul li.pk-pw{justify-content:flex-end;min-height:34px;padding:6px 14px 8px;cursor:default;background:var(--card)}
.pk ul li.pk-pw:hover,.pk ul li.pk-pw[aria-selected=true]{background:var(--card)}
.pk-pw img{height:18px;width:auto;display:block}
.gm-logo{font:500 16px/18px Roboto,Arial,sans-serif;color:#5E5E5E;letter-spacing:-.1px}
.rp-tripmap{margin-top:2px}
.pk-pw .gm-dark{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .pk-pw .gm-light{display:none}:root:not([data-theme=light]) .pk-pw .gm-dark{display:block}}
:root[data-theme=dark] .pk-pw .gm-light{display:none}:root[data-theme=dark] .pk-pw .gm-dark{display:block}
/* the price step: the quiet note when road miles did not load */
.pr-gm{margin:10px 0 0;color:var(--sub);line-height:1.45}   /* go-live 3.5: Legal's miles sentence under Google's road miles */
.pr-est{margin-top:12px;padding:10px 12px;border-radius:var(--r-md);background:var(--warn-bg);color:var(--warn-d);font-size:14.5px;line-height:1.4}
.pr-est .linkbtn{color:inherit;font-weight:700;text-decoration:underline;min-height:24px;padding:0;font-size:inherit;display:inline-flex;vertical-align:baseline}
/* the owner's trip page key under the map */
.pm-key{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:8px 0 0;padding:0;font-size:13.5px;color:var(--sub)}
.pm-key li{display:inline-flex;align-items:center;gap:6px}
.pm-key .k{display:inline-block;width:12px;height:12px;border-radius:50%}
.pm-key .k.o{border:3px solid var(--orange);background:#fff}
.pm-key .k.d{background:var(--ink)}
.pm-key .k.c{width:16px;height:16px;border:1.6px solid #E0611C;background:rgba(242,106,33,.16)}
/* Where to go: the switch under the map */
.pm-row{margin-top:6px}
.pm-row .linkbtn{font-weight:700}
@media(min-width:900px){.pm-city .pm-map{height:260px}.pm-exact .pm-map{height:260px}.pm-market .pm-map{height:calc(100vh - 240px);border-radius:14px;border:1px solid var(--line)}}

/* ---------- 3.5.8: the one-box address (places.js addrHtml; Post a route step 1 and Edit route). Chandon, Oct 16: "fix what we ask and
   how". One question for each place over one Street address box; after a pick, a card with the whole address and Change; "Add apt, unit
   or parking spot" under it; "Can't find it? Type it in" opens Street, City, State and ZIP. The spacing tokens only (DESIGN.md "Spacing"):
   the question 8px over its box, the two places a group apart (--v-group), nothing shrinks by screen height. Colors are tokens, so dark
   mode keeps working. ---------- */
.ab{border:0;padding:0;min-width:0;margin:0 0 calc(var(--v-group) - var(--v-field))}
.ab-q{display:block;font-weight:600;font-size:16px;line-height:1.3;color:var(--ink);margin:0 0 var(--s2);padding:0}
.ab .ab-e{margin:calc(var(--s1) - var(--v-field)) 0 var(--v-field)}
.ab .ab-e:empty{display:none}
.ab[data-mode=manual] .ab-e{margin:0 0 var(--s2)}
/* the Google Maps logo stays in sight at the bottom of a long list (Places policies), over the rows that scroll under it */
.ab ul li.pk-pw{position:sticky;bottom:0;border-top:1px solid var(--line)}
.ab-card{display:flex;align-items:center;gap:var(--s3);min-height:var(--fi-h);margin:0 0 var(--v-field);padding:6px 2px 6px 12px;border:1.5px solid var(--field);border-radius:var(--r-md);background:var(--card)}
.ab-ic{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--tint);color:var(--ot)}
.ab-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ab-a{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ab-a b{font-weight:600;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.ab-a .ab-2{font-size:14px;line-height:1.35;color:var(--sub);overflow-wrap:anywhere}
.ab-a .ab-2:empty{display:none}
.ab-chg{flex:none;font-size:15px;padding:0 10px}
/* 3.5.8 (0289; Chandon, Oct 18: "we need to have the map"): the card's small Google map, beside the address in place of the pin icon once
   its picture has loaded. Shown at the size Google drew it (96x72, the places function's fixed size), never cropped or covered, so Google's
   logo and its words stay as Google draws them. A thin line in the line token around it (light and dark); the picture itself is Google's.
   Square corners (review fix, Oct 18): a 4px rounded corner trimmed about 1px of Google's picture at each corner. */
.ab-map{flex:none;display:block;line-height:0;border:1px solid var(--line);border-radius:0;overflow:hidden;background:var(--wait)}
.ab-map[hidden]{display:none}
.ab-map img{display:block;width:96px;height:72px;max-width:none;object-fit:contain}
.ab-card.ab-hasmap{padding-left:6px;gap:10px}
.ab-card.ab-hasmap .ab-ic{display:none}
.ab-card.ab-hasmap .ab-chg{padding:0 8px}
/* a narrow card (under 340px: the narrowest phones, and Edit route's card inside its panel on a phone): Change goes under the address, so
   the street keeps its words whole beside the map. The card's own width where the browser can tell it (container), the screen's otherwise */
.ab{container:ab / inline-size}
@container ab (max-width:339px){.ab-card.ab-hasmap{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center}
  .ab-card.ab-hasmap .ab-map{grid-row:1 / span 2}.ab-card.ab-hasmap .ab-a{align-self:end}.ab-card.ab-hasmap .ab-chg{justify-self:start;padding:0;margin-top:-6px}}
@supports not (container-type:inline-size){@media(max-width:359px){.ab-card.ab-hasmap{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center}
  .ab-card.ab-hasmap .ab-map{grid-row:1 / span 2}.ab-card.ab-hasmap .ab-a{align-self:end}.ab-card.ab-hasmap .ab-chg{justify-self:start;padding:0;margin-top:-6px}}}
.ab .ab-note{margin:calc(var(--s1) - var(--v-field)) 0 var(--v-field) 2px}
/* the link under the card: its 44px tap area reaches up over the card's margin and edge (nothing to tap there), so the line sits 6px
   under the card and belongs to it. 3.5.8 review fix (better use of space, not tighter packing): nothing pulls the next question up any
   more; when the link is the last thing of a place, a full group gap (--v-group) sits between its words and the next question, so it is
   clear which place it belongs to (on Edit route's typed boxes too, where it comes after the two other links) */
.ab-ul{margin:calc(-1 * var(--v-field) - 6px) 0 0 -6px}
.ab[data-mode=manual] .ab-ul{margin-top:0}
.ab:has(> .ab-u:not([hidden])){margin-bottom:calc(var(--v-group) - var(--s3))}
.ab-ul .linkbtn,.ab-ml .linkbtn{font-size:15px}
.ab-2c{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:var(--s3)}
.ab .ab-found{margin:calc(var(--s1) - var(--v-field)) 0 var(--s1) 2px}
.ab .ab-found svg{flex:none}
.ab .ab-ml{margin:0 0 0 -6px}
.ab .pk-cityok{margin:calc(var(--s1) - var(--v-field)) 0 var(--s1) -6px!important}
/* the list: the way out ("Can't find it? Type it in") as its last row, set apart by a line, and always in sight: it stays at the bottom of
   a list that scrolls (over the Google Maps logo row when Google answered, which stays at the very bottom) */
.pk ul li.pk-tin{border-top:1px solid var(--line);font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.ab ul li.pk-tin{position:sticky;bottom:0;background:var(--card);z-index:1}
.ab ul li.pk-tin.g{bottom:34px}
.ab ul li.pk-tin[aria-selected=true],.ab ul li.pk-tin:hover{background:var(--tint)}
/* Edit route: the label over the box (.field), the same card and links */
.ab-nofi .ab-q{font-size:15px}
.ab-nofi .field{margin-bottom:var(--v-field)}
.ab-nofi .ab-e{margin:calc(var(--s1) - var(--v-field)) 0 var(--v-field)}