/* ---------- tema ----------
   Fargene ligger som variabler slik at et tema kun trenger a overstyre
   dem. Verdiene under er appens opprinnelige palett; ekte merkefarger
   fra sportsbibelen.no settes her nar de foreligger. */
:root {
  --fs: 1;

  /* Merkefarger lest av sportsbibelen.no. Toppfeltet der gar fra dyp
     marinebla til klar bla, siden er lys blahvit og kortene hvite. */
  --bg-page:      #E9F0FA;
  --bg-app:       #FFFFFF;
  --bg-raised:    #DFE8F6;
  --bg-ad:        #F4F7FD;
  --bg-ad-stripe: #EDF3FB;

  --border:        #DCE5F2;
  --border-strong: #C9D6EA;
  --border-ad:     #D3DFF1;
  --border-btn:    #C3D1E8;
  --border-faint:  #E7EDF7;

  --text:        #16224A;
  --text-strong: #0E1836;
  --text-body:   #2E3A5E;
  --text-dim:    #5A6785;
  --text-dimmer: #6E7B99;
  --text-faint:  #8A95AE;

  --accent:        #2A50D8;
  --accent-ink:    #FFFFFF;
  --accent-soft:   #1B2A87;
  --accent-bright: #FFFFFF;
  /* Bunnen i den valgte kampen: sa svak at rammen gjor jobben, men nok
     til at raden loftes fra lista. */
  --accent-wash:   #EDF1FD;

  /* Bekreftet: en pub har sagt at den viser nettopp denne kampen. */
  --bekreftet: #1F7A4D;

  /* Utfallet i formrekka under «Mitt lag». Bokstaven sier det samme, sa
     fargen er en forsterkning, ikke eneste bærer. */
  --seier: #1F7A4D;
  --tap:   #B3261E;
  --pa-utfall: #FFFFFF;

  --ad-g1: #1B2A87;
  --ad-g2: #2A50D8;
  --ad-g3: #223AA8;

  --overlay-hero:  rgba(8,14,38,0.92);
  --on-overlay:     #FFFFFF;
  --on-overlay-dim: #C6D2EA;
  --overlay-scrim: rgba(10,18,45,0.55);

  /* Toppfeltet og det som ligger oppa det. */
  /* Samme gradient som logofila: #16297B til #2D51CE, malt av fila. */
  --header-bg:     linear-gradient(to right, #16297B 0%, #2D51CE 100%);
  --header-border: transparent;
  --on-brand:      #FFFFFF;
  --on-brand-dim:  #BFD0FF;
  --logo-ink:      #1B2A87;

  --t-hero:   calc(21px   * var(--fs));
  --t-row:    calc(15.5px * var(--fs));
  --t-detail: calc(20px   * var(--fs));
  --t-body:   calc(15px   * var(--fs));
  --t-excerpt:calc(14px   * var(--fs));
  --t-ad:     calc(16.5px * var(--fs));
  --t-menu:   calc(17px   * var(--fs));
  --t-meta:   calc(11.5px * var(--fs));
  --t-label:  calc(11px   * var(--fs));
}

/* Svart lesemodus: ekte svart bunn og hoyere kontrast. Aksenten beholdes,
   ellers mister kategoriene signalet sitt. */
[data-theme="svart"] {
  --bg-page:      #000000;
  --bg-app:       #000000;
  --bg-raised:    #141414;
  --bg-ad:        #0D0D0D;
  --bg-ad-stripe: #0A0A0A;

  --border:        #242424;
  --border-strong: #303030;
  --border-ad:     #303030;
  --border-btn:    #3A3A3A;
  --border-faint:  #1C1C1C;

  --text:        #FFFFFF;
  --text-strong: #FFFFFF;
  --text-body:   #E4E4E4;
  --text-dim:    #B8B8B8;
  --text-dimmer: #A0A0A0;
  --text-faint:  #8A8A8A;

  /* Aksenten lysnes for a holde kontrasten mot svart. Det samme gjor
     bekreftet-gronn: #1F7A4D er for morkt pa svart. */
  --bekreftet: #4ECB8B;
  --seier: #4ECB8B;
  --tap:   #F2786D;
  /* Lyse flater i mørkt tema: hvit bokstav oppå dem forsvant. */
  --pa-utfall: #000000;

  --accent:        #5C82FF;
  --accent-ink:    #00081F;
  --accent-soft:   #9DB4FF;
  --accent-bright: #FFFFFF;
  /* Pa svart holder en dyp marine seg nermere aksenten enn en gra ville
     gjort, og blir ikke lysere enn at teksten star. */
  --accent-wash:   #0F1730;

  --ad-g1: #101010;
  --ad-g2: #2A2A2A;
  --ad-g3: #161616;

  --overlay-hero:  rgba(0,0,0,0.94);
  --on-overlay:     #FFFFFF;
  --on-overlay-dim: #B9B9B9;
  --overlay-scrim: rgba(0,0,0,0.78);

  --header-bg:     #000000;
  --header-border: #242424;
  --on-brand:      #FFFFFF;
  --on-brand-dim:  #9DB4FF;
  --logo-ink:      #000000;
}

[data-font="stor"] { --fs: 1.2; }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 10px;
  background: var(--bg-page);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.phone {
  position: relative;
  width: 390px;
  max-width: 100%;
  background: var(--bg-app);
  border-radius: 28px;
  border: 1px solid var(--border-strong);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Fyller hoyden i stedet for a stoppe pa 780 piksler, som lot 64
     piksler sta ubrukt pa en vanlig telefonskjerm. Taket pa 900 er der
     for at kortet ikke skal bli absurd hoyt pa en stor skjerm. */
  height: calc(100vh - 20px);
  height: calc(100dvh - 20px);
  max-height: 900px;
}

.head-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

/* Hamburgerknappen. Tre streker tegnet i CSS, ingen ikonfil a laste. */
.menu-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
}

.bars, .bars::before, .bars::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--on-brand);
  border-radius: 1px;
}

.bars { position: relative; }

.bars::before, .bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.bars::before { top: -5.5px; }
.bars::after  { top: 5.5px; }

.menu-btn:focus-visible {
  outline: 2px solid var(--on-brand);
  outline-offset: 2px;
}

.menu-close:focus-visible, .menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- menypanel ---------- */

.menu-panel {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  transform: translateX(-100%);
  /* visibility slas av forst etter at panelet har skjovet seg ut, og pa
     oyeblikkelig nar det apner. A transisjonere visibility direkte gir
     udefinert oppforsel i kantene. */
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}

.menu-panel.open {
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.22s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel { transition: none; }
}

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.menu-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

.menu-close {
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
}

.menu-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Den andre veien ut. Krysset i toppen ligger under statuslinja pa
   iPhone, der tommelen ikke rekker og fingeren treffer skjermkanten i
   stedet. Denne er bred, star nederst i menyen, og gjor det samme. */
.menu-lukk {
  width: 100%;
  margin-top: 4px;
  /* 10px og ikke 13: knappen er 38 px hoy, og med margin og gapet over
     er trykkflata fortsatt over 44. Luften den ga fra seg gikk til
     emnelista, som er det menyen finnes for. */
  padding: 10px 12px;
  border: 1px solid var(--border-btn);
  border-radius: 8px;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  cursor: pointer;
}

.menu-lukk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Segmentert velger. Begge valgene vises, det aktive er fylt, sa det aldri
   er tvil om teksten beskriver tilstanden eller handlingen.

   Bevisst i faste piksler: dette er ramme rundt innholdet, ikke innhold,
   og skal ikke vokse nar leseren ber om storre tekst. */
.segment {
  display: flex;
  border: 1px solid var(--border-btn);
  border-radius: 999px;
  overflow: hidden;
}

.segment-del {
  padding: 5px 10px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.45;
  white-space: nowrap;
  cursor: pointer;
}

