/* ═══════════════════════════════════════════════════════════════
   THE TERMI PROTOCOL — social-proof passport toast (/download)
   Class-only styling (no inline styles → CSP-safe). Reuses the site
   design tokens from termi.css; league accents reuse LEAGUE_COLORS.
   ═══════════════════════════════════════════════════════════════ */

.sp-stack {
  position: fixed; left: 20px; bottom: 20px; z-index: 240;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none; max-width: calc(100vw - 32px);
}

.sp {
  --sp-accent: #9aa6a0;
  position: relative; display: flex; width: 306px; max-width: calc(100vw - 32px);
  font-family: var(--f-sans); color: var(--t1);
  border-radius: var(--r); overflow: hidden;
  background: linear-gradient(135deg, #141417, #0d0d0f);
  border: 1px solid var(--border-h); box-shadow: var(--shadow-lg);
  pointer-events: auto;
  transform: translateX(-120%); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
  will-change: transform, opacity;
}
.sp.sp--in  { transform: none; opacity: 1; }
.sp.sp--out { transform: translateX(-120%); opacity: 0; }

/* league accents (match supabase-client.js LEAGUE_COLORS) */
.sp--rookie   { --sp-accent: #9aa6a0; }
.sp--bronze   { --sp-accent: #c8884a; }
.sp--silver   { --sp-accent: #cfd6d2; }
.sp--gold     { --sp-accent: #ffd24a; }
.sp--platinum { --sp-accent: #6fe0d0; }
.sp--diamond  { --sp-accent: #6fb7ff; }
.sp--legend   { --sp-accent: #c08bff; }

.sp-spine {
  flex: 0 0 20px; display: grid; place-items: center;
  background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.42)), var(--sp-accent);
  border-right: 1px solid rgba(0,0,0,.4);
}
.sp-spine span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-mono); font-size: 7.5px; font-weight: 700;
  letter-spacing: .18em; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55); white-space: nowrap;
}

.sp-body { flex: 1 1 auto; min-width: 0; padding: 8px 11px 7px; position: relative; }

.sp-band { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.sp-emblem { color: var(--sp-accent); font-size: 12px; line-height: 1; }
.sp-bandtitle { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--t2); }
.sp-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .16em; color: var(--t3); }
.sp-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-accent); box-shadow: 0 0 7px var(--sp-accent); animation: sp-pulse 1.5s ease-in-out infinite; }

.sp-main { display: flex; gap: 11px; padding-top: 9px; }
.sp-photo { position: relative; flex: 0 0 auto; width: 42px; height: 52px; border-radius: 5px; overflow: hidden; background: linear-gradient(160deg, #20202a, #0c0c10); border: 1px solid var(--border-h); display: grid; place-items: center; }
.sp-av { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.sp-av-mono { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-weight: 700; font-size: 1.1rem; color: var(--t1); background: linear-gradient(135deg, #3a3a42, #26262c); }
.sp-print { position: absolute; right: 3px; bottom: 2px; width: 15px; height: auto; color: rgba(255,255,255,.20); }

.sp-rows { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.sp-name { font-family: var(--f-mono); font-size: .81rem; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-event { font-size: .79rem; line-height: 1.28; color: var(--t2); }
.sp-event b { color: var(--t1); font-weight: 700; }
.sp-meta { display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .03em; color: var(--t3); white-space: nowrap; overflow: hidden; }
.sp-meta .sp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sp-accent); flex: 0 0 auto; }
.sp-lg { color: var(--sp-accent); font-weight: 700; }

.sp-mrz { margin: 8px -12px 0; padding: 4px 12px 0; border-top: 1px solid var(--border); font-family: var(--f-mono); font-size: 8px; letter-spacing: .16em; color: rgba(255,255,255,.26); white-space: nowrap; overflow: hidden; }

@keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 560px) { .sp-stack { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sp { transition: opacity .3s; transform: none; }
  .sp.sp--in, .sp.sp--out { transform: none; }
}