/* Tournament-hub module. Extends the base design system in styles.css.
   Tokens come from the root vars there — don't redeclare. */

.hub-body { background: var(--bg); color: var(--fg); }

.hub-shell-top { background: var(--ace-black); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.hub-shell-top__row { display:flex; align-items:center; justify-content:space-between; padding-block: var(--s-3); gap: var(--s-5); }
.hub-brand { display:flex; align-items:center; gap: var(--s-3); font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; font-size: var(--fs-lg); }
.hub-brand__mark { color: var(--ace-gold); }
.hub-brand__divider { width:1px; height:18px; background: var(--border-strong); display:inline-block; }
.hub-brand__sub { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--fg-muted); letter-spacing: .14em; }
.hub-shell-nav { display:none; gap: var(--s-5); font-size: var(--fs-sm); }
.hub-shell-nav a { color: var(--fg-muted); }
.hub-shell-nav a:hover { color: var(--accent); }
@media (min-width: 720px) { .hub-shell-nav { display:flex; } }

.hub-hero { padding: var(--s-7) 0 var(--s-5); }
.hub-hero h1 { margin-top: var(--s-2); }
.hub-hero .lede { margin-top: var(--s-2); }

.field-status {
  margin-top: var(--s-4);
  display: inline-flex; align-items:center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border-left: 3px solid var(--accent);
}
.field-status__dot { width:10px; height:10px; border-radius:50%; background: #2BB673; box-shadow: 0 0 12px currentColor; }
.field-status[data-color="yellow"] .field-status__dot { background: #F5C518; }
.field-status[data-color="red"] .field-status__dot { background: #E63946; }
.field-status__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; }
.field-status__note { color: var(--fg-muted); }

.hub-tabs { background: var(--bg-alt); border-block: 1px solid var(--border); position: sticky; top: 60px; z-index: 40; }
.hub-tabs__row { display:flex; gap: var(--s-1); overflow-x:auto; padding-block: var(--s-2); scrollbar-width: thin; }
.hub-tabs__row a {
  white-space: nowrap;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .04em;
}
.hub-tabs__row a:hover { color: var(--fg); background: rgba(255,255,255,.04); }
.hub-tabs__row a.is-active { color: var(--ace-black); background: var(--accent); }

.hub-panel { padding-block: var(--s-7); }
.hub-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap: var(--s-5); margin-bottom: var(--s-5); flex-wrap: wrap; }

.hub-label { display:block; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: var(--s-1); }
.hub-input { background: var(--bg-card); color: var(--fg); border: 1px solid var(--border); padding: var(--s-2) var(--s-3); border-radius: var(--radius); font-size: var(--fs-sm); min-width: 12rem; }
.hub-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.hub-btn { display:inline-flex; align-items:center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 500; }
.hub-btn--primary { background: var(--accent); color: var(--ace-black); }
.hub-btn--primary:hover { background: var(--ace-gold-bright); color: var(--ace-black); }
.hub-btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); }
.hub-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Live grid (4 surface tiles) ---- */
.live-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.live-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display: grid; gap: var(--s-4);
  position: relative;
}
.live-tile__surface {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--fs-md);
  color: var(--accent);
}
.live-tile__game { display: grid; gap: var(--s-2); }
.live-tile__teams { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: var(--s-3); }
.live-tile__team { font-weight: 600; min-width: 0; }
.live-tile__team--home { text-align: right; }
.live-tile__team-club { font-size: var(--fs-xs); color: var(--fg-subtle); display: block; }
.live-tile__score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--fg);
  padding-inline: var(--s-3);
}
.live-tile__score.is-final { color: var(--accent); }
.live-tile__score.is-pending { color: var(--fg-subtle); }
.live-tile__meta { display:flex; gap: var(--s-3); color: var(--fg-subtle); font-size: var(--fs-xs); flex-wrap: wrap; }
.live-tile__pin { outline: 2px solid var(--accent); }
.live-tile__empty { color: var(--fg-subtle); font-style: italic; }
.live-tile__just-finished {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
  font-size: var(--fs-sm);
}
.live-tile__just-finished .label { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); display:block; margin-bottom: var(--s-1); }

