/* Layout: one-screen map app. Map fills the screen; a quick dock of sighting buttons sits at the bottom;
   bottom sheets slide up for the selected house or sighting; a full-screen menu holds lists, settings, account and backup. */

/* Typefaces are bundled (fonts/, SIL OFL) so they load offline and without a third-party font server. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/ibm-plex-sans-400-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-italic-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-condensed-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-condensed-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-condensed-italic-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-condensed-italic-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/newsreader-500-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/newsreader-italic-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #F8F6F3; --bg-2: #FFFFFF; --fg: #221F2B; --muted: #6B6577; --line: #DDD8E2;
  --accent: #6A4CD6; --accent-ink: #FFFFFF; --accent-soft: #EEE9FB;
  --ground: #EAE7E1; --road: #FFFFFF; --road-edge: #89837C; --bldg: #D1CCC4; --bldg-edge: #ABA59C;
  --park: #D3E3C4; --park-edge: #D3E3C4; --water: #BCD4E6; --water-edge: #BCD4E6; --label: #2F2B36; --halo: #EAE7E1;
  --hover: #EAE7E1;   /* chrome hover and active backgrounds: the map ground colour, kept apart so high contrast can change the map alone */
  --good: #2E8B4F; --warn: #D08A00; --bad: #C4402E; --pub: #1C8577; --res: #B0611A; --res-soft: #FBEADB; --good-text: #26733F; --bad-text: #A3301F;
  --good-soft: #DCEFE1; --warn-soft: #F8EBC7; --bad-soft: #F6DAD4; --pub-soft: #DDF1EC;
  --me: #1E88E5; --bad-ink: #FFFFFF; --pub-ink: #FFFFFF;
  --shadow: 0 6px 24px rgba(34,31,43,.16), 0 1px 3px rgba(34,31,43,.10);
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-label: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #18161F; --bg-2: #211E2A; --fg: #ECE8F2; --muted: #A29CAE; --line: #342F40;
    --accent: #B6A3FF; --accent-ink: #1A1230; --accent-soft: #2B2440;
    --ground: #1D1A25; --road: #2D2937; --road-edge: #6A6478; --bldg: #3B3646; --bldg-edge: #564F63;
    --park: #223527; --park-edge: #223527; --water: #1D3140; --water-edge: #1D3140; --label: #DCD6E5; --halo: #1D1A25; --hover: #1D1A25;
    --good: #4FC77B; --warn: #F2C14E; --bad: #EF6E58; --pub: #5CCBB0; --res: #E8A062; --res-soft: #3A2A1B; --good-text: #4FC77B; --bad-text: #EF6E58;
    --good-soft: #1E3A2A; --warn-soft: #3D3214; --bad-soft: #42231D; --pub-soft: #1B3630;
    --me: #64B5F6; --bad-ink: #2A0F0A; --pub-ink: #0E2A24;
    --shadow: 0 6px 24px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #18161F; --bg-2: #211E2A; --fg: #ECE8F2; --muted: #A29CAE; --line: #342F40;
  --accent: #B6A3FF; --accent-ink: #1A1230; --accent-soft: #2B2440;
  --ground: #1D1A25; --road: #2D2937; --road-edge: #6A6478; --bldg: #3B3646; --bldg-edge: #564F63;
  --park: #223527; --park-edge: #223527; --water: #1D3140; --water-edge: #1D3140; --label: #DCD6E5; --halo: #1D1A25; --hover: #1D1A25;
  --good: #4FC77B; --warn: #F2C14E; --bad: #EF6E58; --pub: #5CCBB0; --res: #E8A062; --res-soft: #3A2A1B; --good-text: #4FC77B; --bad-text: #EF6E58;
  --good-soft: #1E3A2A; --warn-soft: #3D3214; --bad-soft: #42231D; --pub-soft: #1B3630;
  --me: #64B5F6; --bad-ink: #2A0F0A; --pub-ink: #0E2A24;
  --shadow: 0 6px 24px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  color-scheme: dark;
}
/* High-contrast map (Settings → High-contrast map, html[data-hcmap]): map tokens only; the app chrome keeps its theme (it hovers on --hover).
   The dark blocks must define every property the light block does, or the light value leaks into dark. */
