/* Solstaria — midpoints.
   The 90° dial: a band of the three modes, a scale of ninety degrees, pins at
   the exact positions and glyphs above them. No new colours. Gold is only the
   picked point and its axis; the chords of the pairs on that axis are paper. */

.mp__band { fill: var(--ink-deep); stroke: var(--line); stroke-width: 1.5; }
.mp__bandlabel {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 19px;
  pointer-events: none;
}
.mp__num {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.mp__axis { stroke: var(--sol); stroke-width: 3; stroke-linecap: round; }
.mp__chord { stroke: var(--paper-dim); stroke-width: 2; stroke-linecap: round; }
.mp__sunmoon { fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-linejoin: round; }

.mp__stem { stroke: var(--line-field); stroke-width: 1.5; }
.mp__target { fill: transparent; }
.mp__point { cursor: pointer; outline: none; transition: opacity 160ms linear; }
.mp__point.is-dim { opacity: 0.3; }
.mp__point:focus-visible .mp__target { stroke: var(--paper); stroke-width: 2; stroke-dasharray: 4 4; }
.mp__anglelabel {
  fill: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  pointer-events: none;
}

.mp__plate { fill: var(--ink-void); fill-opacity: 0.86; pointer-events: none; }
.mp__name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 54px;
  pointer-events: none;
}
.mp__line {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.mp__gap { margin-top: 3rem; }
.mp__facts { margin-top: 1.25rem; }

.mp__every { margin-top: 2rem; border-top: var(--rule); padding-top: 1rem; }
.mp__every summary { cursor: pointer; color: var(--paper-dim); font-size: var(--step--1); }
.mp__every summary:hover { color: var(--paper); }
.mp__every .table-scroll { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .mp__point { transition: none; }
}