/* ============================================================================
   World Cup 2026 Dashboard — International Typographic Style (Swiss Style)
   Paper #F6EFE5 · Ink black · Accent #F19F1D · Helvetica/Arial · strict grid.
   ========================================================================== */

:root {
  --paper:   #F6EFE5;
  --panel:   #F8F2EA;
  --ink:     #111111;
  --ink-pure:#000000;
  --muted:   #6E675D;
  --accent:  #F19F1D;
  --hover:   rgba(241, 159, 29, 0.13);  /* subtle tint marking a clickable game */
  --grain:   0.35;                       /* paper-grain overlay opacity */
  --rule:    #111111;             /* strong structural rules */
  --rule-soft: #D8CEBF;           /* hairline dividers */
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --maxw: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
  /* Side padding that keeps full-bleed bars but aligns inner content to --maxw */
  --pad: max(var(--gutter), calc((100% - var(--maxw)) / 2));
}

* { box-sizing: border-box; }

/* The root is yellow so overscrolling up (past the masthead) reveals yellow,
   never black or paper. The body keeps the paper reading surface. */
/* Reserve the scrollbar gutter so switching between a tall tab (Groups) and a
   short one (Calendar) doesn't shift the centred layout sideways. The root is
   yellow so overscroll areas and the iOS top safe-area read as the masthead
   colour, not white. */
html { background: var(--accent); scrollbar-gutter: stable; }
/* Column flex + min-height pins the footer to the bottom on short pages. Body is
   yellow so the whole backdrop — overscroll (top + bottom) and every safe area —
   reads yellow; the paper reading surface lives on <main>. */
body { background: var(--accent); min-height: 100vh; display: flex; flex-direction: column; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Tabular figures by default so scores and tables stay column-aligned. */
  font-variant-numeric: tabular-nums;
}

/* Paper grain: a fixed, non-interactive monochrome-noise layer multiplied over
   the whole page. Tweak --grain (opacity) to taste. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: var(--grain, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23pg)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--accent); }
a:hover { background: var(--accent); }

@keyframes blink { 50% { opacity: 0.2; } }

/* ---------- Masthead ----------
   A tall yellow field; the title drops to the bottom edge so it rests just above
   the tab bar, its left aligned to the first tab. Black text, light weight,
   title case. */
.site-header {
  position: relative;
  z-index: 10000;          /* sit above the grain overlay so the yellow stays clean */
  overflow: hidden;
  background: var(--accent);
  color: var(--ink);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  min-height: 220px;
  /* Add the iOS top safe-area inset so the yellow fills behind the Dynamic
     Island (env() is 0 everywhere else, so no change on desktop). */
  padding: calc(28px + env(safe-area-inset-top)) var(--pad) 2px;
}
/* Black square sitting to the LEFT of the title. Its right edge lands ~5px left
   of the title's "w" (the title sits at --pad, nudged -6px), and translateX pulls
   the box left by its own width so it never displaces the title. Its bottom lines
   up with the title baseline; overflow:hidden crops it on narrow screens where it
   would run past the left edge. */
