/*
 * Day cards. Three tiers per card — weekday, date, relative label — so the row
 * answers "which day is this" without the user counting forwards from today.
 *
 * Selection copies the bottom nav's own scheme exactly: a soft accent tint
 * behind the active day, its text recoloured to the accent rather than
 * inverted — never an outline, which on a light card reads as a focus state.
 */

/*
 * The floating bar itself — same family as the bottom nav: a bordered,
 * shadowed pill that the active-day indicator slides inside of. The padding
 * is the frame around the row of cards, distinct from the indicator's own
 * inset below.
 *
 * Margin, not full-bleed: the header itself carries no horizontal padding (the
 * category strip above needs to scroll flush to the true edge), so this bar
 * has to inset itself. --space-3 is both the app bar's own margin above and
 * the padding --app__main gives the fixtures list below, so matching it here
 * is what puts all three on one left/right edge.
 *
 * --radius-lg, not --radius-full: the bottom nav earns a stadium because an
 * icon-and-label column reads as round, but three lines of left-aligned text
 * are a block — the card radius other blocks of content use is what suits it.
 *
 * Sticky, not relative: the day picker is the one filter that stays useful
 * mid-scroll, so it catches at the top instead of leaving with the rest of
 * the header. z-index matches .app__nav's own, the other element that floats
 * over scrolled fixtures, so paint order between the two is never ambiguous.
 *
 * Mounted as .header's own sibling in app.js, not as its child: a sticky
 * element can only stick within its parent's box, and the header — three
 * short rows — ran out of room almost immediately. The app shell is tall
 * enough to keep it stuck for the length of the fixtures list below. The old
 * gap to the category bar above (the header's own flex gap) is recreated here
 * as a margin instead, since that's no longer a sibling relationship CSS gap
 * can reach across.
 *
 * top: --space-4, not 0 — margin does not carry into the stuck offset (only
 * the `top` value does), so without this the bar goes from a clean gap above
 * it to flush against the viewport edge the instant it catches. Matching the
 * margin here keeps the two states looking like the same resting position.
 */
.date-strip {
  /*
   * One knob for the strip's own size; every length below that belongs to the
   * bar itself is a token scaled by it. The margins and the sticky `top` are
   * deliberately left out — those align this bar with the rows above and
   * below (see the note above), so they answer to those edges, not to this.
   */
  --date-scale: 0.9;

  position: sticky;
  top: var(--space-4);
  z-index: 10;
  display: flex;
  margin-block: var(--space-4) 0;
  margin-inline: var(--space-3);
  padding: calc(var(--space-2) * var(--date-scale)) calc(var(--space-3) * var(--date-scale));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-lg) * var(--date-scale));
  box-shadow: var(--shadow-floating);
  transition: background-color var(--duration) var(--easing);
}

/* Zero-height marker the "stuck" observer below watches — see DateStrip.js. */
.date-strip__sentinel {
  height: 0;
}

/*
 * Translucent and blurred once actually floating over scrolled fixtures —
 * same treatment as the bottom nav, so the two read as one family in both
 * states, not just at rest. The blur itself is a static toggle, never a
 * transition: animating backdrop-filter per frame is what stutters in
 * Telegram's WebView (see the bottom nav's own note on this). Only the
 * solid-to-translucent colour eases, via the background-color transition
 * above — the blur just snaps on at the same moment.
 */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .date-strip--stuck {
    background: rgb(var(--tg-surface-rgb) / 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
  }
}

/*
 * The whole window, end to end, in place. The cards divide the width between
 * them rather than overflowing it, so nothing scrolls and every day is one tap
 * away — which is also what lets the row stay still while the fixtures below
 * transition, instead of running a second animation alongside them.
 */
.date-strip__track {
  position: relative;
  display: flex;
  flex: 1;
  gap: calc(var(--space-1) * var(--date-scale));
}

/*
 * Spans one card at a time and slides between them on transform alone — the
 * bottom nav's indicator, redrawn for a row instead of a grid. Same soft
 * tint; a tighter radius than the nav's own pill, and tighter still than the
 * strip's own --radius-lg, so the highlight reads as a box around the text
 * block rather than another pill. The inset is snug on purpose — this row's
 * three lines of text fill nearly all of the card's height already.
 */
