/* Photos ▸ On this day — the strip of past years above the timeline (public/onthisday.js).
 *
 * Its own sheet for the reason push.css and security.css have one: styles.css is the file every
 * change touches. No tokens of its own; everything is the theme's, so all seven themes dress it
 * without knowing it exists. Quiet on purpose: the photographs are the content, the frame is a
 * rounded corner and one line of type, and nothing moves that the pointer did not move.
 */

.otd { margin: 2px 0 12px; }
.otd[hidden] { display: none; }

.otd-head.ph-head { align-items: center; padding: 0; margin-bottom: 8px; }
/* The heading is also a .ph-head (see onthisday.js), so its type is the timeline's own and a
   theme that dresses the day headings dresses this one too. Only the layout is set here. */
.otd-head h3 { flex: 1; min-width: 0; }
.otd-x { width: 28px; height: 28px; }
.otd-x > svg { width: 15px; height: 15px; }

/* One row that scrolls sideways rather than wrapping: a strip of twelve years must not push the
   timeline a screen down. */
.otd-row {
  display: flex; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin;
  padding-bottom: 4px;
}

.otd-card {
  flex: none; width: 176px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 7px;
  padding: 0; margin: 0; border: 0; background: none; color: var(--text);
  text-align: left; cursor: pointer; font: inherit;
}
.otd-pic {
  position: relative; display: block; aspect-ratio: 4 / 3;
  border-radius: var(--r-sm); overflow: hidden; background: var(--media);
}
.otd-pic img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .2s var(--ease), transform .3s var(--ease);
}
.otd-pic img.ready { opacity: 1; }
/* The timeline's own hover, inside the frame, so the box never moves. */
.otd-card:hover .otd-pic img { transform: scale(1.04); }
.otd-pic .badge { --tile: 36px; position: absolute; inset: 0; margin: auto; }
.otd-pic .badge.hidden { display: none; }
.otd-card:focus-visible { outline: none; }
.otd-card:focus-visible .otd-pic { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

.otd-cap { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; }
.otd-cap b { font-weight: var(--fw-semi); font-size: calc(var(--fs-base) + var(--fs-half)); }
.otd-meta {
  font-family: var(--font-meta); font-size: var(--fs-sm); color: var(--dimmer);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.otd-meta i { font-style: normal; }
.otd-meta i + i::before { content: ' · '; }

@media (max-width: 560px) {
  .otd-card { width: 138px; }
  .otd-row { gap: 8px; }
  /* Date and count on two lines rather than the count cut off mid-word. */
  .otd-meta i { display: block; }
  .otd-meta i + i::before { content: none; }
}
/* A finger scrolls the row; a bar under it is only in the way. */
@media (pointer: coarse) {
  .otd-row { scrollbar-width: none; }
  .otd-row::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .otd-card:hover .otd-pic img { transform: none; }
}