/* Leaflet divIcon markers (spec 127 task #4). These are injected into the map by
   the `map` Stimulus controller, OUTSIDE Tailwind-scanned templates, so they can't
   use utility classes — the hex values mirror the design tokens (tokens.md):
   subject → --color-bsa-green, competitor → --color-bsa-orange, school → --color-bsa-lilac. */
.map-pin {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.map-pin-subject     { background: #003527; width: 20px; height: 20px; } /* bsa-green */
.map-pin-competitor  { background: #F47B20; }                            /* bsa-orange */
.map-pin-school      { background: var(--color-bsa-lilac, #B096C7); }     /* info tone; navy is retired (R5) */
.map-pin-centre      { background: #003527; border-color: #C8D3B9; }      /* ours: bsa-green in a sage ring (311 S3) */
.map-pin-default     { background: #6A7280; }

/* Spec 311 S4 — the cluster count pin. Injected by the map controller into
   Leaflet's own DOM (outside Tailwind's template scan), so plain CSS against
   the tokens: bsa-green ground, white ring like every pin. */
.map-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: 2px solid #ffffff;
  background: #003527;                       /* bsa-green */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Spec 213 M2 — pipeline tier pins. The bands are the score's own
   (MapMarkers::TIERS), and the legend renders from the same classes, so a pin
   and its key cannot drift apart the way the prototype's did. */
.map-pin-tier-a        { background: var(--color-bsa-green, #003527); }
.map-pin-tier-b        { background: var(--color-bsa-green-700, #485425); }
.map-pin-tier-c        { background: var(--color-bsa-orange, #F47B20); }
.map-pin-tier-d        { background: #A8A29E; }                          /* stone-400 */
/* 318 (Vlad, prod 2026-08-13: "the white is hard to see") — the unscored pin
   was white on a white-ish basemap with only a stone-400 hairline, so it
   disappeared over pale tiles. It is NOT a rare state: 5,315 of 5,565 prod
   pins are unscored, so the invisible pin was 95% of the map.

   NOT orange, though that was the ask: bsa-orange IS tier C, so painting
   unscored orange would make almost every pin claim a mid score, and §3.2
   keeps orange as the accent/warning tone rather than a neutral.

   Nor is it simply a darker grey: stone-500 was legible but sat a hair from
   tier-d's stone-400, and those two must never be confused — D means "we
   scored it and it is weak", unscored means "we have not looked yet". So
   unscored is the only HOLLOW pin: a white centre held inside a solid
   stone-500 ring. It reads as "empty, not yet filled in", it cannot be
   mistaken for any filled tier at a glance, and the ring gives it the
   contrast against pale tiles that the old hairline never had. */
.map-pin-tier-unscored {
  background: #FFFFFF;
  border-color: #78716C;                       /* stone-500 */
  border-width: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ── Popup chrome (spec 213 M1, restyled 2026-08-06) ─────────────────────────
   Leaflet ships its own popup skin and it is NOT our style sheet: a 12px
   default wrapper radius, its own shadow, a grey serif-ish close glyph, and
   `.leaflet-container a { color: #0078A8 }` — a two-class selector that
   outranks a Tailwind utility, which is why the popup's "View" rendered in
   default link blue no matter what class it carried (Vlad, 2026-08-06).

   These rules live here rather than in a view because the popup is injected
   into Leaflet's own DOM, outside Tailwind's template scan. Values mirror
   tokens.md — do not hardcode a new one. */
.leaflet-popup-content-wrapper {
  border-radius: 0.5rem;                       /* rounded-lg */
  border: 1px solid var(--color-bsa-sage, #D5DBCC);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  padding: 0;
}
.leaflet-popup-content {
  margin: 0.875rem 1rem;
  font-size: 0.8125rem;                        /* text-sm, the popup's base */
  line-height: 1.45;
}
.leaflet-popup-tip {
  border: 1px solid var(--color-bsa-sage, #D5DBCC);
  box-shadow: none;
}
/* Beat `.leaflet-container a` without !important: same specificity, later. */
.leaflet-container a.leaflet-popup-close-button {
  color: #A8A29E;                              /* stone-400 */
  font: 400 1.125rem/1 system-ui, sans-serif;
  padding: 0.5rem 0.5rem 0 0;
}
.leaflet-container a.leaflet-popup-close-button:hover { color: #44403C; } /* stone-700 */
/* Anything we render inside a popup keeps the colour its own class gives it. */
.leaflet-container .leaflet-popup-content a { color: inherit; }

/* 275 walkthrough (2026-08-10) — Leaflet's layers-control glyph ships as a
   spritesheet image whose relative URL propshaft cannot resolve, so the
   control rendered as an empty white square on the map hero. Inline the
   stack glyph instead; no asset lookup to break. */
.leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344403c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5z'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E") !important;
  background-size: 18px 18px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 311 V8 — no z-index rule here, and that is deliberate: Leaflet's map pane
   (z 400) is ONE stacking context holding tiles→popups (200-700), so a popup
   can never out-stack a control corner, whatever the numbers say (a 650 rule
   shipped briefly on that wrong model and did nothing). The popover clears
   the layers panel by AUTO-PAN instead: map_controller#popupPadding reserves
   the panel's width, so opening a pin slides the map until the popover sits
   fully in the open. */