/* =====================================================================
 * CapeLookout Weather Spine — Map Weather Layer styles
 * cl-map-weather-layer-v0.2.1.css
 *
 * Scope: everything is namespaced .clwx-* and parented to the map
 * container. No global resets, no HUD, no demo chrome. GDS tokens are
 * referenced via CSS custom properties so Map Station can override.
 * ===================================================================== */

.clwx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.clwx-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* container ignores clicks; cards opt back in */
  z-index: 3;
}

/* GDS-ish defaults; override by setting these vars on the map container */
.clwx-overlay {
  --clwx-cyan: #55e6ff;
  --clwx-gold: #ffd568;
  --clwx-ink: #eefaff;
  --clwx-muted: #9fb6c0;
  --clwx-warn: #ff6f5d;
  --clwx-watch: #ffbd58;
  --clwx-glass: rgba(8, 20, 29, 0.82);
  --clwx-edge: rgba(120, 234, 255, 0.20);
}

/* ------------------------------------------------------------------ *
 * Card wrapper — positioned by JS (left/top = town pixel + offset)
 * ------------------------------------------------------------------ */
.clwx-card {
  position: absolute;
  pointer-events: auto;
  will-change: transform;
  transition: opacity 0.2s ease;
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
}

/* tier visibility */
.clwx-card .clwx-full { display: none; }
.clwx-card .clwx-pill { display: none; }
.clwx-card.clwx-full .clwx-full { display: block; }
.clwx-card.clwx-pill .clwx-pill { display: flex; }
.clwx-card.clwx-hidden { display: none; }

/* ------------------------------------------------------------------ *
 * Full instrument card
 * ------------------------------------------------------------------ */
.clwx-full {
  width: 170px;
  transform: translate(-50%, 18px);
  border-radius: 14px;
  padding: 10px 11px 9px;
  background: var(--clwx-glass);
  border: 1px solid var(--clwx-edge);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(120, 234, 255, 0.05) inset;
  -webkit-backdrop-filter: blur(15px) saturate(1.15);
  backdrop-filter: blur(15px) saturate(1.15);
}

.clwx-card.clwx-warning .clwx-full { border-color: rgba(255, 111, 93, 0.5); }
.clwx-card.clwx-watch .clwx-full { border-color: rgba(255, 189, 88, 0.4); }

.clwx-corner {
  position: absolute; top: 7px; right: 7px;
  width: 6px; height: 6px;
  background: var(--clwx-cyan);
  transform: rotate(45deg);
  opacity: 0.5;
}
.clwx-card.clwx-warning .clwx-corner { background: var(--clwx-warn); opacity: 0.9; }
.clwx-card.clwx-watch .clwx-corner { background: var(--clwx-watch); opacity: 0.9; }

.clwx-r1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.clwx-nm {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600; font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: #f3fafe;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.clwx-chip {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--clwx-gold); white-space: nowrap;
}
.clwx-card.clwx-warning .clwx-chip { color: var(--clwx-warn); }
.clwx-card.clwx-watch .clwx-chip { color: var(--clwx-watch); }

.clwx-cd { color: #a7bdc7; font-size: 10px; margin-top: 1px; }

.clwx-tp {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 800; font-size: 27px; line-height: 1.04;
  letter-spacing: -0.03em; color: #fff; margin-top: 4px;
}
.clwx-tp sup { font-size: 12px; font-weight: 600; color: var(--clwx-gold); vertical-align: super; margin-left: 1px; }

.clwx-st {
  display: flex; gap: 13px; margin-top: 6px;
  padding-top: 7px; border-top: 1px solid rgba(120, 234, 255, 0.14);
}
.clwx-st div { display: flex; flex-direction: column; gap: 2px; }
.clwx-k {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 7px; letter-spacing: 0.09em; text-transform: uppercase; color: #6f8d99;
}
.clwx-v {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px; color: #e2f5fd; white-space: nowrap;
}
.clwx-ft { font-size: 7.5px; color: #7c97a2; margin-top: 6px; letter-spacing: 0.02em; }

/* ------------------------------------------------------------------ *
 * Temp pill (low / mid zoom)
 * ------------------------------------------------------------------ */
.clwx-pill {
  align-items: center; gap: 6px;
  transform: translate(-50%, 16px);
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: var(--clwx-glass);
  border: 1px solid var(--clwx-edge);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  white-space: nowrap;
}
.clwx-card.clwx-warning .clwx-pill { border-color: rgba(255, 111, 93, 0.5); }
.clwx-pill .clwx-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 7px currentColor; }
.clwx-pill .clwx-pt {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 700; font-size: 13px; color: #fff;
}
.clwx-pill .clwx-pt sup { font-size: 7px; color: var(--clwx-gold); vertical-align: super; }

/* ------------------------------------------------------------------ *
 * Reduced motion — the JS also stops animating; this hides transitions
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .clwx-card { transition: none; }
}