/* ── Timeline Grid ─────────────────────── */
.timeline-zone {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  background: var(--color-background-secondary);
  padding: 1.25rem 1rem;
  margin-bottom: 1.5rem;
}
.timeline-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.timeline-story-title {
  font-size: 15px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.timeline-page-info { font-size: 15px; color: var(--color-text-tertiary); }

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 600px) {
  .timeline-grid { grid-template-columns: repeat(3, 1fr); }
}

.tl-card-wrap { display: flex; flex-direction: column; gap: 4px; }
.tl-date { font-size: 15px; color: var(--color-text-tertiary); padding: 0 2px; }
.tl-card-wrap.is-current .tl-date { color: var(--clinical); font-weight: 600; }
.tl-current-badge {
  font-size: 15px; background: var(--clinical); color: #fff;
  padding: 2px 10px; border-radius: 12px;
  display: inline-block; margin-bottom: 2px;
}

.tl-card {
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}
.tl-card:hover { border-color: var(--color-border-secondary); }
.tl-card.is-current {
  border: 2px solid var(--clinical);
  box-shadow: 0 0 0 3px rgba(55,138,221,0.10),
              0 2px 10px rgba(55,138,221,0.14);
  cursor: default;
}
.tl-edr-bar { height: 3px; width: 100%; }
.tl-card.is-current .tl-edr-bar { height: 4px; }
.tl-inner { padding: 7px 8px 9px; }
.tl-outlet { font-size: 15px; color: var(--color-text-tertiary); margin-bottom: 3px; }
.tl-summary { font-size: 15px; font-weight: 500; color: var(--color-text-primary); line-height: 1.5; }

.tl-card-wrap.is-empty .tl-card {
  background: transparent;
  border: 0.5px dashed var(--color-border-tertiary);
  pointer-events: none;
  opacity: 0.25;
  min-height: 76px;
}

.timeline-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.9rem;
}
.tl-nav-btn {
  display: flex; align-items: center; gap: 4px;
  font-size: 15px; color: var(--color-text-secondary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 8px;
  padding: 7px 14px;
  background: var(--color-background-primary);
  cursor: pointer;
}
.tl-nav-btn:disabled { opacity: 0.3; pointer-events: none; }
.tl-dots { display: flex; gap: 5px; align-items: center; }
.tl-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-border-secondary); transition: all 0.2s;
}
.tl-dot.active { background: var(--clinical); width: 16px; border-radius: 3px; }

.timeline-legend {
  display: flex; gap: 14px;
  padding-top: 0.75rem;
  border-top: 0.5px solid var(--color-border-tertiary);
  margin-top: 0.9rem;
  font-size: 14px; color: var(--color-text-tertiary);
}
.timeline-legend span { display: flex; align-items: center; gap: 5px; }
.tl-leg-bar { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }