/* explore-timeline.css — «Cronología» (/es/explorar/cronologia/): the strip of period presets and frequent topics
   over the canvas and its wide-screen placement, the card under the panel's column, the touch hint, and the title
   bar of narrow phones. Tokens only, no colour of its own: the canvas reads its colours from tokens in render.js.
   Stage, panel and card: css/explore.css. Ported from the map lab (variants/c/public/map.css). */

/* ---------- Strip: «Últimos 18 meses · Todo el archivo | topics…», one scrolling row ---------- */
.timeline__strip {
  display: flex; align-items: center; gap: var(--space-2); max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x;
  padding: 2px 2px 4px; /* room for the chips' focus outline inside the scroll box */
}
.timeline__strip::-webkit-scrollbar { display: none; }
.timeline__range { display: flex; gap: 6px; flex: none; padding-right: var(--space-2); border-right: 1px solid var(--color-border-strong); }
.timeline__topics { flex: none; flex-wrap: nowrap; }
.timeline__strip .chip { white-space: nowrap; }
.timeline__strip .chip:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; }

/* Wide screens: a row of its own across the top, right of the panel column (400 px at 16 px). */
.timeline__strip--wide {
  position: absolute; z-index: var(--z-overlay);
  top: var(--space-4); left: calc(var(--space-4) + var(--map-panel-w) + var(--space-4)); right: var(--space-4);
}

/* ---------- Title bar on the narrowest phones: one row, not two ----------
   «Cronología» and «Filtrar y resaltar» share a row from 334.6 px (measured 2026-09-29 with the site's fonts: 24 px of
   overlay, 26 px of bar, 95.3 px of title, 12 px of gap, 177.3 px of summary; the lab's longer «Mapa de noticias»
   needed 390 px); below, the bar took two rows (92 px instead of 62), height the lanes need (the lab measured their
   beeswarm squeezed to 65 % at 375×667). The folded summary keeps its icon and chevron and its text for screen
   readers (visually hidden, as .sr-only); the open panel shows the text again. */
@media (max-width: 334.98px) {
  .explore-map__panel:not([open]) > .explore-map__summary > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* ---------- Card on wide screens: under the panel's column when it fits (card.js placeCard) ----------
   At the bottom right it covered the newest dots of the lower lanes; the plot starts right of the column. */
@media (min-width: 900px) {
  .explore-map__card.timeline__card--column {
    left: var(--space-4); right: auto; bottom: var(--space-4); width: var(--map-panel-w); max-width: none; margin-left: 0;
  }
}

/* ---------- Touch screens: «Toca un punto», one line over the dots until the first touch (card.js) ---------- */
.timeline__hint {
  position: absolute; left: 50%; bottom: var(--space-3); z-index: var(--z-overlay); transform: translateX(-50%);
  margin: 0; padding: var(--space-1) var(--space-3); white-space: nowrap; pointer-events: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float); font-size: var(--fs-xsmall); font-weight: 600; color: var(--color-text-secondary);
}