/* The chart wheel: readouts, study doors, the sky, and the scrubber. */
@layer components {

/* (This block predates the wheel rules below in the original file; the
   later transition declarations win at equal specificity, as before.) */
@media (prefers-reduced-motion: reduce) {
  .wheel__transit, .wheel__transit-tick, .wheel__sky-star, .wheel__sky-stroke { animation: none; transition: none; }
}

/* The wheel: bigger than before, wearing the elements as tinted wedges. */
.wheel { margin: 0 0 2.5rem; position: relative; }
.wheel svg { display: block; width: 100%; max-width: 34rem; height: auto; margin: 0 auto; }

/* Selections read out in the heart of the wheel — a soft daylight halo so
   the chart and its lit chords stay visible straight through the reading. */
.wheel__reading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(52vw, 13rem);
  display: flex; flex-direction: column; gap: 0.25rem; align-items: center;
  text-align: center; pointer-events: none;
  font-size: 0.82rem; color: var(--ink-dim);
  text-shadow: var(--halo-glow);
  animation: reading-appear 0.35s ease-out;
}
.wheel__reading strong { color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.wheel__reading-glyph { font-size: 1.5rem; color: var(--ink); font-family: var(--font-glyph); font-style: normal; }
.wheel__reading-glyph button {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-shadow: inherit; pointer-events: auto; cursor: pointer;
}
@media (hover: hover) {
  .wheel__reading-glyph button:hover { color: var(--gold); }
}
.wheel__reading-retro { color: var(--gold-dim); font-style: italic; font-size: 0.78rem; }
.wheel__reading-aspects { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; justify-content: center; margin-top: 0.25rem; }
.wheel__reading-aspect {
  white-space: nowrap; font-size: 0.75rem;
  background: none; border: 0; padding: 0; font-family: inherit;
  text-shadow: inherit; pointer-events: auto; cursor: pointer;
}
@media (hover: hover) {
  .wheel__reading-aspect:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}
.wheel__reading-aspect--conjunction { color: var(--gold); }
.wheel__reading-aspect--trine, .wheel__reading-aspect--sextile { color: var(--air); }
.wheel__reading-aspect--square, .wheel__reading-aspect--opposition { color: var(--fire); }
@media (prefers-reduced-motion: reduce) {
  .wheel__reading { animation: none; }
}

/* The ✦ door in a readout: from here, the element opens as a study. The
   lock is a signal, not a wall — a locked door still opens, onto the till. */
.wheel__study {
  margin-top: 0.35rem; white-space: nowrap; font-size: 0.78rem;
  color: var(--gold); text-decoration: none;
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
@media (hover: hover) {
  .wheel__study:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}
.wheel__study .tile__lock { position: static; color: var(--ink-dim); }
.wheel__study .tile__lock svg { width: 0.8rem; height: 0.8rem; }
.wheel__study--chip {
  margin-top: 0; padding: 0.3rem 0.7rem; border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink);
}
@media (hover: hover) {
  .wheel__study--chip:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }
}
.wheel__study--chip .glyph { color: var(--gold); }

/* A study's page: the element's glyphs over its title, the facts beneath. */
.study__glyphs { font-size: 2rem; color: var(--gold); margin: 0 0 0.25rem; }
.study__facts { color: var(--ink-dim); font-size: 0.92rem; }
.study__summary { margin: 1.5rem 0; }
.study__depth { margin: 1.8rem 0; }
.study__depth .button .tile__lock { position: static; margin-left: 0.4rem; }
.study__depth .button .tile__lock svg { width: 0.85rem; height: 0.85rem; }

/* The zodiac band wears the four elements as pale candy. */
.wheel__wedge { stroke: none; }
.wheel__wedge--fire { fill: color-mix(in srgb, var(--fire) 14%, var(--wash)); }
.wheel__wedge--earth { fill: color-mix(in srgb, var(--earth) 14%, var(--wash)); }
.wheel__wedge--air { fill: color-mix(in srgb, var(--air) 14%, var(--wash)); }
.wheel__wedge--water { fill: color-mix(in srgb, var(--water) 14%, var(--wash)); }

