/* World Cup 2026 — editorial design system.
   Ink-on-paper, hairline rules, real type hierarchy. Deliberately flat:
   no gradients, no glass, no drop shadows, not Inter. */

:root {
  --paper:      #f7f6f3;
  --paper-2:    #f1efe9;   /* faint inset panels */
  --ink:        #16140f;
  --ink-soft:   #45413a;
  --muted:      #837d72;
  --hair:       #e2dfd6;
  --hair-strong:#cdc9bd;
  --accent:     #b23b2e;   /* used sparingly: live, featured */
  --good:       #2e7d52;

  --maxw: 1120px;
  --gut: clamp(20px, 5vw, 56px);
  --font-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
  --font-num: var(--font-sans);
}

html[data-theme="dark"] {
  --paper:      #141312;
  --paper-2:    #1c1a18;
  --ink:        #ece8e0;
  --ink-soft:   #c4bfb4;
  --muted:      #8f8a7f;
  --hair:       #2b2824;
  --hair-strong:#3a362f;
  --accent:     #e0705f;
  --good:       #6ec196;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- Masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px var(--gut);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--hair);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__ball { width: 26px; height: 26px; color: var(--ink); }
.brand__name { font-weight: 700; letter-spacing: -0.01em; font-size: 1.05rem; white-space: nowrap; }

.nav { display: flex; gap: 26px; margin-left: 18px; flex: 1; }
.nav a {
  position: relative;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 4px 0;
  transition: color .15s;
}
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -17px;
  height: 2px;
  background: var(--ink);
}

.masthead__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 999px;
  color: var(--ink-soft); cursor: pointer;
}
.icon-btn:hover { border-color: var(--hair-strong); color: var(--ink); }
.icon-btn--menu { display: none; flex-direction: column; gap: 4px; }
.icon-btn--menu span { width: 17px; height: 1.5px; background: currentColor; }

/* ---------- Layout ---------- */
.app {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) var(--gut) 80px;
  flex: 1;
}
.colophon {
  border-top: 1px solid var(--hair);
  padding: 18px var(--gut);
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.loading { color: var(--muted); padding: 40px 0; }

/* ---------- Typographic primitives ---------- */
.eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 600;
}
.display {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  margin: 0;
}
.h-section {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.rule { border: 0; border-top: 1px solid var(--hair); margin: 0; }
.rule--ink { border-top: 1.5px solid var(--ink); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 56px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--ink);
}
.section-head .more { font-size: 0.85rem; color: var(--muted); }
.section-head .more:hover { color: var(--ink); }

/* ---------- Flags ---------- */
.flag {
  display: inline-block;
  width: 1.5em; height: 1.125em;
  object-fit: cover;
  border: 1px solid var(--hair-strong);
  border-radius: 1.5px;
  vertical-align: -0.16em;
  background: var(--paper-2);
}
.flag--lg { width: 2.6em; height: 1.95em; }
.flag--xl { width: 3.6em; height: 2.7em; }
.flag--ph { /* placeholder when no real team */
  display: inline-block; width: 1.5em; height: 1.125em;
  border: 1px dashed var(--hair-strong); border-radius: 1.5px;
  vertical-align: -0.16em;
}

/* ---------- Pills / chips ---------- */
.pill {
  font-size: 0.82rem;
  padding: 6px 14px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  background: none;
  cursor: pointer;
  white-space: nowrap;
}
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }

.tag {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 600;
}
.tag--live { color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.tag--live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Overview hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.hero__meta { margin: 22px 0 4px; }
.hero__meta div { font-size: 1rem; color: var(--ink-soft); }
.hero__meta .dates { font-weight: 600; color: var(--ink); }
.hero__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px; font-weight: 600; border-bottom: 1.5px solid var(--ink);
  padding-bottom: 3px;
}
.hero__cta:hover { gap: 12px; }

.worldmap { position: relative; width: 100%; aspect-ratio: 1.48; }
.worldmap__dots { width: 100%; height: 100%; display: block; opacity: 0.85; }
/* The map is an external SVG in an <img>, so it ignores page color (renders
   black). On the dark background that's invisible, so recolor it via a filter:
   invert flips the black dots to white, brightness dims them to a soft gray. */
html[data-theme="dark"] .worldmap__dots { filter: invert(1) brightness(0.5); }

/* host-city markers plotted over the map */
.city-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); border: 1.5px solid var(--paper);
}
.city-pin--active { width: 11px; height: 11px; z-index: 2; }
.city-pin--active::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--c); opacity: .6;
}
.city-pin__label {
  position: absolute; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink);
  text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 3px var(--paper);
}
.city-pin__label--right { left: 13px; }
.city-pin__label--left { right: 13px; text-align: right; }