:root[data-hcmap="true"] { --ground: #F4F2EE; --road: #FFFFFF; --road-edge: #5F596B; --bldg: #E2DDD5; --bldg-edge: #4B4656; --park: #CFE6BF; --park-edge: #5E8A4A; --water: #B5D3EC; --water-edge: #3D6F9A; --label: #000000; --halo: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root[data-hcmap="true"]:not([data-theme="light"]) { --ground: #0B0A0F; --road: #524C61; --road-edge: #8F889F; --bldg: #26222E; --bldg-edge: #BDB5CB; --park: #0F3A1C; --park-edge: #4E9A5E; --water: #0B2E4A; --water-edge: #4A8CC4; --label: #FFFFFF; --halo: #000000; }
}
:root[data-hcmap="true"][data-theme="dark"] { --ground: #0B0A0F; --road: #524C61; --road-edge: #8F889F; --bldg: #26222E; --bldg-edge: #BDB5CB; --park: #0F3A1C; --park-edge: #4E9A5E; --water: #0B2E4A; --water-edge: #4A8CC4; --label: #FFFFFF; --halo: #000000; }

html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 15px; line-height: 1.4; overflow: hidden; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ---- top bar ---- */
#topbar {
  position: relative; z-index: 2000; display: flex; align-items: center; gap: 8px;
  padding-top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 8px); padding-bottom: 8px;
  padding-left: max(12px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); padding-right: max(12px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px)));
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.brand .paw { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.brand .paw svg { width: 18px; height: 18px; fill: var(--accent-ink); }
.brand h1 { font-family: var(--font-display); font-size: 23px; font-weight: 600; margin: 0; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.brand h1 span { color: var(--accent); }
.sh-title, .menu-head h2, .wel-title { font-family: var(--font-display); font-weight: 500; letter-spacing: -.005em; }
.search { position: relative; flex: 1 1 120px; min-width: 0; }
.search input { width: 100%; padding: 8px 10px 8px 32px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); color: var(--fg); font-size: 15px; }
.search input::placeholder { color: var(--muted); }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; pointer-events: none; }
#results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 50; max-height: 50vh; overflow: auto; }
#results li button { width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; display: flex; align-items: center; gap: 10px; }
#results li button:hover, #results li button.active { background: var(--hover); }
#results .empty { padding: 10px; color: var(--muted); font-size: 13px; }
#results li button .hit-text { min-width: 0; overflow-wrap: anywhere; }
#results li button small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }   /* 1.11.0: what the result is, and how far */
.ibtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ibtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ibtn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ibtn .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: var(--bad-ink); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.ibtn { position: relative; }

