/* ═══════════════════════════════════════════════════════════════════════════
   MatchAtlas shared page shell (263-r10)

   Loaded LAST on every sport page (clubs, rugby, f1, World Cup, Champions League), after the
   page's own stylesheet, so the parts every page shares look and behave the same everywhere.
   Each page stylesheet carried its own copy of these rules and they had drifted apart; the
   shared versions live here so they cannot drift again.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bottom tab bar: phones only ──
   F1 and the World Cup already hid their phone tab bar on wider screens. The Premier League and
   rugby pages showed it at every width, so a laptop had two tab bars (the top tabs and this one).
   Without the bar, the space reserved under the content for it is not needed either. */
@media (min-width: 769px) {
  .bottom-nav { display: none; }
  .content-wrap { margin-bottom: 32px; }
  .feedback-fab, body #ma-feedback-fab { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Version label: in the footer, not on the artwork ── */
#ma-footer .maf-ver { font-family: 'JetBrains Mono', monospace; letter-spacing: .3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   263-r11 — SLIM SHARED HEADER AND SHORTER PAGE TOPS
   The full-width hero artwork is replaced by one 56px bar on every page: the MatchAtlas logo
   (cut from the same artwork), the sport switcher and the language picker. The artwork filled
   a laptop's first screen (504px) and pushed the first Premier League match ~1,640px down a
   phone. On phones the bar takes two rows: logo and language, then the sport switcher.
   ═══════════════════════════════════════════════════════════════════════════ */
#site-nav { min-height: 56px; padding: 8px 16px; gap: 10px 14px; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
.ma-brand { display: inline-flex; align-items: center; flex: none; line-height: 0; border-radius: 8px; text-decoration: none; }
.ma-brand img { display: block; width: auto; height: 36px; }
.ma-brand:focus-visible { outline: 2px solid #E9B949; outline-offset: 3px; }
#site-nav .sport-pill { flex-wrap: nowrap; flex: none; }
#site-nav .lang-sel { margin-left: auto; min-width: 0; }
#site-nav .theme-btn[hidden] { display: none; }

/* 264-r2 — THE BANNER IS BACK, SHORTER (Garth, 8 Nov: "the site looks dull without it").
   A 4.4:1 strip cut from the same artwork (players' heads down to the tagline, car and trophy)
   sits above the bar: at most 1200x271 (the full artwork was 504px tall), ~85px on a phone.
   width/height reserve its space, so nothing moves while it loads; on wider screens its edges
   fade into the page. New ids, so the old theme code that swaps #hero-img/#site-banner skips it. */
#ma-banner { position: relative; max-width: 1200px; margin: 0 auto; line-height: 0; }
#ma-banner img { display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; }
/* 265-r1: the version tag sits on the banner's top-left corner again, as it did until 263-r10.
   footer.js adds it; 12px, the site's text floor (it was 10px on the old artwork). */
#ma-banner .ma-ver { position: absolute; top: 8px; left: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.45); color: rgba(255,255,255,.92); font: 12px/1.4 'JetBrains Mono', monospace; letter-spacing: .5px; pointer-events: none; }
@media (min-width: 1201px) {
  #ma-banner img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
}

/* Competition pills: one row that scrolls sideways instead of wrapping onto a second line. */
#football-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 10px; padding: 6px 16px; }
#football-nav::-webkit-scrollbar { display: none; }
#football-nav .sub-pill { flex-wrap: nowrap; flex: none; }
#football-nav .sub-pill-label { flex-basis: auto; }

/* Time zone: one compact row on every page (rugby's used to be styled inline). */
.tz-bar { width: 100%; background: #1a1a2e; padding: 6px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,.07); }
.tz-label { font-size: 12px; color: rgba(255,255,255,.62); font-weight: 600; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; }
.tz-note { flex-basis: 100%; font-size: 12px; color: #93A0BD; font-style: italic; padding: 0 0 4px; line-height: 1.4; }
body[data-theme="light"] .tz-bar { background: #f0f4ff; border-bottom-color: rgba(0,0,0,.08); }
body[data-theme="light"] .tz-label { color: rgba(0,0,0,.6); }
body[data-theme="light"] .tz-note { color: #4a5470; }

/* Page title block: less empty space above it (rugby and F1 had 70px, a leftover from a floating
   theme button that is no longer shown). */
.site-header { padding-top: 18px; }
body[data-ma-section="Formula 1"] .wrap { padding-top: 20px; }

/* Premier League crest strip: twenty small crests above the title, repeated on the club chips
   under it. It was decoration from the three-club page, and it cost a row on every screen. */
.club-crest-row { display: none; }
/* The time-zone explanation sits beside the picker where there is room, not on a row of its own. */
@media (min-width: 900px) { .tz-bar { flex-wrap: nowrap; } .tz-bar .tz-note { flex-basis: auto; padding: 0; } }

/* Premier League club chips: one row that scrolls sideways (about ten rows of chips before). */
.club-switch .cf-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.club-switch .cf-chips .club-chip { flex: none; }

/* "Show more" under a shortened fixture list. */
.fx-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 2px; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line, rgba(255,255,255,.12)); background: rgba(255,255,255,.04); color: var(--text, #e8eaf0); font: 700 13px 'Archivo', system-ui, sans-serif; cursor: pointer; }
.fx-more:hover { border-color: var(--accent, #c41e3a); }
.fx-more:focus-visible { outline: 2px solid #E9B949; outline-offset: 2px; }
.fx-more-note { text-align: center; font-size: 12px; color: var(--muted, #93A0BD); margin: 4px 0 0; }

/* Rugby: fixtures already played sit in a closed "Earlier fixtures" section under the upcoming ones. */
.rg-earlier { margin: 14px 0 4px; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 12px; background: rgba(255,255,255,.02); }
.rg-earlier > summary { cursor: pointer; padding: 12px 14px; min-height: 44px; box-sizing: border-box; font: 700 13px 'Archivo', system-ui, sans-serif; color: var(--text, #e8eaf0); list-style-position: inside; }
.rg-earlier > summary:focus-visible { outline: 2px solid #E9B949; outline-offset: 2px; border-radius: 12px; }
.rg-earlier[open] > summary { border-bottom: 1px solid var(--line, rgba(255,255,255,.12)); }
.rg-earlier > .rg-earlier-body { padding: 4px 10px 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   263-r12 — READABILITY
   • Text: a 12px floor for the labels that were 9–11.5px on the main views (dates, venues,
     tags, badges, notes, team names). Bottom-bar labels are 11px: they sit under an icon, and
     at 12px six tabs no longer fit a 375px phone.
   • Phones: every control in the header, filters and panels is at least 44px tall.
   • One badge style (the outlined gold pill), and capitals kept for short labels only.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Premier League */
.club-hero-demo, .club-hero-live-badge, .club-hero-status, .club-hero-ht, #club-status,
.panel-note, .cf-n, .fx-date, .comp-badge, .fx-badge, .fx-venue, .md-comp, .cd-label, .cd-lbl,
.stat-lbl, .cf-await-note, .fx-v, .fx-club-tag { font-size: 12px; }
.fx-opp { font-size: 13px; }
#club-live-card .club-hero-ht, #club-live-card .club-hero-demo,
#club-live-card.live-stack .club-hero-live-badge, #club-live-card.live-stack .club-hero-status { font-size: 12px; }
/* Rugby */
#rugby-status, .rg-note, .rg-stat span, .nc-tznote, .nc-date, .rg-meta, .rg-tag, .nc-htline,
.comp-bar-label { font-size: 12px; }
.nc-tn { font-size: 13px; }
/* F1 */
.hero-next-label, .hero-session-label, .rr-sprint, .weekend-badge, .next-badge { font-size: 12px; }
/* World Cup */
.mc-chip, .mc-date-row, .mc-caption { font-size: 12px; }
/* Champions League */
.ucl-match-top, .ucl-match-top span { font-size: 12px; }
/* Bottom tab bars: 11px, in sentence case (F1 and the World Cup were 9px capitals). */
.bn-btn, .bn-btn .bn-label, .bn-btn > span[id$="-label"] { font-size: 11px; }
#bottom-nav .bn-btn { text-transform: none; letter-spacing: 0; }

/* One badge style: the outlined gold pill the Premier League, rugby and World Cup pages use.
   F1's was a solid red pill with its own icon and glow. */
.page-badge .badge-pill, #f1-badge { background: #16203A; color: #E9B949; border: 1px solid #E9B949; box-shadow: none;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 16px; border-radius: 999px; text-shadow: none; }

/* Plain links inside panels (the rugby source lists) were the browser's default blue on navy,
   1.98:1. This is the footer's link colour, 7.9:1 on the panels. */
.panel a:not([class]), .rg-official-list a:not([class]) { color: #7eb6ff; }

/* 263-r13: the World Cup archive has no calendar export (every match is in the past). */
#calPanel[hidden] { display: none; }
/* 263-r14: the World Cup bracket (1,040px wide) scrolls inside its own panel. As a grid item the
   panel grew to the bracket's width instead, so on a phone the whole page scrolled sideways — and
   the bracket is now the view the page opens on. */
.layout > * { min-width: 0; }

/* Capitals for short labels only: panel and calendar headings read in normal case. */
.panel h2, .cal-panel h3, .f1-cal-panel-head h3, .modal h3, .ucl-panel h2 { text-transform: none; letter-spacing: .01em; }

@media (max-width: 768px) {
  /* 44px tap targets on phones (they were 24–38px: competition pills 24, language and time-zone
     pickers 27, chips 27–31, sport buttons 32). */
  .ma-brand, #site-nav .sport-btn, #site-nav .lang-sel, .sub-btn, .tz-select, .cf-chip, .club-chip,
  .cal-panel-head, .f1-cal-panel-head, .comp-btn, .cal-btn-pill, .feedback-fab, #ma-feedback-fab,
  .fx-more, .ucl-button, .ucl-clubs button, .ucl-filters select, .ucl-panel summary, .mc-squads-btn,
  .rg-earlier > summary { min-height: 44px; box-sizing: border-box; }
  #site-nav .sport-btn, .sub-btn, .cf-chip, .club-chip, .comp-btn { display: inline-flex; align-items: center; }
  .cal-panel-head, .f1-cal-panel-head { padding-top: 0; padding-bottom: 0; }
  #calPanel > div:first-child { min-height: 44px; box-sizing: border-box; padding-top: 0 !important; padding-bottom: 0 !important; }
  .ucl-panel summary { display: flex; align-items: center; }
}

@media (max-width: 760px) {
  .club-switch .cf-chips { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .club-switch .cf-chips::-webkit-scrollbar { display: none; }
}

@media (max-width: 560px) {
  #site-nav { flex-wrap: wrap; padding: 8px 12px; }
  .ma-brand img { height: 30px; }
  #site-nav .lang-sel { order: 2; padding: 6px 12px; }
  #site-nav .sport-pill { order: 3; flex: 1 0 100%; justify-content: space-between; }
  #site-nav .sport-btn { flex: 1; justify-content: center; }
  #football-nav { padding: 6px 12px; }
  #football-nav .sub-pill-label { display: none; }
  .tz-bar { flex-wrap: nowrap; padding: 6px 12px; }
  .tz-bar .tz-note { display: none; }
  .tz-bar .tz-select { flex: 1 1 auto; min-width: 0; max-width: none; }
  .site-header { padding-top: 14px; }
  /* The subtitle and the season badge repeat what the sport switcher, the competition pills and
     the schedule panel already say. */
  .site-header .site-sub, .site-header .badge-pill { display: none; }
  .site-header .site-title { font-size: 22px; }
  .site-header .club-meta { display: none; }
  /* Premier League: the schedule panel's own heading repeats the selected tab. */
  body[data-club="clubs"] #side > .panel:first-child > h2:first-child,
  body[data-club="clubs"] #side > .panel:first-child > h2:first-child + .panel-note { display: none; }
  .cal-panel { padding: 10px 14px; }
  .cal-panel h3 { font-size: 14px; }
  .tab-bar { padding-top: 8px; }
  /* Premier League schedule panel: the multi-select hint, the time-zone line (the bar at the top
     already says it) and a competition filter with only one competition in it. */
  .club-switch .cf-await-note, #side .tz-note-line { display: none; }
  .comp-filter:not(:has(.cf-chip + .cf-chip)):not(:has(.cf-await)) { display: none; }
  /* Rugby competitions: one sideways-scrolling row, like the football ones. */
  .comp-bar { flex-wrap: nowrap; margin-top: 12px; }
  .comp-bar-label { display: none; }
  .comp-bar-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .comp-bar-pills::-webkit-scrollbar { display: none; }
  /* F1: a smaller globe, so the next session is on the first screen (drag is off on touch). */
  #globe { width: 210px; height: 210px; }
  .globe-wrap { margin-bottom: 10px; }
  #globe-hint { display: none; }
}