/* Public league pages — share guides.css (tokens, nav, footer, tables).
   guides.css doesn't declare the brand accent colours these pages use, so add them here. */
:root { --pw-green:#2ECC71; --pw-red:#FF4D5E; --pw-yellow:#FFD23F; }

/* guides.css .nav is sticky and in-flow, so it already occupies its height —
   keep only a small gap above the hero (a big value double-counts the nav). */
.pub-main { padding: 32px 0 64px; min-height: 70vh; }
.crumbs { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 18px; }
.crumbs a { color: var(--accent); }
.crumbs span { margin: 0 6px; color: var(--text-4); }

.pub-hero { margin-bottom: 28px; }
.eyebrow { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.pub-title { font-family: var(--display); font-weight: 900; font-size: clamp(34px, 7vw, 60px); line-height: .95; text-transform: uppercase; margin: 0 0 12px; }
.pub-lede { color: var(--text-2); font-size: 16px; max-width: 60ch; margin: 0; }

.pub-section { margin: 36px 0; }
.pub-h2 { font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }

.conf-block { margin-bottom: 24px; }
.conf-title { font-family: var(--display); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }
.conf-title .muted, .muted { color: var(--text-3); font-weight: 600; font-size: 12px; }

.table-scroll { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--surface); }
.std-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.std-table th { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: right; padding: 12px 10px; white-space: nowrap; }
.std-table th.left { text-align: left; }
.std-table td { font-family: var(--display); font-weight: 700; font-size: 13px; text-align: right; padding: 11px 10px; vertical-align: middle; border-top: 1px solid var(--border-soft); }
.std-table tbody tr:first-child td { border-top: 0; }
.std-table td.rank { text-align: left; width: 30px; color: var(--text-3); }
.std-table td.left { text-align: left; }
.std-table td.pts { color: var(--accent); font-weight: 900; font-size: 14px; }
.std-table td.dim { color: var(--text-3); }
.std-table td.pos { color: var(--pw-green); }
.std-table td.neg { color: var(--pw-red); }
.std-table tr.lead td { background: color-mix(in srgb, var(--pw-yellow) 9%, transparent); }
.std-table tr.adv td { background: color-mix(in srgb, var(--pw-green) 8%, transparent); }
.std-table.mini { min-width: 300px; }
.std-table.mini th, .std-table.mini td { padding: 8px 8px; font-size: 12px; }

.tname { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
a.tname:hover { color: var(--accent); }
.tdot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; display: inline-block; }

/* Team icon — the logo uploaded in the app, or a colour-filled short code */
.tbadge { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; object-fit: contain; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; }
.tbadge.fallback { background: var(--tc, var(--surface-3)); color: #fff; font-family: var(--display); font-weight: 800; font-size: 9.5px; letter-spacing: .03em; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.fx-team .tbadge, .tname .tbadge { width: 22px; height: 22px; border-radius: 6px; font-size: 8.5px; }

/* ── Team page ─────────────────────────────────────────────────────────── */
.team-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.team-hero-badge .tbadge { width: 72px; height: 72px; border-radius: var(--r-lg); font-size: 20px; }
@media (max-width: 560px) { .team-hero { gap: 12px; } .team-hero-badge .tbadge { width: 52px; height: 52px; font-size: 15px; } }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.stat-box { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 14px 12px; text-align: center; }
.sb-val { display: block; font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; color: var(--text); }
.sb-val.pos { color: var(--pw-green); } .sb-val.neg { color: var(--pw-red); }
.sb-lbl { display: block; font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; }

.tfix-list { display: grid; gap: 6px; }
.tfix { display: grid; grid-template-columns: 92px 26px 1fr auto 34px; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 9px 12px; }
.tfix-date { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.tfix-ha { font-family: var(--display); font-weight: 800; font-size: 11px; color: var(--text-4); text-align: center; }
.tfix-opp { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 14px; min-width: 0; }
.tfix-opp a { color: inherit; } .tfix-opp a:hover { color: var(--accent); }
.tfix-score { font-family: var(--display); font-weight: 900; font-size: 15px; white-space: nowrap; }
.tfix-score i { color: var(--text-3); font-style: normal; margin: 0 2px; }
.tfix-res { font-family: var(--display); font-weight: 900; font-size: 13px; text-align: center; }
.tfix-res.pos { color: var(--pw-green); } .tfix-res.neg { color: var(--pw-red); } .tfix-res.dim { color: var(--text-4); }
@media (max-width: 560px) {
  .tfix { grid-template-columns: 1fr auto 30px; row-gap: 4px; }
  .tfix-date { grid-column: 1 / -1; }
  .tfix-ha { display: none; }
}

.chip { font-family: var(--display); font-weight: 800; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text-3); }
.chip.green { background: color-mix(in srgb, var(--pw-green) 20%, transparent); color: var(--pw-green); }
.chip.red { background: color-mix(in srgb, var(--pw-red) 20%, transparent); color: var(--pw-red); }

.round-card, .bracket-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 12px; }
.round-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.round-name { font-family: var(--display); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
.round-meta { font-size: 12px; color: var(--text-3); }
.round-games { display: grid; gap: 6px; }

.fixture { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
.fx-team { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 700; font-size: 13.5px; min-width: 0; }
.fx-team.right { justify-content: flex-end; text-align: right; }
.fx-team.win { color: var(--pw-green); font-weight: 900; }
.fx-score { font-family: var(--display); font-weight: 900; font-size: 17px; white-space: nowrap; }
.fx-score i { color: var(--text-3); font-style: normal; margin: 0 3px; }
.fx-tag { grid-column: 1 / -1; text-align: center; }

.champ { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--pw-yellow); margin-bottom: 10px; padding: 8px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--pw-yellow) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pw-yellow) 35%, var(--border)); }
.champ strong { color: var(--text); }

.fineprint, .updated { font-size: 12px; color: var(--text-4); margin-top: 12px; }
.updated { text-align: center; margin-top: 40px; }

.league-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.league-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-soft); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.league-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.lc-type { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lc-name { font-family: var(--display); font-weight: 900; font-size: 24px; text-transform: uppercase; letter-spacing: .02em; }
.lc-meta { font-size: 13px; color: var(--text-3); }

@media (max-width: 560px) { .pub-main { padding: 24px 0 48px; } }