/* GENERATED by scripts/sync_site_header_css.sh from apps/web/src/components/site/site.css — do not edit here. */
/* The design tokens the Next.js app defines in apps/web/src/app/globals.css: */
:root {
  --n50-bg: #f4f5f7;
  --n50-ink: #1f262e;
  --n50-slate: #272f38;
  --n50-slate-text: #dfe4ea;
  --n50-muted: #5a6572;
  --n50-muted-2: #8a94a0;
  --n50-muted-3: #aeb7c2;
  --n50-line: #d5d9df;
  --n50-line-2: #e3e6ea;
  --n50-line-3: #c3c9d1;
  --n50-olive: #65732a;
  --n50-olive-dark: #55611f;
  --n50-olive-tint: #eef0e0;
  --n50-olive-tint-2: #f6f7ef;
  --n50-olive-chip: #e3e8c9;
  --n50-olive-chip-text: #3d4716;
  --n50-olive-light: #a3b35b;
  --n50-oxblood: #791a17;
  --n50-oxblood-tint: #fbeceb;
  --n50-amber: #d9a441;
  --n50-amber-bg: #fdf4e3;
  --n50-amber-line: #e8d7a8;
  --n50-amber-text: #3d2e00;
  --n50-chip-bg: #e6e9ed;
  --n50-chip-text: #3b4650;
  --n50-font-body: 'Open Sans', system-ui, sans-serif;
  --n50-font-head: 'Titillium Web', sans-serif;
}
@keyframes n50-fade-in { from { opacity: 0 } to { opacity: 1 } }
/* The PHP body's old header rules must not leak into the bar: */
.n50-bar ul, .n50-bar li, .n50-ctx ul { margin: 0; padding: 0; list-style: none; }
.n50-bar a, .n50-ctx a { border: 0; }
.n50-bar details, .n50-bar summary { margin: 0; padding: 0; border: 0; background: transparent; }
.n50-bar summary, .n50-bar-dd-panel a, .n50-bar-link, .n50-bar-btn, .n50-bar-strip a, .n50-bar-menu-panel a { font-family: 'Open Sans', sans-serif; }

/* ONE shell for the whole site (docs/12-PERSONAS-AND-FLOWS.md §3): the slate top bar with the league's marketing
   links above it, a context row (season, or club + season) under it, the page, the footer. The PHP pages draw the
   same markup with app/css/site_header.css, which is GENERATED from this file by scripts/sync_site_header_css.sh —
   edit here, then run the script. Class prefix n50-bar-/n50-ctx-/n50-site-. No JavaScript needed: menus are <details>. */
.n50-site { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--n50-bg); color: var(--n50-ink); }

