/**
 * chart.css — Roue SVG et interactions
 * AstroTool v1.0
 */

/* ─── Conteneur SVG ─────────────────────────────────────────────────────────── */
#chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

#natal-chart {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  /* Touch zoom (mobile) */
  touch-action: manipulation;
}

/* ─── Glyphes planétaires ───────────────────────────────────────────────────── */
.planet-glyph {
  transition: font-size var(--transition), opacity var(--transition);
}

.planet:hover .planet-glyph {
  font-size: 16px !important;
  opacity: 1 !important;
}

/* Planet highlighted (depuis tableau) */
.planet.active .planet-glyph {
  filter: url(#planet-glow);
}

/* ─── Labels externes ────────────────────────────────────────────────────────── */
.planet-label {
  font-family: var(--font-symbols), sans-serif;
  transition: opacity var(--transition);
  pointer-events: none;
}

/* ─── Lignes d'aspects ───────────────────────────────────────────────────────── */
.aspect-line {
  transition: stroke-width var(--transition), opacity var(--transition);
}

.aspect-line:hover {
  cursor: pointer;
}

/* ─── Rétrograde ─────────────────────────────────────────────────────────────── */
.retrograde-mark {
  font-family: var(--font-body);
}

/* ─── Zoom mobile (pinch) ────────────────────────────────────────────────────── */
.chart-svg-wrapper {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-app);
  position: relative;
}

.chart-svg-wrapper.zoomed #natal-chart {
  cursor: grab;
}
.chart-svg-wrapper.zoomed #natal-chart:active {
  cursor: grabbing;
}

/* ─── Print ──────────────────────────────────────────────────────────────────── */
@media print {
  #natal-chart {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Fond blanc pour l'impression */
  [data-print] :root {
    --bg-app:    #ffffff;
    --bg-wheel:  #ffffff;
    --border:    #cccccc;
    --text-primary:   #000000;
    --text-secondary: #444444;
  }
}