/* 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;
  --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: 700px) {
  :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;
    --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;
  --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;
  --shadow: 0 1px 3px rgba(22, 40, 63, 0.08);
  --purple: #8854d0;
  --orange: #c8660a;
}

* { 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. */
html {
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  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; }

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

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

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

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

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

.brand img { height: 34px; width: auto; }

.brand h1 {
  margin: 0;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand h1 small {
  display: block;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #b9c6d8;
}

.brand .spacer { flex: 1; }

#refreshBtn {
  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;
}

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

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

.current-cup-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #eef2f8;
  padding: 5px 10px;
  font-size: 13px;
  max-width: 30vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-cup-btn:hover { border-color: var(--yellow); }

/* cupväljare (i inställningar) */

#cupRow {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  scrollbar-width: thin;
}

#cupRow::-webkit-scrollbar { height: 6px; }

.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;
  display: flex;
  align-items: center;
  gap: 14px;
}

#viewTabs {
  display: flex;
  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; }

.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); }

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

/* Ö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;
}

.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); }

.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"-knapp + en separat "visa alla" bredvid —
   se loadMorePlayedButtons() i js/app.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 { border-left: 4px solid var(--blue); }
.banner-info p + p { margin-top: 8px; }
.banner-info strong { color: var(--ink); }

/* 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-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;
  grid-template-columns: 52px 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; }

.match {
  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);
}

.match-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

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

/* 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); }

.match-head-right {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

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

.match-head .arena {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

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

/* 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 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team.us { font-weight: 600; color: var(--blue-deep); }
.team.won { font-weight: 600; }
.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;
}

.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 */

/* 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å #cupRow/#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); }

.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);
}

.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }

.dialog-actions .primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* 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); }

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

@media (max-width: 480px) {
  dialog#settingsDialog {
    margin: 0;
    inset: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    padding: max(18px, env(safe-area-inset-top)) 18px
             max(14px, env(safe-area-inset-bottom)) 18px;
    overflow-y: auto;
  }
}

/* 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: 700px) {
  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; }
}

.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-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); }

/* 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;
  vertical-align: middle;
}

/* 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: 480px) {
  dialog.match-dialog {
    margin: 0;
    inset: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    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); }

.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); }

.match-dialog-score {
  margin-left: auto;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

/* 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;
}

/* 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%;
  cursor: grab;
}

/* dra-för-att-panorera (js/app.js: setupBracketPan) — grabbing-markören och
   avstängd textmarkering bara medan man faktiskt drar. */
.bracket-box.panning { cursor: grabbing; user-select: none; }
:root.bracket-panning { cursor: grabbing; }

/* 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);
}

.bracket {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 30px;
}

/* 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;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 12px;
  min-width: 172px;
}

.bracket-round-label {
  display: inline-block;
  align-self: center;
  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 {
  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: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.bracket-match:hover {
  border-color: var(--blue);
  box-shadow: 0 3px 10px rgba(22, 40, 63, 0.12);
  transform: translateY(-1px);
}

.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; transform: none; }
.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); }

.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;
}

.custom-cup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
}

/* 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; }

/* --- 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-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; }

.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) {
  .brand h1 { font-size: 20px; }
  .slot { grid-template-columns: 44px 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; }
.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; }
.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 ── */
.gantt { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.gantt-row { display: grid; grid-template-columns: 150px 1fr; align-items: stretch; min-height: 32px; }
.gantt-row + .gantt-row { border-top: 1px solid var(--line); }
.gantt-headrow { min-height: 24px; background: var(--paper); border-bottom: 1px solid var(--line); }
.gantt-label { padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
.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-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-row { grid-template-columns: 104px 1fr; }
  .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; }

/* 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 {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    /* Ovanför bottenraden och filterremsan (syncBottomStack i app.js) i
       stället för dikt mot skärmkanten — annars täcker panelen just de
       rader man navigerade med, och man ser inte vilken väljare som är
       öppen. */
    bottom: calc(var(--bottomstack-h, 0px) + var(--vv-offset, 0px));
    width: auto;
    max-width: none;
    /* --sheet-h sätts av draghandtaget (se setupPickerSheets i app.js) och
       sparas mellan besök; 62vh är utgångsläget. */
    height: var(--sheet-h, 62vh);
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 18px 18px 0 0;
    border-bottom: 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;
  }

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

  /* Rubrikraden: klistrad högst upp så handtaget och 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: 6px 14px 8px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
  }

  .picker-sheet-grip {
    grid-column: 1 / -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-bottom: 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 */
  }
}

