/* The pin picker (sell wizard, edit page, admin review) and the unit page's Location,
   Description and Services sections. Theme tokens only; logical properties only, so
   both writing directions and both themes follow. Loaded with Leaflet's own CSS. */

/* ---------- the pin picker ---------- */
.pp { display: grid; gap: 10px; }
.pp-map { position: relative; height: clamp(260px, 42vh, 380px); border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--surface-2); isolation: isolate; }
.pp-map:focus-visible { outline: 3px solid var(--jade); outline-offset: 2px; }
.pp-nomap { padding: 16px; color: var(--ink-2); }
/* the middle of the map, for "Put the pin in the middle" */
.pp-cross { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 22px; height: 22px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 450; opacity: .55; }
[dir="rtl"] .pp-cross { transform: translate(50%, -50%); }
.pp-cross::before, .pp-cross::after { content: ""; position: absolute; background: var(--ink); }
.pp-cross::before { inset-inline: 0; inset-block-start: 10px; height: 2px; }
.pp-cross::after { inset-block: 0; inset-inline-start: 10px; width: 2px; }
.pp-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-tools .btn { min-height: 42px; }
.pp-status.pp-warn { color: var(--clay); }
.pp-near { color: var(--ink-2); }
.pp-prec { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.pp-prec .radios { margin-block-start: 6px; }
.pp-prec small { display: block; margin-block-start: 2px; }

/* the pin: a jade drop with a pale ring, anchored at its point */
.pp-pin { width: 0; height: 0; }
.pp-pin span { position: absolute; inset-inline-start: -13px; inset-block-start: -34px; width: 26px; height: 26px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--jade);
  border: 3px solid var(--surface); box-shadow: var(--sh-2); cursor: grab; }
.lm-marker span { cursor: default; }

/* ---------- the unit page ---------- */
.usec { margin-block-start: 34px; }
.usec > h2 { font-size: clamp(20px, 2.2vw, 24px); margin-block-end: 12px; }
.desc-text { white-space: pre-line; }
.desc-text.clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.desc-more { margin-block-start: 8px; }

.lm { padding: 0; overflow: hidden; }
/* the card folds (details.fold): its title bar, and the map right under it with no gap */
.lm-fold-h { padding: var(--space-3) var(--space-4); font-size: 15px; }
.lm[open] > .lm-fold-h { border-block-end: 1px solid var(--line); }
.lm > .fold-b { margin: 0; }
/* isolation: Leaflet's panes are z-index 400 and up; without a stacking context of its own
   a map scrolled under the sticky header, or behind a sticky bar, is drawn on top of it */
.lm-box { position: relative; isolation: isolate; }
.lm-map { height: clamp(220px, 36vh, 320px); background: var(--surface-2); }
.lm-nomap { padding: 16px; color: var(--ink-2); }
.lm-go { position: absolute; inset: 0; z-index: 500; display: flex; align-items: flex-end; justify-content: center;
  padding: 14px; border: 0; background: transparent; cursor: pointer; font: inherit; }
.lm-go span { padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
  box-shadow: var(--sh-2); font-size: 14px; font-weight: 600; }
.lm-go:focus-visible span { outline: 3px solid var(--jade); outline-offset: 2px; }
/* nearby places on the map card, once it is tapped (locmap.js showNearby): a dot per
   place in its kind's colour family, and under the map a switch per kind. The families
   borrow theme tokens, so both themes follow. */
:root { --poi-learn: var(--ochre); --poi-health: var(--clay); --poi-shop: var(--gold-ink); --poi-transit: var(--ink-2);
  --poi-worship: var(--ramp-1); --poi-money: var(--jade-2); --poi-outdoor: var(--ramp-0); --poi-other: var(--ink-3); }