/* ---------- Match cards (Next matches row) ---------- */
.card-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hair);
}
.mcard {
  padding: 22px 20px 24px;
  border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 14px;
  transition: background .15s;
}
.mcard:hover { background: var(--paper-2); }
.card-row .mcard:nth-child(4n) { border-right: 0; }
.mcard__top { text-align: center; }
.mcard__top .grp { font-weight: 600; font-size: 0.82rem; }
.mcard__top .when { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.mcard__teams { display: flex; flex-direction: column; gap: 10px; }
.mteam { display: flex; align-items: center; gap: 11px; font-weight: 600; }
.mteam .flag { flex: none; }
.mteam .name { font-size: 1.02rem; }
.mteam .sc { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.mteam.lose { color: var(--muted); font-weight: 500; }
.mcard__vs { text-align: center; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
.mcard__ground { color: var(--muted); font-size: 0.8rem; text-align: center; margin-top: auto; }
.host-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; flex: none; }
.host-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: -4px 0 20px; color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; }
.host-legend__item { display: inline-flex; align-items: center; }

/* ---------- USA spotlight ---------- */
.spotlight {
  border: 1px solid var(--hair-strong);
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
}
.spotlight > div { padding: 22px 24px; border-right: 1px solid var(--hair); }
.spotlight > div:last-child { border-right: 0; }
.spotlight__lede .who { display: flex; align-items: center; gap: 12px; margin: 8px 0 6px; }
.spotlight__lede .who .name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.spotlight__lede .standing { color: var(--ink-soft); font-size: 0.92rem; }
.mini-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.mini { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; }
.mini .opp { display: flex; align-items: center; gap: 8px; }
.mini .res { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini .res small { color: var(--muted); font-weight: 600; margin-right: 6px; }
.badge-wl { width: 18px; text-align: center; font-weight: 800; font-size: 0.8rem; }
.badge-wl.W { color: var(--good); } .badge-wl.L { color: var(--accent); } .badge-wl.D { color: var(--muted); }

/* ---------- Generic list of matches ---------- */
.daygroup { margin-bottom: 30px; }
.daygroup__date {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 600; padding: 10px 0; border-bottom: 1px solid var(--hair);
}
.match-line {
  display: grid;
  grid-template-columns: 92px 1fr auto 1fr 40px;
  align-items: center;
  gap: 12px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--hair);
}
.match-line:hover { background: var(--paper-2); }
.match-line .when { color: var(--muted); font-size: 0.84rem; }
.match-line .when .grp { display: block; color: var(--ink-soft); font-weight: 600; font-size: 0.74rem; }
.match-line .side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.match-line .side.right { flex-direction: row-reverse; text-align: right; }
.match-line .side .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-line .side.lose .name { color: var(--muted); font-weight: 500; }
.match-line .score {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.05rem;
  min-width: 58px; text-align: center;
}
.match-line .score.vs { font-weight: 600; color: var(--muted); font-size: 0.8rem; }
.match-line .chev { color: var(--hair-strong); text-align: right; }
.match-line:hover .chev { color: var(--ink-soft); }

/* ---------- Tables (standings) ---------- */
.standtable { width: 100%; border-collapse: collapse; }
.standtable th {
  text-align: right; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--hair);
}
.standtable th.t-team, .standtable th.t-rank { text-align: left; }
.standtable td { padding: 13px 8px; border-bottom: 1px solid var(--hair); text-align: right; font-variant-numeric: tabular-nums; }
.standtable td.t-rank { text-align: left; color: var(--muted); width: 28px; }
.standtable td.t-team { text-align: left; }
.standtable td.t-team a { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; }
.standtable td.t-pts { font-weight: 800; }
.standtable tr.qual td.t-rank { color: var(--good); font-weight: 700; }
.standtable tr:hover td { background: var(--paper-2); }
.standtable tr.hl td { background: color-mix(in srgb, var(--accent) 9%, var(--paper)); }

/* ---------- Groups grid ---------- */
.groups-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 56px; }
.group-block { padding-top: 8px; }
.group-block h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; }

