/* ============================================================
   World Cup 2026 — UK Watch Guide
   "Matchday broadcast" editorial aesthetic.
   ============================================================ */

/* Self-hosted fonts (SIL OFL) — Bricolage Grotesque + Hanken Grotesk.
   Both are variable; one woff2 per subset covers the whole weight axis, so a
   single face per subset is declared with a weight range. Self-hosting drops
   two render-blocking cross-origin requests and lets the CSP stay 'self'. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #080b0a;
  --surface: #0f1513;
  --surface-2: #151d1a;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #eaf2ee;
  --muted: #8fa39a;
  --accent: #00e08a;
  --accent-ink: #04140d;
  --bbc: #ff4d6d;
  --itv: #ffce3a;
  --blue: #2f6bff;
  --radius: 16px;
  --max: 1040px;
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f3f5f2;
  --surface: #ffffff;
  --surface-2: #f0f3ef;
  --border: rgba(13, 26, 20, 0.1);
  --border-strong: rgba(13, 26, 20, 0.18);
  --text: #11201a;
  --muted: #5d6b64;
  --accent: #008656;
  --accent-ink: #ffffff;
  --bbc: #e0224e;
  --itv: #b9820a;
  --blue: #1d4ed8;
  --shadow: 0 18px 40px -28px rgba(20, 40, 30, 0.45);
  color-scheme: light;
}

/* With no explicit choice (JavaScript disabled, or before app.js applies the
   stored/system theme) follow the OS preference instead of defaulting to dark.
   Mirrors the [data-theme="light"] palette above; the :not() guard means an
   explicit data-theme set by app.js always wins. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f3f5f2;
    --surface: #ffffff;
    --surface-2: #f0f3ef;
    --border: rgba(13, 26, 20, 0.1);
    --border-strong: rgba(13, 26, 20, 0.18);
    --text: #11201a;
    --muted: #5d6b64;
    --accent: #008656;
    --accent-ink: #ffffff;
    --bbc: #e0224e;
    --itv: #b9820a;
    --blue: #1d4ed8;
    --shadow: 0 18px 40px -28px rgba(20, 40, 30, 0.45);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

/* The `hidden` attribute must win over display rules below (e.g. .filter-banner,
   .day-tabs set display:flex, which would otherwise override [hidden]). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

/* Atmosphere: green glow + faint pitch stripes + grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(0, 224, 138, 0.16), transparent 60%),
    radial-gradient(900px 500px at -5% 0%, rgba(47, 107, 255, 0.1), transparent 55%),
    repeating-linear-gradient(90deg, transparent 0, transparent 78px, rgba(255, 255, 255, 0.014) 78px, rgba(255, 255, 255, 0.014) 156px);
  pointer-events: none;
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(0, 147, 95, 0.12), transparent 60%),
    radial-gradient(900px 500px at -5% 0%, rgba(29, 78, 216, 0.07), transparent 55%),
    repeating-linear-gradient(90deg, transparent 0, transparent 78px, rgba(0, 0, 0, 0.018) 78px, rgba(0, 0, 0, 0.018) 156px);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--accent); }

::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Top bar ---------- */
.topbar { background: #000; color: #eba800; font-size: 0.78rem; padding: 0.4rem 1.25rem; }
.topbar-inner { max-width: var(--max); margin: 0 auto; display: flex; justify-content: flex-end; }
.topbar a { color: #eba800; text-decoration: none; font-weight: 600; letter-spacing: 0.02em; }
.topbar a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  border-bottom: 1px solid var(--border);
  padding: 3.4rem 1.25rem 2.6rem;
  overflow: hidden;
}
.hero::after { /* accent baseline */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent 45%);
  pointer-events: none;
}
.hero-inner { max-width: var(--max); margin: 0 auto; position: relative; }

