/* ============================================================
   COMPASS
   Circular wind direction picker with 8 cardinal segments.
   ============================================================ */

.compass-wrapper {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}

.compass {
  position: relative;
  width: 220px;
  height: 220px;
}

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

.compass-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 2px 8px rgba(26,26,46,0.1);
  pointer-events: none;
  z-index: 2;
}

/* ---- Segment button ---- */
.compass-seg {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--color-gray-300);
  background: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  z-index: 1;
  padding: 0;
}

.compass-seg:hover {
  border-color: var(--color-purple);
  transform: scale(1.1);
  box-shadow: 0 2px 10px rgba(75,63,160,0.15);
}

.compass-seg.active {
  background: var(--gradient-primary);
  border-color: var(--color-primary);
  box-shadow: 0 2px 12px rgba(255,107,53,0.3);
}

.compass-seg.active .compass-seg-label {
  color: var(--color-dark);
}

.compass-seg-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
  pointer-events: none;
}

/* ---- Positions: place each segment on the circle ---- */
/* Circle radius ~84px from centre of 220px container */
.compass-top         { top:   2px;  left: 50%; transform: translateX(-50%); }
.compass-top-right   { top:  22px;  right: 22px; }
.compass-right       { top:  50%;   right: 2px;  transform: translateY(-50%); }
.compass-bottom-right{ bottom:22px; right: 22px; }
.compass-bottom      { bottom:2px;  left: 50%; transform: translateX(-50%); }
.compass-bottom-left { bottom:22px; left:  22px; }
.compass-left        { top:  50%;   left:  2px;  transform: translateY(-50%); }
.compass-top-left    { top:  22px;  left:  22px; }

/* Hover should still keep its position offset */
.compass-top:hover         { transform: translateX(-50%) scale(1.1); }
.compass-right:hover       { transform: translateY(-50%) scale(1.1); }
.compass-bottom:hover      { transform: translateX(-50%) scale(1.1); }
.compass-left:hover        { transform: translateY(-50%) scale(1.1); }

/* ---- Direction pills for show/index views ---- */
.winddir-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.winddir-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: var(--color-dark);
}