/* ════════════════════════════════════════════════════════════════
   Nav object — four-armed draggable navigation. Loaded by every
   pinkteaming.net page; pairs with nav.js. The wrapper div is
   created by nav.js, but its styles live here.
   ════════════════════════════════════════════════════════════════ */

:root {
  --nav-container-size: 220px;
  --nav-arm-stroke-active: 1.5px;
  --nav-arm-stroke-inactive: 1px;
  --nav-transition-duration: 400ms;
  --nav-label-size: 0.65rem;
  --nav-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-object {
  position: fixed;
  /* Above the surface mobile-overlay (z-index 100) so the star stays
     visible on top of the heads-up card and the visitor can navigate
     away without dismissing the overlay first. */
  z-index: 200;
  user-select: none;
  cursor: default;
  background: transparent;
  border: none;
  /* Wrapper is the SHAPE size. Position is locked at the default for
     the current page; labels render outside via an oversized SVG
     centered on this box and overflow visibly. */
  width: var(--nav-container-size);
  height: var(--nav-container-size);
  overflow: visible;
}
.nav-object.snapping {
  transition: left 200ms var(--nav-easing), top 200ms var(--nav-easing);
}
.nav-object svg {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--nav-container-size) + 140px);
  height: calc(var(--nav-container-size) + 140px);
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}
.nav-object svg > * { pointer-events: auto; }

.nav-object .star-poly {
  fill: var(--pink);
  stroke: var(--ink);
  stroke-width: var(--nav-arm-stroke-inactive);
  stroke-linejoin: miter;
  stroke-linecap: square;
  transition:
    stroke-width var(--nav-transition-duration) var(--nav-easing),
    stroke var(--nav-transition-duration) var(--nav-easing),
    fill var(--nav-transition-duration) var(--nav-easing);
}
.nav-object .star-poly.has-active { stroke-width: var(--nav-arm-stroke-active); }
/* The center-hover-flips-paper effect is for desktop pointers only.
   On iOS Safari, :hover sticks after a tap and the star stays white
   until another element is hovered. */
@media (hover: hover) {
  .nav-object:has(.center-hit:hover) .star-poly { fill: var(--paper); }
}
.nav-object .label-bg { fill: var(--paper); fill-opacity: 1; }
.nav-object .arm-label {
  font-family: var(--font-mono);
  font-size: var(--nav-label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ink);
  font-weight: 400;
  opacity: 0.25;
  transition:
    opacity var(--nav-transition-duration) var(--nav-easing),
    font-weight var(--nav-transition-duration) var(--nav-easing);
}
.nav-object .arm-label.active { opacity: 1; font-weight: 500; }
.nav-object .center-dot { fill: var(--ink); }
.nav-object .center-hit { fill: transparent; cursor: pointer; pointer-events: all; }
.nav-object.dragging .center-hit { pointer-events: none; }
.nav-object .arm-hit { fill: transparent; cursor: pointer; pointer-events: all; }
.nav-object.dragging .arm-hit { pointer-events: none; }

/* ── Mobile: shrink the star so it doesn't dominate ─────────── */
@media (max-width: 768px) {
  :root {
    --nav-container-size: 130px;
    /* SVG text inside a viewBox scales with the viewBox. Mobile SVG is
       220px display for a 300-unit viewBox = 0.73 scale, so 1rem here
       actually renders at ~12 display px. Bumping to 1.4rem brings the
       letter up to ~16 display px — readable button-label size.
       This var also drives the white pill (paintArms reads it via JS),
       so changing it sizes both text and bg coherently. */
    --nav-label-size: 1.4rem;
  }
  .nav-object svg {
    width: calc(var(--nav-container-size) + 90px);
    height: calc(var(--nav-container-size) + 90px);
  }
  .nav-object .arm-label { font-weight: 500; }
  .nav-object .arm-label.active { font-weight: 700; }
}

/* ── Touch: drag is suppressed in JS; match the cursor here. */
@media (pointer: coarse) {
  .nav-object,
  .nav-object.dragging { cursor: default; }
}