/* ---- top bar ---- */
.n50-bar { position: relative; background: var(--n50-slate); color: #fff; z-index: 50; }
.n50-bar-strip { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.n50-bar-strip-in { max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 34px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.n50-bar-strip-in span { margin-right: auto; color: var(--n50-muted-3); font: 600 13px var(--n50-font-body); letter-spacing: .04em; }
.n50-bar-strip a { display: inline-flex; align-items: center; height: 34px; padding: 0 10px; color: var(--n50-muted-3); font: 600 13px var(--n50-font-body); letter-spacing: .02em; text-decoration: none; border-radius: 4px; }
.n50-bar-strip a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.n50-bar-main { max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 68px; display: flex; align-items: center; gap: 6px; }
.n50-bar-logo { display: flex; align-items: center; margin-right: 10px; }
.n50-bar-logo img { width: 112px; height: auto; display: block; }
.n50-bar-nav { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.n50-bar-nav > li { position: relative; }
.n50-bar-link, .n50-bar-dd > summary { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 6px; color: var(--n50-slate-text); font: 600 16px var(--n50-font-body); text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; }
.n50-bar-dd > summary::-webkit-details-marker { display: none; }
.n50-bar-dd > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .8; }
.n50-bar-link:hover, .n50-bar-dd > summary:hover, .n50-bar-dd[open] > summary { background: rgba(255, 255, 255, .08); color: #fff; }
.n50-bar-link[aria-current="page"], .n50-bar-dd[data-current="true"] > summary { color: #fff; box-shadow: inset 0 -3px 0 var(--n50-olive-light); border-radius: 6px 6px 0 0; }
.n50-bar-dd-panel { position: absolute; top: 50px; left: 0; min-width: 240px; margin: 0; padding: 6px; list-style: none; background: #fff; color: var(--n50-ink); border-radius: 8px; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); z-index: 60; animation: n50-fade-in .12s ease-out; }
.n50-bar-dd--right .n50-bar-dd-panel { left: auto; right: 0; }
.n50-bar-dd-panel a, .n50-bar-dd-panel button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 6px; background: #fff; text-align: left; color: var(--n50-ink); font: 400 17px var(--n50-font-body); text-decoration: none; cursor: pointer; }
.n50-bar-dd-panel a:hover, .n50-bar-dd-panel button:hover:not(:disabled) { background: var(--n50-olive-tint); }
.n50-bar-dd-panel a[aria-current="page"] { background: var(--n50-olive-tint); font-weight: 600; }
.n50-bar-dd-panel small { color: var(--n50-muted); font-size: 14px; }
.n50-bar-dd-panel .hd { padding: 10px 12px 8px; border-bottom: 1px solid var(--n50-line-2); margin-bottom: 4px; }
.n50-bar-dd-panel .hd b { display: block; font-size: 16px; }
.n50-bar-dd-panel .hd span { font-size: 14px; color: var(--n50-muted); }
.n50-bar-spacer { flex: 1; }
.n50-bar-account { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.n50-bar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 6px; border: 2px solid var(--n50-olive-light); background: transparent; color: #fff; font: 600 16px var(--n50-font-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.n50-bar-btn:hover:not(:disabled) { background: var(--n50-olive); border-color: var(--n50-olive); }
.n50-bar-menu { display: none; }

/* ---- context row (what the page is about) ---- */
.n50-ctx { background: var(--n50-slate); color: #fff; border-top: 1px solid rgba(255, 255, 255, .1); }
.n50-ctx-in { max-width: 1240px; margin: 0 auto; padding: 10px 28px; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.n50-ctx-k { font-size: 13px; color: var(--n50-muted-3); letter-spacing: .06em; text-transform: uppercase; }
.n50-ctx-v { font: 600 18px var(--n50-font-body); }
.n50-ctx-season { display: flex; align-items: center; gap: 10px; }
.n50-ctx-season label { font: 600 16px var(--n50-font-body); color: var(--n50-slate-text); }
.n50-ctx-season select { height: 44px; min-width: 190px; padding: 0 40px 0 14px; border: 2px solid transparent; border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f262e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; appearance: none; font: 600 17px var(--n50-font-body); color: var(--n50-ink); }
.n50-ctx-season button { height: 44px; }

/* ---- page + footer ---- */
.n50-site-main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 28px 56px; min-width: 0; }
.n50-site-footer { border-top: 1px solid var(--n50-line); background: #fff; }
.n50-site-footer-in { max-width: 1240px; margin: 0 auto; padding: 20px 28px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; font-size: 15px; color: var(--n50-muted); }
.n50-site-footer a { color: var(--n50-muted); }
.n50-site-sponsor { display: flex; align-items: center; gap: 12px; }
.n50-site-sponsor .k { font: 700 12px/1.2 var(--n50-font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--n50-muted); }
.n50-site-sponsor a, .n50-site-sponsor > div { display: flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 8px; background: var(--n50-slate); color: #fff; font: 600 15px var(--n50-font-body); text-decoration: none; }
.n50-site-sponsor img { max-width: 140px; height: auto; display: block; }

/* ---- phones and small tablets ---- */
@media (max-width: 899px) {
  .n50-bar-strip { display: none; }
  .n50-bar-main { height: 60px; padding: 0 16px; gap: 4px; }
  .n50-bar-logo img { width: 92px; }
  .n50-bar-nav { display: none; }
  .n50-bar-menu { display: block; order: 10; }
  .n50-bar-menu > summary { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; color: #fff; cursor: pointer; list-style: none; }
  .n50-bar-menu > summary::-webkit-details-marker { display: none; }
  .n50-bar-menu[open] > summary { background: rgba(255, 255, 255, .1); }
  .n50-bar-menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--n50-slate); border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); padding: 8px 16px 18px; z-index: 60; max-height: calc(100vh - 60px); overflow: auto; }
  .n50-bar-menu-panel .g { margin: 14px 0 4px; font: 700 12px/1.2 var(--n50-font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--n50-muted-3); }
  .n50-bar-menu-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 6px 10px; border-radius: 6px; color: #fff; font: 600 17px var(--n50-font-body); text-decoration: none; }
  .n50-bar-menu-panel a:hover { background: rgba(255, 255, 255, .08); }
  .n50-bar-menu-panel a[aria-current="page"] { background: rgba(163, 179, 91, .22); }
  .n50-bar-menu-panel a small { color: var(--n50-muted-3); font-size: 14px; font-weight: 400; }
  .n50-bar-menu-panel .ext a { color: var(--n50-muted-3); font-weight: 400; font-size: 16px; min-height: 42px; }
  .n50-bar-account .n50-bar-btn { padding: 0 12px; font-size: 15px; }
  .n50-ctx-in { padding: 10px 16px; min-height: 58px; }
  .n50-ctx-season label { display: none; }
  .n50-ctx-season select { min-width: 0; width: 100%; }
  .n50-site-main { padding: 16px 16px 48px; }
  .n50-site-footer-in { padding: 18px 16px; }
}