/* Streamingkalender — färger och typsnitt ur mockupen 2026-09-22.
   Betalt = plommon, gratis = grönt (samma som webb-tv.nu), guld = lyft. Bara ljust tema i testet. */
:root {
  --bg: #f3efe6; --kort: #ffffff; --ink: #16181d; --ink-2: #2a2d35;
  --dampad: #6b6a63; --text-2: #4a4942; --linje: #ddd6c8; --ljus: #c9c2b4;
  --betal: #7a2650; --gratis: #1f6f4f; --guld: #e0b64a; --okand: #6b6a63;
  --live: #d0341f; --utgar-bg: #fbe9e5; --utgar: #a3261a;
  /* typfärger, lånade från webb-tv.nu så en besökare känner igen sig mellan sajterna:
     premiär blå (rgba(63,106,148)) och nytt avsnitt teal (rgba(25,120,105)) är deras egna och
     klarar AA som text (5,67:1 och 5,34:1 mot kort). 🪤 Deras amber för "utgår" (3,19:1) och
     ljusgröna för "ny idag" (2,36:1) kopieras INTE — det är kända kontrasthål som Per skjutit
     upp där, och en ny sajt ska inte ärva dem. Utgår får husets egen mörkröda i stället. */
  --typ-premiar: #3f6a94; --typ-avsnitt: #197869; --typ-utgar: var(--utgar);
  --guide-bg: #fff8e3; --guide-linje: #ecd48a; --guide-text: #7a5a10;
  /* Familjen Grotesk (Pers val 22/9, efter jämförelse i research/typsnitt-2026-09-22.html):
     nordisk ton, ritad för svenska texter. ⚠️ GÅR BARA TILL 700 — de fyra ställen som förr
     bad om 800 (loggan, hero, affisch, händelserubrik) sattes därför till 700; ett högre
     tal ger konstlad fetstil i webbläsaren, inte en tyngre skärning. */
  --rubrik: 'Familjen Grotesk', system-ui, sans-serif;
  --brod: 'Instrument Sans', system-ui, sans-serif;
  --kant: 16px; --sida: 64px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* min-height + flex: korta sidor (404, en tom filtrering) ska ha sidfoten i nederkanten,
   inte mitt på skärmen med 500 px tomt under */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--brod); font-size: 16px; line-height: 1.45;
  min-height: 100dvh; display: flex; flex-direction: column; }
/* 🪤 width:100% — auto-marginalerna i .wrap slår av utsträckningen i en flexkolumn, och då
   blir main lika bred som sitt bredaste innehåll. Filterraden radbryts inte i mobil, så
   sidan blev 856–977 px i en 390 px bred vy (mätt 2026-09-23) och hela sidan gled i sidled. */
body > main { flex: 1 0 auto; width: 100%; }
a { color: var(--ink); }
a:hover { color: var(--betal); }
h1, h2, h3 { font-family: var(--rubrik); letter-spacing: -0.02em; margin: 0; overflow-wrap: break-word; }
.wrap { padding: 0 var(--sida); max-width: 1440px; margin: 0 auto; }

/* toppmeny */
.topp { background: var(--ink); color: var(--bg); }
.topp .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; flex-wrap: wrap; }
.logga { display: flex; align-items: baseline; gap: 4px; text-decoration: none; color: var(--bg); }
.logga b { font-family: var(--rubrik); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
.logga span { font-size: 13px; color: var(--ljus); }
.logga:hover { color: var(--bg); }
.nav { display: flex; gap: 20px; font-size: 15px; font-weight: 500; flex-wrap: wrap; }
.nav a { color: var(--ljus); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { color: var(--bg); border-bottom-color: var(--guld); }
/* sök i sidhuvudet — fylls av filter.js, dold utan JS */
/* Min lista: fast piller till höger om flikarna, stjärnan i guld; antalet (filter.js) när något följs */
.nav-mitt { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); color: var(--bg); font-size: 14px; font-weight: 600; text-decoration: none; }
.nav-mitt svg { color: var(--guld); }
/* egen hover: sajtens allmänna länk-hover (plommon) blev nästan svart mot det mörka sidhuvudet (Per 24/9) */
.nav-mitt:hover, .nav-mitt[aria-current] { border-color: var(--guld); color: var(--bg); background: rgba(255,255,255,.08); }
.nav-antal { background: var(--guld); color: var(--ink); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 6px; }
/* sök börjar smal och växer: med Min lista-pillret på raden fick 300 px sökrutan att brytas ned (mätt 1380 px) */
/* sökrutan får krympa till 150 px så att loggan, sex flikar, Min lista och sök ryms på EN rad från 1200 px */
.sok { position: relative; margin-left: auto; flex: 1 1 180px; max-width: 320px; min-width: 150px; }
.sok input { width: 100%; font: inherit; font-size: 14px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: var(--bg); min-height: 40px; }
.sok input::placeholder { color: var(--ljus); }
.sok input:focus { outline: 2px solid var(--guld); outline-offset: 1px; background: rgba(255,255,255,.14); }
.sok-traffar { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--kort);
  border: 1px solid var(--linje); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden; }
.sok-traffar a { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; text-decoration: none; color: var(--ink);
  border-top: 1px solid var(--linje); }
