/* --- meteor showers ---------------------------------------------------------------
   The Earth's orbit as a ring of solar longitude: months on the rim, the
   showers as arcs on two lanes inside it, the Moon at each peak on the orbit
   itself. Gold is only today and the shower being read. The IMO table
   underneath scrolls inside its own box on a phone.
   ------------------------------------------------------------------------- */

.met > div { width: min(100%, 34rem); }
.met__read {
  min-height: 3.3em;
  max-width: 60ch;
  text-align: center;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.met__monthband { fill: var(--ink-deep); stroke: var(--line); stroke-width: 1.5; }
.met__month {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 20px;
}
.met__orbit { fill: none; stroke: var(--line-field); stroke-width: 1.5; }
.met__travelled { fill: none; stroke: var(--sol); stroke-width: 3; stroke-linecap: round; }
.met__today { fill: var(--sol); stroke: var(--ink-void); stroke-width: 4; }

.met__shower { cursor: pointer; outline: none; }
.met__hit { fill: none; stroke: transparent; stroke-width: 34; stroke-linecap: round; }
.met__arc {
  fill: none;
  stroke: var(--paper-mute);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-opacity: 0.6;
  transition: stroke 140ms linear, stroke-opacity 140ms linear;
}
.met__peak { stroke: var(--paper); stroke-width: 3; stroke-linecap: round; }
.met__spoke { stroke: var(--paper-mute); stroke-width: 1.5; stroke-dasharray: 3 5; }
.met__moon .moon__rim { stroke: var(--line-field); stroke-width: 1.5; }

.met__shower:hover .met__arc { stroke: var(--paper-dim); stroke-opacity: 1; }
.met__shower.is-picked .met__arc,
.met__shower:focus-visible .met__arc { stroke: var(--sol); stroke-opacity: 1; }
.met__shower.is-picked .met__peak,
.met__shower:focus-visible .met__peak { stroke: var(--sol-lift); }
.met__shower.is-picked .moon__rim,
.met__shower:focus-visible .moon__rim { stroke: var(--sol-lift); stroke-width: 2.5; }

.met__name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 54px;
}
.met__line {
  fill: var(--paper);
  font-family: var(--font-body);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
.met__small {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.moments li.is-picked .moments__what { color: var(--sol-lift); }

.met__tablewrap { overflow-x: auto; }
.met__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.met__table th,
.met__table td {
  padding: 0.55rem 0.9rem 0.55rem 0;
  text-align: left;
  vertical-align: top;
  border-top: var(--rule);
}
.met__table thead th {
  border-top: 0;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--paper-mute);
}
.met__table tbody th { font-weight: 400; color: var(--paper); }
.met__table td { color: var(--paper-dim); }

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