/* The bar loads its own font. It previously asked for 'Barlow Condensed', which
   is only loaded by the Draft Room; on the other pages the bar silently fell back
   to a different typeface and rendered visibly smaller there. Importing here means
   the bar no longer depends on what the host page happens to load. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&display=swap');

/* ============================================================
   FAN2FAN shared navigation: slim fixed bar + retractable tray.

   Self contained on purpose - it reads none of the host page's CSS
   variables or fonts, so it cannot drift between Seasons, the Grid,
   GTP, the Draft Room and the hub.

   EVERY typographic rule is written as ".f2fnav X" rather than "X".
   Seasons and the Draft Room both have an inline <style> block the
   browser reads AFTER this file, so at equal specificity their rules
   won and the bar genuinely rendered at a different size on those two
   pages. Leading with .f2fnav lifts these to (0,2,x), which page-level
   classes like .btn (0,1,0) cannot beat whatever the load order.
   Do not "simplify" these selectors back down.
   ============================================================ */
:root{
  --f2fnav-h:60px;
  --f2fnav-bg:rgba(6,21,39,.94);
  --f2fnav-solid:#071a30;
  --f2fnav-line:rgba(143,166,196,.22);
  --f2fnav-text:#EEF4FA;
  --f2fnav-muted:#93A9C2;
  --f2fnav-cyan:#2AC4F2;
}
[data-theme="light"]{
  --f2fnav-bg:rgba(255,255,255,.95);
  --f2fnav-solid:#ffffff;
  --f2fnav-line:rgba(92,112,137,.28);
  --f2fnav-text:#0A1424;
  --f2fnav-muted:#5C7089;
}
.f2fnav,.f2fnav-tray,.f2fnav-scrim{font-family:'Archivo',system-ui,-apple-system,sans-serif}
.f2fnav *,.f2fnav-tray *{box-sizing:border-box}

/* ---------- the bar ---------- */
.f2fnav{
  position:sticky;top:0;z-index:900;
  background:var(--f2fnav-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--f2fnav-line);
}
.f2fnav-in{
  max-width:1400px;margin:0 auto;padding:0 14px;
  min-height:var(--f2fnav-h);display:flex;align-items:center;gap:12px;
}
.f2fnav .f2fnav-brand{
  display:flex;align-items:baseline;gap:4px;flex:0 0 auto;
  text-decoration:none;font-style:italic;letter-spacing:-.5px;white-space:nowrap;
}
.f2fnav .f2fnav-brand b{font-size:21px;font-weight:900;color:var(--f2fnav-text)}
.f2fnav .f2fnav-brand i{font-size:21px;font-weight:900;font-style:italic;color:var(--f2fnav-cyan)}

/* tray toggle */
.f2fnav .f2fnav-toggle{
  flex:0 0 auto;width:40px;height:40px;padding:0;display:inline-flex;
  align-items:center;justify-content:center;border-radius:11px;cursor:pointer;
  background:transparent;border:1px solid var(--f2fnav-line);color:var(--f2fnav-text);
}
.f2fnav .f2fnav-toggle:hover{border-color:var(--f2fnav-cyan)}
.f2fnav-bars{display:flex;flex-direction:column;gap:4px;width:17px}
.f2fnav-bars i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.f2fnav-open .f2fnav-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.f2fnav-open .f2fnav-bars i:nth-child(2){opacity:0}
.f2fnav-open .f2fnav-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- relocated page controls ---------- */
/* Controls arrive carrying their own margins - the Draft Room's bell has
   margin-left:auto, which shoved it to the far side of its group. The flex gap
   handles all spacing now. min-width:0 lets the row shrink instead of forcing
   the bar wider than the viewport on a phone. */
