/* ============================================================================
   Asteria v2 — chart-wheel style overlays
   ----------------------------------------------------------------------------
   The server-side SVG renderer in render/chart.py is left untouched; that
   shape is "legacy" (the canonical Asteria wheel). Each non-legacy wheel
   style below is a CSS overlay that retargets the existing class hooks
   (.ring-zodiac, .zodiac-wedge, .ring-aspects .aspect-line, .chart-point
   .glyph, .house-tint, etc.) to produce a distinct visual register, while
   leaving the Python renderer free to keep emitting one canonical SVG.

   Body class is set by shell.py based on the wheel_style cookie:
       body.wheel-legacy            (no overrides — default)
       body.wheel-hairline          (architectural, ink-only)
       body.wheel-hairline-ticked   (hairline + 360° tick ring)
       body.wheel-hairline-starmap  (hairline + star scatter)
       body.wheel-aurora            (conic rainbow ring)
       body.wheel-neon              (synthwave glow)
       body.wheel-watercolor        (painterly blur + saturate)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   HAIRLINE family — strip every element-tinted fill, leave ink rings only.
   The wheel reads as "the chart is the data" — architectural, restrained.
   ---------------------------------------------------------------------------- */
body.wheel-hairline .chart .zodiac-wedge,
body.wheel-hairline-ticked .chart .zodiac-wedge,
body.wheel-hairline-starmap .chart .zodiac-wedge {
  fill: transparent !important;
  fill-opacity: 0 !important;
}
body.wheel-hairline .chart .house-tint,
body.wheel-hairline-ticked .chart .house-tint,
body.wheel-hairline-starmap .chart .house-tint {
  opacity: 0 !important;
}
body.wheel-hairline .chart .ring-aspects .aspect-line,
body.wheel-hairline-ticked .chart .ring-aspects .aspect-line,
body.wheel-hairline-starmap .chart .ring-aspects .aspect-line {
  stroke: var(--ink-secondary) !important;
  stroke-opacity: 0.55 !important;
}
body.wheel-hairline .chart .ring-zodiac,
body.wheel-hairline-ticked .chart .ring-zodiac,
body.wheel-hairline-starmap .chart .ring-zodiac {
  stroke: var(--ink-secondary);
}

/* HAIRLINE-TICKED — add a 360° degree-tick overlay drawn from a data: URI.
   The SVG positions are computed once into the gradient pattern; we layer
   it over the chart container via a pseudo-element so the underlying SVG
   doesn't need to change. */
body.wheel-hairline-ticked .chart {
  position: relative;
}
body.wheel-hairline-ticked .chart::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><g stroke='%23808080' stroke-width='0.8' stroke-linecap='round' fill='none'><line x1='500' y1='80' x2='500' y2='95'/></g></svg>");
  background-size: 100% 100%;
  /* 360 tick marks via repeated rotated copies — done with a CSS conic
     "pie" overlay limited to a thin ring. The simplest robust approach
     is the inline data URI generated server-side; for now we use a CSS
     conic-gradient mask trick. */
  background:
    conic-gradient(
      from -0.5deg,
      var(--ink-tertiary) 0deg, var(--ink-tertiary) 1deg,
      transparent 1deg, transparent 10deg
    );
  -webkit-mask: radial-gradient(circle at 50% 50%,
    transparent 0, transparent 47%, #000 47.2%, #000 49.2%, transparent 49.4%);
          mask: radial-gradient(circle at 50% 50%,
    transparent 0, transparent 47%, #000 47.2%, #000 49.2%, transparent 49.4%);
  opacity: 0.55;
}

/* HAIRLINE-STARMAP — scatter of faint deterministic stars behind the
   whole page (not just the chart container, so they actually fill the
   background void rather than getting cropped to the wheel's box). */
body.wheel-hairline-starmap {
  position: relative;
}
body.wheel-hairline-starmap::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1200'><g fill='%23c9a86b'><circle cx='60' cy='40' r='1.4'/><circle cx='220' cy='95' r='1.1'/><circle cx='430' cy='62' r='1.6'/><circle cx='620' cy='110' r='1'/><circle cx='790' cy='48' r='1.5'/><circle cx='980' cy='130' r='1.3'/><circle cx='1190' cy='72' r='1.1'/><circle cx='1380' cy='105' r='1.5'/><circle cx='1530' cy='60' r='1.4'/><circle cx='80' cy='260' r='1.2'/><circle cx='340' cy='240' r='1.1'/><circle cx='530' cy='310' r='1.5'/><circle cx='770' cy='260' r='1.3'/><circle cx='970' cy='320' r='1.2'/><circle cx='1230' cy='250' r='1'/><circle cx='1450' cy='310' r='1.3'/><circle cx='150' cy='480' r='1.5'/><circle cx='400' cy='540' r='1.2'/><circle cx='640' cy='470' r='1.4'/><circle cx='890' cy='540' r='1.1'/><circle cx='1110' cy='490' r='1.5'/><circle cx='1340' cy='560' r='1.3'/><circle cx='1540' cy='510' r='1.2'/><circle cx='60' cy='720' r='1.3'/><circle cx='280' cy='770' r='1.5'/><circle cx='520' cy='710' r='1.1'/><circle cx='760' cy='790' r='1.4'/><circle cx='980' cy='720' r='1.2'/><circle cx='1220' cy='800' r='1.5'/><circle cx='1450' cy='740' r='1.1'/><circle cx='130' cy='980' r='1.3'/><circle cx='370' cy='1020' r='1.2'/><circle cx='610' cy='970' r='1.5'/><circle cx='840' cy='1050' r='1.4'/><circle cx='1080' cy='970' r='1.1'/><circle cx='1320' cy='1030' r='1.3'/><circle cx='1540' cy='980' r='1.2'/><circle cx='250' cy='1140' r='1.4'/><circle cx='490' cy='1170' r='1.1'/><circle cx='720' cy='1130' r='1.3'/><circle cx='960' cy='1170' r='1.2'/><circle cx='1200' cy='1130' r='1.5'/><circle cx='1430' cy='1180' r='1.3'/></g></svg>");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.55;
  mix-blend-mode: screen;
}
body[data-theme="porcelain"].wheel-hairline-starmap::after {
  mix-blend-mode: multiply;
  opacity: 0.42;
}

