/* A House Divided — Timeline (points over time) */

/* ════════════════ TEAM FILTER (pill group, shared shell) ════════════════ */
.viewing{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.teamtabs{display:inline-flex;gap:2px;background:var(--bg-2);border:1px solid var(--line);border-radius:100px;padding:4px}
.teamtab{padding:7px 18px;border-radius:100px;font-family:'Oswald';font-weight:600;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--txt-2);transition:all .2s var(--ease);white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.teamtab:hover{color:var(--txt)}
.teamtab .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.teamtab[data-team="red"] .dot{background:var(--red)}
.teamtab[data-team="blue"] .dot{background:var(--blue)}
.teamtab[data-team="all"].active{color:var(--txt);background:var(--bg-elev);box-shadow:inset 0 0 0 1px var(--line-2)}
.teamtab[data-team="red"].active{background:rgba(var(--red-rgb),.18);color:var(--red-lt);box-shadow:inset 0 0 0 1px rgba(var(--red-rgb),.45)}
.teamtab[data-team="blue"].active{background:rgba(var(--blue-rgb),.18);color:var(--blue-lt);box-shadow:inset 0 0 0 1px rgba(var(--blue-rgb),.45)}

/* ════════════════ SECTION SHELL (shared) ════════════════ */
.section{margin-top:6px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.section-title{font-family:'Oswald';font-weight:600;font-size:20px;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.section-title i{color:#fff;font-size:17px}
.live-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;font-family:'JetBrains Mono';
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--success);
  background:rgba(55,200,113,.1);border:1px solid rgba(55,200,113,.3)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--success);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ════════════════ TIMELINE PANEL ════════════════ */
.tl-panel{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:rgba(15,15,24,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.35);animation:panelIn .5s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.tl-panel::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(620px circle at var(--mx,50%) var(--my,50%), rgba(var(--accent-rgb),.10), transparent 60%)}
.tl-panel:hover::after{opacity:1}
.tl-panel > *{position:relative;z-index:1}

/* header row: caption + zoom controls */
.tl-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;
  background:rgba(5,5,9,.3);border-bottom:1px solid var(--line)}
.tl-head-label{display:inline-flex;align-items:center;gap:10px;font-family:'Oswald';font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.tl-head-label i{color:rgba(var(--accent-rgb),.85);font-size:13px}
.tl-zoom{display:inline-flex;gap:6px}
.zoom-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-md);
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-2);font-size:13px;transition:all .18s var(--ease)}
.zoom-btn:hover{background:var(--bg-elev);color:var(--txt);border-color:rgba(var(--accent-rgb),.4)}

/* chart area */
.tl-chart-wrap{position:relative;height:520px;width:100%;padding:20px 18px}
.tl-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  color:var(--txt-3);text-align:center;font-size:14px;padding:24px}
.tl-state i{font-size:38px;opacity:.5}
.tl-state.loading i{color:rgba(var(--accent-rgb),.8);animation:spin 1s linear infinite;opacity:1}
.tl-state a{color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}

/* footer: leader + last updated */
.tl-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 22px;border-top:1px solid var(--line);background:rgba(5,5,9,.2)}
.tl-leader{display:flex;align-items:center;gap:12px}
.tl-leader-label{font-family:'Oswald';font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.tl-leader-card{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;background:var(--bg-3);
  border:1px solid var(--line);border-radius:var(--r-md)}
.tl-leader-card img{width:24px;height:24px;border-radius:4px;object-fit:contain;image-rendering:pixelated}
.tl-leader-card .ldot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.tl-leader-name{font-family:'Oswald';font-weight:600;letter-spacing:.02em}
.tl-leader-pts{font-family:'JetBrains Mono';font-weight:700;color:var(--accent)}
.tl-updated{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono';font-size:11.5px;color:var(--txt-3)}
.tl-updated.demo{color:var(--blue-lt)}

/* ════════════════ FOOTER (shared) ════════════════ */
.footer{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);text-align:center;color:var(--txt-3);font-size:12.5px}
.footer b{color:var(--txt-2);font-family:'Oswald';font-weight:600;letter-spacing:.05em}

/* ════════════════ RESPONSIVE ════════════════ */
@media(max-width:1023px){
  .tl-chart-wrap{height:420px}
}
@media(max-width:620px){
  .teamtabs{max-width:100%;flex-wrap:wrap;justify-content:center;border-radius:24px}
  .teamtab{padding:7px 12px;font-size:11.5px;gap:6px}
  .tl-head{flex-wrap:wrap}
  .tl-chart-wrap{height:340px;padding:14px 8px}
  .tl-foot{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.001ms!important}}