/* Catch My Team: shared styles.
   Navy ink on cool paper, cobalt for the brand and links, scarf yellow only for what is "on air"
   (the logo ball, the next-match ticket). Big Shoulders Display for team names and kickoff times;
   Atkinson Hyperlegible for everything people read. */
@font-face{font-family:"Big Shoulders Display";font-weight:700;font-display:swap;src:url(/fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

:root{
  --ink:#121a3d; --paper:#f2f4f8; --card:#ffffff; --muted:#5a6380; --line:#d9deea;
  --cobalt:#2448f0; --cobalt-ink:#ffffff; --yellow:#ffd23f; --yellow-ink:#121a3d;
  --green:#0a6a48; --green-soft:#ddf2e8; --red:#b0291a; --red-soft:#fbe4e0;
  --amber:#8a5a00; --amber-soft:#fdf0cf; --blue-soft:#e3e8fe;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:12px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#eef1fb; --paper:#0d1330; --card:#161e44; --muted:#a3abc8; --line:#2b3568;
    --cobalt:#7d93ff; --cobalt-ink:#0d1330; --green:#5cd6a0; --green-soft:#12352a; --red:#ff8a7a; --red-soft:#3d1a18;
    --amber:#f2c35b; --amber-soft:#3a2d0c; --blue-soft:#1d2858;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5}
a{color:var(--cobalt)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header and footer */
.top{max-width:1180px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none}
.brand img{width:40px;height:40px;display:block}
.brand span{font-family:var(--display);font-weight:800;font-size:1.55rem;letter-spacing:.02em;line-height:1;text-transform:uppercase}
.top nav{margin-left:auto;display:flex;gap:18px;font-size:.95rem}
.top nav a{color:var(--ink);text-decoration:none}
.top nav a:hover{text-decoration:underline}
.foot{max-width:1180px;margin:0 auto;padding:32px 20px 40px;color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{color:var(--muted)}

/* Team search (home hero and the compact one on team pages) */
.search{position:relative}
.search input{width:100%;font:inherit;color:var(--ink);background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);padding:.35em .5em;appearance:none}
.search input::placeholder{color:var(--muted);opacity:1}
.search input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px var(--blue-soft)}
.search ul{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;z-index:5;background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:0 14px 30px rgba(18,26,61,.18)}
.search li{padding:10px 12px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.search li b{font-family:var(--display);font-weight:800;font-size:1.45rem;text-transform:uppercase;letter-spacing:.01em;line-height:1.1}
.search li small{color:var(--muted);font-size:.85rem;text-align:right}
.search li[aria-selected="true"]{background:var(--cobalt);color:var(--cobalt-ink)}
.search li[aria-selected="true"] small{color:inherit}
.search li.none{cursor:default;color:var(--muted)}

/* Buttons and form bits */
.btn{font:inherit;font-weight:700;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:6px 16px;cursor:pointer}
.btn:disabled{opacity:.4;cursor:default}
.btn.solid{background:var(--cobalt);border-color:var(--cobalt);color:var(--cobalt-ink)}
select,input[type=email]{font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
label.f{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.95rem}
.note{color:var(--muted);font-size:.9rem;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Match rows: team pages, league pages */
.day{margin-top:14px}
.dayname{font-weight:700;padding:6px 0;border-bottom:3px solid var(--ink)}
.match{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.time{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}
.time small{display:block;font-family:var(--body);font-weight:400;font-size:.8rem;color:var(--muted);margin-top:4px}
.teams{font-weight:700;font-size:1.08rem}
.meta{color:var(--muted);font-size:.93rem}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-size:.82rem;font-weight:700;border-radius:6px;padding:2px 8px;background:var(--paper);border:1px solid var(--line)}
.tag.good{background:var(--green-soft);color:var(--green);border-color:transparent}
.tag.need{background:var(--red-soft);color:var(--red);border-color:transparent}
.tag.warn{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.empty-week{color:var(--muted);padding:18px 0}
.wrap{max-width:1180px;margin:0 auto;padding:4px 20px 0}
.demo{display:inline-block;margin:6px 0 14px;font-size:.85rem;color:var(--amber);background:var(--amber-soft);border-radius:999px;padding:3px 12px}
@media (max-width:560px){.match{grid-template-columns:92px 1fr;gap:10px}.time{font-size:1.4rem}}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
