/* Southwest SC palette, taken from the club crest and southwestsc.org:
   #40b1ed light blue, #ffd700 gold, #1a1a1a ink, #fdf8f5 warm white. */
:root{
 color-scheme:light;
 --brand:#40b1ed;--brand-soft:#7fcbf2;--brand-tint:#e4f3fc;--brand-wash:#f2f9fe;
 --brand-600:#1f93d4;--brand-700:#0f74ad;--brand-900:#0c3f60;--deep:#08324e;
 --gold:#c8961e;--gold-bright:#ffd700;
 --bg:#eef7fd;--surface:#fff;--ink:#10273a;--muted:#4f6c81;--line:#d3e7f4;--line-soft:#e6f2fa;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
[hidden]{display:none!important}
img{max-width:100%}
button,select{font:inherit;color:inherit;touch-action:manipulation}
button{border:0;background:none;cursor:pointer}
button:disabled{cursor:default;opacity:.45}
a{color:inherit;text-decoration:none}
button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--brand-600);outline-offset:3px;border-radius:4px}
h1,h2,h3,p{margin:0}
h2{font-size:1.3rem;letter-spacing:-.03em;line-height:1.3}
h3{font-size:.95rem;font-weight:600}
.wrap{max-width:1280px;margin:auto;padding:0 40px}
#content{padding-top:22px}

