:root {
  --navy:    #0d1b2a;
  --navy2:   #142233;
  --navy3:   #1c2f45;
  --gold:    #cc9e3e;
  --gold2:   #edbe52;
  --silver:  #a0b2c4;
  --white:   #f0f4f8;
  --muted:   #8da1b5;
  --green:   #2ecc71;
  --red:     #e74c3c;
  --promote: rgba(46,204,113,0.12);
  --relegate:#e74c3c22;
  --champion: rgba(204,158,62,0.15);
  --border:  rgba(200,168,75,0.2);

  /* ── Semantic colours ─────────────────────────────── */
  --bronze:       #cd7f32;
  --medal-silver: #c0c0c0;
  --legend:       #bf8fdf;
  --legend-bg:    #9b59b6;
  --win:          #81c784;
  --loss:         #ef9a9a;
  --text-light:   #e8e8e8;

  /* ── Spacing tokens ───────────────────────────────────── */
  --page-padding-x: 2rem;   /* horizontal page padding (desktop) */
  --page-padding-y: 2rem;   /* vertical main padding (desktop)   */
  --card-padding:   1.5rem; /* standard card inner padding       */
}

@media (max-width: 680px) {
  :root {
    --page-padding-x: 1rem;
    --page-padding-y: 1.5rem;
    --card-padding:   0.75rem 1rem;
    --silver:         #a0b2c4;   /* lifted for mobile contrast (AA→AAA on navy) */
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--navy);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  min-height: 100vh;
}

/* Header & navigation */
header {
  background: var(--navy2);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-text {
  display: flex; flex-direction: column; line-height: 1.1;
}
.logo-text strong {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700;
  color: var(--white); letter-spacing: 0.5px;
}
.logo-text span {
  font-size: 13px; color: var(--silver); letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 400;
}
nav {
  display: flex;
  gap: 32px;
}
nav a {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s;
}
nav a:hover { color: var(--gold); }
nav a.active {
  color: var(--navy);
  background: var(--gold);
  border-radius: 4px;
  padding: 0.4rem 0.75rem;
  font-weight: 500;
}

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--silver);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
/* Animate to X when open */
.nav-toggle--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle--open span:nth-child(2) { opacity: 0; }
.nav-toggle--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Page hero */
.page-hero {
  background: linear-gradient(160deg, rgba(180, 100, 20, 0.06) 0%, transparent 55%), var(--navy2);
  border-bottom: 1px solid rgba(200, 158, 62, 0.3);
  padding: 3rem 2rem 2.5rem;
}
.page-hero-inner {
  max-width: 1100px; margin: 0 auto;
}
.page-eyebrow {
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-bottom: 0.75rem;
  font-family: 'DM Mono', monospace;
}
.page-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900; line-height: 1.05;
  color: var(--white);
  margin-bottom: 1rem;
}
.page-desc {
  font-size: 16px; color: var(--silver); max-width: 520px;
  line-height: 1.7; font-weight: 300;
}

/* Controls */
.controls {
  max-width: 1100px; margin: 0 auto;
  padding: 2rem 2rem 0;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
}
.control-group {
  display: flex; flex-direction: column; gap: 6px;
}
.control-label {
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--silver); font-family: 'DM Mono', monospace;
}
select {
  background: var(--navy3);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  padding: 10px 36px 10px 14px;
  border-radius: 4px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a9bb0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  min-width: 160px;
  transition: border-color 0.2s;
}
select:focus { border-color: var(--gold); }
select option { background: var(--navy2); }

/* Main */
main {
  max-width: 1100px; margin: 0 auto;
  padding: 2rem 2rem 4rem;
}

.no-data {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--silver);
  font-size: 16px;
}

/* ==================================================================
   CARD BEHAVIOUR SYSTEM
   ==================================================================
   Gold outline + lift ONLY on elements explicitly marked as clickable.
   
   Clickable cards:
     .honour-card  (history page navigation tiles)
     .is-clickable (utility for future use)

   All other card-like containers are static – no hover effect.
   ================================================================== */

/* Clickable cards – shared hover/lift */
.is-clickable,
.honour-card,
.info-card {
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.is-clickable:hover,
.honour-card:hover,
.info-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(200, 168, 75, 0.15);
}

.is-clickable:active,
.honour-card:active,
.info-card:active {
  transform: scale(0.98);
}

/* Static cards – no visual change on hover */
.contact-card,
.update-item,
.search-group,
.about-card,
.division-card,
.season-group,
.cup-card,
.season-card,
.club-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover,
.update-item:hover,
.search-group:hover,
.about-card:hover,
.division-card:hover,
.season-group:hover,
.cup-card:hover,
.season-card:hover,
.club-card:hover {
  transform: none;
  border-color: var(--border);
}