.wheel__rim { fill: none; stroke: var(--line-strong); }
.wheel__rim--inner { stroke: var(--line-strong); opacity: 0.7; }
.wheel__boundary { stroke: var(--halo); }
.wheel__cusp { stroke: var(--line-strong); opacity: 0.8; }
.wheel__cusp--angle { stroke: var(--gold-dim); }
.wheel__sign { font-size: 15px; font-family: var(--font-glyph); }
.wheel__sign--fire { fill: var(--fire); }
.wheel__sign--earth { fill: var(--earth); }
.wheel__sign--air { fill: var(--air); }
.wheel__sign--water { fill: var(--water); }
.wheel__house { fill: var(--ink-dim); font-size: 8px; opacity: 0.8; font-family: var(--font-ui); }
.wheel__angle { fill: var(--gold); font-size: 9px; letter-spacing: 0.08em; cursor: pointer; pointer-events: all; font-family: var(--font-ui); }
.wheel__angle.lit { fill: var(--ink); }
.wheel__tick { stroke: var(--ink-dim); }
.wheel__anchor { fill: var(--ink-dim); }
.wheel__body { fill: var(--ink); font-size: 16px; font-family: var(--font-glyph); }
.wheel__retro { fill: var(--gold-dim); font-size: 8px; }
.wheel__degree { fill: var(--gold); font-size: 8.5px; opacity: 0; transition: opacity 0.3s; font-family: var(--font-ui); }
.wheel__sign, .wheel__house, .wheel__angle, .wheel__body, .wheel__degree { text-anchor: middle; dominant-baseline: central; font-style: normal; }
.wheel__hit { fill: transparent; }
.wheel__aspect { stroke-width: 0.9; opacity: 0.7; transition: opacity 0.3s, stroke-width 0.3s; }
.wheel__aspect--conjunction { stroke: var(--gold-bright); }
.wheel__aspect--trine, .wheel__aspect--sextile { stroke: var(--air); }
.wheel__aspect--square, .wheel__aspect--opposition { stroke: var(--fire); }

/* Planets sit at their true degrees; a tapped cluster fans open along its
   spokes with a little spring. Selection dims the rest of the wheel. */
.wheel__planet {
  cursor: pointer;
  transform: var(--rest);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}
.wheel__planet.fanned { transform: var(--fan); }
.wheel__planet.fanned .wheel__degree, .wheel__planet.lit .wheel__degree { opacity: 1; }
.wheel__spoke { stroke: var(--gold-dim); stroke-width: 0.6; opacity: 0; transition: opacity 0.4s; }
.wheel__spoke.lit { opacity: 0.7; }

.wheel-focus .wheel__planet:not(.lit):not(.fanned) { opacity: 0.25; }
.wheel-focus .wheel__aspect { opacity: 0.08; }
.wheel-focus .wheel__aspect.lit { opacity: 1; stroke-width: 1.6; }
.wheel-focus .wheel__sign, .wheel-focus .wheel__house { opacity: 0.35; }
.wheel-focus .wheel__wedge { opacity: 0.45; }
.wheel__planet.lit .wheel__body { fill: var(--gold); }

/* Another chart laid over this one: their bodies ride the outer ring in
   water-violet, the tightest crossings strung between the two skies. The
   natal chords fall quiet so the between-story leads. Tapping a crossing
   (chord or ledger row) lights its pair and dims the rest. */
.wheel--paired .wheel__aspect { opacity: 0.12; }
.wheel__inter { cursor: pointer; transition: opacity 0.3s, stroke-width 0.3s; }
.wheel--crossed .wheel__inter:not(.lit) { opacity: 0.12; }
.wheel__inter.lit { opacity: 1; stroke-width: 1.9; }
.wheel--crossed .wheel__other:not(.lit) { opacity: 0.25; }
.wheel__other.lit .wheel__body { fill: var(--gold); }
.wheel--crossed .wheel__planet:not(.lit) { opacity: 0.25; }
.wheel--crossed .wheel__wedge { opacity: 0.45; }
.wheel--crossed .wheel__sign { opacity: 0.4; }
.wheel__other-tick { stroke: var(--water); opacity: 0.6; }
.wheel__other .wheel__body { fill: var(--water); font-size: 14px; }
.wheel__inter { stroke-width: 1; stroke-dasharray: 5 4; opacity: 0.75; }
.wheel__inter--conjunction { stroke: var(--gold-bright); }
.wheel__inter--trine, .wheel__inter--sextile { stroke: var(--air); }
.wheel__inter--square, .wheel__inter--opposition { stroke: var(--fire); }

/* The sky: transiting bodies ride an outer ring in wandering gold, drifting
   into place when revealed. Their chords to the natal chart are dashed —
   the sky passing over, not woven in. */