.hero h1 {
  font-family: var(--font-display);
  margin: 0 0 1.6rem;
  font-size: clamp(2.6rem, 7.5vw, 5.4rem);
  /* Give long country names (e.g. "United Kingdom", "Amerika Birleşik
     Devletleri") room to breathe on the wrap line — the wavy underline on
     line 2 was kissing the descenders of line 1 at 0.92. */
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
  animation: rise 0.6s 0.08s both;
}
.subtitle {
  margin: 0 0 1.4rem;
  color: var(--muted);
  max-width: 50ch;
  font-size: 1.02rem;
  animation: rise 0.6s 0.14s both;
}
/* Inline country trigger inside the H1 */
.country-anchor {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.country-trigger {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  border-radius: 4px;
  /* Match the H1 letter scale precisely */
  font-family: var(--font-display);
  font-weight: 800;
  line-height: inherit;
}
.country-trigger #heroCountry {
  text-decoration: underline wavy color-mix(in srgb, var(--accent) 55%, transparent);
  text-underline-offset: 0.14em;
  text-decoration-thickness: 0.06em;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.country-trigger:hover #heroCountry,
.country-trigger:focus-visible #heroCountry,
.country-trigger[aria-expanded="true"] #heroCountry {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.country-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.country-caret {
  width: 0.45em; height: 0.32em;
  align-self: center;
  margin-bottom: 0.08em;
  color: var(--accent);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.country-trigger[aria-expanded="true"] .country-caret { transform: rotate(180deg); }

/* Native popover lives in the browser's top layer — no z-index gymnastics
   needed. JS sets top/left from the trigger's bounding box. */
.country-popover {
  position: fixed;
  margin: 0; /* reset UA default for [popover] */
  min-width: 16rem;
  max-width: min(22rem, 92vw);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px color-mix(in srgb, #000 35%, transparent),
              0 2px 6px color-mix(in srgb, #000 12%, transparent);
  padding: 0.4rem;
  display: none; /* :popover-open turns it back on */
  flex-direction: column;
  gap: 0.15rem;
}
.country-popover:popover-open {
  display: flex;
  /* Fade in only — no Y translation so the position never shifts after open. */
  animation: country-pop-in 0.14s ease-out;
}
@keyframes country-pop-in { from { opacity: 0; } to { opacity: 1; } }

.country-option {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.country-option:hover,
.country-option:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  outline: none;
}
.country-option.is-current { color: var(--accent); }
.country-flag { font-size: 1.1rem; line-height: 1; }
.country-check { font-weight: 800; }
@media (max-width: 560px) {
  .country-popover { min-width: 14rem; }
}

.settings-toggle {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  width: 2.6rem; height: 2.6rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.settings-toggle svg { width: 1.3rem; height: 1.3rem; display: block; }
.settings-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Settings popover reuses .howto-popover chrome; rows lay out label vs control. */
.settings-popover .setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--border);
}
.settings-popover .setting-label { font-weight: 600; color: var(--text); }
.settings-popover select {
  font: inherit; font-size: 0.95rem; padding: 0.45rem 0.6rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  min-width: 12rem;
}
.theme-choices { display: inline-flex; gap: 0.35rem; }
.theme-choices button {
  font: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 0.4rem 0.9rem; cursor: pointer;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.theme-choices button.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent); border-color: var(--accent);
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Main ---------- */
main { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* On now / Up next */
.on-now {
  position: relative;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.on-now::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--accent);
}
.on-now.live { background: linear-gradient(135deg, color-mix(in srgb, var(--bbc) 20%, var(--surface)), var(--surface)); }
.on-now.live::before { background: var(--bbc); }
.on-label {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent); display: inline-flex; align-items: center; gap: 0.45rem;
}
.on-now.live .on-label { color: var(--bbc); }
.on-now.live .on-label .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--bbc); animation: pulse 1.4s ease-in-out infinite; }
.on-time {
  font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--text);
  margin: 0.35rem 0 0.1rem; display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap;
}
.on-time-day { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--muted); letter-spacing: 0; }
.on-match { font-family: var(--font-display); font-size: clamp(1.4rem, 3.6vw, 2rem); font-weight: 700; letter-spacing: -0.01em; margin: 0.4rem 0 0.25rem; }
.on-match .sep { color: var(--muted); font-weight: 400; margin: 0 0.45rem; }
.on-meta { font-size: 0.84rem; color: var(--muted); margin-bottom: 0.7rem; }
.on-watch { display: flex; align-items: center; gap: 0.6rem; }

