/* Cupschema — Alingsås HK.
   Tokens: klubbens marinblå/blå/gul, Barlow Condensed för display. */

:root {
  --ink: #16283f;
  --ink-soft: #4a5a70;
  --blue: #1f5fbf;
  --blue-deep: #17417e;
  --yellow: #f6c410;
  --paper: #f5f7fa;
  --card: #ffffff;
  --line: #dfe5ec;
  --menu-surface: #e6edf6;
  --menu-line: #aebdce;
  --menu-shadow: 0 4px 14px rgba(22, 40, 63, 0.14);
  /* Kanttoningen som visar att en menyrad går att scrolla i sidled (se
     "sidscroll-hint" längst ned) — måste synas mot --menu-surface i BÅDA
     temana, därför en egen variabel och inte en fast rgba. */
  --menu-fade: rgba(22, 40, 63, 0.34);
  --live: #d22f27;
  --won: #2f9e44;
  --purple: #8854d0;
  --orange: #c8660a;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(22, 40, 63, 0.08);
  /* Innehållets breddtak — smalt på mobil (nästan alltid under detta ändå),
     brett upp den på padda/dator i breakpointsen längre ner så skärmytan
     faktiskt används i stället för att bara stå tom runt en fast 880px-spalt. */
  --container-max: 880px;
}

/* padda (liggande) och uppåt: lite mer luft, och matchkorten i en tidslucka
   får bilda flera kolumner sida vid sida i stället för att alltid staplas
   — auto-fill räknar själv ut hur många som får plats. */
@media (min-width: 701px) {
  :root { --container-max: 1000px; }
  .slot-matches { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .table-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }
  .table-group .table-box { flex: 1 1 320px; max-width: 460px; margin-bottom: 0; }
}

/* dator: ännu bredare tak, fler kolumner ryms automatiskt i samma auto-fill-regel */
@media (min-width: 1150px) {
  :root { --container-max: 1360px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8edf4;
    --ink-soft: #9fadbf;
    --blue: #6ba3ee;
    --blue-deep: #a8c6f0;
    --paper: #0f1723;
    --card: #16202e;
    --line: #26313f;
    --menu-surface: #1d2d42;
    --menu-line: #50657e;
    --menu-shadow: 0 5px 16px rgba(0, 0, 0, 0.38);
    --menu-fade: rgba(0, 0, 0, 0.62);
    --live: #ff746c;
    --shadow: none;
    --purple: #b98cf2;
    --orange: #e8873a;
  }
}

/* Manuellt valt tema (inställningsmenyn) vinner alltid över OS-inställningen
   ovan — attributselektorn ger högre specificitet oavsett källordning. */
:root[data-theme="dark"] {
  --ink: #e8edf4;
  --ink-soft: #9fadbf;
  --blue: #6ba3ee;
  --blue-deep: #a8c6f0;
  --paper: #0f1723;
  --card: #16202e;
  --line: #26313f;
  --menu-surface: #1d2d42;
  --menu-line: #50657e;
  --menu-shadow: 0 5px 16px rgba(0, 0, 0, 0.38);
  --menu-fade: rgba(0, 0, 0, 0.62);
  --live: #ff746c;
  --shadow: none;
  --purple: #b98cf2;
  --orange: #e8873a;
}

:root[data-theme="light"] {
  --ink: #16283f;
  --ink-soft: #4a5a70;
  --blue: #1f5fbf;
  --blue-deep: #17417e;
  --paper: #f5f7fa;
  --card: #ffffff;
  --line: #dfe5ec;
  --menu-surface: #e6edf6;
  --menu-line: #aebdce;
  --menu-shadow: 0 4px 14px rgba(22, 40, 63, 0.14);
  --menu-fade: rgba(22, 40, 63, 0.34);
  --live: #d22f27;
  --shadow: 0 1px 3px rgba(22, 40, 63, 0.08);
  --purple: #8854d0;
  --orange: #c8660a;
}

/* Färgproverna i inställningarna: en miniatyr av varje palett i stället för
   en färgruta. Ytan, kortet, accenten och märkesfärgen sitter i samma
   inbördes förhållande som i appen, så provet svarar på "hur kommer det se
   ut" och inte bara "vilken färg heter det". */
.palette-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.palette-swatch {
  flex: 0 0 auto;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 7px 7px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.palette-swatch::before {
  content: "";
  display: block;
  width: 56px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--sw-accent) 25%, transparent);
  /* Kortet som en remsa över ytan, accenten som en list till vänster och
     märkesfärgen som en prick — samma anatomi som ett matchkort. */
  background:
    radial-gradient(circle at 78% 30%, var(--sw-mark) 0 4px, rgba(0, 0, 0, 0) 5px),
    linear-gradient(to right, var(--sw-accent) 0 4px, var(--sw-card) 4px 100%) center/100% 14px no-repeat,
    var(--sw-paper);
}
.palette-swatch.on {
  border-color: var(--blue);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.palette-swatch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --- färgteman -----------------------------------------------------------
   Varje palett byter ytfamilj (paper/card/line/ink/meny) och accent, men
   låter LIVE rött och VINST grönt behålla sin innebörd — de är status, inte
   dekor, och ska betyda samma sak i alla teman.

   Kaskaden är densamma som för ljust/mörkt ovan, och i samma ordning:
   palettens ljusa värden -> OS-preferens mörkt (om användaren inte tvingat
   ljust) -> manuellt valt mörkt (vinner alltid). Utan den ordningen skulle
   ett manuellt mörkt läge tappa paletten så fort OS:et stod på ljust.

   Namnen kommer ur cupernas egen värld: parketten i hallen, matchuret på
   väggen, och beachcuperna appen faktiskt täcker (Åhus, Bua, Göteborg
   Beachfestival). */

/* Parkett — hallgolvets björk, planlinjernas kobolt, sargens vinröda. */
:root[data-palette="parkett"] {
  --ink: #2b2118;
  --ink-soft: #6b5b4a;
  --blue: #1d5bb8;
  --blue-deep: #143f80;
  --yellow: #e8a33d;
  --paper: #f7f1e6;
  --card: #fffdf8;
  --line: #e4d8c4;
  --menu-surface: #efe4d1;
  --menu-line: #cbb695;
  --menu-shadow: 0 4px 14px rgba(70, 50, 25, 0.16);
  --menu-fade: rgba(70, 50, 25, 0.32);
  --live: #c3352b;
  --won: #2f7d3f;
  --shadow: 0 1px 3px rgba(70, 50, 25, 0.10);
  --purple: #7a4fbf;
  --orange: #c26a12;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="parkett"]:not([data-theme="light"]) {
    --ink: #f2e7d8;
    --ink-soft: #b39d84;
    --blue: #7fb0f2;
    --blue-deep: #b6d1f7;
    --yellow: #f0b357;
    --paper: #1a1410;
    --card: #241c16;
    --line: #3a2e24;
    --menu-surface: #2e241c;
    --menu-line: #5b4839;
    --menu-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
    --menu-fade: rgba(0, 0, 0, 0.6);
    --live: #ff7d70;
    --won: #6fce7f;
    --shadow: none;
    --purple: #c39cf5;
    --orange: #eb9445;
  }
}
:root[data-palette="parkett"][data-theme="dark"] {
  --ink: #f2e7d8;
  --ink-soft: #b39d84;
  --blue: #7fb0f2;
  --blue-deep: #b6d1f7;
  --yellow: #f0b357;
  --paper: #1a1410;
  --card: #241c16;
  --line: #3a2e24;
  --menu-surface: #2e241c;
  --menu-line: #5b4839;
  --menu-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
  --menu-fade: rgba(0, 0, 0, 0.6);
  --live: #ff7d70;
  --won: #6fce7f;
  --shadow: none;
  --purple: #c39cf5;
  --orange: #eb9445;
}

/* Matchur — resultattavlan: grafit och bärnsten, hög kontrast och nästan
   ingen färg utöver siffrornas. */
:root[data-palette="matchur"] {
  --ink: #14161a;
  --ink-soft: #55606d;
  /* Mörkare än den såg ut att behöva: mot menyytan gav en ljusare ton 4.21,
     under AA:s 4.5 för brödtext, och menyetiketterna är brödtextstora. */
  --blue: #0d64ad;
  --blue-deep: #0a4c85;
  --yellow: #e2960c;
  --paper: #f2f4f7;
  --card: #ffffff;
  --line: #d8dee6;
  --menu-surface: #e3e8ee;
  --menu-line: #a8b4c2;
  --menu-shadow: 0 4px 14px rgba(20, 22, 26, 0.14);
  --menu-fade: rgba(20, 22, 26, 0.32);
  --live: #cc2a1f;
  --won: #1f7a3a;
  --shadow: 0 1px 3px rgba(20, 22, 26, 0.09);
  --purple: #7145c9;
  --orange: #c05f0a;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="matchur"]:not([data-theme="light"]) {
    --ink: #f4f6f8;
    --ink-soft: #97a3b2;
    --blue: #66b2ff;
    --blue-deep: #a8d2ff;
    --yellow: #ffb527;
    --paper: #08090b;
    --card: #131619;
    --line: #232830;
    --menu-surface: #16191d;
    --menu-line: #3c444f;
    --menu-shadow: 0 5px 16px rgba(0, 0, 0, 0.6);
    --menu-fade: rgba(0, 0, 0, 0.7);
    --live: #ff6a5c;
    --won: #4fd07a;
    --shadow: none;
    --purple: #b48cff;
    --orange: #ff9640;
  }
}
:root[data-palette="matchur"][data-theme="dark"] {
  --ink: #f4f6f8;
  --ink-soft: #97a3b2;
  --blue: #66b2ff;
  --blue-deep: #a8d2ff;
  --yellow: #ffb527;
  --paper: #08090b;
  --card: #131619;
  --line: #232830;
  --menu-surface: #16191d;
  --menu-line: #3c444f;
  --menu-shadow: 0 5px 16px rgba(0, 0, 0, 0.6);
  --menu-fade: rgba(0, 0, 0, 0.7);
  --live: #ff6a5c;
  --won: #4fd07a;
  --shadow: none;
  --purple: #b48cff;
  --orange: #ff9640;
}

/* Beach — sand, hav och kvällssol. För cuperna som faktiskt spelas i den. */
:root[data-palette="beach"] {
  --ink: #143038;
  --ink-soft: #4d7079;
  --blue: #04738c;
  --blue-deep: #03505f;
  --yellow: #f0a92b;
  --paper: #fdf6e9;
  --card: #ffffff;
  --line: #e2dcc9;
  --menu-surface: #e8f0ef;
  --menu-line: #a9c4c4;
  --menu-shadow: 0 4px 14px rgba(20, 48, 56, 0.15);
  --menu-fade: rgba(20, 48, 56, 0.32);
  --live: #d1452c;
  --won: #2c7f5c;
  --shadow: 0 1px 3px rgba(20, 48, 56, 0.09);
  --purple: #7b5bc4;
  --orange: #cf6c1b;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="beach"]:not([data-theme="light"]) {
    --ink: #e8f2f2;
    --ink-soft: #93b0b4;
    --blue: #4dc3d9;
    --blue-deep: #9fe1ec;
    --yellow: #ffc352;
    --paper: #0a1a20;
    --card: #12262d;
    --line: #1e373f;
    --menu-surface: #163038;
    --menu-line: #38606b;
    --menu-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
    --menu-fade: rgba(0, 0, 0, 0.6);
    --live: #ff7a5e;
    --won: #58d19b;
    --shadow: none;
    --purple: #b39bf0;
    --orange: #ff9a4d;
  }
}
:root[data-palette="beach"][data-theme="dark"] {
  --ink: #e8f2f2;
  --ink-soft: #93b0b4;
  --blue: #4dc3d9;
  --blue-deep: #9fe1ec;
  --yellow: #ffc352;
  --paper: #0a1a20;
  --card: #12262d;
  --line: #1e373f;
  --menu-surface: #163038;
  --menu-line: #38606b;
  --menu-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
  --menu-fade: rgba(0, 0, 0, 0.6);
  --live: #ff7a5e;
  --won: #58d19b;
  --shadow: none;
  --purple: #b39bf0;
  --orange: #ff9a4d;
}

* { box-sizing: border-box; }

/* overflow-x: hidden — säkerhetsnät mot att NÅGOT element (en bred
   tabell, kartan, flikraden ...) råkar bli bredare än skärmen och gör
   hela sidan sidledes skrollbar (kändes som att "hela vyn glider iväg
   utanför mobilen" — samma klass av bugg som redan hittades och fixades
   för #viewTabs, se dess kommentar). Ofarlig på alla enheter, gäller
   BARA vågrät overflow.

   BARA på html, aldrig på body: rotelementets overflow ärvs upp till
   viewporten och html beter sig sedan som "visible", medan samma regel på
   body gör BODY till en egen scrollbox. Då mäter position:sticky sin
   klistring mot body — som aldrig scrollar, viewporten gör det — och varje
   sticky element på sidan slutar klistra helt: mobilmenyn i toppen,
   orienteringsraden, tabellernas gruppflikar och tidslinjens rubrikrad
   rullade alla iväg. Det vågräta skyddet är oförändrat. */
html {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

/* overscroll-behavior-y: none stänger av Safaris "rubber band"-studs vid
   toppen/botten (annars känns sidan alltid lite lös/webbsidig jämfört med
   en riktig app, även i hemskärms-/standalone-läge, se manifest.json).
   touch-action: manipulation slår av dubbeltrycks-zoom-fördröjningen (en
   vanlig källa till att sidan "fastnar" inzoomad efter ett snabbt
   dubbeltryck). Bekräftad, reproducerbar orsak till en total scrollåsning
   i Chrome på macOS (fungerade i Safari, "fungerade" som i "aldrig
   påverkades" eftersom Safari saknar/har svagt stöd för overscroll-
   behavior) — troligen touch-action: manipulation specifikt, som fick
   Chrome att missbedöma en trackpad-genererad tvåfingersgest. Ingen av
   dessa två egenskaper behövs på en enhet med mus/trackpad (rubber-band
   och dubbeltrycks-zoom är rena pekskärmsfenomen) — begränsade nu till
   (pointer: coarse), som identifierar just pekskärmar och INTE trackpads
   (de rapporterar pointer: fine, som en mus). */
@media (pointer: coarse) {
  html, body { overscroll-behavior-y: none; }
  body { touch-action: manipulation; }
}

button { font: inherit; color: inherit; cursor: pointer; }

/* Ingen systemgrå tryckruta. iOS ritar en egen halvgenomskinlig ruta runt
   allt tappbart — runt ett lagnamn eller en tillbaka-knapp blir det en stor
   grå rektangel som ser ut som en bugg. Elementen har egna :active-lägen
   nedan i stället, så trycket känns fortfarande av. */
html { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Fokusringen är till för tangentbordet. Webbläsarnas egen
   :focus-visible-heuristik räcker inte hela vägen: när en dialog stängs
   flyttas fokus programmatiskt, och markeringen kan ärvas från det som var
   fokuserat innan — då ramas ett lagnamn in i blått långt efter att man
   tryckt på det. Klassen sätts av pointerdown/keydown i js/app.js.
   Textfält behåller sin ring oavsett: där betyder den "här skriver du". */
body.pekarläge :focus-visible:not(input):not(textarea):not(select) {
  outline: none;
}

/* Tryckrespons i stället för systemrutan. */
.match:active { border-color: var(--blue); }
.teams .team[role="button"]:active,
.match-court:active,
.next-court-row:active,
.match-sheet-back:active,
.match-video:active { opacity: 0.55; }

.skip-link {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 100000;
  padding: 8px 14px;
  background: var(--yellow);
  color: #16283f;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

/* --- header ------------------------------------------------------------- */

header.top {
  background: #16283f;
  color: #eef2f8;
  border-bottom: 3px solid var(--yellow);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.top-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 8px 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.header-identity {
  max-width: min(58vw, 650px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-wordmark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  color: #fff;
}

.app-wordmark-mark {
  display: block;
  width: 32px;
  height: 32px;
}

.logo-tile { fill: var(--yellow); }
.logo-cup,
.logo-schedule {
  fill: none;
  stroke: #16283f;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.logo-cup { stroke-width: 2; }
.logo-schedule { stroke-width: 1.5; }

.header-context {
  min-width: 0;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-club-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-club {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #eef2f8;
  font-size: 13px;
  font-weight: 600;
}

.header-club img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: 0 0 auto;
}

.current-cup-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: min(32vw, 280px);
  padding: 0 0 0 8px;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  background: none;
  color: #b9c6d8;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.current-cup-label::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.current-cup-label:hover,
.current-cup-label:focus-visible {
  color: #eef2f8;
}
@media (min-width: 701px) {
  /* På dator finns den utskrivna "Byt cup"-knappen — chevronen på
     namnet blir då en extra pryl. Namnet är ändå klickbart. */
  .current-cup-label::after { display: none; }
}

.header-club-name {
  color: inherit;
  font-size: inherit;
}

.brand .spacer { flex: 1; }

#refreshBtn,
.header-action-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #eef2f8;
  padding: 5px 10px;
  font-size: 13px;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
}

#refreshBtn:hover,
.header-action-btn:hover,
.header-action-btn:focus-visible { border-color: var(--yellow); }

/* aktuell cup (header) — själva väljaren bor i inställningarna */

.current-cup-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  color: #eef2f8;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 600;
  max-width: min(32vw, 360px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.current-cup-btn::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.current-cup-btn:hover,
.current-cup-btn:focus-visible {
  border-color: var(--yellow);
  background: rgba(255, 255, 255, 0.11);
}

.cup-picker-sports { margin-bottom: 10px; }
.cup-picker-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 10px 0;
}
.cup-picker-row[hidden] { display: none; }
.cup-picker-row .cup { width: 100%; min-height: 54px; }
.cup-search-empty { margin: 2px 0 0; }

.cup {
  flex: 0 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  padding: 6px 12px;
  text-align: left;
  display: grid;
  line-height: 1.2;
}

.cup-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cup-place { font-size: 11px; color: var(--ink-soft); }

.cup.on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.cup.on .cup-place { color: rgba(255, 255, 255, 0.85); }

/* flikar + meta */

.subbar {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 14px;
  position: relative;
  /* isolation: isolate håller väljarpanelernas z-index INNE i subbaren, så
     de aldrig kan lägga sig över dialoger och ark. Men isoleringen gör
     samtidigt subbaren till en egen staplingskontext, och utan ett eget
     z-index rankade hela subbaren som "auto": nästa match-karusellen ligger
     senare i dokumentet, också auto, och målades därför ovanpå en öppen
     panel — som dessutom förlorade klicken till karusellen.
     Över innehållets egna klistrade rader (4-5), under dialoger, ark och
     bakgrundstäcken (60+) och under mobilmenyn (72). */
  isolation: isolate;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
}

/* Desktopmenyn är en egen, fullbredds yta trots att innehållet följer
   sidans breddtak. Den tydligare tonen + nederkant gör hierarkin läsbar
   mot själva sidan i både ljust och mörkt tema. */
@media (min-width: 701px) {
  .subbar::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--menu-surface);
    border-bottom: 1px solid var(--menu-line);
    box-shadow: var(--menu-shadow);
  }
}

#desktopMainNav {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  min-width: 0;
  gap: 6px;
}

.desktop-primary-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 8px 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.desktop-primary-tab:hover,
.desktop-primary-tab:focus-visible,
.desktop-primary-tab.page-on { color: var(--ink); }
.desktop-primary-tab.menu-on {
  color: var(--blue);
  border-bottom-color: var(--yellow);
}
.desktop-primary-icon { display: grid; place-items: center; width: 19px; height: 19px; }
.desktop-primary-icon .bottom-tab-icon-svg { width: 19px; height: 19px; }
.desktop-filter-badge {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

#desktopSubNav:not([hidden]) {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  min-width: 0;
  gap: 4px;
  padding: 3px 0 5px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  scrollbar-width: thin;
}

#desktopFilterHost {
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
}
body.desktop-filter-open #desktopFilterHost { border-top: 1px solid var(--menu-line); }
#desktopFilterHost #toolbar {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 7px 0 8px;
}