/* Exception: updates.html adds .clickable to an .update-item only when it links
   out to an external article (see the click-handler there), so those specific
   cards should get the same hover lift as other clickable cards — otherwise
   they'd be clickable without looking it. Two classes outweigh the static
   .update-item:hover rule above. */
.update-item.clickable {
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.update-item.clickable:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(200, 168, 75, 0.15);
}
.update-item.clickable:active {
  transform: scale(0.98);
}

/* Utility: explicitly non-clickable (overrides any future inheritance) */
.no-click {
  cursor: default !important;
}
.no-click:hover {
  transform: none !important;
  border-color: inherit !important;
  box-shadow: none !important;
}

/* Cards that contain links (static cards with inline links) */
.contact-card a,
.about-card a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.2s;
}
.contact-card a:hover,
.about-card a:hover {
  border-bottom-color: var(--gold);
}

/* Document rows – no background hover (prevents false affordance) */
.doc-item:hover {
  background: transparent;
}

/* ==================================================================
   Original component styles (layout & typography)
   ================================================================== */

/* League tables */
.table-section {
  margin-bottom: 3rem;
  animation: fadeUp 0.4s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.division-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.division-number {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.division-name {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--white);
}
.division-meta {
  margin-left: auto;
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-family: 'DM Mono', monospace;
}
.league-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.league-table thead th {
  font-family: 'DM Mono', monospace;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--silver); font-weight: 500;
  padding: 0.6rem 0.75rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.league-table thead th.col-team {
  text-align: left; padding-left: 1rem;
}
.league-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.league-table tbody tr:hover {
  background: rgba(200,168,75,0.05);
}
.league-table tbody tr.promote {
  background: var(--promote);
}
.league-table tbody tr.relegate {
  background: var(--relegate);
}
.league-table tbody tr.champion {
  background: var(--champion);
}
.league-table td {
  padding: 0.7rem 0.75rem;
  text-align: center;
  color: var(--silver);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
}
.league-table td.col-pos {
  color: var(--muted); font-size: 13px; width: 40px;
}
.league-table td.col-team {
  text-align: left; padding-left: 1rem;
  color: var(--white); font-family: 'DM Sans', sans-serif;
  font-size: 16px; font-weight: 400;
  min-width: 180px;
}
.league-table td.col-pts {
  color: var(--gold2); font-weight: 500; font-size: 16px;
}
.league-table td.col-gd.positive { color: var(--green); }
.league-table td.col-gd.negative { color: var(--red); }
.pos-marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px;
}
.pos-1 { background: var(--gold); color: var(--navy); font-weight: 700; }
.zone-bar {
  display: inline-block;
  width: 3px; height: 14px; border-radius: 2px;
  margin-right: 8px; vertical-align: middle;
  flex-shrink: 0;
}
.zone-promote { background: var(--green); }
.zone-relegate { background: var(--red); }
.zone-champion { background: var(--gold); }
.team-cell {
  display: flex; align-items: center; gap: 0;
}
.legend {
  display: flex; gap: 16px; align-items: center; margin-bottom: 0.75rem;
  padding: 0 0.25rem;
}
.legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
}
.legend-dot {
  width: 8px; height: 8px; border-radius: 2px;
}
.table-note {
  font-size: 14px; color: var(--muted); font-style: italic;
  padding: 0.5rem 0.25rem 0; margin-top: 0.25rem;
  border-top: 1px solid var(--border);
}

/* Winners tables (season-group, etc.) */
.winners-grid, .yearbook-grid, .divisions-grid, .cups-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.season-group, .division-card, .cup-card, .season-card {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.season-header, .division-title, .cup-header, .season-title {
  background: var(--navy3);
  padding: 1rem 1.5rem;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--gold);
  border-bottom: 1px solid var(--border);
}
.winners-table, .honours-table {
  width: 100%;
  border-collapse: collapse;
}
.winners-table th, .honours-table th {
  text-align: left;
  padding: 0.75rem 1.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--silver);
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid var(--border);
}
.winners-table td, .honours-table td {
  padding: 0.75rem 1.5rem;
  font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--white);
}
.honours-table td {
  vertical-align: top;
}
.winners-table tr:last-child td,
.honours-table tr:last-child td {
  border-bottom: none;
}
.division-name, .team-name, .division-name {
  font-weight: 500;
  color: var(--gold2);
}

