/* Maps in the app (owner 2026-10-13; beta "app_maps"): the shared map module's
   look (maps.js). Agent IV's own tokens (styles.css) for the panels — the
   popup, the sheet, the legend follow the theme; the map itself and what
   sits on it stay fixed cream / ink / brass, like the tags on photos, because
   the basemap ignores the theme. */

/* The container a page hands to AgentMaps.create: a panel-edged box. The
   page may set its own height; on a phone it runs to the card's edges. The
   box's look (height, edge, margin) is a default at zero specificity
   (:where), so a page's own class — .pick-map, .fm-map, .area-map, with
   their approved heights and phone edges — always wins, whichever
   stylesheet came later; what the module needs to work stays firm. */
.aiv-map { position: relative; overflow: hidden; z-index: 0; --aiv-pin-scale: 1; }
:where(.aiv-map) { height: 460px; border-radius: 10px; border: 1.5px solid var(--panel-line);
  background: #F4F1EA; margin: 0 0 0.7rem; }
.aiv-map.leaflet-container { font-family: inherit; background: #F4F1EA; }
.aiv-map .leaflet-control-attribution { font-size: 10px; background: rgba(251,249,244,0.85); color: #6E6558;
  padding: 1px 6px; }
.aiv-map .leaflet-control-attribution a { color: #6E6558; }
.aiv-map .leaflet-control-zoom a { color: #2A2522; background: #FBF9F4; border-color: #DED5C2; }
.aiv-map .leaflet-control-zoom a:hover { background: #F2EDE2; color: #2A2522; }
.aiv-map .leaflet-bar { border: 1px solid #C7BA9C; box-shadow: 0 1px 4px rgba(42,37,34,0.25); }
.aiv-map.aiv-drawing { cursor: crosshair; }
.aiv-map.aiv-drawing .leaflet-interactive { cursor: crosshair; }
@media (max-width: 480px) {
  :where(.aiv-map) { height: 420px; border-radius: 0; border-left: 0; border-right: 0; }
}

/* Road names on the drawn basemap: small gray text with a light halo. */
.aiv-roadlbl { background: none; border: 0; box-shadow: none; padding: 0; color: #8A8273;
  font: 600 10px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: 0.01em; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.aiv-roadlbl.primary, .aiv-roadlbl.secondary { color: #6E6558; font-weight: 700; font-size: 11px; }
.aiv-roadlbl.arterial { color: #7A7265; font-weight: 700; }
.aiv-roadlbl::before { display: none; }

/* Pins: a brass circle with the list's number inside; hollow for a home for
   sale, faded when it isn't selected, a ring when its card is open. The
   size follows the zoom (maps.js sets --aiv-pin-scale on the container). */
.aiv-icon { background: none; border: 0; }
.aiv-pin { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: #82632B; color: #FBF9F4; border: 2px solid #FBF9F4;
  box-shadow: 0 1px 4px rgba(0,0,0,0.38); font: 800 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI",
  Helvetica, Arial, sans-serif; letter-spacing: -0.02em; box-sizing: border-box;
  transform: scale(var(--aiv-pin-scale, 1)); transition: transform 0.12s, opacity 0.12s; }
.aiv-pin.hollow { background: #FBF9F4; color: #82632B; border-color: #82632B; }
.aiv-pin.faded { opacity: 0.45; }
.aiv-pin.open { transform: scale(calc(var(--aiv-pin-scale, 1) * 1.2)); box-shadow: 0 0 0 2.5px #82632B, 0 1px 4px rgba(0,0,0,0.38); }
.aiv-pin.dot { width: 15px; height: 15px; font-size: 0; }
/* My Farm's kinds: a new listing, a price cut, under contract, just sold. */
.aiv-pin.k-new { background: #2E7D32; color: #FBF9F4; border-color: #FBF9F4; }
.aiv-pin.k-cut { background: #C47F0E; color: #FBF9F4; border-color: #FBF9F4; }
.aiv-pin.k-pending { background: #FBF9F4; color: #2A2522; border-color: #2A2522; }
.aiv-pin.k-sold { background: #2A2522; color: #FBF9F4; border-color: #FBF9F4; }
.aiv-star { display: block; width: 32px; height: 32px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); }
.aiv-star svg { width: 100%; height: 100%; display: block; }
/* The subject's label tag above its star. */
.aiv-tag { background: #2A2522; color: #FBF9F4; border: 0; border-radius: 999px; padding: 0.15rem 0.55rem;
  font: 800 10px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.aiv-tag::before { border-top-color: #2A2522; }
/* The polygon editor's corner handles; the first one grows and fills once
   the shape can be closed ("tap the first corner"). */
.aiv-corner { display: block; width: 12px; height: 12px; margin: 2px; background: #FBF9F4; border: 2px solid #82632B;
  border-radius: 2px; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: grab; }
.aiv-corner.first { width: 16px; height: 16px; margin: 0; background: #82632B; border-color: #FBF9F4;
  box-shadow: 0 0 0 2px #82632B, 0 1px 3px rgba(0,0,0,0.3); cursor: pointer; }

/* The popup: a small card the page writes (its own classes inside). */
.aiv-popup .leaflet-popup-content-wrapper { background: var(--panel); color: var(--ink); border-radius: 10px;
  border: 1.5px solid var(--accent); box-shadow: 0 12px 30px rgba(42,37,34,0.28); padding: 0; }
.aiv-popup .leaflet-popup-content { margin: 0; width: 238px !important; line-height: 1.35; font-family: inherit; }
.aiv-popup .leaflet-popup-tip { background: var(--panel); box-shadow: none; }
.aiv-popup .leaflet-popup-close-button { top: 5px; right: 5px; width: 22px; height: 22px; padding: 0;
  border-radius: 50%; background: rgba(251,249,244,0.92); color: #2A2522; font: 700 17px/22px sans-serif;
  text-align: center; z-index: 1; }
.aiv-popup .leaflet-popup-close-button:hover { background: #FBF9F4; color: #2A2522; }

/* A phone (≤ 480px): the card is a sheet at the bottom of the screen, pulled
   down or closed with its button. */
.aiv-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; background: var(--panel); color: var(--ink);
  border-radius: 14px 14px 0 0; border: 1.5px solid var(--accent); border-bottom: 0;
  box-shadow: 0 -8px 30px rgba(42,37,34,0.28); max-height: 70vh; overflow: auto;
  transform: translateY(105%); transition: transform 0.2s ease-out; visibility: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0); }
.aiv-sheet.open { transform: translateY(0); visibility: visible; }
.aiv-sheet-bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: center;
  height: 26px; background: var(--panel); border-radius: 14px 14px 0 0; }
.aiv-sheet-grip { width: 38px; height: 4px; border-radius: 999px; background: var(--panel-edge); }
.aiv-sheet-close { position: absolute; top: 4px; right: 8px; width: 26px; height: 26px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); font: 700 18px/26px sans-serif;
  text-align: center; cursor: pointer; }
.aiv-sheet-body { padding: 0 0.85rem 0.9rem; }

/* The legend box in the map's bottom-left corner: the page writes its rows
   with these swatches, e.g. <span><i class="aiv-key-pin"></i>Sold</span>. */
.aiv-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: center; max-width: 80vw;
  margin: 0 0 8px 8px; padding: 0.4rem 0.65rem; border-radius: 8px; background: rgba(251,249,244,0.92);
  border: 1px solid #DED5C2; box-shadow: 0 1px 4px rgba(42,37,34,0.18); color: #6E6558; font-size: 0.74rem;
  font-weight: 600; line-height: 1.3; text-align: left; }
.aiv-legend span { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.aiv-legend b { color: #2A2522; font-weight: 700; }
.aiv-key-pin, .aiv-key-dot, .aiv-key-star, .aiv-key-corner, .aiv-key-line { display: inline-block; box-sizing: border-box; }
.aiv-key-pin { width: 18px; height: 18px; border-radius: 50%; background: #82632B; border: 2px solid #FBF9F4;
  box-shadow: 0 0 0 1px rgba(42,37,34,0.25); color: #FBF9F4; font: 800 9px/14px -apple-system, BlinkMacSystemFont,
  "Segoe UI", Helvetica, Arial, sans-serif; text-align: center; font-style: normal; }
.aiv-key-pin.hollow { background: #FBF9F4; color: #82632B; border-color: #82632B; box-shadow: none; }
.aiv-key-pin.faded { opacity: 0.45; }
.aiv-key-pin.open { box-shadow: 0 0 0 2px #82632B; }
.aiv-key-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #FBF9F4; background: #82632B;
  box-shadow: 0 0 0 1px rgba(42,37,34,0.25); }
.aiv-key-dot.new { background: #2E7D32; }
.aiv-key-dot.cut { background: #C47F0E; }
.aiv-key-dot.pending { background: #FBF9F4; border-color: #2A2522; box-shadow: none; }
.aiv-key-dot.sold { background: #2A2522; }
.aiv-key-dot.hollow { background: #FBF9F4; border-color: #82632B; box-shadow: none; }
.aiv-key-star { width: 14px; height: 14px; background: #2A2522;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.aiv-key-corner { width: 11px; height: 11px; border-radius: 2px; background: #FBF9F4; border: 2px solid #82632B; }
.aiv-key-line { width: 18px; height: 0; border-top: 2px dashed #82632B; }

/* Places that matter (Compare Homes, owner 2026-10-13; setPlaces): an ink
   rounded square with the type's icon and the name beside it — to the left of
   the mark when it sits near the map's right edge (.lft, the module's call) —
   a ring when its card is open. Fixed colours, like the pins. */
.aiv-place-mark { position: relative; display: block; width: 26px; height: 26px; }
.aiv-place-pin { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 7px; background: #2A2522; border: 2px solid #FBF9F4; box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0,0,0,0.38); color: #FBF9F4; flex-shrink: 0; }
.aiv-place-pin svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
.aiv-place-pin svg.thick { stroke-width: 3; }
.aiv-place-name { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  color: #2A2522; font: 700 11px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: 0.01em; pointer-events: none;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff; }
.aiv-place-mark.lft .aiv-place-name { left: auto; right: 30px; text-align: right; }
/* Neither side clear: the name under its mark, centred, shifted (--aiv-dx) only to stay on the map. */
.aiv-place-mark.blw .aiv-place-name { left: calc(50% + var(--aiv-dx, 0px)); right: auto; top: 100%; margin-top: 1px;
  transform: translateX(-50%); text-align: center; }
/* Too long for either side and the spot under it taken: the name wraps to the room beside its
   mark (--aiv-w, the module's measure), so it never runs off the map. */
.aiv-place-mark.wrp .aiv-place-name { white-space: normal; width: var(--aiv-w); overflow-wrap: anywhere; }
.aiv-place-mark.open .aiv-place-pin { box-shadow: 0 0 0 2.5px #82632B, 0 1px 4px rgba(0,0,0,0.38); }
.leaflet-marker-draggable .aiv-place-pin { cursor: grab; }
@media (max-width: 480px) { .aiv-place-name { font-size: 10.5px; } }
/* A page waiting for a tap on the map (onMapTap): a crosshair. */
.aiv-map.aiv-picking { cursor: crosshair; }
.aiv-map.aiv-picking .leaflet-interactive { cursor: crosshair; }
/* The legend's swatch for the places: <i class="aiv-key-place">(the icon)</i>. */
.aiv-key-place { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 5px; background: #2A2522; border: 2px solid #FBF9F4; box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(42,37,34,0.25); color: #FBF9F4; font-style: normal; }
.aiv-key-place svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
/* A page's own control on the map (addControl): the zoom control's dress. */
.aiv-ctl { border: 1px solid #C7BA9C; border-radius: 6px; background: #FBF9F4;
  box-shadow: 0 1px 4px rgba(42,37,34,0.25); }