.sok-traffar a:first-child { border-top: 0; }
.sok-traffar a:hover, .sok-traffar a:focus { background: var(--bg); }
.sok-traffar a span, .sok-traffar p { font-size: 13px; color: var(--dampad); margin: 0; }
.sok-traffar p { padding: 10px 14px; }
.folj-rad { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* "Det du valt" på /mitt/ — ett kryss räcker för att sluta följa */
.folj-hantera h3 { font-size: 18px; font-weight: 700; }
.valda { display: flex; gap: 8px; flex-wrap: wrap; }
.valda button { font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linje); background: var(--kort); color: var(--ink); }
.valda button:hover { border-color: var(--utgar); color: var(--utgar); }
.valda button span[aria-hidden] { font-size: 15px; color: var(--dampad); }
.valda button:hover span[aria-hidden] { color: var(--utgar); }
.dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* hoppa till innehållet: osynlig tills den får tangentbordsfokus (moln-QA 24/9, B4) */
.hoppa { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px;
  border-radius: 999px; font-weight: 600; text-decoration: none; }
.hoppa:focus { left: 16px; outline: 2px solid var(--guld); outline-offset: 2px; }

/* hero */
.hero { padding: 48px 0 24px; display: flex; flex-direction: column; gap: 24px; }
/* med brödsmula ovanför (undersidorna) blir 48 px dubbel luft: 63 px mellan smulan och överrubriken
   mot 48 från sidhuvudet på start/premiärer (Per 25/9: "är det för mycket space här också") */
.brod + .hero, .brod + .handelse { padding-top: 12px; }   /* händelsesidan: 55 → ~27 px, samma som hero-sidorna */
.hero-rad { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
/* 🪤 LAYOUTEN HOPPADE MELLAN START OCH DAGSIDOR (Per 24/9). Remsan satt mot textens nederkant
   (flex-end), så en ingress på två rader i stället för en flyttade remsan och filterraden 27 px.
   Nu ligger remsan i höjd med rubriken (överrubriken 20 px + gap 10 px), och ingressen tar
   alltid plats för två rader bredvid remsan. I mobil står remsan först, se 1100 px nedan. */
.hero-rad > .dagar { margin-top: 30px; }
.hero-rad .ingress { min-height: 3em; }
/* rubriken tar också alltid två rader: "Fredag 2 oktober: …" ryms på en, "Onsdag 30 september: …"
   inte — och remsan (7 × 66 px + pil) lämnar rubriken lika mycket bredd som före pilen */
.hero-rad h1 { min-height: 2.04em; }
/* min-width:0 — utan den sätter det längsta ordet ("streamingabonnemang") kolumnens minsta
   bredd och sprängde sidan i 390 px (mätt 405 px scrollWidth på /abonnemang/) */
.hero-text { display: flex; flex-direction: column; gap: 10px; max-width: 760px; min-width: 0; }
.overrubrik { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dampad); }
/* anywhere, inte break-word: bara anywhere påverkar kolumnens min-content-bredd */
.hero h1 { font-weight: 700; font-size: 56px; line-height: 1.02; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.ingress { margin: 6px 0 0; font-size: 18px; line-height: 1.5; color: var(--text-2); }
.dagar { display: flex; gap: 8px; flex-shrink: 0; }
.dagar a { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 66px; padding: 12px 0;
  border-radius: 12px; background: var(--kort); border: 1px solid var(--linje); text-decoration: none; }
.dagar a span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dampad); }
.dagar a b { font-family: var(--rubrik); font-weight: 700; font-size: 24px; }
.dagar a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dagar a[aria-current] span { color: var(--ljus); }
.dagar a.pil { width: 32px; justify-content: center; }
.dagar a.pil b { font-size: 26px; font-weight: 500; color: var(--dampad); }
/* Dagremsan (Per 24/9): dagens ruta heter "I dag" (filter.js räknar dagen i webbläsaren),
   och är en annan dag vald får dagens ruta en tjock kant. Guldpricken = något du följer den dagen;
   mörkt guld på vitt (ljust guld hade 1,9:1 mot vitt), ljust guld på den valda mörka rutan. */
.dagar a.idag:not([aria-current]) { border: 2px solid var(--ink); padding: 11px 0; }
.dagar a.idag span { font-weight: 700; color: var(--ink); }
.dagar a.idag[aria-current] span { color: var(--bg); }
/* passerade dagar: ingen vit ruta, streckad kant och dämpad siffra — förra veckan ska inte se ut
   som denna. Inte opacitet: .55 gav veckodagen 2,1:1 och siffran 3,8:1 (moln-QA 24/9), och dagarna
   är länkar, inte avstängda. --dampad ger 4,7:1 mot --bg. */
.dagar a.passerad:not([aria-current]) { background: transparent; border-style: dashed; }
.dagar a.passerad:not([aria-current]) b { color: var(--dampad); }
.dagar a.passerad[aria-current] { background: var(--ink-2); border-color: var(--ink-2); }
.dagar a.mitt { position: relative; }
.dagar a.mitt::after { content: ''; position: absolute; bottom: 5px; left: 50%; width: 6px; height: 6px;
  margin-left: -3px; border-radius: 50%; background: var(--guide-text); }
.dagar a.mitt[aria-current]::after { background: var(--guld); }

/* filter */
.filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter > span { font-size: 13px; color: var(--dampad); margin-right: 6px; }
.filter button { font: inherit; font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--linje); background: var(--kort); color: var(--ink); cursor: pointer; }
/* 🪤 VÄLJARE, INTE PÅ/AV-KNAPPAR (Per 23/9: "kan vi laborera med utgråad som inte aktiv, och ska
   vi ha en knapp med All sport?"). Ett språk för hela raden: ifylld = valt, grå = inte valt.
   Grupperna har förval ("Gratis och betalt", "All sport") så att en begränsning alltid syns som
   avvikelsen från förvalet i sin grupp — och vägen tillbaka är en knapp, inte ett omtryck. */
