/* ============================================================
   Timeline page additions.
   Place this file at: /assets/css/timeline.css
   It intentionally uses the existing site tokens from base.css.
   ============================================================ */

.timeline-page .hero {
  padding-top: var(--header-safe-offset);
  padding-bottom: clamp(2.25rem, 5vw, 4rem);
}

.timeline-page .hero .container {
  max-width: var(--max);
}

.timeline-page .notice {
  margin-top: 1.25rem;
  border-left: 6px solid var(--tn-gold);
}

.timeline-page .stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem) 0;
}

.timeline-page .stat {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 1.1rem;
}

.timeline-page .stat strong {
  display: block;
  color: var(--tn-gold);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 1;
  font-weight: 900;
}

.timeline-page .stat span {
  display: block;
  margin-top: 0.55rem;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.35;
}

.timeline-page .controls {
  position: sticky;
  top: var(--header-height);
  z-index: 50;
  padding: 0.8rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.timeline-page .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.timeline-page .filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font-weight: 800;
}

.timeline-page .filter-btn:hover,
.timeline-page .filter-btn.is-active {
  background: linear-gradient(135deg, var(--tn-red), var(--tn-blue));
  border-color: transparent;
  color: #fff;
}

.timeline-page .timeline {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

.timeline-page .phase-section {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.timeline-page .phase-section > h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-strong);
}

.timeline-page .timeline-card {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.timeline-page .timeline-card::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 2.6rem;
  bottom: -1.25rem;
  width: 2px;
  background: var(--border);
}

.timeline-page .timeline-card:last-child::before {
  display: none;
}

.timeline-page .timeline-marker {
  width: 2rem;
  height: 2rem;
  margin-top: 1.2rem;
  border: 4px solid var(--bg);
  border-radius: 50%;
  background: var(--tn-gold);
  box-shadow: 0 0 0 1px var(--border);
  z-index: 1;
}

.timeline-page .cat-medical .timeline-marker { background: #48a868; }
.timeline-page .cat-court .timeline-marker { background: var(--tn-red); }
.timeline-page .cat-service .timeline-marker { background: #58a6ff; }
.timeline-page .cat-allegation .timeline-marker { background: var(--tn-gold); }
.timeline-page .cat-conflict .timeline-marker { background: #a989ff; }
.timeline-page .cat-record .timeline-marker { background: var(--muted); }

.timeline-page .timeline-card-inner {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: clamp(1rem, 2.4vw, 1.45rem);
}

/* ============================================================
   Timeline date-first card header
   ============================================================ */

.timeline-page .timeline-kicker {
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.24fr) minmax(0, 1fr);
  gap: 0.85rem 1.15rem;
  align-items: start;
  margin-bottom: 0.9rem;
}

.timeline-page .timeline-dateblock {
  display: grid;
  gap: 0.18rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.045);
}

.timeline-page .timeline-monthday {
  color: var(--tn-gold);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 1;
}

.timeline-page .timeline-year {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.1;
}

.timeline-page .timeline-time {
  color: var(--text-soft);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.15;
}

.timeline-page .timeline-time.approximate {
  color: var(--muted);
  font-style: italic;
}

.timeline-page .timeline-card-title {
  min-width: 0;
}

.timeline-page .timeline-card-title h3 {
  margin-bottom: 0.35rem;
}

.timeline-page .event-number {
  display: none;
}

.timeline-page .timeline-card h3 {
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
}

.timeline-page .meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

.timeline-page .meta-grid div {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.045);
  padding: 0.85rem;
}

.timeline-page .meta-grid strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--tn-gold);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-page .meta-grid span {
  color: var(--text-soft);
}

.timeline-page .badge-row {
  justify-content: flex-start;
  margin-bottom: 0;
}