/* ----------------------------------------------------------------------------
   AURORA — conic rainbow ring overlaid on the zodiac band. The wheel
   beneath stays intact; we layer a gradient ring that masks to the
   outer band area only.
   ---------------------------------------------------------------------------- */
body.wheel-aurora .chart {
  position: relative;
}
body.wheel-aurora .chart::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: conic-gradient(
    from -90deg,
    hsl(0,   72%, 56%),
    hsl(30,  72%, 56%),
    hsl(60,  68%, 56%),
    hsl(120, 50%, 50%),
    hsl(170, 56%, 48%),
    hsl(210, 56%, 52%),
    hsl(250, 56%, 56%),
    hsl(290, 56%, 56%),
    hsl(330, 70%, 56%),
    hsl(360, 72%, 56%)
  );
  -webkit-mask: radial-gradient(circle at 50% 50%,
    transparent 0, transparent 38%, #000 39.4%, #000 47.8%, transparent 49%);
          mask: radial-gradient(circle at 50% 50%,
    transparent 0, transparent 38%, #000 39.4%, #000 47.8%, transparent 49%);
  opacity: 0.55;
  mix-blend-mode: lighten;
}
body[data-theme="porcelain"].wheel-aurora .chart::after {
  mix-blend-mode: multiply;
  opacity: 0.42;
}
/* keep the inner sign-band content readable: lighten the underlying
   element wedges so the aurora reads as the dominant colour signal */
body.wheel-aurora .chart .zodiac-wedge {
  fill-opacity: 0.18 !important;
}

/* ----------------------------------------------------------------------------
   NEON — synthwave glow on planets + aspect lines. Pure CSS filters,
   no overlays. Pulses subtly under reduced-motion safe wrapper.
   ---------------------------------------------------------------------------- */
body.wheel-neon .chart .chart-point .glyph {
  filter: drop-shadow(0 0 4px var(--accent-gold))
          drop-shadow(0 0 1.5px var(--ink-primary));
}
body.wheel-neon .chart .ring-aspects .aspect-line {
  filter: drop-shadow(0 0 2px currentColor);
  stroke-width: 1.3 !important;
}
body.wheel-neon .chart .ring-zodiac .zodiac-wedge {
  fill-opacity: 0.4 !important;
  filter: saturate(1.5) brightness(1.05);
}
body.wheel-neon .chart .ring-houses .house-cusp {
  filter: drop-shadow(0 0 1.5px var(--accent-gold-soft));
}
@media (prefers-reduced-motion: no-preference) {
  body.wheel-neon .chart .ring-zodiac {
    animation: wheel-neon-pulse 4.5s ease-in-out infinite;
  }
  @keyframes wheel-neon-pulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.08); }
  }
}

/* ----------------------------------------------------------------------------
   WATERCOLOR — painterly bloom on the zodiac band. Blur + saturation
   make sign boundaries bleed into each other; planets and aspects
   stay crisp on top.
   ---------------------------------------------------------------------------- */
body.wheel-watercolor .chart .ring-zodiac {
  filter: blur(3px) saturate(1.45) brightness(1.05);
}
body.wheel-watercolor .chart .ring-zodiac .zodiac-wedge {
  fill-opacity: 0.7 !important;
}
body.wheel-watercolor .chart .house-tint {
  opacity: 0.25 !important;
  filter: blur(1.5px);
}
/* keep type and points sharp on top */
body.wheel-watercolor .chart .ring-points,
body.wheel-watercolor .chart .ring-aspects {
  filter: drop-shadow(0 0 1px var(--bg-deep));
}

/* ----------------------------------------------------------------------------
   Stronger uniform planet/asteroid glyph weight — applied to every
   non-legacy variant so the SVG-path glyphs read at a consistent
   instrument weight across the v2 vocabulary. Subtle stroke overlay.
   ---------------------------------------------------------------------------- */
body[class*="wheel-hairline"] .chart .chart-point .glyph,
body.wheel-aurora .chart .chart-point .glyph,
body.wheel-neon .chart .chart-point .glyph,
body.wheel-watercolor .chart .chart-point .glyph {
  stroke: currentColor;
  stroke-width: 0.45;
  paint-order: stroke fill;
}

/* ----------------------------------------------------------------------------
   Transit-wheel SVG responsive sizing — the .tw-svg class is emitted by
   render/transit_wheel.py with a fixed 720×720 viewBox and no width/height
   attrs. Without this rule the SVG inflates to its intrinsic 720px and
   forces horizontal scroll on phones. Synastry / transits / solar pages
   used to each declare their own copy of this rule; centralising it here
   means every consumer (current and future) picks up the same responsive
   sizing for free.
   ---------------------------------------------------------------------------- */
.tw-svg {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
}