/**
 * Champ Select — shared design tokens & primitives.
 *
 * Loaded by every screen before that page's own <style> block, so a page can
 * override or extend anything here just by declaring the selector again —
 * plain cascade, no build step. Keep this file to what's genuinely reused
 * across screens; layout that's specific to one screen stays in that page.
 */

:root{
  --ground:#0C1116; --surface:#141B22; --surface-2:#1A222B;
  --rule:#2A343E; --rule-2:#212A33;
  --ink:#E7EDF3; --ink-2:#AEBCC9; --ink-3:#7C8B99; --ink-4:#4a5661; --ink-5:#3f4a55;
  --accent:#4FC3B8; --accent-hover:#6fd6cc; --accent-soft:#12312F; --accent-soft-hover:#17403d;
  --role-top:#F0743F; --role-jungle:#57BE66; --role-mid:#7C93F5; --role-bottom:#E8B21A; --role-support:#B084EA; --role-team:#4FC3B8;
  --good:#5DD68C; --good-bg:#132A1D; --bad:#F58077; --bad-bg:#2E1917; --warn:#E0AC3F; --warn-bg:#2B2312;
}

*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* native number-input spinners don't match any custom-styled control in the app — suppress them everywhere */
input[type="number"]{appearance:textfield; -moz-appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}

body{
  background:var(--ground); color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.display{font-family:"Bricolage Grotesque",sans-serif}

/* ---------- scrollbars ---------- */
*{scrollbar-width:thin; scrollbar-color:var(--ink-5) var(--surface)}
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-track{background:var(--surface)}
*::-webkit-scrollbar-thumb{background:var(--ink-5); border-radius:5px; border:2px solid var(--surface)}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}

/* ---------- brand mark ---------- */
.mark{
  display:inline-block; flex:none;
  background:url(/img/favicon.svg) center/contain no-repeat;
  width:20px; height:20px;
}

/* ---------- app strip ---------- */
/* min-height, not vertical padding: what sits in .strip-right (nothing, a
   pill, a button + avatar) used to decide how tall the bar was, so it jumped
   between screens. The tallest of them fits inside this. */
.strip{
  display:flex; align-items:center;
  min-height:61px; padding:0 30px; box-sizing:border-box; border-bottom:1px solid var(--rule-2); flex:none;
}
.strip-left{display:flex; align-items:center; gap:16px}
a.strip-left{color:inherit; text-decoration:none; cursor:pointer}
.wordmark{font:600 10px/1 "IBM Plex Mono",monospace; letter-spacing:.2em; color:var(--ink-3)}
.context{font:600 10px/1 "IBM Plex Mono",monospace; letter-spacing:.2em; color:var(--ink-4)}
.strip-right{display:flex; align-items:center; gap:10px; margin-left:auto}

/* The global (first-level) nav, mounted by shared.js: sits right after the
   logo, at the same x on every screen. The page/League name (.context) is
   moved to just after it, and .strip-right (margin-left:auto, not
   space-between, since not every screen has one) is pinned to the far edge. */
.strip-nav{display:flex; align-items:center; gap:4px; margin-left:24px; min-width:0}
.strip-nav + .context{margin-left:20px}

/* The League being viewed (set by each league screen's own script): the strip's
   one "you are here" for a League, set off from the global links by a rule and
   given real weight, instead of the dim mono-caps label other screens use. */