/* Season summaries specific */
.season-section {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.season-section:last-child {
  border-bottom: none;
}
.section-heading {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.honour-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.honour-item {
  background: rgba(0,0,0,0.3);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 16px;
  min-width: 200px;
}
.honour-item strong {
  color: var(--gold2);
  font-weight: 500;
}

/* Cards grid (history page) */
.cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: flex-start;
}
.honour-card {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  flex: 1 1 280px;
  max-width: 380px;
  text-decoration: none;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-icon { font-size: 48px; }
.card-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--gold2);
}
.card-desc {
  font-size: 16px;
  color: var(--silver);
  line-height: 1.5;
}
.card-link {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 0.5rem;
}

/* Contact page – desktop */
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 1rem;
}
.contact-card {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 2rem;
}
.contact-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: var(--gold2);
  margin-bottom: 0.75rem;
}

/* Documents page */
.documents-list {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.doc-item:last-child {
  border-bottom: none;
}
.doc-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
}
.doc-name::before {
  content: "📄 ";
  margin-right: 0.5rem;
  opacity: 0.7;
}
.doc-link {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  color: var(--gold);
  text-decoration: none;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--gold);
  border-radius: 20px;
  transition: 0.2s;
}
.doc-link:hover {
  background: var(--gold);
  color: var(--navy);
}
.note {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--navy3);
  border-radius: 8px;
  font-size: 16px;
  color: var(--silver);
  text-align: center;
}

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 2rem;
  text-align: center;
  font-size: 13px; color: var(--muted); letter-spacing: 0.5px;
}
footer strong { color: var(--silver); }
/* Responsive (mobile & tablet) */
/* ── Tablet/small-screen nav: hamburger at 681–900px ─────────────────────── */
@media (max-width: 900px) {
  /* Show hamburger button, hide inline nav */
  .nav-toggle {
    display: flex;
  }
  #main-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy2);
    border-top: 1px solid var(--border);
    border-bottom: 2px solid var(--gold);
    padding: 0.5rem 0;
    z-index: 1000;
  }
  #main-nav.nav-open {
    display: flex;
  }
  #main-nav a {
    font-size: 16px;
    padding: 0.95rem 2rem;
    white-space: nowrap;
    border-radius: 0;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(200,168,75,0.08);
  }
  #main-nav a:last-child { border-bottom: none; }
  #main-nav a.active {
    padding: 0.95rem 2rem;
    background: rgba(200,168,75,0.12);
    color: var(--gold);
    border-radius: 0;
  }
  /* header needs position:relative so the dropdown can absolute-position from it */
  header { position: relative; }
}

@media (max-width: 680px) {
  /* ── Mobile typography — raise floor from 13px to 14px, switch light weight
     to regular so thin strokes remain readable on small screens ── */
  body {
    font-weight: 400;
  }
  /* Table cells */
  .league-table td,
  .honours-table td,
  .honours-table th,
  .team-record-table td,
  .results-table td,
  .winners-table td {
    font-size: 16px;
  }
  /* Card and list content */
  .club-honour-item,
  .club-summary,
  .match-list li,
  .player-list li,
  .stat-badge,
  .honour-badge,
  .record-badge,
  .note,
  .no-data,
  .page-desc {
    font-size: 16px;
  }
  /* Section titles and headings stay at their own sizes */

  .page-hero { padding: 2rem var(--page-padding-x) 1.5rem; }
  .controls { padding: var(--page-padding-y) var(--page-padding-x) 0; }
  main { padding: var(--page-padding-y) var(--page-padding-x) 3rem; }
  /* Tighten league table so P-W-GD-Pts view fits without horizontal scroll */
  .league-table td { padding: 0.7rem 0.4rem; }
  .league-table td.col-pos { width: 30px; }
  .league-table td.col-team { min-width: 140px; }
  
  /* Mobile header sizing (nav hamburger rules live in the 900px block above) */
  header { padding: 0 1rem; }
  .header-inner { height: 56px; }
  /* Constrain dropdown so it doesn't overrun the fixed bottom nav */
  #main-nav { max-height: calc(100dvh - 56px - 60px); overflow-y: auto; }
  #main-nav a { font-size: 16px; padding: 0.5rem 1.5rem; }
  #main-nav a.active { padding: 0.85rem 1.5rem; }
  
  .honour-card { flex: 1 1 100%; max-width: 100%; }
  .winners-table th, .winners-table td,
  .honours-table th, .honours-table td {
    padding: 0.5rem 1rem;
  }
  .division-name { width: auto; }
  /* #14 — smaller season/section headings on mobile */
  .season-header, .division-title, .cup-header, .season-title { font-size: 20px; }
  .contact-card { padding: 1rem 1.5rem; }

  /* #1 — honour-item: full-width stacked list, no min-width clamping */
  .honour-list { flex-direction: column; }
  .honour-item { min-width: 0; width: 100%; overflow-wrap: break-word; word-break: break-word; hyphens: none; }

  /* #8 — notable-clubs: full-width cards */
  .club-card { width: 100%; max-width: none; }

  /* #9 — notable-clubs: larger touch targets on honour items */
  .club-honour-item { font-size: 16px; padding: 0.6rem 0.75rem; margin-bottom: 0; min-height: 44px; display: flex; align-items: center; }
  .club-team-name a { display: inline-block; padding: 0.5rem 0; font-size: 15px; }

  /* #10 — gazette: stack date above title */
  .articles-list-ul li { display: flex; flex-direction: column; gap: 4px; }
  .article-date { display: block; margin-right: 0; }

  /* #12 — documents: full-width download button */
  .doc-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .doc-link { display: block; width: 100%; text-align: left; padding: 0.5rem 1rem; box-sizing: border-box; }
}

