/* ============================================================
   TIMELINE WIDGETS — heresies & figures
   Rubricated-book system: era rubrics, a quiet spine, wash panels.
   ============================================================ */

/* ── Search ── */
.tl-search-wrap { position: relative; margin-bottom: 1rem; max-width: 640px; }
.tl-search-wrap i {
  position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
  color: var(--slate); font-size: 1.05rem;
}
.tl-search-wrap input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.6rem;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  transition: border-color 120ms;
}
.tl-search-wrap input::placeholder { color: var(--slate); }
.tl-search-wrap input:focus { outline: 2px solid var(--rubric); outline-offset: 1px; border-color: var(--ink); }

/* ── "Using the timeline" aside ── */
.tl-guide {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--wash);
  border-radius: 10px;
  max-width: 76ch;
}
.tl-guide p {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  font-variant-numeric: oldstyle-nums;
}
.tl-guide p + p { margin-top: 0.6rem; }
.tl-guide strong { font-family: var(--font-ui); font-weight: 500; color: var(--ink); }

/* ── Filter pills ── */
.tl-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.tl-filter-label { font-family: var(--font-ui); font-size: 15px; color: var(--slate); margin-right: 0.25rem; }
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.3rem 0.9rem;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.filter-btn:hover { background: var(--wash); border-color: var(--rule-strong); }
.filter-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-btn__swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.filter-btn__count { font-size: 13px; font-variant-numeric: lining-nums tabular-nums; color: var(--slate); }
.filter-btn.active .filter-btn__count { color: color-mix(in srgb, var(--paper) 72%, transparent); }

.tl-empty { font-family: var(--font-text); font-size: 17px; color: var(--slate); padding: 1.5rem 0; }
.tl-empty[hidden] { display: none; }

/* ── Eras: a rubric opens each one ── */
.era-section { margin-bottom: 2.75rem; }
.era-section[hidden] { display: none; }
.era-label {
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.6rem 0 0.4rem;
  background: var(--paper);
  font-family: var(--font-text);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--rubric);
  font-variant-numeric: lining-nums;
}

/* The spine encodes chronology, so it stays, as a quiet hairline. */
.spine { position: relative; }
.spine-line { position: absolute; left: 15px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.events { padding-left: 40px; display: flex; flex-direction: column; gap: 2px; }

/* ── Rows (heresies + figures share the pattern) ── */
.event-row,
.fig-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 120ms;
}
.event-row:hover,
.fig-row:hover { background: var(--wash); }
.event-row.selected,
.fig-row.selected { background: var(--wash); border-radius: 10px 10px 0 0; }
.event-row[hidden],
.fig-row[hidden] { display: none; }

