/* ===== Stats Dashboard (Swiss Minimal) ===== */
.stats-dash{
  padding:2.5rem 2rem 1rem;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  max-width:900px;margin:0 auto;
  background:var(--bg);
}

.stat-card{
  background:none;border:none;border-top:1px solid var(--border);
  border-radius:0;
  padding:1.1rem 0 0;text-align:left;transition:var(--transition);
  position:relative;overflow:visible;
}
.stat-card::before{content:none}
.stat-card:hover{box-shadow:none}
.stat-card .icon{display:none}
.stat-card .val{font-family:'JetBrains Mono',monospace;font-size:2.2rem;font-weight:600;color:var(--text-bright);line-height:1;font-variant-numeric:tabular-nums}
.stat-card .lbl{font-size:.62rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.2em;margin-top:.55rem}

/* ===== Divider between Stats and Timeline ===== */
.timeline-divider{
  height:1px;
  max-width:900px;
  margin:2.5rem auto 0;
  background:var(--border);
}

/* ===== Timeline Section ===== */
.timeline-section{
  padding:2rem 1.5rem 3rem;
  background:var(--bg);
  position:relative;
  max-width:900px;margin:0 auto;
}
.timeline-section .section-title{
  margin-bottom:2.2rem;
  font-size:.78rem;
}
.timeline-section::after{content:none}

/* ===== Timeline Track (hairline rail) ===== */
.timeline{
  position:relative;
  padding:2.4rem 0 1rem;
}

/* The horizontal track line */
.timeline::before{
  content:'';position:absolute;
  top:22px;left:0;right:0;height:1px;
  background:var(--border);
}

/* No pulse animation in Swiss style */
.timeline::after{content:none}

/* ===== Decade Nodes Row ===== */
.decade-nodes{
  display:flex;
  justify-content:flex-start;
  gap:0;
  position:relative;
  z-index:1;
  flex-wrap:wrap;
}

/* ===== Decade Node ===== */
.decade-node{
  display:flex;flex-direction:column;align-items:flex-start;
  cursor:pointer;user-select:none;
  padding:0 1.6rem 0 0;
  position:relative;
  transition:var(--transition);
}
.decade-node:hover{transform:none}

/* The node marker on the track */
.decade-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1px solid var(--text-dim);
  transition:background .2s ease,border-color .2s ease;
  position:relative;
  box-shadow:none;
}
.decade-node:hover .decade-dot{
  background:var(--text-dim);
  border-color:var(--text-dim);
}
.decade-node.active .decade-dot{
  background:var(--text-bright);
  border-color:var(--text-bright);
}

/* Champion node — filled square marker */
.decade-node.has-champ .decade-dot{
  border-color:var(--text-bright);
  border-radius:1px;
}
.decade-node.has-champ .decade-dot::after{content:none}

/* Decade label */
.decade-lbl{
  font-family:'Inter',sans-serif;
  font-size:.82rem;font-weight:600;
  color:var(--text-dim);
  margin-top:.7rem;
  transition:color .2s ease;
  letter-spacing:.02em;
}
.decade-node:hover .decade-lbl,
.decade-node.active .decade-lbl{
  color:var(--text-bright);
}

/* Model count */
.decade-count{
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  color:var(--text-dim);
  margin-top:.15rem;
  transition:color .2s;
}
.decade-node:hover .decade-count,
.decade-node.active .decade-count{
  color:var(--text);
}

/* ===== Expanded Years Panel ===== */
.decade-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease,
             opacity .3s ease,
             margin .3s ease;
  opacity:0;
  margin-top:0;
}
.decade-panel.open{
  max-height:400px;
  opacity:1;
  margin-top:1.2rem;
}

/* Inner content */
.decade-panel-inner{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:flex-start;
  padding:.6rem 0;
}

/* ===== Year Pill ===== */
.year-pill{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:.5rem .8rem;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
  position:relative;
  opacity:0;
  transform:translateY(6px);
}
.decade-panel.open .year-pill{
  opacity:1;
  transform:translateY(0);
}
/* Staggered animation delay — set inline by JS */
.decade-panel.open .year-pill:nth-child(1){transition-delay:.03s}
.decade-panel.open .year-pill:nth-child(2){transition-delay:.06s}
.decade-panel.open .year-pill:nth-child(3){transition-delay:.09s}
.decade-panel.open .year-pill:nth-child(4){transition-delay:.12s}
.decade-panel.open .year-pill:nth-child(5){transition-delay:.15s}
.decade-panel.open .year-pill:nth-child(6){transition-delay:.18s}
.decade-panel.open .year-pill:nth-child(7){transition-delay:.21s}
.decade-panel.open .year-pill:nth-child(8){transition-delay:.24s}
.decade-panel.open .year-pill:nth-child(9){transition-delay:.27s}
.decade-panel.open .year-pill:nth-child(10){transition-delay:.30s}

.year-pill:hover{
  border-color:var(--border-strong);
  background:transparent;
  transform:none;
  box-shadow:none;
}
.year-pill.selected{
  border-color:var(--border-strong);
  background:var(--text-bright);
}
.year-pill.selected .yp-year{color:var(--bg)}
.year-pill.selected .yp-count{color:var(--bg);opacity:.6}

.year-pill .yp-year{
  font-family:'JetBrains Mono',monospace;
  font-size:.82rem;font-weight:600;
  color:var(--text);
}
.year-pill .yp-count{
  font-size:.58rem;color:var(--text-dim);margin-top:.1rem;
}

/* Champion year — small marker */
.year-pill.champion::after{
  content:'';position:absolute;top:5px;right:5px;
  width:4px;height:4px;border-radius:50%;
  background:var(--text-bright);
}

/* ===== "All" reset button ===== */
.year-pill.reset-pill{
  background:transparent;
  border-style:dashed;
  border-color:var(--border);
}
.year-pill.reset-pill .yp-year{
  font-size:.68rem;color:var(--text-dim);font-weight:400;
}
.year-pill.reset-pill:hover{
  border-color:var(--border-strong);
}

/* ===== Responsive ===== */
@media(max-width:768px){
  .stats-dash{grid-template-columns:repeat(3,1fr);gap:.8rem;padding:1.5rem 1rem 0}
  .stat-card .val{font-size:1.4rem}
  .decade-nodes{gap:.3rem;flex-wrap:nowrap;overflow-x:auto;padding:0 1rem;-webkit-overflow-scrolling:touch}
  .decade-node{padding:0 .8rem 0 0;flex-shrink:0}
  .decade-lbl{font-size:.72rem}
  .decade-panel-inner{gap:.4rem;padding:.5rem 0}
  .year-pill{padding:.4rem .6rem}
  .year-pill .yp-year{font-size:.74rem}
}