.strip-nav + .strip-league{
  margin-left:18px; padding:2px 0 2px 18px; border-left:1px solid var(--rule);
  font:700 14px/1 "Bricolage Grotesque",sans-serif; letter-spacing:-.01em; color:var(--ink);
  min-width:0; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.strip-nav + .strip-league:empty{display:none}
.strip-nav-link{
  padding:8px 10px; border-radius:3px;
  font:600 10px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none; white-space:nowrap;
}
.strip-nav-link:hover{color:var(--ink)}
.strip-nav-link.active{color:var(--accent); background:var(--accent-soft)}

/* The account controls shared.js mounts at the right of every strip: a
   "Create league" call to action (same mono-caps voice as the nav links,
   outlined (no fill, so it can't be mistaken for the page's own status pill beside it), and exactly the avatar's 26px tall so
   the two read as one cluster) and the avatar's account menu. */
.strip-cta{
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px 1px; box-sizing:border-box;
  border:1px solid var(--accent); border-radius:3px; background:transparent; color:var(--accent);
  font:600 9.5px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  transition:background-color 120ms cubic-bezier(.2,0,.2,1), color 120ms cubic-bezier(.2,0,.2,1);
}
/* Same font, size and weight as the label (a bigger "+" rides high of the caps'
   centre line), and the 1px of bottom padding above lifts the label to the
   button's true centre -- this mono font's caps sit low in their line box. */
.strip-cta::before{content:"+"; font:inherit; letter-spacing:0}
.strip-cta:hover{background:var(--accent); color:var(--ground)}
/* A page's own status pill / counter sits in the same row: same 26px height and
   the same centred label as the button and avatar beside it. */
.strip-right .pill{display:inline-flex; align-items:center; height:26px; padding:0 10px 2px; box-sizing:border-box; line-height:1}
.strip-cta:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* flex, not the default block/inline-block: those wrap the 26px avatar in a
   line box whose height comes from the page's font metrics (a strut), so the
   wrapper -- the thing .strip-right actually centres -- ended up a few px
   taller than the avatar and pushed it off the button's centre line. */
.account-menu{position:relative; display:flex; align-items:center}
.avatar-btn{display:flex; background:none; border:none; padding:0; margin:0; cursor:pointer; border-radius:50%; line-height:0}
.avatar-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.account-dropdown{
  position:absolute; top:calc(100% + 10px); right:0; z-index:20; min-width:180px;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:4px; padding:6px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.account-dropdown-name{
  padding:9px 10px 8px; font:600 12px "IBM Plex Mono",monospace; color:var(--ink-3);
  border-bottom:1px solid var(--rule-2); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.account-dropdown-item{
  display:block; width:100%; text-align:left; padding:9px 10px; background:none; border:none; border-radius:3px;
  font:600 13px "Bricolage Grotesque",sans-serif; color:var(--ink-2); cursor:pointer;
}
.account-dropdown-item:hover{background:var(--surface); color:var(--bad)}

/* ---------- avatar — a real Google photo when the user has one, initials otherwise ---------- */
.avatar{
  position:relative; flex:none; width:26px; height:26px; border-radius:50%; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font:600 10.5px/1 "IBM Plex Mono",monospace; color:var(--accent);
  padding-bottom:2px; box-sizing:border-box; /* this font's caps sit low in their line box: lift the initial to the circle's centre */
}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* Below this, the strip's items (logo, nav, page/league name, CTA, avatar)
   no longer all fit on one line with no shrink/wrap of their own -- letting
   the row wrap, and giving the League/page name a tighter cap, keeps every
   item fully visible (stacked onto a second line where needed) instead of
   the CTA/avatar silently clipping past the viewport edge or overlapping
   the title text. */
@media (max-width:640px){
  .strip{flex-wrap:wrap; row-gap:8px; min-height:auto; padding:12px 16px}
  .strip-nav + .strip-league{max-width:160px; margin-left:10px; padding-left:10px}
  .strip-nav + .context{margin-left:10px}
}

/* ---------- pill (status & config badges) ---------- */
.pill{
  font:600 10px "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:3px;
}
.pill-warn{background:var(--warn-bg); color:var(--warn)}
.pill-good{background:var(--good-bg); color:var(--good)}
.pill-neutral{background:var(--surface-2); color:var(--ink-3)}
.pill-accent{background:var(--accent-soft); color:var(--accent)}

/* ---------- buttons — one shared base, three variants, two size modifiers ---------- */
/* Used on both <button> and <a> elements across every screen, so the base rule
   has to erase every difference the two elements start with:

   - text-decoration. Browsers never underline a <button> but do underline an
     <a>, so any button that happened to be a link (Browse free agents, Cancel,
     Claim a free agent, Back to lobby) wore an underline the real buttons
     never had.
   - display. A <button> is inline-block and reserves its full padded height;
     a bare <a> is inline, so its vertical padding paints outside the line box
     without pushing anything -- the roster page's "Claim a free agent" link
     was a 58px-tall button inside a 22px-tall row, bleeding 18px over its
     neighbours. inline-flex + centring also makes width:100% (the trade
     browse cards, the draft sheet button) behave the same on both elements.

   The [hidden] guard below is the price of setting `display` here: an author
   `display` beats the UA `[hidden]{display:none}` rule, and four buttons
   (join-league's Join/Go to league, league-status's Start draft and Enter
   draft room) are shown and hidden through that attribute. draft-room's
   `.hidden` class already carries !important, so it needs no guard. */
.btn-primary,.btn-secondary,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; border-radius:3px; font-family:inherit; text-decoration:none;
  transition:background-color 120ms cubic-bezier(.2,0,.2,1), border-color 120ms cubic-bezier(.2,0,.2,1), color 120ms cubic-bezier(.2,0,.2,1);
}
.btn-primary[hidden],.btn-secondary[hidden],.btn-ghost[hidden]{display:none}
.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* One disabled look for all three variants. Only :disabled is styled, and it
   is only ever an element that can carry the attribute -- no <a> in the app is
   used to express a disabled action; those are hidden instead. The
   :not(:disabled) on the hover rules matters because a disabled <button> still
   matches :hover, so free-agents' "Unavailable" claim buttons used to light up
   accent-teal under the cursor as if they were live. */
.btn-primary:disabled,.btn-secondary:disabled,.btn-ghost:disabled{opacity:.5; cursor:not-allowed}

.btn-primary{
  background:var(--accent); color:var(--ground); font:700 15px "Bricolage Grotesque",sans-serif;
  padding:15px 32px;
}
.btn-primary:not(:disabled):hover{background:var(--accent-hover)}
.btn-primary.btn-xl{font-size:18px; padding:18px 44px}
.btn-primary.btn-sm{font-size:13px; padding:10px 20px}

.btn-secondary{
  background:var(--surface-2); border:1px solid var(--rule); color:var(--ink-2);
  font:600 11px "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase;
  padding:13px 22px;
}
.btn-secondary:not(:disabled):hover{border-color:var(--accent); color:var(--accent)}
.btn-secondary.btn-sm{padding:8px 13px; font-size:9.5px}

.btn-ghost{
  background:transparent; border:1px solid var(--rule); color:var(--ink-2);
  font:600 11px "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase;
  padding:13px 22px;
}
.btn-ghost:not(:disabled):hover{border-color:var(--accent); color:var(--accent)}
.btn-ghost.btn-sm{padding:8px 13px; font-size:9.5px}

/* ---------- stage-lit body — the neutral radial ground behind a screen's main content ---------- */
.stage{
  padding:52px 30px 46px;
  background:radial-gradient(120% 90% at 50% 0%, #141B22 0%, #0C1116 62%);
}
.stage.accent{background:radial-gradient(120% 90% at 50% 0%, #12312F 0%, #0C1116 66%)}
.col{margin:0 auto}

.eyebrow{
  font:600 11px/1 "IBM Plex Mono",monospace; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}

/* ---------- league nav — the tab strip (HOME/STANDINGS/MY ROSTER/... before the
   draft, LOBBY/DRAFT ROOM) reused across every league screen (see league-nav.js).
   Tabs sit left; the round stepper (round-nav.js) folds into the same bar,
   top-right — one shared spot for it, not a block repeated on every screen ---------- */
.league-nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 30px; border-bottom:1px solid var(--rule-2); flex:none}
.league-nav-tabs{display:flex; gap:4px; min-width:0; margin-bottom:-1px; overflow-x:auto; scrollbar-width:none}
.league-nav-tabs::-webkit-scrollbar{display:none}
.league-nav-tab{
  display:inline-flex; align-items:center; flex:none; white-space:nowrap; padding:14px 16px;
  font:600 11px "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none; border-bottom:2px solid transparent;
}
.league-nav-tab:hover{color:var(--ink)}
.league-nav-tab.active{color:var(--accent); border-bottom-color:var(--accent)}

/* ---------- round stepper — the compact prev/next week control folded into
   the league-nav strip above; the focused round it carries travels between
   pages via the tabs on the other side of that same bar. Always exactly
   these three elements (no button that appears/disappears, like a "jump to
   latest" would) so stepping never reflows the rest of the bar; the label
   is a fixed width (not just a min) with an ellipsis, so a longer name --
   "Before Week 1" next to "Finals" -- clips instead of growing the box and
   shifting the buttons on either side of it ---------- */
.nav-stepper{flex:none; display:flex; align-items:center; gap:6px}
.nav-step-btn{
  flex:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  font:600 14px "IBM Plex Mono",monospace; color:var(--ink-3); background:none;
  border:1px solid var(--rule); border-radius:3px; cursor:pointer;
}
.nav-step-btn:hover:not(:disabled){color:var(--ink); border-color:var(--ink-4)}
.nav-step-btn:disabled{opacity:.3; cursor:default}
.nav-step-label{
  display:inline-block; width:84px; text-align:center; overflow:hidden; text-overflow:ellipsis;
  font:600 11px "IBM Plex Mono",monospace; letter-spacing:.03em; color:var(--ink-2); text-decoration:none; white-space:nowrap;
}
.nav-step-label:hover{color:var(--accent)}