/* How-to popover */
.howto-link {
  font: inherit; font-size: 0.95rem; color: var(--accent); background: none; border: 0; padding: 0;
  cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.howto-link:hover { color: var(--text); }
.howto-popover {
  max-width: min(36rem, calc(100vw - 2rem)); width: 100%; margin: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
}
.howto-popover::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); }
.popover-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.3rem; }
.popover-head h2 { font-family: var(--font-display); margin: 0; font-size: 1.25rem; }
.popover-close { font: inherit; font-size: 1rem; line-height: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; width: 2rem; height: 2rem; cursor: pointer; color: var(--text); }
.popover-close:hover { border-color: var(--accent); }
.howto-popover ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.howto-popover li { margin-bottom: 0.5rem; }

/* ---------- Match detail modal ---------- */
.is-clickable { cursor: pointer; }
.match-info { font: inherit; font-size: 1.15rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--muted); padding: 0.1rem 0.35rem; border-radius: 6px; transition: color 0.12s ease, transform 0.12s ease; }
.match-info:hover { color: var(--accent); transform: translateX(2px); }

.match-modal { max-width: min(34rem, calc(100vw - 1.5rem)); }
.match-modal-body { max-height: min(70vh, 40rem); overflow-y: auto; }
.mm-tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.mm-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; margin: 0.7rem 0 0.45rem; }
.mm-team { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; min-width: 0; }
.mm-home { justify-content: flex-end; text-align: right; }
.mm-away { justify-content: flex-start; text-align: left; }
.mm-team-name { overflow-wrap: anywhere; }
.mm-flag { font-size: 1.4rem; }
.mm-score { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 800; white-space: nowrap; text-align: center; }
.mm-score .sep { color: var(--muted); font-weight: 400; margin: 0 0.3rem; }
.mm-score.mm-ko { font-size: 1.25rem; color: var(--accent); }
.mm-status { text-align: center; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.6rem; }
.mm-status.live { color: var(--bbc); display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.mm-status.live .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bbc); animation: pulse 1.4s ease-in-out infinite; }
.mm-status.finished { color: var(--muted); }
.mm-soon { color: var(--accent); }
.mm-soon .countdown { font-variant-numeric: tabular-nums; }
.mm-tbc { color: var(--muted); }

.mm-meta { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.6rem 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; }
.mm-watch { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; padding: 0.55rem 0; border-top: 1px solid var(--border); }
.mm-watch-label { font-size: 0.78rem; color: var(--muted); }

.mm-section { padding-top: 0.7rem; margin-top: 0.2rem; border-top: 1px solid var(--border); }
.mm-section h3 { font-family: var(--font-display); font-size: 0.95rem; margin: 0 0 0.55rem; }

.mm-st-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.mm-st-row { display: grid; grid-template-columns: 1.2rem minmax(5rem, 1fr) 2fr auto; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.mm-st-pos { color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.mm-st-team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-st-row.is-here .mm-st-team { font-weight: 800; color: var(--accent); }
.mm-st-bar { background: var(--surface-2); border-radius: 999px; height: 0.55rem; overflow: hidden; }
.mm-st-fill { display: block; height: 100%; width: 0; background: var(--border-strong); border-radius: 999px; transition: width 0.35s ease; }
.mm-st-row.qualify .mm-st-fill, .mm-st-row.is-here .mm-st-fill { background: var(--accent); }
.mm-st-pts { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.2rem; text-align: right; }

.mm-rel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.mm-rel-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.45rem 0.6rem; cursor: pointer; transition: border-color 0.12s ease; }
.mm-rel-row:hover { border-color: var(--accent); }
.mm-rel-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); font-size: 0.8rem; min-width: 2.8rem; }
.mm-rel-teams { flex: 1; min-width: 0; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-rel-teams .sep { color: var(--muted); margin: 0 0.3rem; }

.mm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem; padding-top: 0.8rem; margin-top: 0.2rem; border-top: 1px solid var(--border); }
.mm-actions .fav-star { font-size: 1.3rem; }

