/* ============================================================
   ATL B3 Commander League — shared design tokens & components.
   Linked with an absolute path (/theme.css) from every page,
   since /formsubmission is served as a clean URL rather than a
   file path — a relative href would resolve inconsistently.
   ============================================================ */

:root{
  --bg:#0a0910;
  --bg-2:#100e18;
  --panel:#15121f;
  --panel-2:#1c1828;
  --line:#2e2740;
  --line-2:#463a63;
  --ink:#e8e2d4;
  --ink-dim:#a79fb8;
  --ink-faint:#756c8a;
  --gold:#d9b45b;
  --gold-2:#f0d48a;
  --w:#f5f1dc; --u:#7fb4e0; --b:#9b7fc4; --r:#e07b62; --g:#7fc09a;
  --good:#7fc09a;
  --bad:#e0605a;
  --radius:14px;
  --maxw:1180px;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Trajan Pro","Optima","Palatino Linotype",Georgia,serif; letter-spacing:.02em; margin:0}
a{color:var(--gold-2)}

/* ---------- brand mark (WUBRG pips) ---------- */
.pips{display:flex; gap:4px}
.pip{width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.5) inset}
.pip.w{background:var(--w)} .pip.u{background:var(--u)} .pip.b{background:var(--b)} .pip.r{background:var(--r)} .pip.g{background:var(--g)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  font-family:system-ui,sans-serif; font-size:14px; font-weight:600; letter-spacing:.05em;
  padding:14px 22px; border-radius:11px; border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); color:var(--ink);
  transition:.18s; cursor:pointer;
}
.btn:hover{border-color:var(--gold); color:var(--gold-2); transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.45)}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.btn.primary{background:linear-gradient(180deg,#e6c876,#c39a3c); color:#1a1408; border-color:#e6c876}
.btn.primary:hover{color:#1a1408; box-shadow:0 8px 30px rgba(217,180,91,.3)}
.btn:disabled{opacity:.6; cursor:default; transform:none; box-shadow:none}
.btn svg{width:17px; height:17px; flex:none}

/* ---------- point-value badges ---------- */
.badge{
  flex:none; min-width:48px; text-align:center;
  font-family:system-ui,sans-serif; font-weight:700; font-size:14px;
  padding:6px 9px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--line-2); color:var(--ink);
}
.badge.pos{color:#132a1d; background:linear-gradient(180deg,#96d4ae,#5fa77e); border-color:#96d4ae}
.badge.neg{color:#2c100e; background:linear-gradient(180deg,#f0918a,#c85a53); border-color:#f0918a}
.badge.dq{color:#fff; background:linear-gradient(180deg,#8e2b26,#5c1a16); border-color:#c04a43; letter-spacing:.06em}
.badge.var{color:var(--gold-2); background:rgba(217,180,91,.12); border-color:var(--gold)}

/* ---------- Clerk user button slot (in the nav) ---------- */
#clerkUserButton{flex:0 0 auto;display:flex;align-items:center}
.nav-signin-btn{
  font:600 13px/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-2); background:rgba(217,180,91,.09); border:1px solid rgba(217,180,91,.45);
  padding:8px 14px; border-radius:8px; cursor:pointer; white-space:nowrap;
  transition:.15s;
}
.nav-signin-btn:hover{background:rgba(217,180,91,.18); border-color:var(--gold)}

/* ---------- nav ---------- */
/* Shared across every page — behavior lives in /nav.js. One set of
   links in the DOM; CSS just re-presents them as a dropdown panel once
   collapsed, so there's a single source of truth for site navigation. */
nav{
  position:sticky; top:0; z-index:60;
  background:rgba(10,9,16,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:background .25s ease, border-color .25s ease;
}
nav.collapsed{background:rgba(10,9,16,.95); border-bottom-color:var(--line-2); box-shadow:0 6px 22px rgba(0,0,0,.35)}
.nav-in{
  max-width:var(--maxw); margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:20px;
  position:relative; transition:padding .25s ease;
}
nav.collapsed .nav-in{padding-top:8px; padding-bottom:8px}
.brand{display:flex; align-items:center; gap:10px; font-family:inherit; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; color:var(--gold); white-space:nowrap}
.nav-links{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.nav-links a{
  color:var(--ink-dim); text-decoration:none; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 11px; border-radius:8px; font-family:system-ui,sans-serif;
}
.nav-links a:hover{color:var(--gold-2); background:rgba(217,180,91,.09)}
/* leaves the page rather than scrolling to a section, so it reads differently */
.nav-links a.cta{
  color:var(--gold-2); background:rgba(217,180,91,.09);
  border:1px solid rgba(217,180,91,.45);
}
.nav-links a.cta:hover{background:rgba(217,180,91,.18); border-color:var(--gold)}

/* ---------- hamburger ---------- */
.burger{
  display:none; margin-left:auto; flex:none;
  width:42px; height:36px; align-items:center; justify-content:center; padding:0;
  background:none; border:1px solid var(--line-2); border-radius:9px; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.burger:hover{border-color:var(--gold); background:rgba(217,180,91,.07)}
.burger:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.burger .bars{position:relative; display:block; width:18px; height:12px}
.burger .bars i{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:var(--gold);
  transition:top .24s ease, transform .24s ease, opacity .14s ease;
}
.burger .bars i:nth-child(1){top:0}
.burger .bars i:nth-child(2){top:5px}
.burger .bars i:nth-child(3){top:10px}
nav.open .burger{border-color:var(--gold)}
nav.open .burger .bars i:nth-child(1){top:5px; transform:rotate(45deg)}
nav.open .burger .bars i:nth-child(2){opacity:0}
nav.open .burger .bars i:nth-child(3){top:5px; transform:rotate(-45deg)}

/* collapsed: the same links become a dropdown panel */
nav.collapsed .burger{display:inline-flex}
nav.collapsed .nav-links{
  position:absolute; top:calc(100% + 10px); right:22px; margin:0;
  flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:2px;
  min-width:196px; padding:8px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-2); border-radius:12px;
  box-shadow:0 20px 44px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px) scale(.97); transform-origin:top right;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
nav.collapsed.open .nav-links{opacity:1; visibility:visible; pointer-events:auto; transform:none}
nav.collapsed .nav-links a{padding:10px 13px; border-radius:8px; font-size:13.5px}
@media (prefers-reduced-motion: reduce){
  nav, .nav-in, .burger .bars i, nav.collapsed .nav-links{transition:none}
}

/* ---------- search/filter toolbar (search box + count) ---------- */
/* Was duplicated verbatim as .deck-tools/.stand-tools in index.html —
   consolidated so a third page (commanders.html) doesn't copy it again. */
.tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.tools input{
  flex:1 1 230px; min-width:0; font:15px/1.4 system-ui,sans-serif;
  background:var(--panel); border:1px solid var(--line-2); color:var(--ink);
  padding:11px 15px; border-radius:10px;
}
.tools input:focus{outline:none; border-color:var(--gold)}
.tools input::placeholder{color:var(--ink-faint)}
.count{font-family:system-ui,sans-serif; font-size:13px; color:var(--ink-faint); white-space:nowrap}
.tools .count{margin-left:auto}

/* ---------- filter chips — must be shrinkable (flex:none would keep
   max-content width, so the group could never wrap and would overflow) ---------- */
.chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center; flex:0 1 auto; min-width:0}
.chips .lbl{
  font-family:system-ui,sans-serif; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); margin-right:2px;
}
.chip{
  font:600 12.5px/1 system-ui,sans-serif; letter-spacing:.04em;
  padding:8px 13px; border-radius:99px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line-2); color:var(--ink-dim);
  transition:.15s;
}
.chip:hover{border-color:var(--gold); color:var(--gold-2)}
.chip:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.chip[aria-pressed="true"]{background:rgba(217,180,91,.16); border-color:var(--gold); color:var(--gold-2)}
.chip[aria-pressed="true"].c2{background:rgba(127,180,224,.16); border-color:var(--u); color:var(--u)}
.chip[aria-pressed="true"].c3{background:rgba(155,127,196,.18); border-color:#9b7fc4; color:#c0a6e6}
.chip.clear{border-style:dashed; color:var(--ink-faint)}
.chips .sep{width:1px; height:20px; background:var(--line-2); margin:0 4px; flex:none}

/* ---------- scrollable data table ---------- */
.table-scroll{
  max-height:min(60vh, 540px); overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:14px; background:rgba(0,0,0,.22);
}
.table-scroll::-webkit-scrollbar{width:10px}
.table-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.03); border-radius:99px; margin:8px 0}
.table-scroll::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px; border:2px solid transparent; background-clip:padding-box}
.table-scroll::-webkit-scrollbar-thumb:hover{background:var(--gold); background-clip:padding-box}
table.stand{width:100%; border-collapse:collapse; font-family:system-ui,sans-serif}
table.stand th{
  position:sticky; top:0; z-index:2;
  background:#151220; color:var(--ink-faint);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  text-align:right; padding:12px 14px; border-bottom:1px solid var(--line-2); white-space:nowrap;
}
table.stand th:nth-child(1){text-align:center; width:64px}
table.stand th:nth-child(2){text-align:left}
table.stand td{
  padding:11px 14px; border-bottom:1px solid rgba(46,39,64,.6);
  font-size:14.5px; color:var(--ink); text-align:right; white-space:nowrap;
}
table.stand tr:last-child td{border-bottom:none}
table.stand tbody tr:hover td{background:rgba(217,180,91,.05)}
.empty{color:var(--ink-faint); font-family:system-ui,sans-serif; font-size:14px; padding:20px 2px}

@media (max-width:640px){
  .tools{gap:8px}
  .tools input{flex:1 1 100%}
  .tools .count{margin-left:0; flex:1 1 100%}
  .chips{flex:1 1 100%; justify-content:flex-start}
  .chips .lbl{flex:1 1 100%; margin:4px 0 0}
  .chips .sep{display:none}
  .chip{padding:7px 12px; font-size:12px}
  table.stand th, table.stand td{padding:10px 10px}
}