/* ==========================================================================
   WAYBACK-STYLE TIMELINE
   Loads alongside base.css and whichever era skin is active — this bar's
   look stays constant across every era on purpose, since it's the
   "device" the visitor is using to travel through the eras, not part of
   any single era itself.

   Structure: .wayback (fixed, centered, never itself animated, and the
   stable clipping boundary while collapsed) contains one child,
   .wayback-nav — a single flex row holding logo + timeline + #whereami
   together as one piece. Collapsing slides that whole row left by
   `calc(-100% + <whereami's width>)`, which reliably leaves exactly the
   whereami segment visible regardless of how wide the timeline itself
   ends up being, since 100% is always relative to the row's own current
   width. The 75px value below MUST match #whereami's actual width (and
   the mobile media query's 56px must match its mobile width) — that's
   the only place these numbers need to agree.
   ========================================================================== */

.wayback {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  transition: transform 0.4s ease;
}

/* Collapsed: reposition the whole bar from centered to flush against the
   real browser edge. translateX(-50vw) is deliberately viewport-relative
   rather than percentage-of-own-width — that's what makes it land at
   true x=0 regardless of how wide the bar itself happens to be, instead
   of just wherever the bar's centered position originally started. */
.wayback.is-collapsed {
  transform: translateX(-50vw);
  overflow: hidden;
}

.wayback-nav {
  display: flex;
  align-items: flex-end;
  background-color: #ffffff;
  border-radius: 0px 0px 7px 7px;
  box-shadow: 0px 0px 7px black;
  border-bottom: 4px solid black;
  border-right: 4px solid black;
  border-left: 4px solid black;
  font-family: Lucida Grande, Helvetica, Arial, sans-serif;
  transition: transform 0.4s ease;
  transform: translateX(0);
}

.wayback.is-collapsed .wayback-nav {
  transform: translateX(calc(-100% + 75px)); /* 75px = #whereami's width */
}

.wayback-logo-link {
  display: block;
  flex-shrink: 0;
}

.wayback-logo-link .logo {
  display: block;
  padding: 7px;
  padding-left: 15px;
  height: 100%;
  width: auto;
}

.timeline {
  list-style: none;
  display: flex;
  align-items: flex-end;
  padding-left: 50px;
  padding-right: 50px;
  margin: 0;
}

#whereami {
  flex-shrink: 0;
  align-self: stretch; /* spans the full height of the row, not just its own content height */
  border: none;
  background-color: black;
  color: #FFFD38;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Lucida Grande, Helvetica, Arial, sans-serif;
  text-align: center;
  font-weight: bold;
  width: 75px;
  cursor: pointer;
  padding: 0;
}

.timeline li {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-size: 10px;
  text-align: center;
}

.timeline li span {
  display: block;
  position: relative; /* anchors any buttons placed inside by year offset */
  background-color: transparent;
  border-left: solid 1px #CCCCCC;
  width: 50px;
  height: 50px;
  margin-bottom: 0px;
  margin-top: 5px;
}

.timeline button {
  position: absolute;
  top: 0;
  width: 10px;
  height: 50px;
  background-color: black;
  border: none;
  transition: all .5s ease-in;
  cursor: pointer;
  padding: 0;
  /* left is set inline per-button by timeline.js, as a % across the
     decade block based on where the year falls within it. Centered on
     that point rather than left-aligned to it. */
  transform: translateX(-50%);
}

.timeline button:hover {
  background-color: red;
}

/* Distinguishes the currently-active era from the rest, not just the
   hover state — without this every button looks identical once you're
   not actively hovering one. */
.timeline button[aria-current="true"] {
  background-color: #FFFD38;
}
.timeline button[aria-current="true"]:hover {
  background-color: red;
}

/* ---- Mobile ------------------------------------------------------------
   The bar itself caps to ~90% of viewport width; the logo shrinks first
   to make room, and if the ticks still don't fit, the timeline scrolls
   horizontally rather than wrapping or overflowing the screen.
   ------------------------------------------------------------------- */

@media (max-width: 640px) {
  .wayback-nav {
    max-width: 90vw;
  }

  .wayback-logo-link .logo {
    max-width: 70px;
    padding: 5px;
    padding-left: 8px;
  }

  .timeline {
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  #whereami {
    width: 56px;
    font-size: 13px;
  }

  .wayback.is-collapsed .wayback-nav {
    transform: translateX(calc(-100% + 56px)); /* 56px = mobile #whereami width */
  }
}