/* Shared base styles for every NAC Pickleball page.
   Loaded before each page's inline <style>, so page-specific rules
   still override anything here. Keep page-only styles inline. */

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ===== Design tokens ===== */
:root{
  --navy:#1a2a6c;--navy-dark:#111d4e;
  --green:#4caf28;--green-dark:#3a8c1e;
  /* The main and accent colours as "r,g,b", for translucent tints written as
     rgba(var(--navy-rgb),.12). config.js sets them from the facility's
     colours, so every tint on the site follows its brand. */
  --navy-rgb:26,42,108;--green-rgb:76,175,40;
  /* DUPR's own brand blue, for anything representing DUPR rather than NAC.
     Their headline blue (#3a79e0) only reaches 4.21:1 against white text, so
     this is their next step down (brand-600) at 5.73:1, which clears WCAG AA. */
  --dupr:#2b63c2;--dupr-soft:rgba(43,99,194,.4);
  --blue:#4db8e8;--blue-dark:#2a9fd4;
  --gold:#d4a017;
  --white:#ffffff;--off-white:#f4f7fb;
  --surface:#f0f4f9;--surface2:#e3eaf4;
  --text:#1a2a6c;--muted:#5a6a9a;--border:rgba(var(--navy-rgb),0.12);
  --danger:#d93b3b;
  --font-display:'Barlow Condensed',sans-serif;
  --font-body:'Barlow',sans-serif;
  --radius:8px;--radius-lg:12px;
}

/* ===== Base ===== */
body{background:var(--off-white);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.6;min-height:100vh;-webkit-text-size-adjust:100%}

