/* AstroLab Wheel Component Styles */

.astro-wheel-container {
  width: 100%;
  position: relative;
}

.outer-layer {
  /* Fissi rispetto all'osservatore: assi orizzonte/meridiano e centro */
  pointer-events: none;
}

.sky-frame, .houses-layer, .zodiac-wheel {
  /* Rotazione fluida intorno al centro dell'elemento.
     Il bounding box verrà forzato ad essere simmetrico via JS. */
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.astro-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 2px;
}

.astro-wheel-container svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 100px);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ring        { fill: none; stroke-width: 1; }
.axis        { stroke: var(--ink-muted); stroke-width: 0.8; stroke-dasharray: 4 6; opacity: 0.35; }
.sign-div    { stroke: var(--ink-muted); stroke-width: 0.8; opacity: 0.4; }
.chart-center { fill: none; stroke: var(--ink-muted); stroke-width: 0.5; opacity: 0.5; }
.planet-dot  { cursor: default; transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
.planet-orbit {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.element-band    { stroke: none; opacity: 0.85; }
.element-fire    { fill: var(--element-fire); }
.element-earth   { fill: var(--element-earth); }
.element-air     { fill: var(--element-air); }
.element-water   { fill: var(--element-water); }

.planet-label-name {
  font-size: 18px;
  font-family: var(--bs-font-monospace);
  fill: var(--ink, var(--bs-body-color));
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.planet-label-name.hidden {
  opacity: 0;
}

.planet-label-deg  { font-size: 11px; font-family: var(--bs-font-monospace); fill: var(--ink-muted); }
.planet-label-sign { font-size: 11px; font-family: var(--bs-font-monospace); fill: var(--ink-muted); opacity: 0.7; }
.zodiac-label {
  font-size: 22px;
  font-family: var(--bs-font-monospace), 'Segoe UI Symbol', 'Apple Symbols', sans-serif;
  fill: var(--ink, var(--bs-light));
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Planet Colors - Using centralized planet variables */
.planet-sun     { fill: var(--planet-sun); }
.planet-moon    { fill: var(--planet-moon); }
.planet-mercury { fill: var(--planet-mercury); }
.planet-venus   { fill: var(--planet-venus); }
.planet-mars    { fill: var(--planet-mars); }
.planet-jupiter { fill: var(--planet-jupiter); }
.planet-saturn  { fill: var(--planet-saturn); }
.planet-uranus  { fill: var(--planet-uranus); }
.planet-neptune { fill: var(--planet-neptune); }
.planet-pluto   { fill: var(--planet-pluto); }

.ring-sun     { stroke: var(--planet-sun);     opacity: 0.40; }
.ring-moon    { stroke: var(--planet-moon);    opacity: 0.34; }
.ring-mercury { stroke: var(--planet-mercury); opacity: 0.30; }
.ring-venus   { stroke: var(--planet-venus);   opacity: 0.30; }
.ring-mars    { stroke: var(--planet-mars);    opacity: 0.30; }
.ring-jupiter { stroke: var(--planet-jupiter); opacity: 0.28; }
.ring-saturn  { stroke: var(--planet-saturn);  opacity: 0.28; }
.ring-uranus  { stroke: var(--planet-uranus);  opacity: 0.26; }
.ring-neptune { stroke: var(--planet-neptune); opacity: 0.26; }
.ring-pluto   { stroke: var(--planet-pluto);   opacity: 0.24; }

.house-band {
  fill: var(--color-house-band);
  stroke: var(--bs-secondary-color);
  stroke-width: 0.5;
  opacity: 0.6;
  transition: fill 0.3s ease, stroke 0.3s ease, opacity 0.3s ease, transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.house-band:hover {
  fill: var(--bs-tertiary-bg);
  stroke: var(--bs-secondary-color);
  opacity: 1;
}

/* House Cusps */
.house-cusp {
  stroke: var(--bs-secondary-color);
  stroke-width: 1.2;
  opacity: 0.6;
  stroke-dasharray: 3 3;
  pointer-events: none;
  transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.house-cusp.cusp-angle {
  stroke: var(--bs-secondary-color);
  stroke-width: 2.0;
  stroke-dasharray: none;
  opacity: 0.9;
}
.house-number {
  font-family: var(--bs-font-monospace);
  font-size: 14px;
  fill: var(--ink, var(--bs-body-color));
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0.9;
  font-weight: 600;
  transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Legend Styles */
.legend-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.legend-row-top, .legend-row-bottom {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
}

.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-name  { font-family: var(--bs-font-monospace); font-size: 10px; color: var(--bs-secondary-color); letter-spacing: 0.03em; text-transform: uppercase; }
.legend-pos   { font-family: var(--bs-font-monospace); font-size: 11px; color: var(--bs-body-color); }
.legend-retro { font-family: var(--bs-font-monospace); font-size: 9px;  color: var(--bs-primary); letter-spacing: 0.04em; font-weight: bold; }

/* Angle Labels inside the chart */
.angle-label {
  font-family: var(--bs-font-monospace);
  font-size: 18px;
  font-weight: 700;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: var(--surface, var(--bs-body-bg));
  stroke-width: 8px;
  stroke-linejoin: round;
}

.angle-asc, .angle-dsc {
  fill: var(--color-angle-horizon);
}

.angle-mc, .angle-ic {
  fill: var(--color-angle-meridian);
}