.f2fnav-actions{
  display:flex;align-items:center;gap:7px;margin-left:auto;
  min-width:0;flex-wrap:nowrap;
}
.f2fnav .f2fnav-actions > *{flex:0 0 auto;margin:0}
.f2fnav .f2fnav-actions button,
.f2fnav .f2fnav-actions .modechip,
.f2fnav .f2fnav-actions .codechip{
  font-family:inherit;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--f2fnav-muted);background:transparent;border:1px solid var(--f2fnav-line);
  border-radius:999px;padding:9px 14px;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .14s ease,border-color .14s ease,background .14s ease;
}
.f2fnav .f2fnav-actions button:hover{color:var(--f2fnav-text);border-color:var(--f2fnav-cyan)}
.f2fnav .f2fnav-actions button.f2fnav-icon{
  width:40px;height:40px;padding:0;justify-content:center;
  font-size:17px;letter-spacing:0;border-radius:11px;position:relative;
}
.f2fnav-actions button.f2fnav-icon em{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--f2fnav-cyan);color:#04121f;border-radius:999px;
  font-style:normal;font-weight:800;font-size:10px;letter-spacing:0;
}
/* the account chip is the one control that should stand out */
.f2fnav .f2fnav-actions [data-f2f-account]{
  color:var(--f2fnav-cyan);border-color:rgba(42,196,242,.55);background:rgba(42,196,242,.10);
  font-size:13.5px;letter-spacing:.02em;padding:9px 15px;height:auto;
  max-width:230px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.f2fnav .f2fnav-actions [data-f2f-account] span{
  font-size:inherit;letter-spacing:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.f2fnav .f2fnav-actions [data-f2f-account]:hover{background:rgba(42,196,242,.2);color:var(--f2fnav-cyan)}
.f2fnav-actions .modechip{cursor:default;color:var(--f2fnav-cyan);border-color:rgba(42,196,242,.45);background:rgba(42,196,242,.08)}

/* states the pages toggle on their own buttons, kept working after relocation */
.f2fnav-actions button.f2fnav-icon.open,
.f2fnav-actions button.bellbtn.on{
  color:var(--f2fnav-cyan);border-color:var(--f2fnav-cyan);background:rgba(42,196,242,.14);
}
.f2fnav-actions button.bellbtn.blocked{color:#FF5C6C;border-color:rgba(255,92,108,.55)}
.f2fnav-actions .themewrap{position:relative;display:inline-flex}
.f2fnav-actions .codechip span{font-family:'Chivo Mono',ui-monospace,monospace;color:var(--f2fnav-cyan);letter-spacing:.14em}
.f2fnav-actions .codechip button{border:0;padding:0 0 0 4px;font-size:11px;background:none}

/* ---------- scrim ---------- */
.f2fnav-scrim{
  position:fixed;inset:0;z-index:1000;background:rgba(2,9,18,.62);
  opacity:0;transition:opacity .2s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.f2fnav-open .f2fnav-scrim{opacity:1}

/* ---------- the tray ---------- */
.f2fnav-tray{
  position:fixed;top:0;left:0;bottom:0;z-index:1001;
  width:min(310px,86vw);
  display:flex;flex-direction:column;
  background:var(--f2fnav-solid);
  border-right:1px solid var(--f2fnav-line);
  box-shadow:0 0 60px rgba(0,0,0,.45);
  transform:translateX(-102%);
  transition:transform .24s cubic-bezier(.4,0,.2,1);
  overscroll-behavior:contain;
  /* keeps the tray clear of the iOS home indicator and notch */
  padding-bottom:env(safe-area-inset-bottom);
}
.f2fnav-open .f2fnav-tray{transform:none}
@media (prefers-reduced-motion:reduce){
  .f2fnav-tray{transition:none}
  .f2fnav-scrim{transition:none}
}
.f2fnav-tray-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--f2fnav-line);
}
.f2fnav-tray .f2fnav-brand{margin-right:auto;text-decoration:none;display:flex;align-items:baseline;gap:4px;font-style:italic;letter-spacing:-.5px}
.f2fnav-tray .f2fnav-brand b{font-size:19px;font-weight:900;color:var(--f2fnav-text)}
.f2fnav-tray .f2fnav-brand i{font-size:19px;font-weight:900;font-style:italic;color:var(--f2fnav-cyan)}
.f2fnav .f2fnav-close,.f2fnav-tray .f2fnav-close{
  width:36px;height:36px;flex:0 0 auto;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid var(--f2fnav-line);color:var(--f2fnav-text);
  font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
}
.f2fnav-tray .f2fnav-close:hover{border-color:var(--f2fnav-cyan)}

.f2fnav-tray .f2fnav-links{
  display:flex;flex-direction:column;gap:4px;padding:12px;
  overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch;
}
.f2fnav-tray .f2fnav-links a{
  display:flex;align-items:center;gap:10px;
  font-family:inherit;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--f2fnav-muted);text-decoration:none;
  padding:14px 14px;border:1px solid transparent;border-radius:12px;
  transition:color .14s ease,border-color .14s ease,background .14s ease;
  min-height:48px;                    /* comfortable touch target */
}
.f2fnav-tray .f2fnav-links a:hover{color:var(--f2fnav-text);background:rgba(255,255,255,.05)}
[data-theme="light"] .f2fnav-tray .f2fnav-links a:hover{background:rgba(7,23,37,.05)}
.f2fnav-tray .f2fnav-links a.active{
  color:var(--f2fnav-cyan);border-color:rgba(42,196,242,.5);background:rgba(42,196,242,.11);
}
.f2fnav-tray-foot{
  padding:14px 16px;border-top:1px solid var(--f2fnav-line);
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--f2fnav-muted);
}