/* ===== Navigation bar ===== */
nav{background:var(--navy);padding:0 max(1.5rem,env(safe-area-inset-right)) 0 max(1.5rem,env(safe-area-inset-left));display:flex;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:100;border-bottom:3px solid var(--green)}
.nav-brand{display:flex;align-items:center;gap:12px;padding:.65rem 0;margin-right:1.2rem;text-decoration:none}
.nav-logo{height:44px;width:auto}
.nav-actions{display:flex;align-items:center;flex-wrap:wrap}
.nav-right{display:flex;align-items:center;flex-wrap:wrap;margin-left:auto}
.nav-link{padding:1rem .95rem;font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.6);text-decoration:none;border-bottom:3px solid transparent;transition:all .15s;white-space:nowrap;cursor:pointer}
.nav-link:hover{color:#fff}
.nav-link.current{color:var(--green);border-bottom-color:var(--green)}
.nav-btn{font-family:var(--font-display);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:7px 14px;border-radius:var(--radius);cursor:pointer;text-decoration:none;transition:all .12s;border:1.5px solid transparent;white-space:nowrap}
.nav-btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.nav-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.nav-btn-ghost.current{border-color:var(--green);color:#fff}
.nav-btn-solid{background:var(--green);color:#fff;border-color:var(--green)}
.nav-btn-solid:hover{background:var(--green-dark);border-color:var(--green-dark)}
.nav-greeting{color:rgba(255,255,255,.85);font-size:14px;font-weight:600;margin-right:1rem}

/* ===== Spinner / toast ===== */
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--navy);color:var(--white);padding:10px 20px;border-radius:var(--radius);font-family:var(--font-display);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.5px;transform:translateY(80px);opacity:0;transition:all .25s;z-index:9999;pointer-events:none;border-left:4px solid var(--green)}
.toast.show{transform:translateY(0);opacity:1}

/* ===== Footer: "Powered by matchmade." (admin-nav.js, injectFooter) =====
   In the platform's own colours, not the facility's: this line is
   Matchmade's, so it looks the same on every facility's site. */
.mm-foot{--mm-green:#1d5c3a;--mm-muted:#4d5f54;--mm-ball:#d6df3c;--mm-hole:#9aa31f;padding:36px 16px calc(32px + env(safe-area-inset-bottom));text-align:center;font-size:15px;color:var(--mm-muted)}
.mm-by{display:inline-flex;align-items:baseline;gap:6px;color:inherit;text-decoration:none}
/* The demo club's strip above the nav (injectDemoBar in admin-nav.js), in the
   platform's colours like the footer: it is Matchmade talking, not the club. */
.mm-demo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:8px 16px;background:#1d5c3a;color:#fff;font-size:13.5px;line-height:1.35;text-align:center}
.mm-demo b{font-weight:700}
.mm-demo-go{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mm-demo-go a{color:#1d5c3a;background:#d6df3c;border-radius:999px;padding:4px 12px;font-weight:700;text-decoration:none;white-space:nowrap}
.mm-privacy{display:block;margin-top:10px;font-size:13px;color:var(--mm-muted)}
.mm-privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.mm-by:hover .mm-word{opacity:.8}
.mm-word{font-family:'Outfit',var(--font-body);font-size:22px;letter-spacing:-.4px;line-height:1;color:var(--mm-green);display:inline-flex;align-items:baseline}
.mm-word b{font-weight:800}.mm-word span{font-weight:300}
.mm-ball{display:inline-block;width:.24em;height:.24em;border-radius:50%;background:var(--mm-ball);margin-left:.06em;position:relative}
.mm-ball::before,.mm-ball::after{content:"";position:absolute;width:.055em;height:.055em;border-radius:50%;background:var(--mm-hole)}
.mm-ball::before{left:26%;top:26%}.mm-ball::after{left:58%;top:54%}

/* ── Mobile nav ───────────────────────────────────────────────────────────
   One copy for every page. These rules used to be pasted into each page's
   inline <style>, where they drifted into ten different variants. admin-nav.js
   still enforces the critical parts at runtime; keeping them in a real
   stylesheet means they are also right before that script loads. */
@media(max-width:768px){
  nav{justify-content:flex-start;flex-wrap:nowrap}
  .nav-brand{width:auto;display:flex;justify-content:flex-start;margin:0 auto 0 0;padding:.5rem 0;flex:0 1 auto}
  .nav-logo{height:64px}
  .nav-actions:empty{display:none}
  .nav-actions,.nav-right,[data-account-nav]{display:flex;width:100%;margin-left:0;justify-content:center;flex-wrap:wrap}
  .nav-link{flex:0 1 auto;padding:.7rem .6rem;font-size:13px;text-align:center;white-space:nowrap}
  [data-account-nav] a{padding:.7rem .6rem!important;font-size:13px!important;text-align:center}
  /* league / bracket / doubles-playoff / player carry an in-page tab bar */
  .back-btn{display:none}
  .nav-tabs{width:100%;border-top:1px solid rgba(255,255,255,.08);overflow-x:auto;scrollbar-width:none}
  .nav-tabs::-webkit-scrollbar{display:none}
  .nav-tab{flex:1;padding:.7rem .5rem;font-size:13px;text-align:center;min-width:70px}
}
@media(max-width:400px){
  .nav-link,[data-account-nav] a{font-size:11px!important;padding:.6rem .4rem!important}
  .nav-tab{font-size:11px;padding:.65rem .35rem}
}


/* Deployments with NAC_FEATURES.dupr = false. config.js stamps <html> and
   every DUPR-only element disappears, so a facility with no DUPR partnership
   never sees a control it cannot use. */
.no-dupr .dupr-only { display: none !important; }

/* The DUPR-named classes already in use across the pages. Sweeping them here
   means a page that grows a new DUPR control inherits the behaviour by naming
   convention rather than needing another edit. Not .dupr-status: despite its
   name, the Me page uses it for season, registration and tournament rows too,
   and hiding it left those blank on every site with DUPR off; its one DUPR
   use there is already left out when DUPR is off. */
.no-dupr .rmr,
.no-dupr .dupr-chip,
.no-dupr .dupr-pill,
.no-dupr .dupr-mini,
.no-dupr .dupr-link,
.no-dupr .dupr-id-badge,
.no-dupr .dupr-iframe-wrap,
.no-dupr .profile-dupr,
.no-dupr .profile-dupr-note,
.no-dupr .profile-dupr-loading { display: none !important; }

/* ===== Tournament & roster cards =====
   Shared by tournament.html and tournaments.html, which had byte-identical
   copies of each of these. A page that wants a variant still overrides it:
   this file loads first. */
.divrow{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px}
.divrow .dname{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--navy)}
.roster{background:var(--surface);border-radius:var(--radius);padding:10px 14px;margin-top:8px}
.roster-list{margin:0;padding-left:20px;font-size:13px}
.roster-list li{padding:2px 0}
.rmr{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--green-dark);background:rgba(var(--green-rgb),.1);padding:1px 6px;border-radius:4px;margin-left:2px}
.rmr.none{color:var(--muted);background:var(--surface2);font-weight:600}
.pname{color:var(--navy);text-decoration:none;border-bottom:1px dashed rgba(var(--navy-rgb),.35)}
.pname:hover{border-bottom-style:solid}
.msg{border-radius:var(--radius);padding:10px 14px;font-size:13px;margin-top:.6rem}
.msg.error{background:rgba(217,59,59,.08);color:var(--danger);border:1px solid rgba(217,59,59,.25)}
.pill{font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 10px;border-radius:10px}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:var(--green-dark)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--border)}.btn-ghost:hover{background:var(--surface)}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--navy);color:#fff;padding:12px 22px;border-radius:var(--radius);font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.2);opacity:0;transition:all .25s;z-index:200;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ===== Trophy room =====
   Used by the profile page and the dashboard. */