/* Klass-/lagvalet får dela desktop-rad med vyerna: där finns sidbredden,
   och en avdelare visar att Alla/F2013/... avgränsar den aktiva vyn. */
.desktop-selection-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  gap: 4px;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
.desktop-selection-group .table-group-tab { min-height: 38px; padding: 7px 10px; }
.desktop-subtab {
  position: relative;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 11px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.desktop-subtab:hover,
.desktop-subtab:focus-visible,
.desktop-subtab.on { color: var(--blue); }
.desktop-subtab.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--blue);
  transform: translateX(-50%);
}

#viewTabs {
  display: none;
  gap: 2px;
  /* Fler flikar (Trend/Karta/Klubb/Lag) fick raden bredare än mobila
     skärmar — utan min-width:0 krymper ett flex-item aldrig under sitt
     eget innehålls bredd (samma gotcha som .bracket-box, se dess
     kommentar), så flikarna sköt bara ut till höger om skärmen i stället
     för att bli skrollbara. */
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#viewTabs::-webkit-scrollbar { height: 6px; }

#currentViewBar, #currentSelectionBar, #moreMenuBar { display: none; }

.tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 4px 8px;
  margin-right: 14px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tab.on { color: var(--ink); border-bottom-color: var(--yellow); }

/* Prototypens gemensamma mobilark: global sökning, Mer och export. */
.prototype-sheet {
  position: fixed;
  top: auto;
  left: 50%;
  right: auto;
  bottom: 0;
  z-index: 76;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  width: min(620px, calc(100vw - 24px));
  height: min(72dvh, 680px);
  max-height: min(82dvh, 760px);
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 -10px 35px rgba(10, 18, 30, 0.35);
}
.prototype-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 63;
  background: rgba(10, 18, 30, 0.48);
}
.prototype-sheet-backdrop-menu { background: transparent; }
.prototype-sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 62px;
  padding: 20px 52px 9px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.prototype-sheet-grip {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 72px;
  height: 22px;
  transform: translateX(-50%);
  border: 0;
  background: none;
  touch-action: none;
  cursor: ns-resize;
}
.prototype-sheet-grip span {
  display: block;
  width: 42px;
  height: 4px;
  margin: 6px auto;
  border-radius: 99px;
  background: var(--line);
}
.prototype-sheet-head h2 { margin: 0; font-size: 19px; }
.prototype-sheet-body { flex: 1; min-height: 0; padding: 14px 14px 20px; overflow-y: auto; }
.prototype-sheet .dialog-x { top: 9px; }
/* Cupväljaren är ett filterval, inte en informationsdialog: låt den bli
   lika kompakt som innehållet och börja scrolla först när skärmen inte
   räcker till. */
.prototype-sheet[data-sheet-key="cup"] {
  height: auto;
  max-height: min(82dvh, 760px);
}
.prototype-sheet[data-sheet-key="cup"] .prototype-sheet-body {
  flex: 0 1 auto;
  max-height: calc(82dvh - 62px);
}

/* På dator är cupval och export kontextmenyer till knapparna i sidhuvudet,
   inte bottenark. Exakt position sätts från knappens bounding box i app.js;
   CSS sköter storlek, kompakt rubrik och egen intern scroll vid behov. */
@media (min-width: 701px) {
  .prototype-sheet.prototype-sheet-popover {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: min(460px, calc(100vw - 24px));
    height: auto;
    min-height: 0;
    margin: 0;
    transform: none;
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(10, 18, 30, 0.34);
  }
  .prototype-sheet-popover[data-sheet-key="export"] {
    width: min(390px, calc(100vw - 24px));
  }
  .prototype-sheet-popover .prototype-sheet-head {
    min-height: 48px;
    padding: 12px 46px 10px 14px;
  }
  .prototype-sheet-popover .prototype-sheet-grip { display: none; }
  .prototype-sheet-popover .prototype-sheet-head h2 { font-size: 17px; }
  .prototype-sheet-popover .prototype-sheet-body {
    flex: 0 1 auto;
    max-height: none;
    padding: 12px 14px 16px;
  }
  .prototype-sheet-popover .dialog-x { top: 5px; }
  .prototype-sheet-backdrop-popover { background: transparent; }
}
.global-search-input { width: 100%; font-size: 16px; }
.header-export-panel { position: static !important; display: grid; width: 100% !important; box-shadow: none !important; }

#meta {
  grid-column: 2;
  grid-row: 1;
  margin-left: auto;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 701px) {
  /* Filter är nu en riktig huvudgrupp även på desktop. Panelen tar bara
     plats när gruppen är vald; siffran i huvudmenyn visar aktiva filter
     även när panelen är stängd. */
  body:not(.desktop-filter-open) #toolbar { display: none; }
  body.desktop-filter-open #toolbar { display: grid; }
  #content .history-tabs[aria-label="Stats"] { display: none !important; }
}

/* Öppnar loggen över hämtade matcher (openMatchLogDialog) — samma tysta
   textstil som #meta hade innan den blev klickbar, med en diskret
   understrykning vid hover/fokus som enda ledtråd att den går att klicka. */
.meta-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.meta-link:hover, .meta-link:focus-visible { color: var(--ink); text-decoration: underline; }

/* Högre specificitet än .table-box (som sätter overflow-y: hidden för att
   inte kapa lodrät trackpad-scroll mitt på sidan) — men HÄR, i en modal
   dialog, vill vi kunna scrolla igenom hela matchlistan (kan vara 400+). */
.table-box.match-log-table { max-height: 60vh; overflow-y: auto; }
.match-log-table th, .match-log-table td { white-space: nowrap; }

/* --- verktygsrad ---------------------------------------------------------- */

#toolbar {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 8px 14px 4px;
  display: grid;
  gap: 8px;
}
/* Stats-vyn (Trend/Karta/Klubb-Lag/Klubbjämförelse/Cuper) har inget eget
   filter (se renderToolbar) — bar.replaceChildren() lämnar den tom, men
   utan detta skulle den ändå ta plats via sin egen padding, vilket gjorde
   avståndet ner till Stats egen underflikrad (.history-tabs) onödigt stort. */
#toolbar:empty { padding: 0; }

/* Filter/sortering ligger i en expanderbar meny så den kan minimeras när
   man valt klart, i stället för att permanent ta plats i schemat. */
.toolbar-collapse { display: grid; }

/* Summary-elementet är nu bara en flex-rad som håller ihop TVÅ separata
   piller — etiketten (.toolbar-summary-label) och låskontrollen (lockSlot
   i renderToolbar, se dess egen "🔒 Lås"-knapp/chip-styling) — i stället
   för att vara EN stor pill. Det gör att låsknappen alltid syns direkt
   bredvid "Filter och sortering", oavsett om panelen är öppen eller
   stängd, utan de layoutproblem det gav att placera den som en extern
   syskon-flexrad till hela <details>-elementet (som kan bli mycket högt
   när panelen är öppen). Låsknappen ligger INUTI <summary> men stoppar
   sin egen click-propagation (se renderToolbar) så den inte råkar
   trigga details-togglen när man klickar den. */
.toolbar-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.toolbar-summary::-webkit-details-marker { display: none; }
.toolbar-summary::marker { content: ""; }

.toolbar-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  width: fit-content;
}

.toolbar-summary-label::after {
  content: "▾";
  font-size: 10px;
  color: var(--ink-soft);
  transition: transform 0.15s ease;
}

.toolbar-collapse[open] .toolbar-summary-label::after { transform: rotate(180deg); }