/* Tablet & small desktop: hide extra columns */
@media (max-width: 900px) {
  .col-hide {
    display: none;
  }
}

/* Home page info cards */

.info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 2rem;
}

.info-card {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  flex: 1 1 250px;
}

.info-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--gold2);
  margin-bottom: 0.5rem;
}

.info-card p {
  font-size: 16px;
  color: var(--silver);
  line-height: 1.5;
}

/* Logo image styling with fallback */
.logo-image {
  height: 36px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--gold);
  border-radius: 50%;
  min-width: 36px;
  min-height: 36px;
}

/* Updates page */
.updates-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.update-item {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}
.update-date {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.update-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--gold2);
  margin-bottom: 0.75rem;
}
.update-content {
  font-size: 16px;
  color: var(--silver);
  line-height: 1.5;
}


/* Honour roll note box (100/150/ever-present) */
.honour-note {
  background: rgba(200,168,75,0.12);
  border-left: 3px solid var(--gold);
  padding: 1rem;
  margin-bottom: 2rem;
  border-radius: 0 8px 8px 0;
}
.honour-note p {
  margin: 0;
  color: var(--silver);
  font-size: 16px;
}

/* Notable clubs grid */
.clubs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin: 2rem 0;
}
.club-card {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  width: 280px;
  text-decoration: none;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.club-name {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--gold2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.club-summary {
  font-size: 16px;
  color: var(--silver);
  line-height: 1.4;
}

/* Notable clubs - detailed honours */
.club-team-section {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.club-team-name {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.club-honour-category {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--silver);
  margin: 0.5rem 0 0.25rem 0;
}
.club-honour-item {
  font-size: 14px;
  color: var(--white);
  margin-left: 0.75rem;
  margin-bottom: 0.2rem;
}
/* Player/team names that link out to player-stats.html / team.html via
   playerLinkHtml/teamLinkHtml (utils.js) — styled to match the gold link
   convention used by .team-record-table a / .honours-table a so they read as
   clickable rather than showing plain browser-default blue underlined links. */
.club-honour-item a,
.team-name a,
.honour-item a,
.club-name a,
.club-team-name a {
  color: var(--gold2);
  text-decoration: none;
  border-bottom: 1px dotted rgba(200,168,75,0.5);
}
.club-honour-item a:hover,
.team-name a:hover,
.honour-item a:hover,
.club-name a:hover,
.club-team-name a:hover {
  text-decoration: underline;
}
.club-name a::after {
  content: ' ↗';
  font-size: 10px;
  opacity: 0.6;
  vertical-align: super;
  margin-left: 2px;
}

/* Gazette Articles */
.articles-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.articles-list-ul {
  margin: 0;
  padding: 1rem 1.5rem;
  list-style: none;
}
.articles-list-ul li {
  margin-bottom: 0.75rem;
  font-size: 16px;
  color: var(--white);
}
.article-date {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  color: var(--gold);
  margin-right: 0.5rem;
}
.articles-list-ul a {
  color: var(--silver);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
.articles-list-ul a:hover {
  color: var(--gold2);
  border-bottom-color: var(--gold);
}

/* Fix for division winners table alignment */
.winners-table {
  table-layout: fixed;
  width: 100%;
}
.winners-table td.division-name {
  width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  padding-top: 0.85rem;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--text-muted, #888);
}
.winners-table td.division-name a.honour-division-link {
  color: var(--text-muted, #888);
  border-bottom-color: transparent;
}
.winners-table td.division-name a.honour-division-link:hover {
  color: var(--gold2);
  border-bottom-color: rgba(200,168,75,0.45);
}
.winners-table td.champion-cell {
  width: auto;
  vertical-align: top;
  padding: 0.6rem 1rem 0.75rem;
}
.champion-name {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.2;
}
.champion-name a {
  color: inherit;
  text-decoration: none;
}
.champion-name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.champion-stats {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 0.3rem;
  letter-spacing: 0.5px;
}

/* Search page */
.search-container {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
}
.search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  margin-bottom: 2rem;
}
.search-input:focus {
  border-color: var(--gold);
  outline: none;
}
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}
.search-results {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.search-group {
  background: var(--navy2);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  border: 1px solid var(--border);
  min-width: 0;
  overflow-wrap: anywhere;
}
.search-group-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: var(--gold2);
  background: var(--navy3);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  margin: 0 -1.5rem 0.75rem;
}
.search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-list li {
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.search-list li:last-child {
  border-bottom: none;
}
.search-list li a {
  display: block;
  padding: 0.7rem 0;
}
.search-list a {
  color: var(--silver);
  text-decoration: none;
}
.search-list a:hover {
  color: var(--gold2);
  border-bottom-color: var(--gold);
}

/* Search subgroup styles */
.search-subgroup {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}
.search-subgroup-title {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.search-group + .search-group {
  margin-top: 2rem;
}

/* Player Stats Page */
.player-search-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
.player-search-results {
  position: absolute;
  z-index: 500;
  width: 100%;
  top: calc(100% + 4px);
  left: 0;
  margin-top: 0;
}
.player-suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--navy3);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 250px;
  overflow-y: auto;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  z-index: 500;
}
.player-suggestions li {
  padding: 0.6rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--silver);
  font-size: 15px;
  transition: background 0.15s;
}
.player-suggestions li:last-child {
  border-bottom: none;
}
.player-suggestions li:hover,
.player-suggestions li[aria-selected="true"] {
  background: rgba(200,168,75,0.15);
}
.player-detail {
  margin-top: 2rem;
}
.player-detail h2 {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  color: var(--gold2);
  margin-bottom: 0.5rem;
}
/* Responsive text helpers (used across multiple pages) */
@media (max-width: 680px) {
  .mobile-abbr { display: inline; }
  .desktop-full { display: none; }
}
@media (min-width: 681px) {
  .mobile-abbr { display: none; }
  .desktop-full { display: inline; }
}

/* ── Season / gazette collapse-expand toggle ─────────────────────────────── */
.season-header-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}
.season-header-text { flex: 1; min-width: 0; }
.season-header-meta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.season-toggle-icon {
  font-size: 16px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s;
  line-height: 1;
}
.season-header-toggle[aria-expanded="true"] .season-toggle-icon {
  transform: rotate(180deg);
}
.season-collapsible[hidden] { display: none; }

/* ── Cup winners nav bar + show-all toggle ───────────────────────────────── */
.cup-nav-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy3);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
}
.cup-nav-inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 1rem;
  scrollbar-width: none;
}
.cup-nav-inner::-webkit-scrollbar { display: none; }
.cup-nav-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  padding: 0 0.75rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--silver);
  text-decoration: none;
  white-space: nowrap;
  transition: 0.15s;
}
.cup-nav-pill:hover { border-color: var(--gold); color: var(--gold2); }

