/* ============================================================================
   MLB Playoffs 2026 — shared styles for all four pages

   ONE FILE, not a copy per page. The US Open carries its nav CSS inline on
   five pages and has a comment explaining how they drifted apart (burger 28px
   here, 26px there). Starting fresh, the cheaper fix is to not have five.

   The NAV, MAIN and FOOTER blocks below are the US Open's VERBATIM — which is
   itself the World Cup's verbatim. Do not tidy them. Every value is there to
   make the header pixel-identical across tournaments; the reasons are written
   next to the originals in 5-USOPEN2026/index.html.
   ========================================================================== */
:root{
 --navy:#0b1f3f;--navy2:#15305a;--ink:#06152c;
 --red:#e0142b;--gold:#e7c66b;--gold-d:#c9a64e;
 --line:rgba(255,255,255,.13);--mut:#9fb3d4;--soft:#6f86ab;
 --amber:#f0a23b;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 background-color:#06122a;color:#fff;min-height:100vh;-webkit-font-smoothing:antialiased;
 display:flex;flex-direction:column;}
a{color:inherit;text-decoration:none;}
button{font:inherit;}

/* ── NAV (verbatim) ──────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(7,18,36,.9);
 backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-bottom:1px solid var(--line);}
.nav-in{max-width:1160px;margin:0 auto;padding:22px 22px 22px;display:flex;flex-direction:column;align-items:center;gap:20px;min-height:126px;}
.brand{position:relative;font-size:26.62px;font-weight:900;letter-spacing:.01em;color:#fff;transform:translateY(-5px);}
.brand .d{color:var(--red);}
.brand .tm{position:absolute;left:calc(100% + 1px);top:5px;font-size:9px;font-weight:700;letter-spacing:0;color:#fff;line-height:1;}
.nav-links{display:flex;gap:8px;flex-wrap:nowrap;justify-content:space-between;width:386px;max-width:100%;}
.nav-links a{color:var(--gold);font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:9px 21px;border-radius:999px;border:1.6px solid var(--gold);transition:.14s;white-space:nowrap;}
.nav-links a:hover{background:rgba(231,198,107,.14);}
.nav-links a:not(.nav-home){transform:translateY(-8px);}
.nav-links{position:relative;}
.nav-links .nav-home{position:absolute;left:0;bottom:calc(100% + 22px);width:38px;height:38px;padding:0;
 border:0;background:transparent;cursor:pointer;font:inherit;color:var(--gold);
 display:flex;align-items:center;justify-content:center;transition:.15s;}
.nav-links .nav-home:hover{color:#fff;}
.nav-links .nav-home svg{width:28px;height:28px;fill:none;stroke:currentColor;
 stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.nav-links .nav-share{position:absolute;right:0;bottom:calc(100% + 22px);width:38px;height:38px;padding:0;
 border:0;background:transparent;color:var(--gold);cursor:pointer;font:inherit;
 display:flex;align-items:center;justify-content:center;transition:.15s;}
.nav-links .nav-share:hover{color:#fff;}
.nav-links .nav-share svg{width:24px;height:24px;fill:none;stroke:currentColor;
 stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.nav-links a.active{color:#0a1c38;background:var(--gold);border-color:var(--gold);}
.nav-links .nav-hm{padding:7px 11px;display:inline-flex;align-items:center;justify-content:center;}
.nav-links .nav-hm svg{width:19px;height:19px;fill:none;stroke:currentColor;
 stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;}
@media(max-width:560px){
 .nav-in{padding:15px 14px 15px;gap:28px;min-height:124px;}
 .brand{transform:translateY(3px);}
 .nav-links{gap:6px;width:323px;}
 .nav-links a{padding:15px 14px;font-size:12.5px;}
 .nav-links .nav-home{width:40px;height:40px;}
 .nav-links .nav-home svg{width:30px;height:30px;}
 .nav-links .nav-share{width:40px;height:40px;}
 .nav-links .nav-share svg{width:26px;height:26px;}
 .nav-links .nav-hm{padding:13px 11px;}
}
/* MLB's three labels (TEAMS, GAMES, BRACKET) are shorter than the US Open's
   (PLAYERS, MATCHES, DRAW) — BRACKET is the long one. Same row width, same
   space-between, so nothing else needs to change. */

/* ── FOOTER (verbatim) ───────────────────────────────────────────────────── */
footer{text-align:center;padding:30px 22px 36px;border-top:1px solid var(--line);
 color:var(--soft);font-size:12px;line-height:1.7;}