/* ---- Schedule table ---- */
.schedule-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.schedule-table { width:100%; border-collapse: collapse; min-width: 720px; }
.schedule-table th, .schedule-table td { padding: var(--s-2) var(--s-3); text-align: left; border-bottom: 1px solid var(--border); }
.schedule-table th { background: var(--bg-alt); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-subtle); }
.schedule-table td.num { font-family: var(--font-mono); text-align: right; font-weight: 700; }
.schedule-table tr.is-pinned td { background: rgba(245,197,24,.07); }
.status-pill { display:inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.status-pill[data-state="scheduled"] { background: rgba(255,255,255,.06); color: var(--fg-muted); }
.status-pill[data-state="in_progress"] { background: rgba(245,197,24,.15); color: var(--accent); }
.status-pill[data-state="completed"] { background: rgba(43,182,115,.15); color: #6FD49C; }
.status-pill[data-state="forfeit"] { background: rgba(230,57,70,.15); color: #ff6e7a; }

/* ---- Bracket (lightweight CSS-only) ---- */
.bracket-container { display: grid; gap: var(--s-6); }
.bracket-division { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-5); overflow-x: auto; }
.bracket-rounds { display: flex; gap: var(--s-6); align-items: stretch; min-width: max-content; }
.bracket-round { display: flex; flex-direction: column; justify-content: space-around; gap: var(--s-4); min-width: 220px; }
.bracket-match { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-3); display: grid; gap: var(--s-1); font-size: var(--fs-sm); }
.bracket-match__row { display:flex; justify-content:space-between; gap: var(--s-3); }
.bracket-match__row.is-winner { color: var(--accent); font-weight: 600; }
.bracket-match__row .score { font-family: var(--font-mono); font-weight: 700; }
.bracket-match__row.is-tbd { color: var(--fg-subtle); font-style: italic; }

/* ---- Standings ---- */
.standings-container { display: grid; gap: var(--s-5); }
.standings-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-5); overflow-x: auto; }
.standings-card h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--s-4); }
.standings-card table { width:100%; border-collapse: collapse; min-width: 480px; }
.standings-card th, .standings-card td { padding: var(--s-2) var(--s-3); text-align: right; border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
.standings-card th:first-child, .standings-card td:first-child { text-align: left; font-family: var(--font-sans); }
.standings-card th { background: transparent; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-subtle); font-family: var(--font-sans); }
.standings-card tr:nth-child(-n+3) td { color: var(--accent); }

/* ---- Map / info / photos ---- */
.map-grid { display:grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: var(--s-5); }
.map-card { display:grid; gap: var(--s-3); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-4); }
.info-grid { display:grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.info-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-5); border-left: 3px solid var(--accent); }
.info-card h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-md); margin-bottom: var(--s-2); }
.info-card p { color: var(--fg-muted); white-space: pre-wrap; }

.photo-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
@media (min-width: 720px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(6, 1fr); } }
.photo-grid a { display:block; background: var(--bg-card); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; }
.photo-grid img { width:100%; height:100%; object-fit: cover; transition: transform var(--t-base); }
.photo-grid a:hover img { transform: scale(1.04); }

/* ---- Footer ---- */
.hub-shell-bottom { background: var(--ace-black); border-top: 1px solid var(--border); padding: var(--s-6) 0; margin-top: var(--s-9); font-size: var(--fs-sm); color: var(--fg-muted); text-align: center; }
.hub-shell-bottom__sub { color: var(--fg-subtle); font-size: var(--fs-xs); margin-top: var(--s-1); }

/* ---- Loading state ---- */
[aria-busy="true"] .live-tile, [aria-busy="true"] .schedule-table-wrap { opacity: .5; }
.hub-empty { background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: var(--s-7); text-align: center; color: var(--fg-muted); }