.trophy-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;box-shadow:0 1px 3px rgba(var(--navy-rgb),.06);margin-bottom:1.5rem}
.trophy-head{display:flex;align-items:baseline;gap:10px;margin-bottom:1rem}
.trophy-head h3{font-family:var(--font-display);font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--navy)}
.trophy-count{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.trophy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.trophy{text-align:center;padding:16px 12px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:transform .12s,box-shadow .12s,border-color .12s}
.trophy:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(var(--navy-rgb),.12);border-color:rgba(var(--navy-rgb),.25)}
.trophy svg{display:block;margin:0 auto 8px}
.trophy-place{font-family:var(--font-display);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--navy)}
.trophy-title{font-size:13px;font-weight:600;color:var(--navy);margin-top:3px;line-height:1.25}
.trophy-sub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3}
.trophy-with{font-size:12px;color:var(--navy);opacity:.75;margin-top:3px;line-height:1.3;font-style:italic}
.trophy-empty{color:var(--muted);font-size:14px}
.trophy-kind{display:inline-block;margin-left:6px;font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:1px 7px;border-radius:9px;vertical-align:1px}
.trophy-kind.tournament{color:var(--navy);background:rgba(var(--navy-rgb),.08)}
.trophy-kind.league{color:var(--green-dark);background:rgba(var(--green-rgb),.12)}
.trophy-kind.undefeated{color:#8a6d00;background:rgba(212,167,0,.16)}
/* On a phone a tile has to shrink its type to fit two across, and long event
   names wrap three deep. A full-width row reads at normal size instead:
   medal on the left, everything else beside it. */
@media(max-width:600px){
  .trophy-card{padding:1rem}
  .trophy-grid{grid-template-columns:1fr;gap:8px}
  .trophy{display:flex;align-items:center;gap:14px;text-align:left;padding:11px 12px}
  .trophy:hover{transform:none}
  .trophy svg{margin:0;flex:0 0 auto;width:48px;height:48px}
  .trophy-text{flex:1;min-width:0}
  .trophy-place{font-size:11px}
  .trophy-title{font-size:15px;margin-top:1px}
  .trophy-sub,.trophy-with{font-size:12.5px}
}

/* ===== Medal strip beside a player's name =====
   Small medals on the navy profile panel; the label appears on hover, or on a
   tap, since a phone has no hover. */
.profile-medals{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.hmedal{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.hmedal:hover,.hmedal:focus-visible{transform:translateY(-2px) scale(1.06);outline:none}
.hmedal .tip{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);width:max-content;max-width:230px;background:var(--white);color:var(--navy);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-family:var(--font-body);font-size:12px;line-height:1.4;text-align:left;box-shadow:0 10px 28px rgba(10,20,60,.28);opacity:0;visibility:hidden;transition:opacity .12s;z-index:40}
.hmedal .tip b{font-family:var(--font-display);font-size:12px;letter-spacing:.4px;text-transform:uppercase}
.hmedal:hover .tip,.hmedal:focus-visible .tip,.hmedal.show .tip{opacity:1;visibility:visible}
@media(max-width:600px){ .hmedal .tip{max-width:200px} }

/* Another facility's logo is swapped in by config.js once the page has
   loaded; until then NAC's stays hidden rather than flashing up. */
.brand-pending .nav-logo,
.brand-pending [data-brand-logo]{visibility:hidden}

/* Admin-controlled feature switches (config.js, Admin > Settings > Features).
   config.js stamps these on <html> from <head>, so a switched-off feature is
   hidden before it can paint. Each hides markup carrying its -only class; nav
   links are filtered in admin-nav.js instead, so the bar does not reflow. */
.no-tournaments .tournaments-only { display: none !important; }
.no-rules .rules-only { display: none !important; }
.no-signup-membership .signup-membership-only { display: none !important; }
.no-partner-list .partner-list-only { display: none !important; }

/* ===== Inside the app (Matchmade Pickleball) =====
   config.js stamps html.in-app from <head>, along with --app-logo (the
   facility's light-background logo), --app-page (the section's name) and the
   tab bar's last height, so every page's first frame already looks right. The parts admin-nav.js builds (tabs, More sheet, offline notice)
   are styled there. */
html.in-app{--mm-tabs-h:calc(64px + env(safe-area-inset-bottom))}
/* No rubber-band bounce: iOS drags fixed elements along with an overscrolled page. */
/* (An app build with the native tab bar bounces again, for pull to refresh:
   its bar is not part of the page, so nothing gets dragged.) */
html.in-app:not(.native-tabs),html.in-app:not(.native-tabs) body{overscroll-behavior:none}
/* Toasts sit above the tab bar, not under it. */
html.in-app .toast,html.in-app #toast{bottom:calc(var(--mm-tabs-h) + 14px)!important}
html.in-app body{padding-bottom:var(--mm-tabs-h);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
/* The top bar: frosted glass, sticky, running up under the status bar
   (contentInset never), carrying only the logo and the section's name --
   the tabs replace MENU, and nothing else can push the logo off centre. */
html.in-app nav{display:flex!important;background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid rgba(0,0,0,.12)!important;padding:env(safe-area-inset-top) 16px 0!important;justify-content:center!important;flex-wrap:nowrap!important;
  position:sticky!important;top:0;z-index:200}
html.in-app nav > :not(.nav-brand):not(.app-back),html.in-app .nav-panel{display:none!important}
html.in-app nav .nav-brand{width:auto!important;flex:0 1 auto;margin:0 auto!important;justify-content:center!important;align-items:center;gap:10px;padding:.5rem 0!important}
html.in-app nav .nav-logo{height:52px!important;width:auto;content:var(--app-logo);visibility:visible!important}
html.in-app nav .nav-brand::after{content:var(--app-page,none);padding-left:10px;border-left:1px solid var(--border,#d7dbe6);line-height:26px;
  font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);white-space:nowrap}
/* A page heading that only repeats the name in the bar. */
html.in-app .app-dup{display:none}

/* Sentence case in the app. The site sets every button, tab, pill and small
   label in condensed capitals, which reads as shouting in a native frame;
   inside the app those drop to the case they are written in, and the few
   written in lower case ("pool play") gain a capital. Page headings, card
   titles, team names and table headers keep their capitals. */
html.in-app :is(button,.btn,.league-tab,.div-tab,.auth-tab,.range-btn,.week-btn,.score-btn,.fmt-switch button,.bk-toggle button,
  .nm-cal,.head-btn,.l-go,.nav-link-btn,.back-link,
  .pill,.l-chip,.t-badge,.dupr-chip,.dupr-pill,.mine-tag,.mine-more,.playoff-badge,.winner-badge,.badge-linked,.fmt-chip,.spots,.court-badge,.bracket-court,
  .nm-label,.section-label,.signup-kicker,.form-group label,.stat-label,.rating-label,.career-label,.info-row .lbl,.game-label,.match-num,.match-court,
  .sched-wk,.sched-court,.past-head,.roster-head,.day-today,.trophy-kind,.trophy-place,.trophy-count,.toast,
  .loading,.loading-overlay,.rating-loading,.profile-dupr-loading){text-transform:none!important;letter-spacing:.2px!important}
html.in-app .pill{display:inline-block}
html.in-app .pill::first-letter{text-transform:uppercase}

/* Press feedback in the app: anything tappable dims the moment it is
   touched, and cards give slightly, as native rows and cards do. (iOS only
   shows :active on touch when the page listens for touches; admin-nav.js
   adds that listener in the app.) */
html.in-app :is(a,button,[onclick],[role=button]){-webkit-tap-highlight-color:transparent}
html.in-app :is(a,button,[onclick],[role=button]):active{opacity:.55}
html.in-app :is(a,[onclick])[class*="card"]{transition:transform .12s ease,opacity .12s ease}
html.in-app :is(a,[onclick])[class*="card"]:active{opacity:.85;transform:scale(.98)}

/* The footer ("Powered by matchmade", Privacy) is website furniture; in the
   app both sit at the foot of the More sheet instead (admin-nav.js). */
html.in-app .mm-foot{display:none}

/* Standings as lists, in the app (league.html renderStandingsList,
   tournament.html standingsList, doubles-playoff.html render, and a
   player's match history): one row per team in place of a table that
   scrolls sideways, keeping the website table's colour -- a navy header
   strip, the playoff places tinted with a green edge, DUPR in its blue, and
   the top three ranks in gold, silver and bronze. */
.st-list{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 1px 4px rgba(var(--navy-rgb),.06)}
.st-head{display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:12px;padding:9px 14px;background:var(--navy);color:rgba(255,255,255,.75);
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.st-head span:last-child{text-align:right}
.st-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:12px 14px;border-top:1px solid var(--border);color:inherit;text-decoration:none}
.st-row:first-child,.st-head + .st-row{border-top:none}
.st-row.st-adv{background:rgba(var(--green-rgb),.05);box-shadow:inset 3px 0 0 var(--green)}
.st-rank{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--muted);text-align:center}
.st-rank.rank-1{color:#d4a017}.st-rank.rank-2{color:#8a8a8a}.st-rank.rank-3{color:#a0522d}
.st-name{font-weight:600;font-size:15px;color:var(--navy);line-height:1.3;overflow-wrap:anywhere}
.st-name a{color:inherit;text-decoration:none}
.st-sub{font-size:13px;color:var(--muted);margin-top:2px}
.st-sub b{color:var(--green-dark);font-weight:700}
.st-dupr{color:var(--dupr,#2b63c2);font-weight:600}
.st-rec{text-align:right;font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy);white-space:nowrap;line-height:1.2}
.st-diff{display:block;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--muted)}
.st-diff.pos{color:var(--green-dark)}.st-diff.neg{color:var(--danger)}
.st-cut{display:flex;align-items:center;gap:10px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--green-dark);background:var(--white)}
.st-cut::before,.st-cut::after{content:"";flex:1;border-top:1px dashed rgba(var(--green-rgb),.5)}
/* league.html carries both: the table on the website, the list in the app --
   each hidden from the start, so neither shows the other's look first. */
html:not(.in-app) #standings-list{display:none}
html.in-app #standings-table-wrap{display:none!important}

/* Loading placeholders: anything marked mm-skel (the pages' "Loading..."
   blocks) is empty space, tall enough to keep the footer out of the way,
   while one matchmade mark with its ball bouncing sits in the middle of the
   screen (.mm-loading, added and removed by config.js), on the website and in
   the app alike. It fades in after a quarter of a second, so a load that is
   over at once shows nothing at all. mm-skel-here, for a placeholder inside
   a page already drawn, shows a small mark in its own place instead. */
.mm-skel{display:flex!important;align-items:center;justify-content:center;min-height:60vh;margin:0;padding:0!important;
  border:none!important;background:none!important;box-shadow:none!important;
  font-size:0!important;line-height:0!important;color:transparent!important;text-align:center}
.mm-skel > :not(.mm-loader){display:none!important}
.mm-skel.mm-skel-here{min-height:110px}
.mm-loading{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;pointer-events:none}
.matches-grid > .mm-skel,.leagues-grid > .mm-skel{grid-column:1/-1}
.mm-loader{--mm-green:#1d5c3a;--mm-ball:#d6df3c;--mm-hole:#9aa31f;opacity:0;animation:mm-loader-in .3s .25s forwards}
.mm-loader .mm-word{font-size:32px;letter-spacing:-.6px}
.mm-loader .mm-ball-wrap{position:relative;display:inline-block}
.mm-loader .mm-ball{animation:mm-bounce .9s cubic-bezier(.45,0,.55,1) infinite;transform-origin:50% 100%}
.mm-loader .mm-ball-shadow{position:absolute;left:.06em;bottom:-.1em;width:.24em;height:.06em;border-radius:50%;background:rgba(22,38,29,.18);
  animation:mm-shadow .9s cubic-bezier(.45,0,.55,1) infinite}
@keyframes mm-loader-in{to{opacity:1}}
@keyframes mm-bounce{
  0%,100%{transform:translateY(0) scale(1.18,.82)}
  12%{transform:translateY(-.08em) scale(.94,1.06)}
  50%{transform:translateY(-.7em) scale(1,1)}
  88%{transform:translateY(-.06em) scale(.96,1.04)}
}
@keyframes mm-shadow{0%,100%{transform:scale(1.1);opacity:1}50%{transform:scale(.55);opacity:.4}}
@media (prefers-reduced-motion: reduce){ .mm-loader .mm-ball,.mm-loader .mm-ball-shadow{animation:none} }

/* Tap targets in the app: Apple asks for 44pt. The small controls -- tab
   pills, toggles, week and score buttons, the rules' section chips, modal
   buttons -- keep their look and gain an invisible touch area around them,
   as native controls do, so a finger landing just off one still counts. */
html.in-app :is(.league-tab,.div-tab,.auth-tab,.range-btn,.week-btn,.score-btn,.fmt-switch button,.bk-toggle button,.toc a,
  .nm-cal,.head-btn,.l-go,.btn,.mine-more,.back-link){position:relative}
html.in-app :is(.league-tab,.div-tab,.auth-tab,.range-btn,.week-btn,.score-btn,.fmt-switch button,.bk-toggle button,.toc a,
  .nm-cal,.head-btn,.l-go,.btn,.mine-more,.back-link)::after{content:"";position:absolute;inset:-7px -4px}
/* Text boxes: three points taller, to the full 44. */
html.in-app :is(input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input:not([type]),select){min-height:44px}
/* The one small text link that is a control in its own right. */
html.in-app a[onclick*="showForgot"]{display:inline-block;padding:12px 0}

/* Section headings, shared: the green bar, a 28px heading (22px on a phone)
   and its details beneath. League, playoff and tournament pages carry the
   same rules inline; the list pages (Leagues, Tournaments) use these. */
.section-header{margin-bottom:1.25rem;display:flex;align-items:flex-end;gap:16px}
.section-header.later{margin-top:2.25rem}
.section-header[hidden]{display:none}
.section-header-text h2{font-family:var(--font-display);font-size:28px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--navy)}
.section-header-text p{color:var(--muted);font-size:14px;margin-top:2px}
.section-accent{width:4px;height:40px;background:var(--green);border-radius:2px;flex-shrink:0}
@media(max-width:768px){ .section-header-text h2{font-size:22px} }