@media (max-width: 560px) {
  .mm-team { font-size: 0.92rem; }
  .mm-flag { font-size: 1.15rem; }
  .mm-score { font-size: 1.35rem; }
  .mm-st-row { grid-template-columns: 1rem minmax(3.5rem, 1fr) 1.4fr auto; gap: 0.4rem; }
}

/* ---------- Controls ---------- */
.controls-body { padding: 0 0.1rem 0; }

/* Shared collapsible-row chrome: Filters, Your matches and Past matches share
   one disclosure look — a caret that rotates open + an underlined heading. */
.collapsible-summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text);
  letter-spacing: -0.01em; padding: 0.5rem 0.75rem; margin: 0 0 0.7rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; transition: background 0.14s ease, color 0.14s ease;
}
.collapsible-summary::-webkit-details-marker { display: none; }
.collapsible-summary::before {
  content: "▸"; color: var(--accent); font-size: 0.8em; line-height: 1;
  transition: transform 0.15s ease;
}
.collapsible[open] > .collapsible-summary::before { transform: rotate(90deg); }
/* Collapsed: drop the summary's content gap so adjacent collapsed rows sit close. */
.collapsible:not([open]) > .collapsible-summary { margin-bottom: 0; }
.collapsible-summary:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 17%, var(--surface)); }
.collapsible-summary .day-sub { font-family: var(--font-body); color: var(--muted); font-weight: 500; font-size: 0.78rem; letter-spacing: 0; }

/* ---------- Page sections: Filters / Past / Your / Next ---------- */
/* Each is a host with one uniform bottom gap, so the four stack evenly. */
.section { margin: 0; }
#filters, .section-host { margin: 0 0 0.9rem; }
.section-host[hidden] { display: none; }
.section-count { font-family: var(--font-body); color: var(--muted); font-weight: 500; font-size: 0.78rem; }
/* Section controls (past toggle, calendar). Lives in the body (so it hides when
   the row collapses and never nests inside the summary's button role), but is
   absolutely positioned onto the title line to save vertical space. */
.section.collapsible { position: relative; }
.section-tools {
  position: absolute; top: 0.4rem; right: 0.7rem; height: 1.65rem;
  display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem;
}

/* Per-section past toggle pill. */
.past-toggle {
  font: inherit; font-size: 0.72rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.22rem 0.6rem; cursor: pointer; white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.past-toggle:hover { border-color: var(--accent); color: var(--text); }
.past-toggle.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Up Next: hero card (the on-now card, standalone gap dropped) plus the day's
   other matches as regular, smaller cards beneath it. */
.upnext-section .on-now { margin-bottom: 0; }
.upnext-more { margin-top: 0.85rem; }
.upnext-more .match:last-child { margin-bottom: 0; }

/* Recent results: a row of compact result cards (its own collapsible section). */
.upnext-results { display: flex; gap: 0.6rem; }
.upnext-results .result-mini { flex: 1 1 0; min-width: 0; }
/* Score line `{flag} {CODE} {home} × {away} {CODE} {flag}` + a tiny when/round line. */
.result-mini {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.5rem 0.6rem;
}
.rm-main { display: flex; align-items: center; justify-content: center; gap: 0.45rem; white-space: nowrap; }
.rm-side { display: inline-flex; align-items: center; gap: 0.3rem; }
.rm-flag { font-size: 1.05rem; line-height: 1; }
.rm-code { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; }
.rm-score {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 1.05rem; display: inline-flex; align-items: baseline;
}
.rm-x { color: var(--muted); font-weight: 400; font-size: 0.78em; margin: 0 0.28rem; }
.rm-when { font-size: 0.6rem; color: var(--muted); white-space: nowrap; letter-spacing: 0.02em; }
/* Three across only on wide screens; stack on tablets/phones so each row breathes. */
@media (max-width: 720px) { .upnext-results { flex-direction: column; } }
.section-day + .section-day { margin-top: 1.2rem; }
.section-day-heading {
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted); margin: 0 0 0.5rem;
}
#search {
  width: 100%; padding: 0.85rem 1.05rem; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#search::placeholder { color: var(--muted); }