/* ---- map ---- */
#mapWrap { position: relative; flex: 1 1 auto; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--ground); font-family: var(--font-body); }
.leaflet-container { background: var(--ground); outline: 0; font-family: var(--font-body); }
.leaflet-container .leaflet-control-attribution { background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--muted); font-size: 10px; }
.leaflet-container .leaflet-control-attribution a { color: var(--accent); }
.leaflet-bottom.leaflet-right { bottom: calc(var(--dock-h, 92px)); right: max(0px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))); }
.leaflet-bar { border: 1px solid var(--line); box-shadow: var(--shadow); }
.leaflet-bar a { background: var(--bg-2); color: var(--fg); border-bottom-color: var(--line); }
.leaflet-bar a:hover, .leaflet-bar a:focus { background: var(--hover); color: var(--fg); }
.leaflet-bar a.leaflet-disabled { background: var(--bg); color: var(--muted); }
.leaflet-top.leaflet-left { top: 10px; left: max(10px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); }
.leaflet-container.placing { cursor: crosshair; }
.leaflet-interactive { cursor: pointer; }
.dark-tiles .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg); }   /* 1.11.0: no brightness/contrast cut, so raster house numbers keep 4.8:1 instead of 3.7:1 */
.lbl-wrap, .hn-wrap, .stk-wrap, .sgt-wrap, .me-wrap { background: none; border: 0; }
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--font-label); font-style: italic; font-weight: 500; font-size: 11px; color: var(--label); text-shadow: -1px 0 var(--halo), 1px 0 var(--halo), 0 -1px var(--halo), 0 1px var(--halo), 0 0 3px var(--halo); pointer-events: none; transform-origin: 0 0; }   /* a crisp ring: casings and outlines crossing a name stay off its letters */
.lbl.major { font-style: normal; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.leaflet-container[data-z="14"] .lbl:not(.major), .leaflet-container[data-z="15"] .lbl:not(.major) { display: none; }
.leaflet-container[data-z="18"] .lbl, .leaflet-container[data-z="19"] .lbl, .leaflet-container[data-z="20"] .lbl, .leaflet-container[data-z="21"] .lbl { font-size: 14px; }
html:not([data-hcmap="true"]) .tiles-on .lbl, html:not([data-hcmap="true"]) .tiles-on .hn:not(.hn-w) { display: none; }   /* the street map’s own names and numbers are showing instead (not in high contrast, or offline) */
.hn { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--font-label); font-weight: 600; font-size: 10px; color: var(--fg); text-shadow: 0 0 2px var(--bldg), 0 0 2px var(--bldg); pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.leaflet-container[data-z="19"] .hn, .leaflet-container[data-z="20"] .hn, .leaflet-container[data-z="21"] .hn { font-size: 13px; }
.hn.hn-w { background: var(--bg-2); border-radius: 4px; padding: 0 3px; text-shadow: none; opacity: 1; }   /* wide-area numbers sit on a chip, not a building */
@supports (background: color-mix(in srgb, red 50%, transparent)) { .hn.hn-w { background: color-mix(in srgb, var(--bg-2) 85%, transparent); } }   /* iOS 15 and WebView < 111 keep the opaque chip: there a color-mix() holding var() still parses, then computes to transparent */
html[data-hcmap="true"] .lbl, html[data-hcmap="true"] .hn { color: var(--label); font-style: normal; font-weight: 600; text-shadow: -1.5px 0 var(--halo), 1.5px 0 var(--halo), 0 -1.5px var(--halo), 0 1.5px var(--halo), -1px -1px var(--halo), 1px -1px var(--halo), -1px 1px var(--halo), 1px 1px var(--halo), 0 0 3px var(--halo); }   /* upright 600: the bundled Plex Condensed 600, offline too */
html[data-hcmap="true"] .leaflet-container .lbl { font-size: 14px; }
html[data-hcmap="true"] .leaflet-container .hn { font-size: 13px; }   /* larger text (workspace.css, 0,4,1) still wins */
html[data-hcmap="true"] .hn.hn-w { background: var(--halo); }
.hc-inside .leaflet-tile-pane { visibility: hidden; }   /* high contrast inside the built-in map: the app draws every street, so the raster is hidden rather than half-covered */
@media (forced-colors: active) { .lbl, .hn { forced-color-adjust: none; } }   /* keep the halo and the map colours: the canvas map underneath is not forced */
.stk { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 1px; padding: 2px 5px; border-radius: 999px; background: var(--bg-2); border: 1.5px solid var(--line); box-shadow: 0 1px 4px rgba(0,0,0,.25); font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer; }
.stk.pub { border-color: var(--pub); }
.stk.sel { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.stk.other { border-style: dashed; }
.stk .n { font-family: var(--font-label); font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.sgt { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); width: 34px; height: 34px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--bg-2); border: 2.5px solid var(--warn); box-shadow: 0 2px 6px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sgt > span { rotate: 45deg; font-size: 18px; line-height: 1; }
.sgt.coyote { border-color: var(--bad); } .sgt.snake { border-color: var(--bad); } .sgt.loose { border-color: var(--warn); } .sgt.skunk { border-color: var(--warn); } .sgt.other { border-color: var(--muted); }
.sgt.sel { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent), 0 2px 6px rgba(0,0,0,.3); }
.sgt.fading { opacity: .55; }
.me { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 22px; height: 22px; }
.me-dot { position: absolute; inset: 3px; border-radius: 50%; background: var(--me); border: 2.5px solid #fff; box-shadow: 0 0 0 2px rgba(30,136,229,.35), 0 1px 4px rgba(0,0,0,.4); }
.me-arrow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid var(--me); transform-origin: 50% 100%; transform: translate(-50%, -100%) translateY(-9px) rotate(var(--hd, 0deg)); opacity: 0; }
.me.heading .me-arrow { opacity: .9; }
.me-stale .me-dot { background: var(--muted); }
.act-pop .leaflet-popup-content-wrapper { background: var(--bg-2); color: var(--fg); border-radius: 12px; box-shadow: var(--shadow); padding: 4px; }
.act-pop .leaflet-popup-content { margin: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.act-pop .leaflet-popup-tip { background: var(--bg-2); }
.act-pop button { text-align: left; padding: 9px 10px; border-radius: 8px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.act-pop button:hover { background: var(--hover); }
.act-pop .leaflet-popup-close-button { display: none; }
/* Map-tap actions always have a visible exit. Reserve a row for the touch-sized X. */
.act-pop.map-action-pop .leaflet-popup-content { margin-top: 44px; }
.act-pop.map-action-pop .leaflet-popup-close-button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; top: 2px; right: 2px; color: var(--fg); font-size: 26px; line-height: 1; border-radius: 8px; }
.act-pop.map-action-pop button { min-height: 44px; }
.act-pop.map-action-pop.compact .leaflet-popup-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(380px, calc(100vw - 146px)) !important; min-width: 0; margin: 6px 50px 6px 6px; }   /* overrides Leaflet's measured width; narrow enough to fit between the auto-pan paddings (12 px left, 70 px right), so the ✕ never sits under the map buttons */
.act-pop.map-action-pop.compact button { line-height: 1.25; overflow-wrap: anywhere; }
.act-pop.map-action-pop .map-action-cancel { justify-content: center; border-top: 1px solid var(--line); color: var(--muted); }
.pop-title { padding: 6px 8px 2px; font-weight: 600; overflow-wrap: anywhere; }   /* 1.11.0: a search result's name */
.act-pop.map-action-pop:not(.compact) .pop-title { margin-top: -40px; min-height: 36px; padding-right: 46px; }   /* in the band beside the ✕ */
.act-pop.map-action-pop.compact .pop-title { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* two lines at most, so a long name never pushes the actions under the walk bar (it is whole in the search box) */
.act-pop.map-action-pop.compact.titled:not(.one-row) .leaflet-popup-content { width: min(424px, calc(100vw - 102px)) !important; margin-right: 6px; }   /* a search result: the ✕ sits beside the title, so the actions take the popup's full width (the same overall width), two lines each rather than three: a two-line name at 16px (larger text) still fits above the walk bar at 320×568 */
.act-pop.map-action-pop.compact.titled:not(.one-row) .pop-title { min-height: 36px; padding-right: 46px; }   /* the band beside the ✕, as in a column: the first row of actions starts below it */
.act-pop.map-action-pop.compact.one-row .leaflet-popup-content { display: flex; flex-flow: row wrap; width: min(560px, calc(100vw - 146px)) !important; }   /* a search result on a landscape phone: the title, then every action in one row, so it fits above the walk bar */
.act-pop.map-action-pop.one-row .pop-title { flex: 0 0 100%; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line: a long name stays whole in the search box above */
.act-pop.map-action-pop.one-row .leaflet-popup-content > button, .act-pop.map-action-pop.one-row .pop-busy { flex: 1 1 0; min-width: 0; }
.act-pop .pop-busy { display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: var(--muted); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }   /* 1.11.0: an area download runs (the area bar is hidden under a search result's actions) */
.act-pop.map-action-pop .pop-busy { min-height: 44px; }
.act-pop.map-action-pop .leaflet-popup-close-button:focus-visible, .act-pop.map-action-pop .map-action-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }


/* floating map controls */
#fabs { position: absolute; right: max(10px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))); top: 10px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.fab { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; }
.fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fab.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.fab.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); } }
#hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 1000; pointer-events: none; max-width: calc(100% - 130px); padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--bg-2) 94%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hint b { color: var(--fg); font-weight: 600; }
#alert { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 1700; width: min(420px, calc(100% - 24px)); padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); color: var(--fg); border: 1px solid var(--bad); box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; font-size: 14px; }
#alert .em { font-size: 22px; flex: none; }
#alert .t { min-width: 0; flex: 1; }
#alert .t b { display: block; }
#alert .t span { color: var(--muted); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.35; }

