/**
 * @file map-azimuth.css
 * @purpose Style the circular cartographic compass in the sun clock palette.
 * @dependencies map-azimuth.js SVG artwork and shared .map-tool-button styles.
 * @public .azimuth-control, .azimuth-dial, .azimuth-value; --azimuth-size sizing.
 * @sideEffects Overrides shared glass/glow/press styling for this compass only.
 */

/* ----- Existing map-corner alignment ----- */

.coordinate-stack {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

.map-corner-controls {
  align-items: flex-end;
}

/* ----- Flat charcoal shell: the structural ring is drawn in SVG ----- */

.map-tool-button.azimuth-control {
  --azimuth-size: 142.5px;
  width: var(--azimuth-size);
  height: var(--azimuth-size);
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #25252d;
  box-shadow: none;
  color: #f1f0f5;
  cursor: grab;
  touch-action: none;
  user-select: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}

.map-tool-button.azimuth-control:hover:not(:disabled),
.map-tool-button.azimuth-control:focus-visible,
.map-tool-button.azimuth-control:active:not(:disabled),
.map-tool-button.azimuth-control.is-dragging {
  background: #25252d;
  box-shadow: none;
  transform: none;
}

.map-tool-button.azimuth-control:focus-visible {
  outline: 2px solid #c1bedb;
  outline-offset: 3px;
}

.map-tool-button.azimuth-control.is-dragging {
  cursor: grabbing;
}

.azimuth-dial,
.azimuth-artwork {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
}

/* ----- Uniform compass geometry, subdued secondary markings ----- */

.azimuth-edge {
  fill: #25252d;
  stroke: #1d1d25;
  stroke-width: 1;
}

.azimuth-ring {
  fill: none;
  stroke: #4285F4;
  stroke-width: 7;
}

.azimuth-tick {
  stroke: #bab9c7;
  stroke-width: 1;
  opacity: 0.52;
}

.azimuth-tick-major {
  stroke-width: 2.2;
  opacity: 0.74;
}

.azimuth-cardinal {
  fill: #dedde6;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.azimuth-cardinal-north {
  fill: #f1f0f5;
  font-size: 14px;
  font-weight: 700;
}

.azimuth-crosshair {
  fill: none;
  stroke: #606071;
  stroke-width: 1;
  opacity: 0.42;
}

.azimuth-hub {
  fill: #25252d;
  stroke: #8a879e;
  stroke-width: 1.2;
}

.azimuth-needle {
  fill: #4285F4;
}

/* ----- Dominant bearing output, fixed upright above the rotating artwork ----- */

.azimuth-value {
  position: absolute;
  top: 52.63%;
  left: 50%;
  display: grid;
  width: 47.37%;
  height: 24.21%;
  box-sizing: border-box;
  border: 1px solid rgba(128, 123, 166, 0.26);
  /* Curved corners preserve room for every rotating cardinal, including 45°. */
  border-radius: calc(var(--azimuth-size) * 0.12105);
  /* The pointer must remain visible when true north passes behind the readout. */
  background: transparent;
  color: #f1f0f5;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: calc(var(--azimuth-size) * 0.2);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1;
  pointer-events: none;
  place-items: center;
  transform: translateX(-50%);
}

/* The viewBox preserves exact bearings and circle shape on compact screens. */
@media (max-width: 44rem), (max-height: 48rem) {
  .map-tool-button.azimuth-control {
    --azimuth-size: 112.5px;
  }
}