.toolbar-body {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

@media (min-width: 701px) {
  .desktop-toolbar-flat .toolbar-body { margin-top: 0; }
  .desktop-toolbar-flat .filter-primary-row { gap: 8px; }
  .desktop-toolbar-flat .filter-primary-row .search-wrap {
    flex: 0 1 205px;
    min-width: 165px;
  }
  .desktop-toolbar-flat .filter-primary-row > .select {
    flex: 0 1 190px;
    min-width: 145px;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.chip {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.chip.on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .chip.on { color: #0f1723; }
}
:root[data-theme="dark"] .chip.on { color: #0f1723; }
:root[data-theme="light"] .chip.on { color: #fff; }

.chip.small { padding: 3px 9px; font-size: 12px; }

.back-chip {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #16283f;
  font-weight: 600;
}

.back-chip:hover { filter: brightness(0.95); }

/* lagväljare: sök-, filter- och sorterbar dropdown */

.team-picker-dd { position: relative; }

.team-picker-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.team-picker-summary::-webkit-details-marker { display: none; }
.team-picker-summary::marker { content: ""; }

.team-picker-summary::after {
  content: "▾";
  margin-left: 6px;
  font-size: 10px;
  color: var(--ink-soft);
}

.team-picker-dd[open] .team-picker-summary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.team-picker-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  width: 260px;
  max-width: calc(100vw - 40px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(10, 18, 30, 0.25);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.team-picker-search-row { display: flex; gap: 6px; }

.team-picker-search {
  flex: 1;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 9px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}

.team-picker-sort-row { display: flex; gap: 6px; }

/* Snabbval Flickor/Pojkar — bara klassväljaren (buildPicker med
   opts.genderQuickSelect, se js/app.js). Egen rad ovanför sorteringen så
   den inte blandas ihop med "Sortera: klass/namn"-kontrollerna. */
.team-picker-gender-row { display: flex; gap: 12px; padding: 2px 2px 4px; }

.team-picker-gender-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}

.team-picker-gender-item input[disabled] { opacity: 0.4; cursor: default; }

.team-picker-list {
  display: grid;
  gap: 2px;
  /* 260px rymde ~9 rader — för lite när en cup har 20 klasser eller 40 lag,
     och man fick scrolla i en liten ruta i stället för att se urvalet. Växer
     nu med fönstret men aldrig så att panelen går utanför skärmen. */
  max-height: min(58vh, 520px);
  overflow-y: auto;
}

.team-picker-hint { margin: 4px 0; }

.team-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.team-picker-item:hover { background: var(--paper); }

/* author-CSS:ens display:flex ovan slår annars alltid webbläsarens
   inbyggda [hidden]{display:none} — sökfiltret syntes inte utan denna. */
.team-picker-item[hidden] { display: none; }

.team-picker-item input { flex-shrink: 0; }

/* soloClickable-cupväljarna (Trend/Karta, se buildPicker): texten är en
   egen klickyta (väljer bara den raden) — låt den fylla resten av raden
   så hela namnet, inte bara kryssrutan, är ett bekvämt klickmål. */
.team-picker-item-text { flex: 1 1 auto; }

.export-dd .export-panel { width: 240px; max-width: calc(100vw - 40px); padding: 6px; gap: 2px; }
/* Slutspel-exportens "Visad tabell"/"Samtliga tabeller"-väljare — kan bli
   trängre än de vanliga formatknapparna, får wrappa om panelen är smal. */
.export-panel .team-picker-sort-row { flex-wrap: wrap; padding: 0 2px 4px; }

.export-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 7px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}

.export-item:hover { background: var(--paper); }

.filter-choice-item { display: flex; align-items: center; gap: 8px; }
.filter-choice-item.on { font-weight: 600; background: var(--paper); }
.filter-choice-check { flex: 0 0 16px; color: var(--blue); text-align: center; }

/* Prenumerationsraderna i exportpanelen är <a class="export-item">
   (webcal://), inte knappar — ta bort länkunderstreck så de ser ut som
   de andra export-raderna. */
a.export-item { text-decoration: none; cursor: pointer; }

/* Prenumerera-raderna under .ics i exportpanelen (buildExportSubscribeBlock).
   Samma gap som panelens övriga rader, så blocket inte ser ut som en
   annan sorts lista. */
.export-subscribe { display: grid; gap: 2px; }

.seg { display: flex; gap: 0; flex: none; }

.seg .chip { border-radius: 0; }
.seg .chip:first-child { border-radius: 999px 0 0 999px; }
.seg .chip:last-child { border-radius: 0 999px 999px 0; border-left: none; }

/* Generisk hjälpklass: en tunn vertikal linje mellan två grupper av
   kontroller på samma rad — t.ex. mellan filterkedjan och matchstatus
   (alla/kommande/spelade) i renderToolbar, eller mellan A-/B-/C-Slutspel-
   flikarna och träd/tabell+zoom. Visar att det som följer hör till en
   annan kategori utan att pressas hela vägen till radens högerkant (såg
   obalanserat ut med stort tomrum framför på breda skärmar). align-self:
   stretch gör att linjen matchar höjden på flexradens övriga chips/segs.
   Radbryter raden hamnar den bara tyst i övergången, ingen egen rad. */
.row-sep { align-self: stretch; width: 1px; margin: 2px 4px; background: var(--ink-soft); opacity: 0.5; }

.seg-group { display: flex; align-items: center; gap: 6px; }

.tools-row { gap: 8px; }

.search {
  flex: 1 1 160px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  color: var(--ink);
}

.select {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}

/* Rensa-knapp (×) i sök-/textfält — se withClearButton() i js/app.js.
   flex:1 1 auto/min-width:0 gör att wrappern fyller ut samma utrymme som
   den bara inputen gjorde tidigare i sina olika flex-rader (.tools-row,
   .team-picker-search-row osv); .search/.team-picker-search behåller sin
   egen visuella styling oförändrad inuti wrappern. */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* Huvudsökrutan i verktygsraden behöver inte fylla ut hela radens bredd
   (till skillnad från sökfälten inuti dropdown-panelerna, som SKA fylla
   sin panel) — kortare låter plan-/sorterings-/exportkontrollerna som
   följer sitta naturligt bredvid i stället för att tryckas långt ut åt
   höger av en onödigt bred, mest tom sökruta. */
.tools-row .search-wrap { flex: 0 1 240px; }

.search-wrap input { width: 100%; padding-right: 26px; box-sizing: border-box; }

.search-clear {
  position: absolute;
  right: 3px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.search-clear:hover { background: var(--paper); color: var(--ink); }

/* Bara synlig när fältet faktiskt har text — kräver att inputen har en
   placeholder (annars räknas den aldrig som "placeholder-shown"). */
input:placeholder-shown ~ .search-clear { display: none; }

/* Chrome/Safaris egen inbyggda rensa-x för type=search — annars blir det
   två stycken på varandra. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.btn {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
}

.btn:hover { border-color: var(--blue); }
.btn.small { padding: 2px 8px; font-size: 12px; }
.btn[disabled] { opacity: 0.4; cursor: default; }
.btn[disabled]:hover { border-color: var(--line); }

.show-all-played { display: block; margin: 12px auto 0; }

/* schemats "visa N tidigare/kommande"-knapp + en separat "visa alla" bredvid —
   se loadMorePlayedButtons()/loadMoreUpcomingButtons() i js/ui/reveal.js. */
.load-more-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.load-more-row .show-all-played { display: inline-block; margin: 0; }

/* --- innehåll -------------------------------------------------------------- */

#content {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 10px 14px 60px;
}

.banner {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 12px 0;
  color: var(--ink-soft);
}

.banner.error { border-color: var(--live); }
.banner .btn { margin-top: 8px; }
.banner p { margin: 0 0 4px; }
/* Upplysning om ett ännu ofärdigt schema (se pendingSchedule i js/app.js) —
   ska läsas, inte varna: klubbens blå kantmarkering i stället för rött. */
.banner-info { position: relative; border-left: 4px solid var(--blue); padding-right: 48px; }
.banner-info p + p { margin-top: 8px; }
.banner-info strong { color: var(--ink); }
.banner-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  padding: 4px 8px;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.banner-close:hover { color: var(--ink); }

/* Förstavyn i Schema är innehåll, inte en hänvisning till filterremsan:
   ett stort sökfält låter nya besökare gå direkt till sitt lag eller sin
   klass. Träffarna ligger i flödet så knappen under inte täcks över. */
.schema-start-search {
  max-width: 620px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 12px 0;
}

.schema-start-search label {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.schema-start-search .search { width: 100%; padding: 10px 12px; }
.schema-start-search .autocomplete-list { position: static; margin-top: 4px; }
.schema-start-search .btn { margin-top: 12px; }

.schema-start-result {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
}

.schema-start-result-kind { flex: none; color: var(--ink-soft); font-size: 12px; }
/* Klassen efter lagnamnet — samma lagnamn finns i flera klasser, och
   utan den blir träfflistan identiska rader (se renderSchemaStartSearch). */
.schema-start-result-cat { color: var(--ink-soft); font-size: 12px; }

/* Karta ------------------------------------------------------------------ */

.map-count { margin: 0 0 8px; }

.map-box {
  height: 70vh;
  min-height: 320px;
  max-height: 640px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* MapLibres popup-standardstil är vit/mörk text oavsett tema — anpassa den
   till klubbens egna färgtokens så den inte skär sig mot appens dark mode. */
.maplibregl-popup-content {
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--card); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--card); }
.maplibregl-popup-close-button { color: var(--ink-soft); }
.map-popup { font-size: 13px; line-height: 1.5; }
.map-popup p { margin: 4px 0; }
.map-popup-cups { margin-top: 4px; }
.map-popup-cups a { color: var(--blue); text-decoration: none; }
.map-popup-cups a:hover { text-decoration: underline; }
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: var(--ink-soft);
  margin: 6px 0 0;
}
.map-legend-item { display: flex; align-items: center; gap: 5px; }
.map-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}

/* Landsklustrens boll (countryBubbleElement i js/app.js) — bredd/höjd sätts
   inline per boll (skalad efter antal klubbar), resten är delad stil. */
.map-country-bubble {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(10, 18, 30, 0.35);
  cursor: pointer;
}

/* "Visa landshistorik"-pinnen (countryHistoryElement) — ihålig ring i en
   egen färg (--purple), medvetet olik både adressnålarna och den fyllda
   landsbollen ovan så alla tre går att skilja åt när de visas samtidigt. */
.map-country-history-pin {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  color: var(--purple);
  font-weight: 700;
  font-size: 11px;
  border: 3px solid var(--purple);
  box-shadow: 0 1px 4px rgba(10, 18, 30, 0.35);
  cursor: pointer;
}

/* Generisk kryssruta+etikett-rad — Kartans "Visa landshistorik" och
   Klubb/Lags "Visa missade år" (se renderClubView) delar samma stil. */
.inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}

/* hero: nästa match */

.hero {
  position: relative;
  background: linear-gradient(135deg, #16283f, #1d3a63);
  color: #eef2f8;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 10px 0 16px;
  border-left: 5px solid var(--yellow);
  box-shadow: var(--shadow);
}

/* karusell: visas när flera av klubbens lag har match samtidigt (samma
   närmsta starttid, t.ex. olika planer) i stället för bara ett kort */
.hero-carousel { touch-action: pan-y; }
.hero-carousel[open] { padding-left: 40px; padding-right: 40px; }

.hero-close {
  position: absolute;
  top: 8px;
  right: 9px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #eef2f8;
  font-size: 20px;
  line-height: 1;
}

.hero-close:hover { background: rgba(255, 255, 255, 0.24); }
.hero:not(.hero-carousel)[open] { padding-right: 46px; }

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #eef2f8;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-nav:hover { background: rgba(255, 255, 255, 0.24); }
.hero-nav:active { transform: translateY(-50%) scale(0.85); }
.hero-nav { transition: background 0.15s ease, transform 0.1s ease; }
.hero-prev { left: 8px; }
.hero-next { right: 8px; }

.hero-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.hero-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero-dot.on { background: var(--yellow); transform: scale(1.35); }

/* korten i karusellen glider in från det håll man bläddrade */
.hero-card { animation: heroSlideNext 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); }
.hero-card-prev { animation-name: heroSlidePrev; }

@keyframes heroSlideNext {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes heroSlidePrev {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card { animation: none; }
}

/* .hero-summary är samtidigt eyebrow-raden (LIVE/nedräkning) OCH handtaget
   som minimerar/expanderar hela kortet — synlig i båda lägen, som
   toolbar-summary. Egen pil i stället för webbläsarens standardtriangel. */
.hero-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b9c6d8;
  cursor: pointer;
  list-style: none;
}

.hero-summary::-webkit-details-marker { display: none; }
.hero-summary::marker { content: ""; }

.hero-summary::after {
  content: "▾";
  font-size: 10px;
  color: #b9c6d8;
  transition: transform 0.15s ease;
}

.hero[open] .hero-summary::after { transform: rotate(180deg); }
.hero:not([open]) .hero-summary { margin: 0; }

.hero-count {
  margin-left: auto;
  background: var(--yellow);
  color: #16283f;
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.hero-teams {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 5vw, 32px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hero-teams .us { color: var(--yellow); }

.hero-teams .vs {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-transform: none;
  color: #b9c6d8;
}

.hero-info { font-size: 13px; color: #cfd9e6; }
.hero-info .dot { margin: 0 6px; color: #5a6b82; }

/* tidslinje */

.day-h {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 22px 0 8px;
}

.day-h::first-letter { text-transform: uppercase; }

.slot {
  display: grid;
  /* minmax(0, 1fr), inte 1fr: en fr-kolumn har min-content som automatiskt
     golv, så kolumnen blev olika bred beroende på vad kortet råkade
     innehålla — kompakta kort 367 px, kort med "Nästa på banan" 308 px,
     i samma lista. Med noll som golv får alla kort samma bredd och
     texten ellipseras i stället för att spränga rutnätet. */
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.rail {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  padding-top: 10px;
  text-align: right;
  border-right: 2px solid var(--line);
  padding-right: 10px;
}

.rail small {
  display: block;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 10px;
  text-transform: uppercase;
}

.slot-matches { display: grid; gap: 6px; }

.untimed-panel {
  margin: 10px 0 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.untimed-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  list-style: none;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.untimed-summary::-webkit-details-marker { display: none; }
.untimed-summary::marker { content: ""; }
.untimed-summary-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.untimed-summary-count { color: var(--ink-soft); font-size: 12px; }
.untimed-summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}
.untimed-panel[open] .untimed-summary::after { transform: rotate(225deg); }
.untimed-panel[open] .untimed-summary { border-bottom: 1px solid var(--line); }
.untimed-panel-body { padding: 10px; }

/* Skytteligan (Statistik → Skyttar). Läses som en resultatlista: platsen
   och målen först, spelaren i mitten, laget som svans. */
/* Slutspelets förbindelselinjer. Kurvor, inte knän — se
   drawBracketConnectors. Den väg som utgår från kortet man pekar på
   lyfts fram, så man kan följa en vinnare bakåt även i ett brett träd. */
.bracket-connector-line.markerad {
  stroke: var(--blue);
  stroke-width: 2.5;
  opacity: 1;
}

/* Slutspelstabellen: sex kolumner ryms inte på en mobilskärm, och det
   var banan som föll utanför kanten. På smala skärmar göms kolumnen och
   banan får en egen rad under matchen i stället. */
.bracket-table-arena { display: none; }

@media (max-width: 760px) {
  .bracket-table th:nth-child(6),
  .bracket-table td:nth-child(6) { display: none; }

  .bracket-table-arena { display: table-row; cursor: pointer; }
  .bracket-table-arena > td {
    padding: 0 8px 8px;
    border-top: 0;
    color: var(--ink-soft);
    font-size: 12px;
  }
  /* Matchraden ska inte avslutas med en linje mitt emot sin egen bana. */
  .bracket-table-row:has(+ .bracket-table-arena) > td { border-bottom: 0; }
}

/* Banans adress och kartlänk i matcharkets arenaflik. */
.arena-adress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 10px;
  font-size: 13.5px;
}
.arena-karta { margin-left: auto; text-decoration: none; }

/* Målfördelning: en stapel som visar hur koncentrerat lagets målskytte
   är, plus raderna bakom den. Färgerna är bara etiketter — de ska gå att
   skilja åt, inte betyda något i sig. */
.malford { margin-top: 14px; }
.malford-not { margin: 2px 0 8px; font-size: 12px; }

.malford-stapel {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  gap: 1px;
  margin-bottom: 10px;
}

.malford-del { min-width: 3px; }
.malford-prick {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
}

.malford-del.d0, .malford-prick.d0 { background: var(--blue); }
.malford-del.d1, .malford-prick.d1 { background: var(--won); }
.malford-del.d2, .malford-prick.d2 { background: var(--yellow); }
.malford-del.d3, .malford-prick.d3 { background: var(--live); }
.malford-del.d4, .malford-prick.d4 { background: #8a6fd1; }
.malford-del.d5, .malford-prick.d5 { background: #2aa9a0; }
.malford-del.ovriga, .malford-prick.ovriga {
  background: color-mix(in srgb, var(--ink-soft) 45%, transparent);
}

.malford-lista { display: grid; gap: 3px; }
.malford-rad {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.malford-namn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.malford-tal { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Samma betydelse som i skytteligan: hämtat direkt från matchen, ännu
   inte i den sparade statistiken. */
.malford-tal.live { color: var(--live); }

/* Gemensamma motståndare — vad båda lagen gjort mot samma motstånd.
   Två resultatkolumner i lagens ordning, hemmalaget först. */
.gemensamma { margin-top: 14px; }
.gem-not { margin: 2px 0 8px; font-size: 12px; }
.gem-lista { display: grid; gap: 1px; }

.gem-rad {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  font-size: 13px;
}
.gem-rad:nth-child(even) { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.gem-motst { min-width: 0; }
.gem-motst .feed-team { display: block; margin-left: 0; }

.gem-res {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  text-align: right;
  color: var(--ink-soft);
}
.gem-res.vinst { color: var(--won); }
.gem-res.forlust { color: var(--live); }

/* Form i cupen: lag, V/O/F och mål gjorda–insläppta. */
.form-block { margin-top: 12px; }
.form-rad {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
}
.form-rad.us .form-lag { font-weight: 700; color: var(--blue-deep); }
.form-lag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-vof { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.form-mal {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 54px;
  text-align: right;
}

.match-sheet-refs { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; }

.playoff-source-progress { margin: 2px 0 8px; font-size: 12px; }

/* Domarens matchlista. */
.domar-match {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.domar-match:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.domar-match.ours { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.domar-tid { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.domar-lag { min-width: 0; }
.domar-lag .feed-team { display: block; margin-left: 0; }
.domar-res {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.domar-utv { color: var(--live); font-size: 12px; white-space: nowrap; }

.skytt-flikar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.skytt-topp { margin: 0 0 10px; }
.skytt-live-nyckel { color: var(--live); }
.skytt-verktyg { margin-bottom: 8px; }
.skytt-verktyg .input { width: 100%; max-width: 340px; }

.skytt-klasser {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.skytt-lista-box { display: grid; gap: 1px; }

.skytt-rubrik {
  margin: 22px 0 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px;
}

.feed-disc-jmf { margin: 8px 0 0; font-size: 12px; }

.skytt-rad {
  display: grid;
  grid-template-columns: 28px 34px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 6px;
}

.skytt-rad:nth-child(even) { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.skytt-rad.ours { background: color-mix(in srgb, var(--blue) 10%, transparent); }

.skytt-plats {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: right;
}

.skytt-mal {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Raden tickar just nu — samma färg som LIVE på matchkorten. */
.skytt-mal.live { color: var(--live); }

.skytt-namn { min-width: 0; font-size: 14px; }
.skytt-lag { display: block; color: var(--ink-soft); font-size: 12px; }

.skytt-matcher {
  color: var(--ink-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Målskillnaden över matchens gång. Nollinjen i mitten, ytan färgad åt
   det håll som ledde — en jämn match hänger kvar vid mitten. */
.feed-graf-box { margin: 0 0 14px; }

.feed-graf {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.feed-graf-note { margin: 4px 0 0; font-size: 12px; }

/* Matchhändelser — mål för mål med löpande ställning och målskytt.
   Läses uppifrån och ner som en live-feed, nyast överst. */
.feed-list { display: grid; gap: 1px; }

/* Klickbart spelarnamn — diskret tills man rör vid det, som lagnamnen
   på matchkorten. */
.spelar-lank { cursor: pointer; }
.spelar-lank:hover,
.spelar-lank:focus-visible { text-decoration: underline; text-decoration-style: dotted; }

.feed-disc { margin-top: 14px; }
.feed-disc-rad {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 4px 0;
  font-size: 13px;
}

.spelar-match {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.spelar-match-topp {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.spelar-antal {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  min-width: 24px;
}

.spelar-motstand { flex: 1; min-width: 0; font-size: 14px; }
.spelar-motstand .feed-team { display: block; margin-left: 0; }

.spelar-tider {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0 34px;
}

.spelar-tid {
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.feed-sorts {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
}

/* Aggregerad rad (Mål/Namn) har ingen tidkolumn — låt antalet och
   spelaren dela på bredden i stället för att lämna ett tomt spår. */
.feed-row:not(:has(.feed-time)) { grid-template-columns: auto 1fr; }

.feed-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 6px;
}

/* Bortalagets mål tonas svagt så sidan går att se utan att läsa namnet. */
.feed-row.away { background: color-mix(in srgb, var(--ink) 5%, transparent); }

.feed-time {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 13px;
}

.feed-score {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
}

.feed-who { min-width: 0; font-size: 14px; }

.feed-nr {
  display: inline-block;
  min-width: 20px;
  margin-right: 6px;
  padding: 0 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}

.feed-team { margin-left: 7px; color: var(--ink-soft); font-size: 12px; }
.feed-team.only { margin-left: 0; font-size: 14px; color: var(--ink); }

.feed-mark {
  margin: 10px 0 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.feed-note { margin-top: 12px; font-size: 12px; }

/* Länk till matchsändningen (SolidSport/Handbollplay). På kortet bara en
   spelknapp i huvudets högerkant; i matcharket samma knapp med text.
   Medvetet INTE i livefärgen — röd betyder "spelas nu" i den här appen,
   och en sändning finns kvar långt efter slutsignal. */
.match-video {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  width: 21px;
  height: 21px;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
  text-decoration: none;
}

.match-video:hover,
.match-video:focus-visible {
  background: color-mix(in srgb, var(--blue) 26%, transparent);
  outline: none;
}

.match-video-play {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}

.match-video.with-text {
  /* fit-content + nowrap: knappen ska bli precis så bred som texten,
     inte sträckas av arkets layout och radbryta "Se matchen". */
  width: fit-content;
  height: auto;
  align-self: start;
  white-space: nowrap;
  margin-top: 10px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* "Nästa på banan" — utfällbar lucka mot den ofiltrerade listan, se
   banPanel i js/ui/match-ui.js. Ligger inuti matchkortet men ska läsas
   som en fotnot till det, inte som en del av matchen. */
.next-court {
  border-top: 1px solid var(--line);
  margin: 8px -12px -10px;
}

.next-court-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: var(--ink-soft);
  font-size: 12px;
}

.next-court-summary::-webkit-details-marker { display: none; }
.next-court-summary::marker { content: ""; }

.next-court-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.next-court-count {
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-soft) 16%, transparent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.next-court-summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}
.next-court[open] .next-court-summary::after { transform: rotate(225deg); }

.next-court-list {
  display: grid;
  gap: 1px;
  padding: 0 12px 10px;
}

.next-court-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 5px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.next-court-row:hover,
.next-court-row:focus-visible {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  outline: none;
}

.next-court-time {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.next-court-cat {
  font-size: 11px;
  color: var(--ink-soft);
}

.next-court-teams {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Egna lag ska gå att hitta i listan utan att läsa den. */
.next-court-row.ours .next-court-teams { font-weight: 600; }
.next-court-row.ours .next-court-time { color: var(--blue); }

.match {
  /* Som rutnätsobjekt har kortet min-content som automatiskt golv, och i
     tätt läge är metaraden nowrap — då blev kortet bredare än sin egen
     cell och stack ut jämfört med grannarna. Med noll som golv krymper
     det i stället och texten ellipseras. */
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.match:hover { border-color: var(--blue); }

.match.ours { border-left: 4px solid var(--blue); }

/* Helkorts-färgläggning: manuell lagfärg eller ett upptäckt färgord i
   favoritklubbens eget lag (inställningarna). --card-tint sätts inline
   per kort. Ligger efter .ours i källordningen så den vinner över den
   blå kantlinjen när båda skulle gälla (samma specificitet). */
.match.tinted {
  background: color-mix(in srgb, var(--card-tint) 12%, var(--card));
  border-left-color: var(--card-tint);
}

/* Metaraden. Klass, grupp och rond bekräftar bara vad man redan
   filtrerat fram — de leder inte kortet längre. Banan ligger sist i
   ordningen men bryter till egen rad (flex-basis 100 %). */
.match-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-soft);
}

.match-meta .cat {
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.04em;
}

.match-meta .cat,
.match-meta .div,
.match-meta .when,
.match-meta .outcome-badge,
.match-meta .match-year-badge { flex: none; }

/* Avkasttid som avviker från schemat. Ska sticka ut ur metaradens grå —
   den är en avvikelse, inte en upprepning av rutans klockslag. */
.kickoff {
  flex: none;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Slutspelsmatch vars lag ännu avgörs av gruppspelet. */
.prelim-badge {
  flex: none;
  padding: 0 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink-soft) 16%, transparent);
  color: var(--ink);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.match-meta-right {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: none;
}

/* Syns bara på matcher som blandats in från ett extra år (årsväljaren i
   verktygsraden, se allActiveMatches()/matchCard() i js/app.js) — märker
   ut att just den här matchen INTE är från innevarande upplaga. */
.match-year-badge {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
}

.outcome-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  flex-shrink: 0;
}

.outcome-v { background: var(--won); }
.outcome-o { background: #8a94a3; }
.outcome-f { background: var(--live); }

.weather {
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Banan får egen rad över hela kortbredden. Radbrytning, INTE ellips:
   ett bannamn är byggt "<hall> <bana>" och informationen sitter i
   svansen — "Prioritet Serneke Arena Serneke A". En ellips äter alltid
   svansen, alltså exakt det tecken som skiljer din bana från de fem
   andra i hallen. Två rader är taket; på mobilens smalaste kort (~244 px)
   ryms ~46 tecken, så skyddsnätet slår sällan till. */
.match-court {
  flex: 1 0 100%;
  min-width: 0;
  margin-top: 2px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.match-court.arena-link { cursor: pointer; }
.match-court.arena-link:hover { text-decoration: underline; }

/* Tätt läge — matcher långt från nu. Banan GÖMS inte, den degraderas
   till grå svans på metaraden: en match om sex timmar behöver inte sin
   bana läsbar på en meters håll, men den ska finnas utan att man
   trycker. nowrap håller ihop raden så det är banan som ellipseras och
   inte layouten som spricker. */
.match.kompakt { padding: 7px 12px 8px; }
.match.kompakt .team { font-size: 16px; }
.match.kompakt .match-meta { flex-wrap: nowrap; margin-top: 3px; }
.match.kompakt .match-meta-right { display: none; }

.match.kompakt .match-court {
  flex: 0 1 auto;
  display: block;
  margin-top: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* lagnamn i matchkort är klickbara (snabbvy) — samma diskreta hover som
   plan-länken ovan, ingen extra visuell vikt förrän man interagerar */
.teams .team[role="button"] { cursor: pointer; }
.teams .team[role="button"]:hover { text-decoration: underline; text-decoration-style: dotted; }

.match-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.teams { flex: 1; min-width: 0; }

.team {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team.us { font-weight: 700; color: var(--blue-deep); }
.team.won { font-weight: 700; }
.team.won::after { content: " ✓"; color: var(--won); font-size: 11px; }

.score {
  flex-shrink: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.score.live { color: var(--live); }

.score.played {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-soft);
}

.score.pending {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-soft);
}

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-right: 6px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

.when {
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* nu-linje */

.nowline {
  position: relative;
  border-top: 2px solid var(--live);
  margin: 14px 0;
}

/* Pågår blocket ritas ingen linje ovanför det (se renderTimeline) —
   blocket självt märks upp: skenan tänds och matcherna får en rubrik som
   också säger när rutan tar slut. Det är enda stället i schemat där den
   inställda matchlängden syns. */
.slot.now .rail {
  border-right-color: var(--live);
  color: var(--live);
}

.slot-now {
  /* .slot-matches blir flerkolumnad på breda skärmar (se toppen av filen)
     — rubriken ska ligga över hela blocket, inte dela rad med ett kort,
     och align-self hindrar den från att sträckas till kortets höjd. */
  grid-column: 1 / -1;
  align-self: start;
  justify-self: start;
  background: var(--live);
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 1px 8px;
}

.nowline span {
  position: absolute;
  top: -10px;
  left: 0;
  background: var(--live);
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 1px 8px;
}

/* tabeller */

.table-class-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.table-class-heading .day-h { margin: 0; }
.table-class-cohort {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
  font: 600 11px "Barlow", sans-serif;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.table-class-stats { flex: 0 0 min(360px, 52%); }
.table-class-stats summary {
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  list-style-position: inside;
}
.table-class-stats-body {
  display: grid;
  gap: 3px;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.35;
}
.table-class-stats-body strong { color: var(--ink); }

.table-group-tab {
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-soft);
  cursor: pointer;
}

.table-group-tab.on {
  color: var(--blue);
}

/* Schemats urvalsrad är IKRYSSBAR: flera brickor kan vara på samtidigt, och
   understrykningen (som betyder "den här fliken visas") räcker då inte — två
   understrukna brickor läser som ett fel. Ikryssade får därför en tydlig
   platta med bock, medan "Alla" behåller flikutseendet eftersom den är ett
   läge och inte ett av valen. */
[role="group"] > .table-group-tab.on:not(.selection-all) {
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}
[role="group"] > .table-group-tab.on:not(.selection-all)::after { content: none; }
[role="group"] > .table-group-tab.on:not(.selection-all)::before {
  content: "✓";
  margin-right: 5px;
  font-size: 11px;
}
/* Urkryssade brickor ska se valbara ut, inte bortglömda. */
[role="group"] > .table-group-tab:not(.on):not(.selection-all) {
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.table-group-tab.on::after {
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 0;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--blue);
  transform: translateX(-50%);
}

.table-group-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .table-class-heading { display: block; }
  .table-class-stats { margin: 4px 0 10px; }
  .table-class-stats summary { text-align: left; }
}

/* overflow-x: auto (bara vågrät scroll avsedd, för breda tabeller på
   smala skärmar) — men CSS-specen tvingar den ANDRA axeln (overflow-y,
   annars "visible") att räknas om till "auto" också så fort en axel är
   satt till ett icke-visible-värde. Det gör .table-box till en OAVSIKTLIG
   lodrät scrollbehållare, trots att den aldrig har egen lodrät
   overflow — och i Chrome på macOS kunde en trackpad-gest som startar
   OVANFÖR en sådan behållare (mitten av sidan, där tabellerna ligger)
   sluka scrollen helt utan att den kedjas vidare till sidan, i stället
   för att bara scrolla noll pixlar och lämna över till föräldern som
   förväntat. Explicit overflow-y: hidden förhindrar att webbläsaren
   någonsin gör den omtolkningen. Samma fix på #viewTabs/
   .bracket-box nedan (samma mönster, overflow-x: auto utan uttryckligt
   overflow-y). */
.table-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
  overflow-x: auto;
  overflow-y: hidden;
}

.table-box h3 {
  margin: 2px 0 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.standings {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.standings th,
.standings td {
  padding: 4px 6px;
  text-align: center;
  border-top: 1px solid var(--line);
}

.standings thead th {
  border-top: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.standings .l { text-align: left; }

.bracket-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.bracket-th-sort:hover { color: var(--ink); }
.bracket-th-sort.on { color: var(--blue); }
.sort-arrow { font-size: 9px; }

.team-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  cursor: pointer;
}

.team-link:hover { text-decoration-color: var(--blue); color: var(--blue); }

.standings .pts { font-weight: 700; }

.standings tr.us {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  font-weight: 600;
}

.bracket-table-row { cursor: pointer; }
.bracket-table-row:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.bracket-table .l .us { font-weight: 600; color: var(--blue-deep); }

/* sortableTable() med onRowClick (t.ex. Klubb/Lag-flikens nedborrning) */
.sortable-row-clickable { cursor: pointer; }
.sortable-row-clickable:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.sortable-expanded-row > td {
  padding: 0 !important;
  background: color-mix(in srgb, var(--blue) 5%, var(--card));
  border-bottom: 2px solid var(--line);
  text-align: left !important;
}
.cup-edition-expanded {
  padding: 14px;
}
.cup-edition-detail-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: var(--card);
  scrollbar-width: none;
}
.cup-edition-detail-tabs::-webkit-scrollbar { display: none; }
.cup-edition-detail-tab {
  position: relative;
  flex: 1 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.cup-edition-detail-tab small {
  margin-left: 5px;
  color: inherit;
  font-size: 10px;
  font-weight: 500;
}
.cup-edition-detail-tab.on { color: var(--blue); }
.cup-edition-detail-tab.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--blue);
  transform: translateX(-50%);
}
.cup-edition-detail-body {
  min-height: 48px;
  padding: 0 11px 11px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--card);
}
.cup-edition-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  padding-top: 8px;
}
.cup-edition-detail-list.clubs {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 5px 14px;
}
.cup-edition-detail-list li {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.cup-edition-detail-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cup-edition-detail-list li > span { flex: 0 0 auto; white-space: nowrap; }
.cup-edition-show-more {
  margin-top: 9px;
  padding: 5px 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 560px) {
  .cup-edition-detail-list.clubs { grid-template-columns: 1fr; }
}

.muted { color: var(--ink-soft); font-size: 13px; }

/* scrolla till toppen */

#scrollTopBtn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: none;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(10, 18, 30, 0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}

#scrollTopBtn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  #scrollTopBtn { transition: none; }
}

/* sidfot + dialog */

footer {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px;
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

footer a { color: var(--blue); }

dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  max-width: 380px;
  width: calc(100vw - 40px);
  padding: 18px;
}

dialog::backdrop { background: rgba(10, 18, 30, 0.5); }

dialog h2 {
  margin: 0 0 4px;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 20px;
}

dialog p { font-size: 12px; color: var(--ink-soft); margin: 0 0 12px; }

dialog form { display: grid; gap: 8px; }

dialog input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  color: var(--ink);
}

/* inställningar */

#settingsBtn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #eef2f8;
  padding: 5px 10px;
  font-size: 15px;
  margin-right: 8px;
}

#settingsBtn:hover { border-color: var(--yellow); }

/* Hjälpknappen i headern — samma form som kugghjulet, men en <a> så den
   kan öppnas i ny flik med mittenklick/långtryck som vilken länk som helst. */
.help-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #eef2f8;
  padding: 5px 11px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin-right: 8px;
  text-decoration: none;
}

.help-btn:hover { border-color: var(--yellow); text-decoration: none; }

dialog#settingsDialog { max-width: 380px; }

@media (max-width: 700px) {
  dialog#settingsDialog {
    position: fixed;
    margin: 0;
    inset: 0;
    z-index: 60;
    box-sizing: border-box;
    max-width: none;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: max(18px, env(safe-area-inset-top)) 18px
             calc(var(--bottomstack-h, 0px) + 18px) 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  dialog#settingsDialog .dialog-x {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
    z-index: 2;
  }
  dialog#settingsDialog.settings-view {
    position: relative;
    inset: auto;
    z-index: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: calc(100dvh - var(--bottomstack-h, 0px));
    max-height: none;
    margin: 0;
    padding: 18px 18px calc(var(--bottomstack-h, 0px) + 24px);
    overflow: visible;
    overscroll-behavior: auto;
    background: var(--paper);
  }
  dialog#settingsDialog.settings-view .dialog-x {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

/* padda/dator: den fasta 380px-bredden var samma oavsett skärmstorlek och
   såg ut som en mobilruta mitt på en stor skärm — bredda den och lägg
   grupperna i två kolumner i stället för en lång enkolumnslista.
   Naturliga par (favoritklubb/-lag, matchlängd/paus) hamnar automatiskt
   sida vid sida via grid-auto-placement; allt annat (.full) tar hela
   bredden — cupväljaren och kryssrutorna vinner inget på att delas upp. */
@media (min-width: 701px) {
  dialog#settingsDialog[open] {
    max-width: 660px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    align-items: start;
  }
  dialog#settingsDialog > h2 { grid-column: 1 / -1; }
  dialog#settingsDialog .settings-group { margin: 0; }
  dialog#settingsDialog .settings-group.full { grid-column: 1 / -1; }
  dialog#settingsDialog .settings-advanced { grid-column: 1 / -1; }
}

.settings-group {
  margin: 14px 0;
  display: grid;
  gap: 6px;
}

.settings-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.settings-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.settings-check input { margin-top: 3px; flex-shrink: 0; }

.settings-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.settings-advanced {
  margin: 8px 0 4px;
  padding: 8px 12px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.settings-advanced-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 0;
  list-style-position: outside;
}
.settings-advanced-summary:hover,
.settings-advanced-summary:focus-visible {
  color: var(--blue);
}
.settings-advanced[open] .settings-advanced-summary {
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.settings-inline input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  color: var(--ink);
}

.settings-inline input[type="color"] {
  padding: 2px;
  width: 40px;
  height: 32px;
  flex-shrink: 0;
}

.team-color-list { display: grid; gap: 4px; margin-top: 6px; }

.team-color-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--paper);
}

.team-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

.team-color-item span.name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* egen autocomplete (native <datalist> stöds inte tillförlitligt på
   Safari/iOS) */

.autocomplete-wrap { position: relative; }

.autocomplete-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 18, 30, 0.25);
}

.autocomplete-item {
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocomplete-item:hover { background: var(--paper); }

.compare-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 4px 4px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.compare-chip-x {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
}
.compare-chip-x:hover { color: var(--live); background: color-mix(in srgb, var(--live) 14%, transparent); }

/* Klubbjämförelsens radexpansion (clubCompareDetailBlock) — en cup-för-cup-
   nedbrytning av klasser/lagnamn under den utfällda raden. */
.compare-detail { margin-top: -4px; }
.compare-detail-name { margin-bottom: 8px; }
.compare-detail-cup { padding: 6px 0; border-top: 1px solid var(--line); }
.compare-detail-cup:first-of-type { border-top: none; padding-top: 0; }
.compare-detail-cup-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.compare-detail-cup p { margin: 2px 0; font-size: 13px; }

/* Förloppsindikator (archiveProgressBlock) för en pågående Klubb/Lag- eller
   Klubbjämförelse-sökning — "X av Y hämtade" i stället för en obestämd
   "Hämtar …" som annars lätt känns som att sidan hängt sig. */
.archive-progress { margin: 8px 0; }
.archive-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-top: 6px;
  max-width: 320px;
}
.archive-progress-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Klubb/Lags "År"-kolumn (renderYearsWithGaps) — ett år cupen arkiverat
   men klubben INTE deltog i, blandat in bland åren de faktiskt var med. */
.club-year-gap { color: var(--live); }
.club-year-ranges { white-space: nowrap; }

/* Klubb/Lag-tabellens tre mängdkolumner: totalen är primär, snitt och
   median per deltagande cupår ligger kompakt på en andra rad. */
.club-metric-cell { display: inline-grid; gap: 1px; min-width: 92px; white-space: nowrap; }
.club-metric-cell strong { font-size: 14px; color: var(--ink); }
.club-metric-cell small { font-size: 10.5px; font-weight: 400; color: var(--ink-soft); }

/* lagfärgprick på matchkort */

.team-color-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

/* favoritlag-stjärna (matchkort + nästa match-kortet) */

.fav-team-star {
  margin-left: 5px;
  font-size: 0.85em;
  /* Emojins egen baslinje sitter lägre än textens, så vertical-align:
     middle lämnar stjärnan drygt en pixel under radens mitt. Lyft den med
     en andel av teckenstorleken, inte ett fast pixeltal, så korrigeringen
     följer med när kortet komprimeras och texten krymper. */
  vertical-align: middle;
  position: relative;
  top: -0.075em;
}

/* vätskepaus-indikator i tidslinjen */

.break-line {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.break-line span {
  background: color-mix(in srgb, var(--won) 16%, var(--card));
  border: 1px solid color-mix(in srgb, var(--won) 40%, var(--line));
  color: var(--won);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* matchdialog: lagstatistik + snabblänkar */

dialog.match-dialog {
  max-width: 440px;
  padding: 20px 18px 14px;
  /* Ingen egen "position" här — <dialog> är redan position:fixed när den
     visas som modal (showModal()), vilket också ger .dialog-x en korrekt
     positioneringskontext. Att sätta position:relative här bröt fixed-
     positioneringen och gjorde att helskärmsläget nedan hamnade uppe i
     DOKUMENTET (måste scrollas till) i stället för fast i VIEWPORTEN. */
}

/* Fullskärm på mobil — mer plats för lagstatistik/inbördes möten, och
   enklare att träffa "Stäng" med tummen än en liten centrerad kortmodal. */
@media (max-width: 700px) {
  /* Helskärm, och den TÄCKER menyn. Dialogen öppnas modalt (showMatchDialog
     i js/ui/match-ui.js) och hamnar därmed i webbläsarens topplager, där
     inget z-index på sidan når den.

     Icke-modalt låg den kvar i det vanliga z-index-spelet på 60 medan menyn
     står på 72, och menyraderna målades då MITT I dialogen: rubriken överst,
     sedan hela menyn, sedan resten av innehållet. Att i stället hänga
     dialogen under menyn löste det bara så länge sidan stod still — menyn är
     klistrad, så scrollade bakgrunden gled dess underkant och menyn åt sig in
     över dialogens överkant igen. Topplagret gör hela frågan omöjlig att
     ställa. */
  dialog.match-dialog {
    position: fixed;
    margin: 0;
    inset: 0;
    /* Helskärm ska inte ha ram: den generella dialog-regeln sätter 1px, och
       med radien nollställd blev det en hårfin linje runt hela skärmkanten. */
    border: 0;
    z-index: 60;
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0;
    padding: max(20px, env(safe-area-inset-top)) 18px
             max(14px, env(safe-area-inset-bottom)) 18px;
    overflow-y: auto;
  }
}

.dialog-x {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
}

.dialog-x:hover { color: var(--ink); }

/* --- matchark ------------------------------------------------------------
   Ett ark för en match, med flikar för hemmalag, bortalag och plan. Rubriken
   är densamma oavsett vilken av de tre ingångarna man kom från, så man alltid
   vet vilken match man står i.

   Formen är lånad från appens egen värld och inte hittad på: klasschippet och
   den kondenserade typografin är samma som på matchkorten och i dagrubrikerna,
   så arket läser som en förstoring av kortet man just tryckte på — inte som en
   ny sorts yta. */
.match-sheet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -18px -18px 10px;
  padding: 4px 6px 4px 4px;
  border-bottom: 1px solid var(--line);
}
/* Tillbaka som ord, inte bara en pil: på en helskärmsyta är det en väg ut ur
   en vy, och då ska den heta något. Pilen ritas i CSS så den sitter ihop med
   texten som en enhet. */
.match-sheet-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px 0 8px;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.match-sheet-back::before {
  content: "";
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.match-sheet-head { margin-bottom: 14px; }
.match-sheet-eyebrow {
  margin: 0 0 6px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.match-sheet-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.match-sheet-teams { flex: 1; min-width: 0; }
.match-sheet-team {
  font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Vinnaren bär tyngden, den egna klubben färgen — samma två signaler som på
   matchkortet, så blicken hittar rätt utan att lära om. */
.match-sheet-team.won { color: var(--ink); }
.match-sheet-team.us { color: var(--blue); }
.match-sheet-score {
  flex: 0 0 auto;
  font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.match-sheet-periods {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.match-sheet-when {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.match-sheet-tabs {
  display: flex;
  gap: 4px;
  margin: 4px -18px 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.match-sheet-tabs::-webkit-scrollbar { display: none; }
.match-sheet-tab {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.match-sheet-tab.kort { flex: none; max-width: none; }

.match-sheet-tab.on {
  color: var(--blue);
  border-bottom-color: var(--blue);
}
.match-sheet-tabbody { padding-top: 12px; }
/* Rubriken sitter redan i arket — lagnamnet behöver inte upprepas överst i
   flikens eget block. */
.match-sheet-tabbody .team-stat-block > h3 { display: none; }

/* På dator är arket en centrerad kortmodal, och där är krysset det etablerade
   sättet att stänga. "Tillbaka" hör till helskärmsvyn på mobil, där man
   backar ut ur något man gick in i. */
@media (min-width: 701px) {
  .match-sheet-back { display: none; }
  .match-sheet-bar { justify-content: flex-end; border-bottom: 0; margin-bottom: 4px; }
}
@media (max-width: 700px) {
  .match-sheet .dialog-x { display: none; }
  /* Arket bär ingen egen toppfyllning — raden gör det. Med fyllning kvar och
     en negativ marginal för att kompensera hamnade raden fel: sticky räknar
     top:0 från INNEHÅLLSlådan, alltså nedanför fyllningen, medan marginalen
     drog flödet uppåt. Raden sköts då ner över rubriken den skulle stå
     ovanför. */
  dialog.match-dialog.match-sheet { padding-top: 0; }
  .match-sheet-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -18px 10px;
    padding-top: max(4px, env(safe-area-inset-top));
    background: var(--card);
  }
}

.match-dialog-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  font-size: 12px;
  color: var(--ink-soft);
  padding-right: 24px;
  margin-bottom: 12px;
}

.match-dialog-head .cat { font-weight: 600; color: var(--blue); }

/* snabbtitt på en banas matcher — listan scrollar för sig, så titel och
   "filtrera schemat"-knappen alltid syns kvar överst */
.arena-quick-list {
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

/* historik: jämför lag mellan år, eller bläddra i en hel gammal upplaga
   som en egen liten app (Schema/Tabeller/Slutspel/Bana) ----------------- */

/* Bred centrerad dialogruta (som .match-dialog, men gott om plats åt
   "Bläddra i ett år"-lägets egen flikrad/breda tabeller) — headern syns
   kvar bakom den halvtransparenta bakgrunden i stället för att helt
   försvinna som tidigare (helskärm ens på dator gjorde Historik kännas
   frikopplad från resten av appen). Fullskärm bara på mobil, samma
   mönster som .match-dialog nedan. */
dialog.history-dialog {
  max-width: 960px;
  width: calc(100vw - 40px);
  max-height: 90vh;
  padding: max(20px, env(safe-area-inset-top)) 18px
           max(14px, env(safe-area-inset-bottom)) 18px;
  overflow-y: auto;
}

@media (max-width: 480px) {
  dialog.history-dialog {
    margin: 0;
    inset: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

.history-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.history-controls select { flex: 0 0 auto; }
.history-controls .autocomplete-wrap { flex: 1 1 200px; min-width: 160px; }
/* flex: 0 1 (inte 1 1) — samma mönster som huvudverktygsradens egen
   sökruta (.tools-row .search-wrap) — växer INTE för att fylla ut resten
   av raden, bara krymper vid platsbrist. En ensam smal cupväljarchip
   bredvid gjorde annars sökrutan orimligt bred. */
.history-controls .trend-team-search { flex: 0 1 240px; min-width: 160px; }
.history-controls .compare-search-wrap { flex: 0 1 260px; min-width: 160px; }
/* Chippen (t.ex. Kartans cupväljare) hade annars 2px lägre padding än
   sökrutan bredvid (.chip: 4px, .search: 6px) — märktes som en synlig
   höjdskillnad i samma rad. */
.history-controls .team-picker-summary { padding-top: 6px; padding-bottom: 6px; }
/* :not([type="checkbox"]) — annars sträcks kryssrutorna INUTI en
   buildPicker()-dropdown (t.ex. Kartans cupväljare) ut till 230px breda av
   samma regel, vilket tryckte deras etikettext helt utanför synligt område. */
.history-controls input:not([type="checkbox"]) { width: 100%; }

/* "Trend" ------------------------------------------------------------------ */

.trend-baseline-row { margin-bottom: 10px; }

.trend-chart-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}

.trend-svg { display: block; width: 100%; height: auto; }

.trend-baseline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 3; }

.trend-axis-label { fill: var(--ink-soft); font-size: 11px; }

.trend-line { fill: none; stroke-width: 2; opacity: 0.85; }

.trend-dot { stroke: var(--card); stroke-width: 1.5; cursor: default; }

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
}

.trend-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.trend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.trend-delta { font-weight: 600; }
.trend-delta.up { color: var(--won); }
.trend-delta.down { color: var(--live); }

.trend-note { margin-top: 10px; font-size: 12px; }
/* Markör för ännu ospelad upplaga (preliminary i data/archive/index.json) */
.trend-prelim { color: var(--muted); cursor: help; }

/* "Bläddra i ett år" ----------------------------------------------------- */

.history-picker {
  max-width: 480px;
  display: grid;
  gap: 14px;
}

.history-viewer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 6px;
}

.history-viewer-head .cat { font-weight: 600; color: var(--blue); }

.history-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
  /* Stats sex underflikar (Trend/Karta/Klubb-Lag/Klubbjämförelse/Cuper/
     Historik) rymdes inte på en smal mobilskärm — utan scroll klipptes de
     bortre flikarna bara av, oåtkomliga. Samma mönster som #viewTabs. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Lättare vikt än huvudnavigeringens .tab (samma klass, se #viewTabs) —
   en underflikrad direkt under en full flikrad (Historik-modalen, och
   Stats egen Trend/Karta/Klubb-Lag/Klubbjämförelse/Cuper, se
   renderStatsView) ser annars ut som en andra likvärdig huvudmeny och
   gör avståndet mellan raderna missvisande stort trots litet faktiskt
   mellanrum. */
.history-tabs .tab { padding: 6px 4px; margin-right: 10px; font-size: 14px; }

.history-viewer-body { min-height: 40vh; }
.history-tables-content { display: grid; gap: 4px; }

.history-year {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}

.history-year summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.history-year summary::-webkit-details-marker { display: none; }

.history-year-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
}

.history-year-stats {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

.history-year .arena-quick-list {
  max-height: none;
  margin: 0;
  padding: 0 12px 12px;
}

/* slutspelsträd/tabeller för en enskild klass i en arkiverad edition —
   samma bracket-box/table-box-stil som live-vyerna, bara nästlade en nivå
   djupare inuti historikdialogens år-detaljer. */
.history-extra {
  padding: 0 12px 12px;
  display: grid;
  gap: 4px;
}

.history-sub-h {
  margin: 10px 0 2px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.history-extra .bracket-row { margin-bottom: 4px; }
.history-extra .table-box { margin-bottom: 4px; }

.arch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12.5px;
}

.arch-date { color: var(--ink-soft); flex: 0 0 auto; }
.arch-teams { flex: 1 1 auto; min-width: 140px; }
.arch-teams .us { font-weight: 600; color: var(--blue-deep); }

/* Stjärnknapp vid lagnamn i historikens rader (archiveFavStar i js/app.js).
   Dämpad tills den är påslagen eller pekas på — annars konkurrerar två
   stjärnor per rad med resultatet om uppmärksamheten. */
.arch-fav {
  border: none;
  background: none;
  padding: 0 2px;
  margin-left: 2px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.28;
  transition: opacity 0.12s;
}

.arch-fav:hover, .arch-fav:focus-visible { opacity: 1; }
.arch-fav.on { opacity: 1; }
.arch-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.arch-cat { color: var(--ink-soft); font-size: 11px; }

.team-stat-block {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.team-stat-block h3 {
  margin: 0 0 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 17px;
}

.team-stat-block h3.us { color: var(--blue-deep); }

.team-stat-line { min-height: 15px; }

/* wrap: raden rymmer nu även favoritlagsknappen och blev för trång på
   mobil (se favoriteTeamToggle i js/app.js) */
.team-stat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.team-stat-actions .btn[disabled] { opacity: 0.4; cursor: default; }

/* Påslaget favoritlag — samma gula markering som stjärnan i schemat */
.team-stat-actions .btn.on {
  border-color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 18%, transparent);
  font-weight: 600;
}

.playoff-source-groups {
  border-top: 1px solid var(--line);
  padding: 12px 0 2px;
}

.playoff-source-groups > h3 { margin: 0 0 10px; font-size: 17px; }
.playoff-source-table { margin: 0 0 12px; overflow-x: auto; }
.playoff-source-table h4 { margin: 0; padding: 9px 10px; font-size: 14px; }
.playoff-source-table h4 .muted { font-weight: 400; }
.playoff-source-table .standings { min-width: 330px; }
.playoff-source-rank {
  background: color-mix(in srgb, var(--yellow) 22%, var(--card));
  box-shadow: inset 3px 0 0 var(--yellow);
  font-weight: 700;
}

/* Valda favoritlag i inställningarna (renderFavoriteTeamList i js/app.js) */
.fav-team-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}

.fav-team-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--yellow);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
}

.fav-team-cohort { color: var(--ink-soft); font-size: 12px; }

.fav-team-remove {
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 999px;
}

.fav-team-remove:hover { color: var(--live); background: var(--paper); }

.team-roster {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.team-roster h4 {
  margin: 0 0 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.team-roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
  font-size: 13px;
  max-height: 240px;
  overflow-y: auto;
}

.team-roster-list li { display: flex; align-items: baseline; gap: 8px; }

.roster-nr {
  flex: none;
  width: 22px;
  text-align: right;
  font-weight: 600;
  color: var(--ink-soft);
}

.roster-name { flex: 1; min-width: 0; }
.roster-pos, .roster-goals { flex: none; font-size: 12px; color: var(--ink-soft); }

.prev-meetings:empty { display: none; }

.prev-meetings h4 {
  margin: 0 0 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.prev-meetings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 13px;
}

/* slutspelsträd */

.bracket-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  transform-origin: top left;
  /* Samma min-width:auto-fälla en nivå upp: inuti historikdialogen är
     .bracket-row själv ett grid-item (.history-extra), så utan den här
     kunde INTE .bracket-box:s egen min-width:0 hjälpa — .bracket-row
     vägrade redan krympa under sitt totala innehålls bredd. */
  min-width: 0;
  max-width: 100%;
}

.bracket-box {
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 96%, var(--ink)));
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  padding: 14px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 1px 2px rgba(22, 40, 63, 0.06);
  /* Flex-items krymper aldrig under sitt innehålls egen bredd som
     standard (min-width:auto) — utan den här överstyrningen växer
     rutan bara bredare i stället för att scrolla, vilket i sin tur
     klipptes bort tyst av historik-dialogens overflow:hidden-förälder
     (syntes bara som "bara första omgången, kan inte scrolla i sidled"). */
  min-width: 0;
  max-width: 100%;
}

/* Inga egna gester: webbläsaren äger både scroll och nypzoom över trädet,
   precis som över resten av sidan. En egen pinch-hanterare gjorde CSS-zoom
   och sidans scrollposition om vid varje bildruta, vilket kostade en full
   omritning av trädet per fingerrörelse — märkbart trögt på mobil, och
   nypzoom fungerade dessutom inte som någon annanstans i appen.
   overscroll-behavior-x hindrar att en snabb sidledsdragning i trädet
   råkar utlösa webbläsarens bakåtsvep. */
.bracket-box { overscroll-behavior-x: contain; }

.team-playoff-placement {
  margin: 2px 0 8px;
  color: var(--blue);
  font-weight: 700;
}

.playoff-placement-box > .muted { margin: -4px 12px 10px; }
.playoff-placement-table .pts { white-space: nowrap; }
.playoff-placement-table tr.us td:first-child {
  box-shadow: inset 3px 0 0 var(--blue);
}

/* Ingen egen margin på divTabs — en asymmetrisk topp-/bottenmargin på ETT
   flex-item i .playoff-tabs-row (align-items:center) trycker isär dess
   marginbox från syskonens, så Träd/Tabell-växlaren hamnade synligt några
   pixlar lägre än A-/B-/C-Slutspel-flikarna trots att båda är lika höga.
   Mellanrummet till innehållet under läggs i stället på hela raden. */
.playoff-tabs-row { margin-bottom: 12px; }

.bracket-box h3 {
  margin: 0 0 14px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* Trädet placeras av uträknade platser, inte av flödet: varje kort får
   ett --plats-tal (se bracketLayout i js/ui/playoffs.js) som blir en
   top-koordinat här. Därför ligger en kvartsfinal exakt mitt emellan sina
   två åttondelsfinaler, och förbindelselinjerna kan ritas ur samma tal i
   stället för att mätas upp efteråt. --steg justeras av
   drawBracketConnectors så att steget rymmer det högsta kortet. */
.bracket {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--klyfta, 56px);
  width: max-content;
  min-width: 100%;
}

/* Zoom-reglaget för trädet — samma chip-stil som övriga verktyg, men
   siffran i mitten fungerar som en klickbar "återställ till 100 %". */
.bracket-zoom .chip {
  min-width: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bracket-zoom .chip:disabled { opacity: 0.4; cursor: default; }

/* kopplingslinjer mellan en match och matchen dess vinnare går vidare
   till — ritade som SVG (js/app.js: drawBracketConnectors) eftersom
   nextWinnerId ger den faktiska kopplingen, inte bara visuell närhet.
   Mjukt rundade hörn (roundedElbowPath) + runda linjeändar för ett
   luftigare, mindre "ritprogram"-aktigt intryck. */
.bracket-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.bracket-connector-line {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.bracket-connector-line.ours { stroke: var(--blue); stroke-width: 2.5; opacity: 1; }

.bracket-round {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--kol, 176px);
  height: calc(var(--etikett, 34px) + var(--platser, 1) * var(--steg, 104px));
}

.bracket-round-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.bracket-match {
  position: absolute;
  left: 0;
  right: 0;
  /* Mitten på kortets plats. translateY(-50%) i stället för en uträknad
     marginal: då behöver placeringen inte veta hur högt kortet är, och
     ett utfällt prognoskort växer åt båda hållen kring samma mittlinje —
     som linjen in i det redan är ritad efter. */
  top: calc(var(--etikett, 34px) + (var(--plats, 0) + 0.5) * var(--steg, 104px));
  transform: translateY(-50%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(22, 40, 63, 0.05);
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

/* Ingen lyftning vid hover: transform bär kortets egen centrering. */
.bracket-match:hover {
  border-color: var(--blue);
  box-shadow: 0 3px 10px rgba(22, 40, 63, 0.12);
}

.bracket-match.ours {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  box-shadow: inset 3px 0 0 var(--blue);
}

/* slutspelsprognos: tydligt urskiljbar från riktiga, spelade matcher —
   streckad kant + kursiv, ingen bock, egen "Prognos"-etikett i stället
   för klockslag/resultat. */
.bracket-match.predicted-match {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.bracket-match.predicted-match:hover { box-shadow: none; }

.bracket-match.relevant-path {
  border-color: color-mix(in srgb, var(--yellow) 72%, var(--line));
  box-shadow: inset 3px 0 0 var(--yellow);
}

.bracket-relevance-tag {
  display: block;
  margin-bottom: 2px;
  color: color-mix(in srgb, var(--yellow) 72%, var(--ink));
  font-weight: 700;
  font-size: 10px;
}

.bracket-table-row.relevant-path {
  background: color-mix(in srgb, var(--yellow) 16%, var(--card));
  box-shadow: inset 3px 0 0 var(--yellow);
}

.bracket-relevance-inline { color: #a77c00; }
.playoff-relevance-note { margin: 4px 0 8px; }
.playoff-display-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 4px 0 10px;
}
.playoff-display-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.playoff-display-toggle input { margin: 0; accent-color: var(--blue); }
.playoff-display-toggle:has(input:checked) { color: var(--ink); }
.bracket-table-row.predicted-match { opacity: 0.85; }

.bracket-teams { display: grid; gap: 3px; margin-bottom: 5px; }

.bracket-team {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 0;
}

.bracket-team.us { font-weight: 600; color: var(--blue-deep); }
.bracket-team.won {
  font-weight: 600;
  background: color-mix(in srgb, var(--won) 10%, transparent);
  border-radius: 4px;
  padding-left: 4px;
  margin-left: -4px;
}
.bracket-team.won::after { content: " ✓"; color: var(--won); font-size: 11px; }
.bracket-team.predicted, span.predicted { font-style: italic; color: var(--ink-soft); }
.bracket-team.predicted.won { color: var(--ink); }
.playoff-candidate-rotation {
  display: inline-flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  vertical-align: middle;
}
.playoff-candidate-rotation[role="button"] {
  cursor: pointer;
  border-radius: 4px;
}
.playoff-candidate-rotation[role="button"]:hover .playoff-candidate-count,
.playoff-candidate-rotation[role="button"]:focus-visible .playoff-candidate-count {
  text-decoration: underline;
}
.playoff-candidate-rotation[role="button"]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.playoff-rotating-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playoff-candidate-count {
  color: var(--blue);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.group-candidate-summary { margin: -4px 12px 8px; font-size: 12px; }
.group-candidate-mark {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.standings tr.possible-group-winner td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--blue) 65%, transparent);
}
.playoff-candidates-dialog { width: min(720px, calc(100vw - 24px)); }
.playoff-candidates-table { overflow-x: auto; }

.bracket-score {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.predicted-match .bracket-score { font-style: italic; font-weight: 500; color: var(--ink-soft); }

.bracket-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* admin-sidan */

.admin-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  max-width: 480px;
  margin: 18px auto;
}

.admin-card h2,
.admin-toolbar h2 {
  margin: 0 0 8px;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 20px;
}

.admin form { display: grid; gap: 8px; }

.admin input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}

.admin-msg { font-size: 13px; margin-top: 10px; }
.admin-msg.ok { color: var(--won); }
.admin-msg.err { color: var(--live); }

.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.admin-toolbar .spacer { flex: 1; }

.admin-cup {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 10px 0;
}

.admin-cup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.admin-cup-head strong { font-size: 15px; }
.admin-cup-head .muted { flex: 1; font-size: 12px; }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.admin-field {
  display: grid;
  gap: 3px;
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-field input { font-size: 14px; text-transform: none; letter-spacing: 0; }

/* Kryssruta i samma rutnät som textfälten: etiketten hör ihop med rutan i
   sidled i stället för att stå som en rubrik ovanför den. */
.admin-field-check {
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: end;
  padding-bottom: 7px;
}
.admin-field-check input { flex: none; width: 16px; height: 16px; }

/* --- utvecklar-testreglage (js/welcome.js, byggs BARA på localhost/?tune) */
.welcome-tune {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  width: 232px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(10, 15, 24, 0.9);
  color: #eef2f8;
  font: 12px/1.3 system-ui, sans-serif;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.welcome-tune-head { font-weight: 700; margin-bottom: 2px; opacity: 0.85; }
.welcome-tune-sub {
  margin-top: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 6px;
}
.welcome-tune input[type="color"] { width: 42px; height: 20px; padding: 0; border: none; background: none; cursor: pointer; }
.welcome-tune-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; }
.welcome-tune-row input[type="range"] { grid-column: 1 / -1; width: 100%; }
.welcome-tune-row select { grid-column: 2; }
.welcome-tune-val { font-variant-numeric: tabular-nums; opacity: 0.7; }
.welcome-tune-btns { display: flex; gap: 6px; margin-top: 6px; }
.welcome-tune button {
  flex: 1;
  padding: 7px;
  border: none;
  border-radius: 8px;
  background: var(--yellow);
  color: #16283f;
  font-weight: 700;
  cursor: pointer;
}
.welcome-tune-reset {
  flex: 0 0 auto !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #eef2f8 !important;
}

/* --- välkomstöverlägg (js/welcome.js) --------------------------------- */
/* Följer appens vanliga ljust/mörkt-tema (samma --paper/--ink-tokensystem
   som resten av sidan, se :root ovan) i stället för fasta färger — de
   egna --welcome-*-tokenerna nedan är bara till för sådant som INTE
   redan har en site-generell motsvarighet (kortens genomskinlighet mot
   kartan, vinjettens gradientfärg, kartfiltret). Samma tre-stegs mönster
   som resten av filen: :root-standard (ljust) -> @media prefers-color-
   scheme (OS-preferens) -> :root[data-theme] (manuellt val, vinner alltid
   via attributselektorns högre specificitet). */
.welcome-overlay {
  --welcome-card-bg: rgba(255, 255, 255, 0.82);
  --welcome-border: rgba(22, 40, 63, 0.14);
  --welcome-scrim-1: rgba(255, 255, 255, 0.6);
  --welcome-scrim-2: rgba(255, 255, 255, 0.15);
  --welcome-scrim-3: rgba(255, 255, 255, 0.72);
  --welcome-text-shadow: rgba(255, 255, 255, 0.7);
  --welcome-map-filter: none; /* OpenFreeMaps ljusa "liberty"-stil duger som den är i ljust tema */
  /* Accentfärg för kicker + statsiffror: gult syns bra mot en mörk karta
     men blir närmast oläsligt (låg kontrast) mot ett ljust kort — djup
     marinblå i ljust tema i stället. */
  --welcome-accent: #17417e;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .welcome-overlay {
    --welcome-card-bg: rgba(12, 18, 28, 0.68);
    --welcome-border: rgba(255, 255, 255, 0.12);
    --welcome-scrim-1: rgba(15, 23, 35, 0.55);
    --welcome-scrim-2: rgba(15, 23, 35, 0.15);
    --welcome-scrim-3: rgba(15, 23, 35, 0.75);
    --welcome-text-shadow: rgba(0, 0, 0, 0.6);
    --welcome-map-filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.85);
    --welcome-accent: var(--yellow);
  }
}
:root[data-theme="dark"] .welcome-overlay {
  --welcome-card-bg: rgba(12, 18, 28, 0.68);
  --welcome-border: rgba(255, 255, 255, 0.12);
  --welcome-scrim-1: rgba(15, 23, 35, 0.55);
  --welcome-scrim-2: rgba(15, 23, 35, 0.15);
  --welcome-scrim-3: rgba(15, 23, 35, 0.75);
  --welcome-text-shadow: rgba(0, 0, 0, 0.6);
  --welcome-map-filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.85);
  --welcome-accent: var(--yellow);
}
:root[data-theme="light"] .welcome-overlay {
  --welcome-card-bg: rgba(255, 255, 255, 0.82);
  --welcome-border: rgba(22, 40, 63, 0.14);
  --welcome-scrim-1: rgba(255, 255, 255, 0.6);
  --welcome-scrim-2: rgba(255, 255, 255, 0.15);
  --welcome-scrim-3: rgba(255, 255, 255, 0.72);
  --welcome-text-shadow: rgba(255, 255, 255, 0.7);
  --welcome-map-filter: none;
  --welcome-accent: #17417e;
}

/* Specificitet (.welcome-overlay .welcome-map, INTE bara .welcome-map)
   är medveten: maplibre-gl.css lägger själv klassen "maplibregl-map" på
   containern med en egen "position: relative"-regel av samma specificitet
   som en ensam .welcome-map-selektor — och laddas EFTER style.css (se
   ensureMapLibre i js/welcome.js), så den skulle annars vinna kaskaden
   och göra kartan till ett vanligt flödande flex-element i stället för
   en fullskärmsbakgrund (upptäckt som en oavsiktlig delad layout där
   kartan bara tog upp en del av bredden och texten resten). */
.welcome-overlay .welcome-map,
.welcome-overlay .welcome-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Kartlagret är dekorativt (interactive:false i js/welcome.js) — men
   maplibre-gl.css sätter ändå cursor:grab på sin canvas som standard.
   OpenFreeMap har ingen färdig mörk stil, så själva kartlagret (INTE
   dess kontroller, se attributionen nedan) mörkläggs i mörkt tema med
   ett CSS-filter (--welcome-map-filter, se .welcome-overlay ovan) — ett
   välkänt "fattigmans-mörkt-läge"-knep; i ljust tema behövs inget filter,
   OpenFreeMaps egen ljusa "liberty"-stil duger som den är. */
.welcome-map .maplibregl-canvas {
  cursor: default;
  filter: var(--welcome-map-filter);
}
.welcome-dots { pointer-events: none; }

/* OpenFreeMap/OpenMapTiles kräver attribution — behålls, men färgsätts om
   till samma temaanpassade kortfärg som resten av överlägget i stället
   för maplibre-gl.css standardvita kontrollbakgrund. */
.welcome-overlay .maplibregl-ctrl-attrib {
  background: var(--welcome-card-bg);
  color: var(--ink-soft);
}
.welcome-overlay .maplibregl-ctrl-attrib a { color: var(--ink-soft); }
@media (prefers-color-scheme: dark) {
  .welcome-overlay .maplibregl-ctrl-attrib-button { filter: invert(1) brightness(1.6); }
}
:root[data-theme="dark"] .welcome-overlay .maplibregl-ctrl-attrib-button { filter: invert(1) brightness(1.6); }
:root[data-theme="light"] .welcome-overlay .maplibregl-ctrl-attrib-button { filter: none; }

/* Inforutan för den just nu visade cupen — samma temaanpassade, blurrade
   kortstil som .welcome-stat/.welcome-feature (se deras kommentar om
   varför: en riktig, ibland kontrastrik karta lyser annars igenom för
   mycket för att texten ska bli lättläst). */
.welcome-cup-controls {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--welcome-card-bg);
  border: 1px solid var(--welcome-border);
  border-radius: var(--radius);
  padding: 8px 10px;
  backdrop-filter: blur(6px);
}

.welcome-cup-text {
  opacity: 0;
  pointer-events: none;
}

.welcome-cup-title {
  font: 600 13px Barlow, sans-serif;
  color: var(--ink);
}

.welcome-cup-count {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 1px;
}

/* Klick öppnar dropupen (se .welcome-cup-dropup) där man själv kan välja
   vilken cup som visas. Bara ett tunt klickbart hölje runt den redan
   existerande cuptexten — ingen egen bakgrund, sitter redan i
   .welcome-cup-controls kort. */
.welcome-cup-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.welcome-cup-caret {
  flex: none;
  font-size: 10px;
  color: var(--ink-soft);
}

.welcome-cup-dropup {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin: 0 0 8px;
  padding: 6px;
  max-height: 260px;
  min-width: 210px;
  overflow-y: auto;
  list-style: none;
  background: var(--welcome-card-bg);
  border: 1px solid var(--welcome-border);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.welcome-cup-dropup li { margin: 0; }
.welcome-cup-dropup button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.welcome-cup-dropup button:hover,
.welcome-cup-dropup button:focus-visible { background: var(--welcome-border); }

/* Egen play/paus-knapp för animationen — till skillnad från cuptexten
   (som tonas in/ut med cup-cykeln) håller den sig konstant synlig så den
   alltid går att klicka. */
.welcome-playpause {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--welcome-border);
  background: var(--welcome-card-bg);
  color: var(--ink);
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.welcome-playpause:hover { filter: brightness(1.15); }

/* Vinjett upptill/nedtill + en svag global dämpning — utan den
   konkurrerade prickarna för mycket med texten om en klunga råkade hamna
   bakom den. Färgen (--welcome-scrim-*) följer temat: mörk vinjett i
   mörkt läge, ljus i ljust — se .welcome-overlay ovan. */
.welcome-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--welcome-scrim-1) 0%, var(--welcome-scrim-2) 22%,
      var(--welcome-scrim-2) 60%, var(--welcome-scrim-3) 100%);
  pointer-events: none;
}

.welcome-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--welcome-border);
  background: var(--welcome-card-bg);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.welcome-close:hover { filter: brightness(1.15); }

/* Temaväxlaren — samma runda knappstil som stängknappen, en aning till
   vänster om den. Skriver till samma hb:theme-nyckel som appens egen
   inställningsmeny (se applyTheme i js/app.js), så valet hänger kvar
   även efter man stängt välkomstskärmen. */
.welcome-theme-toggle {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: calc(max(14px, env(safe-area-inset-right)) + 46px);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--welcome-border);
  background: var(--welcome-card-bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.welcome-theme-toggle:hover { filter: brightness(1.15); }

.welcome-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: max(48px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  scrollbar-width: thin;
}

.welcome-kicker {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--welcome-accent);
  text-align: center;
}

.welcome-title {
  margin: 0 0 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 9vw, 64px);
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: 0 2px 24px var(--welcome-text-shadow);
}

/* Knyter hero-texten till kartanimationens aktuella cup (se onCupChange/
   setCupStats i js/welcome.js) — tom (ingen höjd) tills första cupen
   hunnit väljas, så det inte hoppar till när texten dyker upp. */
.welcome-live-cup {
  margin: 0 0 14px;
  min-height: 1.3em;
  font-size: 14px;
  font-weight: 600;
  color: var(--welcome-accent);
  text-align: center;
}

.welcome-lead {
  margin: 0 auto 28px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

.welcome-sport-filter {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: -14px auto 18px;
}

.welcome-sport-chip {
  border: 1px solid var(--welcome-border);
  border-radius: 999px;
  padding: 6px 11px;
  background: var(--welcome-card-bg);
  color: var(--ink-soft);
  font: 600 12px/1.2 "Barlow", system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.welcome-sport-chip:hover,
.welcome-sport-chip:focus-visible { color: var(--ink); }
.welcome-sport-chip.on {
  color: #16283f;
  background: var(--yellow);
  border-color: color-mix(in srgb, var(--yellow) 70%, var(--welcome-border));
}

.welcome-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin-bottom: 32px;
}

.welcome-stat {
  /* Täckande nog för att en riktig, ibland kontrastrik karta inte ska
     lysa igenom för mycket och göra texten svårläst — se --welcome-card-bg
     på .welcome-overlay ovan för hur den skiftar mellan ljust/mörkt tema. */
  background: var(--welcome-card-bg);
  border: 1px solid var(--welcome-border);
  border-radius: var(--radius);
  padding: 12px 8px;
  text-align: center;
  backdrop-filter: blur(6px);
}

.welcome-stat strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--welcome-accent);
}

.welcome-stat span {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Ger en känsla för aktuell cup i förhållande till hela sajten (se
   setCupStats i js/welcome.js) — tom (men med reserverad höjd, så
   korten inte hoppar till i storlek) i det globala baslägets kort. */
.welcome-stat small {
  display: block;
  min-height: 1.3em;
  margin-top: 4px;
  font-size: 10px;
  color: var(--ink-soft);
  opacity: 0.7;
}

.welcome-features {
  display: grid;
  gap: 14px;
  margin-bottom: 32px;
}

.welcome-feature {
  background: var(--welcome-card-bg);
  border: 1px solid var(--welcome-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  backdrop-filter: blur(6px);
}

.welcome-feature h3 {
  margin: 0 0 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
}
.welcome-feature h3::before { content: attr(data-emoji) "  "; }

.welcome-feature p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.welcome-cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}

/* "Läs mer" ska läsas som ett andrahandsval bredvid den gula knappen —
   samma tyngd som en länk, inte en andra call-to-action. */
.welcome-cta-secondary {
  color: inherit;
  opacity: 0.82;
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.welcome-cta-secondary {
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
}

.welcome-cta-secondary:hover { opacity: 1; }

.welcome-cta {
  background: var(--yellow);
  color: #16283f;
  border: none;
  border-radius: 999px;
  padding: 13px 32px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(246, 196, 16, 0.25);
}
.welcome-cta:hover { filter: brightness(1.06); }

.welcome-reopen {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .welcome-cta, .welcome-close { transition: none; }
}

@media (max-width: 480px) {
  .top-inner { padding: 7px 10px; }
  .brand { gap: 8px; }
  .header-identity { width: max-content; max-width: calc(100vw - 20px); gap: 8px; }
  .app-wordmark-mark { width: 29px; height: 29px; }
  .header-club img { width: 29px; height: 29px; }
  .header-context { flex: 0 1 auto; padding-left: 8px; }
  .header-club { max-width: 37vw; }
  .current-cup-label { max-width: 37vw; }
  /* minmax(0, 1fr) även här — se .slot ovan. Utan noll som golv sattes
     kolumnbredden av kortets innehåll, och korten blev olika breda
     i samma lista. */
  .slot { grid-template-columns: 44px minmax(0, 1fr); }
  #meta { display: none; }
  .welcome-content { padding-left: 18px; padding-right: 18px; }
  .welcome-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Vinnare (Stats-underflik): troféskåp, årets mästare, vinnartoppen ── */
.vinnare-body { margin-top: 4px; }
.vinnare-controls { align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 16px; }

/* Årsraden i vinnartoppen. Arton år ryms inte på en telefonskärm, och att
   låta dem radbrytas hade tryckt ned topplistan under vikningen. En egen
   scrollremsa i stället — samma grepp som klassflikarna i skyttelistan.
   Etiketten "År:" står kvar utanför remsan så den inte scrollar bort. */
.vinnare-ar { flex-wrap: nowrap; }

.vinnare-ar-scroll {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Utan detta klipps chipsens fokusring och skugga mot remsans kant. */
  padding: 3px 2px;
  /* min-width: 0 — annars vägrar remsan krympa under sitt innehålls bredd
     och tvingar hela raden bredare än skärmen (samma min-width:auto-fälla
     som i matchkorten). */
  min-width: 0;
}

.vinnare-ar-scroll::-webkit-scrollbar { display: none; }
.vinnare-ar-scroll .chip { flex: none; }
.trophy-hero { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin: 4px 0 18px; }
.trophy-num { background: linear-gradient(160deg, var(--blue-deep), var(--blue)); color: #fff;
  border-radius: var(--radius); padding: 14px 22px; text-align: center; min-width: 118px; }
.trophy-big { font: 700 46px/1 "Barlow Condensed", system-ui, sans-serif; color: var(--yellow); }
.trophy-lbl { font: 600 11px/1.2 "Barlow", system-ui; letter-spacing: 1.4px; text-transform: uppercase; opacity: .92; margin-top: 4px; }
.trophy-lead h3 { margin: 0 0 2px; font-size: 20px; }
.trophy-lead p { margin: 0; max-width: 52ch; }
.tro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tro { position: relative; background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--yellow); border-radius: var(--radius); padding: 11px 13px; box-shadow: var(--shadow); }
.tro-medal { position: absolute; top: 9px; right: 11px; font-size: 16px; }
.tro-yr { font: 700 22px/1 "Barlow Condensed", system-ui, sans-serif; color: var(--ink); }
.tro-cup { font-size: 12.5px; color: var(--ink-soft); margin: 1px 0 7px; }
.tro-cls { font-weight: 600; font-size: 14px; color: var(--ink); }
.tro-team { font-size: 13.5px; color: var(--blue); font-weight: 600; margin-top: 2px; }
.champ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.shared-bronze-note { margin: 10px 0 0; }
.champ { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 14px; box-shadow: var(--shadow); }
.champ-cls { font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 6px; }
.rank { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.rank + .rank { border-top: 1px dashed var(--line); }
.medal-badge { font-size: 17px; width: 1.5em; text-align: center; flex: 0 0 auto; }
.rank-team { font-size: 14px; color: var(--ink); }
.rank-team.us { color: var(--blue); font-weight: 700; }
.board { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); max-width: 460px; }
.brow { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; }
.brow + .brow { border-top: 1px solid var(--line); }
.brow-pos { font: 700 17px/1 "Barlow Condensed", system-ui, sans-serif; color: var(--ink-soft); text-align: center; }
.brow.top3 .brow-pos { color: var(--yellow); }
.brow-club { font-weight: 600; color: var(--ink); }
.brow-cnt { font: 700 18px/1 "Barlow Condensed", system-ui, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.brow-cnt small { font: 600 11px/1 "Barlow", system-ui; color: var(--ink-soft); }
.brow.us { background: color-mix(in srgb, var(--blue) 12%, transparent); border-left: 3px solid var(--blue); }
.brow.us .brow-club { color: var(--blue); font-weight: 700; }
.brow-sep { border-top: 2px solid var(--ink-soft) !important; }
@media (max-width: 560px) { .trophy-hero { grid-template-columns: 1fr; } }
.vinnare-club-input { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font: 500 15px "Barlow", system-ui, sans-serif;
  min-width: 240px; outline: none; }
.vinnare-club-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.tro-click { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.tro-click:hover { border-left-color: var(--blue); box-shadow: 0 4px 14px rgba(22,40,63,.14); transform: translateY(-1px); }
.tro-click:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tro-go { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--blue); opacity: 0; transition: opacity .12s; }
.tro-click:hover .tro-go, .tro-click:focus-visible .tro-go { opacity: 1; }
@media (hover: none) { .tro-go { opacity: .8; } }

/* ── Kalender (Stats-underflik): Gantt över cupernas speldagar ── */
/* Kalendern är en datamatris, inte en responsiv kortlista. Årsaxeln får en
   stabil arbetsbredd och hela ytan skrollar i båda riktningarna. Rubrikraden
   och cupkolumnen ligger kvar som i ett kalkylark, så man inte tappar vilken
   månad eller cup en stapel hör till. */
.gantt {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: min(62dvh, 620px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  touch-action: pan-x pan-y;
  background: var(--card);
}
.gantt-row {
  display: grid;
  grid-template-columns: 150px minmax(900px, 1fr);
  align-items: stretch;
  min-width: 1050px;
  min-height: 32px;
}
.gantt-row + .gantt-row { border-top: 1px solid var(--line); }
.gantt-headrow {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.gantt-label {
  position: sticky;
  left: 0;
  z-index: 2;
  padding: 6px 10px;
  border-right: 1px solid var(--line);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.gantt-headrow .gantt-label { z-index: 5; background: var(--paper); }
.gantt-track { position: relative; }
.gantt-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.gantt-month { position: absolute; top: 5px; font-size: 11px; color: var(--ink-soft); transform: translateX(3px); }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--live); opacity: .85; z-index: 2; }
.gantt-bar { position: absolute; top: 7px; height: 18px; border-radius: 5px; z-index: 1;
  background: linear-gradient(180deg, var(--blue), var(--blue-deep)); box-shadow: var(--shadow);
  display: flex; align-items: center; overflow: hidden; }
.gantt-bar-txt { font-size: 11px; line-height: 1; color: #fff; font-weight: 600; padding: 0 6px; white-space: nowrap; }
.gantt-row-click { cursor: pointer; }
.gantt-row-click:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.gantt-row-click:hover .gantt-label { background: color-mix(in srgb, var(--blue) 8%, var(--card)); }
.gantt-row-click:hover .gantt-bar { filter: brightness(1.1); }
.gantt-row-click:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.gantt-hint { margin-top: 8px; font-size: 13px; }
@media (max-width: 560px) {
  .gantt { max-height: 58dvh; }
  .gantt-row { grid-template-columns: 112px minmax(840px, 1fr); min-width: 952px; }
  .gantt-label { font-size: 12px; padding: 6px; }
}
.gantt-bar.gantt-preview { box-shadow: none; border: 1px dashed var(--blue);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--blue) 30%, transparent) 0 5px,
    color-mix(in srgb, var(--blue) 11%, transparent) 5px 10px); }
.gantt-bar.gantt-preview .gantt-bar-txt { color: var(--blue-deep); }
.gantt-row-prev .gantt-label { font-style: italic; color: var(--ink-soft); }
.tro-silver { border-left-color: #aab4c4; }
.tro-brons { border-left-color: #c9814a; }
.match-log-note { margin: 2px 0 10px; font-size: 13.5px; max-width: 62ch; }
.match-log-more { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; font-size: 13.5px; }

/* --- Bana-vyns platsblock (renderArenaPlaceBlock) ------------------------
   Adressraden under banväljaren, plus den utfällbara kartan över var cupens
   banor ligger. Lägre än Karta-flikens .map-box: här är kartan ett
   komplement till matchlistan under, inte vyns huvudinnehåll, och ska inte
   trycka ner listan utanför skärmen. */
.arena-address { margin: 2px 0 10px; font-size: 13.5px; }
.arena-pin { margin-right: 5px; }
.arena-siblings { color: var(--ink-soft); }

.arena-map-box {
  height: 42vh;
  min-height: 240px;
  max-height: 420px;
  margin: 10px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Platsnålen. Den valda banans plats fylls i --blue och får en ring, så den
   går att hitta direkt bland de andra i samma stad. */
.arena-marker {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink-soft);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(10, 18, 30, 0.35);
  cursor: pointer;
}
.arena-marker.on {
  background: var(--blue);
  width: 19px;
  height: 19px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 28%, transparent),
              0 1px 4px rgba(10, 18, 30, 0.35);
}

.arena-popup { font-size: 13px; line-height: 1.5; max-width: 230px; }
.arena-popup-courts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.arena-popup-courts .chip { font-size: 12px; padding: 2px 8px; }

/* Påminnelseväljaren i kalenderexporten (buildMatchExportPanel) — sitter
   indragen under .ics-raden så den läses som en inställning FÖR den, inte
   som ett eget exportformat i listan. */
.export-alarm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 6px 8px;
}
.export-alarm { flex: 1; min-width: 0; font-size: 13px; padding: 3px 6px; }

/* "Öppna i telefonen" med QR-kod (buildSendToPhoneBlock i js/app.js) —
   bara på dator, så bredden får vara generös. */
.export-phone { border-top: 1px solid var(--line); margin-top: 4px; }

.export-phone-panel { padding: 8px 10px 10px; }

.export-phone-panel svg {
  display: block;
  /* Större än den ser ut att behöva: en kod som fyller mindre än ~55 mm på
     skärmen kräver att man håller telefonen still och nära, vilket läser som
     "dålig upplösning" även när koden är matematiskt perfekt. Modulerna är
     kvadrater — det finns ingen upplösning att höja, bara yta att ge. */
  width: 232px;
  height: 232px;
  margin: 0 auto 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  /* QR-koden ritas alltid mörk på vitt: en kod med omvänd kontrast läses
     inte av alla kameraappar, så den behåller sin vita platta även i
     mörkt tema. */
  background: #fff;
}

.export-phone-panel p { margin: 0 0 8px; font-size: 12px; line-height: 1.45; max-width: 30ch; }

.export-phone-btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* Kalendertipset i exportpanelen — får inte konkurrera med knapparna, men
   ska gå att läsa innan man trycker (se buildMatchExportPanel i js/app.js). */
.export-note {
  margin: 2px 8px 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.45;
  max-width: 34ch;
}

/* Hjälptexten under "Appversion" i Inställningar — samma dämpade ton som
   övriga förklaringar i dialogen, men på egen rad under kontrollerna. */
.settings-hint { margin: 6px 0 0; font-size: 13px; max-width: 62ch; }

/* --- mobil: filterpanelerna som bottenark ------------------------------
   På smal skärm ligger panelen inte längre under sin knapp. En knapp långt
   till höger sköt ut hela panelen utanför skärmkanten (position:absolute
   mot knappen — max-width begränsar bredden, inte positionen), så sökruta
   och sorteringsval hamnade utanför. Här blir den i stället ett ark
   underifrån i full bredd, med draghandtag för att välja höjd själv.
   Gäller ALLA pickers, inklusive exportmenyn, eftersom de delar klass. */
@media (max-width: 700px) {
  .team-picker-dd[open] > .team-picker-panel,
  .team-picker-panel.picker-panel-portaled {
    position: fixed;
    left: 0;
    right: 0;
    /* HÄNGER FRÅN MENYN, inte från skärmens botten. Panelen är svaret på en
       bricka i filterremsan — låg den kvar som bottenark hamnade den i
       motsatt ände av skärmen mot knappen man just tryckte på, med hela
       matchlistan emellan. --topstack-h är menyraderna plus remsan
       (syncTopStack i app.js), alltså exakt underkanten på det man tryckte. */
    top: var(--topstack-bottom, 0px);
    bottom: auto;
    width: auto;
    max-width: none;
    /* Panelen växer efter innehållet. När listan blir längre än den synliga
       ytan begränsas den i stället av max-height och får intern scroll —
       korta filter blir alltså inte onödigt höga, medan långa listor aldrig
       kapas utanför skärmen. */
    height: auto;
    /* Taket mäts mot den SYNLIGA ytan (--vv-height, se syncViewportOffset),
       inte layoutens: med tangentbordet uppe eller ett utfällt adressfält är
       92vh långt mer än vad som faktiskt syns, och panelen växte då ut under
       skärmkanten med sina understa knappar utom räckhåll. Utan API:t (äldre
       webbläsare) faller den tillbaka på vh som förut. Minus stackens
       underkant, som arket hänger från. */
    max-height: min(92dvh, calc(var(--vv-height, 100vh) - var(--topstack-bottom, 0px) - 12px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0 0 18px 18px;
    border-top: none;
    padding: 0 14px max(16px, env(safe-area-inset-bottom)) 14px;
    box-shadow: 0 10px 30px rgba(10, 18, 30, 0.35);
    /* Innehållet ska växa nedåt från rubriken, inte spridas ut över hela
       arkets höjd som grid-standarden gör när arket är högre än innehållet. */
    align-content: start;
    /* Över filterarket (65) OCH bottenraden (70): en picker öppnad inifrån
       filterarket måste lägga sig ovanpå det, annars hamnar den bakom och
       blir helt oåtkomlig. */
    z-index: 80;
  }

  /* (Undantaget för utfällt filterark behövs inte längre: arket fälls ut
     nedåt från menyn i toppen och ingår inte i bottenstacken, så väljaren
     ligger redan dikt an mot skärmens underkant.) */

  .team-picker-dd[open] > .team-picker-panel > .team-picker-list,
  .team-picker-panel.picker-panel-portaled > .team-picker-list {
    max-height: none; /* arket sköter scrollen, inte listan */
  }

  /* Rubrikraden: klistrad högst upp så stängkrysset finns kvar när man
     scrollat ner i en lång lagliste. */
  .picker-sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    margin: 0 -14px 4px;
    padding: 10px 14px 8px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
  }

  /* Handtaget vid arkets UNDERKANT — den kant som rör sig när man drar (se
     ensureSheetHead i app.js). Klistrat så det är kvar även mitt i en lång
     lista, med samma kortfärg bakom sig som rubrikraden. */
  .picker-sheet-grip {
    position: sticky;
    bottom: 0;
    z-index: 1;
    justify-self: center;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    /* --line syns knappt mot --card i mörkt tema; --ink-soft nedtonad ger
       ett handtag som går att se utan att ta över rubrikraden. */
    background: var(--ink-soft);
    opacity: .5;
    margin-top: 6px;
    cursor: grab;
    /* Utan detta tolkar webbläsaren dragningen som sidscroll och
       pointermove-händelserna uteblir helt. */
    touch-action: none;
  }
  .picker-sheet-grip:active { cursor: grabbing; opacity: .85; }
  /* Osynlig men greppbar yta runt handtaget — 5 px är omöjligt att träffa. */
  .picker-sheet-grip::before {
    content: "";
    display: block;
    margin: -14px -24px;
    height: 33px;
  }

  .picker-sheet-title { font-weight: 600; font-size: 15px; }

  .picker-sheet-close {
    background: none;
    border: none;
    color: var(--ink-soft);
    font-size: 26px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
  }

  .picker-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 30, 0.45);
    z-index: 79; /* strax under picker-arket, se z-index-kommentaren ovan */
    touch-action: none;
    overscroll-behavior: contain;
  }
}

/* Rubrikraden hör bara till arket — på större skärmar är panelen en vanlig
   dropdown under sin knapp, där den bara vore i vägen. */
@media (min-width: 701px) {
  .picker-sheet-head, .picker-sheet-grip, .picker-sheet-backdrop { display: none; }
}

/* --- mobilens bottenrad ---------------------------------------------------
   Sidhuvud + vyflikar + verktygsrad tog 374 px av 844 på en telefon — 44 %
   av skärmen innan första matchen. Här flyttas vyvalet ner till tumhöjd och
   hela verktygsraden ersätts av en filterknapp som fäller upp den som ett
   ark, vilket ger tillbaka ~300 px åt innehållet. Över 700 px är allt
   oförändrat: bottenraden är hidden och toppen ser ut som förut. */
@media (max-width: 700px) {
  #desktopFilterHost { display: none; }

  /* Här låg tidigare "body.picker-open, html.picker-open { overflow: hidden }"
     som scrollås bakom en öppen väljare. Den gjorde två fel samtidigt:
     klassen sätts bara på <body> (aldrig på <html>), och body-varianten
     låser ingenting — html äger viewportens scroll, body blir bara en egen
     scrollbox. Det ENDA den gjorde var att bryta position:sticky på hela
     sidan, precis som overflow-x på body gjorde (se kommentaren högst upp):
     menyn i toppen rullade iväg så fort en väljare öppnades.

     Låset ligger nu i syncPageScrollLock (app.js) och blockerar själva
     gesten i stället för att röra overflow — layouten lämnas orörd, sticky
     fortsätter fungera, och arket kan hänga kvar under menyn. */

  /* --vv-offset kompenserar för att position:fixed utgår från LAYOUT-
     viewporten medan mobilwebbläsarnas krympande/flytande adressfält ändrar
     den VISUELLA. I Firefox blev raden hängande en bit ovanför skärmkanten
     med sidinnehåll synligt under — som en banner mitt i sidan. Sätts av
     syncViewportOffset() i app.js via Visual Viewport-API:t; 0 när API:t
     saknas eller de två viewporterna sammanfaller. */
  /* Hänger från menyn, precis som väljarpanelerna: arket är svaret på en
     knapp i Mer-raden i toppen. --topstack-bottom är stackens faktiska
     underkant i viewporten (syncTopStack i app.js) — inte dess höjd, för
     överst på sidan ligger menyn nedanför sidhuvudet. */
  .prototype-sheet {
    inset: var(--topstack-bottom, 0px) 0 auto 0;
    bottom: auto;
    width: 100vw;
    max-width: none;
    height: min(62dvh, 600px);
    max-height: calc(100dvh - var(--topstack-bottom, 0px) - 12px);
    margin: 0;
    transform: none;
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 10px 35px rgba(10, 18, 30, 0.35);
    /* Menyraderna ska alltid gå att använda för att växla bort från arket,
       även om sparad arkhöjd eller mobilens visual viewport mäts om. */
    z-index: 67;
  }
  .prototype-sheet[data-sheet-key="cup"] {
    height: auto;
    max-height: calc(100dvh - var(--topstack-bottom, 0px) - 12px);
  }
  .prototype-sheet[data-sheet-key="cup"] .prototype-sheet-body {
    max-height: calc(100dvh - var(--topstack-bottom, 0px) - 74px);
  }
  /* Draghandtaget sitter vid arkets UNDERKANT — den kant som rör sig när man
     drar (se prototypeDialog i app.js). Rubrikraden behåller sin plats
     överst med titel och stängkryss. */
  .prototype-sheet-grip {
    position: static;
    align-self: center;
    top: auto;
    transform: none;
    padding: 0;
  }
  /* Export är en egen Mer-vy på mobil, precis som Inställningar: den fyller
     hela ytan UNDER navigeringen och kan inte dras till en mellanhöjd.
     Menyn ska synas kvar med Export markerat i Mer-raden — som helskärm mot
     inset:0 hamnade den i stället bakom menyraderna (z-index 67 mot 72),
     med sidans egen meny mitt i arket. */
  .prototype-sheet.prototype-sheet-fullscreen {
    inset: var(--topstack-bottom, 0px) 0 0 0;
    width: 100vw;
    height: auto !important;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .prototype-sheet-fullscreen .prototype-sheet-head {
    min-height: 54px;
  }
  .prototype-sheet-fullscreen .prototype-sheet-grip { display: none; }

  /* Menyn ligger överst i flödet och RULLAR UNDAN som vanligt innehåll.
     Klistrad bytte den höjd mitt i en rullning när den fälldes ihop, och
     scrollpositionen fick kompenseras för att innehållet skulle stå still —
     två samtidiga hopp, och det var det som kändes ryckigt. Klistringen var
     dessutom källan till nästan allt annat vi fått laga: ark som måste hänga
     från en kant som rör sig, matchdialogen med menyn mitt i sig, och alla
     mätningar av var stacken råkar sluta just nu. */
  #mobileMenuHost {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    gap: 0;
    background: var(--menu-surface);
    border-bottom: 1px solid var(--menu-line);
    box-shadow: var(--menu-shadow);
  }

  #bottomBar,
  #currentViewBar,
  #currentSelectionBar,
  #moreMenuBar {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #mobileMenuHost #bottomBar,
  #mobileMenuHost #currentViewBar,
  #mobileMenuHost #currentSelectionBar,
  #mobileMenuHost #moreMenuBar {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
    margin: 0;
  }

  #mobileMenuHost #bottomBar {
    border-top: 0;
    border-bottom: 1px solid var(--menu-line);
    padding-bottom: 0;
    box-shadow: none;
  }

  #mobileMenuHost #currentViewBar,
  #mobileMenuHost #currentSelectionBar,
  #mobileMenuHost #moreMenuBar {
    border-top: 1px solid var(--menu-line);
    box-shadow: none;
  }

  #bottomBar {
    display: flex;
    /* Scrollar i sidled när flikarna inte får plats — med kugghjulet är de
       sju stycken, och en smal telefon (320 px) ryms inte. På 390 px fyller
       de raden utan att scrolla, se flex-basis på .bottom-tab. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--menu-surface);
    /* Raden ligger i toppen (#mobileMenuHost) — safe-area-fyllningen och den
       260 px höga täckytan under raden hörde till bottenplaceringen och
       gjorde ingen nytta här; #mobileMenuHost bär skuggan för hela stacken.
       Om safe-area i toppen behövs hör den hemma på hela stacken, inte på
       en enskild rad. */
  }
  #bottomBar::-webkit-scrollbar { display: none; }

  .bottom-tab {
    /* Växer och fyller raden när det finns plats, men krymper aldrig under
       40 px — då scrollar raden i stället för att klämma ihop etiketterna
       till oläsbarhet. */
    flex: 1 1 25%;
    min-width: 0;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 10px 6px;
    background: none;
    border: none;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
  }
  .bottom-tab.page-on,
  .bottom-tab.menu-on { color: var(--blue); }
  .bottom-tab-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    line-height: 0;
  }
  .bottom-tab-icon-svg { display: block; width: 20px; height: 20px; }
  /* Två samtidiga signaler: strecket visar vilken innehållssida som ligger
     bakom panelerna, punkten vilken huvudmeny som för tillfället är öppen. */
  .bottom-tab.page-on::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--blue);
    transform: translateX(-50%);
  }
  .bottom-tab.menu-on::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 0 1px var(--menu-surface);
    transform: translateX(-50%);
  }
  .bottom-tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Siffran på filterknappen — visar att ett filter är aktivt utan att man
     behöver öppna arket för att upptäcka det. */
  .bottom-filter-badge {
    position: absolute;
    top: 3px;
    right: 50%;
    transform: translateX(15px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  /* Vyflikarna i toppen ersätts av bottenraden. Kugghjulet likaså — det
     ligger kvar i DOM:et (all befintlig logik pekar på #settingsBtn) men
     visas bara i bottenraden på mobil. */
  #viewTabs { display: none; }
  #settingsBtn { display: none; }
  #currentCupBtn, #headerExportBtn, #headerAboutBtn, #helpBtn, #refreshBtn { display: none; }
  .header-context { flex: 0 1 auto; }

  #currentViewBar:not([hidden]),
  #moreMenuBar:not([hidden]) {
    display: flex;
    gap: 4px;
    padding: 6px 10px;
    overflow-x: auto;
    background: var(--menu-surface);
    border-top: 1px solid var(--menu-line);
    scrollbar-width: none;
  }
  #currentViewBar::-webkit-scrollbar,
  #moreMenuBar::-webkit-scrollbar { display: none; }
  /* Mer är samma fristående menynivå som Filter och ska avgränsas lika
     tydligt från sidinnehållet ovanför. */
  #moreMenuBar:not([hidden]) {
    box-shadow: 0 -6px 18px rgba(10, 18, 30, 0.28);
  }

  /* Tredje nivån under Aktuellt: aktiv klass/lag i Tabeller. Ligger ovanför
     Aktuellt-raden och använder samma höjd/textsystem som övriga nivåer. */
  #currentSelectionBar:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--mobile-submenu-h, 53px);
    min-height: var(--mobile-submenu-h, 53px);
    padding: 6px 10px;
    overflow: hidden;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--menu-surface);
    border-top: 1px solid var(--menu-line);
    box-shadow: 0 -6px 18px rgba(10, 18, 30, 0.28);
  }
  #currentSelectionBar::-webkit-scrollbar { display: none; }
  #currentSelectionBar .table-group-tab { height: 40px; padding: 7px 12px 6px; }
  #currentSelectionBar .selection-view-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 5px 0 2px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
  }
  #currentSelectionBar .selection-tabs-scroll {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #currentSelectionBar .selection-tabs-scroll::-webkit-scrollbar { display: none; }
  #currentSelectionBar .selection-order-toggle {
    flex: 0 0 auto;
    height: 40px;
    padding: 7px 10px 6px;
    border: 0;
    border-left: 1px solid var(--menu-line);
    background: color-mix(in srgb, var(--menu-surface) 90%, var(--ink));
    color: var(--blue);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }
  #currentSelectionBar .selection-order-controls {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    height: 40px;
    border-left: 1px solid var(--menu-line);
    background: color-mix(in srgb, var(--menu-surface) 90%, var(--ink));
  }
  #currentSelectionBar .selection-order-controls .selection-order-toggle {
    border-left: 1px solid var(--menu-line);
  }
  #currentSelectionBar .selection-sort-select {
    width: auto;
    max-width: 92px;
    height: 40px;
    padding: 6px 24px 6px 9px;
    border: 0;
    background-color: color-mix(in srgb, var(--menu-surface) 90%, var(--ink));
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
  }
  .current-view-tab {
    flex: 1 0 auto;
    border: 0;
    border-radius: 999px;
    min-height: 40px;
    padding: 7px 12px;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
  }
  .current-view-tab.on { background: transparent; color: var(--blue); }
  .current-view-tab.on::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--blue);
    transform: translateX(-50%);
  }
  .more-submenu-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  /* Verktygsraden bor kvar på sin plats i DOM:et (renderToolbar ritar dit
     som förut) men visas bara som ark, fällt upp av filterknappen. */
  #toolbar { display: none; }
  /* Filter fäller upp en tunn IKONREMSA ovanför bottenraden — inte ett helt
     ark. Man ska kunna scrolla matchlistan med filtren framme, precis som
     med Stats-underflikarna. Först "Mer" fäller ut resten av
     verktygsraden (filters-expanded nedan). */
  body.filters-open #toolbar {
    display: block;
    /* Remsan hör till menyn och rullar undan med den. inset FÖRST: den är en
       genväg som nollställer top/right/bottom/left och skulle annars kunna
       skriva över positioneringen på raden efter. */
    inset: auto !important;
    position: static !important;
    z-index: 65;
    margin: 0 auto;
    width: 100%;
    max-width: var(--container-max);
    /* Ingen egen fyllning: brickorna bär sin padding själva, precis som
       huvudradens flikar, så de två raderna blir exakt lika höga. */
    padding: 6px 10px;
    background: var(--menu-surface);
    border-bottom: 1px solid var(--menu-line);
    box-shadow: 0 6px 18px rgba(10, 18, 30, 0.28);
    overflow-y: hidden;
    max-height: var(--mobile-submenu-h, 53px);
    will-change: max-height, box-shadow;
    transition: max-height 0.2s ease, padding 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease;
  }
  /* I remsläget visas BARA ikonerna. Resten av verktygsraden finns kvar i
     DOM:et (renderToolbar är orörd) men göms tills man trycker Mer. */
  body.filters-open:not(.filters-expanded) #toolbar .toolbar-summary,
  body.filters-open:not(.filters-expanded) #toolbar .row > *:not(.filter-group),
  body.filters-open:not(.filters-expanded) #toolbar .toolbar-body > *:not(.filter-primary-row) {
    display: none;
  }
  body.filters-open:not(.filters-expanded) #toolbar .row {
    display: flex;
    align-items: center;
    margin: 0;
    min-height: 40px;
    height: auto;
  }
  body.filters-open:not(.filters-expanded) #toolbar .filter-group {
    margin: 0;
    gap: 4px;
    height: auto;
  }
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .team-picker-summary,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .filter-more-tile,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .filter-placeholder-tile,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .filter-cup-tile {
    min-height: 40px;
    padding: 7px 12px 6px;
    align-items: center;
  }
  /* Mellanliggande omslag (details > .toolbar-body > .row) bidrog med 24 px
     marginal och gap som gjorde remsan 73 px mot bottenradens 49. I remsläget
     ska bara brickornas egen padding räknas. */
  body.filters-open:not(.filters-expanded) #toolbar,
  body.filters-open:not(.filters-expanded) #toolbar .toolbar-collapse,
  body.filters-open:not(.filters-expanded) #toolbar .toolbar-body {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
  }

  /* Se picker-open i app.js: utan detta hamnar hela verktygsraden — och
     därmed den öppna väljarpanelen — under väljarens eget bakgrundstäcke. */
  body.picker-open #toolbar { z-index: 85; }
  /* Menyraderna ska förbli synliga OCH klickbara medan en väljare är öppen,
     så man kan hoppa direkt mellan brickor eller byta vy. Lyftet måste ske
     på #mobileMenuHost och inte på raderna: sedan de flyttade in i hosten
     ligger de i DESS staplingskontext, och ett z-index på en rad når aldrig
     utanför den. Resultatet blev att filterremsan (syskon till hosten, egen
     regel ovan) lyste klart medan huvudmenyn precis ovanför låg kvar under
     täcket och såg nedsläckt ut. Värdet sätts inline av syncMenuHostLayer i
     app.js — hostens z-index skrivs med !important där och kan därför inte
     bytas härifrån. */

  /* Utfällt ("Mer") ska faktiskt visa MER: brickraden radbryts i stället för
     att scrolla i sidled, så hela urvalet syns på en gång i stället för att
     upprepa den kompakta remsan. Under den ligger resten av verktygsraden
     (fritextsök, lås, visningsval) — se flattenMobileFilterBar i app.js. */
  body.filters-expanded #toolbar .filter-group {
    flex-wrap: wrap;
    overflow-x: visible;
    height: auto;
  }

  /* Remsans egna kompaktbrickor för matchstatus, hall/plan och sortering är
     samma val som de fullstora kontrollerna längre ned i arket (samma
     resonemang som .filter-scope-tile nedan). Visa dem en gång, inte två. */
  body.filters-expanded #toolbar .filter-choice-dd,
  body.filters-expanded #toolbar .filter-order-tile {
    display: none;
  }

  /* Arket fälls ut NEDÅT från menyn — samma ark som förut, bara vänt:
     rundade hörn och skugga i den riktning det faktiskt växer. */
  body.filters-open.filters-expanded #toolbar {
    max-height: 72vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px 16px;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 10px 30px rgba(10, 18, 30, 0.35);
  }

  /* Vanliga textflikar i filterraden. Egen klass eftersom Cup/Rensa och de
     inaktiva platshållarna är knappar, medan övriga val är <details>. */
  .filter-more-tile {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 150px;
    min-height: 40px;
    padding: 8px 12px;
    background: none;
    border: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .filter-more-tile::before { content: none; }
  .filter-placeholder-tile:disabled {
    opacity: .38;
    cursor: default;
  }
  body.filters-expanded .filter-more-tile { color: var(--blue); }
  body.filters-expanded .filter-scope-tile { display: none; }
  /* Rensa-brickan skiljs från väljarna med en tunn linje: den ÄNDRAR något
     när man trycker, till skillnad från de andra som bara öppnar en panel. */
  .filter-clear-tile {
    border-left: 1px solid var(--line) !important;
    /* --live är appens egna röda (matchlivemarkeringen) och har en variant
       för mörkt tema — bättre än en hårdkodad hex som skär sig där. */
    color: var(--live);
  }

  /* Verktygsradens egen ihopfällning behålls i arket: dels sitter LÅSET
     inuti <summary> (lockSlot i renderToolbar) och skulle annars bli
     oåtkomligt på mobil, dels fungerar den som arkets rubrik och ger en
     minimera/expandera utan extra kod. */
  body.filters-open #toolbar .toolbar-summary {
    position: sticky;
    top: -12px;
    z-index: 1;
    margin: -12px -14px 8px;
    padding: 12px 14px 8px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
  }

  .filter-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 64;
    background: rgba(10, 18, 30, 0.45);
  }

  /* Plats åt det som fortfarande ligger fast i botten (väljarpaneler m.m.).
     Menyraderna ligger sedan flytten i toppen och räknas inte längre in —
     --bottomstack-h är då 0 och bara luften nedanför sista kortet blir kvar. */
  #content, body > footer { padding-bottom: calc(var(--bottomstack-h, 0px) + 16px); }

  /* ALLT som klistrar sig inne i innehållet måste sluta vid menyns underkant
     i stället för vid skärmens. Med menyn i botten låg de här raderna fritt
     mot top:0; nu skulle de hamna BAKOM menyn (z-index 72 mot 4-5) och bli
     helt osynliga så fort man scrollat förbi dem. --topstack-h mäts i
     syncTopStack (app.js) och är menyraderna plus filterremsan. */
  .mobile-context,
  .gantt-headrow {
    top: var(--topstack-h, 0px);
  }

  /* Samma sak för scrollIntoView och ankarlänkar: utan detta landar det man
     hoppar till exakt under menyn. */
  html { scroll-padding-top: var(--topstack-h, 0px); }

  /* Orienteringsraden (renderMobileContextBar): klistrad högst upp i
     innehållet så den syns även när man scrollat ner i en lång träfflista —
     den svarar på "vad tittar jag på och hur tar jag mig tillbaka", vilket
     annars bara framgick av den gömda verktygsraden. */
  .mobile-context {
    display: flex;
    position: sticky;
    z-index: 5;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 7px 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13px;
    box-shadow: var(--shadow);
  }
  .mobile-context-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-soft);
  }
  .mobile-context-back {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 2px 4px;
    font: inherit;
    font-weight: 600;
    color: var(--blue);
    cursor: pointer;
  }
  /* Ovanför det som ligger fast i botten (--bottomstack-h, samma mått som
     väljarpanelerna utgår från) — med menyn i toppen är det normalt bara
     skärmkanten. z-index under panelerna med flit: när en väljare är öppen
     SKA knappen hamna bakom den, den är inte meningsfull då. */
  #scrollTopBtn {
    bottom: calc(var(--bottomstack-h, 0px) + 12px + var(--vv-offset, 0px));
    z-index: 68;
  }
}