/* ---------- Teams grid ---------- */
.teams-toolbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 8px 0 28px; }
.search {
  flex: none; min-width: 220px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--hair-strong); border-radius: 999px; padding: 8px 16px;
}
.search input { border: 0; background: none; outline: none; color: var(--ink); font-family: inherit; font-size: 0.9rem; width: 160px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.team-cell {
  background: var(--paper); padding: 26px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: background .15s;
}
.team-cell:hover { background: var(--paper-2); }
.team-cell .flag { width: 3em; height: 2.25em; }
.team-cell .name { font-weight: 600; }
.team-cell .grp { font-size: 0.72rem; color: var(--muted); letter-spacing: .04em; }

/* ---------- Match detail ---------- */
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.86rem; margin-bottom: 26px; }
.back-link:hover { color: var(--ink); }
.scorebug { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin: 10px 0 8px; }
.scorebug__team { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.scorebug__team .name { font-size: 1.25rem; font-weight: 700; }
.scorebug__mid { text-align: center; }
.scorebug__score { font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.scorebug__state { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; }
.match-meta { text-align: center; color: var(--muted); font-size: 0.88rem; margin-bottom: 26px; }

.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--hair); margin: 8px 0 26px; }
.tabs button {
  background: none; border: 0; padding: 12px 0; font-family: inherit; font-size: 0.92rem;
  color: var(--muted); cursor: pointer; position: relative;
}
.tabs button:hover { color: var(--ink); }
.tabs button.is-active { color: var(--ink); font-weight: 600; }
.tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }

.timeline { display: flex; flex-direction: column; }
.tl-row { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.tl-min { text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; font-size: 0.84rem; }
.tl-ev { display: flex; align-items: center; gap: 10px; }
.tl-ev.right { flex-direction: row-reverse; text-align: right; }
.tl-ev .kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.tl-ev .who { font-weight: 600; }
.tl-ball { width: 16px; height: 16px; }

/* ---------- Bracket ---------- */
.bracket-scroll { overflow-x: auto; padding-bottom: 16px; }
.bracket { display: inline-flex; gap: 40px; min-width: min-content; }
.bcol { display: flex; flex-direction: column; justify-content: space-around; gap: 16px; min-width: 200px; }
.bcol__title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; margin-bottom: 6px; text-align: center; }
.bnode { border: 1px solid var(--hair-strong); }
.brow { display: flex; align-items: center; gap: 9px; padding: 9px 12px; }
.brow + .brow { border-top: 1px solid var(--hair); }
.brow .name { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .name.ph { color: var(--muted); font-weight: 500; font-style: italic; }
.brow .sc { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; }
.brow.win .name { color: var(--ink); }
.brow.lose { color: var(--muted); }
.brow.lose .name { color: var(--muted); font-weight: 500; }
.bnode__num { font-size: 0.66rem; color: var(--muted); padding: 4px 12px 0; letter-spacing: .08em; }

/* ---------- Stats ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--hair-strong); }
.stat { padding: 22px 24px; border-right: 1px solid var(--hair); }
.stat:last-child { border-right: 0; }
.stat__n { font-size: clamp(1.8rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat__l { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; margin-top: 6px; }
.scorer-table td.s-team, .scorer-table th.s-team { text-align: left; color: var(--muted); font-weight: 500; }
.scorer-table .s-pen { color: var(--muted); font-weight: 500; font-size: 0.82rem; }

/* ---------- News ---------- */
.news-list { border-top: 1px solid var(--hair); }
.news-item { display: flex; flex-direction: column; gap: 6px; padding: 18px 6px; border-bottom: 1px solid var(--hair); transition: background .15s; }
.news-item:hover { background: var(--paper-2); }
.news-item__title { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.news-item__meta { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Empty states (keyed-ready) ---------- */
.empty {
  border: 1px dashed var(--hair-strong);
  padding: 40px 28px; text-align: center; color: var(--muted);
}
.empty h3 { color: var(--ink-soft); font-weight: 700; margin: 0 0 8px; font-size: 1.05rem; }
.empty p { margin: 0 auto; max-width: 440px; font-size: 0.92rem; }

.notice { color: var(--muted); font-size: 0.86rem; padding: 30px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav {
    position: fixed; inset: 61px 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--hair);
    margin: 0; padding: 8px var(--gut) 18px;
    transform: translateY(-120%); transition: transform .22s ease; pointer-events: none;
  }
  .nav.open { transform: translateY(0); pointer-events: auto; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--hair); }
  .nav a.is-active::after { display: none; }
  .icon-btn--menu { display: inline-flex; }
  .hero { grid-template-columns: 1fr; }
  .worldmap { order: -1; }
  .card-row { grid-template-columns: repeat(2, 1fr); }
  .card-row .mcard:nth-child(4n) { border-right: 1px solid var(--hair); }
  .card-row .mcard:nth-child(2n) { border-right: 0; }
  .spotlight { grid-template-columns: 1fr; }
  .spotlight > div { border-right: 0; border-bottom: 1px solid var(--hair); }
  .spotlight > div:last-child { border-bottom: 0; }
  .groups-grid { grid-template-columns: 1fr; gap: 0 0; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
}
@media (max-width: 520px) {
  .card-row { grid-template-columns: 1fr; }
  .card-row .mcard { border-right: 0 !important; }
  .match-line { grid-template-columns: 64px 1fr auto 1fr; }
  .match-line .chev { display: none; }
  .team-grid { grid-template-columns: 1fr 1fr; }
}