.segment-del[aria-current="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.segment-del:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* A+ skal lese som storre skrift, ikke som en annen bokstav. */
.segment-stor { font-size: 13px; }

/* Et segment som vokser. Ligavelgeren har fem ligaer i dag og er ment a
   ta imot flere; pa én linje kappet kapselen den siste, og «Serie A» sto
   halvt utenfor kanten. Et kuttet valg leses som et valg du ikke har —
   samme regel som «Premier League» og «Kommende» over.

   Radiusen mykner fra kapsel til avrundet boks, og det er ikke smak: en
   999px-radius rundt to linjer blir to store halvsirkler i endene, og da
   klipper kanten den forste og siste knappen pa hver linje. Knappene
   beholder kapselformen hver for seg, sa den valgte fortsatt leses som en
   fylt pille.

   Formen skiller de to velgerne fra hverandre, og det stemmer med hva de
   er: ligaene er en liste som vokser, fanene er fire og blir vaerende. */
.segment-flerlinje {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  border-radius: 14px;
  overflow: visible;
}

.segment-flerlinje .segment-del { border-radius: 999px; }

.menu-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 24px;
  overflow-y: auto;
  flex: 1;
}

/* Raden baerer emnet og — der emnet er en liga vi har data for — to
   snarveier. De ligger ved siden av hovedknappen, ikke inni: en knapp i
   en knapp finnes ikke, og raden skal ha tre mal som betyr tre ting,
   ikke ett som betyr alle. */
.menu-rad {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-faint);
}

/* Streken tegnes av raden nar den finnes, ellers ville den gatt under
   bare halve linja. */
.menu-rad > .menu-item { border-bottom: 0; }

.menu-snarvei {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding-right: 18px;
}

/* Faste piksler: dette er ramme rundt innholdet, ikke innhold, og
   snarveiene skal ikke vokse med --fs til de dytter emnet ut av raden. */
.snarvei-knapp {
  padding: 4px 10px;
  border: 1px solid var(--border-btn);
  border-radius: 999px;
  background: none;
  color: var(--accent);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

.snarvei-knapp:hover { background: var(--bg-raised); }

.snarvei-knapp:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.menu-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-faint);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: var(--t-menu);
  letter-spacing: 0.01em;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.menu-item .count {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-dimmer);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.menu-item[aria-current="true"] { color: var(--accent); }

.menu-item[aria-current="true"] .count { color: var(--accent); }

.menu-actions {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 12px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* De to app-handlingene ved siden av hverandre. Footeren tok 38 % av
   menyen pa en telefon med stor skrift, og da sto det siste emnet halvt
   under kanten — menyen handler om emnene, ikke om knappene under dem.

   flex framfor grid med to kolonner: «Installer appen» er skjult sa lenge
   nettleseren ikke tilbyr installasjon, og en tom kolonne ville latt
   «Del appen» sta pa halve bredden med et hull ved siden av. Med flex:1
   pa begge tar den ene hele bredden nar den star alene. */
.action-par {
  display: flex;
  gap: 8px;
}

.action-par .action-btn { flex: 1; }

.action-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-btn);
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* display:flex over slar [hidden] fra nettleserens eget stilark, sa uten
   denne sto «Installer appen» framme overalt — ogsa der nettleseren aldri
   tilbyr installasjon, og ogsa etter at appen var installert. Knappen lovet
   noe den ikke kunne gi. Samme grep som .konto-felt[hidden] og de andre:
   hver regel som setter display ma si hva [hidden] betyr. */
.action-btn[hidden] { display: none; }

.action-ico {
  font-size: 15px;
  line-height: 1;
  color: var(--accent);
}


.action-note {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Lenka i notatet er det eneste leseren har naar utklippstavla svikter,
   sa den maa vaere baade aa trykke paa og aa kopiere. En helt vanlig <a>
   gir begge deler paa en telefon: trykk folger den, langtrykk gir
   «Kopier lenke» i nettleserens egen meny. `user-select: all` ble provd og
   tatt ut igjen — den gjor at ETT trykk markerer teksten framfor aa folge
   lenka, sa den kjopte kopieringen ved aa selge trykket.
   `inline-block` med luft over og under gir en trykkflate som taaler en
   finger uten aa gjore notatet til en knapp; `break-all` fordi en URL uten
   mellomrom ellers skyver menyen sidelengs. */
.action-note-lenke {
  display: inline-block;
  padding: 6px 0;
  color: var(--accent);
  word-break: break-all;
}

/* Personvern og Admin er bokser som de andre valgene, ikke to sma lenker
   under dem. De sto som understreket tekst i 12 px til 24. september 2026,
   og var det eneste i bunnen av menyen som ikke sa det samme som resten:
   dette kan du trykke pa. <a> fordi de gar til en annen side.
   Litt lavere og mindre enn Del og Logg inn: de er sekundaere, og i full
   storrelse brot «Personvern og sletting» over to linjer pa halv bredde.
   Da ble bunnen av menyen 230 px mot taket pa 220 i SAK_1. */
.action-lenker .action-btn {
  padding: 9px 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-decoration: none;
}

/* Innloggingen: to felt og en knapp, rett under knappen som apner den.
   Ingen dialog — det er ett sporsmal, og menyen er alt apen. */
.konto-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--border-btn);
  border-radius: 8px;
}

.konto-panel[hidden] { display: none; }

.konto-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Navnet du er i ferd med a logge inn som. Star som en overskrift, ikke
   som en setning: det skal kunne leses i et blunk, og det er svaret pa
   «hvem er dette». */
.konto-hvem {
  margin: 0;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.konto-hvem[hidden] { display: none; }

.konto-felt {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-btn);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  /* **Seksten piksler, ikke tretten.** Safari pa iPhone zoomer inn av seg
     selv nar du fokuserer et felt med mindre skrift, og etter den zoomen
     er sida pannbar sidelengs. Her skrives PIN-en, sa det er feltet folk
     blir staende lengst i. `--fs` er 1 eller 1.2, sa skaleringen oppover
     star — det er bare bunnen som er loftet. */
  font-size: calc(16px * var(--fs));
}

.konto-felt[hidden] { display: none; }

.konto-send, .konto-ut {
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  cursor: pointer;
}

.konto-ut {
  background: none;
  border: 1px solid var(--border-btn);
  color: var(--text-dim);
}

/* Sletting er ikke en handling man skal snuble i: den star som tekst, i
   dempet farge, til den er trykket en gang — da blir den rod og sier hva
   den kommer til a gjore. */
.konto-slett {
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: calc(12px * var(--fs));
  cursor: pointer;
  text-decoration: underline;
}

.konto-slett[data-sikker="ja"] {
  color: #C0392B;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #C0392B;
}

.konto-slett[hidden] { display: none; }

/* Logg ut og Slett star som et par, ikke som to rader. Panelet apnes
   ogsa fra navnemerket i toppfeltet, og der er footeren alt det storste
   pa skjermen — hver rad her er en emnerad mindre. */