/* 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-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) {
  /* --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. */
  #bottomBar[hidden] { display: flex; } /* [hidden] är utgångsläget i markupen */

  #bottomBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--vv-offset, 0px);
    z-index: 70;
    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;
    scrollbar-width: none;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    /* Andra skuggan är ingen skugga: en solid, oskarp yta 260 px NEDANFÖR
       raden i samma färg som den själv. Firefox på iOS krymper inte layout-
       viewporten när dess bottenplacerade adressfält fälls ihop till en ö,
       så bottom:0 hamnar en bit ovanför skärmkanten och sidan syntes rulla
       förbi i springan under. Ytan täcker den utan att flytta något — och
       är helt osynlig i Safari/Chrome, där den hamnar utanför skärmen.
       box-shadow (inte ::after) eftersom radens egen overflow-x:auto skulle
       klippa ett pseudoelement, men aldrig en skugga.

       Förskjutning OCH spridning, inte bara förskjutning: en skugga flyttas
       som en hel rektangel, den töjs inte. "0 260px 0 0" la alltså hela
       ytan 260 px ned — utanför skärmen, där den inte täckte något.
       130+130 ger i stället en yta som börjar vid radens överkant och
       slutar 260 px under dess underkant. Spridningen växer även i sidled,
       vilket är ofarligt: den hamnar utanför skärmens kanter. */
    box-shadow: 0 -2px 12px rgba(10, 18, 30, 0.22),
                0 130px 0 130px var(--card);
  }
  #bottomBar::-webkit-scrollbar { display: none; }

  .bottom-tab {
    /* Växer och fyller raden när det finns plats, men krymper aldrig under
       52 px — då scrollar raden i stället för att klämma ihop etiketterna
       till oläsbarhet. */
    flex: 1 0 52px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 2px 6px;
    background: none;
    border: none;
    color: var(--ink-soft);
    font: inherit;
    font-size: 10.5px;
    cursor: pointer;
    position: relative;
  }
  .bottom-tab.on { color: var(--blue); }
  .bottom-tab-icon { font-size: 18px; line-height: 1; }
  .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; }

  /* 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;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--bottombar-h, 56px) + var(--vv-offset, 0px)); /* mätt i renderBottomBar, inkl. safe-area */
    z-index: 65;
    margin: 0;
    /* Ingen egen fyllning: brickorna bär sin padding själva, precis som
       bottenradens flikar, så de två raderna blir exakt lika höga. */
    padding: 0 6px;
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(10, 18, 30, 0.28);
  }
  /* 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 .sheet-cup-btn,
  body.filters-open:not(.filters-expanded) #toolbar .row > *:not(.filter-group),
  body.filters-open:not(.filters-expanded) #toolbar .row ~ * { display: none; }
  body.filters-open:not(.filters-expanded) #toolbar .row {
    display: block;
    margin: 0;
  }
  /* 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; }
  /* Bottenraden med: båda ska förbli synliga OCH klickbara medan en väljare
     är öppen, så man kan hoppa direkt mellan brickor eller byta vy. */
  body.picker-open #bottomBar { z-index: 85; }

  body.filters-open.filters-expanded #toolbar {
    max-height: 72vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px 16px;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(10, 18, 30, 0.35);
  }

  /* "Mer"-brickan: samma form som väljarbrickorna, egen klass eftersom den
     inte är en <details>. */
  .filter-more-tile {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 64px;
    padding: 7px 2px 6px;
    background: none;
    border: none;
    font: inherit;
    font-size: 10.5px;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .filter-more-tile::before {
    content: attr(data-icon);
    font-size: 18px;
    line-height: 1;
  }
  body.filters-expanded .filter-more-tile { color: var(--blue); }
  /* 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 ALLT som ligger fast i botten — bottenraden, filterremsan när
     den är uppfälld och Stats-underflikarna. Utgick tidigare bara från
     bottenraden, så slutet på en lång matchlista hamnade bakom de andra
     raderna och gick inte att scrolla fram. */
  #content, body > footer { padding-bottom: calc(var(--bottomstack-h, 56px) + 16px); }

  /* 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 {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    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;
  }
  .mobile-context-clear {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 2px 6px;
    font: inherit;
    font-size: 15px;
    color: var(--ink-soft);
    cursor: pointer;
  }

  /* "Upp till toppen" låg på bottom:16px med z-index 30 — alltså bakom både
     bottenraden (70) och filterremsan (65), och geometriskt under dem.
     Placeras nu ovanför hela den fasta stapeln (--bottomstack-h, samma mått
     som väljarpanelerna utgår från). 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, 56px) + 12px + var(--vv-offset, 0px));
    z-index: 68;
  }
}

/* --- bottenradens följdändringar --------------------------------------- */
@media (max-width: 700px) {
  /* Stats-underflikarna (Trend/Vinnare/Kalender/…) som egen rad ovanför
     bottenraden i stället för överst i innehållet. 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"] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--bottombar-h, 56px) + var(--vv-offset, 0px));
    z-index: 69;
    margin: 0;
    padding: 6px 10px;
    background: var(--card);
    border-top: 1px solid var(--line);
    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 { flex: 0 0 auto; }

  /* (Stats-radens höjd ingår numera i --bottomstack-h, se syncBottomStack.) */

  /* 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; }

  /* Cupknappen överst i filterarket, och urvalsgruppen under den. Båda är
     menyrader i full bredd: etikett till vänster, aktuellt värde och en
     chevron till höger. Som grå chips i en rad läste väljarna som INAKTIVA
     knappar — en rad med tydlig avgränsare och pil läser som något man
     trycker på. */
  .sheet-cup-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    cursor: pointer;
  }

  /* Brickan ska se ut EXAKT som en flik i bottenraden (.bottom-tab): platt,
     utan ram och utan kortbakgrund. Med ram och fyllning läste remsan som
     en rad knappar i stället för som en meny, och blev dessutom nästan
     dubbelt så hög som raden den ligger ovanpå. Samma padding, samma
     teckenstorlek, samma färger — bara fast bredd i stället för flex, så
     remsan kan scrolla i sidled. */
  .filter-group .team-picker-dd > .team-picker-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 64px;
    padding: 7px 2px 6px;
    background: none;
    border: none;
    border-radius: 0;
    font: inherit;
    font-size: 10.5px;
    line-height: 1.15;
    color: var(--ink-soft);
    text-align: center;
    cursor: pointer;
  }
  /* Ikonen kommer från data-icon (satt i buildPicker) — inget extra element
     att bygga, och desktopvyn påverkas inte alls. */
  /* Samma ikonstorlek som bottenradens (.bottom-tab-icon) så de två
     raderna läser som samma system. */
  .filter-group .team-picker-summary[data-icon]::before {
    content: attr(data-icon);
    font-size: 18px;
    line-height: 1;
  }
  /* "Innevarande år" ryms inte på en 64 px-bricka — korta med ellips i
     stället för att klippa mitt i ordet. */
  .filter-group .picker-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sheet-cup-btn { margin-bottom: 10px; }
  .sheet-cup-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
  .sheet-cup-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
  }
  .sheet-cup-name { font-weight: 600; }
  .sheet-cup-meta { font-size: 12px; color: var(--ink-soft); }
  .sheet-cup-arrow { font-size: 22px; color: var(--ink-soft); }

  /* Urvalsgruppen: år, dagar, klasser och lag som en horisontell ikonremsa.
     Fullbreddsrader tog 52 px styck och åt upp arket; som brickor ryms de
     på EN rad, och remsan scrollar i sidled om de blir fler. Ikonen bär
     igenkänningen, etiketten under bär värdet ("Klasser (2)"). */
  .filter-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    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;
    /* Brickorna ska kunna dras i sidled utan att gesten kapas av arkets
       egen vertikala scroll. */
    touch-action: pan-x;
  }
  .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 (▾) är brus på en bricka som redan har ikon och etikett. */
  .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;
    color: var(--blue);
  }
}

/* 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;
  }
}