.cup-entry-count {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.5rem;
  vertical-align: middle;
}

.cup-show-all-btn {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--gold2);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  letter-spacing: 1px;
  transition: background 0.15s;
}
.cup-show-all-btn:hover { background: rgba(200,168,75,0.05); }

/* ── Leaderboard team count label ────────────────────────────────────────── */
.leaderboard-team-count {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ── Collapsible badges (cup/trophy pills) on mobile ─────────────────────── */
@media (max-width: 680px) {
  .collapsible-badges {
    display: none;
  }
  .collapsible-badges.badges-open {
    display: flex;
  }
  /* Tap the entry body to toggle pills */
  .cup-entry-body,
  .trophy-entry-body {
    cursor: pointer;
  }
  .cup-entry-name::after,
  .trophy-entry-name::after {
    content: ' ▾';
    font-size: 10px;
    color: var(--muted);
    vertical-align: middle;
  }
  .cup-entry-body.badges-open .cup-entry-name::after,
  .trophy-entry-body.badges-open .trophy-entry-name::after {
    content: ' ▴';
  }
}

/* ── Back-to-top button ──────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1rem;
  z-index: 100;
  background: var(--navy3);
  border: 1px solid var(--border);
  color: var(--silver);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  padding: 0.5rem 0.75rem;
  border-radius: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover { border-color: var(--gold); color: var(--gold2); }

/* ── Mobile overrides that must follow later global rules ────────────────── */
@media (max-width: 680px) {
  /* #3 — league-winners: override table-layout: fixed (declared after mobile block) */
  .winners-table { table-layout: auto; }
  .winners-table td.division-name { width: auto; white-space: normal; overflow: visible; text-overflow: clip; }

  /* #13 — documents: align category heading with doc-item content */
  .documents-list h3 { padding-left: 0; }
}

/* ── Season summaries hint text ──────────────────────────────────────────── */
.yearbook-hint {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}
.yearbook-hint-mobile  { display: inline; }
.yearbook-hint-desktop { display: none; }

@media (min-width: 681px) {
  .yearbook-hint-mobile  { display: none; }
  .yearbook-hint-desktop { display: inline; }

  /* Always expand season content on desktop — collapse is mobile-only */
  .season-collapsible[hidden] { display: block; }
  .season-header-toggle { cursor: default; }
  .season-toggle-icon { display: none; }
  /* Hint is only relevant on mobile where tap-to-expand exists */
  .yearbook-hint { display: none; }
}

/* ── Season stats deep-link ──────────────────────────────────────────────── */
.season-stats-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--gold);
  text-decoration: none;
  font-size: 14px;
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
  transition: color 0.2s;
}
.season-stats-link:hover { color: var(--gold2); }

