/* Solstaria — antiscia.
   The mirror wheel. No new colours: planets keep their own inside the
   drawing, the axes are hairlines, the chords are paper dots, and gold is only
   the planet being read. */

.ant__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
}

.ant__axis { fill: none; stroke: var(--line-field); stroke-width: 2.5; }
.ant__axis--contra { stroke-dasharray: 12 9; }

/* zero-length dashes with round ends draw a dotted line */
.ant__chord {
  fill: none;
  stroke: var(--paper-mute);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 9;
  opacity: 0.55;
  transition: opacity 160ms linear;
}
.ant__chord.is-strong { stroke: var(--paper); stroke-width: 5; stroke-dasharray: 0 11; opacity: 1; }

.ant__mirror { fill: var(--ink-void); stroke-width: 2.5; transition: opacity 160ms linear; }
.ant__meet { fill: none; stroke: var(--paper); stroke-width: 2; transition: opacity 160ms linear; }
.ant__dot { transition: opacity 160ms linear; }
.ant__stem { fill: none; stroke: var(--line-field); stroke-width: 1.2; }

.ant__target { fill: transparent; }
.ant__point { outline: none; transition: opacity 160ms linear; }
.ant__point.is-current .ant__ring { stroke: var(--sol); stroke-width: 3.5; }
.ant__point:focus-visible .ant__target { stroke: var(--sol); stroke-width: 2; stroke-dasharray: 4 4; }
.ant__anglelabel {
  fill: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  pointer-events: none;
}

.ant__svg.is-reading .ant__chord:not(.is-lit),
.ant__svg.is-reading .ant__mirror:not(.is-lit),
.ant__svg.is-reading .ant__dot:not(.is-lit),
.ant__svg.is-reading .ant__meet:not(.is-lit),
.ant__svg.is-reading .ant__point:not(.is-lit) { opacity: 0.18; }
.ant__svg.is-reading .ant__chord.is-lit { stroke: var(--paper); opacity: 1; }

.ant__plate { fill: var(--ink-void); fill-opacity: 0.86; pointer-events: none; }
.ant__name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 52px;
  pointer-events: none;
}
.ant__line {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.ant__table { margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .ant__chord, .ant__mirror, .ant__meet, .ant__dot, .ant__point { transition: none; }
}