/* ONE glyph per category, identical shape/colour wherever it appears (P0-THM-09-web).
 * Loaded by both plan.html (search results on Home, "worth stopping for" on
 * Preview) and discover.html (Explore's category pins, the selected-road marker),
 * via js/poi-markers.js's element()/glyphHTML(). Theme follows html[data-theme],
 * the same attribute both pages' own theme scripts already set (plan's inline
 * theme picker / js/explore-theme.js); default (no attribute yet, before that
 * script runs) is dark, matching both host stylesheets' own default.
 *
 * Six categories only: viewpoint, fuel, food, event, road, place. "Place" is the
 * honest fallback for anything real that isn't one of the other five (an address,
 * a generic point) - never a seventh invented shape.
 */

/* ---- map pin (maplibregl.Marker element) ------------------------------------ */
/* No `position` here (P0-SRC-04-web): every .poi-marker is always the actual root
 * element handed to `new maplibregl.Marker({element: ...})` (js/poi-markers.js's
 * element() docs itself as exactly that; grepped every call site - explore-poi.js,
 * discover.js, plan.js x4 - none ever uses this class any other way), and
 * MapLibre's own stylesheet already puts `position:absolute` on that same element
 * via its `.maplibregl-marker` class, which is how it turns a plain lng/lat into a
 * screen position at all. A same-specificity `.poi-marker{position:relative}` rule
 * loaded after maplibre-gl.css in plan.html/discover.html's <head> won by source
 * order and silently fought that: a `position:relative` marker keeps its transform
 * (MapLibre's inline translate(x,y), which only moves it FROM its own flow
 * position, not from the map's origin) but also keeps taking up its 30px of
 * normal document flow among its DOM siblings - so each real marker's screen
 * position drifted further from its true lng/lat by roughly 30px times how many
 * other same-flow markers already sat earlier in the DOM, compounding with every
 * pin added. Small enough to go unnoticed with one or two pins near the top of a
 * tall screen; with ten search-result pins on a short one (375x667) the later
 * pins drifted deep enough to land under the results list itself - confirmed
 * directly: this exact collision, unrelated to Home's own redesign, pre-dates it
 * and reproduces identically against 580a52796. `position:absolute` is just as
 * valid a containing block for .poi-marker-icon's `inset` below, so nothing else
 * here needs to change. */
