/* Shared map/pin/cluster/place-card CSS — the ONE definition of how pins,
   clusters, and the place-detail popup card look (SSOT, AGENTS.md §16).
   Loaded by BOTH landing/index.html (public map) and landing/admin/app.html
   (admin console) so a color/shape change can never silently drift between
   the two pages the way an inline copy used to (exactly what happened to
   the stale CATS copy in the since-retired landing/admin/edit-review.html).

   Extracted VERBATIM from landing/index.html's inline <style> on 2026-07-24
   (admin-reuse pass) — a pure move, not a rewrite. The few rules that used
   index.html's own CSS custom properties (--violet/--violet-text/--ink/
   --slate/--muted/--line/--radius/--shadow) have those literal values
   INLINED here instead of var(...), so this file renders IDENTICALLY
   regardless of the host page's own :root (landing/admin/app.html's :root
   defines different --ink/--muted/--line/--radius for its own panel chrome;
   using var(...) here would have silently reskinned the shared pins/popup on
   that page). The literal values below are copied 1:1 from index.html's
   :root at the time of extraction — do not let them drift from it.

   See docs/planning/reports/2026-07-24-admin-console-design.md. */

/* ----- cluster + pin theming ----- */
.pin span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(76,29,149,.35); }
.pin span .pin-ico { width: 16px; height: 16px; color: #fff; }
/* inline category icon (chips / list / popup rows) */
.cat-ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.17em; }
.cat-ico-wrap { display: inline-flex; vertical-align: -.17em; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(139,92,246,.22) !important; }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: rgba(139,92,246,.92) !important; color: #fff !important; font-weight: 800 !important; }

/* ----- place-detail popup card ("Evolution" redesign, owner-approved visual
   spec, 2026-07) ----- */
/* Leaflet's own popup chrome (wrapper + tip) becomes the card shell; .pop
   supplies the inner layout. .pop/.pop-strong/.pop-note/.pop-actions are ALSO
   used by index.html's lighter "explore anchor" popup (drawExploreAnchor())
   and are kept compatible on purpose — only the classes unique to the
   place-card popup (place-card.js renderPopupCard()) were restyled. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { box-shadow: 0 20px 48px rgba(76, 29, 149, 0.16); }
.leaflet-popup-content-wrapper { border-radius: 16px; border: 1px solid #ece6fb; }
.pop { min-width: 220px; max-width: 260px; font-family: "Heebo", sans-serif; }
.pop strong { font-size: 1rem; }
.pop-name { font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; color: #241b33; }
.pop-cat { display: flex; align-items: center; gap: 6px; color: #6b6280; font-size: .8rem; margin: 4px 0 7px; }
.pop-status { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* A place's subcategory tags, in the lane the explore chip vacated on
   2026-08-02, and on the list row's .nrow-status since 2026-08-06 — both fed by
   the one shared facts lane (place-card.js placeFactsHtml). Deliberately NOT violet
   and deliberately not a chip shape a finger reaches for: they are facts, and
   they sit exactly where a pressable control used to be, so the one failure to
   design out is "looks tappable, does nothing". Grey ink on grey ground, the
   status pill's box, no border, no hover. They cost no height at 0, 1 or 2 tags
   — .pop-status is already a wrapping flex row whose height the pill sets. The
   one 3-tag record in the dataset wraps that row at 320px and costs +29px
   there, and nowhere else. */
.pop-sub {
  display: inline-block; background: #f1f0f5; color: #4b4560;
  font-weight: 600; font-size: .8rem; border-radius: 999px; padding: 1px 9px;
}
/* The two explore actions on ONE row (owner 2026-08-02): the primary takes the
   slack, the chip keeps its text width.
   STACKED by default, side-by-side only in the panel. renderPopupCard is also
   rendered into a real Leaflet popup by the add form's duplicate check
   (focusDup), and that popup is capped at 260px — a side-by-side row there
   leaves the primary ~140px and breaks its label onto two lines. The one-row
   layout is a property of the PANEL's width, so it is scoped to the panel
   rather than being the card's universal shape. */