.konto-par {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* Tre knapper, og de er ikke like lange. Lik bredde ga «Slett kontoen
   min» en tredjedel av raden, og da brakk den over to linjer med A+ —
   en rad hoyere for alle for a gi én knapp plass. */
.konto-par > * { flex: 1 1 auto; }
/* display: flex slar [hidden] fra nettleserens eget stilark. */
.konto-par[hidden] { display: none; }
.konto-slett:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.konto-send:disabled { opacity: 0.45; cursor: default; }
.konto-send[hidden], .konto-ut[hidden] { display: none; }
.konto-send, .konto-ut { -webkit-appearance: none; }

.konto-felt:focus-visible, .konto-send:focus-visible, .konto-ut:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Favorittlagene pa kontoen: en opplysning, ikke en handling. Liten og
   dempet, som svaret under — men den er der, for «folger kontoen» er et
   lofte, og et lofte du ikke kan se er holdt, er et du ma tro pa. */
.konto-lag {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.konto-lag[hidden] { display: none; }

/* Kontosiden: menypanelet med .konto-modus pa, apnet fra navnet i
   toppfeltet. Sok, emner, deling og lenkene viker; kortene far plassen
   emnelista hadde, og kontoen star i bunnen som ellers. Knappen som
   folder kontoen inn og ut er borte ogsa — her ER du i kontoen. Tema og
   skrift viker ogsa: de gjelder appen, ikke kontoen, og de delte tittelen
   pa to linjer. Krysset blir. */
.menu-panel.konto-modus .menu-tools .segment,
.menu-panel.konto-modus .sok,
.menu-panel.konto-modus .menu-list,
.menu-panel.konto-modus .action-par,
.menu-panel.konto-modus #kontoBtn,
.menu-panel.konto-modus .action-lenker { display: none; }

/* Og motsatt: med et navn i toppfeltet har menyen ingen konto. Navnet er
   veien dit, og to veier til samme panel er én for mye. */
.menu-panel.har-navn:not(.konto-modus) #kontoBtn,
.menu-panel.har-navn:not(.konto-modus) #kontoPanel { display: none; }

.konto-side {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 20px;
}
.konto-side[hidden] { display: none; }

.konto-pin {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* display: flex slar [hidden] fra nettleserens eget stilark. */
.konto-pin[hidden] { display: none; }

.konto-svar {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.konto-svar:empty { display: none; }

.menu-state {
  padding: 20px 18px;
  font-size: 13px;
  color: var(--text-dimmer);
}

/* Viser hvilken del av feeden du star i, nar det ikke er alle saker. */
/* Fornavnet ditt i toppfeltet. Star der fordi «er jeg logget inn?» ikke
   skal kreve at man apner menyen for a finne ut av det. Ligger oppa
   toppfeltets gradient, sa fargene kommer fra --on-brand. */
.hvem-tag {
  flex: 0 0 auto;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 11px;
  border: 1px solid var(--on-brand-dim);
  border-radius: 999px;
  background: none;
  color: var(--on-brand);
  font-family: inherit;
  font-size: calc(12px * var(--fs));
  font-weight: 600;
  cursor: pointer;
}

.hvem-tag[hidden] { display: none; }
.hvem-tag:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 2px; }

.filter-tag {
  font-size: 11px;
  color: var(--on-brand-dim);
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 0;
}

/* Filteret er en knapp fordi det er en handling: trykk, og feeden viser
   alt igjen. Den ligger oppa toppfeltets gradient, sa fargene kommer fra
   --on-brand og ikke fra temaets tekstfarge — gradienten er mork i begge
   temaer. */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 150px;
  padding: 3px 5px 3px 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--on-brand);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  cursor: pointer;
}

/* Lange sok kuttes, krysset gjor det aldri: uten det er brikken en
   blindvei. */
.filter-navn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-kryss {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 13px;
  line-height: 1;
}

.filter-chip:focus-visible {
  outline: 2px solid var(--on-brand);
  outline-offset: 2px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Hoyden styres av en variabel, sa den komprimerte tilstanden endrer
     ett tall. Safe-area legges pa toppen, ikke i bunnen av feltet. */
  padding: calc(var(--header-pad, 12px) + var(--safe-top, 0px)) 16px var(--header-pad, 12px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  flex-shrink: 0;
  transition: padding 0.18s ease;
}

.logo img { transition: height 0.18s ease; }

/* Settes nar leseren har rullet et stykke ned i feeden. */
.phone.komprimert { --header-pad: 6px; }
.phone.komprimert .logo img { height: 30px; }

@media (prefers-reduced-motion: reduce) {
  .header, .logo img { transition: none; }
}

/* Installert pa hjemskjerm: la merkefargen mote skjermkanten i stedet
   for a stoppe under klokka. Rammen beholdes ellers. */
@media (display-mode: standalone) {
  body { padding: 0; }
  .phone {
    --safe-top: env(safe-area-inset-top, 0px);
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .feed { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .menu-actions { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

/* Pa en bred skjerm sto appen som et 390 px kort med avrundede hjorner,
   1 px kant og ti piksler luft rundt — og det leses som et BILDE av en
   telefon, ikke som en app. En demo, ikke et produkt (#148).
   Kanten, hjornene og luften gar bort. Spalten blir staende.

   **Bredden og hoyden er ikke pynt**, og derfor rores de ikke her.
   `.phone` har fast hoyde og `flex-direction: column`, og det er DET som
   gjor at `.feed` og `.fotball-innhold` ruller inni appen framfor at
   vinduet ruller. Pa den henger ogsa `.tabbar`, som ligger som siste
   barn framfor a flyte over; `.menu-panel`, som er `position: absolute;
   inset: 0` og ville dekket hele skjermen uten en boks a dekke;
   `.tabell-skall`, som ruller sidelengs nettopp fordi `overflow: hidden`
   klipper; og `folgMedPaRulling()` i app.js, som lytter pa `.feed` og
   ikke pa vinduet. En bred spalte er en egen sak med egen risiko — dette
   er bare a ta av rammen.

   `min-width: 900px`: over dette er det sikkert at skjermen ikke er en
   telefon i portrett eller et nettbrett der spalten fyller mye av bredden
   uansett. Nettleserens standard er mobil-forst, sa regelen legger seg
   pa toppen framfor a maatte skrus av igjen lenger nede. */
@media (min-width: 900px) {
  body { padding: 0; }
  .phone {
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
}

/* Logoen er den ekte fila med bakgrunnen fjernet: de bla flatene er
   gjennomsiktige, sa toppfeltets gradient skinner gjennom der de var.
   Da kan det ikke oppsta en synlig kant rundt merket, uansett hvilken
   bakgrunn feltet har. Det er ogsa derfor den virker i svart tema. */
.logo {
  display: block;
  margin: 0;
  line-height: 0;
}

.logo img {
  display: block;
  height: 46px;
  width: auto;
}

/* Logoen er en lenke hjem. Ingen understrek eller farge — den ser ut som
   logoen, og det er nettopp den leseren kjenner igjen. */
.logo-hjem { display: block; border-radius: 6px; }
.logo-hjem:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.feed {
  overflow-y: auto;
  flex: 1;
  padding: 14px 14px 24px;
}

.state {
  color: var(--text-dimmer);
  font-size: 14px;
  text-align: center;
  padding: 60px 20px;
}

.state p { margin: 0 0 14px; }

/* Star overst i feeden nar favorittlag er loftet. En knapp, sa veien til
   a endre valget er der man ser virkningen av det. */
.favoritt-linje {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--border-faint);
  background: var(--bg-ad);
  color: var(--text-dim);
  font: inherit;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.favoritt-linje .favoritt-stjerne { color: var(--accent); }

.favoritt-linje:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Felles nullstilling for de klikkbare kortene, som er ekte <a
   href="#/sak/...">-elementer: tastaturet nar dem, og nettleseren gir
   «apne i ny fane», «kopier lenkeadresse» og statuslinja pa kjopet.
   De var <button> til 22. september 2026 (#146), og da fantes ingenting
   av det — ruten hadde vaert der hele tiden, men ingen lenke bar den.
   `text-decoration: none` er det en <a> trenger og en <button> ikke
   hadde; resten sto fra for. */
.card-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.card-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--bg-raised);
  height: 220px;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  background: linear-gradient(transparent, var(--overlay-hero));
}

.cat-pill {
  display: inline-block;
  font-size: var(--t-label);
  color: var(--accent-ink);
  background: var(--accent);
  padding: 3px 9px;
  border-radius: 5px;
  font-weight: 600;
  margin-bottom: 8px;
}

.hero-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: 1.2;
  /* Ligger oppa gradienten, ikke pa kortbakgrunnen. */
  color: var(--on-overlay);
  margin: 0;
}

/* Kun i toppsakens overlegg. */
.meta {
  font-size: var(--t-meta);
  color: var(--on-overlay-dim);
  margin-top: 6px;
}

.row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.row img, .row .thumb-empty {
  width: 76px;
  height: 76px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-raised);
}

.row-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.row-cat {
  font-size: var(--t-label);
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 4px;
}

.row-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: var(--t-row);
  line-height: 1.25;
  color: var(--text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.row-meta {
  font-size: var(--t-meta);
  color: var(--text-dimmer);
  margin-top: 6px;
}

/* ---------- annonseplasser ---------- */

/* Merket star forst i leseretningen, over selve annonsen, og er lest opp
   av skjermleser via aria-label pa blokka. Markedsforingsloven krever at
   reklame tydelig framstar som reklame, sa dette er ikke bare pynt. */
.ad-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dimmer);
}

.ad-banner {
  margin: 14px 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-ad);
  border: 1px solid var(--border-ad);
}

.ad-banner .ad-label { padding: 9px 13px 0; }

.ad-banner .ad-creative {
  height: 120px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 0.1em;
  color: var(--accent-bright);
  background: linear-gradient(125deg, var(--ad-g1) 0%, var(--ad-g2) 55%, var(--ad-g3) 100%);
}

.ad-banner .ad-body {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ad-headline {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: var(--t-ad);
  line-height: 1.2;
  color: var(--text);
  margin: 0;
}

.ad-cta {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 6px 12px;
  border-radius: 5px;
}

/* Den ledige plassen. Den selger seg selv, sa den skal se ut som noe som
   mangler noe — stiplet ramme, ingen fylt flate, aksentfargen pa
   merkelappen. De to andre formatene later som de er annonser; denne
   later som ingenting.

   Den star med vilje ikke ut mer enn en ekte annonse ville gjort: en
   plass som roper hoyere enn innholdet rundt, selger ikke plassen, den
   selger stoy. */
.ad-ledig {
  margin: 14px 0;
  border: 1px dashed var(--accent);
  border-radius: 12px;
  background: none;
  overflow: hidden;
}

.ad-ledig .ad-label { color: var(--accent); }

.ad-ledig-kropp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.ad-ledig-bilde { display: block; object-fit: cover; }

/* 1. Portrettet: den kompakte formen. Et rundt bilde ved siden av
      teksten, som en person i en kontaktliste — for det er det den er.
      Bildet krymper ikke nar setningen er lang. */
.ad-ledig-portrett {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
}

.ad-ledig-portrett .ad-ledig-bilde {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 2. Den brede: bildet som et band over teksten, med sola i. Formatet
      til bannerannonsene er 120 px hoyt, og et ansikt far ikke plass der
      — kuttet ville gatt gjennom haka. Var egen plass trenger ikke
      folge deres mal. */
.ad-ledig-bred .ad-ledig-bilde {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.ad-ledig-bred .ad-ledig-kropp { padding: 12px 13px 14px; }

/* 3. Det hoye kortet: bildet er flata, og teksten ligger oppa
      gradienten nederst — samme grep som toppsaken i feeden. Derfor
      --on-overlay og ikke temaets tekstfarge: gradienten er mork i
      begge temaer. */
.ad-ledig-hoy {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 420px;
}

.ad-ledig-hoy .ad-ledig-bilde {
  width: 100%;
  height: 100%;
}

.ad-ledig-overlegg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  background: linear-gradient(transparent, var(--overlay-hero));
}

.ad-ledig-hoy .ad-headline { color: var(--on-overlay); }

/* Merket og knappen ligger ogsa oppa gradienten. Aksentfargen er lys nok
   i begge temaer, men merket skal leses mot morkt her, ikke mot kortet. */
.ad-ledig-hoy .ad-label { color: var(--on-overlay-dim); }

/* Oppsettet star i overskriften, poenget pa linja under. Delt i to er
   vitsen en vits; i én setning er den en opplysning. */
.ad-ledig .ad-sub { margin-top: -2px; }
.ad-ledig-hoy .ad-sub { color: var(--on-overlay-dim); }

/* Spoken. Samme fasonger som den ledige plassen, men ikke aksentfargens
   stiplede ramme: den sier «her er det plass», og det gjor ikke denne.
   En heltrukken, dempet ramme sier «dette er et kort», og merket sier
   hva slags kort. */
.ad-spok {
  border-style: solid;
  border-color: var(--border);
}

/* Merket skal vaere lett a se uten a rope. Det er ikke en advarsel — det
   er halve vitsen at den star der og innrommer hva den er. */
.ad-spok .ad-label { color: var(--text-dimmer); }
.ad-spok.ad-ledig-hoy .ad-label { color: var(--on-overlay-dim); }

/* Lenka til Messenger. Samme form som en ad-cta, men den er en ekte
   lenke — den gar et sted. */
a.ad-cta {
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a.ad-cta:hover { opacity: 0.88; }

a.ad-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Stripa gar helt ut i kanten og bryter feedens marg. Det ene grepet er
   det som gjor den umiskjennelig, uten at den trenger a vaere stor. */
.ad-stripe {
  margin: 14px -14px;
  padding: 14px;
  background: var(--bg-ad-stripe);
  border-top: 1px solid var(--border-ad);
  border-bottom: 1px solid var(--border-ad);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ad-stripe .ad-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ad-stripe .ad-brand {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--accent-soft);
}

.ad-sub { font-size: 11.5px; color: var(--text-dimmer); }

.detail-wrap {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.detail-wrap.open {
  display: flex;
}

/* Knappen ligger utenfor kortet som ruller, sa den blir staende i
   hjornet uansett hvor langt ned i artikkelen leseren er. */
.detail-shell {
  position: relative;
  width: 390px;
  max-width: 92%;
  /* Hoydegrensen ma sta her. Star den pa kortet, regnes prosenten mot
     skallet, som ikke har egen hoyde, og kortet blir uendelig hoyt. */
  max-height: 88%;
  display: flex;
}

.corner-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 14, 38, 0.62);
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.corner-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.detail-card {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: var(--bg-app);
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  padding: 0 0 20px;
}

.detail-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.detail-body {
  padding: 16px 18px 0;
}

.detail-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: var(--t-detail);
  line-height: 1.25;
  color: var(--text-strong);
  margin: 0 0 8px;
}

.detail-excerpt {
  font-size: var(--t-excerpt);
  line-height: 1.6;
  color: var(--text-body);
}

.detail-content {
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--text-body);
}

.detail-content p { margin: 0 0 14px; }

.detail-content h2,
.detail-content h3,
.detail-content h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin: 22px 0 8px;
}

.detail-content h2 { font-size: 18px; }
.detail-content h3 { font-size: 16.5px; }
.detail-content h4 { font-size: 15px; }

.detail-content img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin: 6px 0 12px;
}

.detail-content figure { margin: 0 0 14px; }

.detail-content figcaption {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dimmer);
}