.lm-poi { stroke: var(--surface); fill-opacity: .95; }
.lm-poi-learn { fill: var(--poi-learn); background: var(--poi-learn); }
.lm-poi-health { fill: var(--poi-health); background: var(--poi-health); }
.lm-poi-shop { fill: var(--poi-shop); background: var(--poi-shop); }
.lm-poi-transit { fill: var(--poi-transit); background: var(--poi-transit); }
.lm-poi-worship { fill: var(--poi-worship); background: var(--poi-worship); }
.lm-poi-money { fill: var(--poi-money); background: var(--poi-money); }
.lm-poi-outdoor { fill: var(--poi-outdoor); background: var(--poi-outdoor); }
.lm-poi-other { fill: var(--poi-other); background: var(--poi-other); }
.lm-near { padding: var(--space-2) var(--space-4) var(--space-3); border-block-start: 1px solid var(--line); }
.lm-near > .fold-b { display: grid; gap: 8px; }
.lm-near-h { font-size: 14px; }
.lm-near[hidden] { display: none; }
.lm-near-msg:empty { display: none; }
.lm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.lm-leg { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; cursor: pointer; }
.lm-leg input { width: 18px; height: 18px; min-height: 0; flex: none; margin: 0; }
/* the places as a list under the legend (N34) */
.lm-places[hidden] { display: none; }
.lm-places { display: grid; gap: var(--space-1); }
.lm-places-h { margin: 0; }
.lm-places-in { display: grid; gap: var(--space-1); }
.lm-grp[hidden] { display: none; }
.lm-grp-h { margin: 0; font-weight: 600; }
.lm-grp[open] > .fold-b { margin-block: var(--space-1) var(--space-2); }
.lm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lm-list li { display: grid; gap: 2px; padding-inline-start: 20px; min-width: 0; overflow-wrap: anywhere; }
.lm-li-far, .lm-li-links { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.lm-li-links a { color: var(--jade); text-decoration: underline; min-height: 24px; display: inline-flex; align-items: center; }
.lm-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-2); }
.lm-pop .leaflet-popup-content { margin: 10px 14px; font-family: var(--font); }
.lm-pop .leaflet-popup-content-wrapper, .lm-pop .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
.lm-pop-in { display: grid; gap: 4px; line-height: 1.5; }
/* Leaflet gives a popup's paragraphs 1.3em margins; the grid gap spaces these */
.lm-pop .lm-pop-in p { margin: 0; }
.lm-pop-far { display: flex; flex-direction: column; gap: 2px; }
.lm-pop-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-block-start: 2px; }
.lm-pop a, .lm-pop-links a { color: var(--jade); }
.lm-pop-links a { text-decoration: underline; min-height: 24px; display: inline-flex; align-items: center; }
.lm-cap { padding: 12px 16px 14px; display: grid; gap: 4px; border-block-start: 1px solid var(--line); }
.lm-circle { stroke: var(--jade); stroke-width: 2; fill: var(--jade); fill-opacity: .16; }
.lm-links { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }
.lm-links .btn { min-height: 42px; }
.lm-where { margin-block-start: 14px; }
.lm-note { margin-block-start: 10px; white-space: pre-line; }
.lm-dist { margin-block-start: 16px; }
.lm-dist h3, .nb h3 { font-size: 16px; margin-block-end: 8px; }
.lm-dist ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 6px 18px; }
.lm-dist li { display: flex; justify-content: space-between; gap: 10px; padding-block: 6px; border-block-end: 1px solid var(--line); }
.nb { margin-block-start: 18px; }
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.nb-card { padding: 14px; }
.nb-card .sm { display: flex; justify-content: space-between; gap: 10px; }
.nb-n { color: var(--ink-2); }

.svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px 18px; }
.svc li { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-block-end: 1px solid var(--line); }
.svc-v { font-weight: 600; }
.svc-v[data-v="yes"] { color: var(--jade); }
.svc-v[data-v="no"] { color: var(--ink-2); }
.svc-v[data-v="pending"] { color: var(--ochre-ink); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 0 14px; }

/* admin review: the pin dialog */
.pin-dlg { width: min(720px, calc(100vw - 32px)); }

/* .btn sets display, which beats the hidden attribute. In these components a hidden
   button must stay hidden. (.wiz-nav: the sell wizard's Send button showed on every
   step; this file is loaded on that page.) */
.pp [hidden], .lm-box [hidden], .wiz-nav [hidden], #description [hidden] { display: none !important; }

/* ---------- a place guide's map card (functions/views/_guides.js, guidemap.js) ---------- */
/* the areas' outlines: solid where OpenStreetMap has a boundary, dashed where it is ours */
.gm-outline { stroke: var(--jade); stroke-width: 2; fill: var(--jade); fill-opacity: .08; }
.gm-outline.gm-approx { stroke-dasharray: 6 5; }
/* a project: a dot, jade where our team pinned it, grey where it was placed from the area */
.gm-pin { stroke: var(--surface); stroke-width: 2; fill: var(--ink-3); fill-opacity: 1; cursor: pointer; }
.gm-pin.gm-exact { fill: var(--jade); }

/* a button that reads as a link ("Set the location", "Show more"): no native button face,
   which in the dark theme put jade text on a light grey */
button.link { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }

/* The OpenStreetMap credit is a link inside a line of text: underlined, so it is not told
   apart by colour alone (axe link-in-text-block, WCAG 1.4.1). */
.leaflet-control-attribution a { text-decoration: underline; }