/* ── 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:4px;border:1px solid var(--filter-border,rgba(255,255,255,.1));
  background:transparent;color:var(--filter-text,rgba(255,255,255,.6));font-size:.85rem;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.perf-period-toggle button:hover{
  border-color:rgba(255,255,255,.18);color:var(--text,#e2e8f0);background:rgba(255,255,255,.04)}
.perf-period-toggle button.active{
  background:var(--accent,#00E676);color:#08090b;border-color:var(--accent,#00E676);
  font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.perf-period-toggle button.active:hover{background:var(--accent,#00E676);color:#08090b}

/* ── 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(--filter-border,rgba(255,255,255,.2));color:var(--muted,#94a3b8);
  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:var(--surface-card,#0d0f14);color:#e0e0e0;padding:.5rem .7rem;
  border-radius:4px;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 var(--surface-border,rgba(255,255,255,.08));text-align:center}
.kpi-info:hover::after,.kpi-info:focus::after{opacity:1}
@media(hover:none){.kpi-info{display:none}}

/* ── Avg CLV card — accent border callout ── */
.kpi-clv{border-color:var(--accent,#00E676)!important;box-shadow:0 0 16px rgba(0,230,118,.12),inset 0 1px 0 rgba(255,255,255,.08)!important}

/* ── Win Rate card - clickable expand/collapse ── */
.wr-card-toggle{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.wr-card-toggle:hover{border-color:rgba(0,230,118,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}

/* ── Grade tier chart ── */
.tier-chart{display:flex;flex-direction:column;gap:.9rem;margin-top:1rem;padding:1rem 1.1rem;
  background:var(--surface-glass,rgba(255,255,255,.03));border:1px solid var(--surface-border,rgba(255,255,255,.08));border-radius:8px}
.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:var(--accent,#00E676)}
.tier-bar-track{background:var(--surface-card,#0d0f14);border-radius:0 !important;height:.75rem;overflow:hidden;border:1px solid var(--surface-border,rgba(255,255,255,.06))}
.tier-bar-fill{height:100%;border-radius:0 !important;background:linear-gradient(90deg,#00E676,#42BDA6);transition:width .4s ease}
.tier-wr{font-size:.8rem;color:var(--muted,#94a3b8);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(0,230,118,.08)}
.tier-link:hover .tier-grade{color:#00E676}