footer .fb{display:inline-block;position:relative;font-size:22px;font-weight:900;color:#fff;letter-spacing:.03em;line-height:1;}
footer .fb .d{color:var(--red);}
footer .fb .tm{position:absolute;left:calc(100% + 1px);top:4px;font-size:7.5px;font-weight:700;letter-spacing:0;color:#fff;line-height:1;}
footer .legal{margin-top:14px;font-size:11px;color:var(--soft);opacity:.8;}

/* ── Sub-page frame (matches.html's) ─────────────────────────────────────── */
.page main{flex:1;padding:30px 22px 44px;}
.page .wrap{max-width:820px;margin:0 auto;}
.page h1{font-size:44px;font-weight:900;letter-spacing:-1.2px;line-height:1;text-align:center;}
.sub{font-size:14px;color:var(--mut);max-width:520px;margin:11px auto 0;line-height:1.6;text-align:center;}
.archive-note{font-size:11.5px;color:var(--gold);opacity:.85;line-height:1.6;
 max-width:520px;margin:10px auto 0;text-align:center;}
@media(max-width:560px){ .page h1{font-size:32px;} .page main{padding:18px 18px 32px;} }

/* ── The banner — sample data, or a feed that is down. If there is no banner,
      it is real. Red for sample (it must not pass for real), quiet for a
      schedule fallback (true, just not live). ─────────────────────────────── */
.banner{max-width:820px;margin:0 auto 22px;padding:11px 16px;border-radius:12px;
 font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
 text-align:center;line-height:1.5;}
.banner.fake{background:rgba(224,20,43,.13);border:1px solid rgba(224,20,43,.45);color:#ffb3bd;}
.banner.note{background:rgba(231,198,107,.08);border:1px solid rgba(231,198,107,.3);color:var(--gold);
 text-transform:none;letter-spacing:.01em;font-weight:700;}
.banner[hidden]{display:none;}

/* ── Controls (matches.html's pills, verbatim) ───────────────────────────── */
.controls{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:22px;}
.ctl-cap{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);}
.ctl-grp{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.pills button{font:inherit;cursor:pointer;background:transparent;
 border:1.5px solid rgba(231,198,107,.5);border-radius:999px;color:var(--gold);
 font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
 padding:9px 15px;transition:.15s;white-space:nowrap;}
.pills button:hover{background:rgba(231,198,107,.14);border-color:var(--gold);}
.pills button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0a1c38;}
.pills button .n{opacity:.6;font-size:9.5px;margin-left:5px;}
.pills button[aria-pressed="true"] .n{opacity:.55;}

/* ── Team logos (mlb-ui.js UI.logo) ─────────────────────────────────────────
   The image sits in a fixed box, so a wide logo and a tall one take the same
   space and rows never shift. If the image fails, the box shows the team's
   three letters instead (.nologo). */
.tlogo{flex:none;display:inline-flex;align-items:center;justify-content:center;position:relative;}
.tlogo img{display:block;width:100%;height:100%;object-fit:contain;}
.tlogo b{display:none;font-size:9.5px;font-weight:900;letter-spacing:.04em;color:var(--mut);}
.tlogo.nologo img{display:none;}
.tlogo.nologo b{display:inline;}
.tchip{width:30px;height:22px;}
.tchip.nologo{width:34px;height:20px;border-radius:5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);}
.tchip.on.nologo,.win .tchip.nologo{background:var(--gold);border-color:var(--gold);}
.tchip.on.nologo b,.win .tchip.nologo b{color:#0a1c38;}

/* ── Pills for a game's state. One box for every state, colour the only
      difference (design-principles §1: states that share a slot share a
      box). Every pill carries a border; the solid ones border themselves in
      their own fill. ──────────────────────────────────────────────────────── */
.st{display:inline-block;font-size:8px;font-weight:900;letter-spacing:.11em;
 text-transform:uppercase;line-height:1;padding:3px 7px;border-radius:999px;
 border:1.2px solid transparent;white-space:nowrap;}
.st.live{background:var(--red);border-color:var(--red);color:#fff;animation:livePill 1.5s ease-out infinite;}
.st.complete{background:var(--gold);border-color:var(--gold);color:#0a1c38;}
.st.finished{background:transparent;border-color:rgba(159,179,212,.45);color:var(--soft);}
.st.upcoming{background:transparent;border:1.2px dashed rgba(159,179,212,.5);color:var(--mut);}
.st.delayed,.st.suspended{background:rgba(240,162,59,.14);border-color:rgba(240,162,59,.55);color:var(--amber);}
.st.postponed,.st.cancelled{background:transparent;border-color:rgba(159,179,212,.35);color:var(--soft);}
@keyframes livePill{
 0%  {box-shadow:0 0 0 0 rgba(224,20,43,.9);}
 60% {box-shadow:0 0 0 10px rgba(224,20,43,0);}
 100%{box-shadow:0 0 0 0 rgba(224,20,43,0);}
}
@media(prefers-reduced-motion:reduce){ .st.live{animation:none;} }

/* ── The diamond and the outs — baseball's serve lamps ───────────────────────
   Always printed while a game is in play, empty bases as outlines, so the
   row never changes shape as runners come and go (design-principles §1:
   reserve the line). */
.sit{display:inline-flex;align-items:center;gap:7px;}
.bases{width:22px;height:16px;flex:none;display:block;}
.bases rect{fill:transparent;stroke:rgba(231,198,107,.55);stroke-width:1.3;}
.bases rect.on{fill:var(--gold);stroke:var(--gold);}
.outs{display:inline-flex;gap:3px;}
.outs i{width:6px;height:6px;border-radius:50%;border:1.2px solid rgba(231,198,107,.55);display:block;}
.outs i.on{background:var(--gold);border-color:var(--gold);}
.inn{font-size:10px;font-weight:900;letter-spacing:.06em;color:#fff;white-space:nowrap;
 font-variant-numeric:tabular-nums;}