/* Kundli Pro — SVG charts. */

.chart-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  justify-items: center;
}
@media (min-width: 760px) { .chart-grid { grid-template-columns: 1fr 1fr; } }

.chart-fig { margin: 0; width: 100%; max-width: 600px; min-width: 0; }
.chart-fig figcaption { font: 600 1rem var(--font-display); color: var(--accent); text-align: center; margin-bottom: 6px; }

.chart-svg {
  display: block;
  width: 100%;
  min-width: 260px;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  font-family: var(--font-body);
}
.chart-bg { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.chart-line { stroke: var(--accent); stroke-width: 1.4; }
.house-area { fill: transparent; stroke: var(--accent); stroke-width: 1; }
.chart-centre { fill: var(--saffron-soft); stroke: var(--accent); stroke-width: 1; }
.chart-centre-text { fill: var(--accent); font: 600 18px var(--font-display); }
.sign-num { fill: var(--text-soft); font-size: 12px; }
.lagna-mark { stroke: var(--accent-2); stroke-width: 2.5; }

.pl { fill: var(--text); cursor: pointer; font-weight: 500; }
.pl:hover, .pl:focus { fill: var(--accent-2); outline: none; text-decoration: underline; }
.pl:focus-visible { outline: none; stroke: var(--focus); stroke-width: 0.6px; }
.pl-asc { fill: var(--accent); font-weight: 700; }
.pl-ex { fill: var(--ok); }
.pl-deb { fill: var(--error); }

.planet-pop {
  max-width: 520px;
  margin: 12px auto 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
}
.planet-pop h4 { margin-bottom: 6px; }
.lagna-cell { fill: color-mix(in srgb, var(--accent-2) 16%, transparent); }
.pl-transit { fill: var(--focus); font-style: italic; }
.pl-natal-dim { fill: var(--text-soft); }