/* --- lunar return ----------------------------------------------------------------------
   Thirteen returns in a row that scrolls inside its own box, each a button
   with its date, its time and the sign rising, the glyph in the element's
   tone. The one whose chart is open is the gold one.
   ------------------------------------------------------------------------- */

.lret__strip {
  display: flex;
  gap: 0.5rem;
  width: min(100%, 68rem);
  margin-inline: auto;
  padding: 0.25rem 0.25rem 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.lret__item {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.3rem;
  min-width: 7.4rem;
  padding: 0.65rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--ink-deep);
  color: var(--paper);
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 140ms linear, background-color 140ms linear;
}
.lret__item:hover { background: var(--ink-mid); border-color: var(--paper-mute); }
.lret__item:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.lret__item[aria-pressed="true"] { background: var(--ink-mid); border-color: var(--sol); }
.lret__item[aria-pressed="true"] .lret__date { color: var(--sol-lift); }
.lret__date {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lret__time {
  font-size: var(--step--1);
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}
.lret__glyph { display: block; width: 1.7rem; height: 1.7rem; }
.lret__sign { font-size: var(--step--1); color: var(--paper-mute); white-space: nowrap; }
/* on the lighter ground of a picked or pointed-at return the muted tone fell
   under 4.5:1, so it steps up a shade there */
.lret__item:hover .lret__sign,
.lret__item[aria-pressed="true"] .lret__sign { color: var(--paper-dim); }

.lret__head { margin-top: 2.75rem; }
.lret__moment { max-width: 60ch; }

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