/* Timeline animations */
@keyframes tlItemIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tlSectionIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tlRowIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tl-animate {
  opacity: 0;
  animation: tlSectionIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.pr-dual-row.tl-animate,
.dual-timeline-row.tl-animate {
  animation-name: tlRowIn;
  animation-duration: 0.42s;
}

/* Summary card shell */
.pr-timeline-summary,
.tl-summary {
  background: linear-gradient(135deg, #f8fafc, #eff6ff);
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #334155;
}
.tl-summary .tl-summary-heading {
  font-size: 0.78rem;
  color: #0f2744;
  font-weight: 700;
  display: block;
}

.timeline-intro {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0 0 12px;
  line-height: 1.5;
}
.assessment-timeline-title {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 1rem;
  color: #0f2744;
  margin: 0 0 8px;
}
.assessment-timeline-block { margin-top: 4px; }
.timeline-more-hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: #64748b;
  font-style: italic;
}
.ca-roadmap-preview .tl-summary,
.ca-roadmap-preview .pr-dual-timeline { margin-top: 8px; }
.ca-roadmap-block .assessment-timeline-block { margin-top: 0; }

/* Summary card — compact, point-wise */
.tl-summary {
  font-size: 0.72rem;
  line-height: 1.4;
  gap: 8px;
}
.tl-summary-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(191, 219, 254, 0.55);
  margin-bottom: 2px;
}
.tl-summary-heading {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f2744;
  display: block;
}
.tl-summary-paper {
  font-size: 0.68rem;
  color: #64748b;
  display: block;
}
.tl-summary-section {
  padding-top: 6px;
}
.tl-summary-label {
  margin: 0 0 4px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.tl-summary-section--forecast .tl-summary-label { color: #1d4ed8; }
.tl-summary-section--leap {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(238, 242, 255, 0.85);
  border: 1px solid #c7d2fe;
}
.tl-summary-section--leap .tl-summary-label { color: #4338ca; }

.tl-summary strong,
.tl-summary .tl-mark,
.tl-summary .tl-hl-subject,
.tl-summary .tl-hl-coach {
  display: inline;
  font-size: inherit;
}

/* Shared bullet lists */
.tl-bullet-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tl-bullet-list > li {
  position: relative;
  padding-left: 0.95em;
  font-size: 0.72rem;
  line-height: 1.42;
  color: #334155;
  opacity: 0;
  animation: tlItemIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.tl-bullet-list > li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: #94a3b8;
}
.tl-summary-section--forecast .tl-bullet-list > li::before { color: #3b82f6; }
.tl-summary-section--leap .tl-bullet-list > li::before { color: #6366f1; }

/* Month cell bullets */
.tl-fmt { display: block; }
.tl-fmt .tl-bullet-list > li {
  font-size: 0.68rem;
  line-height: 1.38;
  margin-bottom: 0;
}
.tl-fmt--solo .tl-bullet-list > li::before { color: #f59e0b; }
.tl-fmt--learn .tl-bullet-list > li::before { color: #2563eb; }
.tl-fmt--learn .tl-line-leap {
  padding: 4px 6px 4px 0.95em;
  margin-left: -0.95em;
  padding-left: calc(0.95em + 6px);
  border-radius: 6px;
  background: rgba(238, 242, 255, 0.7);
}
.tl-fmt--solo .tl-line-warn {
  padding: 4px 6px 4px 0.95em;
  margin-left: -0.95em;
  padding-left: calc(0.95em + 6px);
  border-radius: 6px;
  background: rgba(254, 243, 199, 0.45);
}
.tl-line-empty { color: #94a3b8; font-style: italic; }

.tl-hl-subject { color: #0f2744; font-weight: 700; }
.tl-hl-test { color: #1d4ed8; font-weight: 700; }
.tl-hl-hw { color: #047857; font-weight: 700; }
.tl-hl-marks { color: #7c3aed; font-weight: 700; }
.tl-hl-coach { color: #1d4ed8; font-weight: 700; }

.tl-warn-kw { color: #b45309; font-weight: 700; }

.tl-tag {
  display: inline;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 0.92em;
  font-weight: 700;
  white-space: nowrap;
}
.tl-link-leap {
  color: #4338ca !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed #a5b4fc;
}
.tl-link-leap:hover { color: #3730a3 !important; border-bottom-style: solid; }
.tl-tag-wa { background: #ecfdf5; color: #047857; }
.tl-tag-bank { background: #fef3c7; color: #92400e; }
.tl-tag-loc { background: #f1f5f9; color: #475569; font-weight: 600; }
.tl-tag-setup { background: #eef2ff; color: #4338ca; }

.tl-mark { font-weight: 800; white-space: nowrap; }
.tl-mark-mid { color: #b45309; }
.tl-mark-good { color: #047857; }

.tl-summary-leap-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #4338ca;
  text-decoration: none;
}
.tl-summary-leap-link:hover { text-decoration: underline; }

.pr-dual-cell.solo .tl-fmt,
.tl-cell.solo .tl-fmt { text-align: inherit; }

@media (max-width: 720px) {
  .tl-summary { font-size: 0.7rem; }
  .tl-fmt .tl-bullet-list > li { font-size: 0.7rem; }
}

/* Dual timeline grid (NEET / CA / contact / profile) */
.pr-dual-timeline,
.dual-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.pr-dual-head,
.dual-timeline-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pr-dual-head-solo,
.tl-col-head.solo { color: #64748b; text-align: right; padding-right: 8px; }
.pr-dual-head-learn,
.tl-col-head.learn { color: #1d4ed8; text-align: left; padding-left: 8px; }
.pr-dual-head-month,
.tl-month-head { color: #64748b; text-align: center; min-width: 100px; }
.pr-dual-row,
.dual-timeline-row {
  display: grid;
  grid-template-columns: 1fr minmax(100px, 120px) 1fr;
  gap: 10px;
  align-items: stretch;
}
.pr-dual-row {
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e8edf3;
  overflow: hidden;
}
.pr-dual-row.exam,
.dual-timeline-row.exam-month .tl-cell.month {
  border-color: #fbbf24;
  background: #fffbeb;
}
.dual-timeline-row.exam-month .tl-cell.month {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.pr-dual-cell,
.tl-cell {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font-size: 0.68rem;
  line-height: 1.38;
}
.pr-dual-cell.solo,
.tl-cell.solo { background: #fafafa; color: #475569; text-align: right; }
.pr-dual-cell.learn,
.tl-cell.learn { background: linear-gradient(135deg, #eff6ff, #f5f3ff); color: #0f2744; border-color: #bfdbfe; }
.pr-dual-month,
.tl-cell.month {
  background: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border: none;
}
.pr-dual-month strong,
.tl-cell.month strong { font-size: 0.78rem; color: #0f2744; font-weight: 800; }
.pr-month-badge,
.tl-cell.month em {
  font-style: normal;
  font-size: 0.65rem;
  color: #d97706;
  font-weight: 700;
}
.pr-month-badge.exam {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
}
.ca-month-roadmap .tl-summary { margin-bottom: 12px; }
@media (max-width: 720px) {
  .pr-dual-head,
  .dual-timeline-head { display: none; }
  .pr-dual-row,
  .dual-timeline-row { grid-template-columns: 1fr; gap: 6px; background: transparent; border: none; }
  .pr-dual-cell.solo,
  .tl-cell.solo { text-align: left; }
  .pr-dual-cell.solo::before,
  .tl-cell.solo::before { content: 'On your own: '; font-weight: 700; color: #64748b; }
  .pr-dual-cell.learn::before,
  .tl-cell.learn::before { content: 'Learneasy: '; font-weight: 700; color: #2563eb; }
}
