/* ═════════════════════════════════════════════════════════════════════════
   COMPASS PASS

   Loaded after every other sheet (see index.html), so it wins on source
   order; self-contained, so removing its one <link> reverts all of it.

     1. (removed: the 10px padding/margin on every popup and container)
     2. The compass overlay's 0.3 tint, under its lines.
     3. The compass's per-degree tick ring, its true-north line, and its
        triangle drawn in to the ticks' inner ends.
     4. The same furniture around a marker's set-direction ring.
   ═════════════════════════════════════════════════════════════════════════ */


/* ═══ 2. THE COMPASS OVERLAY'S TINT ════════════════════════════════════════
   .large_compass_overlay is the full-viewport box that is only displayed
   while the compass is on (toggleCompass() flips it between none and flex),
   so a background on it is a tint that exists exactly as long as the
   compass does. Every ring, bar, tick and reading is its descendant, so they
   all paint on top of it at full opacity; the rails (30000) still sit above
   the whole overlay and stay untinted. pointer-events stays none, so the map
   underneath still pans and rotates through it. */
.large_compass_overlay {
  background-color: rgba(0, 0, 0, 0.3) !important;
}


/* ═══ 3. ONE TICK PER DEGREE INSIDE THE COMPASS RING ═══════════════════════
   The SVG fills .cs_compass_indicator_ring's padding box - a square exactly
   as wide as the ring, so its top-centre point sits on the ring. Each of
   the 360 lines (built by buildCompassDegreeTicks() in script.js) runs from
   there 48px straight down toward the centre, and is turned into place
   about the SVG's centre: transform-box: view-box makes 50% 50% the centre
   of the SVG rather than of the line's own zero-width bounding box. The SVG
   itself turns with the map bearing, the same way the N/S line does. */
.cs_compass_degree_ticks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.cs_compass_degree_tick {
  stroke: #ffffff;
  stroke-width: 1px;
  stroke-opacity: 1;
  transform-box: view-box;
  transform-origin: 50% 50%;
}


/* ═══ 4. SET DIRECTION: TRIANGLE AND TICK RING ═════════════════════════════
   Both SVGs are built by ensureMarkerDirectionOverlays() in script.js and
   shown only while a marker's set-direction controls are open with an
   angle set. Centred on the marker the same way the indicator line and the
   labels are (top/left 50%, translate -50%); the rotate that follows the
   translate is set inline. Solid white 1px, the same stroke as the large
   compass overlay's triangle and ticks.

   z-index 8: above .cs_marker_button_container (6), which holds the
   translucent band the ticks sit on, and below the degree and cardinal
   labels (9), whose opaque discs the triangle's vertices run under. */
.marker_direction_triangle,
.marker_direction_ticks {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: visible;
  pointer-events: none;
  transform-origin: 50% 50%;
  z-index: 8;
}

.marker_direction_triangle polygon {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1px;
  stroke-linejoin: round;
}

.marker_direction_ticks line {
  stroke: #ffffff;
  stroke-width: 1px;
  transform-box: view-box;
  transform-origin: 50% 50%;
}


/* ═══ 5. TRIANGLE ON THE TICKS' INNER ENDS, AND TRUE NORTH IN RED ══════════
   The compass triangle used to be inscribed in the ring itself, so its
   three points sat out on the ring, on the OUTER ends of the ticks. Drawing
   its SVG 48px in from every side - the tick length - inscribes it in the
   circle the ticks' inner ends make instead, so each point lands on the
   inner end of the tick at that angle. (Its viewBox is a unit circle and
   the box stays square, so the same polygon just scales down.) */
.cs_compass_indicator_triangle_svg {
  top: 48px !important;
  left: 48px !important;
  width: calc(100% - 96px) !important;
  height: calc(100% - 96px) !important;
}

/* True north, centre to ring, in red. It lives in the tick SVG, so it
   turns with the map bearing along with them.

   A literal red, not --compass_needle_north_color: the black-and-white
   palette pass (ui_seamless_mono.css) sets that token to #ffffff, which
   would draw these as two more white lines. This is the one deliberate
   colour on the compass. */
:root {
  --true_north_red: #e53935;
}
.cs_compass_true_north_line,
.marker_direction_north line {
  stroke: var(--true_north_red);
  stroke-width: 2px;
  stroke-linecap: butt;
}

/* the ring closing the set-direction tick band on its outer edge */
.marker_direction_ticks_ring {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1px;
}

/* The set-direction north line: same centring and rotation as the tick
   SVG (script.js copies its transform), but z-index 5 - under the action
   buttons (their container is 6) so it runs behind the top button instead
   of across its icon, and over the direction line (4). */
.marker_direction_north {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: visible;
  pointer-events: none;
  transform-origin: 50% 50%;
  z-index: 5;
}