@media (pointer: coarse) {
  .dialog-x,
  .picker-sheet-close,
  .mobile-context-back,
  .current-cup-btn,
  .current-cup-label,
  .header-action-btn,
  #settingsBtn,
  #refreshBtn,
  .help-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .chip { min-height: 36px; }
}

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

/* --- bottenradens följdändringar --------------------------------------- */
@media (max-width: 700px) {
  /* Stats-underflikarna (Trend/Vinnare/Kalender/…) som egen rad under
     huvudmenyn när mobilmenyn ligger i övre delen av skärmen. aria-label
     avgränsar till just Stats-raden — samma klass används av Historik-
     bläddrarens egna flikar, som ska ligga kvar i innehållet där de hör
     hemma. Horisontellt scrollbar: åtta flikar på 390 px blir 48 px styck
     och oläsbara om man pressar in dem. */
  #content .history-tabs[aria-label="Stats"] {
    /* Stats underflikar ÄR en menynivå, precis som Aktuellts Schema/Tabeller
       — men de renderas inne i #content och ärvde därför dess fyllning: 14 px
       indrag i sidled och 10 px luft upp till menyn, vilket fick raden att se
       ut som en lös bricka som svävade under menyn. Negativ marginal drar ut
       den till skärmkanterna och upp mot menyns underkant.
       #content är full skärmbredd på mobil (--container-max är bredare än
       telefonen), så -14 px landar exakt på kanten. */
    position: sticky;
    top: var(--topstack-h, 0px);
    /* Under menyn (72) men över innehållet: raden ska glida in UNDER menyn
       när man scrollar, inte lägga sig ovanpå den. */
    z-index: 60;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    margin: -10px -14px 10px;
    padding: 6px 10px;
    background: var(--menu-surface);
    /* Kant och skugga NEDÅT: raden ligger under menyn, överst i innehållet.
       Uppåtriktade hörde till bottenplaceringen och lyste som en skarv mitt
       emot menyns egen skugga. */
    border-bottom: 1px solid var(--menu-line);
    box-shadow: 0 6px 18px rgba(10, 18, 30, 0.28);
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  #content .history-tabs[aria-label="Stats"]::-webkit-scrollbar { display: none; }
  #content .history-tabs[aria-label="Stats"] .tab {
    position: relative;
    flex: 0 0 auto;
    border-bottom-color: transparent;
  }
  #content .history-tabs[aria-label="Stats"] .tab.on::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--blue);
    transform: translateX(-50%);
  }
  body.stats-tabs-collapsed #content .history-tabs[aria-label="Stats"] { display: none; }

  /* Sidfotens länkar bor i inställningarna här (placeFooterLinks); kvar
     blir bara datakällstexten, som inte behöver ta plats på en telefon. */
  body > footer { display: none; }

  /* Samma textflikar som under Aktuellt: inga ikoner, pills eller pilar. */
  .filter-group .team-picker-dd > .team-picker-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 150px;
    min-height: 40px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-align: center;
    cursor: pointer;
  }
  .filter-group .team-picker-summary[data-icon]::before { content: none; }
  .filter-group .picker-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Cup, år, dagar, klasser och lag som en scrollbar textmeny på en rad. */
  .filter-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* Föräldern (.row) är flex — utan flex-basis 100 % krymper remsan till
       sitt innehåll i stället för att ta hela bredden och kunna scrolla. */
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filter-group::-webkit-scrollbar { display: none; }
  /* Efterkommande, inte direkt barn: lagväljaren ligger i en span med
     display:contents (teamSlot i renderToolbar). Den försvinner ur
     layouten men finns kvar i DOM:et, så en >-selektor missar den. */
  .filter-group .team-picker-dd { flex: 0 0 auto; }
  /* Standardpilen (▾) behövs inte när hela textfliken är klickbar. */
  .filter-group .team-picker-dd > .team-picker-summary::after { content: none; }
  /* Öppen bricka markeras med färg, precis som .bottom-tab.on. */
  .filter-group .team-picker-dd[open] > .team-picker-summary {
    background: none;
    background-image: linear-gradient(var(--blue), var(--blue));
    background-repeat: no-repeat;
    background-position: center calc(100% - 2px);
    background-size: 18px 2px;
    color: var(--blue);
  }

  /* Kompakt filterremsa ska vara exakt lika hög som övriga mobilundermenyer.
     Dessa regler kommer efter standardvärdena ovan för att inte övertrumkas. */
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .team-picker-summary,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .filter-more-tile,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .filter-placeholder-tile,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .filter-cup-tile {
    padding-top: 7px;
    padding-bottom: 6px;
  }

  /* Alla huvudmenyernas undernivåer är samma komponent visuellt och ska
     därför också ha samma faktiska boxhöjd. Tidigare räknades Aktuellt/Mer
     från ytterpadding, Statistik från .tab-padding och Filter från flera
     nästlade wrappers. Små ändringar i någon av reglerna gav då olika höjd.
     53 px = 40 px tryckyta + 6 px luft ovan/under + 1 px kantlinje. */
  :root { --mobile-submenu-h: 53px; }

  #currentViewBar:not([hidden]),
  #moreMenuBar:not([hidden]),
  #content .history-tabs[aria-label="Stats"],
  body.filters-open:not(.filters-expanded) #toolbar {
    height: var(--mobile-submenu-h);
    min-height: var(--mobile-submenu-h);
    max-height: var(--mobile-submenu-h);
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #content .history-tabs[aria-label="Stats"] .tab,
  #currentViewBar .current-view-tab,
  #moreMenuBar .current-view-tab {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }

  body.filters-open:not(.filters-expanded) #toolbar .filter-group .team-picker-summary,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .filter-more-tile,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .filter-placeholder-tile,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .filter-cup-tile {
    height: 40px;
    min-height: 40px;
  }

  /* Samma menynivå ska också ha samma textbehandling. Stats-flikarna
     ärver annars desktopflikarnas versaler, kondenserade typsnitt och
     teckenavstånd medan Aktuellt, Filter och Mer använder vanlig text. */
  #content .history-tabs[aria-label="Stats"] .tab,
  #currentViewBar .current-view-tab,
  #moreMenuBar .current-view-tab,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .team-picker-summary,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group .filter-more-tile {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
  }

  body.filters-open:not(.filters-expanded) #toolbar .toolbar-collapse,
  body.filters-open:not(.filters-expanded) #toolbar .toolbar-body,
  body.filters-open:not(.filters-expanded) #toolbar .row,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group {
    width: 100%;
    max-height: none;
  }

  body.filters-open:not(.filters-expanded) #toolbar .toolbar-collapse,
  body.filters-open:not(.filters-expanded) #toolbar .toolbar-body {
    height: 100%;
    min-height: 0;
  }

  body.filters-open:not(.filters-expanded) #toolbar .row,
  body.filters-open:not(.filters-expanded) #toolbar .filter-group {
    height: 40px;
    min-height: 40px;
  }

  body.filters-open:not(.filters-expanded) #toolbar .filter-group {
    min-width: 0;
    align-items: stretch;
  }

  /* Samma konstruktion som Statistik/Mer: den FASTA menyraden är själv
     scrollcontainer. JS flyttar den enda breda brickraden direkt hit och
     tar bort details/body/row-omslagen; den inre raden har overflow:visible
     och kan därför aldrig konkurrera om själva scrollgesten. */
  body.filters-open:not(.filters-expanded) #toolbar {
    display: block;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.filters-open:not(.filters-expanded) #toolbar::-webkit-scrollbar { display: none; }
  body.filters-open:not(.filters-expanded) #toolbar > .filter-group {
    display: flex;
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
    height: 40px;
    min-height: 40px;
    overflow: visible;
  }

  /* --- hopfälld meny ------------------------------------------------------
     Efter ungefär en skärmhöjds läsning ersätts hela menystacken av EN rad
     (setupMenuAutoCollapse i app.js). Raden ligger kvar i #mobileMenuHost, så
     stacken bara blir lägre — allt som hänger under menyn (väljarark,
     klistrade rader i innehållet) följer med utan en rad extra kod. */
  body.menu-minimized #bottomBar,
  body.menu-minimized #currentViewBar,
  body.menu-minimized #currentSelectionBar,
  body.menu-minimized #moreMenuBar,
  body.menu-minimized #toolbar,
  body.menu-minimized #content .history-tabs[aria-label="Stats"] {
    display: none !important;
  }

  /* Minimera-knappen: fast smal bredd och ingen etikett. De fyra flikarna
     delar på resten av raden med flex: 1 1 25% — en femte etikett hade
     tryckt ihop dem till oläsbarhet på en smal telefon. Kantlinjen skiljer
     den från flikarna: den byter inte vy, den gömmer menyn. */
  .bottom-minimize {
    flex: 0 0 auto;
    width: 46px;
    min-width: 46px;
    justify-content: center;
    gap: 0;
    padding: 7px 0 6px;
    border-left: 1px solid var(--menu-line);
    color: var(--ink-soft);
  }
  .bottom-minimize .bottom-tab-icon-svg { width: 18px; height: 18px; }

  /* FAST MINIMERAD meny: då ÄR den tunna raden menyn, och ligger kvar i
     flödet inuti hosten. Klistrad, men utan att någonsin byta höjd — raden är
     45 px i alla lägen, så det finns ingenting att kompensera och inget att
     rycka till av. Överst på sidan hamnar den under sidhuvudet i stället för
     ovanpå det, och den är framme direkt: utan detta fanns varken meny eller
     rad i toppen, och enda vägen tillbaka var att scrolla ner först. */
  body.menu-minimized #mobileMenuHost {
    position: sticky;
    top: 0;
    z-index: 72;
  }
  body.menu-minimized #menuCollapsedBar:not([hidden]) {
    position: static;
    /* Hosten bär redan breddtaket och centreringen. Kvarvarande "margin: 0
       auto" från det fasta läget gjorde raden till ett grid-objekt med
       automarginaler, och då krymper den till innehållets bredd i stället
       för att fylla raden. */
    margin: 0;
    max-width: none;
  }

  /* FAST lager, inte en rad i flödet: den kan därför tändas och släckas
     under rullning utan att någonting flyttar sig. Det är hela skillnaden
     mot den hopfällbara menyn — inga höjdbyten, ingen scrollkompensation. */
  #menuCollapsedBar:not([hidden]) {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 72;
    max-width: var(--container-max);
    margin: 0 auto;
    background: var(--menu-surface);
    border-bottom: 1px solid var(--menu-line);
    box-shadow: var(--menu-shadow);
  }

  .collapsed-menu-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    padding: 6px 12px;
    background: none;
    border: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .collapsed-menu-icon {
    flex: 0 0 auto;
    display: flex;
    color: var(--blue);
  }
  .collapsed-menu-icon .bottom-tab-icon-svg { width: 18px; height: 18px; }
  /* Texten är det som varierar — allt annat i raden har fast bredd, så den
     får krympa och kapas med ellips i stället för att knuffa ut chevronen. */
  .collapsed-menu-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-soft);
    font-weight: 500;
  }
  .collapsed-menu-chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: -4px 3px 0 0;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: rotate(45deg);
  }
  .collapsed-menu-badge {
    flex: 0 0 auto;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  /* --- sidscroll-hint -----------------------------------------------------
     En menyrad med fler val än vad som får plats såg ut att sluta vid
     skärmkanten — inget sa att det fanns mer att hämta åt höger. Den klassiska
     "scrolling shadows"-tekniken löser det HELT i CSS, utan mätning och utan
     en enda lyssnare:

     Fyra bakgrundslager. Två TÄCKANDE i radens egen färg (background-
     attachment: local) som ligger vid innehållets början och slut och följer
     med när man scrollar. Två SKUGGOR (attachment: scroll) som sitter fast vid
     radens kanter. Vid vänsterläget parkerar täcket exakt ovanpå
     vänsterskuggan och döljer den; scrollar man iväg glider täcket undan och
     skuggan syns. Resultatet uppdaterar sig själv, i båda riktningarna, för
     varje rad oavsett hur många brickor den råkar innehålla.

     Bakgrundslager (inte ett pseudoelement) eftersom raden är sin egen
     scrollcontainer: ett ::after hade scrollat med innehållet och klippts vid
     kanten. Skuggan hamnar därmed BAKOM brickorna, vilket är precis rätt —
     den ska antyda djup i mellanrummen, inte lägga en slöja över texten. */
  #bottomBar,
  #currentViewBar:not([hidden]),
  #moreMenuBar:not([hidden]),
  #currentSelectionBar .selection-tabs-scroll,
  #content .history-tabs[aria-label="Stats"],
  body.filters-open:not(.filters-expanded) #toolbar {
    background-color: var(--menu-surface);
    background-image:
      linear-gradient(to right, var(--menu-surface) 60%, rgba(0, 0, 0, 0)),
      linear-gradient(to left, var(--menu-surface) 60%, rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 0 50%, var(--menu-fade), rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 100% 50%, var(--menu-fade), rgba(0, 0, 0, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    /* Täcket är HELT ogenomskinligt över hela skuggans bredd (60 % av 30 px
       = 18 px) och tonar först därefter ut. Med ett jämnt tonande täcke lös
       en bit av skuggan igenom även i ändläget, som en permanent smutsfläck
       vid kanten. */
    background-size: 30px 100%, 30px 100%, 18px 100%, 18px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* Urvalsgruppen är ETT MOBILGREPP. På större skärmar ska år/dagar/klasser/
   lag ligga som chips på samma rad som förut — display:contents plockar bort
   omslaget ur layouten helt, så raden blir exakt densamma som innan
   grupperingen infördes. Utan detta ärvde gruppen block-layout och staplade
   väljarna under varandra. */
@media (min-width: 701px) { .filter-group { display: contents; } }

/* "Mer"-brickan hör bara till mobilens ikonremsa. */
@media (min-width: 701px) { .filter-more-tile { display: none; } }

/* Länkgruppen i inställningarna är bara till för mobil — tom på desktop,
   där länkarna ligger kvar i sidfoten, och ska då inte visa sin rubrik. */
@media (min-width: 701px) { #settingsLinksGroup { display: none; } }

/* --- iOS: ingen autozoom vid fokus i textfält --------------------------
   Safari på iPhone zoomar in sidan när man fokuserar ett fält vars
   teckenstorlek är UNDER 16 px, och zoomar sedan inte ut igen. Flera av
   appens fält ligger på 13-14 px.

   Lösningen är 16 px på själva fältet — INTE user-scalable=no i
   viewport-taggen, som visserligen tar bort zoomen men samtidigt
   förbjuder nypzoom i hela appen. Att beröva någon möjligheten att zooma
   in ett spelschema är ett sämre pris än några pixlar större text.

   Två villkor, inte ett: pointer:coarse är det precisa signalet men
   matchar inte en iPad med styrplatta, och går heller inte att verifiera i
   en desktop-simulering. max-width fångar telefonerna oavsett. Ett par
   pixlar större fält på en smal dator-skärm är ett pris värt att betala
   för en regel som faktiskt går att testa. */
@media (pointer: coarse), (max-width: 700px) {
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input:not([type]),
  select,
  select.select,
  textarea {
    /* select.select: klassen .select sätter 13px och vinner över en ren
       elementselektor på specificitet — utan den här raden hade
       rullgardinerna (plan, sortering, år) fortsatt utlösa zoom. */
    font-size: 16px;
  }
}