.dot-col,
.fig-dot-col { position: absolute; left: -30px; top: 1.05rem; display: flex; flex-direction: column; align-items: center; }
.dot,
.fig-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--paper);
  flex-shrink: 0;
}
/* Category colours (data): kept as-is so the key stays recognisable. */
.dot-heresy { background: #D85A30; } .dot-controversy { background: #7A5A9E; } .dot-council { background: #185FA5; } .dot-schism { background: #854F0B; } .dot-creed { background: #3B6D11; } .dot-event { background: #888780; }

.event-content,
.fig-content { flex: 1; min-width: 0; }
.event-header,
.fig-header { display: flex; align-items: baseline; gap: 0.35rem 0.75rem; flex-wrap: wrap; }
.event-year,
.fig-years {
  font-family: var(--font-ui);
  font-size: 14px;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--slate);
  flex-shrink: 0;
}
.event-year { min-width: 64px; }
.fig-years { min-width: 88px; }
.event-title,
.fig-name {
  font-family: var(--font-text);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.event-sub,
.fig-sub {
  margin-top: 0.15rem;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  font-variant-numeric: oldstyle-nums;
}
.response-link {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.3rem;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  color: var(--slate);
}
.response-link i { color: var(--slate); font-size: 14px; position: relative; top: 1px; }

/* ── Badges: sentence-case pills, toned from each category colour ── */
.event-badge,
.fig-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tone, var(--slate));
  background: color-mix(in srgb, var(--tone, var(--slate)) 8%, var(--paper));
}
.event-badge::first-letter,
.fig-badge::first-letter { text-transform: uppercase; }
.badge-heresy { --tone: #993C1D; }
.badge-controversy { --tone: #5E4178; }
.badge-council { --tone: #185FA5; }
.badge-schism { --tone: #633806; }
.badge-creed { --tone: #3B6D11; }
.badge-event { --tone: var(--slate); }

/* Connections shown in a row: plain text, separated by commas. */
.fig-tags { display: flex; flex-wrap: wrap; gap: 0 0.35rem; margin-top: 0.3rem; }
.fig-tag { font-family: var(--font-ui); font-size: 14px; color: var(--slate); }
.fig-tag:not(:last-child)::after { content: ","; }

/* ── Detail panel: an open wash panel joined to its row ── */
.detail-wrap { margin-top: 0; }
.detail-wrap[hidden] { display: none; }
.detail-panel,
.fig-detail {
  background: var(--wash);
  border-radius: 0 0 10px 10px;
  padding: 0.5rem 1.5rem 1.4rem 0.9rem;
  margin-bottom: 0.75rem;
}
.detail-panel > *,
.fig-detail > * { max-width: 68ch; }
.detail-name,
.fig-detail-name {
  font-family: var(--font-text);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.detail-meta,
.fig-detail-meta { display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.detail-year,
.fig-detail-loc {
  font-family: var(--font-ui);
  font-size: 14px;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--slate);
}
.fig-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 0.5rem; }

.detail-section,
.fig-section { margin-bottom: 1rem; }
.detail-section-label,
.fig-section-label {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.detail-section p,
.fig-section p,
.detail-response p {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  font-variant-numeric: oldstyle-nums;
}
.detail-response {
  margin: 1.1rem 0 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.detail-response:last-child { margin-bottom: 0; }

.close-btn {
  float: right;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px;
  margin: 0 -0.5rem 0.5rem 1rem;
  padding: 0;
  background: none; border: none; border-radius: 8px;
  color: var(--slate);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}
.close-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }

/* ── Figures: initials + works + connections ── */
.fig-inner { display: flex; align-items: flex-start; gap: 8px; }
.fig-initials {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 500;
  color: var(--tone, var(--slate));
  background: color-mix(in srgb, var(--tone, var(--slate)) 10%, var(--paper));
}
.fig-works { display: flex; flex-direction: column; margin-top: 0.15rem; }
.fig-work {
  padding: 0.45rem 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.fig-work__note { display: block; color: var(--slate); }
.fig-work:first-child { padding-top: 0.1rem; }
.fig-work:last-child { border-bottom: none; }
.fig-work em { font-style: italic; color: var(--ink); }
.fig-conn { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem; }
.fig-conn-tag {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  padding: 0.1rem 0.65rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
}

@media (pointer: coarse) {
  .filter-btn { min-height: 44px; }
  .close-btn { min-width: 44px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-btn, .event-row, .fig-row, .close-btn, .tl-search-wrap input { transition: none; }
}

/* Mobile readability: see the note in pistizo.css.
   Prose 18px, secondary 16px, labels at least 13px, 44px tap targets.
   The search input must be 16px or iOS Safari zooms the page on focus. */
@media (max-width: 768px) {
  .events { padding-left: 30px; }
  /* On phones the date sits on its own line above the name. */
  .event-year, .fig-years { min-width: 0; flex-basis: 100%; }
  .event-header, .fig-header { row-gap: 0.1rem; }
  .spine-line { left: 9px; }
  .dot-col, .fig-dot-col { left: -26px; }
  .event-row, .fig-row { padding: 0.65rem 0.6rem; }
  .detail-panel, .fig-detail { padding: 0.4rem 0.9rem 1.2rem 0.6rem; }
  .detail-section p,
  .fig-section p { font-size: 18px; }
  .tl-search-wrap input,
  .event-sub,
  .fig-sub,
  .tl-guide p,
  .tl-empty,
  .detail-response p,
  .fig-work { font-size: 16px; }
  .event-title, .fig-name { font-size: 18px; }
  .response-link,
  .filter-btn,
  .tl-filter-label,
  .detail-section-label,
  .fig-section-label { font-size: 15px; }
  .filter-btn,
  .close-btn { min-height: 44px; }
  .close-btn { min-width: 44px; }
  .event-year,
  .fig-years,
  .detail-year,
  .fig-detail-loc,
  .fig-tag,
  .fig-conn-tag { font-size: 14px; }
  .filter-btn__count,
  .event-badge,
  .fig-badge { font-size: 13px; }
}