/* wheel.css: how the chart wheel looks (drawn by js/wheel.js). */

.wheel { width: 100%; height: auto; overflow: visible; }

.wheel .ring          { fill: none; stroke: var(--bone); stroke-width: 1; }
.wheel .ring.soft     { stroke-opacity: 0.8; }
.wheel .ring.faint    { stroke-opacity: 0.55; }
.wheel .divider       { stroke: var(--bone); stroke-opacity: 0.65; }
.wheel .constellation { fill: none; stroke: var(--bone); stroke-opacity: 0.7; stroke-width: 1; }
.wheel .star          { fill: var(--bone); fill-opacity: 0.9; }
/* Sign names: Manrope (the text font), bold, with a little spacing. Bodoni's thin strokes were hard to read this small and curved. */
.wheel .sign-path     { fill: none; stroke: none; }
.wheel .sign-name     { fill: var(--bone); font: 700 12.5px var(--sans); letter-spacing: 1.2px; }

.wheel .cusp          { stroke: var(--bone); stroke-opacity: 0.4; }
.wheel .cusp.angle    { stroke-opacity: 0.8; }
.wheel .house-number  { fill: var(--bone-soft); font: 600 10.5px var(--sans); }
.wheel .angle-label   { fill: var(--champagne); font: 700 11px var(--sans); letter-spacing: 1.5px; }

.wheel .aspect        { stroke-width: 1.2; stroke-opacity: 0.8; }
.wheel .aspect.square, .wheel .aspect.opposition { stroke: var(--bone); }
.wheel .aspect.trine,  .wheel .aspect.sextile    { stroke: var(--champagne); stroke-dasharray: 4 3; }

.wheel .planet-dot    { fill: var(--champagne); }
.wheel .planet-symbol { fill: var(--champagne); font: 18px/1 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols', var(--serif); }
.wheel .leader        { stroke: var(--champagne); stroke-opacity: 0.7; stroke-width: 0.9; }

/* --- Interactive wheel (My Chart) --- */
/* Lines and labels let the mouse pass through to the hover areas underneath. */
.wheel .signs, .wheel .aspects, .wheel .cusp, .wheel .house-number, .wheel .ring { pointer-events: none; }
.wheel .hit         { fill: transparent; cursor: help; }
.wheel .hit:hover   { fill: rgba(233, 227, 216, 0.07); }
.wheel .planet-hit  { fill: transparent; }
.wheel .planet      { cursor: pointer; outline: none; }
/* No blue flash when a planet, sign or line is tapped on a phone. */
.wheel .planet, .wheel .hit, .wheel .aspect-hit { -webkit-tap-highlight-color: transparent; }
.wheel .planet:focus-visible .planet-hit,
.wheel .planet.active .planet-hit { stroke: var(--champagne); stroke-width: 1.2; }
.wheel .planet.active .planet-symbol { fill: var(--bone); }
.wheel .angle-label[data-angle] { cursor: help; }

/* When a planet is hovered or chosen, its aspect lines light up and
   the others fade back. */
.wheel.focusing .aspect { stroke-opacity: 0.08; }
.wheel.focusing .aspect.lit { stroke-opacity: 0.95; stroke-width: 1.6; }
.wheel.focusing .planet:not(.lit) { opacity: 0.45; }

/* A quieter version, used as a background drawing (Welcome page). */
.wheel-faint .wheel { opacity: 0.3; }

/* --- A second ring inside the wheel (Connections, Travel through time) ---
   The inner planets are lilac; yours stay gold. */
.wheel .partner-ring { stroke: var(--lilac); stroke-opacity: 0.45; }
.wheel .planets.them .planet-dot { fill: var(--lilac); }
.wheel .planets.them .planet-symbol { fill: var(--lilac); font-size: 15px; }
.wheel .planets.them .leader { stroke: var(--lilac); }
.wheel .planets.them .planet:focus-visible .planet-hit,
.wheel .planets.them .planet.active .planet-hit { stroke: var(--lilac); }