/* The "Date & Time" block on event pages (localtime.py + local-time.js): the dates, the host's clock, and the
   reader's clock on a pale band. Colours and sizes are the theme's tokens. */
.class-facts li.hpp-when-li { align-items: flex-start; }
.hpp-when-li .fact-value { align-self: stretch; }
.hpp-when { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.hpp-when-date {
  color: var(--navy); font-size: calc(var(--fs-b) * 1.12); letter-spacing: .05em; line-height: 1.5;
}
.hpp-when-row {
  display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; gap: 2px;
  padding-top: 10px; border-top: 1px solid var(--navy-thread);
}
.hpp-when-row[hidden] { display: none; }
.hpp-when-time { color: var(--navy); font-size: calc(var(--fs-b) * 1.06); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hpp-when-zone {
  order: -2; color: rgba(47, 93, 52, .72); font-size: calc(var(--fs-s) * .8); letter-spacing: .16em;
  text-transform: uppercase;
}
.hpp-when-each, .hpp-when-next {
  display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 2px;
  font-size: calc(var(--fs-s) * .9); letter-spacing: .06em; line-height: 1.7; vertical-align: 1px;
}
.hpp-when-each { color: var(--navy-mute); border: 1px solid var(--navy-thread); }
.hpp-when-next { color: var(--white, #fff); background: var(--navy); }
.hpp-when-you {
  margin-top: 2px; padding: 12px 16px; border-top: none; border-radius: 2px;
  background: var(--beige); border-left: 2px solid var(--navy);
}
.hpp-when-yourdate { order: -1; color: var(--navy); letter-spacing: .04em; }