/* ---------- narrow ---------- */
@media (max-width:620px){
  :root{--f2fnav-h:56px}
  .f2fnav-in{padding:0 10px;gap:9px}
  .f2fnav .f2fnav-brand b,.f2fnav .f2fnav-brand i{font-size:17px}
  .f2fnav-actions{gap:6px}
  .f2fnav .f2fnav-actions button.f2fnav-icon{width:36px;height:36px;font-size:15px;border-radius:10px}
  .f2fnav .f2fnav-actions [data-f2f-account]{font-size:12px;padding:8px 12px;max-width:132px}
  .f2fnav .f2fnav-actions .codechip{font-size:11px;padding:8px 10px}
  .f2fnav .f2fnav-toggle{width:36px;height:36px}
}
/* Below this the wordmark and a full set of page controls genuinely cannot share
   a 320px row, so the wordmark yields - the toggle and the controls are the
   functional half, and the brand still heads the tray. */
@media (max-width:400px){
  .f2fnav .f2fnav-brand{display:none}
  .f2fnav-actions{margin-left:0;width:100%;justify-content:flex-end}
}

/* ============================================================
   LOCKED WIDTH

   The page must never move sideways. Most people play this on a phone, and a layout
   you can drag off-centre stops feeling like an app the moment it happens.

   `body{overflow-x:clip}` alone was not enough, and the reason is a detail of how
   overflow works: it is the ROOT element that governs whether the document scrolls,
   so clipping the body only clips the body's own children. Anything that escaped -
   a fixed element sized against the wrong box, one over-wide table - still dragged
   the whole document. Both are clipped here, and overscroll-behavior-x kills the
   rubber-band drag that iOS and Android add on top even when there is nothing to
   scroll to.

   `clip` rather than `hidden` on purpose: `hidden` would turn the root into a scroll
   container and break every position:sticky heading on the site. `clip` does not.
   ============================================================ */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%;overscroll-behavior-x:none}
/* Nothing may be wider than the screen. Anything that genuinely needs to be - a wide
   table, a card rail - opts back in by scrolling inside its own box, which is what
   .mgrtable-wrap and the filter rows already do. */
img,video,canvas,svg,iframe{max-width:100%}