/* --- the Tzolk’in -----------------------------------------------------------------
   The chosen day large, with its numeral, and under it the board of 260. The
   board is wide, so it scrolls inside its own box on a phone rather than
   shrinking its dots past reading. Gold is the chosen date, white is today,
   and a ring marks the square being read.
   ------------------------------------------------------------------------- */

.tz__head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 1.75rem);
}
.tz__glyph { flex: none; width: clamp(4rem, 16vw, 6rem); }
.tz__bignum { width: 100%; height: auto; display: block; }
.tz__bignum .tz__num { fill: var(--sol-lift); }
.tz__head h2 { font-size: var(--step-3); }
.tz__gloss { margin-top: 0.4rem; color: var(--paper-dim); }

.tz { margin: 0; display: grid; gap: 0.75rem; justify-items: center; }
.tz__scroll { width: 100%; overflow-x: auto; }
.tz__svg {
  width: 100%;
  min-width: 40rem;
  max-width: 58rem;
  height: auto;
  display: block;
  margin-inline: auto;
}
.tz figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 62ch;
}
.tz__read {
  min-height: 3.3em;
  max-width: 62ch;
  text-align: center;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.tz__colnum {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.tz__sign {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 21px;
}
.tz__colnum.is-chosen,
.tz__sign.is-chosen { fill: var(--sol-lift); }

.tz__cell { cursor: pointer; outline: none; }
.tz__box {
  fill: var(--ink-deep);
  stroke: var(--line);
  stroke-width: 1;
  transition: stroke 140ms linear;
}
.tz__num { fill: var(--paper-mute); }
.tz__halo { fill: none; stroke: var(--sol-lift); stroke-width: 2.5; opacity: 0; }

.tz__cell:hover .tz__box { stroke: var(--paper-mute); }
.tz__cell.is-picked .tz__halo,
.tz__cell:focus-visible .tz__halo { opacity: 1; }

.tz__cell.is-today .tz__box { fill: var(--ink-mid); stroke: var(--paper); stroke-width: 2; }
.tz__cell.is-today .tz__num { fill: var(--paper); }

.tz__cell.is-chosen .tz__box {
  fill: var(--ink-mid);
  fill: color-mix(in srgb, var(--sol) 22%, var(--ink-deep));
  stroke: var(--sol);
  stroke-width: 3;
}
.tz__cell.is-chosen .tz__num { fill: var(--sol-lift); }

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