.filter button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.filter button[aria-pressed="false"] { color: var(--dampad); background: transparent; }
.filter button[aria-pressed="false"]:hover { color: var(--ink); border-color: var(--ink); }
.filter button[aria-pressed="true"] small { color: var(--bg); opacity: .85; }
.filter button[data-alla] { background: transparent; border-color: transparent; color: var(--ink); text-decoration: underline; font-weight: 500; }
/* ingen opacitet på antalet i ovalda knappar: --dampad × 0,7 mot --bg gav 2,7:1 (moln-QA 24/9), full --dampad ger 4,7:1 */
.filter button small { font-size: 12px; font-weight: 500; margin-left: 2px; }
.filter .skiljare { width: 1px; height: 24px; background: var(--linje); margin: 0 8px; }
.grenar { display: contents; }   /* grenknapparna ligger i raden; gruppen döljs tills Sport är valt */
/* kvittot under filterraden: vad som visas just nu (filter.js) */
.filter-kvitto { margin: 0; font-size: 14px; color: var(--guide-text); background: var(--guide-bg);
  border: 1px solid var(--guide-linje); border-radius: 10px; padding: 8px 12px; }
.filter-kvitto a { color: var(--ink); font-weight: 600; }
.filter-kvitto a[data-alla] { margin-left: 6px; white-space: nowrap; }

/* sektioner */
.sektion { padding: 16px 0 40px; display: flex; flex-direction: column; gap: 18px; }
.sektion-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sektion h2 { font-weight: 700; font-size: 30px; display: flex; align-items: center; gap: 12px; }
.sektion-topp a { font-size: 15px; font-weight: 500; display: inline-block; padding: 4px 0; }   /* tumyta ≥ 24 px (moln-QA) */
.sektion-topp > span, .not { font-size: 14px; color: var(--dampad); }
/* "Också i dag" under Sport i dag: matcherna är länkar; en match bryts aldrig mitt i */
.plus-not { line-height: 1.9; }
.plus-not span { white-space: nowrap; }
.plus-not a { color: var(--ink); font-weight: 500; }
.pricken { width: 12px; height: 12px; border-radius: 50%; background: var(--live); display: inline-block; }
/* pågående sändning — sätts av filter.js, se markeraPagaende() */
.pagar .l-tid::after, .pagar .tid::after, .pagar .nar b::after, .tid.pagar::after {
  content: "pågår"; display: block; font-family: var(--brod); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--live); }
.pagar .l-tid::before, .pagar .tid::before, .tid.pagar::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--live); margin-right: 6px; vertical-align: 1px; animation: puls 2s ease-in-out infinite; }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pagar .l-tid::before, .pagar .tid::before, .tid.pagar::before { animation: none; } }
/* händelsesidans När-rad bär data-start på själva tidsrutan (.tid.pagar), listor på raden (.pagar .l-tid) */

.rutnat { display: grid; gap: 16px; }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.r6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.delad { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; }

.kort { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--kort);
  border: 1px solid var(--linje); border-radius: var(--kant); text-decoration: none; }
.kort { overflow: hidden; }
.kort-bild { display: block; width: calc(100% + 40px); max-width: none; margin: -20px -20px 4px; aspect-ratio: 40 / 21; height: auto; object-fit: cover; background: var(--ink-2); }
.h-bild { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.h-bild img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; border-radius: var(--kant); background: var(--ink-2); }
.h-bild.prog img { aspect-ratio: 40 / 21; }
.h-text { margin: 0; font-size: 17px; line-height: 1.6; }
.h-typ { margin: -8px 0 0; font-size: 15px; color: var(--dampad); }
.h-mer { font-weight: 600; }
.h-bild figcaption { font-size: 12px; color: var(--dampad); }
.kort-topp { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tid { font-family: var(--rubrik); font-weight: 700; font-size: 24px; }
.kort-titel { font-size: 18px; font-weight: 600; }
.kort-under { font-size: 14px; color: var(--dampad); }
/* 🇸🇪 svenskt deltagande (svensk_flagga() i generera.py): sist i metaraden, bland sändningens
   fakta — aldrig intill ett lagnamn. Ramen hindrar det blå från att flyta ut i bakgrunden. */
.se-flagga { display: inline-flex; vertical-align: -1px; margin-left: 6px; }
.se-flagga svg { display: block; border: 1px solid var(--linje); border-radius: 1px; }
/* 🪤 På main, inte på sektionen: filter.js klonar följda lags rader till "Dina lag" överst,
   ett syskon FÖRE sektionerna — där syntes fyra flaggor på /lag/sverige/ för den som följer Sverige. */
main:has(.utan-flagga) .se-flagga { display: none; }

/* märken */
.marke { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: #fff; white-space: nowrap; }
.marke.betal { background: var(--betal); }
.marke.gratis { background: var(--gratis); }
.marke.okand { background: var(--okand); }
.marke.lyft { background: var(--guld); color: var(--ink); }
/* annonsmärkning: ska synas, inte skrika — men aldrig tonas ned till oläslighet (MFL 9 §) */
.marke.annons { background: transparent; color: var(--dampad); border: 1px solid var(--linje);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }

/* veckans stora */
.stora { display: flex; flex-direction: column; gap: 12px; }
.stor { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: 18px 22px; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--kant); text-decoration: none; }
.stor .nar span { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dampad); }
.stor .nar b { font-family: var(--rubrik); font-weight: 700; font-size: 24px; }
.stor .vad b { display: block; font-size: 20px; font-weight: 600; }
.stor .vad span { font-size: 14px; color: var(--dampad); }
.stor.forst { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.stor.forst .nar span, .stor.forst .vad span { color: var(--ljus); }
.stor.forst:hover { color: var(--bg); }

/* abonnemangsguiden */
/* startsidans rad: svaret per tjänst i full bredd (Per 24/9), samma gula ton som guiden på /abonnemang/ */
/* 🪤 .guide har align-self:start (shrink-to-fit på /abonnemang/); här blev raden lika bred som sin bredaste
   nowrap-text (397 px i 390-vyn) — därför stretch + border-box. .guide.… slår .guide {…} längre ned */
.guide.guide-rad-svar { gap: 10px; padding: 16px 20px; align-self: stretch; width: 100%; box-sizing: border-box; }
.guide-topp { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.guide-mer { font-size: 14px; font-weight: 600; white-space: nowrap; }
.guide-rad-svar .guide-svar { display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: 15px; }
.guide-rad-svar .guide-svar a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.55); border: 1px solid var(--linje); text-decoration: none; color: var(--ink); min-width: 0; }
.guide-rad-svar .guide-svar a:hover { border-color: var(--ink); }
/* innehållstexten kapas med ellips i stället för att bryta raden (mobil: "Orientering: Världscupen") */
.guide-rad-svar .guide-svar .vad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dampad); }
.guide-rad-svar .guide-svar a.gratis b { color: var(--gratis); }
.guide-rad-svar .guide-svar .antal { font-family: var(--rubrik); font-weight: 700; font-size: 13px; padding: 1px 7px;
  border-radius: 999px; background: var(--ink); color: var(--bg); }