.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--pad) - 11px);
  transform: translateX(-100%);
  height: calc(100% - 2px);
  aspect-ratio: 1 / 1;
  background: var(--ink-pure);
}
.title-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
}
.site-header h1 {
  /* Nudge left a few px so the "w" sidebearing optically aligns with the nav. */
  margin: 0 0 0 -6px;
  font-size: clamp(26px, 5.2vw, 48px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-transform: lowercase;
}
/* Fake "lowercase" digits by scaling the year down to ~lowercase height; thin
   weight per the brief. */
.title-year { font-size: 0.78em; font-weight: 300; }
.status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; flex: none; }
.dot.ok { background: var(--ink); }
.dot.live { background: var(--ink); animation: blink 2.2s steps(1, end) infinite; }
.dot.stale { background: #8A8175; }

/* Live ticker, top-right of the masthead. Inverted "LIVE" tag (black on the
   yellow field, yellow text); matchup in black; stacks when several are live. */
.live-bar {
  position: absolute;
  top: 0;
  right: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.live-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
  color: var(--ink);
  font-size: 12px;
}
.live-item:hover { background: transparent; }
.live-item:hover .live-match {
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.live-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  background: var(--ink);
  color: var(--accent);
  animation: blink 2.2s steps(1, end) infinite;
}
.live-match { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Tabs ----------
   Yellow strip continuing the masthead, black labels. The active underline is
   black and only as wide as its label (no horizontal padding; spacing comes from
   the gap), sitting close beneath the text. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 0 var(--pad);
  background: var(--accent);
  border-bottom: 2px solid var(--accent);
  position: relative;
  z-index: 10000;          /* above the grain, like the masthead */
}
.tab {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  padding: 5px 0;
  margin-bottom: -2px;
  border-bottom: 3px solid transparent;
}
.tab:hover { border-bottom-color: rgba(17, 17, 17, 0.35); }
.tab.active { border-bottom-color: var(--ink); }
/* "Updated …" rides at the right of the tab bar, vertically centred. */
.tabs .status { margin-left: auto; align-self: center; }

main { flex: 1 0 auto; background: var(--paper); padding: 36px var(--pad) 60px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Standings ----------
   No boxes. Groups are separated by whitespace, each table is borderless except
   for one hairline that anchors the column labels. The accent is expressed as a
   solid block on qualifying ranks — never as a drawn border. */
.groups-grid {
  display: grid;
  /* 3 per row. minmax(0, 1fr) keeps tracks equal and lets them shrink, so a long
     team name can never widen its column past its siblings. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: 44px;
}
.group { min-width: 0; }

/* Fixed layout: every group's columns share identical widths, so the stat
   columns line up vertically across all groups and the team column absorbs the
   slack (truncating with an ellipsis rather than stretching the table). */
.standings-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.standings-table thead th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 5px 7px;
  text-align: right;
  vertical-align: baseline;   /* "GROUP" and the stat labels share one baseline */
}
.standings-table th.pos { width: 22px; padding-left: 0; text-align: center; }
/* The group lockup (big letter + small "GROUP") lives where the "Team" header was
   — not a column title, just a compact identifier. The big letter is pulled left
   to sit at the group's left edge. */
.standings-table th.group-th {
  width: auto;                 /* takes all slack */
  text-align: left;
  padding-left: 0;
  white-space: nowrap;
}
.group-letter {
  font-size: 42px;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-left: -22px;          /* align the letter with the group's left edge */
}
.group-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-left: 8px;
}
.standings-table th:nth-child(3),
.standings-table th:nth-child(4),
.standings-table th:nth-child(5),
.standings-table th:nth-child(6) { width: 22px; }   /* P W D L (single digit) */
.standings-table th:nth-child(7) { width: 32px; }   /* GD (+11) */
.standings-table th:nth-child(8) { width: 28px; }   /* Pts */

.standings-table tbody td {
  padding: 8px 5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.standings-table td.pos {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}
.standings-table td.team-cell { text-align: left; }
.standings-table td.pts { font-weight: 800; }

.team-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team-cell .team-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.team-cell .name { flex: 1 1 auto; min-width: 0; }   /* allow ellipsis in flex */
/* "Clinched" tick, pinned to the right of the team cell. */
.qual-badge { flex: none; font-size: 9px; font-weight: 800; line-height: 1; padding: 3px 5px; background: var(--accent); color: var(--ink); }
.crest { width: 20px; height: 20px; object-fit: contain; flex: none; }
.name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Qualification reads as a solid gold block on the rank + a bolder team name. */
.standings-table tbody tr.qualify td.pos { background: var(--accent); color: var(--ink); font-weight: 800; }
.standings-table tbody tr.qualify .name { font-weight: 700; }

.legend {
  margin-top: 40px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.legend .swatch { width: 12px; height: 12px; background: var(--accent); display: inline-block; }

/* ---------- Schedule ---------- */
.schedule-controls { margin-bottom: 26px; }
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}
.chip {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 7px 12px;
  cursor: pointer;
}
.chip:hover { color: var(--ink); }
.chip.active { background: var(--accent); color: var(--ink); }

.day-group { margin-bottom: 30px; }
.day-heading {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);   /* single structural rule per day */
}
.match-row {
  display: grid;
  grid-template-columns: 78px 1fr auto 1fr 104px;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
}
.match-row.is-live { box-shadow: inset 4px 0 0 var(--accent); }
.match-time {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
}
.badge.live { background: var(--accent); color: var(--ink); animation: blink 2.2s steps(1, end) infinite; }
.badge.ft { background: var(--ink); color: var(--paper); }
.match-team { display: flex; align-items: center; min-width: 0; }
.match-team.home { justify-content: flex-end; text-align: right; }
/* Link hugs just the flag + name so the rest of the cell clicks through to the game. */
.match-team .team-link { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.match-team .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-weight: 500; }
.match-team.win .name { font-weight: 800; }
.match-score {
  font-weight: 800;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  min-width: 58px;
  text-align: center;
  letter-spacing: 0.02em;
}
.match-score .vs { color: var(--muted); font-weight: 700; font-size: 12px; }
.match-score .pens { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.match-meta { font-size: 10px; color: var(--muted); text-align: right; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Bracket ----------
   Six columns (R32, R16, QF, SF, third place, final), each a top-aligned stack
   of game boxes. Boxes are transparent — just the country names with a single
   black rule down the left edge. The whole grid's font-size scales with the
   viewport so all six columns fit on a phone in portrait without sideways
   scrolling. */
.bracket { padding-bottom: 16px; }
.bracket-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr;
  align-items: stretch;
  max-width: 860px;
  margin: 0 auto;
  column-gap: clamp(6px, 1.2vw, 16px);
  font-size: clamp(7px, 1.5vw, 13px);
  /* Fixed height (one --pitch per first-round slot) lets each column distribute
     its boxes with space-around, so every game lands vertically centred between
     the two that feed it. Height is in em, so it scales with the font. */
  --pitch: 5.6em;
  height: calc(16 * var(--pitch));
}
.bracket-col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-width: 0;
}
.bracket-slot { display: flex; flex-direction: column; min-width: 0; }
.game-label {
  font-size: 0.78em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.45em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Transparent box with a single rule on its left edge. */
.bracket-match {
  border-left: 1px solid var(--ink);
  padding-left: 0.5em;
}
.bracket-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4em;
  padding: 0.18em 0;
  font-size: 1em;
}
/* Link hugs just the flag + name; the score and gap click through to the game. */
.bracket-team .team-link { display: inline-flex; align-items: center; gap: 0.4em; min-width: 0; }
.bracket-team .crest { width: 1.2em; height: 1.2em; }
.bracket-team .name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.bracket-team .sc { font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.bracket-team.tbd .name { color: var(--muted); font-weight: 400; }
.bracket-team.winner .name { font-weight: 800; }

.champion-card {
  max-width: 360px;
  margin: 0 auto 26px;
  background: var(--accent);
  color: var(--ink);
  border: 2px solid var(--rule);
  padding: 18px 22px;
}
.champion-card .trophy { font-size: 26px; line-height: 1; }
.champion-card .label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; margin-top: 6px; }
.champion-card .name { font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; margin-top: 4px; }

/* ---------- Empty / footer ---------- */
.empty {
  border: 2px dashed var(--rule);
  padding: 48px 16px;
  text-align: center;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}
.site-footer {
  background: var(--paper);
  color: var(--ink);
  padding: 10px var(--pad) 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.site-footer a { color: var(--ink); box-shadow: none; }
.site-footer a:hover { background: transparent; text-decoration: underline; }
.sep { margin: 0 10px; color: var(--ink); }

/* ---------- Detail pages (team / game) ----------
   Built from the same components as the rest of the site: the group table
   (.standings-table) and the match list (.match-row). */
#detail-view { display: none; }
body.viewing-detail .tab-panel { display: none; }
body.viewing-detail #detail-view { display: block; }

/* Team names are links everywhere — plain text until hovered. */
.team-link { color: inherit; box-shadow: none; }
a.team-link { cursor: pointer; }
a.team-link:hover { background: transparent; }
/* Underline only the glyphs, not the full-width flex cell. */
a.team-link:hover .name {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.detail-back {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  box-shadow: none;
}
.detail-back:hover { color: var(--ink); background: transparent; }

/* Team page header */
.team-head { display: flex; align-items: center; gap: 18px; margin-bottom: 40px; }
.team-head .crest { width: 54px; height: 54px; }
.team-name {
  margin: 0;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.team-meta {
  margin-top: 9px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}

/* Game page header: two team rows with the scoreline, then a status line */
.game-stage {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 16px;
}
.game-head { max-width: 460px; margin-bottom: 16px; }
.game-pens {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.game-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  font-size: clamp(20px, 4vw, 30px);
}
.game-team + .game-team { border-top: 1px solid var(--rule-soft); }
.game-team .team-link { display: flex; align-items: center; gap: 12px; min-width: 0; }
.game-team .crest { width: 30px; height: 30px; }
.game-team .name { font-weight: 500; }
.game-team.win .name { font-weight: 800; }
.game-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.game-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 40px;
}

.section-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
}
#detail-view .group { margin-bottom: 40px; max-width: 440px; }

/* Highlight the relevant team row(s) within a group table. */
.standings-table tr.current td.team-cell { box-shadow: inset 3px 0 0 var(--accent); }
.standings-table tr.current .name { font-weight: 800; }

/* A clickable game (calendar row, bracket box) tints subtly on hover. */
.match-row[data-game], .bracket-match[data-game] { cursor: pointer; }
.match-row[data-game]:hover,
.bracket-match[data-game]:hover { background: var(--hover); }
.match-row[data-game]:focus-visible,
.bracket-match[data-game]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .groups-grid { grid-template-columns: minmax(0, 1fr); }
  .match-row { grid-template-columns: 70px 1fr auto 1fr; }
  .match-meta { display: none; }
  .match-team .name { font-size: 13px; }

  /* Shrink the status + footer text instead of letting them wrap. */
  .tabs { gap: 14px; }
  .status { font-size: 9px; letter-spacing: 0.05em; white-space: nowrap; }
  .site-footer { font-size: 9px; letter-spacing: 0.05em; }

  .champion-card { padding: 14px 16px; }
}