.poi-marker{width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:#2A2D2C;box-shadow:0 2px 6px rgba(0,0,0,.35);cursor:pointer;display:block}
html[data-theme="light"] .poi-marker{background:#FFFFFF}

/* Selected / primary marker: the one orange teardrop (mock-005/009), dark icon on
 * orange - the brief's primary token always carries DARK iconography, not white,
 * in both themes. Classic CSS "map pin" shape: a circle rounded on three corners,
 * rotated 45deg so the fourth corner becomes the point; the icon is counter-
 * rotated so it stays upright. */
.poi-marker--selected{width:40px;height:40px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:#FF7A1A;box-shadow:0 3px 8px rgba(0,0,0,.45)}
html[data-theme="light"] .poi-marker--selected{background:#FF7A1A}
.poi-marker--selected .poi-marker-icon{inset:10px;background:#181B1A;transform:rotate(45deg)}

.poi-marker-icon{content:"";position:absolute;inset:7px;background:#F8F5EF;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:var(--poi-ico);mask-image:var(--poi-ico)}
html[data-theme="light"] .poi-marker-icon{background:#181B1A}

/* ---- list-row glyph (static, never the teardrop) ----------------------------- */
.poi-glyph{display:inline-block;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  position:relative;background:#2A2D2C}
html[data-theme="light"] .poi-glyph{background:#F0EEEA}
.poi-glyph::before{content:"";position:absolute;inset:6px;background:#F8F5EF;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:var(--poi-ico);mask-image:var(--poi-ico)}
html[data-theme="light"] .poi-glyph::before{background:#181B1A}

/* Road is the one category mock-009's list draws in the brand colour even
 * unselected ("Ridge Road"/"High Meadow Pass" both show a solid-orange circle,
 * next to "Lake Rowan Café"'s neutral one) - a map pin stays neutral until it is
 * the one selected pin (below), but a road ROW always carries its identity colour,
 * same as the existing app-mode rule this supersedes (css/plan.css
 * .psearch-wrap #presults .pres-glyph--road). */
.poi-glyph--road{background:#FF7A1A}
.poi-glyph--road::before{background:#181B1A}

/* ---- the six glyph shapes, defined once, shared by both the pin and the row -- */
.poi-marker--viewpoint .poi-marker-icon,.poi-glyph--viewpoint{
  --poi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 19 9 6 13 12.5 16 8 22 19Z'/%3E%3C/svg%3E")}
.poi-marker--fuel .poi-marker-icon,.poi-glyph--fuel{
  --poi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='10' height='18' rx='1.5'/%3E%3Cpath d='M14 8h2.5a2 2 0 0 1 2 2v7a1.5 1.5 0 0 1-3 0v-4l-1.5-1.5'/%3E%3Cpath d='M3 21h12'/%3E%3Cpath d='M7 7h3'/%3E%3C/svg%3E")}
.poi-marker--food .poi-marker-icon,.poi-glyph--food{
  --poi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2v7a2 2 0 0 0 2 2v11'/%3E%3Cpath d='M7 2v6M11 2v6'/%3E%3Cpath d='M17 2c-1.6 0-3 1.8-3 5s1.4 5 3 5v10'/%3E%3C/svg%3E")}
.poi-marker--event .poi-marker-icon,.poi-glyph--event{
  --poi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
/* c1106 repair (REDESIGN-AUDIT-11 S04 "F2"): the single-bend curve this used to be
 * (one C then one S command) has no opposing second curve to hold the eye on - at
 * the 16-20px size this glyph actually renders at, it reads as a straight stroke
 * meeting a sharp vertex, i.e. a ">" chevron, not a road. mock-009's road glyph is
 * continuous - two equal, opposite bends with no straight segment or sharp corner
 * anywhere - the shape a real winding mountain road traces, not an arrow. */
.poi-marker--road .poi-marker-icon,.poi-glyph--road{
  --poi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M15 22C15 19.5 6 19.5 6 17C6 14.5 15 14.5 15 12C15 9.5 6 9.5 6 7C6 4.5 15 4.5 15 2'/%3E%3C/svg%3E")}
.poi-marker--place .poi-marker-icon,.poi-glyph--place{
  --poi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.4-6-10a6 6 0 1 1 12 0c0 4.6-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2'/%3E%3C/svg%3E")}

/* ---- search result map pins (mock-009): a classic pointed pin, not a floating
 * circle (c1106 repair, REDESIGN-AUDIT-10 S04) ------------------------------- */
/* .poi-marker--selected's own `transform:rotate(-45deg)` (meant to turn its plain
 * circle into a pointed teardrop) never actually painted on a search-result pin -
 * confirmed live via getComputedStyle: MapLibre sets this SAME element's own
 * `transform` INLINE on every frame (`translate(...) rotateX(0) rotateZ(0)`, no
 * rotate term at all) to position it, and an inline style always wins over a
 * stylesheet rule regardless of selector specificity - so the rotation silently
 * never applied, to any search pin, selected or not. The icon's OWN counter-
 * rotation (`.poi-marker--selected .poi-marker-icon{transform:rotate(45deg)}`, a
 * different, inline-style-free element) still ran every time, so the glyph sat
 * crooked inside a circle that never rotated to match it - that crooked, floating,
 * unpointed circle is the "white circular '>' chevron" REDESIGN-AUDIT-10 found,
 * not a screenshot artifact. A `::before`/`::after` pin shape, scoped to .pres-pin
 * (search-result markers only, js/plan.js syncResultPins - Explore's and Preview's
 * own .poi-marker circles, neither in this brief, are untouched), sidesteps the
 * inline-transform conflict entirely: MapLibre never touches a pseudo-element's
 * style, so the rotation/geometry here always paints, and the glyph itself needs
 * no counter-rotation at all once its container actually holds still. */
.pres-pin{width:30px;height:38px;background:transparent;box-shadow:none;border:0;
  border-radius:0;padding:0;position:relative}
/* .poi-marker/.poi-marker--selected's own theme-qualified background rules
 * (html[data-theme="light"] .poi-marker{...}, same for --selected) are an
 * attribute-plus-class selector - EQUAL specificity to a single .pres-pin class,
 * so source order alone does not reliably beat them once the compiled/minified
 * order changes. :not(.poi-marker--selected) and the .pres-pin.poi-marker--selected
 * compound below both add a second class, so they outrank those rules outright. */
.pres-pin:not(.poi-marker--selected){background:transparent;box-shadow:none;border-radius:0}
.pres-pin::before{content:"";position:absolute;left:0;top:0;width:30px;height:30px;
  border-radius:50%;background:#2A2D2C;box-shadow:0 2px 6px rgba(0,0,0,.35)}
html[data-theme="light"] .pres-pin::before{background:#FFFFFF}
.pres-pin::after{content:"";position:absolute;left:50%;top:29px;margin-left:-6px;
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:9px solid #2A2D2C}
html[data-theme="light"] .pres-pin::after{border-top-color:#FFFFFF}
.pres-pin .poi-marker-icon{inset:auto;left:7px;top:7px;width:16px;height:16px}
.pres-pin.poi-marker--selected{width:40px;height:50px;background:transparent;
  box-shadow:none;border-radius:0;transform:none}
/* The light-theme root rules above are `html[data-theme="light"] .poi-marker(--
 * selected)` - a TYPE selector (`html`) plus a class, which ties a plain two-class
 * compound like `.pres-pin.poi-marker--selected` on classes/attributes (both 2) and
 * then wins the tie-break on the type-selector tier. Matching that same
 * `html[data-theme="light"]` prefix here keeps the tie at BOTH tiers, so source
 * order (this file, this rule is later) decides, same as the unprefixed case above. */
html[data-theme="light"] .pres-pin:not(.poi-marker--selected){background:transparent}
html[data-theme="light"] .pres-pin.poi-marker--selected{background:transparent;
  box-shadow:none;border-radius:0}
.pres-pin.poi-marker--selected::before{width:40px;height:40px;background:#FF7A1A;
  box-shadow:0 3px 8px rgba(0,0,0,.45)}
html[data-theme="light"] .pres-pin.poi-marker--selected::before{background:#FF7A1A}
.pres-pin.poi-marker--selected::after{top:39px;margin-left:-8px;border-left-width:8px;
  border-right-width:8px;border-top-width:11px;border-top-color:#FF7A1A}
html[data-theme="light"] .pres-pin.poi-marker--selected::after{border-top-color:#FF7A1A}
.pres-pin.poi-marker--selected .poi-marker-icon{left:10px;top:10px;width:20px;height:20px;
  background:#181B1A;transform:none}