/* ── Period toggle ── */
.perf-period-toggle{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.perf-period-toggle button{padding:.45rem 1.1rem;border-radius:0;border:1.5px solid var(--border,#333);
  background:transparent;color:var(--text-muted,#999);font-size:.85rem;cursor:pointer;transition:all .15s}
.perf-period-toggle button.active{background:#42BDA6;color:#000;border-color:transparent;font-weight:700;border-radius:0}
.perf-period-toggle button.active:hover{background:#1D7862;color:#fff;border-radius:0}

/* ── KPI cards with tooltip ── */
.kpi-label-row{display:flex;align-items:center;justify-content:center;gap:.35rem}
.kpi-info{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;
  border-radius:0;border:1px solid var(--text-muted,#888);color:var(--text-muted,#888);
  font-size:.6rem;cursor:default;position:relative;flex-shrink:0}
.kpi-info::after{content:attr(data-tip);position:absolute;bottom:calc(100% + .4rem);left:50%;
  transform:translateX(-50%);background:#1a1a1a;color:#e0e0e0;padding:.5rem .7rem;
  border-radius:0;font-size:.72rem;line-height:1.4;white-space:pre-line;
  width:160px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:50;
  border:1px solid #333;text-align:center}
.kpi-info:hover::after,.kpi-info:focus::after{opacity:1}
@media(hover:none){.kpi-info{display:none}}

/* ── Avg CLV card — green border callout ── */
.kpi-clv{border-color:var(--green)!important;box-shadow:0 0 16px rgba(66,189,166,.15)}

/* ── Win Rate card - clickable expand/collapse ── */
.wr-card-toggle{cursor:pointer;transition:border-color .15s}
.wr-card-toggle:hover{border-color:#42BDA6}
.wr-toggle-hint{font-size:.7rem;color:#42BDA6;margin-top:.35rem;letter-spacing:.02em}

/* ── Grade tier chart ── */
.tier-chart{display:flex;flex-direction:column;gap:.9rem;margin-top:1rem}
.tier-row{display:grid;grid-template-columns:2.5rem 1fr 3.5rem;align-items:center;gap:.75rem}
.tier-grade{font-weight:700;font-size:.9rem;color:#3b82f6}
.tier-bar-track{background:var(--surface-2,#1e1e1e);border-radius:0 !important;height:.75rem;overflow:hidden}
.tier-bar-fill{height:100%;border-radius:0 !important;background:linear-gradient(90deg,#42BDA6,#1D7862);transition:width .4s ease}
.tier-wr{font-size:.8rem;color:var(--text-muted,#aaa);text-align:right}
/* ── Tier -> history deep link ── */
.tier-link{text-decoration:none;border-radius:0;padding:.2rem .4rem;margin:-.2rem -.4rem;transition:background .15s}
.tier-link:hover{background:rgba(59,130,246,.08)}
.tier-link:hover .tier-grade{color:#42BDA6}