/* timeline.css — page styles for /timeline.html.
   Linked after /styles.css by `{% set page_css = "timeline" %}` in pipeline/templates/timeline.html.j2.
   Shared tokens/components live in styles.css; keep only what is unique to this page here. */
.timeline-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tl-filter-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);padding:6px 14px;border-radius:20px;cursor:pointer;font-size:0.82em;font-weight:500;transition:all 0.2s;font-family:inherit}
.tl-filter-btn:hover{border-color:var(--accent);color:var(--text)}
.tl-filter-btn.active{background:rgba(var(--accent-rgb),0.15);border-color:var(--accent);color:var(--accent)}
.timeline-container{position:relative;padding:20px 0}
.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--border);transform:translateX(-50%)}
.time-band{margin-bottom:40px}
.time-band-header{text-align:center;position:relative;z-index:2;margin-bottom:24px}
.time-band-label{display:inline-block;background:var(--surface);border:1px solid var(--border);padding:6px 20px;border-radius:20px;font-weight:700;font-size:0.95em;color:var(--accent)}
.tl-node{display:flex;align-items:flex-start;margin-bottom:20px;position:relative}
.tl-node.left{flex-direction:row;padding-right:calc(50% + 30px)}
.tl-node.right{flex-direction:row-reverse;padding-left:calc(50% + 30px)}
.tl-dot{position:absolute;left:50%;top:16px;width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:var(--surface);transform:translateX(-50%);z-index:3;transition:all 0.2s}
.tl-dot.status-confirmed{border-color:var(--green);background:var(--green)}
.tl-dot.status-wrong{border-color:var(--red);background:var(--red)}
.tl-dot.status-not_yet{border-color:var(--text-muted)}
.tl-dot.status-unverifiable{border-color:var(--purple);background:var(--purple)}
.tl-dot.status-leaning_confirmed{border-color:var(--green)}
.tl-dot.status-leaning_wrong{border-color:var(--red)}
.tl-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 16px;flex:1;cursor:pointer;transition:all 0.2s;border-left:3px solid var(--border)}
.tl-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.tl-card.status-confirmed{border-left-color:var(--green)}
.tl-card.status-wrong{border-left-color:var(--red)}
.tl-card.status-not_yet{border-left-color:var(--text-muted)}
.tl-card.status-unverifiable{border-left-color:var(--purple)}
.tl-card.status-leaning_confirmed{border-left-color:var(--green);border-left-style:dashed}
.tl-card.status-leaning_wrong{border-left-color:var(--red);border-left-style:dashed}
.tl-card-id{font-family:monospace;font-size:0.72em;color:var(--text-muted)}
.tl-card-text{font-size:0.9em;font-weight:600;margin:4px 0}
.tl-card-meta{font-size:0.78em;color:var(--text-muted)}
.tl-card-details{font-size:0.82em;color:var(--text-muted);margin-top:8px;display:none}
.tl-card.expanded .tl-card-details{display:block}
.now-marker{position:relative;text-align:center;margin:32px 0;z-index:4}
@media(max-width:768px){
  .timeline-line{left:20px}
  .tl-node.left,.tl-node.right{flex-direction:row;padding-right:0;padding-left:44px}
  .tl-dot{left:20px}
}
.ssr-band{margin-bottom:24px}
.ssr-band h2{font-size:1.15em;color:var(--accent);border-bottom:1px solid var(--border);padding-bottom:6px;margin:24px 0 10px}
.ssr-list{list-style:none;padding:0;margin:0}
.ssr-list li{padding:8px 12px;margin-bottom:6px;background:var(--surface);border:1px solid var(--border);border-radius:6px;font-size:0.9em;border-left:3px solid var(--border)}
.ssr-list li.status-confirmed{border-left-color:var(--green)}
.ssr-list li.status-wrong{border-left-color:var(--red)}
.ssr-list li.status-not_yet{border-left-color:var(--text-muted)}
.ssr-list li.status-leaning_confirmed{border-left-color:var(--green);border-left-style:dashed}
.ssr-list li.status-leaning_wrong{border-left-color:var(--red);border-left-style:dashed}
.ssr-list li a{color:var(--text);text-decoration:none}
.ssr-list li a:hover{color:var(--accent)}
.ssr-list li .pid{font-family:monospace;font-size:0.82em;color:var(--accent);margin-right:8px}
.ssr-list li .when{color:var(--text-muted);font-size:0.82em;float:right;margin-left:8px}
.ssr-band h2 .band-count{color:var(--text-muted);font-weight:400;font-size:0.85em}
.tl-card .tl-badge{font-size:0.7em}
.tl-conf{color:var(--text-muted);font-size:0.8em}
.tl-card-details .tl-details-text{margin-bottom:6px}
.tl-notes{font-style:italic;color:var(--yellow)}
.tl-sources{margin-top:6px}
.tl-page-link{display:inline-block;margin-top:10px;font-family:var(--f-ui);font-weight:500;color:var(--cobalt-ink)}