/* ==========================================================================
ecosystem.css — SportsActvd Ecosystem Kit (shared chrome), PlayRank League
theme: the ink Ecosystem Bar at the very top and the 4-column ecosystem
footer. Load AFTER the site's own theme:
Markup is generated by ecosystem.js (class names unchanged).
========================================================================== */
:root{
--ink:#090D14;
--paper:#FFFFFF;
--ember:#FF5900; /* Trekkr orange — ELO numbers + primary CTAs */
--court:#059669; /* verified / ▲ gains */
--line:#E2E8F0;
--elo-gold:#D2F802; /* champion / top states (volt) */
--eco-display:'Space Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
--eco-body:'Plus Jakarta Sans',system-ui,sans-serif;
--eco-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ELO number treatment — always orange, tabular mono, everywhere (formatElo()). */
.elo{font-family:var(--eco-mono);font-variant-numeric:tabular-nums;font-weight:800;color:var(--ember);letter-spacing:-.01em}
.elo-delta{font-family:var(--eco-mono);font-variant-numeric:tabular-nums;font-weight:800;font-size:.82em;margin-left:.4em}
.elo-delta--up{color:var(--court)}
.elo-delta--down{color:#64748B}
.elo-delta--flat{color:#94A3B8}
/* ── Ecosystem Bar ── */
.eco-bar{background:var(--ink);color:rgba(255,255,255,.72);font:700 10.5px var(--eco-mono);letter-spacing:.06em;text-transform:uppercase;line-height:1}
.eco-bar__inner{width:min(1180px,calc(100% - 40px));margin:0 auto;min-height:32px;display:flex;align-items:center;gap:16px}
.eco-bar__brand{font:800 10.5px var(--eco-mono);letter-spacing:.16em;color:#FFFFFF;white-space:nowrap;padding-right:4px}
.eco-bar__links{display:flex;align-items:center;gap:14px;flex:1;min-width:0;overflow:hidden}
.eco-bar__sep{color:rgba(255,255,255,.25);user-select:none}
.eco-bar__link{display:inline-flex;align-items:baseline;gap:5px;color:rgba(255,255,255,.62);white-space:nowrap}
.eco-bar__link:hover{color:#FFFFFF}
.eco-bar__link--current,.eco-bar__link--current:hover{color:#D2F802;cursor:default}
.eco-bar__tag{color:inherit;opacity:.75}
.eco-bar__cta{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:#D2F802;font-weight:800;white-space:nowrap}
.eco-bar__cta:hover{color:#fff}
.eco-bar__toggle{display:none;align-items:center;gap:6px;background:none;border:0;color:#FFFFFF;font:800 10.5px var(--eco-mono);letter-spacing:.16em;text-transform:uppercase;padding:0}
.eco-bar__toggle .eco-caret{transition:transform .2s ease}
.eco-bar__toggle[aria-expanded="true"] .eco-caret{transform:rotate(180deg)}
.eco-sheet{position:fixed;inset:0;z-index:200;display:none}
.eco-sheet[hidden]{display:none}
.eco-sheet.open{display:block}
.eco-sheet__backdrop{position:absolute;inset:0;background:rgba(9,13,20,.6)}
.eco-sheet__panel{position:absolute;left:0;right:0;top:0;background:var(--ink);color:#fff;padding:14px 20px 20px;border-bottom:4px solid #D2F802;transform:translateY(-8px);opacity:0;transition:transform .2s ease,opacity .2s ease}
.eco-sheet.open .eco-sheet__panel{transform:translateY(0);opacity:1}
.eco-sheet__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.15)}
.eco-sheet__title{font:800 12px var(--eco-mono);letter-spacing:.16em;color:#fff}
.eco-sheet__close{width:34px;height:34px;background:#D2F802;border:2px solid #fff;color:var(--ink);font:800 18px var(--eco-mono);line-height:1;padding:0}
.eco-sheet__item{display:block;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.1)}
.eco-sheet__item:last-child{border-bottom:0}
.eco-sheet__name{display:block;color:#fff;font:800 13px var(--eco-mono);text-transform:uppercase;letter-spacing:.06em}
.eco-sheet__name .eco-bar__tag{font-size:11px;margin-left:6px;opacity:.6}
.eco-sheet__role{display:block;color:rgba(255,255,255,.62);font:500 13px var(--eco-body);margin-top:3px;text-transform:none;letter-spacing:0}
.eco-sheet__item--current .eco-sheet__name{color:#D2F802}
@media(max-width:720px){
.eco-bar__brand,.eco-bar__links{display:none}
.eco-bar__toggle{display:inline-flex}
}
.eco-bar a:focus-visible,.eco-bar button:focus-visible,.eco-sheet a:focus-visible,.eco-sheet button:focus-visible,.eco-footer a:focus-visible{outline:3px solid #D2F802;outline-offset:2px}
/* ── Ecosystem footer ── */
.eco-footer{background:var(--paper);color:var(--ink);font-family:var(--eco-body);border-top:3px solid var(--ink);padding:0;margin-top:56px}
.eco-footer__inner{width:100%;margin:0}
.eco-footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:min(1180px,100%);margin:0 auto}
.eco-footer__col{padding:24px 22px;border-right:2px solid var(--line)}
.eco-footer__col:last-child{border-right:0}
.eco-footer__brand{font:900 13px var(--eco-body);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);margin-bottom:4px;display:inline-block}
span.eco-footer__brand{color:var(--ember)}
a.eco-footer__brand:hover{color:var(--ember)}
.eco-footer__role{color:#64748B;font-size:12.5px;line-height:1.5}
.eco-footer__utility{border-top:2px solid var(--ink);padding:14px max(20px,calc((100% - 1180px)/2 + 22px));display:flex;flex-wrap:wrap;gap:8px 20px;background:#F4F6F9}
.eco-footer__utility a{color:var(--ink);font:800 10.5px var(--eco-mono);text-transform:uppercase;letter-spacing:.06em}
.eco-footer__utility a:hover{color:var(--ember)}
.eco-footer__bottom{background:var(--ink);color:rgba(255,255,255,.6);padding:12px max(20px,calc((100% - 1180px)/2 + 22px));display:flex;flex-wrap:wrap;align-items:center;gap:12px;font:700 10px var(--eco-mono);letter-spacing:.08em;text-transform:uppercase}
.eco-footer__mark{color:#D2F802;font-weight:800}
@media(max-width:720px){
.eco-footer__cols{grid-template-columns:1fr 1fr}
.eco-footer__col{border-bottom:2px solid var(--line)}
.eco-footer__col:nth-child(2n){border-right:0}
}
@media(max-width:400px){
.eco-footer__cols{grid-template-columns:1fr}
.eco-footer__col{border-right:0}
}
@media(prefers-reduced-motion:reduce){
.eco-bar__toggle .eco-caret,.eco-sheet__panel{transition:none !important}
}