.pop-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.pop-cta > .pop-nearby-chip { justify-content: center; }
.place-panel .pop-cta { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
/* `.pop` in the selector is LOAD-BEARING, not decoration. `.pop .pop-btn-primary`
   further down sets `margin-top: 11px` for the button's old full-width row, and
   at equal specificity (0,2,0) the later rule wins — so the first version of
   this shipped with the primary keeping that margin INSIDE the flex row. The row
   grew to 57.3px, `align-items: stretch` stretched the chip to fill it, and the
   button sat 11px lower than the control beside it. The owner saw it
   immediately; no gate compared two siblings' boxes (place_panel_check part G
   does now). (0,3,0) here wins regardless of source order. */
.pop .pop-cta .pop-btn-primary { width: auto; margin-top: 0; }
/* `flex: 1 1 0` with `min-width: 0`, never `1 1 auto`: auto floors the button at
   its natural full width and the row then wraps at every phone size, which is
   the one thing this row exists to prevent. Row direction only — in the stacked
   fallback a flex-grow would stretch the button down the cross axis. */
.place-panel .pop-cta .pop-btn-primary { flex: 1 1 0; min-width: 0; }
/* Secondary chip beside the primary button — the live map's "מה בסביבה?"
   explore-around trigger (renderPopupCard's opts.ctaExtraHtml). It was a 28px
   pill in the status row until 2026-08-02, the only sub-44px target on the card
   and measured by no gate; on the actions row it carries a real target size.
   Callers that pass nothing emit no row at all.
   TONAL, not a wash. The old #f5f1fe measured 1.11:1 against the white card —
   LESS separation than the inert .pop-sub tags right above it (1.13:1), so the
   one pressable thing in the region read as an empty outline beside a solid
   slab. At 28px a wash still read as a chip; at 46px it did not. The hairline
   border went with it: at 1.37:1 it was invisible and it cost 2px the primary
   wants at 320px. Same height, same radius, same font as the primary — the only
   difference is solid violet vs tonal, which is a rank a viewer can name.
   padding-block, not a borrowed height: with `align-items: stretch` the old 3px
   padding meant the chip had no box of its own and simply inherited the row. */
.pop-nearby-chip {
  background: #e4dcfd; border: 0; color: #5b21b6;
  font: inherit; font-weight: 700; font-size: .88rem;
  border-radius: 13px; padding-block: 11px; padding-inline: 14px; cursor: pointer;
  flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap;
  min-height: 44px;
}
/* Darker than the resting fill, necessarily: the old #ece5fd is LIGHTER than
   the new #e4dcfd and would have made the control fade under the pointer. */
.pop-nearby-chip:hover { background: #d8ccfc; }
/* Same chip, mode already on: it's the way back out (index.html swaps the copy
   when this place is the current explore anchor). A RING, not a fill — it used
   to be solid #8b5cf6, the primary's exact violet, which at 320px put a 145px
   violet slab beside a 139px one and left the card with no primary at all, with
   the way OUT shouting loudest. */
.pop-nearby-chip.on {
  background: #e4dcfd; color: #5b21b6;
  box-shadow: inset 0 0 0 1.5px #8b5cf6;
}
.pop-nearby-chip.on:hover { background: #d8ccfc; filter: none; }
/* The share control (ADR 0047) — an ICON in the card's top corner, owner ruling
   2026-08-06. Pinned rather than placed in a row, and that is the point: both
   earlier attempts cost vertical space on a card where space is the scarce thing
   (the CTA row went to 119px at 320; the actions row went to two lines at every
   width). A corner icon costs zero rows.

   `position: relative` on .pop is what it hangs from. Safe to add globally: .pop
   had no absolutely-positioned descendants before this, so nothing else can be
   caught by the new containing block.

   inset-inline-END, not `left`: the card is dir="rtl", so the inline end IS the
   left edge, and writing it logically keeps it correct if anything is ever
   rendered LTR (the admin console renders the same card markup).

   44px, the 2026-07-27 audit's floor for a standalone control — icon-only means
   there is no text to enlarge the hit area, so the box has to carry it. The
   accessible name comes from aria-label at the call site: an icon with no label
   is a button that a screen reader announces as nothing. */
.pop { position: relative; }
.pop-share-btn {
  position: absolute; inset-block-start: -4px; inset-inline-end: -6px;
  inline-size: 44px; block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #6d3fd4; border-radius: 50%;
}
.pop-share-btn .ui-ico { width: 19px; height: 19px; }
.pop-share-btn:hover { background: #f4f0ff; color: #5b21b6; }
.pop-share-btn:active { background: #ece5fd; }
.pop-share-btn:focus-visible { outline: 2px solid #8b5cf6; outline-offset: -2px; }
/* The card's own name is hidden in the panel (index.html .place-panel .pop-name),
   so the first thing the corner icon sits beside there is .pop-cat. Keep the
   category text clear of it, or a long "מסעדות ובתי קפה · תל־אביב–יפו" runs under
   the button on a narrow card. */
.place-panel .pop-cat { padding-inline-end: 40px; }
.pop-pill { display:inline-block; background:#fff5e6; border:1px solid #ffd591; color:#c05600; font-weight:700; border-radius:999px; padding:1px 9px; font-size:.8rem; }
.pop-pill-open { background:#e7f6ec; border-color:#a6dcb8; color:#1a7f37; }
.pop-pill-closed { background:#fde8e8; border-color:#f5b5b5; color:#b42318; }
/* "לא כשר" on a hotel (ADR 0050). Deliberately outside the green/red/amber
   semantic set: this is not good news or bad news, it is the defining fact for
   the category, so a fourth calm hue rather than a borrowed verdict colour.
   Deliberately NOT violet either, for the reason the .pop-sub block above
   gives — violet is what a pressable control looks like here, and this is a
   statement, not a button. */
.pop-pill-kashrut { background:#e6f0f2; border-color:#b4d2da; color:#1f5566; }
.pop-note { color: #6b6280; font-size: .78rem; margin: 4px 0; }
.pop a { color: #7c3aed; font-weight: 700; }
.pop-actions { margin-top: 8px; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; font-size: .9rem; }
/* Vertical padding ONLY. These two nav links sit in the popup that opens on
   every pin tap — the most common interaction on the map — and were a bare text
   baseline to hit one-handed. Horizontal padding stays 0 on purpose: the .pop-div
   dead zone below is an owner ruling (2026-07-24), and padding the sides would
   eat it. Growing the box vertically costs no layout width. (a11y, audit
   2026-07-27) */
.pop-actions a { white-space: nowrap; padding: 8px 0; }
/* The place's own website, as the first item on the actions row. A PILL, unlike
   its two neighbours, because it is the only link here whose destination we did
   not compose ourselves — it comes from an open dataset and can be stale or,
   once, an expired domain someone else re-registered. The `לא אומת` tag rides
   inside the pill rather than beside it so the marking cannot drift away from the
   thing it marks when the row wraps.
   That tag marks an individual value that was matched automatically and never
   reviewed row by row. No record carries it today — the one batch that did was
   reverted on 2026-08-06, when 19 of its 90 rows turned out to point at the wrong
   business, 8 of them at a direct competitor — but the machinery stays, because
   the next batch will need it and a tested path is cheaper than rebuilding one
   under pressure. Two rules for whatever ships through it: the word must name the
   real defect (wrong business), not staleness, and it must match its own
   aria-label VERBATIM. It read `בטא` against an aria-label of `(בבדיקה)` until
   2026-08-06 — WCAG 2.5.3 Label in Name, so "tap בטא" matched nothing. `בטא`
   was also the wrong word: in Israeli usage it marks a FEATURE as new, and the
   defect here is "this may be the wrong business".
   `padding: 8px 10px`, NOT the pill padding a chip would use: the vertical 8px is
   the same value the sibling links carry from the 2026-07-27 audit, so the pill
   matches their height and inherits their target instead of inventing a smaller
   one. The horizontal 10px is the exception to this row's "no side padding" rule
   (the .pop-div dead zone, owner 2026-07-24) — a pill has to have sides, and it
   adds a fill rather than eating the gap, so a mis-tap still lands on a visible
   edge rather than on the neighbour. Tonal violet, never solid: the card's one
   solid violet belongs to the primary route button. */
.pop-actions a.pop-site {
  display: inline-flex; align-items: center; gap: 5px;
  background: #efe9fd; border-radius: 999px; padding: 8px 10px;
}
.pop-actions a.pop-site:hover { background: #e4dcfd; }
/* Bare text, no second pill: the outer pill already draws the boundary, and a
   chip inside a chip reads as two controls where there is one link (owner
   2026-08-06). It stays legible as a MARKING rather than a word in the label by
   size and colour alone — smaller, and a muted violet against the link's own
   #5b21b6, which still clears AA on the #efe9fd fill. */
.pop-site-beta {
  color: #7b5bc7; font-size: .62rem; font-weight: 800;
  letter-spacing: .04em; line-height: 1.2;
}
/* Inert divider = a dead zone between the two nav links so a mis-tap lands on
   neither (owner ruling 2026-07-24: keep both side by side, just pull them
   apart). */
.pop-div { flex: 0 0 auto; align-self: stretch; width: 1px; min-height: 1.1em; background: #ece6fb; margin: 0 10px; }
/* Primary slot = the in-product "מה בדרך" feature (owner ruling 2026-07-24:
   the differentiator gets the violet button; external nav apps stay
   secondary). Selector covers <button>, not just <a>. */
.pop .pop-btn-primary {
  display: block; width: 100%; margin-top: 11px; text-align: center; cursor: pointer;
  color: #fff; background: #8b5cf6; border: 0; border-radius: 13px;
  padding: 11px; font: inherit; font-weight: 750; font-size: .92rem;
}
.pop .pop-btn-primary:hover { filter: brightness(1.05); }
.pop .pop-btn-primary .ui-ico { width: 15px; height: 15px; vertical-align: -2px; }
/* Waze keeps a recognizable brand blue (owner ruling 2026-07-24: recognition
   beats de-branding on third-party nav links). Lighter + bluer than the old
   teal per owner 2026-07-24; AA on white: #0d78c4 = 4.66:1. */
.pop a.pop-waze { color: #0d78c4; }
/* Kept for any caller still wrapping the trigger in its own row. The live map
   stopped doing that on 2026-08-02 — the button joined .pop-actions, which is
   where the other two things you can do with a place already are. */
.pop-report { margin-top: 11px; text-align: center; }
/* Three links, one row, so it may wrap on a narrow card rather than clip. When
   it does wrap, row-gap has to be a real separation: the report trigger lands
   directly under "פתח בגוגל ↗", and 2px between two live targets — one of which
   leaves the site — is the mis-tap the 2026-07-27 ruling exists to prevent. */
.pop-actions.has-report { flex-wrap: wrap; row-gap: 10px; }
.pop-report-trigger {
  /* 8px vertical (was 2px): the box can grow without crowding a neighbour —
     on the actions row a .pop-div dead zone separates it from the Waze link.
     (a11y, audit 2026-07-27) */
  background: none; border: 0; padding: 8px 4px; font: inherit;
  color: #6b6280; font-size: .85rem; text-decoration: underline;
  cursor: pointer;
}
.pop-report-trigger:hover { color: #5b5470; }