/* Local extension of the account's Pearl / Tarot Luxe world. No new theme or assets. */
.natal-wheel {
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 480px;
  margin: 24px 0;
  color: var(--text-primary);
}

.natal-wheel__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  font-family: inherit;
  overflow: hidden;
}

.natal-wheel__segment {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.natal-wheel__sign-label {
  fill: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
}

.natal-wheel__tether {
  stroke: var(--text-secondary);
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.natal-wheel__marker {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.natal-wheel__label-ground { fill: var(--surface); }
.natal-wheel__planet-label {
  fill: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
}

.natal-wheel__caption {
  max-inline-size: 65ch;
  margin-block-start: 16px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* Covers both 320 and 360 viewport widths without a fixed-width SVG or a new font. */
@media (max-width: 360px) {
  .natal-wheel { margin-block: 16px; }
  .natal-wheel__caption { margin-block-start: 12px; }
}