/* Time machine, current-site half.
 *
 * On this site the control lives in the nav pill, so it is styled here with the
 * same tokens as everything else. The archived versions get a self-contained
 * floating pill instead, styled inside js/time-machine.js — their own CSS is
 * decades apart and cannot be inherited from, so that half lives in a shadow
 * root. Behaviour for both halves is in that one script. */

.year-icon-chevron {
  width: 15px;
  height: 15px;
  opacity: 0;
  transform: rotate(0deg);
}

.year-toggle[aria-expanded="true"] .year-icon-sliders {
  opacity: 0;
}

.year-toggle[aria-expanded="true"] .year-icon-chevron {
  opacity: 1;
  transform: rotate(180deg);
}

/* The pill morphs instead of dropping a menu: the page tabs and the theme
   control fold away and the year run unfolds in their place, the same move the
   archived pill makes. Both directions animate a grid track between 1fr and
   0fr, which collapses to exactly the content width without anything having to
   be measured. */
.fold-slot,
.years-slot {
  display: grid;
  transition: grid-template-columns 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.fold-slot {
  grid-template-columns: 1fr;
}

.years-slot {
  grid-template-columns: 0fr;
}

.pill-nav.is-timeline .fold-slot {
  grid-template-columns: 0fr;
}

.pill-nav.is-timeline .years-slot {
  grid-template-columns: 1fr;
}

/* Plain boxes: min-width: 0 cannot shrink a control past its own padding, so
   the thing being clipped has to be the wrapper, not the controls. */
.fold-run,
.years-run {
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

/* Clipping is only wanted while the fold is moving. Each control's tooltip is
   positioned against the control, which is inside the run, so a run that keeps
   clipping cuts the tooltip off below the pill. Once the fold has settled, a
   run that is on screen has nothing left to hide and lets them through.

   The year run is exempt: it stays clipped so it can scroll, and its label is
   parented to the pill for exactly that reason. */
.pill-nav.is-settled:not(.is-timeline) .fold-run {
  overflow: visible;
}

/* Six years overflow a narrow phone, so the run scrolls once it is open.
   overflow-x: auto forces overflow-y to clip too, which would shear the focus
   ring off the top and bottom of a year as it pops out — so the run carries a
   band of vertical padding for the ring to live in, pulled back out with an
   equal negative margin so the pill's height is unchanged. */
.pill-nav.is-timeline .years-run {
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 6px;
  margin-block: -6px;
}

.years-run::-webkit-scrollbar {
  display: none;
}

.year-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  border-radius: 48px;
  color: var(--font-2);
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.year-item:hover,
.year-item[aria-current="true"] {
  color: var(--font-1);
}

/* The fill is the only marker of where you are, and it follows the pointer — so
   the moment you hover anything else the year you are actually on loses its
   anchor among six near-identical entries. It outlines itself instead.

   Drawn in the fill's own colour, so while the fill is resting behind it the
   outline is invisible and only appears once the fill slides away. */
.pill-nav.is-timeline .year-item[aria-current="true"]:not(:hover) {
  box-shadow: inset 0 0 0 1.5px var(--surface-active);
}

/* Tighten the year entries on a narrow phone, matching the archived pill's own
   ≤520px step (.year in js/time-machine.js). Without it the run carries 4px
   more padding on each of six entries, which is enough to push it past the
   pill's max-width so it scrolls while the archived pill — same six years, less
   padding — still fits and sits still. Keeps both pills the same size. */
@media (max-width: 520px) {
  .year-item {
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fold-slot,
  .years-slot,
  .year-item {
    transition: none;
  }
}