/* --- when planets meet ---------------------------------------------------------------
   The picture is a patch of sky at one scale; the list is a set of buttons, and
   the one on show carries the gold rule because it is the selected one. The
   closest meeting of the three years is set apart by weight and a darker
   ground, not by gold. */

.conj { margin: 0; display: grid; gap: 0.75rem; justify-items: center; }
.conj > div { width: min(100%, 44rem); }
.conj__svg { width: 100%; height: auto; display: block; }
.conj figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 60ch;
}
.conj__read {
  min-height: 1.65em;
  max-width: 60ch;
  text-align: center;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.conj__ground { fill: var(--ink-deep); stroke: var(--line); stroke-width: 1.5; }
.conj__moon { fill: none; stroke: var(--paper-mute); stroke-width: 2; stroke-dasharray: 6 6; }
.conj__gap { stroke: var(--paper-dim); stroke-width: 1.5; stroke-dasharray: 3 5; }
.conj__bar { stroke: var(--paper-dim); stroke-width: 2; fill: none; }
.conj__label { fill: var(--paper); font-family: var(--font-body); font-size: 24px; }
.conj__small {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.conj__heading { margin-top: 2.75rem; }
.conj__heading + p { margin-top: 0.75rem; max-width: 62ch; }

.conj__list { list-style: none; padding: 0; margin: var(--gap) 0 0; }
.conj__list li { border-top: var(--rule); }
.conj__row {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr) auto;
  gap: 0.15rem 1rem;
  width: 100%;
  padding: 0.6rem 0.6rem 0.6rem 0.75rem;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.conj__row:hover { background: var(--ink-mid); }
.conj__row:focus-visible { outline: 2px solid var(--sol-lift); outline-offset: -2px; }
.conj__row[aria-pressed="true"] { border-left-color: var(--sol); }
.conj__row[aria-pressed="true"] .conj__what { color: var(--sol-lift); }
.conj__when { color: var(--paper-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.conj__sep { color: var(--paper-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.conj__note { grid-column: 2 / -1; font-size: var(--step--1); color: var(--paper-mute); }
.conj__row.is-closest { background: var(--ink-deep); }
.conj__row.is-closest:hover { background: var(--ink-mid); }
.conj__row.is-closest .conj__sep { color: var(--paper); font-weight: 600; }

@media (max-width: 34rem) {
  .conj__row { grid-template-columns: minmax(0, 1fr) auto; }
  .conj__when { grid-column: 1 / -1; white-space: normal; }
  .conj__note { grid-column: 1 / -1; }
}