.guide-rad-svar .guide-not { font-size: 12px; }
.guide-svar { font-size: 15px; line-height: 1.4; }
/* full bredd på startsidan: tjänsterna i 2×2 i stället för en smal spalt (Per 22/9).
   auto-fit med en minsta bredd ger 2 kolumner på desktop och 1 i mobil utan egen brytpunkt. */
.guide-rutor { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.guide { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--guide-bg);
  border: 1px solid var(--guide-linje); border-radius: var(--kant); align-self: start; }
.guide .overrubrik { font-size: 13px; color: var(--guide-text); }
.guide h3 { font-weight: 700; font-size: 24px; }
.guide-rad { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--kort); border-radius: 12px; text-decoration: none; }
.guide-rad b { display: block; font-weight: 600; }
.guide-rad span { font-size: 13px; color: var(--dampad); }
.guide-rad .antal { font-family: var(--rubrik); font-weight: 700; font-size: 22px; color: var(--ink); white-space: nowrap; }
.guide-rad.gratis .antal { color: var(--gratis); }
/* priser (data/priser.json, visas först när Per granskat tjänsten — priser() i generera.py) */
.guide-rad .pris { display: block; margin-top: 2px; color: var(--ink); font-weight: 600; }
.pristabell { list-style: none; margin: 0; padding: 0; background: var(--kort); border-radius: var(--kant); }
.pristabell li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px;
  border-top: 1px solid var(--linje); }
.pristabell li:first-child { border-top: 0; }
.pristabell li span { display: block; font-size: 14px; color: var(--dampad); }
.pristabell .pris { font-family: var(--rubrik); font-weight: 700; font-size: 18px; color: var(--ink); white-space: nowrap; }
.paketkrav { list-style: none; margin: 4px 0 0; padding: 0; font-size: 15px; }
.paketkrav li { margin-top: 4px; }
.paketkrav small, .paketkrav a { color: var(--dampad); }
.guide-not { font-size: 13px; color: var(--guide-text); line-height: 1.5; }

/* BILDFORMAT: 40:21 (1,91:1) i ALLA rutor — webb-tv.nu:s bildstandard och delningsbildernas format.
   Tjänsternas 16:9-bilder tappar en smal remsa upp/ned; webb-tv.nu:s titlar i kanten kapas aldrig. */
/* premiärkort — typografiskt block i stället för affisch */
.premiar { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.affisch { aspect-ratio: 40 / 21; border-radius: 14px; background: var(--ink-2); color: var(--bg); padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between; }
.affisch.betal { background: var(--betal); }
.affisch.gratis { background: var(--gratis); }
.affisch b { font-family: var(--rubrik); font-weight: 700; font-size: 40px; line-height: 1; }
.affisch span { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; opacity: .85; }
.p-affisch { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 14px; background: var(--ink-2); }
.p-bild { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; border-radius: 14px; background: var(--ink-2); }
.premiar .p-nar { font-size: 12px; font-weight: 600; color: var(--betal); }
.premiar .p-titel { font-size: 16px; font-weight: 600; }
.premiar .p-under { font-size: 13px; color: var(--dampad); }
.utgar-kort .nar { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--utgar-bg); color: var(--utgar); }

/* utgår */
.utgar { display: flex; justify-content: flex-start; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--kort); border: 1px solid var(--linje); border-radius: var(--kant); text-decoration: none; }
.u-bild { width: 96px; height: 50px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.u-text { flex: 1; min-width: 0; }
.utgar b { display: block; font-size: 17px; font-weight: 600; }
.utgar span { font-size: 13px; color: var(--dampad); }
.utgar .nar { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--utgar-bg); color: var(--utgar); white-space: nowrap; }
.utgar .u-text > span:not(.nar) { display: block; }