/* ---- quick dock ---- */
#dock { position: relative; z-index: 20; background: var(--bg); border-top: 1px solid var(--line); padding-top: 8px; padding-bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px); padding-left: max(10px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); padding-right: max(10px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))); }
#dock .dock-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 560px; margin: 0 auto; }
.qb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); font-size: 11.5px; font-weight: 600; line-height: 1.1; }
.qb .em { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.qb:active { background: var(--hover); }
.qb.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---- sheets ---- */
.sheet { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1100; width: min(520px, 100%); max-height: 78%; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: var(--shadow); }
.sheet-body { overflow: auto; padding: 12px 16px calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 14px); padding-left: max(16px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); padding-right: max(16px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))); }
.grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto 0; flex: none; }
.sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sh-title { font-size: 22px; line-height: 1.15; text-wrap: balance; }
.sh-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.sh-sub button { color: var(--accent); font-weight: 500; }
.xbtn { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: none; font-size: 16px; }
.xbtn:hover { background: var(--hover); color: var(--fg); }
.done { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 7px 16px; font-weight: 600; font-size: 14px; flex: none; margin-top: 2px; }
.done:active { opacity: .85; }
.sh-foot .meta.ok { color: var(--good-text); font-weight: 500; }   /* 1.11.0: small green text at 4.5:1 or more */
.hd-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.save-state { font-size: 11.5px; color: var(--muted); min-height: 14px; white-space: nowrap; }
.save-state.ok { color: var(--good-text); font-weight: 500; }
@media (max-width: 480px) { .sh-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; } .hd-right { display: contents; } .save-state { grid-column: 1 / -1; text-align: right; } .save-state:empty { display: none; } }   /* 1.11.0: on a phone (480px covers the big ones) the state ('Saved on device · will retry') has its own line under the title and Done, never the title's room */
.sec { margin-top: 12px; }
.sec-h { font-family: var(--font-label); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.stickers { display: flex; flex-wrap: wrap; gap: 6px; }
.stb { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 58px; padding: 6px 2px 5px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-size: 10.5px; color: var(--muted); font-weight: 500; }
.stb .em { font-size: 22px; line-height: 1; }
.stb.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--fg); }
.comments { display: flex; flex-direction: column; gap: 6px; }
.cm { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.cm .txt { white-space: pre-wrap; word-break: break-word; }
.cm .when { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.cm .del { color: var(--muted); font-size: 14px; align-self: start; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.cm .del:hover { background: var(--bad-soft); color: var(--bad); }
.addrow { display: flex; gap: 6px; margin-top: 6px; }
.addrow textarea, .addrow input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); resize: none; }
textarea::placeholder, input::placeholder { color: var(--muted); }
.primary { background: var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 8px 14px; font-weight: 600; white-space: nowrap; }
.primary:disabled { opacity: .5; cursor: default; }
.ghost { color: var(--muted); padding: 8px 10px; border-radius: 10px; }
.ghost.danger:hover { background: var(--bad-soft); color: var(--bad); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--bg); }
.seg button { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.seg button.on { background: var(--bg-2); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.seg button.on[data-v="public"] { color: var(--pub); }
.vis-note { color: var(--muted); font-size: 12px; margin-top: 4px; }
.vis-note b { color: var(--pub); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.chip:disabled { opacity: .5; cursor: default; }
.sh-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.sh-foot .meta { margin-left: auto; color: var(--muted); font-size: 12px; }
.other { padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--pub); background: var(--pub-soft); margin-bottom: 6px; }
.other .who { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.other .who b { color: var(--pub); }
.other .ems { font-size: 18px; line-height: 1; }
.ugc { display: flex; gap: 10px; margin-top: 6px; }
.ugc button { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; padding: 2px 0; }
.ugc button:hover { color: var(--bad); }
.countdown { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-expiry, .sg-kept { margin-top: 2px; }
.sgt-note { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); min-height: 54px; resize: vertical; }

/* ---- menu ---- */
#menu { position: fixed; inset: 0; z-index: 3000; background: var(--bg); display: flex; flex-direction: column; }
.menu-head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 10px) max(16px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))) 8px max(16px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); border-bottom: 1px solid var(--line); background: var(--bg); }
.menu-head h2 { font-size: 22px; margin: 0; }
.tabs { display: flex; gap: 4px; padding: 8px max(12px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))) 0 max(12px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: var(--bg); }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 8px 12px; border-radius: 10px 10px 0 0; font-weight: 600; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; }
.tab.on { color: var(--fg); border-bottom-color: var(--accent); }
.menu-body { flex: 1; overflow: auto; padding: 12px max(16px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))) calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 24px) max(16px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); }
.menu-body > section { max-width: 560px; margin: 0 auto; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row { width: 100%; text-align: left; display: grid; grid-template-columns: 44px 1fr auto; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.row:hover { border-color: var(--accent); }
.row .em { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; letter-spacing: -2px; }
.row .em.sg { background: var(--warn-soft); }
.row .addr { font-weight: 600; }
.row .note { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .meta { color: var(--muted); font-size: 12px; margin-top: 2px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row .meta .who { font-weight: 600; }
.row .meta .who.pub { color: var(--pub); }
.row .meta .left { color: var(--warn); font-weight: 600; }
.row .chev { color: var(--muted); font-size: 18px; }
.list .sec-h { margin-top: 6px; }
.walk-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); text-align: left; width: 100%; }
.walk-row b { font-weight: 600; }
.walk-row span { color: var(--muted); font-size: 12.5px; }
.walk-row .dist { font-family: var(--font-display); font-size: 20px; font-variant-numeric: tabular-nums; }
#walkPill { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 1001; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--accent); box-shadow: var(--shadow); font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
#walkPill b { font-family: var(--font-display); font-size: 17px; }
#walkPill .stop { padding: 6px 12px; border-radius: 999px; background: var(--bad); color: var(--bad-ink); font-weight: 600; font-size: 13px; }
#alert.soft { background: var(--warn-soft); border-color: var(--warn); }
#areaBar { position: absolute; left: max(12px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); right: 72px; bottom: 12px; z-index: 1050; max-width: 440px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent); box-shadow: var(--shadow); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'em text close' 'em btn close'; column-gap: 10px; row-gap: 6px; align-items: center; font-size: 13px; }
#areaBar .em { font-size: 22px; grid-area: em; }
#areaBar .t { min-width: 0; grid-area: text; line-height: 1.3; }
#areaBar .primary { grid-area: btn; justify-self: start; }
#areaBar .xbtn { grid-area: close; }
#areaBar .primary { flex: none; padding: 7px 11px; font-size: 13px; }
#areaBar .primary:disabled { opacity: .6; }
.area-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.area-row .t { flex: 1; min-width: 0; }
.area-row .t b { display: block; }
.area-row .t span { color: var(--muted); font-size: 12.5px; }
.wel-hero { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.wel-hero .paw { width: 46px; height: 46px; border-radius: 14px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wel-hero .paw svg { width: 28px; height: 28px; fill: var(--accent-ink); }
.wel-title { font-size: 26px; line-height: 1.05; }
.wel-tag { color: var(--muted); font-size: 14px; }
.wel-item { display: grid; grid-template-columns: 26px 1fr; gap: 8px; margin-top: 12px; }
.wel-item .ic { font-size: 18px; line-height: 1.3; text-align: center; }
.wel-item b { display: block; font-weight: 600; }
.wel-item p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.wel-install { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13.5px; }
.wel-install b { font-weight: 600; }
.hint-line { color: var(--muted); font-size: 12px; margin-top: 4px; }
.coords { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.coords a { color: var(--accent); font-weight: 600; text-decoration: none; }
.resbox { padding: 10px 12px; border-radius: 12px; background: var(--res-soft); border: 1px solid var(--res); }
.resbox .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.resbox .tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; }
.resbox .txt { white-space: pre-wrap; word-break: break-word; }
.resbox .who { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ntText { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); resize: none; }
.chip.on.res { border-color: var(--res); background: var(--res-soft); }
.stk.res { border-color: var(--res); }
.shared-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--pub-soft); color: var(--pub); font-size: 12px; font-weight: 600; margin-top: 6px; }
.empty { color: var(--muted); font-size: 14px; padding: 16px 4px; line-height: 1.5; }
.empty b { color: var(--fg); }
.set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.set .l b { display: block; font-weight: 600; }
.set .l span { color: var(--muted); font-size: 12.5px; }
.set select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); }
.switch { width: 46px; height: 26px; border-radius: 13px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { left: 23px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sbtn { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); font-weight: 500; }
.sbtn:hover { background: var(--hover); }
.card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); margin-bottom: 10px; }
.card h3 { margin: 0 0 4px; font-size: 15px; }
.card p { margin: 4px 0; color: var(--muted); font-size: 13.5px; }
#exportButtons { display: grid; gap: 16px; margin-top: 16px; }
#exportButtons .sec-h { margin: 0 0 8px; }
.export-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.export-group:first-child .export-grid { grid-template-columns: 1fr; }
.export-grid .export-option[data-x="gpx"] { grid-column: 1 / -1; }
.export-option { display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; min-height: 66px; padding: 11px 12px; text-align: left; background: var(--bg); transition: border-color .15s, background .15s, opacity .15s; }
.export-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.export-option:disabled, .export-option[aria-disabled=true] { opacity: .58; cursor: wait; }   /* while a share sheet is open the buttons stay enabled (focus stays on the one pressed): exportData turns presses away */
.export-option .export-icon { width: 22px; height: 22px; flex: none; color: var(--accent); }
.export-option-text { display: block; min-width: 0; }
.export-option strong { display: block; font-size: 14px; line-height: 1.25; }
.export-option small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.card p.export-status { margin-top: 12px; color: var(--accent); font-weight: 600; }
.card p.export-privacy { margin-top: 12px; }
html[data-large=true] .export-option strong { font-size: 16px; }
html[data-large=true] .export-option small { font-size: 14px; }
@media (max-width: 360px) { .export-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.field label { font-size: 12.5px; color: var(--muted); }
.field input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--muted); }
.status-dot.ok { background: var(--good); } .status-dot.warn { background: var(--warn); }

