/* --- the Sun's path ---------------------------------------------------------------
   A plan of the sky seen from above. The chosen day is gold because it is the
   selected one; the year's extremes are told apart by line (solid, dashed,
   dotted), not by colour, and the key under the drawing says which is which. */

.sunpath__inputs {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.sunpath__seasons { justify-content: flex-start; margin-top: 1rem; }
.sunpath__hint { margin-top: 1rem; }

.sunpath { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.sunpath > div:first-child { width: min(100%, 34rem); }
.sunpath__svg { width: 100%; height: auto; display: block; }
.sunpath figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 56ch;
}

.sunpath__horizon { fill: var(--ink-deep); stroke: var(--line-field); stroke-width: 2; }
.sunpath__ring { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 7; }
.sunpath__ringlabel {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.sunpath__zenith { stroke: var(--paper-mute); stroke-width: 1.5; }
.sunpath__tick { stroke: var(--line-field); stroke-width: 1.5; }
.sunpath__tick--bold { stroke: var(--paper-dim); stroke-width: 2; }
.sunpath__cardinal { fill: var(--paper-dim); font-family: var(--font-display); font-size: 36px; }

.sunpath__ref {
  fill: none;
  stroke: var(--paper-mute);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sunpath__ref--equinox { stroke-dasharray: 10 8; }
.sunpath__ref--december { stroke-dasharray: 1 7; stroke-width: 2.8; }
.sunpath__reflabel { fill: var(--paper-mute); font-family: var(--font-body); font-size: 19px; }

.sunpath__day {
  fill: none;
  stroke: var(--sol);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sunpath__hour { fill: var(--sol-lift); stroke: var(--ink-deep); stroke-width: 2; }
.sunpath__hourlabel {
  fill: var(--sol-lift);
  font-family: var(--font-body);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.sunpath__riseset { fill: var(--ink-void); stroke: var(--sol); stroke-width: 3; }
.sunpath__risesetlabel {
  fill: var(--sol-lift);
  font-family: var(--font-body);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.sunpath__sun { fill: var(--sol); stroke: var(--ink-void); stroke-width: 3; }
.sunpath__sun.is-below { fill: var(--ink-void); stroke: var(--sol); stroke-dasharray: 4 4; }

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

.sunpath__key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  font-size: var(--step--1);
  color: var(--paper-dim);
}
.sunpath__key i {
  display: inline-block;
  width: 1.8rem;
  margin-right: 0.45rem;
  vertical-align: 0.3em;
  border-top: 2px solid var(--paper-mute);
}
.sunpath__key .is-day i { border-top: 3px solid var(--sol); }
.sunpath__key .is-equinox i { border-top-style: dashed; }
.sunpath__key .is-december i { border-top-style: dotted; border-top-width: 3px; }