/* var sänds vad */
.tjanst { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--kort);
  border: 1px solid var(--linje); border-radius: var(--kant); text-decoration: none; }
.tjanst b { font-family: var(--rubrik); font-weight: 700; font-size: 20px; }
.tjanst span { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.tjanst em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--betal); }
.tjanst.gratis em { color: var(--gratis); }

/* listor (dag, liga, lag, tjänst) */
.dagblock { display: flex; flex-direction: column; gap: 10px; }
/* dagrubriken är h2 direkt under sidans h1 och h3 under en sektions-h2 — samma utseende;
   .sektion före h2 slår `.sektion h2` (30 px, flex) även i mobilregeln längre ned */
.dagblock h3, .sektion .dagblock h2 { font-size: 22px; font-weight: 700; padding-top: 8px; display: block; }
.lista { list-style: none; margin: 0; padding: 0; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--kant); overflow: hidden; }
/* klickbar rad: ytan ligger bakom innehållet (z-index 0), innehållet ovanpå (1).
   🪤 ALLT SOM INTE ÄR LÄNK ELLER KNAPP SLÄPPER IGENOM TRYCKET (Per 25/9: "ska inte hela raden vara
      klickbar"). Bild, tid, undertext och märken låg ovanpå ytan och fångade trycket — bara titeln och
      tomrummet ledde vidare. Priset: texten i raden går inte att markera genom att dra i den. */
.lista li.klickbar { position: relative; }
.lista li.klickbar:hover { background: var(--bg); }
.rad-yta { position: absolute; inset: 0; z-index: 0; }
.lista li.klickbar > *:not(.rad-yta) { position: relative; z-index: 1; pointer-events: none; }
/* :not(.rad-yta) även på button — utan den väger regeln lättare än raden ovanför, och klockan dog (testet 25/9) */
.lista li.klickbar a:not(.rad-yta), .lista li.klickbar button:not(.rad-yta) { pointer-events: auto; }
.lista li { display: grid; grid-template-columns: 64px 96px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 14px 20px; border-top: 1px solid var(--linje); }
.lista li:first-child { border-top: 0; }
.l-bild { display: block; width: 96px; height: 50px; object-fit: cover; border-radius: 8px; background: var(--ink-2); }
.l-bild.tom { background: var(--bg); }
/* rader utan klockslag (premiärer, utgångar) hoppar över tidkolumnen — se rad() i generera.py */
.lista li.utan-tid { grid-template-columns: 96px minmax(0, 1fr) auto; }
.lista .l-tid { font-family: var(--rubrik); font-weight: 700; font-size: 18px; }
.lista .l-tid small { display: block; font-family: var(--brod); font-weight: 600; font-size: 12px; color: var(--dampad); text-transform: lowercase; }
.lista .l-vad { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista .l-vad a, .lista .l-vad b { font-weight: 600; text-decoration: none; }
.lista .l-vad a:hover { text-decoration: underline; }
/* 🪤 :not(.typ) — regeln gäller underrubriken, inte typetiketten bredvid. Utan undantaget
   vinner den här (två klasser + element) över `.typ[data-t=…]` (klass + attribut) och målar
   etiketten grå, så färgen syns aldrig trots att ramen gör det. */
.lista .l-vad span:not(.typ) { font-size: 14px; color: var(--dampad); }
/* 🪤 SPORT FÅR INGEN FÄRG, MED FLIT. Sport är ungefär en tredjedel av raderna, och en
   markering som nästan alltid syns slutar läsas (MEMORY: signalen-som-alltid-syns). Färgen
   är till för det som avviker: en premiär, ett nytt avsnitt, en sista chans. Etiketten är
   dessutom ram och text, inte fylld bricka — den fyllda är reserverad för betal/gratis, som
   är sajtens bärande signal och inte ska behöva konkurrera med en andra färgskala. */
/* 🪤 align-self — etiketten sitter i en flexKOLUMN (.l-vad), där barn som standard sträcks
   till full bredd. Ramen blev då en pille tvärs över hela raden medan texten stod kvar till
   vänster. inline-block räcker inte: i flex är det align-self som styr. */
.typ { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dampad); align-self: flex-start; width: fit-content; }
.typ[data-t="premiar"] { color: var(--typ-premiar); }
.typ[data-t="nytt_avsnitt"] { color: var(--typ-avsnitt); }
.typ[data-t="utgar"] { color: var(--typ-utgar); }
.typ[data-t="premiar"], .typ[data-t="nytt_avsnitt"], .typ[data-t="utgar"] {
  border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; letter-spacing: 0.04em; }
[hidden] { display: none !important; }

/* filter (bygg/filter.js) */
[data-filtrerbar="dolj"][data-tom] { display: none; }
/* data-tomtext (sätts av filter.js) ger sektionen ett eget besked: "Ingen gratis sport i kväll …" */
[data-filtrerbar="meddela"][data-tom][data-tomtext]::after { content: attr(data-tomtext); }
/* ::after, inte ::before — på startsidan står rubriken i sektionen och beskedet ska stå under den */
[data-filtrerbar="meddela"][data-tom]::after { content: "Inget här med dina filter. Ändra dem ovan."; display: block;
  padding: 24px; background: var(--kort); border: 1px dashed var(--linje); border-radius: var(--kant); color: var(--dampad); }

/* händelsesida */
.handelse { padding: 40px 0 48px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.handelse h1 { font-weight: 700; font-size: 48px; line-height: 1.05; letter-spacing: -0.025em; }
.handelse .ingress { font-size: 18px; }
.var-ser { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--kort);
  border: 1px solid var(--linje); border-radius: var(--kant); }