/* ---- pet places (vets, groomers, dog parks) ---- */
.poi-wrap, .walker-wrap { background: none; border: 0; }
.poi { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--muted); box-shadow: 0 1px 4px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; cursor: pointer; }
.poi.evet { border-color: var(--bad); } .poi.vet { border-color: var(--pub); } .poi.groom, .poi.board, .poi.store { border-color: var(--accent); } .poi.park, .poi.trail { border-color: var(--good); }
.poi.sel { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent), 0 1px 4px rgba(0,0,0,.3); }
.row .em.evet { background: var(--bad-soft); } .row .em.vet { background: var(--pub-soft); } .row .em.park, .row .em.trail { background: var(--good-soft); }
.row .dist { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.poi-detail { padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); margin-top: 8px; }
.poi-detail h3 { margin: 0 0 2px; font-size: 17px; }
.poi-detail p { margin: 3px 0; color: var(--muted); font-size: 13.5px; }
.poi-detail .btns a, .poi-detail .btns button { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.poi-detail .back { margin-bottom: 6px; color: var(--accent); font-weight: 600; font-size: 13px; }
.er-call { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); border: 1px solid var(--bad); margin-top: 10px; }
.er-call .t { min-width: 0; flex: 1; font-size: 13px; color: var(--muted); }
.er-call .t b { display: block; color: var(--fg); font-size: 14px; line-height: 1.25; }
.er-call a.call { flex: none; background: var(--bad); color: var(--bad-ink); border-radius: 999px; padding: 8px 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.er-near { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--line); margin-top: 6px; }
.er-near .t { min-width: 0; flex: 1; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.er-call a.call, .er-near a.call { position: relative; } .er-call a.call::after, .er-near a.call::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.er-near a.call { flex: none; border: 1px solid var(--bad); color: var(--fg); border-radius: 999px; padding: 6px 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.chip.on.evet { border-color: var(--bad); background: var(--bad-soft); } .chip.on.park, .chip.on.trail { border-color: var(--good); background: var(--good-soft); }
/* ---- neighbors: live walkers + walk chat ---- */
.walker { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 5px; padding: 2px 9px 2px 2px; border-radius: 999px; background: var(--bg-2); border: 2px solid var(--pub); box-shadow: 0 1px 4px rgba(0,0,0,.3); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.walker .av { width: 22px; height: 22px; border-radius: 50%; background: var(--pub); color: var(--pub-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.walker.stale { opacity: .6; border-style: dashed; }
.av { width: 34px; height: 34px; border-radius: 50%; background: var(--pub); color: var(--pub-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; font-size: 14px; }
.outrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); margin-bottom: 6px; }
.outrow .t { min-width: 0; flex: 1; }
.outrow .t b { display: block; }
.outrow .t span { color: var(--muted); font-size: 12px; }
.chat { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow: auto; padding: 4px 2px; }
.msg { max-width: 90%; padding: 7px 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); align-self: flex-start; }
.msg.mine { align-self: flex-end; background: var(--accent-soft); border-color: transparent; }
.msg .who { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.msg .who b { color: var(--pub); }
.msg.mine .who b { color: var(--accent); }
.msg .txt { white-space: pre-wrap; word-break: break-word; }
.msg .q { font-size: 12px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 6px; margin-bottom: 3px; }
.msg .acts { display: flex; gap: 10px; margin-top: 3px; }
.msg .acts button { font-size: 11.5px; color: var(--muted); }
.msg .acts button:hover { color: var(--fg); }
.composer { display: flex; gap: 6px; margin-top: 8px; align-items: flex-end; }
.composer textarea { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); resize: none; max-height: 90px; }
.replyto { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; gap: 8px; align-items: center; }
.replyto button { color: var(--accent); font-weight: 600; }
.sharebox { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--pub-soft); border: 1px solid var(--pub); margin-top: 6px; }
.sharebox .l b { display: block; font-weight: 600; }
.sharebox .l span { color: var(--muted); font-size: 12.5px; }
.sharebox.off { background: var(--bg); border-color: var(--line); }
#nearBtn .badge.quiet { background: var(--pub); }
.livepill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--pub); font-weight: 600; }
.livepill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pub); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* ---- in-app dialog ---- */
dialog.ask { border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--bg-2); color: var(--fg); box-shadow: var(--shadow); width: min(420px, calc(100% - 32px)); max-width: none; }
dialog.ask::backdrop { background: rgba(20, 16, 30, .45); }
dialog.ask form { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
dialog.ask h2 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; margin: 0; letter-spacing: -.005em; overflow-wrap: anywhere; }
dialog.ask p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
dialog.ask label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
dialog.ask input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font-size: 16px; min-height: 46px; }
dialog.ask label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--fg); font-size: 14px; line-height: 1.4; min-height: 44px; cursor: pointer; }
dialog.ask label.check input { order: -1; flex: none; width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; accent-color: var(--accent); }
.ask-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ask-actions button { min-height: 44px; }
#askOk.danger { background: var(--bad); color: var(--bad-ink); }