/* Override default link colours inside the page description */
.page-desc a,
.page-desc a:visited {
  color: var(--gold);          /* gold instead of blue/purple */
  text-decoration: none;       /* remove the underline */
  font-weight: 500;            /* slightly bolder to match your other links */
}

.page-desc a:hover,
.page-desc a:focus-visible {
  text-decoration: underline;  /* underline on hover for clarity */
  color: var(--gold2);         /* brighter gold on hover */
}

.honour-division-link {
  color: var(--gold2);
  text-decoration: none;
  border-bottom: 1px dotted rgba(200,168,75,0.5);
}
.honour-division-link:hover {
  text-decoration: underline;
}
.voided-notice {
  color: var(--text-muted, #888);
  font-style: italic;
  font-size: 14px;
  padding: 0.5rem 0 0.25rem;
  margin: 0;
}

/* Era decade separator */
.era-separator {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0.5rem 0 -0.5rem;
}
.era-separator::before,
.era-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.era-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted, #888);
  white-space: nowrap;
}

/* Latest season highlight */
.season-group--latest {
  border-color: rgba(200, 168, 75, 0.5);
  box-shadow: inset 4px 0 0 var(--gold2, #c8a84b);
}
.latest-badge {
  display: inline-block;
  margin-left: 0.75rem;
  padding: 0.15em 0.55em;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy1, #0a0f1e);
  background: var(--gold2, #c8a84b);
  border-radius: 2px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* ── Skip-to-content link ───────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 9999;
  background: var(--gold);
  color: var(--navy);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
}
.skip-link:focus {
  left: 1rem;
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
#main-content:focus {
  outline: none;
}

/* ── Share Card button ────────────────────────────────────────────────────── */
.share-card-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.5rem 0.5rem;
  background: none;
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: var(--gold);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.share-card-btn:hover {
  background: var(--gold);
  color: var(--navy);
}
.share-card-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.share-card-subtitle {
  display: block;
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  opacity: 0.7;
  margin-top: 2px;
  letter-spacing: 0;
}

/* === Golden Boot / Golden Glove === */
.gb-season-block {
  max-width: 900px;
  margin: 0 auto 2.5rem;
  padding: 0 1rem;
}

.gb-season-heading {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.3px;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.gb-season-expunged {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  padding: 0.5rem 0 0;
}

.gb-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.gb-card {
  background: linear-gradient(160deg, rgba(200,168,75,0.08) 0%, var(--navy) 55%);
  border: 1px solid rgba(200,168,75,0.3);
  border-top: 3px solid var(--gold);
  border-radius: 10px;
  padding: 1.1rem 1rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gb-card:hover {
  border-color: rgba(200,168,75,0.5);
  box-shadow: 0 4px 20px rgba(200,168,75,0.12);
}

.gb-card-division {
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.gb-card-player {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  line-height: 1.2;
  overflow-wrap: break-word;
}
.player-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
.player-link:hover {
  color: var(--gold2);
  text-decoration: none;
}

.gb-card-team {
  font-size: 13px;
  color: var(--muted);
  margin-top: 0.25rem;
  margin-bottom: 0.85rem;
}

.gb-card-stats {
  display: flex;
  gap: 16px;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(200,168,75,0.15);
}

.gb-stat {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gb-stat-value {
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

.gb-stat-label {
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0.15rem;
}

@media (max-width: 680px) {
  .gb-card-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gb-card { padding: 0.875rem 0.875rem 0.75rem; }
}
@media (max-width: 360px) {
  .gb-card-grid { grid-template-columns: 1fr; }
}

/* === Search Example Chips === */
.search-examples { margin-top: 0.85rem; text-align: center; font-size: 14px; color: var(--silver); }
.search-examples-label { margin-bottom: 0.4rem; opacity: 0.7; }
.search-example-chip {
  margin: 0.2rem 0.2rem;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--navy3);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  color: var(--silver);
  font-size: 14px;
}
.search-example-chip:hover { border-color: var(--gold2); color: var(--gold2); }

/* === Player Honours / Stats / Records (shared: player-stats + team) === */
.honour-badge, .stat-badge, .record-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200,168,75,0.08);
  border: 1px solid rgba(200,168,75,0.2);
  border-radius: 20px;
  padding: 0.5rem 1rem;
  color: var(--gold2);
  font-size: 15px;
  margin: 0.2rem;
  text-decoration: none;
  transition: background 0.2s;
}

.honour-badge:hover, .stat-badge:hover, .record-badge:hover {
  background: rgba(200,168,75,0.2);
  border-color: var(--gold);
}

.honour-group, .stat-group, .record-group { width: 100%; }

.honour-season, .stat-season, .record-season {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--gold);
  margin: 0.75rem 0 0.25rem 0;
}

.table-wrapper {
  overflow-x: auto;
  margin: 1rem 0;
}

.match-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.match-list-date { width: 70px; color: var(--silver); flex-shrink: 0; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }

/* ── Share Page button (mobile only) ───────────────────────────────── */
.share-page-btn { display: none; }
@media (max-width: 680px) {
  .share-page-btn {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.4rem 1rem;
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 20px;
    color: var(--gold);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.2s, color 0.2s;
  }
  .share-page-btn:hover {
    background: var(--gold);
    color: var(--navy);
  }
}

/* ── Bottom Navigation Bar (mobile only) ───────────────────────────── */
.bottom-nav { display: none; }

@media (max-width: 680px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--navy2);
    border-top: 1px solid var(--border);
    z-index: 1000;
    padding: 0.4rem 0 env(safe-area-inset-bottom, 0.4rem);
    justify-content: space-around;
  }
  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--silver);
    font-size: 12px;
    padding: 0.3rem 0.5rem;
    min-width: 56px;
  }
  .bottom-nav-item.active { color: var(--gold); }
  .bottom-nav-icon { font-size: 20px; }
  .bottom-nav-label {
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.3px;
  }
  /* Prevent page content from being hidden behind the bar */
  body { padding-bottom: 60px; }
  .back-to-top { bottom: 72px; }
}