.detail-content iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 10px;
  margin: 6px 0 14px;
  background: var(--bg-raised);
}

.detail-content a { color: var(--accent); }

.detail-content ul, .detail-content ol {
  margin: 0 0 14px;
  padding-left: 20px;
}

.detail-content li { margin-bottom: 6px; }

.detail-content blockquote {
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 2px solid var(--border-btn);
  color: var(--text-dim);
}

.detail-content pre {
  overflow-x: auto;
  background: var(--bg-raised);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
}

.detail-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 14px;
}

.detail-content th, .detail-content td {
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
}

.read-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* Deling av en enkeltsak (#146). To knapper, og de sender IKKE samme
   adresse: «Del saken» gaar til sportsbibelen.no og kan bli et kort med
   bilde der den limes inn; «Del i appen» aapner saken her, men staar
   naken overalt fordi en hash aldri naar en tjener.
   Folgen staar UNDER navnet, i mindre skrift: to knapper som bare het
   «Del» og «Del» ville vaert det ene tilfellet regelen forbyr. */
.del-boks {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-faint);
}

.del-rad {
  display: flex;
  gap: 8px;
}

/* `flex: 1` og ikke faste bredder: den ene knappen staar alene naar saken
   mangler en adresse pa nettstedet, og en halv knapp med et hull ved
   siden av leses som noe som mangler. */
.del-knapp {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--border-btn);
  border-radius: 10px;
  background: none;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.del-knapp:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.del-navn {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.del-folge {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-dim);
}