#search:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; align-items: center; }
select {
  padding: 0.55rem 0.7rem; font: inherit; font-size: 0.9rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}

/* Themed dropdowns: native arrow removed, a tinted caret drawn over the field
   so the selects match the app's surface/accent palette in both themes. */
.select-wrap { position: relative; display: inline-flex; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  padding: 0.5rem 2rem 0.5rem 0.8rem;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px;
  font-weight: 600; color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select-wrap::after {
  content: ""; position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);
  width: 0.7rem; height: 0.45rem; pointer-events: none; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 2h10L6 7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 2h10L6 7z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background 0.15s ease;
}
.select-wrap:hover::after, .select-wrap:focus-within::after { background: var(--accent); }
.select-wrap:hover select { border-color: var(--border-strong); }

/* Slim always-visible strip below Up Next: live-score status + share/refresh,
   which used to live inside the (now collapsible) Filters body. */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; align-items: center; margin: 0 0 0.9rem; min-height: 1.4rem; }
.toolbar:empty, .toolbar p:empty { display: none; }
.toolbar-actions { margin: 0; display: inline-flex; gap: 0.4rem; margin-left: auto; }
.score-status { margin: 0 0 0.6rem; font-size: 0.82rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; }
.score-status:empty { display: none; }
.refresh-btn { font: inherit; font-size: 0.78rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer; transition: border-color 0.15s ease; }
.refresh-btn:hover { border-color: var(--accent); }

/* Active-filter banner */
.filter-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0 0 0.9rem; padding: 0.65rem 0.9rem; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 70%, #1126a8));
  color: #fff; border: 1px solid color-mix(in srgb, var(--blue) 60%, white 10%);
  box-shadow: var(--shadow);
  animation: rise 0.25s both;
}
.filter-banner .fb-label { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.95; }
.filter-banner .fb-chip { font-size: 0.78rem; font-weight: 600; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.35); padding: 0.2rem 0.6rem; border-radius: 999px; }
.filter-banner .fb-clear { margin-left: auto; font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--blue); background: #fff; border: 0; border-radius: 999px; padding: 0.28rem 0.75rem; cursor: pointer; transition: transform 0.12s ease; }
.filter-banner .fb-clear:hover { transform: translateY(-1px); }

/* Day tabs */
.day-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.25rem 0 0.7rem; scrollbar-width: thin; }
.day-tabs button { flex: 0 0 auto; font: inherit; font-size: 0.78rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.38rem 0.75rem; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease; }
.day-tabs button:hover { border-color: var(--accent); color: var(--text); }
.day-tabs button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.day-tabs button.active .tab-count { color: var(--accent-ink); }
.day-tabs .tab-count { color: var(--accent); font-size: 0.7rem; font-weight: 700; margin-left: 0.2rem; }

/* ---------- Fixture sections ---------- */
.day-heading {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0 0 0.7rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 0.5rem; letter-spacing: -0.01em;
}
.day-heading .day-sub { font-family: var(--font-body); color: var(--muted); font-weight: 500; font-size: 0.78rem; letter-spacing: 0; }

.match {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 1rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.6rem;
  position: relative;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.match:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.match.is-live { border-color: color-mix(in srgb, var(--bbc) 55%, transparent); }
.match.is-live::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--bbc); }