/* ── Back breadcrumb ────────────────────────────────────────────────── */
.nav-back-bar {
  padding: 0.5rem var(--page-padding-x, 1.5rem);
  font-size: 15px;
  border-bottom: 1px solid var(--border);
}
.nav-back-bar a {
  color: var(--gold);
  text-decoration: none;
}
.nav-back-bar a:hover { text-decoration: underline; }

/* ── Recently viewed chips ──────────────────────────────────────────── */
.recent-chip {
  margin: 0.2rem 0.2rem;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--navy3);
  border: 1px solid var(--gold);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  color: var(--gold);
  font-size: 14px;
}
.recent-chip:hover { background: rgba(200,168,75,0.12); }

/* ── Contextual next steps ──────────────────────────────────────────── */
.next-steps {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.next-steps-heading {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--silver);
  margin-bottom: 0.6rem;
}
.next-step-link {
  display: block;
  color: var(--gold);
  text-decoration: none;
  font-size: 16px;
  padding: 0.2rem 0;
  line-height: 1.6;
}
.next-step-link:hover { text-decoration: underline; }

/* ── Global focus-visible ──────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Elements with custom focus styles — suppress the default outline */
select:focus-visible,
.search-input:focus-visible,
#alltimeSearch:focus-visible {
  outline: none;
}

/* ── Career Milestones ─────────────────────────────────────────────────── */
.ms-summary {
  font-size: 15px;
  color: var(--silver);
  margin-bottom: 1rem;
  padding-top: 0.25rem;
}
.ms-tier-count { font-weight: 600; }
.ms-tier-count--bronze { color: var(--bronze); }
.ms-tier-count--silver { color: var(--medal-silver); }
.ms-tier-count--gold   { color: var(--gold2); }
.ms-tier-count--legend { color: var(--legend); }

.ms-badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.ms-badge {
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  min-height: 90px;
  padding: 0.6rem 0.4rem;
  border: 2px solid;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  text-align: center;
  gap: 2px;
}