.date-strip__indicator {
  position: absolute;
  top: calc(2px * var(--date-scale));
  bottom: calc(2px * var(--date-scale));
  left: 0;
  border-radius: calc(var(--radius-sm) * var(--date-scale));
  background: rgb(var(--tg-accent-rgb) / 0.12);
  opacity: 0;
  pointer-events: none;
}

/* Added one frame after mount so the first placement does not fly in from 0. */
.date-strip--ready .date-strip__indicator {
  opacity: 1;
  transition:
    transform var(--spring-duration) var(--spring),
    opacity var(--duration) var(--easing);
}

.date-card {
  /*
   * The button is a bare box: it owns only the press scale from
   * interactions.css, so the selection bounce on __inner has a transform of
   * its own to live on rather than fighting for the same property.
   *
   * Zero basis, so the width is divided evenly rather than by content length.
   * On `auto` the longest relative label would make its card a third wider
   * than "Today" and the row would stop reading as a set of equal days.
   */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.date-card__inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: calc(var(--space-2) * var(--date-scale));
  text-align: center;
  transform: scale(1);
}

/*
 * Replayed on every selection, off a data attribute re-applied across two
 * frames. --spring-duration with --easing rather than --spring: the keyframe
 * already carries the overshoot, and layering the spring on top would take the
 * card past 1.08 on the way up.
 */
.date-card__inner[data-selected] {
  animation: date-card-pop var(--spring-duration) var(--easing);
}

@keyframes date-card-pop {
  0% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/*
 * The two label tiers and the date all run at a tighter line-height than the
 * body default. On a card this small the leading is the largest thing in the
 * box that is not text — 1.2 takes the height down without touching a single
 * font size, so the date stays the anchor it is meant to be.
 */
.date-card__weekday {
  color: var(--tg-hint);
  font-size: calc(var(--text-2xs) * var(--date-scale));
  font-weight: var(--weight-medium);
  line-height: 1.2;
  transition: color var(--duration) var(--easing);
}

.date-card__value {
  display: flex;
  align-items: center;
  gap: calc(3px * var(--date-scale));
}

.date-card__day {
  color: var(--tg-hint);
  font-size: calc(var(--text-base) * var(--date-scale));
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  transition: color var(--duration) var(--easing);
}

/*
 * One accent colour for every tier, same as the bottom nav: colour is the
 * whole "active" signal there, so all three lines pick it up together rather
 * than the day carrying it alone.
 */
.date-card[aria-pressed="true"] .date-card__day,
.date-card[aria-pressed="true"] .date-card__weekday,
.date-card[aria-pressed="true"] .date-card__relative {
  color: var(--tg-accent);
}

/*
 * Semibold on selection too. Safe here (unlike the bottom nav's label)
 * because cards divide the row evenly via flex: 1 1 0 — width never depends
 * on the text, so a weight change can't resize anything. .date-card__day is
 * bold unconditionally already, so only the other two tiers pick it up here.
 */
.date-card[aria-pressed="true"] .date-card__weekday,
.date-card[aria-pressed="true"] .date-card__relative {
  font-weight: var(--weight-semibold);
}

/*
 * Independent of selection: today is a fact about the date, not about what the
 * user has tapped. The accent tint behind a selected card is soft enough that
 * the dot needs no swap to stay visible, unlike the old solid fill.
 */
.date-card__today {
  width: calc(6px * var(--date-scale));
  height: calc(6px * var(--date-scale));
  background: var(--accent);
  border-radius: var(--radius-full);
}

/*
 * The one tier that cannot fit five-across on one line. It wraps rather than
 * widening its card or losing its last letters: the track stretches every card
 * to the tallest, so a wrapped "Next Tomorrow" costs the row one line of height
 * and nothing else. The column stacks from the top, so the space that leaves
 * under the shorter labels sits under the text rather than beside it, and
 * reads as margin.
 */
.date-card__relative {
  max-width: 100%;
  overflow: hidden;
  color: var(--tg-hint);
  font-size: calc(var(--text-2xs) * var(--date-scale));
  line-height: 1.2;
  transition: color var(--duration) var(--easing);
}

@media (prefers-reduced-motion: reduce) {
  .date-card__inner[data-selected] {
    animation: none;
  }
}