/* ========================================================================
   The Song of God — timeline page styles
   Companion to styles.css. Inherits the same CSS variables and theme.
   ======================================================================== */

/* ---------- Page container ---------- */
.tl-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.2rem 1.2rem 3rem;
}

.tl-intro {
  margin: 0.5rem 0 1.6rem;
  padding: 1rem 1.2rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
.tl-intro h2 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  color: var(--accent);
  font-weight: 600;
}
.tl-intro p { margin: 0.4rem 0; color: var(--text-muted); }
.tl-intro p:first-of-type { color: var(--text); }
.tl-intro .tl-legend {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
}
.tl-intro .tl-legend strong { color: var(--accent); }

/* ---------- Controls (track filter + date frame) ---------- */
.tl-controls {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.85rem;
}
.tl-controls fieldset {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 0.3rem 0.7rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tl-controls legend {
  padding: 0 0.3rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.tl-track-chip {
  cursor: pointer;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  font-size: 0.78rem;
  user-select: none;
  transition: all 0.15s;
}
.tl-track-chip:hover { color: var(--accent); border-color: var(--accent); }
.tl-track-chip.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.tl-frame-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius);
}
.tl-frame-toggle label:hover { color: var(--accent); }

/* ---------- Track-jump buttons ---------- */
.tl-jumpbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.4rem;
}
.tl-jumpbar a {
  font-family: var(--sans);
  font-size: 0.82rem;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tl-jumpbar a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  text-decoration: none;
}

/* ---------- Phantom top scrollbar ----------
   Mirrors the grid's horizontal scrollbar above the grid so users can pan
   without scrolling to the bottom of the tallest column first. JS keeps
   scrollLeft and inner width in sync with #tl-grid. */
.tl-grid-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  margin: 0 0 0.4rem;
  border-radius: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.tl-grid-scroll-top > div { height: 1px; }
.tl-grid-scroll-top::-webkit-scrollbar { height: 12px; }
.tl-grid-scroll-top::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.tl-grid-scroll-top::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- Grid of parallel tracks ----------
   Horizontal scroll on wide screens — keeps each track 300px wide so
   typography stays readable however many tracks are visible. */
.tl-grid {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 1rem;        /* room for the scrollbar */
  scroll-snap-type: x proximity;
}
.tl-grid::-webkit-scrollbar { height: 10px; }
.tl-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
.tl-grid::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.tl-track {
  flex: 0 0 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  /* When jumpbar anchors scroll to this section, leave room above for the
     sticky topbar so the track-head title isn't hidden behind it. */
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}
.tl-track[hidden] { display: none; }

.tl-track-head {
  /* Not sticky: the grid uses overflow-x for horizontal scroll, which
     reparents sticky positioning to the grid scrollport — but the grid
     doesn't scroll vertically, so a sticky top here doesn't engage and
     the head ends up under the sticky page topbar as the user scrolls. */
  position: static;
  padding: 0.7rem 0.8rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
  box-shadow: var(--shadow);
}
.tl-track-head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.tl-track-head .tl-sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
.tl-track-head .tl-count {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: 0.4rem;
}

/* The vertical spine on each track */
.tl-events {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.2rem;
  margin: 0;
  list-style: none;
}
.tl-events::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: linear-gradient(180deg,
              var(--accent-rim) 0%,
              var(--accent-soft) 50%,
              var(--accent-rim) 100%);
  border-radius: 1px;
}

.tl-event {
  position: relative;
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-rim);
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tl-event:hover {
  border-color: var(--accent);
  border-left-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

/* The bullet on the spine */
.tl-event::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 1rem;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--bg);
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg);
}

.tl-event h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: var(--text);
  font-family: var(--serif);
  font-weight: 600;
}
.tl-event .tl-dev {
  font-family: var(--sk-font);
  color: var(--accent);
  margin-left: 0.4rem;
  font-size: 0.95rem;
  font-weight: 400;
}
.tl-event .tl-iast {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.tl-event .tl-when {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.08rem 0.45rem;
  border-radius: 3px;
  border: 1px solid var(--accent-rim);
  margin: 0.2rem 0.3rem 0.35rem 0;
}
.tl-event .tl-when-scholarly {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.tl-event .tl-form {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0.08rem 0.45rem;
  border-radius: 3px;
  border: 1px dashed var(--border);
  margin: 0.2rem 0.3rem 0.35rem 0;
}
.tl-event .tl-summary {
  margin: 0.35rem 0 0;
  color: var(--text);
}
.tl-event .tl-links {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin: 0.5rem 0 0;
}
.tl-event .tl-links a.tl-link {
  font-family: var(--sans); font-size: 0.74rem;
  padding: 0.15rem 0.55rem;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-rim); border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.tl-event .tl-links a.tl-link:hover {
  border-color: var(--accent); background: var(--bg-card);
}
.tl-event .tl-question {
  margin: 0.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--note-bg);
  border-left: 2px solid var(--accent);
  padding: 0.4rem 0.55rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.tl-event .tl-question strong { color: var(--accent); }
.tl-event .tl-n {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-right: 0.4rem;
}

/* ---------- Mid screens (1100px and below): no horizontal scroll, wrap to 2 cols ---------- */
@media (max-width: 1100px) {
  .tl-grid {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .tl-grid-scroll-top { display: none; }
  .tl-track { flex: 1 1 calc(50% - 0.6rem); min-width: 250px; }
  .tl-track-head { position: static; }
}

/* ---------- Mobile (720px and below): one continuous column ---------- */
@media (max-width: 720px) {
  .tl-page { padding: 0.7rem 0.7rem 2rem; }
  .tl-grid { flex-direction: column; gap: 0.6rem; }
  .tl-track { flex: 1 1 100%; }
  .tl-track-head { position: static; }
  .tl-event { font-size: 0.9rem; padding: 0.6rem 0.75rem; }
  .tl-event h4 { font-size: 0.98rem; }
  .tl-intro { padding: 0.8rem 0.9rem; font-size: 0.95rem; }
  .tl-intro h2 { font-size: 1.15rem; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .tl-jumpbar, .tl-controls { display: none !important; }
  .tl-grid { flex-direction: column; overflow: visible; }
  .tl-event { page-break-inside: avoid; border: 1px solid #888; }
  .tl-track-head { position: static; }
}