.ms-badge-icon  { font-size: 20px; line-height: 1; }
.ms-badge-name  { font-size: 11px; font-weight: 600; color: #e0e0e0; margin-top: 4px; line-height: 1.2; }
.ms-badge-tier  { font-size: 10px; font-family: 'DM Mono', monospace; letter-spacing: 0.5px; text-transform: uppercase; }
.ms-badge-stat  { font-size: 10px; color: var(--silver); margin-top: 1px; }

.ms-next-up-label {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--gold);
  margin: 0.25rem 0 0.6rem 0;
  text-transform: uppercase;
}

.ms-progress-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 1rem; }

.ms-progress-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.ms-progress-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.4rem;
  font-size: 15px;
}
.ms-progress-icon  { font-size: 16px; }
.ms-progress-name  { flex: 1; font-weight: 600; color: #d0d0d0; }
.ms-progress-count { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--silver); }

.ms-progress-bar {
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.ms-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.ms-narrative {
  font-size: 15px;
  color: var(--silver);
  line-height: 1.6;
  margin: 0.75rem 0 0.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 0.75rem;
}
.ms-timeline-link {
  margin-top: 0.85rem;
  text-align: right;
}
.ms-timeline-link a {
  font-size: 14px;
  font-family: 'DM Mono', monospace;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.ms-timeline-link a:hover { color: var(--text); }

@media (max-width: 480px) {
  .ms-badge { width: 80px; min-height: 80px; }
  .ms-badge-icon { font-size: 18px; }
  .ms-badge-name { font-size: 10px; }
}

/* =====================================================
   Random Stats – Redesigned Layout (rs-* classes)
   ===================================================== */

/* Section headings */
.rs-section-heading {
  margin: 2.5rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.rs-section-heading:first-child {
  margin-top: 0;
}

.rs-section-heading h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

.rs-section-heading p {
  font-size: 14px;
  color: var(--muted);
  margin: 0.25rem 0 0;
}

/* Tier 1: Metric tiles grid */
.rs-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .rs-metric-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rs-metric-tile {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1rem;
  text-align: center;
}

.rs-metric-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.35rem;
}

.rs-metric-value {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.rs-metric-season {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 680px) {
  .rs-metric-value {
    font-size: 32px;
  }
  .rs-metric-tile {
    padding: 1rem 0.75rem;
  }
}

/* Tier 2: Medium card grid */
.rs-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .rs-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rs-card {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.rs-card-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
}

.rs-card-subject {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.35rem;
}

.rs-card-subject a {
  color: var(--gold2);
  text-decoration: none;
  border-bottom: 1px dotted rgba(200,168,75,0.5);
}

.rs-card-subject a:hover {
  color: var(--gold);
  border-bottom-style: solid;
}

.rs-card-detail {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* Tier 3: List containers */
.rs-list-card {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 16px;
}

.rs-list-header {
  margin-bottom: 1rem;
}

.rs-list-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-top: 0.25rem;
}

.rs-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rs-pill {
  display: inline-flex;
  align-items: center;
  background: var(--navy3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.4rem 0.85rem;
  font-size: 13px;
  color: var(--white);
  white-space: nowrap;
}

.rs-pill a {
  color: var(--gold2);
  text-decoration: none;
  border-bottom: 1px dotted rgba(200,168,75,0.5);
}

.rs-pill a:hover {
  color: var(--gold);
  border-bottom-style: solid;
}

@media (max-width: 680px) {
  .rs-pill {
    white-space: normal;
    font-size: 14px;
    padding: 0.5rem 0.75rem;
  }
  .rs-list-card {
    padding: 1rem;
  }
}

/* ── Shared match result components (used on team + tables pages) ── */
.match-result-pill {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.match-result-pill--win  { background: rgba(76,175,80,0.15); color: var(--win); }
.match-result-pill--draw { background: rgba(120,144,156,0.18); color: #90a4ae; }
.match-result-pill--loss { background: rgba(229,57,53,0.2); color: var(--loss); }

.match-comp-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
}
.match-comp-chip--league { background: rgba(100,181,246,0.1); color: #64b5f6; }
.match-comp-chip--cup    { background: rgba(200,168,75,0.12); color: var(--gold2); }

.venue-badge {
  display: inline-flex;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0;
}
.venue-home { background: rgba(76,175,80,0.15); color: var(--win); }
.venue-away { background: rgba(100,181,246,0.15); color: #90caf9; }

/* Results table refinements */
.results-table .results-date { white-space: nowrap; color: var(--silver); font-size: 12px; }
.results-table .match-score { font-family: 'DM Mono', monospace; font-weight: 700; }
.results-table .result-circle { width: 30px; text-align: center; }
.results-table tr[data-fixture-id] { cursor: pointer; }
.results-table tr[data-fixture-id]:hover { background: rgba(255,255,255,0.03); }