/* css/subpins.css — P3-01. Sub-pin markers (seven kinds), the parent count
   badge, and the sub-pin popup.

   Decisions:
   - Tokens ONLY from styles.css. Each kind sets --sub-color on its modifier
     class, so the base rules never repeat per kind (same trick as pins.css's
     --pin-color).
   - The divIcon wrapper is a full 44x44 invisible tap target (project rule);
     the visible chip is 20px — deliberately smaller than the 16-22px site
     dot so hierarchy reads at a glance.
   - Kind identity = colour family + glyph. The five underwater kinds sit in
     the dive blue family (--accent-2) with distinct glyphs; viewpoint reads
     as LAND (--accent, the hike teal); hazard reads as a WARNING (--bad fill,
     --warn ring, "!"). White border + dark outer ring keeps every chip
     legible on both pale topo and dark satellite basemaps.
   - .atlas-pin__count is styled here, not in pins.css: the badge exists only
     because sub-pins exist, and this module owns the feature. It is
     pointer-events:none so the tap always lands on the parent pin. */

/* ── Marker base ─────────────────────────────────────────────────────────── */

.atlas-subpin {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.atlas-subpin__chip {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--sub-color, var(--accent-2));
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(10, 16, 19, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, width 120ms ease, height 120ms ease;
}

/* Glyph carrier. Per-kind content below. */
.atlas-subpin__chip::after {
  content: '';
  color: #fff;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* ── The seven kinds ─────────────────────────────────────────────────────── */

/* Underwater family: shades around --accent-2 so they read as "water",
   separated by glyph + lightness. */
.atlas-subpin--ledge      { --sub-color: color-mix(in srgb, var(--accent-2) 78%, #0a2a55); }
.atlas-subpin--ledge      .atlas-subpin__chip::after { content: '≡'; }

.atlas-subpin--structure  { --sub-color: color-mix(in srgb, var(--accent-2) 65%, var(--text-dim)); }
.atlas-subpin--structure  .atlas-subpin__chip::after { content: '#'; font-size: 10px; }

.atlas-subpin--cave       { --sub-color: color-mix(in srgb, var(--accent-2) 45%, #060d18); }
.atlas-subpin--cave       .atlas-subpin__chip::after { content: '∩'; font-size: 12px; }

.atlas-subpin--pipe       { --sub-color: var(--accent-2); }
.atlas-subpin--pipe       .atlas-subpin__chip::after { content: '◎'; font-size: 12px; }

.atlas-subpin--wreck-piece { --sub-color: color-mix(in srgb, var(--accent-2) 40%, var(--bg-raised)); }
.atlas-subpin--wreck-piece .atlas-subpin__chip::after { content: '⚓'; font-size: 10px; }

/* Land: viewpoint rides the hike teal. */
.atlas-subpin--viewpoint  { --sub-color: var(--accent); }
.atlas-subpin--viewpoint  .atlas-subpin__chip::after { content: '▲'; font-size: 9px; color: #0b2320; text-shadow: none; }

/* Warning: red fill, amber ring, exclamation. Unmistakable. */
.atlas-subpin--hazard     { --sub-color: var(--bad); }
.atlas-subpin--hazard     .atlas-subpin__chip { border-color: var(--warn); }
.atlas-subpin--hazard     .atlas-subpin__chip::after { content: '!'; font-size: 12px; }

/* color-mix fallback: plain dive blue still yields legible, glyph-separated
   chips on engines without color-mix. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .atlas-subpin--ledge, .atlas-subpin--structure, .atlas-subpin--cave,
  .atlas-subpin--wreck-piece { --sub-color: var(--accent-2); }
}

/* ── Interaction states ──────────────────────────────────────────────────── */

.atlas-subpin:hover .atlas-subpin__chip,
.atlas-subpin:focus-visible .atlas-subpin__chip {
  transform: scale(1.15);
}
.atlas-subpin:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -6px;
  border-radius: 50%;
}

/* Child selection halo — same language as site pins, independent state. */
.atlas-subpin.is-selected .atlas-subpin__chip {
  width: 26px;
  height: 26px;
  box-shadow:
    0 0 0 1.5px rgba(10, 16, 19, 0.55),
    0 0 0 6px color-mix(in srgb, var(--sub-color, var(--accent-2)) 32%, transparent),
    0 1px 5px rgba(0, 0, 0, 0.5);
}
@supports not (box-shadow: 0 0 0 1px color-mix(in srgb, red 30%, transparent)) {
  .atlas-subpin.is-selected .atlas-subpin__chip {
    box-shadow: 0 0 0 1.5px rgba(10, 16, 19, 0.55), 0 0 0 6px rgba(58, 134, 255, 0.32);
  }
}

/* ── Parent count badge (element created by the pins.js P3-01 hook) ──────── */

.atlas-pin__count {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;      /* the tap belongs to the parent pin */
}

/* ── Popup, dressed in app tokens ────────────────────────────────────────── */

.atlas-subpin-pop .leaflet-popup-content-wrapper {
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.atlas-subpin-pop .leaflet-popup-content { margin: var(--pad); font-family: var(--font); }
.atlas-subpin-pop .leaflet-popup-tip { background: var(--bg-raised); border: 1px solid var(--line); }
.atlas-subpin-pop .leaflet-popup-close-button { color: var(--text-dim); }

.atlas-subpin-pop__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 10rem; }
.atlas-subpin-pop__name { font-size: 0.9rem; }
.atlas-subpin-pop__meta { color: var(--text-dim); font-size: 0.75rem; font-family: var(--mono); }
.atlas-subpin-pop__notes { font-size: 0.8rem; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .atlas-subpin__chip { transition: none; }
}