/* =========================================================
   Timeline — vertical flow of today's routines
   ========================================================= */

.timeline-panel{
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:20px;
  box-shadow:var(--shadow-1);
  position:sticky; top:88px;
}

.timeline-container{ position:relative; padding-left:8px; }

.tl-item{
  position:relative;
  padding-left:30px;
  padding-bottom:26px;
  animation:fadeSlideUp .5s ease both;
}
.tl-item:last-child{ padding-bottom:4px; }

.tl-item::before{ /* connecting line */
  content:'';
  position:absolute; left:9px; top:22px; bottom:0;
  width:2px;
  background:var(--border);
}
.tl-item:last-child::before{ display:none; }

.tl-item.done::before{
  background:linear-gradient(var(--accent-teal), var(--border));
}

.tl-dot{
  position:absolute; left:0; top:2px;
  width:20px; height:20px; border-radius:50%;
  background:var(--bg-2); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:var(--text-3);
  transition:all var(--transition-med);
}
.tl-item.done .tl-dot{
  background:var(--accent-teal); border-color:var(--accent-teal); color:#0B0F1A;
  box-shadow:0 0 10px rgba(79,209,197,.5);
}
.tl-item.missed .tl-dot{ background:var(--accent-rose); border-color:var(--accent-rose); color:#fff; }
.tl-item.active .tl-dot{
  background:var(--accent-gold); border-color:var(--accent-gold); color:#1D2130;
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(232,176,84,.5); }
  70%{ box-shadow:0 0 0 8px rgba(232,176,84,0); }
  100%{ box-shadow:0 0 0 0 rgba(232,176,84,0); }
}

.tl-content{ display:flex; flex-direction:column; gap:2px; }
.tl-title{ font-size:13.5px; font-weight:600; color:var(--text-1); }
.tl-time{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-3); }

.tl-empty{ text-align:center; color:var(--text-3); padding:30px 0; font-size:13px; }