.del-notat {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* [hidden] maa si noe her: .del-notat setter ingen display, saa
   nettleserens eget stilark gjelder — men regelen staar likevel, fordi
   neste som gir den en display-verdi ellers faar et notat som staar
   framme naar koden tror det er skjult. */
.del-notat[hidden] { display: none; }

.close-btn, .retry-btn {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: 1px solid var(--border-btn);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.close-btn:focus-visible, .retry-btn:focus-visible, .read-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.err-details {
  margin-top: 22px;
  text-align: left;
  font-size: 11.5px;
  color: var(--text-faint);
}

.err-details summary {
  cursor: pointer;
  text-align: center;
  margin-bottom: 8px;
}

.err-line {
  margin: 0 0 6px;
  word-break: break-word;
  line-height: 1.45;
}

/* ---------- vis flere ---------- */

.vis-flere {
  display: block;
  width: 100%;
  margin: 16px 0 4px;
  padding: 12px;
  border: 1px solid var(--border-btn);
  border-radius: 8px;
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.vis-flere:disabled { color: var(--text-dimmer); cursor: default; }

.vis-flere:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- sok ---------- */

.sok {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sok-felt {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--border-btn);
  border-radius: 8px;
  background: var(--bg-page);
  color: var(--text);
  font-family: inherit;
  /* Samme grunn som .konto-felt: under 16 px zoomer iPhone inn i det du
     trykker i feltet, og da kan sida dras sidelengs. */
  font-size: 16px;
}

.sok-felt::placeholder { color: var(--text-dimmer); }

.sok-knapp {
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.sok-felt:focus-visible, .sok-knapp:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- relaterte saker ---------- */

.relatert { display: flex; flex-direction: column; }

.relatert-tittel {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 20px 0 2px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.relatert-rad {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--border-faint);
  background: none;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}

.relatert-navn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: var(--t-row);
  line-height: 1.25;
  color: var(--text);
}

.relatert-tid { font-size: var(--t-meta); color: var(--text-dimmer); }

.relatert-rad:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- bunnfaner ---------- */

/* Faneraden ligger som siste barn i .phone, sa den tar plass i stedet for
   a legge seg over feeden. En overlagt rad ville skjult den siste saken. */
.tabbar {
  display: flex;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-app);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 8px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.tab[aria-current="true"] { color: var(--accent); }

.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.tab-ico { font-size: 15px; line-height: 1; }

/* Merkingen skal si «tidlig versjon» uten a rope. Den star bade her og i
   toppfeltet nar modulen er apen. */
.beta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--bg-raised);
  color: var(--text-dim);
}

.tab[aria-current="true"] .beta { background: var(--accent); color: var(--accent-ink); }

/* ---------- fotball (beta) ---------- */

.fotball {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* body setter ingen tekstfarge — hver del av appen setter sin egen. Uten
     denne arver tallene i tabellen nettleserens svarte standard, som er
     usynlig i morkt tema. */
  color: var(--text-body);
}

/* Attributtet vinner over display: flex, ellers ville seksjonen statt
   framme selv nar den er skrudd av. */
.fotball[hidden] { display: none; }

/* Ligaene og fanene star under hverandre, ikke ved siden av. Pa 390 piksler
   ma «Premier League» og «Neste runde» ellers kuttes, og et kuttet valg
   leses som et valg du ikke har. */
.fotball-topp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.fotball-topp .segment-del { flex: 1; text-align: center; }

/* Unntaket: et segment som bryter over flere linjer. Knappene tar da
   bredden navnet trenger, ikke en like stor del hver. Med flex:1 far den
   siste linja — som ofte har ett navn — hele bredden, og «Serie A» som en
   pille pa 354 px under fire vanlige leses som en feil, ikke som en liga.
   Sentreringen i .segment-flerlinje gjor at en kort siste linje ser
   villet ut.

   Regelen star her og ikke oppe ved .segment-flerlinje fordi den
   overstyrer linja over: like mange klasser, og da vinner den siste. */
.fotball-topp .segment-flerlinje .segment-del { flex: 0 0 auto; }

.fotball-innhold {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 20px;
}

/* Tabellen er bredere enn en telefon. Den ruller i sitt eget felt, sa
   selve siden aldri ruller sidelengs. */
.tabell-skall {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabell {
  width: 100%;
  /* INGEN min-width, og det er et funn framfor en forglemmelse.
     Den sto pa 316px, med begrunnelsen «lavt nok til at alle atte
     kolonnene far plass pa en telefon». Det stemte ikke: en iPhone 13
     mini er 375px bred, body tar 10px pa hver side, og feltet blir 310px.
     316 er storre enn 310 — sa den TVANG tabellen seks piksler forbi
     skjermen og skjov poengkolonnen ut. Meldt fra prod 16. september 2026.
     Og den andre halvdelen av begrunnelsen, «hoyt nok til at tallene ikke
     klemmes sammen», gjor white-space: nowrap under alt: tallcellene kan
     ikke bli smalere enn innholdet sitt. En px-verdi her var et gjett pa
     feltets bredde, og feltets bredde avhenger av telefonen. */
  border-collapse: collapse;
  font-size: calc(13px * var(--fs));
  font-variant-numeric: tabular-nums;
}

.tabell th,
.tabell td {
  /* Trangt med vilje: fire piksler til pa hver side skjover poengkolonnen
     ut av skjermen, og poeng er det forste man ser etter i en tabell. */
  padding: 7px 4px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-faint);
}

.tabell th {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Lagnavnet star helt. Kuttet det seg selv med ellipse, ville tabellen
   aldri rullet — og et halvt lagnavn er verre enn en kolonne du drar til. */
.tabell .kol-lag {
  text-align: left;
  width: 100%;
  color: var(--text-strong);
  font-weight: 600;
  /* Et langt lagnavn brytes over to linjer framfor a gjore tabellen
     bredere enn telefonen. */
  white-space: normal;
}

.tabell .kol-poeng { color: var(--text-strong); font-weight: 700; }

/* Lagnavnet er en knapp inn i nyhetene om laget. Den skal se ut som
   teksten den er, ikke som en knapp — understreket forst ved bruk, slik
   lenker i artikkelteksten oppforer seg. */
/* Knappen baerer et merke og et navn. Teksten skal fortsatt kunne brytes
   over to linjer nar navnet er langt — det er det som holder tabellen
   smalere enn telefonen. */
.lag-knapp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.lag-knapp:hover { text-decoration: underline; }

.lag-knapp:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Merket ved lagnavnet. Fast storrelse i piksler, ikke skalert av --fs:
   det er et bilde, ikke tekst, og et merke som vokser med skriften ville
   skjovet tabellen bredere nettopp nar den alt er trang. */
.lag-merke {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* min-width: 0 lar boksen krympe i flex-raden. Men teksten har fortsatt
   en minstebredde: det lengste ORDET. «Kristiansund» kunne ikke brytes, og
   da kunne ikke tabellen bli smalere enn det ordet pluss lagmerket — uansett
   hvor smal telefonen var.
   overflow-wrap: anywhere lar ordet brytes NAR DET MA, og — det er poenget —
   teller med i min-content-bredden, sa tabellen faktisk kan krympe.
   Et brukket lagnavn er styggere enn et helt. En tabell man ma dra i for a
   se poengsummen er verre. */
.lag-navn { min-width: 0; overflow-wrap: anywhere; }

/* Stjerna har sin egen kolonne, forst i raden. Ingen luft til venstre:
   tabellen er trang, og cellens egen padding holder den fra kanten. */
.tabell .kol-stjerne {
  width: 26px;
  padding-left: 0;
  padding-right: 2px;
  text-align: left;
}

.lag-stjerne {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: -6px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lag-stjerne svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.lag-stjerne[aria-pressed="true"] { color: var(--accent); }
.lag-stjerne[aria-pressed="true"] svg { fill: currentColor; }

.lag-stjerne:hover { background: var(--bg-raised); }

.lag-stjerne:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.tabell tbody tr:last-child td { border-bottom: 0; }

/* ---------- kampliste ---------- */

.kamper { list-style: none; margin: 0; padding: 0; }

/* Overskrifta over en bolk i runden. Den star bare nar rekkefolgen er
   endret — ellers er runden en tidsrekke, og da skal den se ut som en.
   Samme tanke som linja over feeden nar favorittlag loftes: ingenting
   skjules, men leseren skal se hvorfor rekkefolgen ikke er den hen
   ventet. */
.kamp-bolk {
  list-style: none;
  margin: 14px 0 2px;
  padding: 0 2px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: calc(14px * var(--fs));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.kamp-bolk:first-child { margin-top: 0; }

/* Runden over dagene. Lista rekker flere helger fram na, og uten denne
   er «lordag 27. sep» det eneste som skiller neste runde fra den etter.
   Hairline over og ikke aksentfarge: det er et skille i en tidsrekke, ikke
   en pastand om at noe er endret — den rollen har .kamp-bolk. */
.kamp-runde {
  list-style: none;
  margin: 18px 0 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border-faint);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: calc(15px * var(--fs));
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.kamper > .kamp-runde:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.kamp-dag {
  margin: 14px 0 6px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kamper > .kamp-dag:first-child { margin-top: 0; }

/* Rett under runden trenger dagen ingen luft av egen: to overskrifter med
   full avstand mellom seg leses som to seksjoner, ikke som én. */
.kamp-runde + .kamp-dag { margin-top: 6px; }

/* Tidligere runder i Resultater.

   Fanen henter hele sesongen na, ikke de ti siste kampene. Ved runde 23
   er det over halvannet hundre rader, og det er ingen liste noen leser:
   siste runde staar framme, resten ligger bak knappen. Samme form som
   «Trykk her for puber i andre byer» i kortet — en vei videre, ikke en
   liste i seg selv.

   Begge er `li`, for de ligger i en `ul`: et `div` der ville gitt en
   liste med et barn som ikke er et listepunkt. */
.kamp-tidligere-rad, .kamp-tidligere-holder { list-style: none; }

.kamp-tidligere-apne {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--border-faint);
  background: none;
  text-align: left;
  font-size: calc(13px * var(--fs));
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* Lista arver `.kamper`, saa den har alt sine marger. Regelen her sier
   bare hva [hidden] betyr — uten den ville en `display` lenger oppe
   slatt nettleserens eget stilark, og lista statt framme mens koden tror
   den er skjult. */
.kamp-tidligere[hidden] { display: none; }

/* Raden er beholderen: rammen rundt den valgte kampen tegnes her, sa
   den omslutter vaeret, puben og panelet — alt som horer til kampen.
   .kamp-linje er selve kamplinja, og det er bare den trykkflata dekker;
   ellers kunne man ikke trykke pa valgene i panelet under. */
.kamp {
  position: relative;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-faint);
}

.kamp-linje {
  position: relative;
  display: grid;
  /* Resultatet i midten holder samme bredde uansett lagnavn, sa kolonnen
     star loddrett ned gjennom listen. */
  grid-template-columns: 1fr 76px 1fr;
  align-items: center;
  gap: 6px;
  min-height: 26px;
}

.kamp-lag {
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kamp-borte { text-align: right; }

/* Delbar kamp: en fjerde, smal kolonne for pilen. */
.kamp.delbar > .kamp-linje { grid-template-columns: 1fr 76px 1fr 30px; }

/* Trykkflata: en ekte knapp utstrakt over kamplinja. Raden kan ikke selv
   vaere en knapp — den inneholder pubnavn-knappen, og en knapp i en knapp
   finnes ikke — sa dette er maten hele linja blir trykkbar pa uten at
   tastaturet mister noe. Ett mal per kamp. */
.kamp-del {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

/* Flata skal ALDRI male noe selv. Den ligger over lagnavnene — den ma,
   for a fange trykk hvor som helst pa linja — sa en bunnfarge her legger
   seg rett over teksten. Pa telefon henger :hover igjen etter et trykk,
   og da ble lagnavnene borte for godt. Markeringen hoerer hjemme pa raden
   under, ikke pa flata over.
   :has() gjor at raden kjenner sin egen knapp. Uten stotte uteblir bare
   hover-fargen; rammen og fokusrammen star uansett. Og bare der pekeren
   faktisk kan sveve: pa berøring finnes ikke hover, bare et ekko av det. */
@media (hover: hover) {
  .kamp:has(.kamp-del:hover) > .kamp-linje { background: var(--bg-raised); }
  .kamp.valgt:has(.kamp-del:hover) > .kamp-linje { background: none; }
}

.kamp-linje { border-radius: 8px; }

.kamp-del:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Pilen er dekor: den sier at raden kan apnes, og hvilken vei den star.
   pointer-events: none, sa trykket gar til flata under uansett hvor pa
   linja det traff. */
.kamp-pil {
  justify-self: end;
  width: 30px;
  height: 30px;
  margin: -4px 0;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
  transition: transform 140ms ease;
}

.kamp.valgt .kamp-pil { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .kamp-pil { transition: none; }
}

/* Den valgte kampen. Rammen er det tydeligste vi har: den sier at alt
   innenfor — tid, vaer, pub og panel — handler om denne ene kampen. */
.kamp.valgt {
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  padding: 9px 10px 11px;
  margin: 4px -6px;
  background: var(--accent-wash);
}

/* Naboen under mister sin egen strek nar rammen allerede skiller dem. */
.kamp.valgt + .kamp { border-top: 0; }

/* Vaeret star under lagene, over hele bredden av raden. */
.kamp-vaer {
  margin-top: 5px;
  font-size: calc(12px * var(--fs));
  line-height: 1.4;
  color: var(--text-dim);
}

.kamp-vaer[hidden] { display: none; }

/* Kampen som ble delt med deg, loftet ut av runden: en runde er ti like
   rader, og lenka pekte pa en av dem.
   Klassen het .kamp-delt til den kolliderte med vokteren for .kamp-del:
   den matcher pa tekst, og trykkflata far aldri male noe. To navn en
   bokstav fra hverandre som betydde helt ulike ting — knappen som deler,
   og kampen som ble delt. */
.kamp-invitert {
  border-radius: 10px;
  padding: 9px 10px 11px;
  margin: 4px -6px;
  background: var(--accent-wash);
}

.kamp-invitasjon {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: calc(12px * var(--fs));
  line-height: 1.4;
  color: var(--text-dim);
}

.kamp-invitasjon-svar {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.kamp-invitasjon-svar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* «Tre blir med: Ola, Kari og Per» under kampen, som «vises pa»-linja:
   den som blar gjennom runden skal se det uten a apne noe. */
.kamp-blirmed {
  margin-top: 4px;
  font-size: calc(12px * var(--fs));
  line-height: 1.4;
  color: var(--text-dim);
}

.kamp-blirmed-merke { color: var(--bekreftet); font-weight: 700; margin-right: 4px; }

/* Vennene som har planlagt turen, nederst i kortet: «List opp nederst
   venner som har planlagt turen dit». Linja under kampen sier hvor mange;
   dette sier hvor man moter dem. */
.kamp-panel-liste {
  display: flex;
  flex-direction: column;
  font-size: calc(12px * var(--fs));
  line-height: 1.4;
  color: var(--text-dim);
}

.kamp-panel-liste:empty { display: none; }

/* Igjen nederst i kortet: bare de som sa at de blir med uten aa si hvor.
   Alle andre staar i raden til stedet sitt — stedet og folka er én ting,
   og det var hele poenget med aa flytte dem opp. */
.sted-rad {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-top: 2px;
}

.sted-rad-navn { color: var(--text-dim); }
.sted-rad-uten { color: var(--text-faint); }

/* Star det ingenting a trykke pa, skal det sta hvorfor. */
.kamp-note {
  margin: 0;
  font-size: calc(12px * var(--fs));
  line-height: 1.5;
  color: var(--text-dim);
}

/* Panelet ligger inne i den valgte kampen, innenfor rammen. Det trenger
   derfor ingen egen strek under — rammen er skillet. */
.kamp-panel {
  padding: 10px 0 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kamp-panel-tittel {
  margin: 0;
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  color: var(--text-strong);
}

/* Kanalen som sender kampen. En opplysning, ikke en handling: ingen
   ramme, ingen flate, ingen knapp — den skal ikke se ut som stedene
   under, som er det man kan trykke paa. */
.kamp-kanal {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: calc(12px * var(--fs));
  color: var(--text-dim);
}

.kamp-kanal-merke {
  flex: none;
  /* Dekor. Navnet ved siden av sier det samme, og en skjermleser skal
     ikke lese «fjernsyn» for et ord den alt far. */
  speak: none;
}

.kamp-kanal-navn {
  min-width: 0;
}

/* Stedene: kortets ene handling, én rad per sted.
   Raden baerer navnet, folka som skal dit, og én knapp som sier hva den
   gjor. Fer var den en chip, og trykket paa chipen var hele svaret — det
   var for lite aa se, sa man trykket en gang til for aa sjekke og meldte
   seg av uten aa merke det.

   Radene ligger i en kolonne, ikke som chips som flyter: navnene under
   stedet gjor hver rad ulik hoy, og en rad som er bred nok til navnene er
   lettere aa treffe enn en chip. */
.sted-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Avstanden til et sted, paa raden. «Bernie's» og «Bernie's 392 km» er to
   ulike svar, og bare det andre kan leses. */
.sted-avstand {
  margin-left: 6px;
  font-size: calc(11px * var(--fs));
  color: var(--text-faint);
  white-space: nowrap;
}

/* Overskrifta over stedene naer deg. Lista sto uten navn for, og da leste
   du den som et svar uten aa vite hva slags svar. */
.sted-overskrift {
  margin: 10px 0 4px;
  font-size: calc(14px * var(--fs));
  font-weight: 700;
  color: var(--text);
}

/* Hvor stedet er, paa sin egen linje under navnet: by, avstand, og om
   noen har meldt inn kampen. */
.sted-rad-hvor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.sted-rad-hvor[hidden] { display: none; }

/* «(bekreftet visning)» ved siden av stjerna. Merket alene er en
   konvensjon du maa laere; ordene er ikke. */
.sted-bekreftet-tekst {
  font-size: calc(11px * var(--fs));
  color: var(--bekreftet);
  white-space: nowrap;
}

/* Et sted vi har gjettet paa. Merket er sitt eget, og ordene under raden
   baerer forbeholdet: en antakelse som sier at den er en antakelse, er
   sann. Dempet, ikke roed — dette er ikke en feil, det er et forbehold. */
.sted-antatt-merke {
  margin-right: 4px;
  font-weight: 700;
  color: var(--text-faint);
}
.sted-antatt-tekst {
  font-size: calc(11px * var(--fs));
  color: var(--text-dim);
  white-space: nowrap;
}

/* Veien tilbake fra en antakelse, pa raden der antakelsen star.

   Dempet og liten: den skal finnes for den som vet bedre, ikke rope mot
   alle andre. En knapp i en knapp finnes ikke — raden er ikke selv en
   knapp, mens `.kamp-del` er, sa denne er soesken med ordene ved siden. */
.sted-si-fra {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: calc(11px * var(--fs));
  color: var(--text-dim);
  text-decoration: underline;
  cursor: pointer;
}
.sted-si-fra:hover, .sted-si-fra:focus-visible { color: var(--text-body); }

/* «Veien dit» — inn i telefonens eget kart.
   Samme stoerrelse og demping som byen og avstanden ved siden av: den er
   en opplysning paa raden, ikke et tilbud som skal konkurrere med
   «Jeg skal hit». Understreket fordi den ER en lenke ut av appen, og det
   skal staa.
   `nowrap` av samme grunn som avstanden: «Veien / dit» over to linjer
   leses som to ting. Trykkflata er hoyden paa raden, ikke bare teksten —
   ti px hoy tekst er ikke et maal en tommel treffer. */
.sted-kart {
  font-size: calc(11px * var(--fs));
  color: var(--text-dim);
  text-decoration: underline;
  white-space: nowrap;
  padding: 4px 0;
  margin: -4px 0;
}
.sted-kart:hover, .sted-kart:focus-visible { color: var(--text-body); }

/* Pubene i andre byer. Lukket til du trykker: for en kamp i kveld er de
   ikke et svar, for en kamp om tre dager er de hele svaret. */
.sted-andre { margin-top: 8px; }
.sted-andre-apne {
  display: block;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: calc(13px * var(--fs));
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.pub-forslag[hidden] { display: none; }

/* «Jeg er paa pub, legg inn her». Skjemaet laa bak to knapper for; na
   staar veien inn nederst i kortet, der du er naar du staar i doera. */
.sted-pavei {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-raised);
  font-size: calc(14px * var(--fs));
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

/* Byen, naar vi ikke kjenner avstanden. Samme plass og samme vekt som
   avstanden: det er det samme spoersmaalet — hvor er dette stedet — bare
   besvart med det vi har. */
.sted-by {
  margin-left: 6px;
  font-size: calc(11px * var(--fs));
  color: var(--text-faint);
  white-space: nowrap;
}

/* Har du valgt et sted, ligger resten bak denne. Stiplet, som .pub-mer, sa
   den ikke ser ut som enda et sted. */
.sted-mer {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: calc(12px * var(--fs));
  cursor: pointer;
}

.sted-mer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* `display: flex` slar [hidden] fra nettleserens eget stilark, sa den ma
   sies her — ellers star radene framme mens koden tror de er skjult. */
.sted-resten {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sted-resten[hidden] { display: none; }

/* «Vi kjenner ikke stedet. Send det inn?» Star mellom meldinga og lenka
   til stedene, sa den leses i det svaret nettopp ble gitt. */
.sted-tilbud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: calc(13px * var(--fs));
  color: var(--text-dim);
}

.sted-tilbud[hidden] { display: none; }

.sted-tilbud-knapp {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: calc(12px * var(--fs));
  font-weight: 500;
  cursor: pointer;
}

.sted-tilbud-knapp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sted-rad-kort {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-btn);
  border-radius: 12px;
  background: var(--bg-raised);
  color: var(--text);
}

.sted-rad-venstre { flex: 1; min-width: 0; }

.sted-rad-topp {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sted-navn {
  font-size: calc(14px * var(--fs));
  font-weight: 600;
  color: var(--text-strong);
}

/* Navnene under stedet. De bryter over flere linjer framfor aa gjore
   raden bredere enn telefonen — som lagnavnene i tabellen. */
.sted-rad-folk {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 3px;
  font-size: calc(12px * var(--fs));
  line-height: 1.4;
  color: var(--text-dim);
}

.sted-rad-flere { color: var(--text-faint); }

/* Knappen sier hva trykket gjor. Den er det eneste maalet i raden:
   raden kan ikke selv vaere en knapp naar den har en inni seg. */
.sted-knapp {
  flex: none;
  padding: 8px 12px;
  border: 1px solid var(--border-btn);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: calc(12.5px * var(--fs));
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* Stedet du sa du skal til. Gront som resten av «bekreftet»-familien:
   det er en avtale, ikke et valg i et skjema. */
.sted-rad-kort.valgt {
  border-color: var(--bekreftet);
  box-shadow: 0 0 0 1px var(--bekreftet);
}

.sted-rad-kort.valgt .sted-knapp {
  background: var(--bekreftet);
  border-color: var(--bekreftet);
  color: #fff;
}

/* Valgt uten aa vaere logget inn: stedet blir med naar kampen deles, men
   ingen er meldt paa noe. Aksentfargen og stiplet, sa det ikke ser ut som
   bekreftelsen paa at du staar paa lista — et sted som ser lagret ut naar
   ingenting er lagret, sier at det virket. */
.sted-rad-kort.valgt.kun-deling {
  border-color: var(--accent);
  border-style: dashed;
  box-shadow: none;
}

.sted-rad-kort.valgt.kun-deling .sted-knapp {
  background: none;
  border-color: var(--accent);
  border-style: dashed;
  color: var(--accent);
}

/* Stedet en delt lenke pekte paa. Det blir pekt ut, ikke valgt: svaret
   skal leseren gi selv. */
.sted-rad-kort.pekt {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.sted-rad-kort.bekreftet:not(.valgt) { border-color: var(--bekreftet); }

.sted-knapp:disabled { opacity: 0.5; cursor: default; }

.sted-merke { font-size: 11px; line-height: 1; }

.sted-knapp:focus-visible, .pub-apne:focus-visible, .sted-egen:focus-visible,
.kamp-send:focus-visible, .kamp-pub:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Veien til pubene som pleier a vise fotball. En lenke, ikke en knapp
   blant stedene: den apner noe, den svarer ikke pa noe. Har ingen meldt
   inn noe pa kampen, er den den eneste veien videre — da star lista
   apen med en gang, og lenka sier hva den er.

   Knappen bar ogsa .sted-rad-annet til 17. september 2026, fra den gangen
   den var tenkt som en stiplet rad i lista. Den klassen sa det motsatte
   av denne — «en rad i lista, ikke en tekstlenke under» — og tapte hver
   eneste egenskap til reglene her, som star senere i fila med lik
   spesifisitet. Malt: knappen var 181x18 px bade med og uten den. To
   kommentarer som sier motsatt om samme element er verre enn ingen: den
   som ikke lenger stemte er den som gikk. */
.pub-apne {
  align-self: flex-start;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: calc(12.5px * var(--fs));
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.pub-utvidet {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.pub-utvidet[hidden] { display: none; }

/* Et sted du skrev selv. Samme svar som en chip, bare med et navn vi
   ikke hadde pa lista. */
.sted-egen {
  align-self: flex-start;
  padding: 8px 13px;
  border: 1px solid var(--bekreftet);
  border-radius: 8px;
  background: var(--bekreftet);
  color: #fff;
  font-family: inherit;
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  cursor: pointer;
}

.sted-egen:disabled {
  background: none;
  color: var(--text-faint);
  border-color: var(--border-btn);
  cursor: default;
}

/* Pubforslagene: én rangert liste med chips, over feltet. Feltet er
   fortsatt sannheten; chipene bare fyller det.

   Ingen gruppeoverskrifter lenger. Seks grupper med hver sin tittel var
   stoy — rekkefolgen og merkene barer det de sa. */
.pub-forslag { display: flex; flex-direction: column; gap: 8px; }
.pub-forslag[hidden] { display: none; }

.pub-liste { display: flex; gap: 6px; flex-wrap: wrap; }

.pub-chip, .pub-mer, .pub-naer {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  font-family: inherit;
  font-size: calc(12.5px * var(--fs));
  font-weight: 500;
  cursor: pointer;
}

/* Veien til resten, og veien tilbake nar posisjonen ble avslatt. Stiplet,
   sa de ikke ser ut som enda et forslag. */
.pub-mer, .pub-naer {
  align-self: flex-start;
  border-style: dashed;
  color: var(--text-dim);
}

.pub-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.pub-chip[aria-pressed="true"] .pub-avstand { color: var(--accent-ink); opacity: 0.8; }

.pub-chip:focus-visible, .pub-mer:focus-visible, .pub-naer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pub-avstand { font-size: 11px; color: var(--text-faint); }
.pub-merke { font-size: 11px; line-height: 1; }
/* 📺 «Sender Eliteserien». Samme storrelse som ⚽, for de er samme slags
   opplysning om stedet — ikke om kampen. Ingen display-regel, sa
   [hidden] fra nettleserens eget stilark star urort. */
.pub-liga { font-size: 11px; line-height: 1; }

/* En pub som har meldt at den viser nettopp denne kampen. Stjerna er
   gronn og ikke bare enda et symbol: den svarer pa kampen, mens ballen
   bare sier at stedet pleier a vise fotball. */
.pub-bekreftet { font-size: 11px; line-height: 1; color: var(--bekreftet); font-weight: 700; }
.pub-chip.bekreftet { border-color: var(--bekreftet); }
.pub-chip.bekreftet[aria-pressed="true"] .pub-bekreftet { color: var(--accent-ink); }

.pub-note {
  margin: 0;
  font-size: 11px;
  color: var(--text-faint);
}

.kamp-pub {
  padding: 8px 10px;
  border: 1px solid var(--border-btn);
  border-radius: 8px;
  background: var(--bg-app);
  color: var(--text);
  font: inherit;
  font-size: calc(14px * var(--fs));
}


/* Delingen sender beskjeden til gruppechatten. Den er fortsatt verdt a
   ha, men lista i appen er det vennene ser — sa dette er en tekstknapp,
   ikke en fylt en. */
.kamp-send {
  align-self: flex-start;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.kamp-send:disabled { opacity: 0.45; cursor: default; }

.kamp-svar {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.kamp-svar:empty { display: none; }


.sted-forslag-skjema {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.sted-forslag-skjema[hidden] { display: none; }

/* Avkryssingsboksen «De viser fotball» sto her. Den er ute: feltet
   `viser_fotball` har én betydning per verdi na, og `false` er tipset.

   Tittelen sier hvilken av de to handlingene skjemaet er. To ulike
   handlinger i samme felt, og et skjema som ikke sier hvilken, er verre
   enn to skjemaer. `display: block` sier ogsa hva [hidden] betyr. */
.sted-forslag-tittel {
  display: block;
  margin: 0;
  font-size: calc(13.5px * var(--fs));
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-body);
}
.sted-forslag-tittel[hidden] { display: none; }

.sted-forslag-note {
  margin: 0;
  font-size: calc(11.5px * var(--fs));
  line-height: 1.5;
  color: var(--text-faint);
}

.kamp-notis {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}

.kamp-tall {
  text-align: center;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

/* Sesongen star over tabellen. Gratisnivaet hos API-Football gir ikke
   inneværende sesong, og en tabell fra i fjor som ser ut som arets er
   verre enn ingen tabell. */
.fotball-sesong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fotball-gammel {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-raised);
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.fotball-stempel {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--text-faint);
  font-size: 11px;
}

.fotball-kilde { color: var(--text-faint); }

/* ---------- mitt lag ----------

   Ett kort per favorittlag. Samme byggeklosser som resten av fotballen —
   tabellen er den samme tabellen, bare fem rader av den — og ingen nye
   farger utover utfallet. */
.mittlag-kort {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-app);
}

.mittlag-hode {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.mittlag-navn {
  margin: 0;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: calc(22px * var(--fs));
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.mittlag-liga {
  color: var(--text-dimmer);
  font-size: var(--t-label);
  font-weight: 600;
  white-space: nowrap;
}

.mittlag-plass {
  margin: 6px 0 0;
  color: var(--text);
  font-size: var(--t-body);
  font-weight: 600;
}

.mittlag-avstand, .mittlag-merknad, .mittlag-nar {
  margin: 2px 0 0;
  color: var(--text-dim);
  font-size: var(--t-meta);
}

.mittlag-merknad { margin-top: 8px; }

.mittlag-form {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 12px 0 0;
}

.mittlag-etikett, .mittlag-del {
  margin: 0 6px 0 0;
  color: var(--text-dimmer);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mittlag-del { margin: 16px 0 6px; }

.mittlag-utfall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-raised);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.mittlag-utfall[data-utfall="V"] { background: var(--seier); color: var(--pa-utfall); }
.mittlag-utfall[data-utfall="T"] { background: var(--tap); color: var(--pa-utfall); }

.mittlag-kamp {
  margin: 0;
  color: var(--text);
  font-size: var(--t-row);
  font-weight: 700;
}

.mittlag-lenke {
  display: inline-block;
  margin: 8px 0 0;
  color: var(--accent);
  font-size: var(--t-meta);
  font-weight: 700;
  text-decoration: none;
}

.mittlag-lenke:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mittlag-tabell .tabell-skall { margin: 0; }
.mittlag-egen td { background: var(--accent-wash); font-weight: 700; }

.mittlag-kamper { list-style: none; margin: 0; padding: 0; }

.mittlag-rad {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-faint);
  font-size: var(--t-excerpt);
  color: var(--text-body);
}

.mittlag-rad:last-child { border-bottom: 0; }
.mittlag-dato { flex: 0 0 52px; color: var(--text-dimmer); font-size: var(--t-meta); }
.mittlag-motstander { flex: 1; min-width: 0; }

.mittlag-sok, .mittlag-til-tabell {
  margin: 14px 0 0;
  padding: 9px 14px;
  border: 1px solid var(--border-btn);
  border-radius: 8px;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  cursor: pointer;
}

.mittlag-sok:focus-visible, .mittlag-til-tabell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}