/* Header carries the league and the bracket, so the page body can start at the content. */
header{background:linear-gradient(120deg,var(--brand-900),#14608f 60%,var(--brand-600));color:#fff}
.header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.header-brand{display:flex;align-items:center;gap:13px;min-width:0}
.header-brand img{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.header-titles{display:flex;flex-direction:column;gap:3px;min-width:0}
.header-league{font-size:.875rem;font-weight:650;letter-spacing:.08em}
.header-league small{font-weight:400;letter-spacing:0;color:#cfeaf9;margin-left:10px;font-size:.8125rem}
.header-sub{font-size:.8125rem;font-weight:400;color:#bfe3f7;line-height:1.35}
.header-inner>a{font-weight:400;color:#d6eefb;font-size:.875rem;display:inline-flex;align-items:center;min-height:44px;flex-shrink:0}

/* Next fixture card, at the head of the calendar: when, who, where, home or away. */
.next-fixture{display:flex;align-items:center;gap:22px;padding:16px 22px;margin-bottom:20px;border-radius:14px;color:var(--deep);background:linear-gradient(120deg,var(--brand-soft),var(--brand));box-shadow:0 1px 2px rgba(12,63,96,.18)}
.next-fixture small{display:block;font-size:.6875rem;letter-spacing:.08em;color:#0a3c5d;margin-bottom:3px;font-weight:700;text-transform:uppercase}
.fixture-when{display:flex;flex-direction:column;min-width:0;flex-shrink:0}
.fixture-when strong{font-size:1.15rem;letter-spacing:-.02em;line-height:1.25}
.fixture-time{font-size:.875rem;font-weight:650;color:#0a3c5d}
.fixture-who{display:flex;align-items:center;gap:12px;min-width:0;padding-left:22px;border-left:1px solid rgba(8,50,78,.25)}
.fixture-who .team-mark{width:40px;height:42px}
.fixture-opponent{display:flex;flex-direction:column;min-width:0}
.fixture-versus{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0a3c5d;opacity:.7}
.fixture-who .club{font-size:1rem;font-weight:700;line-height:1.3}
.fixture-where{display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin-left:auto;padding-left:18px;text-align:right;min-width:0}
.fixture-side{font-size:.6875rem;font-weight:750;letter-spacing:.08em;background:rgba(255,255,255,.75);border-radius:5px;padding:4px 9px}
.fixture-venue{font-size:.8125rem;color:#0a3c5d;line-height:1.4}

/* View navigation */
.navigation{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);margin:24px 0}
nav{display:flex;gap:27px}
nav button{font-size:.875rem;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;padding:14px 0 16px;min-height:44px}
nav button[aria-pressed=true]{color:var(--brand-700);border-color:var(--brand)}
.sync{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--brand-700);white-space:nowrap}
.sync button{width:44px;height:44px;font-size:1.4rem;color:var(--brand-700);border-radius:8px}
.sync .stale{color:#93650f}

/* Panels */
.overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;margin-top:24px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 24px}
.section-heading small{display:block;font-size:.75rem;letter-spacing:.08em;color:var(--brand-700);margin-bottom:5px;text-transform:uppercase;font-weight:650}
.count{font-size:.75rem;color:var(--brand-700);background:var(--brand-tint);border-radius:6px;padding:4px 8px;white-space:nowrap}

/* Standings table */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.standings-table{min-width:700px}
table{border-collapse:collapse;width:100%;font-size:.875rem;font-variant-numeric:tabular-nums}
th{text-transform:uppercase;letter-spacing:.02em;color:var(--brand-700);background:var(--brand-wash);font-size:.75rem;font-weight:600;padding:10px 7px}
td{padding:12px 7px;text-align:center;border-bottom:1px solid var(--line-soft);height:70px}
th:first-child{text-align:left}
.rank{font-size:.8rem;color:var(--muted);min-width:14px;text-align:right;flex-shrink:0}
.rank-head{display:inline-block;min-width:14px;margin-right:11px;text-align:right}
.team-rank{display:flex;align-items:center;gap:11px;min-width:0}
th:first-child,td:first-child{padding-left:22px}
th:last-child,td:last-child{padding-right:22px}
tr:last-child td{border-bottom:0}
.team-cell{text-align:left}
.positive{color:#1c7a4a}
.points-cell{width:54px}
.points{display:inline-grid;place-items:center;min-width:30px;height:30px;font-weight:750;border-radius:6px;font-size:.9375rem}
tr:first-child .points{background:var(--brand-tint);color:var(--brand-900);box-shadow:inset 0 0 0 1px var(--brand-soft)}
.selected-team{background:var(--brand-tint);box-shadow:inset 3px 0 var(--brand)}
.negative{color:#a24f4c}
.no-data{color:var(--muted);opacity:.6}
.streak{display:inline-grid;place-items:center;min-width:32px;height:24px;padding:0 6px;border-radius:5px;font-size:.75rem;font-weight:700}

/* Club crests: the logo covers its initials, which stay as the fallback. */
.team-label{display:flex;align-items:center;gap:11px;min-width:0}
.team-mark{position:relative;width:36px;height:38px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:.75rem;font-weight:750;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.team-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3px;background:var(--surface)}
.blue{color:#1d63b5;background:#e9f0fb}.cyan{color:#1c6f83;background:#e4f2f5}.navy{color:#2a4674;background:#eaecf4}
.red{color:#9c4145;background:#f5ebeb}.gold{color:#8a6410;background:#f7f0da}.purple{color:#6b4b8a;background:#f0eaf6}
.green{color:#2f6b45;background:#e8f3ea}.sky{color:var(--brand-700);background:var(--brand-tint)}
.team-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.club{font-size:.875rem;font-weight:600;line-height:1.35}
.star{font-size:.75rem;color:var(--gold)}

/* Last five, as dots under the team name */
.form{display:flex;align-items:center;gap:4px;flex-shrink:0}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-W{background:#2f9e5f}.dot-D{background:#9aa9b4}.dot-L{background:#d05b55}
/* Streak reuses the same three colours as a readable chip */
.streak-W{background:#e0f0e6;color:#1f6b41}.streak-D{background:#e9eef2;color:#5b7183}.streak-L{background:#f9e9e9;color:#a24f4c}

/* Fixture cards (upcoming games) */
.match-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px 20px;min-width:0}
.match-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:.75rem;margin-bottom:14px}
.match-meta span:last-child{font-weight:600;color:var(--brand-700)}
.match-team{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px}
.match-team .team-mark{height:32px;width:30px}
.home-away{font-size:.75rem;color:var(--muted)}
.score{font-size:1.45rem;font-weight:650;color:#8aa5b7;font-variant-numeric:tabular-nums}
.score.winner{color:var(--brand-900)}
.location{border-top:1px solid var(--line-soft);font-size:.75rem;color:var(--muted);line-height:1.6;padding-top:12px;margin-top:15px}
.compact-match{border:0;border-bottom:1px solid var(--line-soft);border-radius:0;padding:15px 24px 18px}
.compact-match .match-meta{margin-bottom:8px}.compact-match .match-meta span:first-child{display:none}
.compact-match .match-team{margin-top:9px}
.compact-match .team-mark{width:28px;height:30px}
.compact-match .location{padding-top:10px;margin-top:12px}
.panel-link{display:block;text-align:left;padding:17px 24px;width:100%;font-size:.875rem;font-weight:600;color:var(--brand-700);min-height:44px}
.text-button{font-size:.875rem;font-weight:600;color:var(--brand-700);padding:10px 0;white-space:nowrap;min-height:44px}

/* Results: two names and two numbers. The day comes from the heading above the list,
   so the row repeats neither the date nor the venue. */
.result-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.result-row{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:9px 13px;min-width:0}
.result-date{display:block;font-size:.6875rem;color:var(--muted);margin-bottom:5px;font-weight:600}
.result-side{display:flex;align-items:center;gap:10px;padding:3px 0;min-width:0}
.result-side .team-mark{width:28px;height:30px}
.result-name{display:flex;align-items:center;min-width:0;flex:1;overflow:hidden}
.result-name .club{font-size:.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-score{font-size:1.1rem;font-weight:700;color:#8aa5b7;font-variant-numeric:tabular-nums;min-width:18px;text-align:right}
.result-side.won .result-score{color:var(--brand-900)}
#latest-results{display:grid;gap:9px;padding:0 20px 20px}
#latest-results .result-row{background:var(--brand-wash)}

/* Calendar */
.calendar-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}
.calendar-panel{position:sticky;top:20px}
.calendar-panel .section-heading{padding:20px 20px 12px}
.month-nav{display:flex;justify-content:space-between;align-items:center;padding:0 13px 12px}
.month-nav strong{font-size:.875rem;font-weight:600}
.month-nav button{font-size:1.6rem;width:44px;height:44px;border-radius:8px;color:var(--brand-700)}
.weekdays,.month-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:0 18px}
.weekdays{color:var(--muted);font-size:.75rem;text-align:center;margin-bottom:10px}
.month-days button{font-size:.875rem;aspect-ratio:1;border-radius:8px;padding:0;color:var(--muted)}
.month-days .game-day{color:var(--brand-900);background:var(--brand-tint);font-weight:650;box-shadow:inset 0 0 0 1px var(--brand-soft)}
.month-days .chosen-day{color:#fff;background:var(--brand-700);box-shadow:none}
.calendar-key{font-size:.75rem;color:var(--muted);padding:15px 20px}
#clear-date{margin:0 20px 12px}
.timezone{padding:18px 20px;background:var(--brand-wash);border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.schedule-toolbar,.results-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:22px;flex-wrap:wrap}
.schedule-toolbar h2,.results-heading h2{font-size:1.45rem;margin-bottom:5px}
.schedule-toolbar p,.results-heading p{font-size:.875rem;color:var(--muted)}
.toolbar-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
select{display:block;background:var(--surface);border:1px solid var(--line);border-radius:8px;height:44px;padding:0 32px 0 12px;max-width:100%;font-size:.9375rem;font-weight:450}
.team-filter{max-width:230px}
#game-mode{max-width:200px}
.match-group{margin-bottom:26px}
.date-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.date-heading span{color:var(--muted);font-size:.75rem}
.match-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

/* Status + chrome */
.notice{padding:13px 17px;background:#fff8e6;border:1px solid #ecd9a6;border-radius:10px;color:#7a5c14;font-size:.875rem;margin-bottom:20px}
.empty{padding:32px 20px;text-align:center;color:var(--muted);font-size:.875rem;grid-column:1/-1}
footer{border-top:1px solid var(--line);margin-top:35px;padding:24px 0 30px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.75rem;color:var(--muted)}
footer a{color:var(--brand-700);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
footer p{width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-80px;left:12px;padding:12px;background:var(--surface);z-index:20;border-radius:6px}.skip-link:focus{top:12px}

/* Hover only where a pointer can actually hover, so taps do not leave stuck states. */

/* Standings rows are pickable: the team name is a button that re-points the
   overview panels. It must look like the plain label it replaced until you
   reach for it, so the table does not read as a wall of controls. */
.team-pick{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:6px}
/* The label itself is only ~31px tall, short of a comfortable tap target on a
   phone. Rather than padding the row taller, stretch the hit area over the
   whole team cell - the rank number included, which is not interactive. */
.team-cell{position:relative}
.team-pick::after{content:"";position:absolute;inset:0}
.team-pick:hover .club{text-decoration:underline}
.team-pick:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.focused-team{background:var(--brand-tint)}
.focused-team td:first-child{box-shadow:inset 3px 0 var(--brand)}
/* Our club keeps its marker even when another team is in focus. */
.selected-team:not(.focused-team){background:transparent}
.selected-team:not(.focused-team) td:first-child{box-shadow:inset 3px 0 var(--line,#d6e2ec)}
.focus-name{font-weight:600;color:var(--brand)}
#clear-focus{white-space:nowrap}

@media(hover:hover){
 a:hover{text-decoration:underline}
 .panel-link:hover{background:var(--brand-wash)}
 .month-nav button:hover:not(:disabled){background:var(--brand-tint)}
 .month-days button:hover{outline:1px solid var(--brand-soft)}
}

@media(max-width:1100px){
 .wrap{padding:0 28px}
 .overview-grid{grid-template-columns:minmax(0,1fr)}
 .calendar-layout{grid-template-columns:280px minmax(0,1fr);gap:20px}.calendar-layout .match-grid{grid-template-columns:1fr}
 .calendar-layout .result-list{grid-template-columns:1fr}
}

/* Below ~900px the stats scroll sideways, so rank and team stay pinned to the left
   edge — otherwise you lose track of whose row you are reading. */
@media(max-width:900px){
 .standings-table{--pin:220px}
 .standings-table th:first-child,.standings-table td:first-child{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:1px 0 0 var(--line);width:var(--pin);min-width:var(--pin);max-width:var(--pin);padding-left:10px;padding-right:6px}
 .standings-table thead th:first-child{background:var(--brand-wash);z-index:3}
 .standings-table .selected-team td:first-child{background:#dfeffb}
 .standings-table .team-rank{gap:7px}
 .standings-table .team-label{gap:7px}
 .standings-table .team-mark{width:26px;height:28px}
 .standings-table .rank{min-width:12px}
 .standings-table .points-cell{width:46px}
 .standings-table .team-copy{overflow:hidden}
 .standings-table .club{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:.8125rem}
 .standings-table td,.standings-table th{padding-left:6px;padding-right:6px}
}

@media(max-width:700px){
 /* Respect notch/rounded-corner insets on phones. */
 .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 #content{padding-top:16px}
 .header-inner{min-height:64px;gap:10px}.header-brand img{width:34px;height:34px}.header-brand{gap:10px}
 .header-league{font-size:.75rem;letter-spacing:.04em}.header-league small{font-size:.6875rem;margin-left:7px}
 .header-sub{font-size:.6875rem}.header-inner>a{font-size:.75rem}
 /* 16px keeps iOS Safari from zooming the page when a select gains focus. */
 select{font-size:1rem;height:48px}
 /* Stacked: date line, opponent, then venue with the home/away chip. */
 .next-fixture{flex-direction:column;align-items:stretch;gap:11px;padding:14px;border-radius:12px;margin-bottom:16px}
 .fixture-when strong{font-size:1.05rem}
 .fixture-who{padding-left:0;border-left:0;border-top:1px solid rgba(8,50,78,.2);padding-top:11px}
 .fixture-who .team-mark{width:36px;height:38px}
 .fixture-where{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;margin-left:0;padding-left:0;text-align:left}
 .fixture-venue{order:2;flex:1}.fixture-side{order:1;flex-shrink:0}
 /* Keep the view tabs reachable while long lists scroll. One row only: a taller
    sticky bar would cover too much of a short screen. */
 .navigation{flex-wrap:nowrap;gap:6px;margin:14px 0 18px;position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
 nav{flex:1;min-width:0;justify-content:space-between;gap:2px}
 nav button{font-size:.8125rem;padding:12px 2px 14px;flex:1;text-align:center;min-width:0}
 .sync{width:auto;flex-shrink:0}
 /* The wording moves to the notice banner and footer; the icon carries the state here. */
 .sync span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .sync button{width:40px;height:44px;font-size:1.25rem}
 .sync:has(.stale) button{color:#93650f}
 .view{scroll-margin-top:64px}
 .overview-grid{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:18px}
 .section-heading{padding:18px 16px}
 th{font-size:.6875rem;padding:10px 4px}td{padding:12px 4px;height:auto;min-height:62px;font-size:.85rem}
 th:first-child,td:first-child{padding-left:12px}th:last-child,td:last-child{padding-right:12px}.rank{width:26px;font-size:.75rem}
 .team-label{gap:9px}.team-mark{width:34px;height:36px}.club{font-size:.8125rem}
 .compact-match{padding:14px 16px;display:grid;grid-template-columns:1fr auto}
 .compact-match .match-meta{grid-column:2;grid-row:1/span 2;align-self:center;margin:0 0 0 8px}
 .compact-match .match-team{grid-column:1}.compact-match .home-away{display:none}
.compact-match .team-mark{width:30px;height:32px}
 .panel-link{padding:16px}
 .result-list{grid-template-columns:minmax(0,1fr);gap:8px}
 #latest-results{padding:0 16px 16px;gap:8px}
 .result-row{padding:8px 11px}.result-side .team-mark{width:26px;height:28px}
 .calendar-layout{grid-template-columns:minmax(0,1fr);gap:22px}.calendar-panel{position:static}
 .month-days,.weekdays{margin:0 16px;gap:5px}.month-nav{padding:0 16px 14px}
 /* Comfortable thumb targets without letting the grid stretch tall. */
 .month-days button{font-size:.9375rem;min-height:42px;max-height:52px}
 .calendar-key{padding:14px 16px}#clear-date{margin:0 16px 12px}.timezone{padding:16px}
 .schedule-toolbar,.results-heading{align-items:stretch;gap:12px;margin-bottom:18px}
 .schedule-toolbar h2,.results-heading h2{font-size:1.2rem}
 .schedule-toolbar p,.results-heading p{font-size:.8rem}
 .toolbar-controls{width:100%}.team-filter{flex:1;max-width:none}#game-mode{flex:1;max-width:none}
 .match-grid{grid-template-columns:minmax(0,1fr)}
 .notice{font-size:.8125rem}
 footer{line-height:1.7;margin-top:26px;padding-bottom:max(30px,env(safe-area-inset-bottom))}
}

@media(max-width:380px){
 .wrap{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 .header-brand img{width:30px;height:30px}
 .fixture-when strong{font-size:1rem}.fixture-who .club{font-size:.9375rem}
 /* Four tabs plus the refresh control have to share ~280px without touching. */
 nav{gap:4px}
 nav button{font-size:.6875rem;letter-spacing:-.01em;white-space:nowrap;padding:12px 1px 14px}
 .sync button{width:34px}
 /* The crest stays: it is how a parent finds their team at a glance. */
 .team-mark{width:30px;height:32px}.team-label{gap:7px}
 .club{font-size:.8125rem}
 td{padding:10px 3px}th{padding:9px 3px}
 .toolbar-controls{flex-direction:column;align-items:stretch}
}

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