.wheel__face { position: relative; }
.wheel__sky-layer { pointer-events: none; visibility: hidden; transition: visibility 0s 0.55s; }
.wheel--sky .wheel__sky-layer { pointer-events: auto; visibility: visible; transition: visibility 0s; }
.wheel__transit {
  cursor: pointer;
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s;
}
.wheel--sky .wheel__transit { opacity: 1; }
.wheel--scrubbing .wheel__transit { transition: none; }
.wheel__transit .wheel__body { fill: var(--gold); font-size: 14px; }
.wheel__transit.lit .wheel__body { fill: var(--ink); }
.wheel__transit.lit .wheel__degree { opacity: 1; }
.wheel__transit-tick { stroke: var(--gold-dim); opacity: 0; transition: opacity 0.5s; }
.wheel--sky .wheel__transit-tick { opacity: 0.65; }
.wheel-focus .wheel--sky .wheel__transit:not(.lit) { opacity: 0.25; }

.wheel__sky-stroke { stroke-width: 1; stroke-dasharray: 5 4; transition: opacity 0.35s; pointer-events: none; }
.wheel__sky-grab { stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.wheel__sky-chord--conjunction .wheel__sky-stroke { stroke: var(--gold-bright); }
.wheel__sky-chord--trine .wheel__sky-stroke, .wheel__sky-chord--sextile .wheel__sky-stroke { stroke: var(--air); }
.wheel__sky-chord--square .wheel__sky-stroke, .wheel__sky-chord--opposition .wheel__sky-stroke { stroke: var(--fire); }
.wheel__sky-chord.lit .wheel__sky-stroke { stroke-width: 1.7; }

.wheel__sky-bar { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; margin-top: 0.85rem; }
.wheel__sky-toggle {
  display: inline-flex; align-items: center; min-height: 2.4rem;
  background: var(--paper-high); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.4rem 1.1rem; color: var(--gold); font: inherit; font-family: var(--font-ui); font-size: 0.88rem;
  letter-spacing: 0.06em; cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.wheel__sky-toggle--open { color: var(--ink); border-color: var(--gold-dim); }
@media (hover: hover) {
  .wheel__sky-toggle:hover { color: var(--ink); border-color: var(--gold-dim); }
}
.wheel__sky-star { display: inline-block; margin-right: 0.4rem; font-family: var(--font-glyph); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wheel__sky-toggle--open .wheel__sky-star { transform: rotate(180deg) scale(1.2); }

/* The scrubber: a thread of gold with today marked at its heart. */
.wheel__scrub { width: min(100%, 26rem); }
.wheel__scrubber {
  width: 100%; height: 1.5rem; margin: 0; appearance: none; -webkit-appearance: none;
  background:
    radial-gradient(circle, var(--gold) 1.5px, transparent 2.5px) center / 8px 8px no-repeat,
    linear-gradient(to right, transparent, var(--gold-dim) 18%, var(--gold-dim) 82%, transparent) center / 100% 1.5px no-repeat;
  cursor: grab;
}
.wheel__scrubber:active { cursor: grabbing; }
.wheel__scrubber::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 1.35rem; height: 1.35rem; border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sun-core), var(--gold-bright) 60%, var(--gold-dim));
  box-shadow: 0 0 12px rgba(212, 180, 106, 0.55);
}
.wheel__scrubber::-moz-range-thumb {
  width: 1.35rem; height: 1.35rem; border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sun-core), var(--gold-bright) 60%, var(--gold-dim));
  box-shadow: 0 0 12px rgba(212, 180, 106, 0.55);
}
.wheel__scrub-day {
  display: flex; justify-content: center; align-items: baseline; gap: 0.9rem;
  margin: 0.35rem 0 0; min-height: 1.4rem;
  color: var(--ink-dim); font-size: 0.85rem; font-style: italic; text-align: center;
}
.wheel__scrub-today {
  background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem;
  color: var(--gold); cursor: pointer;
}
@media (hover: hover) {
  .wheel__scrub-today:hover { color: var(--ink); }
}
.wheel__reading-quiet { color: var(--ink-dim); font-style: italic; font-size: 0.78rem; }

@media (max-width: 760px) {
  /* The wheel goes full-bleed on small screens — the chart is the point. */
  .wheel { margin-left: -1rem; margin-right: -1rem; }
  .wheel svg { max-width: none; }
}

}

@keyframes reading-appear {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}