/* iq-join.css · niftiIQ join + follow pieces v1.0 (W36 J1-J4, Pixel mockups OK'd by Brett 10-17) · Sage 2026-10-18
   Its own file so arena-ice.css/js stay with the STANDINGS package (one writer per file). Loaded right after arena-ice.css
   by _ice.html head(). Display only: nothing here changes a number. Tokens = arena-ice.css (--i-*), dark + light.
   J1  .ij-j1 / .ij-find   top bar: solid "Join free" (+ outline "Find your team" on wide screens); signed out only
   J2  .ij-strip            join strip under the hero of landing pages: Free account | Plus; signed out only
   J3  .ij-fol              "Follow <team> free" line inside an opened standings row panel
   J4  .ij-bar              phone-only bottom bar, after scrolling past J2; one close X, stays closed on this device */

/* ---------- J1 · top bar ---------- */
html[data-theme] body .ij-j1,html[data-theme] body .ij-find,html[data-theme] body .ij-strip,html[data-theme] body .ij-strip *,html[data-theme] body .ij-fol,html[data-theme] body .ij-fol *,html[data-theme] body .ij-bar,html[data-theme] body .ij-bar *{box-sizing:border-box}
html[data-theme] body .ice-top a.ij-j1{background:var(--i-acc);color:var(--i-on-acc)!important;font:700 14px var(--i-font);padding:10px 16px;border-radius:10px;
  white-space:nowrap;text-decoration:none;box-shadow:0 0 24px -8px var(--i-glow);display:inline-flex;align-items:center;min-height:40px}
html[data-theme] body .ice-top a.ij-j1:hover{filter:brightness(1.06)}
html[data-theme] body .ice-top a.ij-find{color:var(--i-acc)!important;border:1px solid var(--i-acc-soft2);background:transparent;font:600 14px var(--i-font);
  padding:9px 14px;border-radius:10px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
html[data-theme] body .ice-top a.ij-find:hover{border-color:var(--i-acc)}
@media (max-width:1180px){html[data-theme] body .ice-top a.ij-find{display:none}}
@media (max-width:860px){
  /* arena-ice hides the old .ice-b here; Join free stays on phones (Pixel mock: logo · sun · Join free · Menu) */
  html[data-theme] body .ice-top a.ij-j1{display:inline-flex;font-size:13px;padding:8px 12px;min-height:36px;border-radius:9px}
  html[data-theme] body .ice-acts{gap:8px}
}
@media (max-width:359px){html[data-theme] body .ice-top a.ij-j1{padding:7px 9px;font-size:12.5px}}

/* ---------- J2 · join strip ---------- */
html[data-theme] body .ij-strip{margin:18px 0 10px;border:1px solid var(--i-acc-soft2);border-radius:18px;
  background:linear-gradient(135deg,var(--i-acc-soft),transparent 60%),var(--i-p);display:grid;grid-template-columns:1.25fr 1fr;color:var(--i-tx)}
html[data-theme] body .ij-strip .ij-col{padding:20px 22px;min-width:0}
html[data-theme] body .ij-strip .ij-col+.ij-col{border-left:1px solid var(--i-ln)}
html[data-theme] body .ij-strip .ij-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px}
html[data-theme] body .ij-strip .ij-t{font:700 22px/1.1 var(--i-cond);text-transform:uppercase;letter-spacing:.01em;color:var(--i-tx);margin:0}
html[data-theme] body .ij-strip .ij-pr{font:400 12px var(--i-mono);color:var(--i-tx2)}
html[data-theme] body .ij-strip .ij-pr b{color:var(--i-tx);font-size:14px;font-weight:700}
html[data-theme] body .ij-strip .ij-prl{margin:-4px 0 10px}
html[data-theme] body .ij-strip ul{list-style:none;display:grid;gap:6px;margin:0 0 14px;padding:0}
html[data-theme] body .ij-strip li{display:flex;gap:9px;font-size:13.5px;line-height:1.45;color:var(--i-tx);padding:0;border:0}
html[data-theme] body .ij-strip li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--i-acc);margin-top:6px}
html[data-theme] body .ij-strip .ij-plus li::before{background:var(--i-tx3)}
html[data-theme] body .ij-strip .ij-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html[data-theme] body .ij-strip .ij-fine{font-size:11.5px;color:var(--i-tx3)}
html[data-theme] body .ij-strip a.ij-go{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;
  background:var(--i-acc);color:var(--i-on-acc)!important;font:700 15px var(--i-font);text-decoration:none;white-space:nowrap;box-shadow:0 0 24px -6px var(--i-glow)}
