/* Shared navigation for every league page. */
.ff-site-header{position:sticky;top:0;z-index:100;margin:0;padding:0;border:0;border-bottom:1px solid #28364b;background:#08111f;color:#f8fafc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.4}
.ff-site-header *{box-sizing:border-box}
.ff-site-header .ff-nav{width:min(1160px,calc(100% - 32px));min-height:80px;margin:0 auto;padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border:0}
.ff-site-header .ff-brand{display:flex;align-items:center;gap:12px;min-width:0;color:#f8fafc;text-decoration:none;font-size:16px;font-weight:850;letter-spacing:-.02em}
.ff-site-header .ff-mark{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:2px solid #f5b830;border-radius:50%;color:#f5b830;font-size:19px;font-weight:900}
.ff-site-header .ff-brand-text{display:block;min-width:0}
.ff-site-header .ff-page{display:block;margin-top:3px;font-size:12px;font-weight:500;letter-spacing:.02em;color:#9fb0c3}
.ff-site-header .ff-links{display:flex;align-items:center;gap:4px;flex-shrink:0;margin:0;padding:0}
.ff-site-header .ff-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 13px;border:1px solid transparent;border-radius:10px;color:#cbd5e1;font-size:14px;font-weight:750;line-height:1.3;text-decoration:none;white-space:nowrap;background:transparent}
.ff-site-header .ff-links a:hover{background:#142238;color:#fff}
.ff-site-header .ff-links a.ff-active{color:#f5b830;background:rgba(245,184,48,.09);border-color:rgba(245,184,48,.16)}
.ff-site-header a:focus-visible{outline:2px solid #f5b830;outline-offset:3px}
@media(max-width:760px){.ff-site-header .ff-nav{flex-direction:column;align-items:stretch;gap:10px;padding:12px 0 10px}.ff-site-header .ff-brand{font-size:15px}.ff-site-header .ff-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.ff-site-header .ff-links a{padding:9px 4px;font-size:12px;min-height:44px}.ff-site-header .ff-page{font-size:11px}.ff-site-header .ff-mark{flex-basis:38px;width:38px;height:38px;font-size:18px}}

@media(max-width:480px){.ff-site-header .ff-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ff-site-header .ff-links a{min-width:0;padding:10px 12px;font-size:14px;white-space:normal;text-align:center;border-color:#28364b;background:#101c2e}.ff-site-header .ff-links a.ff-active{border-color:rgba(245,184,48,.3);background:rgba(245,184,48,.09)}}

/* Stadium atmosphere: strong photography at the top, quiet field lines behind the data. */
body{
  background-color:#08111f;
  background-image:
    radial-gradient(ellipse at 82% 5%,rgba(245,184,48,.13),transparent 38rem),
    repeating-linear-gradient(90deg,transparent 0,transparent 7.9rem,rgba(205,221,234,.018) 8rem,transparent 8.1rem,transparent 16rem),
    linear-gradient(155deg,#08111f 0%,#10243a 55%,#08111f 100%);
  background-attachment:scroll;
}
/* Page styles load after this sheet; the extra specificity keeps the quiet field lines sitewide. */
html body{
  background-color:#08111f;
  background-image:
    radial-gradient(ellipse at 82% 5%,rgba(245,184,48,.10),transparent 38rem),
    repeating-linear-gradient(90deg,transparent 0,transparent 7.9rem,rgba(205,221,234,.014) 8rem,transparent 8.1rem,transparent 16rem),
    linear-gradient(155deg,#08111f 0%,#10243a 55%,#08111f 100%);
}
.ff-site-header{background:rgba(5,13,25,.93);backdrop-filter:blur(16px)}
main.shell>.hero,
main.shell>.heading,
main.shell>.topline,
main.shell>#league:first-child>.section-head{
  background-image:linear-gradient(100deg,rgba(4,12,24,.96) 0%,rgba(5,15,29,.87) 42%,rgba(7,19,35,.40) 100%),url('/images/stadium-lights-2026.webp');
  background-size:cover;
  background-position:center 54%;
  background-repeat:no-repeat;
  border:1px solid rgba(245,184,48,.25);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  color:#f8fafc;
}
main.shell>.hero{grid-template-columns:minmax(0,1fr) 220px;gap:26px;align-items:center;min-height:320px;padding:clamp(25px,4vw,44px)}
main.shell>.hero .championship-ring{width:min(100%,220px)}
main.shell>.hero .ring-photo{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
main.shell>.hero .ring-photo img{border-radius:0;filter:drop-shadow(0 13px 17px rgba(0,0,0,.6))}
main.shell>.heading,main.shell>.topline,main.shell>#league:first-child>.section-head{padding:clamp(22px,3vw,34px);min-height:174px}
main.shell>.topline,main.shell>#league:first-child>.section-head{background-position:center 85%}
main.shell>.heading{align-items:center}
main.shell>.topline{align-items:center}
main.shell>#league:first-child>.section-head{margin-bottom:22px}
main.shell>.hero h1,main.shell>.heading h1,main.shell>.topline h1,main.shell>#league:first-child>.section-head h1{text-shadow:0 2px 18px rgba(0,0,0,.45)}
main.shell>.hero .hero-copy,main.shell>.heading .muted,main.shell>.topline .lede,main.shell>#league:first-child>.section-head p{color:#d8e2ee}
main.shell>.topline .week-select label{color:#e5ecf4}
main.shell>.topline .week-select select{background:#071523}
main.shell>.heading .selector{padding:12px 14px;border-radius:14px;background:rgba(4,12,24,.72);border:1px solid rgba(255,255,255,.15)}
/* Quiet navy cards keep the stadium image in the page heading. */
#league .grid .tile{background:#102035;border-color:rgba(191,211,229,.17)}
#league .grid .tile.featured{border-color:rgba(245,184,48,.26)}
#league .grid .tile:hover,#league .grid .tile:focus-visible{background:#172b43;border-color:rgba(245,184,48,.55)}
#league .grid .tile p{color:#bacadd}
main.shell>.ff-page-banner,
main.shell>.title-row,
main>.ff-page-banner,
.wrap>.ff-tool-banner{
  background-image:linear-gradient(100deg,rgba(4,12,24,.97) 0%,rgba(5,15,29,.88) 48%,rgba(7,19,35,.48) 100%),url('/images/stadium-lights-2026.webp');
  background-size:cover;
  background-position:center 83%;
  background-repeat:no-repeat;
  border:1px solid rgba(245,184,48,.25);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05);
  color:#f8fafc;
  padding:clamp(23px,3vw,36px);
  min-height:190px;
  margin-bottom:26px;
}
main.shell>.ff-page-banner .lede,
main.shell>.ff-page-banner .intro,
main.shell>.title-row .lede,
main>.ff-page-banner .lede,
.wrap>.ff-tool-banner .muted{color:#d8e2ee}
main.shell>.ff-page-banner .lede,
main.shell>.ff-page-banner .intro{margin-bottom:0}
main.shell>.title-row{align-items:center}
main.shell>.title-row .period-control{position:relative;z-index:1}
main>.ff-page-banner{min-height:0}
.wrap>.ff-tool-banner{min-height:0;margin:0 0 15px}
.wrap>.ff-tool-banner h1{margin:8px 0}
.wrap>.ff-tool-banner p:last-child{margin-bottom:0}
/* One type scale and visible keyboard focus across the separate league tools. */
main.shell>.ff-page-banner h1,main.shell>.title-row h1,main.shell>.topline h1,
main.shell>.heading h1{font-size:clamp(34px,5vw,56px);line-height:1.06;letter-spacing:-.045em}
main>.ff-page-banner h1{font-size:clamp(32px,4.5vw,48px);line-height:1.08}
.wrap>.ff-tool-banner h1{font-size:clamp(32px,4vw,46px);line-height:1.08;letter-spacing:-.04em}
html body :is(a,button,select,input,summary,[role="tab"]):focus-visible{
  outline:3px solid #f5b830;
  outline-offset:3px;
}
html body :is(button,select,input){font-family:inherit}
html body :is(button,select):disabled{opacity:.6;cursor:not-allowed}
html body .meta,html body .source,html body footer{color:#acbdd0}
/* The same short, accessible loading pattern precedes each data view. */
main.shell #app.loading,main #commissionerArchive.loading{
  padding:22px;
  min-height:150px;
  text-align:left;
  color:#d8e2ee;
  background:#14263c;
  border:1px solid rgba(205,221,234,.16);
  border-radius:16px;
}
main.shell #app.loading::after,main #commissionerArchive.loading::after{
  content:"";
  display:block;
  width:min(100%,660px);
  height:64px;
  margin-top:18px;
  background:
    linear-gradient(90deg,rgba(205,221,234,.18),rgba(205,221,234,.18)) 0 0/72% 12px no-repeat,
    linear-gradient(90deg,rgba(205,221,234,.12),rgba(205,221,234,.12)) 0 26px/100% 12px no-repeat,
    linear-gradient(90deg,rgba(205,221,234,.09),rgba(205,221,234,.09)) 0 52px/55% 12px no-repeat;
  border-radius:5px;
}
#commissionerNote.loading{min-height:230px}
#commissionerNote.loading #commissionerLatest::before{content:"Loading the latest note…";display:block;margin:17px 0;color:#d8e2ee;font-size:14px}
#commissionerNote.loading #commissionerLatest::after{
  content:"";display:block;width:min(100%,600px);height:64px;margin-top:20px;
  background:
    linear-gradient(90deg,rgba(205,221,234,.16),rgba(205,221,234,.16)) 0 0/65% 12px no-repeat,
    linear-gradient(90deg,rgba(205,221,234,.11),rgba(205,221,234,.11)) 0 26px/100% 12px no-repeat,
    linear-gradient(90deg,rgba(205,221,234,.08),rgba(205,221,234,.08)) 0 52px/80% 12px no-repeat;
}
@media(max-width:700px){
 main.shell>.ff-page-banner,main.shell>.title-row,main>.ff-page-banner,.wrap>.ff-tool-banner{min-height:0;padding:23px 20px;background-position:58% 80%}
 main.shell>.ff-page-banner h1,main.shell>.title-row h1,main.shell>.topline h1,main.shell>.heading h1{font-size:clamp(30px,8vw,42px)}
 .wrap>.ff-tool-banner h1{font-size:clamp(28px,7vw,36px)}
 main.shell .table-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 main.shell .table-wrap::before{content:"Swipe sideways for more columns →";display:block;position:sticky;left:0;width:max-content;max-width:100%;padding:9px 12px;color:#d8e2ee;font-size:12px;font-weight:750;letter-spacing:.01em;background:#172a42;border-radius:0 0 8px 0}
 .wrap .analyzer-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .wrap .analyzer-tabs button{min-width:0;min-height:54px;padding:8px 5px;font-size:13px;line-height:1.2;white-space:normal}
 main.shell>.hero{grid-template-columns:minmax(0,1fr);min-height:0;gap:18px;padding:25px 22px;background-position:57% center}
 main.shell>.hero .championship-ring{width:125px;justify-self:end}
 main.shell>.heading,main.shell>.topline,main.shell>#league:first-child>.section-head{min-height:0;padding:23px 20px;background-position:58% center}
 main.shell>.topline,main.shell>#league:first-child>.section-head{background-position:58% 82%}
 main.shell>.heading{align-items:stretch}
 main.shell>.heading .selector{width:100%;min-width:0}
}
@media(prefers-reduced-transparency:reduce){.ff-site-header{background:#08111f}}

/* A short header and four persistent destinations on phone-sized screens. */
.ff-site-header .ff-settings-shortcut{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid #35445b;border-radius:11px;color:#e2e8f0;text-decoration:none;font-size:24px;line-height:1}
.ff-site-header .ff-settings-shortcut.ff-active{color:#f5b830;border-color:#f5b83080;background:#f5b8301a}
.ff-site-header .ff-links a[href="/settings/"]{display:none}
@media(max-width:760px){
 html body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
 .ff-site-header{backdrop-filter:none}
 .ff-site-header .ff-nav{min-height:60px;flex-direction:row;align-items:center;gap:10px;padding:8px 0}
 .ff-site-header .ff-brand{flex:1;min-width:0}
 .ff-site-header .ff-brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ff-site-header .ff-settings-shortcut{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid #35445b;border-radius:11px;color:#e2e8f0;text-decoration:none;font-size:24px;line-height:1}
 .ff-site-header .ff-settings-shortcut.ff-active{color:#f5b830;border-color:#f5b83080;background:#f5b8301a}
 .ff-site-header .ff-links{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:101;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0;padding:7px max(8px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));border-top:1px solid #53677b;background:rgba(5,13,25,.98);box-shadow:0 -9px 28px #0008;backdrop-filter:blur(16px)}
 /* Defined buttons stay distinct against the dark bar and the page beneath it. */
 .ff-site-header .ff-links a{display:inline-flex;min-width:0;min-height:52px;padding:8px 3px;border:1px solid #617b93;border-radius:11px;background:linear-gradient(160deg,#29465e,#162d43);box-shadow:0 3px 8px #0005,inset 0 1px #ffffff24;color:#f0f5fa;font-size:12px;font-weight:850;text-align:center;white-space:normal}
 .ff-site-header .ff-links a:hover,.ff-site-header .ff-links a:focus-visible{border-color:#f5b830;background:linear-gradient(160deg,#345570,#1d3951);color:#fff}
 .ff-site-header .ff-links a.ff-game-day{display:inline-flex}
 .ff-site-header .ff-links a[href="/settings/"]{display:none}
 .ff-site-header .ff-links a.ff-active,.ff-site-header .ff-links a.ff-active:hover{color:#142235;border-color:#ffe09a;background:linear-gradient(160deg,#ffe09a,#f5b830);box-shadow:0 3px 12px #0007,inset 0 1px #fff8}
 .ff-app-update-notice{bottom:calc(78px + env(safe-area-inset-bottom,0px))!important}
}