/* --- firdaria -------------------------------------------------------------------------
   A line of time rather than a wheel, because the order of the periods is the
   whole of the technique. Planet colours stay inside the drawing; the nodes,
   which are points and not planets, take the neutral field tone. Gold marks
   only the period and sub-period you are in, and the line of now.
   ------------------------------------------------------------------------- */

.fird { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.fird > div { width: 100%; overflow-x: auto; }
.fird__svg { width: 100%; min-width: 40rem; height: auto; display: block; }
.fird figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 60ch;
}
.fird__readout {
  margin: 0;
  max-width: 60ch;
  min-height: 3.2em;
  text-align: center;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.fird__scheme {
  fill: var(--paper);
  font-family: var(--font-body);
  font-size: 22px;
}
.fird__bandname {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 18px;
}
.fird__tick { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.fird__age {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.fird__track { fill: var(--ink-deep); stroke: var(--line); stroke-width: 1; }
.fird__mark { cursor: pointer; outline: none; }
.fird__band {
  fill-opacity: 0.8;
  stroke: var(--ink-void);
  stroke-width: 2;
  transition: fill-opacity 140ms linear;
}
.fird__sub {
  fill-opacity: 0.4;
  stroke: var(--ink-void);
  stroke-width: 1.5;
  transition: fill-opacity 140ms linear;
}
.fird__band--node { fill: var(--line-field); }
.fird__mark:hover rect,
.fird__mark.is-picked rect { fill-opacity: 1; }
.fird__mark:focus-visible rect { fill-opacity: 1; stroke: var(--paper); stroke-width: 3; }

.fird__now { fill: none; stroke: var(--sol); stroke-width: 3.5; pointer-events: none; }
.fird__nowline { stroke: var(--sol); stroke-width: 2; pointer-events: none; }
.fird__nowlabel {
  fill: var(--sol-lift);
  font-family: var(--font-body);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.fird__subs { margin-top: 2.75rem; }
.fird__subs > .moments { margin-top: 0.75rem; }

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