#toast { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 1400; padding: 9px 14px; border-radius: 10px; background: var(--fg); color: var(--bg); font-size: 13.5px; box-shadow: var(--shadow); width: max-content; max-width: min(560px, calc(100% - 32px)); text-align: center; pointer-events: none; }   /* the full width for a long message (left: 50% alone would halve it); taps go through to the map */

@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: rise .18s ease-out; }
  @keyframes rise { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
}
@media (min-width: 900px) {
  #dock .dock-row { grid-template-columns: repeat(5, 110px); }
}

#poiBar { position: absolute; left: max(12px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); right: 72px; bottom: 12px; z-index: 1050; max-width: 440px; padding: 7px 8px 7px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--accent); box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; font-size: 13px; }
#poiBar .em { font-size: 18px; flex: none; }
#poiBar .t { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#poiBar .sbtn { flex: none; padding: 6px 11px; font-size: 13px; min-height: 32px; }
#poiBar .xbtn { flex: none; }

/* ---- 1.10.0: walk totals, deletable walk rows, a past walk on the map, the sign-in password toggle, sharing ---- */
.walk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
.walk-stats > div { min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
.walk-stats span { display: block; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.walk-stats b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.walk-stats small { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; }
.walk-item { display: flex; align-items: stretch; gap: 6px; }
.walk-item .walk-row { flex: 1; min-width: 0; }
.walk-item.shown .walk-row { border-color: var(--accent); }
.walk-del { flex: none; width: 44px; min-height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-size: 15px; }
.walk-del:hover, .walk-del:focus-visible { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
#walkView { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 1001; width: min(440px, calc(100% - 140px)); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--accent); box-shadow: var(--shadow); }
#walkView .em { flex: none; font-size: 18px; }
#walkView .t { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
#walkView .t b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#walkView .t span { color: var(--muted); font-variant-numeric: tabular-nums; }
#walkView .xbtn { width: 40px; height: 40px; }
.pass-wrap { position: relative; display: flex; }
.pass-wrap input { flex: 1; min-width: 0; padding-right: 66px; }
.pass-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 6px 10px; border-radius: 8px; color: var(--accent); font-weight: 600; font-size: 13px; }
#authMsg:empty { display: none; }
body.walk-view #hint { visibility: hidden; }
.coord-actions { display: inline-flex; align-items: center; gap: 14px; flex: none; }
.share-btn { color: var(--accent); font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.share-btn::before { content: '↗'; content: '↗' / ''; font-size: 13px; }   /* 1.11.0: the glyph is not read as part of the name (Share); engines without CSS alt text (iOS before 17.4) keep the first declaration */
/* 1.11.0: a note with no map position (saved at 0,0) says so and offers Place pin; Move pin is a plain button, not a share link */
.loc-warn { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); border: 1px solid var(--warn); color: var(--fg); }
.loc-warn p { margin: 0 0 8px; font-size: 13px; }
.coords.unplaced { color: var(--fg); font-weight: 600; }
.move-btn { padding: 6px 12px; font-size: 12.5px; font-weight: 600; }
.row .meta .unplaced { color: var(--fg); font-weight: 600; }
.stk.shared-pin { border-color: var(--accent); border-width: 2px; font-size: 18px; padding: 4px 7px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent), 0 1px 4px rgba(0,0,0,.25); }
/* 1.11.0: a sighting that is really something lasting becomes a ⚠️ place note; the row sits under the expiry choices */
.hazard-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; font-size: 13px; }
.hazard-row .sbtn { flex: none; font-size: 13px; font-weight: 600; }