/* --- when to see the planets -----------------------------------------------------------
   Evening and morning are told apart by drawing, a solid band and a hatched
   one, so the chart reads without colour; planet colours stay inside the
   drawing. Gold is today and the mark being read. */

.vis { margin: 0; display: grid; gap: 0.75rem; justify-items: center; }
.vis > div:first-child { width: 100%; overflow-x: auto; }
.vis__svg { width: 100%; min-width: 40rem; height: auto; display: block; }
.vis figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 62ch;
}
.vis__read {
  min-height: 1.65em;
  max-width: 62ch;
  text-align: center;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.vis__grid { stroke: var(--line); stroke-width: 1; }
.vis__lane { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.vis__month { fill: var(--paper-mute); font-family: var(--font-body); font-size: 16px; }
.vis__name { font-family: var(--font-body); font-size: 17px; }
.vis__today { stroke: var(--sol); stroke-width: 2; }
.vis__sun { fill: var(--ink-void); stroke: var(--p-sun); stroke-width: 2.5; }
.vis__front { fill: var(--paper); }
.vis__mark { cursor: pointer; outline: none; }
.vis__halo { fill: none; stroke: var(--sol); stroke-width: 2; opacity: 0; }
.vis__mark.is-picked .vis__halo,
.vis__mark:focus-visible .vis__halo { opacity: 1; }

.vis__key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.2rem;
  font-size: var(--step--1);
  color: var(--paper-dim);
}
.vis__key svg {
  width: 1.9rem;
  height: 0.9rem;
  margin-right: 0.35rem;
  vertical-align: -0.12rem;
}
.vis__keyband { fill: var(--paper-dim); }
.vis__keyhatch { stroke: var(--paper-dim); stroke-width: 1.8; }
.vis__keyoutline { stroke: var(--paper-dim); stroke-width: 1.2; }
.vis__keysun { fill: var(--ink-void); stroke: var(--p-sun); stroke-width: 1.8; }
.vis__keyfront { fill: var(--paper); }
.vis__keyopp { fill: var(--paper-dim); }
.vis__keytoday { stroke: var(--sol); stroke-width: 2.5; }

.vis__lead { margin-top: 0.75rem; max-width: 62ch; }
.vis__lead + .moon-facts { margin-top: 1rem; }
.vis__heading { margin-top: 2.75rem; }
.vis__hint { margin-top: 1rem; }