.match-time { text-align: center; }
.match-time .time { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.match-time .group { font-size: 0.66rem; color: var(--muted); margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.04em; }
.match-time .status { margin-top: 0.35rem; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.match-time .status.finished { color: var(--muted); }
.match-time .status.live { color: var(--bbc); display: inline-flex; align-items: center; gap: 0.3rem; }
.match-time .status.live .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bbc); animation: pulse 1.4s ease-in-out infinite; }
.match-time .countdown { margin-top: 0.3rem; font-size: 0.64rem; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.match-time .countdown:empty { display: none; }

.match-teams { min-width: 0; }
.match-teams .vs { font-size: 1.05rem; font-weight: 600; }
.match-teams .vs .sep { color: var(--muted); font-weight: 400; margin: 0 0.35rem; }
.match-teams .vs .sc { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 1.2rem; margin: 0 0.15rem; }
.match-meta { font-size: 0.76rem; color: var(--muted); margin-top: 0.25rem; }
/* Penalty-shootout result line (card / bracket / modal). */
.pens-note { font-size: 0.76rem; font-weight: 600; color: var(--muted); margin-top: 0.2rem; }
.bracket-tree .pens-note, .bracket-standalone .pens-note { font-size: 0.62rem; margin-top: 0.1rem; }
.mm-status + .pens-note { text-align: center; margin: -0.3rem 0 0.6rem; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Follow */
.team { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 6px; transition: color 0.12s ease; }
.team:hover { color: var(--accent); }
.team.followed { color: var(--accent); }
.team .star { color: var(--itv); font-size: 0.85em; }
/* Forecast (projected) knockout slots: faded + non-interactive, to read as a
   prediction rather than a confirmed team. --muted keeps text contrast AA-safe. */
.team.forecast, .team.forecast:hover { color: var(--muted); font-style: italic; cursor: default; }
.mm-team-name.forecast { color: var(--muted); font-style: italic; }

/* Per-match favourite star — outer (right) edge of the broadcast row. */
.fav-star {
  flex: none; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--muted); padding: 0.1rem 0.15rem; border-radius: 6px;
  transition: color 0.12s ease, transform 0.12s ease;
}
.fav-star:hover { color: var(--accent); transform: scale(1.12); }
.fav-star.on { color: var(--accent); }

/* Broadcast — channel badge hugs the leading edge of the row.
   Mobile: row sits under the listing, so channel is left-most.
   Desktop: row is the right-most grid cell, so we reverse so channel is right-most.
   Either way, the channel always stays closest to the row's outer edge. */
.broadcast { white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; flex-direction: row-reverse; justify-content: flex-start; }
.channel {
  display: inline-block; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.01em;
  padding: 0.32rem 0.62rem; border-radius: 8px; color: #0d1117;
}
.channel.bbc { background: #cb3d57; color: #fff; }
.channel.itv { background: #ffce3a; color: #1a1300; }
.channel.fox { background: #003087; color: #fff; }
.channel.fs1 { background: #f4ad00; color: #1a1300; }
.channel.globo { background: #cc0000; color: #fff; }
.channel.sportv { background: #288328; color: #fff; }
.channel.trt1 { background: #e30a17; color: #fff; }
.channel.trtspor { background: #1b4f9c; color: #fff; }
.channel.ctv { background: #d4202c; color: #fff; }
.channel.tsn { background: #f4c100; color: #1a1300; }
.channel.rds { background: #003a7d; color: #fff; }
.channel.canal5 { background: #008342; color: #fff; }
.channel.azteca7 { background: #e01a22; color: #fff; }
.channel.tudn { background: #00377b; color: #fff; }
.channel.la1 { background: #007c98; color: #fff; }
.channel.telecinco { background: #003e93; color: #fff; }
.channel.ard { background: #0034b3; color: #fff; }
.channel.zdf { background: #ff7c1c; color: #1a1300; }
.channel.magentatv { background: #e20074; color: #fff; }
.channel.tf1 { background: #003d7a; color: #fff; }
.channel.m6 { background: #da2741; color: #fff; }
.channel.bein { background: #5a2a82; color: #fff; }
.channel.nhk { background: #db2929; color: #fff; }
.channel.tvasahi { background: #0a78c2; color: #fff; }
.channel.abema { background: #008500; color: #fff; }
.channel.telefe { background: #007aa8; color: #fff; }
.channel.dsports { background: #00205b; color: #fff; }
.channel.rtp1 { background: #007a33; color: #fff; }
.channel.sporttv { background: #1d1d2c; color: #fff; }
.channel.caracol { background: #003da5; color: #fff; }
.channel.rcn { background: #e2231a; color: #fff; }
.channel.teleamazonas { background: #0072ce; color: #fff; }
.channel.ecdf { background: #008434; color: #fff; }
.channel.teledoce { background: #e2001a; color: #fff; }
.channel.vtv { background: #f7a800; color: #1a1300; }
.channel.telefuturo { background: #d6001c; color: #fff; }
.channel.tigosports { background: #0a1f8f; color: #fff; }
.channel.tbc { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.channel.shared { background: linear-gradient(90deg, #cb3d57 50%, #8a6f1f 50%); color: #fff; }
.stream { font-size: 0.72rem; color: var(--muted); }
.stream a { text-decoration: none; }
.stream a:hover { text-decoration: underline; }
.cal-btn { font: inherit; font-size: 0.95rem; line-height: 1; background: none; border: 0; cursor: pointer; padding: 0.15rem; opacity: 0.6; border-radius: 6px; transition: opacity 0.12s ease, transform 0.12s ease; }
.cal-btn:hover { opacity: 1; transform: scale(1.15); }
.cal-all { font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.22rem 0.6rem; cursor: pointer; }
.cal-all:hover { border-color: var(--accent); }

/* Follow onboarding tip — dismissible; appears above the four sections. */
.follow-tip {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0 0 0.9rem; padding: 0.7rem 0.9rem;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 10px; color: var(--text); font-size: 0.9rem; line-height: 1.4;
}
.follow-tip-star { color: var(--accent); font-size: 1rem; flex: none; }
.follow-tip-text { flex: 1 1 auto; }
.follow-tip-close {
  flex: none; font: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--muted); padding: 0.2rem 0.3rem; border-radius: 6px;
}
.follow-tip-close:hover { color: var(--text); }

/* Standings */
.standings { margin: 0 0 1.2rem; }
.standings-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 0.85rem; }
.standings-table th, .standings-table td { padding: 0.55rem 0.4rem; text-align: center; }
.standings-table th { color: var(--muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
.standings-table .tm { text-align: left; font-weight: 600; }
.standings-table td { font-variant-numeric: tabular-nums; }
.standings-table .pos { color: var(--muted); width: 1.6rem; }
.standings-table .pts { font-weight: 800; font-family: var(--font-display); }
.standings-table tbody tr.qualify { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.standings-table tbody tr.qualify .pos { color: var(--accent); font-weight: 800; }
.standings-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }

/* Bracket — winner tree (R32→SF) as a grid: each round centres between its two
   feeders. .bracket is the scroll viewport (page-width); .bracket-tree is the wide
   grid inside it — they must be separate elements, else min-width widens the page. */
.bracket { overflow-x: auto; padding: 0.5rem 0 1rem; }
.bracket-tree {
  --bm-row: 7.2rem; --bm-gap: 2.4rem; --hg: calc(var(--bm-gap) / 2);
  display: grid;
  grid-template-columns: repeat(5, minmax(148px, 1fr));
  grid-template-rows: auto repeat(16, var(--bm-row));
  column-gap: var(--bm-gap);
  align-items: center;
  min-width: 880px;
}
/* Compact cells so each fits one fixed row (the team buttons are taller than plain
   text) and names stay on one line so every cell is the same height. */
.bracket-tree .bracket-match { padding: 0.35rem 0.5rem; }
.bracket-tree .bm-when { margin-bottom: 0.15rem; }
.bracket-tree .bm-team { padding: 0.05rem 0; min-width: 0; }
.bracket-tree .bm-team .team { font-size: 0.82rem; padding: 0.05rem 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bracket-tree .bm-foot { margin-top: 0.25rem; padding-top: 0.25rem; }
.bracket-tree .bm-foot .channel { font-size: 0.62rem; }
.bracket-head { font-family: var(--font-display); margin: 0 0 0.2rem; font-size: 0.9rem; color: var(--accent); display: flex; flex-direction: column; }
.bracket-head span { font-family: var(--font-body); color: var(--muted); font-weight: 500; font-size: 0.7rem; }
.bracket-tree .bracket-head { grid-row: 1; align-self: end; }
.bracket-match { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.4rem 0.55rem; transition: border-color 0.14s ease; }
.bracket-tree .bracket-match { align-self: center; }
.bracket-match:hover { border-color: var(--border-strong); }
.bracket-match.is-live { border-color: color-mix(in srgb, var(--bbc) 55%, transparent); }
/* Connector elbows: each feeder draws right toward its pair's midpoint; each
   later-round match draws a stub left to meet them. Vertical run = half the gap
   between the two feeders = (span/2) rows. */
.bm-top::after, .bm-bot::after { content: ""; position: absolute; left: 100%; width: var(--hg); height: calc(var(--span) / 2 * var(--bm-row)); border-right: 1.5px solid var(--border-strong); }
.bm-top::after { top: 50%; border-top: 1.5px solid var(--border-strong); }
.bm-bot::after { bottom: 50%; border-bottom: 1.5px solid var(--border-strong); }
.has-parent::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--hg); border-top: 1.5px solid var(--border-strong); }
/* Grid placement (CSP forbids inline styles, so positions are classes). Column =
   round; row span = 2^(col-1); --span drives the connector elbow height. */
.bk-c1 { grid-column: 1; grid-row-end: span 1; --span: 1; }
.bk-c2 { grid-column: 2; grid-row-end: span 2; --span: 2; }
.bk-c3 { grid-column: 3; grid-row-end: span 4; --span: 4; }
.bk-c4 { grid-column: 4; grid-row-end: span 8; --span: 8; }
.bk-c5 { grid-column: 5; grid-row-end: span 16; --span: 16; }
.bk-r2 { grid-row-start: 2; } .bk-r3 { grid-row-start: 3; } .bk-r4 { grid-row-start: 4; } .bk-r5 { grid-row-start: 5; }
.bk-r6 { grid-row-start: 6; } .bk-r7 { grid-row-start: 7; } .bk-r8 { grid-row-start: 8; } .bk-r9 { grid-row-start: 9; }
.bk-r10 { grid-row-start: 10; } .bk-r11 { grid-row-start: 11; } .bk-r12 { grid-row-start: 12; } .bk-r13 { grid-row-start: 13; }
.bk-r14 { grid-row-start: 14; } .bk-r15 { grid-row-start: 15; } .bk-r16 { grid-row-start: 16; } .bk-r17 { grid-row-start: 17; }
.bk-h1 { grid-column: 1; } .bk-h2 { grid-column: 2; } .bk-h3 { grid-column: 3; } .bk-h4 { grid-column: 4; } .bk-h5 { grid-column: 5; }
.bracket-standalone { margin-top: 1.2rem; max-width: 300px; }
.bm-when { font-size: 0.66rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 0.25rem; }
.bm-team { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.1rem 0; }
.bm-sc { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.bm-foot { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--border); }
.bm-foot .channel { font-size: 0.66rem; padding: 0.12rem 0.4rem; }

.empty { text-align: center; color: var(--muted); padding: 2.5rem 0; }

footer { border-top: 1px solid var(--border); padding: 1.6rem 1.25rem; margin-top: 2rem; }
footer p { max-width: var(--max); margin: 0 auto; font-size: 0.78rem; color: var(--muted); }
.footer-privacy { margin-top: 0.6rem; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  /* Title line is too tight for the controls on phones — drop them below it. */
  .section-tools { position: static; height: auto; margin: 0 0 0.6rem; }
  .match { grid-template-columns: 56px 1fr; }
  .broadcast {
    grid-column: 1 / -1;
    flex-direction: row; /* DOM order: channel first → leftmost on mobile */
    justify-content: flex-start;
    padding-top: 0.3rem;
    border-top: 1px dashed var(--border);
  }
  /* Star goes last and is pushed to the far right of the broadcast row. */
  .broadcast .fav-star { order: 1; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Progressive enhancement: with JavaScript off the document keeps class="no-js"
   (js-enabled.js removes it). The match list, group tables and bracket are
   pre-rendered into the section hosts so the page is usable; the controls below
   only work with JS, so hide them rather than show dead UI. The country name in
   the heading reads as plain text without its switcher caret. */
.no-js .toolbar,
.no-js #filters,
.no-js #settingsToggle,
.no-js .howto-link { display: none; }
.no-js .country-trigger { pointer-events: none; }
.no-js .country-caret { display: none; }