.timeline-page .badge-medical { color: #fff; background: rgba(72,168,104,0.72); border-color: rgba(72,168,104,0.55); }
.timeline-page .badge-court { color: #fff; background: rgba(214,11,82,0.70); border-color: rgba(214,11,82,0.55); }
.timeline-page .badge-service { color: #fff; background: rgba(37,39,164,0.78); border-color: rgba(37,39,164,0.55); }
.timeline-page .badge-allegation { color: #111; background: rgba(215,174,18,0.92); border-color: rgba(215,174,18,0.75); }
.timeline-page .badge-conflict { color: #fff; background: rgba(102,82,138,0.78); border-color: rgba(102,82,138,0.55); }
.timeline-page .badge-record { color: var(--text); background: var(--surface-strong); border-color: var(--border); }

.timeline-page .footer-note {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0 3rem;
  color: var(--text-soft);
}

@media (max-width: 1080px) {
  .timeline-page .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .timeline-page .stats,
  .timeline-page .meta-grid {
    grid-template-columns: 1fr;
  }

  .timeline-page .controls {
    position: static;
  }

  .timeline-page .timeline-card {
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: 0.65rem;
  }

  .timeline-page .timeline-marker {
    width: 1.35rem;
    height: 1.35rem;
    border-width: 3px;
  }

  .timeline-page .timeline-card::before {
    left: 0.64rem;
  }
}

@media print {
  .timeline-page .controls { display: none !important; }
  .timeline-page .timeline-card-inner,
  .timeline-page .stat {
    box-shadow: none !important;
    break-inside: avoid;
  }
}


/* ============================================================
   Timeline JSON-rendered layout patch.
   Add this to the bottom of /assets/css/timeline.css.
   ============================================================ */

.timeline-page .timeline-summary-card h2 {
  margin-bottom: 0.75rem;
}

.timeline-page .stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.timeline-page .filter-label {
  margin-bottom: 0.6rem;
  color: var(--tn-gold);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.timeline-page .filter-row.secondary {
  margin-top: 0.75rem;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.timeline-page .filter-row.secondary label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.timeline-page .timeline-section {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

.timeline-page .timeline-wrapper {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

.timeline-page .timeline-rail {
  position: sticky;
  top: calc(var(--header-height) + 5.2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 1rem;
}

.timeline-page .rail-title {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.timeline-page .timeline-rail ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.timeline-page .timeline-rail button {
  width: 100%;
  display: grid;
  gap: 0.2rem;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.045);
  color: var(--text-soft);
  padding: 0.65rem;
}

.timeline-page .timeline-rail button:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.timeline-page .rail-date {
  color: var(--tn-gold);
  font-weight: 850;
  font-size: 0.78rem;
}

.timeline-page .timeline-results {
  margin-bottom: 1rem;
  color: var(--text-soft);
  font-weight: 750;
}

.timeline-page .phase-heading {
  margin: 2rem 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-strong);
}

.timeline-page .phase-heading:first-child {
  margin-top: 0;
}

.timeline-page .position-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 850;
}

.timeline-page .timeline-card:target .timeline-card-inner {
  border-color: var(--tn-gold);
  box-shadow: 0 0 0 3px rgba(215,174,18,0.25), var(--shadow-soft);
}

.timeline-page .cat-family .timeline-marker { background: #f59e0b; }
.timeline-page .cat-conflict .timeline-marker { background: #a989ff; }

.timeline-page code {
  color: var(--tn-gold);
}

.timeline-page .timeline-rail {
  position: sticky;
  top: calc(var(--header-height) + 5.2rem);

  max-height: calc(100vh - var(--header-height) - 6rem);
  overflow-y: auto;

  overscroll-behavior: contain;
  padding-right: .35rem;
}

.badfaith-card { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: rgba(180,80,80,.12); border: 1px solid rgba(255,120,120,.25); }
.badfaith-title { font-weight: 800; margin-bottom: .5rem; color: #ffb8b8; }
.badfaith-tag { display: inline-flex; padding: .25rem .6rem; margin: 0 .4rem .4rem 0; border-radius: 999px; background: rgba(255,90,90,.18); font-size: .78rem; }

@media (max-width: 960px) {
  .timeline-page .timeline-wrapper {
    grid-template-columns: 1fr;
  }

  .timeline-page .timeline-rail {
    position: static;
  }
}

@media (max-width:960px) {
  .timeline-page .timeline-rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 760px) {
  .timeline-page .timeline-kicker {
    grid-template-columns: 1fr;
  }

  .timeline-page .timeline-dateblock {
    width: 100%;
  }
}

/* ============================================================
   Timeline v2 maintenance patch.
   Supports timeline-updated.js features: data warnings, alternate
   time references, record-integrity flags, and stronger focus states.
   ============================================================ */

.timeline-page .timeline-warning-box {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(215,174,18,0.48);
  border-left: 6px solid var(--tn-gold);
  border-radius: var(--radius-sm);
  background: rgba(215,174,18,0.10);
  color: var(--text-soft);
}

.timeline-page .timeline-warning-box strong {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--tn-gold);
}

.timeline-page .timeline-warning-box ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.timeline-page .timeline-warning-box li + li {
  margin-top: 0.25rem;
}

.timeline-page .alternate-times {
  display: grid;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.85rem;
  border: 1px solid rgba(88,166,255,0.32);
  border-radius: var(--radius-sm);
  background: rgba(88,166,255,0.08);
  color: var(--text-soft);
}

.timeline-page .alternate-times strong {
  color: #9fcaff;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-page .alternate-time {
  display: block;
  font-size: 0.9rem;
  line-height: 1.4;
}

.timeline-page .badfaith-card {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,120,120,0.25);
  border-left: 6px solid rgba(255,120,120,0.65);
  border-radius: var(--radius-sm);
  background: rgba(180,80,80,0.12);
}

.timeline-page .badfaith-title {
  margin-bottom: 0.5rem;
  color: #ffb8b8;
  font-weight: 900;
}

.timeline-page .badfaith-tag {
  display: inline-flex;
  align-items: center;
  margin: 0 0.4rem 0.4rem 0;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255,120,120,0.24);
  border-radius: 999px;
  background: rgba(255,90,90,0.18);
  color: #ffd5d5;
  font-size: 0.78rem;
  font-weight: 850;
}

.timeline-page .badfaith-card p {
  margin: 0.45rem 0 0;
  color: var(--text-soft);
}

.timeline-page .filter-btn:focus-visible,
.timeline-page .timeline-rail button:focus-visible,
.timeline-page .filter-row.secondary label:focus-within {
  outline: 3px solid rgba(215,174,18,0.42);
  outline-offset: 3px;
}

.timeline-page .filter-row.secondary input[type="checkbox"] {
  inline-size: 1rem;
  block-size: 1rem;
  accent-color: var(--tn-gold);
}

.timeline-page .timeline-rail:empty,
.timeline-page .timeline-rail ul:empty::after {
  content: "No critical sequence items selected.";
  display: block;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.timeline-page .badge-family { color: #111; background: rgba(245,158,11,0.92); border-color: rgba(245,158,11,0.70); }
.timeline-page .badge-docket { color: #fff; background: rgba(37,39,164,0.80); border-color: rgba(37,39,164,0.55); }
.timeline-page .badge-order { color: #fff; background: rgba(214,11,82,0.72); border-color: rgba(214,11,82,0.55); }
.timeline-page .badge-emergency-order { color: #fff; background: rgba(214,11,82,0.82); border-color: rgba(214,11,82,0.60); }
.timeline-page .badge-record-integrity { color: #fff; background: rgba(180,80,80,0.70); border-color: rgba(255,120,120,0.35); }
.timeline-page .badge-verification { color: #111; background: rgba(215,174,18,0.92); border-color: rgba(215,174,18,0.75); }

@media (max-width: 960px) {
  .timeline-page .timeline-wrapper {
    grid-template-columns: 1fr;
  }

  .timeline-page .timeline-rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 1rem;
  }
}

@media print {
  .timeline-page .timeline-rail,
  .timeline-page .timeline-warning-box {
    break-inside: avoid;
  }

  .timeline-page .alternate-times,
  .timeline-page .badfaith-card,
  .timeline-page .meta-grid div {
    background: transparent !important;
  }
}