/* timeline.css
   Timeline page: summary chips, score toggles, chart, tooltips.
*/

/* ---- timeline (history) ---- */
.tl-view{display:grid;grid-template-columns:minmax(0,1fr);place-items:stretch;align-content:start;gap:18px;width:min(1120px,100%);min-width:0;min-height:0;}
.timeline-main-stage:has(.tl-view){grid-template-columns:minmax(0,1fr);}
.tl-card,.tl-figure,.tl-stats,.tl-head{min-width:0;}
.tl-chart{max-width:100%;}
.tl-head{text-align:center;display:grid;gap:6px;animation:fdSlotIn .5s cubic-bezier(.3,1.35,.5,1) both;}
.tl-head h2{margin:0;font-family:var(--display-font);font-size:clamp(36px,7vw,66px);font-weight:420;letter-spacing:-.015em;line-height:1.06;color:#0f1a17;}
.tl-head p{max-width:560px;margin:0 auto;font-size:16px;line-height:1.5;font-weight:500;color:#44524c;}
.tl-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;}
.tl-stat{
  display:grid;gap:2px;min-width:150px;padding:10px 16px;border-radius:0;
  background:#ffffff;
  border:1px solid #cad3cd;
  box-shadow:none;
  animation:fdSlotIn .5s cubic-bezier(.3,1.35,.5,1) both;
}
.tl-stat:nth-child(2){animation-delay:.06s;}
.tl-stat:nth-child(3){animation-delay:.12s;}
.tl-stat em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#66756e;}
.tl-stat b{display:flex;align-items:center;gap:5px;font-size:26px;line-height:1.05;font-weight:700;color:#0f1a17;font-variant-numeric:tabular-nums;}
.tl-stat b.improved{color:#6f8d80;}
.tl-stat b.worse{color:#8a5e0e;}
.tl-stat b.steady{font-size:18px;color:#44524c;}
.tl-stat small{font-size:11.5px;font-weight:700;color:#66756e;}
.tl-card{
  position:relative;display:grid;gap:12px;padding:clamp(12px,1.8vw,20px);border-radius:0;
  background:#ffffff;
  border:1px solid #cad3cd;
  box-shadow:none;
  animation:fdSlotIn .6s cubic-bezier(.3,1.35,.5,1) .1s both;
}
.tl-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 4px;}
.tl-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:0;border-radius:0;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:#44524c;background:#ffffff;
  border:2px solid #d6ddd8;box-shadow:none;transition:transform .12s ease,background .2s ease,color .2s ease;
}
.tl-chip i{width:10px;height:10px;border-radius:50%;border:2px solid var(--metric-color);background:transparent;transition:background .2s ease;}
.tl-chip.is-on{color:#0f1a17;background:#fff;border-color:#0f1a17;box-shadow:none;}
.tl-chip.is-on i{background:var(--metric-color);}
.tl-chip:hover{transform:translateY(-1px);}
.tl-chip:active{transform:translateY(2px);}
.tl-figure{
  width:100%;height:auto;aspect-ratio:1100 / 540;margin:0;padding:10px 8px 4px;border-radius:0;
  background:#f5f7f3;
  box-shadow:inset 0 0 0 1px #d6ddd8;
}
.tl-chart{overflow:visible;}
.tl-band{fill:#86d4b4;opacity:.09;}
.tl-grid{stroke:rgba(15,26,23,.12);stroke-width:1.2;stroke-dasharray:3 7;}
.tl-axis{font-family:var(--site-font);font-size:15px;font-weight:700;fill:#66756e;}
.tl-area{opacity:0;animation:tlFade .9s ease .5s forwards;}
.tl-line{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:tlDraw 1.3s cubic-bezier(.4,.1,.2,1) forwards;filter:drop-shadow(0 4px 6px rgba(15,26,23,.12));}
.tl-pt{stroke:#fff;stroke-width:3.5;cursor:pointer;opacity:0;transform-box:fill-box;transform-origin:center;animation:tlPop .45s cubic-bezier(.3,1.6,.5,1) forwards;transition:r .15s ease;outline:none;}
.tl-pt:hover,.tl-pt:focus{r:11;}
.tl-pulse{opacity:.35;transform-box:fill-box;transform-origin:center;animation:tlPulse 2.2s ease-out infinite;pointer-events:none;}
.tl-end-label{font-family:var(--site-font);font-size:15px;font-weight:700;}
.tl-flag line{stroke:#f2b33d;stroke-width:2;stroke-dasharray:4 6;opacity:.7;}
.tl-flag path{fill:#f2b33d;}
.tl-tip{
  position:absolute;z-index:3;transform:translate(-50%,calc(-100% - 14px));pointer-events:none;
  display:grid;gap:2px;padding:7px 12px;border-radius:0;white-space:nowrap;
  background:#fff;box-shadow:0 3px 0 #e1e6e2,0 10px 22px rgba(54,48,110,.18);
  opacity:0;transition:opacity .15s ease,left .2s ease,top .2s ease;
}
.tl-tip.is-on{opacity:1;}
.tl-tip b{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:#0f1a17;}
.tl-tip b i{width:9px;height:9px;border-radius:50%;background:var(--c);}
.tl-tip span{font-size:11.5px;font-weight:700;color:#66756e;}
.tl-figure{position:relative;}
.tl-key{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:11px;font-weight:700;color:#66756e;}
.tl-key span{display:inline-flex;align-items:center;gap:6px;}
.tl-key-band{width:18px;height:10px;border-radius:0;background:rgba(134,212,180,.25);}
.tl-key-flag{width:10px;height:12px;background:#f2b33d;clip-path:polygon(0 0,100% 30%,0 60%);}
@keyframes tlDraw{to{stroke-dashoffset:0;}}
@keyframes tlFade{to{opacity:1;}}
@keyframes tlPop{from{opacity:0;transform:scale(.2);}to{opacity:1;transform:scale(1);}}
@keyframes tlPulse{0%{opacity:.4;transform:scale(1);}100%{opacity:0;transform:scale(2.6);}}
@media (max-width:620px){
  .tl-view{gap:12px;}
  .tl-stat{min-width:0;flex:1 1 30%;padding:8px 10px;border-radius:0;}
  .tl-stat b{font-size:20px;}
  .tl-stat em{font-size:9px;}
  .tl-card{padding:10px;border-radius:0;}
  .tl-figure{aspect-ratio:640 / 590;padding:6px 2px 2px;border-radius:0;}
  .tl-axis,.tl-end-label{font-size:20px;}
}
@media (prefers-reduced-motion:reduce){
  .tl-line{animation:none;stroke-dashoffset:0;}
  .tl-area,.tl-pt{animation:none;opacity:1;}
  .tl-pulse{animation:none;opacity:0;}
}