html[data-theme] body .ij-strip a.ij-go:hover{filter:brightness(1.07)}
html[data-theme] body .ij-strip a.ij-gh{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:11px;
  background:transparent;color:var(--i-acc)!important;border:1px solid var(--i-acc-soft2);font:700 14px var(--i-font);text-decoration:none;white-space:nowrap}
html[data-theme] body .ij-strip a.ij-gh:hover{border-color:var(--i-acc)}

/* ---------- J3 · follow line in an opened row panel ---------- */
html[data-theme] body .ij-fol{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--i-ln);padding-top:12px;margin-top:2px}
html[data-theme] body .ij-fol span{font-size:13px;color:var(--i-tx2)}
html[data-theme] body .ij-fol span b{color:var(--i-tx)}
html[data-theme] body .ij-fol a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:11px;flex:none;
  background:var(--i-acc);color:var(--i-on-acc)!important;font:700 14px var(--i-font);text-decoration:none;white-space:nowrap}

/* ---------- J4 · phone bottom bar ---------- */
.ij-bar{display:none}
@media (max-width:760px){
  html[data-theme] body .ij-strip{grid-template-columns:1fr}
  html[data-theme] body .ij-strip .ij-col{padding:16px}
  html[data-theme] body .ij-strip .ij-col+.ij-col{border-left:0;border-top:1px solid var(--i-ln)}
  html[data-theme] body .ij-strip .ij-t{font-size:19px}
  html[data-theme] body .ij-strip li{font-size:13px}
  html[data-theme] body .ij-strip a.ij-go{width:100%}
  html[data-theme] body .ij-fol{flex-direction:column;align-items:stretch}
  html[data-theme] body .ij-fol a{width:100%}
  html[data-theme] body .ij-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)) 16px;background:var(--i-p);border-top:1px solid var(--i-acc-soft2);
    box-shadow:0 -12px 30px -18px rgba(0,0,0,.6);transform:translateY(110%);transition:transform .22s ease;visibility:hidden}
  html[data-theme] body .ij-bar.on{transform:none;visibility:visible}
  html[data-theme] body .ij-bar[hidden]{display:none}
  html[data-theme] body .ij-bar .ij-bt{flex:1;min-width:0;font-size:12.5px;color:var(--i-tx2);line-height:1.35}
  html[data-theme] body .ij-bar .ij-bt b{display:block;font-size:13.5px;color:var(--i-tx)}
  html[data-theme] body .ij-bar a.ij-go{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:11px;flex:none;
    background:var(--i-acc);color:var(--i-on-acc)!important;font:700 14px var(--i-font);text-decoration:none;white-space:nowrap}
  html[data-theme] body .ij-bar button.ij-x{flex:none;width:36px;height:36px;min-height:0;padding:0;border-radius:9px;border:1px solid var(--i-ln2);
    background:transparent;color:var(--i-tx2);font:400 18px/1 var(--i-font);cursor:pointer;display:grid;place-items:center}
  html[data-theme] body.ij-bar-on{padding-bottom:72px}   /* the bar never covers the footer's last line */
}
@media (prefers-reduced-motion:reduce){html[data-theme] body .ij-bar{transition:none}}

/* ---------- scroll-depth section markers (W36, Pixel's data-sec names) ---------- */
/* a zero-height marker placed just before a section whose wrapper lives in a shared file; the page script reads its top */
.ij-sec{display:block;height:0;margin:0;padding:0;border:0;overflow:hidden}