.var-ser .marke { align-self: flex-start; }
.var-ser .stort { font-family: var(--rubrik); font-weight: 700; font-size: 28px; }
.knapp { display: inline-block; text-align: center; font-weight: 600; padding: 12px 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg); text-decoration: none; }
.knapp:hover { color: var(--bg); background: var(--betal); }
.annons { font-size: 12px; color: var(--dampad); }
.fakta { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.fakta dt { color: var(--dampad); }
.fakta dd { margin: 0; }
.flagga { padding: 12px 16px; border-radius: 12px; background: var(--utgar-bg); color: var(--utgar); font-size: 14px; }
/* 🪤 BRÖDSMULAN ÄR VÄGEN TILLBAKA (Per 23/9: "borde vi ha en återknapp?"). En Tillbaka-knapp
   vet inte var man kom ifrån — den som kommer från Google har inget att gå tillbaka till på
   sajten, och webbläsaren har redan sin. Brödsmulan pekar alltid uppåt i sajten. Därför: pil
   före första länken, mörk text och tumvänlig yta, och den finns på ALLA undersidor. */
.brod { font-size: 15px; color: var(--dampad); padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.brod a { color: var(--ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 6px 0 0; border-bottom: 1px solid transparent; }
.brod a:hover { border-bottom-color: var(--ink); }
.brod a:first-child::before { content: "← "; white-space: pre; }
/* följ-knapp på lagsidan */
.folj { font: inherit; font-size: 15px; font-weight: 600; padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
  align-self: flex-start; min-height: 44px; }
.folj:hover { background: var(--ink); color: var(--bg); }
/* liten variant på matchsidan, bredvid lagets namn */
.lagchip { display: inline-flex; align-items: center; gap: 6px; }
.folj.liten { font-size: 13px; padding: 7px 12px; min-height: 36px; border-color: var(--linje); font-weight: 500; }
.folj.liten[aria-pressed="false"]::before { content: "☆ "; }
.folj[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.folj[aria-pressed="true"]::before { content: "★ "; color: var(--guld); }
/* matcher med ett följt lag, i alla listor */
.mitt-lag { position: relative; }
/* blocket "Dina lag" överst — startsidan har det i HTML, tablåsidorna får det av filter.js */
.mitt-block { padding-top: 0; }
.mitt-block .lista { border-color: var(--guld); box-shadow: 0 0 0 3px var(--guide-bg); }
/* datumet i blocket ska gå att läsa på avstånd — raderna står utan dagrubrik ovanför */
.mitt-block .l-tid small { font-size: 13px; font-weight: 700; color: var(--ink); text-transform: none; }
.lista li.mitt-lag { background: var(--guide-bg); }
.lista li.aterkomst .l-vad > a { font-weight: 500; color: var(--text-2); }
.lista li.mitt-lag .l-vad > a::before, .kort.mitt-lag .kort-titel::before,
.stor.mitt-lag .vad b::before { content: "★ "; color: var(--guld); }
.knapp.liten { padding: 10px 16px; font-size: 14px; align-self: flex-start; }
/* köpvägen på tjänst-, tävlings- och lagsidorna (skaffa_rad i generera.py) */
.skaffa-rad { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 16px; }
/* bevaka: knapp + kalenderlänk under faktarutan */
.bevaka-rad { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bevaka { font: inherit; font-size: 14px; font-weight: 600; padding: 11px 16px; border-radius: 10px;
  border: 1px solid var(--linje); background: var(--kort); color: var(--ink); cursor: pointer; min-height: 44px; }
.bevaka::before { content: "🔔 "; filter: grayscale(1); }
.bevaka[aria-pressed="true"] { border-color: var(--ink); font-weight: 700; }
.bevaka[aria-pressed="true"]::before { filter: none; }
.kalender { font-size: 13px; color: var(--dampad); display: inline-block; padding: 5px 0; }   /* tumyta ≥ 24 px (moln-QA) */
/* markering i listorna — samma princip som följda lag */
.lista li.bevakad, .kort.bevakad { box-shadow: inset 3px 0 0 var(--ink); }
.lista li.bevakad .l-vad > a::after, .kort.bevakad .kort-titel::after,
.premiar.bevakad .p-titel::after { content: " 🔔"; font-size: 12px; }
/* klockan i premiär- och utgår-listorna: egen kolumn sist, ovanför radens klickyta (z-index 1,
   se .klickbar ovan), 44 px tumyta. Raden som har den visar inte klockan efter titeln också. */
.lista li.med-bevaka { grid-template-columns: 64px 96px minmax(0, 1fr) auto 44px; }
.lista li.utan-tid.med-bevaka { grid-template-columns: 96px minmax(0, 1fr) auto 44px; }
.bevaka-mini { grid-column: -2; width: 44px; height: 44px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linje); background: var(--kort); font-size: 17px; line-height: 1; }
.bevaka-mini::before { content: "🔔"; filter: grayscale(1); opacity: .5; }
.bevaka-mini:hover { border-color: var(--ink); }
.bevaka-mini[aria-pressed="true"] { border-color: var(--ink); background: var(--bg); }
.bevaka-mini[aria-pressed="true"]::before { filter: none; opacity: 1; }
.lista li.med-bevaka.bevakad .l-vad > a::after { content: none; }
/* avbevakad rad på Mitt står kvar nedtonad tills sidan laddas om — ett tryck till ångrar */
/* avbevakad rad står kvar nedtonad så att ett tryck till ångrar — men aldrig en lagrad, där är
   "inte bevakad" grundläget (Min lista är en lista sedan 24/9) */
/* 🪤 inte på .bevakad: markeraBevakade() tar bort den klassen i samma klick. En rad utan lag på Min lista
   finns bara för att den bevakats, så "utan lag + klockan av" ÄR avbevakad */
#min-lista li.med-bevaka:not(.mitt-lag):has(.bevaka-mini[aria-pressed="false"]) > :not(.bevaka-mini) { opacity: .45; }
.l-vad .kalender { margin-top: 2px; }
/* avsnittslistan från SVT: bild, titel, text och längd — ingen tidkolumn */
.lista.avsnitt li { grid-template-columns: 96px minmax(0, 1fr) auto; }
/* TV4:s lista bär ett gratis/Plus-märke per avsnitt — mätt ur TV4:s egen data, se tv4avsnitt.py */
.lista.avsnitt.tv4 li { grid-template-columns: 96px minmax(0, 1fr) auto auto; }
.lista .l-meta { font-size: 13px; color: var(--dampad); white-space: nowrap; align-self: center; }
/* "Visa alla N avsnitt": resten av säsongen som textrader utan bild (generera.py, handelsesidor) */
details.fler-avsnitt { margin-top: 8px; }
details.fler-avsnitt summary { cursor: pointer; list-style: none; font-weight: 600; padding: 10px 0; min-height: 36px; }
details.fler-avsnitt summary::-webkit-details-marker { display: none; }
details.fler-avsnitt summary::after { content: " ▾"; }
details.fler-avsnitt[open] summary::after { content: " ▴"; }
.lista.avsnitt.kompakt li { grid-template-columns: minmax(0, 1fr) auto auto; }
/* övriga säsonger under TV4:s avsnittslista (sasongsrad i generera.py) */
.andra-sasonger { margin: 12px 0 0; font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.andra-sasonger a { font-weight: 600; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips a { font-size: 14px; padding: 6px 12px; border-radius: 999px; background: var(--kort); border: 1px solid var(--linje); text-decoration: none; }
.chips a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }   /* tjänstchipsen: den sida man står på */
.brodtext { max-width: 720px; display: flex; flex-direction: column; gap: 10px; }
.brodtext h2 { font-size: 22px; font-weight: 700; margin-top: 18px; }
.brodtext p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.tomt { margin: 0; padding: 24px; background: var(--kort); border: 1px dashed var(--linje); border-radius: var(--kant); color: var(--dampad); }
/* synk mellan enheter på /min-lista/ — rutan ritas av filter.js, och bara över https */
.sektion.synk { padding: 4px 20px; margin-bottom: 24px; gap: 0; max-width: 720px; background: var(--kort);
  border: 1px solid var(--linje); border-radius: var(--kant); }
.sektion.synk h2 { font-size: 17px; display: inline; }
/* hopfälld rad: summary är rubriken med en pil; kroppen syns bara öppnad */
.synk-detalj summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.synk-detalj summary::-webkit-details-marker { display: none; }
.synk-detalj summary::after { content: '›'; font-size: 24px; color: var(--dampad); transition: transform .15s; }
.synk-detalj[open] summary::after { transform: rotate(90deg); }
.synk-kropp { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.synk p { margin: 0; line-height: 1.5; }
.synk-knappar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.synk-textknapp { font: inherit; font-size: 15px; min-height: 44px; padding: 0 6px; border: 0; background: none;
  color: var(--dampad); text-decoration: underline; cursor: pointer; }
.synk-textknapp:hover { color: var(--ink); }
.synk-qr svg { display: block; width: 220px; height: 220px; }
.synk-not { font-size: 14px; color: var(--dampad); }
.synk-meddelande { font-weight: 600; }
.synk-bock { color: var(--gratis); font-weight: 700; }
.synk button:disabled { opacity: .5; cursor: progress; }
/* sätts av filter.js bara när startsidans datum inte är dagens (se filter.js) */
.foraldrad { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 500;
  background: var(--utgar-bg); color: var(--utgar); border: 1px solid currentColor; align-self: flex-start; }

/* fot */
.fot { margin-top: 24px; background: var(--ink); color: var(--ljus); font-size: 14px; }
.fot .wrap { padding-top: 32px; padding-bottom: 32px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fot a { color: var(--bg); }
.fot-tjanster { display: flex; gap: 14px; flex-wrap: wrap; }
.fot-tjanster a { color: var(--ljus); text-decoration: none; border-bottom: 1px solid transparent; display: inline-block; padding: 4px 0; }   /* tumyta ≥ 24 px */
.fot .wrap > span a { display: inline-block; padding: 4px 0; }
.fot-tjanster a:hover { color: var(--bg); border-bottom-color: var(--guld); }

/* mobil */
@media (max-width: 1100px) {
  :root { --sida: 32px; }
  .r5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r4, .r3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* tre utgår-kort i 235 px gav fyra rader titel och tomma grannkort */
  .delad, .handelse { grid-template-columns: minmax(0, 1fr); }
  .hero-rad { flex-direction: column; align-items: flex-start; gap: 20px; }   /* 40 px + scrollisten under remsan blev 69 px till "Fredag 25 …" (Per 25/9: aningen mindre) */
  /* remsan först: då står den på samma plats oavsett hur långa rubrik och ingress är */
  .hero-rad > .dagar { order: -1; margin-top: 0; }
  .hero-rad .ingress, .hero-rad h1 { min-height: 0; }
}
@media (max-width: 640px) {
  :root { --sida: 16px; }
  /* guidens rad i mobil: en tjänst per rad med antalet till höger, inte piller som bryts inuti */
  .guide-rad-svar .guide-svar a { width: 100%; box-sizing: border-box; border-radius: 12px; }   /* utan border-box: 413 px i 390-vyn */
  .guide-rad-svar .guide-svar .antal { margin-left: auto; }
  .topp .wrap { gap: 12px 12px; padding-top: 14px; padding-bottom: 14px; }   /* loggan + pillret ska rymmas på rad 1 även vid 360 px */
  .logga b { font-size: 22px; }
  /* en rad som scrollar i sidled: två rader meny åt upp första skärmen (mätt 24/9: 101 px) */
  /* flikarna scrollar mellan loggan och Min lista-pillret; toningen i högerkanten säger att det finns mer */
  .nav { flex: 1 1 auto; min-width: 0; gap: 16px; font-size: 14px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; }
  /* rad 1: loggan + Min lista till höger · rad 2: flikarna (scroll) · rad 3: sök */
  .nav-mitt { padding: 5px 10px; font-size: 13px; order: 2; margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; }
  .sok { order: 4; }
  .nav::-webkit-scrollbar { display: none; }
  .sok { flex: 0 0 calc(100% - 24px); margin: 0 auto; max-width: none; }   /* 🪤 flex-grow måste bort — annars fyller rutan raden och auto-marginalen får ingen luft */   /* centrerad med 12 px luft på var sida (Per 25/9: "lite luft på sidorna"); 320 px fast bredd gav en tom remsa till höger */
  .sok-traffar { position: fixed; left: 16px; right: 16px; top: auto; }
  .hero { padding-top: 28px; }
  .hero h1 { font-size: 36px; }
  .handelse h1 { font-size: 34px; }
  .sektion h2 { font-size: 24px; }
  .dagar { overflow-x: auto; max-width: 100%; padding-bottom: 14px; }   /* luft mellan dagarna och scrollisten (Per 25/9: linjen låg i nederkant av dagarna) */
  .dagar a { width: 58px; flex-shrink: 0; }
  .dagar a.pil { width: 40px; }
  .r3, .r4 { grid-template-columns: minmax(0, 1fr); }
  .r5, .r6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stor { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stor .marke { justify-self: start; }
  .lista li { grid-template-columns: 52px 72px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .l-bild { width: 72px; height: 38px; }
  .lista li .marke { grid-column: 3; justify-self: start; }
  .lista li.utan-tid { grid-template-columns: 72px minmax(0, 1fr); }
  .lista li.utan-tid .marke { grid-column: 2; }
  .lista li.med-bevaka { grid-template-columns: 52px 72px minmax(0, 1fr) 44px; }
  .lista li.utan-tid.med-bevaka { grid-template-columns: 72px minmax(0, 1fr) 44px; }
  .lista li.med-bevaka .bevaka-mini { grid-column: -2; grid-row: 1 / span 2; }
  .lista.avsnitt li, .lista.avsnitt.tv4 li { grid-template-columns: 72px minmax(0, 1fr); }
  .lista.avsnitt li .l-meta, .lista.avsnitt li .marke { grid-column: 2; justify-self: start; }
  .lista.avsnitt.kompakt li { grid-template-columns: minmax(0, 1fr); }
  .lista.avsnitt.kompakt li .l-meta, .lista.avsnitt.kompakt li .marke { grid-column: 1; }
  .affisch b { font-size: 30px; }
  /* tumregeln för filterknapparna i mobil: minst 44 px */
  .filter button { min-height: 44px; display: inline-flex; align-items: center; }
  .nav a { padding: 10px 0; }

  /* 🪤 FÖRSTA SKÄRMEN VAR BARA KROM. Mätt i 390 px: rubrik, ingress, dagremsa och en
     filterrad som bröts över fyra rader sköt ned första sändningen till ~815 px — besökaren
     fick skrolla förbi hela sidhuvudet för att se om något händer i kväll. Filterraden
     scrollar nu i sidled på EN rad, som chips-rader gör i appar, och ingressen tonas ned.
     Innehållet, inte inramningen, ska möta den som kommer från Google. */
  .filter { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; padding-bottom: 2px; }
  .filter::-webkit-scrollbar { display: none; }
  .filter > span, .filter button { flex-shrink: 0; }
  .filter .skiljare { margin: 0 4px; }
  .hero { padding-top: 20px; gap: 16px; }
  .hero h1 { font-size: 30px; }
  /* 🪤 Ingressen krymper men tas ALDRIG bort: på lag-, liga- och tjänstsidorna bär den
     sidans enda egna mening ("Nästa match: …", "130 sport, 14 premiär"), och att dölja den i
     mobil hade tagit bort både informationen och det unika innehåll sidorna nyss fick. */
  .hero .ingress { font-size: 15px; margin-top: 2px; }
  .sektion { padding-bottom: 28px; gap: 14px; }
}

/* Till toppen (skapas av filter.js, Per 25/9): rund knapp nere till höger, ovanför iPhonens hemindikator.
   🪤 [hidden] måste skrivas ut — klassens display: grid slår annars webbläsarens egen hidden-regel. */
.till-toppen { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ink-2);
  background: var(--ink); color: var(--bg); display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.till-toppen[hidden] { display: none; }
.till-toppen:hover { background: var(--ink-2); }
.till-toppen:focus-visible { outline: 3px solid var(--guld); outline-offset: 2px; }
@media print { .till-toppen { display: none; } }