/* ════════════════════════════════════════════════════════════════════
   CANVASS PRO · pins.css
   The field language, milled: the hex-coin map markers and the radial
   quick-disposition picker (pins.js → window.Pins). TOKEN-ONLY. The only
   field color (the disposition hue) arrives at runtime as --c via inline
   style from the engine; it is never written as raw hex here. Every other
   value is a token from ../assets/tokens.css.
   ════════════════════════════════════════════════════════════════════ */

/* a knocked-out ink for glyphs on a saturated coin: a fixed near-white that
   reads in both themes (field language, like the marker face). Expressed as
   color-mix so the stylesheet carries no raw color literals. */
:root { --pin-ink: color-mix(in srgb, white 96%, black); }
@media (prefers-color-scheme: light) { :root { --pin-ink: color-mix(in srgb, white 100%, black); } }

/* the marker wrappers carry no chrome; the coin/dot is the mark */
.pin-pin { background: none; border: none; }

/* ── the unworked door · a hollow dot, the absence of a reading ──── */
.pin-dot {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--plat-faint); opacity: .62;
  transition: border-color var(--m-fast) var(--ease), opacity var(--m-fast) var(--ease);
}
.pin-pin:hover .pin-dot { opacity: 1; border-color: var(--plat-dim); }
@media (prefers-color-scheme: light) {
  .pin-dot { border-color: var(--plat-dim); background: color-mix(in srgb, var(--graphite) 50%, transparent); }
}

/* ── the hot-lead beacon · DataGrid says knock here first (ember) ── */
/* the ONE place ember glows: the hot door earns the ember halo (--e-ember) */
.pin-hot .pin-dot {
  border-color: var(--ember);
  background: color-mix(in srgb, var(--ember) 24%, transparent);
  box-shadow: var(--e-ember);
}
.pin-beacon {
  position: absolute; left: 50%; top: 50%; width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px; border-radius: 50%;
  border: 1px solid var(--ember); opacity: .38;
  animation: pinBeacon 3.4s var(--ease) infinite;
}
/* a calm breath, not a ping: small travel, low opacity, slow cadence */
@keyframes pinBeacon {
  0%   { transform: scale(.82); opacity: .42; }
  70%  { transform: scale(1.06); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pin-beacon { animation: none; opacity: .45; } }

/* ── the worked door · the milled hex coin ──────────────────────── */
.pin-coin-wrap { position: relative; }
.pin-coin {
  display: block;
  /* a liftable coin (--e2 read): a layered drop-shadow, the only form an SVG
     filter can take. Fixed dark shadow ink (like the tokens.css elevation
     recipes), never the theme ground: obsidian flips to warm paper in light
     mode and a pale shadow would erase the lift on satellite tiles */
  filter:
    drop-shadow(0 1px 1px color-mix(in srgb, black 45%, transparent))
    drop-shadow(0 2px 4px color-mix(in srgb, black 35%, transparent));
  transition: transform var(--m-fast) var(--ease-spring), filter var(--m-fast) var(--ease);
  overflow: visible;
}
/* engaged · the coin lifts to a higher tier (--e3 read) */
.pin-coin.pin-engaged {
  filter:
    drop-shadow(0 2px 3px color-mix(in srgb, black 55%, transparent))
    drop-shadow(0 5px 10px color-mix(in srgb, black 45%, transparent));
}
.pin-pin:hover .pin-coin { transform: scale(1.08); }

/* the coin body fills with the disposition color (--c); the rim is the
   ground (obsidian) so each coin sits clean on any basemap. */
.pin-coin .pc-body {
  fill: var(--c);
  stroke: var(--obsidian);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
/* a faint inner bevel hairline: the "machined token" read */
.pin-coin .pc-bevel {
  fill: none;
  stroke: color-mix(in srgb, var(--platinum) 20%, transparent);
  stroke-width: 1;
  stroke-linejoin: round;
}
@media (prefers-color-scheme: light) {
  .pin-coin .pc-body { stroke: color-mix(in srgb, var(--graphite) 92%, transparent); }
  .pin-coin .pc-bevel { stroke: color-mix(in srgb, var(--platinum) 14%, transparent); }
}

/* the knocked-out glyph, centered over the coin */
.pin-coin-mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.pin-coin-glyph { display: block; }

/* engaged coins get a touch more lift on the glyph for legibility */
.pin-engaged + .pin-coin-mark .pin-coin-glyph { filter: drop-shadow(0 1px 1px color-mix(in srgb, black 35%, transparent)); }

/* ── the knock stamp · reuses the engine's popPin() hook (.fm-tear.stamp).
      The pin "lands" when a knock is logged. Already reduced-motion-safe
      because it is a one-shot, not a loop. ──────────────────────────── */
.fm-tear.stamp { animation: pinCoinStamp 380ms var(--ease-spring); }
@keyframes pinCoinStamp {
  0%   { transform: scale(.42) translateY(-6px); }
  60%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fm-tear.stamp { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   THE RADIAL QUICK-PICKER · a ring of disposition wedges at the pin.
   ════════════════════════════════════════════════════════════════════ */
.pin-radial-root { position: fixed; inset: 0; z-index: 1290; pointer-events: none; }
.pin-radial-root.on { pointer-events: auto; }
.pin-radial-root:not(.on) { display: none; }

.pin-radial-scrim {
  position: fixed; inset: 0; background: var(--scrim);
  opacity: 0; transition: opacity var(--m-base) var(--ease);
}
.pin-radial-root.armed .pin-radial-scrim { opacity: 1; }

/* the radial is centered on the pin; left/top come inline from JS */
.pin-radial {
  position: fixed; width: var(--rsize); height: var(--rsize);
  transform: translate(-50%, -50%);
}

.pin-ring { position: absolute; inset: 0; }

/* ── a wedge · a disposition node that springs out to (--wx,--wy) ── */
.pin-wedge {
  position: absolute; left: 50%; top: 50%;
  width: var(--node); height: var(--node); margin: calc(var(--node) / -2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  background: var(--graphite); color: var(--platinum);
  border: 1px solid var(--line-hi); border-radius: 50%;
  /* a floating surface in the picker ring (--e3) plus the top light-catch */
  box-shadow: var(--e3), var(--e-inset);
  /* rest: collapsed at the center, invisible */
  transform: translate(0, 0) scale(.3); opacity: 0;
  transition:
    transform var(--m-base) var(--ease-spring),
    opacity var(--m-fast) var(--ease),
    border-color var(--m-fast) var(--ease),
    background var(--m-fast) var(--ease);
  transition-delay: calc(var(--wi) * 22ms);
}
.pin-radial-root.armed .pin-wedge {
  transform: translate(var(--wx), var(--wy)) scale(1); opacity: 1;
}
.pin-wedge:hover {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 18%, var(--graphite));
}
/* keyboard focus reads like every sibling module: the ember ring */
.pin-wedge:focus-visible, .pin-hub:focus-visible { outline: none; box-shadow: var(--ring-ember), var(--e3); }
/* the wedge that matches the door's current disposition reads "set" */
.pin-wedge.rw-current {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 22%, var(--graphite));
}
.pin-wedge .pw-now {
  position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c); border: 1.5px solid var(--graphite);
}
/* the commit flourish when a wedge is chosen */
.pin-wedge.rw-picked {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 36%, var(--graphite));
  transform: translate(var(--wx), var(--wy)) scale(1.16);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), var(--e3);
}

