/*
 * Cosmetic skin for the generated timeline.
 *
 * static-timeline-generator/_site/css/main.css is a build artifact and must
 * never be edited. This sheet re-skins it from the outside and therefore has
 * to be the last stylesheet loaded on index.html.
 *
 * Structure, positioning and the odd/even alternation are left untouched:
 * only color, type and elevation are restated in terms of the design tokens.
 */

/* The spine and the node rings. */
.timeline::before {
  background: var(--color-rule);
}

.timeline-icon {
  border-color: var(--color-paper);
  box-shadow: none;
}

/* Entry cards. */
.timeline-description {
  background-color: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem;
}

.timeline-description a {
  color: var(--color-link);
}

.timeline-description h2 {
  font-family: var(--font-display);
  font-size-adjust: var(--x-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.timeline-description p,
.timeline-description ul {
  font-family: var(--font-body);
  font-size-adjust: var(--x-body);
}

/* Dates read as a case reference, not as body copy. */
.timeline-description .timestamp {
  font-family: var(--font-mono);
  font-size-adjust: var(--x-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.timeline-description .timestamp .note {
  color: var(--color-ink-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Card arrows
   The generated sheet hardcodes #fff (and #333 in dark mode) across four
   separate media queries. Each one has to be restated against --color-surface,
   or the arrow keeps the old background while the card follows the palette.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 769px) {
  .timeline-entry.even .timeline-description::after {
    border-left-color: var(--color-surface);
  }
}

@media only screen and (max-width: 768px) and (min-width: 415px) {
  .timeline-entry.even .timeline-description::after {
    border-right-color: var(--color-surface);
  }
}

@media only screen and (min-width: 415px) {
  .timeline-entry.odd .timeline-description::after {
    border-right-color: var(--color-surface);
  }
}

.no-js .timeline-entry .timeline-description::after {
  border-right-color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */

.timeline-filter-wrapper {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-rule);
  padding: 1rem 0;
}

/* The generated dark block sets this from prefers-color-scheme alone, so a
   visitor forcing the light scheme on a dark system would keep #ccc labels. */
.timeline-filter {
  color: var(--color-ink);
}

.timeline-filter ul li {
  padding-right: 1.25rem;
}

.timeline-filter > ul > li > label {
  font-family: var(--font-mono);
  font-size-adjust: var(--x-mono);
  font-size: 0.75rem;
  color: var(--color-ink);
  cursor: pointer;
}

/* Node glyphs. The generated dark-mode block dims them to #ccc, which drops
   the icon to 2.71:1 against the red node; white clears 3:1 on all seven
   category colors the generator emits inline. Their backgrounds are set inline
   per entry, so `.timeline-icon.green|.red|.grey` never match and are not
   restyled here. */
.timeline-icon i {
  color: var(--color-node-glyph);
}