.pin-wedge .pw-glyph { display: flex; align-items: center; justify-content: center; line-height: 0; color: var(--c); }
.pin-wedge .pw-lab {
  font-family: var(--mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--plat-dim); line-height: 1; margin-top: 1px;
}
.pin-wedge:hover .pw-lab, .pin-wedge.rw-current .pw-lab { color: var(--platinum); }

/* ── the center hub · door address + a Details affordance ───────── */
.pin-hub {
  position: absolute; left: 50%; top: 50%;
  width: var(--hub); height: var(--hub); margin: calc(var(--hub) / -2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px;
  background: var(--obsidian); color: var(--platinum);
  border: 1px solid var(--line-hi); border-radius: 50%;
  /* the picker's center hub is a floating surface (--e3) with the top light-catch */
  box-shadow: var(--e3), var(--e-inset);
  transform: scale(.6); opacity: 0;
  transition: transform var(--m-base) var(--ease-spring), opacity var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.pin-radial-root.armed .pin-hub { transform: scale(1); opacity: 1; }
.pin-hub:hover { border-color: var(--ember); }
.pin-hub .ph-addr {
  font-size: 10px; line-height: 1.15; font-weight: 600; text-align: center;
  max-width: calc(var(--hub) - 8px); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pin-hub .ph-cta { font-size: 8.5px; letter-spacing: .12em; color: var(--ember); }

/* ── reduced motion · no spring fan-out, just a fade ────────────── */
@media (prefers-reduced-motion: reduce) {
  .pin-wedge {
    transition: opacity var(--m-fast) var(--ease), background var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
    transition-delay: 0ms;
    transform: translate(var(--wx), var(--wy)) scale(1);
  }
  .pin-radial-root:not(.armed) .pin-wedge { opacity: 0; }
  .pin-hub { transition: opacity var(--m-fast) var(--ease); transform: scale(1); }
  .pin-wedge.rw-picked { transform: translate(var(--wx), var(--wy)) scale(1); }
}